Ajout du message informatif pour le mode hors ligne dans ClientList

Correction de l'accès à /admin/login dans l'APK admin
- Détection automatique de l'app admin (Capacitor) - Redirection automatique vers /admin/login si non connecté - Gestion gracieuse des erreurs API en mode statique - Message informatif si API non disponible - Support du mode statique pour l'APK admin
2025-11-23 17:01:52 +01:00 · 2025-11-23 17:01:31 +01:00 · 2025-11-23 16:53:27 +01:00
17 changed files with 240 additions and 46 deletions
--- a/app/admin/login/page.tsx
+++ b/app/admin/login/page.tsx
@ -31,13 +31,20 @@ export default function AdminLoginPage() {

      if (response.ok) {
        router.push("/admin");
+      } else if (response.status === 404) {
+        // API non disponible (mode statique/APK) - accepter quand même
+        // Le mot de passe sera vérifié côté serveur lors des vraies requêtes
+        router.push("/admin");
      } else {
        setError("Mot de passe incorrect");
        localStorage.removeItem("adminPassword");
      }
    } catch (err) {
-      setError("Erreur de connexion");
-      localStorage.removeItem("adminPassword");
+      // Erreur réseau (API non disponible en mode statique/APK)
+      // Accepter quand même et rediriger
+      // Le mot de passe sera vérifié côté serveur lors des vraies requêtes
+      console.warn("API non disponible (mode statique), connexion acceptée localement");
+      router.push("/admin");
    } finally {
      setLoading(false);
    }
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@ -20,7 +20,31 @@ export default function AdminPage() {
    const adminPassword = localStorage.getItem("adminPassword");
    if (!adminPassword) {
      router.push("/admin/login");
+      return;
    }
+
+    // Tester la connexion avec l'API (si disponible)
+    // Si l'API n'est pas disponible (APK statique), on continue quand même
+    fetch("/api/admin/clients", {
+      headers: {
+        Authorization: `Bearer ${adminPassword}`,
+      },
+    })
+      .then((res) => {
+        if (!res.ok && res.status !== 404) {
+          // Si erreur autre que 404 (API non disponible), déconnecter
+          if (res.status === 401 || res.status === 403) {
+            localStorage.removeItem("adminPassword");
+            router.push("/admin/login");
+          }
+        }
+        // Si 404, c'est normal en mode statique (API non disponible)
+        // On continue l'affichage
+      })
+      .catch(() => {
+        // Erreur réseau (API non disponible en mode statique)
+        // C'est normal pour l'APK, on continue
+      });
  }, [router]);

  const handleNewClient = () => {
--- a/app/globals.css
+++ b/app/globals.css
@ -4,10 +4,10 @@

@layer base {
  body {
-    @apply bg-background;
+    @apply bg-background dark:bg-background-dark;
    font-size: 16px;
    min-height: 100vh;
-    color: #1f2937;
+    @apply text-foreground dark:text-foreground-dark;
  }
 }

--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import PWARegister from "@/components/PWARegister";
+import { ThemeProvider } from "@/components/ThemeProvider";

 const inter = Inter({ subsets: ["latin"] });

@ -29,14 +30,21 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="fr">
+    <html lang="fr" suppressHydrationWarning>
      <head>
        <link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="/logo-relais-marama.svg" />
      </head>
      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          enableSystem={true}
+          disableTransitionOnChange={false}
+        >
          {children}
          <PWARegister />
+        </ThemeProvider>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,21 +1,78 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";

 export default function Home() {
  const router = useRouter();
+  const [checked, setChecked] = useState(false);

  useEffect(() => {
+    // Détecter si on est dans l'app admin
+    // Méthode 1: Vérifier si Capacitor est disponible (APK)
+    const isCapacitor = typeof window !== "undefined" && (window as any).Capacitor;
+    
+    // Méthode 2: Vérifier le user agent ou l'URL
+    const isAdminPath = typeof window !== "undefined" && 
+      (window.location.pathname.startsWith("/admin") || 
+       window.location.search.includes("admin=true"));
+    
+    // Méthode 3: Vérifier si on a un mot de passe admin en localStorage
+    const hasAdminPassword = typeof window !== "undefined" && 
+      localStorage.getItem("adminPassword") !== null;
+
+    // Si on est dans Capacitor OU qu'on a un mot de passe admin, c'est l'app admin
+    const isAdminApp = isCapacitor || isAdminPath || hasAdminPassword;
+
+    if (isAdminApp) {
+      // Vérifier si l'admin est connecté
+      const adminPassword = typeof window !== "undefined" ? 
+        localStorage.getItem("adminPassword") : null;
+      
+      if (adminPassword) {
+        // Tester la connexion (si API disponible)
+        fetch("/api/admin/clients", {
+          headers: {
+            Authorization: `Bearer ${adminPassword}`,
+          },
+        })
+          .then((res) => {
+            if (res.ok) {
+              router.replace("/admin");
+            } else if (res.status === 404) {
+              // API non disponible (mode statique) - accepter quand même
+              router.replace("/admin");
+            } else {
+              localStorage.removeItem("adminPassword");
+              router.replace("/admin/login");
+            }
+          })
+          .catch(() => {
+            // Erreur réseau (API non disponible en mode statique)
+            // Accepter quand même et rediriger vers /admin
+            router.replace("/admin");
+          });
+      } else {
+        // Pas de mot de passe, rediriger vers login
+        router.replace("/admin/login");
+      }
+    } else {
+      // App client normale
      router.replace("/accueil");
+    }
+    setChecked(true);
  }, [router]);

+  if (!checked) {
    return (
-    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center justify-center min-h-screen bg-background dark:bg-background-dark">
        <div className="text-center">
-        <p className="text-gray-600">Redirection...</p>
+          <p className="text-gray-600 dark:text-gray-400">Chargement...</p>
        </div>
      </div>
    );
  }

+  return null;
+}
+
--- a/components/ThemeProvider.tsx
+++ b/components/ThemeProvider.tsx
@ -0,0 +1,9 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
+
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@ -0,0 +1,45 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-9 w-9 rounded-full"
+        aria-label="Changer de thème"
+      >
+        <Sun className="h-5 w-5" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="h-10 w-10 rounded-full hover:bg-secondary dark:hover:bg-gray-800"
+      aria-label="Changer de thème"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-5 w-5 text-primary dark:text-yellow-400" />
+      ) : (
+        <Moon className="h-5 w-5 text-primary dark:text-blue-300" />
+      )}
+    </Button>
+  );
+}
+
--- a/components/accueil/WifiCard.tsx
+++ b/components/accueil/WifiCard.tsx
@ -71,7 +71,7 @@ export default function WifiCard() {
  const showPasswordFallback = error && error.includes("sélectionner manuellement");

  return (
-    <Card className="bg-white">
+    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Wifi className="h-6 w-6 text-primary" />
@ -80,22 +80,22 @@ export default function WifiCard() {
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
-          <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Nom du réseau</p>
          <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
        </div>

        {showPasswordFallback && wifiPassword && (
-          <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3">
-            <p className="text-sm text-yellow-800 font-mono select-all">
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-3">
+            <p className="text-sm text-yellow-800 dark:text-yellow-300 font-mono select-all">
              {wifiPassword}
            </p>
          </div>
        )}

        {error && !showPasswordFallback && (
-          <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2">
-            <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
-            <p className="text-sm text-red-800">{error}</p>
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-3 flex items-start gap-2">
+            <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
          </div>
        )}

--- a/components/admin/AdminLayout.tsx
+++ b/components/admin/AdminLayout.tsx
@ -3,6 +3,7 @@
 import { LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import { ThemeToggle } from "@/components/ThemeToggle";

 export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
@ -13,15 +14,18 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
  };

  return (
-    <div className="min-h-screen bg-background">
-      <header className="bg-white border-b border-gray-200 shadow-sm">
+    <div className="min-h-screen bg-background dark:bg-background-dark">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <h1 className="text-xl font-bold text-primary">Administration</h1>
-          <Button variant="outline" size="sm" onClick={handleLogout}>
+          <h1 className="text-xl font-bold text-primary dark:text-primary">Administration</h1>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <Button variant="outline" size="sm" onClick={handleLogout} className="dark:border-gray-700 dark:text-gray-300">
              <LogOut className="h-4 w-4 mr-2" />
              Déconnexion
            </Button>
          </div>
+        </div>
      </header>
      <main className="max-w-4xl mx-auto px-4 py-6">{children}</main>
    </div>
--- a/components/admin/ClientList.tsx
+++ b/components/admin/ClientList.tsx
@ -34,9 +34,19 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
      if (response.ok) {
        const data = await response.json();
        setClients(data);
+      } else if (response.status === 404) {
+        // API non disponible (mode statique/APK)
+        // Afficher un message d'information
+        console.warn("API non disponible en mode statique");
+        setClients([]);
+      } else {
+        console.error("Erreur lors du chargement des clients:", response.status);
+        setClients([]);
      }
    } catch (error) {
-      console.error("Erreur lors du chargement des clients:", error);
+      // Erreur réseau (API non disponible en mode statique/APK)
+      console.warn("API non disponible (mode statique/APK). Les fonctionnalités admin nécessitent un serveur.");
+      setClients([]);
    } finally {
      setLoading(false);
    }
@ -73,7 +83,7 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
-        <p className="text-gray-600">Chargement...</p>
+        <p className="text-gray-600 dark:text-gray-400">Chargement...</p>
      </div>
    );
  }
@ -81,8 +91,12 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
  if (clients.length === 0) {
    return (
      <Card>
-        <CardContent className="py-8 text-center">
-          <p className="text-gray-600">Aucun client pour le moment.</p>
+        <CardContent className="py-8 text-center space-y-4">
+          <p className="text-gray-600 dark:text-gray-400">Aucun client pour le moment.</p>
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4 text-sm text-yellow-800 dark:text-yellow-300">
+            <p className="font-semibold mb-1">⚠️ Mode hors ligne</p>
+            <p>L&apos;application admin nécessite une connexion au serveur pour fonctionner. Les API routes ne sont pas disponibles en mode statique.</p>
+          </div>
        </CardContent>
      </Card>
    );
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@ -2,7 +2,7 @@ import TabNavigation from "./TabNavigation";

 export default function Layout({ children }: { children: React.ReactNode }) {
  return (
-    <div className="min-h-screen bg-background pb-16">
+    <div className="min-h-screen bg-background dark:bg-background-dark pb-16">
      {children}
      <TabNavigation />
    </div>
--- a/components/layout/TabNavigation.tsx
+++ b/components/layout/TabNavigation.tsx
@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Home, MapPin, Info, Waves } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { ThemeToggle } from "@/components/ThemeToggle";

 const tabs = [
  {
@ -32,7 +33,7 @@ export default function TabNavigation() {
  const pathname = usePathname();

  return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg">
      <div className="flex items-center justify-around h-16 px-2">
        {tabs.map((tab) => {
          const Icon = tab.icon;
@ -44,8 +45,8 @@ export default function TabNavigation() {
              className={cn(
                "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
                isActive
-                  ? "text-primary bg-secondary"
-                  : "text-gray-500 hover:text-primary hover:bg-gray-50"
+                  ? "text-primary bg-secondary dark:bg-primary/20"
+                  : "text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800"
              )}
            >
              <Icon className="h-6 w-6" />
@ -53,6 +54,9 @@ export default function TabNavigation() {
            </Link>
          );
        })}
+        <div className="flex items-center justify-center h-full px-2">
+          <ThemeToggle />
+        </div>
      </div>
    </nav>
  );
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -7,10 +7,10 @@ const buttonVariants = cva(
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
-        ghost: "hover:bg-secondary hover:text-secondary-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/30",
+        outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white",
+        ghost: "hover:bg-secondary hover:text-secondary-foreground dark:hover:bg-gray-800 dark:hover:text-gray-200",
      },
      size: {
        default: "h-12 px-6 py-3",
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@ -8,7 +8,7 @@ const Card = React.forwardRef<
  <div
    ref={ref}
    className={cn(
-      "rounded-2xl border border-gray-200 bg-white shadow-sm",
+      "rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm",
      className
    )}
    {...props}
@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <p
    ref={ref}
-    className={cn("text-sm text-gray-600", className)}
+    className={cn("text-sm text-gray-600 dark:text-gray-400", className)}
    {...props}
  />
 ));
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "clsx": "^2.1.1",
        "lucide-react": "^0.460.0",
        "next": "^14.2.33",
+        "next-themes": "^0.4.6",
        "qrcode.react": "^4.2.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
@ -4757,6 +4758,16 @@
        }
      }
    },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "clsx": "^2.1.1",
    "lucide-react": "^0.460.0",
    "next": "^14.2.33",
+    "next-themes": "^0.4.6",
    "qrcode.react": "^4.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -17,10 +17,20 @@ const config: Config = {
        secondary: {
          DEFAULT: "#ECFCCB",
          foreground: "#0E7490",
+          dark: "#1a3a2e",
+        },
+        background: {
+          DEFAULT: "#FAFAFA",
+          dark: "#0f172a",
+        },
+        foreground: {
+          DEFAULT: "#1f2937",
+          dark: "#f1f5f9",
+        },
+        border: {
+          DEFAULT: "#e5e7eb",
+          dark: "#334155",
        },
-        background: "#FAFAFA",
-        foreground: "#1f2937",
-        border: "#e5e7eb",
      },
      borderRadius: {
        xl: "1rem",