WorkSimplon/brief-20
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dashboard, projects, and persons pages with reusable components

Browse Source 
Implemented the following:
- `DashboardPage`: displays an overview of stats, recent projects, and tabs for future analytics/reports.
- `ProjectsPage` and `PersonsPage`: include searchable tables, actions, and mobile-friendly card views.
- Integrated reusable components like `AuthLoading`, `DropdownMenu`, `Table`, and `Card`.
This commit is contained in:
Mathis H (Avnyr)
2025-05-16 14:43:14 +02:00
parent 753669c622
commit cab80e6aef
31 changed files with 5850 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/admin/layout.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { AdminLayout } from "@/components/admin-layout";
import { AuthLoading } from "@/components/auth-loading";
export default function AdminRootLayout({ children }: { children: React.ReactNode }) {
return (
<AuthLoading>
<AdminLayout>{children}</AdminLayout>
</AuthLoading>
);
}

199
frontend/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,199 @@
"use client";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Users, Shield, Tags, Settings, BarChart4 } from "lucide-react";
import Link from "next/link";
export default function AdminDashboardPage() {
const [activeTab, setActiveTab] = useState("overview");
// Mock data for the admin dashboard
const stats = [
{
title: "Utilisateurs",
value: "24",
description: "Utilisateurs actifs",
icon: Users,
href: "/admin/users",
},
{
title: "Tags globaux",
value: "18",
description: "Tags disponibles",
icon: Tags,
href: "/admin/tags",
},
{
title: "Projets",
value: "32",
description: "Projets créés",
icon: BarChart4,
href: "/admin/stats",
},
{
title: "Paramètres",
value: "7",
description: "Paramètres système",
icon: Settings,
href: "/admin/settings",
},
];
// Mock data for recent activities
const recentActivities = [
{
id: 1,
user: "Jean Dupont",
action: "a créé un nouveau projet",
target: "Formation Dev Web",
date: "2025-05-15T14:32:00",
},
{
id: 2,
user: "Marie Martin",
action: "a modifié un tag global",
target: "Frontend",
date: "2025-05-15T13:45:00",
},
{
id: 3,
user: "Admin",
action: "a ajouté un nouvel utilisateur",
target: "Pierre Durand",
date: "2025-05-15T11:20:00",
},
{
id: 4,
user: "Sophie Lefebvre",
action: "a créé un nouveau groupe",
target: "Groupe A",
date: "2025-05-15T10:15:00",
},
{
id: 5,
user: "Admin",
action: "a modifié les paramètres système",
target: "Paramètres de notification",
date: "2025-05-14T16:30:00",
},
];
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl sm:text-3xl font-bold">Administration</h1>
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
<span className="text-sm text-muted-foreground">Mode administrateur</span>
</div>
</div>
<Tabs defaultValue="overview" className="space-y-4" onValueChange={setActiveTab}>
<TabsList className="w-full flex justify-start overflow-auto">
<TabsTrigger value="overview" className="flex-1 sm:flex-none">Vue d'ensemble</TabsTrigger>
<TabsTrigger value="activity" className="flex-1 sm:flex-none">Activité récente</TabsTrigger>
<TabsTrigger value="system" className="flex-1 sm:flex-none">Système</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-4">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{stats.map((stat, index) => (
<Card key={index}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
<stat.icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stat.value}</div>
<p className="text-xs text-muted-foreground">{stat.description}</p>
<Button variant="link" asChild className="px-0 mt-2">
<Link href={stat.href}>Gérer</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</TabsContent>
<TabsContent value="activity" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Activité récente</CardTitle>
<CardDescription>
Les dernières actions effectuées sur la plateforme
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{recentActivities.map((activity) => (
<div key={activity.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border-b pb-4 last:border-0 last:pb-0">
<div className="space-y-1">
<p className="font-medium">
<span className="font-semibold">{activity.user}</span> {activity.action}{" "}
<span className="font-semibold">{activity.target}</span>
</p>
<p className="text-sm text-muted-foreground">
{new Date(activity.date).toLocaleString("fr-FR", {
dateStyle: "medium",
timeStyle: "short",
})}
</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="system" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Informations système</CardTitle>
<CardDescription>
Informations sur l'état du système
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<p className="text-sm font-medium">Version de l'application</p>
<p className="text-sm text-muted-foreground">v1.0.0</p>
</div>
<div className="space-y-2">
<p className="text-sm font-medium">Dernière mise à jour</p>
<p className="text-sm text-muted-foreground">15 mai 2025</p>
</div>
<div className="space-y-2">
<p className="text-sm font-medium">État du serveur</p>
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<p className="text-sm text-muted-foreground">En ligne</p>
</div>
</div>
<div className="space-y-2">
<p className="text-sm font-medium">Utilisation de la base de données</p>
<p className="text-sm text-muted-foreground">42%</p>
</div>
</div>
<div className="pt-4">
<Button asChild>
<Link href="/admin/settings">
<Settings className="mr-2 h-4 w-4" />
Paramètres système
</Link>
</Button>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
}

581
frontend/app/admin/settings/page.tsx Normal file
View File

@@ -0,0 +1,581 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";
import {
Save,
RefreshCw,
Shield,
Bell,
Mail,
Database,
Server,
FileJson,
Loader2
} from "lucide-react";
export default function AdminSettingsPage() {
const [activeTab, setActiveTab] = useState("general");
const [isLoading, setIsLoading] = useState(false);
// Mock system settings
const systemSettings = {
general: {
siteName: "Application de Création de Groupes",
siteDescription: "Une application web moderne dédiée à la création et à la gestion de groupes",
contactEmail: "admin@example.com",
maxProjectsPerUser: "10",
maxPersonsPerProject: "100",
},
authentication: {
enableGithubAuth: true,
requireEmailVerification: false,
sessionTimeout: "7",
maxLoginAttempts: "5",
passwordMinLength: "8",
},
notifications: {
enableEmailNotifications: true,
enableSystemNotifications: true,
notifyOnNewUser: true,
notifyOnNewProject: false,
adminEmailRecipients: "admin@example.com",
},
maintenance: {
maintenanceMode: false,
maintenanceMessage: "Le site est actuellement en maintenance. Veuillez réessayer plus tard.",
debugMode: false,
logLevel: "error",
},
};
const { register: registerGeneral, handleSubmit: handleSubmitGeneral, formState: { errors: errorsGeneral } } = useForm({
defaultValues: systemSettings.general,
});
const { register: registerAuth, handleSubmit: handleSubmitAuth, formState: { errors: errorsAuth } } = useForm({
defaultValues: systemSettings.authentication,
});
const { register: registerNotif, handleSubmit: handleSubmitNotif, formState: { errors: errorsNotif } } = useForm({
defaultValues: systemSettings.notifications,
});
const { register: registerMaint, handleSubmit: handleSubmitMaint, formState: { errors: errorsMaint } } = useForm({
defaultValues: systemSettings.maintenance,
});
const onSubmitGeneral = async (data: any) => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Paramètres généraux mis à jour avec succès");
};
const onSubmitAuth = async (data: any) => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Paramètres d'authentification mis à jour avec succès");
};
const onSubmitNotif = async (data: any) => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Paramètres de notification mis à jour avec succès");
};
const onSubmitMaint = async (data: any) => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Paramètres de maintenance mis à jour avec succès");
};
const handleExportConfig = async () => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Configuration exportée avec succès");
};
const handleClearCache = async () => {
setIsLoading(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsLoading(false);
toast.success("Cache vidé avec succès");
};
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl sm:text-3xl font-bold">Paramètres système</h1>
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
<span className="text-sm text-muted-foreground">Configuration globale</span>
</div>
</div>
<Tabs defaultValue="general" className="space-y-4" onValueChange={setActiveTab}>
<TabsList className="w-full flex justify-start overflow-auto">
<TabsTrigger value="general" className="flex-1 sm:flex-none">Général</TabsTrigger>
<TabsTrigger value="authentication" className="flex-1 sm:flex-none">Authentification</TabsTrigger>
<TabsTrigger value="notifications" className="flex-1 sm:flex-none">Notifications</TabsTrigger>
<TabsTrigger value="maintenance" className="flex-1 sm:flex-none">Maintenance</TabsTrigger>
</TabsList>
<TabsContent value="general" className="space-y-4">
<Card>
<form onSubmit={handleSubmitGeneral(onSubmitGeneral)}>
<CardHeader>
<CardTitle>Paramètres généraux</CardTitle>
<CardDescription>
Configurez les paramètres généraux de l'application
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="siteName">Nom du site</Label>
<Input
id="siteName"
{...registerGeneral("siteName", { required: "Le nom du site est requis" })}
/>
{errorsGeneral.siteName && (
<p className="text-sm text-destructive">{errorsGeneral.siteName.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="contactEmail">Email de contact</Label>
<Input
id="contactEmail"
type="email"
{...registerGeneral("contactEmail", {
required: "L'email de contact est requis",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Adresse email invalide"
}
})}
/>
{errorsGeneral.contactEmail && (
<p className="text-sm text-destructive">{errorsGeneral.contactEmail.message as string}</p>
)}
</div>
</div>
<div className="space-y-2">
<Label htmlFor="siteDescription">Description du site</Label>
<Textarea
id="siteDescription"
rows={3}
{...registerGeneral("siteDescription")}
/>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="maxProjectsPerUser">Nombre max. de projets par utilisateur</Label>
<Input
id="maxProjectsPerUser"
type="number"
{...registerGeneral("maxProjectsPerUser", {
required: "Ce champ est requis",
min: { value: 1, message: "La valeur minimale est 1" }
})}
/>
{errorsGeneral.maxProjectsPerUser && (
<p className="text-sm text-destructive">{errorsGeneral.maxProjectsPerUser.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="maxPersonsPerProject">Nombre max. de personnes par projet</Label>
<Input
id="maxPersonsPerProject"
type="number"
{...registerGeneral("maxPersonsPerProject", {
required: "Ce champ est requis",
min: { value: 1, message: "La valeur minimale est 1" }
})}
/>
{errorsGeneral.maxPersonsPerProject && (
<p className="text-sm text-destructive">{errorsGeneral.maxPersonsPerProject.message as string}</p>
)}
</div>
</div>
</CardContent>
<CardFooter>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Enregistrement...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
Enregistrer les modifications
</>
)}
</Button>
</CardFooter>
</form>
</Card>
</TabsContent>
<TabsContent value="authentication" className="space-y-4">
<Card>
<form onSubmit={handleSubmitAuth(onSubmitAuth)}>
<CardHeader>
<CardTitle>Paramètres d'authentification</CardTitle>
<CardDescription>
Configurez les options d'authentification et de sécurité
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="enableGithubAuth">Authentification GitHub</Label>
<p className="text-sm text-muted-foreground">
Activer l'authentification via GitHub OAuth
</p>
</div>
<Switch
id="enableGithubAuth"
{...registerAuth("enableGithubAuth")}
defaultChecked={systemSettings.authentication.enableGithubAuth}
/>
</div>
<Separator />
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="requireEmailVerification">Vérification d'email</Label>
<p className="text-sm text-muted-foreground">
Exiger la vérification de l'email lors de l'inscription
</p>
</div>
<Switch
id="requireEmailVerification"
{...registerAuth("requireEmailVerification")}
defaultChecked={systemSettings.authentication.requireEmailVerification}
/>
</div>
<Separator />
<div className="grid gap-4 sm:grid-cols-3">
<div className="space-y-2">
<Label htmlFor="sessionTimeout">Durée de session (jours)</Label>
<Input
id="sessionTimeout"
type="number"
{...registerAuth("sessionTimeout", {
required: "Ce champ est requis",
min: { value: 1, message: "La valeur minimale est 1" }
})}
/>
{errorsAuth.sessionTimeout && (
<p className="text-sm text-destructive">{errorsAuth.sessionTimeout.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="maxLoginAttempts">Tentatives de connexion max.</Label>
<Input
id="maxLoginAttempts"
type="number"
{...registerAuth("maxLoginAttempts", {
required: "Ce champ est requis",
min: { value: 1, message: "La valeur minimale est 1" }
})}
/>
{errorsAuth.maxLoginAttempts && (
<p className="text-sm text-destructive">{errorsAuth.maxLoginAttempts.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="passwordMinLength">Longueur min. du mot de passe</Label>
<Input
id="passwordMinLength"
type="number"
{...registerAuth("passwordMinLength", {
required: "Ce champ est requis",
min: { value: 6, message: "La valeur minimale est 6" }
})}
/>
{errorsAuth.passwordMinLength && (
<p className="text-sm text-destructive">{errorsAuth.passwordMinLength.message as string}</p>
)}
</div>
</div>
</div>
</CardContent>
<CardFooter>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Enregistrement...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
Enregistrer les modifications
</>
)}
</Button>
</CardFooter>
</form>
</Card>
</TabsContent>
<TabsContent value="notifications" className="space-y-4">
<Card>
<form onSubmit={handleSubmitNotif(onSubmitNotif)}>
<CardHeader>
<CardTitle>Paramètres de notification</CardTitle>
<CardDescription>
Configurez les options de notification système et email
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="enableEmailNotifications">Notifications par email</Label>
<p className="text-sm text-muted-foreground">
Activer l'envoi de notifications par email
</p>
</div>
<Switch
id="enableEmailNotifications"
{...registerNotif("enableEmailNotifications")}
defaultChecked={systemSettings.notifications.enableEmailNotifications}
/>
</div>
<Separator />
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="enableSystemNotifications">Notifications système</Label>
<p className="text-sm text-muted-foreground">
Activer les notifications dans l'application
</p>
</div>
<Switch
id="enableSystemNotifications"
{...registerNotif("enableSystemNotifications")}
defaultChecked={systemSettings.notifications.enableSystemNotifications}
/>
</div>
<Separator />
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="notifyOnNewUser">Notification nouvel utilisateur</Label>
<p className="text-sm text-muted-foreground">
Notifier les administrateurs lors de l'inscription d'un nouvel utilisateur
</p>
</div>
<Switch
id="notifyOnNewUser"
{...registerNotif("notifyOnNewUser")}
defaultChecked={systemSettings.notifications.notifyOnNewUser}
/>
</div>
<Separator />
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="notifyOnNewProject">Notification nouveau projet</Label>
<p className="text-sm text-muted-foreground">
Notifier les administrateurs lors de la création d'un nouveau projet
</p>
</div>
<Switch
id="notifyOnNewProject"
{...registerNotif("notifyOnNewProject")}
defaultChecked={systemSettings.notifications.notifyOnNewProject}
/>
</div>
<Separator />
<div className="space-y-2">
<Label htmlFor="adminEmailRecipients">Destinataires des emails administratifs</Label>
<Input
id="adminEmailRecipients"
{...registerNotif("adminEmailRecipients", {
required: "Ce champ est requis",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Adresse email invalide"
}
})}
/>
<p className="text-xs text-muted-foreground">
Séparez les adresses email par des virgules pour plusieurs destinataires
</p>
{errorsNotif.adminEmailRecipients && (
<p className="text-sm text-destructive">{errorsNotif.adminEmailRecipients.message as string}</p>
)}
</div>
</div>
</CardContent>
<CardFooter>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Enregistrement...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
Enregistrer les modifications
</>
)}
</Button>
</CardFooter>
</form>
</Card>
</TabsContent>
<TabsContent value="maintenance" className="space-y-4">
<Card>
<form onSubmit={handleSubmitMaint(onSubmitMaint)}>
<CardHeader>
<CardTitle>Maintenance et débogage</CardTitle>
<CardDescription>
Configurez les options de maintenance et de débogage
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="maintenanceMode" className="font-semibold text-destructive">Mode maintenance</Label>
<p className="text-sm text-muted-foreground">
Activer le mode maintenance (le site sera inaccessible aux utilisateurs)
</p>
</div>
<Switch
id="maintenanceMode"
{...registerMaint("maintenanceMode")}
defaultChecked={systemSettings.maintenance.maintenanceMode}
/>
</div>
<div className="space-y-2">
<Label htmlFor="maintenanceMessage">Message de maintenance</Label>
<Textarea
id="maintenanceMessage"
rows={3}
{...registerMaint("maintenanceMessage")}
/>
</div>
<Separator />
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="debugMode">Mode débogage</Label>
<p className="text-sm text-muted-foreground">
Activer le mode débogage (affiche des informations supplémentaires)
</p>
</div>
<Switch
id="debugMode"
{...registerMaint("debugMode")}
defaultChecked={systemSettings.maintenance.debugMode}
/>
</div>
<div className="space-y-2">
<Label htmlFor="logLevel">Niveau de journalisation</Label>
<select
id="logLevel"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
{...registerMaint("logLevel")}
>
<option value="error">Error</option>
<option value="warn">Warning</option>
<option value="info">Info</option>
<option value="debug">Debug</option>
<option value="trace">Trace</option>
</select>
</div>
<Separator />
<div className="grid gap-4 sm:grid-cols-2">
<div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleExportConfig}
disabled={isLoading}
>
<FileJson className="mr-2 h-4 w-4" />
Exporter la configuration
</Button>
</div>
<div>
<Button
type="button"
variant="outline"
className="w-full"
onClick={handleClearCache}
disabled={isLoading}
>
<RefreshCw className="mr-2 h-4 w-4" />
Vider le cache
</Button>
</div>
</div>
</div>
</CardContent>
<CardFooter>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Enregistrement...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
Enregistrer les modifications
</>
)}
</Button>
</CardFooter>
</form>
</Card>
</TabsContent>
</Tabs>
</div>
);
}

