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 { CompanyProposal, Paginated } from '@/types/crm'; import { Head, Link, router, useForm } from '@inertiajs/react'; import { FormEventHandler, ReactNode, useState } from 'react'; type Props = PageProps<{ proposals: Paginated; companies: Array<{ id: number; name: string }>; filters: { search: string; status: string }; statusLabels: Record; stats: { total: number; sent: number; accepted: number; rejected: number; pending: number; acceptedAmount: number; }; flash?: { success?: string | null }; }>; export default function ProposalsIndex({ proposals, companies, 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() ?? '', title: '', amount: '', status: 'draft', probability: '25', sent_at: '', accepted_at: '', expires_at: '', notes: '', }); const filter: FormEventHandler = (event) => { event.preventDefault(); router.get(route('proposals.index'), { search, status }, { preserveState: true }); }; const submit: FormEventHandler = (event) => { event.preventDefault(); form.post(route('proposals.store'), { onSuccess: () => form.reset('title', 'amount', 'notes') }); }; return (

Devis & Propositions

Suivi commercial des offres envoyées aux prospects

} >
{flash?.success && }

Créer un devis

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

Liste des devis

setSearch(event.target.value)} placeholder="Référence, offre, client..." />
{proposals.data.length === 0 && } {proposals.data.map((proposal) => ( ))}
N° devisClient / offreMontantStatutProbabilité
Aucun devis enregistré.
{proposal.reference} {proposal.company.name}

{proposal.title}

 {currency(Number(proposal.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', rose: 'text-rose-600', purple: 'text-violet-700' }; return

{label}

{value}

; } function StatusBadge({ value, label }: { value: string; label: string }) { const styles: Record = { draft: 'bg-slate-100 text-slate-600', sent: 'bg-amber-50 text-amber-700', accepted: 'bg-emerald-50 text-emerald-700', rejected: 'bg-rose-50 text-rose-700' }; return {label}; } function Progress({ value }: { value: number }) { return
{value}%
; } function currency(value: number) { return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(value); }