Build AgentMinder Campaign Command Center - Phase 1 complete

Full-featured sales campaign dashboard replacing Looker Studio with
responsive Next.js app. Includes Executive Overview, Account Explorer
with priority algorithm, Activities with detail overlay, Pipeline/Opps
with deal panels, Implementation tracking, and Data Admin with CSV
import and CRUD operations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/admin/page.tsx

@@ -0,0 +1,538 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+
+type Tab = 'import' | 'accounts' | 'pipeline' | 'activities' | 'targets';
+
+interface Stats {
+  accounts: number;
+  pipeline: number;
+  activities: number;
+  targets: number;
+}
+
+export default function AdminPage() {
+  const [tab, setTab] = useState<Tab>('import');
+  const [stats, setStats] = useState<Stats>({ accounts: 0, pipeline: 0, activities: 0, targets: 0 });
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => {
+    fetch('/api/admin').then(r => r.json()).then(d => setStats(d.stats));
+  }, []);
+
+  const showMessage = (type: 'success' | 'error', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 5000);
+  };
+
+  const refreshStats = async () => {
+    const r = await fetch('/api/admin');
+    const d = await r.json();
+    setStats(d.stats);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#f5f6f8]">
+      <header className="bg-[#1B1D36] text-white px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/" className="text-white/70 hover:text-white text-sm">
+            &larr; Dashboard
+          </Link>
+          <h1 className="text-lg font-bold">Data Admin</h1>
+        </div>
+        <div className="flex gap-4 text-sm">
+          <span className="bg-white/10 px-3 py-1 rounded">{stats.accounts} accounts</span>
+          <span className="bg-white/10 px-3 py-1 rounded">{stats.pipeline} deals</span>
+          <span className="bg-white/10 px-3 py-1 rounded">{stats.activities} activities</span>
+          <span className="bg-white/10 px-3 py-1 rounded">{stats.targets} targets</span>
+        </div>
+      </header>
+
+      {message && (
+        <div className={`px-6 py-3 text-sm font-medium ${message.type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+          {message.text}
+        </div>
+      )}
+
+      <div className="px-6 pt-4 flex gap-1 border-b border-gray-200 bg-white">
+        {(['import', 'accounts', 'pipeline', 'activities', 'targets'] as Tab[]).map(t => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-4 py-2.5 text-sm font-medium capitalize rounded-t-lg transition ${
+              tab === t
+                ? 'bg-[#f5f6f8] text-[#1B1D36] border-t-2 border-x border-[#0098C7]'
+                : 'text-gray-500 hover:text-gray-800 hover:bg-gray-50'
+            }`}
+          >
+            {t === 'import' ? 'Import Data' : t}
+          </button>
+        ))}
+      </div>
+
+      <div className="p-6">
+        {tab === 'import' && <ImportTab onComplete={() => { refreshStats(); showMessage('success', 'Import complete!'); }} onError={showMessage} loading={loading} setLoading={setLoading} />}
+        {tab === 'accounts' && <DataTable table="accounts" onUpdate={refreshStats} showMessage={showMessage} />}
+        {tab === 'pipeline' && <DataTable table="pipeline" onUpdate={refreshStats} showMessage={showMessage} />}
+        {tab === 'activities' && <DataTable table="activities" onUpdate={refreshStats} showMessage={showMessage} />}
+        {tab === 'targets' && <DataTable table="targets" onUpdate={refreshStats} showMessage={showMessage} />}
+      </div>
+    </div>
+  );
+}
+
+function ImportTab({ onComplete, onError, loading, setLoading }: {
+  onComplete: () => void;
+  onError: (type: 'success' | 'error', text: string) => void;
+  loading: boolean;
+  setLoading: (v: boolean) => void;
+}) {
+  const [csvTab, setCsvTab] = useState<string>('accounts');
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = async (file: File, tabName: string) => {
+    setLoading(true);
+    try {
+      const text = await file.text();
+      const res = await fetch('/api/import', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tab: tabName, csv: text }),
+      });
+      const result = await res.json();
+      if (result.success) {
+        onComplete();
+      } else {
+        onError('error', result.error || 'Import failed');
+      }
+    } catch (err) {
+      onError('error', String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBulkUpload = async (files: FileList) => {
+    setLoading(true);
+    try {
+      for (const file of Array.from(files)) {
+        const name = file.name.toLowerCase().replace('.csv', '');
+        let tabName = name;
+        if (name.includes('pipeline')) tabName = 'pipeline';
+        else if (name.includes('account')) tabName = 'accounts';
+        else if (name.includes('activity')) tabName = 'activities';
+        else if (name.includes('target') || name.includes('implementation')) tabName = 'targets';
+
+        const text = await file.text();
+        await fetch('/api/import', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ tab: tabName, csv: text }),
+        });
+      }
+      onComplete();
+    } catch (err) {
+      onError('error', String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl space-y-8">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h2 className="text-lg font-bold text-[#1B1D36] mb-2">Import from Google Sheets</h2>
+        <p className="text-sm text-gray-500 mb-4">
+          Export each tab from your Google Sheet as CSV (File &rarr; Download &rarr; Comma-separated values), then upload them here.
+          The import is idempotent &mdash; accounts and pipeline records are upserted by their ID, so re-importing is safe.
+        </p>
+
+        <div className="bg-[#f5f6f8] rounded-lg p-4 mb-4">
+          <h3 className="text-sm font-semibold mb-3">Quick Import: Upload All CSVs at Once</h3>
+          <p className="text-xs text-gray-500 mb-3">
+            Name your files with the tab name (e.g. <code className="bg-gray-200 px-1 rounded">Pipeline.csv</code>, <code className="bg-gray-200 px-1 rounded">Accounts.csv</code>, <code className="bg-gray-200 px-1 rounded">Activity_Log.csv</code>, <code className="bg-gray-200 px-1 rounded">Targets.csv</code>).
+          </p>
+          <input
+            type="file"
+            accept=".csv"
+            multiple
+            onChange={e => e.target.files && handleBulkUpload(e.target.files)}
+            disabled={loading}
+            className="block w-full text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[#0098C7] file:text-white hover:file:bg-[#007ba3] file:cursor-pointer disabled:opacity-50"
+          />
+        </div>
+
+        <div className="border-t border-gray-200 pt-4">
+          <h3 className="text-sm font-semibold mb-3">Import Single Tab</h3>
+          <div className="flex gap-2 mb-3">
+            {['accounts', 'pipeline', 'activities', 'targets'].map(t => (
+              <button
+                key={t}
+                onClick={() => setCsvTab(t)}
+                className={`px-3 py-1.5 text-xs font-medium rounded-lg capitalize transition ${
+                  csvTab === t ? 'bg-[#1B1D36] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".csv"
+              disabled={loading}
+              className="block flex-1 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gray-700 file:text-white hover:file:bg-gray-800 file:cursor-pointer disabled:opacity-50"
+            />
+            <button
+              onClick={() => {
+                const f = fileRef.current?.files?.[0];
+                if (f) handleFileUpload(f, csvTab);
+              }}
+              disabled={loading}
+              className="px-4 py-2 bg-[#0098C7] text-white text-sm font-semibold rounded-lg hover:bg-[#007ba3] disabled:opacity-50"
+            >
+              {loading ? 'Importing...' : `Import as ${csvTab}`}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h2 className="text-lg font-bold text-[#1B1D36] mb-2">Expected Column Headers</h2>
+        <p className="text-sm text-gray-500 mb-4">Your CSV files should have these headers in Row 1 (case-sensitive):</p>
+        <div className="space-y-3 text-sm">
+          <div>
+            <span className="font-semibold">Accounts:</span>{' '}
+            <code className="text-xs bg-gray-100 px-1 rounded">Account_Name, District_Name, Tier, Priority, AgentMinder_Status</code>
+            <span className="text-gray-400 ml-1">(+ optional: Current_ARR_USD, Touch_Count, Date_First_Touched, Date_Last_Touched, MAP_In_Place_YN)</span>
+          </div>
+          <div>
+            <span className="font-semibold">Pipeline:</span>{' '}
+            <code className="text-xs bg-gray-100 px-1 rounded">Opportunity_ID, Account_Name, District_Name, Stage, Forecast_Category, Amount_USD, Created_Date, Expected_Close_Date</code>
+          </div>
+          <div>
+            <span className="font-semibold">Activity_Log:</span>{' '}
+            <code className="text-xs bg-gray-100 px-1 rounded">Activity_Date, Activity_Type, Account_Name, District_Name</code>
+            <span className="text-gray-400 ml-1">(+ optional: Contact_Name, Notes)</span>
+          </div>
+          <div>
+            <span className="font-semibold">Targets:</span>{' '}
+            <code className="text-xs bg-gray-100 px-1 rounded">Account_Name, Implementation_Stage</code>
+            <span className="text-gray-400 ml-1">(+ optional: Go_Live_Date, Health_Status, Notes)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const FIELD_OPTIONS: Record<string, string[]> = {
+  Tier: ['Tier 1', 'Tier 2', 'Tier 3', 'Tier 4'],
+  Priority: ['High', 'Medium', 'Low'],
+  AgentMinder_Status: ['Not Touched', '10% - Prospect', '15% - Prospect - No Opp', '20% - Research', '40% - Verify', '60% - Prove', '80% - Pricing', '100% - Closed Won', 'Lost'],
+  District_Name: ['SE-MISS-VALLEY', 'SE-PEACHTREE', 'SE-SUNSHINE', 'SE-MID-ATL'],
+  MAP_In_Place_YN: ['Y', 'N'],
+  Stage: ['01-Qualified', '02-Discovery', '03-Evaluation', '04-Business Case', '05-Negotiation', '06-Closed Won', '07-Closed Lost'],
+  Forecast_Category: ['Commit', 'Best Case', 'Pipeline', 'Omitted', 'Closed'],
+  Deal_Type: ['Cross-Sell', 'Net-New Division', 'Net-New Logo', 'Expansion'],
+  Activity_Type: ['Launch Briefing', 'Discovery', 'Demo', 'Exec Meeting', 'Webinar Attendance', 'Email Sequence Touch', 'Renewal Conversation', 'QBR Attach', 'Referral Ask'],
+  Play: ['Attach', 'Renewal-Trigger', 'Referral', 'Inbound', 'Whitespace'],
+  Channel: ['In Person', 'Video Call', 'Phone', 'Email', 'Webinar', 'LinkedIn', 'Event'],
+  Persona: ['Economic Buyer', 'Champion', 'Technical Evaluator', 'End User', 'Procurement'],
+  Outcome: ['Advanced', 'Follow-up Scheduled', 'Opportunity Created', 'No Decision Yet', 'No Response', 'No Interest', 'Disqualified'],
+  Implementation_Stage: ['Not Started', 'In Progress', 'Live', 'At Risk', 'Stalled'],
+  Health_Status: ['Green', 'Yellow', 'Red'],
+};
+
+interface FieldDef { key: string; label: string; required?: boolean; type?: string; options?: string[] }
+
+const TABLE_FIELDS: Record<string, FieldDef[]> = {
+  accounts: [
+    { key: 'Account_Name', label: 'Account Name', required: true },
+    { key: 'District_Name', label: 'District', required: true, options: FIELD_OPTIONS.District_Name },
+    { key: 'Tier', label: 'Tier', options: FIELD_OPTIONS.Tier },
+    { key: 'Priority', label: 'Priority', options: FIELD_OPTIONS.Priority },
+    { key: 'AgentMinder_Status', label: 'Status', options: FIELD_OPTIONS.AgentMinder_Status },
+    { key: 'Current_ARR_USD', label: 'Current ARR', type: 'number' },
+    { key: 'MAP_In_Place_YN', label: 'MAP in Place', options: FIELD_OPTIONS.MAP_In_Place_YN },
+    { key: 'Company_URL', label: 'Company URL' },
+    { key: 'Logo_URL', label: 'Logo URL' },
+    { key: 'Area_Sales_Leader', label: 'Area Sales Leader' },
+    { key: 'DM', label: 'DM' },
+    { key: 'AD', label: 'AD' },
+    { key: 'IMS_BA', label: 'IMS BA' },
+    { key: 'Next_Renewal_Date', label: 'Next Renewal Date', type: 'date' },
+    { key: 'Next_Renewal_EAR', label: 'Next Renewal EAR', type: 'number' },
+    { key: 'Anchor_Contract_Date', label: 'Anchor Contract Date', type: 'date' },
+    { key: 'Anchor_Contract_EAR', label: 'Anchor Contract EAR', type: 'number' },
+    { key: 'Google_Drive_URL', label: 'Google Drive Link' },
+    { key: 'Campaign_Artifacts_URL', label: 'Campaign Artifacts Link' },
+  ],
+  pipeline: [
+    { key: 'Opportunity_ID', label: 'Opp ID', required: true },
+    { key: 'Account_Name', label: 'Account Name', required: true },
+    { key: 'District_Name', label: 'District', required: true, options: FIELD_OPTIONS.District_Name },
+    { key: 'Stage', label: 'Stage', options: FIELD_OPTIONS.Stage },
+    { key: 'Forecast_Category', label: 'Forecast', options: FIELD_OPTIONS.Forecast_Category },
+    { key: 'Deal_Type', label: 'Deal Type', options: FIELD_OPTIONS.Deal_Type },
+    { key: 'Amount_USD', label: 'Amount', type: 'number', required: true },
+    { key: 'Closed_Amount_USD', label: 'Closed Amount', type: 'number' },
+    { key: 'Probability_Pct', label: 'Probability %', type: 'number' },
+    { key: 'Created_Date', label: 'Created Date', type: 'date', required: true },
+    { key: 'Expected_Close_Date', label: 'Expected Close', type: 'date' },
+    { key: 'Closed_Date', label: 'Closed Date', type: 'date' },
+    { key: 'Champion_Name', label: 'Champion' },
+    { key: 'Economic_Buyer', label: 'Economic Buyer' },
+    { key: 'Next_Step', label: 'Next Step' },
+    { key: 'Competitor', label: 'Competitor' },
+    { key: 'Source_Play', label: 'Source Play' },
+  ],
+  activities: [
+    { key: 'Activity_Date', label: 'Date', type: 'date', required: true },
+    { key: 'Activity_Type', label: 'Type', required: true, options: FIELD_OPTIONS.Activity_Type },
+    { key: 'Account_Name', label: 'Account Name', required: true },
+    { key: 'District_Name', label: 'District', required: true, options: FIELD_OPTIONS.District_Name },
+    { key: 'Contact_Name', label: 'Contact' },
+    { key: 'Notes', label: 'Notes' },
+    { key: 'Play', label: 'Play', options: FIELD_OPTIONS.Play },
+    { key: 'Channel', label: 'Channel', options: FIELD_OPTIONS.Channel },
+    { key: 'Persona', label: 'Persona', options: FIELD_OPTIONS.Persona },
+    { key: 'Outcome', label: 'Outcome', options: FIELD_OPTIONS.Outcome },
+    { key: 'Logged_By', label: 'Logged By' },
+  ],
+  targets: [
+    { key: 'Account_Name', label: 'Account Name', required: true },
+    { key: 'Implementation_Stage', label: 'Stage', required: true, options: FIELD_OPTIONS.Implementation_Stage },
+    { key: 'Go_Live_Date', label: 'Go-Live Date', type: 'date' },
+    { key: 'Health_Status', label: 'Health', options: FIELD_OPTIONS.Health_Status },
+    { key: 'Notes', label: 'Notes' },
+  ],
+};
+
+function RecordForm({ table, record, onSave, onCancel }: {
+  table: string;
+  record: Record<string, unknown> | null;
+  onSave: (data: Record<string, unknown>) => void;
+  onCancel: () => void;
+}) {
+  const fields = TABLE_FIELDS[table] || [];
+  const [form, setForm] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {};
+    fields.forEach(f => {
+      init[f.key] = record ? String(record[f.key] ?? '') : '';
+    });
+    return init;
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const data: Record<string, unknown> = {};
+    fields.forEach(f => {
+      const v = form[f.key]?.trim();
+      if (f.type === 'number') {
+        data[f.key] = v ? Number(v) : null;
+      } else {
+        data[f.key] = v || null;
+      }
+    });
+    onSave(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-5 mb-4">
+      <h3 className="text-sm font-bold text-[#1B1D36] mb-4">{record ? 'Edit Record' : 'Add New Record'}</h3>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {fields.map(f => (
+          <div key={f.key}>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              {f.label} {f.required && <span className="text-red-500">*</span>}
+            </label>
+            {f.options ? (
+              <select
+                value={form[f.key] || ''}
+                onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
+                required={f.required}
+                className="w-full px-2.5 py-1.5 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#0098C7]/30 focus:border-[#0098C7]"
+              >
+                <option value="">— Select —</option>
+                {f.options.map(opt => (
+                  <option key={opt} value={opt}>{opt}</option>
+                ))}
+              </select>
+            ) : (
+              <input
+                type={f.type === 'number' ? 'number' : f.type === 'date' ? 'date' : 'text'}
+                step={f.type === 'number' ? 'any' : undefined}
+                value={form[f.key] || ''}
+                onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
+                required={f.required}
+                className="w-full px-2.5 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#0098C7]/30 focus:border-[#0098C7]"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="flex gap-2 mt-4">
+        <button type="submit" className="px-4 py-2 bg-[#0098C7] text-white text-sm font-semibold rounded-lg hover:bg-[#007ba3]">
+          {record ? 'Save Changes' : 'Add Record'}
+        </button>
+        <button type="button" onClick={onCancel} className="px-4 py-2 bg-gray-100 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-200">
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function DataTable({ table, onUpdate, showMessage }: {
+  table: string;
+  onUpdate: () => void;
+  showMessage: (type: 'success' | 'error', text: string) => void;
+}) {
+  const [data, setData] = useState<Record<string, unknown>[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [editRecord, setEditRecord] = useState<Record<string, unknown> | null>(null);
+
+  const loadData = async () => {
+    setLoading(true);
+    const res = await fetch('/api/admin', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'list', table }),
+    });
+    const result = await res.json();
+    setData(result.data || []);
+    setLoading(false);
+  };
+
+  useEffect(() => { loadData(); }, [table]);
+
+  const handleDelete = async (record: Record<string, unknown>) => {
+    if (!confirm('Delete this record?')) return;
+    await fetch('/api/admin', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'delete', table, record }),
+    });
+    showMessage('success', 'Record deleted');
+    loadData();
+    onUpdate();
+  };
+
+  const handleSave = async (record: Record<string, unknown>) => {
+    try {
+      const res = await fetch('/api/admin', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'upsert', table, record }),
+      });
+      const result = await res.json();
+      if (result.success) {
+        showMessage('success', editRecord ? 'Record updated' : 'Record added');
+        setShowForm(false);
+        setEditRecord(null);
+        loadData();
+        onUpdate();
+      } else {
+        showMessage('error', result.error || 'Save failed');
+      }
+    } catch (err) {
+      showMessage('error', String(err));
+    }
+  };
+
+  if (loading) return <div className="text-gray-500 text-sm">Loading...</div>;
+
+  const allKeys = data.length > 0 ? Object.keys(data[0]) : [];
+  const isAccounts = table === 'accounts';
+  const displayKeys = allKeys.filter(k => k !== 'id' && !(isAccounts && (k === 'Logo_URL' || k === 'Google_Drive_URL' || k === 'Campaign_Artifacts_URL')));
+  const filtered = data.filter(row =>
+    search === '' || Object.values(row).some(v => String(v ?? '').toLowerCase().includes(search.toLowerCase()))
+  );
+
+  return (
+    <div>
+      {(showForm || editRecord) && (
+        <RecordForm
+          table={table}
+          record={editRecord}
+          onSave={handleSave}
+          onCancel={() => { setShowForm(false); setEditRecord(null); }}
+        />
+      )}
+
+      <div className="flex items-center gap-4 mb-4">
+        <input
+          type="text"
+          placeholder="Search records..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:outline-none focus:ring-2 focus:ring-[#0098C7]"
+        />
+        <span className="text-sm text-gray-500">{filtered.length} records</span>
+        {!showForm && !editRecord && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="ml-auto px-4 py-2 bg-[#0098C7] text-white text-sm font-semibold rounded-lg hover:bg-[#007ba3] flex items-center gap-1.5"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+            Add Record
+          </button>
+        )}
+      </div>
+      <div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              {displayKeys.map(k => (
+                <th key={k} className="text-left px-3 py-2.5 font-semibold text-gray-700 whitespace-nowrap">{k}</th>
+              ))}
+              <th className="px-3 py-2.5 w-24"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.slice(0, 200).map((row, i) => (
+              <tr key={i} className="border-b border-gray-100 hover:bg-gray-50">
+                {displayKeys.map(k => (
+                  <td key={k} className="px-3 py-2 text-gray-700 whitespace-nowrap max-w-[200px] truncate" title={String(row[k] ?? '')}>
+                    {isAccounts && k === 'Account_Name' ? (
+                      <span className="flex items-center gap-2">
+                        {row.Logo_URL ? (
+                          <img src={String(row.Logo_URL)} alt="" className="w-5 h-5 rounded object-contain flex-shrink-0" onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                        ) : (
+                          <span className="w-5 h-5 rounded bg-gray-200 flex-shrink-0 flex items-center justify-center text-[10px] font-bold text-gray-400">
+                            {String(row[k] ?? '').charAt(0)}
+                          </span>
+                        )}
+                        {String(row[k] ?? '')}
+                      </span>
+                    ) : (
+                      String(row[k] ?? '')
+                    )}
+                  </td>
+                ))}
+                <td className="px-3 py-2 flex gap-2">
+                  <button onClick={() => { setEditRecord(row); setShowForm(false); }} className="text-[#0098C7] hover:text-[#007ba3] text-xs font-medium">
+                    Edit
+                  </button>
+                  <button onClick={() => handleDelete(row)} className="text-red-500 hover:text-red-700 text-xs font-medium">
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {filtered.length > 200 && (
+          <div className="px-3 py-2 text-xs text-gray-400">Showing first 200 of {filtered.length} records</div>
+        )}
+      </div>
+    </div>
+  );
+}