Ajout du système d'administration avec token unique et QR code

- Implémentation complète du système d'administration (/admin)
- Gestion des clients avec base de données JSON
- Génération de token unique et QR code pour chaque client
- Intégration des données client dans l'application (bungalow, WiFi, message)
- Amélioration du composant WifiCard avec fallback de copie
- Optimisation du hook useClientData pour chargement immédiat
- Ajout de la variable d'environnement ADMIN_PASSWORD

app/accueil/page.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
-import { config } from "@/lib/config";
 import WifiCard from "@/components/accueil/WifiCard";
 import Logo from "@/components/Logo";
+import { useClientData } from "@/lib/hooks/useClientData";
 
 const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), {
   loading: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
@@ -10,6 +12,18 @@ const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget")
 });
 
 export default function AccueilPage() {
+  const { bungalowNumber, gerantMessage, loading } = useClientData();
+
+  if (loading) {
+    return (
+      <Layout>
+        <div className="px-4 py-6 space-y-6">
+          <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />
+        </div>
+      </Layout>
+    );
+  }
+
   return (
     <Layout>
       <div className="px-4 py-6 space-y-6">
@@ -19,7 +33,7 @@ export default function AccueilPage() {
             Ia Ora Na
           </h1>
           <p className="text-lg text-gray-700">
-            Bienvenue au Bungalow {config.bungalowNumber}
+            Bienvenue au Bungalow {bungalowNumber}
           </p>
         </header>
 
@@ -32,7 +46,7 @@ export default function AccueilPage() {
             Le mot du gérant
           </h2>
           <p className="text-gray-700 leading-relaxed">
-            {config.gerantMessage}
+            {gerantMessage}
           </p>
         </section>
       </div>

app/admin/login/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import Logo from "@/components/Logo";
+
+export default function AdminLoginPage() {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    // Vérification simple côté client (la vraie vérification se fait côté serveur)
+    // Pour l'instant, on stocke le mot de passe dans localStorage
+    localStorage.setItem("adminPassword", password);
+    
+    // Test avec une requête API
+    try {
+      const response = await fetch("/api/admin/clients", {
+        headers: {
+          Authorization: `Bearer ${password}`,
+        },
+      });
+
+      if (response.ok) {
+        router.push("/admin");
+      } else {
+        setError("Mot de passe incorrect");
+        localStorage.removeItem("adminPassword");
+      }
+    } catch (err) {
+      setError("Erreur de connexion");
+      localStorage.removeItem("adminPassword");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <Logo size={100} />
+          </div>
+          <CardTitle>Administration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Mot de passe
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
+                required
+              />
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
+                {error}
+              </div>
+            )}
+
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? "Connexion..." : "Se connecter"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

app/admin/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import AdminLayout from "@/components/admin/AdminLayout";
+import ClientForm from "@/components/admin/ClientForm";
+import ClientList from "@/components/admin/ClientList";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { Client } from "@/lib/types/client";
+
+export default function AdminPage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingClient, setEditingClient] = useState<Client | undefined>();
+  const [refreshKey, setRefreshKey] = useState(0);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Vérifier si l'admin est connecté
+    const adminPassword = localStorage.getItem("adminPassword");
+    if (!adminPassword) {
+      router.push("/admin/login");
+    }
+  }, [router]);
+
+  const handleNewClient = () => {
+    setEditingClient(undefined);
+    setShowForm(true);
+  };
+
+  const handleEdit = (client: Client) => {
+    setEditingClient(client);
+    setShowForm(true);
+  };
+
+  const handleSuccess = () => {
+    setShowForm(false);
+    setEditingClient(undefined);
+    setRefreshKey((k) => k + 1);
+  };
+
+  const handleCancel = () => {
+    setShowForm(false);
+    setEditingClient(undefined);
+  };
+
+  return (
+    <AdminLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-primary">Gestion des clients</h2>
+          {!showForm && (
+            <Button onClick={handleNewClient}>
+              <Plus className="h-4 w-4 mr-2" />
+              Nouveau client
+            </Button>
+          )}
+        </div>
+
+        {showForm ? (
+          <ClientForm
+            client={editingClient}
+            onSuccess={handleSuccess}
+            onCancel={handleCancel}
+          />
+        ) : (
+          <ClientList onEdit={handleEdit} onRefresh={() => setRefreshKey((k) => k + 1)} />
+        )}
+      </div>
+    </AdminLayout>
+  );
+}
+

