@consilioweb/payload-support 0.5.1

package/src/collections/TimeEntries.ts

@@ -0,0 +1,105 @@
+import type { CollectionConfig, CollectionAfterChangeHook } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs'
+
+// ─── Hooks ───────────────────────────────────────────────
+
+function createRecalculateTicketTime(slugs: CollectionSlugs): CollectionAfterChangeHook {
+  return async ({ doc, req }) => {
+    if (!doc.ticket) return
+
+    const { payload } = req
+    const ticketId = typeof doc.ticket === 'object' ? doc.ticket.id : doc.ticket
+
+    // Sum all time entries for this ticket, paginating to avoid loading all at once
+    let totalMinutes = 0
+    let page = 1
+    let hasMore = true
+
+    while (hasMore) {
+      const entries = await payload.find({
+        collection: slugs.timeEntries,
+        where: { ticket: { equals: ticketId } },
+        limit: 100,
+        page,
+        depth: 0,
+        overrideAccess: true,
+        select: { duration: true },
+      })
+
+      for (const entry of entries.docs) {
+        totalMinutes += ((entry.duration as number) || 0)
+      }
+
+      hasMore = entries.hasNextPage ?? false
+      page++
+    }
+
+    await payload.update({
+      collection: slugs.tickets,
+      id: ticketId,
+      data: { totalTimeMinutes: totalMinutes },
+      overrideAccess: true,
+    })
+  }
+}
+
+// ─── Collection factory ──────────────────────────────────
+
+export function createTimeEntriesCollection(slugs: CollectionSlugs): CollectionConfig {
+  return {
+    slug: slugs.timeEntries,
+    labels: {
+      singular: 'Entrée de temps',
+      plural: 'Entrées de temps',
+    },
+    admin: {
+      group: 'Gestion',
+      defaultColumns: ['ticket', 'duration', 'description', 'date'],
+    },
+    fields: [
+      {
+        name: 'ticket',
+        type: 'relationship',
+        relationTo: slugs.tickets,
+        required: true,
+        label: 'Ticket',
+      },
+      {
+        type: 'row',
+        fields: [
+          {
+            name: 'duration',
+            type: 'number',
+            required: true,
+            label: 'Durée (minutes)',
+            min: 1,
+            admin: { width: '50%' },
+          },
+          {
+            name: 'date',
+            type: 'date',
+            required: true,
+            label: 'Date',
+            defaultValue: () => new Date().toISOString(),
+            admin: { width: '50%', date: { displayFormat: 'dd/MM/yyyy' } },
+          },
+        ],
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description du travail',
+      },
+    ],
+    hooks: {
+      afterChange: [createRecalculateTicketTime(slugs)],
+    },
+    access: {
+      create: ({ req }) => req.user?.collection === slugs.users,
+      read: ({ req }) => req.user?.collection === slugs.users,
+      update: ({ req }) => req.user?.collection === slugs.users,
+      delete: ({ req }) => req.user?.collection === slugs.users,
+    },
+    timestamps: true,
+  }
+}

package/src/collections/WebhookEndpoints.ts

