@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/SEO.tsx

@@ -1,136 +1,214 @@
-'use client';
+'use client'
 
-import * as Tabs from '@radix-ui/react-tabs';
+import * as Tabs from '@radix-ui/react-tabs'
 import {
-  Search, Globe, FileCode2, BarChart3, AlertTriangle, CheckCircle2, XCircle,
-  ArrowUpRight, RefreshCw, BookOpen, Link2, Bot, Plus, Pencil, Trash2,
-  ExternalLink, ArrowRightLeft, Copy, ShieldCheck, Loader2,
-} from 'lucide-react';
-import { useState, useMemo, type FormEvent } from 'react';
-import { toast } from 'sonner';
-import * as Dialog from '@radix-ui/react-dialog';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+  Search,
+  Globe,
+  FileCode2,
+  BarChart3,
+  AlertTriangle,
+  CheckCircle2,
+  XCircle,
+  ArrowUpRight,
+  RefreshCw,
+  BookOpen,
+  Link2,
+  Bot,
+  Plus,
+  Pencil,
+  Trash2,
+  ExternalLink,
+  ArrowRightLeft,
+  Copy,
+  ShieldCheck,
+  Loader2,
+} from 'lucide-react'
+import { useState, useMemo, type FormEvent } from 'react'
+import { toast } from 'sonner'
+import * as Dialog from '@radix-ui/react-dialog'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
 export interface SEOProps {
-  onNavigate?: (path: string) => void;
-  initialTab?: string;
+  onNavigate?: (path: string) => void
+  initialTab?: string
 }
 
 export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
