@burdenoff/microfe-movethewheels 2026.822.1 → 2026.827.1

package/src/movethewheels/pages/InventoryPage.tsx

@@ -2,6 +2,7 @@
  * Inventory Page - Overview of inventory management
  */
 
+import { useMemo } from 'react';
 import {
   Package,
   Warehouse,
@@ -9,18 +10,79 @@ import {
   ChevronRight,
   Plus,
   Boxes,
-  DollarSign,
+  CircleCheck,
+  Lock,
+  History,
+  ArrowDownRight,
+  ArrowUpRight,
+  ArrowLeftRight,
 } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
 import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
-import { Card, CardContent, Button, Badge, Progress } from '../components/ui';
+import { DataTable, type Column } from '../components/DataTable';
+import { StatusBadge } from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useInventory, useInventoryStats } from '../hooks/useInventory';
+import {
+  useInventory,
+  useInventoryStats,
+  useInventoryTransactions,
+  type InventoryTransactionType,
+} from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
-import { formatCurrency } from '../utils/formatters';
+import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 
+/** One stock line joined to its catalog item and warehouse, for the position table. */
+interface StockRow {
+  id: string;
+  productId: string;
+  productName: string;
+  sku: string;
+  warehouseName: string;
+  onHand: number;
+  allocated: number;
+  available: number;
+  reorderLevel: number;
+  stockState: 'out_of_stock' | 'low' | 'in_stock';
+}
+
+const STOCK_STATE_COLORS = {
+  out_of_stock: { bg: 'bg-status-error-bg-subtle', text: 'text-status-error-text' },
+  low: { bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' },
+  in_stock: { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' },
+} as const;
+
+/**
+ * Movement direction per `InventoryTransactionType`. RECEIPT/RETURN add stock,
+ * ISSUE removes it, TRANSFER and ADJUSTMENT are direction-neutral in the ledger
+ * (the signed quantity on the row carries the direction).
+ */
+const TRANSACTION_DIRECTION: Record<InventoryTransactionType, 'in' | 'out' | 'neutral'> = {
+  RECEIPT: 'in',
+  RETURN: 'in',
+  ISSUE: 'out',
+  TRANSFER: 'neutral',
+  ADJUSTMENT: 'neutral',
+};
+
+const TRANSACTION_LABELS: Record<InventoryTransactionType, string> = {
+  RECEIPT: 'Inbound',
+  RETURN: 'Return',
+  ISSUE: 'Outbound',
+  TRANSFER: 'Transfer',
+  ADJUSTMENT: 'Adjustment',
+};
+
 export default function InventoryPage() {
   const { t: translate } = useI18n();
   const t = (key: string, fallback: string): string => {
@@ -30,6 +92,11 @@ export default function InventoryPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { inventory, products, warehouses, isLoading, error, refetch } = useInventory();
   const { stats } = useInventoryStats();
+  const {
+    transactions,
+    isLoading: transactionsLoading,
+    error: transactionsError,
+  } = useInventoryTransactions({ limit: 8 });
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
   const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
@@ -40,6 +107,104 @@ export default function InventoryPage() {
   };
   const lowStockItems = inventory.filter((inv) => inv.availableQuantity <= inv.reorderLevel);
 
+  const unknownProductLabel = t(
+    'movethewheels.inventory.lowStock.unknownProduct',
+    'Unknown Product'
+  );
+
+  const stockRows = useMemo<StockRow[]>(() => {
+    const productById = new Map(products.map((product) => [product.id, product]));
+    const warehouseById = new Map(warehouses.map((warehouse) => [warehouse.id, warehouse]));
+    return inventory.map((item) => {
+      const product = productById.get(item.productId);
+      return {
+        id: item.id,
+        productId: item.productId,
+        productName: product?.name ?? unknownProductLabel,
+        sku: product?.sku ?? '—',
+        warehouseName: warehouseById.get(item.warehouseId)?.name ?? '—',
+        onHand: item.quantity,
+        allocated: item.reservedQuantity,
+        available: item.availableQuantity,
+        reorderLevel: item.reorderLevel,
+        stockState:
+          item.quantity === 0
+            ? 'out_of_stock'
+            : item.availableQuantity <= item.reorderLevel
+              ? 'low'
+              : 'in_stock',
+      };
+    });
+  }, [inventory, products, warehouses, unknownProductLabel]);
+
+  const stockColumns: Column<StockRow>[] = [
+    {
+      id: 'product',
+      header: t('movethewheels.inventory.stock.product', 'Product'),
+      accessorKey: 'productName',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.productName}</span>,
+    },
+    {
+      id: 'sku',
+      header: t('movethewheels.inventory.stock.sku', 'SKU'),
+      accessorKey: 'sku',
+      sortable: true,
+      cell: (row) => <span className="text-sm text-text-secondary">{row.sku}</span>,
+    },
+    {
+      id: 'warehouse',
+      header: t('movethewheels.inventory.stock.warehouse', 'Warehouse'),
+      accessorKey: 'warehouseName',
+      sortable: true,
+    },
+    {
+      id: 'onHand',
+      header: t('movethewheels.inventory.stock.onHand', 'On hand'),
+      accessorKey: 'onHand',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.onHand.toLocaleString()}</span>,
+    },
+    {
+      id: 'allocated',
+      header: t('movethewheels.inventory.stock.allocated', 'Allocated'),
+      accessorKey: 'allocated',
+      sortable: true,
+      cell: (row) => row.allocated.toLocaleString(),
+    },
+    {
+      id: 'available',
+      header: t('movethewheels.inventory.stock.available', 'Available'),
+      accessorKey: 'available',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.available.toLocaleString()}</span>,
+    },
+    {
+      id: 'reorderPoint',
+      header: t('movethewheels.inventory.stock.reorderPoint', 'Reorder point'),
+      accessorKey: 'reorderLevel',
+      sortable: true,
+      cell: (row) => (row.reorderLevel > 0 ? row.reorderLevel.toLocaleString() : '—'),
+    },
+    {
+      id: 'state',
+      header: t('movethewheels.inventory.stock.status', 'Status'),
+      cell: (row) => (
+        <StatusBadge
+          status={
+            row.stockState === 'out_of_stock'
+              ? t('movethewheels.inventory.stock.outOfStock', 'Out of stock')
+              : row.stockState === 'low'
+                ? t('movethewheels.inventory.stock.low', 'Low')
+                : t('movethewheels.inventory.stock.inStock', 'In stock')
+          }
+          customColors={STOCK_STATE_COLORS[row.stockState]}
+          size="sm"
+        />
+      ),
+    },
+  ];
+
   return (
     <PageLayout
       title={t('movethewheels.inventory.title', 'Inventory')}
@@ -68,7 +233,7 @@ export default function InventoryPage() {
       <PagePurpose icon={<Package size={18} />}>
         {t(
           'movethewheels.inventory.purpose',
-          'A real-time view of what you have and where. Track stock value and quantities across warehouses, catch low-stock items before they run out, and drill into products or warehouses to manage what you can promise on an order.'
+          'A real-time view of what you have and where. Track on-hand, allocated and free-to-promise quantities across warehouses, follow every stock movement, catch low-stock items before they run out, and drill into products or warehouses to manage what you can promise on an order.'
         )}
       </PagePurpose>
 
@@ -85,35 +250,54 @@ export default function InventoryPage() {
           </CardContent>
         </Card>
       ) : isLoading ? (
-        <MetricGrid columns={4}>
-          {Array.from({ length: 4 }).map((_, i) => (
+        <MetricGrid columns={6}>
+          {Array.from({ length: 6 }).map((_, i) => (
             <MetricCardSkeleton key={i} />
           ))}
         </MetricGrid>
       ) : (
-        <MetricGrid columns={4}>
+        <MetricGrid columns={6}>
           <MetricCard
-            label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
-            value={stats.totalProducts}
-            icon={<Package size={20} />}
+            label={t('movethewheels.inventory.metrics.totalOnHand', 'Total on-hand')}
+            value={stats.totalOnHand.toLocaleString()}
+            icon={<Boxes size={20} />}
             accent="brand"
-            onClick={() => goTo('inventory/products')}
+            subtitle={t('movethewheels.inventory.metrics.onHandHint', 'Units in the network')}
           />
           <MetricCard
-            label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
-            value={stats.totalItems.toLocaleString()}
-            icon={<Boxes size={20} />}
+            label={t('movethewheels.inventory.metrics.available', 'Available')}
+            value={stats.totalAvailable.toLocaleString()}
+            icon={<CircleCheck size={20} />}
             accent="success"
+            subtitle={t('movethewheels.inventory.metrics.availableHint', 'Free to promise')}
           />
           <MetricCard
-            label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
-            value={formatCurrency(stats.totalValue)}
-            icon={<DollarSign size={20} />}
+            label={t('movethewheels.inventory.metrics.allocated', 'Allocated')}
+            value={stats.totalAllocated.toLocaleString()}
+            icon={<Lock size={20} />}
             accent="blue"
+            subtitle={t('movethewheels.inventory.metrics.allocatedHint', 'Committed to orders')}
+          />
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.lowStock', 'Low-stock items')}
+            value={stats.lowStockCount.toLocaleString()}
+            icon={<AlertTriangle size={20} />}
+            accent="warning"
+            subtitle={t(
+              'movethewheels.inventory.metrics.lowStockHint',
+              'At or under reorder point'
+            )}
+          />
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.totalProducts', 'Catalog items')}
+            value={stats.totalProducts.toLocaleString()}
+            icon={<Package size={20} />}
+            accent="neutral"
+            onClick={() => goTo('inventory/products')}
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
-            value={stats.totalWarehouses}
+            value={stats.totalWarehouses.toLocaleString()}
             icon={<Warehouse size={20} />}
             accent="neutral"
             onClick={() => goTo('inventory/warehouses')}
@@ -164,6 +348,102 @@ export default function InventoryPage() {
         </EmphasisPanel>
       )}
 
+      {/* Stock position + ledger. The table is the per-warehouse stock line;
+          the side panel is the real movement history from Query.inventoryTransactions. */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        <div className="xl:col-span-2">
+          <PageSection title={t('movethewheels.inventory.stock.title', 'Stock position')}>
+            <DataTable
+              columns={stockColumns}
+              data={stockRows}
+              isLoading={isLoading}
+              error={error}
+              onRetry={refetch}
+              searchable
+              searchPlaceholder={t(
+                'movethewheels.inventory.stock.search',
+                'Search product, SKU or warehouse...'
+              )}
+              searchFields={['productName', 'sku', 'warehouseName'] as (keyof StockRow)[]}
+              onRowClick={(row) => goTo(`inventory/products/${row.productId}`)}
+              getRowId={(row) => row.id}
+              emptyIllustration="empty-data"
+              emptyTitle={t('movethewheels.inventory.stock.emptyTitle', 'No stock recorded yet')}
+              emptyDescription={t(
+                'movethewheels.inventory.stock.emptyDescription',
+                'Stock lines appear here once a product is received into a warehouse.'
+              )}
+            />
+          </PageSection>
+        </div>
+
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <History size={18} />
+              {t('movethewheels.inventory.transactions.title', 'Recent transactions')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            {transactionsError ? (
+              <p className="p-6 text-sm text-status-error-text">{transactionsError.message}</p>
+            ) : transactionsLoading ? (
+              <p className="p-6 text-sm text-text-secondary">
+                {t('movethewheels.inventory.transactions.loading', 'Loading movements…')}
+              </p>
+            ) : transactions.length === 0 ? (
+              <p className="p-6 text-sm text-text-secondary">
+                {t(
+                  'movethewheels.inventory.transactions.empty',
+                  'No stock movements recorded yet. Receipts, issues and adjustments show up here as they happen.'
+                )}
+              </p>
+            ) : (
+              <ul className="divide-y">
+                {transactions.map((transaction) => {
+                  const direction = TRANSACTION_DIRECTION[transaction.type];
+                  const productName =
+                    products.find((product) => product.id === transaction.productId)?.name ??
+                    transaction.transactionNumber;
+                  return (
+                    <li key={transaction.id} className="flex items-start justify-between gap-3 p-4">
+                      <div className="min-w-0">
+                        <p className="flex items-center gap-1.5 font-medium">
+                          {direction === 'in' ? (
+                            <ArrowDownRight size={14} className="text-status-success-text" />
+                          ) : direction === 'out' ? (
+                            <ArrowUpRight size={14} className="text-status-warning-text" />
+                          ) : (
+                            <ArrowLeftRight size={14} className="text-text-secondary" />
+                          )}
+                          {TRANSACTION_LABELS[transaction.type]}
+                        </p>
+                        <p className="truncate text-sm text-text-secondary">{productName}</p>
+                        <p className="text-xs text-text-secondary">
+                          {formatDate(transaction.createdAt, 'short')}
+                        </p>
+                      </div>
+                      <span
+                        className={
+                          direction === 'in'
+                            ? 'font-medium text-status-success-text'
+                            : direction === 'out'
+                              ? 'font-medium text-status-warning-text'
+                              : 'font-medium text-text-primary'
+                        }
+                      >
+                        {direction === 'in' ? '+' : direction === 'out' ? '−' : ''}
+                        {Math.abs(transaction.quantity).toLocaleString()}
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <PageSection
           title={t('movethewheels.inventory.warehouses.title', 'Warehouses')}

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router';
-import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save } from 'lucide-react';
+import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save, Warehouse } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
   Card,
@@ -17,7 +17,7 @@ import {
   Label,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProduct, useInventory } from '../hooks/useInventory';
+import { useProduct, useInventory, useProductStockLevels } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -191,6 +191,13 @@ export default function ProductDetailsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { product, isLoading, error, refetch } = useProduct(productId);
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  // Where this item is actually stocked — inventoryItems(filter: { cargoItemId }).
+  const {
+    levels: stockLevels,
+    isLoading: stockLoading,
+    error: stockError,
+  } = useProductStockLevels(isEditRoute ? undefined : productId);
+  const totalAvailable = stockLevels.reduce((sum, level) => sum + level.available, 0);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
@@ -248,7 +255,7 @@ export default function ProductDetailsPage() {
             label: 'Edit product details',
             description: 'Update dimensions, value or handling flags.',
             icon: <Tag size={16} />,
-            onClick: () => {},
+            onClick: () => goTo(`inventory/products/${productId}/edit`),
           },
         ]}
       />
@@ -335,6 +342,64 @@ export default function ProductDetailsPage() {
             <p className="text-sm text-text-secondary">Unit price</p>
           </EmphasisPanel>
 
+          {/* Stock levels — one row per warehouse holding this item. */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Warehouse size={18} /> Stock Levels
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {stockError ? (
+                <p className="text-sm text-status-error-text">{stockError.message}</p>
+              ) : stockLoading ? (
+                <p className="text-sm text-text-secondary">Loading stock levels…</p>
+              ) : stockLevels.length === 0 ? (
+                <div className="space-y-3">
+                  <p className="text-sm text-text-secondary">
+                    This item isn&apos;t stocked in any warehouse yet, so nothing can be promised on
+                    an order.
+                  </p>
+                  <Button variant="outline" size="sm" onClick={() => goTo('inventory/warehouses')}>
+                    View warehouses
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  {stockLevels.map((level) => (
+                    <div
+                      key={level.inventoryItemId}
+                      className="flex items-baseline justify-between gap-3"
+                    >
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium">{level.warehouseName}</p>
+                        <p className="text-xs text-text-secondary">
+                          {level.allocated.toLocaleString()} allocated
+                          {level.reorderPoint !== undefined
+                            ? ` · reorder at ${level.reorderPoint.toLocaleString()}`
+                            : ''}
+                        </p>
+                      </div>
+                      <span
+                        className={
+                          level.reorderPoint !== undefined && level.available <= level.reorderPoint
+                            ? 'font-semibold text-status-warning-text'
+                            : 'font-semibold'
+                        }
+                      >
+                        {level.available.toLocaleString()}
+                      </span>
+                    </div>
+                  ))}
+                  <div className="flex items-baseline justify-between gap-3 border-t border-border-seam pt-3">
+                    <p className="text-sm text-text-secondary">Available across the network</p>
+                    <span className="font-bold">{totalAvailable.toLocaleString()}</span>
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+
           <Card>
             <CardHeader>
               <CardTitle>Identifiers</CardTitle>