Updates for new analytics page + add pipeline chart to PO page

inventory-server/src/routes/analytics.js

@@ -181,7 +181,7 @@ router.get('/inventory-summary', async (req, res) => {
         END AS inventory_turns_annualized,
         CASE
           WHEN SUM(avg_stock_cost_30d) > 0
-          THEN SUM(profit_30d) / SUM(avg_stock_cost_30d)
+          THEN (SUM(profit_30d) / SUM(avg_stock_cost_30d)) * 12
           ELSE 0
         END AS gmroi,
         CASE
@@ -314,7 +314,7 @@ router.get('/efficiency', async (req, res) => {
         SUM(revenue_30d) AS revenue_30d,
         CASE
           WHEN SUM(avg_stock_cost_30d) > 0
-          THEN SUM(profit_30d) / SUM(avg_stock_cost_30d)
+          THEN (SUM(profit_30d) / SUM(avg_stock_cost_30d)) * 12
           ELSE 0
         END AS gmroi
       FROM product_metrics
@@ -684,4 +684,126 @@ router.get('/growth', async (req, res) => {
   }
 });
 
+// Inventory value over time (uses stock_snapshots — full product coverage)
+router.get('/inventory-value', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+    const period = parseInt(req.query.period) || 90;
+    const validPeriods = [30, 90, 365];
+    const days = validPeriods.includes(period) ? period : 90;
+
+    const { rows } = await pool.query(`
+      SELECT
+        snapshot_date AS date,
+        ROUND(SUM(stock_value)::numeric, 0) AS total_value,
+        COUNT(DISTINCT pid) AS product_count
+      FROM stock_snapshots
+      WHERE snapshot_date >= CURRENT_DATE - make_interval(days => $1)
+      GROUP BY snapshot_date
+      ORDER BY snapshot_date
+    `, [days]);
+
+    res.json(rows.map(r => ({
+      date: r.date,
+      totalValue: Number(r.total_value) || 0,
+      productCount: Number(r.product_count) || 0,
+    })));
+  } catch (error) {
+    console.error('Error fetching inventory value:', error);
+    res.status(500).json({ error: 'Failed to fetch inventory value' });
+  }
+});
+
+// Inventory flow: receiving vs selling per day
+router.get('/flow', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+    const period = parseInt(req.query.period) || 30;
+    const validPeriods = [30, 90];
+    const days = validPeriods.includes(period) ? period : 30;
+
+    const { rows } = await pool.query(`
+      SELECT
+        snapshot_date AS date,
+        COALESCE(SUM(units_received), 0) AS units_received,
+        ROUND(COALESCE(SUM(cost_received), 0)::numeric, 0) AS cost_received,
+        COALESCE(SUM(units_sold), 0) AS units_sold,
+        ROUND(COALESCE(SUM(cogs), 0)::numeric, 0) AS cogs_sold
+      FROM daily_product_snapshots
+      WHERE snapshot_date >= CURRENT_DATE - make_interval(days => $1)
+      GROUP BY snapshot_date
+      ORDER BY snapshot_date
+    `, [days]);
+
+    res.json(rows.map(r => ({
+      date: r.date,
+      unitsReceived: Number(r.units_received) || 0,
+      costReceived: Number(r.cost_received) || 0,
+      unitsSold: Number(r.units_sold) || 0,
+      cogsSold: Number(r.cogs_sold) || 0,
+    })));
+  } catch (error) {
+    console.error('Error fetching inventory flow:', error);
+    res.status(500).json({ error: 'Failed to fetch inventory flow' });
+  }
+});
+
+// Seasonal pattern distribution
+router.get('/seasonal', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+
+    const { rows: patterns } = await pool.query(`
+      SELECT
+        COALESCE(seasonal_pattern, 'unknown') AS pattern,
+        COUNT(*) AS product_count,
+        SUM(current_stock_cost) AS stock_cost,
+        SUM(revenue_30d) AS revenue
+      FROM product_metrics
+      WHERE is_visible = true
+        AND current_stock > 0
+      GROUP BY seasonal_pattern
+      ORDER BY COUNT(*) DESC
+    `);
+
+    const { rows: peakSeasons } = await pool.query(`
+      SELECT
+        peak_season AS month,
+        COUNT(*) AS product_count,
+        SUM(current_stock_cost) AS stock_cost
+      FROM product_metrics
+      WHERE is_visible = true
+        AND current_stock > 0
+        AND seasonal_pattern IN ('moderate', 'strong')
+        AND peak_season IS NOT NULL
+      GROUP BY peak_season
+      ORDER BY
+        CASE peak_season
+          WHEN 'January' THEN 1 WHEN 'February' THEN 2 WHEN 'March' THEN 3
+          WHEN 'April' THEN 4 WHEN 'May' THEN 5 WHEN 'June' THEN 6
+          WHEN 'July' THEN 7 WHEN 'August' THEN 8 WHEN 'September' THEN 9
+          WHEN 'October' THEN 10 WHEN 'November' THEN 11 WHEN 'December' THEN 12
+          ELSE 13
+        END
+    `);
+
+    res.json({
+      patterns: patterns.map(r => ({
+        pattern: r.pattern,
+        productCount: Number(r.product_count) || 0,
+        stockCost: Number(r.stock_cost) || 0,
+        revenue: Number(r.revenue) || 0,
+      })),
+      peakSeasons: peakSeasons.map(r => ({
+        month: r.month,
+        productCount: Number(r.product_count) || 0,
+        stockCost: Number(r.stock_cost) || 0,
+      })),
+    });
+  } catch (error) {
+    console.error('Error fetching seasonal data:', error);
+    res.status(500).json({ error: 'Failed to fetch seasonal data' });
+  }
+});
+
 module.exports = router;