-  const { data: seoData, loading: seoLoading, error: seoError, refetch: seoRefetch } = useApiData<any[]>('/seo/pages');
-  const { data: redirectsData, loading: redirectsLoading, error: redirectsError, refetch: redirectsRefetch } = useApiData<any[]>('/redirects');
-  const { data: linkHealthData, loading: linkHealthLoading } = useApiData<any[]>('/seo/link-health');
-
-  const [activeTab, setActiveTab] = useState(initialTab);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterScore, setFilterScore] = useState<string>('all');
-  const [scanning, setScanning] = useState(false);
-
-  const [showAddRedirect, setShowAddRedirect] = useState(false);
-  const [newRedirect, setNewRedirect] = useState({ source: '', destination: '', type: '301' as '301' | '302' });
-  const [redirectSearch, setRedirectSearch] = useState('');
-
-  const seoPages = seoData ?? [];
-  const redirects = redirectsData ?? [];
-  const linkHealth = linkHealthData ?? [];
+  const {
+    data: seoData,
+    loading: seoLoading,
+    error: seoError,
+    refetch: seoRefetch,
+  } = useApiData<any[]>('/seo/pages')
+  const {
+    data: redirectsData,
+    loading: redirectsLoading,
+    error: redirectsError,
+    refetch: redirectsRefetch,
+  } = useApiData<any[]>('/redirects')
+  // /seo/link-health returns `{ truncated, checked, issues: [...] }`,
+  // NOT a bare array — the previous `useApiData<any[]>` typing was a lie
+  // and `linkHealthData ?? []` coerced the wrapper object into the
+  // `linkHealth` variable, which then crashed every render with
+  // "M.filter is not a function" because the JSX inside the (unmounted)
+  // links tab is still evaluated eagerly before being passed to Radix.
+  interface LinkHealthResponse {
+    truncated: boolean
+    checked: number
+    issues: Array<{
+      id: string
+      page: string
+      url: string
+      status: number
+      type: string
+    }>
+  }
+  const { data: linkHealthData, loading: linkHealthLoading } =
+    useApiData<LinkHealthResponse>('/seo/link-health')
+
+  const [activeTab, setActiveTab] = useState(initialTab)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterScore, setFilterScore] = useState<string>('all')
+  const [scanning, setScanning] = useState(false)
+
+  const [showAddRedirect, setShowAddRedirect] = useState(false)
+  const [newRedirect, setNewRedirect] = useState({
+    source: '',
+    destination: '',
+    type: '301' as '301' | '302',
+  })
+  const [redirectSearch, setRedirectSearch] = useState('')
+
+  const seoPages = seoData ?? []
+  const redirects = redirectsData ?? []
+  const linkHealth = linkHealthData?.issues ?? []
 
   const handleTabChange = (tab: string) => {
-    setActiveTab(tab);
-    const path = tab === 'pages' ? '/seo' : `/seo/${tab}`;
-    onNavigate?.(path);
-  };
+    setActiveTab(tab)
+    const path = tab === 'pages' ? '/seo' : `/seo/${tab}`
+    onNavigate?.(path)
+  }
 
   // --- Pages tab data ---
   const filtered = seoPages
     .filter((page: any) => {
-      const matchesSearch = (page.url ?? '').toLowerCase().includes(searchQuery.toLowerCase()) || (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesScore = filterScore === 'all' || (filterScore === 'good' && page.score >= 80) || (filterScore === 'warning' && page.score >= 50 && page.score < 80) || (filterScore === 'critical' && page.score < 50);
-      return matchesSearch && matchesScore;
+      const matchesSearch =
+        (page.url ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesScore =
+        filterScore === 'all' ||
+        (filterScore === 'good' && page.score >= 80) ||
+        (filterScore === 'warning' && page.score >= 50 && page.score < 80) ||
+        (filterScore === 'critical' && page.score < 50)
+      return matchesSearch && matchesScore
     })
-    .sort((a: any, b: any) => !searchQuery ? b.issues - a.issues : 0);
+    .sort((a: any, b: any) => (!searchQuery ? b.issues - a.issues : 0))
 
-  const totalIssues = seoPages.reduce((sum: number, p: any) => sum + p.issues, 0);
-  const avgScore = seoPages.length > 0 ? Math.round(seoPages.reduce((sum: number, p: any) => sum + p.score, 0) / seoPages.length) : 0;
-  const missingMeta = seoPages.filter((p: any) => !p.metaTitle || !p.metaDescription).length;
-  const missingSchema = seoPages.filter((p: any) => !p.schemaType).length;
+  const totalIssues = seoPages.reduce((sum: number, p: any) => sum + p.issues, 0)
+  const avgScore =
+    seoPages.length > 0
+      ? Math.round(seoPages.reduce((sum: number, p: any) => sum + p.score, 0) / seoPages.length)
+      : 0
+  const missingMeta = seoPages.filter((p: any) => !p.metaTitle || !p.metaDescription).length
+  const missingSchema = seoPages.filter((p: any) => !p.schemaType).length
 
   // --- Canonical data ---
-  const missingCanonical = seoPages.filter((p: any) => !p.canonical);
-  const allCanonicals = seoPages.filter((p: any) => p.canonical);
-  const canonicalDomains = [...new Set(allCanonicals.map((p: any) => { try { return new URL(p.canonical).hostname; } catch { return ''; } }).filter(Boolean))];
+  const missingCanonical = seoPages.filter((p: any) => !p.canonical)
+  const allCanonicals = seoPages.filter((p: any) => p.canonical)
+  const canonicalDomains = [
+    ...new Set(
+      allCanonicals
+        .map((p: any) => {
+          try {
+            return new URL(p.canonical).hostname
+          } catch {
+            return ''
+          }
+        })
+        .filter(Boolean),
+    ),
+  ]
 
   // --- Redirects data ---
-  const filteredRedirects = redirects.filter((r: any) =>
-    (r.from ?? '').toLowerCase().includes(redirectSearch.toLowerCase()) ||
-    (r.to ?? '').toLowerCase().includes(redirectSearch.toLowerCase())
-  );
+  const filteredRedirects = redirects.filter(
+    (r: any) =>
+      (r.from ?? '').toLowerCase().includes(redirectSearch.toLowerCase()) ||
+      (r.to ?? '').toLowerCase().includes(redirectSearch.toLowerCase()),
+  )
 
   const handleScan = async () => {
-    setScanning(true);
+    setScanning(true)
     try {
-      const res = await cmsApi('/seo/scan', { method: 'POST' });
+      const res = await cmsApi('/seo/scan', { method: 'POST' })
       if (res.error) {
-        toast.error(res.error);
+        toast.error(res.error)
       } else {
-        const d = res.data as { total: number; pagesWithIssues: number; totalProblems: number };
-        toast.success(`SEO scan complete — ${d.totalProblems} issues found across ${d.pagesWithIssues} of ${d.total} pages`);
-        seoRefetch();
+        const d = res.data as { total: number; pagesWithIssues: number; totalProblems: number }
+        toast.success(
+          `SEO scan complete — ${d.totalProblems} issues found across ${d.pagesWithIssues} of ${d.total} pages`,
+        )
+        seoRefetch()
       }
     } catch {
-      toast.error('SEO scan failed');
+      toast.error('SEO scan failed')
     } finally {
-      setScanning(false);
+      setScanning(false)
     }
-  };
+  }
 
   const handleAddRedirect = async (e: FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
     const res = await cmsApi('/redirects', {
       method: 'POST',
-      body: JSON.stringify({ from: newRedirect.source, to: newRedirect.destination, type: newRedirect.type }),
-    });
+      body: JSON.stringify({
+        from: newRedirect.source,
+        to: newRedirect.destination,
+        type: newRedirect.type,
+      }),
+    })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Redirect added');
-      redirectsRefetch();
+      toast.success('Redirect added')
+      redirectsRefetch()
     }
