import { Head, router } from '@inertiajs/react'; import { useState } from 'react'; import { ClientBooleanBadge } from '@/features/clients/components/client-boolean-badge'; import { ClientFormSheet } from '@/features/clients/components/client-form-sheet'; import type { ClientEntity, ClientFormSelectUser } from '@/features/clients/types'; import { useAuthorization } from '@/hooks/use-authorization'; import { useI18n } from '@/hooks/use-i18n'; import { ClientShowLayout } from '@/layouts/clients/client-show-layout'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Icon } from '@/components/ui/icon'; import { Separator } from '@/components/ui/separator'; interface OverviewProps { client: ClientEntity; client_form_options: { portal_users: ClientFormSelectUser[]; accountants: ClientFormSelectUser[]; }; } interface InfoRowProps { label: string; value: string | null | undefined; } function InfoRow({ label, value }: InfoRowProps) { if (!value) return null; return (

{label} {value}

); } export default function ClientOverviewPage({ client, client_form_options }: OverviewProps) { const { t } = useI18n(); const { can } = useAuthorization(); const [editOpen, setEditOpen] = useState(false); const canEdit = can('edit clients'); const handleEditClose = () => { setEditOpen(false); router.reload({ only: ['client'] }); }; return (

{t('clients.show.overview.title')}

{canEdit && ( )}

{t('clients.show.overview.section_general')}

{t('clients.show.overview.field_vat')}

{t('clients.show.overview.field_type')}

{t('clients.show.overview.field_status')}

{t('clients.show.overview.section_address')} {client.contacts.length > 0 && ( {t('clients.show.overview.section_contacts')} {client.contacts.map((contact) => (

{contact.name} {contact.is_primary && ( {t('clients.show.overview.contact_primary')} )}

{contact.position && ( {contact.position} )} {contact.email && ( {contact.email} )} {contact.phone && ( {contact.phone} )}

))} )}

{canEdit && ( { if (!open) handleEditClose(); else setEditOpen(true); }} mode="edit" client={client} accountants={client_form_options.accountants} canManageContacts={can('manage client contacts')} canAssignAccountants={can('assign client accountants')} onAfterSave={handleEditClose} /> )} ); }