@@ -0,0 +1,96 @@
+import type { CollectionConfig } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs'
+
+// ─── Collection factory ──────────────────────────────────
+
+export function createWebhookEndpointsCollection(slugs: CollectionSlugs): CollectionConfig {
+  return {
+    slug: slugs.webhookEndpoints,
+    labels: {
+      singular: 'Webhook',
+      plural: 'Webhooks',
+    },
+    admin: {
+      useAsTitle: 'name',
+      group: 'Support',
+      defaultColumns: ['name', 'url', 'events', 'active', 'lastTriggeredAt', 'lastStatus'],
+    },
+    access: {
+      create: ({ req }) => req.user?.collection === slugs.users,
+      read: ({ req }) => req.user?.collection === slugs.users,
+      update: ({ req }) => req.user?.collection === slugs.users,
+      delete: ({ req }) => req.user?.collection === slugs.users,
+    },
+    fields: [
+      {
+        name: 'name',
+        type: 'text',
+        required: true,
+        label: 'Nom',
+        admin: {
+          description: 'Ex: Slack notifications, n8n workflow…',
+        },
+      },
+      {
+        name: 'url',
+        type: 'text',
+        required: true,
+        label: 'URL',
+        admin: {
+          description: 'URL du webhook à appeler (POST)',
+        },
+      },
+      {
+        name: 'secret',
+        type: 'text',
+        label: 'Secret HMAC',
+        admin: {
+          description: 'Secret optionnel pour signer les payloads (HMAC-SHA256, header X-Webhook-Signature)',
+        },
+      },
+      {
+        name: 'events',
+        type: 'select',
+        hasMany: true,
+        required: true,
+        label: 'Événements',
+        options: [
+          { label: 'Ticket créé', value: 'ticket_created' },
+          { label: 'Ticket résolu', value: 'ticket_resolved' },
+          { label: 'Réponse au ticket', value: 'ticket_replied' },
+          { label: 'Ticket assigné', value: 'ticket_assigned' },
+          { label: 'SLA dépassé', value: 'sla_breached' },
+        ],
+        admin: {
+          description: 'Événements qui déclenchent ce webhook',
+        },
+      },
+      {
+        name: 'active',
+        type: 'checkbox',
+        defaultValue: true,
+        label: 'Actif',
+      },
+      {
+        name: 'lastTriggeredAt',
+        type: 'date',
+        label: 'Dernier déclenchement',
+        admin: {
+          readOnly: true,
+          date: { displayFormat: 'dd/MM/yyyy HH:mm' },
+          position: 'sidebar',
+        },
+      },
+      {
+        name: 'lastStatus',
+        type: 'number',
+        label: 'Dernier statut HTTP',
+        admin: {
+          readOnly: true,
+          position: 'sidebar',
+        },
+      },
+    ],
+    timestamps: true,
+  }
+}

package/src/collections/index.ts

@@ -0,0 +1,16 @@
+export { createTicketsCollection } from './Tickets'
+export { createTicketMessagesCollection } from './TicketMessages'
+export { createSupportClientsCollection } from './SupportClients'
+export { createTimeEntriesCollection } from './TimeEntries'
+export { createCannedResponsesCollection } from './CannedResponses'
+export { createTicketActivityLogCollection } from './TicketActivityLog'
+export { createSatisfactionSurveysCollection } from './SatisfactionSurveys'
+export { createKnowledgeBaseCollection } from './KnowledgeBase'
+export { createChatMessagesCollection } from './ChatMessages'
+export { createPendingEmailsCollection } from './PendingEmails'
+export { createEmailLogsCollection } from './EmailLogs'
+export { createAuthLogsCollection } from './AuthLogs'
+export { createWebhookEndpointsCollection } from './WebhookEndpoints'
+export { createSlaPoliciesCollection } from './SlaPolicies'
+export { createMacrosCollection } from './Macros'
+export { createTicketStatusesCollection } from './TicketStatuses'

