feat: add reusable frontend components for admin, dashboard, and tag management

Implemented reusable components:
- `TagSelector`: a customizable tag selection control with asynchronous mock data loading.
- `AuthLoading`: a loading state wrapper for authentication processes.
- `AdminLayout` and `DashboardLayout`: layouts with navigation and user management features.
- `ThemeProvider`: supports dynamic theme toggling.
This commit is contained in:
Mathis H (Avnyr) 2025-05-16 14:42:58 +02:00
parent cf292de428
commit 753669c622
5 changed files with 559 additions and 0 deletions

View File

@ -0,0 +1,140 @@
"use client";
import { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
Users,
Tags,
Settings,
LogOut,
Sun,
Moon,
Shield,
BarChart4
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { useTheme } from "next-themes";
interface AdminLayoutProps {
children: ReactNode;
}
export function AdminLayout({ children }: AdminLayoutProps) {
const pathname = usePathname();
const { theme, setTheme } = useTheme();
const navigation = [
{
name: "Tableau de bord",
href: "/admin",
icon: LayoutDashboard,
},
{
name: "Utilisateurs",
href: "/admin/users",
icon: Users,
},
{
name: "Tags globaux",
href: "/admin/tags",
icon: Tags,
},
{
name: "Statistiques",
href: "/admin/stats",
icon: BarChart4,
},
{
name: "Paramètres système",
href: "/admin/settings",
icon: Settings,
},
];
return (
<SidebarProvider>
<div className="flex min-h-screen">
<Sidebar>
<SidebarHeader className="flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 px-2">
<Shield className="h-5 w-5 text-primary" />
<span className="text-xl font-bold">Admin</span>
</Link>
<SidebarTrigger />
</SidebarHeader>
<SidebarContent>
<SidebarMenu>
{navigation.map((item) => (
<SidebarMenuItem key={item.href}>
<SidebarMenuButton
asChild
isActive={pathname === item.href}
tooltip={item.name}
>
<Link href={item.href} className="flex items-center">
<item.icon className="mr-2 h-5 w-5" />
<span>{item.name}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarContent>
<SidebarFooter>
<div className="flex flex-col gap-2 p-2">
<Button
variant="outline"
className="w-full justify-start"
asChild
>
<Link href="/dashboard">
<Users className="mr-2 h-5 w-5" />
Mode utilisateur
</Link>
</Button>
</div>
<div className="flex items-center justify-between px-4 py-2">
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle theme"
>
{theme === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Logout"
asChild
>
<Link href="/auth/logout">
<LogOut className="h-5 w-5" />
</Link>
</Button>
</div>
</SidebarFooter>
</Sidebar>
<main className="flex-1 p-4 sm:p-6">{children}</main>
</div>
</SidebarProvider>
);
}

View File

@ -0,0 +1,24 @@
"use client";
import { useAuth } from "@/lib/auth-context";
import { Loader2 } from "lucide-react";
interface AuthLoadingProps {
children: React.ReactNode;
}
export function AuthLoading({ children }: AuthLoadingProps) {
const { isLoading } = useAuth();
if (isLoading) {
return (
<div className="flex min-h-screen flex-col items-center justify-center p-4 text-center">
<Loader2 className="mb-4 h-8 w-8 animate-spin text-primary" />
<h1 className="mb-2 text-xl font-semibold">Chargement...</h1>
<p className="text-muted-foreground">Veuillez patienter pendant que nous vérifions votre authentification.</p>
</div>
);
}
return <>{children}</>;
}

View File

@ -0,0 +1,168 @@
"use client";
import { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
Users,
FolderKanban,
Tags,
Settings,
LogOut,
Sun,
Moon,
Shield,
User
} from "lucide-react";
import { useAuth } from "@/lib/auth-context";
import { Button } from "@/components/ui/button";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { useTheme } from "next-themes";
interface DashboardLayoutProps {
children: ReactNode;
}
export function DashboardLayout({ children }: DashboardLayoutProps) {
const pathname = usePathname();
const { theme, setTheme } = useTheme();
const { user, logout } = useAuth();
const navigation = [
{
name: "Tableau de bord",
href: "/dashboard",
icon: LayoutDashboard,
},
{
name: "Projets",
href: "/projects",
icon: FolderKanban,
},
{
name: "Personnes",
href: "/persons",
icon: Users,
},
{
name: "Tags",
href: "/tags",
icon: Tags,
},
{
name: "Paramètres",
href: "/settings",
icon: Settings,
},
];
return (
<SidebarProvider>
<div className="flex min-h-screen">
<Sidebar>
<SidebarHeader className="flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 px-2">
<span className="text-xl font-bold">Groupes</span>
</Link>
<SidebarTrigger />
</SidebarHeader>
<SidebarContent>
<SidebarMenu>
{navigation.map((item) => (
<SidebarMenuItem key={item.href}>
<SidebarMenuButton
asChild
isActive={pathname === item.href}
tooltip={item.name}
>
<Link href={item.href} className="flex items-center">
<item.icon className="mr-2 h-5 w-5" />
<span>{item.name}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarContent>
<SidebarFooter>
{/* User info */}
{user && (
<div className="flex items-center gap-3 p-4 border-b">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shrink-0">
{user.avatar ? (
<img
src={user.avatar}
alt={user.name}
className="h-8 w-8 rounded-full object-cover"
/>
) : (
<User className="h-4 w-4" />
)}
</div>
<div className="flex flex-col gap-0.5 min-w-0">
<span className="text-sm font-medium truncate">{user.name}</span>
<span className="text-xs text-muted-foreground">{user.role}</span>
</div>
</div>
)}
{/* Admin button */}
{user && user.role === 'ADMIN' && (
<div className="flex flex-col p-3">
<Button
variant="outline"
className="w-full justify-start"
asChild
>
<Link href="/admin" className="flex items-center">
<Shield className="mr-2 h-5 w-5" />
<span className="truncate">Mode administrateur</span>
</Link>
</Button>
</div>
)}
{/* Theme and logout buttons */}
<div className="flex items-center justify-between gap-2 px-4 py-3 mt-auto">
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle theme"
className="flex items-center justify-center"
>
{theme === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Logout"
onClick={() => logout()}
className="flex items-center justify-center"
>
<LogOut className="h-5 w-5" />
</Button>
</div>
</SidebarFooter>
</Sidebar>
<main className="flex-1 p-4 sm:p-6">{children}</main>
</div>
</SidebarProvider>
);
}

View File

@ -0,0 +1,218 @@
"use client";
import { useState, useEffect } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Check, ChevronsUpDown, X } from "lucide-react";
import { cn } from "@/lib/utils";
// Map color names to Tailwind classes
const colorMap: Record<string, string> = {
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
purple: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
pink: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
orange: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
amber: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
};
export interface Tag {
id: number;
name: string;
description: string;
color: string;
}
interface TagSelectorProps {
selectedTags: Tag[];
onChange: (tags: Tag[]) => void;
placeholder?: string;
disabled?: boolean;
className?: string;
}
export function TagSelector({
selectedTags = [],
onChange,
placeholder = "Sélectionner des tags...",
disabled = false,
className,
}: TagSelectorProps) {
const [open, setOpen] = useState(false);
const [tags, setTags] = useState<Tag[]>([]);
const [loading, setLoading] = useState(true);
// Mock data for tags - in a real app, this would be fetched from an API
useEffect(() => {
const fetchTags = async () => {
setLoading(true);
try {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 500));
// Mock data
const mockTags = [
{
id: 1,
name: "Frontend",
description: "Développement frontend",
color: "blue",
},
{
id: 2,
name: "Backend",
description: "Développement backend",
color: "green",
},
{
id: 3,
name: "Fullstack",
description: "Développement fullstack",
color: "purple",
},
{
id: 4,
name: "UX/UI",
description: "Design UX/UI",
color: "pink",
},
{
id: 5,
name: "DevOps",
description: "Infrastructure et déploiement",
color: "orange",
},
{
id: 6,
name: "Junior",
description: "Niveau junior",
color: "yellow",
},
{
id: 7,
name: "Medior",
description: "Niveau intermédiaire",
color: "amber",
},
{
id: 8,
name: "Senior",
description: "Niveau senior",
color: "red",
},
];
setTags(mockTags);
} catch (error) {
console.error("Error fetching tags:", error);
} finally {
setLoading(false);
}
};
fetchTags();
}, []);
const handleSelect = (tag: Tag) => {
const isSelected = selectedTags.some(t => t.id === tag.id);
if (isSelected) {
onChange(selectedTags.filter(t => t.id !== tag.id));
} else {
onChange([...selectedTags, tag]);
}
};
const handleRemove = (tagId: number) => {
onChange(selectedTags.filter(tag => tag.id !== tagId));
};
return (
<div className={cn("space-y-2", className)}>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full justify-between"
disabled={disabled || loading}
>
{selectedTags.length > 0
? `${selectedTags.length} tag${selectedTags.length > 1 ? "s" : ""} sélectionné${selectedTags.length > 1 ? "s" : ""}`
: placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<Command>
<CommandInput placeholder="Rechercher un tag..." />
<CommandEmpty>Aucun tag trouvé.</CommandEmpty>
<CommandGroup className="max-h-64 overflow-auto">
{loading ? (
<div className="flex items-center justify-center p-4">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
) : (
tags.map(tag => (
<CommandItem
key={tag.id}
value={tag.name}
onSelect={() => handleSelect(tag)}
>
<Check
className={cn(
"mr-2 h-4 w-4",
selectedTags.some(t => t.id === tag.id)
? "opacity-100"
: "opacity-0"
)}
/>
<div className="flex items-center gap-2">
<Badge className={colorMap[tag.color]}>
{tag.name}
</Badge>
<span className="text-sm text-muted-foreground">
{tag.description}
</span>
</div>
</CommandItem>
))
)}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
{selectedTags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-2">
{selectedTags.map(tag => (
<Badge
key={tag.id}
className={cn(
colorMap[tag.color],
"flex items-center gap-1 pr-1"
)}
>
{tag.name}
<Button
variant="ghost"
size="icon"
className="h-4 w-4 rounded-full p-0 hover:bg-background/20"
onClick={() => handleRemove(tag.id)}
disabled={disabled}
>
<X className="h-3 w-3" />
<span className="sr-only">Supprimer</span>
</Button>
</Badge>
))}
</div>
)}
</div>
);
}

View File

@ -0,0 +1,9 @@
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}