app/api/admin/clients/[id]/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from "next/server";
+import { updateClient, deleteClient, loadClients } from "@/lib/admin/client-utils";
+import { requireAdminAuth } from "@/lib/admin/auth";
+import { ClientInput } from "@/lib/types/client";
+
+export async function PUT(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!requireAdminAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  try {
+    const { id } = await params;
+    const body: Partial<ClientInput> = await request.json();
+    const client = updateClient(id, body);
+
+    if (!client) {
+      return NextResponse.json(
+        { error: "Client non trouvé" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(client);
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || "Erreur lors de la mise à jour" },
+      { status: 400 }
+    );
+  }
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!requireAdminAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  const { id } = await params;
+  const deleted = deleteClient(id);
+
+  if (!deleted) {
+    return NextResponse.json(
+      { error: "Client non trouvé" },
+      { status: 404 }
+    );
+  }
+
+  return NextResponse.json({ success: true });
+}
+

app/api/admin/clients/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import {
+  createClient,
+  loadClients,
+  updateClient,
+  deleteClient,
+  validateEmail,
+} from "@/lib/admin/client-utils";
+import { requireAdminAuth } from "@/lib/admin/auth";
+import { ClientInput } from "@/lib/types/client";
+
+export async function GET(request: Request) {
+  if (!requireAdminAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  const clients = loadClients();
+  return NextResponse.json(clients);
+}
+
+export async function POST(request: Request) {
+  if (!requireAdminAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  try {
+    const body: ClientInput = await request.json();
+
+    // Validation
+    if (!body.email || !validateEmail(body.email)) {
+      return NextResponse.json(
+        { error: "Email invalide" },
+        { status: 400 }
+      );
+    }
+
+    if (!body.bungalowNumber) {
+      return NextResponse.json(
+        { error: "Numéro de bungalow requis" },
+        { status: 400 }
+      );
+    }
+
+    const client = createClient({
+      email: body.email,
+      bungalowNumber: body.bungalowNumber,
+      wifiName: body.wifiName || "Lagon-WiFi",
+      wifiPassword: body.wifiPassword || "",
+      gerantMessage: body.gerantMessage || "Bienvenue dans notre pension de famille !",
+    });
+
+    return NextResponse.json(client, { status: 201 });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || "Erreur lors de la création du client" },
+      { status: 400 }
+    );
+  }
+}
+

app/api/client/[token]/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { getClientByToken } from "@/lib/admin/client-utils";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  const { token } = await params;
+  const client = getClientByToken(token);
+
+  if (!client) {
+    return NextResponse.json(
+      { error: "Token invalide ou expiré" },
+      { status: 404 }
+    );
+  }
+
+  // Retourner uniquement les informations nécessaires (sans le token)
+  return NextResponse.json({
+    bungalowNumber: client.bungalowNumber,
+    wifiName: client.wifiName,
+    wifiPassword: client.wifiPassword,
+    gerantMessage: client.gerantMessage,
+  });
+}
+

components/accueil/WifiCard.tsx

