@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/SEO.tsx

@@ -193,9 +193,9 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
     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="h-4 w-4 text-green-600" />
+    if (score >= 50) return <AlertTriangle className="h-4 w-4 text-yellow-600" />
+    return <XCircle className="h-4 w-4 text-red-600" />
   }
 
   const tabClass =
@@ -205,33 +205,33 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
 
   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 className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {(seoError || redirectsError) && (
         <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>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{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"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
         </div>
       )}
 
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
+      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div>
-          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">SEO & Redirects</h1>
+          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">SEO & Redirects</h1>
           <p className="text-sm text-gray-600">
             Search optimization, redirects, canonicalization, and link health
           </p>
@@ -239,103 +239,103 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         <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"
+          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
         >
-          <RefreshCw className={`w-4 h-4 ${scanning ? 'animate-spin' : ''}`} />
+          <RefreshCw className={`h-4 w-4 ${scanning ? 'animate-spin' : ''}`} />
           {scanning ? 'Scanning...' : 'Run SEO Scan'}
         </button>
       </div>
 
       <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
-        <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
+        <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
           <Tabs.Trigger value="pages" className={tabClass}>
             <span className="flex items-center gap-1.5">
-              <BarChart3 className="w-4 h-4" />
+              <BarChart3 className="h-4 w-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" />
+              <ArrowRightLeft className="h-4 w-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" />
+              <Copy className="h-4 w-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" />
+              <Link2 className="h-4 w-4" />
               Link Health
             </span>
           </Tabs.Trigger>
         </Tabs.List>
 
         {/* PAGES TAB */}
-        <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" />
+        <Tabs.Content value="pages" className="flex min-h-0 flex-1 flex-col">
+          <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <BarChart3 className="h-4 w-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'}`}
+                className={`mt-1 text-xs ${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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-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">
+              <div className="mt-1 text-xs text-gray-500">
                 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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <FileCode2 className="h-4 w-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 className="mt-1 text-xs text-gray-500">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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <Globe className="h-4 w-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 className="mt-1 text-xs text-gray-500">No Schema.org markup</div>
             </div>
           </div>
 
-          <div className="bg-linear-to-r from-indigo-50 to-purple-50 border border-indigo-200 rounded-lg p-4 mb-4">
+          <div className="mb-4 rounded-lg border border-indigo-200 bg-linear-to-r from-indigo-50 to-purple-50 p-4">
             <div className="flex items-start gap-3">
-              <Bot className="w-5 h-5 text-indigo-600 mt-0.5 shrink-0" />
+              <Bot className="mt-0.5 h-5 w-5 shrink-0 text-indigo-600" />
               <div className="flex-1">
-                <h3 className="text-sm font-semibold text-indigo-900 mb-1">
+                <h3 className="mb-1 text-sm font-semibold text-indigo-900">
                   AI SEO Recommendations
                 </h3>
-                <p className="text-sm text-indigo-700 mb-2">
+                <p className="mb-2 text-sm text-indigo-700">
                   {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"
+                    className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-indigo-700"
                   >
                     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">
+                  <button className="rounded-lg border border-indigo-300 px-3 py-1.5 text-xs text-indigo-700 transition-colors hover:bg-indigo-50">
                     Auto-fix All
                   </button>
                 </div>
@@ -343,22 +343,22 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             </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="mb-4 rounded-lg border border-gray-200 bg-white">
+            <div className="flex flex-col gap-3 p-3 sm:flex-row">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 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"
+                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </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"
+                className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               >
                 <option value="all">All Scores</option>
                 <option value="good">Good (80+)</option>
@@ -368,10 +368,10 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-            <div className="overflow-x-auto h-full">
+          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <div className="h-full overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                   <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>
@@ -392,7 +392,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filtered.map((page: any) => (
-                    <tr key={page.id} className="hover:bg-gray-50 transition-colors">
+                    <tr key={page.id} className="transition-colors hover:bg-gray-50">
                       <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>
@@ -401,7 +401,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                         <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)}`}
+                            className={`rounded-full px-2 py-0.5 text-xs font-medium ${scoreBadge(page.score)}`}
                           >
                             {page.score}
                           </span>
@@ -410,7 +410,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       <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" />
+                            <BookOpen className="h-3.5 w-3.5 text-gray-400" />
                             <span
                               className={`text-sm ${page.readability >= 80 ? 'text-green-700' : page.readability >= 60 ? 'text-yellow-700' : 'text-red-700'}`}
                             >
@@ -423,11 +423,11 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       </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">
+                          <span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium 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">
+                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">
                             Missing
                           </span>
                         )}