-    setShowAddRedirect(false);
-    setNewRedirect({ source: '', destination: '', type: '301' });
-  };
+    setShowAddRedirect(false)
+    setNewRedirect({ source: '', destination: '', type: '301' })
+  }
 
   const handleDeleteRedirect = async (id: number) => {
-    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' });
+    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Redirect deleted');
-      redirectsRefetch();
+      toast.success('Redirect deleted')
+      redirectsRefetch()
     }
-  };
+  }
 
   function scoreBadge(score: number) {
-    if (score >= 80) return 'bg-green-100 text-green-800';
-    if (score >= 50) return 'bg-yellow-100 text-yellow-800';
-    return 'bg-red-100 text-red-800';
+    if (score >= 80) return 'bg-green-100 text-green-800'
+    if (score >= 50) return 'bg-yellow-100 text-yellow-800'
+    return 'bg-red-100 text-red-800'
   }
   function scoreIcon(score: number) {
-    if (score >= 80) return <CheckCircle2 className="w-4 h-4 text-green-600" />;
-    if (score >= 50) return <AlertTriangle className="w-4 h-4 text-yellow-600" />;
-    return <XCircle className="w-4 h-4 text-red-600" />;
+    if (score >= 80) return <CheckCircle2 className="w-4 h-4 text-green-600" />
+    if (score >= 50) return <AlertTriangle className="w-4 h-4 text-yellow-600" />
+    return <XCircle className="w-4 h-4 text-red-600" />
   }
 
-  const tabClass = "px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600 shrink-0";
+  const tabClass =
+    'px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600 shrink-0'
 
