@consilioweb/payload-support 0.7.0 → 0.8.1

package/src/collections/ClientSummaries.ts

@@ -0,0 +1,118 @@
+import type { CollectionConfig } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs.js'
+
+/**
+ * Client Intelligence Summaries
+ * Stores AI-generated summaries per client: recurring topics, patterns, satisfaction trends.
+ * Summaries are cached and refreshed on-demand or when a ticket is resolved.
+ */
+export function createClientSummariesCollection(slugs: CollectionSlugs): CollectionConfig {
+  return {
+    slug: 'client-summaries',
+    labels: { singular: 'Résumé client', plural: 'Résumés clients' },
+    admin: {
+      group: 'Support',
+      hidden: true, // Not directly editable — managed via API
+      defaultColumns: ['client', 'generatedAt', 'ticketCount'],
+      useAsTitle: 'clientName',
+    },
+    fields: [
+      {
+        name: 'client',
+        type: 'relationship',
+        relationTo: slugs.supportClients,
+        required: true,
+        unique: true,
+        index: true,
+        label: 'Client',
+      },
+      {
+        name: 'clientName',
+        type: 'text',
+        label: 'Nom client',
+        admin: { readOnly: true },
+      },
+      // ── AI-generated content ──
+      {
+        name: 'summary',
+        type: 'textarea',
+        label: 'Résumé global',
+        admin: { readOnly: true },
+      },
+      {
+        name: 'recurringTopics',
+        type: 'json',
+        label: 'Sujets récurrents',
+        admin: { readOnly: true },
+        // Array of { topic: string, count: number, lastSeen: string }
+      },
+      {
+        name: 'patterns',
+        type: 'json',
+        label: 'Patterns détectés',
+        admin: { readOnly: true },
+        // Array of strings: "Revient souvent pour X", "Préfère le tutoiement", etc.
+      },
+      {
+        name: 'keyFacts',
+        type: 'json',
+        label: 'Faits clés',
+        admin: { readOnly: true },
+        // Array of strings: "Hébergé chez OVH", "Site WordPress", etc.
+      },
+      // ── Stats ──
+      {
+        name: 'ticketCount',
+        type: 'number',
+        label: 'Nombre de tickets analysés',
+        defaultValue: 0,
+        admin: { readOnly: true },
+      },
+      {
+        name: 'messageCount',
+        type: 'number',
+        label: 'Nombre de messages analysés',
+        defaultValue: 0,
+        admin: { readOnly: true },
+      },
+      {
+        name: 'averageSatisfaction',
+        type: 'number',
+        label: 'Satisfaction moyenne',
+        admin: { readOnly: true },
+      },
+      {
+        name: 'firstTicketAt',
+        type: 'date',
+        label: 'Premier ticket',
+        admin: { readOnly: true },
+      },
+      {
+        name: 'lastTicketAt',
+        type: 'date',
+        label: 'Dernier ticket',
+        admin: { readOnly: true },
+      },
+      // ── Meta ──
+      {
+        name: 'generatedAt',
+        type: 'date',
+        label: 'Généré le',
+        admin: { readOnly: true, date: { displayFormat: 'dd/MM/yyyy HH:mm' } },
+      },
+      {
+        name: 'aiModel',
+        type: 'text',
+        label: 'Modèle IA utilisé',
+        admin: { readOnly: true },
+      },
+    ],
+    access: {
+      create: ({ req }) => req.user?.collection === 'users',
+      read: ({ req }) => req.user?.collection === 'users',
+      update: ({ req }) => req.user?.collection === 'users',
+      delete: ({ req }) => req.user?.collection === 'users',
+    },
+    timestamps: true,
+  }
+}

package/src/collections/Tickets.ts

@@ -343,6 +343,17 @@ function createFireTicketWebhooks(slugs: CollectionSlugs): CollectionAfterChange
           subject: doc.subject,
           previousStatus: previousDoc.status,
         })
