@consilioweb/payload-support 0.5.1

package/src/utils/fireWebhooks.ts

@@ -0,0 +1,84 @@
+import type { Payload } from 'payload'
+import type { CollectionSlugs } from './slugs'
+
+/**
+ * Fire all active webhooks matching the given event.
+ * Uses fire-and-forget pattern (Promise.allSettled) so hook callers are never blocked.
+ * Each webhook request has a 10-second timeout.
+ */
+export async function fireWebhooks(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  event: string,
+  data: Record<string, unknown>,
+): Promise<void> {
+  try {
+    // Find all active webhook endpoints subscribed to this event
+    const endpoints = await payload.find({
+      collection: slugs.webhookEndpoints as any,
+      where: {
+        active: { equals: true },
+        events: { contains: event },
+      },
+      limit: 50,
+      depth: 0,
+      overrideAccess: true,
+    })
+
+    if (endpoints.docs.length === 0) return
+
+    const timestamp = new Date().toISOString()
+
+    // Fire each webhook in parallel (fire-and-forget)
+    await Promise.allSettled(
+      endpoints.docs.map(async (endpoint: any) => {
+        try {
+          const res = await fetch(endpoint.url, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              ...(endpoint.secret ? { 'X-Webhook-Secret': endpoint.secret } : {}),
+            },
+            body: JSON.stringify({ event, data, timestamp }),
+            signal: AbortSignal.timeout(10000),
+          })
+
+          // Update webhook metadata (best-effort, don't throw on failure)
+          try {
+            await payload.update({
+              collection: slugs.webhookEndpoints as any,
+              id: endpoint.id,
+              data: {
+                lastTriggeredAt: timestamp,
+                lastStatus: res.status,
+              },
+              overrideAccess: true,
+            })
+          } catch {
+            // Ignore metadata update failures
+          }
+        } catch (error) {
+          console.warn(`[support] Webhook delivery failed: ${endpoint.url}`, error)
+
+          // Record the failure
+          try {
+            await payload.update({
+              collection: slugs.webhookEndpoints as any,
+              id: endpoint.id,
+              data: {
+                lastTriggeredAt: timestamp,
+                lastStatus: 0,
+              },
+              overrideAccess: true,
+            })
+          } catch {
+            // Ignore metadata update failures
+          }
+        }
+      }),
+    )
+  } catch (error) {
+    // Never let webhook errors propagate to the caller
+    console.error('[support] Failed to fire webhooks:', error)
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,22 @@
+export { readSupportSettings, DEFAULT_SETTINGS } from './readSettings'
+export type { SupportSettings } from './readSettings'
+export { resolveSlugs, DEFAULT_SLUGS } from './slugs'
+export type { CollectionSlugs } from './slugs'
+export { RateLimiter } from './rateLimiter'
+export { AuthError, requireAdmin, requireClient, handleAuthError } from './auth'
+export { fireWebhooks } from './fireWebhooks'
+export { createAdminNotification } from './adminNotification'
+export { dispatchWebhook } from './webhookDispatcher'
+
+export {
+  escapeHtml,
+  emailTrackingPixel,
+  emailRichContent,
+  emailButton,
+  emailQuote,
+  emailInfoRow,
+  emailParagraph,
+  emailWrapper,
+  createEmailTemplateFactory,
+} from './emailTemplate'
+export type { EmailTemplateConfig, EmailTemplateFactory } from './emailTemplate'

package/src/utils/rateLimiter.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared in-memory rate limiter with automatic cleanup.
+ * Replaces duplicated rate-limiting logic across endpoints.
+ */
+export class RateLimiter {
+  private store = new Map<string, { count: number; resetAt: number }>()
+
+  constructor(
+    private windowMs: number,
+    private maxRequests: number,
+  ) {
+    // Periodic cleanup to prevent memory leaks
+    const timer = setInterval(() => this.cleanup(), windowMs)
+    timer.unref()
+  }
+
+  /**
+   * Check if a key has exceeded the rate limit.
+   * Returns true if the request should be blocked.
+   */
+  check(key: string): boolean {
+    const now = Date.now()
+    const entry = this.store.get(key)
+
+    if (!entry || now > entry.resetAt) {
+      this.store.set(key, { count: 1, resetAt: now + this.windowMs })
+      return false
+    }
+
+    entry.count++
+    return entry.count > this.maxRequests
+  }
+
+  /**
+   * Reset the counter for a specific key.
+   */
+  reset(key: string): void {
+    this.store.delete(key)
+  }
+
+  /**
+   * Remove expired entries from the store.
+   */
+  private cleanup(): void {
+    const now = Date.now()
+    for (const [key, entry] of this.store) {
+      if (now > entry.resetAt) {
+        this.store.delete(key)
+      }
+    }
+  }
+}

package/src/utils/readSettings.ts

@@ -0,0 +1,67 @@
+import type { Payload } from 'payload'
+
+const PREF_KEY = 'support-settings'
+const USER_PREFS_KEY_PREFIX = 'support-user-prefs'
+
+export interface SupportSettings {
+  email: { fromAddress: string; fromName: string; replyToAddress: string }
+  ai: { provider: string; model: string; enableSentiment: boolean; enableSynthesis: boolean; enableSuggestion: boolean; enableRewrite: boolean }
+  sla: { firstResponseMinutes: number; resolutionMinutes: number; businessHoursOnly: boolean; escalationEmail: string }
+  autoClose: { enabled: boolean; daysBeforeClose: number; reminderDaysBefore: number }
+}
+
+export interface UserPrefs {
+  locale: 'fr' | 'en'
+  signature: string
+}
+
+export const DEFAULT_SETTINGS: SupportSettings = {
+  email: { fromAddress: '', fromName: 'Support', replyToAddress: '' },
+  ai: { provider: 'anthropic', model: 'claude-haiku-4-5-20251001', enableSentiment: true, enableSynthesis: true, enableSuggestion: true, enableRewrite: true },
+  sla: { firstResponseMinutes: 120, resolutionMinutes: 1440, businessHoursOnly: true, escalationEmail: '' },
+  autoClose: { enabled: true, daysBeforeClose: 7, reminderDaysBefore: 2 },
+}
+
+export const DEFAULT_USER_PREFS: UserPrefs = {
+  locale: 'fr',
+  signature: '',
+}
+
+export async function readSupportSettings(payload: Payload): Promise<SupportSettings> {
+  try {
+    const prefs = await payload.find({
+      collection: 'payload-preferences' as any,
+      where: { key: { equals: PREF_KEY } },
+      limit: 1, depth: 0, overrideAccess: true,
+    })
+    if (prefs.docs.length > 0) {
+      const stored = prefs.docs[0].value as Partial<SupportSettings>
+      return {
+        email: { ...DEFAULT_SETTINGS.email, ...stored.email },
+        ai: { ...DEFAULT_SETTINGS.ai, ...stored.ai },
+        sla: { ...DEFAULT_SETTINGS.sla, ...stored.sla },
+        autoClose: { ...DEFAULT_SETTINGS.autoClose, ...stored.autoClose },
+      }
+    }
+  } catch { /* fallback to defaults */ }
+  return { ...DEFAULT_SETTINGS }
+}
+
+export async function readUserPrefs(payload: Payload, userId: string | number): Promise<UserPrefs> {
+  try {
+    const key = `${USER_PREFS_KEY_PREFIX}-${userId}`
+    const prefs = await payload.find({
+      collection: 'payload-preferences' as any,
+      where: { key: { equals: key } },
+      limit: 1, depth: 0, overrideAccess: true,
+    })
+    if (prefs.docs.length > 0) {
+      const stored = prefs.docs[0].value as Partial<UserPrefs>
+      return {
+        locale: stored.locale || DEFAULT_USER_PREFS.locale,
+        signature: stored.signature ?? DEFAULT_USER_PREFS.signature,
+      }
+    }
+  } catch { /* fallback to defaults */ }
+  return { ...DEFAULT_USER_PREFS }
+}

package/src/utils/slugs.ts

@@ -0,0 +1,54 @@
+/**
+ * Default collection slugs used by the support plugin.
+ * All slugs can be overridden via SupportPluginConfig.collectionSlugs.
+ */
+export interface CollectionSlugs {
+  tickets: string
+  ticketMessages: string
+  supportClients: string
+  timeEntries: string
+  cannedResponses: string
+  ticketActivityLog: string
+  satisfactionSurveys: string
+  knowledgeBase: string
+  chatMessages: string
+  pendingEmails: string
+  emailLogs: string
+  authLogs: string
+  webhookEndpoints: string
+  slaPolicies: string
+  macros: string
+  ticketStatuses: string
+  users: string
+  media: string
+}
+
+export const DEFAULT_SLUGS: CollectionSlugs = {
+  tickets: 'tickets',
+  ticketMessages: 'ticket-messages',
+  supportClients: 'support-clients',
+  timeEntries: 'time-entries',
+  cannedResponses: 'canned-responses',
+  ticketActivityLog: 'ticket-activity-log',
+  satisfactionSurveys: 'satisfaction-surveys',
+  knowledgeBase: 'knowledge-base',
+  chatMessages: 'chat-messages',
+  pendingEmails: 'pending-emails',
+  emailLogs: 'email-logs',
+  authLogs: 'auth-logs',
+  webhookEndpoints: 'webhook-endpoints',
+  slaPolicies: 'sla-policies',
+  macros: 'macros',
+  ticketStatuses: 'ticket-statuses',
+  users: 'users',
+  media: 'media',
+}
+
+/**
+ * Resolve collection slugs merging user overrides with defaults.
+ */
+export function resolveSlugs(
+  overrides?: Partial<CollectionSlugs>,
+): CollectionSlugs {
+  return { ...DEFAULT_SLUGS, ...overrides }
+}

package/src/utils/webhookDispatcher.ts

@@ -0,0 +1,120 @@
+import crypto from 'crypto'
+import type { BasePayload } from 'payload'
+import type { CollectionSlugs } from './slugs'
+
+type WebhookEvent = 'ticket_created' | 'ticket_resolved' | 'ticket_replied' | 'sla_breached'
+
+/**
+ * Dispatch outbound webhooks for a given event.
+ * Fetches all active webhook endpoints matching the event,
+ * POSTs JSON to each with optional HMAC-SHA256 signature.
+ * Fire-and-forget: errors are logged but never thrown.
+ *
+ * @param data - Payload data to send
+ * @param event - Webhook event type
+ * @param payload - Payload instance
+ * @param slugs - Collection slugs for dynamic collection references
+ */
+export function dispatchWebhook(
+  data: Record<string, unknown>,
+  event: WebhookEvent,
+  payload: BasePayload,
+  slugs: CollectionSlugs,
+): void {
+  // Fire and forget — do not await
+  void _dispatch(data, event, payload, slugs)
+}
+
+async function _dispatch(
+  data: Record<string, unknown>,
+  event: WebhookEvent,
+  payload: BasePayload,
+  slugs: CollectionSlugs,
+): Promise<void> {
+  try {
+    const { docs: endpoints } = await payload.find({
+      collection: slugs.webhookEndpoints as any,
+      where: {
+        and: [
+          { active: { equals: true } },
+          { events: { contains: event } },
+        ],
+      },
+      limit: 50,
+      depth: 0,
+      overrideAccess: true,
+    })
+
+    if (endpoints.length === 0) return
+
+    const body = JSON.stringify({ event, data, timestamp: new Date().toISOString() })
+
+    for (const endpoint of endpoints) {
+      void _sendToEndpoint(endpoint as any, body, payload, slugs)
+    }
+  } catch (err) {
+    console.error(`[webhook] Failed to fetch endpoints for event ${event}:`, err)
+  }
+}
+
+async function _sendToEndpoint(
+  endpoint: { id: number | string; url: string; secret?: string | null; name?: string | null },
+  body: string,
+  payload: BasePayload,
+  slugs: CollectionSlugs,
+): Promise<void> {
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      'User-Agent': 'PayloadSupport-Webhook/1.0',
+    }
+
+    // Sign payload with HMAC-SHA256 if secret is configured
+    if (endpoint.secret) {
+      const signature = crypto
+        .createHmac('sha256', endpoint.secret)
+        .update(body)
+        .digest('hex')
+      headers['X-Webhook-Signature'] = signature
+    }
+
+    const response = await fetch(endpoint.url, {
+      method: 'POST',
+      headers,
+      body,
+      signal: AbortSignal.timeout(10000), // 10s timeout
+    })
+
+    // Update last triggered info on the endpoint
+    await payload.update({
+      collection: slugs.webhookEndpoints as any,
+      id: endpoint.id,
+      data: {
+        lastTriggeredAt: new Date().toISOString(),
+        lastStatus: response.status,
+      },
+      overrideAccess: true,
+    })
+
+    if (!response.ok) {
+      console.warn(`[webhook] ${endpoint.name || endpoint.url} returned ${response.status}`)
+    }
+  } catch (err) {
+    console.error(`[webhook] Failed to call ${endpoint.name || endpoint.url}:`, err)
+
+    // Still update with error status
+    try {
+      await payload.update({
+        collection: slugs.webhookEndpoints as any,
+        id: endpoint.id,
+        data: {
+          lastTriggeredAt: new Date().toISOString(),
+          lastStatus: 0,
+        },
+        overrideAccess: true,
+      })
+    } catch {
+      // Ignore secondary error
+    }
+  }
+}

