@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -0,0 +1,261 @@
+/**
+ * Driver Details Page
+ */
+
+import { useParams } from 'react-router-dom';
+import { Users, ArrowLeft, Star, DollarSign, Clock, FileText, Edit, MapPin } from 'lucide-react';
+import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
+import { StatusBadge } from '../components/StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+} from '../components/ui';
+import { useDriver } from '../hooks/useFleet';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatCurrency, formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+
+export default function DriverDetailsPage() {
+  const { driverId } = useParams<{ driverId: string }>();
+  const { basePath, navigate } = useMoveTheWheels();
+  const { driver, isLoading, error, refetch } = useDriver(driverId);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
+
+  if (isLoading) return <LoadingState message="Loading driver details..." />;
+  if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
+
+  return (
+    <PageLayout
+      title={driver.fullName}
+      subtitle={`Employee ID: ${driver.employeeId}`}
+      icon={<Users size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack}>
+            <ArrowLeft size={16} /> Back
+          </Button>
+          <Button>
+            <Edit size={16} /> Edit
+          </Button>
+        </div>
+      }
+      headerContent={
+        <div className="flex items-center gap-4">
+          <StatusBadge status={driver.status} type="driver" />
+          <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>
+          </div>
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          {/* Ratings */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Star size={18} /> Ratings
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                {[
+                  { label: 'Punctuality', value: driver.ratings.punctuality },
+                  { label: 'Communication', value: driver.ratings.communication },
+                  { label: 'Handling', value: driver.ratings.carefulHandling },
+                  { label: 'Professionalism', value: driver.ratings.professionalism },
+                  { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
+                ].map((rating) => (
+                  <div key={rating.label}>
+                    <p className="text-sm text-muted-foreground">{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>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Working Hours */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock size={18} /> Working Hours
+              </CardTitle>
+            </CardHeader>
+            <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="font-medium">
+                    {driver.workingHours.startTime} - {driver.workingHours.endTime}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">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="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="font-medium">
+                    {driver.workingHours.currentHoursThisWeek}h /{' '}
+                    {driver.workingHours.maxHoursPerWeek}h
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Documents */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <FileText size={18} /> Documents
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <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">
+                      {driver.licenseNumber} - {driver.licenseType}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Expires: {formatDate(driver.licenseExpiry)}
+                    </p>
+                  </div>
+                  <Badge variant="default">Valid</Badge>
+                </div>
+                {driver.documents.map((doc) => (
+                  <div
+                    key={doc.id}
+                    className="flex items-center justify-between p-3 border rounded-lg"
+                  >
+                    <div>
+                      <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
+                      <p className="text-sm text-muted-foreground">
+                        Expires: {formatDate(doc.expiryDate)}
+                      </p>
+                    </div>
+                    <Badge variant={doc.verified ? 'default' : 'secondary'}>
+                      {doc.verified ? 'Verified' : 'Pending'}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          {/* Stats */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Statistics</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <p className="text-sm text-muted-foreground">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-2xl font-bold">{driver.todayOrders}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Join Date</p>
+                <p className="font-medium">{formatDate(driver.joinDate)}</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Earnings */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <DollarSign size={18} /> Earnings
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground">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="font-medium">{formatCurrency(driver.earnings.weeklyEarnings)}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">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="font-medium">{formatCurrency(driver.baseSalary)}/year</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Location */}
+          {driver.currentLocation && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} /> Current Location
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">
+                  {driver.currentLocation.address || 'Location updating...'}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Updated {formatDate(driver.currentLocation.timestamp || new Date(), 'relative')}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Compliance */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Compliance Status</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {Object.entries(driver.compliance)
+                .filter(([k]) => k !== 'lastUpdate')
+                .map(([key, value]) => (
+                  <div key={key} className="flex items-center justify-between">
+                    <span className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</span>
+                    <Badge variant={value ? 'default' : 'destructive'}>
+                      {value ? 'Compliant' : 'Non-compliant'}
+                    </Badge>
+                  </div>
+                ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/DriversPage.tsx

@@ -0,0 +1,118 @@
+/**
+ * Drivers Page - List of all drivers
+ */
+
+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 { useDrivers } from '../hooks/useFleet';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+import type { Driver } from '../types';
+
+export default function DriversPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { drivers, totalDrivers, isLoading, refetch } = useDrivers();
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+
+  const columns: Column<Driver>[] = [
+    {
+      id: 'driver',
+      header: 'Driver',
+      cell: (row) => (
+        <div className="flex items-center gap-3">
+          <Avatar>
+            <AvatarFallback>
+              {row.fullName
+                .split(' ')
+                .map((n) => n[0])
+                .join('')}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="font-medium">{row.fullName}</p>
+            <p className="text-sm text-muted-foreground">{row.employeeId}</p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      sortable: true,
+      cell: (row) => <StatusBadge status={row.status} type="driver" />,
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      cell: (row) => (
+        <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>
+        </div>
+      ),
+    },
+    {
+      id: 'deliveries',
+      header: 'Deliveries',
+      accessorKey: 'completedOrders',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.completedOrders.toLocaleString()}</span>,
+    },
+    {
+      id: 'license',
+      header: 'License',
+      cell: (row) => (
+        <div className="text-sm">
+          <p>{row.licenseType}</p>
+          <p className="text-muted-foreground">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
+        </div>
+      ),
+    },
+    {
+      id: 'joined',
+      header: 'Join Date',
+      accessorKey: 'joinDate',
+      sortable: true,
+      cell: (row) => formatDate(row.joinDate, 'short'),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Drivers"
+      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>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={drivers}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search drivers..."
+        searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}
+        onRowClick={(row) => goTo(`fleet/drivers/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/FinancePage.tsx

@@ -0,0 +1,141 @@
+/**
+ * Finance Page
+ */
+
+import { DollarSign, TrendingUp, CreditCard, FileText, Download } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '../components/ui';
+import { useAnalytics } from '../hooks/useAnalytics';
+import { useOrderStats } from '../hooks/useOrders';
+import { formatCurrency } from '../utils/formatters';
+
+export default function FinancePage() {
+  const { analytics } = useAnalytics();
+  const { stats } = useOrderStats();
+
+  const pendingPayments = stats.totalRevenue * 0.15; // Simulated
+  const completedPayments = stats.totalRevenue * 0.85;
+
+  return (
+    <PageLayout
+      title="Finance"
+      subtitle="Financial overview and reports"
+      icon={<DollarSign size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline">
+            <FileText size={16} /> Invoices
+          </Button>
+          <Button variant="outline">
+            <Download size={16} /> Export
+          </Button>
+        </div>
+      }
+    >
+      <MetricGrid columns={4}>
+        <MetricCard
+          label="Total Revenue"
+          value={formatCurrency(analytics.overview.totalRevenue)}
+          icon={<DollarSign size={20} />}
+          change="+12.5%"
+          changeType="positive"
+          trend="up"
+        />
+        <MetricCard
+          label="Completed"
+          value={formatCurrency(completedPayments)}
+          icon={<TrendingUp size={20} />}
+          changeType="positive"
+        />
+        <MetricCard
+          label="Pending"
+          value={formatCurrency(pendingPayments)}
+          icon={<CreditCard size={20} />}
+          changeType="neutral"
+        />
+        <MetricCard
+          label="Avg Order Value"
+          value={formatCurrency(stats.avgOrderValue)}
+          icon={<DollarSign size={20} />}
+        />
+      </MetricGrid>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue by Month</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {analytics.trends.revenue.map((r) => (
+                <div
+                  key={r.month}
+                  className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                >
+                  <span className="font-medium">{r.month} 2024</span>
+                  <span className="text-lg font-bold">{formatCurrency(r.revenue)}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Payment Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800 flex items-center justify-center">
+                    <TrendingUp size={20} className="text-green-600" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Paid</p>
+                    <p className="text-sm text-muted-foreground">
+                      {stats.byStatus.delivered} orders
+                    </p>
+                  </div>
+                </div>
+                <span className="text-xl font-bold text-green-600">
+                  {formatCurrency(completedPayments)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center">
+                    <CreditCard size={20} className="text-yellow-600" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Pending</p>
+                    <p className="text-sm text-muted-foreground">
+                      {stats.byStatus.pending + stats.byStatus.in_transit} orders
+                    </p>
+                  </div>
+                </div>
+                <span className="text-xl font-bold text-yellow-600">
+                  {formatCurrency(pendingPayments)}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Transactions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-8 text-muted-foreground">
+            <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>
+          </div>
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}