Deploy Frontend to HF

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+npm-debug.log
+yarn-error.log
+pnpm-debug.log
+.git
+.gitignore
+.env
+.env.local
+dist
+build
+.DS_Store
+*.md
+coverage

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.env
+.DS_Store

Dockerfile

@@ -0,0 +1,35 @@
+# Utiliser une image Node officielle légère
+FROM node:20-alpine
+
+# Installer pnpm globalement
+RUN npm install -g pnpm
+
+# Définir le répertoire de travail
+WORKDIR /app
+
+# Copier les fichiers de dépendances
+# On suppose que le contexte de build est le dossier /frontend
+# et que le projet React est dans le sous-dossier afridatahub-frontend
+COPY afridatahub-frontend/package.json afridatahub-frontend/pnpm-lock.yaml ./
+
+# Installer les dépendances
+RUN pnpm install --frozen-lockfile
+
+# Copier le reste du code source
+COPY afridatahub-frontend/ .
+
+# Argument de build pour l'URL de l'API Backend
+# IMPORTANT: Vous devez définir cette variable (VITE_API_URL) dans les "Secrets" ou "Variables" de votre Space Hugging Face
+# Valeur attendue: https://rinogeek-afridatahubbackend.hf.space/api/
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+
+# Construire l'application pour la production
+RUN pnpm run build
+
+# Exposer le port 7860 (Port par défaut pour HF Spaces)
+EXPOSE 7860
+
+# Lancer le serveur de prévisualisation Vite
+# --host permet d'écouter sur toutes les interfaces (0.0.0.0)
+CMD ["pnpm", "run", "preview", "--", "--port", "7860", "--host"]

README.md

@@ -0,0 +1,46 @@
+---
+title: AfriDataHub Frontend
+emoji: 🌍
+colorFrom: green
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# AfriDataHub Frontend
+
+This is the user interface for **AfriDataHub**, an interactive platform for exploring African data through advanced visualizations and AI insights.
+
+## 🎨 Features
+
+-   **Interactive Maps**: Real-time visualization of data across the African continent.
+-   **AI Dashboard**: Predictive analytics and insights generated by Gemini.
+-   **Dynamic Charts**: Rich data visualization using Recharts.
+-   **Responsive Design**: Modern UI built with Tailwind CSS and Framer Motion.
+
+## 🛠 Technology Stack
+
+-   **Framework**: React (Vite)
+-   **Styling**: Tailwind CSS
+-   **State Management**: React Hooks
+-   **Maps**: React Simple Maps
+-   **Icons**: Lucide React
+
+## 🚀 Deployment
+
+This application is containerized using Docker and is designed to run on Hugging Face Spaces.
+
+### Environment Configuration
+
+To connect to the backend, ensure you set the `VITE_API_URL` variable in your Space settings:
+
+-   `VITE_API_URL`: `https://rinogeek-afridatahubbackend.hf.space/api/` (or your specific backend URL).
+
+## 📦 Run Locally
+
+```bash
+cd afridatahub-frontend
+pnpm install
+pnpm run dev
+```

afridatahub-frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "",
+    "css": "src/App.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

afridatahub-frontend/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

afridatahub-frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AfriDataHub - Plateforme de données africaines ouvertes</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

afridatahub-frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

afridatahub-frontend/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "afridatahub-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
+    "@radix-ui/react-aspect-ratio": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-toggle-group": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "@tailwindcss/vite": "^4.1.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.15.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.510.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.3",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.2",
+    "react-router-dom": "^7.6.1",
+    "react-simple-maps": "^3.0.0",
+    "recharts": "^2.15.3",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss": "^4.1.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "baseline-browser-mapping": "^2.9.11",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "tw-animate-css": "^1.2.9",
+    "vite": "^6.3.5"
+  },
+  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
+}

afridatahub-frontend/src/App.css

