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/dashboard/layout.tsx Normal file
View File

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

176
frontend/app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,176 @@
"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 { PlusCircle, Users, FolderKanban, Tags } from "lucide-react";
import Link from "next/link";
export default function DashboardPage() {
const [activeTab, setActiveTab] = useState("overview");
// Mock data for the dashboard
const stats = [
{
title: "Projets",
value: "5",
description: "Projets actifs",
icon: FolderKanban,
href: "/projects",
},
{
title: "Personnes",
value: "42",
description: "Personnes enregistrées",
icon: Users,
href: "/persons",
},
{
title: "Tags",
value: "12",
description: "Tags disponibles",
icon: Tags,
href: "/tags",
},
];
// Mock data for recent projects
const recentProjects = [
{
id: 1,
name: "Projet Formation Dev Web",
description: "Création de groupes pour la formation développement web",
date: "2025-05-15",
groups: 4,
persons: 16,
},
{
id: 2,
name: "Projet Hackathon",
description: "Équipes pour le hackathon annuel",
date: "2025-05-10",
groups: 8,
persons: 32,
},
{
id: 3,
name: "Projet Workshop UX/UI",
description: "Groupes pour l'atelier UX/UI",
date: "2025-05-05",
groups: 5,
persons: 20,
},
];
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">Tableau de bord</h1>
<Button asChild className="w-full sm:w-auto">
<Link href="/projects/new">
<PlusCircle className="mr-2 h-4 w-4" />
Nouveau projet
</Link>
</Button>
</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="analytics" className="flex-1 sm:flex-none">Analytiques</TabsTrigger>
<TabsTrigger value="reports" className="flex-1 sm:flex-none">Rapports</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-4">
<div className="grid gap-4 md:grid-cols-3">
{stats.map((stat, index) => (
<Card key={index}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
<div className="flex items-center justify-center">
<stat.icon className="h-4 w-4 text-muted-foreground" />
</div>
</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}>Voir tous</Link>
</Button>
</CardContent>
</Card>
))}
</div>
<div className="grid gap-4">
<Card>
<CardHeader>
<CardTitle>Projets récents</CardTitle>
<CardDescription>
Vous avez {recentProjects.length} projets récents
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
{recentProjects.map((project) => (
<div key={project.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b pb-4 last:border-0 last:pb-0">
<div className="flex flex-col gap-2 min-w-0">
<div className="flex flex-col gap-1">
<p className="font-medium truncate">{project.name}</p>
<p className="text-sm text-muted-foreground line-clamp-2">{project.description}</p>
</div>
<div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
<span>{new Date(project.date).toLocaleDateString("fr-FR")}</span>
<span>{project.groups} groupes</span>
<span>{project.persons} personnes</span>
</div>
</div>
<div className="flex sm:flex-shrink-0">
<Button variant="outline" asChild className="w-full sm:w-auto">
<Link href={`/projects/${project.id}`}>Voir</Link>
</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="analytics" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Analytiques</CardTitle>
<CardDescription>
Visualisez les statistiques de vos projets et groupes
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex h-[300px] items-center justify-center rounded-md border border-dashed">
<p className="text-sm text-muted-foreground">
Les graphiques d'analytiques seront disponibles prochainement
</p>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="reports" className="space-y-4">
<Card>
<CardHeader>
<CardTitle>Rapports</CardTitle>
<CardDescription>
Générez des rapports sur vos projets et groupes
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex h-[300px] items-center justify-center rounded-md border border-dashed">
<p className="text-sm text-muted-foreground">
La génération de rapports sera disponible prochainement
</p>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
}