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:
parent
cf292de428
commit
753669c622
140
frontend/components/admin-layout.tsx
Normal file
140
frontend/components/admin-layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
24
frontend/components/auth-loading.tsx
Normal file
24
frontend/components/auth-loading.tsx
Normal 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}</>;
|
||||
}
|
||||
168
frontend/components/dashboard-layout.tsx
Normal file
168
frontend/components/dashboard-layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
218
frontend/components/tag-selector.tsx
Normal file
218
frontend/components/tag-selector.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
9
frontend/components/theme-provider.tsx
Normal file
9
frontend/components/theme-provider.tsx
Normal 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>;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user