319
frontend/app/admin/stats/page.tsx Normal file
View File

@@ -0,0 +1,319 @@
"use client";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
PieChart,
Pie,
Cell,
LineChart,
Line
} from "recharts";
import {
BarChart4,
Users,
FolderKanban,
Tags,
Calendar,
Download
} from "lucide-react";
import { Button } from "@/components/ui/button";
// Mock data for charts
const userRegistrationData = [
{ name: "Jan", count: 4 },
{ name: "Fév", count: 3 },
{ name: "Mar", count: 5 },
{ name: "Avr", count: 7 },
{ name: "Mai", count: 2 },
{ name: "Juin", count: 6 },
{ name: "Juil", count: 8 },
{ name: "Août", count: 9 },
{ name: "Sep", count: 11 },
{ name: "Oct", count: 13 },
{ name: "Nov", count: 7 },
{ name: "Déc", count: 5 },
];
const projectCreationData = [
{ name: "Jan", count: 2 },
{ name: "Fév", count: 4 },
{ name: "Mar", count: 3 },
{ name: "Avr", count: 5 },
{ name: "Mai", count: 1 },
{ name: "Juin", count: 3 },
{ name: "Juil", count: 6 },
{ name: "Août", count: 4 },
{ name: "Sep", count: 7 },
{ name: "Oct", count: 8 },
{ name: "Nov", count: 5 },
{ name: "Déc", count: 3 },
];
const userRoleData = [
{ name: "Administrateurs", value: 3 },
{ name: "Utilisateurs standard", value: 21 },
];
const tagUsageData = [
{ name: "Frontend", value: 12 },
{ name: "Backend", value: 8 },
{ name: "Fullstack", value: 5 },
{ name: "UX/UI", value: 3 },
{ name: "DevOps", value: 2 },
];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
const dailyActiveUsersData = [
{ name: "Lun", users: 15 },
{ name: "Mar", users: 18 },
{ name: "Mer", users: 22 },
{ name: "Jeu", users: 19 },
{ name: "Ven", users: 23 },
{ name: "Sam", users: 12 },
{ name: "Dim", users: 10 },
];
export default function AdminStatsPage() {
const [activeTab, setActiveTab] = useState("overview");
// Mock statistics
const stats = [
{
title: "Utilisateurs",
value: "24",
change: "+12%",
trend: "up",
icon: Users,
},
{
title: "Projets",
value: "32",
change: "+8%",
trend: "up",
icon: FolderKanban,
},
{
title: "Groupes créés",
value: "128",
change: "+15%",
trend: "up",
icon: Users,
},
{
title: "Tags utilisés",
value: "18",
change: "+5%",
trend: "up",
icon: Tags,
},
];
const handleExportStats = () => {
alert("Statistiques exportées en CSV");
};
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl sm:text-3xl font-bold">Statistiques</h1>
<Button onClick={handleExportStats} className="w-full sm:w-auto">
<Download className="mr-2 h-4 w-4" />
Exporter en CSV
</Button>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{stats.map((stat, index) => (
<Card key={index}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
<stat.icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stat.value}</div>
<p className={`text-xs ${stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}`}>
{stat.change} depuis le mois dernier
</p>
</CardContent>
</Card>
))}
</div>
<Tabs defaultValue="users" className="space-y-4" onValueChange={setActiveTab}>
<TabsList className="w-full flex justify-start overflow-auto">
<TabsTrigger value="users" className="flex-1 sm:flex-none">Utilisateurs</TabsTrigger>
<TabsTrigger value="projects" className="flex-1 sm:flex-none">Projets</TabsTrigger>
<TabsTrigger value="tags" className="flex-1 sm:flex-none">Tags</TabsTrigger>
<TabsTrigger value="activity" className="flex-1 sm:flex-none">Activité</TabsTrigger>
</TabsList>
<TabsContent value="users" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Inscriptions d'utilisateurs par mois</CardTitle>
<CardDescription>
Nombre de nouveaux utilisateurs inscrits par mois
</CardDescription>
</CardHeader>
<CardContent className="h-[300px] sm:h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={userRegistrationData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="#8884d8" name="Utilisateurs" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Répartition des rôles utilisateurs</CardTitle>
<CardDescription>
Proportion d'administrateurs et d'utilisateurs standard
</CardDescription>
</CardHeader>
<CardContent className="h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={userRoleData}
cx="50%"
cy="50%"
labelLine={true}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{userRoleData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
<Legend />
</PieChart>
</ResponsiveContainer>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="projects" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Création de projets par mois</CardTitle>
<CardDescription>
Nombre de nouveaux projets créés par mois
</CardDescription>
</CardHeader>
<CardContent className="h-[300px] sm:h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={projectCreationData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="#00C49F" name="Projets" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="tags" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Utilisation des tags</CardTitle>
<CardDescription>
Nombre d'utilisations par tag
</CardDescription>
</CardHeader>
<CardContent className="h-[300px] sm:h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={tagUsageData}
margin={{
top: 5,
right: 30,
left: 60,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis type="number" />
<YAxis dataKey="name" type="category" />
<Tooltip />
<Legend />
<Bar dataKey="value" fill="#FFBB28" name="Utilisations" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="activity" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Utilisateurs actifs par jour</CardTitle>
<CardDescription>
Nombre d'utilisateurs actifs par jour de la semaine
</CardDescription>
</CardHeader>
<CardContent className="h-[300px] sm:h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={dailyActiveUsersData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="users" stroke="#FF8042" name="Utilisateurs actifs" />
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
}

278
frontend/app/admin/tags/page.tsx Normal file
View File

@@ -0,0 +1,278 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {
PlusCircle,
Search,
MoreHorizontal,
Pencil,
Trash2,
Users,
CircleDot
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
export default function AdminTagsPage() {
const [searchQuery, setSearchQuery] = useState("");
// Mock data for global tags
const tags = [
{
id: 1,
name: "Frontend",
description: "Développement frontend",
color: "blue",
usageCount: 12,
global: true,
createdBy: "Admin",
},
{
id: 2,
name: "Backend",
description: "Développement backend",
color: "green",
usageCount: 8,
global: true,
createdBy: "Admin",
},
{
id: 3,
name: "Fullstack",
description: "Développement fullstack",
color: "purple",
usageCount: 5,
global: true,
createdBy: "Admin",
},
{
id: 4,
name: "UX/UI",
description: "Design UX/UI",
color: "pink",
usageCount: 3,
global: true,
createdBy: "Marie Martin",
},
{
id: 5,
name: "DevOps",
description: "Infrastructure et déploiement",
color: "orange",
usageCount: 2,
global: true,
createdBy: "Thomas Bernard",
},
{
id: 6,
name: "Junior",
description: "Niveau junior",
color: "yellow",
usageCount: 7,
global: true,
createdBy: "Admin",
},
{
id: 7,
name: "Medior",
description: "Niveau intermédiaire",
color: "amber",
usageCount: 5,
global: true,
createdBy: "Admin",
},
{
id: 8,
name: "Senior",
description: "Niveau senior",
color: "red",
usageCount: 6,
global: true,
createdBy: "Admin",
},
];
// 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",
};
// Filter tags based on search query
const filteredTags = tags.filter(
(tag) =>
tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
tag.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
tag.createdBy.toLowerCase().includes(searchQuery.toLowerCase())
);
const handleDeleteTag = (tagId: number) => {
toast.success(`Tag #${tagId} supprimé avec succès`);
};
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl sm:text-3xl font-bold">Tags globaux</h1>
<Button asChild className="w-full sm:w-auto">
<Link href="/admin/tags/new">
<PlusCircle className="mr-2 h-4 w-4" />
Nouveau tag global
</Link>
</Button>
</div>
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Rechercher des tags..."
className="pl-8"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div>
{/* Mobile card view */}
<div className="grid gap-4 sm:hidden">
{filteredTags.length === 0 ? (
<div className="rounded-md border p-6 text-center text-muted-foreground">
Aucun tag trouvé.
</div>
) : (
filteredTags.map((tag) => (
<div key={tag.id} className="rounded-md border p-4">
<div className="flex items-center justify-between">
<Badge className={colorMap[tag.color]}>
{tag.name}
</Badge>
<Badge variant="outline" className="text-xs">
{tag.usageCount} utilisations
</Badge>
</div>
<div className="mt-2">
<p className="text-sm text-muted-foreground">{tag.description}</p>
</div>
<div className="mt-2 text-xs text-muted-foreground">
Créé par: {tag.createdBy}
</div>
<div className="mt-4 flex justify-end gap-2">
<Button variant="outline" size="sm" asChild>
<Link href={`/admin/tags/${tag.id}/edit`}>
<Pencil className="mr-2 h-4 w-4" />
Modifier
</Link>
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleDeleteTag(tag.id)}
className="text-destructive hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
))
)}
</div>
{/* Desktop table view */}
<div className="rounded-md border hidden sm:block overflow-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Tag</TableHead>
<TableHead>Description</TableHead>
<TableHead>Utilisations</TableHead>
<TableHead>Créé par</TableHead>
<TableHead className="w-[100px]">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredTags.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="h-24 text-center">
Aucun tag trouvé.
</TableCell>
</TableRow>
) : (
filteredTags.map((tag) => (
<TableRow key={tag.id}>
<TableCell>
<Badge className={colorMap[tag.color]}>
{tag.name}
</Badge>
</TableCell>
<TableCell>{tag.description}</TableCell>
<TableCell>{tag.usageCount}</TableCell>
<TableCell>{tag.createdBy}</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href={`/admin/tags/${tag.id}/edit`} className="flex items-center">
<Pencil className="mr-2 h-4 w-4" />
<span>Modifier</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/admin/tags/${tag.id}/usage`} className="flex items-center">
<Users className="mr-2 h-4 w-4" />
<span>Voir les utilisations</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteTag(tag.id)}
className="text-destructive focus:text-destructive flex items-center"
>
<Trash2 className="mr-2 h-4 w-4" />
<span>Supprimer</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div>
);
}

301
frontend/app/admin/users/page.tsx Normal file
View File

@@ -0,0 +1,301 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {
PlusCircle,
Search,
MoreHorizontal,
Pencil,
Trash2,
Shield,
UserCog
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
export default function AdminUsersPage() {
const [searchQuery, setSearchQuery] = useState("");
// Mock data for users
const users = [
{
id: 1,
name: "Jean Dupont",
email: "jean.dupont@example.com",
role: "user",
status: "active",
lastLogin: "2025-05-15T14:32:00",
projects: 3,
},
{
id: 2,
name: "Marie Martin",
email: "marie.martin@example.com",
role: "admin",
status: "active",
lastLogin: "2025-05-15T13:45:00",
projects: 5,
},
{
id: 3,
name: "Pierre Durand",
email: "pierre.durand@example.com",
role: "user",
status: "inactive",
lastLogin: "2025-05-10T11:20:00",
projects: 1,
},
{
id: 4,
name: "Sophie Lefebvre",
email: "sophie.lefebvre@example.com",
role: "user",
status: "active",
lastLogin: "2025-05-15T10:15:00",
projects: 2,
},
{
id: 5,
name: "Thomas Bernard",
email: "thomas.bernard@example.com",
role: "admin",
status: "active",
lastLogin: "2025-05-14T16:30:00",
projects: 0,
},
];
// Filter users based on search query
const filteredUsers = users.filter(
(user) =>
user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
user.role.toLowerCase().includes(searchQuery.toLowerCase())
);
const handleDeleteUser = (userId: number) => {
toast.success(`Utilisateur #${userId} supprimé avec succès`);
};
const handleChangeRole = (userId: number, newRole: string) => {
toast.success(`Rôle de l'utilisateur #${userId} changé en ${newRole}`);
};
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl sm:text-3xl font-bold">Gestion des utilisateurs</h1>
<Button asChild className="w-full sm:w-auto">
<Link href="/admin/users/new">
<PlusCircle className="mr-2 h-4 w-4" />
Nouvel utilisateur
</Link>
</Button>
</div>
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Rechercher des utilisateurs..."
className="pl-8"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div>
{/* Mobile card view */}
<div className="grid gap-4 sm:hidden">
{filteredUsers.length === 0 ? (
<div className="rounded-md border p-6 text-center text-muted-foreground">
Aucun utilisateur trouvé.
</div>
) : (
filteredUsers.map((user) => (
<div key={user.id} className="rounded-md border p-4">
<div className="flex items-center justify-between">
<div className="flex flex-col">
<span className="font-medium">{user.name}</span>
<span className="text-sm text-muted-foreground">{user.email}</span>
</div>
<Badge variant={user.role === "admin" ? "default" : "outline"}>
{user.role === "admin" ? (
<Shield className="mr-1 h-3 w-3" />
) : null}
{user.role === "admin" ? "Admin" : "Utilisateur"}
</Badge>
</div>
<div className="mt-2 grid grid-cols-2 gap-2 text-sm">
<div>
<span className="text-muted-foreground">Statut: </span>
<Badge variant={user.status === "active" ? "secondary" : "destructive"} className="ml-1">
{user.status === "active" ? "Actif" : "Inactif"}
</Badge>
</div>
<div>
<span className="text-muted-foreground">Projets: </span>
<span>{user.projects}</span>
</div>
<div className="col-span-2">
<span className="text-muted-foreground">Dernière connexion: </span>
<span>
{new Date(user.lastLogin).toLocaleString("fr-FR", {
dateStyle: "medium",
timeStyle: "short",
})}
</span>
</div>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button variant="outline" size="sm" asChild>
<Link href={`/admin/users/${user.id}`}>
<UserCog className="mr-2 h-4 w-4" />
Gérer
</Link>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href={`/admin/users/${user.id}/edit`}>
<Pencil className="mr-2 h-4 w-4" />
Modifier
</Link>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleChangeRole(user.id, user.role === "admin" ? "user" : "admin")}
>
<Shield className="mr-2 h-4 w-4" />
{user.role === "admin" ? "Retirer les droits admin" : "Promouvoir admin"}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteUser(user.id)}
className="text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
Supprimer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
))
)}
</div>
{/* Desktop table view */}
<div className="rounded-md border hidden sm:block overflow-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Nom</TableHead>
<TableHead>Email</TableHead>
<TableHead>Rôle</TableHead>
<TableHead>Statut</TableHead>
<TableHead>Dernière connexion</TableHead>
<TableHead>Projets</TableHead>
<TableHead className="w-[100px]">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredUsers.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="h-24 text-center">
Aucun utilisateur trouvé.
</TableCell>
</TableRow>
) : (
filteredUsers.map((user) => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
<Badge variant={user.role === "admin" ? "default" : "outline"}>
{user.role === "admin" ? (
<Shield className="mr-1 h-3 w-3" />
) : null}
{user.role === "admin" ? "Admin" : "Utilisateur"}
</Badge>
</TableCell>
<TableCell>
<Badge variant={user.status === "active" ? "secondary" : "destructive"}>
{user.status === "active" ? "Actif" : "Inactif"}
</Badge>
</TableCell>
<TableCell>
{new Date(user.lastLogin).toLocaleString("fr-FR", {
dateStyle: "medium",
timeStyle: "short",
})}
</TableCell>
<TableCell>{user.projects}</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href={`/admin/users/${user.id}/edit`} className="flex items-center">
<Pencil className="mr-2 h-4 w-4" />
<span>Modifier</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleChangeRole(user.id, user.role === "admin" ? "user" : "admin")}
className="flex items-center"
>
<Shield className="mr-2 h-4 w-4" />
<span>{user.role === "admin" ? "Retirer les droits admin" : "Promouvoir admin"}</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteUser(user.id)}
className="text-destructive focus:text-destructive flex items-center"
>
<Trash2 className="mr-2 h-4 w-4" />
<span>Supprimer</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div>
);
}