frontend

src/pages/AdminPage.jsx

@@ -0,0 +1,490 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { PlayCircle, Loader2, CheckCircle2, XCircle, Clock, Wrench, Database, FileSpreadsheet, Percent, BarChart3, HeartPulse, Sparkles, Upload, Server } from 'lucide-react';
+import { api } from '../api/client';
+import { NavigationHeader } from '../components/NavigationHeader';
+
+const STATUS_STYLES = {
+  pending: { icon: Clock, className: 'text-slate-500 bg-ink-100' },
+  running: { icon: Loader2, className: 'text-amber-600 bg-amber-100', spin: true },
+  done: { icon: CheckCircle2, className: 'text-leaf-600 bg-leaf-100' },
+  failed: { icon: XCircle, className: 'text-maroon-600 bg-maroon-100' },
+};
+
+export function AdminPage() {
+  const [activeTab, setActiveTab] = useState('project'); // 'project', 'dataset', 'discounts', 'ingest'
+
+  // Project details state
+  const [projectDetails, setProjectDetails] = useState(null);
+  const [loadingProject, setLoadingProject] = useState(true);
+
+  // Ingestion state
+  const [brand, setBrand] = useState('');
+  const [maxProducts, setMaxProducts] = useState(50);
+  const [jobs, setJobs] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
+  const pollRef = useRef(null);
+
+  // Dataset upload state
+  const [uploadFile, setUploadFile] = useState(null);
+  const [uploadingDataset, setUploadingDataset] = useState(false);
+  const [datasetResult, setDatasetResult] = useState(null);
+  const [uploadError, setUploadError] = useState(null);
+
+  // Discount allocation state
+  const [minStock, setMinStock] = useState(0);
+  const [maxStock, setMaxStock] = useState(20);
+  const [discountPct, setDiscountPct] = useState(25);
+  const [allocating, setAllocating] = useState(false);
+  const [allocationResult, setAllocationResult] = useState(null);
+
+  const fetchProjectDetails = async () => {
+    try {
+      const res = await fetch('/api/admin/training/project-details');
+      if (res.ok) {
+        const data = await res.json();
+        setProjectDetails(data);
+      }
+    } catch (e) {
+      console.warn('Could not fetch project details', e);
+    } finally {
+      setLoadingProject(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProjectDetails();
+
+    pollRef.current = setInterval(() => {
+      setJobs((current) => {
+        current
+          .filter((j) => j.status === 'pending' || j.status === 'running')
+          .forEach((j) => {
+            api.getJobStatus(j.job_id).then((updated) => {
+              setJobs((prev) => prev.map((p) => (p.job_id === updated.job_id ? updated : p)));
+            }).catch(() => {});
+          });
+        return current;
+      });
+    }, 3000);
+    return () => clearInterval(pollRef.current);
+  }, []);
+
+  const runningJob = jobs.find((j) => j.status === 'pending' || j.status === 'running');
+
+  async function handleSubmitIngestion(e) {
+    e.preventDefault();
+    if (!brand.trim() || runningJob) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      const job = await api.generateCatalog({ brand: brand.trim(), max_products: Number(maxProducts) || 50 });
+      setJobs((prev) => [job, ...prev]);
+      setBrand('');
+    } catch (err) {
+      setSubmitError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const handleDatasetUpload = async (e) => {
+    e.preventDefault();
+    if (!uploadFile) return;
+    setUploadingDataset(true);
+    setUploadError(null);
+    setDatasetResult(null);
+
+    const formData = new FormData();
+    formData.append('file', uploadFile);
+
+    try {
+      const res = await fetch('/api/admin/training/upload-dataset', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.detail || 'Upload failed');
+      }
+
+      const data = await res.json();
+      setDatasetResult(data);
+      setUploadingDataset(false);
+    } catch (err) {
+      setUploadingDataset(false);
+      setUploadError(err.message);
+    }
+  };
+
+  const handleAllocateDiscounts = async (e) => {
+    e.preventDefault();
+    setAllocating(true);
+    try {
+      const payload = {
+        rules: [
+          { min_stock: Number(minStock), max_stock: Number(maxStock), discount_pct: Number(discountPct) },
+          { min_stock: 21, max_stock: 50, discount_pct: 15.0 },
+          { min_stock: 51, max_stock: 100, discount_pct: 10.0 },
+          { min_stock: 101, max_stock: 10000, discount_pct: 5.0 },
+        ],
+      };
+
+      const res = await fetch('/api/admin/training/allocate-discounts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setAllocationResult(data);
+      }
+    } catch (e) {
+      console.warn('Failed to allocate discounts', e);
+    } finally {
+      setAllocating(false);
+    }
+  };
+
+  return (
+    <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="Existing project details, ML train/test dataset uploads & stock discount allocation"
+        icon={Wrench}
+      />
+
+      <div className="mx-auto w-full max-w-6xl px-6 py-8 space-y-6">
+        {/* Navigation Admin Tabs */}
+        <div className="flex items-center gap-2 border-b border-ink-900/10 pb-3 overflow-x-auto no-scrollbar">
+          <button
+            onClick={() => setActiveTab('project')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition ${
+              activeTab === 'project'
+                ? 'bg-amber-500 text-slate-950 shadow-sm'
+                : 'bg-paper-50 text-slate-600 hover:text-ink-950 border border-ink-900/10'
+            }`}
+          >
+            <Database className="h-4 w-4" /> Project Overview Details
+          </button>
+
+          <button
+            onClick={() => setActiveTab('dataset')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition ${
+              activeTab === 'dataset'
+                ? 'bg-amber-500 text-slate-950 shadow-sm'
+                : 'bg-paper-50 text-slate-600 hover:text-ink-950 border border-ink-900/10'
+            }`}
+          >
+            <FileSpreadsheet className="h-4 w-4" /> Train & Test Dataset Upload
+          </button>
+
+          <button
+            onClick={() => setActiveTab('discounts')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition ${
+              activeTab === 'discounts'
+                ? 'bg-amber-500 text-slate-950 shadow-sm'
+                : 'bg-paper-50 text-slate-600 hover:text-ink-950 border border-ink-900/10'
+            }`}
+          >
+            <Percent className="h-4 w-4" /> Stock Remaining Discount Allocator
+          </button>
+
+          <button
+            onClick={() => setActiveTab('ingest')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition ${
+              activeTab === 'ingest'
+                ? 'bg-amber-500 text-slate-950 shadow-sm'
+                : 'bg-paper-50 text-slate-600 hover:text-ink-950 border border-ink-900/10'
+            }`}
+          >
+            <Server className="h-4 w-4" /> Vector Ingestion Pipeline
+          </button>
+        </div>
+
+        {/* TAB 1: EXISTING PROJECT DETAILS */}
+        {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">
+                <Database className="h-5 w-5 text-amber-500" /> Existing Project Details & System Architecture
+              </h2>
+              <p className="text-xs text-slate-500 leading-relaxed max-w-3xl">
+                High-level overview of active brand catalogs, PostgreSQL vector database tables, S3 image storage pipeline, and store intelligence ML models.
+              </p>
+
+              {loadingProject ? (
+                <div className="py-8 text-center text-xs text-slate-400">Loading project details...</div>
+              ) : projectDetails ? (
+                <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <div className="rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
+                    <p className="text-[11px] font-semibold uppercase text-amber-700">Total Brands</p>
+                    <p className="font-mono text-3xl font-extrabold text-ink-950 mt-1">{projectDetails.total_brands}</p>
+                    <p className="text-[10px] text-slate-400 mt-1">Ingested brand tables in pgvector</p>
+                  </div>
+
+                  <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
+                    <p className="text-[11px] font-semibold uppercase text-emerald-700">Total Products</p>
+                    <p className="font-mono text-3xl font-extrabold text-ink-950 mt-1">{projectDetails.total_products}</p>
+                    <p className="text-[10px] text-slate-400 mt-1">Unique products with vector embeddings</p>
+                  </div>
+
+                  <div className="rounded-xl border border-blue-500/20 bg-blue-500/5 p-4">
+                    <p className="text-[11px] font-semibold uppercase text-blue-700">S3 Storage Status</p>
+                    <p className="font-mono text-xl font-bold text-ink-950 mt-2 uppercase">{projectDetails.s3_image_status}</p>
+                    <p className="text-[10px] text-slate-400 mt-1">Bucket: {projectDetails.storage_bucket}</p>
+                  </div>
+
+                  <div className="rounded-xl border border-purple-500/20 bg-purple-500/5 p-4">
+                    <p className="text-[11px] font-semibold uppercase text-purple-700">System Version</p>
+                    <p className="font-mono text-xl font-bold text-ink-950 mt-2">{projectDetails.version}</p>
+                    <p className="text-[10px] text-slate-400 mt-1">Multi-Store & RAG Engine</p>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+
+            {projectDetails?.brand_product_counts && (
+              <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-xs">
+                <h3 className="font-display text-sm font-bold text-ink-950 mb-4">Ingested Brand Database Breakdown</h3>
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+                  {Object.entries(projectDetails.brand_product_counts).map(([bName, count]) => (
+                    <div key={bName} className="flex items-center justify-between p-3 rounded-xl border border-ink-900/10 bg-white">
+                      <span className="text-xs font-bold text-ink-950">{bName}</span>
+                      <span className="font-mono text-xs font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded-full">{count} items</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* TAB 2: UPLOAD TRAIN/TEST DATASET */}
+        {activeTab === 'dataset' && (
+          <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-xs space-y-6">
+            <div>
+              <h2 className="font-display text-lg font-bold text-ink-950 flex items-center gap-2 mb-1">
+                <FileSpreadsheet className="h-5 w-5 text-amber-500" /> Upload Excel / CSV Records for Decision Training
+              </h2>
+              <p className="text-xs text-slate-500">
+                Upload custom product dataset files (.xlsx, .csv) to train and test decision-making models. Data is automatically split into an 80/20 train/test split for optimization.
+              </p>
+            </div>
+
+            {uploadError && (
+              <div className="rounded-xl bg-rose-500/10 border border-rose-500/30 p-3.5 text-xs text-rose-700">
+                {uploadError}
+              </div>
+            )}
+
+            <form onSubmit={handleDatasetUpload} className="flex flex-col sm:flex-row items-center gap-4 border-2 border-dashed border-slate-300 rounded-2xl p-6 bg-slate-50/50">
+              <input
+                type="file"
+                accept=".xlsx,.xls,.csv"
+                onChange={(e) => setUploadFile(e.target.files[0])}
+                className="text-xs text-slate-600 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-amber-500 file:text-slate-950 hover:file:bg-amber-400"
+              />
+
+              <button
+                type="submit"
+                disabled={!uploadFile || uploadingDataset}
+                className="flex items-center gap-2 rounded-xl bg-ink-900 hover:bg-ink-950 text-white px-5 py-2.5 text-xs font-bold transition disabled:opacity-40 shrink-0"
+              >
+                {uploadingDataset ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                Train Decision Model
+              </button>
+            </form>
+
+            {datasetResult && (
+              <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-5 space-y-4">
+                <div className="flex items-center gap-2 text-emerald-800 font-bold text-sm">
+                  <CheckCircle2 className="h-5 w-5" /> {datasetResult.message}
+                </div>
+
+                <div className="grid grid-cols-3 gap-3 text-xs">
+                  <div className="bg-white p-3 rounded-lg border border-emerald-200">
+                    <span className="text-slate-500 font-semibold">Total Records:</span>
+                    <p className="font-mono text-lg font-bold text-ink-950">{datasetResult.total_records}</p>
+                  </div>
+
+                  <div className="bg-white p-3 rounded-lg border border-emerald-200">
+                    <span className="text-slate-500 font-semibold">Training Set (80%):</span>
+                    <p className="font-mono text-lg font-bold text-amber-600">{datasetResult.dataset_split.training_records}</p>
+                  </div>
+
+                  <div className="bg-white p-3 rounded-lg border border-emerald-200">
+                    <span className="text-slate-500 font-semibold">Testing Set (20%):</span>
+                    <p className="font-mono text-lg font-bold text-blue-600">{datasetResult.dataset_split.testing_records}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* TAB 3: STOCK REMAINING DISCOUNT ALLOCATOR */}
+        {activeTab === 'discounts' && (
+          <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-xs space-y-6">
+            <div>
+              <h2 className="font-display text-lg font-bold text-ink-950 flex items-center gap-2 mb-1">
+                <Percent className="h-5 w-5 text-amber-500" /> Allocate Product Discounts Based on Stock Remaining
+              </h2>
+              <p className="text-xs text-slate-500">
+                Help stores optimize business performance and clear remaining stock by allocating dynamic discount rules based on inventory levels.
+              </p>
+            </div>
+
+            <form onSubmit={handleAllocateDiscounts} className="grid grid-cols-1 sm:grid-cols-4 gap-4 bg-slate-50 p-4 rounded-xl border border-ink-900/10">
+              <div>
+                <label className="block text-xs font-semibold text-ink-800 mb-1">Min Stock</label>
+                <input
+                  type="number"
+                  value={minStock}
+                  onChange={(e) => setMinStock(e.target.value)}
+                  className="w-full rounded-lg border border-ink-900/15 p-2 text-xs font-medium"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-ink-800 mb-1">Max Stock Remaining</label>
+                <input
+                  type="number"
+                  value={maxStock}
+                  onChange={(e) => setMaxStock(e.target.value)}
+                  className="w-full rounded-lg border border-ink-900/15 p-2 text-xs font-medium"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-ink-800 mb-1">Discount %</label>
+                <input
+                  type="number"
+                  value={discountPct}
+                  onChange={(e) => setDiscountPct(e.target.value)}
+                  className="w-full rounded-lg border border-ink-900/15 p-2 text-xs font-medium"
+                />
+              </div>
+
+              <div className="flex items-end">
+                <button
+                  type="submit"
+                  disabled={allocating}
+                  className="w-full flex items-center justify-center gap-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 py-2.5 text-xs font-bold shadow-sm transition"
+                >
+                  {allocating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Percent className="h-4 w-4" />}
+                  Allocate Discounts
+                </button>
+              </div>
+            </form>
+
+            {allocationResult && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-between text-xs text-slate-600">
+                  <span className="font-bold text-ink-950">Applied Discount Allocations ({allocationResult.total_products_allocated} products)</span>
+                </div>
+
+                <div className="max-h-80 overflow-y-auto border border-ink-900/10 rounded-xl bg-white divide-y divide-slate-100">
+                  {allocationResult.allocations.map((a, i) => (
+                    <div key={i} className="flex items-center justify-between p-3 text-xs">
+                      <div>
+                        <p className="font-bold text-ink-950">{a.product_name}</p>
+                        <p className="text-[10px] text-slate-400 font-mono">Store: {a.store_id} · Stock Remaining: {a.stock_remaining}</p>
+                      </div>
+                      <div className="text-right font-mono">
+                        <span className="inline-block bg-emerald-100 text-emerald-800 font-bold px-2 py-0.5 rounded text-[11px] mr-2">
+                          {a.discount_pct}% OFF
+                        </span>
+                        <span className="text-slate-400 line-through mr-1">₹{a.original_price}</span>
+                        <span className="font-bold text-leaf-600 text-sm">₹{a.final_price}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* TAB 4: INGESTION PIPELINE */}
+        {activeTab === 'ingest' && (
+          <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-xs space-y-6">
+            <div>
+              <h2 className="font-display text-lg font-bold text-ink-950 flex items-center gap-2 mb-1">
+                <Server className="h-5 w-5 text-amber-500" /> Vector Database Catalog Ingestion
+              </h2>
+              <p className="text-xs text-slate-500">
+                Discover and store brand products into pgvector (discovery → images → embeddings).
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmitIngestion} className="flex flex-col gap-3 sm:flex-row sm:items-end">
+              <div className="flex-1">
+                <label className="mb-1 block text-xs font-semibold text-ink-800">Brand name</label>
+                <input
+                  value={brand}
+                  onChange={(e) => setBrand(e.target.value)}
+                  placeholder="e.g. Britannia"
+                  disabled={!!runningJob}
+                  className="w-full rounded-xl border border-ink-900/15 p-2.5 text-xs font-medium focus:border-amber-500 focus:outline-none"
+                />
+              </div>
+              <div className="w-32">
+                <label className="mb-1 block text-xs font-semibold text-ink-800">Max products</label>
+                <input
+                  type="number"
+                  min={1}
+                  max={300}
+                  value={maxProducts}
+                  onChange={(e) => setMaxProducts(e.target.value)}
+                  disabled={!!runningJob}
+                  className="w-full rounded-xl border border-ink-900/15 p-2.5 text-xs font-medium focus:border-amber-500 focus:outline-none"
+                />
+              </div>
+              <button
+                type="submit"
+                disabled={submitting || !brand.trim() || !!runningJob}
+                className="flex items-center justify-center gap-1.5 rounded-xl bg-ink-900 px-5 py-2.5 text-xs font-bold text-white transition hover:bg-ink-950 disabled:opacity-40"
+              >
+                <PlayCircle className="h-4 w-4" /> Start Ingestion
+              </button>
+            </form>
+
+            {runningJob && (
+              <p className="text-xs text-amber-600">
+                A job for "{runningJob.brand}" is already in progress - please wait.
+              </p>
+            )}
+
+            <h3 className="font-display text-xs font-semibold uppercase tracking-wide text-slate-500 mt-6">Recent jobs</h3>
+            {jobs.length === 0 ? (
+              <p className="text-xs text-slate-500">No ingestion jobs started yet this session.</p>
+            ) : (
+              <ul className="space-y-2">
+                {jobs.map((j) => {
+                  const style = STATUS_STYLES[j.status] || STATUS_STYLES.pending;
+                  const Icon = style.icon;
+                  return (
+                    <li key={j.job_id} className="flex items-center gap-3 rounded-xl border border-ink-900/10 bg-white px-4 py-3">
+                      <span className={`flex h-8 w-8 items-center justify-center rounded-full ${style.className}`}>
+                        <Icon className={`h-4 w-4 ${style.spin ? 'animate-spin' : ''}`} />
+                      </span>
+                      <div className="flex-1">
+                        <p className="text-xs font-bold text-ink-950">{j.brand}</p>
+                        <p className="text-[11px] text-slate-500">{j.detail || j.status}</p>
+                      </div>
+                      <span className="font-mono text-xs uppercase text-slate-400">{j.status}</span>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/AnalyticsPage.jsx

@@ -0,0 +1,249 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis,
+  Tooltip, ResponsiveContainer, CartesianGrid, Legend,
+} from 'recharts';
+import { Flame, Trophy, TrendingUp, Award, BarChart3 as BarChartIcon, UploadCloud } from 'lucide-react';
+import { api } from '../api/client';
+import { Spinner, EmptyState } from '../components/Atoms';
+import { NavigationHeader } from '../components/NavigationHeader';
+import { UploadExcelModal } from '../components/UploadExcelModal';
+
+const PALETTE = ['#e2a33d', '#3f8556', '#8b2e3c', '#2c3e63', '#c2872a'];
+
+export function AnalyticsPage() {
+  const [comparison, setComparison] = useState(null);
+  const [comparisonLoading, setComparisonLoading] = useState(true);
+
+  const [trending, setTrending] = useState([]);
+  const [trendingLoading, setTrendingLoading] = useState(true);
+  const [window_, setWindow] = useState('weekly');
+
+  const [topProducts, setTopProducts] = useState([]);
+  const [topBy, setTopBy] = useState('revenue');
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+
+  const reloadData = useCallback(() => {
+    setComparisonLoading(true);
+    api.getStoreComparison().then(setComparison).catch(() => setComparison(null)).finally(() => setComparisonLoading(false));
+    setTrendingLoading(true);
+    api.getTrending({ window: window_, scope: 'overall', top_k: 10 }).then(setTrending).catch(() => setTrending([])).finally(() => setTrendingLoading(false));
+    api.getTopProducts({ by: topBy, order: 'top', limit: 8 }).then(setTopProducts).catch(() => setTopProducts([]));
+  }, [window_, topBy]);
+
+  useEffect(() => {
+    api.getStoreComparison().then(setComparison).catch(() => setComparison(null)).finally(() => setComparisonLoading(false));
+  }, []);
+
+  useEffect(() => {
+    setTrendingLoading(true);
+    api.getTrending({ window: window_, scope: 'overall', top_k: 10 })
+      .then(setTrending).catch(() => setTrending([])).finally(() => setTrendingLoading(false));
+  }, [window_]);
+
+  useEffect(() => {
+    api.getTopProducts({ by: topBy, order: 'top', limit: 8 }).then(setTopProducts).catch(() => setTopProducts([]));
+  }, [topBy]);
+
+  const stores = comparison?.stores || [];
+
+  return (
+    <div className="flex h-screen w-full flex-col overflow-y-auto bg-paper-100">
+      <NavigationHeader title="Chain Analytics" subtitle="Store comparison, trending products & top sellers" icon={BarChartIcon}>
+        <div className="flex items-center justify-end px-6 pb-1 -mt-2">
+          <button
+            onClick={() => setIsUploadOpen(true)}
+            className="flex items-center gap-1.5 rounded-full bg-amber-600 px-3.5 py-1.5 text-xs font-semibold text-white transition hover:bg-amber-700 shadow-xs active:scale-95"
+          >
+            <UploadCloud className="h-3.5 w-3.5" />
+            <span>Upload Sales Analytics (Excel / CSV)</span>
+          </button>
+        </div>
+      </NavigationHeader>
+
+      <div className="mx-auto w-full max-w-6xl flex-1 px-6 py-6">
+        {comparisonLoading ? (
+          <Spinner label="Loading chain analytics…" />
+        ) : !comparison || stores.length === 0 ? (
+          <EmptyState icon={TrendingUp} title="No analytics yet" subtitle="Seed and train the store intelligence models first (see /stores page)." />
+        ) : (
+          <>
+            <div className="grid gap-4 lg:grid-cols-2">
+              <ChartCard title="Revenue by store" icon={Trophy}>
+                <ResponsiveContainer width="100%" height={260}>
+                  <BarChart data={stores}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e4d8bd" />
+                    <XAxis dataKey="store_id" tick={{ fontSize: 12 }} />
+                    <YAxis tick={{ fontSize: 12 }} />
+                    <Tooltip formatter={(v) => `₹${Number(v).toLocaleString('en-IN')}`} />
+                    <Bar dataKey="revenue" fill="#e2a33d" radius={[6, 6, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartCard>
+
+              <ChartCard title="Profit by store" icon={Award}>
+                <ResponsiveContainer width="100%" height={260}>
+                  <BarChart data={stores}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e4d8bd" />
+                    <XAxis dataKey="store_id" tick={{ fontSize: 12 }} />
+                    <YAxis tick={{ fontSize: 12 }} />
+                    <Tooltip formatter={(v) => `₹${Number(v).toLocaleString('en-IN')}`} />
+                    <Bar dataKey="profit" fill="#3f8556" radius={[6, 6, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartCard>
+            </div>
+
+            <div className="mt-4 grid gap-4 lg:grid-cols-2">
+              <ChartCard title="Orders vs. average order value" icon={TrendingUp}>
+                <ResponsiveContainer width="100%" height={240}>
+                  <LineChart data={stores}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e4d8bd" />
+                    <XAxis dataKey="store_id" tick={{ fontSize: 12 }} />
+                    <YAxis yAxisId="left" tick={{ fontSize: 12 }} />
+                    <YAxis yAxisId="right" orientation="right" tick={{ fontSize: 12 }} />
+                    <Tooltip />
+                    <Legend />
+                    <Line yAxisId="left" type="monotone" dataKey="order_count" name="Orders" stroke="#2c3e63" strokeWidth={2} />
+                    <Line yAxisId="right" type="monotone" dataKey="avg_order_value" name="Avg order value (₹)" stroke="#c2872a" strokeWidth={2} />
+                  </LineChart>
+                </ResponsiveContainer>
+              </ChartCard>
+
+              <ChartCard title="Simulated footfall share" icon={Flame}>
+                <ResponsiveContainer width="100%" height={240}>
+                  <PieChart>
+                    <Pie data={stores} dataKey="footfall_simulated" nameKey="store_id" outerRadius={90} label={(e) => e.store_id}>
+                      {stores.map((_, i) => <Cell key={i} fill={PALETTE[i % PALETTE.length]} />)}
+                    </Pie>
+                    <Tooltip />
+                  </PieChart>
+                </ResponsiveContainer>
+              </ChartCard>
+            </div>
+
+            <div className="mt-3 flex flex-wrap gap-3 text-xs text-slate-500">
+              <Badge label="Best performing" value={comparison.best_performing} />
+              <Badge label="Highest revenue" value={comparison.highest_revenue} />
+              <Badge label="Highest profit" value={comparison.highest_profit} />
+              <Badge label="Lowest performing" value={comparison.lowest_performing} />
+            </div>
+          </>
+        )}
+
+        <div className="mt-8 grid gap-4 lg:grid-cols-2">
+          <div className="rounded-xl border border-ink-900/10 bg-white p-4">
+            <div className="mb-3 flex items-center justify-between">
+              <h3 className="flex items-center gap-1.5 font-display text-sm font-semibold text-ink-950">
+                <Flame className="h-4 w-4 text-amber-500" /> Trending products
+              </h3>
+              <div className="flex gap-1 rounded-full bg-ink-100 p-0.5 text-xs">
+                {['today', 'weekly', 'monthly'].map((w) => (
+                  <button
+                    key={w}
+                    onClick={() => setWindow(w)}
+                    className={`rounded-full px-2.5 py-1 capitalize transition ${window_ === w ? 'bg-paper-50 font-medium text-ink-950 shadow-sm' : 'text-slate-500'}`}
+                  >
+                    {w}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {trendingLoading ? (
+              <Spinner label="Scoring products…" />
+            ) : trending.length === 0 ? (
+              <p className="py-6 text-center text-sm text-slate-400">No trending data yet - train the trending model first.</p>
+            ) : (
+              <ol className="space-y-1.5">
+                {trending.map((t) => (
+                  <li key={`${t.brand}-${t.image_id}`} className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-amber-50/50">
+                    <span className="flex items-center gap-2 truncate">
+                      <span className="w-5 shrink-0 text-center font-mono text-xs text-slate-400">#{t.rank}</span>
+                      <span className="truncate text-ink-900">{prettify(t.image_id)}</span>
+                      <span className="shrink-0 text-xs text-slate-400">{t.brand}</span>
+                    </span>
+                    <span className="shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-600">
+                      {t.trend_score.toFixed(1)}
+                    </span>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </div>
+
+          <div className="rounded-xl border border-ink-900/10 bg-white p-4">
+            <div className="mb-3 flex items-center justify-between">
+              <h3 className="flex items-center gap-1.5 font-display text-sm font-semibold text-ink-950">
+                <Trophy className="h-4 w-4 text-leaf-600" /> Top products
+              </h3>
+              <div className="flex gap-1 rounded-full bg-ink-100 p-0.5 text-xs">
+                {['revenue', 'units'].map((b) => (
+                  <button
+                    key={b}
+                    onClick={() => setTopBy(b)}
+                    className={`rounded-full px-2.5 py-1 capitalize transition ${topBy === b ? 'bg-paper-50 font-medium text-ink-950 shadow-sm' : 'text-slate-500'}`}
+                  >
+                    by {b}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {topProducts.length === 0 ? (
+              <p className="py-6 text-center text-sm text-slate-400">No sales data yet.</p>
+            ) : (
+              <ol className="space-y-1.5">
+                {topProducts.map((p, i) => (
+                  <li key={`${p.brand}-${p.image_id}`} className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-leaf-100/40">
+                    <span className="flex items-center gap-2 truncate">
+                      <span className="w-5 shrink-0 text-center font-mono text-xs text-slate-400">#{i + 1}</span>
+                      <span className="truncate text-ink-900">{prettify(p.image_id)}</span>
+                      <span className="shrink-0 text-xs text-slate-400">{p.brand}</span>
+                    </span>
+                    <span className="shrink-0 font-mono text-xs text-ink-700">
+                      {topBy === 'revenue' ? `₹${Number(p.revenue).toLocaleString('en-IN')}` : `${p.units_sold} units`}
+                    </span>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <UploadExcelModal
+        isOpen={isUploadOpen}
+        onClose={() => setIsUploadOpen(false)}
+        tabType="analytics"
+        tabTitle="Sales Analytics Data"
+        onSuccess={() => reloadData()}
+      />
+    </div>
+  );
+}
+
+function ChartCard({ title, icon: Icon, children }) {
+  return (
+    <div className="rounded-xl border border-ink-900/10 bg-white p-4">
+      <h3 className="mb-2 flex items-center gap-1.5 font-display text-sm font-semibold text-ink-950">
+        <Icon className="h-4 w-4 text-amber-500" /> {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function Badge({ label, value }) {
+  if (!value) return null;
+  return (
+    <span className="rounded-full border border-ink-900/10 bg-white px-3 py-1">
+      <span className="text-slate-400">{label}:</span> <span className="font-medium text-ink-900">{value}</span>
+    </span>
+  );
+}
+
+function prettify(imageId) {
+  if (!imageId) return '';
+  const parts = imageId.split('_').filter((p, i, arr) => !(i > 0 && arr[i - 1] === p));
+  return parts.join(' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}

src/pages/HomePage.jsx

@@ -0,0 +1,196 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Sidebar } from '../components/Sidebar';
+import { TopBar } from '../components/TopBar';
+import { ProductGrid } from '../components/ProductGrid';
+import { ProductModal } from '../components/ProductModal';
+import { ChatPanel } from '../components/ChatPanel';
+import { api } from '../api/client';
+
+export function HomePage() {
+  const [health, setHealth] = useState(null);
+
+  const [brands, setBrands] = useState([]);
+  const [brandsLoading, setBrandsLoading] = useState(true);
+
+  const [categories, setCategories] = useState([]);
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
+
+  const [selectedBrand, setSelectedBrand] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+
+  const [mode, setMode] = useState('search'); // 'search' | 'chat'
+  const [query, setQuery] = useState('');
+  const [products, setProducts] = useState([]);
+  const [productsLoading, setProductsLoading] = useState(false);
+  const [productsError, setProductsError] = useState(null);
+  const [hasSearched, setHasSearched] = useState(false);
+
+  const [selectedProduct, setSelectedProduct] = useState(null);
+
+  const fetchIdRef = useRef(0);
+
+  const loadBrands = useCallback(() => {
+    setBrandsLoading(true);
+    api.getBrands()
+      .then((res) => setBrands(res.brands))
+      .catch(() => setBrands([]))
+      .finally(() => setBrandsLoading(false));
+  }, []);
+
+  // Initial load: health + brands, then poll health every 30s
+  useEffect(() => {
+    loadBrands();
+    const checkHealth = () => api.getHealth().then(setHealth).catch(() => setHealth(null));
+    checkHealth();
+    const interval = setInterval(checkHealth, 30000);
+    return () => clearInterval(interval);
+  }, [loadBrands]);
+
+  // Load categories + default browse listing whenever the brand changes
+  useEffect(() => {
+    setSelectedCategory(null);
+    if (!selectedBrand) {
+      setCategories([]);
+      return;
+    }
+    setCategoriesLoading(true);
+    api.getBrandCategories(selectedBrand)
+      .then((res) => setCategories(res.categories))
+      .catch(() => setCategories([]))
+      .finally(() => setCategoriesLoading(false));
+  }, [selectedBrand]);
+
+  const browse = useCallback(() => {
+    const id = ++fetchIdRef.current;
+    setProductsLoading(true);
+    setProductsError(null);
+    setHasSearched(false);
+    const req = selectedBrand
+      ? api.getBrandProducts(selectedBrand, { category: selectedCategory })
+      : api.getAllProducts({ category: selectedCategory });
+
+    req
+      .then((res) => {
+        if (id === fetchIdRef.current) {
+          setProducts(res.products || []);
+        }
+      })
+      .catch((err) => {
+        if (id === fetchIdRef.current) {
+          setProductsError(err.message);
+        }
+      })
+      .finally(() => {
+        if (id === fetchIdRef.current) {
+          setProductsLoading(false);
+        }
+      });
+  }, [selectedBrand, selectedCategory]);
+
+  // Re-browse whenever brand/category changes (only relevant once a search hasn't overridden it)
+  useEffect(() => {
+    if (mode === 'search' && !query) browse();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedBrand, selectedCategory]);
+
+  function runSearch() {
+    if (!query.trim()) {
+      browse();
+      return;
+    }
+    const id = ++fetchIdRef.current;
+    setProductsLoading(true);
+    setProductsError(null);
+    setHasSearched(true);
+    api.search(query.trim(), { brand: selectedBrand, category: selectedCategory })
+      .then((res) => {
+        if (id === fetchIdRef.current) {
+          setProducts(res.results || []);
+        }
+      })
+      .catch((err) => {
+        if (id === fetchIdRef.current) {
+          setProductsError(err.message);
+        }
+      })
+      .finally(() => {
+        if (id === fetchIdRef.current) {
+          setProductsLoading(false);
+        }
+      });
+  }
+
+  return (
+    <div className="flex h-screen">
+      <Sidebar
+        brands={brands}
+        brandsLoading={brandsLoading}
+        categories={categories}
+        categoriesLoading={categoriesLoading}
+        selectedBrand={selectedBrand}
+        selectedCategory={selectedCategory}
+        onSelectBrand={(b) => { setSelectedBrand(b); setQuery(''); }}
+        onSelectCategory={setSelectedCategory}
+        onRefreshBrands={loadBrands}
+      />
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <TopBar
+          mode={mode}
+          onModeChange={setMode}
+          query={query}
+          onQueryChange={setQuery}
+          onSubmit={runSearch}
+          health={health}
+          onResetHome={() => {
+            setSelectedBrand(null);
+            setSelectedCategory(null);
+            setQuery('');
+            setMode('search');
+          }}
+        />
+
+        <main className="flex-1 overflow-y-auto">
+          {mode === 'search' ? (
+            <div className="p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <p className="font-display text-sm font-semibold text-ink-900">
+                  {hasSearched
+                    ? `Results for "${query}"`
+                    : selectedBrand
+                    ? `Browsing ${selectedBrand}${selectedCategory ? ` · ${selectedCategory}` : ''}`
+                    : 'Browsing All Brands'}
+                </p>
+                {products.length > 0 && <p className="text-xs text-slate-500">{products.length} shown</p>}
+              </div>
+
+              <ProductGrid
+                products={products}
+                loading={productsLoading}
+                error={productsError}
+                showSimilarity={hasSearched}
+                emptyTitle={brands.length === 0 ? 'No catalog data yet' : 'No products found'}
+                emptySubtitle={
+                  brands.length === 0
+                    ? "Run `python scripts/seed_sample_data.py` in the backend to load sample brands, or use the Admin panel to ingest a real one."
+                    : 'Try a different brand, category, or search term.'
+                }
+                onSelect={setSelectedProduct}
+              />
+            </div>
+          ) : (
+            <ChatPanel brand={selectedBrand} onSelectSource={setSelectedProduct} />
+          )}
+        </main>
+      </div>
+
+      <ProductModal
+        product={selectedProduct}
+        onClose={() => setSelectedProduct(null)}
+        onSelectRecommendation={(r) =>
+          api.getProductDetail(r.brand, r.image_id).then(setSelectedProduct).catch(() => {})
+        }
+      />
+    </div>
+  );
+}

src/pages/LoginPage.jsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { ShieldCheck, UserCheck, Lock, User, ArrowRight, Sparkles } from 'lucide-react';
+
+export function LoginPage() {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const [selectedRole, setSelectedRole] = useState('admin');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleRoleSelect = (role) => {
+    setSelectedRole(role);
+    setError('');
+  };
+
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    if (!username.trim() || !password.trim()) {
+      setError('Please enter both username and password.');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const user = await login(username, password, selectedRole);
+      setLoading(false);
+      if (user.role === 'admin') navigate('/admin');
+      else navigate('/user');
+    } catch (err) {
+      setLoading(false);
+      setError(`Login failed. Invalid username or password for ${selectedRole.toUpperCase()} account.`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-slate-950 text-slate-100 flex items-center justify-center p-4 relative overflow-hidden font-sans">
+      {/* Background Glow Accents */}
+      <div className="absolute -top-40 -left-40 h-96 w-96 rounded-full bg-amber-500/10 blur-3xl pointer-events-none" />
+      <div className="absolute -bottom-40 -right-40 h-96 w-96 rounded-full bg-emerald-500/10 blur-3xl pointer-events-none" />
+
+      <div className="w-full max-w-md relative z-10">
+        {/* Header Branding */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 text-amber-400 text-xs font-semibold mb-3">
+            <Sparkles className="h-3.5 w-3.5" /> Brand Catalog & Store Intelligence
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight text-white font-display">System Authentication</h1>
+          <p className="text-sm text-slate-400 mt-1">Please enter your username and password to sign in</p>
+        </div>
+
+        {/* Main Card */}
+        <div className="rounded-2xl border border-slate-800 bg-slate-900/80 p-6 backdrop-blur-xl shadow-2xl">
+          {/* Role Selection Tabs: Admin and User */}
+          <div className="grid grid-cols-2 gap-2 p-1.5 rounded-xl bg-slate-950/80 border border-slate-800/80 mb-6">
+            <button
+              type="button"
+              onClick={() => handleRoleSelect('admin')}
+              className={`flex items-center justify-center gap-2 py-3 px-4 rounded-lg text-xs font-bold transition-all ${
+                selectedRole === 'admin'
+                  ? 'bg-amber-500 text-slate-950 shadow-md scale-[1.02]'
+                  : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+              }`}
+            >
+              <ShieldCheck className="h-4 w-4" /> Admin Account
+            </button>
+
+            <button
+              type="button"
+              onClick={() => handleRoleSelect('user')}
+              className={`flex items-center justify-center gap-2 py-3 px-4 rounded-lg text-xs font-bold transition-all ${
+                selectedRole === 'user'
+                  ? 'bg-blue-500 text-white shadow-md scale-[1.02]'
+                  : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+              }`}
+            >
+              <UserCheck className="h-4 w-4" /> User Account
+            </button>
+          </div>
+
+          {error && (
+            <div className="mb-4 rounded-lg bg-rose-500/10 border border-rose-500/30 p-3 text-xs text-rose-400">
+              {error}
+            </div>
+          )}
+
+          {/* Login Form */}
+          <form onSubmit={handleFormSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-300 mb-1.5">Username</label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+                <input
+                  type="text"
+                  required
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder={`Enter ${selectedRole} username`}
+                  className="w-full rounded-xl border border-slate-700 bg-slate-950/80 py-2.5 pl-9 pr-4 text-sm text-white placeholder-slate-500 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-slate-300 mb-1.5">Password</label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+                <input
+                  type="password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter password"
+                  className="w-full rounded-xl border border-slate-700 bg-slate-950/80 py-2.5 pl-9 pr-4 text-sm text-white placeholder-slate-500 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 py-3 text-sm font-bold shadow-lg shadow-amber-500/20 transition-all duration-200 active:scale-98 disabled:opacity-50"
+            >
+              {loading ? 'Authenticating...' : `Sign In as ${selectedRole.toUpperCase()}`}
+              <ArrowRight className="h-4 w-4" />
+            </button>
+          </form>
+        </div>
+
+        {/* Footer info */}
+        <p className="text-center text-xs text-slate-500 mt-6">
+          Powered by pgvector RAG Model & Multi-Store Nutrition Intelligence Engine
+        </p>
+      </div>
+    </div>
+  );
+}

src/pages/NutritionAnalyticsPage.jsx

@@ -0,0 +1,216 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis,
+  Tooltip, ResponsiveContainer, CartesianGrid,
+} from 'recharts';
+import {
+  Apple, Award, Beef, Droplet, Flame, HeartPulse, Play, RefreshCw, Wheat, UploadCloud,
+} from 'lucide-react';
+import { api } from '../api/client';
+import { Spinner, EmptyState } from '../components/Atoms';
+import { NavigationHeader } from '../components/NavigationHeader';
+import { UploadExcelModal } from '../components/UploadExcelModal';
+
+const PALETTE = ['#e2a33d', '#3f8556', '#8b2e3c', '#2c3e63', '#c2872a'];
+
+export function NutritionAnalyticsPage() {
+  const [dashboard, setDashboard] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [job, setJob] = useState(null);
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const pollRef = useRef(null);
+
+  const load = () => {
+    setLoading(true);
+    api.getNutritionAnalyticsDashboard(8).then(setDashboard).catch(() => setDashboard(null)).finally(() => setLoading(false));
+  };
+
+  useEffect(() => { load(); }, []);
+
+  useEffect(() => {
+    if (!job || job.status === 'done' || job.status === 'failed') {
+      if (pollRef.current) clearInterval(pollRef.current);
+      if (job?.status === 'done') load();
+      return;
+    }
+    pollRef.current = setInterval(() => {
+      api.getNutritionIntelligenceJob(job.job_id).then(setJob).catch(() => {});
+    }, 2000);
+    return () => clearInterval(pollRef.current);
+  }, [job]);
+
+  const runEnrich = () => api.enrichNutrition({}).then(setJob);
+  const runTrain = () => api.trainNutritionModels().then(setJob);
+
+  const distribution = dashboard?.distribution;
+  const enrichmentCounts = distribution?.enrichment_status || {};
+  const totalTracked = Object.values(enrichmentCounts).reduce((a, b) => a + b, 0);
+  const hasData = totalTracked > 0;
+
+  const distributionData = distribution?.health_score_distribution
+    ? Object.entries(distribution.health_score_distribution).map(([bucket, count]) => ({ bucket, count }))
+    : [];
+
+  return (
+    <div className="flex h-screen w-full flex-col overflow-y-auto bg-paper-100">
+      <NavigationHeader
+        title="Nutrition Intelligence"
+        subtitle="Verified nutrition data, health scores & leaderboards across the catalog"
+        icon={HeartPulse}
+      />
+
+      <div className="mx-auto w-full max-w-6xl flex-1 px-6 py-6">
+        <div className="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-ink-900/10 bg-white p-4">
+          <div>
+            <h3 className="font-display text-sm font-semibold text-ink-950">Nutrition data pipeline</h3>
+            <p className="text-xs text-slate-400">
+              {hasData
+                ? `${enrichmentCounts.verified || 0} verified · ${enrichmentCounts.partial || 0} partial · ${enrichmentCounts.unavailable || 0} unavailable of ${totalTracked} tracked products`
+                : 'No products enriched yet - run enrichment or upload Excel/CSV data.'}
+            </p>
+            {job && (
+              <p className="mt-1 text-xs text-amber-600">
+                {job.kind === 'enrich' ? 'Enrichment' : 'Training'} {job.status}
+                {job.total ? ` (${job.processed}/${job.total})` : ''}
+                {job.detail ? ` - ${job.detail}` : ''}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              onClick={() => setIsUploadOpen(true)}
+              className="flex items-center gap-1.5 rounded-full bg-amber-600 px-3.5 py-1.5 text-xs font-semibold text-white transition hover:bg-amber-700 shadow-xs active:scale-95"
+            >
+              <UploadCloud className="h-3.5 w-3.5" />
+              <span>Upload Nutrition (Excel / CSV)</span>
+            </button>
+            <button
+              onClick={runEnrich}
+              disabled={job && job.status === 'running'}
+              className="flex items-center gap-1.5 rounded-full bg-ink-900 px-3 py-1.5 text-xs font-semibold text-paper-100 transition hover:bg-ink-800 disabled:opacity-50"
+            >
+              <RefreshCw className={`h-3.5 w-3.5 ${job?.kind === 'enrich' && job.status === 'running' ? 'animate-spin' : ''}`} />
+              Auto Enrich OFF
+            </button>
+            <button
+              onClick={runTrain}
+              disabled={job && job.status === 'running'}
+              className="flex items-center gap-1.5 rounded-full bg-leaf-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-leaf-700 disabled:opacity-50"
+            >
+              <Play className="h-3.5 w-3.5" />
+              Train Similarity
+            </button>
+          </div>
+        </div>
+
+        {loading ? (
+          <Spinner label="Loading nutrition analytics…" />
+        ) : !hasData ? (
+          <EmptyState
+            icon={HeartPulse}
+            title="No nutrition analytics yet"
+            subtitle="Run enrichment above (or `python scripts/enrich_nutrition.py`), then training, to populate this dashboard."
+          />
+        ) : (
+          <>
+            <div className="grid gap-4 lg:grid-cols-2">
+              <ChartCard title="Healthiest brands" icon={Award}>
+                <ResponsiveContainer width="100%" height={240}>
+                  <BarChart data={dashboard.rankings.healthiest_brands}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e4d8bd" />
+                    <XAxis dataKey="brand" tick={{ fontSize: 11 }} />
+                    <YAxis tick={{ fontSize: 12 }} domain={[0, 100]} />
+                    <Tooltip />
+                    <Bar dataKey="avg_health_score" fill="#3f8556" radius={[6, 6, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartCard>
+
+              <ChartCard title="Healthiest categories" icon={Apple}>
+                <ResponsiveContainer width="100%" height={240}>
+                  <BarChart data={dashboard.rankings.healthiest_categories}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e4d8bd" />
+                    <XAxis dataKey="category" tick={{ fontSize: 11 }} />
+                    <YAxis tick={{ fontSize: 12 }} domain={[0, 100]} />
+                    <Tooltip />
+                    <Bar dataKey="avg_health_score" fill="#e2a33d" radius={[6, 6, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartCard>
+            </div>
+
+            {distributionData.length > 0 && (
+              <div className="mt-4">
+                <ChartCard title="Health score distribution" icon={HeartPulse}>
+                  <ResponsiveContainer width="100%" height={220}>
+                    <PieChart>
+                      <Pie data={distributionData} dataKey="count" nameKey="bucket" outerRadius={85} label={(e) => e.bucket}>
+                        {distributionData.map((_, i) => <Cell key={i} fill={PALETTE[i % PALETTE.length]} />)}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </ChartCard>
+              </div>
+            )}
+
+            <div className="mt-4 grid gap-4 lg:grid-cols-2">
+              <Leaderboard title="Highest protein" icon={Beef} items={dashboard.leaderboards.highest_protein} field="protein_g" unit="g" />
+              <Leaderboard title="Highest fiber" icon={Wheat} items={dashboard.leaderboards.highest_fiber} field="dietary_fiber_g" unit="g" />
+              <Leaderboard title="Lowest sugar" icon={Droplet} items={dashboard.leaderboards.lowest_sugar} field="total_sugar_g" unit="g" />
+              <Leaderboard title="Lowest sodium" icon={Flame} items={dashboard.leaderboards.lowest_sodium} field="sodium_mg" unit="mg" />
+            </div>
+          </>
+        )}
+      </div>
+
+      <UploadExcelModal
+        isOpen={isUploadOpen}
+        onClose={() => setIsUploadOpen(false)}
+        tabType="nutrition"
+        tabTitle="Nutritional Intelligence Facts"
+        onSuccess={() => load()}
+      />
+    </div>
+  );
+}
+
+function ChartCard({ title, icon: Icon, children }) {
+  return (
+    <div className="rounded-xl border border-ink-900/10 bg-white p-4">
+      <h3 className="mb-2 flex items-center gap-1.5 font-display text-sm font-semibold text-ink-950">
+        <Icon className="h-4 w-4 text-amber-500" /> {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function Leaderboard({ title, icon: Icon, items = [], field, unit }) {
+  return (
+    <div className="rounded-xl border border-ink-900/10 bg-white p-4">
+      <h3 className="mb-3 flex items-center gap-1.5 font-display text-sm font-semibold text-ink-950">
+        <Icon className="h-4 w-4 text-leaf-600" /> {title}
+      </h3>
+      {items.length === 0 ? (
+        <p className="py-4 text-center text-sm text-slate-400">No data yet.</p>
+      ) : (
+        <ol className="space-y-1.5">
+          {items.map((p, i) => (
+            <li key={`${p.brand}-${p.image_id}`} className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-amber-50/50">
+              <span className="flex items-center gap-2 truncate">
+                <span className="w-5 shrink-0 text-center font-mono text-xs text-slate-400">#{i + 1}</span>
+                <span className="truncate text-ink-900">{p.product_name || p.image_id}</span>
+                <span className="shrink-0 text-xs text-slate-400">{p.brand}</span>
+              </span>
+              <span className="shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-600">
+                {p[field] != null ? `${Number(p[field]).toFixed(1)} ${unit}` : '–'}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

src/pages/StoresPage.jsx

@@ -0,0 +1,229 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Store as StoreIcon, TrendingUp, IndianRupee, PackageCheck, PackageX,
+  PackageSearch, BarChart3, Search, UploadCloud,
+} from 'lucide-react';
+import { api } from '../api/client';
+import { Spinner, EmptyState } from '../components/Atoms';
+import { NavigationHeader } from '../components/NavigationHeader';
+import { UploadExcelModal } from '../components/UploadExcelModal';
+
+const STOCK_STATUS_STYLES = {
+  'In Stock': 'bg-leaf-100 text-leaf-600',
+  'Low Stock': 'bg-amber-100 text-amber-600',
+  'Out of Stock': 'bg-maroon-100 text-maroon-600',
+  'Overstocked': 'bg-ink-100 text-ink-700',
+};
+
+export function StoresPage() {
+  const [stores, setStores] = useState([]);
+  const [storesLoading, setStoresLoading] = useState(true);
+  const [selectedStore, setSelectedStore] = useState(null);
+
+  const [products, setProducts] = useState([]);
+  const [productsLoading, setProductsLoading] = useState(false);
+  const [dashboard, setDashboard] = useState(null);
+  const [dashboardLoading, setDashboardLoading] = useState(false);
+  const [discounts, setDiscounts] = useState({}); // keyed by brand||image_id
+
+  const [search, setSearch] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+
+  useEffect(() => {
+    api.getStores()
+      .then((res) => {
+        setStores(res);
+        if (res.length > 0) setSelectedStore(res[0].store_id);
+      })
+      .catch(() => setStores([]))
+      .finally(() => setStoresLoading(false));
+  }, []);
+
+  const loadStoreData = useCallback((storeId) => {
+    if (!storeId) return;
+    setProductsLoading(true);
+    setDashboardLoading(true);
+    api.getStoreProducts(storeId, { in_stock_only: inStockOnly })
+      .then(setProducts)
+      .catch(() => setProducts([]))
+      .finally(() => setProductsLoading(false));
+    api.getStoreAnalytics(storeId)
+      .then(setDashboard)
+      .catch(() => setDashboard(null))
+      .finally(() => setDashboardLoading(false));
+    api.getStoreDiscounts(storeId)
+      .then((rows) => {
+        const map = {};
+        rows.forEach((r) => { map[`${r.brand}||${r.image_id}`] = r; });
+        setDiscounts(map);
+      })
+      .catch(() => setDiscounts({}));
+  }, [inStockOnly]);
+
+  useEffect(() => { loadStoreData(selectedStore); }, [selectedStore, loadStoreData]);
+
+  const filteredProducts = products.filter((p) =>
+    !search || (p.title || '').toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="flex h-screen w-full flex-col bg-paper-100">
+      <NavigationHeader title="Store Intelligence" subtitle="Multi-store inventory, pricing & ML-based discounts" icon={StoreIcon} />
+
+      {storesLoading ? (
+        <div className="flex flex-1 items-center justify-center"><Spinner label="Loading stores…" /></div>
+      ) : stores.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center p-8">
+          <EmptyState
+            icon={StoreIcon}
+            title="No stores set up yet"
+            subtitle="Run scripts/seed_store_intelligence.py (or POST /api/admin/store-intelligence/seed) to provision the 5 stores and simulate order history, then scripts/train_ml_models.py to train the discount/trending/recommendation models."
+          />
+        </div>
+      ) : (
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex gap-2 overflow-x-auto border-b border-ink-900/10 bg-paper-50 px-6 py-3">
+            {stores.map((s) => (
+              <button
+                key={s.store_id}
+                onClick={() => setSelectedStore(s.store_id)}
+                className={`flex shrink-0 items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition ${
+                  selectedStore === s.store_id ? 'bg-ink-900 text-paper-100' : 'bg-ink-100 text-ink-700 hover:bg-ink-100/70'
+                }`}
+              >
+                <StoreIcon className="h-3.5 w-3.5" />
+                {s.store_name}
+                <span className="rounded-full bg-black/10 px-1.5 py-0.5 text-[10px] uppercase">{s.tier}</span>
+              </button>
+            ))}
+          </div>
+
+          <div className="flex-1 overflow-y-auto px-6 py-5">
+            {dashboardLoading ? (
+              <Spinner label="Loading store analytics…" className="mb-4" />
+            ) : dashboard ? (
+              <KpiRow dashboard={dashboard} />
+            ) : null}
+
+            <div className="mt-6 flex items-center justify-between gap-3 flex-wrap">
+              <h2 className="font-display text-lg font-semibold text-ink-950">Products in this store</h2>
+              <div className="flex items-center gap-2.5 flex-wrap">
+                <div className="relative">
+                  <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" />
+                  <input
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Filter products…"
+                    className="rounded-full border border-ink-900/10 bg-white py-1.5 pl-8 pr-3 text-sm focus:border-amber-500 focus:outline-none"
+                  />
+                </div>
+                <label className="flex items-center gap-1.5 text-xs text-slate-500 mr-2">
+                  <input type="checkbox" checked={inStockOnly} onChange={(e) => setInStockOnly(e.target.checked)} />
+                  In stock only
+                </label>
+
+                <button
+                  onClick={() => setIsUploadOpen(true)}
+                  className="flex items-center gap-1.5 rounded-full bg-amber-600 px-3.5 py-1.5 text-xs font-semibold text-white transition hover:bg-amber-700 shadow-xs active:scale-95"
+                >
+                  <UploadCloud className="h-3.5 w-3.5" />
+                  <span>Upload Excel / CSV</span>
+                </button>
+              </div>
+            </div>
+
+            {productsLoading ? (
+              <Spinner label="Loading products…" className="mt-4" />
+            ) : filteredProducts.length === 0 ? (
+              <EmptyState icon={PackageSearch} title="No products found" subtitle="Try clearing filters." />
+            ) : (
+              <div className="mt-3 overflow-hidden rounded-xl border border-ink-900/10 bg-white">
+                <table className="w-full text-left text-sm">
+                  <thead className="bg-ink-50 text-xs uppercase tracking-wide text-slate-500">
+                    <tr>
+                      <th className="px-4 py-2.5">Product</th>
+                      <th className="px-4 py-2.5">Category</th>
+                      <th className="px-4 py-2.5">Stock</th>
+                      <th className="px-4 py-2.5">Status</th>
+                      <th className="px-4 py-2.5">MRP</th>
+                      <th className="px-4 py-2.5">Selling Price</th>
+                      <th className="px-4 py-2.5">Discount</th>
+                      <th className="px-4 py-2.5">Margin</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-ink-900/5">
+                    {filteredProducts.map((p) => {
+                      const d = discounts[`${p.brand}||${p.image_id}`];
+                      return (
+                        <tr key={`${p.brand}-${p.image_id}`} className="hover:bg-amber-50/40">
+                          <td className="px-4 py-2.5">
+                            <p className="font-medium text-ink-900">{p.title}</p>
+                            <p className="text-xs text-slate-400">{p.brand}{p.fssai_license ? ` · FSSAI: ${p.fssai_license}` : ''}</p>
+                          </td>
+                          <td className="px-4 py-2.5 text-slate-500">{p.category}</td>
+                          <td className="px-4 py-2.5 font-mono">{p.available_stock}</td>
+                          <td className="px-4 py-2.5">
+                            <span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${STOCK_STATUS_STYLES[p.stock_status] || 'bg-ink-100 text-ink-700'}`}>
+                              {p.stock_status}
+                            </span>
+                          </td>
+                          <td className="px-4 py-2.5 font-mono text-slate-500 line-through decoration-slate-300">₹{p.mrp}</td>
+                          <td className="px-4 py-2.5 font-mono font-semibold text-ink-950">₹{p.selling_price}</td>
+                          <td className="px-4 py-2.5">
+                            {d && d.discount_pct > 0 ? (
+                              <span className="rounded-full bg-maroon-100 px-2 py-0.5 text-[11px] font-medium text-maroon-600">
+                                -{d.discount_pct}% → ₹{d.final_price}
+                              </span>
+                            ) : (
+                              <span className="text-xs text-slate-300">—</span>
+                            )}
+                          </td>
+                          <td className="px-4 py-2.5 font-mono text-leaf-600">{p.gross_profit_pct}%</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <UploadExcelModal
+        isOpen={isUploadOpen}
+        onClose={() => setIsUploadOpen(false)}
+        tabType="stores"
+        tabTitle="Store Inventory & Pricing"
+        onSuccess={() => loadStoreData(selectedStore)}
+      />
+    </div>
+  );
+}
+
+function KpiRow({ dashboard }) {
+  const { sales, profit, inventory } = dashboard;
+  const TONE_TEXT = { ink: 'text-ink-600', leaf: 'text-leaf-600', maroon: 'text-maroon-600' };
+  const cards = [
+    { icon: IndianRupee, label: 'Revenue', value: `₹${Number(sales.revenue).toLocaleString('en-IN')}`, tone: 'ink' },
+    { icon: TrendingUp, label: 'Profit', value: `₹${Number(profit.total_profit).toLocaleString('en-IN')}`, sub: `${profit.gross_profit_pct}% GP`, tone: 'leaf' },
+    { icon: BarChart3, label: 'Orders', value: sales.total_sales.toLocaleString('en-IN'), sub: `₹${sales.average_basket_value} avg basket`, tone: 'ink' },
+    { icon: PackageCheck, label: 'In Stock', value: inventory.in_stock, sub: `${inventory.total_products} products total`, tone: 'leaf' },
+    { icon: PackageX, label: 'Out of Stock', value: inventory.out_of_stock, sub: `${inventory.low_stock} running low`, tone: 'maroon' },
+  ];
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+      {cards.map((c) => (
+        <div key={c.label} className="rounded-xl border border-ink-900/10 bg-white p-4">
+          <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-400">
+            <c.icon className="h-3.5 w-3.5" /> {c.label}
+          </div>
+          <p className={`mt-1.5 font-display text-xl font-bold ${TONE_TEXT[c.tone]}`}>{c.value}</p>
+          {c.sub && <p className="text-xs text-slate-400">{c.sub}</p>}
+        </div>
+      ))}
+    </div>
+  );
+}