feat: add dashboard, projects, and persons pages with reusable components
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:
319
frontend/app/admin/stats/page.tsx
Normal file
319
frontend/app/admin/stats/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user