package/src/components/TicketConversation/components/AISummaryPanel.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import React from 'react'
+import { s } from '../constants'
+
+interface AISummaryPanelProps {
+  showAiSummary: boolean
+  setShowAiSummary: (v: boolean) => void
+  aiSummary: string
+  aiGenerating: boolean
+  aiSaving: boolean
+  aiSaved: boolean
+  handleAiGenerate: () => void
+  handleAiSave: () => void
+}
+
+export function AISummaryPanel({
+  showAiSummary, setShowAiSummary, aiSummary, aiGenerating, aiSaving, aiSaved,
+  handleAiGenerate, handleAiSave,
+}: AISummaryPanelProps) {
+  return (
+    <div style={{ marginBottom: '14px' }}>
+      <button
+        onClick={() => { setShowAiSummary(!showAiSummary); if (!showAiSummary && !aiSummary) handleAiGenerate() }}
+        style={{
+          ...s.ghostBtn('#7c3aed', false),
+          fontSize: '12px',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+      >
+        {showAiSummary ? 'Masquer la synthèse IA' : 'Synthèse IA'}
+      </button>
+      {showAiSummary && (
+        <div style={{
+          marginTop: '10px', padding: '14px 18px', borderRadius: '8px',
+          backgroundColor: '#faf5ff', border: '1px solid #e9d5ff',
+        }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+            <h4 style={{ fontSize: '13px', fontWeight: 600, color: '#7c3aed', margin: 0 }}>
+              Synthèse IA
+            </h4>
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <button
+                onClick={handleAiGenerate}
+                disabled={aiGenerating}
+                style={{ ...s.outlineBtn('#7c3aed', aiGenerating), fontSize: '11px', padding: '4px 10px' }}
+              >
+                {aiGenerating ? 'Génération...' : 'Régénérer'}
+              </button>
+              {aiSummary && !aiGenerating && (
+                <button
+                  onClick={handleAiSave}
+                  disabled={aiSaving || aiSaved}
+                  style={{ ...s.btn(aiSaved ? '#16a34a' : '#2563eb', aiSaving), fontSize: '11px', padding: '4px 10px' }}
+                >
+                  {aiSaved ? 'Sauvegardé' : aiSaving ? 'Sauvegarde...' : 'Sauvegarder (note interne)'}
+                </button>
+              )}
+            </div>
+          </div>
+          {aiGenerating ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#7c3aed', fontSize: '13px' }}>
+              Analyse de la conversation en cours...
+            </div>
+          ) : aiSummary ? (
+            <div
+              style={{ fontSize: '13px', lineHeight: '1.7', color: '#1e1b4b', whiteSpace: 'pre-wrap' }}
+              dangerouslySetInnerHTML={{
+                __html: aiSummary
+                  .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                  .replace(/\n/g, '<br/>'),
+              }}
+            />
+          ) : (
+            <p style={{ color: '#999', fontStyle: 'italic', fontSize: '13px', margin: 0 }}>
+              Cliquez sur &quot;Régénérer&quot; pour lancer l&apos;analyse
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TicketConversation/components/ActionPanels.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import React, { useRef } from 'react'
+import { s } from '../constants'
+
+// ========== MERGE PANEL ==========
+interface MergePanelProps {
+  mergeTarget: string
+  setMergeTarget: (v: string) => void
+  mergeTargetInfo: { id: number; ticketNumber: string; subject: string } | null
+  setMergeTargetInfo: (v: null) => void
+  mergeError: string
+  setMergeError: (v: string) => void
+  merging: boolean
+  handleMergeLookup: () => void
+  handleMerge: () => void
+}
+
+export function MergePanel({
+  mergeTarget, setMergeTarget, mergeTargetInfo, setMergeTargetInfo,
+  mergeError, setMergeError, merging, handleMergeLookup, handleMerge,
+}: MergePanelProps) {
+  return (
+    <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#fdf2f8', border: '1px solid #fbcfe8', marginBottom: '14px' }}>
+      <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '10px', color: '#831843' }}>Fusionner ce ticket dans un autre</h4>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
+        <input
+          type="text"
+          value={mergeTarget}
+          onChange={(e) => { setMergeTarget(e.target.value); setMergeTargetInfo(null); setMergeError('') }}
+          placeholder="TK-0001"
+          style={{ ...s.input, width: '130px' }}
+        />
+        <button onClick={handleMergeLookup} style={{ ...s.outlineBtn('#ec4899'), fontSize: '12px', padding: '6px 14px' }}>
+          Rechercher
+        </button>
+        {mergeError && <span style={{ fontSize: '12px', color: '#be185d', fontWeight: 600 }}>{mergeError}</span>}
+      </div>
+      {mergeTargetInfo && (
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <span style={{ fontSize: '13px', fontWeight: 600 }}>
+            {mergeTargetInfo.ticketNumber} — {mergeTargetInfo.subject}
+          </span>
+          <button onClick={handleMerge} disabled={merging} style={{ ...s.btn('#ec4899', merging), color: '#fff', fontSize: '12px', padding: '6px 14px' }}>
+            {merging ? 'Fusion...' : 'Confirmer la fusion'}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ========== EXTERNAL MESSAGE PANEL ==========
+interface ExtMessagePanelProps {
+  extMsgBody: string
+  setExtMsgBody: (v: string) => void
+  extMsgAuthor: 'client' | 'admin'
+  setExtMsgAuthor: (v: 'client' | 'admin') => void
+  extMsgDate: string
+  setExtMsgDate: (v: string) => void
+  extMsgFiles: File[]
+  setExtMsgFiles: React.Dispatch<React.SetStateAction<File[]>>
+  sendingExtMsg: boolean
+  handleSendExtMsg: () => void
+  handleExtFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export function ExtMessagePanel({
+  extMsgBody, setExtMsgBody, extMsgAuthor, setExtMsgAuthor,
+  extMsgDate, setExtMsgDate, extMsgFiles, setExtMsgFiles,
+  sendingExtMsg, handleSendExtMsg, handleExtFileChange,
+}: ExtMessagePanelProps) {
+  const extFileInputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#eef2ff', border: '1px solid #c7d2fe', marginBottom: '14px' }}>
+      <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '10px', color: '#312e81' }}>Ajouter un message reçu (email, SMS, WhatsApp...)</h4>
+      <textarea
+        value={extMsgBody}
+        onChange={(e) => setExtMsgBody(e.target.value)}
+        placeholder="Coller le contenu du message reçu..."
+        rows={3}
+        style={{ ...s.input, width: '100%', resize: 'vertical', marginBottom: '10px' }}
+      />
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', marginBottom: '10px' }}>
+        <select value={extMsgAuthor} onChange={(e) => setExtMsgAuthor(e.target.value as 'client' | 'admin')} style={{ ...s.input, fontSize: '12px' }}>
+          <option value="client">Envoyé par le client</option>
+          <option value="admin">Envoyé par le support</option>
+        </select>
+        <input
+          type="datetime-local"
+          value={extMsgDate}
+          onChange={(e) => setExtMsgDate(e.target.value)}
+          style={{ ...s.input, fontSize: '12px' }}
+        />
+        <input ref={extFileInputRef} type="file" multiple onChange={handleExtFileChange} style={{ display: 'none' }} accept="image/*,.pdf,.doc,.docx,.txt,.zip" />
+        <button type="button" onClick={() => extFileInputRef.current?.click()} style={{ ...s.ghostBtn('#6b7280'), fontSize: '12px', padding: '6px 12px' }}>
+          + PJ
+        </button>
+      </div>
+      {extMsgFiles.length > 0 && (
+        <div style={{ marginBottom: '10px', display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+          {extMsgFiles.map((file, i) => (
+            <span key={i} style={{ ...s.badge('#f1f5f9', '#374151'), display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+              {file.name}
+              <button type="button" onClick={() => setExtMsgFiles((prev) => prev.filter((_, idx) => idx !== i))} style={{ border: 'none', background: 'none', color: '#ef4444', fontWeight: 700, cursor: 'pointer', fontSize: '14px', lineHeight: 1 }}>&times;</button>
+            </span>
+          ))}
+        </div>
+      )}
+      <button onClick={handleSendExtMsg} disabled={sendingExtMsg || !extMsgBody.trim()} style={s.btn('#818cf8', sendingExtMsg || !extMsgBody.trim())}>
+        {sendingExtMsg ? 'Ajout...' : 'Ajouter (sans notification)'}
+      </button>
+    </div>
+  )
+}
+
+// ========== SNOOZE PANEL ==========
+interface SnoozePanelProps {
+  snoozeSaving: boolean
+  handleSnooze: (days: number | null, customDate?: string) => void
+}
+
+export function SnoozePanel({ snoozeSaving, handleSnooze }: SnoozePanelProps) {
+  return (
+    <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#faf5ff', border: '1px solid #e9d5ff', marginBottom: '14px' }}>
+      <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '10px', color: '#5b21b6' }}>Snooze — masquer temporairement</h4>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
+        <button onClick={() => handleSnooze(1)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#8b5cf6', snoozeSaving), fontSize: '12px' }}>1 jour</button>
+        <button onClick={() => handleSnooze(3)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#8b5cf6', snoozeSaving), fontSize: '12px' }}>3 jours</button>
+        <button onClick={() => handleSnooze(7)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#8b5cf6', snoozeSaving), fontSize: '12px' }}>1 semaine</button>
+        <input
+          type="datetime-local"
+          onChange={(e) => { if (e.target.value) handleSnooze(null, e.target.value) }}
+          style={{ ...s.input, fontSize: '12px' }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/TicketConversation/components/ActivityLog.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { ActivityEntry } from '../types'
+import { C, s } from '../constants'
+
+export function ActivityLog({ activityLog }: { activityLog: ActivityEntry[] }) {
+  const [showActivity, setShowActivity] = useState(false)
+
+  return (
+    <div style={s.section}>
+      <h4 style={{ ...s.sectionTitle, cursor: 'pointer' }} onClick={() => setShowActivity(!showActivity)}>
+        Historique <span style={s.badge('#f1f5f9', '#475569')}>{activityLog.length}</span>
+        <span style={{ fontSize: '12px', color: C.textMuted, transition: 'transform 0.2s', display: 'inline-block', transform: showActivity ? 'rotate(90deg)' : 'none' }}>&#9654;</span>
+      </h4>
+
+      {showActivity && (
+        activityLog.length === 0 ? (
+          <p style={{ fontSize: '12px', color: C.textMuted, fontStyle: 'italic' }}>Aucune activité enregistrée.</p>
+        ) : (
+          <div style={{ fontSize: '12px', display: 'flex', flexDirection: 'column', gap: '2px', borderLeft: '2px solid #bfdbfe', paddingLeft: '14px', marginLeft: '4px' }}>
+            {activityLog.map((entry) => (
+              <div key={entry.id} style={{ display: 'flex', gap: '10px', alignItems: 'center', padding: '5px 0', borderBottom: '1px solid #f8fafc' }}>
+                <span style={{ color: C.textMuted, fontSize: '11px', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                  {new Date(entry.createdAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
+                </span>
+                <span style={s.badge(entry.actorType === 'admin' ? '#eff6ff' : '#dcfce7', entry.actorType === 'admin' ? '#1e40af' : '#166534')}>
+                  {entry.actorType || 'system'}
+                </span>
+                <span style={{ color: '#374151', fontWeight: 500 }}>{(entry.detail || entry.action).replace(/\[object Object\]/g, '(utilisateur)')}</span>
+                <span style={{ color: C.textMuted, fontSize: '11px' }}>{entry.actorEmail}</span>
+              </div>
+            ))}
+          </div>
+        )
+      )}
+    </div>
+  )
+}

package/src/components/TicketConversation/components/ClientBar.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import React from 'react'
+import type { ClientInfo } from '../types'
+import { C, s } from '../constants'
+
+export function ClientBar({ client }: { client: ClientInfo }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px',
+      borderRadius: '8px', backgroundColor: 'var(--theme-elevation-100)',
+      marginBottom: '16px', flexWrap: 'wrap',
+    }}>
+      <span style={{ fontSize: '16px' }}>&#128100;</span>
+      <span style={{ fontWeight: 700, fontSize: '13px', color: C.textPrimary }}>{client.company}</span>
+      <span style={{ color: C.textSecondary, fontSize: '13px' }}>
+        {client.firstName} {client.lastName}
+      </span>
+      <span style={{ color: C.textMuted, fontSize: '12px' }}>|</span>
+      <a href={`mailto:${client.email}`} style={{ color: '#2563eb', fontSize: '12px', fontWeight: 600, textDecoration: 'none' }}>{client.email}</a>
+      {client.phone && <span style={{ color: C.textSecondary, fontSize: '12px' }}>{client.phone}</span>}
+      <span style={{ marginLeft: 'auto', display: 'inline-flex', gap: '8px', alignItems: 'center' }}>
+        <a href={`/admin/collections/support-clients/${client.id}`} style={{ ...s.ghostBtn('#475569'), fontSize: '11px', padding: '4px 10px', textDecoration: 'none' }}>
+          Fiche client
+        </a>
+        <button
+          type="button"
+          onClick={() => window.open(`/api/admin/impersonate?clientId=${client.id}`, '_blank')}
+          style={{ ...s.ghostBtn('#7c3aed'), fontSize: '11px', padding: '4px 10px' }}
+          title="Se connecter au portail support en tant que ce client"
+        >
+          Voir en tant que client
+        </button>
+      </span>
+    </div>
+  )
+}

package/src/components/TicketConversation/components/ClientHistory.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { ClientInfo } from '../types'
+import { statusLabels, projectStatusLabels, C, s } from '../constants'
+
+interface ClientHistoryProps {
+  client: ClientInfo
+  clientTickets: Array<{ id: number; ticketNumber: string; subject: string; status: string; createdAt: string }>
+  clientProjects: Array<{ id: number; name: string; status: string }>
+  clientNotes: string
+  onNotesChange: (notes: string) => void
+  onNotesSave: () => void
+  savingNotes: boolean
+  notesSaved: boolean
+}
+
+export function ClientHistory({
+  client: _client, clientTickets, clientProjects, clientNotes, onNotesChange, onNotesSave, savingNotes, notesSaved,
+}: ClientHistoryProps) {
+  const [showClientHistory, setShowClientHistory] = useState(false)
+
+  return (
+    <div style={s.section}>
+      <button
+        type="button"
+        onClick={() => setShowClientHistory(!showClientHistory)}
+        style={{
+          background: 'none', border: `1px dashed ${C.border}`, borderRadius: '6px',
+          padding: '8px 14px', cursor: 'pointer', color: C.textSecondary, fontSize: '13px',
+          fontWeight: 600, width: '100%', textAlign: 'left',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        }}
+      >
+        <span>Historique client ({clientTickets.length} ticket{clientTickets.length !== 1 ? 's' : ''}, {clientProjects.length} projet{clientProjects.length !== 1 ? 's' : ''})</span>
+        <span style={{ fontSize: '12px', transition: 'transform 0.2s', display: 'inline-block', transform: showClientHistory ? 'rotate(90deg)' : 'none' }}>&#9654;</span>
+      </button>
+      {showClientHistory && (
+        <div style={{ marginTop: '10px', padding: '14px 18px', borderRadius: '8px', backgroundColor: C.white, border: `1px solid ${C.border}` }}>
+          {/* Past tickets */}
+          <h5 style={{ fontSize: '12px', fontWeight: 600, color: C.textSecondary, marginBottom: '8px' }}>Derniers tickets</h5>
+          {clientTickets.length === 0 ? (
+            <p style={{ fontSize: '12px', color: C.textMuted, fontStyle: 'italic', marginBottom: '14px' }}>Aucun autre ticket</p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '14px' }}>
+              {clientTickets.map((t) => {
+                const st = statusLabels[t.status] || statusLabels.open
+                return (
+                  <a
+                    key={t.id}
+                    href={`/admin/support/ticket?id=${t.id}`}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 10px',
+                      borderRadius: '6px', border: `1px solid ${C.border}`, textDecoration: 'none',
+                      fontSize: '12px', color: '#374151', backgroundColor: '#fafafa',
+                    }}
+                  >
+                    <span style={{ fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace", fontWeight: 600, color: C.textMuted, fontSize: '11px', whiteSpace: 'nowrap' }}>{t.ticketNumber}</span>
+                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 600 }}>{t.subject}</span>
+                    <span style={s.badge(st.bg, st.color)}>{st.label}</span>
+                    <span style={{ fontSize: '10px', color: C.textMuted, whiteSpace: 'nowrap' }}>
+                      {new Date(t.createdAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
+                    </span>
+                  </a>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Projects */}
+          <h5 style={{ fontSize: '12px', fontWeight: 600, color: C.textSecondary, marginBottom: '8px' }}>Projets</h5>
+          {clientProjects.length === 0 ? (
+            <p style={{ fontSize: '12px', color: C.textMuted, fontStyle: 'italic', marginBottom: '14px' }}>Aucun projet</p>
+          ) : (
+            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '14px' }}>
+              {clientProjects.map((p) => {
+                const ps = projectStatusLabels[p.status] || projectStatusLabels.active
+                return (
+                  <a
+                    key={p.id}
+                    href={`/admin/collections/projects/${p.id}`}
+                    style={{
+                      display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '5px 10px',
+                      borderRadius: '6px', border: `1px solid ${C.border}`, textDecoration: 'none',
+                      fontSize: '12px', fontWeight: 600, color: '#374151', backgroundColor: '#fafafa',
+                    }}
+                  >
+                    {p.name}
+                    <span style={s.badge(ps.bg, ps.color)}>{ps.label}</span>
+                  </a>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Notes */}
+          <h5 style={{ fontSize: '12px', fontWeight: 600, color: C.textSecondary, marginBottom: '8px' }}>Notes internes</h5>
+          <textarea
+            value={clientNotes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            rows={3}
+            style={{ ...s.input, width: '100%', resize: 'vertical', fontSize: '12px', marginBottom: '8px' }}
+            placeholder="Notes sur ce client..."
+          />
+          <button
+            type="button"
+            onClick={onNotesSave}
+            disabled={savingNotes}
+            style={{ ...s.btn(notesSaved ? '#16a34a' : C.blue, savingNotes), fontSize: '11px', padding: '5px 12px' }}
+          >
+            {notesSaved ? 'Sauvegarde OK' : savingNotes ? 'Sauvegarde...' : 'Sauvegarder les notes'}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}