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`.
319 lines
9.9 KiB
TypeScript
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>
|
|
);
|
|
} |