@burdenoff/microfe-movethewheels 2026.614.1 → 2026.625.1

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -124,17 +124,17 @@ export default function OrderDetailsPage() {
                 <div>
                   <h4 className="font-medium mb-2">{order.customerInfo.name}</h4>
                   {order.customerInfo.company && (
-                    <p className="text-sm text-muted-foreground mb-2">
+                    <p className="text-sm text-text-secondary mb-2">
                       {order.customerInfo.company}
                     </p>
                   )}
                   <div className="space-y-1 text-sm">
                     <p className="flex items-center gap-2">
-                      <Mail size={14} className="text-muted-foreground" />
+                      <Mail size={14} className="text-text-secondary" />
                       {order.customerInfo.email}
                     </p>
                     <p className="flex items-center gap-2">
-                      <Phone size={14} className="text-muted-foreground" />
+                      <Phone size={14} className="text-text-secondary" />
                       {order.customerInfo.phone}
                     </p>
                   </div>
@@ -142,13 +142,13 @@ export default function OrderDetailsPage() {
                 <div>
                   {order.customerInfo.preferredDeliveryTime && (
                     <div className="mb-2">
-                      <p className="text-sm text-muted-foreground">Preferred Delivery Time</p>
+                      <p className="text-sm text-text-secondary">Preferred Delivery Time</p>
                       <p className="text-sm">{order.customerInfo.preferredDeliveryTime}</p>
                     </div>
                   )}
                   {order.customerInfo.deliveryInstructions && (
                     <div>
-                      <p className="text-sm text-muted-foreground">Delivery Instructions</p>
+                      <p className="text-sm text-text-secondary">Delivery Instructions</p>
                       <p className="text-sm">{order.customerInfo.deliveryInstructions}</p>
                     </div>
                   )}
@@ -173,7 +173,7 @@ export default function OrderDetailsPage() {
                   </h4>
                   <p className="text-sm">{formatAddress(order.pickupAddress)}</p>
                   {order.scheduledPickup && (
-                    <p className="text-sm text-muted-foreground mt-2">
+                    <p className="text-sm text-text-secondary mt-2">
                       Scheduled: {formatDate(order.scheduledPickup, 'full')}
                     </p>
                   )}
@@ -190,7 +190,7 @@ export default function OrderDetailsPage() {
                   </h4>
                   <p className="text-sm">{formatAddress(order.deliveryAddress)}</p>
                   {order.scheduledDelivery && (
-                    <p className="text-sm text-muted-foreground mt-2">
+                    <p className="text-sm text-text-secondary mt-2">
                       Scheduled: {formatDate(order.scheduledDelivery, 'full')}
                     </p>
                   )}
@@ -231,7 +231,7 @@ export default function OrderDetailsPage() {
                         <div>
                           <p className="font-medium">{item.name}</p>
                           {item.description && (
-                            <p className="text-sm text-muted-foreground">{item.description}</p>
+                            <p className="text-sm text-text-secondary">{item.description}</p>
                           )}
                         </div>
                       </TableCell>
@@ -261,7 +261,7 @@ export default function OrderDetailsPage() {
                 {order.timeline.map((event, index) => (
                   <div key={index} className="flex gap-4 pb-6 last:pb-0">
                     <div className="relative">
-                      <div className="w-3 h-3 rounded-full bg-primary mt-1.5" />
+                      <div className="w-3 h-3 rounded-full bg-action-primary-bg mt-1.5" />
                       {index < order.timeline.length - 1 && (
                         <div className="absolute top-4 left-1.5 w-px h-full -ml-px bg-border" />
                       )}
@@ -269,12 +269,12 @@ export default function OrderDetailsPage() {
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <StatusBadge status={event.status} type="order" size="sm" />
-                        <span className="text-sm text-muted-foreground">
+                        <span className="text-sm text-text-secondary">
                           {formatDate(event.timestamp, 'full')}
                         </span>
                       </div>
                       {event.notes && <p className="text-sm">{event.notes}</p>}
-                      <p className="text-xs text-muted-foreground">by {event.performedBy}</p>
+                      <p className="text-xs text-text-secondary">by {event.performedBy}</p>
                     </div>
                   </div>
                 ))}
@@ -296,25 +296,25 @@ export default function OrderDetailsPage() {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Subtotal</span>
+                  <span className="text-text-secondary">Subtotal</span>
                   <span>{formatCurrency(order.pricing.subtotal)}</span>
                 </div>
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Delivery</span>
+                  <span className="text-text-secondary">Delivery</span>
                   <span>{formatCurrency(order.pricing.fees.delivery)}</span>
                 </div>
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Handling</span>
+                  <span className="text-text-secondary">Handling</span>
                   <span>{formatCurrency(order.pricing.fees.handling)}</span>
                 </div>
                 {order.pricing.fees.insurance && (
                   <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Insurance</span>
+                    <span className="text-text-secondary">Insurance</span>
                     <span>{formatCurrency(order.pricing.fees.insurance)}</span>
                   </div>
                 )}
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Taxes</span>
+                  <span className="text-text-secondary">Taxes</span>
                   <span>{formatCurrency(order.pricing.taxes)}</span>
                 </div>
                 <Separator />
@@ -323,7 +323,7 @@ export default function OrderDetailsPage() {
                   <span className="text-lg">{formatCurrency(order.pricing.total)}</span>
                 </div>
                 <div className="pt-2">
-                  <p className="text-sm text-muted-foreground">Payment Method</p>
+                  <p className="text-sm text-text-secondary">Payment Method</p>
                   <p className="text-sm capitalize">
                     {order.pricing.paymentMethod.replace('_', ' ')}
                   </p>
@@ -343,15 +343,15 @@ export default function OrderDetailsPage() {
             <CardContent>
               <div className="space-y-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="text-sm text-text-secondary">Driver</p>
                   <p className="text-sm">{order.driverId || 'Not assigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="text-sm text-text-secondary">Vehicle</p>
                   <p className="text-sm">{order.vehicleId || 'Not assigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Tracking Number</p>
+                  <p className="text-sm text-text-secondary">Tracking Number</p>
                   <p className="text-sm font-mono">{order.trackingNumber}</p>
                 </div>
                 <Button

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,
@@ -67,7 +68,7 @@ export default function OrdersListPage() {
       cell: (row) => (
         <div className="min-w-0">
           <p className="font-medium truncate">{row.customerInfo.name}</p>
-          <p className="text-sm text-muted-foreground truncate">{row.customerInfo.email}</p>
+          <p className="text-sm text-text-secondary truncate">{row.customerInfo.email}</p>
         </div>
       ),
     },
@@ -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 */}
@@ -173,7 +179,7 @@ export default function OrdersListPage() {
         <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-muted-foreground" />
+              <Filter size={16} className="text-text-secondary" />
               <span className="text-sm font-medium">
                 {t('movethewheels.orders.filters.label', 'Filters:')}
               </span>

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -66,28 +66,28 @@ export default function ProductDetailsPage() {
             <CardContent>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Length</p>
+                  <p className="text-sm text-text-secondary">Length</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.length}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Width</p>
+                  <p className="text-sm text-text-secondary">Width</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.width}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Height</p>
+                  <p className="text-sm text-text-secondary">Height</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.height}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Weight</p>
+                  <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">
                     {product.weight}
                     <span className="text-sm font-normal"> kg</span>
@@ -108,7 +108,7 @@ export default function ProductDetailsPage() {
                 <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                   {product.attributes.map((attr, i) => (
                     <div key={i}>
-                      <p className="text-sm text-muted-foreground">{attr.name}</p>
+                      <p className="text-sm text-text-secondary">{attr.name}</p>
                       <p className="font-medium">{attr.value}</p>
                     </div>
                   ))}
@@ -127,7 +127,7 @@ export default function ProductDetailsPage() {
             </CardHeader>
             <CardContent>
               <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
-              <p className="text-sm text-muted-foreground">Unit price</p>
+              <p className="text-sm text-text-secondary">Unit price</p>
             </CardContent>
           </Card>
 
@@ -137,12 +137,12 @@ export default function ProductDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">SKU</p>
+                <p className="text-sm text-text-secondary">SKU</p>
                 <p className="font-mono">{product.sku}</p>
               </div>
               {product.barcode && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Barcode</p>
+                  <p className="text-sm text-text-secondary">Barcode</p>
                   <p className="font-mono">{product.barcode}</p>
                 </div>
               )}

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';
@@ -34,7 +35,7 @@ export default function ProductsPage() {
       cell: (row) => (
         <div>
           <p className="font-medium">{row.name}</p>
-          <p className="text-sm text-muted-foreground line-clamp-1">{row.description}</p>
+          <p className="text-sm text-text-secondary line-clamp-1">{row.description}</p>
         </div>
       ),
     },
@@ -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/ReportsPage.tsx

@@ -95,18 +95,18 @@ export default function ReportsPage() {
               <CardContent className="p-4">
                 <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">
                       <FileBarChart size={20} className="text-primary" />
                     </div>
                     <div>
                       <p className="font-medium">{report.name}</p>
-                      <p className="text-sm text-muted-foreground">{report.description}</p>
+                      <p className="text-sm text-text-secondary">{report.description}</p>
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
                     <div className="text-right">
                       <Badge variant="outline">{report.frequency}</Badge>
-                      <p className="text-xs text-muted-foreground mt-1">
+                      <p className="text-xs text-text-secondary mt-1">
                         Last: {report.lastGenerated}
                       </p>
                     </div>
@@ -131,8 +131,8 @@ export default function ReportsPage() {
               {scheduledReports.map((report) => (
                 <div key={report.name} className="p-3 border rounded-lg">
                   <p className="font-medium">{report.name}</p>
-                  <p className="text-sm text-muted-foreground">Next: {report.nextRun}</p>
-                  <p className="text-xs text-muted-foreground">{report.recipients} recipients</p>
+                  <p className="text-sm text-text-secondary">Next: {report.nextRun}</p>
+                  <p className="text-xs text-text-secondary">{report.recipients} recipients</p>
                 </div>
               ))}
               <Button variant="outline" className="w-full">

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -35,7 +35,7 @@ export default function RouteDetailsPage() {
       >
         <Card>
           <CardContent className="p-8 text-center">
-            <p className="text-muted-foreground">Route creation form would go here</p>
+            <p className="text-text-secondary">Route creation form would go here</p>
           </CardContent>
         </Card>
       </PageLayout>
@@ -97,8 +97,8 @@ export default function RouteDetailsPage() {
               <CardTitle>Route Map</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
-                <div className="text-center text-muted-foreground">
+              <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center">
+                <div className="text-center text-text-secondary">
                   <MapPin size={48} className="mx-auto mb-2 opacity-50" />
                   <p>Route map visualization</p>
                 </div>
@@ -116,7 +116,7 @@ export default function RouteDetailsPage() {
                   <div key={stop.id} className="flex gap-4">
                     <div className="relative">
                       <div
-                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-muted'}`}
+                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-bg-sunken'}`}
                       >
                         {stop.status === 'completed' ? <CheckCircle size={16} /> : stop.sequence}
                       </div>
@@ -136,7 +136,7 @@ export default function RouteDetailsPage() {
                             </Badge>
                             <span className="font-medium">Order #{stop.orderId}</span>
                           </div>
-                          <p className="text-sm text-muted-foreground mt-1">
+                          <p className="text-sm text-text-secondary mt-1">
                             {formatAddress(stop.address)}
                           </p>
                         </div>
@@ -149,7 +149,7 @@ export default function RouteDetailsPage() {
                               Actual: {formatDate(stop.actualTime, 'time')}
                             </p>
                           )}
-                          <p className="text-xs text-muted-foreground">{stop.duration} min stop</p>
+                          <p className="text-xs text-text-secondary">{stop.duration} min stop</p>
                         </div>
                       </div>
                     </div>
@@ -167,14 +167,14 @@ export default function RouteDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">Total Distance</p>
+                <p className="text-sm text-text-secondary">Total Distance</p>
                 <p className="text-2xl font-bold">
                   {route.distance.toFixed(1)}
                   <span className="text-sm font-normal"> km</span>
                 </p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Est. Duration</p>
+                <p className="text-sm text-text-secondary">Est. Duration</p>
                 <p className="text-2xl font-bold">
                   {route.estimatedDuration}
                   <span className="text-sm font-normal"> min</span>
@@ -182,7 +182,7 @@ export default function RouteDetailsPage() {
               </div>
               {route.actualDuration && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Actual Duration</p>
+                  <p className="text-sm text-text-secondary">Actual Duration</p>
                   <p className="text-2xl font-bold">
                     {route.actualDuration}
                     <span className="text-sm font-normal"> min</span>
@@ -201,18 +201,18 @@ export default function RouteDetailsPage() {
             <CardContent className="space-y-3">
               {route.startTime && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Started</p>
+                  <p className="text-sm text-text-secondary">Started</p>
                   <p>{formatDate(route.startTime, 'full')}</p>
                 </div>
               )}
               {route.endTime && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Completed</p>
+                  <p className="text-sm text-text-secondary">Completed</p>
                   <p>{formatDate(route.endTime, 'full')}</p>
                 </div>
               )}
               <div>
-                <p className="text-sm text-muted-foreground">Created</p>
+                <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(route.createdAt, 'full')}</p>
               </div>
             </CardContent>
@@ -230,7 +230,7 @@ export default function RouteDetailsPage() {
                     className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-red-50' : tc.condition === 'heavy' ? 'bg-orange-50' : 'bg-yellow-50'}`}
                   >
                     <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {tc.location} - +{tc.delay} min delay
                     </p>
                   </div>

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/SettingsPage.tsx

@@ -143,7 +143,7 @@ export default function SettingsPage() {
                 <div key={item.label} className="flex items-center justify-between">
                   <div>
                     <p className="font-medium">{item.label}</p>
-                    <p className="text-sm text-muted-foreground">{item.desc}</p>
+                    <p className="text-sm text-text-secondary">{item.desc}</p>
                   </div>
                   <Switch defaultChecked />
                 </div>
@@ -200,7 +200,7 @@ export default function SettingsPage() {
               <CardDescription>Manage your API access</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="p-4 bg-muted rounded-lg">
+              <div className="p-4 bg-bg-sunken rounded-lg">
                 <p className="font-medium">Production API Key</p>
                 <code className="text-sm">pk_live_••••••••••••••••</code>
               </div>