@burdenoff/microfe-movethewheels 2026.614.1 → 2026.625.1

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -62,8 +62,8 @@ export default function AnalyticsPage() {
             <CardTitle>Order Trends</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
-              <div className="text-center text-muted-foreground">
+            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
+              <div className="text-center text-text-secondary">
                 <BarChart3 size={48} className="mx-auto mb-2 opacity-50" />
                 <p>Order trend chart</p>
                 <p className="text-xs">(Chart library integration needed)</p>
@@ -71,8 +71,8 @@ export default function AnalyticsPage() {
             </div>
             <div className="mt-4 grid grid-cols-4 gap-2">
               {orderData.trends.slice(-4).map((t) => (
-                <div key={t.date} className="text-center p-2 bg-muted/50 rounded">
-                  <p className="text-xs text-muted-foreground">
+                <div key={t.date} className="text-center p-2 bg-bg-sunken/50 rounded">
+                  <p className="text-xs text-text-secondary">
                     {t.date.split('-').slice(1).join('/')}
                   </p>
                   <p className="font-medium">{t.orders}</p>
@@ -87,16 +87,16 @@ export default function AnalyticsPage() {
             <CardTitle>Revenue Trends</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
-              <div className="text-center text-muted-foreground">
+            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
+              <div className="text-center text-text-secondary">
                 <TrendingUp size={48} className="mx-auto mb-2 opacity-50" />
                 <p>Revenue trend chart</p>
               </div>
             </div>
             <div className="mt-4 grid grid-cols-5 gap-2">
               {analytics.trends.revenue.map((r) => (
-                <div key={r.month} className="text-center p-2 bg-muted/50 rounded">
-                  <p className="text-xs text-muted-foreground">{r.month}</p>
+                <div key={r.month} className="text-center p-2 bg-bg-sunken/50 rounded">
+                  <p className="text-xs text-text-secondary">{r.month}</p>
                   <p className="font-medium text-sm">{formatCurrency(r.revenue / 1000)}k</p>
                 </div>
               ))}
@@ -148,7 +148,7 @@ export default function AnalyticsPage() {
               <Progress value={fleetData.avgFuelLevel} />
             </div>
             <div className="pt-2">
-              <p className="text-sm text-muted-foreground mb-2">Vehicles by Type</p>
+              <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
               {fleetData.vehiclesByType.map(({ type, count }) => (
                 <div key={type} className="flex justify-between text-sm py-1">
                   <span className="capitalize">{type}</span>
@@ -165,21 +165,21 @@ export default function AnalyticsPage() {
           </CardHeader>
           <CardContent className="space-y-4">
             <div>
-              <p className="text-sm text-muted-foreground">On-Time Pickup</p>
+              <p className="text-sm text-text-secondary">On-Time Pickup</p>
               <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">On-Time Delivery</p>
+              <p className="text-sm text-text-secondary">On-Time Delivery</p>
               <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Damaged Items</p>
+              <p className="text-sm text-text-secondary">Damaged Items</p>
               <p className="text-2xl font-bold text-green-600">
                 {analytics.performance.damagedItems}%
               </p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Driver Ratings</p>
+              <p className="text-sm text-text-secondary">Driver Ratings</p>
               <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
             </div>
           </CardContent>

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -363,7 +363,7 @@ export default function CreateOrderPage() {
           </CardHeader>
           <CardContent>
             {formData.items.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground">
+              <div className="text-center py-8 text-text-secondary">
                 <Package size={48} className="mx-auto mb-4 opacity-50" />
                 <p>No items added yet</p>
                 <Button type="button" variant="link" onClick={addItem}>
@@ -420,7 +420,7 @@ export default function CreateOrderPage() {
                           type="button"
                           variant="ghost"
                           size="icon"
-                          className="text-destructive"
+                          className="text-status-error-text"
                           onClick={() => removeItem(index)}
                         >
                           <Trash2 size={16} />

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -44,7 +44,7 @@ export default function CustomerDetailsPage() {
       >
         <Card>
           <CardContent className="p-8 text-center">
-            <p className="text-muted-foreground">Customer creation form would go here</p>
+            <p className="text-text-secondary">Customer creation form would go here</p>
           </CardContent>
         </Card>
       </PageLayout>
@@ -92,16 +92,16 @@ export default function CustomerDetailsPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
-                    <Mail size={18} className="text-muted-foreground" />
+                    <Mail size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-muted-foreground">Email</p>
+                      <p className="text-sm text-text-secondary">Email</p>
                       <p className="font-medium">{customer.email}</p>
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <Phone size={18} className="text-muted-foreground" />
+                    <Phone size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-muted-foreground">Phone</p>
+                      <p className="text-sm text-text-secondary">Phone</p>
                       <p className="font-medium">{customer.phone}</p>
                     </div>
                   </div>
@@ -109,16 +109,16 @@ export default function CustomerDetailsPage() {
                 <div className="space-y-4">
                   {customer.company && (
                     <div className="flex items-center gap-3">
-                      <Building size={18} className="text-muted-foreground" />
+                      <Building size={18} className="text-text-secondary" />
                       <div>
-                        <p className="text-sm text-muted-foreground">Company</p>
+                        <p className="text-sm text-text-secondary">Company</p>
                         <p className="font-medium">{customer.company}</p>
                       </div>
                     </div>
                   )}
                   {customer.website && (
                     <div>
-                      <p className="text-sm text-muted-foreground">Website</p>
+                      <p className="text-sm text-text-secondary">Website</p>
                       <a href={customer.website} className="text-primary hover:underline">
                         {customer.website}
                       </a>
@@ -162,22 +162,22 @@ export default function CustomerDetailsPage() {
             <CardContent className="space-y-3">
               {customer.businessLicense && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Business License</p>
+                  <p className="text-sm text-text-secondary">Business License</p>
                   <p className="font-mono">{customer.businessLicense}</p>
                 </div>
               )}
               {customer.taxId && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Tax ID</p>
+                  <p className="text-sm text-text-secondary">Tax ID</p>
                   <p className="font-mono">{customer.taxId}</p>
                 </div>
               )}
               <div>
-                <p className="text-sm text-muted-foreground">Preferred Contact</p>
+                <p className="text-sm text-text-secondary">Preferred Contact</p>
                 <p className="capitalize">{customer.preferredContactMethod}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Marketing Opt-in</p>
+                <p className="text-sm text-text-secondary">Marketing Opt-in</p>
                 <Badge variant={customer.marketingOptIn ? 'default' : 'secondary'}>
                   {customer.marketingOptIn ? 'Yes' : 'No'}
                 </Badge>
@@ -191,11 +191,11 @@ export default function CustomerDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">Created</p>
+                <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(customer.createdAt, 'full')}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Last Updated</p>
+                <p className="text-sm text-text-secondary">Last Updated</p>
                 <p>{formatDate(customer.updatedAt, 'relative')}</p>
               </div>
             </CardContent>

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';
@@ -35,7 +36,7 @@ export default function CustomersPage() {
           </Avatar>
           <div>
             <p className="font-medium">{row.name}</p>
-            <p className="text-sm text-muted-foreground">{row.email}</p>
+            <p className="text-sm text-text-secondary">{row.email}</p>
           </div>
         </div>
       ),
@@ -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} />}
@@ -151,17 +160,17 @@ export default function DashboardPage() {
                 {orders.slice(0, 5).map((order) => (
                   <div
                     key={order.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(`orders/${order.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{order.orderNumber}</p>
-                        <p className="text-sm text-muted-foreground">{order.customerInfo.name}</p>
+                        <p className="text-sm text-text-secondary">{order.customerInfo.name}</p>
                       </div>
                       <div className="text-right">
                         <StatusBadge status={order.status} type="order" size="sm" />
-                        <p className="text-sm text-muted-foreground mt-1">
+                        <p className="text-sm text-text-secondary mt-1">
                           {formatCurrency(order.pricing.total)}
                         </p>
                       </div>
@@ -169,7 +178,7 @@ export default function DashboardPage() {
                   </div>
                 ))}
                 {orders.length === 0 && (
-                  <div className="p-8 text-center text-muted-foreground">
+                  <div className="p-8 text-center text-text-secondary">
                     {t('movethewheels.dashboard.recentOrders.empty', 'No recent orders')}
                   </div>
                 )}
@@ -195,13 +204,13 @@ export default function DashboardPage() {
                   delivery.order ? (
                     <div
                       key={delivery.order.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(`tracking?order=${delivery.order.id}`)}
                     >
                       <div className="flex items-center justify-between">
                         <div>
                           <p className="font-medium">{delivery.order.orderNumber}</p>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {delivery.driver?.fullName ||
                               t(
                                 'movethewheels.dashboard.activeDeliveries.unassigned',
@@ -211,7 +220,7 @@ export default function DashboardPage() {
                         </div>
                         <div className="text-right">
                           <StatusBadge status={delivery.order.status} type="order" size="sm" />
-                          <p className="text-sm text-muted-foreground mt-1">
+                          <p className="text-sm text-text-secondary mt-1">
                             {t('movethewheels.dashboard.activeDeliveries.eta', 'ETA:')}{' '}
                             {delivery.estimatedArrival
                               ? formatDate(delivery.estimatedArrival, 'time')
@@ -223,7 +232,7 @@ export default function DashboardPage() {
                   ) : null
                 )}
                 {activeDeliveries.length === 0 && (
-                  <div className="p-8 text-center text-muted-foreground">
+                  <div className="p-8 text-center text-text-secondary">
                     {t('movethewheels.dashboard.activeDeliveries.empty', 'No active deliveries')}
                   </div>
                 )}
@@ -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>
@@ -296,7 +303,7 @@ export default function DashboardPage() {
             </div>
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.available', 'Available')}
                 </p>
                 <p className="text-lg font-semibold text-green-600">
@@ -304,7 +311,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.inUse', 'In Use')}
                 </p>
                 <p className="text-lg font-semibold text-blue-600">
@@ -312,7 +319,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.maintenance', 'Maintenance')}
                 </p>
                 <p className="text-lg font-semibold text-yellow-600">
@@ -320,7 +327,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.avgFuel', 'Avg Fuel')}
                 </p>
                 <p className="text-lg font-semibold">{fleetStats.avgFuelLevel.toFixed(0)}%</p>
@@ -346,7 +353,7 @@ export default function DashboardPage() {
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.pendingOrders.title', 'Pending Orders')}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {orderStats.byStatus.pending}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.pendingOrders.description',
@@ -366,7 +373,7 @@ export default function DashboardPage() {
                         'Vehicles in Maintenance'
                       )}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {fleetStats.vehiclesByStatus.maintenance}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.maintenanceVehicles.description',
@@ -383,7 +390,7 @@ export default function DashboardPage() {
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.offlineDrivers.title', 'Offline Drivers')}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {fleetStats.driversByStatus.offline}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.offlineDrivers.description',
@@ -396,7 +403,7 @@ export default function DashboardPage() {
               {orderStats.byStatus.pending <= 5 &&
                 fleetStats.vehiclesByStatus.maintenance === 0 &&
                 fleetStats.driversByStatus.offline === 0 && (
-                  <div className="text-center py-4 text-muted-foreground">
+                  <div className="text-center py-4 text-text-secondary">
                     <p className="text-sm">
                       {t(
                         'movethewheels.dashboard.alerts.allOperational',

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>