@burdenoff/microfe-movethewheels 2026.608.1 → 2026.624.1

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -51,7 +51,7 @@ export default function DriverDetailsPage() {
           <div className="flex items-center gap-1">
             <Star size={16} className="text-yellow-500 fill-yellow-500" />
             <span className="font-medium">{driver.ratings.overall.toFixed(1)}</span>
-            <span className="text-muted-foreground">({driver.ratings.totalRatings} ratings)</span>
+            <span className="text-text-secondary">({driver.ratings.totalRatings} ratings)</span>
           </div>
         </div>
       }
@@ -75,7 +75,7 @@ export default function DriverDetailsPage() {
                   { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
                 ].map((rating) => (
                   <div key={rating.label}>
-                    <p className="text-sm text-muted-foreground">{rating.label}</p>
+                    <p className="text-sm text-text-secondary">{rating.label}</p>
                     <div className="flex items-center gap-2 mt-1">
                       <Progress value={rating.value * 20} className="flex-1 h-2" />
                       <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
@@ -96,23 +96,23 @@ export default function DriverDetailsPage() {
             <CardContent>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Shift</p>
+                  <p className="text-sm text-text-secondary">Shift</p>
                   <p className="font-medium">
                     {driver.workingHours.startTime} - {driver.workingHours.endTime}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Working Days</p>
+                  <p className="text-sm text-text-secondary">Working Days</p>
                   <p className="font-medium">{driver.workingHours.workingDays.length} days/week</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Hours Today</p>
+                  <p className="text-sm text-text-secondary">Hours Today</p>
                   <p className="font-medium">
                     {driver.workingHours.currentHoursToday}h / {driver.workingHours.maxHoursPerDay}h
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Hours This Week</p>
+                  <p className="text-sm text-text-secondary">Hours This Week</p>
                   <p className="font-medium">
                     {driver.workingHours.currentHoursThisWeek}h /{' '}
                     {driver.workingHours.maxHoursPerWeek}h
@@ -134,10 +134,10 @@ export default function DriverDetailsPage() {
                 <div className="flex items-center justify-between p-3 border rounded-lg">
                   <div>
                     <p className="font-medium">Driver's License</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {driver.licenseNumber} - {driver.licenseType}
                     </p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       Expires: {formatDate(driver.licenseExpiry)}
                     </p>
                   </div>
@@ -150,7 +150,7 @@ export default function DriverDetailsPage() {
                   >
                     <div>
                       <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         Expires: {formatDate(doc.expiryDate)}
                       </p>
                     </div>
@@ -172,15 +172,15 @@ export default function DriverDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">Total Deliveries</p>
+                <p className="text-sm text-text-secondary">Total Deliveries</p>
                 <p className="text-2xl font-bold">{driver.completedOrders.toLocaleString()}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Today's Deliveries</p>
+                <p className="text-sm text-text-secondary">Today's Deliveries</p>
                 <p className="text-2xl font-bold">{driver.todayOrders}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Join Date</p>
+                <p className="text-sm text-text-secondary">Join Date</p>
                 <p className="font-medium">{formatDate(driver.joinDate)}</p>
               </div>
             </CardContent>
@@ -195,23 +195,23 @@ export default function DriverDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">Total Earnings</p>
+                <p className="text-sm text-text-secondary">Total Earnings</p>
                 <p className="text-2xl font-bold">
                   {formatCurrency(driver.earnings.totalEarnings)}
                 </p>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <p className="text-sm text-muted-foreground">This Week</p>
+                  <p className="text-sm text-text-secondary">This Week</p>
                   <p className="font-medium">{formatCurrency(driver.earnings.weeklyEarnings)}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">This Month</p>
+                  <p className="text-sm text-text-secondary">This Month</p>
                   <p className="font-medium">{formatCurrency(driver.earnings.monthlyEarnings)}</p>
                 </div>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Base Salary</p>
+                <p className="text-sm text-text-secondary">Base Salary</p>
                 <p className="font-medium">{formatCurrency(driver.baseSalary)}/year</p>
               </div>
             </CardContent>
@@ -229,7 +229,7 @@ export default function DriverDetailsPage() {
                 <p className="text-sm">
                   {driver.currentLocation.address || 'Location updating...'}
                 </p>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="text-xs text-text-secondary mt-1">
                   Updated {formatDate(driver.currentLocation.timestamp || new Date(), 'relative')}
                 </p>
               </CardContent>

package/src/movethewheels/pages/DriversPage.tsx

@@ -35,7 +35,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 +54,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 +71,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>
       ),
     },

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

@@ -105,12 +105,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 +118,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 +127,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 +158,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 +173,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 +266,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

@@ -100,7 +100,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 +109,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 +137,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 +154,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 +187,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>