package/src/views/BillingView/client.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import React, { useState, useCallback } from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s 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 }
+
+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] } }
+
+export const BillingClient: React.FC = () => {
+  const { t } = useTranslation()
+  const [from, setFrom] = useState(() => getMonthRange(0).from)
+  const [to, setTo] = useState(() => getMonthRange(0).to)
+  const [projectId, setProjectId] = useState('')
+  const [rate, setRate] = useState(60)
+  const [data, setData] = useState<BillingData | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [projects, setProjects] = useState<ProjectOption[]>([])
+  const [projectsLoaded, setProjectsLoaded] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  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) }
+    setProjectsLoaded(true)
+  }, [projectsLoaded])
+
+  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) }
+    setLoading(false)
+  }, [from, to, projectId])
+
+  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)]
+    for (const group of data.groups) {
+      lines.push('', `PROJET : ${group.project?.name || 'Sans projet'}`)
+      if (group.client?.company) lines.push(`Client : ${group.client.company}`)
+      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('', '='.repeat(50), `TOTAL : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)} EUR`)
+    navigator.clipboard.writeText(lines.join('\n'))
+    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 },
+  }
+
+  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>
+
+      <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>
+        </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>
+      </div>
+
+      {data && (
+        <>
+          {data.groups.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('billing.empty')}</div> : (
+            <>
+              {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>
+                  <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>
+                    <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>
+                      )))}
+                    </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>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/views/BillingView/index.tsx

@@ -0,0 +1,33 @@
+import type { AdminViewServerProps } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { redirect } from 'next/navigation'
+import React from 'react'
+import { AdminErrorBoundary } from '../shared/ErrorBoundary'
+import { BillingClient } from './client'
+
+export const BillingView: React.FC<AdminViewServerProps> = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult
+
+  if (!req.user) {
+    redirect('/admin/login')
+  }
+
+  return (
+    <DefaultTemplate
+      i18n={req.i18n}
+      locale={initPageResult.locale}
+      params={{}}
+      payload={req.payload}
+      permissions={initPageResult.permissions}
+      searchParams={{}}
+      user={req.user}
+      visibleEntities={visibleEntities}
+    >
+      <AdminErrorBoundary viewName="BillingView">
+        <BillingClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default BillingView