import { Head } from '@inertiajs/react'; import { Building2, Plus, Search } from 'lucide-react'; import { useState } from 'react'; import { type BreadcrumbItem } from '@/types'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { usePage } from '@inertiajs/react'; import { SharedData } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/' }, { title: 'Clients', href: '/user-management/clients' }, ]; interface Client { id: number; name: string; code: string; email: string | null; phone: string | null; is_active: boolean; users_count?: number; created_at: string; } export default function Clients() { const [search, setSearch] = useState(''); const [clients, setClients] = useState([]); const [loading, setLoading] = useState(false); const { auth } = usePage().props; const fetchClients = async () => { setLoading(true); try { const res = await fetch(`/api/v1/clients?search=${encodeURIComponent(search)}`, { headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('jwt_token') || ''}`, }, }); const json = await res.json(); setClients(json.data?.data || json.data || []); } catch { // fallback - use cookie auth } setLoading(false); }; return (

Clients

Gestion des comptes clients

setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && fetchClients()} className="pl-9" />

Nom Code Email Statut Créé le {clients.length === 0 ? ( Cliquez sur « Rechercher » pour charger les clients ) : ( clients.map((client) => ( {client.name} {client.code} {client.email || '—'} {client.is_active ? 'Actif' : 'Inactif'} {new Date(client.created_at).toLocaleDateString('fr-FR')} )) )}

); }