@consilioweb/payload-support 0.8.2 → 0.9.4

package/src/views/BillingView/client.tsx

@@ -2,18 +2,80 @@
 
 import React, { useState, useCallback } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
-import s from '../../styles/BillingView.module.scss'
+import styles from '../../styles/BillingView.module.scss'
 
-interface BillingEntry { duration: number; description: string; date: string }
-interface BillingTicket { id: number; ticketNumber: string; subject: string; entries: BillingEntry[]; totalMinutes: number; billedAmount: number | null }
-interface BillingGroup { project: { id: number; name: string } | null; client: { company: string } | null; tickets: BillingTicket[]; totalMinutes: number; totalBilledAmount: number }
-interface BillingData { groups: BillingGroup[]; grandTotalMinutes: number; grandTotalBilledAmount: number }
-interface ProjectOption { id: number; name: string }
+interface BillingEntry {
+  duration: number
+  description: string
+  date: string
+}
+
+interface BillingTicket {
+  id: number
+  ticketNumber: string
+  subject: string
+  entries: BillingEntry[]
+  totalMinutes: number
+  billedAmount: number | null
+}
+
+interface BillingGroup {
+  project: { id: number; name: string } | null
+  client: { company: string } | null
+  tickets: BillingTicket[]
+  totalMinutes: number
+  totalBilledAmount: number
+}
+
+interface BillingData {
+  groups: BillingGroup[]
+  grandTotalMinutes: number
+  grandTotalBilledAmount: number
+}
+
+interface ProjectOption {
+  id: number
+  name: string
+}
+
+function formatDuration(minutes: number): string {
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  if (h === 0) return `${m}min`
+  if (m === 0) return `${h}h`
+  return `${h}h ${m}min`
+}
+
+function formatAmount(minutes: number, rate: number): string {
+  const hours = minutes / 60
+  return (hours * rate).toFixed(2)
+}
+
+function getMonthRange(offset: number): { from: string; to: string } {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = now.getMonth() + offset
+  const start = new Date(year, month, 1)
+  const end = new Date(year, month + 1, 0)
+  return {
+    from: start.toISOString().split('T')[0],
+    to: end.toISOString().split('T')[0],
+  }
+}
 