@@ -1,24 +1,75 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import { Wifi, Copy, Check } from "lucide-react";
+import { Wifi, Copy, Check, AlertCircle } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { config } from "@/lib/config";
+import { useClientData } from "@/lib/hooks/useClientData";
 
 export default function WifiCard() {
+  const { wifiName, wifiPassword, loading } = useClientData();
   const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleCopyPassword = async () => {
+  // Fonction de copie avec fallback pour les navigateurs qui ne supportent pas l'API Clipboard
+  const copyToClipboard = async (text: string): Promise<boolean> => {
+    // Méthode moderne (nécessite HTTPS ou localhost)
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch (err) {
+        console.error("Erreur avec l'API Clipboard:", err);
+      }
+    }
+
+    // Fallback pour les navigateurs plus anciens ou contextes non sécurisés
     try {
-      await navigator.clipboard.writeText(config.wifiPassword);
+      const textArea = document.createElement("textarea");
-      setCopied(true);
+      textArea.value = text;
-      setTimeout(() => setCopied(false), 2000);
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      
+      const successful = document.execCommand("copy");
+      document.body.removeChild(textArea);
+      
+      if (successful) {
+        return true;
+      } else {
+        throw new Error("La commande copy a échoué");
+      }
     } catch (err) {
-      console.error("Erreur lors de la copie:", err);
+      console.error("Erreur avec la méthode fallback:", err);
+      return false;
     }
   };
 
+  const handleCopyPassword = async () => {
+    if (!wifiPassword || wifiPassword.trim() === "") {
+      setError("Le mot de passe WiFi n'est pas disponible");
+      setTimeout(() => setError(null), 3000);
+      return;
+    }
+
+    setError(null);
+    const success = await copyToClipboard(wifiPassword);
+
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } else {
+      setError("Impossible de copier. Veuillez sélectionner manuellement le mot de passe ci-dessous.");
+      setTimeout(() => setError(null), 5000);
+    }
+  };
+
+  // Afficher le mot de passe en cas d'échec de la copie
+  const showPasswordFallback = error && error.includes("sélectionner manuellement");
+
   return (
     <Card className="bg-white">
       <CardHeader>
@@ -30,14 +81,36 @@ export default function WifiCard() {
       <CardContent className="space-y-4">
         <div>
           <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
-          <p className="text-lg font-semibold text-primary">{config.wifiName}</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">
+              {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>
+        )}
+
         <Button
           onClick={handleCopyPassword}
+          disabled={loading || !wifiPassword}
           className="w-full h-14 text-lg"
           size="lg"
         >
-          {copied ? (
+          {loading ? (
+            <>
+              <Copy className="mr-2 h-5 w-5" />
+              Chargement...
+            </>
+          ) : copied ? (
             <>
               <Check className="mr-2 h-5 w-5" />
               Mot de passe copié !

components/admin/AdminLayout.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  const handleLogout = () => {
+    localStorage.removeItem("adminPassword");
+    router.push("/admin/login");
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="bg-white border-b border-gray-200 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}>
+            <LogOut className="h-4 w-4 mr-2" />
+            Déconnexion
+          </Button>
+        </div>
+      </header>
+      <main className="max-w-4xl mx-auto px-4 py-6">{children}</main>
+    </div>
+  );
+}
+

components/admin/ClientForm.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Client, ClientInput } from "@/lib/types/client";
+import QRCodeDisplay from "./QRCodeDisplay";
+
+interface ClientFormProps {
+  client?: Client;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export default function ClientForm({ client, onSuccess, onCancel }: ClientFormProps) {
+  const [formData, setFormData] = useState<ClientInput>({
+    email: client?.email || "",
+    bungalowNumber: client?.bungalowNumber || "",
+    wifiName: client?.wifiName || "Lagon-WiFi",
+    wifiPassword: client?.wifiPassword || "",
+    gerantMessage: client?.gerantMessage || "Bienvenue dans notre pension de famille !",
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const adminPassword = localStorage.getItem("adminPassword") || "";
+      const url = client
+        ? `/api/admin/clients/${client.id}`
+        : "/api/admin/clients";
+      
+      const method = client ? "PUT" : "POST";
+
+      const response = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${adminPassword}`,
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || "Erreur lors de la sauvegarde");
+      }
+
+      const data = await response.json();
+      setCreatedClient(data);
+      onSuccess();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getClientUrl = () => {
+    if (!createdClient) return "";
+    const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+    return `${baseUrl}/accueil?token=${createdClient.token}`;
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{client ? "Modifier le client" : "Nouveau client"}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Email *
+            </label>
+            <input
+              type="email"
+              required
+              value={formData.email}
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              disabled={!!client}
+              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-100"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Numéro de bungalow *
+            </label>
+            <input
+              type="text"
+              required
+              value={formData.bungalowNumber}
+              onChange={(e) =>
+                setFormData({ ...formData, bungalowNumber: e.target.value })
+              }
+              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Nom du WiFi
+            </label>
+            <input
+              type="text"
+              value={formData.wifiName}
+              onChange={(e) =>
+                setFormData({ ...formData, wifiName: e.target.value })
+              }
+              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Mot de passe WiFi
+            </label>
+            <input
+              type="text"
+              value={formData.wifiPassword}
+              onChange={(e) =>
+                setFormData({ ...formData, wifiPassword: e.target.value })
+              }
+              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Message du gérant
+            </label>
+            <textarea
+              value={formData.gerantMessage}
+              onChange={(e) =>
+                setFormData({ ...formData, gerantMessage: e.target.value })
+              }
+              rows={3}
+              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <Button type="button" variant="outline" onClick={onCancel} className="flex-1">
+              Annuler
+            </Button>
+            <Button type="submit" disabled={loading} className="flex-1">
+              {loading ? "Enregistrement..." : client ? "Modifier" : "Créer"}
+            </Button>
+          </div>
+        </form>
+
+        {createdClient && !client && (
+          <div className="mt-6 pt-6 border-t border-gray-200">
+            <h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm text-gray-600 mb-2">Lien unique :</p>
+                <div className="bg-secondary rounded-xl p-3 flex items-center justify-between gap-2">
+                  <code className="text-xs break-all flex-1">{getClientUrl()}</code>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      navigator.clipboard.writeText(getClientUrl());
+                    }}
+                  >
+                    Copier
+                  </Button>
+                </div>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-2">QR Code :</p>
+                <QRCodeDisplay url={getClientUrl()} />
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

components/admin/ClientList.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Trash2, Edit, Copy, QrCode } from "lucide-react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Client } from "@/lib/types/client";
+import QRCodeDisplay from "./QRCodeDisplay";
+
+interface ClientListProps {
+  onEdit: (client: Client) => void;
+  onRefresh: () => void;
+}
+
+export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
+  const [clients, setClients] = useState<Client[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedClient, setSelectedClient] = useState<Client | null>(null);
+  const [showQR, setShowQR] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchClients();
+  }, []);
+
+  const fetchClients = async () => {
+    try {
+      const adminPassword = localStorage.getItem("adminPassword") || "";
+      const response = await fetch("/api/admin/clients", {
+        headers: {
+          Authorization: `Bearer ${adminPassword}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setClients(data);
+      }
+    } catch (error) {
+      console.error("Erreur lors du chargement des clients:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Êtes-vous sûr de vouloir supprimer ce client ?")) {
+      return;
+    }
+
+    try {
+      const adminPassword = localStorage.getItem("adminPassword") || "";
+      const response = await fetch(`/api/admin/clients/${id}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${adminPassword}`,
+        },
+      });
+
+      if (response.ok) {
+        fetchClients();
+        onRefresh();
+      }
+    } catch (error) {
+      console.error("Erreur lors de la suppression:", error);
+    }
+  };
+
+  const getClientUrl = (token: string) => {
+    const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+    return `${baseUrl}/accueil?token=${token}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-gray-600">Chargement...</p>
+      </div>
+    );
+  }
+
+  if (clients.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-8 text-center">
+          <p className="text-gray-600">Aucun client pour le moment.</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {clients.map((client) => (
+        <Card key={client.id}>
+          <CardHeader>
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <CardTitle className="text-lg">{client.email}</CardTitle>
+                <p className="text-sm text-gray-600 mt-1">
+                  Bungalow {client.bungalowNumber}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const url = getClientUrl(client.token);
+                    navigator.clipboard.writeText(url);
+                  }}
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() =>
+                    setShowQR(showQR === client.id ? null : client.id)
+                  }
+                >
+                  <QrCode className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => onEdit(client)}
+                >
+                  <Edit className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleDelete(client.id)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 text-sm">
+              <div>
+                <span className="font-medium">WiFi:</span> {client.wifiName}
+              </div>
+              <div>
+                <span className="font-medium">Message:</span>{" "}
+                {client.gerantMessage.substring(0, 50)}
+                {client.gerantMessage.length > 50 ? "..." : ""}
+              </div>
+              <div className="text-xs text-gray-500">
+                Créé le {new Date(client.createdAt).toLocaleDateString("fr-FR")}
+              </div>
+            </div>
+            {showQR === client.id && (
+              <div className="mt-4 pt-4 border-t border-gray-200">
+                <QRCodeDisplay url={getClientUrl(client.token)} size={150} />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+

components/admin/QRCodeDisplay.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { QRCodeSVG } from "qrcode.react";
+
+interface QRCodeDisplayProps {
+  url: string;
+  size?: number;
+}
+
+export default function QRCodeDisplay({ url, size = 200 }: QRCodeDisplayProps) {
+  return (
+    <div className="flex flex-col items-center gap-4 p-4 bg-white rounded-2xl border border-gray-200">
+      <QRCodeSVG value={url} size={size} level="H" />
+      <p className="text-xs text-gray-600 text-center break-all max-w-xs">
+        {url}
+      </p>
+    </div>
+  );
+}
+

env.example

@@ -10,3 +10,6 @@ NEXT_PUBLIC_CONTACT_WHATSAPP=+689 XX XX XX XX
 NEXT_PUBLIC_CONTACT_ADDRESS=Rotoava, Fakarava
 NEXT_PUBLIC_CONTACT_HOURS=Disponible 24/7 pour les urgences
 
+# Administration
+ADMIN_PASSWORD=admin123
+

lib/admin/auth.ts

@@ -0,0 +1,15 @@
+export function verifyAdminPassword(password: string): boolean {
+  const adminPassword = process.env.ADMIN_PASSWORD || "admin123";
+  return password === adminPassword;
+}
+
+export function requireAdminAuth(request: Request): boolean {
+  const authHeader = request.headers.get("authorization");
+  if (!authHeader) {
+    return false;
+  }
+
+  const token = authHeader.replace("Bearer ", "");
+  return verifyAdminPassword(token);
+}
+

lib/admin/client-utils.ts

@@ -0,0 +1,101 @@
+import { randomBytes } from "crypto";
+import { Client, ClientInput } from "@/lib/types/client";
+import { readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+
+const CLIENTS_FILE = join(process.cwd(), "lib/data/clients.json");
+
+export function generateToken(): string {
+  return randomBytes(32).toString("hex");
+}
+
+export function validateEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+export function loadClients(): Client[] {
+  try {
+    const data = readFileSync(CLIENTS_FILE, "utf-8");
+    return JSON.parse(data);
+  } catch (error) {
+    return [];
+  }
+}
+
+export function saveClients(clients: Client[]): void {
+  try {
+    writeFileSync(CLIENTS_FILE, JSON.stringify(clients, null, 2), "utf-8");
+  } catch (error) {
+    console.error("Erreur lors de la sauvegarde des clients:", error);
+    throw error;
+  }
+}
+
+export function createClient(input: ClientInput): Client {
+  const clients = loadClients();
+  
+  // Vérifier si l'email existe déjà
+  if (clients.some((c) => c.email === input.email)) {
+    throw new Error("Un client avec cet email existe déjà");
+  }
+
+  const now = new Date().toISOString();
+  const client: Client = {
+    id: `client-${Date.now()}`,
+    email: input.email,
+    token: generateToken(),
+    bungalowNumber: input.bungalowNumber,
+    wifiName: input.wifiName,
+    wifiPassword: input.wifiPassword,
+    gerantMessage: input.gerantMessage,
+    createdAt: now,
+    updatedAt: now,
+  };
+
+  clients.push(client);
+  saveClients(clients);
+  
+  return client;
+}
+
+export function getClientByToken(token: string): Client | null {
+  const clients = loadClients();
+  return clients.find((c) => c.token === token) || null;
+}
+
+export function getClientByEmail(email: string): Client | null {
+  const clients = loadClients();
+  return clients.find((c) => c.email === email) || null;
+}
+
+export function updateClient(id: string, input: Partial<ClientInput>): Client | null {
+  const clients = loadClients();
+  const index = clients.findIndex((c) => c.id === id);
+  
+  if (index === -1) {
+    return null;
+  }
+
+  clients[index] = {
+    ...clients[index],
+    ...input,
+    updatedAt: new Date().toISOString(),
+  };
+
+  saveClients(clients);
+  return clients[index];
+}
+
+export function deleteClient(id: string): boolean {
+  const clients = loadClients();
+  const filtered = clients.filter((c) => c.id !== id);
+  
+  if (filtered.length === clients.length) {
+    return false;
+  }
+
+  saveClients(filtered);
+  return true;
+}
+

lib/data/clients.json

@@ -0,0 +1,13 @@
+[
+  {
+    "id": "client-1763884046464",
+    "email": "sylvestre@anuanua.fr",
+    "token": "017e529de30383c9dba62705fc92df7062f1bcc8872985bc55a8f7dcb7407bd4",
+    "bungalowNumber": "4",
+    "wifiName": "Lagon-WiFi",
+    "wifiPassword": "le motepasseduwifi987",
+    "gerantMessage": "Bienvenue dans notre pension de famille !",
+    "createdAt": "2025-11-23T07:47:26.464Z",
+    "updatedAt": "2025-11-23T07:47:26.464Z"
+  }
+]

lib/hooks/useClientData.ts

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import { config } from "@/lib/config";
+
+export interface ClientData {
+  bungalowNumber: string;
+  wifiName: string;
+  wifiPassword: string;
+  gerantMessage: string;
+}
+
+const STORAGE_KEY = "clientData";
+
+function loadFromStorage(): ClientData | null {
+  if (typeof window === "undefined") return null;
+  
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.error("Erreur lors du chargement depuis localStorage:", error);
+  }
+  return null;
+}
+
+export function useClientData() {
+  const searchParams = useSearchParams();
+  // Charger immédiatement depuis localStorage pour éviter le délai
+  const [clientData, setClientData] = useState<ClientData | null>(() => loadFromStorage());
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadClientData = async () => {
+      // 1. Charger d'abord depuis localStorage pour un affichage immédiat
+      const storedData = loadFromStorage();
+      if (storedData) {
+        setClientData(storedData);
+        setLoading(false);
+      }
+
+      // 2. Vérifier s'il y a un token dans l'URL
+      const token = searchParams.get("token");
+
+      if (token) {
+        try {
+          // 3. Charger les données depuis l'API pour mettre à jour
+          const response = await fetch(`/api/client/${token}`);
+          if (response.ok) {
+            const data = await response.json();
+            const clientInfo: ClientData = {
+              bungalowNumber: data.bungalowNumber,
+              wifiName: data.wifiName,
+              wifiPassword: data.wifiPassword,
+              gerantMessage: data.gerantMessage,
+            };
+            
+            // 4. Sauvegarder dans localStorage
+            if (typeof window !== "undefined") {
+              localStorage.setItem(STORAGE_KEY, JSON.stringify(clientInfo));
+            }
+            setClientData(clientInfo);
+          } else {
+            // Token invalide, garder les données sauvegardées si disponibles
+            if (!storedData) {
+              setClientData(null);
+            }
+          }
+        } catch (error) {
+          console.error("Erreur lors du chargement des données client:", error);
+          // En cas d'erreur, garder les données sauvegardées si disponibles
+          if (!storedData) {
+            setClientData(null);
+          }
+        }
+      }
+
+      setLoading(false);
+    };
+
+    loadClientData();
+  }, [searchParams]);
+
+  // Retourner les données client ou les valeurs par défaut
+  return useMemo(() => ({
+    bungalowNumber: clientData?.bungalowNumber || config.bungalowNumber,
+    wifiName: clientData?.wifiName || config.wifiName,
+    wifiPassword: clientData?.wifiPassword || config.wifiPassword,
+    gerantMessage: clientData?.gerantMessage || config.gerantMessage,
+    loading,
+  }), [clientData, loading]);
+}
+

lib/types/client.ts

@@ -0,0 +1,20 @@
+export interface Client {
+  id: string;
+  email: string;
+  token: string;
+  bungalowNumber: string;
+  wifiName: string;
+  wifiPassword: string;
+  gerantMessage: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ClientInput {
+  email: string;
+  bungalowNumber: string;
+  wifiName: string;
+  wifiPassword: string;
+  gerantMessage: string;
+}
+

package-lock.json

@@ -12,6 +12,7 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.460.0",
         "next": "^14.2.33",
+        "qrcode.react": "^4.2.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwind-merge": "^2.5.5"
@@ -4701,6 +4702,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -9,24 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "next": "^14.2.33",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "next": "^14.2.33",
+    "tailwind-merge": "^2.5.5"
-    "lucide-react": "^0.460.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.5",
-    "class-variance-authority": "^0.7.1"
   },
   "devDependencies": {
-    "typescript": "^5.6.3",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^14.2.33",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
-    "eslint": "^8.57.1",
+    "typescript": "^5.6.3"
-    "eslint-config-next": "^14.2.33"
   }
 }
-