@@ -448,11 +448,11 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       </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">
+                          <span className="rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium 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 className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                             ✓
                           </span>
                         )}
@@ -461,16 +461,16 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                         <div className="flex items-center gap-1">
                           <button
                             onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Edit"
                           >
-                            <ArrowUpRight className="w-4 h-4 text-gray-600" />
+                            <ArrowUpRight className="h-4 w-4 text-gray-600" />
                           </button>
                           <button
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="AI analyze"
                           >
-                            <Bot className="w-4 h-4 text-indigo-600" />
+                            <Bot className="h-4 w-4 text-indigo-600" />
                           </button>
                         </div>
                       </td>
@@ -483,56 +483,56 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         </Tabs.Content>
 
         {/* REDIRECTS TAB */}
-        <Tabs.Content value="redirects" 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="text-xs text-gray-600 mb-1">Total Redirects</div>
+        <Tabs.Content value="redirects" className="flex min-h-0 flex-1 flex-col">
+          <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">Total Redirects</div>
               <div className="text-2xl font-semibold text-gray-900">{redirects.length}</div>
             </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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">Active</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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">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>
-            <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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">301 Permanent</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" />
+          <div className="mb-4 flex items-center gap-3">
+            <div className="relative max-w-md flex-1">
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 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"
+                className="w-full rounded-lg border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               />
             </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"
+              className="flex shrink-0 items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
             >
-              <Plus className="w-4 h-4" />
+              <Plus className="h-4 w-4" />
               Add Redirect
             </button>
           </div>
 
