@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/src/movethewheels/pages/SettingsPage.tsx

@@ -1,8 +1,12 @@
 /**
  * Settings Page
+ *
+ * Loads persisted module settings (Query.moduleSettings.preferences) and saves
+ * changes via updateModuleSettings. Integrations read "Not configured" until a
+ * real connection is recorded — no fabricated "Connected" statuses.
  */
 
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Settings, User, Bell, Shield, Globe, Webhook, Save } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import {
@@ -26,9 +30,116 @@ import {
   TabsContent,
 } from '../components/ui';
 import { EmphasisPanel, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';
+import { useModuleSettings, type ModulePreferences } from '../hooks/useSettings';
+
+interface CompanyPrefs {
+  name: string;
+  email: string;
+  phone: string;
+  website: string;
+}
+interface LocalizationPrefs {
+  timezone: string;
+  currency: string;
+  language: string;
+}
+interface NotificationPrefs {
+  orderUpdates: boolean;
+  deliveryAlerts: boolean;
+  systemNotifications: boolean;
+  weeklyReports: boolean;
+}
+interface SettingsForm {
+  company: CompanyPrefs;
+  localization: LocalizationPrefs;
+  notifications: NotificationPrefs;
+  twoFactorEnabled: boolean;
+  integrations: Record<string, boolean>;
+}
+
+const INTEGRATIONS = [
+  { key: 'googleMaps', name: 'Google Maps' },
+  { key: 'stripe', name: 'Stripe' },
+  { key: 'twilio', name: 'Twilio' },
+];
+
+const NOTIFICATION_ITEMS: { key: keyof NotificationPrefs; label: string; desc: string }[] = [
+  {
+    key: 'orderUpdates',
+    label: 'Order updates',
+    desc: 'Receive notifications for order status changes',
+  },
+  { key: 'deliveryAlerts', label: 'Delivery alerts', desc: 'Get notified about delivery issues' },
+  {
+    key: 'systemNotifications',
+    label: 'System notifications',
+    desc: 'Important system updates and maintenance',
+  },
+  { key: 'weeklyReports', label: 'Weekly reports', desc: 'Receive weekly performance summary' },
+];
+
+function toForm(preferences: ModulePreferences): SettingsForm {
+  const company = (preferences.company as Partial<CompanyPrefs> | undefined) ?? {};
+  const localization = (preferences.localization as Partial<LocalizationPrefs> | undefined) ?? {};
+  const notifications = (preferences.notifications as Partial<NotificationPrefs> | undefined) ?? {};
+  const security = (preferences.security as { twoFactorEnabled?: boolean } | undefined) ?? {};
+  const integrations = (preferences.integrations as Record<string, boolean> | undefined) ?? {};
+  return {
+    company: {
+      name: company.name ?? '',
+      email: company.email ?? '',
+      phone: company.phone ?? '',
+      website: company.website ?? '',
+    },
+    localization: {
+      timezone: localization.timezone ?? 'utc',
+      currency: localization.currency ?? 'usd',
+      language: localization.language ?? 'en',
+    },
+    notifications: {
+      orderUpdates: notifications.orderUpdates ?? true,
+      deliveryAlerts: notifications.deliveryAlerts ?? true,
+      systemNotifications: notifications.systemNotifications ?? true,
+      weeklyReports: notifications.weeklyReports ?? false,
+    },
+    twoFactorEnabled: security.twoFactorEnabled ?? false,
+    integrations,
+  };
+}
 
 export default function SettingsPage() {
+  const { preferences, isLoading, isSaving, error, savePreferences } = useModuleSettings();
   const [tab, setTab] = useState('general');
+  const [form, setForm] = useState<SettingsForm>(() => toForm({}));
+  const [saved, setSaved] = useState(false);
+
+  const loadedForm = useMemo(() => toForm(preferences), [preferences]);
+  useEffect(() => {
+    setForm(loadedForm);
+  }, [loadedForm]);
+
+  const patchCompany = (patch: Partial<CompanyPrefs>) =>
+    setForm((prev) => ({ ...prev, company: { ...prev.company, ...patch } }));
+  const patchLocalization = (patch: Partial<LocalizationPrefs>) =>
+    setForm((prev) => ({ ...prev, localization: { ...prev.localization, ...patch } }));
+  const toggleNotification = (key: keyof NotificationPrefs, value: boolean) =>
+    setForm((prev) => ({ ...prev, notifications: { ...prev.notifications, [key]: value } }));
+
+  const handleSave = async () => {
+    setSaved(false);
+    try {
+      await savePreferences({
+        company: form.company,
+        localization: form.localization,
+        notifications: form.notifications,
+        security: { twoFactorEnabled: form.twoFactorEnabled },
+        integrations: form.integrations,
+      });
+      setSaved(true);
+    } catch {
+      // error surfaced via the hook's `error`
+    }
+  };
 
   return (
     <PageLayout
@@ -43,6 +154,19 @@ export default function SettingsPage() {
         expect.
       </PagePurpose>
 
+      {(saved || error) && (
+        <div
+          role="status"
+          className={`rounded-lg p-3 text-sm ${
+            error
+              ? 'bg-status-error-bg-subtle text-status-error-text'
+              : 'bg-status-success-bg-subtle text-status-success-text'
+          }`}
+        >
+          {error ? error.message : 'Settings saved.'}
+        </div>
+      )}
+
       <NextSteps
         storageKey="movethewheels-settings"
         steps={[
@@ -101,19 +225,40 @@ export default function SettingsPage() {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <Label>Company Name</Label>
-                <Input defaultValue="QuickLogistics Pro" />
+                <Input
+                  value={form.company.name}
+                  placeholder="Your company name"
+                  disabled={isLoading}
+                  onChange={(e) => patchCompany({ name: e.target.value })}
+                />
               </div>
               <div>
                 <Label>Contact Email</Label>
-                <Input defaultValue="contact@quicklogistics.com" />
+                <Input
+                  type="email"
+                  value={form.company.email}
+                  placeholder="contact@example.com"
+                  disabled={isLoading}
+                  onChange={(e) => patchCompany({ email: e.target.value })}
+                />
               </div>
               <div>
                 <Label>Phone</Label>
-                <Input defaultValue="+1-555-QUICK" />
+                <Input
+                  value={form.company.phone}
+                  placeholder="+1-555-0100"
+                  disabled={isLoading}
+                  onChange={(e) => patchCompany({ phone: e.target.value })}
+                />
               </div>
               <div>
                 <Label>Website</Label>
-                <Input defaultValue="https://quicklogistics.com" />
+                <Input
+                  value={form.company.website}
+                  placeholder="https://example.com"
+                  disabled={isLoading}
+                  onChange={(e) => patchCompany({ website: e.target.value })}
+                />
               </div>
             </div>
           </EmphasisPanel>
@@ -128,7 +273,10 @@ export default function SettingsPage() {
               <div className="grid grid-cols-3 gap-4">
                 <div>
                   <Label>Timezone</Label>
-                  <Select defaultValue="pst">
+                  <Select
+                    value={form.localization.timezone}
+                    onValueChange={(value) => patchLocalization({ timezone: value })}
+                  >
                     <SelectTrigger>
                       <SelectValue />
                     </SelectTrigger>
@@ -141,7 +289,10 @@ export default function SettingsPage() {
                 </div>
                 <div>
                   <Label>Currency</Label>
-                  <Select defaultValue="usd">
+                  <Select
+                    value={form.localization.currency}
+                    onValueChange={(value) => patchLocalization({ currency: value })}
+                  >
                     <SelectTrigger>
                       <SelectValue />
                     </SelectTrigger>
@@ -154,7 +305,10 @@ export default function SettingsPage() {
                 </div>
                 <div>
                   <Label>Language</Label>
-                  <Select defaultValue="en">
+                  <Select
+                    value={form.localization.language}
+                    onValueChange={(value) => patchLocalization({ language: value })}
+                  >
                     <SelectTrigger>
                       <SelectValue />
                     </SelectTrigger>
@@ -176,18 +330,17 @@ export default function SettingsPage() {
               <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">
+              {NOTIFICATION_ITEMS.map((item) => (
+                <div key={item.key} className="flex items-center justify-between">
                   <div>
                     <p className="font-medium">{item.label}</p>
                     <p className="text-sm text-text-secondary">{item.desc}</p>
                   </div>
-                  <Switch defaultChecked />
+                  <Switch
+                    checked={form.notifications[item.key]}
+                    disabled={isLoading}
+                    onCheckedChange={(value) => toggleNotification(item.key, value)}
+                  />
                 </div>
               ))}
             </CardContent>
@@ -198,23 +351,26 @@ export default function SettingsPage() {
           <Card>
             <CardHeader>
               <CardTitle>Password</CardTitle>
+              <CardDescription>
+                Passwords are managed by your workspace identity provider.
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <Label>Current Password</Label>
-                <Input type="password" />
+                <Input type="password" autoComplete="current-password" />
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <Label>New Password</Label>
-                  <Input type="password" />
+                  <Input type="password" autoComplete="new-password" />
                 </div>
                 <div>
                   <Label>Confirm Password</Label>
-                  <Input type="password" />
+                  <Input type="password" autoComplete="new-password" />
                 </div>
               </div>
-              <Button>Update Password</Button>
+              <Button variant="outline">Update Password</Button>
             </CardContent>
           </Card>
           <Card>
@@ -224,59 +380,81 @@ export default function SettingsPage() {
             </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>
+                <p>
+                  Status:{' '}
+                  <span
+                    className={`font-medium ${
+                      form.twoFactorEnabled
+                        ? 'text-status-success-text'
+                        : 'text-status-warning-text'
+                    }`}
+                  >
+                    {form.twoFactorEnabled ? 'Enabled' : 'Disabled'}
+                  </span>
+                </p>
+                <Button
+                  variant="outline"
+                  disabled={isSaving}
+                  onClick={() =>
+                    setForm((prev) => ({ ...prev, twoFactorEnabled: !prev.twoFactorEnabled }))
+                  }
+                >
+                  {form.twoFactorEnabled ? 'Disable 2FA' : '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-bg-sunken 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>
+              <CardDescription>
+                Connect the providers that power maps, payments and messaging.
+              </CardDescription>
             </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>
-              ))}
+              {INTEGRATIONS.map((service) => {
+                const connected = form.integrations[service.key] === true;
+                return (
+                  <div
+                    key={service.key}
+                    className="flex items-center justify-between p-3 border rounded-lg"
+                  >
+                    <div>
+                      <span className="font-medium">{service.name}</span>
+                      <p className="text-sm text-text-secondary">
+                        {connected ? 'Connected' : 'Not configured'}
+                      </p>
+                    </div>
+                    <Button
+                      variant={connected ? 'outline' : 'default'}
+                      size="sm"
+                      disabled={isSaving}
+                      onClick={() =>
+                        setForm((prev) => ({
+                          ...prev,
+                          integrations: {
+                            ...prev.integrations,
+                            [service.key]: !connected,
+                          },
+                        }))
+                      }
+                    >
+                      {connected ? 'Disconnect' : 'Connect'}
+                    </Button>
+                  </div>
+                );
+              })}
             </CardContent>
           </Card>
         </TabsContent>
       </Tabs>
 
       <div className="flex justify-end">
-        <Button>
-          <Save size={16} /> Save Changes
+        <Button onClick={() => void handleSave()} disabled={isSaving || isLoading}>
+          <Save size={16} /> {isSaving ? 'Saving…' : 'Save Changes'}
         </Button>
       </div>
     </PageLayout>

package/src/movethewheels/pages/TrackingPage.tsx

@@ -308,20 +308,20 @@ export default function TrackingPage() {
                         key={alert.id}
                         className={`flex items-start gap-3 p-3 rounded-lg ${
                           alert.severity === 'critical'
-                            ? 'bg-red-50 dark:bg-red-900/20'
+                            ? 'bg-status-error-bg-subtle'
                             : alert.severity === 'high'
-                              ? 'bg-orange-50 dark:bg-orange-900/20'
-                              : 'bg-yellow-50 dark:bg-yellow-900/20'
+                              ? 'bg-status-warning-bg-subtle'
+                              : 'bg-status-warning-bg-subtle'
                         }`}
                       >
                         <AlertCircle
                           size={16}
                           className={
                             alert.severity === 'critical'
-                              ? 'text-red-600'
+                              ? 'text-status-error-text'
                               : alert.severity === 'high'
-                                ? 'text-orange-600'
-                                : 'text-yellow-600'
+                                ? 'text-status-warning-text'
+                                : 'text-status-warning-text'
                           }
                         />
                         <div>

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -2,8 +2,9 @@
  * Vehicle Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit } from 'lucide-react';
+import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
@@ -14,12 +15,166 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useVehicle } from '../hooks/useFleet';
+import { useVehicle, useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+const VEHICLE_TYPE_OPTIONS = [
+  { value: 'TRUCK', label: 'Truck' },
+  { value: 'VAN', label: 'Van' },
+  { value: 'MOTORCYCLE', label: 'Motorcycle' },
+  { value: 'BICYCLE', label: 'Bicycle' },
+  { value: 'FLATBED', label: 'Flatbed' },
+  { value: 'REFRIGERATED', label: 'Refrigerated' },
+  { value: 'SEMI_TRAILER', label: 'Semi-Trailer' },
+  { value: 'DRONE', label: 'Drone' },
+];
+
+function NewVehicleForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createVehicle } = useFleet();
+  const [form, setForm] = useState({
+    vehicleNumber: '',
+    type: 'VAN',
+    make: '',
+    model: '',
+    licensePlate: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.vehicleNumber.trim()) {
+      setError('Vehicle number is required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const created = await createVehicle({
+        vehicleNumber: form.vehicleNumber.trim(),
+        type: form.type,
+        make: form.make.trim() || undefined,
+        model: form.model.trim() || undefined,
+        licensePlate: form.licensePlate.trim() || undefined,
+      });
+      navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create vehicle:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create vehicle. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Vehicle"
+      subtitle="Register a new vehicle in your fleet"
+      icon={<Truck size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {submitting ? 'Saving...' : 'Add Vehicle'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Truck size={18} />}>
+        Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and type
+        to start — make, model and plate help identify it on the road.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Vehicle Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="vehicleNumber">
+                  Vehicle Number <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="vehicleNumber"
+                  value={form.vehicleNumber}
+                  onChange={(e) => setForm((prev) => ({ ...prev, vehicleNumber: e.target.value }))}
+                  placeholder="MTW-001"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">
+                  Type <span className="text-status-error-text">*</span>
+                </Label>
+                <Select
+                  value={form.type}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, type: value }))}
+                >
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {VEHICLE_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="make">Make</Label>
+                <Input
+                  id="make"
+                  value={form.make}
+                  onChange={(e) => setForm((prev) => ({ ...prev, make: e.target.value }))}
+                  placeholder="Ford"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="model">Model</Label>
+                <Input
+                  id="model"
+                  value={form.model}
+                  onChange={(e) => setForm((prev) => ({ ...prev, model: e.target.value }))}
+                  placeholder="Transit"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="licensePlate">License Plate</Label>
+                <Input
+                  id="licensePlate"
+                  value={form.licensePlate}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licensePlate: e.target.value }))}
+                  placeholder="ABC-1234"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function VehicleDetailsPage() {
   const { vehicleId } = useParams<{ vehicleId: string }>();
@@ -29,6 +184,7 @@ export default function VehicleDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!vehicleId) return <NewVehicleForm />;
   if (isLoading) return <LoadingState message="Loading vehicle details..." />;
   if (error || !vehicle) return <ErrorState title="Vehicle not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -95,7 +95,11 @@ export default function VehiclesPage() {
       icon={<Truck size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Vehicle', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Vehicle',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('fleet/vehicles/new'),
+          }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
             { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },