@actuate-media/cms-admin 0.7.3 → 0.8.1

package/src/views/FormSubmissions.tsx

@@ -1,120 +1,136 @@
-'use client';
+'use client'
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react'
 import {
-  ArrowLeft, Download, Trash2, Search, Globe, ChevronDown, ChevronUp,
-  MousePointerClick, MapPin, Smartphone, Monitor, Tablet, ExternalLink,
-  Loader2, AlertTriangle,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { sortByRelevance } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
+  ArrowLeft,
+  Download,
+  Trash2,
+  Search,
+  Globe,
+  ChevronDown,
+  ChevronUp,
+  MousePointerClick,
+  MapPin,
+  Smartphone,
+  Monitor,
+  Tablet,
+  ExternalLink,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { sortByRelevance } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
 
 interface Attribution {
-  source: string;
-  medium: string;
-  campaign: string;
-  term: string;
-  content: string;
-  landingPage: string;
-  referrer: string;
-  deviceType: 'Desktop' | 'Mobile' | 'Tablet';
-  clickIds: Record<string, string | null>;
-  capturedAt: string;
+  source: string
+  medium: string
+  campaign: string
+  term: string
+  content: string
+  landingPage: string
+  referrer: string
+  deviceType: 'Desktop' | 'Mobile' | 'Tablet'
+  clickIds: Record<string, string | null>
+  capturedAt: string
 }
 
 interface Submission {
-  id: number;
-  name: string;
-  email: string;
-  phone?: string;
-  message: string;
-  submittedAt: string;
-  status: 'new' | 'read' | 'replied';
-  attribution: Attribution;
+  id: number
+  name: string
+  email: string
+  phone?: string
+  message: string
+  submittedAt: string
+  status: 'new' | 'read' | 'replied'
+  attribution: Attribution
 }
 
 function sourceColor(source: string): string {
-  const s = (source ?? '').toLowerCase();
-  if (s === 'google') return 'bg-blue-100 text-blue-800';
-  if (s === 'facebook' || s === 'meta') return 'bg-indigo-100 text-indigo-800';
-  if (s === 'linkedin') return 'bg-sky-100 text-sky-800';
-  if (s === 'bing') return 'bg-teal-100 text-teal-800';
-  if (s === '(direct)') return 'bg-gray-100 text-gray-800';
-  return 'bg-purple-100 text-purple-800';
+  const s = (source ?? '').toLowerCase()
+  if (s === 'google') return 'bg-blue-100 text-blue-800'
+  if (s === 'facebook' || s === 'meta') return 'bg-indigo-100 text-indigo-800'
+  if (s === 'linkedin') return 'bg-sky-100 text-sky-800'
+  if (s === 'bing') return 'bg-teal-100 text-teal-800'
+  if (s === '(direct)') return 'bg-gray-100 text-gray-800'
+  return 'bg-purple-100 text-purple-800'
 }
 
 function mediumColor(medium: string): string {
-  const m = (medium ?? '').toLowerCase();
-  if (m === 'cpc' || m === 'paid') return 'bg-orange-100 text-orange-800';
-  if (m === 'organic') return 'bg-green-100 text-green-800';
-  if (m === 'social') return 'bg-pink-100 text-pink-800';
-  if (m === 'email') return 'bg-yellow-100 text-yellow-800';
-  if (m === '(none)') return 'bg-gray-100 text-gray-600';
-  return 'bg-gray-100 text-gray-800';
+  const m = (medium ?? '').toLowerCase()
+  if (m === 'cpc' || m === 'paid') return 'bg-orange-100 text-orange-800'
+  if (m === 'organic') return 'bg-green-100 text-green-800'
+  if (m === 'social') return 'bg-pink-100 text-pink-800'
+  if (m === 'email') return 'bg-yellow-100 text-yellow-800'
+  if (m === '(none)') return 'bg-gray-100 text-gray-600'
+  return 'bg-gray-100 text-gray-800'
 }
 
 function DeviceIcon({ type }: { type: string }) {
-  if (type === 'Mobile') return <Smartphone className="w-3.5 h-3.5" />;
-  if (type === 'Tablet') return <Tablet className="w-3.5 h-3.5" />;
-  return <Monitor className="w-3.5 h-3.5" />;
+  if (type === 'Mobile') return <Smartphone className="w-3.5 h-3.5" />
+  if (type === 'Tablet') return <Tablet className="w-3.5 h-3.5" />
+  return <Monitor className="w-3.5 h-3.5" />
 }
 
 export interface FormSubmissionsProps {
-  formId: string;
-  onNavigate?: (path: string) => void;
+  formId: string
+  onNavigate?: (path: string) => void
 }
 
 export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
-  const { data, loading, error, refetch } = useApiData<Submission[] | { submissions: Submission[] }>(`/forms/${formId}/submissions`);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterStatus, setFilterStatus] = useState('all');
-  const [filterSource, setFilterSource] = useState('all');
-  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const { data, loading, error, refetch } = useApiData<
+    Submission[] | { submissions: Submission[] }
+  >(`/forms/${formId}/submissions`)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterStatus, setFilterStatus] = useState('all')
+  const [filterSource, setFilterSource] = useState('all')
+  const [expandedId, setExpandedId] = useState<number | null>(null)
 
