brief-20/frontend/app/persons/page.tsx

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