syoul/Compagnon-du-Lagon---Marama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: syoul:106f15205c86cd480060409248d2075847edb66f
Branches Tags
syoul:main syoul:dev
..
compare: syoul:0247f6ed9da342ed5c1b3ad59cdf1bb13bb49fac
Branches Tags
syoul:dev syoul:main

3 Commits
106f15205c ... 0247f6ed9d

Author SHA1 Message Date
syoul
0247f6ed9d Ajout du message informatif pour le mode hors ligne dans ClientList 2025-11-23 17:01:52 +01:00
syoul
ba1433b192 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:31 +01:00
syoul
0e485aacee Ajout du mode clair/sombre (dark mode) 
- Installation de next-themes
- Création du composant ThemeToggle avec icônes soleil/lune
- Intégration du ThemeProvider dans le layout
- Ajout du toggle dans la navigation mobile et le header admin
- Adaptation des couleurs pour le dark mode (tropical chic)
- Mise à jour des composants UI (Card, Button) pour le dark mode
- Adaptation des composants principaux (Layout, WifiCard, etc.)
 2025-11-23 16:53:27 +01:00
17 changed files with 240 additions and 46 deletions
Expand all files Collapse all files

11
app/admin/login/page.tsx
View File

@ -31,13 +31,20 @@ export default function AdminLoginPage() {
if (response.ok) { if (response.ok) {
router.push("/admin"); 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 { } else {
setError("Mot de passe incorrect"); setError("Mot de passe incorrect");
localStorage.removeItem("adminPassword"); localStorage.removeItem("adminPassword");
} }
} catch (err) { } catch (err) {
setError("Erreur de connexion"); // Erreur réseau (API non disponible en mode statique/APK)
localStorage.removeItem("adminPassword"); // 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 { } finally {
setLoading(false); setLoading(false);
} }

24
app/admin/page.tsx
View File

@ -20,7 +20,31 @@ export default function AdminPage() {
const adminPassword = localStorage.getItem("adminPassword"); const adminPassword = localStorage.getItem("adminPassword");
if (!adminPassword) { if (!adminPassword) {
router.push("/admin/login"); 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]); }, [router]);
const handleNewClient = () => { const handleNewClient = () => {

4
app/globals.css
View File

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

14
app/layout.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import PWARegister from "@/components/PWARegister"; import PWARegister from "@/components/PWARegister";
import { ThemeProvider } from "@/components/ThemeProvider";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -29,14 +30,21 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="fr"> <html lang="fr" suppressHydrationWarning>
<head> <head>
<link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" /> <link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/logo-relais-marama.svg" /> <link rel="apple-touch-icon" href="/logo-relais-marama.svg" />
</head> </head>
<body className={inter.className}> <body className={inter.className}>
{children} <ThemeProvider
<PWARegister /> attribute="class"
defaultTheme="light"
enableSystem={true}
disableTransitionOnChange={false}
>
{children}
<PWARegister />
</ThemeProvider>
</body> </body>
</html> </html>
); );

73
app/page.tsx
View File