-  const submissions = Array.isArray(data) ? data : data?.submissions ?? [];
+  const submissions = Array.isArray(data) ? data : (data?.submissions ?? [])
 
   const filteredSubmissions = useMemo(() => {
     let results = submissions.filter((s) => {
       const matchesSearch =
         (s.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
         (s.email ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (s.message ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesStatus = filterStatus === 'all' || s.status === filterStatus;
-      const matchesSource = filterSource === 'all' || s.attribution?.source === filterSource;
-      return matchesSearch && matchesStatus && matchesSource;
-    });
+        (s.message ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus = filterStatus === 'all' || s.status === filterStatus
+      const matchesSource = filterSource === 'all' || s.attribution?.source === filterSource
+      return matchesSearch && matchesStatus && matchesSource
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (s) => [s.name, s.email, s.message]);
+      results = sortByRelevance(results, searchQuery, (s) => [s.name, s.email, s.message])
     }
-    return results;
-  }, [submissions, searchQuery, filterStatus, filterSource]);
+    return results
+  }, [submissions, searchQuery, filterStatus, filterSource])
 
-  const uniqueSources = [...new Set(submissions.map(s => s.attribution?.source ?? '(direct)'))];
+  const uniqueSources = [...new Set(submissions.map((s) => s.attribution?.source ?? '(direct)'))]
 
   const sourceSummary = useMemo(() => {
-    const counts: Record<string, number> = {};
+    const counts: Record<string, number> = {}
     for (const s of submissions) {
-      const key = `${s.attribution?.source ?? '(direct)'} / ${s.attribution?.medium ?? '(none)'}`;
-      counts[key] = (counts[key] ?? 0) + 1;
+      const key = `${s.attribution?.source ?? '(direct)'} / ${s.attribution?.medium ?? '(none)'}`
+      counts[key] = (counts[key] ?? 0) + 1
     }
-    return Object.entries(counts).sort(([, a], [, b]) => b - a);
-  }, [submissions]);
+    return Object.entries(counts).sort(([, a], [, b]) => b - a)
+  }, [submissions])
 
