import InputError from '@/Components/InputError'; import InputLabel from '@/Components/InputLabel'; import PrimaryButton from '@/Components/PrimaryButton'; import TextInput from '@/Components/TextInput'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { CompanyContract, Paginated } from '@/types/crm'; import { Head, Link, router, useForm } from '@inertiajs/react'; import { FormEventHandler, ReactNode, useState } from 'react'; type AvailableProposal = { id: number; company_id: number; reference: string; title: string; company: { id: number; name: string }; }; type Props = PageProps<{ contracts: Paginated; companies: Array<{ id: number; name: string }>; proposals: AvailableProposal[]; filters: { search: string; status: string }; statusLabels: Record; stats: { total: number; active: number; pending: number; ended: number; annualValue: number; }; flash?: { success?: string | null }; }>; export default function ContractsIndex({ contracts, companies, proposals, filters, statusLabels, stats, flash }: Props) { const [search, setSearch] = useState(filters.search); const [status, setStatus] = useState(filters.status); const form = useForm({ company_id: companies[0]?.id.toString() ?? '', proposal_id: '', title: '', amount: '', billing_frequency: 'monthly', status: 'pending', signed_at: '', starts_at: '', ends_at: '', notes: '', }); const relatedProposals = proposals.filter((proposal) => proposal.company_id.toString() === form.data.company_id); const filter: FormEventHandler = (event) => { event.preventDefault(); router.get(route('contracts.index'), { search, status }, { preserveState: true }); }; const submit: FormEventHandler = (event) => { event.preventDefault(); form.post(route('contracts.store'), { onSuccess: () => form.reset('proposal_id', 'title', 'amount', 'notes') }); }; return (

Contrats

Suivi des engagements signés et de leur valeur active

} >
{flash?.success && }

Créer un contrat

form.setData('title', event.target.value)} className="mt-1 w-full" />
form.setData('amount', event.target.value)} className="mt-1 w-full" />
Enregistrer le contrat

Liste des contrats

setSearch(event.target.value)} placeholder="Référence, contrat, client..." />
{contracts.data.length === 0 && } {contracts.data.map((contract) => ( ))}
N° contratClientFormuleMontantStatut
Aucun contrat enregistré.
{contract.reference} {contract.company.name}

{contract.title}

 {frequencyLabel(contract.billing_frequency)} {currency(Number(contract.amount))}
); } function Field({ label, htmlFor, children }: { label: string; htmlFor: string; children: ReactNode }) { return
{children}
; } function Alert({ message }: { message: string }) { return
{message}
; } function Metric({ label, value, tone }: { label: string; value: string; tone: string }) { const tones: Record = { blue: 'text-blue-700', amber: 'text-amber-600', green: 'text-emerald-700', purple: 'text-violet-700' }; return

{label}

{value}

; } function StatusBadge({ value, label }: { value: string; label: string }) { const styles: Record = { pending: 'bg-amber-50 text-amber-700', active: 'bg-emerald-50 text-emerald-700', ended: 'bg-blue-50 text-blue-700', cancelled: 'bg-rose-50 text-rose-700' }; return {label}; } function frequencyLabel(value: string) { return ({ monthly: 'Abonnement mensuel', annual: 'Abonnement annuel', one_off: 'Forfait' } as Record)[value] ?? value; } function currency(value: number) { return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(value); }