@ -1,21 +1,78 @@
"use client"; "use client";
import { useEffect } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
export default function Home() { export default function Home() {
const router = useRouter(); const router = useRouter();
const [checked, setChecked] = useState(false);
useEffect(() => { useEffect(() => {
router.replace("/accueil"); // 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]); }, [router]);
return ( if (!checked) {
<div className="flex items-center justify-center min-h-screen"> return (
<div className="text-center"> <div className="flex items-center justify-center min-h-screen bg-background dark:bg-background-dark">
<p className="text-gray-600">Redirection...</p> <div className="text-center">
<p className="text-gray-600 dark:text-gray-400">Chargement...</p>
</div>
</div> </div>
</div> );
); }
return null;
} }

9
components/ThemeProvider.tsx Normal file
View File

@ -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>;
}

45
components/ThemeToggle.tsx Normal file
View File

@ -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>
);
}

14
components/accueil/WifiCard.tsx
View File

@ -71,7 +71,7 @@ export default function WifiCard() {
const showPasswordFallback = error && error.includes("sélectionner manuellement"); const showPasswordFallback = error && error.includes("sélectionner manuellement");
return ( return (
<Card className="bg-white"> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Wifi className="h-6 w-6 text-primary" /> <Wifi className="h-6 w-6 text-primary" />
@ -80,22 +80,22 @@ export default function WifiCard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <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> <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
</div> </div>
{showPasswordFallback && wifiPassword && ( {showPasswordFallback && wifiPassword && (
<div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3"> <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 font-mono select-all"> <p className="text-sm text-yellow-800 dark:text-yellow-300 font-mono select-all">
{wifiPassword} {wifiPassword}
</p> </p>
</div> </div>
)} )}
{error && !showPasswordFallback && ( {error && !showPasswordFallback && (
<div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2"> <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 flex-shrink-0 mt-0.5" /> <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">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}

18
components/admin/AdminLayout.tsx
View File

@ -3,6 +3,7 @@
import { LogOut } from "lucide-react"; import { LogOut } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { ThemeToggle } from "@/components/ThemeToggle";
export default function AdminLayout({ children }: { children: React.ReactNode }) { export default function AdminLayout({ children }: { children: React.ReactNode }) {
const router = useRouter(); const router = useRouter();
@ -13,14 +14,17 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
}; };
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background dark:bg-background-dark">
<header className="bg-white border-b border-gray-200 shadow-sm"> <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"> <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> <h1 className="text-xl font-bold text-primary dark:text-primary">Administration</h1>
<Button variant="outline" size="sm" onClick={handleLogout}> <div className="flex items-center gap-2">
<LogOut className="h-4 w-4 mr-2" /> <ThemeToggle />
Déconnexion <Button variant="outline" size="sm" onClick={handleLogout} className="dark:border-gray-700 dark:text-gray-300">
</Button> <LogOut className="h-4 w-4 mr-2" />
Déconnexion
</Button>
</div>
</div> </div>
</header> </header>
<main className="max-w-4xl mx-auto px-4 py-6">{children}</main> <main className="max-w-4xl mx-auto px-4 py-6">{children}</main>

22
components/admin/ClientList.tsx
View File

@ -34,9 +34,19 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setClients(data); 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) { } 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 { } finally {
setLoading(false); setLoading(false);
} }
@ -73,7 +83,7 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center py-8"> <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> </div>
); );
} }
@ -81,8 +91,12 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
if (clients.length === 0) { if (clients.length === 0) {
return ( return (
<Card> <Card>
<CardContent className="py-8 text-center"> <CardContent className="py-8 text-center space-y-4">
<p className="text-gray-600">Aucun client pour le moment.</p> <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> </CardContent>
</Card> </Card>
); );

2
components/layout/Layout.tsx
View File

@ -2,7 +2,7 @@ import TabNavigation from "./TabNavigation";
export default function Layout({ children }: { children: React.ReactNode }) { export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div className="min-h-screen bg-background pb-16"> <div className="min-h-screen bg-background dark:bg-background-dark pb-16">
{children} {children}
<TabNavigation /> <TabNavigation />
</div> </div>

10
components/layout/TabNavigation.tsx
View File

@ -4,6 +4,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { Home, MapPin, Info, Waves } from "lucide-react"; import { Home, MapPin, Info, Waves } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ThemeToggle } from "@/components/ThemeToggle";
const tabs = [ const tabs = [
{ {
@ -32,7 +33,7 @@ export default function TabNavigation() {
const pathname = usePathname(); const pathname = usePathname();
return ( 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"> <div className="flex items-center justify-around h-16 px-2">
{tabs.map((tab) => { {tabs.map((tab) => {
const Icon = tab.icon; const Icon = tab.icon;
@ -44,8 +45,8 @@ export default function TabNavigation() {
className={cn( className={cn(
"flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors", "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
isActive isActive
? "text-primary bg-secondary" ? "text-primary bg-secondary dark:bg-primary/20"
: "text-gray-500 hover:text-primary hover:bg-gray-50" : "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" /> <Icon className="h-6 w-6" />
@ -53,6 +54,9 @@ export default function TabNavigation() {
</Link> </Link>
); );
})} })}
<div className="flex items-center justify-center h-full px-2">
<ThemeToggle />
</div>
</div> </div>
</nav> </nav>
); );

8
components/ui/button.tsx
View File

@ -7,10 +7,10 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", 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", 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", 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", ghost: "hover:bg-secondary hover:text-secondary-foreground dark:hover:bg-gray-800 dark:hover:text-gray-200",
}, },
size: { size: {
default: "h-12 px-6 py-3", default: "h-12 px-6 py-3",

4
components/ui/card.tsx
View File

@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}
@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<p <p
ref={ref} ref={ref}
className={cn("text-sm text-gray-600", className)} className={cn("text-sm text-gray-600 dark:text-gray-400", className)}
{...props} {...props}
/> />
)); ));

11
package-lock.json generated
View File

@ -15,6 +15,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.460.0", "lucide-react": "^0.460.0",
"next": "^14.2.33", "next": "^14.2.33",
"next-themes": "^0.4.6",
"qrcode.react": "^4.2.0", "qrcode.react": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^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": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.460.0", "lucide-react": "^0.460.0",
"next": "^14.2.33", "next": "^14.2.33",
"next-themes": "^0.4.6",
"qrcode.react": "^4.2.0", "qrcode.react": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",

16
tailwind.config.ts
View File

@ -17,10 +17,20 @@ const config: Config = {
secondary: { secondary: {
DEFAULT: "#ECFCCB", DEFAULT: "#ECFCCB",
foreground: "#0E7490", 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: { borderRadius: {
xl: "1rem", xl: "1rem",