inventory-server/src/routes/purchase-orders.js

@@ -1185,4 +1185,67 @@ router.get('/delivery-metrics', async (req, res) => {
   }
 });
 
+// PO Pipeline — expected arrivals timeline + overdue summary
+router.get('/pipeline', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+
+    // Expected arrivals by week (ordered + electronically_sent with expected_date)
+    const { rows: arrivals } = await pool.query(`
+      SELECT
+        DATE_TRUNC('week', expected_date)::date AS week,
+        COUNT(DISTINCT po_id) AS po_count,
+        ROUND(SUM(po_cost_price * ordered)::numeric, 0) AS expected_value,
+        COUNT(DISTINCT vendor) AS vendor_count
+      FROM purchase_orders
+      WHERE status IN ('ordered', 'electronically_sent')
+        AND expected_date IS NOT NULL
+      GROUP BY 1
+      ORDER BY 1
+    `);
+
+    // Overdue POs (expected_date in the past)
+    const { rows: [overdue] } = await pool.query(`
+      SELECT
+        COUNT(DISTINCT po_id) AS po_count,
+        ROUND(COALESCE(SUM(po_cost_price * ordered), 0)::numeric, 0) AS total_value
+      FROM purchase_orders
+      WHERE status IN ('ordered', 'electronically_sent')
+        AND expected_date IS NOT NULL
+        AND expected_date < CURRENT_DATE
+    `);
+
+    // Summary: all open POs
+    const { rows: [summary] } = await pool.query(`
+      SELECT
+        COUNT(DISTINCT po_id) AS total_open_pos,
+        ROUND(COALESCE(SUM(po_cost_price * ordered), 0)::numeric, 0) AS total_on_order_value,
+        COUNT(DISTINCT vendor) AS vendor_count
+      FROM purchase_orders
+      WHERE status IN ('ordered', 'electronically_sent')
+    `);
+
+    res.json({
+      arrivals: arrivals.map(r => ({
+        week: r.week,
+        poCount: Number(r.po_count) || 0,
+        expectedValue: Number(r.expected_value) || 0,
+        vendorCount: Number(r.vendor_count) || 0,
+      })),
+      overdue: {
+        count: Number(overdue.po_count) || 0,
+        value: Number(overdue.total_value) || 0,
+      },
+      summary: {
+        totalOpenPOs: Number(summary.total_open_pos) || 0,
+        totalOnOrderValue: Number(summary.total_on_order_value) || 0,
+        vendorCount: Number(summary.vendor_count) || 0,
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching PO pipeline:', error);
+    res.status(500).json({ error: 'Failed to fetch PO pipeline' });
+  }
+});
+
 module.exports = router;

inventory/src/components/analytics/CapitalEfficiency.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -32,12 +33,15 @@ interface EfficiencyData {
 }
 
 function getGmroiColor(gmroi: number): string {
-  if (gmroi >= 1) return METRIC_COLORS.revenue;     // emerald — good
-  if (gmroi >= 0.3) return METRIC_COLORS.comparison; // amber — ok
+  if (gmroi >= 3) return METRIC_COLORS.revenue;      // emerald — strong
+  if (gmroi >= 1) return METRIC_COLORS.comparison;   // amber — acceptable
   return '#ef4444';                                    // red — poor
 }
 
+type GmroiView = 'top' | 'bottom';
+
 export function CapitalEfficiency() {
+  const [gmroiView, setGmroiView] = useState<GmroiView>('top');
   const { data, isLoading, isError } = useQuery<EfficiencyData>({
     queryKey: ['capital-efficiency'],
     queryFn: async () => {
@@ -73,17 +77,38 @@ export function CapitalEfficiency() {
     );
   }
 
-  // Top 15 by GMROI for bar chart
-  const sortedGmroi = [...data.vendors].sort((a, b) => b.gmroi - a.gmroi).slice(0, 15);
+  // Top or bottom 15 by GMROI for bar chart
+  const sortedGmroi = gmroiView === 'top'
+    ? [...data.vendors].sort((a, b) => b.gmroi - a.gmroi).slice(0, 15)
+    : [...data.vendors].sort((a, b) => a.gmroi - b.gmroi).slice(0, 15);
 
   return (
     <div className="grid gap-4 md:grid-cols-2">
       <Card>
         <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
               <CardTitle>GMROI by Vendor</CardTitle>
               <p className="text-xs text-muted-foreground">
-            Gross margin return on inventory investment (top vendors by stock value)
+                Annualized gross margin return on investment (top 30 vendors by stock value)
               </p>
+            </div>
+            <div className="flex gap-1">
+              {(['top', 'bottom'] as GmroiView[]).map((v) => (
+                <button
+                  key={v}
+                  onClick={() => setGmroiView(v)}
+                  className={`px-3 py-1 text-xs rounded-md transition-colors ${
+                    gmroiView === v
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                  }`}
+                >
+                  {v === 'top' ? 'Best' : 'Worst'}
+                </button>
+              ))}
+            </div>
+          </div>
         </CardHeader>
         <CardContent>
           <ResponsiveContainer width="100%" height={400}>
@@ -112,7 +137,7 @@ export function CapitalEfficiency() {
                   );
                 }}
               />
-              <ReferenceLine x={1} stroke="#9ca3af" strokeDasharray="3 3" label={{ value: '1.0', position: 'top', fontSize: 10 }} />
+              <ReferenceLine x={3} stroke="#9ca3af" strokeDasharray="3 3" label={{ value: '3.0', position: 'top', fontSize: 10 }} />
               <Bar dataKey="gmroi" name="GMROI" radius={[0, 4, 4, 0]}>
                 {sortedGmroi.map((entry, i) => (
                   <Cell key={i} fill={getGmroiColor(entry.gmroi)} />

inventory/src/components/analytics/InventoryFlow.tsx

@@ -0,0 +1,186 @@
+import { useState, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  ResponsiveContainer,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  Line,
+  ComposedChart,
+  Legend,
+} from 'recharts';
+import config from '../../config';
+import { METRIC_COLORS } from '@/lib/dashboard/designTokens';
+import { formatCurrency } from '@/utils/formatCurrency';
+import { ArrowDownToLine, ArrowUpFromLine, TrendingUp } from 'lucide-react';
+
+interface FlowPoint {
+  date: string;
+  unitsReceived: number;
+  costReceived: number;
+  unitsSold: number;
+  cogsSold: number;
+}
+
+type Period = 30 | 90;
+
+function formatDate(dateStr: string, period: Period): string {
+  const d = new Date(dateStr);
+  if (period === 90) return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+export function InventoryFlow() {
+  const [period, setPeriod] = useState<Period>(30);
+
+  const { data, isLoading, isError } = useQuery<FlowPoint[]>({
+    queryKey: ['inventory-flow', period],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/analytics/flow?period=${period}`);
+      if (!response.ok) throw new Error('Failed to fetch inventory flow');
+      return response.json();
+    },
+  });
+
+  const totals = useMemo(() => {
+    if (!data) return { received: 0, sold: 0, net: 0 };
+    const received = data.reduce((s, d) => s + d.costReceived, 0);
+    const sold = data.reduce((s, d) => s + d.cogsSold, 0);
+    return { received, sold, net: received - sold };
+  }, [data]);
+
+  const chartData = useMemo(() => {
+    if (!data) return [];
+    return data.map(d => ({
+      ...d,
+      netFlow: d.costReceived - d.cogsSold,
+    }));
+  }, [data]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Inventory Flow: Receiving vs Selling</CardTitle>
+            <p className="text-xs text-muted-foreground mt-1">
+              Daily cost of goods received vs cost of goods sold
+            </p>
+          </div>
+          <div className="flex gap-1">
+            {([30, 90] as Period[]).map((p) => (
+              <button
+                key={p}
+                onClick={() => setPeriod(p)}
+                className={`px-3 py-1 text-xs rounded-md transition-colors ${
+                  period === p
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                }`}
+              >
+                {`${p}D`}
+              </button>
+            ))}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isError ? (
+          <div className="h-[400px] flex items-center justify-center">
+            <p className="text-sm text-destructive">Failed to load flow data</p>
+          </div>
+        ) : isLoading || !data ? (
+          <div className="h-[400px] flex items-center justify-center">
+            <div className="animate-pulse text-muted-foreground">Loading flow data...</div>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Summary stats */}
+            <div className="grid gap-4 md:grid-cols-3">
+              <div className="flex items-center gap-3 rounded-lg border p-3">
+                <div className="rounded-full p-2 bg-green-500/10">
+                  <ArrowDownToLine className="h-4 w-4 text-green-500" />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Total Received</p>
+                  <p className="text-lg font-bold">{formatCurrency(totals.received)}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 rounded-lg border p-3">
+                <div className="rounded-full p-2 bg-blue-500/10">
+                  <ArrowUpFromLine className="h-4 w-4 text-blue-500" />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Total Sold (COGS)</p>
+                  <p className="text-lg font-bold">{formatCurrency(totals.sold)}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 rounded-lg border p-3">
+                <div className={`rounded-full p-2 ${totals.net >= 0 ? 'bg-amber-500/10' : 'bg-green-500/10'}`}>
+                  <TrendingUp className={`h-4 w-4 ${totals.net >= 0 ? 'text-amber-500' : 'text-green-500'}`} />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Net Change</p>
+                  <p className={`text-lg font-bold ${totals.net >= 0 ? 'text-amber-600' : 'text-green-600'}`}>
+                    {totals.net >= 0 ? '+' : ''}{formatCurrency(totals.net)}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {totals.net >= 0 ? 'inventory growing' : 'inventory shrinking'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Chart */}
+            <ResponsiveContainer width="100%" height={300}>
+              <ComposedChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  dataKey="date"
+                  tickFormatter={(v) => formatDate(v, period)}
+                  tick={{ fontSize: 12 }}
+                  interval={period === 90 ? 6 : 2}
+                />
+                <YAxis
+                  tickFormatter={formatCurrency}
+                  tick={{ fontSize: 12 }}
+                  width={60}
+                />
+                <Tooltip
+                  labelFormatter={(v) => new Date(v).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}
+                  formatter={(value: number, name: string) => [formatCurrency(value), name]}
+                />
+                <Legend />
+                <Bar
+                  dataKey="costReceived"
+                  fill={METRIC_COLORS.revenue}
+                  name="Received (Cost)"
+                  radius={[2, 2, 0, 0]}
+                  opacity={0.7}
+                />
+                <Bar
+                  dataKey="cogsSold"
+                  fill={METRIC_COLORS.orders}
+                  name="Sold (COGS)"
+                  radius={[2, 2, 0, 0]}
+                  opacity={0.7}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="netFlow"
+                  stroke={METRIC_COLORS.comparison}
+                  name="Net Flow"
+                  strokeWidth={1.5}
+                  dot={false}
+                />
+              </ComposedChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

inventory/src/components/analytics/InventoryValueTrend.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  ResponsiveContainer,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  Line,
+  ComposedChart,
+} from 'recharts';
+import config from '../../config';
+import { METRIC_COLORS } from '@/lib/dashboard/designTokens';
+import { formatCurrency } from '@/utils/formatCurrency';
+
+interface ValuePoint {
+  date: string;
+  totalValue: number;
+  productCount: number;
+}
+
+type Period = 30 | 90 | 365;
+
+function formatDate(dateStr: string, period: Period): string {
+  const d = new Date(dateStr);
+  if (period === 365) return d.toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
+  if (period === 90) return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+export function InventoryValueTrend() {
+  const [period, setPeriod] = useState<Period>(90);
+
+  const { data, isLoading, isError } = useQuery<ValuePoint[]>({
+    queryKey: ['inventory-value', period],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/analytics/inventory-value?period=${period}`);
+      if (!response.ok) throw new Error('Failed to fetch inventory value');
+      return response.json();
+    },
+  });
+
+  const latest = data?.[data.length - 1];
+  const earliest = data?.[0];
+  const change = latest && earliest ? latest.totalValue - earliest.totalValue : 0;
+  const changePct = earliest && earliest.totalValue > 0
+    ? ((change / earliest.totalValue) * 100).toFixed(1)
+    : '0';
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Inventory Value Over Time</CardTitle>
+            <p className="text-xs text-muted-foreground mt-1">
+              Total stock investment (cost) with product count overlay
+              {latest && (
+                <span className="ml-2">
+                  — Current: <span className="font-medium">{formatCurrency(latest.totalValue)}</span>
+                  {' '}
+                  <span className={change >= 0 ? 'text-green-600' : 'text-red-600'}>
+                    ({change >= 0 ? '+' : ''}{changePct}%)
+                  </span>
+                </span>
+              )}
+            </p>
+          </div>
+          <div className="flex gap-1">
+            {([30, 90, 365] as Period[]).map((p) => (
+              <button
+                key={p}
+                onClick={() => setPeriod(p)}
+                className={`px-3 py-1 text-xs rounded-md transition-colors ${
+                  period === p
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                }`}
+              >
+                {p === 365 ? '1Y' : `${p}D`}
+              </button>
+            ))}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isError ? (
+          <div className="h-[350px] flex items-center justify-center">
+            <p className="text-sm text-destructive">Failed to load inventory value data</p>
+          </div>
+        ) : isLoading || !data ? (
+          <div className="h-[350px] flex items-center justify-center">
+            <div className="animate-pulse text-muted-foreground">Loading inventory value...</div>
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height={350}>
+            <ComposedChart data={data}>
+              <defs>
+                <linearGradient id="valueGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={METRIC_COLORS.revenue} stopOpacity={0.3} />
+                  <stop offset="95%" stopColor={METRIC_COLORS.revenue} stopOpacity={0.05} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis
+                dataKey="date"
+                tickFormatter={(v) => formatDate(v, period)}
+                tick={{ fontSize: 12 }}
+                interval={period === 365 ? 29 : period === 90 ? 6 : 2}
+              />
+              <YAxis
+                yAxisId="left"
+                tickFormatter={formatCurrency}
+                tick={{ fontSize: 12 }}
+                width={70}
+                label={{ value: 'Stock Value', angle: -90, position: 'insideLeft', offset: -5, style: { fontSize: 11, fill: '#9ca3af' } }}
+              />
+              <YAxis
+                yAxisId="right"
+                orientation="right"
+                tick={{ fontSize: 12 }}
+                width={60}
+                label={{ value: 'Products', angle: 90, position: 'insideRight', offset: -5, style: { fontSize: 11, fill: '#9ca3af' } }}
+              />
+              <Tooltip
+                labelFormatter={(v) => new Date(v).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}
+                formatter={(value: number, name: string) => [
+                  name === 'Stock Value' ? formatCurrency(value) : value.toLocaleString(),
+                  name,
+                ]}
+              />
+              <Area
+                yAxisId="left"
+                type="monotone"
+                dataKey="totalValue"
+                fill="url(#valueGradient)"
+                stroke={METRIC_COLORS.revenue}
+                strokeWidth={2}
+                name="Stock Value"
+              />
+              <Line
+                yAxisId="right"
+                type="monotone"
+                dataKey="productCount"
+                stroke={METRIC_COLORS.orders}
+                name="Products in Stock"
+                strokeWidth={1.5}
+                dot={false}
+                strokeDasharray="4 2"
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

inventory/src/components/analytics/SeasonalPatterns.tsx

@@ -0,0 +1,240 @@
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+  Tooltip,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+} from 'recharts';
+import config from '../../config';
+import { METRIC_COLORS } from '@/lib/dashboard/designTokens';
+import { formatCurrency } from '@/utils/formatCurrency';
+import { Sun, Snowflake } from 'lucide-react';
+
+interface PatternRow {
+  pattern: string;
+  productCount: number;
+  stockCost: number;
+  revenue: number;
+}
+
+interface PeakSeasonRow {
+  month: string;
+  productCount: number;
+  stockCost: number;
+}
+
+interface SeasonalData {
+  patterns: PatternRow[];
+  peakSeasons: PeakSeasonRow[];
+}
+
+const PATTERN_COLORS: Record<string, string> = {
+  none: '#94a3b8',                    // slate — no seasonality
+  moderate: METRIC_COLORS.comparison, // amber
+  strong: METRIC_COLORS.revenue,      // emerald
+  unknown: '#cbd5e1',                 // light slate
+};
+
+const PATTERN_LABELS: Record<string, string> = {
+  none: 'No Seasonality',
+  moderate: 'Moderate',
+  strong: 'Strong',
+  unknown: 'Unknown',
+};
+
+export function SeasonalPatterns() {
+  const { data, isLoading, isError } = useQuery<SeasonalData>({
+    queryKey: ['seasonal-patterns'],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/analytics/seasonal`);
+      if (!response.ok) throw new Error('Failed to fetch seasonal data');
+      return response.json();
+    },
+  });
+
+  if (isError) {
+    return (
+      <Card>
+        <CardHeader><CardTitle>Seasonal Patterns</CardTitle></CardHeader>
+        <CardContent>
+          <div className="h-[300px] flex items-center justify-center">
+            <p className="text-sm text-destructive">Failed to load seasonal data</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading || !data) {
+    return (
+      <Card>
+        <CardHeader><CardTitle>Seasonal Patterns</CardTitle></CardHeader>
+        <CardContent>
+          <div className="h-[300px] flex items-center justify-center">
+            <div className="animate-pulse text-muted-foreground">Loading seasonal data...</div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const seasonal = data.patterns.filter(p => p.pattern === 'moderate' || p.pattern === 'strong');
+  const seasonalCount = seasonal.reduce((s, p) => s + p.productCount, 0);
+  const seasonalStockCost = seasonal.reduce((s, p) => s + p.stockCost, 0);
+  const totalProducts = data.patterns.reduce((s, p) => s + p.productCount, 0);
+  const seasonalPct = totalProducts > 0 ? ((seasonalCount / totalProducts) * 100).toFixed(0) : '0';
+
+  const donutData = data.patterns.map(p => ({
+    name: PATTERN_LABELS[p.pattern] || p.pattern,
+    value: p.productCount,
+    color: PATTERN_COLORS[p.pattern] || '#94a3b8',
+    stockCost: p.stockCost,
+    revenue: p.revenue,
+  }));
+
+  return (
+    <div className="space-y-4">
+      {/* Summary cards */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardContent className="flex items-center gap-3 py-4">
+            <div className="rounded-full p-2 bg-amber-500/10">
+              <Sun className="h-4 w-4 text-amber-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Seasonal Products</p>
+              <p className="text-xl font-bold">{seasonalCount.toLocaleString()}</p>
+              <p className="text-xs text-muted-foreground">{seasonalPct}% of in-stock products</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="flex items-center gap-3 py-4">
+            <div className="rounded-full p-2 bg-emerald-500/10">
+              <Snowflake className="h-4 w-4 text-emerald-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Seasonal Stock Value</p>
+              <p className="text-xl font-bold">{formatCurrency(seasonalStockCost)}</p>
+              <p className="text-xs text-muted-foreground">capital in seasonal items</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="flex items-center gap-3 py-4">
+            <div className="rounded-full p-2 bg-blue-500/10">
+              <Sun className="h-4 w-4 text-blue-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Peak Months Tracked</p>
+              <p className="text-xl font-bold">{data.peakSeasons.length}</p>
+              <p className="text-xs text-muted-foreground">months with seasonal peaks</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {/* Donut chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Demand Seasonality Distribution</CardTitle>
+            <p className="text-xs text-muted-foreground">
+              Products by seasonal demand pattern (in-stock only)
+            </p>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={donutData}
+                  dataKey="value"
+                  nameKey="name"
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={100}
+                  paddingAngle={2}
+                  label={({ name, value }) => `${name} (${value.toLocaleString()})`}
+                >
+                  {donutData.map((entry, i) => (
+                    <Cell key={i} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    const d = payload[0].payload;
+                    return (
+                      <div className="rounded-lg border bg-background p-3 shadow-md text-sm">
+                        <p className="font-medium mb-1">{d.name}</p>
+                        <p>{d.value.toLocaleString()} products</p>
+                        <p>Stock value: {formatCurrency(d.stockCost)}</p>
+                        <p>Revenue (30d): {formatCurrency(d.revenue)}</p>
+                      </div>
+                    );
+                  }}
+                />
+                <Legend
+                  formatter={(value) => <span className="text-xs">{value}</span>}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Peak season bar chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Peak Season Distribution</CardTitle>
+            <p className="text-xs text-muted-foreground">
+              Which months seasonal products peak (moderate + strong patterns)
+            </p>
+          </CardHeader>
+          <CardContent>
+            {data.peakSeasons.length === 0 ? (
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-sm text-muted-foreground">No peak season data available</p>
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={data.peakSeasons}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                  <XAxis dataKey="month" tick={{ fontSize: 11 }} />
+                  <YAxis tick={{ fontSize: 11 }} />
+                  <Tooltip
+                    content={({ active, payload }) => {
+                      if (!active || !payload?.length) return null;
+                      const d = payload[0].payload as PeakSeasonRow;
+                      return (
+                        <div className="rounded-lg border bg-background p-3 shadow-md text-sm">
+                          <p className="font-medium mb-1">{d.month}</p>
+                          <p>{d.productCount.toLocaleString()} seasonal products peak</p>
+                          <p>Stock value: {formatCurrency(d.stockCost)}</p>
+                        </div>
+                      );
+                    }}
+                  />
+                  <Bar
+                    dataKey="productCount"
+                    fill={METRIC_COLORS.comparison}
+                    name="Products"
+                    radius={[4, 4, 0, 0]}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

inventory/src/components/purchase-orders/PipelineCard.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  Cell,
+} from 'recharts';
+import { AlertTriangle, Package, Clock } from 'lucide-react';
+
+interface Arrival {
+  week: string;
+  poCount: number;
+  expectedValue: number;
+  vendorCount: number;
+}
+
+interface PipelineData {
+  arrivals: Arrival[];
+  overdue: { count: number; value: number };
+  summary: { totalOpenPOs: number; totalOnOrderValue: number; vendorCount: number };
+}
+
+function formatCurrency(value: number): string {
+  if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `$${(value / 1_000).toFixed(1)}k`;
+  return `$${Math.round(value)}`;
+}
+
+function formatWeek(dateStr: string): string {
+  const d = new Date(dateStr);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+export default function PipelineCard() {
+  const [data, setData] = useState<PipelineData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/purchase-orders/pipeline')
+      .then(res => res.ok ? res.json() : Promise.reject('Failed'))
+      .then(setData)
+      .catch(err => console.error('Pipeline fetch error:', err))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="rounded-xl border bg-card p-6">
+        <h3 className="text-lg font-semibold mb-4">Incoming Pipeline</h3>
+        <div className="h-[200px] flex items-center justify-center">
+          <div className="animate-pulse text-muted-foreground">Loading pipeline...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="rounded-xl border bg-card p-6">
+        <h3 className="text-lg font-semibold mb-4">Incoming Pipeline</h3>
+        <p className="text-sm text-destructive">Failed to load pipeline data</p>
+      </div>
+    );
+  }
+
+  const now = new Date();
+  const currentWeekStart = new Date(now);
+  currentWeekStart.setDate(now.getDate() - now.getDay() + 1); // Monday
+  const currentWeekStr = currentWeekStart.toISOString().split('T')[0];
+
+  // Split arrivals into overdue vs upcoming
+  const chartData = data.arrivals.map(a => ({
+    ...a,
+    label: formatWeek(a.week),
+    isOverdue: new Date(a.week) < new Date(currentWeekStr),
+  }));
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-lg font-semibold">Incoming Pipeline</h3>
+          <p className="text-xs text-muted-foreground">Expected PO arrivals by week</p>
+        </div>
+      </div>
+
+      {/* Summary stats row */}
+      <div className="grid grid-cols-3 gap-3 mb-4">
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Package className="h-4 w-4 text-blue-500" />
+          <div>
+            <p className="text-xs text-muted-foreground">Open POs</p>
+            <p className="text-sm font-bold">{data.summary.totalOpenPOs}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Clock className="h-4 w-4 text-emerald-500" />
+          <div>
+            <p className="text-xs text-muted-foreground">On Order</p>
+            <p className="text-sm font-bold">{formatCurrency(data.summary.totalOnOrderValue)}</p>
+          </div>
+        </div>
+        {data.overdue.count > 0 ? (
+          <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50/50 dark:border-red-900/50 dark:bg-red-950/20 p-2.5">
+            <AlertTriangle className="h-4 w-4 text-red-500" />
+            <div>
+              <p className="text-xs text-red-600 dark:text-red-400">Overdue</p>
+              <p className="text-sm font-bold text-red-600 dark:text-red-400">
+                {data.overdue.count} POs ({formatCurrency(data.overdue.value)})
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 rounded-lg border p-2.5">
+            <AlertTriangle className="h-4 w-4 text-green-500" />
+            <div>
+              <p className="text-xs text-muted-foreground">Overdue</p>
+              <p className="text-sm font-bold text-green-600">None</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Arrivals chart */}
+      {chartData.length === 0 ? (
+        <div className="h-[180px] flex items-center justify-center">
+          <p className="text-sm text-muted-foreground">No expected arrivals scheduled</p>
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={180}>
+          <BarChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" vertical={false} />
+            <XAxis dataKey="label" tick={{ fontSize: 11 }} />
+            <YAxis tickFormatter={formatCurrency} tick={{ fontSize: 11 }} width={55} />
+            <Tooltip
+              content={({ active, payload }) => {
+                if (!active || !payload?.length) return null;
+                const d = payload[0].payload as Arrival & { isOverdue: boolean };
+                return (
+                  <div className="rounded-lg border bg-background p-3 shadow-md text-sm">
+                    <p className="font-medium mb-1">
+                      Week of {formatWeek(d.week)}
+                      {d.isOverdue && <span className="text-red-500 ml-1">(overdue)</span>}
+                    </p>
+                    <p>{d.poCount} purchase orders</p>
+                    <p>Expected value: {formatCurrency(d.expectedValue)}</p>
+                    <p>{d.vendorCount} vendors</p>
+                  </div>
+                );
+              }}
+            />
+            <Bar dataKey="expectedValue" name="Expected Value" radius={[4, 4, 0, 0]}>
+              {chartData.map((entry, i) => (
+                <Cell
+                  key={i}
+                  fill={entry.isOverdue ? '#ef4444' : '#2563eb'}
+                  opacity={0.8}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      )}
+    </div>
+  );
+}

inventory/src/pages/Analytics.tsx

@@ -1,11 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
+import { InventoryValueTrend } from '../components/analytics/InventoryValueTrend';
+import { InventoryFlow } from '../components/analytics/InventoryFlow';
 import { InventoryTrends } from '../components/analytics/InventoryTrends';
 import { PortfolioAnalysis } from '../components/analytics/PortfolioAnalysis';
 import { CapitalEfficiency } from '../components/analytics/CapitalEfficiency';
 import { StockHealth } from '../components/analytics/StockHealth';
 import { AgingSellThrough } from '../components/analytics/AgingSellThrough';
 import { StockoutRisk } from '../components/analytics/StockoutRisk';
+import { SeasonalPatterns } from '../components/analytics/SeasonalPatterns';
 import { DiscountImpact } from '../components/analytics/DiscountImpact';
 import { GrowthMomentum } from '../components/analytics/GrowthMomentum';
 import config from '../config';
@@ -95,7 +98,7 @@ export function Analytics() {
               <>
                 <div className="text-2xl font-bold">{summary.gmroi.toFixed(2)}</div>
                 <p className="text-xs text-muted-foreground">
-                  profit per $ invested (30d)
+                  annualized profit per $ invested
                 </p>
               </>
             )}
@@ -121,28 +124,37 @@ export function Analytics() {
         </Card>
       </div>
 
-      {/* Section 2: Inventory Value Trends */}
+      {/* Section 2: Inventory Value Over Time */}
+      <InventoryValueTrend />
+
+      {/* Section 3: Inventory Flow — Receiving vs Selling */}
+      <InventoryFlow />
+
+      {/* Section 4: Daily Sales Activity & Stockouts */}
       <InventoryTrends />
 
-      {/* Section 3: ABC Portfolio Analysis */}
+      {/* Section 5: ABC Portfolio Analysis */}
       <PortfolioAnalysis />
 
-      {/* Section 4: Capital Efficiency */}
+      {/* Section 6: Capital Efficiency */}
       <CapitalEfficiency />
 
-      {/* Section 5: Demand & Stock Health */}
+      {/* Section 7: Demand & Stock Health */}
       <StockHealth />
 
-      {/* Section 6: Aging & Sell-Through */}
+      {/* Section 8: Aging & Sell-Through */}
       <AgingSellThrough />
 
-      {/* Section 7: Reorder Risk */}
+      {/* Section 9: Reorder Risk */}
       <StockoutRisk />
 
-      {/* Section 8: Discount Impact */}
+      {/* Section 10: Seasonal Patterns */}
+      <SeasonalPatterns />
+
+      {/* Section 11: Discount Impact */}
       <DiscountImpact />
 
-      {/* Section 9: YoY Growth Momentum */}
+      {/* Section 12: YoY Growth Momentum */}
       <GrowthMomentum />
     </motion.div>
   );

inventory/src/pages/PurchaseOrders.tsx

@@ -5,6 +5,7 @@ import CategoryMetricsCard from "../components/purchase-orders/CategoryMetricsCa
 import PaginationControls from "../components/purchase-orders/PaginationControls";
 import PurchaseOrdersTable from "../components/purchase-orders/PurchaseOrdersTable";
 import FilterControls from "../components/purchase-orders/FilterControls";
+import PipelineCard from "../components/purchase-orders/PipelineCard";
 
 interface PurchaseOrder {
   id: number | string;
@@ -450,6 +451,10 @@ export default function PurchaseOrders() {
         />
       </div>
 
+      <div className="mb-4">
+        <PipelineCard />
+      </div>
+
       <FilterControls
         searchInput={searchInput}
         setSearchInput={setSearchInput}