frontend enrichment pipeline

src/pages/AdminPage.jsx

@@ -1,22 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { Wrench, Database } from 'lucide-react';
+import { Wrench, Database, UploadCloud } from 'lucide-react';
 import { api } from '../api/client';
 import { NavigationHeader } from '../components/NavigationHeader';
+import { StoreCatalogPanel } from './StoreCatalogPanel';
 
 /*
- * The admin panel is the project overview and nothing else.
+ * The admin panel carries two views: the read-only project overview, and the
+ * store-catalog ingestion workspace.
  *
- * It used to carry three more sub-tabs behind a local `activeTab` switch -
- * train/test dataset upload, a stock-remaining discount allocator, and a
- * trigger for the vector ingestion pipeline. They were retired from the UI;
- * with one view left there is nothing to switch between, so the tab bar and
- * its state went too.
- *
- * Only the UI was removed. The endpoints behind those panels are still
- * registered and still work - ingestion in particular is reachable from
+ * It briefly carried neither tab bar nor second view - three earlier sub-tabs
+ * (train/test dataset upload, stock-remaining discount allocator, and a
+ * trigger for the brand ingestion pipeline) were retired from the UI, leaving
+ * only the overview. Their endpoints are all still registered and still work;
+ * brand ingestion in particular is reachable from
  * `python cli/ingest_brand.py "<brand>"` and from POST /api/catalog/generate.
  */
+const TABS = [
+  { id: 'project', label: 'Project Overview Details', icon: Database },
+  { id: 'ingest', label: 'Store Catalog Ingestion', icon: UploadCloud },
+];
+
 export function AdminPage() {
+  const [activeTab, setActiveTab] = useState('project');
   const [projectDetails, setProjectDetails] = useState(null);
   const [loadingProject, setLoadingProject] = useState(true);
 
@@ -40,11 +45,30 @@ export function AdminPage() {
     <div className="flex h-screen w-full flex-col overflow-y-auto bg-paper-100 text-ink-950 font-sans">
       <NavigationHeader
         title="Admin Intelligence Panel"
-        subtitle="Brand catalogs, vector database tables & S3 storage overview"
+        subtitle="Brand catalogs, vector tables & store-spreadsheet ingestion"
         icon={Wrench}
       />
 
       <div className="mx-auto w-full max-w-6xl px-6 py-8 space-y-6">
+        <div className="flex items-center gap-2 border-b border-ink-900/10 pb-3 overflow-x-auto no-scrollbar">
+          {TABS.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition whitespace-nowrap cursor-pointer ${
+                activeTab === id
+                  ? 'bg-amber-500 text-slate-950 shadow-sm'
+                  : 'bg-paper-50 text-slate-600 hover:text-ink-950 border border-ink-900/10'
+              }`}
+            >
+              <Icon className="h-4 w-4" /> {label}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === 'ingest' && <StoreCatalogPanel />}
+
+        {activeTab === 'project' && (
         <div className="space-y-6">
           <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-xs">
             <h2 className="font-display text-lg font-bold text-ink-950 flex items-center gap-2 mb-2">
@@ -99,6 +123,7 @@ export function AdminPage() {
             </div>
           )}
         </div>
+        )}
       </div>
     </div>
   );