@@ -0,0 +1,205 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 1rem;
+  --background: oklch(0.98 0.01 240);
+  --foreground: oklch(0.15 0.02 240);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.02 240);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.02 240);
+  --primary: oklch(0.55 0.25 260);
+  /* Vibrant Indigo/Violet */
+  --primary-foreground: oklch(0.98 0.01 240);
+  --secondary: oklch(0.65 0.2 330);
+  /* Vibrant Pink/Magenta */
+  --secondary-foreground: oklch(0.98 0.01 240);
+  --muted: oklch(0.92 0.02 240);
+  --muted-foreground: oklch(0.45 0.05 240);
+  --accent: oklch(0.85 0.15 190);
+  /* Cyan/Teal accent */
+  --accent-foreground: oklch(0.15 0.02 240);
+  --destructive: oklch(0.6 0.2 25);
+  --border: oklch(0.9 0.02 240);
+  --input: oklch(0.9 0.02 240);
+  --ring: oklch(0.55 0.25 260);
+
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.3);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+}
+
+.dark {
+  --background: oklch(0.12 0.02 240);
+  --foreground: oklch(0.95 0.01 240);
+  --card: oklch(0.16 0.03 240);
+  --card-foreground: oklch(0.95 0.01 240);
+  --popover: oklch(0.16 0.03 240);
+  --popover-foreground: oklch(0.95 0.01 240);
+  --primary: oklch(0.65 0.2 260);
+  --primary-foreground: oklch(0.12 0.02 240);
+  --secondary: oklch(0.7 0.15 330);
+  --secondary-foreground: oklch(0.12 0.02 240);
+  --muted: oklch(0.2 0.04 240);
+  --muted-foreground: oklch(0.7 0.02 240);
+  --accent: oklch(0.4 0.15 190);
+  --accent-foreground: oklch(0.95 0.01 240);
+  --destructive: oklch(0.5 0.2 25);
+  --border: oklch(0.25 0.04 240);
+  --input: oklch(0.25 0.04 240);
+  --ring: oklch(0.65 0.2 260);
+
+  --glass-bg: rgba(20, 20, 30, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+}
+
+@layer utilities {
+  .glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+  }
+
+  .text-gradient {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .bg-mesh {
+    background-color: var(--background);
+    background-image:
+      radial-gradient(at 0% 0%, oklch(0.55 0.25 260 / 0.15) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, oklch(0.65 0.2 330 / 0.15) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, oklch(0.85 0.15 190 / 0.1) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, oklch(0.55 0.25 260 / 0.1) 0px, transparent 50%);
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .shadow-premium {
+    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.1), 0 10px 20px -10px rgba(0, 0, 0, 0.05);
+  }
+
+  .hover-lift {
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
+  }
+
+  @keyframes float {
+    0% {
+      transform: translateY(0px);
+    }
+
+    50% {
+      transform: translateY(-10px);
+    }
+
+    100% {
+      transform: translateY(0px);
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Prose styles for Markdown parsing */
+.prose {
+  max-width: none;
+  color: inherit;
+}
+
+.prose p {
+  margin-bottom: 1.25em;
+}
+
+.prose strong {
+  font-weight: 700;
+  color: inherit;
+}
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.625em;
+  margin-bottom: 1.25em;
+}
+
+.prose li {
+  margin-bottom: 0.5em;
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+  font-weight: 700;
+  margin-top: 1.5em;
+  margin-bottom: 0.75em;
+}
+
+.prose-lg {
+  font-size: 1.125rem;
+  line-height: 1.75;
+}
+
+.prose-indigo {
+  --tw-prose-bullets: var(--color-indigo-500);
+}

afridatahub-frontend/src/App.jsx

@@ -0,0 +1,207 @@
+/**
+ * Application principale AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect } from 'react'
+import Navigation from './components/Navigation'
+import Dashboard from './components/Dashboard'
+import Datasets from './components/Datasets'
+import Analytics from './components/Analytics'
+import Alerts from './components/Alerts'
+import Profile from './components/Profile'
+import Login from './components/Login'
+import Register from './components/Register'
+import DatasetAnalysis from './components/DatasetAnalysis'
+import APIDocumentation from './components/APIDocumentation'
+import LandingPage from './components/LandingPage'
+import { motion } from 'framer-motion'
+import { getCurrentUser, logout } from './services/auth'
+import './App.css'
+
+function App() {
+  const [currentPage, setCurrentPage] = useState('landing')
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const currentUser = getCurrentUser()
+    if (currentUser) {
+      setUser(currentUser)
+      if (currentPage === 'landing') {
+        setCurrentPage('dashboard')
+      }
+    }
+    setLoading(false)
+  }, [])
+
+  const [selectedDataset, setSelectedDataset] = useState(null)
+  const [analysisData, setAnalysisData] = useState(null)
+
+  const handleLoginSuccess = (userData) => {
+    setUser(userData)
+    setCurrentPage('dashboard')
+  }
+
+  const handleLogout = () => {
+    logout()
+    setUser(null)
+    setCurrentPage('landing')
+  }
+
+  const handleStartAnalysis = (dataset, data) => {
+    setSelectedDataset(dataset)
+    setAnalysisData(data)
+    setCurrentPage('dataset-analysis')
+  }
+
+  const renderCurrentPage = () => {
+    if (!user) {
+      if (currentPage === 'register') {
+        return <Register
+          onRegisterSuccess={handleLoginSuccess}
+          onNavigateToLogin={() => setCurrentPage('login')}
+          onNavigateToLanding={() => setCurrentPage('landing')}
+        />
+      }
+      if (currentPage === 'login') {
+        return <Login
+          onLoginSuccess={handleLoginSuccess}
+          onNavigateToRegister={() => setCurrentPage('register')}
+          onNavigateToLanding={() => setCurrentPage('landing')}
+        />
+      }
+      return <LandingPage
+        onGetStarted={() => setCurrentPage('register')}
+        onLogin={() => setCurrentPage('login')}
+      />
+    }
+
+    switch (currentPage) {
+      case 'dashboard':
+        return <Dashboard />
+      case 'datasets':
+        return <Datasets onStartAnalysis={handleStartAnalysis} />
+      case 'analytics':
+        return <Analytics />
+      case 'alerts':
+        return <Alerts />
+      case 'profile':
+        return <Profile user={user} onUpdateUser={setUser} />
+      case 'api-docs':
+        return <APIDocumentation />
+      case 'dataset-analysis':
+        return (
+          <DatasetAnalysis
+            dataset={selectedDataset}
+            analysisData={analysisData}
+            onBack={() => setCurrentPage('datasets')}
+          />
+        )
+      default:
+        return <Dashboard />
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-background">
+        <div className="relative w-20 h-20 mb-6">
+          <div className="absolute inset-0 border-4 border-primary/20 rounded-full"></div>
+          <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+        </div>
+        <p className="text-xl font-black text-foreground animate-pulse">Initialisation d'AfriDataHub...</p>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-mesh relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5"></div>
+        <div className="relative z-10">
+          {renderCurrentPage()}
+        </div>
+      </div>
+    )
+  }
+
+  const isAnalysisPage = currentPage === 'dataset-analysis'
+
+  return (
+    <div className="min-h-screen bg-background relative selection:bg-primary/30">
+      {/* Global Background Elements */}
+      <div className="fixed inset-0 bg-mesh opacity-40 pointer-events-none"></div>
+      <div className="fixed top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
+
+      <Navigation
+        currentPage={isAnalysisPage ? 'datasets' : currentPage}
+        onPageChange={setCurrentPage}
+        user={user}
+        onLogout={handleLogout}
+      />
+
+      <main className={`${isAnalysisPage ? '' : 'max-w-7xl mx-auto px-6 lg:px-8'} pt-12 relative z-10`}>
+        <motion.div
+          key={currentPage}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          {renderCurrentPage()}
+        </motion.div>
+      </main>
+
+      {/* Footer Premium */}
+      <footer className="relative z-10 mt-20 border-t border-white/10 bg-white/5 backdrop-blur-xl">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8 py-16">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+            <div className="col-span-1 md:col-span-2">
+              <div className="flex items-center space-x-3 mb-6">
+                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/20">
+                  <span className="text-white font-black text-xl">A</span>
+                </div>
+                <span className="text-2xl font-black text-foreground tracking-tighter">AfriDataHub</span>
+              </div>
+              <p className="text-muted-foreground font-medium text-lg max-w-md leading-relaxed">
+                La plateforme d'intelligence de données leader pour le continent africain.
+                Propulsé par l'IA pour des décisions basées sur la vérité.
+              </p>
+            </div>
+            <div>
+              <h4 className="text-foreground font-black uppercase tracking-widest text-xs mb-6">Plateforme</h4>
+              <ul className="space-y-4">
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Datasets</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Analyses</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Alertes IA</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">API Cloud</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-foreground font-black uppercase tracking-widest text-xs mb-6">Ressources</h4>
+              <ul className="space-y-4">
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Documentation</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Guide Scientifique</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Support</a></li>
+                <li><a href="#" className="text-muted-foreground hover:text-primary font-bold transition-colors">Contact</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
+            <p className="text-muted-foreground font-bold text-sm">
+              © 2024 AfriDataHub. Créé avec passion par <span className="text-foreground">Marino ATOHOUN</span>.
+            </p>
+            <div className="flex items-center space-x-8">
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors"><span className="sr-only">Twitter</span>🐦</a>
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors"><span className="sr-only">GitHub</span>🐙</a>
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors"><span className="sr-only">LinkedIn</span>🔗</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+export default App

afridatahub-frontend/src/assets/africa.json

@@ -0,0 +1 @@
+{"type":"Topology","objects":{"default":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0]],[[1]],[[2,3]],[[4,5,6,7,8,9,10,11,12,13]]],"id":"UG","properties":{"hc-group":"admin0","hc-key":"ug","hc-a2":"UG","name":"Uganda","labelrank":"3","country-abbrev":"Uga.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"UGA","iso-a2":"UG","woe-id":"23424974","continent":"Africa","hc-middle-lon":32.752,"hc-middle-lat":1.666}},{"type":"MultiPolygon","arcs":[[[14]],[[15,16,17,18,19]]],"id":"NG","properties":{"hc-group":"admin0","hc-key":"ng","hc-a2":"NG","name":"Nigeria","labelrank":"2","country-abbrev":"Nigeria","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"NGA","iso-a2":"NG","woe-id":"23424908","continent":"Africa","hc-middle-lon":8.67,"hc-middle-lat":9.569}},{"type":"Polygon","arcs":[[20]],"id":"ST","properties":{"hc-group":"admin0","hc-key":"st","hc-a2":"ST","name":"Sao Tome and Principe","labelrank":"6","country-abbrev":"S.T.P.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"STP","iso-a2":"ST","woe-id":"23424966","continent":"Africa","hc-middle-lon":6.63,"hc-middle-lat":0.245}},{"type":"MultiPolygon","arcs":[[[21]],[[22]],[[23]],[[24]],[[25,26,27,28,29,30,31,32,33,34,35,36,37,38,-12,39,-4,40,41,42,43]]],"id":"TZ","properties":{"hc-group":"admin0","hc-key":"tz","hc-a2":"TZ","name":"United Republic of Tanzania","labelrank":"3","country-abbrev":"Tanz.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"TZA","iso-a2":"TZ","woe-id":"23424973","continent":"Africa","hc-middle-lon":34.683,"hc-middle-lat":-6.28}},{"type":"MultiPolygon","arcs":[[[44]],[[45,46,47]]],"id":"SL","properties":{"hc-group":"admin0","hc-key":"sl","hc-a2":"SL","name":"Sierra Leone","labelrank":"4","country-abbrev":"S.L.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SLE","iso-a2":"SL","woe-id":"23424946","continent":"Africa","hc-middle-lon":-12.32,"hc-middle-lat":8.106}},{"type":"MultiPolygon","arcs":[[[48]],[[49,50,51]]],"id":"GW","properties":{"hc-group":"admin0","hc-key":"gw","hc-a2":"GW","name":"Guinea Bissau","labelrank":"6","country-abbrev":"GnB.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GNB","iso-a2":"GW","woe-id":"23424929","continent":"Africa","hc-middle-lon":-15.078,"hc-middle-lat":11.834}},{"type":"MultiPolygon","arcs":[[[52]],[[53]],[[54]],[[55]],[[56]],[[57]]],"id":"CV","properties":{"hc-group":"admin0","hc-key":"cv","hc-a2":"CV","name":"Cape Verde","labelrank":"4","country-abbrev":"C.Vd.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"CPV","iso-a2":"CV","woe-id":"23424794","continent":"Africa","hc-middle-lon":-23.667,"hc-middle-lat":15.075}},{"type":"Polygon","arcs":[[58]],"id":"SC","properties":{"hc-group":"admin0","hc-key":"sc","hc-a2":"SC","name":"Seychelles","labelrank":"6","country-abbrev":"Syc.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SYC","iso-a2":"SC","woe-id":"23424941","continent":"Seven seas (open ocean)","hc-middle-lon":55.5,"hc-middle-lat":-4.702}},{"type":"MultiPolygon","arcs":[[[59]],[[60,61,62]]],"id":"TN","properties":{"hc-group":"admin0","hc-key":"tn","hc-a2":"TN","name":"Tunisia","labelrank":"3","country-abbrev":"Tun.","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"TUN","iso-a2":"TN","woe-id":"23424967","continent":"Africa","hc-middle-lon":9.523,"hc-middle-lat":33.217}},{"type":"MultiPolygon","arcs":[[[63]],[[64]]],"id":"MG","properties":{"hc-group":"admin0","hc-key":"mg","hc-a2":"MG","name":"Madagascar","labelrank":"3","country-abbrev":"Mad.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MDG","iso-a2":"MG","woe-id":"23424883","continent":"Africa","hc-middle-lon":46.348,"hc-middle-lat":-19.041}},{"type":"Polygon","arcs":[[65,-10,66,67,68,69,-42]],"id":"KE","properties":{"hc-group":"admin0","hc-key":"ke","hc-a2":"KE","name":"Kenya","labelrank":"2","country-abbrev":"Ken.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"KEN","iso-a2":"KE","woe-id":"23424863","continent":"Africa","hc-middle-lon":37.715,"hc-middle-lat":0.866}},{"type":"MultiPolygon","arcs":[[[70]],[[71,-6,72,-14,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,-8]]],"id":"CD","properties":{"hc-group":"admin0","hc-key":"cd","hc-a2":"CD","name":"Democratic Republic of the Congo","labelrank":"2","country-abbrev":"D.R.C.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"COD","iso-a2":"CD","woe-id":"23424780","continent":"Africa","hc-middle-lon":24.998,"hc-middle-lat":-7.296}},{"type":"MultiPolygon","arcs":[[[89]],[[90]]],"id":"FR","properties":{"hc-group":"admin0","hc-key":"fr","hc-a2":"FR","name":"France","labelrank":"2","country-abbrev":"Fr.","subregion":"Western Europe","region-wb":"Europe & Central Asia","iso-a3":"FRA","iso-a2":"FR","woe-id":"-90","continent":"Europe","hc-middle-lon":55.536,"hc-middle-lat":-21.156}},{"type":"MultiPolygon","arcs":[[[91,92,93,94,95]],[[96,96,96]],[[96,96,96]]],"id":"MR","properties":{"hc-group":"admin0","hc-key":"mr","hc-a2":"MR","name":"Mauritania","labelrank":"3","country-abbrev":"Mrt.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MRT","iso-a2":"MR","woe-id":"23424896","continent":"Africa","hc-middle-lon":-10.854,"hc-middle-lat":20.424}},{"type":"Polygon","arcs":[[97,98,99,-62,100,101,102,-92]],"id":"DZ","properties":{"hc-group":"admin0","hc-key":"dz","hc-a2":"DZ","name":"Algeria","labelrank":"3","country-abbrev":"Alg.","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"DZA","iso-a2":"DZ","woe-id":"23424740","continent":"Africa","hc-middle-lon":3.724,"hc-middle-lat":28.458}},{"type":"MultiPolygon","arcs":[[[103]],[[104,105,106,107]]],"id":"ER","properties":{"hc-group":"admin0","hc-key":"er","hc-a2":"ER","name":"Eritrea","labelrank":"4","country-abbrev":"Erit.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"ERI","iso-a2":"ER","woe-id":"23424806","continent":"Africa","hc-middle-lon":38.553,"hc-middle-lat":15.811}},{"type":"MultiPolygon","arcs":[[[108]],[[109,110,111]]],"id":"GQ","properties":{"hc-group":"admin0","hc-key":"gq","hc-a2":"GQ","name":"Equatorial Guinea","labelrank":"4","country-abbrev":"Eq. G.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GNQ","iso-a2":"GQ","woe-id":"23424804","continent":"Africa","hc-middle-lon":9.669,"hc-middle-lat":1.689}},{"type":"Polygon","arcs":[[112]],"id":"MU","properties":{"hc-group":"admin0","hc-key":"mu","hc-a2":"MU","name":"Mauritius","labelrank":"5","country-abbrev":"Mus.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MUS","iso-a2":"MU","woe-id":"23424894","continent":"Seven seas (open ocean)","hc-middle-lon":57.584,"hc-middle-lat":-20.304}},{"type":"Polygon","arcs":[[113,-94,114,115,-51,116,117]],"id":"SN","properties":{"hc-group":"admin0","hc-key":"sn","hc-a2":"SN","name":"Senegal","labelrank":"3","country-abbrev":"Sen.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SEN","iso-a2":"SN","woe-id":"23424943","continent":"Africa","hc-middle-lon":-14.75,"hc-middle-lat":14.871}},{"type":"MultiPolygon","arcs":[[[118]],[[119]]],"id":"KM","properties":{"hc-group":"admin0","hc-key":"km","hc-a2":"KM","name":"Comoros","labelrank":"6","country-abbrev":"Com.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"COM","iso-a2":"KM","woe-id":"23424786","continent":"Africa","hc-middle-lon":43.334,"hc-middle-lat":-11.66}},{"type":"Polygon","arcs":[[120,121,122,123,-68,124,125,-106,126]],"id":"ET","properties":{"hc-group":"admin0","hc-key":"et","hc-a2":"ET","name":"Ethiopia","labelrank":"2","country-abbrev":"Eth.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"ETH","iso-a2":"ET","woe-id":"23424808","continent":"Africa","hc-middle-lon":39.915,"hc-middle-lat":8.052}},{"type":"MultiPolygon","arcs":[[[127,128]],[[129,130,131,132,133,134]]],"id":"CI","properties":{"hc-group":"admin0","hc-key":"ci","hc-a2":"CI","name":"Ivory Coast","labelrank":"3","country-abbrev":"I.C.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"CIV","iso-a2":"CI","woe-id":"23424854","continent":"Africa","hc-middle-lon":-5.563,"hc-middle-lat":7.403}},{"type":"Polygon","arcs":[[-129,135,-133,136,137,138]],"id":"GH","properties":{"hc-group":"admin0","hc-key":"gh","hc-a2":"GH","name":"Ghana","labelrank":"3","country-abbrev":"Ghana","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GHA","iso-a2":"GH","woe-id":"23424824","continent":"Africa","hc-middle-lon":-1.278,"hc-middle-lat":8.72}},{"type":"Polygon","arcs":[[139,140,141,142,-81,143,-79,144,-36,145,146,147]],"id":"ZM","properties":{"hc-group":"admin0","hc-key":"zm","hc-a2":"ZM","name":"Zambia","labelrank":"3","country-abbrev":"Zambia","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"ZMB","iso-a2":"ZM","woe-id":"23425003","continent":"Africa","hc-middle-lon":26.195,"hc-middle-lat":-14.668}},{"type":"Polygon","arcs":[[-142,148,149,150,151]],"id":"NA","properties":{"hc-group":"admin0","hc-key":"na","hc-a2":"NA","name":"Namibia","labelrank":"3","country-abbrev":"Nam.","subregion":"Southern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"NAM","iso-a2":"NA","woe-id":"23424987","continent":"Africa","hc-middle-lon":17.523,"hc-middle-lat":-21.881}},{"type":"Polygon","arcs":[[-39,152,-76,153,-74,-13]],"id":"RW","properties":{"hc-group":"admin0","hc-key":"rw","hc-a2":"RW","name":"Rwanda","labelrank":"3","country-abbrev":"Rwa.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"RWA","iso-a2":"RW","woe-id":"23424937","continent":"Africa","hc-middle-lon":30.498,"hc-middle-lat":-1.746}},{"type":"Polygon","arcs":[[154,-123,155,156]],"id":"SX","properties":{"hc-group":"admin0","hc-key":"sx","hc-a2":"SX","name":"Somaliland","labelrank":"5","country-abbrev":"Solnd.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"-99","iso-a2":"SX","woe-id":"-99","continent":"Africa","hc-middle-lon":47.194,"hc-middle-lat":9.692}},{"type":"Polygon","arcs":[[-155,157,-69,-124]],"id":"SO","properties":{"hc-group":"admin0","hc-key":"so","hc-a2":"SO","name":"Somalia","labelrank":"6","country-abbrev":"Som.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SOM","iso-a2":"SO","woe-id":"-90","continent":"Africa","hc-middle-lon":44.007,"hc-middle-lat":3.259}},{"type":"MultiPolygon","arcs":[[[158,159,160,161,162,-112,163,-19,164]],[[165,166]]],"id":"CM","properties":{"hc-group":"admin0","hc-key":"cm","hc-a2":"CM","name":"Cameroon","labelrank":"3","country-abbrev":"Cam.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"CMR","iso-a2":"CM","woe-id":"23424785","continent":"Africa","hc-middle-lon":12.435,"hc-middle-lat":4.505}},{"type":"Polygon","arcs":[[-162,167,-87,168,169,170]],"id":"CG","properties":{"hc-group":"admin0","hc-key":"cg","hc-a2":"CG","name":"Republic of Congo","labelrank":"4","country-abbrev":"Rep. Congo","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"COG","iso-a2":"CG","woe-id":"23424779","continent":"Africa","hc-middle-lon":15.924,"hc-middle-lat":0.479}},{"type":"Polygon","arcs":[[171,-98,-96,172]],"id":"EH","properties":{"hc-group":"admin0","hc-key":"eh","hc-a2":"EH","name":"Western Sahara","labelrank":"7","country-abbrev":"W. Sah.","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"ESH","iso-a2":"EH","woe-id":"23424990","continent":"Africa","hc-middle-lon":-10.357,"hc-middle-lat":26.176}},{"type":"Polygon","arcs":[[173,174,175,176,-16]],"id":"BJ","properties":{"hc-group":"admin0","hc-key":"bj","hc-a2":"BJ","name":"Benin","labelrank":"5","country-abbrev":"Benin","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"BEN","iso-a2":"BJ","woe-id":"23424764","continent":"Africa","hc-middle-lon":2.245,"hc-middle-lat":10.744}},{"type":"Polygon","arcs":[[-176,177,-137,-132,178,179]],"id":"BF","properties":{"hc-group":"admin0","hc-key":"bf","hc-a2":"BF","name":"Burkina Faso","labelrank":"3","country-abbrev":"B.F.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"BFA","iso-a2":"BF","woe-id":"23424978","continent":"Africa","hc-middle-lon":-1.229,"hc-middle-lat":12.754}},{"type":"Polygon","arcs":[[180,-138,-178,-175]],"id":"TG","properties":{"hc-group":"admin0","hc-key":"tg","hc-a2":"TG","name":"Togo","labelrank":"6","country-abbrev":"Togo","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"TGO","iso-a2":"TG","woe-id":"23424965","continent":"Africa","hc-middle-lon":1.284,"hc-middle-lat":6.552}},{"type":"Polygon","arcs":[[-177,-180,181,-102,182,183,-17]],"id":"NE","properties":{"hc-group":"admin0","hc-key":"ne","hc-a2":"NE","name":"Niger","labelrank":"3","country-abbrev":"Niger","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"NER","iso-a2":"NE","woe-id":"23424906","continent":"Africa","hc-middle-lon":10.115,"hc-middle-lat":18.047}},{"type":"Polygon","arcs":[[-183,-101,-61,184,185,186,187]],"id":"LY","properties":{"hc-group":"admin0","hc-key":"ly","hc-a2":"LY","name":"Libya","labelrank":"3","country-abbrev":"Libya","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"LBY","iso-a2":"LY","woe-id":"23424882","continent":"Africa","hc-middle-lon":17.366,"hc-middle-lat":26.958}},{"type":"Polygon","arcs":[[-135,188,-46,189]],"id":"LR","properties":{"hc-group":"admin0","hc-key":"lr","hc-a2":"LR","name":"Liberia","labelrank":"4","country-abbrev":"Liberia","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"LBR","iso-a2":"LR","woe-id":"23424876","continent":"Africa","hc-middle-lon":-9.965,"hc-middle-lat":6.289}},{"type":"MultiPolygon","arcs":[[[26,-27]],[[28,-29]],[[30,-31,190]],[[191,-33]],[[-35,192,193,-146]]],"id":"MW","properties":{"hc-group":"admin0","hc-key":"mw","hc-a2":"MW","name":"Malawi","labelrank":"6","country-abbrev":"Mal.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MWI","iso-a2":"MW","woe-id":"23424889","continent":"Africa","hc-middle-lon":33.498,"hc-middle-lat":-11.982}},{"type":"Polygon","arcs":[[194,-118]],"id":"GM","properties":{"hc-group":"admin0","hc-key":"gm","hc-a2":"GM","name":"Gambia","labelrank":"6","country-abbrev":"Gambia","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GMB","iso-a2":"GM","woe-id":"23424821","continent":"Africa","hc-middle-lon":-16.051,"hc-middle-lat":13.422}},{"type":"Polygon","arcs":[[195,-167,196,-165,-18,-184,-188,197,198,-160]],"id":"TD","properties":{"hc-group":"admin0","hc-key":"td","hc-a2":"TD","name":"Chad","labelrank":"3","country-abbrev":"Chad","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"TCD","iso-a2":"TD","woe-id":"23424777","continent":"Africa","hc-middle-lon":18.722,"hc-middle-lat":15.616}},{"type":"Polygon","arcs":[[-110,-163,-171,199]],"id":"GA","properties":{"hc-group":"admin0","hc-key":"ga","hc-a2":"GA","name":"Gabon","labelrank":"4","country-abbrev":"Gabon","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GAB","iso-a2":"GA","woe-id":"23424822","continent":"Africa","hc-middle-lon":12.002,"hc-middle-lat":-0.634}},{"type":"Polygon","arcs":[[-122,200,-127,-105,201,-156]],"id":"DJ","properties":{"hc-group":"admin0","hc-key":"dj","hc-a2":"DJ","name":"Djibouti","labelrank":"5","country-abbrev":"Dji.","subregion":"Eastern Africa","region-wb":"Middle East & North Africa","iso-a3":"DJI","iso-a2":"DJ","woe-id":"23424797","continent":"Africa","hc-middle-lon":43.049,"hc-middle-lat":12.336}},{"type":"Polygon","arcs":[[202,-77,-153,-38]],"id":"BI","properties":{"hc-group":"admin0","hc-key":"bi","hc-a2":"BI","name":"Burundi","labelrank":"6","country-abbrev":"Bur.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"BDI","iso-a2":"BI","woe-id":"23424774","continent":"Africa","hc-middle-lon":29.379,"hc-middle-lat":-3.579}},{"type":"MultiPolygon","arcs":[[[203,-169,-86]],[[204,-82,-143,-152,205,-84]]],"id":"AO","properties":{"hc-group":"admin0","hc-key":"ao","hc-a2":"AO","name":"Angola","labelrank":"3","country-abbrev":"Ang.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"AGO","iso-a2":"AO","woe-id":"23424745","continent":"Africa","hc-middle-lon":17.916,"hc-middle-lat":-13.06}},{"type":"Polygon","arcs":[[206,-52,-116,207,-130,-190,-48]],"id":"GN","properties":{"hc-group":"admin0","hc-key":"gn","hc-a2":"GN","name":"Guinea","labelrank":"3","country-abbrev":"Gin.","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"GIN","iso-a2":"GN","woe-id":"23424835","continent":"Africa","hc-middle-lon":-12.22,"hc-middle-lat":11.146}},{"type":"Polygon","arcs":[[-141,208,-148,209,210,211]],"id":"ZW","properties":{"hc-group":"admin0","hc-key":"zw","hc-a2":"ZW","name":"Zimbabwe","labelrank":"3","country-abbrev":"Zimb.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"ZWE","iso-a2":"ZW","woe-id":"23425004","continent":"Africa","hc-middle-lon":30.147,"hc-middle-lat":-19.176}},{"type":"Polygon","arcs":[[212,213,-150,214,-211,215,216],[217]],"id":"ZA","properties":{"hc-group":"admin0","hc-key":"za","hc-a2":"ZA","name":"South Africa","labelrank":"2","country-abbrev":"S.Af.","subregion":"Southern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"ZAF","iso-a2":"ZA","woe-id":"23424942","continent":"Africa","hc-middle-lon":23.711,"hc-middle-lat":-29.796}},{"type":"Polygon","arcs":[[-213,218,-216,-210,-147,-194,219,-44,220]],"id":"MZ","properties":{"hc-group":"admin0","hc-key":"mz","hc-a2":"MZ","name":"Mozambique","labelrank":"3","country-abbrev":"Moz.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MOZ","iso-a2":"MZ","woe-id":"23424902","continent":"Africa","hc-middle-lon":37.969,"hc-middle-lat":-14.541}},{"type":"Polygon","arcs":[[-219,-217]],"id":"SZ","properties":{"hc-group":"admin0","hc-key":"sz","hc-a2":"SZ","name":"Eswatini","labelrank":"4","country-abbrev":"Swz.","subregion":"Southern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SWZ","iso-a2":"SZ","woe-id":"23424993","continent":"Africa","hc-middle-lon":31.474,"hc-middle-lat":-26.5}},{"type":"Polygon","arcs":[[-103,-182,-179,-131,-208,-115,-93]],"id":"ML","properties":{"hc-group":"admin0","hc-key":"ml","hc-a2":"ML","name":"Mali","labelrank":"3","country-abbrev":"Mali","subregion":"Western Africa","region-wb":"Sub-Saharan Africa","iso-a3":"MLI","iso-a2":"ML","woe-id":"23424891","continent":"Africa","hc-middle-lon":-2.324,"hc-middle-lat":18.881}},{"type":"Polygon","arcs":[[-149,-212,-215]],"id":"BW","properties":{"hc-group":"admin0","hc-key":"bw","hc-a2":"BW","name":"Botswana","labelrank":"4","country-abbrev":"Bwa.","subregion":"Southern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"BWA","iso-a2":"BW","woe-id":"23424755","continent":"Africa","hc-middle-lon":24.194,"hc-middle-lat":-22.412}},{"type":"Polygon","arcs":[[221,-107,-126,222,223,-198,-187,224]],"id":"SD","properties":{"hc-group":"admin0","hc-key":"sd","hc-a2":"SD","name":"Sudan","labelrank":"3","country-abbrev":"Sudan","subregion":"Northern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SDN","iso-a2":"SD","woe-id":"-90","continent":"Africa","hc-middle-lon":29.942,"hc-middle-lat":16.13}},{"type":"Polygon","arcs":[[-172,225,-99]],"id":"MA","properties":{"hc-group":"admin0","hc-key":"ma","hc-a2":"MA","name":"Morocco","labelrank":"3","country-abbrev":"Mor.","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"MAR","iso-a2":"MA","woe-id":"23424893","continent":"Africa","hc-middle-lon":-4.273,"hc-middle-lat":33.737}},{"type":"Polygon","arcs":[[-225,-186,226]],"id":"EG","properties":{"hc-group":"admin0","hc-key":"eg","hc-a2":"EG","name":"Egypt","labelrank":"2","country-abbrev":"Egypt","subregion":"Northern Africa","region-wb":"Middle East & North Africa","iso-a3":"EGY","iso-a2":"EG","woe-id":"23424802","continent":"Africa","hc-middle-lon":29.311,"hc-middle-lat":26.247}},{"type":"Polygon","arcs":[[-218]],"id":"LS","properties":{"hc-group":"admin0","hc-key":"ls","hc-a2":"LS","name":"Lesotho","labelrank":"6","country-abbrev":"Les.","subregion":"Southern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"LSO","iso-a2":"LS","woe-id":"23424880","continent":"Africa","hc-middle-lon":28.225,"hc-middle-lat":-29.578}},{"type":"Polygon","arcs":[[-9,-89,227,-223,-125,-67]],"id":"SS","properties":{"hc-group":"admin0","hc-key":"ss","hc-a2":"SS","name":"South Sudan","labelrank":"3","country-abbrev":"S. Sud.","subregion":"Eastern Africa","region-wb":"Sub-Saharan Africa","iso-a3":"SSD","iso-a2":"SS","woe-id":"-99","continent":"Africa","hc-middle-lon":30.135,"hc-middle-lat":7.962}},{"type":"Polygon","arcs":[[-228,-88,-168,-161,-199,-224]],"id":"CF","properties":{"hc-group":"admin0","hc-key":"cf","hc-a2":"CF","name":"Central African Republic","labelrank":"4","country-abbrev":"C.A.R.","subregion":"Middle Africa","region-wb":"Sub-Saharan Africa","iso-a3":"CAF","iso-a2":"CF","woe-id":"23424792","continent":"Africa","hc-middle-lon":21.052,"hc-middle-lat":7.077}}],"hc-recommended-transform":{"default":{"crs":"+proj=lcc +lat_1=20 +lat_2=-23 +lat_0=0 +lon_0=25 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs","scale":0.0000812423194296,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851,"xoffset":-5257539.5112,"yoffset":4185728.66873}},"hc-recommended-mapview":{"projection":{"name":"LambertConformalConic","parallels":[20,-23],"rotation":[-25]}}}},"arcs":[[[694632,477479],[-1291,-433],[-1203,1171],[1661,221],[833,-959]],[[704575,484577],[639,2141],[1568,7],[-451,-3102],[-1756,954]],[[688196,468685],[0,214],[185,-213]],[[688381,468686],[-185,-1]],[[661874,475875],[3129,4713],[-2493,635]],[[662510,481223],[3029,8239],[-193,3954],[6627,6323]],[[671973,499739],[1206,-2988],[4410,6850],[5428,4823],[-1486,4265]],[[681531,512689],[-6830,4033],[1829,5979],[-1295,1915],[1091,6291]],[[676326,530907],[3674,4166],[4334,-1796],[3310,2142],[4801,-4029],[2387,2885],[7730,2056],[6176,-1463],[5411,6200]],[[714149,541068],[2234,-6270],[3321,-1368],[-722,-3945],[2327,-6064],[4172,-6484],[690,-11204],[-2188,-6099],[-3497,-1835],[-6136,-11786]],[[714350,486013],[-5164,-880],[-3607,2763],[-3124,-3756],[-4984,407],[-8108,-3881],[1206,-2348],[-3857,-6858],[1023,-2777]],[[687735,468683],[-11539,-39],[-4336,-869]],[[671860,467775],[-6913,-5581],[-3787,1060]],[[661160,463254],[-289,6523],[1003,6098]],[[393344,544587],[2761,-239],[-5254,-801],[1023,1479],[1470,-439]],[[337506,570880],[819,9093],[-1271,11951],[1250,16204],[3868,900],[405,4197],[4644,5822],[697,6068],[3252,4356],[-1407,7118],[-2903,3892],[1322,4151]],[[348182,644632],[653,11631],[5285,6469],[516,6612],[4519,3047],[9266,830],[3405,1615],[9783,-3399],[6445,-8537],[5879,1393],[4423,2958],[3850,-242],[7207,-5339],[11639,-1340],[3421,4423],[9007,3239],[9168,-171],[7500,-3465],[4948,-757],[1113,2475],[9568,6549],[3025,-122]],[[468802,672501],[5461,-8711]],[[474263,663790],[1424,-9542],[5858,-3044],[-865,-9254],[-5156,-3619],[-2200,534],[-4995,-8321],[-1595,-7209],[-2301,-1033],[-587,-7441],[-4053,-2283],[-681,-7563],[-6924,-6164],[-398,-5795],[-5569,-9780],[1828,-2233],[-3880,-3145],[-2885,-6118],[-8689,8638],[-1302,-2529],[-4497,1623],[-15187,-15867],[-707,-9546],[-2517,-4760]],[[408385,549339],[-4316,1633],[515,-5426],[-6632,-471],[-4963,1323],[-3519,-2837],[-10050,-1709],[-7144,4967],[-3052,9808],[-5448,9183],[-5847,4940],[-6432,919],[-13991,-789]],[[384604,483645],[-1830,1943],[2141,2651],[1464,-1725],[-1775,-2869]],[[783580,371685],[-1487,838],[1101,1710],[2217,868],[-1831,-3416]],[[777295,401338],[1099,1929],[2374,-10323],[-4004,4232],[531,4162]],[[782443,407032],[416,7688],[1579,-1055],[486,-3946],[-2481,-2687]],[[701623,455691],[2033,-419],[748,-2777],[-3885,1801],[1104,1395]],[[725991,322106],[-4,1053],[-561,1156]],[[725426,324315],[-187,209],[-93,105]],[[725146,324629],[-1117,837],[-745,839]],[[723284,326305],[-94,211],[-94,315]],[[723096,326831],[-2852,17830],[-2422,3268]],[[717822,347929],[-1118,1476]],[[716704,349405],[-372,210],[-838,949]],[[715494,350564],[-93,106],[-92,-1]],[[715309,350669],[-1574,-537],[-362,-2331]],[[713373,347801],[-6123,1560],[-5848,2728]],[[701402,352089],[-6499,3893],[-4821,830],[-5295,5071],[-4543,1576]],[[680244,363459],[-6983,15064],[-202,7555],[-5383,7014],[-4911,2864],[2767,4591],[-2418,6713],[1009,4272],[-2781,3088],[728,6195]],[[662070,420815],[4156,2468],[5616,10595],[3966,3325],[360,4064],[-4901,1803],[1650,6206]],[[672917,449276],[3323,759],[-24,10374],[-4356,7366]],[[687735,468683],[-90,-749],[551,751]],[[688381,468686],[375,-2031],[-3106,-12417],[3709,-5227],[-1098,-3853],[4786,6220],[1763,-2560],[10164,-1133],[7468,4098],[-3151,3194],[899,7063],[5056,5906]],[[715246,467946],[43068,-27658],[-615,-6418],[19225,-16207]],[[776924,417663],[-614,-5876],[-4368,-12835],[858,-4364],[7445,-7080],[947,-3612],[-3294,-6621],[2163,-5724],[-2106,-4159],[960,-5618],[3467,-6653],[1909,-9092],[-1104,-1384],[8841,-5532],[-81,-1797]],[[791947,337316],[-5164,-4581],[-8689,-4814],[-4730,-141],[-4897,-3408],[-2793,1877],[-4635,-560],[-1095,-3377],[-4256,-2239],[-7339,2057],[-3051,-2229],[-4455,394],[-4472,4080],[-2957,-2649],[-7423,380]],[[153212,588026],[875,-2869],[-995,1076],[-4211,1248],[4331,545]],[[181064,600136],[-986,-4617],[-3062,-1946],[43,-3377],[-9140,-8697],[-1240,-3043]],[[166679,578456],[-4368,3154],[-8043,3332],[1229,2193],[-6634,5096],[-202,4750],[-2224,-1114],[-1742,12038]],[[144695,607905],[3321,773],[3927,4438],[2300,6144],[7193,1849],[7715,-47],[7209,-9476],[2353,-8773],[-3012,-4892],[5363,2215]],[[110102,638070],[3022,-483],[524,-1577],[-4043,-224],[497,2284]],[[123998,634535],[-4722,3128],[-757,4186],[4889,1458],[-1890,2227],[-5199,-3533],[3594,6376],[-7211,-3173],[-9310,8313]],[[103392,653517],[5992,1633],[6695,-145],[5835,3298],[17612,-57]],[[139526,658246],[277,-5609],[-3145,-1598],[2993,-2140],[-64,-4056],[-6618,-592],[-4900,-2189],[-4071,-7527]],[[11797,688134],[-2265,1289],[1500,1602],[1252,-1468],[-487,-1423]],[[18992,694918],[3578,-4291],[-576,-1319],[-3356,1726],[354,3884]],[[25773,694950],[783,-2067],[-841,-799],[-899,843],[957,2023]],[[29685,707207],[2004,-560],[-1425,-2512],[-1731,451],[1152,2621]],[[12317,713241],[722,-527],[-1134,-1699],[-1139,2469],[1551,-243]],[[2681,720895],[1439,-1253],[-3899,-2535],[-221,2540],[2681,1248]],[[972866,418428],[842,-733],[-350,-1608],[-667,1591],[175,750]],[[436554,952392],[1533,-1316],[-2010,-1995],[-1883,3152],[2360,159]],[[443475,942465],[-684,-7487],[1437,-2399],[-8385,-4563],[-9153,-10032],[1951,-6848],[-4873,-7837],[-4194,-1695]],[[419574,901604],[-5717,25496],[-8755,6811],[-2755,7432],[-4072,1525],[-3277,9558],[4234,7172],[4835,3246],[1112,13877],[-976,2474],[1997,11307],[2299,4092]],[[408499,994594],[7370,4124],[7798,1281],[4964,-2115],[-1188,-1411],[3135,-4793],[7462,4894],[976,-2933],[-4027,-5772],[-3364,-1581],[1039,-6693],[5415,-3351],[1233,-5217],[-6777,-9589],[-5646,-3077],[-942,-4768],[3420,-3857],[4628,57],[-21,-3059],[3191,2166],[2410,-5971],[3900,-464]],[[886897,298853],[22,-2302],[-1398,506],[-110,1778],[1486,18]],[[852837,128028],[-4296,-140],[-3673,3380],[-5615,1216],[-4047,3583],[-3897,8211],[-834,10551],[1472,2588],[-4829,8694],[-1652,8262],[3441,12761],[3625,1241],[1079,4744],[6970,13414],[48,5380],[-3033,6483],[343,3471],[-2463,5288],[-1318,13417],[5868,10458],[221,7129],[4839,-571],[4985,4191],[4191,-784],[998,2807],[6312,1002],[9045,7053],[-237,-4569],[3335,1283],[-2074,3090],[4854,7648],[241,-5822],[3281,6697],[-495,3224],[4050,3907],[-2083,4152],[1079,3671],[4400,-3605],[1172,3569],[3886,1512],[2517,8306],[-870,3451],[4555,8567],[3621,-9302],[4515,-5812],[2429,-10325],[1068,-13230],[3078,-9831],[-3082,-7296],[-2248,1524],[-1737,6094],[-3142,-1701],[2562,-13936],[-5010,-10164],[799,-5231],[-1659,-10575],[-3445,-8924],[-6213,-20873],[-4302,-16954],[-4158,-13135],[-3485,-15316],[-5359,-15017],[-5663,-3488],[-5042,-151],[-8918,-5267]],[[715246,467946],[1165,9523],[8118,791],[-1304,3094],[-5804,-2489],[-3057,3085],[-14,4063]],[[714149,541068],[4860,5555],[12405,5700],[2418,-5726],[3683,21]],[[737515,546618],[1484,-2437],[9669,-153],[15161,-11394],[4697,141],[12545,-2994],[3739,6420],[11016,5733],[4264,-4434],[9301,190]],[[809391,537690],[-6559,-10818],[-4391,-4943],[56,-51492],[6527,-9675],[103,-1710]],[[805127,459052],[-3022,-3770],[-4798,-684],[480,-2776],[-3666,-4630],[-5340,-2932],[574,-3203],[-3017,-5263],[-2265,-7499],[-4565,-9758],[-2584,-874]],[[655170,455860],[100,-4063],[-923,-537],[-3,1497],[826,3103]],[[681531,512689],[-9381,-9425],[-177,-3525]],[[662510,481223],[-4604,-5571],[744,-2672],[3224,2895]],[[661160,463254],[-2675,-1611],[-1658,-2357]],[[656827,459286],[-1941,1279],[-2389,-7705],[192,-4705],[189,-2352]],[[652878,445803],[1479,-959]],[[654357,444844],[2687,-4485],[-363,-4063]],[[656681,436296],[-1462,-9728],[1398,-6620],[-1282,-7690],[3343,-7462],[-2306,-4272],[3814,-10861],[8257,-9239],[939,-6377],[3717,-5515]],[[673099,368532],[-19908,-3448],[-278,-107]],[[652913,364977],[-6658,-8287],[-177,-6251],[2314,2123]],[[648392,352562],[1862,-5926],[-448,-9937],[-3413,-12874],[1863,-5890],[6321,-6924],[5663,-1037],[-376,2835],[3988,1165],[-58,-17510],[-2698,2714],[-4916,-2837],[-9954,13604],[-8448,2192],[-5484,10088],[-5840,-6213],[-8444,1466],[-7795,3679],[-835,6109],[-11966,-2527],[1114,3688],[-5007,3377]],[[593521,331804],[-1578,-2109],[-4080,847],[-5752,-1893],[-5749,956],[-3620,-2947],[-922,5485],[1863,6649],[-1848,6134],[-3702,4345],[948,16643],[-2123,5526],[291,10101],[-15184,31],[1121,5106],[-3890,-1161],[-9257,25],[-108,-6703],[-1947,-1270],[79,-5953],[-14263,47],[-7597,-1139]],[[516203,370524],[-9383,19081]],[[506820,389605],[-2000,10772],[-3419,976],[-19431,-327],[-18318,322]],[[463652,401348],[-8803,-2714],[-2847,4071]],[[452002,402705],[3518,510],[-693,9287],[7520,5823]],[[462347,418325],[3410,-2264],[4261,1575],[7977,5613],[333,-8438],[5183,1038],[4465,6597],[4454,4144],[3795,1263],[4099,9064],[-626,5670],[684,10476],[3522,3726],[3814,8218],[5549,3399],[5375,6929],[-356,4492],[2795,9290],[-993,7485],[2511,7468],[-69,8434],[6579,13416],[105,4795]],[[529214,530715],[294,7028],[-1370,4475],[2213,1056],[4437,7322],[3874,3069],[3774,95],[7446,-5014],[3121,-5112],[3316,631],[4048,-2243],[6170,94],[8469,-2248],[5718,9565],[5889,-3301],[13168,7113],[3682,-2444],[6259,1488],[644,3824],[5615,-1592],[3589,958],[4052,-2759],[4879,-314],[3035,2234],[3868,-1801]],[[635404,552839],[3965,-6584],[7648,-4455],[4230,3838],[4977,-2861],[3399,4368],[9044,-9871],[3870,-1160],[193,-3514],[3596,-1693]],[[973309,193254],[4341,-3962],[-435,-2320],[-5603,718],[-1625,3095],[3322,2469]],[[850256,305870],[-1106,-956],[-264,-1784],[-1514,3443],[2884,-703]],[[200368,860797],[38074,-25816],[8398,-5947]],[[246840,829034],[-21335,-61],[7722,-76190],[3944,-41166],[3258,-3001],[-1885,-11294],[-46260,69],[-5797,-1736],[-10891,713],[-2175,-4464],[-5940,6968],[-3769,-848],[-1145,-8886],[-5342,-1743]],[[157225,687395],[-6242,5147],[-2212,4956],[-3272,1598],[-2995,7406],[-3945,-430],[-6385,7049],[-7048,145],[-9012,-2250],[-7877,-137],[-2542,-9217]],[[105695,701662],[1027,11587],[3445,8546],[1726,9762],[-2131,14110],[-3830,5782],[3859,11371],[-3983,7220],[-1571,-956],[-3075,6784],[-1653,-5497]],[[99509,770371],[1148,7873],[47502,26],[-919,16102],[-854,3528],[1797,3762],[4713,3505],[7259,3065],[26,34692],[39823,-23],[364,17896]],[[246840,829034],[0,0]],[[200368,860797],[-10,5235]],[[200358,866032],[-58,13927],[12800,10015],[5756,1653],[16756,1399],[2621,-1228],[3164,5072],[10849,8576],[8766,2867],[1044,3326],[-3112,5080],[1880,4546],[10020,2014],[-1316,3495],[5102,1181],[15250,-722],[2438,6096],[-4593,3062],[-2998,6905],[-25,12051],[-2360,6783],[1296,1968],[-5467,4880]],[[278171,968978],[5539,534],[5940,3611],[939,2465],[10122,4733],[2698,-1729],[3037,3701],[11038,6047],[19136,1658],[3655,2819],[6336,-479],[4368,1887],[11591,-271],[5402,-3318],[11538,3426],[1743,2327],[6861,-2396],[5730,2632],[6311,-3310],[8344,1279]],[[419574,901604],[-2830,-1616],[4587,-6966],[1954,-6709],[-630,-11907],[1964,-5589],[-2604,-7918],[2233,-6209],[-852,-4703],[-4296,-2139],[-934,-3303],[6857,-9930],[679,-7551],[4342,-5210],[4019,1027],[10190,-3914],[4773,-10457]],[[449026,808510],[-54018,-36669],[-19802,-19281],[-19331,-4698]],[[355875,747862],[-11085,-2181],[-2538,2330],[1856,2978],[-492,5989],[-9838,3593],[-2619,3110],[-3480,-654],[-2975,4002],[-5727,2940],[-221,5140],[-71916,53925]],[[787001,702764],[4424,-4355],[-3301,587],[-2301,1718],[1178,2050]],[[824242,658656],[-5285,-4821],[-3680,1522]],[[815277,655357],[-5177,5654],[-2787,5149],[-6270,5111],[-4354,6767],[-8739,5073],[-7157,1382],[-3655,-1774],[-1574,2762],[-7864,-3036],[-6449,6322],[-3885,-10508],[-3324,4710],[-2645,-2382],[-6598,-349]],[[744799,680238],[-1247,11798],[6333,15766],[-843,3861],[1518,7519],[4854,-577],[1260,4058],[8404,2786],[4720,6692]],[[769798,732141],[3984,-8450],[2809,-10622],[867,-7217],[2705,-8144],[3136,-3556],[1812,3287],[4999,-8151],[2924,1151],[2868,-4182],[4678,-783],[6299,-9718],[7370,-4988],[5849,-9872],[4144,-2240]],[[410497,534531],[2293,-1511],[-3265,-6151],[-2574,875],[3546,6787]],[[441231,512532],[188,-16127],[-18445,37]],[[422974,496442],[-5518,2504],[5502,9993],[-54,6084]],[[422904,515023],[2289,-2473],[16038,-18]],[[999999,203991],[-483,-5371],[-3536,-361],[1863,6709],[2156,-977]],[[105435,670867],[-4581,10714],[-2862,4072],[-4282,1430],[4807,2356],[7178,12223]],[[157225,687395],[466,-5351],[3106,-6649],[-1603,-2857],[5887,-4761],[2753,-5950],[-111,-7358]],[[167723,654469],[-8256,57],[-3416,-1386],[-8671,2872],[26,1659],[-7880,575]],[[103392,653517],[-491,3436],[208,6729]],[[103109,663682],[1032,1323],[10087,-117],[130,2272],[7178,1500],[1047,2250],[8998,-4838],[6533,1312],[-1687,3444],[-4338,-1769],[-2888,2847],[-6107,2192],[-5098,-3297],[-12561,66]],[[840621,315008],[404,-4093],[-3737,3113],[2044,-295],[1289,1275]],[[828355,317197],[-2424,1554],[232,6109],[1396,-619],[796,-7044]],[[808144,638962],[-1276,-1367],[1294,-1345]],[[808162,636250],[2034,-2069],[7972,2056],[3680,-1217]],[[821848,635020],[-3268,-5045],[2247,-5942],[6971,-11047],[7304,-5915],[35591,-13720],[12042,40]],[[882735,593391],[-18664,-20833],[-17944,-21950],[-11697,620],[-10187,-4247],[-4015,-5039],[-7819,-1138],[-3018,-3114]],[[737515,546618],[-1666,2010],[335,7546],[-5893,497],[-4077,6875],[-2988,11005],[-5261,4628],[-7023,9477],[-8006,2075],[1535,8335],[9557,571],[1736,2535],[-502,11456]],[[715262,613628],[3080,11232],[-566,4182],[3655,4302],[4407,-81],[1142,12412],[2011,1779],[4914,9374],[5771,1692],[1607,9220],[1821,2903],[1695,9595]],[[815277,655357],[-7525,-12855],[392,-3540]],[[267292,553164],[-1654,237],[1749,-26]],[[267387,553375],[-95,-211]],[[202672,587292],[3125,-162],[2498,7976],[-2696,4579],[6647,2199],[-3184,2372],[1128,8704],[-2483,-166],[-1275,7576],[2245,2999]],[[208677,623369],[3910,3909],[8494,-3496],[3150,2145],[332,4283],[3013,-1306],[2141,2265],[15,-5962],[2737,-1407],[2519,3099],[3399,153]],[[238387,627052],[3656,-1419],[3051,-5810],[3452,-3096],[12261,3688],[5505,-503],[5337,-7214],[842,1352]],[[272491,614050],[-987,-5973],[1818,-1814],[1358,-9918],[-4014,-5424],[-2416,-10317],[-2648,-6308],[3522,-13833],[2295,-566],[-712,-5935]],[[270707,553962],[-5712,-444],[-8176,1507],[-22402,-2718],[-12772,-5205],[-7514,-4230]],[[214131,542872],[-515,9792],[2394,7073],[-778,3833],[-4301,1773],[-1325,4157],[-8515,3013],[3269,3647],[532,5280],[-2220,5852]],[[267387,553375],[1472,-23],[1848,610]],[[272491,614050],[-2743,17114],[2061,3625],[24696,171],[6446,1895]],[[302951,636855],[2193,-968],[-1255,-5937],[5827,-4889],[-2027,-9721],[3650,-2462],[-1933,-9436],[3983,-6054],[-1574,-1139],[891,-12149],[-1540,-6853],[2979,-5756],[5017,-4410]],[[319162,567081],[-2243,-3576],[-8107,-848],[-8415,-3919],[-5102,-3858],[-9327,-2736],[-6211,-3949],[-3194,2598],[-9271,2371]],[[651327,253401],[-3906,-214],[-5202,-4238],[-2790,99],[-5479,-8037],[-3622,-7394]],[[630328,233617],[-3721,-1541],[-6143,2558],[-2698,-1539],[-3537,2561],[-5118,204]],[[609111,235860],[-3629,3388],[-8838,1029],[-10142,-2253]],[[586502,238024],[-7530,6689],[-7803,8463],[-1481,5272],[-38,43835],[24322,79],[-1669,2935],[2044,5560],[-831,10619],[1208,3159],[-1203,7169]],[[648392,352562],[5922,5416],[1660,4353],[-3061,2646]],[[673099,368532],[-1195,-3932],[3892,-731],[2787,-3280],[1661,2870]],[[701402,352089],[5399,-6752],[3648,-9390],[-4254,-3397],[851,-4742],[-1936,-3486],[313,-10099],[1410,-5245],[-5002,-2854],[485,-6390],[-2298,-7123],[2338,-4794],[2413,428]],[[704769,288245],[-36007,-13357],[2251,-9129]],[[671013,265759],[-6786,293],[-5110,-1360],[-6592,-4571],[-1198,-6720]],[[609111,235860],[-3629,103],[-5397,-3793],[-3909,411],[-7169,-6136],[-3346,6451],[-4001,-99],[-18059,-3865],[-6050,-296],[98,-50518],[-12122,-573],[9,-38064]],[[545536,139481],[72,-50479],[-5056,-1986],[-5817,-5868],[-4019,1622],[-7021,-831],[-9161,2687],[-725,6664],[-5417,2024],[-1138,-4001],[-3753,-2839]],[[503501,86474],[-1683,197],[-8010,8423],[-4731,8745],[-3959,13627],[-1458,7973],[-780,13296],[-3693,8968],[737,18022],[-1736,7985],[-5282,6833],[-1376,4623],[-5363,8786],[-2841,9213],[-10417,20198],[-5263,7704],[-1629,8217],[582,4108]],[[446599,243392],[3170,1419],[6319,-1174],[7369,3970],[9365,-6334],[3164,291],[51073,-24],[3801,-5046],[15348,-1993],[3630,504],[5672,-2371],[7166,293],[23826,5097]],[[672917,449276],[-7485,1155],[-360,-4599],[-2490,-2252],[-8225,1264]],[[652878,445803],[-189,2459],[5901,6109],[-1763,4915]],[[894335,638436],[-31,-24906],[-11569,-20139]],[[821848,635020],[3805,6815]],[[825653,641835],[7140,-9528],[5363,-4754],[8269,-645],[10138,6382],[7733,-2525],[11048,6707],[9642,-405],[5941,2577],[3408,-1208]],[[894335,638436],[7679,3018],[8334,1777],[6365,5498],[5987,-2102],[-2564,-8995],[1103,-8653],[2676,-1217],[-5671,-2067],[-1066,-12070],[-4966,-8265],[-1601,-5179],[-5441,-7240],[-245,-3064],[-5418,-9897],[-4019,-12229],[-4695,-9288],[-8428,-14133],[-15940,-19895],[-7210,-8083],[-17784,-12152],[-12996,-13061],[-16738,-20583],[-6570,-11504]],[[477289,663877],[-562,-2689],[2849,1227]],[[479576,662415],[3832,-4683],[980,-6855],[1740,-841],[1070,-7600],[-1397,-4892],[528,-5431],[2912,-6603],[4574,-4421],[-11484,-988],[-6609,771],[-2868,-4702],[4839,-6537],[10068,-9523],[3625,-13307]],[[491386,586803],[-3142,-3788],[-6034,-13724],[-3878,-3264],[2202,-1391],[1581,-18061],[3486,-2998],[1991,-8951],[11100,-12418],[1259,-8647]],[[499951,513561],[-394,-6937],[-11139,4113],[-4150,-404],[-3952,2797],[-3598,-727],[-11706,72]],[[465012,512475],[-637,1605],[-22764,370],[-380,-1918]],[[422904,515023],[1905,10224],[-3738,6318],[-332,5860],[-3687,-395],[-4129,2378],[-419,6280],[-5067,-380],[948,4031]],[[474263,663790],[3026,87]],[[478023,663872],[91,-207],[-366,209]],[[477748,663874],[275,-2]],[[499951,513561],[3439,8305],[1043,8736],[10789,3362],[4598,-2362],[7557,1250],[1837,-2137]],[[462347,418325],[-2666,3221],[-5562,-2846],[-4561,-5734]],[[449558,412966],[-2283,5568],[-8546,9463]],[[438729,427997],[4470,5952],[2020,-2366],[3540,5212],[-3132,1840],[-1509,11344],[6092,-899],[4716,1144],[-431,5992],[4616,-245],[2002,-6216],[5999,-1001],[3347,4685],[4039,-5585],[4583,13234],[-800,7278],[1223,5447],[-4502,4517],[-3501,1411],[487,5557],[7146,9897],[-3384,6537],[-4700,669],[-6560,-2950],[-1265,5455],[1787,7569]],[[146278,866312],[54080,-280]],[[99509,770371],[-530,1001],[1060,8067],[549,5003],[3139,6892],[2201,540],[2795,8137],[6354,13250],[10330,11439],[1465,10582],[4485,11303],[9489,5954],[5432,13773]],[[337506,570880],[-9856,-1363],[-3228,-807]],[[324422,568710],[1940,823],[-2615,5541],[778,4434],[-372,28478],[-2081,3284],[-1099,9875],[-6837,5114],[1647,8654]],[[315783,634913],[2578,802],[3913,5894],[6876,-710],[4559,6608]],[[333709,647507],[-326,4369],[5803,2527],[8996,-9771]],[[315783,634913],[-5048,170],[-7784,1772]],[[238387,627052],[203,8775],[3459,5054],[-754,5740],[8679,4332],[2082,5263],[-1160,2610],[3319,1399],[-1692,4167],[4553,4892],[6185,-4228],[2496,1720],[-206,5890],[4482,-892],[705,5454],[4530,3331],[5303,-1208],[686,4002],[3210,160],[7838,4410],[3520,3541],[6229,-84],[5476,-2122]],[[307530,689258],[-786,-5019],[5652,-12017],[3928,-1392],[296,-7135],[6822,-5782],[6886,745],[1615,-3857],[-2126,-1635],[3892,-5659]],[[324422,568710],[-2305,-501],[-2955,-1128]],[[307530,689258],[9082,1115],[4346,4042],[26210,1021],[4350,4960],[3749,9742],[619,8016],[-11,29708]],[[449026,808510],[18223,-4668],[9089,-7739],[8968,5212]],[[485306,801315],[2313,-13874],[153,-6775],[5175,-7714],[-831,-2071],[4910,-5866],[-2584,-6544],[-3184,-41382],[-13254,-16211],[-6458,-10089],[-845,-4201],[-3779,-4703],[1880,-9384]],[[443475,942465],[10137,-4814],[4627,-467],[7453,1458],[9973,-2521],[3527,-2759],[8708,-1813],[3586,-10079],[6700,-5406],[8175,-661],[7717,-1918],[9709,-4180],[9524,-7002],[4546,260],[4916,2890],[3465,4332],[1285,5492],[-2710,6908],[1832,6414],[5915,5309],[12629,5099],[6446,255],[11343,-4160],[87,-4517],[11985,-4365],[10717,-537],[2090,-4285]],[[607857,921398],[-3544,-3852],[1636,-8281],[-3728,-8882],[3546,-13347],[-1,-99593]],[[605766,787443],[0,-27644],[-12064,-96],[-3,-6873]],[[593699,752830],[-96231,54737],[-12162,-6252]],[[214131,542872],[-8706,3134],[-12230,7877],[-13511,14261],[-11486,7319],[-1519,2993]],[[181064,600136],[5703,314],[3737,-2281],[1791,-9949],[-1417,-2614],[4092,-3352],[3234,1104],[2104,5877],[2364,-1943]],[[717822,347929],[0,0]],[[715494,350564],[-185,105]],[[713373,347801],[570,-3911],[3732,-6113],[-732,-2538],[1262,-14752],[-3407,-6851],[3663,-11419],[-165,-5341],[3731,-4268],[-1285,-3871],[2153,-4058],[1935,3766],[4575,-5504],[-2269,9276],[-2427,3018]],[[724709,295235],[2704,-2599],[9254,-13404],[-803,-7284],[144,-11301],[-5012,-1889],[-2952,-5493],[1777,-2261],[119,-5873],[-2512,90],[-948,4219],[-7475,8739],[-1783,4130],[4056,8523],[-875,9666],[-1868,2596],[-7519,-1391],[-923,-1566],[-5324,8108]],[[103109,663682],[-852,3742],[3178,3443]],[[479576,662415],[3215,1328],[-2832,2497],[-1936,-2368]],[[477748,663874],[-914,729],[455,-726]],[[593699,752830],[68,-52304],[-10715,-298],[-2017,-1939],[454,-4705],[-3580,-7480],[-3667,-1946],[2010,-5865],[-5506,-4836],[2377,-6094],[-4039,-3820],[-8,-5800],[3304,1446],[4852,-9243],[-923,-5512],[4584,-3963],[-648,-6571]],[[580245,633900],[-4864,1154],[-8819,-5105],[272,-3033],[-8830,-9305],[-2304,-4507],[-4692,-3875],[-16083,-1742],[-2761,-2094],[3026,-2641],[-6364,-8617],[-10941,-909],[-11051,-5969],[-2651,4339],[-2124,-2734],[-6907,-2923],[-3766,864]],[[438729,427997],[-5600,6669],[-173,1926],[-8820,8516],[-7595,11399],[1062,7371],[-3966,676],[-3997,9874],[4142,-1747],[2703,4147],[526,10153],[2288,-2906],[3876,74],[-3860,2384],[-2184,4722],[3872,-353],[-892,5030],[2863,510]],[[808162,636250],[1094,1158],[-1112,1554]],[[824242,658656],[2499,-2983],[601,-6745],[-7493,-4129],[-169,-1979],[5973,-985]],[[662070,420815],[-3807,9607],[-1582,5874]],[[452002,402705],[204,3839],[-2648,6422]],[[506820,389605],[3859,-8852],[5524,-10229]],[[446599,243392],[711,10715],[-878,9418],[2896,2571],[3410,12027],[699,9061],[2060,3327],[123,5748],[5232,6352],[-82,2307],[5121,3114],[3271,4705],[1886,6612],[599,9159],[-1083,6442],[-6706,13044],[-2461,8490],[4656,4742],[-157,5945],[-6226,14709],[-253,5004],[-2487,2359],[-4214,8553],[5649,921],[5287,2631]],[[144695,607905],[-3515,10153],[-10463,6191],[-1823,6525],[-4896,3761]],[[167723,654469],[-1419,-2880],[3816,-2464],[3433,2532],[2322,-4306],[5389,4576],[6568,-2720],[4927,4481],[3861,553],[2385,-6589],[-692,-3526],[5727,-3957],[-2891,-3286],[3647,-1839],[188,-6377],[3693,-5298]],[[630328,233617],[8084,10486],[4276,1653],[833,3298],[7254,528],[3436,2689],[-2884,1130]],[[671013,265759],[11,-4972],[10413,-382],[7826,-5556],[4557,-397],[8194,-3167],[-1756,-3513],[2345,-5857],[-999,-7192],[1139,-6346],[-1748,-6240],[-2325,-622],[2061,-3967],[-1194,-4788],[3181,-4456],[-267,-3449],[-4354,-7301],[-1584,-107],[-1272,-9981],[-13473,-15375]],[[681768,172091],[-5413,1581],[-6526,-717],[-6534,2781],[-4941,-711]],[[658354,175025],[-3360,1893],[-380,3504],[-12124,2987],[-4296,6829],[270,8069],[-5124,94],[-657,5361],[-5871,2426],[-7175,6085],[-2331,8042],[-8567,13699],[372,1846]],[[691662,110453],[2899,-279],[6542,217]],[[701103,110391],[-4236,-18629],[-1947,-5055],[-7560,-5719],[-6808,-8238],[-9596,-17812],[-4576,-6136],[-7482,-6207],[-6265,-7641],[-11704,-10425],[-9091,-6087],[-7596,-3800],[-6755,628],[-3283,-1174],[282,-3152],[-9008,539],[-1220,-2786],[-14732,2791],[-2723,-1797],[-10133,1628],[-10424,-5462],[-9479,374],[-4695,-1245],[-6864,-4986],[-3754,544],[-4398,5103],[-5630,553],[572,2958],[-6475,-71],[2077,4041],[-7737,14522],[5165,2356],[861,5395],[-2129,8192],[-3359,4446],[-7352,13792],[-5739,17609],[-3809,7034]],[[545536,139481],[4660,-3932],[2978,-5482],[2784,-9741],[-2718,-4067],[829,-6478],[12059,461],[12444,12088],[1502,7010],[1963,2342],[5418,386],[5601,-4786],[10556,-2730],[9435,2825],[3451,12130],[6442,1574],[5317,5316],[1860,8394],[9045,5857],[7077,8864],[6899,1807],[1580,3199],[3636,507]],[[681768,172091],[2921,-10543],[-176,-3572],[4035,-7405],[1607,-6598],[-495,-21225]],[[689660,122748],[-6268,2996],[-3730,-2347],[-3997,-7774],[199,-4736],[4315,-5481],[9728,-1508],[258,7033],[1497,-478]],[[644715,63002],[11322,4893],[87,3383],[3267,4531],[-9659,10685],[-2992,-765],[-7667,-3902],[-3923,-6813],[-4864,-3114],[3565,-7040],[5158,-6443],[4029,-833],[1677,5418]],[[691662,110453],[-866,7736],[-1136,4559]],[[724709,295235],[-1239,7950],[823,3150],[-1515,7235],[2127,2008],[1086,6528]],[[791947,337316],[2165,-5049],[-2248,-11085],[1881,-18259],[-589,-9425],[3604,-11450],[-62,-4686],[-2661,-5012],[-251,-4362],[-5166,-6053],[-3118,-6850],[-9354,-6365],[-14658,-6794],[-9918,-7048],[-7302,-9871],[-9832,-7707],[-6484,-7864],[-4646,-2560],[-900,-7497],[3931,-4222],[394,-4836],[2924,-7824],[514,-10604],[2032,4407],[518,-11268],[-1527,-12995],[1231,-3745],[-4730,-6717],[-5496,-2972],[-11096,-4067],[-10251,-6100],[-4278,-5566],[3847,-4743],[1760,4472],[-1078,-12208]],[[749113,787478],[25,-4808],[2767,-5199],[1331,-9870],[-624,-2978],[1915,-16522],[2594,-6193],[1552,411],[4786,-5390],[6339,-4788]],[[715262,613628],[-2021,-10],[-37,10170],[-8662,9058],[-1228,10320],[1531,8639],[-5689,80],[102,-2909],[-7982,-135],[3223,-3941],[762,-9169],[-5675,-5452],[-3289,-6184],[-5219,-5781],[-5876,-858],[-8833,7414],[-4769,-2944],[-1646,-4092],[-5691,-2216],[-1923,-3783],[-9646,88],[-1841,3671],[-9829,92],[-6245,-1161],[-7903,9325],[-736,3139],[-9090,-1781],[-3582,-6809],[-2757,-12707],[-4687,-2733]],[[596024,602959],[-8270,1373],[-88,5362],[1838,1469],[-87,8709],[-4036,7438],[-5136,6590]],[[605766,787443],[75508,20],[67839,15]],[[146278,866312],[2424,3217],[10965,2407],[6882,3220],[5289,6106],[5694,3130],[5194,6068],[5887,9674],[518,3898],[-3301,3857],[438,9990],[5865,8577],[1216,7705],[8873,9558],[12428,5243],[8071,5461],[6440,11670],[4638,12676],[6100,1786],[1833,-4701],[5731,-4774],[4787,-1262],[8459,1861],[3065,-1237],[5373,1645],[1056,-2325],[7968,-784]],[[607857,921398],[2998,-2148],[5087,1524],[18264,-3392],[6728,-3496],[6089,-441],[7458,-3593],[5722,1816],[10341,7662],[2184,-1608],[8170,2620],[3639,-1870],[4812,1090],[-1807,-3145],[3826,-3044],[2899,2617],[3282,-2866],[6079,2451],[6549,-1683],[6622,2723],[7551,-21792],[-2305,-13415],[-2792,-6486],[292,-4456],[-4176,-2532],[-10145,10632],[-1207,6452],[-5025,6041],[-1843,6754],[-2802,-4940],[3104,-3470],[383,-5236],[2931,-5433],[7768,-8594],[-165,-4380],[6054,-11028],[104,-3294],[6429,-12272],[8286,-18404],[5863,-5651],[-2461,-206],[-334,-6671],[2500,-7752],[6042,-3960],[8262,-9044]],[[635404,552839],[-3782,9656],[-7825,4658],[-2302,3919],[1102,3706],[-4233,4759],[-8002,4648],[-1012,4542],[-5332,7067],[-8455,2426],[461,4739]]],"bbox":[-25.316849789525808,-34.81133086771159,57.71386577803557,37.32879358878588],"transform":{"scale":[0.00008303079859835996,0.00007214019659669405],"translate":[-25.316849789525808,-34.81133086771159]},"title":"Africa","version":"2.3.2","copyright":"Copyright (c) 2025 Highsoft AS, Based on data from Natural Earth","copyrightShort":"Natural Earth","copyrightUrl":"http://www.naturalearthdata.com"}

afridatahub-frontend/src/components/APIDocumentation.jsx

@@ -0,0 +1,317 @@
+/**
+ * Composant APIDocumentation pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import {
+    Code,
+    Copy,
+    RefreshCw,
+    Terminal,
+    Globe,
+    Lock,
+    Check,
+    ExternalLink,
+    BookOpen,
+    Cpu,
+    Database
+} from 'lucide-react'
+import { API_URL } from '../config'
+
+const APIDocumentation = () => {
+    const [token, setToken] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [copied, setCopied] = useState(false)
+    const [activeTab, setActiveTab] = useState('python')
+
+    useEffect(() => {
+        fetchToken()
+    }, [])
+
+    const fetchToken = async () => {
+        try {
+            const storedToken = localStorage.getItem('token')
+            const response = await fetch(`${API_URL}auth/token/`, {
+                headers: {
+                    'Authorization': `Token ${storedToken}`
+                }
+            })
+            const data = await response.json()
+            if (response.ok) {
+                setToken(data.token)
+            }
+        } catch (error) {
+            console.error('Erreur lors de la récupération du token:', error)
+        }
+    }
+
+    const regenerateToken = async () => {
+        if (!confirm('Êtes-vous sûr de vouloir régénérer votre token ? L\'ancien token ne fonctionnera plus.')) return
+
+        try {
+            setLoading(true)
+            const storedToken = localStorage.getItem('token')
+            const response = await fetch(`${API_URL}auth/token/`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Token ${storedToken}`
+                }
+            })
+            const data = await response.json()
+            if (response.ok) {
+                setToken(data.token)
+            }
+        } catch (error) {
+            console.error('Erreur lors de la régénération du token:', error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+    }
+
+    const endpoints = [
+        {
+            method: 'GET',
+            path: '/api/datasets/',
+            description: 'Liste tous les datasets publics disponibles.',
+            params: [
+                { name: 'domain', type: 'string', desc: 'Filtrer par domaine (agriculture, health, etc.)' },
+                { name: 'search', type: 'string', desc: 'Recherche textuelle dans le titre ou la description' }
+            ]
+        },
+        {
+            method: 'GET',
+            path: '/api/datasets/{slug}/data/',
+            description: 'Récupère les points de données pour un dataset spécifique.',
+            params: [
+                { name: 'country', type: 'string', desc: 'Code pays ISO (ex: BJ, NG)' },
+                { name: 'limit', type: 'number', desc: 'Nombre maximum de résultats (défaut: 100)' }
+            ]
+        },
+        {
+            method: 'GET',
+            path: '/api/analytics/comprehensive/',
+            description: 'Récupère des analyses consolidées et des statistiques.',
+            params: [
+                { name: 'dataset_id', type: 'string', desc: 'ID ou Slug du dataset pour filtrer l\'analyse' }
+            ]
+        }
+    ]
+
+    const codeExamples = {
+        python: `import requests
+
+url = "http://localhost:8000/api/datasets/"
+headers = {
+    "Authorization": "Token ${token || 'VOTRE_TOKEN_ICI'}"
+}
+
+response = requests.get(url, headers=headers)
+data = response.json()
+
+print(f"Nombre de datasets: {len(data['results'])}")`,
+        javascript: `const fetchDatasets = async () => {
+  const response = await fetch('http://localhost:8000/api/datasets/', {
+    headers: {
+      'Authorization': 'Token ${token || 'VOTRE_TOKEN_ICI'}'
+    }
+  });
+  const data = await response.json();
+  console.log(data);
+};`,
+        curl: `curl -X GET http://localhost:8000/api/datasets/ \\
+     -H "Authorization: Token ${token || 'VOTRE_TOKEN_ICI'}"`
+    }
+
+    return (
+        <div className="space-y-10 pb-20">
+            {/* En-tête */}
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex flex-col md:flex-row md:items-end md:justify-between gap-6"
+            >
+                <div>
+                    <h1 className="text-4xl font-black text-foreground tracking-tight">API <span className="text-gradient">Developer Hub</span></h1>
+                    <p className="text-muted-foreground font-medium mt-2 text-lg">
+                        Intégrez les données d'AfriDataHub directement dans vos applications et flux de travail.
+                    </p>
+                </div>
+                <div className="flex items-center space-x-3">
+                    <Button variant="outline" className="rounded-2xl border-primary/20 hover:bg-primary/5 font-bold">
+                        <BookOpen className="h-4 w-4 mr-2" />
+                        Documentation Complète
+                    </Button>
+                </div>
+            </motion.div>
+
+            {/* Section Token */}
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="glass rounded-[3rem] p-10 relative overflow-hidden"
+            >
+                <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+                    <Lock className="w-48 h-48 text-primary" />
+                </div>
+
+                <div className="relative z-10">
+                    <div className="flex items-center mb-8">
+                        <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center mr-4">
+                            <Cpu className="h-6 w-6 text-primary" />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-black text-foreground">Votre Clé API</h2>
+                            <p className="text-muted-foreground font-medium">Utilisez ce token pour authentifier vos requêtes.</p>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col md:flex-row items-center gap-4">
+                        <div className="flex-1 w-full relative group">
+                            <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                <Terminal className="h-5 w-5 text-muted-foreground" />
+                            </div>
+                            <input
+                                type="text"
+                                readOnly
+                                value={token || 'Chargement...'}
+                                className="w-full pl-12 pr-12 py-5 bg-white/50 border border-white/20 rounded-2xl font-mono text-sm focus:ring-4 focus:ring-primary/10 outline-none transition-all"
+                            />
+                            <button
+                                onClick={() => copyToClipboard(token)}
+                                className="absolute inset-y-0 right-4 flex items-center text-muted-foreground hover:text-primary transition-colors"
+                            >
+                                {copied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5" />}
+                            </button>
+                        </div>
+                        <Button
+                            onClick={regenerateToken}
+                            disabled={loading}
+                            className="w-full md:w-auto px-8 py-7 rounded-2xl bg-primary text-white font-bold shadow-lg hover:shadow-primary/20 transition-all hover:scale-105"
+                        >
+                            <RefreshCw className={`h-5 w-5 mr-2 ${loading ? 'animate-spin' : ''}`} />
+                            Régénérer le Token
+                        </Button>
+                    </div>
+
+                    <div className="mt-6 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-2xl flex items-start">
+                        <div className="p-2 bg-yellow-500/20 rounded-lg mr-4 mt-1">
+                            <Lock className="h-4 w-4 text-yellow-600" />
+                        </div>
+                        <p className="text-sm text-yellow-800 font-medium">
+                            Gardez votre token secret. Ne le partagez jamais dans des environnements publics ou côté client (frontend).
+                        </p>
+                    </div>
+                </div>
+            </motion.div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+                {/* Documentation des Endpoints */}
+                <motion.div
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="space-y-6"
+                >
+                    <div className="flex items-center mb-4">
+                        <Globe className="h-6 w-6 text-primary mr-3" />
+                        <h2 className="text-2xl font-black text-foreground">Endpoints Publics</h2>
+                    </div>
+
+                    {endpoints.map((ep, i) => (
+                        <div key={i} className="glass rounded-3xl p-6 border border-white/20 hover:border-primary/30 transition-all group">
+                            <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center space-x-3">
+                                    <span className="px-3 py-1 bg-primary text-white text-xs font-black rounded-lg uppercase tracking-widest">
+                                        {ep.method}
+                                    </span>
+                                    <code className="text-sm font-bold text-foreground/80">{ep.path}</code>
+                                </div>
+                                <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                            </div>
+                            <p className="text-muted-foreground text-sm font-medium mb-4">{ep.description}</p>
+
+                            <div className="space-y-2">
+                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/60">Paramètres</p>
+                                {ep.params.map((param, pi) => (
+                                    <div key={pi} className="flex items-start text-xs">
+                                        <span className="font-bold text-primary mr-2">{param.name}</span>
+                                        <span className="text-muted-foreground/60 mr-2">({param.type})</span>
+                                        <span className="text-foreground/70">{param.desc}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </motion.div>
+
+                {/* Exemples de Code */}
+                <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="space-y-6"
+                >
+                    <div className="flex items-center mb-4">
+                        <Code className="h-6 w-6 text-secondary mr-3" />
+                        <h2 className="text-2xl font-black text-foreground">Exemples d'Intégration</h2>
+                    </div>
+
+                    <div className="glass rounded-[2.5rem] overflow-hidden border border-white/20 shadow-2xl">
+                        <div className="flex border-b border-white/10 bg-white/5">
+                            {['python', 'javascript', 'curl'].map((tab) => (
+                                <button
+                                    key={tab}
+                                    onClick={() => setActiveTab(tab)}
+                                    className={`px-8 py-4 text-xs font-black uppercase tracking-widest transition-all ${activeTab === tab
+                                        ? 'bg-primary text-white'
+                                        : 'text-muted-foreground hover:bg-white/10'
+                                        }`}
+                                >
+                                    {tab}
+                                </button>
+                            ))}
+                        </div>
+
+                        <div className="p-8 bg-black/40 relative group">
+                            <button
+                                onClick={() => copyToClipboard(codeExamples[activeTab])}
+                                className="absolute top-6 right-6 p-2 bg-white/10 hover:bg-white/20 rounded-xl text-white transition-all opacity-0 group-hover:opacity-100"
+                            >
+                                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                            </button>
+                            <pre className="font-mono text-sm text-blue-100 overflow-x-auto">
+                                <code>{codeExamples[activeTab]}</code>
+                            </pre>
+                        </div>
+
+                        <div className="p-8 bg-white/5 border-t border-white/10">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center">
+                                    <div className="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center mr-4">
+                                        <Database className="h-5 w-5 text-secondary" />
+                                    </div>
+                                    <div>
+                                        <p className="text-sm font-bold text-foreground">SDK AfriDataHub</p>
+                                        <p className="text-xs text-muted-foreground">Bientôt disponible sur PyPI et NPM.</p>
+                                    </div>
+                                </div>
+                                <Button variant="ghost" className="text-xs font-bold text-secondary hover:bg-secondary/10">
+                                    S'inscrire à la Beta
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    )
+}
+
+export default APIDocumentation

afridatahub-frontend/src/components/AfricaMap.jsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, useMemo } from 'react'
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'
+import { scaleLinear } from 'd3-scale'
+import { motion, AnimatePresence } from 'framer-motion'
+import africaTopo from '../assets/africa.json'
+import { API_URL } from '../config'
+
+const AfricaMap = ({ onCountryClick, data: externalData }) => {
+  const [internalData, setInternalData] = useState({})
+  const [loading, setLoading] = useState(true)
+  const [tooltipContent, setTooltipContent] = useState('')
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  const data = externalData || internalData
+
+  useEffect(() => {
+    if (!externalData) {
+      fetchMapData()
+    } else {
+      setLoading(false)
+    }
+  }, [externalData])
+
+  const fetchMapData = async () => {
+    try {
+      const response = await fetch(`${API_URL}datasets/map_data/`)
+      const result = await response.json()
+      setInternalData(result)
+    } catch (error) {
+      console.error('Erreur lors du chargement des données de la carte:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const colorScale = useMemo(() => {
+    const values = Object.values(data).map(d => d.value).filter(v => v !== undefined)
+    const min = Math.min(...values, 0)
+    const max = Math.max(...values, 100)
+
+    return scaleLinear()
+      .domain([min, max])
+      .range(["#ede9fe", "#7c3aed"])
+  }, [data])
+
+  const handleMouseEnter = (geo, evt) => {
+    const countryCode = geo.properties['iso-a2']
+    const countryName = geo.properties.name
+    const countryData = data[countryCode]
+
+    setTooltipContent({
+      name: countryName,
+      value: countryData ? `${countryData.value.toLocaleString()} ${countryData.unit}` : 'Pas de données',
+      source: countryData?.source,
+      date: countryData?.date
+    })
+    setMousePosition({ x: evt.clientX, y: evt.clientY })
+  }
+
+  const handleMouseMove = (evt) => {
+    setMousePosition({ x: evt.clientX, y: evt.clientY })
+  }
+
+  const handleMouseLeave = () => {
+    setTooltipContent('')
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6 relative overflow-hidden">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-gray-900">
+          Carte interactive de l'Afrique
+        </h3>
+        {loading && <span className="text-sm text-gray-500">Chargement...</span>}
+      </div>
+
+      <div className="h-[600px] w-full bg-slate-50 rounded-xl overflow-hidden relative">
+        <ComposableMap
+          projection="geoMercator"
+          projectionConfig={{
+            scale: 400,
+            center: [20, 0]
+          }}
+          className="w-full h-full"
+        >
+          <ZoomableGroup>
+            <Geographies geography={africaTopo}>
+              {({ geographies }) =>
+                geographies.map((geo) => {
+                  const countryCode = geo.properties['iso-a2']
+                  const countryData = data[countryCode]
+
+                  return (
+                    <Geography
+                      key={geo.rsmKey}
+                      geography={geo}
+                      onMouseEnter={(evt) => handleMouseEnter(geo, evt)}
+                      onMouseMove={handleMouseMove}
+                      onMouseLeave={handleMouseLeave}
+                      onClick={() => {
+                        if (countryData && onCountryClick) {
+                          onCountryClick(countryCode, countryData)
+                        }
+                      }}
+                      style={{
+                        default: {
+                          fill: countryData ? colorScale(countryData.value) : "#F5F4F6",
+                          stroke: "#D6D6DA",
+                          strokeWidth: 0.5,
+                          outline: "none",
+                          transition: "all 250ms"
+                        },
+                        hover: {
+                          fill: "#a78bfa",
+                          stroke: "#7c3aed",
+                          strokeWidth: 1,
+                          outline: "none",
+                          cursor: "pointer"
+                        },
+                        pressed: {
+                          fill: "#7c3aed",
+                          outline: "none"
+                        }
+                      }}
+                    />
+                  )
+                })
+              }
+            </Geographies>
+          </ZoomableGroup>
+        </ComposableMap>
+
+        {/* Tooltip personnalisé */}
+        <AnimatePresence>
+          {tooltipContent && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              style={{
+                position: 'fixed',
+                left: mousePosition.x + 20,
+                top: mousePosition.y - 20,
+                pointerEvents: 'none',
+                zIndex: 50
+              }}
+              className="bg-white p-4 rounded-lg shadow-xl border border-purple-100 min-w-[200px]"
+            >
+              <h4 className="font-bold text-gray-900 mb-1">{tooltipContent.name}</h4>
+              <div className="text-sm space-y-1">
+                <p className="text-purple-600 font-medium">{tooltipContent.value}</p>
+                {tooltipContent.source && (
+                  <p className="text-xs text-gray-500">Source: {tooltipContent.source}</p>
+                )}
+                {tooltipContent.date && (
+                  <p className="text-xs text-gray-400">
+                    {new Date(tooltipContent.date).toLocaleDateString()}
+                  </p>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="mt-4 flex items-center justify-between text-xs text-gray-500">
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center">
+            <div className="w-3 h-3 rounded-full bg-[#F5F4F6] border border-gray-200 mr-1"></div>
+            <span>Pas de données</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 rounded-full bg-[#ede9fe] mr-1"></div>
+            <span>Faible</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 rounded-full bg-[#7c3aed] mr-1"></div>
+            <span>Élevé</span>
+          </div>
+        </div>
+        <div className="text-right">
+          <p>Utilisez la molette pour zoomer • Glissez pour vous déplacer</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AfricaMap
+

afridatahub-frontend/src/components/Alerts.jsx

@@ -0,0 +1,384 @@
+/**
+ * Composant Alerts pour AfriDataHub avec analyse prédictive
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import {
+  AlertTriangle,
+  TrendingUp,
+  TrendingDown,
+  Activity,
+  Filter,
+  RefreshCw,
+  Settings,
+  BarChart3,
+  Brain,
+  Zap
+} from 'lucide-react'
+import { API_URL } from '../config'
+
+const Alerts = () => {
+  const [alerts, setAlerts] = useState([])
+  const [analyticsData, setAnalyticsData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [selectedSeverity, setSelectedSeverity] = useState('')
+  const [selectedType, setSelectedType] = useState('')
+
+  useEffect(() => {
+    fetchAlertsAndAnalytics()
+  }, [])
+
+  const fetchAlertsAndAnalytics = async () => {
+    try {
+      setLoading(true)
+
+      // Récupérer les alertes et données d'analyse
+      const [alertsResponse, analyticsResponse] = await Promise.all([
+        fetch(`${API_URL}alerts/`),
+        fetch(`${API_URL}analytics/dashboard/`)
+      ])
+
+      const alertsData = await alertsResponse.json()
+      const analytics = await analyticsResponse.json()
+
+      setAlerts(alertsData.results || [])
+      setAnalyticsData(analytics)
+    } catch (error) {
+      console.error('Erreur lors du chargement des alertes:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const triggerAnalysis = async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`${API_URL}analytics/trigger/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({})
+      })
+
+      if (response.ok) {
+        await fetchAlertsAndAnalytics()
+      }
+    } catch (error) {
+      console.error('Erreur lors du déclenchement de l\'analyse:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getSeverityColor = (severity) => {
+    const colors = {
+      'critical': 'bg-red-100 text-red-800 border-red-200',
+      'high': 'bg-orange-100 text-orange-800 border-orange-200',
+      'medium': 'bg-yellow-100 text-yellow-800 border-yellow-200',
+      'low': 'bg-green-100 text-green-800 border-green-200'
+    }
+    return colors[severity] || 'bg-gray-100 text-gray-800 border-gray-200'
+  }
+
+  const getSeverityIcon = (severity) => {
+    switch (severity) {
+      case 'critical':
+      case 'high':
+        return <AlertTriangle className="h-5 w-5" />
+      case 'medium':
+        return <Activity className="h-5 w-5" />
+      case 'low':
+        return <TrendingUp className="h-5 w-5" />
+      default:
+        return <AlertTriangle className="h-5 w-5" />
+    }
+  }
+
+  const getAlertTypeIcon = (alertType) => {
+    switch (alertType) {
+      case 'trend_up':
+        return <TrendingUp className="h-4 w-4 text-green-600" />
+      case 'trend_down':
+        return <TrendingDown className="h-4 w-4 text-red-600" />
+      case 'anomaly':
+        return <Activity className="h-4 w-4 text-orange-600" />
+      default:
+        return <AlertTriangle className="h-4 w-4 text-gray-600" />
+    }
+  }
+
+  const filteredAlerts = alerts.filter(alert => {
+    if (selectedSeverity && alert.severity !== selectedSeverity) return false
+    if (selectedType && alert.alert_type !== selectedType) return false
+    return true
+  })
+
+  const severityCounts = analyticsData?.alerts_by_severity || {}
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* En-tête */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col md:flex-row md:items-end md:justify-between gap-6"
+      >
+        <div>
+          <h1 className="text-4xl font-black text-foreground tracking-tight">Système d'<span className="text-gradient">Alerte</span></h1>
+          <p className="text-muted-foreground font-medium mt-2 text-lg">
+            Surveillance proactive et détection d'anomalies par Intelligence Artificielle.
+          </p>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Button
+            variant="ghost"
+            onClick={triggerAnalysis}
+            disabled={loading}
+            className="rounded-2xl hover:bg-primary/10 text-primary font-bold"
+          >
+            <Brain className={`h-4 w-4 mr-2 ${loading ? 'animate-pulse' : ''}`} />
+            Lancer l'Analyse IA
+          </Button>
+          <Button
+            onClick={fetchAlertsAndAnalytics}
+            disabled={loading}
+            className="rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg hover:shadow-primary/20 transition-all hover:scale-105"
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+            Actualiser
+          </Button>
+          <Button variant="ghost" className="rounded-2xl hover:bg-muted font-bold">
+            <Settings className="h-4 w-4 mr-2" />
+            Configuration
+          </Button>
+        </div>
+      </motion.div>
+
+      {/* Statistiques des alertes Glassmorphism */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
+      >
+        {[
+          { label: 'Critique', count: severityCounts.critical || 0, color: 'from-red-500 to-rose-600', icon: AlertTriangle, bg: 'bg-red-500/10' },
+          { label: 'Élevée', count: severityCounts.high || 0, color: 'from-orange-500 to-amber-600', icon: AlertTriangle, bg: 'bg-orange-500/10' },
+          { label: 'Moyenne', count: severityCounts.medium || 0, color: 'from-yellow-500 to-orange-400', icon: Activity, bg: 'bg-yellow-500/10' },
+          { label: 'Faible', count: severityCounts.low || 0, color: 'from-emerald-500 to-teal-600', icon: TrendingUp, bg: 'bg-emerald-500/10' }
+        ].map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            whileHover={{ y: -5 }}
+            className="glass rounded-[2rem] p-6 relative overflow-hidden group cursor-pointer"
+          >
+            <div className={`absolute top-0 right-0 w-24 h-24 ${stat.bg} rounded-full -mr-12 -mt-12 blur-2xl group-hover:scale-150 transition-transform duration-500`}></div>
+            <div className="relative z-10 flex items-center">
+              <div className={`p-4 rounded-2xl bg-gradient-to-br ${stat.color} shadow-lg mr-4 group-hover:rotate-12 transition-transform`}>
+                <stat.icon className="h-6 w-6 text-white" />
+              </div>
+              <div>
+                <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">{stat.label}</p>
+                <p className="text-3xl font-black text-foreground">{stat.count}</p>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      {/* Filtres */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass rounded-[2rem] p-6 shadow-xl"
+      >
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="flex-1">
+            <div className="relative group">
+              <Filter className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground group-focus-within:text-primary transition-colors" />
+              <select
+                value={selectedSeverity}
+                onChange={(e) => setSelectedSeverity(e.target.value)}
+                className="w-full pl-12 pr-10 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-bold text-foreground appearance-none cursor-pointer"
+              >
+                <option value="">Toutes les sévérités</option>
+                <option value="critical">🔴 Critique</option>
+                <option value="high">🟠 Élevée</option>
+                <option value="medium">🟡 Moyenne</option>
+                <option value="low">🟢 Faible</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="flex-1">
+            <select
+              value={selectedType}
+              onChange={(e) => setSelectedType(e.target.value)}
+              className="w-full px-6 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-bold text-foreground appearance-none cursor-pointer"
+            >
+              <option value="">Tous les types d'analyse</option>
+              <option value="trend_up">📈 Tendance à la hausse</option>
+              <option value="trend_down">📉 Tendance à la baisse</option>
+              <option value="anomaly">⚠️ Anomalie détectée</option>
+              <option value="threshold">🔔 Seuil dépassé</option>
+              <option value="missing_data">❓ Données manquantes</option>
+            </select>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Liste des alertes */}
+      <div className="space-y-6">
+        <div className="flex items-center justify-between px-2">
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
+            <h2 className="text-muted-foreground font-bold uppercase tracking-widest text-xs">
+              {filteredAlerts.length} alerte{filteredAlerts.length > 1 ? 's' : ''} active{filteredAlerts.length > 1 ? 's' : ''}
+            </h2>
+          </div>
+        </div>
+
+        {filteredAlerts.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="text-center py-24 glass rounded-[3rem]"
+          >
+            <div className="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
+              <Zap className="h-10 w-10 text-primary" />
+            </div>
+            <h3 className="text-2xl font-black text-foreground mb-2">Horizon dégagé</h3>
+            <p className="text-muted-foreground font-medium max-w-md mx-auto">
+              Aucune alerte critique n'a été détectée pour le moment. Votre écosystème de données est stable.
+            </p>
+          </motion.div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6">
+            {filteredAlerts.map((alert, index) => (
+              <motion.div
+                key={alert.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: index * 0.05 }}
+                className="glass rounded-[2.5rem] p-8 relative overflow-hidden group hover:shadow-2xl transition-all duration-500"
+              >
+                <div className={`absolute left-0 top-0 bottom-0 w-2 bg-gradient-to-b ${alert.severity === 'critical' ? 'from-red-500 to-rose-600' :
+                  alert.severity === 'high' ? 'from-orange-500 to-amber-600' :
+                    alert.severity === 'medium' ? 'from-yellow-500 to-orange-400' :
+                      'from-emerald-500 to-teal-600'
+                  }`}></div>
+
+                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
+                  <div className="flex items-start space-x-6">
+                    <div className={`p-5 rounded-[1.5rem] bg-white/50 shadow-inner group-hover:scale-110 transition-transform duration-500`}>
+                      {getSeverityIcon(alert.severity)}
+                    </div>
+                    <div>
+                      <div className="flex flex-wrap items-center gap-3 mb-3">
+                        <div className="flex items-center space-x-2">
+                          {getAlertTypeIcon(alert.alert_type)}
+                          <h3 className="text-xl font-black text-foreground group-hover:text-primary transition-colors">
+                            {alert.title}
+                          </h3>
+                        </div>
+                        <span className={`px-4 py-1 text-xs font-black uppercase tracking-widest rounded-full bg-white/50 border border-white/20`}>
+                          {alert.severity === 'critical' ? 'Critique' :
+                            alert.severity === 'high' ? 'Élevée' :
+                              alert.severity === 'medium' ? 'Moyenne' : 'Faible'}
+                        </span>
+                      </div>
+                      <p className="text-muted-foreground font-medium text-lg leading-relaxed mb-6 max-w-3xl">{alert.message}</p>
+                      <div className="flex flex-wrap items-center gap-6">
+                        <div className="flex items-center space-x-2 px-4 py-2 bg-white/30 rounded-xl border border-white/20">
+                          <span className="text-lg">📍</span>
+                          <span className="text-sm font-bold text-foreground/70">{alert.country_name || alert.country}</span>
+                        </div>
+                        <div className="flex items-center space-x-2 px-4 py-2 bg-white/30 rounded-xl border border-white/20">
+                          <BarChart3 className="h-4 w-4 text-primary" />
+                          <span className="text-sm font-bold text-foreground/70">{alert.dataset_title}</span>
+                        </div>
+                        <div className="flex items-center space-x-2 px-4 py-2 bg-white/30 rounded-xl border border-white/20">
+                          <span className="text-sm font-bold text-foreground/70">🕒 {new Date(alert.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' })}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex lg:flex-col gap-3">
+                    <Button className="rounded-2xl bg-primary text-white font-bold px-8 py-6 shadow-lg hover:shadow-primary/20 transition-all hover:scale-105">
+                      <BarChart3 className="h-4 w-4 mr-2" />
+                      Analyser
+                    </Button>
+                    <Button variant="ghost" className="rounded-2xl hover:bg-primary/10 text-primary font-bold px-8 py-6">
+                      Détails
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Insights d'analyse prédictive Premium */}
+      {analyticsData?.global_trends && (
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="relative overflow-hidden rounded-[3rem] p-12 text-white shadow-2xl"
+        >
+          <div className="absolute inset-0 bg-gradient-to-br from-primary to-secondary opacity-90"></div>
+          <div className="absolute inset-0 bg-mesh opacity-20"></div>
+
+          <div className="relative z-10">
+            <h3 className="text-3xl font-black mb-10 flex items-center">
+              <Brain className="h-8 w-8 mr-4 text-yellow-300" />
+              Intelligence Prédictive
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {Object.entries(analyticsData.global_trends).map(([datasetTitle, trend]) => (
+                <motion.div
+                  key={datasetTitle}
+                  whileHover={{ y: -5 }}
+                  className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 group cursor-pointer"
+                >
+                  <h4 className="font-black text-yellow-300 mb-4 text-xl">{datasetTitle}</h4>
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/70 font-bold text-sm uppercase tracking-widest">Tendances</span>
+                      <span className="text-white font-black">{trend.trends_count}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-white/70 font-bold text-sm uppercase tracking-widest">Variation</span>
+                      <span className="text-white font-black">{trend.avg_change.toFixed(1)}%</span>
+                    </div>
+                    <div className="mt-4 h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${Math.min(Math.abs(trend.avg_change) * 5, 100)}%` }}
+                        className="h-full bg-yellow-300"
+                      />
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  )
+}
+
+export default Alerts
+

afridatahub-frontend/src/components/Analytics.jsx

@@ -0,0 +1,311 @@
+/**
+ * Composant Analytics pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import AfricaMap from './AfricaMap'
+import {
+  CountryBarChart,
+  TrendLineChart,
+  DomainPieChart,
+  ComparisonBarChart,
+  MetricsChart
+} from './Charts'
+import {
+  BarChart3,
+  TrendingUp,
+  Globe,
+  Filter,
+  Download,
+  RefreshCw
+} from 'lucide-react'
+import { API_URL } from '../config'
+
+const Analytics = () => {
+  const [loading, setLoading] = useState(true)
+  const [selectedDataset, setSelectedDataset] = useState('')
+  const [selectedCountry, setSelectedCountry] = useState('')
+  const [datasets, setDatasets] = useState([])
+  const [analyticsData, setAnalyticsData] = useState(null)
+
+  useEffect(() => {
+    fetchDatasets()
+    fetchAnalyticsData()
+  }, [])
+
+  useEffect(() => {
+    if (selectedDataset) {
+      fetchAnalyticsData(selectedDataset)
+    }
+  }, [selectedDataset])
+
+  const fetchDatasets = async () => {
+    try {
+      const response = await fetch(`${API_URL}datasets/`)
+      const data = await response.json()
+      setDatasets(data.results || [])
+    } catch (error) {
+      console.error('Erreur lors du chargement des datasets:', error)
+    }
+  }
+
+  const fetchAnalyticsData = async (datasetRef = null) => {
+    try {
+      setLoading(true)
+
+      let url = `${API_URL}analytics/comprehensive/`
+      if (datasetRef) {
+        url += `?dataset_id=${datasetRef}`
+      }
+
+      const response = await fetch(url)
+      const data = await response.json()
+
+      setAnalyticsData(data)
+    } catch (error) {
+      console.error('Erreur lors du chargement des données d\'analyse:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCountryClick = (countryCode, countryInfo) => {
+    setSelectedCountry(countryCode)
+  }
+
+  const handleExportData = () => {
+    // Logique d'export des données
+    console.log('Export des données d\'analyse')
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* En-tête */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col md:flex-row md:items-end md:justify-between gap-6"
+      >
+        <div>
+          <h1 className="text-4xl font-black text-foreground tracking-tight">Intelligence <span className="text-gradient">Analytique</span></h1>
+          <p className="text-muted-foreground font-medium mt-2 text-lg">
+            Visualisations avancées et corrélations stratégiques en temps réel.
+          </p>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Button
+            variant="ghost"
+            onClick={fetchAnalyticsData}
+            disabled={loading}
+            className="rounded-2xl hover:bg-primary/10 text-primary font-bold"
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+            Actualiser
+          </Button>
+          <Button
+            onClick={handleExportData}
+            className="rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg hover:shadow-primary/20 transition-all hover:scale-105"
+          >
+            <Download className="h-4 w-4 mr-2" />
+            Exporter le rapport
+          </Button>
+        </div>
+      </motion.div>
+
+      {/* Filtres Glassmorphism */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass rounded-[2rem] p-6 shadow-xl"
+      >
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="flex-1">
+            <div className="relative group">
+              <Filter className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground group-focus-within:text-primary transition-colors" />
+              <select
+                value={selectedDataset}
+                onChange={(e) => setSelectedDataset(e.target.value)}
+                className="w-full pl-12 pr-10 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-bold text-foreground appearance-none cursor-pointer"
+              >
+                <option value="">Tous les datasets (Vue globale)</option>
+                {datasets.map(dataset => (
+                  <option key={dataset.slug} value={dataset.slug}>
+                    {dataset.title}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="md:w-64">
+            <select
+              className="w-full px-6 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-bold text-foreground appearance-none cursor-pointer"
+            >
+              <option value="">Période: Historique Complet</option>
+              <option value="2024">Année 2024</option>
+              <option value="2023">Année 2023</option>
+              <option value="last5">5 dernières années</option>
+            </select>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Carte interactive et métriques */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="lg:col-span-2 glass rounded-[3rem] p-10 relative overflow-hidden"
+        >
+          <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+            <Globe className="w-48 h-48 text-primary" />
+          </div>
+          <div className="relative z-10">
+            <div className="mb-8">
+              <h3 className="text-2xl font-black text-foreground mb-1">Distribution Géographique</h3>
+              <p className="text-muted-foreground font-medium">Cliquez sur un pays pour isoler ses performances.</p>
+            </div>
+            <AfricaMap
+              data={analyticsData?.mapData || {}}
+              onCountryClick={handleCountryClick}
+              selectedCountry={selectedCountry}
+            />
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="glass rounded-[3rem] p-10"
+        >
+          <MetricsChart
+            data={analyticsData?.metricsData || []}
+            title="Indicateurs de Performance"
+            metric="value"
+          />
+        </motion.div>
+      </div>
+
+      {/* Graphiques de données */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="glass rounded-[3rem] p-10"
+        >
+          <CountryBarChart
+            data={analyticsData?.countryData || []}
+            title="Top 10 des Leaders par Valeur"
+            dataKey="value"
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="glass rounded-[3rem] p-10"
+        >
+          <DomainPieChart
+            data={analyticsData?.domainData || []}
+            title="Structure du Portefeuille de Données"
+          />
+        </motion.div>
+      </div>
+
+      {/* Tendances et comparaisons */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="glass rounded-[3rem] p-10"
+        >
+          <TrendLineChart
+            data={analyticsData?.trendData || []}
+            title="Trajectoire Temporelle (5 ans)"
+            lines={[
+              { dataKey: 'agriculture', name: 'Agriculture' },
+              { dataKey: 'health', name: 'Santé' },
+              { dataKey: 'economy', name: 'Économie' }
+            ]}
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="glass rounded-[3rem] p-10"
+        >
+          <ComparisonBarChart
+            data={analyticsData?.comparisonData || []}
+            title="Analyse Comparative Régionale"
+            bars={[
+              { dataKey: 'agriculture', name: 'Agriculture' },
+              { dataKey: 'health', name: 'Santé' },
+              { dataKey: 'economy', name: 'Économie' }
+            ]}
+          />
+        </motion.div>
+      </div>
+
+      {/* Insights automatiques */}
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="relative overflow-hidden rounded-[3rem] p-12 text-white shadow-2xl"
+      >
+        <div className="absolute inset-0 bg-gradient-to-br from-primary to-secondary opacity-90"></div>
+        <div className="absolute inset-0 bg-mesh opacity-20"></div>
+
+        <div className="relative z-10">
+          <div className="flex items-center justify-between mb-10">
+            <h3 className="text-3xl font-black flex items-center">
+              <TrendingUp className="h-8 w-8 mr-4 text-yellow-300" />
+              Insights Stratégiques IA
+            </h3>
+            <div className="px-4 py-2 bg-white/20 backdrop-blur-md rounded-full text-xs font-bold uppercase tracking-widest border border-white/30">
+              Généré par Gemini 2.5
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {analyticsData?.global_trends && Object.entries(analyticsData.global_trends).length > 0 ? (
+              Object.entries(analyticsData.global_trends).map(([title, trend]) => (
+                <motion.div
+                  key={title}
+                  whileHover={{ y: -5 }}
+                  className="bg-white/10 backdrop-blur-lg rounded-3xl p-6 border border-white/20 group cursor-pointer"
+                >
+                  <h4 className="font-black text-yellow-300 mb-3 text-lg group-hover:scale-105 transition-transform origin-left">{title}</h4>
+                  <p className="text-white/90 font-medium leading-relaxed">
+                    {trend.trends_count} tendances analysées avec une variation moyenne de <span className="text-white font-black">{trend.avg_change.toFixed(1)}%</span>
+                  </p>
+                </motion.div>
+              ))
+            ) : (
+              <div className="col-span-full py-12 text-center">
+                <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
+                  <RefreshCw className="h-8 w-8 text-white animate-spin" />
+                </div>
+                <p className="text-xl font-bold text-white/70">Analyse du flux de données en cours...</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+export default Analytics
+

afridatahub-frontend/src/components/Charts.jsx

@@ -0,0 +1,242 @@
+/**
+ * Composants de graphiques pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { 
+  BarChart, 
+  Bar, 
+  LineChart, 
+  Line, 
+  PieChart, 
+  Pie, 
+  Cell,
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  Legend, 
+  ResponsiveContainer 
+} from 'recharts'
+
+// Palette de couleurs AfriDataHub
+const COLORS = {
+  primary: '#7c3aed',    // violet
+  secondary: '#ec4899',  // rose
+  success: '#10b981',    // vert
+  warning: '#f59e0b',    // orange
+  info: '#3b82f6',       // bleu
+  danger: '#ef4444',     // rouge
+  gray: '#6b7280'        // gris
+}
+
+const CHART_COLORS = [
+  COLORS.primary,
+  COLORS.secondary,
+  COLORS.success,
+  COLORS.warning,
+  COLORS.info,
+  COLORS.danger,
+  '#8b5cf6',
+  '#f472b6',
+  '#34d399',
+  '#fbbf24'
+]
+
+// Composant Tooltip personnalisé
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white p-3 border border-gray-200 rounded-lg shadow-lg">
+        <p className="font-medium text-gray-900">{label}</p>
+        {payload.map((entry, index) => (
+          <p key={index} style={{ color: entry.color }} className="text-sm">
+            {entry.name}: {entry.value?.toLocaleString()}
+          </p>
+        ))}
+      </div>
+    )
+  }
+  return null
+}
+
+// Graphique en barres pour les données par pays
+export const CountryBarChart = ({ data, title, dataKey, xAxisKey = 'country' }) => {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
+          <XAxis 
+            dataKey={xAxisKey} 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <YAxis 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Bar 
+            dataKey={dataKey} 
+            fill={COLORS.primary}
+            radius={[4, 4, 0, 0]}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// Graphique en ligne pour les tendances temporelles
+export const TrendLineChart = ({ data, title, lines = [] }) => {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
+          <XAxis 
+            dataKey="date" 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <YAxis 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          {lines.map((line, index) => (
+            <Line
+              key={line.dataKey}
+              type="monotone"
+              dataKey={line.dataKey}
+              stroke={CHART_COLORS[index % CHART_COLORS.length]}
+              strokeWidth={2}
+              dot={{ r: 4 }}
+              name={line.name}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// Graphique en secteurs pour la répartition
+export const DomainPieChart = ({ data, title }) => {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// Graphique de comparaison multi-barres
+export const ComparisonBarChart = ({ data, title, bars = [] }) => {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
+          <XAxis 
+            dataKey="name" 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <YAxis 
+            tick={{ fontSize: 12, fill: '#6b7280' }}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          {bars.map((bar, index) => (
+            <Bar
+              key={bar.dataKey}
+              dataKey={bar.dataKey}
+              fill={CHART_COLORS[index % CHART_COLORS.length]}
+              name={bar.name}
+              radius={[2, 2, 0, 0]}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// Graphique de métriques avec indicateurs
+export const MetricsChart = ({ data, title, metric }) => {
+  const formatValue = (value) => {
+    if (value >= 1000000) {
+      return `${(value / 1000000).toFixed(1)}M`
+    } else if (value >= 1000) {
+      return `${(value / 1000).toFixed(1)}K`
+    }
+    return value.toString()
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      <div className="space-y-4">
+        {data.map((item, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex items-center">
+              <div 
+                className="w-4 h-4 rounded mr-3"
+                style={{ backgroundColor: CHART_COLORS[index % CHART_COLORS.length] }}
+              />
+              <span className="text-sm font-medium text-gray-700">{item.name}</span>
+            </div>
+            <div className="flex items-center">
+              <span className="text-lg font-bold text-gray-900 mr-2">
+                {formatValue(item[metric])}
+              </span>
+              {item.change && (
+                <span className={`text-xs px-2 py-1 rounded-full ${
+                  item.change > 0 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-red-100 text-red-800'
+                }`}>
+                  {item.change > 0 ? '+' : ''}{item.change}%
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default {
+  CountryBarChart,
+  TrendLineChart,
+  DomainPieChart,
+  ComparisonBarChart,
+  MetricsChart
+}
+

afridatahub-frontend/src/components/Dashboard.jsx

@@ -0,0 +1,297 @@
+/**
+ * Composant Dashboard pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import AfricaMap from './AfricaMap'
+import {
+  BarChart3,
+  Database,
+  AlertTriangle,
+  TrendingUp,
+  Globe,
+  Activity,
+  Users,
+  Zap
+} from 'lucide-react'
+import { API_URL } from '../config'
+
+const Dashboard = () => {
+  const [stats, setStats] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchStats()
+  }, [])
+
+  const fetchStats = async () => {
+    try {
+      const response = await fetch(`${API_URL}datasets/stats/`)
+      const data = await response.json()
+      setStats(data)
+    } catch (error) {
+      console.error('Erreur lors du chargement des statistiques:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const StatCard = ({ title, value, icon: Icon, color, description }) => (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      whileHover={{ y: -5, scale: 1.02 }}
+      className="glass rounded-3xl p-6 transition-all duration-300 group cursor-pointer"
+    >
+      <div className="flex items-center justify-between mb-4">
+        <div className={`p-4 rounded-2xl ${color} shadow-lg group-hover:rotate-12 transition-transform duration-300`}>
+          <Icon className="h-6 w-6 text-white" />
+        </div>
+        <div className="h-12 w-12 rounded-full bg-primary/5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+          <TrendingUp className="h-5 w-5 text-primary" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">{title}</p>
+        <p className="text-3xl font-black text-foreground mt-1">{value}</p>
+        {description && (
+          <div className="flex items-center mt-3 text-xs font-medium text-success">
+            <Activity className="h-3 w-3 mr-1" />
+            <span>{description}</span>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+
+  const DomainCard = ({ domain, count }) => {
+    const getDomainInfo = (domain) => {
+      const info = {
+        agriculture: { label: 'Agriculture', color: 'bg-green-500', icon: '🌾' },
+        health: { label: 'Santé', color: 'bg-red-500', icon: '🏥' },
+        economy: { label: 'Économie', color: 'bg-blue-500', icon: '💰' },
+        weather: { label: 'Météo', color: 'bg-cyan-500', icon: '🌤️' },
+        energy: { label: 'Énergie', color: 'bg-yellow-500', icon: '⚡' },
+        education: { label: 'Éducation', color: 'bg-purple-500', icon: '📚' },
+        population: { label: 'Population', color: 'bg-pink-500', icon: '👥' },
+        environment: { label: 'Environnement', color: 'bg-emerald-500', icon: '🌍' },
+        transport: { label: 'Transport', color: 'bg-orange-500', icon: '🚗' },
+        other: { label: 'Autre', color: 'bg-gray-500', icon: '📊' },
+      }
+      return info[domain] || info.other
+    }
+
+    const domainInfo = getDomainInfo(domain)
+
+    return (
+      <motion.div
+        whileHover={{ x: 5 }}
+        className="flex items-center justify-between p-4 bg-white/50 hover:bg-white rounded-2xl transition-colors border border-transparent hover:border-primary/20"
+      >
+        <div className="flex items-center">
+          <div className={`w-10 h-10 rounded-xl ${domainInfo.color} flex items-center justify-center text-xl shadow-sm mr-4`}>
+            {domainInfo.icon}
+          </div>
+          <span className="font-bold text-foreground/80">{domainInfo.label}</span>
+        </div>
+        <div className="px-3 py-1 bg-primary/10 rounded-full">
+          <span className="text-sm font-black text-primary">{count}</span>
+        </div>
+      </motion.div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[60vh]">
+        <div className="relative w-20 h-20">
+          <div className="absolute inset-0 border-4 border-primary/20 rounded-full"></div>
+          <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+        </div>
+        <p className="mt-4 font-bold text-primary animate-pulse">Chargement de l'univers AfriDataHub...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* En-tête Hero */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="relative overflow-hidden rounded-[3rem] p-12 text-white shadow-2xl"
+      >
+        <div className="absolute inset-0 bg-gradient-to-br from-primary via-secondary to-accent opacity-90"></div>
+        <div className="absolute inset-0 bg-mesh opacity-30 animate-pulse"></div>
+
+        <div className="relative z-10 max-w-3xl">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2 }}
+            className="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-md rounded-full mb-6 border border-white/30"
+          >
+            <Zap className="h-4 w-4 mr-2 text-yellow-300" />
+            <span className="text-xs font-bold uppercase tracking-widest">Intelligence Artificielle Active</span>
+          </motion.div>
+
+          <h1 className="text-5xl md:text-7xl font-black mb-6 leading-tight">
+            L'Afrique par les <span className="text-yellow-300">Données</span>
+          </h1>
+          <p className="text-xl text-white/80 font-medium leading-relaxed mb-10">
+            Explorez, analysez et visualisez le futur du continent à travers une plateforme intelligente, ouverte et interactive.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {[
+              { icon: Database, label: 'Données Réelles', color: 'bg-blue-400' },
+              { icon: BarChart3, label: 'Analyses IA', color: 'bg-purple-400' },
+              { icon: AlertTriangle, label: 'Alertes Prédictives', color: 'bg-pink-400' }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                whileHover={{ y: -5 }}
+                className="flex items-center p-4 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20"
+              >
+                <div className={`p-2 rounded-lg ${item.color} mr-3 shadow-lg`}>
+                  <item.icon className="h-5 w-5 text-white" />
+                </div>
+                <span className="font-bold text-sm">{item.label}</span>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* Élément décoratif flottant */}
+        <div className="absolute right-[-10%] top-[-10%] w-96 h-96 bg-white/10 rounded-full blur-3xl animate-float"></div>
+      </motion.div>
+
+      {/* Statistiques principales */}
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <StatCard
+            title="Total Datasets"
+            value={stats.total_datasets}
+            icon={Database}
+            color="bg-indigo-500"
+            description="Datasets certifiés"
+          />
+          <StatCard
+            title="Datasets Actifs"
+            value={stats.active_datasets}
+            icon={Activity}
+            color="bg-emerald-500"
+            description="Flux temps réel"
+          />
+          <StatCard
+            title="Points de Données"
+            value={stats.total_data_points?.toLocaleString() || '0'}
+            icon={Zap}
+            color="bg-amber-500"
+            description="Intelligence collectée"
+          />
+          <StatCard
+            title="Pays Couverts"
+            value={Object.keys(stats.countries_count || {}).length}
+            icon={Globe}
+            color="bg-rose-500"
+            description="Souveraineté numérique"
+          />
+        </div>
+      )}
+
+      {/* Répartition par domaine et mises à jour récentes */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        {/* Domaines */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="glass rounded-[2.5rem] p-10"
+        >
+          <div className="flex items-center justify-between mb-8">
+            <h3 className="text-2xl font-black text-foreground flex items-center">
+              <BarChart3 className="h-6 w-6 mr-3 text-primary" />
+              Domaines d'impact
+            </h3>
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <Activity className="h-5 w-5 text-primary" />
+            </div>
+          </div>
+          <div className="grid grid-cols-1 gap-4">
+            {stats?.domains_count && Object.entries(stats.domains_count).map(([domain, count]) => (
+              <DomainCard key={domain} domain={domain} count={count} />
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Mises à jour récentes */}
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="glass rounded-[2.5rem] p-10"
+        >
+          <div className="flex items-center justify-between mb-8">
+            <h3 className="text-2xl font-black text-foreground flex items-center">
+              <TrendingUp className="h-6 w-6 mr-3 text-secondary" />
+              Flux d'actualité
+            </h3>
+            <div className="p-2 bg-secondary/10 rounded-xl">
+              <Zap className="h-5 w-5 text-secondary" />
+            </div>
+          </div>
+          <div className="space-y-4">
+            {stats?.recent_updates?.map((dataset, i) => (
+              <motion.div
+                key={dataset.slug}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.1 }}
+                className="flex items-center justify-between p-5 bg-white/50 hover:bg-white rounded-2xl transition-all group cursor-pointer border border-transparent hover:border-secondary/20 shadow-sm"
+              >
+                <div className="flex items-center">
+                  <div className="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center mr-4 group-hover:scale-110 transition-transform">
+                    <Database className="h-5 w-5 text-secondary" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-foreground group-hover:text-secondary transition-colors">{dataset.title}</p>
+                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">{dataset.source_name}</p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-black text-foreground/60">
+                    {new Date(dataset.last_updated).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Carte de l'Afrique interactive */}
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass rounded-[3rem] p-12 overflow-hidden relative"
+      >
+        <div className="absolute top-0 right-0 p-12 opacity-5 pointer-events-none">
+          <Globe className="w-64 h-64 text-primary" />
+        </div>
+        <div className="relative z-10">
+          <div className="mb-10">
+            <h3 className="text-3xl font-black text-foreground mb-2">Cartographie Interactive</h3>
+            <p className="text-muted-foreground font-medium">Visualisez l'état du continent en temps réel par indicateur.</p>
+          </div>
+          <AfricaMap
+            onCountryClick={(code, info) => console.log('Pays sélectionné:', code, info)}
+          />
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+export default Dashboard
+

afridatahub-frontend/src/components/DatasetAnalysis.jsx

@@ -0,0 +1,275 @@
+import { motion, AnimatePresence } from 'framer-motion'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+    BarChart, Bar, Legend
+} from 'recharts'
+import { Button } from '@/components/ui/button'
+import {
+    Brain, TrendingUp, Lightbulb, Activity, Globe, Users, Zap, AlertTriangle
+} from 'lucide-react'
+
+// Mappage des icônes
+const iconMap = {
+    trending: TrendingUp,
+    globe: Globe,
+    users: Users,
+    activity: Activity,
+    zap: Zap,
+    peak: Activity
+}
+
+const WidgetFactory = ({ widget, chartsData, themeColor }) => {
+    const Icon = iconMap[widget.icon] || Activity
+
+    switch (widget.type) {
+        case 'header_section':
+            return (
+                <div className="mb-12">
+                    <h3 className="text-3xl font-black text-foreground mb-6 tracking-tight">{widget.title}</h3>
+                    <div className="prose prose-lg max-w-none text-muted-foreground leading-relaxed font-medium">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {widget.content}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )
+
+        case 'kpi_grid':
+            return (
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+                    {widget.items.map((item, idx) => {
+                        const ItemIcon = iconMap[item.icon] || Activity
+                        return (
+                            <motion.div
+                                key={idx}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: idx * 0.1 }}
+                                className="glass p-8 rounded-[2rem] shadow-xl flex items-center space-x-6 group hover:scale-105 transition-transform"
+                            >
+                                <div className={`p-5 rounded-2xl bg-white/50 shadow-inner group-hover:rotate-12 transition-transform`}>
+                                    <ItemIcon className={`h-8 w-8 ${item.color || 'text-primary'}`} />
+                                </div>
+                                <div>
+                                    <p className="text-xs text-muted-foreground font-black uppercase tracking-widest mb-1">{item.label}</p>
+                                    <p className="text-3xl font-black text-foreground">{item.value}</p>
+                                </div>
+                            </motion.div>
+                        )
+                    })}
+                </div>
+            )
+
+        case 'chart_section': {
+            const isEvolution = widget.chart_type === 'evolution'
+            const data = isEvolution ? chartsData.evolution : chartsData.top_countries
+
+            return (
+                <div className="glass p-10 rounded-[3rem] shadow-xl mb-12 relative overflow-hidden">
+                    <div className="relative z-10">
+                        <h3 className="text-2xl font-black text-foreground mb-8 flex items-center">
+                            <div className="p-3 rounded-xl bg-primary/10 mr-4">
+                                {isEvolution ? <TrendingUp className="h-6 w-6 text-primary" /> : <Activity className="h-6 w-6 text-primary" />}
+                            </div>
+                            {widget.title}
+                        </h3>
+
+                        <div className="h-96 mb-8">
+                            <ResponsiveContainer width="100%" height="100%">
+                                {isEvolution ? (
+                                    <LineChart data={data}>
+                                        <defs>
+                                            <linearGradient id="lineGradient" x1="0" y1="0" x2="0" y2="1">
+                                                <stop offset="5%" stopColor={`var(--color-${themeColor})`} stopOpacity={0.3} />
+                                                <stop offset="95%" stopColor={`var(--color-${themeColor})`} stopOpacity={0} />
+                                            </linearGradient>
+                                        </defs>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)" vertical={false} />
+                                        <XAxis dataKey="year" stroke="rgba(0,0,0,0.3)" fontSize={12} fontWeight="bold" />
+                                        <YAxis stroke="rgba(0,0,0,0.3)" fontSize={12} fontWeight="bold" />
+                                        <Tooltip
+                                            contentStyle={{ borderRadius: '20px', border: 'none', boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)', padding: '15px' }}
+                                        />
+                                        <Line
+                                            type="monotone"
+                                            dataKey="value"
+                                            stroke={`var(--color-${themeColor})`}
+                                            strokeWidth={4}
+                                            dot={{ fill: `var(--color-${themeColor})`, strokeWidth: 3, r: 6 }}
+                                            activeDot={{ r: 10, strokeWidth: 0 }}
+                                        />
+                                    </LineChart>
+                                ) : (
+                                    <BarChart data={data} layout="vertical">
+                                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)" horizontal={false} />
+                                        <XAxis type="number" stroke="rgba(0,0,0,0.3)" fontSize={12} fontWeight="bold" />
+                                        <YAxis dataKey="country" type="category" width={120} stroke="rgba(0,0,0,0.6)" fontSize={12} fontWeight="bold" />
+                                        <Tooltip
+                                            contentStyle={{ borderRadius: '20px', border: 'none', boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)', padding: '15px' }}
+                                        />
+                                        <Bar dataKey="value" fill={`var(--color-${themeColor})`} radius={[0, 10, 10, 0]} barSize={30} />
+                                    </BarChart>
+                                )}
+                            </ResponsiveContainer>
+                        </div>
+
+                        <div className="bg-white/30 backdrop-blur-md p-6 rounded-2xl border border-white/20">
+                            <p className="text-foreground font-medium italic leading-relaxed">
+                                "{widget.commentary}"
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+
+        case 'insight_cards':
+            return (
+                <div className="mb-12">
+                    <h3 className="text-2xl font-black text-foreground mb-8">{widget.title}</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {widget.items.map((insight, idx) => (
+                            <motion.div
+                                key={idx}
+                                initial={{ opacity: 0, scale: 0.95 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                transition={{ delay: idx * 0.1 }}
+                                className="glass p-8 rounded-[2rem] shadow-lg border border-white/20 group hover:bg-white/40 transition-all"
+                            >
+                                <div className="flex flex-col space-y-4">
+                                    <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
+                                        <Lightbulb className={`h-6 w-6 text-primary`} />
+                                    </div>
+                                    <p className="text-foreground font-bold leading-relaxed">{insight}</p>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            )
+
+        case 'text_section':
+            return (
+                <div className="relative overflow-hidden rounded-[3rem] p-12 text-white shadow-2xl mb-12">
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary to-secondary opacity-90"></div>
+                    <div className="absolute inset-0 bg-mesh opacity-20"></div>
+
+                    <div className="relative z-10">
+                        <h3 className="text-3xl font-black mb-8 flex items-center">
+                            <Brain className="h-8 w-8 mr-4 text-yellow-300" />
+                            {widget.title}
+                        </h3>
+                        <div className="prose prose-invert max-w-none text-white/90 leading-relaxed text-xl font-medium">
+                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {widget.content}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                </div>
+            )
+
+        default:
+            return null
+    }
+}
+
+const DatasetAnalysis = ({ dataset, analysisData, onBack }) => {
+    const { analysis, charts_data } = analysisData
+
+    // Extraire la couleur du thème (par défaut purple-600)
+    const themeColor = analysis.theme_color ? analysis.theme_color.split('-')[0] + '-600' : 'primary'
+
+    // Style CSS variable pour les graphiques
+    const style = {
+        [`--color-primary`]: '#7c3aed',
+        [`--color-emerald-600`]: '#059669',
+        [`--color-blue-600`]: '#2563eb',
+        [`--color-red-600`]: '#dc2626',
+        [`--color-purple-600`]: '#7c3aed',
+    }
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="min-h-screen bg-background pb-20"
+            style={style}
+        >
+            {/* Header Premium avec Mesh Gradient */}
+            <div className="relative overflow-hidden pt-12 pb-24 px-8">
+                <div className="absolute inset-0 bg-mesh opacity-30"></div>
+                <div className="absolute inset-0 bg-gradient-to-b from-primary/10 to-transparent"></div>
+
+                <div className="max-w-7xl mx-auto relative z-10">
+                    <Button
+                        variant="ghost"
+                        onClick={onBack}
+                        className="rounded-xl hover:bg-primary/10 text-primary font-bold mb-12"
+                    >
+                        ← Retour aux datasets
+                    </Button>
+
+                    <div className="flex flex-col md:flex-row md:items-end justify-between gap-12">
+                        <div className="flex-1">
+                            <div className="flex items-center space-x-3 mb-6">
+                                <div className="px-4 py-2 bg-primary/10 rounded-full border border-primary/20 flex items-center">
+                                    <Brain className="h-4 w-4 text-primary mr-2" />
+                                    <span className="text-primary font-black uppercase tracking-widest text-xs">Intelligence Artificielle</span>
+                                </div>
+                                <div className="px-4 py-2 bg-secondary/10 rounded-full border border-secondary/20 flex items-center">
+                                    <Zap className="h-4 w-4 text-secondary mr-2" />
+                                    <span className="text-secondary font-black uppercase tracking-widest text-xs">Rapport Stratégique</span>
+                                </div>
+                            </div>
+                            <h1 className="text-6xl font-black text-foreground tracking-tight mb-6 leading-tight">
+                                {analysis.report_title || dataset.title}
+                            </h1>
+                            <p className="text-muted-foreground font-medium text-2xl max-w-3xl leading-relaxed">
+                                Analyse scientifique approfondie générée pour <span className="text-foreground font-black">{dataset.source_name}</span>.
+                            </p>
+                        </div>
+
+                        <div className="hidden lg:block">
+                            <div className="w-64 h-64 glass rounded-[3rem] flex items-center justify-center relative">
+                                <div className="absolute inset-0 bg-primary/5 rounded-[3rem] animate-pulse"></div>
+                                <Brain className="h-32 w-32 text-primary opacity-20" />
+                                <div className="absolute -bottom-4 -right-4 bg-white shadow-2xl rounded-2xl p-4 border border-primary/10">
+                                    <div className="flex items-center space-x-2">
+                                        <div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div>
+                                        <span className="text-xs font-black uppercase tracking-tighter">Gemini 2.5 Live</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="max-w-7xl mx-auto px-8 -mt-12">
+                {/* Rendu dynamique des widgets */}
+                {analysis.layout ? (
+                    analysis.layout.map((widget, idx) => (
+                        <WidgetFactory
+                            key={idx}
+                            widget={widget}
+                            chartsData={charts_data}
+                            themeColor={themeColor}
+                        />
+                    ))
+                ) : (
+                    <div className="glass rounded-[3rem] py-24 text-center">
+                        <div className="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
+                            <AlertTriangle className="h-10 w-10 text-primary" />
+                        </div>
+                        <h3 className="text-2xl font-black text-foreground mb-2">Format non reconnu</h3>
+                        <p className="text-muted-foreground font-medium">Veuillez régénérer l'analyse pour corriger ce problème.</p>
+                    </div>
+                )}
+            </div>
+        </motion.div>
+    )
+}
+
+export default DatasetAnalysis

afridatahub-frontend/src/components/DatasetCard.jsx

@@ -0,0 +1,129 @@
+/**
+ * Composant DatasetCard pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { motion } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import { 
+  Calendar, 
+  Database, 
+  ExternalLink, 
+  TrendingUp,
+  MapPin
+} from 'lucide-react'
+
+const DatasetCard = ({ dataset, onViewDetails }) => {
+  const getDomainColor = (domain) => {
+    const colors = {
+      agriculture: 'bg-green-100 text-green-800',
+      health: 'bg-red-100 text-red-800',
+      economy: 'bg-blue-100 text-blue-800',
+      weather: 'bg-cyan-100 text-cyan-800',
+      energy: 'bg-yellow-100 text-yellow-800',
+      education: 'bg-purple-100 text-purple-800',
+      population: 'bg-pink-100 text-pink-800',
+      environment: 'bg-emerald-100 text-emerald-800',
+      transport: 'bg-orange-100 text-orange-800',
+      other: 'bg-gray-100 text-gray-800',
+    }
+    return colors[domain] || colors.other
+  }
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      whileHover={{ y: -4, boxShadow: "0 10px 25px rgba(0,0,0,0.1)" }}
+      transition={{ duration: 0.2 }}
+      className="bg-white rounded-lg border border-gray-200 p-6 hover:border-purple-300 transition-all duration-200"
+    >
+      {/* En-tête */}
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
+            {dataset.title}
+          </h3>
+          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getDomainColor(dataset.domain)}`}>
+            {dataset.domain}
+          </span>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p className="text-gray-600 text-sm mb-4 line-clamp-3">
+        {dataset.description}
+      </p>
+
+      {/* Métadonnées */}
+      <div className="space-y-2 mb-4">
+        <div className="flex items-center text-sm text-gray-500">
+          <Database className="h-4 w-4 mr-2" />
+          <span>{dataset.data_points_count} points de données</span>
+        </div>
+        
+        <div className="flex items-center text-sm text-gray-500">
+          <Calendar className="h-4 w-4 mr-2" />
+          <span>Mis à jour le {formatDate(dataset.last_updated)}</span>
+        </div>
+
+        <div className="flex items-center text-sm text-gray-500">
+          <MapPin className="h-4 w-4 mr-2" />
+          <span>Source: {dataset.source_name}</span>
+        </div>
+      </div>
+
+      {/* Statut */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center">
+          <div className={`w-2 h-2 rounded-full mr-2 ${
+            dataset.status === 'active' ? 'bg-green-500' : 
+            dataset.status === 'updating' ? 'bg-yellow-500' : 'bg-red-500'
+          }`} />
+          <span className="text-sm text-gray-600 capitalize">
+            {dataset.status}
+          </span>
+        </div>
+        
+        {dataset.latest_data_date && (
+          <div className="flex items-center text-sm text-gray-500">
+            <TrendingUp className="h-4 w-4 mr-1" />
+            <span>{formatDate(dataset.latest_data_date)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <Button
+          onClick={() => onViewDetails(dataset)}
+          className="bg-purple-600 hover:bg-purple-700 text-white"
+        >
+          Voir les données
+        </Button>
+        
+        {dataset.source_url && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => window.open(dataset.source_url, '_blank')}
+            className="text-purple-600 hover:text-purple-700 hover:bg-purple-50"
+          >
+            <ExternalLink className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+export default DatasetCard
+

afridatahub-frontend/src/components/Datasets.jsx

@@ -0,0 +1,443 @@
+/**
+ * Composant Datasets pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import DatasetCard from './DatasetCard'
+import {
+  Search,
+  Filter,
+  Download,
+  Upload,
+  RefreshCw,
+  Brain
+} from 'lucide-react'
+import { API_URL } from '../config'
+
+const Datasets = ({ onStartAnalysis }) => {
+  const [datasets, setDatasets] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedDomain, setSelectedDomain] = useState('')
+  const [selectedDataset, setSelectedDataset] = useState(null)
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+
+  const domains = [
+    { value: '', label: 'Tous les domaines' },
+    { value: 'agriculture', label: 'Agriculture' },
+    { value: 'health', label: 'Santé' },
+    { value: 'economy', label: 'Économie' },
+    { value: 'weather', label: 'Météorologie' },
+    { value: 'energy', label: 'Énergie' },
+    { value: 'education', label: 'Éducation' },
+    { value: 'population', label: 'Population' },
+    { value: 'environment', label: 'Environnement' },
+    { value: 'transport', label: 'Transport' },
+    { value: 'other', label: 'Autre' },
+  ]
+
+  useEffect(() => {
+    fetchDatasets()
+  }, [])
+
+  const fetchDatasets = async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`${API_URL}datasets/`)
+      const data = await response.json()
+      setDatasets(data.results || [])
+    } catch (error) {
+      console.error('Erreur lors du chargement des datasets:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const filteredDatasets = datasets.filter(dataset => {
+    const matchesSearch = dataset.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      dataset.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      dataset.source_name.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesDomain = !selectedDomain || dataset.domain === selectedDomain
+    return matchesSearch && matchesDomain
+  })
+
+  const handleViewDetails = (dataset) => {
+    setSelectedDataset(dataset)
+  }
+
+  const handleAnalyze = async (dataset) => {
+    try {
+      setIsAnalyzing(true)
+      // Fermer le modal de détails si ouvert
+      setSelectedDataset(null)
+
+      const response = await fetch(`${API_URL}datasets/${dataset.slug}/analyze/`)
+      const data = await response.json()
+
+      if (response.ok) {
+        if (onStartAnalysis) {
+          onStartAnalysis(dataset, data)
+        }
+      } else {
+        console.error('Erreur analyse:', data)
+      }
+    } catch (error) {
+      console.error('Erreur lors de l\'analyse:', error)
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  const DatasetDetails = ({ dataset, onClose }) => {
+    const [dataPoints, setDataPoints] = useState([])
+    const [loadingData, setLoadingData] = useState(true)
+
+    const fetchDataPoints = useCallback(async () => {
+      try {
+        setLoadingData(true)
+        const response = await fetch(`${API_URL}datasets/${dataset.slug}/data/?limit=50`)
+        const result = await response.json()
+        setDataPoints(result.data_points || [])
+      } catch (error) {
+        console.error('Erreur lors du chargement des données:', error)
+      } finally {
+        setLoadingData(false)
+      }
+    }, [dataset.slug])
+
+    useEffect(() => {
+      fetchDataPoints()
+    }, [fetchDataPoints])
+
+    const handleDownload = () => {
+      if (dataPoints.length === 0) return
+
+      // Créer le contenu CSV
+      const headers = ['Pays', 'Date', 'Valeur', 'Unité', 'Source']
+      const csvContent = [
+        headers.join(','),
+        ...dataPoints.map(dp => [
+          dp.country_name,
+          dp.date,
+          dp.value,
+          dp.unit,
+          dataset.source_name
+        ].join(','))
+      ].join('\n')
+
+      // Créer un blob et télécharger
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+      const link = document.createElement('a')
+      const url = URL.createObjectURL(blob)
+      link.setAttribute('href', url)
+      link.setAttribute('download', `${dataset.title.replace(/\s+/g, '_')}_preview.csv`)
+      link.style.visibility = 'hidden'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ scale: 0.9, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto flex flex-col"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-2xl font-bold text-gray-900">{dataset.title}</h2>
+              <Button variant="ghost" onClick={onClose}>
+                ✕
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-2">Description</h3>
+                <p className="text-gray-600">{dataset.description}</p>
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-2">Informations</h3>
+                <div className="space-y-2 text-sm">
+                  <div><span className="font-medium">Domaine:</span> {dataset.domain}</div>
+                  <div><span className="font-medium">Source:</span> {dataset.source_name}</div>
+                  <div><span className="font-medium">Points de données:</span> {dataset.data_points_count}</div>
+                  <div><span className="font-medium">Dernière mise à jour:</span> {new Date(dataset.last_updated).toLocaleDateString('fr-FR')}</div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+              <div className="px-4 py-3 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
+                <h3 className="font-semibold text-gray-900">Aperçu des données (50 premières lignes)</h3>
+                <span className="text-xs text-gray-500">{dataPoints.length} lignes affichées</span>
+              </div>
+
+              <div className="overflow-x-auto max-h-64">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50 sticky top-0">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pays</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valeur</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unité</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {loadingData ? (
+                      <tr>
+                        <td colSpan="4" className="px-6 py-4 text-center text-sm text-gray-500">
+                          Chargement des données...
+                        </td>
+                      </tr>
+                    ) : dataPoints.length > 0 ? (
+                      dataPoints.map((dp, idx) => (
+                        <tr key={idx} className="hover:bg-gray-50">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{dp.country_name}</td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{dp.date}</td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">{dp.value}</td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{dp.unit}</td>
+                        </tr>
+                      ))
+                    ) : (
+                      <tr>
+                        <td colSpan="4" className="px-6 py-4 text-center text-sm text-gray-500">
+                          Aucune donnée disponible pour l'aperçu.
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-3 mt-6">
+              <Button variant="outline" onClick={handleDownload} disabled={loadingData || dataPoints.length === 0}>
+                <Download className="h-4 w-4 mr-2" />
+                Télécharger CSV
+              </Button>
+              <Button
+                className="bg-purple-600 hover:bg-purple-700"
+                onClick={() => handleAnalyze(dataset)}
+                disabled={isAnalyzing}
+              >
+                {isAnalyzing ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Analyse en cours...
+                  </>
+                ) : (
+                  <>
+                    <Brain className="h-4 w-4 mr-2" />
+                    Analyser les données
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    )
+  }
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* En-tête */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col md:flex-row md:items-end md:justify-between gap-6"
+      >
+        <div>
+          <h1 className="text-4xl font-black text-foreground tracking-tight">Bibliothèque de <span className="text-gradient">Datasets</span></h1>
+          <p className="text-muted-foreground font-medium mt-2 text-lg">
+            Explorez les {datasets.length} sources de vérité disponibles sur le continent.
+          </p>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Button
+            variant="ghost"
+            onClick={fetchDatasets}
+            disabled={loading}
+            className="rounded-2xl hover:bg-primary/10 text-primary font-bold"
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+            Actualiser
+          </Button>
+          <Button className="rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg hover:shadow-primary/20 transition-all hover:scale-105">
+            <Upload className="h-4 w-4 mr-2" />
+            Importer CSV
+          </Button>
+        </div>
+      </motion.div>
+
+      {/* Filtres Glassmorphism */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass rounded-[2rem] p-6 shadow-xl"
+      >
+        <div className="flex flex-col lg:flex-row gap-6">
+          {/* Recherche */}
+          <div className="flex-1">
+            <div className="relative group">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground group-focus-within:text-primary transition-colors" />
+              <input
+                type="text"
+                placeholder="Rechercher par titre, description ou source..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-12 pr-6 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-medium text-foreground"
+              />
+            </div>
+          </div>
+
+          {/* Filtre par domaine */}
+          <div className="lg:w-80">
+            <div className="relative group">
+              <Filter className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground group-focus-within:text-primary transition-colors" />
+              <select
+                value={selectedDomain}
+                onChange={(e) => setSelectedDomain(e.target.value)}
+                className="w-full pl-12 pr-10 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary/30 transition-all outline-none font-bold text-foreground appearance-none cursor-pointer"
+              >
+                {domains.map(domain => (
+                  <option key={domain.value} value={domain.value}>
+                    {domain.label}
+                  </option>
+                ))}
+              </select>
+              <div className="absolute right-4 top-1/2 transform -translate-y-1/2 pointer-events-none text-muted-foreground">
+                <Download className="h-4 w-4 rotate-180" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Résultats */}
+      <div>
+        <div className="flex items-center justify-between mb-8 px-2">
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
+            <p className="text-muted-foreground font-bold uppercase tracking-widest text-xs">
+              {filteredDatasets.length} résultat{filteredDatasets.length > 1 ? 's' : ''} trouvé{filteredDatasets.length > 1 ? 's' : ''}
+            </p>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="glass rounded-[2rem] p-8 animate-pulse">
+                <div className="h-6 bg-primary/10 rounded-xl w-3/4 mb-4"></div>
+                <div className="h-4 bg-primary/5 rounded-lg w-full mb-2"></div>
+                <div className="h-4 bg-primary/5 rounded-lg w-5/6 mb-6"></div>
+                <div className="h-12 bg-primary/10 rounded-2xl w-full"></div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            {filteredDatasets.map((dataset, index) => (
+              <motion.div
+                key={dataset.slug}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.05 }}
+              >
+                <DatasetCard
+                  dataset={dataset}
+                  onViewDetails={handleViewDetails}
+                />
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+
+        {!loading && filteredDatasets.length === 0 && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="text-center py-24 glass rounded-[3rem]"
+          >
+            <div className="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
+              <Search className="h-10 w-10 text-primary" />
+            </div>
+            <h3 className="text-2xl font-black text-foreground mb-2">
+              Aucun dataset trouvé
+            </h3>
+            <p className="text-muted-foreground font-medium max-w-md mx-auto">
+              Nous n'avons trouvé aucun résultat pour votre recherche. Essayez d'utiliser des termes plus larges ou un autre domaine.
+            </p>
+            <Button
+              variant="ghost"
+              onClick={() => { setSearchTerm(''); setSelectedDomain('') }}
+              className="mt-6 text-primary font-bold hover:bg-primary/10 rounded-xl"
+            >
+              Réinitialiser les filtres
+            </Button>
+          </motion.div>
+        )}
+      </div>
+
+      {/* Modal de détails Premium */}
+      <AnimatePresence>
+        {selectedDataset && (
+          <DatasetDetails
+            dataset={selectedDataset}
+            onClose={() => setSelectedDataset(null)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Loader d'analyse global */}
+      <AnimatePresence>
+        {isAnalyzing && !selectedDataset && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-background/80 backdrop-blur-xl flex items-center justify-center z-[100]"
+          >
+            <div className="flex flex-col items-center max-w-md text-center p-12">
+              <div className="relative w-24 h-24 mb-8">
+                <div className="absolute inset-0 border-4 border-primary/20 rounded-full"></div>
+                <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+                <Brain className="absolute inset-0 m-auto h-10 w-10 text-primary animate-pulse" />
+              </div>
+              <h3 className="text-3xl font-black text-foreground mb-4">Intelligence Artificielle en action</h3>
+              <p className="text-muted-foreground font-medium leading-relaxed">
+                Gemini analyse actuellement des milliers de points de données pour générer votre rapport stratégique.
+              </p>
+              <div className="mt-8 w-full bg-primary/10 h-2 rounded-full overflow-hidden">
+                <motion.div
+                  initial={{ x: '-100%' }}
+                  animate={{ x: '100%' }}
+                  transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
+                  className="w-1/2 h-full bg-gradient-to-r from-transparent via-primary to-transparent"
+                />
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default Datasets

afridatahub-frontend/src/components/LandingPage.jsx

@@ -0,0 +1,275 @@
+/**
+ * Landing Page pour AfriDataHub
+ * Created by BlackBenAI Team - AfriDataHub Platform
+ */
+
+import { motion } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import {
+    Globe,
+    Zap,
+    Shield,
+    BarChart3,
+    Cpu,
+    Users,
+    ArrowRight,
+    CheckCircle2,
+    Database,
+    TrendingUp,
+    Code
+} from 'lucide-react'
+
+const LandingPage = ({ onGetStarted, onLogin }) => {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2
+            }
+        }
+    }
+
+    const itemVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0 }
+    }
+
+    return (
+        <div className="min-h-screen bg-[#050505] text-white overflow-x-hidden">
+            {/* Background Elements */}
+            <div className="fixed inset-0 z-0">
+                <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-primary/10 rounded-full blur-[120px] animate-pulse" />
+                <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-secondary/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '2s' }} />
+                <div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-accent/5 rounded-full blur-[100px]" />
+            </div>
+
+            {/* Hero Section */}
+            <section className="relative z-10 pt-32 pb-20 px-6 lg:px-8 max-w-7xl mx-auto">
+                <motion.div
+                    initial="hidden"
+                    animate="visible"
+                    variants={containerVariants}
+                    className="text-center"
+                >
+                    <motion.div variants={itemVariants} className="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
+                        <span className="relative flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-secondary"></span>
+                        </span>
+                        <span className="text-xs font-black uppercase tracking-widest text-secondary">Propulsé par BlackBenAI</span>
+                    </motion.div>
+
+                    <motion.h1 variants={itemVariants} className="text-6xl md:text-8xl font-black tracking-tight mb-8 leading-[1.1]">
+                        L'Émancipation <span className="text-gradient">Data</span> <br />
+                        du Continent Africain
+                    </motion.h1>
+
+                    <motion.p variants={itemVariants} className="text-xl md:text-2xl text-white/60 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
+                        AfriDataHub est la plateforme d'intelligence souveraine conçue pour transformer les données brutes en leviers de développement pour les 54 nations d'Afrique.
+                    </motion.p>
+
+                    <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center justify-center gap-6">
+                        <Button
+                            onClick={onGetStarted}
+                            className="px-10 py-8 rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-black text-xl shadow-2xl shadow-primary/20 hover:shadow-primary/40 transition-all hover:scale-105"
+                        >
+                            Commencer l'Aventure <ArrowRight className="ml-3 h-6 w-6" />
+                        </Button>
+                        <Button
+                            variant="outline"
+                            onClick={onLogin}
+                            className="px-10 py-8 rounded-2xl border-white/10 bg-white/5 backdrop-blur-xl text-white font-black text-xl hover:bg-white/10 transition-all"
+                        >
+                            Se Connecter
+                        </Button>
+                    </motion.div>
+                </motion.div>
+
+                {/* Dashboard Preview Mockup */}
+                <motion.div
+                    initial={{ opacity: 0, y: 100 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 1, delay: 0.5 }}
+                    className="mt-24 relative"
+                >
+                    <div className="glass rounded-[3rem] border border-white/20 p-4 shadow-[0_0_100px_rgba(var(--primary-rgb),0.1)]">
+                        <div className="bg-[#0a0a0a] rounded-[2.5rem] overflow-hidden aspect-[16/9] flex items-center justify-center relative group">
+                            <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-secondary/20 opacity-50 group-hover:opacity-70 transition-opacity" />
+                            <div className="relative z-10 flex flex-col items-center">
+                                <div className="grid grid-cols-3 gap-8 mb-8">
+                                    {[1, 2, 3].map(i => (
+                                        <div key={i} className="w-32 h-32 rounded-3xl bg-white/5 border border-white/10 animate-pulse" style={{ animationDelay: `${i * 0.2}s` }} />
+                                    ))}
+                                </div>
+                                <div className="w-64 h-4 bg-white/10 rounded-full animate-pulse" />
+                            </div>
+                            <div className="absolute bottom-8 left-8 right-8 h-32 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md" />
+                        </div>
+                    </div>
+                    {/* Floating elements */}
+                    <motion.div
+                        animate={{ y: [0, -20, 0] }}
+                        transition={{ duration: 4, repeat: Infinity }}
+                        className="absolute -top-10 -left-10 glass p-6 rounded-3xl border border-white/20 hidden lg:block"
+                    >
+                        <TrendingUp className="h-10 w-10 text-secondary" />
+                    </motion.div>
+                    <motion.div
+                        animate={{ y: [0, 20, 0] }}
+                        transition={{ duration: 5, repeat: Infinity }}
+                        className="absolute -bottom-10 -right-10 glass p-6 rounded-3xl border border-white/20 hidden lg:block"
+                    >
+                        <Cpu className="h-10 w-10 text-primary" />
+                    </motion.div>
+                </motion.div>
+            </section>
+
+            {/* Features Grid */}
+            <section className="relative z-10 py-32 px-6 lg:px-8 max-w-7xl mx-auto">
+                <div className="text-center mb-20">
+                    <h2 className="text-4xl md:text-5xl font-black mb-6">Une Technologie au Service de <span className="text-gradient">l'Impact</span></h2>
+                    <p className="text-white/50 text-xl max-w-2xl mx-auto">Des outils de pointe pour décrypter les tendances socio-économiques du continent.</p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+                    {[
+                        {
+                            icon: Cpu,
+                            title: "Analyse par IA",
+                            desc: "Des modèles de langage avancés pour interpréter les données et générer des insights stratégiques.",
+                            color: "text-primary"
+                        },
+                        {
+                            icon: Globe,
+                            title: "Couverture Totale",
+                            desc: "Accès centralisé aux indicateurs des 54 pays africains, de l'agriculture à l'économie numérique.",
+                            color: "text-secondary"
+                        },
+                        {
+                            icon: Code,
+                            title: "API Développeur",
+                            desc: "Intégrez nos flux de données directement dans vos applications via notre SDK robuste.",
+                            color: "text-accent"
+                        }
+                    ].map((feature, i) => (
+                        <motion.div
+                            key={i}
+                            whileHover={{ y: -10 }}
+                            className="glass rounded-[2.5rem] p-10 border border-white/10 hover:border-white/20 transition-all group"
+                        >
+                            <div className={`w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform`}>
+                                <feature.icon className={`h-8 w-8 ${feature.color}`} />
+                            </div>
+                            <h3 className="text-2xl font-black mb-4">{feature.title}</h3>
+                            <p className="text-white/50 leading-relaxed font-medium">{feature.desc}</p>
+                        </motion.div>
+                    ))}
+                </div>
+            </section>
+
+            {/* BlackBenAI Mission Section */}
+            <section className="relative z-10 py-32 bg-white/5 backdrop-blur-3xl border-y border-white/10">
+                <div className="max-w-7xl mx-auto px-6 lg:px-8 flex flex-col lg:flex-row items-center gap-20">
+                    <div className="flex-1">
+                        <div className="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-8">
+                            <Shield className="h-4 w-4 text-primary" />
+                            <span className="text-xs font-black uppercase tracking-widest text-primary">Notre Vision</span>
+                        </div>
+                        <h2 className="text-5xl font-black mb-8 leading-tight">
+                            Par <span className="text-gradient">BlackBenAI</span>, <br />
+                            Pour l'Afrique.
+                        </h2>
+                        <p className="text-xl text-white/60 mb-10 leading-relaxed font-medium">
+                            Nous croyons que la souveraineté numérique commence par la maîtrise des données. BlackBenAI développe des solutions d'intelligence artificielle éthiques et contextuelles pour accélérer la croissance du continent.
+                        </p>
+                        <div className="space-y-4">
+                            {[
+                                "Démocratisation de l'accès à l'information",
+                                "Soutien aux décideurs et entrepreneurs",
+                                "Innovation technologique inclusive"
+                            ].map((item, i) => (
+                                <div key={i} className="flex items-center space-x-3">
+                                    <CheckCircle2 className="h-6 w-6 text-secondary" />
+                                    <span className="text-lg font-bold text-white/80">{item}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="flex-1 relative">
+                        <div className="relative z-10 glass rounded-[3rem] p-12 border border-white/20">
+                            <div className="grid grid-cols-2 gap-8">
+                                <div className="text-center">
+                                    <p className="text-5xl font-black text-gradient mb-2">54</p>
+                                    <p className="text-sm font-black uppercase tracking-widest text-white/40">Pays</p>
+                                </div>
+                                <div className="text-center">
+                                    <p className="text-5xl font-black text-gradient mb-2">1M+</p>
+                                    <p className="text-sm font-black uppercase tracking-widest text-white/40">Data Points</p>
+                                </div>
+                                <div className="text-center">
+                                    <p className="text-5xl font-black text-gradient mb-2">24/7</p>
+                                    <p className="text-sm font-black uppercase tracking-widest text-white/40">Monitoring</p>
+                                </div>
+                                <div className="text-center">
+                                    <p className="text-5xl font-black text-gradient mb-2">AI</p>
+                                    <p className="text-sm font-black uppercase tracking-widest text-white/40">Powered</p>
+                                </div>
+                            </div>
+                        </div>
+                        {/* Decorative circles */}
+                        <div className="absolute -top-10 -right-10 w-40 h-40 bg-primary/20 rounded-full blur-3xl" />
+                        <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-secondary/20 rounded-full blur-3xl" />
+                    </div>
+                </div>
+            </section>
+
+            {/* CTA Section */}
+            <section className="relative z-10 py-32 px-6 lg:px-8 max-w-5xl mx-auto text-center">
+                <motion.div
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    className="glass rounded-[4rem] p-16 md:p-24 border border-white/20 relative overflow-hidden"
+                >
+                    <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10 opacity-50" />
+                    <div className="relative z-10">
+                        <h2 className="text-4xl md:text-6xl font-black mb-8">Prêt à explorer le <br /><span className="text-gradient">futur de l'Afrique ?</span></h2>
+                        <p className="text-xl text-white/60 mb-12 max-w-2xl mx-auto font-medium">
+                            Rejoignez des milliers de chercheurs, développeurs et décideurs qui utilisent déjà AfriDataHub.
+                        </p>
+                        <Button
+                            onClick={onGetStarted}
+                            className="px-12 py-8 rounded-2xl bg-white text-black font-black text-xl hover:bg-white/90 transition-all hover:scale-105 shadow-2xl"
+                        >
+                            Créer mon compte gratuit
+                        </Button>
+                    </div>
+                </motion.div>
+            </section>
+
+            {/* Footer */}
+            <footer className="relative z-10 py-20 px-6 lg:px-8 border-t border-white/10">
+                <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-10">
+                    <div className="flex items-center space-x-3">
+                        <div className="p-2 bg-gradient-to-br from-primary to-secondary rounded-xl">
+                            <Globe className="h-6 w-6 text-white" />
+                        </div>
+                        <span className="text-2xl font-black tracking-tight text-gradient">AfriDataHub</span>
+                    </div>
+
+                    <p className="text-white/40 font-medium text-center">
+                        © 2025 AfriDataHub. Développé avec ❤️ par <span className="text-white font-bold">BlackBenAI</span> pour l'émancipation du continent.
+                    </p>
+
+                    <div className="flex space-x-6">
+                        <Users className="h-6 w-6 text-white/40 hover:text-white transition-colors cursor-pointer" />
+                        <Database className="h-6 w-6 text-white/40 hover:text-white transition-colors cursor-pointer" />
+                        <Shield className="h-6 w-6 text-white/40 hover:text-white transition-colors cursor-pointer" />
+                    </div>
+                </div>
+            </footer>
+        </div>
+    )
+}
+
+export default LandingPage

afridatahub-frontend/src/components/Login.jsx

@@ -0,0 +1,194 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { login } from '../services/auth'
+import { Button } from '@/components/ui/button'
+import {
+    User,
+    Lock,
+    ArrowRight,
+    Globe,
+    ShieldCheck,
+    Zap,
+    Loader2
+} from 'lucide-react'
+
+const Login = ({ onLoginSuccess, onNavigateToRegister, onNavigateToLanding }) => {
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setError('')
+        setLoading(true)
+        try {
+            const data = await login(username, password)
+            localStorage.setItem('token', data.token)
+            localStorage.setItem('user', JSON.stringify(data.user))
+            onLoginSuccess(data.user)
+        } catch (err) {
+            setError('Identifiants incorrects. Veuillez réessayer.')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#050505]">
+            {/* Background Mesh Gradients */}
+            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px] animate-pulse" />
+            <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/20 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '2s' }} />
+
+            <div className="relative z-10 w-full max-w-6xl px-4 flex flex-col lg:flex-row items-center gap-16">
+                {/* Left Side: Branding & Info */}
+                <motion.div
+                    initial={{ opacity: 0, x: -50 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                    className="flex-1 text-center lg:text-left hidden lg:block"
+                >
+                    <div className="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
+                        <Zap className="h-4 w-4 text-secondary" />
+                        <span className="text-xs font-black uppercase tracking-widest text-secondary">Intelligence de Données Africaines</span>
+                    </div>
+                    <h1 className="text-6xl xl:text-7xl font-black text-white leading-tight mb-6">
+                        Reconnectez-vous à <br />
+                        <span className="text-gradient">l'Afrique de Demain</span>
+                    </h1>
+                    <p className="text-xl text-white/60 font-medium max-w-xl mb-10">
+                        Accédez à la plateforme d'analyse de données la plus avancée du continent.
+                        Visualisez, analysez et agissez en temps réel.
+                    </p>
+
+                    <div className="grid grid-cols-2 gap-6 max-w-md">
+                        <div className="p-6 rounded-3xl bg-white/5 border border-white/10">
+                            <ShieldCheck className="h-8 w-8 text-primary mb-4" />
+                            <h3 className="text-white font-bold">Sécurisé</h3>
+                            <p className="text-white/40 text-sm">Protection de données de niveau bancaire.</p>
+                        </div>
+                        <div className="p-6 rounded-3xl bg-white/5 border border-white/10">
+                            <Globe className="h-8 w-8 text-secondary mb-4" />
+                            <h3 className="text-white font-bold">Continental</h3>
+                            <p className="text-white/40 text-sm">Couverture totale des 54 pays.</p>
+                        </div>
+                    </div>
+                </motion.div>
+
+                {/* Right Side: Login Card */}
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.6, delay: 0.2 }}
+                    className="w-full max-w-[480px]"
+                >
+                    <div className="glass rounded-[3rem] p-10 md:p-12 border border-white/20 shadow-2xl relative overflow-hidden">
+                        <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+                            <Lock className="w-32 h-32 text-white" />
+                        </div>
+
+                        <div className="relative z-10">
+                            <div className="mb-10 text-center lg:text-left">
+                                <div className="lg:hidden flex justify-center mb-6">
+                                    <div className="p-3 bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-lg">
+                                        <Globe className="h-8 w-8 text-white" />
+                                    </div>
+                                </div>
+                                <h2 className="text-3xl font-black text-white mb-2">Bienvenue</h2>
+                                <p className="text-white/50 font-medium">Entrez vos identifiants pour continuer</p>
+                            </div>
+
+                            <form onSubmit={handleSubmit} className="space-y-6">
+                                <div className="space-y-4">
+                                    <div className="relative group">
+                                        <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                            <User className="h-5 w-5 text-white/30 group-focus-within:text-primary transition-colors" />
+                                        </div>
+                                        <input
+                                            type="text"
+                                            required
+                                            placeholder="Nom d'utilisateur"
+                                            value={username}
+                                            onChange={(e) => setUsername(e.target.value)}
+                                            className="w-full pl-12 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-primary/10 focus:border-primary/30 outline-none transition-all font-medium"
+                                        />
+                                    </div>
+
+                                    <div className="relative group">
+                                        <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                            <Lock className="h-5 w-5 text-white/30 group-focus-within:text-secondary transition-colors" />
+                                        </div>
+                                        <input
+                                            type="password"
+                                            required
+                                            placeholder="Mot de passe"
+                                            value={password}
+                                            onChange={(e) => setPassword(e.target.value)}
+                                            className="w-full pl-12 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-secondary/10 focus:border-secondary/30 outline-none transition-all font-medium"
+                                        />
+                                    </div>
+                                </div>
+
+                                <AnimatePresence mode="wait">
+                                    {error && (
+                                        <motion.div
+                                            initial={{ opacity: 0, height: 0 }}
+                                            animate={{ opacity: 1, height: 'auto' }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm font-bold text-center"
+                                        >
+                                            {error}
+                                        </motion.div>
+                                    )}
+                                </AnimatePresence>
+
+                                <div className="flex items-center justify-between text-sm">
+                                    <label className="flex items-center space-x-2 cursor-pointer group">
+                                        <input type="checkbox" className="w-4 h-4 rounded border-white/10 bg-white/5 text-primary focus:ring-primary/20" />
+                                        <span className="text-white/40 group-hover:text-white/60 transition-colors">Se souvenir de moi</span>
+                                    </label>
+                                    <button type="button" className="text-primary font-bold hover:text-primary/80 transition-colors">Oublié ?</button>
+                                </div>
+
+                                <Button
+                                    type="submit"
+                                    disabled={loading}
+                                    className="w-full py-7 rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-black text-lg shadow-xl shadow-primary/20 hover:shadow-primary/40 transition-all hover:scale-[1.02] active:scale-[0.98]"
+                                >
+                                    {loading ? (
+                                        <Loader2 className="h-6 w-6 animate-spin" />
+                                    ) : (
+                                        <span className="flex items-center">
+                                            Se connecter <ArrowRight className="ml-2 h-5 w-5" />
+                                        </span>
+                                    )}
+                                </Button>
+                            </form>
+
+                            <div className="mt-10 text-center space-y-4">
+                                <p className="text-white/40 font-medium">
+                                    Pas encore de compte ?{' '}
+                                    <button
+                                        onClick={onNavigateToRegister}
+                                        className="text-white font-black hover:text-secondary transition-colors underline underline-offset-4"
+                                    >
+                                        Créer un profil
+                                    </button>
+                                </p>
+                                <button
+                                    onClick={onNavigateToLanding}
+                                    className="text-white/20 hover:text-white/40 text-sm font-bold transition-colors"
+                                >
+                                    ← Retour à l'accueil
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    )
+}
+
+export default Login
+

afridatahub-frontend/src/components/Navigation.jsx

@@ -0,0 +1,166 @@
+/**
+ * Composant de navigation pour AfriDataHub
+ * Created by Marino ATOHOUN - AfriDataHub Platform
+ */
+
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import {
+  BarChart3,
+  Database,
+  AlertTriangle,
+  User,
+  Menu,
+  X,
+  Globe,
+  TrendingUp
+} from 'lucide-react'
+
+const Navigation = ({ currentPage, onPageChange, user, onLogout }) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  const menuItems = [
+    { id: 'dashboard', label: 'Dashboard', icon: BarChart3 },
+    { id: 'datasets', label: 'Datasets', icon: Database },
+    { id: 'analytics', label: 'Analyse', icon: TrendingUp },
+    { id: 'alerts', label: 'Alertes', icon: AlertTriangle },
+    { id: 'api-docs', label: 'API', icon: Globe },
+    { id: 'profile', label: 'Profil', icon: User },
+  ]
+
+  const handlePageChange = (pageId) => {
+    onPageChange(pageId)
+    setIsMobileMenuOpen(false)
+  }
+
+  return (
+    <nav className="sticky top-0 z-50 glass border-b border-white/20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-20">
+          {/* Logo et titre */}
+          <div className="flex items-center">
+            <div className="flex-shrink-0 flex items-center group cursor-pointer" onClick={() => handlePageChange('dashboard')}>
+              <div className="p-2 bg-gradient-to-br from-primary to-secondary rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
+                <Globe className="h-6 w-6 text-white animate-pulse" />
+              </div>
+              <span className="ml-3 text-2xl font-black tracking-tight text-gradient">
+                AfriDataHub
+              </span>
+            </div>
+          </div>
+
+          {/* Menu desktop */}
+          <div className="hidden md:flex items-center space-x-2">
+            {menuItems.map((item) => {
+              const Icon = item.icon
+              const isActive = currentPage === item.id
+              return (
+                <Button
+                  key={item.id}
+                  variant="ghost"
+                  onClick={() => handlePageChange(item.id)}
+                  className={`relative px-4 py-2 rounded-xl transition-all duration-300 group ${isActive
+                    ? 'text-primary bg-primary/10'
+                    : 'text-muted-foreground hover:text-primary hover:bg-primary/5'
+                    }`}
+                >
+                  <Icon className={`h-4 w-4 mr-2 ${isActive ? 'scale-110' : 'group-hover:scale-110'} transition-transform`} />
+                  <span className="font-semibold">{item.label}</span>
+                  {isActive && (
+                    <motion.div
+                      layoutId="nav-active"
+                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-primary to-secondary rounded-full"
+                    />
+                  )}
+                </Button>
+              )
+            })}
+            {user && (
+              <div className="flex items-center ml-6 pl-6 border-l border-white/20">
+                <div className="flex items-center space-x-3 mr-4">
+                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold text-xs shadow-md">
+                    {user.username.charAt(0).toUpperCase()}
+                  </div>
+                  <span className="text-sm font-medium text-foreground/80">
+                    {user.username}
+                  </span>
+                </div>
+                <Button
+                  variant="ghost"
+                  onClick={onLogout}
+                  className="rounded-xl text-destructive hover:bg-destructive/10 transition-colors"
+                >
+                  Déconnexion
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Bouton menu mobile */}
+          <div className="md:hidden flex items-center">
+            <Button
+              variant="ghost"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="rounded-xl text-foreground hover:bg-primary/10"
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-6 w-6" />
+              ) : (
+                <Menu className="h-6 w-6" />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Menu mobile */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="md:hidden glass border-t border-white/20 overflow-hidden"
+          >
+            <div className="px-4 pt-4 pb-6 space-y-2">
+              {menuItems.map((item) => {
+                const Icon = item.icon
+                const isActive = currentPage === item.id
+                return (
+                  <Button
+                    key={item.id}
+                    variant="ghost"
+                    onClick={() => handlePageChange(item.id)}
+                    className={`w-full justify-start flex items-center space-x-3 p-4 rounded-xl transition-all ${isActive
+                      ? 'bg-primary/20 text-primary shadow-inner'
+                      : 'text-muted-foreground hover:bg-primary/10 hover:text-primary'
+                      }`}
+                  >
+                    <Icon className="h-5 w-5" />
+                    <span className="font-bold">{item.label}</span>
+                  </Button>
+                )
+              })}
+              {user && (
+                <div className="pt-4 mt-4 border-t border-white/20">
+                  <Button
+                    variant="ghost"
+                    onClick={onLogout}
+                    className="w-full justify-start flex items-center space-x-3 p-4 rounded-xl text-destructive hover:bg-destructive/10"
+                  >
+                    <X className="h-5 w-5" />
+                    <span className="font-bold">Déconnexion</span>
+                  </Button>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  )
+}
+
+export default Navigation
+

afridatahub-frontend/src/components/Profile.jsx

@@ -0,0 +1,364 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '@/components/ui/button'
+import {
+  User,
+  Mail,
+  Phone,
+  Building,
+  MapPin,
+  Bell,
+  Settings,
+  Save,
+  Edit,
+  Shield,
+  Download,
+  Trash2,
+  CheckCircle2,
+  Globe,
+  Briefcase,
+  Info
+} from 'lucide-react'
+
+import { updateProfile } from '../services/auth'
+
+const Profile = ({ user, onUpdateUser }) => {
+  const [isEditing, setIsEditing] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [profile, setProfile] = useState({
+    firstName: user?.first_name || '',
+    lastName: user?.last_name || '',
+    email: user?.email || '',
+    phone: user?.profile?.phone_number || '',
+    organization: user?.profile?.organization || '',
+    country: user?.profile?.country || '',
+    bio: user?.profile?.bio || '',
+    interests: user?.profile?.interests || [],
+    notifications: {
+      email: user?.profile?.notification_preference === 'email',
+      push: user?.profile?.notification_preference === 'push',
+      alerts: user?.profile?.enable_alerts || false
+    }
+  })
+
+  const countries = [
+    { code: 'BJ', name: 'Bénin' },
+    { code: 'NG', name: 'Nigéria' },
+    { code: 'GH', name: 'Ghana' },
+    { code: 'CI', name: 'Côte d\'Ivoire' },
+    { code: 'SN', name: 'Sénégal' },
+    { code: 'KE', name: 'Kenya' },
+    { code: 'ZA', name: 'Afrique du Sud' },
+    { code: 'MA', name: 'Maroc' },
+    { code: 'EG', name: 'Égypte' },
+    { code: 'ET', name: 'Éthiopie' },
+  ]
+
+  const interests = [
+    { id: 'agriculture', label: 'Agriculture', icon: '🌾' },
+    { id: 'health', label: 'Santé', icon: '🏥' },
+    { id: 'economy', label: 'Économie', icon: '💰' },
+    { id: 'weather', label: 'Météo', icon: '🌤️' },
+    { id: 'energy', label: 'Énergie', icon: '⚡' },
+    { id: 'education', label: 'Éducation', icon: '📚' },
+    { id: 'population', label: 'Population', icon: '👥' },
+    { id: 'environment', label: 'Environnement', icon: '🌍' },
+  ]
+
+  const handleSave = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const updatedData = {
+        first_name: profile.firstName,
+        last_name: profile.lastName,
+        email: profile.email,
+        profile: {
+          phone_number: profile.phone,
+          organization: profile.organization,
+          country: profile.country,
+          bio: profile.bio,
+          interests: profile.interests,
+          notification_preference: profile.notifications.email ? 'email' : (profile.notifications.push ? 'push' : 'none'),
+          enable_alerts: profile.notifications.alerts
+        }
+      }
+      const updatedUser = await updateProfile(updatedData)
+      onUpdateUser(updatedUser)
+      setIsEditing(false)
+    } catch (err) {
+      console.error('Error updating profile:', err)
+      setError('Erreur lors de la mise à jour du profil. Veuillez réessayer.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const toggleInterest = (interestId) => {
+    if (!isEditing) return
+    setProfile(prev => ({
+      ...prev,
+      interests: prev.interests.includes(interestId)
+        ? prev.interests.filter(id => id !== interestId)
+        : [...prev.interests, interestId]
+    }))
+  }
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* En-tête */}
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col md:flex-row md:items-center md:justify-between gap-6"
+      >
+        <div>
+          <h1 className="text-4xl font-black text-foreground tracking-tight">Mon <span className="text-gradient">Profil</span></h1>
+          <p className="text-muted-foreground font-medium mt-2 text-lg">
+            Gérez vos informations personnelles et vos préférences d'analyse.
+          </p>
+        </div>
+        <div className="flex flex-col items-end gap-2">
+          <Button
+            onClick={() => isEditing ? handleSave() : setIsEditing(true)}
+            disabled={loading}
+            className={`px-8 py-6 rounded-2xl font-bold text-white shadow-lg transition-all hover:scale-105 ${isEditing ? 'bg-green-600 hover:bg-green-700 shadow-green-500/20' : 'bg-primary hover:bg-primary/90 shadow-primary/20'
+              } ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
+          >
+            {loading ? (
+              <div className="h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+            ) : isEditing ? (
+              <Save className="h-5 w-5 mr-2" />
+            ) : (
+              <Edit className="h-5 w-5 mr-2" />
+            )}
+            {loading ? 'Traitement...' : isEditing ? 'Sauvegarder' : 'Modifier le Profil'}
+          </Button>
+          {error && <p className="text-red-500 text-sm font-bold">{error}</p>}
+        </div>
+      </motion.div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+        {/* Informations personnelles */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="lg:col-span-2 space-y-8"
+        >
+          <div className="glass rounded-[3rem] p-10 border border-white/20 relative overflow-hidden">
+            <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+              <User className="w-48 h-48 text-primary" />
+            </div>
+
+            <div className="relative z-10">
+              <h2 className="text-2xl font-black text-foreground mb-8 flex items-center">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-4">
+                  <User className="h-5 w-5 text-primary" />
+                </div>
+                Informations Générales
+              </h2>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1">Prénom</label>
+                  <input
+                    type="text"
+                    value={profile.firstName}
+                    onChange={(e) => setProfile(prev => ({ ...prev, firstName: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1">Nom</label>
+                  <input
+                    type="text"
+                    value={profile.lastName}
+                    onChange={(e) => setProfile(prev => ({ ...prev, lastName: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1 flex items-center">
+                    <Mail className="h-3 w-3 mr-2" /> Email
+                  </label>
+                  <input
+                    type="email"
+                    value={profile.email}
+                    onChange={(e) => setProfile(prev => ({ ...prev, email: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1 flex items-center">
+                    <Phone className="h-3 w-3 mr-2" /> Téléphone
+                  </label>
+                  <input
+                    type="tel"
+                    value={profile.phone}
+                    onChange={(e) => setProfile(prev => ({ ...prev, phone: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1 flex items-center">
+                    <Briefcase className="h-3 w-3 mr-2" /> Organisation
+                  </label>
+                  <input
+                    type="text"
+                    value={profile.organization}
+                    onChange={(e) => setProfile(prev => ({ ...prev, organization: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1 flex items-center">
+                    <Globe className="h-3 w-3 mr-2" /> Pays
+                  </label>
+                  <select
+                    value={profile.country}
+                    onChange={(e) => setProfile(prev => ({ ...prev, country: e.target.value }))}
+                    disabled={!isEditing}
+                    className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60 appearance-none"
+                  >
+                    {countries.map(country => (
+                      <option key={country.code} value={country.code}>
+                        {country.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="mt-8 space-y-2">
+                <label className="text-sm font-black uppercase tracking-widest text-muted-foreground/60 ml-1 flex items-center">
+                  <Info className="h-3 w-3 mr-2" /> Biographie
+                </label>
+                <textarea
+                  value={profile.bio}
+                  onChange={(e) => setProfile(prev => ({ ...prev, bio: e.target.value }))}
+                  disabled={!isEditing}
+                  rows={4}
+                  className="w-full px-5 py-4 bg-white/50 border border-white/20 rounded-2xl focus:ring-4 focus:ring-primary/10 outline-none transition-all font-medium disabled:opacity-60 resize-none"
+                  placeholder="Parlez-nous de votre intérêt pour les données africaines..."
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Domaines d'intérêt */}
+          <div className="glass rounded-[3rem] p-10 border border-white/20">
+            <h2 className="text-2xl font-black text-foreground mb-8 flex items-center">
+              <div className="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center mr-4">
+                <Globe className="h-5 w-5 text-secondary" />
+              </div>
+              Domaines d'Intérêt
+            </h2>
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              {interests.map(interest => (
+                <button
+                  key={interest.id}
+                  onClick={() => toggleInterest(interest.id)}
+                  disabled={!isEditing}
+                  className={`p-6 rounded-3xl border transition-all flex flex-col items-center text-center gap-3 group ${profile.interests.includes(interest.id)
+                    ? 'bg-secondary text-white border-secondary shadow-lg shadow-secondary/20'
+                    : 'bg-white/50 border-white/20 hover:border-secondary/30'
+                    } ${!isEditing && 'cursor-default'}`}
+                >
+                  <span className="text-3xl group-hover:scale-110 transition-transform">{interest.icon}</span>
+                  <span className={`text-xs font-black uppercase tracking-widest ${profile.interests.includes(interest.id) ? 'text-white' : 'text-muted-foreground'
+                    }`}>
+                    {interest.label}
+                  </span>
+                  {profile.interests.includes(interest.id) && (
+                    <CheckCircle2 className="h-4 w-4 absolute top-4 right-4 text-white" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Sidebar: Préférences & Paramètres */}
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="space-y-8"
+        >
+          {/* Notifications */}
+          <div className="glass rounded-[3rem] p-10 border border-white/20">
+            <h3 className="text-xl font-black text-foreground mb-8 flex items-center">
+              <Bell className="h-5 w-5 mr-3 text-primary" />
+              Notifications
+            </h3>
+            <div className="space-y-6">
+              {[
+                { id: 'email', label: 'Alertes par Email', desc: 'Recevez les mises à jour critiques.' },
+                { id: 'push', label: 'Notifications Push', desc: 'Alertes en temps réel sur navigateur.' },
+                { id: 'alerts', label: 'Alertes Automatiques', desc: 'Basées sur vos intérêts.' }
+              ].map((notif) => (
+                <div key={notif.id} className="flex items-center justify-between group">
+                  <div className="flex-1">
+                    <p className="text-sm font-bold text-foreground group-hover:text-primary transition-colors">{notif.label}</p>
+                    <p className="text-xs text-muted-foreground">{notif.desc}</p>
+                  </div>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={profile.notifications[notif.id]}
+                      onChange={(e) => setProfile(prev => ({
+                        ...prev,
+                        notifications: { ...prev.notifications, [notif.id]: e.target.checked }
+                      }))}
+                      disabled={!isEditing}
+                      className="sr-only peer"
+                    />
+                    <div className="w-11 h-6 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Paramètres de Sécurité */}
+          <div className="glass rounded-[3rem] p-10 border border-white/20">
+            <h3 className="text-xl font-black text-foreground mb-8 flex items-center">
+              <Settings className="h-5 w-5 mr-3 text-secondary" />
+              Paramètres
+            </h3>
+            <div className="space-y-4">
+              <Button variant="outline" className="w-full justify-start py-6 rounded-2xl border-white/20 hover:bg-white/10 font-bold group">
+                <Shield className="h-4 w-4 mr-3 text-muted-foreground group-hover:text-secondary transition-colors" />
+                Changer le mot de passe
+              </Button>
+              <Button variant="outline" className="w-full justify-start py-6 rounded-2xl border-white/20 hover:bg-white/10 font-bold group">
+                <Download className="h-4 w-4 mr-3 text-muted-foreground group-hover:text-secondary transition-colors" />
+                Exporter mes données
+              </Button>
+              <div className="pt-4 border-t border-white/10">
+                <Button variant="ghost" className="w-full justify-start py-6 rounded-2xl text-red-500 hover:bg-red-500/10 font-bold group">
+                  <Trash2 className="h-4 w-4 mr-3 text-red-400 group-hover:scale-110 transition-transform" />
+                  Supprimer le compte
+                </Button>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default Profile
+
+

afridatahub-frontend/src/components/Register.jsx

@@ -0,0 +1,235 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { register } from '../services/auth'
+import { Button } from '@/components/ui/button'
+import {
+    User,
+    Mail,
+    Lock,
+    ArrowRight,
+    Globe,
+    Sparkles,
+    CheckCircle2,
+    Loader2,
+    ChevronRight
+} from 'lucide-react'
+
+const Register = ({ onRegisterSuccess, onNavigateToLogin, onNavigateToLanding }) => {
+    const [formData, setFormData] = useState({
+        username: '',
+        email: '',
+        password: '',
+        first_name: '',
+        last_name: ''
+    })
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value })
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setError('')
+        setLoading(true)
+        try {
+            const data = await register(formData)
+            localStorage.setItem('token', data.token)
+            localStorage.setItem('user', JSON.stringify(data.user))
+            onRegisterSuccess(data.user)
+        } catch (err) {
+            setError('Erreur lors de l\'inscription. Veuillez vérifier vos informations.')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#050505]">
+            {/* Background Mesh Gradients */}
+            <div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/20 rounded-full blur-[120px] animate-pulse" />
+            <div className="absolute bottom-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '2s' }} />
+
+            <div className="relative z-10 w-full max-w-6xl px-4 flex flex-col lg:flex-row-reverse items-center gap-16">
+                {/* Left Side: Info & Features */}
+                <motion.div
+                    initial={{ opacity: 0, x: 50 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                    className="flex-1 text-center lg:text-left hidden lg:block"
+                >
+                    <div className="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
+                        <Sparkles className="h-4 w-4 text-primary" />
+                        <span className="text-xs font-black uppercase tracking-widest text-primary">Rejoignez la Révolution des Données</span>
+                    </div>
+                    <h1 className="text-6xl xl:text-7xl font-black text-white leading-tight mb-6">
+                        Façonnez le futur de <br />
+                        <span className="text-gradient">l'Analyse Africaine</span>
+                    </h1>
+
+                    <div className="space-y-6 mt-10">
+                        {[
+                            "Accès illimité aux datasets continentaux",
+                            "Outils d'analyse prédictive par IA",
+                            "Alertes personnalisées en temps réel",
+                            "Exportation de données haute résolution"
+                        ].map((feature, i) => (
+                            <motion.div
+                                key={i}
+                                initial={{ opacity: 0, x: 20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: 0.4 + (i * 0.1) }}
+                                className="flex items-center space-x-4"
+                            >
+                                <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center">
+                                    <CheckCircle2 className="h-4 w-4 text-primary" />
+                                </div>
+                                <span className="text-lg text-white/70 font-medium">{feature}</span>
+                            </motion.div>
+                        ))}
+                    </div>
+                </motion.div>
+
+                {/* Right Side: Register Card */}
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.6, delay: 0.2 }}
+                    className="w-full max-w-[540px]"
+                >
+                    <div className="glass rounded-[3rem] p-10 md:p-12 border border-white/20 shadow-2xl relative overflow-hidden">
+                        <div className="relative z-10">
+                            <div className="mb-10 text-center lg:text-left">
+                                <h2 className="text-3xl font-black text-white mb-2">Créer un compte</h2>
+                                <p className="text-white/50 font-medium">Commencez votre voyage avec AfriDataHub</p>
+                            </div>
+
+                            <form onSubmit={handleSubmit} className="space-y-5">
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div className="relative group">
+                                        <input
+                                            type="text"
+                                            name="first_name"
+                                            required
+                                            placeholder="Prénom"
+                                            value={formData.first_name}
+                                            onChange={handleChange}
+                                            className="w-full px-5 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-primary/10 focus:border-primary/30 outline-none transition-all font-medium"
+                                        />
+                                    </div>
+                                    <div className="relative group">
+                                        <input
+                                            type="text"
+                                            name="last_name"
+                                            required
+                                            placeholder="Nom"
+                                            value={formData.last_name}
+                                            onChange={handleChange}
+                                            className="w-full px-5 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-primary/10 focus:border-primary/30 outline-none transition-all font-medium"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="relative group">
+                                    <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                        <User className="h-5 w-5 text-white/30 group-focus-within:text-primary transition-colors" />
+                                    </div>
+                                    <input
+                                        type="text"
+                                        name="username"
+                                        required
+                                        placeholder="Nom d'utilisateur"
+                                        value={formData.username}
+                                        onChange={handleChange}
+                                        className="w-full pl-12 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-primary/10 focus:border-primary/30 outline-none transition-all font-medium"
+                                    />
+                                </div>
+
+                                <div className="relative group">
+                                    <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                        <Mail className="h-5 w-5 text-white/30 group-focus-within:text-secondary transition-colors" />
+                                    </div>
+                                    <input
+                                        type="email"
+                                        name="email"
+                                        required
+                                        placeholder="Adresse Email"
+                                        value={formData.email}
+                                        onChange={handleChange}
+                                        className="w-full pl-12 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-secondary/10 focus:border-secondary/30 outline-none transition-all font-medium"
+                                    />
+                                </div>
+
+                                <div className="relative group">
+                                    <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                                        <Lock className="h-5 w-5 text-white/30 group-focus-within:text-primary transition-colors" />
+                                    </div>
+                                    <input
+                                        type="password"
+                                        name="password"
+                                        required
+                                        placeholder="Mot de passe"
+                                        value={formData.password}
+                                        onChange={handleChange}
+                                        className="w-full pl-12 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-white/20 focus:ring-4 focus:ring-primary/10 focus:border-primary/30 outline-none transition-all font-medium"
+                                    />
+                                </div>
+
+                                <AnimatePresence mode="wait">
+                                    {error && (
+                                        <motion.div
+                                            initial={{ opacity: 0, height: 0 }}
+                                            animate={{ opacity: 1, height: 'auto' }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm font-bold text-center"
+                                        >
+                                            {error}
+                                        </motion.div>
+                                    )}
+                                </AnimatePresence>
+
+                                <div className="pt-4">
+                                    <Button
+                                        type="submit"
+                                        disabled={loading}
+                                        className="w-full py-7 rounded-2xl bg-gradient-to-r from-secondary to-primary text-white font-black text-lg shadow-xl shadow-secondary/20 hover:shadow-secondary/40 transition-all hover:scale-[1.02] active:scale-[0.98]"
+                                    >
+                                        {loading ? (
+                                            <Loader2 className="h-6 w-6 animate-spin" />
+                                        ) : (
+                                            <span className="flex items-center">
+                                                Créer mon compte <ChevronRight className="ml-2 h-5 w-5" />
+                                            </span>
+                                        )}
+                                    </Button>
+                                </div>
+                            </form>
+
+                            <div className="mt-10 text-center space-y-4">
+                                <p className="text-white/40 font-medium">
+                                    Déjà membre ?{' '}
+                                    <button
+                                        onClick={onNavigateToLogin}
+                                        className="text-white font-black hover:text-primary transition-colors underline underline-offset-4"
+                                    >
+                                        Se connecter
+                                    </button>
+                                </p>
+                                <button
+                                    onClick={onNavigateToLanding}
+                                    className="text-white/20 hover:text-white/40 text-sm font-bold transition-colors"
+                                >
+                                    ← Retour à l'accueil
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    )
+}
+
+export default Register
+

afridatahub-frontend/src/components/ui/accordion.jsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props} />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon
+          className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

afridatahub-frontend/src/components/ui/alert-dialog.jsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}) {
+  return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />);
+}
+
+function AlertDialogPortal({
+  ...props
+}) {
+  return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />);
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props} />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props} />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props} />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props} />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props} />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return (<AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />);
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props} />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

afridatahub-frontend/src/components/ui/alert.jsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props} />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription }

afridatahub-frontend/src/components/ui/aspect-ratio.jsx

@@ -0,0 +1,9 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio }

afridatahub-frontend/src/components/ui/avatar.jsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props} />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props} />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

afridatahub-frontend/src/components/ui/badge.jsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+export { Badge, badgeVariants }

afridatahub-frontend/src/components/ui/breadcrumb.jsx

@@ -0,0 +1,112 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({
+  ...props
+}) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({
+  className,
+  ...props
+}) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function BreadcrumbItem({
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbPage({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}>
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}>
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

afridatahub-frontend/src/components/ui/button.jsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Button, buttonVariants }

afridatahub-frontend/src/components/ui/calendar.jsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-x-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start:
+          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end:
+          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("size-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("size-4", className)} {...props} />
+        ),
+      }}
+      {...props} />
+  );
+}
+
+export { Calendar }

afridatahub-frontend/src/components/ui/card.jsx

@@ -0,0 +1,101 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props} />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props} />
+  );
+}
+
+function CardAction({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}) {
+  return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />);
+}
+
+function CardFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props} />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

afridatahub-frontend/src/components/ui/carousel.jsx

@@ -0,0 +1,195 @@
+"use client";
+import * as React from "react"
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y",
+  }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }, [scrollPrev, scrollNext])
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    };
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}>
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}>
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({
+  className,
+  ...props
+}) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content">
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props} />
+    </div>
+  );
+}
+
+function CarouselItem({
+  className,
+  ...props
+}) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn("absolute size-8 rounded-full", orientation === "horizontal"
+        ? "top-1/2 -left-12 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}>
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn("absolute size-8 rounded-full", orientation === "horizontal"
+        ? "top-1/2 -right-12 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}>
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

afridatahub-frontend/src/components/ui/chart.jsx

@@ -0,0 +1,309 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = {
+  light: "",
+  dark: ".dark"
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({
+  id,
+  config
+}) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+.map(([key, itemConfig]) => {
+const color =
+  itemConfig.theme?.[theme] ||
+  itemConfig.color
+return color ? `  --color-${key}: ${color};` : null
+})
+.join("\n")}
+}
+`)
+          .join("\n"),
+      }} />
+  );
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}>
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}>
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent":
+                            indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed",
+                        })}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor
+                          }
+                        } />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}>
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}>
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }} />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config,
+  payload,
+  key
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey = key
+
+  if (
+    key in payload &&
+    typeof payload[key] === "string"
+  ) {
+    configLabelKey = payload[key]
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key] === "string"
+  ) {
+    configLabelKey = payloadPayload[key]
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

afridatahub-frontend/src/components/ui/checkbox.jsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none">
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox }

afridatahub-frontend/src/components/ui/collapsible.jsx

@@ -0,0 +1,21 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}) {
+  return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />);
+}
+
+function CollapsibleContent({
+  ...props
+}) {
+  return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

afridatahub-frontend/src/components/ui/command.jsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props} />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+      {...props} />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}) {
+  return (<CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />);
+}
+
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props} />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props} />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

afridatahub-frontend/src/components/ui/context-menu.jsx

@@ -0,0 +1,224 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />);
+}
+
+function ContextMenuGroup({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />);
+}
+
+function ContextMenuPortal({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />);
+}
+
+function ContextMenuSub({
+  ...props
+}) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />);
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props} />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props} />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props} />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

afridatahub-frontend/src/components/ui/dialog.jsx

@@ -0,0 +1,131 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}>
+        {children}
+        <DialogPrimitive.Close
+          className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props} />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props} />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props} />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

afridatahub-frontend/src/components/ui/drawer.jsx

@@ -0,0 +1,131 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}>
+        <div
+          className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props} />
+  );
+}
+
+function DrawerFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props} />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props} />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props} />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

afridatahub-frontend/src/components/ui/dropdown-menu.jsx

@@ -0,0 +1,223 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />);
+}
+
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />);
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props} />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />);
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />);
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      {...props} />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props} />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props} />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

afridatahub-frontend/src/components/ui/form.jsx

@@ -0,0 +1,143 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+const FormFieldContext = React.createContext({})
+
+const FormField = (
+  {
+    ...props
+  }
+) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const FormItemContext = React.createContext({})
+
+function FormItem({
+  className,
+  ...props
+}) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props} />
+  );
+}
+
+function FormControl({
+  ...props
+}) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props} />
+  );
+}
+
+function FormDescription({
+  className,
+  ...props
+}) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props} />
+  );
+}
+
+function FormMessage({
+  className,
+  ...props
+}) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}>
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

afridatahub-frontend/src/components/ui/hover-card.jsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}) {
+  return (<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />);
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props} />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }