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

193 lines
6.0 KiB
TypeScript

"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,
Tag
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
export default function PersonsPage() {
const [searchQuery, setSearchQuery] = useState("");
// Mock data for persons
const persons = [
{
id: 1,
name: "Jean Dupont",
email: "jean.dupont@example.com",
tags: ["Frontend", "React", "Junior"],
projects: 2,
},
{
id: 2,
name: "Marie Martin",
email: "marie.martin@example.com",
tags: ["Backend", "Node.js", "Senior"],
projects: 3,
},
{
id: 3,
name: "Pierre Durand",
email: "pierre.durand@example.com",
tags: ["Fullstack", "JavaScript", "Medior"],
projects: 1,
},
{
id: 4,
name: "Sophie Lefebvre",
email: "sophie.lefebvre@example.com",
tags: ["UX/UI", "Design", "Senior"],
projects: 2,
},
{
id: 5,
name: "Thomas Bernard",
email: "thomas.bernard@example.com",
tags: ["Backend", "Java", "Senior"],
projects: 1,
},
{
id: 6,
name: "Julie Petit",
email: "julie.petit@example.com",
tags: ["Frontend", "Vue", "Junior"],
projects: 2,
},
{
id: 7,
name: "Nicolas Moreau",
email: "nicolas.moreau@example.com",
tags: ["DevOps", "Docker", "Medior"],
projects: 3,
},
];
// Filter persons based on search query
const filteredPersons = persons.filter(
(person) =>
person.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
person.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
person.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
);
return (
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">Personnes</h1>
<Button asChild>
<Link href="/persons/new">
<PlusCircle className="mr-2 h-4 w-4" />
Nouvelle personne
</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 personnes..."
className="pl-8"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Nom</TableHead>
<TableHead>Email</TableHead>
<TableHead>Tags</TableHead>
<TableHead>Projets</TableHead>
<TableHead className="w-[100px]">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredPersons.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="h-24 text-center">
Aucune personne trouvée.
</TableCell>
</TableRow>
) : (
filteredPersons.map((person) => (
<TableRow key={person.id}>
<TableCell className="font-medium">{person.name}</TableCell>
<TableCell>{person.email}</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{person.tags.map((tag, index) => (
<Badge key={index} variant="outline">
{tag}
</Badge>
))}
</div>
</TableCell>
<TableCell>{person.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={`/persons/${person.id}/edit`} className="flex items-center">
<Pencil className="mr-2 h-4 w-4" />
<span>Modifier</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/persons/${person.id}/tags`} className="flex items-center">
<Tag className="mr-2 h-4 w-4" />
<span>Gérer les tags</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="text-destructive focus:text-destructive">
<Trash2 className="mr-2 h-4 w-4" />
<span>Supprimer</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div>
);
}