@burdenoff/microfe-movethewheels 2026.614.1 → 2026.625.1

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';
@@ -35,7 +36,7 @@ export default function DriversPage() {
           </Avatar>
           <div>
             <p className="font-medium">{row.fullName}</p>
-            <p className="text-sm text-muted-foreground">{row.employeeId}</p>
+            <p className="text-sm text-text-secondary">{row.employeeId}</p>
           </div>
         </div>
       ),
@@ -54,7 +55,7 @@ export default function DriversPage() {
         <div className="flex items-center gap-1">
           <Star size={14} className="text-yellow-500 fill-yellow-500" />
           <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
-          <span className="text-muted-foreground text-sm">({row.ratings.totalRatings})</span>
+          <span className="text-text-secondary text-sm">({row.ratings.totalRatings})</span>
         </div>
       ),
     },
@@ -71,7 +72,7 @@ export default function DriversPage() {
       cell: (row) => (
         <div className="text-sm">
           <p>{row.licenseType}</p>
-          <p className="text-muted-foreground">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
+          <p className="text-text-secondary">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
         </div>
       ),
     },
@@ -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/FinancePage.tsx

@@ -71,7 +71,7 @@ export default function FinancePage() {
               {analytics.trends.revenue.map((r) => (
                 <div
                   key={r.month}
-                  className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                  className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg"
                 >
                   <span className="font-medium">{r.month} 2024</span>
                   <span className="text-lg font-bold">{formatCurrency(r.revenue)}</span>
@@ -94,7 +94,7 @@ export default function FinancePage() {
                   </div>
                   <div>
                     <p className="font-medium">Paid</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {stats.byStatus.delivered} orders
                     </p>
                   </div>
@@ -110,7 +110,7 @@ export default function FinancePage() {
                   </div>
                   <div>
                     <p className="font-medium">Pending</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {stats.byStatus.pending + stats.byStatus.in_transit} orders
                     </p>
                   </div>
@@ -129,7 +129,7 @@ export default function FinancePage() {
           <CardTitle>Recent Transactions</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="text-center py-8 text-muted-foreground">
+          <div className="text-center py-8 text-text-secondary">
             <FileText size={48} className="mx-auto mb-4 opacity-50" />
             <p>Transaction history would be displayed here</p>
             <p className="text-sm">Integration with payment gateway required</p>

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 */}
@@ -105,12 +110,12 @@ export default function FleetPage() {
                 {vehicles.slice(0, 5).map((vehicle) => (
                   <div
                     key={vehicle.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
                     onClick={() => goTo(`fleet/vehicles/${vehicle.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
                           <Truck size={20} className="text-primary" />
                         </div>
                         <div>
@@ -118,7 +123,7 @@ export default function FleetPage() {
                             <span className="font-medium">{vehicle.vehicleNumber}</span>
                             <VehicleTypeBadge type={vehicle.type} size="sm" />
                           </div>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {vehicle.make} {vehicle.model} ({vehicle.year})
                           </p>
                         </div>
@@ -127,9 +132,9 @@ export default function FleetPage() {
                         <StatusBadge status={vehicle.status} type="vehicle" size="sm" />
                         {vehicle.fuelLevel !== undefined && (
                           <div className="mt-2 flex items-center gap-2">
-                            <Fuel size={12} className="text-muted-foreground" />
+                            <Fuel size={12} className="text-text-secondary" />
                             <Progress value={vehicle.fuelLevel} className="w-16 h-2" />
-                            <span className="text-xs text-muted-foreground">
+                            <span className="text-xs text-text-secondary">
                               {vehicle.fuelLevel}%
                             </span>
                           </div>
@@ -158,7 +163,7 @@ export default function FleetPage() {
                 {drivers.slice(0, 5).map((driver) => (
                   <div
                     key={driver.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
                     onClick={() => goTo(`fleet/drivers/${driver.id}`)}
                   >
                     <div className="flex items-center justify-between">
@@ -173,7 +178,7 @@ export default function FleetPage() {
                         </Avatar>
                         <div>
                           <p className="font-medium">{driver.fullName}</p>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {driver.employeeId} - {driver.completedOrders}{' '}
                             {t('movethewheels.fleet.drivers.deliveries', 'deliveries')}
                           </p>
@@ -266,7 +271,7 @@ export default function FleetPage() {
                       <Truck size={20} className="text-yellow-600" />
                       <div>
                         <p className="font-medium">{vehicle.vehicleNumber}</p>
-                        <p className="text-sm text-muted-foreground">
+                        <p className="text-sm text-text-secondary">
                           {vehicle.make} {vehicle.model}
                         </p>
                       </div>

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -83,12 +83,12 @@ export default function ImportExportPage() {
                 className="flex items-center justify-between p-4 border rounded-lg hover:border-primary/50 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
                     <opt.icon size={20} className="text-primary" />
                   </div>
                   <div>
                     <p className="font-medium">{opt.name}</p>
-                    <p className="text-sm text-muted-foreground">{opt.description}</p>
+                    <p className="text-sm text-text-secondary">{opt.description}</p>
                   </div>
                 </div>
                 <div className="text-right">
@@ -116,7 +116,7 @@ export default function ImportExportPage() {
               >
                 <div>
                   <p className="font-medium">{opt.name}</p>
-                  <p className="text-sm text-muted-foreground">{opt.description}</p>
+                  <p className="text-sm text-text-secondary">{opt.description}</p>
                 </div>
                 <div className="flex gap-1">
                   {opt.formats.map((f) => (
@@ -138,7 +138,7 @@ export default function ImportExportPage() {
         <CardContent>
           <div className="space-y-3">
             {recentActivity.map((activity, i) => (
-              <div key={i} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+              <div key={i} className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg">
                 <div className="flex items-center gap-3">
                   {activity.type === 'import' ? (
                     <Upload size={16} className="text-primary" />
@@ -147,7 +147,7 @@ export default function ImportExportPage() {
                   )}
                   <div>
                     <p className="font-medium">{activity.name}</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
                     </p>
                   </div>

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}>
@@ -100,7 +107,7 @@ export default function InventoryPage() {
                         {product?.name ||
                           t('movethewheels.inventory.lowStock.unknownProduct', 'Unknown Product')}
                       </p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         {t('movethewheels.inventory.lowStock.sku', 'SKU:')} {product?.sku}
                       </p>
                     </div>
@@ -109,7 +116,7 @@ export default function InventoryPage() {
                         {item.availableQuantity}{' '}
                         {t('movethewheels.inventory.lowStock.left', 'left')}
                       </p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         {t('movethewheels.inventory.lowStock.reorderAt', 'Reorder at:')}{' '}
                         {item.reorderLevel}
                       </p>
@@ -137,13 +144,13 @@ export default function InventoryPage() {
                 {warehouses.map((warehouse) => (
                   <div
                     key={warehouse.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
                     onClick={() => goTo(`inventory/warehouses/${warehouse.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{warehouse.name}</p>
-                        <p className="text-sm text-muted-foreground">
+                        <p className="text-sm text-text-secondary">
                           {warehouse.address.city}, {warehouse.address.state}
                         </p>
                       </div>
@@ -154,7 +161,7 @@ export default function InventoryPage() {
                             : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
                         </Badge>
                         <div className="mt-2">
-                          <p className="text-xs text-muted-foreground">
+                          <p className="text-xs text-text-secondary">
                             {t('movethewheels.inventory.warehouses.utilization', 'Utilization')}
                           </p>
                           <Progress
@@ -187,13 +194,13 @@ export default function InventoryPage() {
                 {products.slice(0, 5).map((product) => (
                   <div
                     key={product.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
                     onClick={() => goTo(`inventory/products/${product.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{product.name}</p>
-                        <p className="text-sm text-muted-foreground">{product.sku}</p>
+                        <p className="text-sm text-text-secondary">{product.sku}</p>
                       </div>
                       <div className="text-right">
                         <p className="font-medium">{formatCurrency(product.value)}</p>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -101,8 +101,8 @@ export default function LiveTrackingPage() {
           {viewMode === 'map' ? (
             <Card className="h-[600px]">
               <CardContent className="p-0 h-full">
-                <div className="w-full h-full bg-muted rounded-lg flex items-center justify-center">
-                  <div className="text-center text-muted-foreground">
+                <div className="w-full h-full bg-bg-sunken rounded-lg flex items-center justify-center">
+                  <div className="text-center text-text-secondary">
                     <MapPin size={64} className="mx-auto mb-4 opacity-50" />
                     <p className="text-lg font-medium">Map View</p>
                     <p className="text-sm">
@@ -131,8 +131,8 @@ export default function LiveTrackingPage() {
                       return (
                         <div
                           key={delivery.order.id}
-                          className={`p-4 hover:bg-muted/50 cursor-pointer transition-colors ${
-                            selectedDelivery === delivery.order.id ? 'bg-muted/50' : ''
+                          className={`p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors ${
+                            selectedDelivery === delivery.order.id ? 'bg-bg-sunken/50' : ''
                           }`}
                           onClick={() => setSelectedDelivery(delivery.order.id)}
                         >
@@ -146,10 +146,10 @@ export default function LiveTrackingPage() {
                                   size="sm"
                                 />
                               </div>
-                              <p className="text-sm text-muted-foreground">
+                              <p className="text-sm text-text-secondary">
                                 {delivery.order.customerInfo.name}
                               </p>
-                              <p className="text-sm text-muted-foreground">
+                              <p className="text-sm text-text-secondary">
                                 {delivery.driver?.fullName || 'Unassigned'}
                                 {delivery.vehicle && ` - ${delivery.vehicle.vehicleNumber}`}
                               </p>
@@ -161,7 +161,7 @@ export default function LiveTrackingPage() {
                                   ? formatDate(delivery.estimatedArrival, 'time')
                                   : 'N/A'}
                               </p>
-                              <p className="text-xs text-muted-foreground">
+                              <p className="text-xs text-text-secondary">
                                 {delivery.tracking?.currentLocation.address ||
                                   'Location updating...'}
                               </p>
@@ -171,7 +171,7 @@ export default function LiveTrackingPage() {
                       );
                     })}
                     {activeDeliveries.length === 0 && (
-                      <div className="p-8 text-center text-muted-foreground">
+                      <div className="p-8 text-center text-text-secondary">
                         No active deliveries
                       </div>
                     )}
@@ -197,22 +197,22 @@ export default function LiveTrackingPage() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Order</p>
+                  <p className="text-sm text-text-secondary">Order</p>
                   <p className="font-medium">{selected.order?.orderNumber ?? '-'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Customer</p>
+                  <p className="text-sm text-text-secondary">Customer</p>
                   <p className="font-medium">{selected.order?.customerInfo.name ?? '-'}</p>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-text-secondary">
                     {selected.order?.customerInfo.phone ?? '-'}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="text-sm text-text-secondary">Driver</p>
                   <p className="font-medium">{selected.driver?.fullName || 'Unassigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="text-sm text-text-secondary">Vehicle</p>
                   <p className="font-medium">
                     {selected.vehicle
                       ? `${selected.vehicle.vehicleNumber} - ${selected.vehicle.make} ${selected.vehicle.model}`
@@ -220,13 +220,13 @@ export default function LiveTrackingPage() {
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Current Location</p>
+                  <p className="text-sm text-text-secondary">Current Location</p>
                   <p className="text-sm">
                     {selected.tracking?.currentLocation.address || 'Updating...'}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Estimated Arrival</p>
+                  <p className="text-sm text-text-secondary">Estimated Arrival</p>
                   <p className="font-medium">
                     {selected.estimatedArrival
                       ? formatDate(selected.estimatedArrival, 'full')
@@ -254,7 +254,7 @@ export default function LiveTrackingPage() {
             </Card>
           ) : (
             <Card>
-              <CardContent className="p-8 text-center text-muted-foreground">
+              <CardContent className="p-8 text-center text-text-secondary">
                 <MapPin size={32} className="mx-auto mb-2 opacity-50" />
                 <p>Select a delivery to see details</p>
               </CardContent>
@@ -284,14 +284,14 @@ export default function LiveTrackingPage() {
                       }`}
                     >
                       <p className="font-medium">{alert.message}</p>
-                      <p className="text-xs text-muted-foreground mt-1">
+                      <p className="text-xs text-text-secondary mt-1">
                         {formatDate(alert.timestamp, 'relative')}
                       </p>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="text-center text-muted-foreground py-4">
+                <div className="text-center text-text-secondary py-4">
                   <p className="text-sm">No active alerts</p>
                 </div>
               )}

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -150,7 +150,7 @@ export default function MarketplacePage() {
         <CardContent className="p-4">
           <div className="relative">
             <Search
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
               size={20}
             />
             <Input
@@ -178,8 +178,8 @@ export default function MarketplacePage() {
                         {provider.isActive ? 'active' : 'inactive'}
                       </Badge>
                     </div>
-                    <p className="text-muted-foreground mt-1">{provider.description}</p>
-                    <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
+                    <p className="text-text-secondary mt-1">{provider.description}</p>
+                    <div className="flex items-center gap-4 mt-3 text-sm text-text-secondary">
                       <span className="flex items-center gap-1">
                         <Star size={14} className="text-yellow-500 fill-yellow-500" />{' '}
                         {provider.rating ?? 0}
@@ -193,7 +193,7 @@ export default function MarketplacePage() {
                     </div>
                   </div>
                   <div className="text-right">
-                    <p className="text-sm text-muted-foreground">Services</p>
+                    <p className="text-sm text-text-secondary">Services</p>
                     <p className="text-lg font-bold">
                       {Array.isArray(provider.services) ? provider.services.length : 0}
                     </p>
@@ -212,7 +212,7 @@ export default function MarketplacePage() {
                 <CardTitle className="text-base">{service.name}</CardTitle>
               </CardHeader>
               <CardContent>
-                <p className="text-sm text-muted-foreground mb-3">{service.description}</p>
+                <p className="text-sm text-text-secondary mb-3">{service.description}</p>
                 <div className="flex flex-wrap gap-1 mb-3">
                   <Badge variant="outline" className="text-xs">
                     {service.category ?? 'general'}
@@ -223,7 +223,7 @@ export default function MarketplacePage() {
                 </div>
                 <div className="flex items-center justify-between">
                   <span className="font-bold">{formatCurrency(service.price)}</span>
-                  <span className="text-sm text-muted-foreground">{service.currency}</span>
+                  <span className="text-sm text-text-secondary">{service.currency}</span>
                 </div>
               </CardContent>
             </Card>