-  const paidCount = submissions.filter(s => ['cpc', 'paid'].includes(s.attribution?.medium ?? '')).length;
-  const organicCount = submissions.filter(s => s.attribution?.medium === 'organic').length;
+  const paidCount = submissions.filter((s) =>
+    ['cpc', 'paid'].includes(s.attribution?.medium ?? ''),
+  ).length
+  const organicCount = submissions.filter((s) => s.attribution?.medium === 'organic').length
 
   const handleExport = () => {
-    toast.success('Submissions exported to CSV (includes attribution data)');
-  };
+    toast.success('Submissions exported to CSV (includes attribution data)')
+  }
 
   if (loading) {
     return (
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -123,21 +139,38 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
       <div className="mb-4">
-        <button onClick={() => onNavigate?.('/forms')} className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors mb-3">
-          <ArrowLeft className="w-4 h-4" />Back to Forms
+        <button
+          onClick={() => onNavigate?.('/forms')}
+          className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors mb-3"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Forms
         </button>
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-semibold text-gray-900 mb-1">Contact Form - Submissions</h1>
-            <p className="text-sm text-gray-600">{filteredSubmissions.length} submission{filteredSubmissions.length !== 1 ? 's' : ''}</p>
+            <h1 className="text-2xl font-semibold text-gray-900 mb-1">
+              Contact Form - Submissions
+            </h1>
+            <p className="text-sm text-gray-600">
+              {filteredSubmissions.length} submission{filteredSubmissions.length !== 1 ? 's' : ''}
+            </p>
           </div>
-          <button onClick={handleExport} className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
-            <Download className="w-4 h-4" />Export CSV
+          <button
+            onClick={handleExport}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          >
+            <Download className="w-4 h-4" />
+            Export CSV
           </button>
         </div>
       </div>
@@ -149,7 +182,9 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </div>
         <div className="bg-white rounded-lg border border-gray-200 p-4">
           <div className="text-xs text-gray-600 mb-1">New</div>
-          <div className="text-2xl font-semibold text-blue-600">{submissions.filter(s => s.status === 'new').length}</div>
+          <div className="text-2xl font-semibold text-blue-600">
+            {submissions.filter((s) => s.status === 'new').length}
+          </div>
         </div>
         <div className="bg-white rounded-lg border border-gray-200 p-4">
           <div className="text-xs text-gray-600 mb-1">Paid Traffic</div>
@@ -166,12 +201,17 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       </div>
 
       <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2"><Globe className="w-4 h-4 text-blue-600" />Lead Source Breakdown</h3>
+        <h3 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
+          <Globe className="w-4 h-4 text-blue-600" />
+          Lead Source Breakdown
+        </h3>
         <div className="flex flex-wrap gap-2">
           {sourceSummary.map(([label, count]) => (
             <div key={label} className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-lg">
               <span className="text-sm font-medium text-gray-800">{label}</span>
-              <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{count}</span>
+              <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                {count}
+              </span>
             </div>
           ))}
         </div>
@@ -181,17 +221,35 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         <div className="p-3 flex flex-col sm:flex-row gap-3">
           <div className="flex-1 relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input type="text" placeholder="Search submissions..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+            <input
+              type="text"
+              placeholder="Search submissions..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
           </div>
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
             <option value="all">All Status</option>
             <option value="new">New</option>
             <option value="read">Read</option>
             <option value="replied">Replied</option>
           </select>
-          <select value={filterSource} onChange={(e) => setFilterSource(e.target.value)} className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+          <select
+            value={filterSource}
+            onChange={(e) => setFilterSource(e.target.value)}
+            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
             <option value="all">All Sources</option>
-            {uniqueSources.map(src => <option key={src} value={src}>{src}</option>)}
+            {uniqueSources.map((src) => (
+              <option key={src} value={src}>
+                {src}
+              </option>
+            ))}
           </select>
         </div>
       </div>
@@ -203,12 +261,15 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       ) : (
         <div className="space-y-3">
           {filteredSubmissions.map((submission) => {
-            const expanded = expandedId === submission.id;
-            const attr = submission.attribution;
-            const activeClickIds = Object.entries(attr.clickIds).filter(([, v]) => v);
+            const expanded = expandedId === submission.id
+            const attr = submission.attribution
+            const activeClickIds = Object.entries(attr.clickIds).filter(([, v]) => v)
 
             return (
-              <div key={submission.id} className="bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow">
+              <div
+                key={submission.id}
+                className="bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
+              >
                 <div className="p-4">
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex items-start gap-3 flex-1">
@@ -218,32 +279,67 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1">
                           <h3 className="font-semibold text-gray-900 text-sm">{submission.name}</h3>
-                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${submission.status === 'new' ? 'bg-blue-100 text-blue-800' : submission.status === 'read' ? 'bg-gray-100 text-gray-800' : 'bg-green-100 text-green-800'}`}>{submission.status}</span>
+                          <span
+                            className={`px-2 py-0.5 rounded-full text-xs font-medium ${submission.status === 'new' ? 'bg-blue-100 text-blue-800' : submission.status === 'read' ? 'bg-gray-100 text-gray-800' : 'bg-green-100 text-green-800'}`}
+                          >
+                            {submission.status}
+                          </span>
+                        </div>
+                        <div className="text-xs text-gray-600 mb-2">
+                          {submission.email}
+                          {submission.phone ? ` · ${submission.phone}` : ''}
                         </div>
-                        <div className="text-xs text-gray-600 mb-2">{submission.email}{submission.phone ? ` · ${submission.phone}` : ''}</div>
                         <p className="text-sm text-gray-700">{submission.message}</p>
-                        <div className="text-xs text-gray-500 mt-2">Submitted {submission.submittedAt}</div>
+                        <div className="text-xs text-gray-500 mt-2">
+                          Submitted {submission.submittedAt}
+                        </div>
                       </div>
                     </div>
-                    <button onClick={() => toast.success('Submission deleted')} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
+                    <button
+                      onClick={() => toast.success('Submission deleted')}
+                      className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                      title="Delete"
+                    >
                       <Trash2 className="w-4 h-4 text-red-600" />
                     </button>
                   </div>
 
                   <div className="flex flex-wrap items-center gap-2 mt-3 pt-3 border-t border-gray-100">
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${sourceColor(attr.source)}`}>{attr.source}</span>
+                    <span
+                      className={`px-2 py-0.5 rounded-full text-xs font-medium ${sourceColor(attr.source)}`}
+                    >
+                      {attr.source}
+                    </span>
                     <span className="text-gray-400 text-xs">/</span>
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${mediumColor(attr.medium)}`}>{attr.medium}</span>
-                    {attr.campaign && <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">{attr.campaign}</span>}
-                    <span className="flex items-center gap-1 text-xs text-gray-500"><DeviceIcon type={attr.deviceType} />{attr.deviceType}</span>
+                    <span
+                      className={`px-2 py-0.5 rounded-full text-xs font-medium ${mediumColor(attr.medium)}`}
+                    >
+                      {attr.medium}
+                    </span>
+                    {attr.campaign && (
+                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
+                        {attr.campaign}
+                      </span>
+                    )}
+                    <span className="flex items-center gap-1 text-xs text-gray-500">
+                      <DeviceIcon type={attr.deviceType} />
+                      {attr.deviceType}
+                    </span>
                     {activeClickIds.length > 0 && (
                       <span className="flex items-center gap-1 text-xs text-gray-500">
                         <MousePointerClick className="w-3.5 h-3.5" />
                         {activeClickIds.map(([k]) => k).join(', ')}
                       </span>
                     )}
-                    <button onClick={() => setExpandedId(expanded ? null : submission.id)} className="ml-auto flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 transition-colors">
-                      {expanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+                    <button
+                      onClick={() => setExpandedId(expanded ? null : submission.id)}
+                      className="ml-auto flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                    >
+                      {expanded ? (
+                        <ChevronUp className="w-3.5 h-3.5" />
+                      ) : (
+                        <ChevronDown className="w-3.5 h-3.5" />
+                      )}
                       {expanded ? 'Hide' : 'Attribution'}
                     </button>
                   </div>
@@ -252,23 +348,50 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                     <div className="mt-3 pt-3 border-t border-gray-100 bg-gray-50 rounded-lg p-4 text-sm space-y-4">
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Traffic Source</h4>
+                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                            Traffic Source
+                          </h4>
                           <div className="space-y-1.5">
-                            <div className="flex justify-between"><span className="text-gray-500">Source</span><span className="font-medium text-gray-900">{attr.source}</span></div>
-                            <div className="flex justify-between"><span className="text-gray-500">Medium</span><span className="font-medium text-gray-900">{attr.medium}</span></div>
-                            {attr.campaign && <div className="flex justify-between"><span className="text-gray-500">Campaign</span><span className="font-medium text-gray-900">{attr.campaign}</span></div>}
-                            {attr.term && <div className="flex justify-between"><span className="text-gray-500">Keyword</span><span className="font-medium text-gray-900">{attr.term}</span></div>}
-                            {attr.content && <div className="flex justify-between"><span className="text-gray-500">Content</span><span className="font-medium text-gray-900">{attr.content}</span></div>}
+                            <div className="flex justify-between">
+                              <span className="text-gray-500">Source</span>
+                              <span className="font-medium text-gray-900">{attr.source}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span className="text-gray-500">Medium</span>
+                              <span className="font-medium text-gray-900">{attr.medium}</span>
+                            </div>
+                            {attr.campaign && (
+                              <div className="flex justify-between">
+                                <span className="text-gray-500">Campaign</span>
+                                <span className="font-medium text-gray-900">{attr.campaign}</span>
+                              </div>
+                            )}
+                            {attr.term && (
+                              <div className="flex justify-between">
+                                <span className="text-gray-500">Keyword</span>
+                                <span className="font-medium text-gray-900">{attr.term}</span>
+                              </div>
+                            )}
+                            {attr.content && (
+                              <div className="flex justify-between">
+                                <span className="text-gray-500">Content</span>
+                                <span className="font-medium text-gray-900">{attr.content}</span>
+                              </div>
+                            )}
                           </div>
                         </div>
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Page Context</h4>
+                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                            Page Context
+                          </h4>
                           <div className="space-y-1.5">
                             <div>
                               <span className="text-gray-500 text-xs">Landing Page</span>
                               <div className="flex items-center gap-1 mt-0.5">
                                 <MapPin className="w-3 h-3 text-gray-400 shrink-0" />
-                                <span className="font-medium text-gray-900 text-xs break-all">{attr.landingPage}</span>
+                                <span className="font-medium text-gray-900 text-xs break-all">
+                                  {attr.landingPage}
+                                </span>
                               </div>
                             </div>
                             {attr.referrer && (
@@ -276,41 +399,62 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                                 <span className="text-gray-500 text-xs">Referrer</span>
                                 <div className="flex items-center gap-1 mt-0.5">
                                   <ExternalLink className="w-3 h-3 text-gray-400 shrink-0" />
-                                  <span className="font-medium text-gray-900 text-xs break-all">{attr.referrer}</span>
+                                  <span className="font-medium text-gray-900 text-xs break-all">
+                                    {attr.referrer}
+                                  </span>
                                 </div>
                               </div>
                             )}
-                            <div className="flex justify-between"><span className="text-gray-500">Device</span><span className="flex items-center gap-1 font-medium text-gray-900"><DeviceIcon type={attr.deviceType} />{attr.deviceType}</span></div>
+                            <div className="flex justify-between">
+                              <span className="text-gray-500">Device</span>
+                              <span className="flex items-center gap-1 font-medium text-gray-900">
+                                <DeviceIcon type={attr.deviceType} />
+                                {attr.deviceType}
+                              </span>
+                            </div>
                           </div>
                         </div>
                       </div>
                       {activeClickIds.length > 0 && (
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Click IDs</h4>
+                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                            Click IDs
+                          </h4>
                           <div className="flex flex-wrap gap-2">
                             {activeClickIds.map(([key, val]) => (
-                              <div key={key} className="px-2.5 py-1 bg-white border border-gray-200 rounded-lg">
+                              <div
+                                key={key}
+                                className="px-2.5 py-1 bg-white border border-gray-200 rounded-lg"
+                              >
                                 <span className="text-xs text-gray-500">{key}: </span>
-                                <span className="text-xs font-mono text-gray-800">{String(val).slice(0, 20)}...</span>
+                                <span className="text-xs font-mono text-gray-800">
+                                  {String(val).slice(0, 20)}...
+                                </span>
                               </div>
                             ))}
                           </div>
                         </div>
                       )}
-                      <div className="text-xs text-gray-500">Attribution captured {attr.capturedAt}</div>
+                      <div className="text-xs text-gray-500">
+                        Attribution captured {attr.capturedAt}
+                      </div>
                     </div>
                   )}
                 </div>
 
                 <div className="px-4 py-3 border-t border-gray-200 flex items-center gap-2">
-                  <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Reply</button>
-                  <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Mark as Read</button>
+                  <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                    Reply
+                  </button>
+                  <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                    Mark as Read
+                  </button>
                 </div>
               </div>
-            );
+            )
           })}
         </div>
       )}
     </div>
-  );
+  )
 }