-          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-            <div className="overflow-x-auto h-full">
+          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <div className="h-full overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                   <tr>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                       Source
@@ -552,7 +552,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filteredRedirects.map((r: any) => (
-                    <tr key={r.id} className="hover:bg-gray-50 transition-colors">
+                    <tr key={r.id} className="transition-colors hover:bg-gray-50">
                       <td className="px-4 py-3">
                         <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
                           {r.from}
@@ -565,7 +565,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       </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'}`}
+                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${r.type === '301' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}
                         >
                           {r.type}
                         </span>
@@ -573,21 +573,21 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       <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'}`}
+                          className={`rounded-full px-2 py-0.5 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 className="rounded p-1.5 transition-colors hover:bg-gray-100">
+                            <Pencil className="h-4 w-4 text-gray-600" />
                           </button>
                           <button
                             onClick={() => handleDeleteRedirect(r.id)}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                           >
-                            <Trash2 className="w-4 h-4 text-red-600" />
+                            <Trash2 className="h-4 w-4 text-red-600" />
                           </button>
                         </div>
                       </td>
@@ -601,7 +601,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
           <Dialog.Root open={showAddRedirect} onOpenChange={setShowAddRedirect}>
             <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.Content className="fixed top-1/2 left-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>
@@ -615,7 +615,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       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"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                       required
                     />
                   </div>
@@ -630,7 +630,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                         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"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                       required
                     />
                   </div>
@@ -641,7 +641,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       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"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     >
                       <option value="301">301 (Permanent)</option>
                       <option value="302">302 (Temporary)</option>
@@ -670,49 +670,49 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         </Tabs.Content>
 
         {/* CANONICALIZATION TAB */}
-        <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" />
+        <Tabs.Content value="canonicals" className="flex min-h-0 flex-1 flex-col space-y-4">
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <ShieldCheck className="h-4 w-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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <Globe className="h-4 w-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" />
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-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 className="mt-1 text-xs text-gray-500">Correct pattern</div>
             </div>
           </div>
 
           {missingCanonical.length > 0 && (
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
               <div className="flex items-start gap-3">
-                <AlertTriangle className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" />
+                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-yellow-600" />
                 <div className="flex-1">
-                  <h3 className="text-sm font-semibold text-yellow-900 mb-1">
+                  <h3 className="mb-1 text-sm font-semibold text-yellow-900">
                     {missingCanonical.length} page{missingCanonical.length !== 1 ? 's' : ''} missing
                     canonical URLs
                   </h3>
-                  <p className="text-sm text-yellow-700 mb-2">
+                  <p className="mb-2 text-sm text-yellow-700">
                     Without canonical tags, search engines may index duplicate versions of these
                     pages, diluting your ranking signals.
                   </p>
@@ -721,7 +721,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       <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"
+                        className="rounded-lg bg-yellow-100 px-2.5 py-1 text-xs text-yellow-900 transition-colors hover:bg-yellow-200"
                       >
                         {p.title} ({p.url})
                       </button>
@@ -732,10 +732,10 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
             </div>
           )}
 
-          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-            <div className="overflow-x-auto h-full">
+          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <div className="h-full overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                   <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>
@@ -752,29 +752,29 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {seoPages.map((page: any) => (
-                    <tr key={page.id} className="hover:bg-gray-50 transition-colors">
+                    <tr key={page.id} className="transition-colors hover:bg-gray-50">
                       <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">
+                        <code className="rounded bg-gray-100 px-2 py-1 text-xs 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">
+                          <code className="block max-w-[200px] truncate rounded bg-gray-100 px-2 py-1 text-xs text-gray-700">
                             {page.canonical}
                           </code>
                         ) : (
-                          <span className="text-xs text-red-600 font-medium">Not set</span>
+                          <span className="text-xs font-medium text-red-600">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">
+                          <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                             ✓ Set
                           </span>
                         ) : (
-                          <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">
                             Missing
                           </span>
                         )}
@@ -782,10 +782,10 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       <td className="px-4 py-3">
                         <button
                           onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                          className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
                           title="Edit"
                         >
-                          <Pencil className="w-4 h-4 text-gray-600" />
+                          <Pencil className="h-4 w-4 text-gray-600" />
                         </button>
                       </td>
                     </tr>
@@ -797,38 +797,38 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
         </Tabs.Content>
 
         {/* LINK HEALTH TAB */}
-        <Tabs.Content value="links" 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="text-xs text-gray-600 mb-1">Broken Links</div>
+        <Tabs.Content value="links" className="flex min-h-0 flex-1 flex-col space-y-4">
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">Broken Links</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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">Redirect Chains</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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">Internal Issues</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="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="mb-1 text-xs text-gray-600">External Issues</div>
               <div className="text-2xl font-semibold text-gray-900">
                 {linkHealth.filter((l: any) => l.type === 'external').length}
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-            <div className="overflow-x-auto h-full">
+          <div className="flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <div className="h-full overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                   <tr>
                     <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                       Found On
@@ -850,27 +850,27 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {linkHealth.map((link: any) => (
-                    <tr key={link.id} className="hover:bg-gray-50 transition-colors">
+                    <tr key={link.id} className="transition-colors hover:bg-gray-50">
                       <td className="px-4 py-3">
-                        <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">
+                        <code className="rounded bg-gray-100 px-2 py-1 text-xs 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">
+                        <code className="block max-w-[200px] truncate rounded bg-red-50 px-2 py-1 text-xs text-red-800">
                           {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'}`}
+                          className={`rounded-full px-2 py-0.5 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'}`}
+                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${link.type === 'internal' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}`}
                         >
                           {link.type}
                         </span>
@@ -879,16 +879,16 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
                       <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"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Create redirect"
                           >
-                            <ArrowRightLeft className="w-4 h-4 text-gray-600" />
+                            <ArrowRightLeft className="h-4 w-4 text-gray-600" />
                           </button>
                           <button
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Open URL"
                           >
-                            <ExternalLink className="w-4 h-4 text-gray-600" />
+                            <ExternalLink className="h-4 w-4 text-gray-600" />
                           </button>
                         </div>
                       </td>