+
+        // Invalidate client summary cache so it refreshes on next view
+        const clientId = typeof doc.client === 'object' ? doc.client?.id : doc.client
+        if (clientId) {
+          payload.update({
+            collection: 'client-summaries',
+            where: { client: { equals: clientId } },
+            data: { generatedAt: new Date(0).toISOString() }, // Force cache expiry
+            overrideAccess: true,
+          }).catch(() => { /* silent — collection might not exist yet */ })
+        }
       }
 
       // ticket_assigned

package/src/collections/index.ts

@@ -14,3 +14,4 @@ export { createWebhookEndpointsCollection } from './WebhookEndpoints'
 export { createSlaPoliciesCollection } from './SlaPolicies'
 export { createMacrosCollection } from './Macros'
 export { createTicketStatusesCollection } from './TicketStatuses'
+export { createClientSummariesCollection } from './ClientSummaries'

package/src/endpoints/client-intelligence.ts

@@ -0,0 +1,257 @@
+import type { Endpoint } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs'
+import { requireAdmin, handleAuthError } from '../utils/auth'
+import { readSupportSettings, type SupportSettings } from '../utils/readSettings'
+
+function getClient(aiSettings: SupportSettings['ai']) {
+  const Anthropic = require('@anthropic-ai/sdk').default
+  if (aiSettings.provider === 'ollama') {
+    const baseURL = process.env.OLLAMA_API_URL || 'https://ollama.orkelis.app/v1'
+    return new Anthropic({ apiKey: 'ollama', baseURL })
+  }
+  return new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })
+}
+
+function getModel(aiSettings: SupportSettings['ai']): string {
+  return aiSettings.model || 'claude-haiku-4-5-20251001'
+}
+
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000 // 24 hours
+
+/**
+ * GET /api/support/client-intelligence?clientId=X
+ * Returns cached summary or generates a new one.
+ *
+ * POST /api/support/client-intelligence?clientId=X
+ * Force-refreshes the summary.
+ */
+export function createClientIntelligenceEndpoint(slugs: CollectionSlugs): Endpoint[] {
+  const getHandler = async (req: any) => {
+    try {
+      requireAdmin(req, slugs)
+      const payload = req.payload
+      const url = new URL(req.url || '', 'http://localhost')
+      const clientId = url.searchParams.get('clientId')
+      if (!clientId) return Response.json({ error: 'clientId required' }, { status: 400 })
+
+      // Check cache
+      const existing = await payload.find({
+        collection: 'client-summaries',
+        where: { client: { equals: Number(clientId) } },
+        limit: 1,
+        depth: 0,
+        overrideAccess: true,
+      })
+
+      if (existing.docs.length > 0) {
+        const cached = existing.docs[0]
+        const age = Date.now() - new Date(cached.generatedAt || 0).getTime()
+        if (age < CACHE_TTL_MS) {
+          return Response.json({ ...cached, fromCache: true })
+        }
+      }
+
+      // Generate new summary
+      return await generateSummary(payload, clientId, slugs, existing.docs[0]?.id)
+    } catch (error) {
+      const authResponse = handleAuthError(error)
+      if (authResponse) return authResponse
+      console.error('[client-intelligence] Error:', error)
+      return Response.json({ error: 'Internal server error' }, { status: 500 })
+    }
+  }
+
+  const postHandler = async (req: any) => {
+    try {
+      requireAdmin(req, slugs)
+      const payload = req.payload
+      const body = await req.json?.() || {}
+      const clientId = body.clientId
+      if (!clientId) return Response.json({ error: 'clientId required' }, { status: 400 })
+
+      // Find existing to update
+      const existing = await payload.find({
+        collection: 'client-summaries',
+        where: { client: { equals: Number(clientId) } },
+        limit: 1,
+        depth: 0,
+        overrideAccess: true,
+      })
+
+      return await generateSummary(payload, clientId, slugs, existing.docs[0]?.id)
+    } catch (error) {
+      const authResponse = handleAuthError(error)
+      if (authResponse) return authResponse
+      console.error('[client-intelligence] Refresh error:', error)
+      return Response.json({ error: 'Internal server error' }, { status: 500 })
+    }
+  }
+
+  return [
+    { path: '/support/client-intelligence', method: 'get', handler: getHandler },
+    { path: '/support/client-intelligence', method: 'post', handler: postHandler },
+  ]
+}
+
+async function generateSummary(
+  payload: any,
+  clientId: string,
+  slugs: CollectionSlugs,
+  existingId?: number,
+) {
+  const aiSettings = (await readSupportSettings(payload)).ai
+  if (!aiSettings.enableSynthesis) {
+    return Response.json({ error: 'AI synthesis disabled in settings' }, { status: 400 })
+  }
+
+  // 1. Fetch client info
+  const client = await payload.findByID({
+    collection: slugs.supportClients,
+    id: Number(clientId),
+    depth: 0,
+    overrideAccess: true,
+  })
+  if (!client) return Response.json({ error: 'Client not found' }, { status: 404 })
+
+  const clientName = [client.firstName, client.lastName].filter(Boolean).join(' ') || client.company || client.email
+
+  // 2. Fetch all tickets for this client
+  const tickets = await payload.find({
+    collection: slugs.tickets,
+    where: { client: { equals: Number(clientId) } },
+    sort: '-createdAt',
+    limit: 50,
+    depth: 0,
+    overrideAccess: true,
+  })
+
+  if (tickets.totalDocs === 0) {
+    return Response.json({
+      summary: 'Aucun ticket pour ce client.',
+      recurringTopics: [],
+      patterns: [],
+      keyFacts: [],
+      ticketCount: 0,
+      messageCount: 0,
+    })
+  }
+
+  // 3. Fetch messages for recent tickets (last 20)
+  const ticketIds = tickets.docs.slice(0, 20).map((t: any) => t.id)
+  const messages = await payload.find({
+    collection: slugs.ticketMessages,
+    where: { ticket: { in: ticketIds.join(',') } },
+    sort: 'createdAt',
+    limit: 200,
+    depth: 0,
+    overrideAccess: true,
+  })
+
+  // 4. Fetch satisfaction surveys
+  let avgSatisfaction: number | null = null
+  try {
+    const surveys = await payload.find({
+      collection: slugs.satisfactionSurveys || 'satisfaction-surveys',
+      where: { client: { equals: Number(clientId) } },
+      limit: 50,
+      depth: 0,
+      overrideAccess: true,
+    })
+    if (surveys.totalDocs > 0) {
+      const ratings = surveys.docs.filter((s: any) => s.rating).map((s: any) => s.rating)
+      if (ratings.length > 0) avgSatisfaction = Math.round((ratings.reduce((a: number, b: number) => a + b, 0) / ratings.length) * 10) / 10
+    }
+  } catch { /* satisfaction collection might not exist */ }
+
+  // 5. Build context for AI
+  const ticketSummaries = tickets.docs.map((t: any) => {
+    const msgs = messages.docs.filter((m: any) => {
+      const mTicket = typeof m.ticket === 'object' ? m.ticket.id : m.ticket
+      return mTicket === t.id
+    })
+    const clientMsgs = msgs.filter((m: any) => m.authorType === 'client' || m.authorType === 'email')
+    const adminMsgs = msgs.filter((m: any) => m.authorType === 'admin')
+    return `Ticket ${t.ticketNumber} (${t.status}) — "${t.subject}"
+  Client: ${clientMsgs.map((m: any) => m.body?.slice(0, 200)).join(' | ')}
+  Admin: ${adminMsgs.map((m: any) => m.body?.slice(0, 200)).join(' | ')}`
+  }).join('\n\n')
+
+  const prompt = `Tu es un assistant d'analyse CRM pour un support technique. Analyse l'historique complet de ce client et génère un rapport structuré.
+
+CLIENT : ${clientName} (${client.company || 'pas de société'})
+Email : ${client.email}
+Nombre de tickets : ${tickets.totalDocs}
+Satisfaction moyenne : ${avgSatisfaction ?? 'non évaluée'}
+
+HISTORIQUE DES TICKETS :
+${ticketSummaries.slice(0, 4000)}
+
+Réponds en JSON strict (pas de markdown, pas de commentaires) avec cette structure :
+{
+  "summary": "Résumé global du client en 2-3 phrases (qui il est, ce qu'il demande habituellement, son niveau de satisfaction)",
+  "recurringTopics": [{"topic": "nom du sujet", "count": N, "lastSeen": "YYYY-MM-DD"}],
+  "patterns": ["pattern 1 observé", "pattern 2 observé"],
+  "keyFacts": ["fait clé 1 sur le client", "fait clé 2"]
+}
+
+Sois factuel. Ne dépasse pas 5 items par tableau. Réponds UNIQUEMENT avec le JSON.`
+
+  // 6. Call AI
+  const anthropic = getClient(aiSettings)
+  const model = getModel(aiSettings)
+
+  const res = await anthropic.messages.create({
+    model,
+    max_tokens: 1000,
+    messages: [{ role: 'user', content: prompt }],
+  })
+
+  const rawText = res.content[0].type === 'text' ? res.content[0].text : '{}'
+
+  // 7. Parse AI response
+  let parsed: any = {}
+  try {
+    // Extract JSON from potential markdown fences
+    const jsonMatch = rawText.match(/\{[\s\S]*\}/)
+    if (jsonMatch) parsed = JSON.parse(jsonMatch[0])
+  } catch {
+    parsed = { summary: rawText, recurringTopics: [], patterns: [], keyFacts: [] }
+  }
+
+  // 8. Save to DB
+  const data = {
+    client: Number(clientId),
+    clientName,
+    summary: parsed.summary || 'Résumé non disponible',
+    recurringTopics: parsed.recurringTopics || [],
+    patterns: parsed.patterns || [],
+    keyFacts: parsed.keyFacts || [],
+    ticketCount: tickets.totalDocs,
+    messageCount: messages.totalDocs,
+    averageSatisfaction: avgSatisfaction,
+    firstTicketAt: tickets.docs[tickets.docs.length - 1]?.createdAt || null,
+    lastTicketAt: tickets.docs[0]?.createdAt || null,
+    generatedAt: new Date().toISOString(),
+    aiModel: model,
+  }
+
+  let saved: any
+  if (existingId) {
+    saved = await payload.update({
+      collection: 'client-summaries',
+      id: existingId,
+      data,
+      overrideAccess: true,
+    })
+  } else {
+    saved = await payload.create({
+      collection: 'client-summaries',
+      data,
+      overrideAccess: true,
+    })
+  }
+
+  console.log(`[client-intelligence] Generated summary for ${clientName} (${tickets.totalDocs} tickets, ${messages.totalDocs} messages)`)
+
+  return Response.json({ ...saved, fromCache: false })
+}

