Avnyr cab80e6aef 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`.
2025-05-16 14:43:14 +02:00

319 lines
9.9 KiB
TypeScript

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