@burdenoff/microfe-movethewheels 2026.624.1 → 2026.625.1

package/src/movethewheels/components/PageLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { AuroraBackground, GradientText, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
 
 interface PageLayoutProps {
@@ -21,6 +22,16 @@ interface PageLayoutProps {
   className?: string;
   /** Additional CSS classes for the content area */
   contentClassName?: string;
+  /**
+   * Boff UI 2.0 — render a subtle living aurora backdrop behind the page header.
+   * Reserved for the MFE's single primary page (the Dashboard). One per MFE.
+   */
+  hero?: boolean;
+  /**
+   * Boff UI 2.0 — the slice of the title to emphasise with a brand gradient.
+   * When provided, the title renders as `…<GradientText>{titleAccent}</GradientText>`.
+   */
+  titleAccent?: string;
 }
 
 const maxWidthClasses = {
@@ -53,7 +64,24 @@ export function PageLayout({
   showHeader = true,
   className,
   contentClassName,
+  hero = false,
+  titleAccent,
 }: PageLayoutProps) {
+  // Render the title, optionally clipping a gradient into the accent slice.
+  const renderTitle = (value: string) => {
+    if (!titleAccent || !value.includes(titleAccent)) {
+      return value;
+    }
+    const [before, after] = value.split(titleAccent);
+    return (
+      <>
+        {before}
+        <GradientText>{titleAccent}</GradientText>
+        {after}
+      </>
+    );
+  };
+
   return (
     <div
       className={cn(
@@ -72,20 +100,27 @@ export function PageLayout({
       <div className={cn('mx-auto w-full', maxWidthClasses[maxWidth], contentClassName)}>
         {/* Page Header */}
         {showHeader && (title || headerActions) && (
-          <header className="mb-6 sm:mb-8">
+          <header
+            className={cn(
+              'mb-6 sm:mb-8',
+              hero &&
+                'relative overflow-hidden rounded-card border border-border-seam bg-hero-mesh px-5 py-6 sm:px-7 sm:py-8'
+            )}
+          >
+            {hero && <AuroraBackground intensity="subtle" />}
             <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               {/* Title Section */}
               <div className="space-y-1">
                 {(title || icon) && (
                   <div className="flex items-center gap-3">
                     {icon && (
-                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-action-primary-bg/10 text-primary">
+                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-action-primary-bg/10 text-action-primary-bg">
                         {icon}
                       </div>
                     )}
                     {title && (
                       <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-text-primary">
-                        {title}
+                        {renderTitle(title)}
                       </h1>
                     )}
                   </div>
@@ -148,7 +183,13 @@ export function PageSection({
 }
 
 /**
- * EmptyState - A consistent empty state component
+ * EmptyState - A consistent empty/zero state component.
+ *
+ * Boff UI 2.0: when an `illustration` name is provided (one of the standard
+ * host-served names — empty-data, empty-search, empty-files, empty-people,
+ * empty-notifications, onboarding, empty-generic), it renders the on-brand
+ * IllustratedEmptyState. Otherwise it falls back to the legacy icon layout so
+ * existing callers keep working unchanged.
  */
 export function EmptyState({
   icon,
@@ -156,13 +197,27 @@ export function EmptyState({
   description,
   action,
   className,
+  illustration = 'empty-data',
 }: {
   icon?: ReactNode;
   title: string;
   description?: string;
   action?: ReactNode;
   className?: string;
+  /** Standard illustration name served by the host at /illustrations/<name>.webp. */
+  illustration?: string;
 }) {
+  if (!icon) {
+    return (
+      <IllustratedEmptyState
+        illustration={illustration}
+        title={title}
+        description={description}
+        action={action}
+        className={cn('animate-in fade-in-0 zoom-in-95 duration-300', className)}
+      />
+    );
+  }
   return (
     <div
       className={cn(
@@ -173,7 +228,7 @@ export function EmptyState({
         className
       )}
     >
-      {icon && <div className="mb-4 p-4 rounded-2xl bg-bg-sunken/50 text-text-secondary">{icon}</div>}
+      <div className="mb-4 p-4 rounded-2xl bg-bg-sunken/50 text-text-secondary">{icon}</div>
       <h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>
       {description && <p className="text-sm text-text-secondary max-w-sm mb-4">{description}</p>}
       {action}

package/src/movethewheels/components/StatusBadge.tsx

@@ -78,8 +78,9 @@ export function StatusBadge({
     >
       {showDot && (
         <span
+          aria-hidden="true"
           className={cn(
-            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0',
+            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0 motion-safe:animate-vc-glow-pulse',
             colors.text.replace('text-', 'bg-')
           )}
         />

package/src/movethewheels/pages/CustomersPage.tsx

@@ -6,7 +6,8 @@ import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
-import { Button, Badge, Avatar, AvatarFallback } from '../components/ui';
+import { Badge, Avatar, AvatarFallback } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -87,17 +88,17 @@ export default function CustomersPage() {
       subtitle={`${totalCustomers} customers`}
       icon={<Users size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button variant="outline">
-            <Download size={16} /> Export
-          </Button>
-          <Button onClick={() => goTo('customers/new')}>
-            <Plus size={16} /> Add Customer
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: 'Add Customer',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('customers/new'),
+          }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
       <DataTable

package/src/movethewheels/pages/DashboardPage.tsx

@@ -27,6 +27,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel } from '@burdenoff/fe-libs/ui';
 import { useDashboardMetrics } from '../hooks/useAnalytics';
 import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useFleetStats } from '../hooks/useFleet';
@@ -57,20 +58,26 @@ export default function DashboardPage() {
 
   return (
     <PageLayout
+      hero
+      titleAccent={t('movethewheels.dashboard.title', 'Dashboard')}
       title={t('movethewheels.dashboard.title', 'Dashboard')}
       subtitle={t('movethewheels.dashboard.subtitle', 'Overview of your logistics operations')}
       icon={<TrendingUp size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => goTo('tracking/live')}>
-            <MapPin size={16} />
-            {t('movethewheels.dashboard.actions.liveMap', 'Live Map')}
-          </Button>
-          <Button onClick={() => goTo('orders/new')}>
-            <Package size={16} />
-            {t('movethewheels.dashboard.actions.newOrder', 'New Order')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.dashboard.actions.newOrder', 'New Order'),
+            icon: <Package size={16} />,
+            onSelect: () => goTo('orders/new'),
+          }}
+          actions={[
+            {
+              label: t('movethewheels.dashboard.actions.liveMap', 'Live Map'),
+              icon: <MapPin size={16} />,
+              onSelect: () => goTo('tracking/live'),
+            },
+          ]}
+        />
       }
     >
       {/* Key Metrics */}
@@ -99,6 +106,8 @@ export default function DashboardPage() {
           onClick={() => goTo('fleet')}
         />
         <MetricCard
+          treatment="glass"
+          glow
           label={t('movethewheels.dashboard.metrics.revenue', 'Revenue')}
           value={formatCurrency(metrics.revenue.total)}
           icon={<DollarSign size={20} />}
@@ -234,45 +243,43 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Order Status Summary */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">
-              {t('movethewheels.dashboard.orderStatus.title', 'Order Status')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-3">
-              {[
-                { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
-                {
-                  status: 'in_transit',
-                  count: orderStats.byStatus.in_transit,
-                  color: 'bg-blue-500',
-                },
-                {
-                  status: 'delivered',
-                  count: orderStats.byStatus.delivered,
-                  color: 'bg-green-500',
-                },
-                { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
-              ].map(({ status, count, color }) => (
-                <div key={status} className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className={`w-2 h-2 rounded-full ${color}`} />
-                    <span className="text-sm capitalize">
-                      {t(
-                        `movethewheels.dashboard.orderStatus.status.${status}`,
-                        status.replace('_', ' ')
-                      )}
-                    </span>
-                  </div>
-                  <Badge variant="secondary">{count}</Badge>
+        {/* Order Status Summary — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">
+            {t('movethewheels.dashboard.orderStatus.title', 'Order Status')}
+          </h2>
+          <div className="space-y-3">
+            {[
+              { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
+              {
+                status: 'in_transit',
+                count: orderStats.byStatus.in_transit,
+                color: 'bg-blue-500',
+              },
+              {
+                status: 'delivered',
+                count: orderStats.byStatus.delivered,
+                color: 'bg-green-500',
+              },
+              { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
+            ].map(({ status, count, color }) => (
+              <div key={status} className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${color}`} />
+                  <span className="text-sm capitalize">
+                    {t(
+                      `movethewheels.dashboard.orderStatus.status.${status}`,
+                      status.replace('_', ' ')
+                    )}
+                  </span>
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+                <Badge variant="secondary" className="tabular-nums">
+                  {count}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </EmphasisPanel>
 
         {/* Fleet Status */}
         <Card>

package/src/movethewheels/pages/DriversPage.tsx

@@ -6,7 +6,8 @@ import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
-import { Button, Avatar, AvatarFallback } from '../components/ui';
+import { Avatar, AvatarFallback } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -90,17 +91,13 @@ export default function DriversPage() {
       subtitle={`${totalDrivers} drivers`}
       icon={<Users size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button variant="outline">
-            <Download size={16} /> Export
-          </Button>
-          <Button>
-            <Plus size={16} /> Add Driver
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Driver', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
       <DataTable

package/src/movethewheels/pages/FleetPage.tsx

@@ -18,6 +18,7 @@ import {
   Avatar,
   AvatarFallback,
 } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useFleetStats, useVehicles, useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -46,16 +47,20 @@ export default function FleetPage() {
       subtitle={t('movethewheels.fleet.subtitle', 'Manage your vehicles and drivers')}
       icon={<Truck size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => goTo('fleet/vehicles')}>
-            <Truck size={16} />
-            {t('movethewheels.fleet.actions.allVehicles', 'All Vehicles')}
-          </Button>
-          <Button variant="outline" onClick={() => goTo('fleet/drivers')}>
-            <Users size={16} />
-            {t('movethewheels.fleet.actions.allDrivers', 'All Drivers')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.fleet.actions.allVehicles', 'All Vehicles'),
+            icon: <Truck size={16} />,
+            onSelect: () => goTo('fleet/vehicles'),
+          }}
+          actions={[
+            {
+              label: t('movethewheels.fleet.actions.allDrivers', 'All Drivers'),
+              icon: <Users size={16} />,
+              onSelect: () => goTo('fleet/drivers'),
+            },
+          ]}
+        />
       }
     >
       {/* Key Metrics */}

package/src/movethewheels/pages/InventoryPage.tsx

@@ -14,6 +14,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useInventory, useInventoryStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -39,17 +40,23 @@ export default function InventoryPage() {
       subtitle={t('movethewheels.inventory.subtitle', 'Manage your products and warehouses')}
       icon={<Package size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => goTo('inventory/products')}>
-            {t('movethewheels.inventory.actions.products', 'Products')}
-          </Button>
-          <Button variant="outline" onClick={() => goTo('inventory/warehouses')}>
-            {t('movethewheels.inventory.actions.warehouses', 'Warehouses')}
-          </Button>
-          <Button>
-            <Plus size={16} /> {t('movethewheels.inventory.actions.addProduct', 'Add Product')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.inventory.actions.addProduct', 'Add Product'),
+            icon: <Plus size={16} />,
+            onSelect: () => {},
+          }}
+          actions={[
+            {
+              label: t('movethewheels.inventory.actions.products', 'Products'),
+              onSelect: () => goTo('inventory/products'),
+            },
+            {
+              label: t('movethewheels.inventory.actions.warehouses', 'Warehouses'),
+              onSelect: () => goTo('inventory/warehouses'),
+            },
+          ]}
+        />
       }
     >
       <MetricGrid columns={4}>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -9,6 +9,7 @@ import { Package, Plus, Filter, Download, RefreshCw } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import {
   Button,
   Card,
@@ -152,20 +153,25 @@ export default function OrdersListPage() {
       subtitle={`${totalOrders} ${t('movethewheels.orders.subtitle', 'total orders')}`}
       icon={<Package size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} />
-            {t('movethewheels.orders.actions.refresh', 'Refresh')}
-          </Button>
-          <Button variant="outline">
-            <Download size={16} />
-            {t('movethewheels.orders.actions.export', 'Export')}
-          </Button>
-          <Button onClick={() => goTo('orders/new')}>
-            <Plus size={16} />
-            {t('movethewheels.orders.actions.newOrder', 'New Order')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.orders.actions.newOrder', 'New Order'),
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('orders/new'),
+          }}
+          actions={[
+            {
+              label: t('movethewheels.orders.actions.refresh', 'Refresh'),
+              icon: <RefreshCw size={16} />,
+              onSelect: () => refetch(),
+            },
+            {
+              label: t('movethewheels.orders.actions.export', 'Export'),
+              icon: <Download size={16} />,
+              onSelect: () => {},
+            },
+          ]}
+        />
       }
     >
       {/* Filters */}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -5,7 +5,8 @@
 import { Package, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
-import { Button, Badge } from '../components/ui';
+import { Badge } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useProducts } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -96,17 +97,13 @@ export default function ProductsPage() {
       subtitle={`${totalProducts} products`}
       icon={<Package size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button variant="outline">
-            <Download size={16} /> Export
-          </Button>
-          <Button>
-            <Plus size={16} /> Add Product
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Product', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
       <DataTable

package/src/movethewheels/pages/RoutesPage.tsx

@@ -6,7 +6,8 @@ import { Plus, RefreshCw, Navigation } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
-import { Button, Badge } from '../components/ui';
+import { Badge } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useRoutes } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -79,14 +80,16 @@ export default function RoutesPage() {
       subtitle={`${totalRoutes} routes`}
       icon={<Navigation size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button onClick={() => goTo('routes/new')}>
-            <Plus size={16} /> Create Route
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: 'Create Route',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('routes/new'),
+          }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+          ]}
+        />
       }
     >
       <DataTable

package/src/movethewheels/pages/TrackingPage.tsx

@@ -106,7 +106,7 @@ export default function TrackingPage() {
       {/* No Search Yet */}
       {!searchedOrderId && !error && (
         <EmptyState
-          icon={<Package size={48} />}
+          illustration="onboarding"
           title={t('movethewheels.tracking.empty.title', 'Enter a tracking number')}
           description={t(
             'movethewheels.tracking.empty.description',
@@ -404,7 +404,7 @@ export default function TrackingPage() {
       {/* No Results */}
       {searchedOrderId && !order && !isLoading && !error && (
         <EmptyState
-          icon={<Search size={48} />}
+          illustration="empty-search"
           title={t('movethewheels.tracking.notFound.title', 'Shipment not found')}
           description={`${t('movethewheels.tracking.notFound.descriptionPrefix', 'No shipment found with tracking number')} "${searchedOrderId}"`}
           action={

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -6,7 +6,8 @@ import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
-import { Button, Progress } from '../components/ui';
+import { Progress } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useVehicles } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -93,20 +94,13 @@ export default function VehiclesPage() {
       subtitle={`${totalVehicles} vehicles in fleet`}
       icon={<Truck size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} />
-            Refresh
-          </Button>
-          <Button variant="outline">
-            <Download size={16} />
-            Export
-          </Button>
-          <Button>
-            <Plus size={16} />
-            Add Vehicle
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Vehicle', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
       <DataTable

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -5,7 +5,8 @@
 import { Warehouse, Plus, RefreshCw } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
-import { Button, Badge, Progress } from '../components/ui';
+import { Badge, Progress } from '../components/ui';
+import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
 import { useWarehouses } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -97,14 +98,12 @@ export default function WarehousesPage() {
       subtitle={`${totalWarehouses} warehouses`}
       icon={<Warehouse size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button>
-            <Plus size={16} /> Add Warehouse
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Warehouse', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+          ]}
+        />
       }
     >
       <DataTable