-  const isLoading = seoLoading || redirectsLoading || linkHealthLoading;
+  const isLoading = seoLoading || redirectsLoading || linkHealthLoading
 
   if (isLoading) {
     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 (
@@ -139,16 +217,30 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         <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">{seoError || redirectsError}</span>
-          <button onClick={() => { seoRefetch(); redirectsRefetch(); }} 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={() => {
+              seoRefetch()
+              redirectsRefetch()
+            }}
+            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 flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
         <div>
           <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">SEO & Redirects</h1>
-          <p className="text-sm text-gray-600">Search optimization, redirects, canonicalization, and link health</p>
+          <p className="text-sm text-gray-600">
+            Search optimization, redirects, canonicalization, and link health
+          </p>
         </div>
-        <button onClick={handleScan} disabled={scanning} className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-60">
+        <button
+          onClick={handleScan}
+          disabled={scanning}
+          className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-60"
+        >
           <RefreshCw className={`w-4 h-4 ${scanning ? 'animate-spin' : ''}`} />
           {scanning ? 'Scanning...' : 'Run SEO Scan'}
         </button>
@@ -157,16 +249,28 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
       <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
         <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
           <Tabs.Trigger value="pages" className={tabClass}>
-            <span className="flex items-center gap-1.5"><BarChart3 className="w-4 h-4" />Pages</span>
+            <span className="flex items-center gap-1.5">
+              <BarChart3 className="w-4 h-4" />
+              Pages
+            </span>
           </Tabs.Trigger>
           <Tabs.Trigger value="redirects" className={tabClass}>
-            <span className="flex items-center gap-1.5"><ArrowRightLeft className="w-4 h-4" />Redirects</span>
+            <span className="flex items-center gap-1.5">
+              <ArrowRightLeft className="w-4 h-4" />
+              Redirects
+            </span>
           </Tabs.Trigger>
           <Tabs.Trigger value="canonicals" className={tabClass}>
-            <span className="flex items-center gap-1.5"><Copy className="w-4 h-4" />Canonicalization</span>
+            <span className="flex items-center gap-1.5">
+              <Copy className="w-4 h-4" />
+              Canonicalization
+            </span>
           </Tabs.Trigger>
           <Tabs.Trigger value="links" className={tabClass}>
-            <span className="flex items-center gap-1.5"><Link2 className="w-4 h-4" />Link Health</span>
+            <span className="flex items-center gap-1.5">
+              <Link2 className="w-4 h-4" />
+              Link Health
+            </span>
           </Tabs.Trigger>
         </Tabs.List>
 
@@ -174,22 +278,40 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         <Tabs.Content value="pages" className="flex flex-col flex-1 min-h-0">
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><BarChart3 className="w-4 h-4 text-blue-600" /><span className="text-xs font-medium text-gray-600">Avg SEO Score</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <BarChart3 className="w-4 h-4 text-blue-600" />
+                <span className="text-xs font-medium text-gray-600">Avg SEO Score</span>
+              </div>
               <div className="text-2xl font-semibold text-gray-900">{avgScore}</div>
-              <div className={`text-xs mt-1 ${avgScore >= 80 ? 'text-green-600' : avgScore >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>{avgScore >= 80 ? 'Good' : avgScore >= 50 ? 'Needs improvement' : 'Critical'}</div>
+              <div
+                className={`text-xs mt-1 ${avgScore >= 80 ? 'text-green-600' : avgScore >= 50 ? 'text-yellow-600' : 'text-red-600'}`}
+              >
+                {avgScore >= 80 ? 'Good' : avgScore >= 50 ? 'Needs improvement' : 'Critical'}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><AlertTriangle className="w-4 h-4 text-yellow-600" /><span className="text-xs font-medium text-gray-600">Total Issues</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <AlertTriangle className="w-4 h-4 text-yellow-600" />
+                <span className="text-xs font-medium text-gray-600">Total Issues</span>
+              </div>
               <div className="text-2xl font-semibold text-gray-900">{totalIssues}</div>
-              <div className="text-xs text-gray-500 mt-1">Across {seoPages.filter((p: any) => p.issues > 0).length} pages</div>
+              <div className="text-xs text-gray-500 mt-1">
+                Across {seoPages.filter((p: any) => p.issues > 0).length} pages
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><FileCode2 className="w-4 h-4 text-purple-600" /><span className="text-xs font-medium text-gray-600">Missing Meta</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <FileCode2 className="w-4 h-4 text-purple-600" />
+                <span className="text-xs font-medium text-gray-600">Missing Meta</span>
+              </div>
               <div className="text-2xl font-semibold text-gray-900">{missingMeta}</div>
               <div className="text-xs text-gray-500 mt-1">Title or description</div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><Globe className="w-4 h-4 text-green-600" /><span className="text-xs font-medium text-gray-600">Missing Schema</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <Globe className="w-4 h-4 text-green-600" />
+                <span className="text-xs font-medium text-gray-600">Missing Schema</span>
+              </div>
               <div className="text-2xl font-semibold text-gray-900">{missingSchema}</div>
               <div className="text-xs text-gray-500 mt-1">No Schema.org markup</div>
             </div>
@@ -199,11 +321,23 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             <div className="flex items-start gap-3">
               <Bot className="w-5 h-5 text-indigo-600 mt-0.5 shrink-0" />
               <div className="flex-1">
-                <h3 className="text-sm font-semibold text-indigo-900 mb-1">AI SEO Recommendations</h3>
-                <p className="text-sm text-indigo-700 mb-2">{missingMeta} pages missing meta descriptions. {missingCanonical.length} pages without canonical URLs. AI can auto-generate these from page content.</p>
+                <h3 className="text-sm font-semibold text-indigo-900 mb-1">
+                  AI SEO Recommendations
+                </h3>
+                <p className="text-sm text-indigo-700 mb-2">
+                  {missingMeta} pages missing meta descriptions. {missingCanonical.length} pages
+                  without canonical URLs. AI can auto-generate these from page content.
+                </p>
                 <div className="flex items-center gap-2">
-                  <button onClick={() => onNavigate?.('/settings')} className="px-3 py-1.5 text-xs bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">Configure AI</button>
-                  <button className="px-3 py-1.5 text-xs border border-indigo-300 text-indigo-700 rounded-lg hover:bg-indigo-50 transition-colors">Auto-fix All</button>
+                  <button
+                    onClick={() => onNavigate?.('/settings')}
+                    className="px-3 py-1.5 text-xs bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+                  >
+                    Configure AI
+                  </button>
+                  <button className="px-3 py-1.5 text-xs border border-indigo-300 text-indigo-700 rounded-lg hover:bg-indigo-50 transition-colors">
+                    Auto-fix All
+                  </button>
                 </div>
               </div>
             </div>
@@ -213,9 +347,19 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             <div className="p-3 flex flex-col sm:flex-row gap-3">
               <div className="relative flex-1">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                <input type="text" placeholder="Search pages by URL or title..." 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 pages by URL or title..."
+                  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={filterScore} onChange={(e) => setFilterScore(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={filterScore}
+                onChange={(e) => setFilterScore(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 Scores</option>
                 <option value="good">Good (80+)</option>
                 <option value="warning">Needs Work (50-79)</option>
@@ -231,23 +375,105 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                   <tr>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Page</th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Score</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Readability</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Schema</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Readability
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Schema
+                    </th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Meta</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Issues</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Issues
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filtered.map((page: any) => (
                     <tr key={page.id} className="hover:bg-gray-50 transition-colors">
-                      <td className="px-4 py-3"><div className="text-sm font-medium text-gray-900">{page.title}</div><div className="text-xs text-gray-500">{page.url}</div></td>
-                      <td className="px-4 py-3"><div className="flex items-center gap-2">{scoreIcon(page.score)}<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${scoreBadge(page.score)}`}>{page.score}</span></div></td>
-                      <td className="px-4 py-3">{page.readability > 0 ? <div className="flex items-center gap-2"><BookOpen className="w-3.5 h-3.5 text-gray-400" /><span className={`text-sm ${page.readability >= 80 ? 'text-green-700' : page.readability >= 60 ? 'text-yellow-700' : 'text-red-700'}`}>{page.readability}</span></div> : <span className="text-xs text-gray-400">—</span>}</td>
-                      <td className="px-4 py-3">{page.schemaType ? <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">{page.schemaType}</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Missing</span>}</td>
-                      <td className="px-4 py-3"><div className="flex flex-col gap-0.5"><span className={`text-xs ${page.metaTitle ? 'text-green-700' : 'text-red-600'}`}>{page.metaTitle ? '✓ Title' : '✗ Title'}</span><span className={`text-xs ${page.metaDescription ? 'text-green-700' : 'text-red-600'}`}>{page.metaDescription ? '✓ Desc' : '✗ Desc'}</span></div></td>
-                      <td className="px-4 py-3">{page.issues > 0 ? <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{page.issues}</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">✓</span>}</td>
-                      <td className="px-4 py-3"><div className="flex items-center gap-1"><button onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit"><ArrowUpRight className="w-4 h-4 text-gray-600" /></button><button className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="AI analyze"><Bot className="w-4 h-4 text-indigo-600" /></button></div></td>
+                      <td className="px-4 py-3">
+                        <div className="text-sm font-medium text-gray-900">{page.title}</div>
+                        <div className="text-xs text-gray-500">{page.url}</div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          {scoreIcon(page.score)}
+                          <span
+                            className={`px-2 py-0.5 rounded-full text-xs font-medium ${scoreBadge(page.score)}`}
+                          >
+                            {page.score}
+                          </span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        {page.readability > 0 ? (
+                          <div className="flex items-center gap-2">
+                            <BookOpen className="w-3.5 h-3.5 text-gray-400" />
+                            <span
+                              className={`text-sm ${page.readability >= 80 ? 'text-green-700' : page.readability >= 60 ? 'text-yellow-700' : 'text-red-700'}`}
+                            >
+                              {page.readability}
+                            </span>
+                          </div>
+                        ) : (
+                          <span className="text-xs text-gray-400">—</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {page.schemaType ? (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                            {page.schemaType}
+                          </span>
+                        ) : (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                            Missing
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-col gap-0.5">
+                          <span
+                            className={`text-xs ${page.metaTitle ? 'text-green-700' : 'text-red-600'}`}
+                          >
+                            {page.metaTitle ? '✓ Title' : '✗ Title'}
+                          </span>
+                          <span
+                            className={`text-xs ${page.metaDescription ? 'text-green-700' : 'text-red-600'}`}
+                          >
+                            {page.metaDescription ? '✓ Desc' : '✗ Desc'}
+                          </span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        {page.issues > 0 ? (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                            {page.issues}
+                          </span>
+                        ) : (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            ✓
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => onNavigate?.(`/pages/${page.id}`)}
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="Edit"
+                          >
+                            <ArrowUpRight className="w-4 h-4 text-gray-600" />
+                          </button>
+                          <button
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="AI analyze"
+                          >
+                            <Bot className="w-4 h-4 text-indigo-600" />
+                          </button>
+                        </div>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -265,25 +491,41 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">Active</div>
-              <div className="text-2xl font-semibold text-green-600">{redirects.filter((r: any) => r.active).length}</div>
+              <div className="text-2xl font-semibold text-green-600">
+                {redirects.filter((r: any) => r.active).length}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">Total Hits</div>
-              <div className="text-2xl font-semibold text-blue-600">{redirects.reduce((s: number, r: any) => s + r.hits, 0).toLocaleString()}</div>
+              <div className="text-2xl font-semibold text-blue-600">
+                {redirects.reduce((s: number, r: any) => s + r.hits, 0).toLocaleString()}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">301 Permanent</div>
-              <div className="text-2xl font-semibold text-gray-900">{redirects.filter((r: any) => r.type === '301').length}</div>
+              <div className="text-2xl font-semibold text-gray-900">
+                {redirects.filter((r: any) => r.type === '301').length}
+              </div>
             </div>
           </div>
 
           <div className="flex items-center gap-3 mb-4">
             <div className="relative flex-1 max-w-md">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-              <input type="text" placeholder="Search redirects..." value={redirectSearch} onChange={(e) => setRedirectSearch(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              <input
+                type="text"
+                placeholder="Search redirects..."
+                value={redirectSearch}
+                onChange={(e) => setRedirectSearch(e.target.value)}
+                className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
             </div>
-            <button onClick={() => setShowAddRedirect(true)} 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 shrink-0">
-              <Plus className="w-4 h-4" />Add Redirect
+            <button
+              onClick={() => setShowAddRedirect(true)}
+              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 shrink-0"
+            >
+              <Plus className="w-4 h-4" />
+              Add Redirect
             </button>
           </div>
 
@@ -292,23 +534,63 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
               <table className="w-full">
                 <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
                   <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Source</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Destination</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Source
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Destination
+                    </th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Type</th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Hits</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Status</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Status
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filteredRedirects.map((r: any) => (
                     <tr key={r.id} className="hover:bg-gray-50 transition-colors">
-                      <td className="px-4 py-3"><code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">{r.from}</code></td>
-                      <td className="px-4 py-3"><code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">{r.to}</code></td>
-                      <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded-full text-xs font-medium ${r.type === '301' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}>{r.type}</span></td>
+                      <td className="px-4 py-3">
+                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                          {r.from}
+                        </code>
+                      </td>
+                      <td className="px-4 py-3">
+                        <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                          {r.to}
+                        </code>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${r.type === '301' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}
+                        >
+                          {r.type}
+                        </span>
+                      </td>
                       <td className="px-4 py-3 text-sm text-gray-600">{r.hits.toLocaleString()}</td>
-                      <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded-full text-xs font-medium ${r.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{r.active ? 'Active' : 'Inactive'}</span></td>
-                      <td className="px-4 py-3"><div className="flex items-center gap-2"><button className="p-1.5 hover:bg-gray-100 rounded transition-colors"><Pencil className="w-4 h-4 text-gray-600" /></button><button onClick={() => handleDeleteRedirect(r.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors"><Trash2 className="w-4 h-4 text-red-600" /></button></div></td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${r.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                        >
+                          {r.active ? 'Active' : 'Inactive'}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          <button className="p-1.5 hover:bg-gray-100 rounded transition-colors">
+                            <Pencil className="w-4 h-4 text-gray-600" />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteRedirect(r.id)}
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4 text-red-600" />
+                          </button>
+                        </div>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -320,14 +602,66 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             <Dialog.Portal>
               <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
               <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
-                <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">Add Redirect</Dialog.Title>
+                <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
+                  Add Redirect
+                </Dialog.Title>
                 <form onSubmit={handleAddRedirect} className="space-y-4">
-                  <div><label className="mb-1 block text-sm font-medium text-gray-700">Source URL</label><input type="text" value={newRedirect.source} onChange={(e) => setNewRedirect({ ...newRedirect, source: e.target.value })} placeholder="/old-page" className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required /></div>
-                  <div><label className="mb-1 block text-sm font-medium text-gray-700">Destination URL</label><input type="text" value={newRedirect.destination} onChange={(e) => setNewRedirect({ ...newRedirect, destination: e.target.value })} placeholder="/new-page" className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required /></div>
-                  <div><label className="mb-1 block text-sm font-medium text-gray-700">Type</label><select value={newRedirect.type} onChange={(e) => setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"><option value="301">301 (Permanent)</option><option value="302">302 (Temporary)</option></select></div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
+                      Source URL
+                    </label>
+                    <input
+                      type="text"
+                      value={newRedirect.source}
+                      onChange={(e) => setNewRedirect({ ...newRedirect, source: e.target.value })}
+                      placeholder="/old-page"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
+                      Destination URL
+                    </label>
+                    <input
+                      type="text"
+                      value={newRedirect.destination}
+                      onChange={(e) =>
+                        setNewRedirect({ ...newRedirect, destination: e.target.value })
+                      }
+                      placeholder="/new-page"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700">Type</label>
+                    <select
+                      value={newRedirect.type}
+                      onChange={(e) =>
+                        setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })
+                      }
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="301">301 (Permanent)</option>
+                      <option value="302">302 (Temporary)</option>
+                    </select>
+                  </div>
                   <div className="flex justify-end gap-3 pt-4">
-                    <Dialog.Close asChild><button type="button" className="rounded-lg border border-gray-300 px-4 py-2 text-sm hover:bg-gray-50">Cancel</button></Dialog.Close>
-                    <button type="submit" className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700">Add Redirect</button>
+                    <Dialog.Close asChild>
+                      <button
+                        type="button"
+                        className="rounded-lg border border-gray-300 px-4 py-2 text-sm hover:bg-gray-50"
+                      >
+                        Cancel
+                      </button>
+                    </Dialog.Close>
+                    <button
+                      type="submit"
+                      className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+                    >
+                      Add Redirect
+                    </button>
                   </div>
                 </form>
               </Dialog.Content>
@@ -339,19 +673,31 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         <Tabs.Content value="canonicals" className="flex flex-col flex-1 min-h-0 space-y-4">
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><ShieldCheck className="w-4 h-4 text-green-600" /><span className="text-xs font-medium text-gray-600">With Canonical</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <ShieldCheck className="w-4 h-4 text-green-600" />
+                <span className="text-xs font-medium text-gray-600">With Canonical</span>
+              </div>
               <div className="text-2xl font-semibold text-green-700">{allCanonicals.length}</div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><AlertTriangle className="w-4 h-4 text-red-600" /><span className="text-xs font-medium text-gray-600">Missing Canonical</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <AlertTriangle className="w-4 h-4 text-red-600" />
+                <span className="text-xs font-medium text-gray-600">Missing Canonical</span>
+              </div>
               <div className="text-2xl font-semibold text-red-700">{missingCanonical.length}</div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><Globe className="w-4 h-4 text-blue-600" /><span className="text-xs font-medium text-gray-600">Canonical Domains</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <Globe className="w-4 h-4 text-blue-600" />
+                <span className="text-xs font-medium text-gray-600">Canonical Domains</span>
+              </div>
               <div className="text-2xl font-semibold text-gray-900">{canonicalDomains.length}</div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center gap-2 mb-2"><CheckCircle2 className="w-4 h-4 text-green-600" /><span className="text-xs font-medium text-gray-600">Self-Referencing</span></div>
+              <div className="flex items-center gap-2 mb-2">
+                <CheckCircle2 className="w-4 h-4 text-green-600" />
+                <span className="text-xs font-medium text-gray-600">Self-Referencing</span>
+              </div>
               <div className="text-2xl font-semibold text-green-700">{allCanonicals.length}</div>
               <div className="text-xs text-gray-500 mt-1">Correct pattern</div>
             </div>
@@ -362,11 +708,23 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
               <div className="flex items-start gap-3">
                 <AlertTriangle className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" />
                 <div className="flex-1">
-                  <h3 className="text-sm font-semibold text-yellow-900 mb-1">{missingCanonical.length} page{missingCanonical.length !== 1 ? 's' : ''} missing canonical URLs</h3>
-                  <p className="text-sm text-yellow-700 mb-2">Without canonical tags, search engines may index duplicate versions of these pages, diluting your ranking signals.</p>
+                  <h3 className="text-sm font-semibold text-yellow-900 mb-1">
+                    {missingCanonical.length} page{missingCanonical.length !== 1 ? 's' : ''} missing
+                    canonical URLs
+                  </h3>
+                  <p className="text-sm text-yellow-700 mb-2">
+                    Without canonical tags, search engines may index duplicate versions of these
+                    pages, diluting your ranking signals.
+                  </p>
                   <div className="flex flex-wrap gap-2">
                     {missingCanonical.map((p: any) => (
-                      <button key={p.id} onClick={() => onNavigate?.(`/pages/${p.id}`)} className="px-2.5 py-1 text-xs bg-yellow-100 text-yellow-900 rounded-lg hover:bg-yellow-200 transition-colors">{p.title} ({p.url})</button>
+                      <button
+                        key={p.id}
+                        onClick={() => onNavigate?.(`/pages/${p.id}`)}
+                        className="px-2.5 py-1 text-xs bg-yellow-100 text-yellow-900 rounded-lg hover:bg-yellow-200 transition-colors"
+                      >
+                        {p.title} ({p.url})
+                      </button>
                     ))}
                   </div>
                 </div>
@@ -381,19 +739,55 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                   <tr>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Page</th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">URL</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Canonical URL</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Status</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Canonical URL
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Status
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {seoPages.map((page: any) => (
                     <tr key={page.id} className="hover:bg-gray-50 transition-colors">
                       <td className="px-4 py-3 text-sm font-medium text-gray-900">{page.title}</td>
-                      <td className="px-4 py-3"><code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">{page.url}</code></td>
-                      <td className="px-4 py-3">{page.canonical ? <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700 truncate max-w-[200px] block">{page.canonical}</code> : <span className="text-xs text-red-600 font-medium">Not set</span>}</td>
-                      <td className="px-4 py-3">{page.canonical ? <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">✓ Set</span> : <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Missing</span>}</td>
-                      <td className="px-4 py-3"><button onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit"><Pencil className="w-4 h-4 text-gray-600" /></button></td>
+                      <td className="px-4 py-3">
+                        <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">
+                          {page.url}
+                        </code>
+                      </td>
+                      <td className="px-4 py-3">
+                        {page.canonical ? (
+                          <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700 truncate max-w-[200px] block">
+                            {page.canonical}
+                          </code>
+                        ) : (
+                          <span className="text-xs text-red-600 font-medium">Not set</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {page.canonical ? (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            ✓ Set
+                          </span>
+                        ) : (
+                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                            Missing
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        <button
+                          onClick={() => onNavigate?.(`/pages/${page.id}`)}
+                          className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                          title="Edit"
+                        >
+                          <Pencil className="w-4 h-4 text-gray-600" />
+                        </button>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -407,19 +801,27 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">Broken Links</div>
-              <div className="text-2xl font-semibold text-red-600">{linkHealth.filter((l: any) => l.status === 404).length}</div>
+              <div className="text-2xl font-semibold text-red-600">
+                {linkHealth.filter((l: any) => l.status === 404).length}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">Redirect Chains</div>
-              <div className="text-2xl font-semibold text-yellow-600">{linkHealth.filter((l: any) => l.status === 301).length}</div>
+              <div className="text-2xl font-semibold text-yellow-600">
+                {linkHealth.filter((l: any) => l.status === 301).length}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">Internal Issues</div>
-              <div className="text-2xl font-semibold text-gray-900">{linkHealth.filter((l: any) => l.type === 'internal').length}</div>
+              <div className="text-2xl font-semibold text-gray-900">
+                {linkHealth.filter((l: any) => l.type === 'internal').length}
+              </div>
             </div>
             <div className="bg-white rounded-lg border border-gray-200 p-4">
               <div className="text-xs text-gray-600 mb-1">External Issues</div>
-              <div className="text-2xl font-semibold text-gray-900">{linkHealth.filter((l: any) => l.type === 'external').length}</div>
+              <div className="text-2xl font-semibold text-gray-900">
+                {linkHealth.filter((l: any) => l.type === 'external').length}
+              </div>
             </div>
           </div>
 
@@ -428,23 +830,68 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
               <table className="w-full">
                 <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
                   <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Found On</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Broken URL</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Status</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Found On
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Broken URL
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Status
+                    </th>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Type</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Last Checked</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Last Checked
+                    </th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {linkHealth.map((link: any) => (
                     <tr key={link.id} className="hover:bg-gray-50 transition-colors">
-                      <td className="px-4 py-3"><code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">{link.page}</code></td>
-                      <td className="px-4 py-3"><code className="text-xs bg-red-50 px-2 py-1 rounded text-red-800 truncate max-w-[200px] block">{link.url}</code></td>
-                      <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded-full text-xs font-medium ${link.status === 404 ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'}`}>{link.status}</span></td>
-                      <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded-full text-xs font-medium ${link.type === 'internal' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}`}>{link.type}</span></td>
+                      <td className="px-4 py-3">
+                        <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">
+                          {link.page}
+                        </code>
+                      </td>
+                      <td className="px-4 py-3">
+                        <code className="text-xs bg-red-50 px-2 py-1 rounded text-red-800 truncate max-w-[200px] block">
+                          {link.url}
+                        </code>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${link.status === 404 ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'}`}
+                        >
+                          {link.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${link.type === 'internal' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}`}
+                        >
+                          {link.type}
+                        </span>
+                      </td>
                       <td className="px-4 py-3 text-sm text-gray-600">{link.lastChecked}</td>
-                      <td className="px-4 py-3"><div className="flex items-center gap-1"><button className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Create redirect"><ArrowRightLeft className="w-4 h-4 text-gray-600" /></button><button className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Open URL"><ExternalLink className="w-4 h-4 text-gray-600" /></button></div></td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-1">
+                          <button
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="Create redirect"
+                          >
+                            <ArrowRightLeft className="w-4 h-4 text-gray-600" />
+                          </button>
+                          <button
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="Open URL"
+                          >
+                            <ExternalLink className="w-4 h-4 text-gray-600" />
+                          </button>
+                        </div>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -454,5 +901,5 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         </Tabs.Content>
       </Tabs.Root>
     </div>
-  );
+  )
 }