@prenta/admin 1.13.0 → 1.15.0

package/src/views/SEO.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 /**
- * SEO Operations Center — five-tab workflow surface (Overview / Content /
- * Technical / Redirects / Audit). Tab + deep-link state is driven by the
- * `?tab=` query string so audits, issues, redirects, and content editors are
- * all linkable. All data flows through `lib/seo-service.ts`.
+ * SEO Operations Center — seven-tab workflow surface (Overview / Content /
+ * Links / Technical / Redirects / Audit / Proposals). Tab + deep-link state is
+ * driven by the `?tab=` query string so audits, issues, redirects, proposals,
+ * and content editors are all linkable. All data flows through
+ * `lib/seo-service.ts`.
  */
 import * as Tabs from '@radix-ui/react-tabs'
 import {
@@ -16,6 +17,7 @@ import {
   RefreshCw,
   Bot,
   Link2,
+  Inbox,
 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
@@ -32,6 +34,7 @@ import { TechnicalTab } from './seo/TechnicalTab.js'
 import { RedirectsTab } from './seo/RedirectsTab.js'
 import { AuditTab } from './seo/AuditTab.js'
 import { LinksTab } from './seo/LinksTab.js'
+import { ProposalsTab } from './seo/ProposalsTab.js'
 
 export interface SEOProps {
   onNavigate?: (path: string) => void
@@ -45,6 +48,7 @@ const TABS = [
   { id: 'technical', label: 'Technical', icon: Settings2 },
   { id: 'redirects', label: 'Redirects', icon: ArrowRightLeft },
   { id: 'audit', label: 'Audit', icon: ClipboardCheck },
+  { id: 'proposals', label: 'Proposals', icon: Inbox },
 ] as const
 
 type TabId = (typeof TABS)[number]['id']
@@ -69,6 +73,7 @@ export const SEO_DEEP_PATHS = [
   '/seo/technical',
   '/seo/links',
   '/seo/audit',
+  '/seo/proposals',
   '/seo',
 ] as const
 
@@ -89,6 +94,8 @@ export function seoTabForPath(pathname: string): TabId | null {
       return 'technical'
     case '/seo/audit':
       return 'audit'
+    case '/seo/proposals':
+      return 'proposals'
     case '/seo':
       return 'overview'
     default:
@@ -177,7 +184,11 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
 
   const badgeCounts = useMemo(() => {
     const summary = overviewResource.data?.issuesSummary
-    return { audit: summary ? summary.critical + summary.warning : 0 }
+    const pending = overviewResource.data?.pendingProposals
+    return {
+      audit: summary ? summary.critical + summary.warning : 0,
+      proposals: pending ? pending.issueFixes + pending.redirects : 0,
+    }
   }, [overviewResource.data])
 
   return (
@@ -215,7 +226,18 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
         >
           {TABS.map((t) => {
             const Icon = t.icon
-            const badge = t.id === 'audit' ? badgeCounts.audit : 0
+            const badge =
+              t.id === 'audit'
+                ? badgeCounts.audit
+                : t.id === 'proposals'
+                  ? badgeCounts.proposals
+                  : 0
+            // The proposals count is informational (items awaiting review),
+            // not a warning like the audit issue count.
+            const badgeClass =
+              t.id === 'proposals'
+                ? 'bg-muted text-muted-foreground'
+                : 'bg-destructive/10 text-destructive'
             return (
               <Tabs.Trigger
                 key={t.id}
@@ -225,7 +247,9 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 <Icon className="h-4 w-4" aria-hidden />
                 {t.label}
                 {badge > 0 && (
-                  <span className="bg-destructive/10 text-destructive ml-1 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums">
+                  <span
+                    className={`${badgeClass} ml-1 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums`}
+                  >
                     {badge}
                   </span>
                 )}
@@ -260,7 +284,7 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
               {activeTab === 'technical' && <TechnicalTab />}
             </Tabs.Content>
             <Tabs.Content value="redirects" tabIndex={-1}>
-              {activeTab === 'redirects' && <RedirectsTab />}
+              {activeTab === 'redirects' && <RedirectsTab onNavigate={onNavigate} />}
             </Tabs.Content>
             <Tabs.Content value="audit" tabIndex={-1}>
               {activeTab === 'audit' && (
@@ -272,6 +296,15 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 />
               )}
             </Tabs.Content>
+            <Tabs.Content value="proposals" tabIndex={-1}>
+              {activeTab === 'proposals' && (
+                <ProposalsTab
+                  planInfo={planInfo}
+                  onChanged={() => setRefetchKey((k) => k + 1)}
+                  onNavigate={onNavigate}
+                />
+              )}
+            </Tabs.Content>
           </ErrorBoundary>
         </div>
       </Tabs.Root>