-function formatDuration(minutes: number): string { const h = Math.floor(minutes / 60); const m = minutes % 60; if (h === 0) return `${m}min`; if (m === 0) return `${h}h`; return `${h}h ${m}min` }
-function formatAmount(minutes: number, rate: number): string { return ((minutes / 60) * rate).toFixed(2) }
-function getMonthRange(offset: number): { from: string; to: string } { const now = new Date(); const start = new Date(now.getFullYear(), now.getMonth() + offset, 1); const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0); return { from: start.toISOString().split('T')[0], to: end.toISOString().split('T')[0] } }
-function getQuarterRange(offset: number): { from: string; to: string } { const now = new Date(); const q = Math.floor(now.getMonth() / 3) + offset; const start = new Date(now.getFullYear(), q * 3, 1); const end = new Date(now.getFullYear(), q * 3 + 3, 0); return { from: start.toISOString().split('T')[0], to: end.toISOString().split('T')[0] } }
+function getQuarterRange(offset: number): { from: string; to: string } {
+  const now = new Date()
+  const currentQuarter = Math.floor(now.getMonth() / 3)
+  const quarter = currentQuarter + offset
+  const year = now.getFullYear()
+  const startMonth = quarter * 3
+  const start = new Date(year, startMonth, 1)
+  const end = new Date(year, startMonth + 3, 0)
+  return {
+    from: start.toISOString().split('T')[0],
+    to: end.toISOString().split('T')[0],
+  }
+}
 
 export const BillingClient: React.FC = () => {
   const { t } = useTranslation()
@@ -26,107 +88,338 @@ export const BillingClient: React.FC = () => {
   const [projects, setProjects] = useState<ProjectOption[]>([])
   const [projectsLoaded, setProjectsLoaded] = useState(false)
   const [copied, setCopied] = useState(false)
+  const [billedTickets, setBilledTickets] = useState<Set<number>>(() => {
+    if (typeof window === 'undefined') return new Set()
+    try {
+      const saved = localStorage.getItem('billing-checked-tickets')
+      return saved ? new Set(JSON.parse(saved)) : new Set()
+    } catch { return new Set() }
+  })
+
+  const toggleBilled = useCallback((ticketId: number) => {
+    setBilledTickets((prev) => {
+      const next = new Set(prev)
+      if (next.has(ticketId)) next.delete(ticketId)
+      else next.add(ticketId)
+      localStorage.setItem('billing-checked-tickets', JSON.stringify([...next]))
+      return next
+    })
+  }, [])
+
+  const allTicketIds = data?.groups.flatMap((g) => g.tickets.map((t) => t.id)) || []
+  const allBilled = allTicketIds.length > 0 && allTicketIds.every((id) => billedTickets.has(id))
+  const toggleAll = useCallback(() => {
+    setBilledTickets((prev) => {
+      const ids = data?.groups.flatMap((g) => g.tickets.map((t) => t.id)) || []
+      const next = ids.every((id) => prev.has(id)) ? new Set<number>() : new Set(ids)
+      localStorage.setItem('billing-checked-tickets', JSON.stringify([...next]))
+      return next
+    })
+  }, [data])
 
   const loadProjects = useCallback(async () => {
     if (projectsLoaded) return
-    try { const res = await fetch('/api/projects?limit=100&depth=0&sort=name'); if (res.ok) { const json = await res.json(); setProjects(json.docs?.map((p: { id: number; name: string }) => ({ id: p.id, name: p.name })) || []) } } catch (err) { console.warn('[support] loadProjects error:', err) }
+    try {
+      const res = await fetch('/api/projects?limit=100&depth=0&sort=name')
+      if (res.ok) {
+        const json = await res.json()
+        setProjects(json.docs?.map((p: { id: number; name: string }) => ({ id: p.id, name: p.name })) || [])
+      }
+    } catch { /* ignore */ }
     setProjectsLoaded(true)
   }, [projectsLoaded])
 
+  // Load projects on mount
   React.useEffect(() => { loadProjects() }, [loadProjects])
 
   const fetchBilling = useCallback(async () => {
     setLoading(true)
-    try { const params = new URLSearchParams({ from, to }); if (projectId) params.set('projectId', projectId); const res = await fetch(`/api/support/billing?${params}`); if (res.ok) setData(await res.json()) } catch (err) { console.warn('[support] fetchBilling error:', err) }
+    try {
+      const params = new URLSearchParams({ from, to })
+      if (projectId) params.set('projectId', projectId)
+      const res = await fetch(`/api/support/billing?${params}`)
+      if (res.ok) {
+        setData(await res.json())
+      }
+    } catch (err) {
+      console.error('[billing] Fetch error:', err)
+    }
     setLoading(false)
   }, [from, to, projectId])
 
-  const setPeriod = (range: { from: string; to: string }) => { setFrom(range.from); setTo(range.to) }
+  const setPeriod = (range: { from: string; to: string }) => {
+    setFrom(range.from)
+    setTo(range.to)
+  }
 
   const copyRecap = useCallback(() => {
     if (!data) return
-    const lines: string[] = [`PRE-FACTURATION -- Du ${from} au ${to}`, `Taux horaire : ${rate} EUR/h`, '='.repeat(50)]
+
+    const lines: string[] = []
+    lines.push(`PRE-FACTURATION — Du ${from} au ${to}`)
+    lines.push(`Taux horaire : ${rate} EUR/h`)
+    lines.push('='.repeat(50))
+
     for (const group of data.groups) {
-      lines.push('', `PROJET : ${group.project?.name || 'Sans projet'}`)
+      lines.push('')
+      lines.push(`PROJET : ${group.project?.name || 'Sans projet'}`)
       if (group.client?.company) lines.push(`Client : ${group.client.company}`)
+      lines.push('-'.repeat(40))
+
       for (const ticket of group.tickets) {
-        lines.push(`  ${ticket.ticketNumber} -- ${ticket.subject}`)
-        for (const entry of ticket.entries) lines.push(`    ${entry.date} | ${formatDuration(entry.duration)} | ${entry.description || '-'}`)
-        lines.push(`    Sous-total : ${formatDuration(ticket.totalMinutes)} = ${formatAmount(ticket.totalMinutes, rate)} EUR`)
+        lines.push(`  ${ticket.ticketNumber} — ${ticket.subject}`)
+        for (const entry of ticket.entries) {
+          lines.push(`    ${entry.date} | ${formatDuration(entry.duration)} | ${entry.description || '-'}`)
+        }
+        const ticketAmount = ticket.billedAmount || Number(formatAmount(ticket.totalMinutes, rate))
+        lines.push(`    Sous-total : ${formatDuration(ticket.totalMinutes)} = ${ticketAmount.toFixed(2)} EUR${ticket.billedAmount ? ' (forfait)' : ''}`)
       }
+      const groupAmount = group.totalBilledAmount > 0
+        ? group.totalBilledAmount
+        : Number(formatAmount(group.totalMinutes, rate))
+      lines.push(`  Total projet : ${formatDuration(group.totalMinutes)} = ${groupAmount.toFixed(2)} EUR`)
     }
-    lines.push('', '='.repeat(50), `TOTAL : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)} EUR`)
+
+    lines.push('')
+    lines.push('='.repeat(50))
+    lines.push(`TOTAL GENERAL : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)} EUR`)
+
     navigator.clipboard.writeText(lines.join('\n'))
-    setCopied(true); setTimeout(() => setCopied(false), 2000)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
   }, [data, from, to, rate])
 
-  const S: Record<string, React.CSSProperties> = {
-    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
-    filters: { marginBottom: 20 },
-    quickPeriod: { display: 'flex', gap: 6, marginBottom: 8 },
-    btn: { padding: '6px 12px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
-    btnPrimary: { padding: '6px 12px', borderRadius: 6, border: 'none', fontSize: 12, cursor: 'pointer', background: '#2563eb', color: '#fff', fontWeight: 600 },
-    filterRow: { display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap' as const },
-    fieldGroup: { display: 'flex', flexDirection: 'column' as const, gap: 4 },
-    label: { fontSize: 11, fontWeight: 600, color: 'var(--theme-elevation-500)' },
-    input: { padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' },
-    select: { padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' },
-    groupCard: { marginBottom: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', overflow: 'hidden' },
-    groupHeader: { display: 'flex', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--theme-elevation-50)', borderBottom: '1px solid var(--theme-elevation-150)' },
-    table: { width: '100%', borderCollapse: 'collapse' as const, fontSize: 12 },
-    th: { textAlign: 'left' as const, padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-200)', fontSize: 11, color: 'var(--theme-elevation-500)' },
-    td: { padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-100)' },
-    grandTotal: { padding: 16, borderRadius: 10, border: '2px solid #2563eb', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 },
-  }
+  const totalTickets = data?.groups.reduce((sum, g) => sum + g.tickets.length, 0) || 0
 
   return (
-    <div style={S.page}>
-      <div style={{ marginBottom: 16 }}>
-        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t('billing.title')}</h1>
-        <p style={{ fontSize: 13, color: 'var(--theme-elevation-500)', margin: '4px 0 0' }}>{t('billing.subtitle')}</p>
+    <div className={styles.page}>
+      {/* Header */}
+      <div className={styles.header}>
+        <div>
+          <h1 className={styles.title}>{t('billing.title')}</h1>
+          <p className={styles.subtitle}>{t('billing.subtitle')}</p>
+        </div>
       </div>
 
-      <div style={S.filters}>
-        <div style={S.quickPeriod}>
-          <button style={S.btnPrimary} onClick={() => setPeriod(getMonthRange(0))}>{t('billing.filters.thisMonth')}</button>
-          <button style={S.btn} onClick={() => setPeriod(getMonthRange(-1))}>{t('billing.filters.lastMonth')}</button>
-          <button style={S.btn} onClick={() => setPeriod(getQuarterRange(0))}>{t('billing.filters.thisQuarter')}</button>
+      {/* Filters */}
+      <div className={styles.filters}>
+        <div className={styles.quickPeriod}>
+          <button className={styles.btnPrimary} onClick={() => setPeriod(getMonthRange(0))}>{t('billing.filters.thisMonth')}</button>
+          <button className={styles.btnSecondary} onClick={() => setPeriod(getMonthRange(-1))}>{t('billing.filters.lastMonth')}</button>
+          <button className={styles.btnAmber} onClick={() => setPeriod(getQuarterRange(0))}>{t('billing.filters.thisQuarter')}</button>
+          <button className={styles.btnMuted} onClick={() => setPeriod(getQuarterRange(-1))}>{t('billing.filters.lastQuarter')}</button>
         </div>
-        <div style={S.filterRow}>
-          <div style={S.fieldGroup}><label style={S.label}>{t('billing.filters.from')}</label><input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={S.input} /></div>
-          <div style={S.fieldGroup}><label style={S.label}>{t('billing.filters.to')}</label><input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={S.input} /></div>
-          <div style={S.fieldGroup}><label style={S.label}>{t('billing.filters.project')}</label><select value={projectId} onChange={(e) => setProjectId(e.target.value)} style={S.select}><option value="">{t('common.all')}</option>{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></div>
-          <div style={S.fieldGroup}><label style={S.label}>{t('billing.filters.hourlyRate')}</label><div style={{ display: 'flex', gap: 4, alignItems: 'center' }}><input type="number" value={rate} onChange={(e) => setRate(Number(e.target.value))} style={{ ...S.input, width: 70 }} min={0} /><span style={{ fontSize: 11 }}>{t('billing.filters.rateUnit')}</span></div></div>
-          <button style={S.btnPrimary} onClick={fetchBilling} disabled={loading}>{loading ? t('billing.filters.loading') : t('billing.filters.load')}</button>
+
+        <div className={styles.filterRow}>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('billing.filters.from')}</label>
+            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
+          </div>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('billing.filters.to')}</label>
+            <input type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
+          </div>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('billing.filters.project')}</label>
+            <select
+              value={projectId}
+              onChange={(e) => setProjectId(e.target.value)}
+              className={styles.select}
+            >
+              <option value="">{t('ticket.allProjects')}</option>
+              {projects.map((p) => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </select>
+          </div>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('billing.filters.hourlyRate')}</label>
+            <div className={styles.rateRow}>
+              <input
+                type="number"
+                value={rate}
+                onChange={(e) => setRate(Number(e.target.value))}
+                className={styles.rateInput}
+                min={0}
+              />
+              <span className={styles.rateUnit}>{t('billing.filters.rateUnit')}</span>
+            </div>
+          </div>
+          <button
+            className={styles.btnPrimary}
+            onClick={fetchBilling}
+            disabled={loading}
+          >
+            {loading ? t('billing.filters.loading') : t('billing.filters.load')}
+          </button>
         </div>
       </div>
 
+      {/* Results */}
       {data && (
         <>
-          {data.groups.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('billing.empty')}</div> : (
+          {data.groups.length === 0 ? (
+            <div className={styles.empty}>
+              {t('billing.empty')}
+            </div>
+          ) : (
             <>
+              {/* Project groups */}
               {data.groups.map((group, gi) => (
-                <div key={gi} style={S.groupCard}>
-                  <div style={S.groupHeader}>
-                    <div><span style={{ fontWeight: 700 }}>{group.project?.name || 'Sans projet'}</span>{group.client?.company && <span style={{ color: 'var(--theme-elevation-500)' }}> -- {group.client.company}</span>}</div>
-                    <div style={{ textAlign: 'right' }}><div style={{ fontWeight: 700 }}>{formatDuration(group.totalMinutes)}</div><div style={{ fontSize: 12, color: '#2563eb', fontWeight: 600 }}>{formatAmount(group.totalMinutes, rate)} EUR</div></div>
+                <div key={gi} className={styles.groupCard}>
+                  {/* Project header */}
+                  <div className={styles.groupHeader}>
+                    <div>
+                      <span className={styles.groupName}>
+                        {group.project?.name || 'Sans projet'}
+                      </span>
+                      {group.client?.company && (
+                        <span className={styles.groupClient}>
+                          — {group.client.company}
+                        </span>
+                      )}
+                    </div>
+                    <div className={styles.groupTotals}>
+                      <div className={styles.groupDuration}>
+                        {formatDuration(group.totalMinutes)}
+                      </div>
+                      {group.totalBilledAmount > 0 ? (
+                        <>
+                          <div className={styles.groupAmountBilled}>
+                            {group.totalBilledAmount.toFixed(2)} EUR facture
+                          </div>
+                          <div className={styles.groupAmountStrike}>
+                            {formatAmount(group.totalMinutes, rate)} EUR (temps)
+                          </div>
+                        </>
+                      ) : (
+                        <div className={styles.groupAmount}>
+                          {formatAmount(group.totalMinutes, rate)} EUR
+                        </div>
+                      )}
+                    </div>
                   </div>
-                  <table style={S.table}>
-                    <thead><tr><th style={S.th}>{t('billing.table.ticketNumber')}</th><th style={S.th}>{t('billing.table.subject')}</th><th style={S.th}>{t('billing.table.date')}</th><th style={S.th}>{t('billing.table.duration')}</th><th style={S.th}>{t('billing.table.description')}</th><th style={{ ...S.th, textAlign: 'right' }}>{t('billing.table.amount')}</th></tr></thead>
+
+                  {/* Tickets table */}
+                  <table className={styles.table}>
+                    <thead>
+                      <tr>
+                        <th className={styles.thCheckbox}>
+                          <input
+                            type="checkbox"
+                            checked={group.tickets.every((t) => billedTickets.has(t.id))}
+                            onChange={() => {
+                              const ids = group.tickets.map((t) => t.id)
+                              const allChecked = ids.every((id) => billedTickets.has(id))
+                              setBilledTickets((prev) => {
+                                const next = new Set(prev)
+                                ids.forEach((id) => allChecked ? next.delete(id) : next.add(id))
+                                localStorage.setItem('billing-checked-tickets', JSON.stringify([...next]))
+                                return next
+                              })
+                            }}
+                            className={styles.checkbox}
+                            title="Tout cocher/decocher"
+                          />
+                        </th>
+                        <th className={styles.th}>N° Ticket</th>
+                        <th className={styles.thLeft}>Sujet</th>
+                        <th className={styles.th}>Date</th>
+                        <th className={styles.th}>Duree</th>
+                        <th className={styles.thLeft}>Description</th>
+                        <th className={styles.th}>Montant</th>
+                        <th className={styles.th}>Facture</th>
+                      </tr>
+                    </thead>
                     <tbody>
-                      {group.tickets.map((ticket) => ticket.entries.map((entry, ei) => (
-                        <tr key={`${ticket.id}-${ei}`}>
-                          {ei === 0 && <><td style={{ ...S.td, fontWeight: 600 }} rowSpan={ticket.entries.length}><a href={`/admin/support/ticket?id=${ticket.id}`} style={{ color: '#2563eb', textDecoration: 'none' }}>{ticket.ticketNumber}</a></td><td style={S.td} rowSpan={ticket.entries.length}>{ticket.subject}</td></>}
-                          <td style={S.td}>{entry.date}</td><td style={S.td}>{formatDuration(entry.duration)}</td><td style={S.td}>{entry.description || '-'}</td><td style={{ ...S.td, textAlign: 'right', fontWeight: 600 }}>{formatAmount(entry.duration, rate)} EUR</td>
-                        </tr>
-                      )))}
+                      {group.tickets.map((ticket) => {
+                        const isBilled = billedTickets.has(ticket.id)
+                        return ticket.entries.map((entry, ei) => (
+                          <tr
+                            key={`${ticket.id}-${ei}`}
+                            className={`${isBilled ? styles.tableRowBilled : styles.tableRow} ${!isBilled && ei % 2 === 0 ? styles.tableRowEven : ''} ${!isBilled && ei % 2 !== 0 ? styles.tableRowOdd : ''}`}
+                          >
+                            {ei === 0 ? (
+                              <>
+                                <td className={styles.td} rowSpan={ticket.entries.length} style={{ verticalAlign: 'middle' }}>
+                                  <input
+                                    type="checkbox"
+                                    checked={isBilled}
+                                    onChange={() => toggleBilled(ticket.id)}
+                                    className={styles.checkbox}
+                                    title={isBilled ? 'Marquer comme non facture' : 'Marquer comme facture'}
+                                  />
+                                </td>
+                                <td className={`${styles.td} ${styles.bold} ${isBilled ? styles.strikethrough : ''}`} rowSpan={ticket.entries.length}>
+                                  <a
+                                    href={`/admin/support/ticket?id=${ticket.id}`}
+                                    className={styles.ticketLink}
+                                  >
+                                    {ticket.ticketNumber}
+                                  </a>
+                                </td>
+                                <td className={`${styles.tdLeft} ${isBilled ? styles.strikethrough : ''}`} rowSpan={ticket.entries.length}>
+                                  {ticket.subject}
+                                </td>
+                              </>
+                            ) : null}
+                            <td className={styles.td}>{entry.date}</td>
+                            <td className={styles.td}>{formatDuration(entry.duration)}</td>
+                            <td className={`${styles.tdLeft} ${styles.secondary}`}>
+                              {entry.description || '-'}
+                            </td>
+                            <td className={`${styles.td} ${styles.bold}`}>
+                              {formatAmount(entry.duration, rate)} EUR
+                            </td>
+                            {ei === 0 ? (
+                              <td
+                                className={`${styles.td} ${ticket.billedAmount ? styles.billedAmount : styles.secondary}`}
+                                rowSpan={ticket.entries.length}
+                              >
+                                {ticket.billedAmount ? `${ticket.billedAmount.toFixed(2)} EUR` : '-'}
+                              </td>
+                            ) : null}
+                          </tr>
+                        ))
+                      })}
                     </tbody>
                   </table>
                 </div>
               ))}
-              <div style={S.grandTotal}>
-                <div><div style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{t('billing.totals.billableTicketsPlural', { count: String(data.groups.reduce((s, g) => s + g.tickets.length, 0)) })}</div><div style={{ fontSize: 18, fontWeight: 700 }}>{t('billing.totals.total')} : {formatDuration(data.grandTotalMinutes)} = {formatAmount(data.grandTotalMinutes, rate)} EUR</div></div>
-                <button style={S.btnPrimary} onClick={copyRecap}>{copied ? t('billing.totals.copiedRecap') : t('billing.totals.copyRecap')}</button>
+
+              {/* Grand total */}
+              <div className={styles.grandTotal}>
+                <div>
+                  <div className={styles.totalMeta}>
+                    {totalTickets} ticket{totalTickets > 1 ? 's' : ''} facturable{totalTickets > 1 ? 's' : ''}
+                    {billedTickets.size > 0 && (
+                      <span className={styles.totalChecked}>
+                        ({allTicketIds.filter((id) => billedTickets.has(id)).length} coche{allTicketIds.filter((id) => billedTickets.has(id)).length > 1 ? 's' : ''})
+                      </span>
+                    )}
+                  </div>
+                  <div className={styles.totalAmount}>
+                    Total : {formatDuration(data.grandTotalMinutes)} ={' '}
+                    {data.grandTotalBilledAmount > 0
+                      ? `${data.grandTotalBilledAmount.toFixed(2)} EUR`
+                      : `${formatAmount(data.grandTotalMinutes, rate)} EUR`
+                    }
+                  </div>
+                </div>
+                <div className={styles.totalActions}>
+                  <button
+                    className={allBilled ? styles.btnSecondary : styles.btnGreen}
+                    onClick={toggleAll}
+                  >
+                    {allBilled ? t('billing.totals.uncheckAll') : t('billing.totals.checkAll')}
+                  </button>
+                  <button
+                    className={copied ? styles.btnSuccess : styles.btnAmber}
+                    onClick={copyRecap}
+                  >
+                    {copied ? t('billing.totals.copiedRecap') : t('billing.totals.copyRecap')}
+                  </button>
+                </div>
               </div>
             </>
           )}