import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { CompanyProposal, Paginated } from '@/types/crm'; import { Head, Link, router } from '@inertiajs/react'; import { FormEventHandler, useState } from 'react'; type Props = PageProps<{ opportunities: Paginated; filters: { search: string }; statusLabels: Record; stats: { open: number; draft: number; sent: number; potentialAmount: number; weightedAmount: number; }; }>; export default function OpportunitiesIndex({ opportunities, filters, statusLabels, stats }: Props) { const [search, setSearch] = useState(filters.search); const submit: FormEventHandler = (event) => { event.preventDefault(); router.get(route('opportunities.index'), { search }, { preserveState: true }); }; return (

Opportunités

Pipeline des propositions en cours de qualification

+ Créer un devis } >

Opportunités actives

{opportunities.total} dossier(s) en cours

{opportunities.data.length === 0 && ( )} {opportunities.data.map((opportunity) => ( ))}

Opportunité	Entreprise	Statut	Montant	Probabilité
Aucune opportunité ouverte.
{opportunity.title} {opportunity.reference}	{opportunity.company.name}		{currency(Number(opportunity.amount))}

Opportunité

Entreprise

Statut

Montant

Probabilité

Aucune opportunité ouverte.

{opportunity.title}

{opportunity.reference}

{opportunity.company.name}

{currency(Number(opportunity.amount))}

); } function Metric({ label, value, tone }: { label: string; value: string; tone: string }) { const styles: Record = { blue: 'text-blue-700', slate: 'text-slate-700', amber: 'text-amber-700', green: 'text-emerald-700', purple: 'text-violet-700', }; return

{label}

{value}

; } function Status({ value, label }: { value: string; label: string }) { const classes = value === 'sent' ? 'bg-amber-50 text-amber-700' : 'bg-slate-100 text-slate-700'; return {label}; } function Progress({ value }: { value: number }) { return

{value}%

; } function number(value: number) { return new Intl.NumberFormat('fr-FR').format(value); } function currency(value: number) { return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(value); }