@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

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/providers/MoveTheWheelsProvider.tsx

@@ -8,6 +8,7 @@
 import { createContext, useContext, useMemo, type FC, type PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { MoveTheWheelsRootProps, MoveTheWheelsContextValue } from '../types';
+import { joinPath } from '../utils/navigation';
 
 const MoveTheWheelsContext = createContext<MoveTheWheelsContextValue | null>(null);
 
@@ -54,13 +55,13 @@ export function useMoveTheWheelsNavigate(): (path: string) => void {
   const { navigate, basePath } = useMoveTheWheels();
 
   return (path: string) => {
-    // If path is absolute (starts with /), use it directly
-    // Otherwise, prepend basePath
-    if (path.startsWith('/')) {
+    // Genuine external URLs (http/https or protocol-relative) pass through
+    // untouched. Everything else is an in-app path and MUST be resolved against
+    // basePath — otherwise a leading "/" would escape the microfrontend mount.
+    if (/^(https?:)?\/\//i.test(path)) {
       navigate(path);
-    } else {
-      const cleanBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
-      navigate(`${cleanBase}/${path}`);
+      return;
     }
+    navigate(joinPath(basePath, path));
   };
 }

package/src/movethewheels/store/movethewheelsStore.ts

@@ -2,7 +2,7 @@
  * MoveTheWheels Zustand Store
  *
  * Manages UI state for the microfrontend.
- * Server/entity data comes from hooks with mock data (ready for GraphQL replacement).
+ * Server/entity data comes from hooks that query the live backend via GraphQL.
  */
 
 import { create } from 'zustand';