@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/views/FormSubmissions.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+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';
+
+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;
+}
+
+interface Submission {
+  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';
+}
+
+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';
+}
+
+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" />;
+}
+
+export interface FormSubmissionsProps {
+  formId: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
+  const { data, loading, error, refetch } = useApiData<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 = data ?? [];
+
+  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;
+    });
+
+    if (searchQuery.trim()) {
+      results = sortByRelevance(results, searchQuery, (s) => [s.name, s.email, s.message]);
+    }
+    return results;
+  }, [submissions, searchQuery, filterStatus, filterSource]);
+
+  const uniqueSources = [...new Set(submissions.map(s => s.attribution.source))];
+
+  const sourceSummary = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const s of submissions) {
+      const key = `${s.attribution.source} / ${s.attribution.medium}`;
+      counts[key] = (counts[key] ?? 0) + 1;
+    }
+    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 handleExport = () => {
+    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 (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+      {error && (
+        <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>
+        </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>
+        <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>
+          </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>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
+        <div className="bg-white rounded-lg border border-gray-200 p-4">
+          <div className="text-xs text-gray-600 mb-1">Total</div>
+          <div className="text-2xl font-semibold text-gray-900">{submissions.length}</div>
+        </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>
+        <div className="bg-white rounded-lg border border-gray-200 p-4">
+          <div className="text-xs text-gray-600 mb-1">Paid Traffic</div>
+          <div className="text-2xl font-semibold text-orange-600">{paidCount}</div>
+        </div>
+        <div className="bg-white rounded-lg border border-gray-200 p-4">
+          <div className="text-xs text-gray-600 mb-1">Organic</div>
+          <div className="text-2xl font-semibold text-green-600">{organicCount}</div>
+        </div>
+        <div className="bg-white rounded-lg border border-gray-200 p-4">
+          <div className="text-xs text-gray-600 mb-1">Top Source</div>
+          <div className="text-lg font-semibold text-gray-900">{sourceSummary[0]?.[0] ?? '—'}</div>
+        </div>
+      </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>
+        <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>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+        <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" />
+          </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">
+            <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">
+            <option value="all">All Sources</option>
+            {uniqueSources.map(src => <option key={src} value={src}>{src}</option>)}
+          </select>
+        </div>
+      </div>
+
+      {filteredSubmissions.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
+          <p className="text-sm text-gray-500">No submissions yet</p>
+        </div>
+      ) : (
+        <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);
+
+            return (
+              <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">
+                      <div className="w-10 h-10 bg-linear-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-medium shrink-0 text-sm">
+                        {submission.name.charAt(0)}
+                      </div>
+                      <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>
+                        </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>
+                    </div>
+                    <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="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>
+                    {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" />}
+                      {expanded ? 'Hide' : 'Attribution'}
+                    </button>
+                  </div>
+
+                  {expanded && (
+                    <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>
+                          <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>
+                        </div>
+                        <div>
+                          <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>
+                              </div>
+                            </div>
+                            {attr.referrer && (
+                              <div>
+                                <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>
+                                </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>
+                        </div>
+                      </div>
+                      {activeClickIds.length > 0 && (
+                        <div>
+                          <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">
+                                <span className="text-xs text-gray-500">{key}: </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>
+                  )}
+                </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>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/Forms.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Plus, MoreVertical, FileText, Send, Search, Loader2, AlertTriangle } from 'lucide-react';
+import { useState, useMemo } from 'react';
+import { sortByRelevance } from '../lib/search.js';
+import { useApiData } from '../lib/useApiData.js';
+
+export interface FormsProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function Forms({ onNavigate }: FormsProps) {
+  const { data, loading, error, refetch } = useApiData<any[]>('/forms');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const forms = data ?? [];
+
+  const filteredAndSorted = useMemo(() => {
+    let results = forms.filter((form: any) =>
+      form.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (form.description ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    if (searchQuery.trim()) {
+      results = sortByRelevance(results, searchQuery, (f: any) => [f.name, f.description ?? '']);
+    }
+    return results;
+  }, [forms, searchQuery]);
+
+  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 (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+      {error && (
+        <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>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Forms</h1>
+          <p className="text-sm text-gray-600">{filteredAndSorted.length} total forms</p>
+        </div>
+        <button onClick={() => onNavigate?.('/forms/new')} 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">
+          <Plus className="w-4 h-4" />
+          New Form
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+        <div className="p-3">
+          <div className="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 forms..."
+              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>
+        </div>
+      </div>
+
+      {filteredAndSorted.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
+          <p className="text-sm text-gray-500 mb-2">No forms yet</p>
+          <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Create your first form</button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filteredAndSorted.map((form: any) => (
+            <div key={form.id} className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow">
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 mb-1">{form.name}</h3>
+                  <p className="text-sm text-gray-600 mb-2">{form.description}</p>
+                </div>
+                <button className="p-1.5 hover:bg-gray-100 rounded transition-colors">
+                  <MoreVertical className="w-4 h-4 text-gray-600" />
+                </button>
+              </div>
+              <div className="flex items-center gap-4 text-sm text-gray-600 mb-3">
+                <span className="flex items-center gap-1"><FileText className="w-4 h-4" />{form.fields} fields</span>
+                <span className="flex items-center gap-1"><Send className="w-4 h-4" />{form.submissions} submissions</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <button onClick={() => onNavigate?.(`/forms/${form.id}/submissions`)} className="flex-1 px-3 py-1.5 text-sm text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">View Submissions</button>
+                <button onClick={() => onNavigate?.(`/forms/${form.id}/edit`)} className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Edit</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}