@burdenoff/microfe-movethewheels 2026.822.1 → 2026.828.1

package/src/movethewheels/pages/DriversPage.tsx

@@ -2,32 +2,92 @@
  * Drivers Page - List of all drivers
  */
 
-import { useState } from 'react';
-import { Users, Plus, RefreshCw, Download, Star, UserCheck, Coffee, UserMinus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  Users,
+  Plus,
+  RefreshCw,
+  Download,
+  Star,
+  UserCheck,
+  Coffee,
+  UserMinus,
+  Filter,
+  Truck,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
-import { Avatar, AvatarFallback } from '../components/ui';
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDrivers, useFleetStats } from '../hooks/useFleet';
+import { useDrivers, useDriverStatusCounts, useFleetStats, useVehicles } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
-import type { Driver } from '../types';
+import type { Driver, DriverStatus } from '../types';
+
+const STATUS_OPTIONS: Array<{ value: DriverStatus | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'available', label: 'Available' },
+  { value: 'busy', label: 'On delivery' },
+  { value: 'on_break', label: 'On break' },
+  { value: 'offline', label: 'Off duty' },
+];
 
 export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
+  const [statusFilter, setStatusFilter] = useState<DriverStatus | 'all'>('all');
+  const [licenseClassFilter, setLicenseClassFilter] = useState<string>('all');
   const { drivers, isLoading, error, refetch } = useDrivers({
     limit: pageSize,
     offset: page * pageSize,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
   // Workforce totals + tiles from the live aggregate, not the current page.
   const { stats } = useFleetStats();
+  // Exact ON_BREAK / OFF_DUTY / INACTIVE counts — fleetStats cannot split these.
+  const { counts } = useDriverStatusCounts();
+  // Drivers carry only `vehicleId`; the roster shows the fleet number, so the
+  // vehicle list is joined client-side into an id -> number lookup.
+  const { vehicles } = useVehicles({ limit: 500 });
+  const vehicleNumberById = useMemo(
+    () => new Map(vehicles.map((vehicle) => [vehicle.id, vehicle.vehicleNumber])),
+    [vehicles]
+  );
   const totalDrivers = stats.totalDrivers;
 
+  // `DriverFilterInput` has no licenseClass, so this narrowing is applied to the
+  // fetched page only — never presented as a workspace-wide count.
+  const licenseClasses = useMemo(
+    () =>
+      Array.from(new Set(drivers.map((driver) => driver.licenseType).filter(Boolean))).sort(
+        (a, b) => a.localeCompare(b)
+      ),
+    [drivers]
+  );
+  const visibleDrivers = useMemo(
+    () =>
+      licenseClassFilter === 'all'
+        ? drivers
+        : drivers.filter((driver) => driver.licenseType === licenseClassFilter),
+    [drivers, licenseClassFilter]
+  );
+  const filtersActive = statusFilter !== 'all' || licenseClassFilter !== 'all';
+
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   const columns: Column<Driver>[] = [
@@ -58,24 +118,6 @@ export default function DriversPage() {
       sortable: true,
       cell: (row) => <StatusBadge status={row.status} type="driver" />,
     },
-    {
-      id: 'rating',
-      header: 'Rating',
-      cell: (row) => (
-        <div className="flex items-center gap-1">
-          <Star size={14} className="text-status-warning-text fill-current" />
-          <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
-          <span className="text-text-secondary text-sm">({row.ratings.totalRatings})</span>
-        </div>
-      ),
-    },
-    {
-      id: 'deliveries',
-      header: 'Deliveries',
-      accessorKey: 'completedOrders',
-      sortable: true,
-      cell: (row) => <span className="font-medium">{row.completedOrders.toLocaleString()}</span>,
-    },
     {
       id: 'license',
       header: 'License',
@@ -86,6 +128,52 @@ export default function DriversPage() {
         </div>
       ),
     },
+    {
+      id: 'phone',
+      header: 'Phone',
+      accessorKey: 'phone',
+      cell: (row) =>
+        row.phone ? (
+          <a
+            href={`tel:${row.phone}`}
+            className="text-sm hover:underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {row.phone}
+          </a>
+        ) : (
+          <span className="text-sm text-text-secondary">—</span>
+        ),
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      cell: (row) =>
+        row.ratings.overall > 0 ? (
+          <div className="flex items-center gap-1">
+            <Star size={14} className="text-status-warning-text fill-current" />
+            <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
+          </div>
+        ) : (
+          <span className="text-sm text-text-secondary">Not rated</span>
+        ),
+    },
+    {
+      id: 'vehicle',
+      header: 'Assigned vehicle',
+      cell: (row) => {
+        if (!row.assignedVehicle) {
+          return <span className="text-sm text-text-secondary">Unassigned</span>;
+        }
+        const vehicleNumber = vehicleNumberById.get(row.assignedVehicle);
+        return (
+          <span className="inline-flex items-center gap-1.5 text-sm font-medium">
+            <Truck size={14} className="text-text-secondary" />
+            {vehicleNumber ?? 'Assigned'}
+          </span>
+        );
+      },
+    },
     {
       id: 'joined',
       header: 'Join Date',
@@ -119,8 +207,8 @@ export default function DriversPage() {
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Your delivery workforce. Track each driver&apos;s availability, performance rating,
-        completed deliveries and license status here — open a driver to review their history before
+        Your delivery workforce. Track each driver&apos;s availability, rating, licence status,
+        contact number and the vehicle they are on — open a driver to review their record before
         assigning them to an order or route.
       </PagePurpose>
 
@@ -137,15 +225,17 @@ export default function DriversPage() {
           />
           <MetricCard
             label="On break"
-            value={stats.driversByStatus.on_break}
+            value={counts.onBreak}
             icon={<Coffee size={20} />}
             accent="warning"
+            subtitle="Back on shift shortly"
           />
           <MetricCard
             label="Off duty"
-            value={stats.driversByStatus.offline}
+            value={counts.offDuty}
             icon={<UserMinus size={20} />}
             accent="neutral"
+            subtitle={counts.inactive > 0 ? `${counts.inactive} inactive` : undefined}
           />
           <MetricCard
             label="Avg rating"
@@ -157,9 +247,65 @@ export default function DriversPage() {
         </MetricGrid>
       </div>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value as DriverStatus | 'all');
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={licenseClassFilter} onValueChange={setLicenseClassFilter}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="License class" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All licence classes</SelectItem>
+                {licenseClasses.map((licenseClass) => (
+                  <SelectItem key={licenseClass} value={licenseClass}>
+                    {licenseClass}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setLicenseClassFilter('all');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
-        data={drivers}
+        data={visibleDrivers}
         isLoading={isLoading}
         error={error}
         onRetry={refetch}
@@ -175,10 +321,14 @@ export default function DriversPage() {
           setPageSize(size);
           setPage(0);
         }}
-        totalItems={totalDrivers}
+        totalItems={filtersActive ? undefined : totalDrivers}
         emptyIllustration="empty-people"
-        emptyTitle="No drivers yet"
-        emptyDescription="Add drivers to start assigning deliveries and routes."
+        emptyTitle={filtersActive ? 'No drivers match these filters' : 'No drivers yet'}
+        emptyDescription={
+          filtersActive
+            ? 'Clear the status or licence-class filter to see the rest of the roster.'
+            : 'Add drivers to start assigning deliveries and routes.'
+        }
       />
     </PageLayout>
   );

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')}