@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/pages/RoutesPage.tsx

@@ -0,0 +1,104 @@
+/**
+ * Routes Page
+ */
+
+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 { useRoutes } from '../hooks/useRoutes';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { formatDate } from '../utils/formatters';
+import { joinPath } from '../utils/navigation';
+import type { Route } from '../types';
+
+export default function RoutesPage() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { routes, totalRoutes, isLoading, refetch } = useRoutes();
+
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+
+  const columns: Column<Route>[] = [
+    {
+      id: 'name',
+      header: 'Route Name',
+      accessorKey: 'name',
+      sortable: true,
+      cell: (row) => <span className="font-medium">{row.name}</span>,
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      sortable: true,
+      cell: (row) => {
+        const colors = {
+          planned: { bg: 'bg-blue-100', text: 'text-blue-700' },
+          in_progress: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+          completed: { bg: 'bg-green-100', text: 'text-green-700' },
+          cancelled: { bg: 'bg-red-100', text: 'text-red-700' },
+        };
+        return <StatusBadge status={row.status} customColors={colors[row.status]} />;
+      },
+    },
+    {
+      id: 'stops',
+      header: 'Stops',
+      cell: (row) => <Badge variant="secondary">{row.stops.length} stops</Badge>,
+    },
+    {
+      id: 'distance',
+      header: 'Distance',
+      accessorKey: 'distance',
+      sortable: true,
+      cell: (row) => `${row.distance.toFixed(1)} km`,
+    },
+    { id: 'duration', header: 'Est. Duration', cell: (row) => `${row.estimatedDuration} min` },
+    {
+      id: 'optimized',
+      header: 'Optimized',
+      cell: (row) => (
+        <Badge variant={row.optimized ? 'default' : 'outline'}>
+          {row.optimized ? 'Yes' : 'No'}
+        </Badge>
+      ),
+    },
+    {
+      id: 'created',
+      header: 'Created',
+      accessorKey: 'createdAt',
+      sortable: true,
+      cell: (row) => formatDate(row.createdAt, 'short'),
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Routes"
+      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>
+      }
+    >
+      <DataTable
+        columns={columns}
+        data={routes}
+        isLoading={isLoading}
+        searchable
+        searchPlaceholder="Search routes..."
+        searchFields={['name'] as (keyof Route)[]}
+        onRowClick={(row) => goTo(`routes/${row.id}`)}
+        getRowId={(row) => row.id}
+      />
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/SettingsPage.tsx

@@ -0,0 +1,242 @@
+/**
+ * Settings Page
+ */
+
+import { Settings, User, Bell, Shield, Globe, Webhook, Save } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Button,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from '../components/ui';
+
+export default function SettingsPage() {
+  return (
+    <PageLayout
+      title="Settings"
+      subtitle="Manage your account and preferences"
+      icon={<Settings size={24} />}
+    >
+      <Tabs defaultValue="general">
+        <TabsList className="mb-6">
+          <TabsTrigger value="general">
+            <User size={16} /> General
+          </TabsTrigger>
+          <TabsTrigger value="notifications">
+            <Bell size={16} /> Notifications
+          </TabsTrigger>
+          <TabsTrigger value="security">
+            <Shield size={16} /> Security
+          </TabsTrigger>
+          <TabsTrigger value="integrations">
+            <Webhook size={16} /> Integrations
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="general" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Company Information</CardTitle>
+              <CardDescription>Basic company details</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label>Company Name</Label>
+                  <Input defaultValue="QuickLogistics Pro" />
+                </div>
+                <div>
+                  <Label>Contact Email</Label>
+                  <Input defaultValue="contact@quicklogistics.com" />
+                </div>
+                <div>
+                  <Label>Phone</Label>
+                  <Input defaultValue="+1-555-QUICK" />
+                </div>
+                <div>
+                  <Label>Website</Label>
+                  <Input defaultValue="https://quicklogistics.com" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Globe size={18} /> Localization
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <Label>Timezone</Label>
+                  <Select defaultValue="pst">
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="pst">Pacific Time (PST)</SelectItem>
+                      <SelectItem value="est">Eastern Time (EST)</SelectItem>
+                      <SelectItem value="utc">UTC</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label>Currency</Label>
+                  <Select defaultValue="usd">
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="usd">USD ($)</SelectItem>
+                      <SelectItem value="eur">EUR (€)</SelectItem>
+                      <SelectItem value="gbp">GBP (£)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label>Language</Label>
+                  <Select defaultValue="en">
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="en">English</SelectItem>
+                      <SelectItem value="es">Spanish</SelectItem>
+                      <SelectItem value="fr">French</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="notifications" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Email Notifications</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[
+                { label: 'Order updates', desc: 'Receive notifications for order status changes' },
+                { label: 'Delivery alerts', desc: 'Get notified about delivery issues' },
+                { label: 'System notifications', desc: 'Important system updates and maintenance' },
+                { label: 'Weekly reports', desc: 'Receive weekly performance summary' },
+              ].map((item) => (
+                <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>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="security" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Password</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label>Current Password</Label>
+                <Input type="password" />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label>New Password</Label>
+                  <Input type="password" />
+                </div>
+                <div>
+                  <Label>Confirm Password</Label>
+                  <Input type="password" />
+                </div>
+              </div>
+              <Button>Update Password</Button>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Two-Factor Authentication</CardTitle>
+              <CardDescription>Add an extra layer of security</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p>
+                    Status: <span className="text-red-500 font-medium">Disabled</span>
+                  </p>
+                </div>
+                <Button variant="outline">Enable 2FA</Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="integrations" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>API Keys</CardTitle>
+              <CardDescription>Manage your API access</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="p-4 bg-muted rounded-lg">
+                <p className="font-medium">Production API Key</p>
+                <code className="text-sm">pk_live_••••••••••••••••</code>
+              </div>
+              <Button variant="outline">Generate New Key</Button>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Connected Services</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {[
+                { name: 'Google Maps', status: 'Connected' },
+                { name: 'Stripe', status: 'Connected' },
+                { name: 'Twilio', status: 'Not Connected' },
+              ].map((s) => (
+                <div
+                  key={s.name}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <span>{s.name}</span>
+                  <Button variant={s.status === 'Connected' ? 'outline' : 'default'} size="sm">
+                    {s.status === 'Connected' ? 'Manage' : 'Connect'}
+                  </Button>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex justify-end">
+        <Button>
+          <Save size={16} /> Save Changes
+        </Button>
+      </div>
+    </PageLayout>
+  );
+}