package/src/endpoints/index.ts

@@ -3,6 +3,7 @@ import type { CollectionSlugs } from '../utils/slugs'
 import type { SupportFeatures } from '../types'
 
 import { createAiEndpoint } from './ai'
+import { createClientIntelligenceEndpoint } from './client-intelligence'
 import { createSearchEndpoint } from './search'
 import { createBulkActionEndpoint } from './bulk-action'
 import { createMergeTicketsEndpoint } from './merge-tickets'
@@ -117,7 +118,10 @@ export function createSupportEndpoints(slugs: CollectionSlugs, options?: Support
   ]
 
   // Conditional endpoints based on feature flags
-  if (!f || f.ai !== false) endpoints.push(createAiEndpoint(slugs))
+  if (!f || f.ai !== false) {
+    endpoints.push(createAiEndpoint(slugs))
+    endpoints.push(...createClientIntelligenceEndpoint(slugs))
+  }
   if (!f || f.bulkActions !== false) endpoints.push(createBulkActionEndpoint(slugs))
   if (!f || f.merge !== false) endpoints.push(createMergeTicketsEndpoint(slugs))
   if (!f || f.splitTicket !== false) endpoints.push(createSplitTicketEndpoint(slugs))

package/src/plugin.ts

@@ -20,6 +20,7 @@ import {
   createSlaPoliciesCollection,
   createMacrosCollection,
   createTicketStatusesCollection,
+  createClientSummariesCollection,
 } from './collections'
 
 function viewConfig(component: string, path: string): AdminViewConfig {
@@ -99,6 +100,7 @@ export function supportPlugin(config?: SupportPluginConfig): Plugin {
     if (features.customStatuses !== false) supportCollections.push(createTicketStatusesCollection(slugs))
     if (features.chat) supportCollections.push(createChatMessagesCollection(slugs))
     if (features.pendingEmails) supportCollections.push(createPendingEmailsCollection(slugs))
+    if (features.ai !== false) supportCollections.push(createClientSummariesCollection(slugs))
 
     // ─── Admin Views ─────────────────────────────────────
 

package/src/views/CrmView/client.tsx

@@ -18,6 +18,19 @@ const statusColors: Record<string, string> = { open: '#3b82f6', waiting_client:
 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}m` }
 function timeAgo(dateStr: string): string { const diff = Date.now() - new Date(dateStr).getTime(); const days = Math.floor(diff / 86400000); if (days === 0) return "Aujourd'hui"; if (days === 1) return 'Hier'; if (days < 30) return `Il y a ${days}j`; return `Il y a ${Math.floor(days / 30)} mois` }
 
+interface ClientSummary {
+  summary: string
+  recurringTopics: { topic: string; count: number; lastSeen: string }[]
+  patterns: string[]
+  keyFacts: string[]
+  ticketCount: number
+  messageCount: number
+  averageSatisfaction: number | null
+  generatedAt: string
+  aiModel: string
+  fromCache?: boolean
+}
+
 export const CrmClient: React.FC = () => {
   const { t } = useTranslation()
   const [clients, setClients] = useState<Client[]>([])
@@ -28,6 +41,10 @@ export const CrmClient: React.FC = () => {
   const [detailLoading, setDetailLoading] = useState(false)
   const [showMerge, setShowMerge] = useState(false)
   const [mergeSearch, setMergeSearch] = useState('')
+  // Client Intelligence
+  const [intelligence, setIntelligence] = useState<ClientSummary | null>(null)
+  const [intelLoading, setIntelLoading] = useState(false)
+  const [intelRefreshing, setIntelRefreshing] = useState(false)
   const [mergeResults, setMergeResults] = useState<Client[]>([])
   const [merging, setMerging] = useState(false)
   const [mergeSuccess, setMergeSuccess] = useState('')
@@ -66,7 +83,22 @@ export const CrmClient: React.FC = () => {
     setDetailLoading(false)
   }, [])
 
-  const selectClient = (id: number) => { setSelectedId(id); fetchDetail(id); setShowMerge(false); setMergeSuccess('') }
+  const fetchIntelligence = useCallback(async (clientId: number, force = false) => {
+    if (force) setIntelRefreshing(true); else setIntelLoading(true)
+    try {
+      const method = force ? 'POST' : 'GET'
+      const url = force
+        ? '/api/support/client-intelligence'
+        : `/api/support/client-intelligence?clientId=${clientId}`
+      const opts: RequestInit = { method, credentials: 'include', headers: { 'Content-Type': 'application/json' } }
+      if (force) opts.body = JSON.stringify({ clientId })
+      const res = await fetch(url, opts)
+      if (res.ok) setIntelligence(await res.json())
+    } catch { /* silent */ }
+    setIntelLoading(false); setIntelRefreshing(false)
+  }, [])
+
+  const selectClient = (id: number) => { setSelectedId(id); fetchDetail(id); fetchIntelligence(id); setShowMerge(false); setMergeSuccess(''); setIntelligence(null) }
 
   useEffect(() => {
     if (!mergeSearch || mergeSearch.length < 2) { setMergeResults([]); return }
@@ -178,6 +210,81 @@ export const CrmClient: React.FC = () => {
                   ))}
                 </div>
 
+                {/* Client Intelligence */}
+                <div style={{ padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 16, background: 'linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%)' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                    <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
+                      <span style={{ fontSize: 16 }}>🧠</span> Résumé IA
+                    </h3>
+                    <button
+                      onClick={() => selectedId && fetchIntelligence(selectedId, true)}
+                      disabled={intelRefreshing}
+                      style={{ padding: '4px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', fontSize: 11, fontWeight: 600, cursor: 'pointer', color: 'var(--theme-text)' }}
+                    >
+                      {intelRefreshing ? '⏳ Génération...' : '🔄 Actualiser'}
+                    </button>
+                  </div>
+                  {intelLoading ? (
+                    <div style={{ padding: 20, textAlign: 'center', color: 'var(--theme-elevation-400)', fontSize: 13 }}>Chargement du résumé...</div>
+                  ) : intelligence ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                      {/* Summary */}
+                      <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: 'var(--theme-text)' }}>{intelligence.summary}</p>
+
+                      {/* Recurring Topics */}
+                      {intelligence.recurringTopics && intelligence.recurringTopics.length > 0 && (
+                        <div>
+                          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--theme-elevation-500)', marginBottom: 6, textTransform: 'uppercase' }}>Sujets récurrents</div>
+                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                            {intelligence.recurringTopics.map((t, i) => (
+                              <span key={i} style={{ padding: '3px 10px', borderRadius: 12, background: 'rgba(37,99,235,0.08)', color: '#2563eb', fontSize: 11, fontWeight: 600 }}>
+                                {t.topic} ({t.count}x)
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Patterns */}
+                      {intelligence.patterns && intelligence.patterns.length > 0 && (
+                        <div>
+                          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--theme-elevation-500)', marginBottom: 6, textTransform: 'uppercase' }}>Patterns détectés</div>
+                          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, color: 'var(--theme-text)', lineHeight: 1.8 }}>
+                            {intelligence.patterns.map((p, i) => <li key={i}>{p}</li>)}
+                          </ul>
+                        </div>
+                      )}
+
+                      {/* Key Facts */}
+                      {intelligence.keyFacts && intelligence.keyFacts.length > 0 && (
+                        <div>
+                          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--theme-elevation-500)', marginBottom: 6, textTransform: 'uppercase' }}>Faits clés</div>
+                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                            {intelligence.keyFacts.map((f, i) => (
+                              <span key={i} style={{ padding: '3px 10px', borderRadius: 12, background: 'rgba(22,163,74,0.08)', color: '#16a34a', fontSize: 11, fontWeight: 600 }}>
+                                {f}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Meta */}
+                      <div style={{ fontSize: 10, color: 'var(--theme-elevation-400)', display: 'flex', gap: 12, marginTop: 4 }}>
+                        <span>{intelligence.ticketCount} tickets analysés</span>
+                        <span>{intelligence.messageCount} messages</span>
+                        {intelligence.averageSatisfaction && <span>Satisfaction: {intelligence.averageSatisfaction}/5</span>}
+                        {intelligence.fromCache && <span>Cache</span>}
+                        {intelligence.generatedAt && <span>Généré {timeAgo(intelligence.generatedAt)}</span>}
+                      </div>
+                    </div>
+                  ) : (
+                    <div style={{ padding: 16, textAlign: 'center', color: 'var(--theme-elevation-400)', fontSize: 13 }}>
+                      Cliquez sur "Actualiser" pour générer le résumé IA de ce client.
+                    </div>
+                  )}
+                </div>
+
                 {/* Tickets table */}
                 <div style={{ padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 16 }}>
                   <h3 style={{ fontSize: 14, fontWeight: 700, margin: '0 0 8px' }}>{t('crm.sections.tickets')} ({detail.tickets.length})</h3>