@consilioweb/payload-support 0.5.1

package/src/views/TicketingSettingsView/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 { TicketingSettingsClient } from './client'
+
+export const TicketingSettingsView: 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="TicketingSettingsView">
+        <TicketingSettingsClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default TicketingSettingsView

package/src/views/TimeDashboardView/client.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/TimeDashboard.module.scss'
+
+interface TimeEntry {
+  id: number
+  ticket: number | { id: number; ticketNumber?: string; subject?: string; project?: number | { id: number; name?: string } }
+  duration: number
+  description: string
+  date: string
+}
+
+interface GroupedData { label: string; entries: TimeEntry[]; totalMinutes: number }
+
+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 getWeekNumber(d: Date): number { const oneJan = new Date(d.getFullYear(), 0, 1); return Math.ceil(((d.getTime() - oneJan.getTime()) / 86400000 + oneJan.getDay() + 1) / 7) }
+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] } }
+const MONTHS_FR = ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec']
+
+export const TimeDashboardClient: React.FC = () => {
+  const { t } = useTranslation()
+  const [entries, setEntries] = useState<TimeEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [from, setFrom] = useState(() => getMonthRange(0).from)
+  const [to, setTo] = useState(() => getMonthRange(0).to)
+  const [groupBy, setGroupBy] = useState<'day' | 'week' | 'project'>('day')
+
+  const fetchEntries = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({ limit: '500', depth: '2', sort: '-date' })
+      if (from) params.set('where[date][greater_than_equal]', from)
+      if (to) params.set('where[date][less_than_equal]', to)
+      const res = await fetch(`/api/time-entries?${params}`)
+      if (res.ok) { const json = await res.json(); setEntries(json.docs || []) }
+    } catch { /* silent */ }
+    setLoading(false)
+  }, [from, to])
+
+  useEffect(() => { fetchEntries() }, [fetchEntries])
+
+  const totalMinutes = entries.reduce((sum, e) => sum + (e.duration || 0), 0)
+
+  const grouped: GroupedData[] = React.useMemo(() => {
+    const map = new Map<string, TimeEntry[]>()
+    for (const entry of entries) {
+      let key: string
+      if (groupBy === 'day') { key = entry.date ? entry.date.split('T')[0] : 'Sans date' }
+      else if (groupBy === 'week') { const d = new Date(entry.date); key = `Semaine ${getWeekNumber(d)} (${MONTHS_FR[d.getMonth()]} ${d.getFullYear()})` }
+      else { const ticket = typeof entry.ticket === 'object' ? entry.ticket : null; const project = ticket && typeof ticket.project === 'object' ? ticket.project : null; key = project?.name || 'Sans projet' }
+      if (!map.has(key)) map.set(key, [])
+      map.get(key)!.push(entry)
+    }
+    return Array.from(map.entries()).map(([label, items]) => ({ label, entries: items, totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0) }))
+  }, [entries, groupBy])
+
+  const dailyChart = React.useMemo(() => {
+    const dayMap = new Map<string, number>()
+    for (const entry of entries) { const day = entry.date ? entry.date.split('T')[0] : null; if (day) dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0)) }
+    return Array.from(dayMap.entries()).sort(([a], [b]) => a.localeCompare(b)).slice(-30).map(([day, mins]) => ({ day, minutes: mins }))
+  }, [entries])
+
+  const maxDailyMinutes = Math.max(...dailyChart.map((d) => d.minutes), 1)
+  const setPeriod = (range: { from: string; to: string }) => { setFrom(range.from); setTo(range.to) }
+
+  const S: Record<string, React.CSSProperties> = {
+    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
+    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 },
+    kpis: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 },
+    kpiCard: { padding: '16px 20px', borderRadius: 10, border: '1px solid var(--theme-elevation-150)' },
+    groupCard: { marginBottom: 12, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', overflow: 'hidden' },
+    groupHeader: { display: 'flex', justifyContent: 'space-between', padding: '10px 16px', background: 'var(--theme-elevation-50)', borderBottom: '1px solid var(--theme-elevation-150)' },
+    table: { width: '100%', borderCollapse: 'collapse' as const, fontSize: 12 },
+    td: { padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-100)' },
+  }
+
+  return (
+    <div style={S.page}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div>
+          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t('timeDashboard.title')}</h1>
+          <p style={{ fontSize: 13, color: 'var(--theme-elevation-500)', margin: '4px 0 0' }}>{t('timeDashboard.subtitle')}</p>
+        </div>
+        <a href="/admin/collections/time-entries/create" style={{ ...S.btnPrimary, textDecoration: 'none', display: 'inline-block' }}>{t('timeDashboard.newEntry')}</a>
+      </div>
+
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
+          <button style={S.btnPrimary} onClick={() => setPeriod(getMonthRange(0))}>{t('timeDashboard.filters.thisMonth')}</button>
+          <button style={S.btn} onClick={() => setPeriod(getMonthRange(-1))}>{t('timeDashboard.filters.lastMonth')}</button>
+          <button style={S.btn} onClick={() => setPeriod(getMonthRange(-2))}>{t('timeDashboard.filters.twoMonthsAgo')}</button>
+        </div>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-end' }}>
+          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.from')}</label><input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} /></div>
+          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.to')}</label><input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} /></div>
+          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.groupBy')}</label><select value={groupBy} onChange={(e) => setGroupBy(e.target.value as 'day' | 'week' | 'project')} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }}><option value="day">{t('timeDashboard.filters.day')}</option><option value="week">{t('timeDashboard.filters.week')}</option><option value="project">{t('timeDashboard.filters.project')}</option></select></div>
+        </div>
+      </div>
+
+      {loading ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div> : (
+        <>
+          <div style={S.kpis}>
+            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.totalTime')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#2563eb' }}>{formatDuration(totalMinutes)}</div></div>
+            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.entries')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#d97706' }}>{entries.length}</div></div>
+            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.dailyAverage')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#ea580c' }}>{dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : '-'}</div></div>
+          </div>
+
+          {dailyChart.length > 0 && (
+            <div style={{ padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 20 }}>
+              <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>{t('timeDashboard.chart.title')}</div>
+              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 80 }}>
+                {dailyChart.map((d) => <div key={d.day} style={{ flex: 1, background: '#3b82f6', borderRadius: '3px 3px 0 0', height: `${Math.max((d.minutes / maxDailyMinutes) * 100, 4)}%` }} title={`${d.day}: ${formatDuration(d.minutes)}`} />)}
+              </div>
+            </div>
+          )}
+
+          {grouped.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('timeDashboard.empty')}</div> : grouped.map((group) => (
+            <div key={group.label} style={S.groupCard}>
+              <div style={S.groupHeader}><span style={{ fontWeight: 700 }}>{group.label}</span><span style={{ fontWeight: 700, color: '#2563eb' }}>{formatDuration(group.totalMinutes)}</span></div>
+              <table style={S.table}>
+                <tbody>
+                  {group.entries.map((entry) => {
+                    const ticket = typeof entry.ticket === 'object' ? entry.ticket : null
+                    return (
+                      <tr key={entry.id}>
+                        <td style={S.td}>{ticket ? <a href={`/admin/collections/tickets/${ticket.id}`} style={{ color: '#2563eb', textDecoration: 'none', fontWeight: 600 }}>{ticket.ticketNumber || `#${ticket.id}`}</a> : '-'}</td>
+                        <td style={S.td}>{ticket?.subject || ''}</td>
+                        <td style={{ ...S.td, color: 'var(--theme-elevation-500)' }}>{entry.description || '-'}</td>
+                        <td style={{ ...S.td, textAlign: 'right', fontWeight: 600 }}>{formatDuration(entry.duration)}</td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}

package/src/views/TimeDashboardView/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 { TimeDashboardClient } from './client'
+
+export const TimeDashboardView: 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="TimeDashboardView">
+        <TimeDashboardClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default TimeDashboardView

package/src/views/shared/AdminViewHeader.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import React from 'react'
+import { V } from './adminTokens'
+
+interface AdminViewHeaderProps {
+  icon: React.ReactNode
+  title: string
+  subtitle?: string
+  breadcrumb?: { label: string; href: string }
+  actions?: React.ReactNode
+}
+
+export const AdminViewHeader: React.FC<AdminViewHeaderProps> = ({
+  icon,
+  title,
+  subtitle,
+  breadcrumb,
+  actions,
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: 20,
+      }}
+    >
+      <div>
+        {breadcrumb && (
+          <div style={{ marginBottom: 6 }}>
+            <a
+              href={breadcrumb.href}
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                color: V.cyan,
+                textDecoration: 'none',
+                textTransform: 'uppercase',
+              }}
+            >
+              &larr; {breadcrumb.label}
+            </a>
+          </div>
+        )}
+        <h1
+          style={{
+            fontSize: 28,
+            fontWeight: 600,
+            letterSpacing: 0,
+            margin: 0,
+            color: V.text,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+          }}
+        >
+          <span style={{ color: V.cyan, display: 'flex', alignItems: 'center' }}>{icon}</span>
+          {title}
+        </h1>
+        {subtitle && (
+          <p style={{ color: V.textSecondary, margin: '4px 0 0', fontSize: 14 }}>{subtitle}</p>
+        )}
+      </div>
+      {actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
+    </div>
+  )
+}

package/src/views/shared/ErrorBoundary.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React from 'react'
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  viewName?: string
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+export class AdminErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error(`[${this.props.viewName || 'AdminView'}] Error:`, error, errorInfo)
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div style={{
+          padding: '40px',
+          textAlign: 'center',
+          color: '#dc2626',
+        }}>
+          <h2 style={{ marginBottom: '16px', fontSize: '18px' }}>
+            Une erreur est survenue
+          </h2>
+          <p style={{ marginBottom: '24px', color: '#6b7280', fontSize: '14px' }}>
+            {this.state.error?.message || 'Erreur inattendue'}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            style={{
+              padding: '8px 20px',
+              backgroundColor: '#2563eb',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontSize: '14px',
+            }}
+          >
+            Reessayer
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/views/shared/Skeleton.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import React, { useEffect } from 'react'
+
+// ---- Style injection ----
+
+const styleId = 'skeleton-shimmer-style'
+
+function injectSkeletonStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(styleId)) return
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = `
+    @keyframes skeleton-shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+  `
+  document.head.appendChild(style)
+}
+
+// ---- Base Skeleton ----
+
+interface SkeletonProps {
+  width?: string | number
+  height?: string | number
+  borderRadius?: string
+  style?: React.CSSProperties
+}
+
+export function Skeleton({ width = '100%', height = '20px', borderRadius = '4px', style }: SkeletonProps) {
+  useEffect(() => {
+    injectSkeletonStyles()
+  }, [])
+
+  return (
+    <div
+      style={{
+        width,
+        height,
+        borderRadius,
+        background: 'linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%)',
+        backgroundSize: '200% 100%',
+        animation: 'skeleton-shimmer 1.5s infinite',
+        ...style,
+      }}
+    />
+  )
+}
+
+// ---- Skeleton Text ----
+
+export function SkeletonText({ lines = 3, width = '100%' }: { lines?: number; width?: string | number }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width }}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} height="16px" width={i === lines - 1 ? '60%' : '100%'} />
+      ))}
+    </div>
+  )
+}
+
+// ---- Skeleton Card ----
+
+export function SkeletonCard({ height = '200px' }: { height?: string }) {
+  return (
+    <div style={{
+      border: '1px solid #e5e7eb',
+      borderRadius: '8px',
+      padding: '20px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px',
+      minHeight: height,
+    }}>
+      <Skeleton height="24px" width="40%" />
+      <SkeletonText lines={3} />
+      <Skeleton height="32px" width="120px" borderRadius="6px" />
+    </div>
+  )
+}
+
+// ---- Skeleton Table ----
+
+export function SkeletonTable({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+  return (
+    <div style={{ width: '100%' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', gap: '16px', padding: '12px 0', borderBottom: '2px solid #e5e7eb' }}>
+        {Array.from({ length: columns }).map((_, i) => (
+          <Skeleton key={i} height="16px" width={`${100 / columns}%`} />
+        ))}
+      </div>
+      {/* Rows */}
+      {Array.from({ length: rows }).map((_, rowIdx) => (
+        <div key={rowIdx} style={{ display: 'flex', gap: '16px', padding: '12px 0', borderBottom: '1px solid #f3f4f6' }}>
+          {Array.from({ length: columns }).map((_, colIdx) => (
+            <Skeleton key={colIdx} height="14px" width={`${100 / columns}%`} />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---- Skeleton Dashboard ----
+
+export function SkeletonDashboard() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '20px 0' }}>
+      {/* Stats row */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} style={{ padding: '20px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+            <Skeleton height="14px" width="60%" style={{ marginBottom: '8px' }} />
+            <Skeleton height="32px" width="40%" />
+          </div>
+        ))}
+      </div>
+      {/* Table */}
+      <SkeletonTable rows={5} columns={4} />
+    </div>
+  )
+}

package/src/views/shared/adminTokens.ts

@@ -0,0 +1,37 @@
+import type React from 'react'
+
+// Shared design tokens for all admin views (professional style)
+export const V = {
+  text: 'var(--theme-text)',
+  textSecondary: 'var(--theme-elevation-500)',
+  bg: 'var(--theme-elevation-50)',
+  bgCard: 'var(--theme-elevation-100)',
+  border: 'var(--theme-elevation-300)',
+  // Professional palette
+  blue: '#2563eb',
+  amber: '#d97706',
+  orange: '#ea580c',
+  green: '#16a34a',
+  red: '#dc2626',
+  // Legacy aliases (backward compat for views not yet updated)
+  cyan: '#2563eb',
+  yellow: '#d97706',
+} as const
+
+// Button style factory
+export const btnStyle = (
+  bg: string,
+  opts?: { disabled?: boolean; small?: boolean },
+): React.CSSProperties => ({
+  padding: opts?.small ? '6px 12px' : '8px 14px',
+  borderRadius: 6,
+  border: `1px solid var(--theme-elevation-300)`,
+  backgroundColor: bg,
+  color: '#fff',
+  fontWeight: 600,
+  fontSize: opts?.small ? 12 : 13,
+  cursor: opts?.disabled ? 'not-allowed' : 'pointer',
+  opacity: opts?.disabled ? 0.5 : 1,
+  textDecoration: 'none',
+  whiteSpace: 'nowrap' as const,
+})

package/src/views/shared/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/views/shared/index.ts

@@ -0,0 +1,6 @@
+export { AdminErrorBoundary } from './ErrorBoundary'
+export { V, btnStyle } from './adminTokens'
+export { AdminViewHeader } from './AdminViewHeader'
+export { Skeleton, SkeletonText, SkeletonCard, SkeletonTable, SkeletonDashboard } from './Skeleton'
+export { getFeatures, saveFeatures, DEFAULT_FEATURES } from './config'
+export type { TicketingFeatures } from './config'

package/src/views.ts

@@ -0,0 +1,16 @@
+// Admin view components — server wrappers + client components
+// Each view follows the pattern: index.tsx (server) + client.tsx ('use client')
+
+export { TicketInboxView } from './views/TicketInboxView'
+export { TicketDetailView } from './views/TicketDetailView'
+export { SupportDashboardView } from './views/SupportDashboardView'
+export { NewTicketView } from './views/NewTicketView'
+export { TicketingSettingsView } from './views/TicketingSettingsView'
+export { LogsView } from './views/LogsView'
+export { ChatView } from './views/ChatView'
+export { CrmView } from './views/CrmView'
+export { PendingEmailsView } from './views/PendingEmailsView'
+export { EmailTrackingView } from './views/EmailTrackingView'
+export { BillingView } from './views/BillingView'
+export { TimeDashboardView } from './views/TimeDashboardView'
+export { ImportConversationView } from './views/ImportConversationView'