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 { Paginated } from '@/types/crm'; import { Head, router, useForm } from '@inertiajs/react'; import { FormEventHandler, ReactNode, useState } from 'react'; type Campaign = { id: number; name: string; channel: string; status: string; audience_count: number; contacted_count: number; response_count: number; opportunity_count: number; starts_at: string | null; ends_at: string | null; }; type Props = PageProps<{ campaigns: Paginated; filters: { search: string; status: string }; statusLabels: Record; stats: { total: number; active: number; audience: number; contacted: number; responses: number; opportunities: number }; flash?: { success?: string | null }; }>; export default function CampaignsIndex({ campaigns, filters, statusLabels, stats, flash }: Props) { const [search, setSearch] = useState(filters.search); const form = useForm({ name: '', channel: 'email', status: 'draft', audience_count: '0', contacted_count: '0', response_count: '0', opportunity_count: '0', starts_at: '', ends_at: '', notes: '', }); const responseRate = stats.contacted > 0 ? Math.round((stats.responses / stats.contacted) * 1000) / 10 : 0; const submit: FormEventHandler = (event) => { event.preventDefault(); form.post(route('campaigns.store'), { onSuccess: () => form.reset('name', 'notes') }); }; return ( }>
{flash?.success && }

Créer une campagne

form.setData('name', event.target.value)} className="mt-1 w-full" />
form.setData('audience_count', value)} /> form.setData('contacted_count', value)} /> form.setData('response_count', value)} /> form.setData('opportunity_count', value)} />
Enregistrer la campagne

Mes campagnes

{ event.preventDefault(); router.get(route('campaigns.index'), { search }); }} className="flex gap-2"> setSearch(event.target.value)} placeholder="Rechercher..." />
{campaigns.data.length === 0 && } {campaigns.data.map((campaign) => ( ))}
CampagneCanalCiblés / jointsRéponseStatut
Aucune campagne enregistrée.
{campaign.name} {campaign.channel} {campaign.audience_count} / {campaign.contacted_count} {campaign.contacted_count ? Math.round((campaign.response_count / campaign.contacted_count) * 1000) / 10 : 0}%
); } function Title({ title, subtitle }: { title: string; subtitle: string }) { return

{title}

{subtitle}

; } function Alert({ message }: { message: string }) { return
{message}
; } function Metric({ label, value }: { label: string; value: number | string }) { return

{label}

{typeof value === 'number' ? new Intl.NumberFormat('fr-FR').format(value) : value}

; } function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) { return
{children}
; } function CountField({ label, id, value, setValue }: { label: string; id: string; value: string; setValue: (value: string) => void }) { return setValue(event.target.value)} className="mt-1 w-full" />; } function Badge({ label, status }: { label: string; status: string }) { const colors = status === 'active' ? 'bg-emerald-50 text-emerald-700' : status === 'completed' ? 'bg-blue-50 text-blue-700' : 'bg-slate-100 text-slate-600'; return {label}; }