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

2026-02-09 12:32:13 -05:00
parent 38b12c188f
commit 6834a77a80
10 changed files with 1004 additions and 22 deletions
@@ -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>
-          <CardTitle>GMROI by Vendor</CardTitle>
-          <p className="text-xs text-muted-foreground">
-            Gross margin return on inventory investment (top vendors by stock value)
-          </p>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>GMROI by Vendor</CardTitle>
+              <p className="text-xs text-muted-foreground">
+                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)} />
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
  );
@@ -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}