@consilioweb/payload-support 0.5.1

package/src/components/TicketConversation/components/TimeTrackingPanel.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import React from 'react'
+import type { TimeEntry } from '../types'
+import { C, s } from '../constants'
+
+interface TimeTrackingPanelProps {
+  timeEntries: TimeEntry[]
+  totalMinutes: number
+  // Timer
+  timerRunning: boolean
+  timerSeconds: number
+  setTimerSeconds: React.Dispatch<React.SetStateAction<number>>
+  timerDescription: string
+  setTimerDescription: (v: string) => void
+  handleTimerStart: (reset?: boolean) => void
+  handleTimerStop: () => void
+  handleTimerSave: () => void
+  handleTimerDiscard: () => void
+  // Manual entry
+  duration: string
+  setDuration: (v: string) => void
+  timeDescription: string
+  setTimeDescription: (v: string) => void
+  handleAddTime: () => void
+  addingTime: boolean
+  timeSuccess: string
+}
+
+export function TimeTrackingPanel({
+  timeEntries, totalMinutes,
+  timerRunning, timerSeconds, setTimerSeconds, timerDescription, setTimerDescription,
+  handleTimerStart, handleTimerStop, handleTimerSave, handleTimerDiscard,
+  duration, setDuration, timeDescription, setTimeDescription,
+  handleAddTime, addingTime, timeSuccess,
+}: TimeTrackingPanelProps) {
+  const totalH = Math.floor(totalMinutes / 60)
+  const totalM = totalMinutes % 60
+
+  return (
+    <div style={s.section}>
+      <h4 style={s.sectionTitle}>
+        Temps
+        {totalMinutes > 0 && <span style={s.badge('#fef3c7', '#92400e')}>{totalH}h{String(totalM).padStart(2, '0')} total</span>}
+      </h4>
+
+      {/* Timer */}
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap',
+        padding: '12px 16px', borderRadius: '10px', marginBottom: '14px',
+        backgroundColor: timerRunning ? '#fef2f2' : 'var(--theme-elevation-100)',
+        border: timerRunning ? '1px solid #fca5a5' : '1px solid var(--theme-elevation-300)',
+      }}>
+        <div style={{
+          fontFamily: 'monospace', fontSize: '24px', fontWeight: 700,
+          color: timerRunning ? '#dc2626' : 'var(--theme-text)',
+          minWidth: '90px',
+        }}>
+          {String(Math.floor(timerSeconds / 3600)).padStart(2, '0')}:{String(Math.floor((timerSeconds % 3600) / 60)).padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
+        </div>
+
+        {!timerRunning && timerSeconds > 0 && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            {[-5, -1, 1, 5, 15, 30].map((m) => (
+              <button
+                key={m}
+                onClick={() => setTimerSeconds((p) => Math.max(0, p + m * 60))}
+                style={{ width: Math.abs(m) >= 15 ? '32px' : '28px', height: '28px', borderRadius: '6px', border: '1px solid #e2e8f0', background: 'white', cursor: 'pointer', fontSize: Math.abs(m) >= 15 ? '12px' : '14px', fontWeight: 700, color: '#64748b' }}
+                title={`${m > 0 ? '+' : ''}${m} min`}
+              >
+                {m > 0 ? `+${m}` : String(m)}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {!timerRunning && timerSeconds === 0 && (
+          <button onClick={() => handleTimerStart(true)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            &#9654; Démarrer
+          </button>
+        )}
+        {timerRunning && (
+          <button onClick={handleTimerStop} style={{ ...s.btn('#374151', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            &#9208; Pause
+          </button>
+        )}
+        {!timerRunning && timerSeconds > 0 && (
+          <>
+            <button onClick={() => handleTimerStart(false)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 14px' }}>
+              &#9654; Reprendre
+            </button>
+            <input
+              type="text"
+              value={timerDescription}
+              onChange={(e) => setTimerDescription(e.target.value)}
+              placeholder="Description..."
+              style={{ ...s.input, fontSize: '12px', flex: 1, minWidth: '120px' }}
+            />
+            <button
+              onClick={handleTimerSave}
+              disabled={addingTime || timerSeconds < 60}
+              style={{ ...s.btn('#16a34a', addingTime || timerSeconds < 60), fontSize: '12px', padding: '6px 14px' }}
+              title={timerSeconds < 60 ? 'Minimum 1 minute' : `Sauvegarder ${Math.round(timerSeconds / 60)} min`}
+            >
+              &#128190; {Math.round(timerSeconds / 60)} min
+            </button>
+            <button onClick={handleTimerDiscard} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: '#94a3b8', padding: '4px' }} title="Annuler">
+              &#10005;
+            </button>
+          </>
+        )}
+        {timerRunning && (
+          <span style={{ fontSize: '11px', color: '#dc2626', fontWeight: 600 }}>
+            &#9679; Enregistrement en cours — session maintenue active
+          </span>
+        )}
+      </div>
+
+      {/* Manual time entry */}
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: '14px' }}>
+        <div>
+          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Min</label>
+          <input type="number" min="1" value={duration} onChange={(e) => setDuration(e.target.value)} placeholder="30" style={{ ...s.input, width: '80px' }} />
+        </div>
+        <div style={{ flex: 1 }}>
+          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Description</label>
+          <input type="text" value={timeDescription} onChange={(e) => setTimeDescription(e.target.value)} placeholder="Travail effectué..." style={{ ...s.input, width: '100%' }} />
+        </div>
+        <button onClick={handleAddTime} disabled={addingTime || !duration} style={s.btn(C.amber, addingTime || !duration)}>
+          {addingTime ? '...' : '+ Temps'}
+        </button>
+        {timeSuccess && <span style={{ fontSize: '12px', color: '#16a34a', fontWeight: 600 }}>{timeSuccess}</span>}
+      </div>
+
+      {timeEntries.length > 0 && (
+        <div style={{ fontSize: '12px' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ borderBottom: `1px solid ${C.border}` }}>
+                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 600, fontSize: '11px', color: C.textSecondary }}>Date</th>
+                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 600, fontSize: '11px', color: C.textSecondary }}>Durée</th>
+                <th style={{ textAlign: 'left', padding: '6px 8px', fontWeight: 600, fontSize: '11px', color: C.textSecondary }}>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {timeEntries.map((entry) => (
+                <tr key={entry.id} style={{ borderBottom: '1px solid #f1f5f9' }}>
+                  <td style={{ padding: '6px 8px', color: '#374151' }}>
+                    {new Date(entry.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
+                  </td>
+                  <td style={{ padding: '6px 8px', fontWeight: 600, color: '#374151' }}>{entry.duration} min</td>
+                  <td style={{ padding: '6px 8px', color: C.textSecondary }}>{entry.description || '—'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TicketConversation/config.ts

@@ -0,0 +1,82 @@
+/**
+ * Feature flags for the ticketing module.
+ * Each feature can be enabled/disabled by the admin.
+ * When disabled, the corresponding UI section is hidden entirely.
+ */
+export interface TicketingFeatures {
+  /** Time tracking: timer, manual entries, billing */
+  timeTracking: boolean
+  /** AI features: sentiment, synthesis, suggestion, rewrite */
+  ai: boolean
+/** Satisfaction surveys: CSAT rating after resolution */
+  satisfaction: boolean
+  /** Live chat integration: chat → ticket conversion */
+  chat: boolean
+  /** Email tracking: pixel tracking, open/sent status per message */
+  emailTracking: boolean
+  /** Canned responses: quick reply templates */
+  canned: boolean
+  /** Ticket merge: combine two tickets into one */
+  merge: boolean
+  /** Snooze: temporarily hide a ticket */
+  snooze: boolean
+  /** External messages: add messages received outside the system */
+  externalMessages: boolean
+  /** Client history: past tickets, projects, notes sidebar */
+  clientHistory: boolean
+  /** Activity log: audit trail of actions on the ticket */
+  activityLog: boolean
+  /** Split ticket: extract a message into a new ticket */
+  splitTicket: boolean
+  /** Scheduled replies: send a message at a future date */
+  scheduledReplies: boolean
+  /** Auto-close: automatically resolve inactive tickets */
+  autoClose: boolean
+  /** Auto-close delay in days (used by auto-close cron) */
+  autoCloseDays: number
+  /** Round-robin: distribute new tickets evenly among agents */
+  roundRobin: boolean
+}
+
+/** Default features — all enabled */
+export const DEFAULT_FEATURES: TicketingFeatures = {
+  timeTracking: true,
+  ai: true,
+satisfaction: true,
+  chat: true,
+  emailTracking: true,
+  canned: true,
+  merge: true,
+  snooze: true,
+  externalMessages: true,
+  clientHistory: true,
+  activityLog: true,
+  splitTicket: true,
+  scheduledReplies: true,
+  autoClose: true,
+  autoCloseDays: 7,
+  roundRobin: false,
+}
+
+const STORAGE_KEY = 'ticketing_features'
+
+/** Read features from localStorage (falls back to defaults) */
+export function getFeatures(): TicketingFeatures {
+  if (typeof window === 'undefined') return DEFAULT_FEATURES
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return { ...DEFAULT_FEATURES, ...parsed }
+    }
+  } catch { /* ignore */ }
+  return DEFAULT_FEATURES
+}
+
+/** Save features to localStorage */
+export function saveFeatures(features: TicketingFeatures): void {
+  if (typeof window === 'undefined') return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(features))
+  } catch { /* ignore */ }
+}

package/src/components/TicketConversation/constants.ts

@@ -0,0 +1,74 @@
+import type React from 'react'
+
+export const statusLabels: Record<string, { label: string; bg: string; color: string }> = {
+  open: { label: 'Ouvert', bg: '#dbeafe', color: '#1e40af' },
+  waiting_client: { label: 'Attente', bg: '#fef3c7', color: '#92400e' },
+  resolved: { label: 'Résolu', bg: '#dcfce7', color: '#166534' },
+}
+
+export const projectStatusLabels: Record<string, { label: string; bg: string; color: string }> = {
+  active: { label: 'Actif', bg: '#dcfce7', color: '#166534' },
+  paused: { label: 'En pause', bg: '#fef3c7', color: '#92400e' },
+  completed: { label: 'Terminé', bg: '#e5e7eb', color: '#374151' },
+}
+
+// Color palette — Payload theme compatible
+export const C = {
+  blue: '#2563eb',
+  amber: '#d97706',
+  orange: '#ea580c',
+  black: 'var(--theme-text)',
+  white: '#fff',
+  bg: '#fafafa',
+  textPrimary: 'var(--theme-text)',
+  textSecondary: '#6b7280',
+  textMuted: '#9ca3af',
+  border: '#e2e8f0',
+  statusOpen: '#2563eb',
+  statusProgress: '#ea580c',
+  statusWaiting: '#d97706',
+  statusResolved: '#16a34a',
+  statusClosed: '#6b7280',
+  adminBg: '#f8fafc',
+  adminBorder: '#2563eb',
+  clientBg: '#fafafa',
+  clientBorder: '#e2e8f0',
+  emailBg: '#fffbeb',
+  emailBorder: '#ea580c',
+  internalBg: '#fefce8',
+  internalBorder: '#d97706',
+}
+
+// Style factories
+export const s = {
+  section: { borderTop: `1px solid ${C.border}`, paddingTop: '18px', marginTop: '20px' } as React.CSSProperties,
+  sectionTitle: { fontSize: '14px', fontWeight: 600, marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' } as React.CSSProperties,
+  btn: (bg: string, disabled?: boolean): React.CSSProperties => {
+    const hex = bg.replace('#', '')
+    const r = parseInt(hex.substring(0, 2), 16) || 0
+    const g = parseInt(hex.substring(2, 4), 16) || 0
+    const b = parseInt(hex.substring(4, 6), 16) || 0
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+    const textColor = luminance > 0.6 ? '#374151' : C.white
+    return {
+      padding: '7px 14px', borderRadius: '6px', border: `1px solid ${C.border}`, backgroundColor: bg,
+      color: textColor, fontWeight: 600, fontSize: '13px', cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap',
+    }
+  },
+  ghostBtn: (color: string, disabled?: boolean): React.CSSProperties => ({
+    padding: '7px 14px', borderRadius: '6px', border: `1px solid ${C.border}`, backgroundColor: 'transparent',
+    color, fontWeight: 600, fontSize: '13px', cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap',
+  }),
+  outlineBtn: (color: string, disabled?: boolean): React.CSSProperties => ({
+    padding: '7px 14px', borderRadius: '6px', border: `1px solid ${color}`, backgroundColor: 'transparent',
+    color, fontWeight: 600, fontSize: '13px', cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap',
+  }),
+  input: { padding: '8px 12px', borderRadius: '6px', border: `1px solid ${C.border}`, fontSize: '14px', color: '#374151', backgroundColor: C.white } as React.CSSProperties,
+  badge: (bg: string, color: string): React.CSSProperties => ({
+    display: 'inline-block', padding: '2px 8px', borderRadius: '4px', fontSize: '11px',
+    fontWeight: 600, backgroundColor: bg, color,
+  }),
+}

package/src/components/TicketConversation/context.ts

@@ -0,0 +1,63 @@
+import { createContext, useContext } from 'react'
+import type { Message, TimeEntry, ClientInfo, CannedResponse, ActivityEntry, SatisfactionSurvey } from './types'
+
+/**
+ * Handle interface for the RichTextEditor component.
+ * When used inside the plugin, the consumer must provide a compatible editor
+ * or leave the ref unused.
+ */
+export interface RichTextEditorHandle {
+  setContent: (html: string) => void
+  clear: () => void
+  focus: () => void
+}
+
+export interface TicketContextValue {
+  // Identity
+  id: string | number | undefined
+
+  // Core data
+  messages: Message[]
+  timeEntries: TimeEntry[]
+  client: ClientInfo | null
+  cannedResponses: CannedResponse[]
+  activityLog: ActivityEntry[]
+  satisfaction: SatisfactionSurvey | null
+  loading: boolean
+
+  // Ticket metadata
+  currentStatus: string
+  ticketNumber: string
+  ticketSubject: string
+  ticketSource: string
+  chatSession: string
+  snoozeUntil: string | null
+  lastClientReadAt: string | null
+
+  // Client history
+  clientTickets: Array<{ id: number; ticketNumber: string; subject: string; status: string; createdAt: string }>
+  clientProjects: Array<{ id: number; name: string; status: string }>
+  clientNotes: string
+
+  // AI
+  clientSentiment: { emoji: string; label: string; color: string } | null
+
+  // Typing
+  clientTyping: boolean
+  clientTypingName: string
+
+  // Actions
+  fetchAll: () => void
+  sendAdminTyping: () => void
+
+  // Reply editor ref
+  replyEditorRef: React.RefObject<RichTextEditorHandle | null>
+}
+
+export const TicketContext = createContext<TicketContextValue | null>(null)
+
+export function useTicketContext(): TicketContextValue {
+  const ctx = useContext(TicketContext)
+  if (!ctx) throw new Error('useTicketContext must be used within TicketContext.Provider')
+  return ctx
+}

package/src/components/TicketConversation/hooks/useAI.ts

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react'
+import type { Message, ClientInfo } from '../types'
+import type { RichTextEditorHandle } from '../context'
+
+export function useAI(
+  messages: Message[],
+  client: ClientInfo | null,
+  ticketSubject: string,
+  replyBody: string,
+  setReplyBody: (v: string) => void,
+  setReplyHtml: (v: string) => void,
+  replyEditorRef: React.RefObject<RichTextEditorHandle | null>,
+) {
+  const [clientSentiment, setClientSentiment] = useState<{ emoji: string; label: string; color: string } | null>(null)
+  const [aiReplying, setAiReplying] = useState(false)
+  const [aiRewriting, setAiRewriting] = useState(false)
+  const [showAiSummary, setShowAiSummary] = useState(false)
+  const [aiSummary, setAiSummary] = useState('')
+  const [aiGenerating, setAiGenerating] = useState(false)
+  const [aiSaving, setAiSaving] = useState(false)
+  const [aiSaved, setAiSaved] = useState(false)
+
+  // Sentiment analysis on last client message
+  useEffect(() => {
+    if (messages.length === 0) return
+    const lastClientMsg = [...messages].reverse().find((m) => m.authorType === 'client' || m.authorType === 'email')
+    if (!lastClientMsg) return
+
+    const analyze = async () => {
+      try {
+        const res = await fetch('/api/support/ai', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ action: 'sentiment', text: lastClientMsg.body.slice(0, 500) }),
+        })
+        if (res.ok) {
+          const data = await res.json()
+          const raw = (data.sentiment || '').toLowerCase().trim()
+          const sentimentMap: Record<string, { emoji: string; label: string; color: string }> = {
+            'frustré': { emoji: '\uD83D\uDE24', label: 'Frustré', color: '#dc2626' },
+            'frustre': { emoji: '\uD83D\uDE24', label: 'Frustré', color: '#dc2626' },
+            'mécontent': { emoji: '\uD83D\uDE20', label: 'Mécontent', color: '#ea580c' },
+            'mecontent': { emoji: '\uD83D\uDE20', label: 'Mécontent', color: '#ea580c' },
+            'urgent': { emoji: '\uD83D\uDD25', label: 'Urgent', color: '#dc2626' },
+            'neutre': { emoji: '\uD83D\uDE10', label: 'Neutre', color: '#6b7280' },
+            'satisfait': { emoji: '\uD83D\uDE0A', label: 'Satisfait', color: '#16a34a' },
+          }
+          const match = Object.keys(sentimentMap).find((k) => raw.includes(k))
+          if (match) setClientSentiment(sentimentMap[match])
+          else setClientSentiment({ emoji: '\uD83D\uDE10', label: 'Neutre', color: '#6b7280' })
+        }
+      } catch { /* silent */ }
+    }
+    analyze()
+  }, [messages.length]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAiSuggestReply = async () => {
+    if (messages.length === 0) return
+    setAiReplying(true)
+    try {
+      const res = await fetch('/api/support/ai', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          action: 'suggest_reply',
+          messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })),
+          clientName: `${client?.firstName || ''} ${client?.lastName || ''}`.trim(),
+          clientCompany: client?.company,
+        }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        const suggestion = data.reply || ''
+        if (suggestion) {
+          setReplyBody(suggestion)
+          setReplyHtml(suggestion.replace(/\n/g, '<br/>'))
+          if (replyEditorRef.current?.setContent) {
+            replyEditorRef.current.setContent(suggestion.replace(/\n/g, '<br/>'))
+          }
+        }
+      }
+    } catch (err) {
+      console.error('AI suggest error:', err)
+    }
+    setAiReplying(false)
+  }
+
+  const handleAiRewrite = async () => {
+    if (!replyBody.trim()) return
+    setAiRewriting(true)
+    try {
+      const res = await fetch('/api/support/ai', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ action: 'rewrite', text: replyBody }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        const rewritten = data.rewritten || ''
+        if (rewritten) {
+          setReplyBody(rewritten)
+          setReplyHtml(rewritten.replace(/\n/g, '<br/>'))
+          if (replyEditorRef.current?.setContent) {
+            replyEditorRef.current.setContent(rewritten.replace(/\n/g, '<br/>'))
+          }
+        }
+      }
+    } catch (err) {
+      console.error('AI rewrite error:', err)
+    }
+    setAiRewriting(false)
+  }
+
+  const handleAiGenerate = async () => {
+    if (messages.length === 0) return
+    setAiGenerating(true)
+    setAiSummary('')
+    setAiSaved(false)
+    try {
+      const res = await fetch('/api/support/ai', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          action: 'synthesis',
+          messages: messages.map((m) => ({ authorType: m.authorType, body: m.body, createdAt: m.createdAt })),
+          ticketSubject,
+          clientName: `${client?.firstName || ''} ${client?.lastName || ''}`.trim(),
+          clientCompany: client?.company,
+        }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setAiSummary(data.synthesis || 'Aucune réponse générée')
+      } else {
+        setAiSummary('Erreur lors de la génération de la synthèse.')
+      }
+    } catch (err) {
+      setAiSummary(`Erreur de connexion : ${err instanceof Error ? err.message : 'erreur inconnue'}`)
+    } finally {
+      setAiGenerating(false)
+    }
+  }
+
+  const handleAiSave = async (id: string | number | undefined, fetchAll: () => void) => {
+    if (!id || !aiSummary) return
+    setAiSaving(true)
+    try {
+      const res = await fetch('/api/ticket-messages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          ticket: id,
+          body: `\uD83D\uDCCB **Synthèse IA (${new Date().toLocaleDateString('fr-FR')})**\n\n${aiSummary}`,
+          authorType: 'admin',
+          isInternal: true,
+        }),
+      })
+      if (res.ok) {
+        setAiSaved(true)
+        fetchAll()
+      }
+    } catch { /* ignore */ } finally {
+      setAiSaving(false)
+    }
+  }
+
+  return {
+    clientSentiment,
+    aiReplying, handleAiSuggestReply,
+    aiRewriting, handleAiRewrite,
+    showAiSummary, setShowAiSummary,
+    aiSummary, aiGenerating, handleAiGenerate,
+    aiSaving, aiSaved, handleAiSave,
+  }
+}