@burdenoff/microfe-movethewheels 2026.929.3 → 2026.929.4

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   Warehouse,
   ChevronLeft,
   ChevronRight,
+  Trash2,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
@@ -26,8 +27,20 @@ import {
   Badge,
   Input,
   Label,
+  Textarea,
+  Checkbox,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { useProduct, useInventory, useProductStockLevels } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -42,9 +55,18 @@ function NewProductForm({ editId }: { editId?: string }) {
   const [form, setForm] = useState({
     name: '',
     sku: '',
+    description: '',
     category: '',
     brand: '',
+    length: '',
+    width: '',
+    height: '',
+    dimensionUnit: '',
     weight: '',
+    value: '',
+    hazardous: false,
+    fragile: false,
+    temperatureControlled: false,
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -54,9 +76,18 @@ function NewProductForm({ editId }: { editId?: string }) {
       setForm({
         name: product.name ?? '',
         sku: product.sku ?? '',
+        description: product.description ?? '',
         category: product.category ?? '',
         brand: product.brand ?? '',
-        weight: product.weight != null ? String(product.weight) : '',
+        length: product.dimensions?.length !== undefined ? String(product.dimensions.length) : '',
+        width: product.dimensions?.width !== undefined ? String(product.dimensions.width) : '',
+        height: product.dimensions?.height !== undefined ? String(product.dimensions.height) : '',
+        dimensionUnit: product.dimensions?.unit ?? '',
+        weight: product.weight !== undefined ? String(product.weight) : '',
+        value: product.value !== undefined ? String(product.value) : '',
+        hazardous: product.hazardous,
+        fragile: product.fragile,
+        temperatureControlled: product.temperatureControlled,
       });
     }
   }, [editId, product]);
@@ -72,24 +103,42 @@ function NewProductForm({ editId }: { editId?: string }) {
     setSubmitting(true);
     setError(null);
     try {
-      const weight = form.weight.trim() ? Number(form.weight) : undefined;
+      const parseNumber = (value: string): number | undefined => {
+        if (!value.trim()) return undefined;
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+      };
+      const dimensions =
+        form.length.trim() || form.width.trim() || form.height.trim() || form.dimensionUnit.trim()
+          ? {
+              ...(parseNumber(form.length) !== undefined
+                ? { length: parseNumber(form.length) }
+                : {}),
+              ...(parseNumber(form.width) !== undefined ? { width: parseNumber(form.width) } : {}),
+              ...(parseNumber(form.height) !== undefined
+                ? { height: parseNumber(form.height) }
+                : {}),
+              ...(form.dimensionUnit.trim() ? { unit: form.dimensionUnit.trim() } : {}),
+            }
+          : undefined;
+      const input = {
+        name: form.name.trim(),
+        sku: form.sku.trim(),
+        description: form.description.trim() || (isEditing ? null : undefined),
+        category: form.category.trim() || (isEditing ? null : undefined),
+        brand: form.brand.trim() || (isEditing ? null : undefined),
+        dimensions: dimensions ?? (isEditing ? null : undefined),
+        weight: parseNumber(form.weight) ?? (isEditing ? null : undefined),
+        value: parseNumber(form.value) ?? (isEditing ? null : undefined),
+        hazardous: form.hazardous,
+        fragile: form.fragile,
+        temperatureControlled: form.temperatureControlled,
+      };
       if (isEditing && editId) {
-        const updated = await updateProduct(editId, {
-          name: form.name.trim(),
-          sku: form.sku.trim(),
-          category: form.category.trim() || undefined,
-          brand: form.brand.trim() || undefined,
-          weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
-        });
+        const updated = await updateProduct(editId, input);
         navigate?.(joinPath(basePath, `inventory/products/${updated.id}`));
       } else {
-        const created = await createProduct({
-          name: form.name.trim(),
-          sku: form.sku.trim(),
-          category: form.category.trim() || undefined,
-          brand: form.brand.trim() || undefined,
-          weight: weight !== undefined && !Number.isNaN(weight) ? weight : undefined,
-        });
+        const created = await createProduct(input);
         navigate?.(joinPath(basePath, `inventory/products/${created.id}`));
       }
     } catch (err) {
@@ -177,6 +226,61 @@ function NewProductForm({ editId }: { editId?: string }) {
                   placeholder="Acme"
                 />
               </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={form.description}
+                onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
+                placeholder="Describe the item"
+                rows={3}
+              />
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {(
+                [
+                  ['length', 'Length'],
+                  ['width', 'Width'],
+                  ['height', 'Height'],
+                ] as const
+              ).map(([field, label]) => (
+                <div key={field} className="space-y-2">
+                  <Label htmlFor={field}>{label}</Label>
+                  <Input
+                    id={field}
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={form[field]}
+                    onChange={(e) => setForm((prev) => ({ ...prev, [field]: e.target.value }))}
+                    placeholder="Not provided"
+                  />
+                </div>
+              ))}
+              <div className="space-y-2">
+                <Label htmlFor="dimensionUnit">Dimension unit</Label>
+                <Input
+                  id="dimensionUnit"
+                  value={form.dimensionUnit}
+                  onChange={(e) => setForm((prev) => ({ ...prev, dimensionUnit: e.target.value }))}
+                  placeholder="cm"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="value">Unit value</Label>
+                <Input
+                  id="value"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={form.value}
+                  onChange={(e) => setForm((prev) => ({ ...prev, value: e.target.value }))}
+                  placeholder="Not provided"
+                />
+              </div>
               <div className="space-y-2">
                 <Label htmlFor="weight">Weight (kg)</Label>
                 <Input
@@ -186,10 +290,29 @@ function NewProductForm({ editId }: { editId?: string }) {
                   step="0.01"
                   value={form.weight}
                   onChange={(e) => setForm((prev) => ({ ...prev, weight: e.target.value }))}
-                  placeholder="0.5"
+                  placeholder="Not provided"
                 />
               </div>
             </div>
+            <div className="flex flex-wrap gap-4">
+              {(
+                [
+                  ['fragile', 'Fragile'],
+                  ['hazardous', 'Hazardous'],
+                  ['temperatureControlled', 'Temperature controlled'],
+                ] as const
+              ).map(([field, label]) => (
+                <label key={field} className="flex items-center gap-2 text-sm">
+                  <Checkbox
+                    checked={form[field]}
+                    onCheckedChange={(checked) =>
+                      setForm((prev) => ({ ...prev, [field]: checked === true }))
+                    }
+                  />
+                  {label}
+                </label>
+              ))}
+            </div>
           </div>
         </EmphasisPanel>
       </form>
@@ -201,7 +324,11 @@ export default function ProductDetailsPage() {
   const { productId } = useParams<{ productId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { product, isLoading, error, refetch } = useProduct(productId);
+  const { deleteProduct } = useInventory();
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
   // Where this item is actually stocked — inventoryItems(filter: { cargoItemId }).
   const [stockPage, setStockPage] = useState(0);
   const stockPageSize = 20;
@@ -223,6 +350,21 @@ export default function ProductDetailsPage() {
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+  const handleDelete = async () => {
+    if (!productId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteProduct(productId);
+      setDeleteOpen(false);
+      goBack();
+    } catch (deleteFailure) {
+      setDeleteError(
+        deleteFailure instanceof Error ? deleteFailure.message : 'Failed to delete product.'
+      );
+      setDeleting(false);
+    }
+  };
 
   if (!productId) return <NewProductForm />;
   if (isEditRoute) return <NewProductForm editId={productId} />;
@@ -248,7 +390,7 @@ export default function ProductDetailsPage() {
       }
       headerContent={
         <div className="flex gap-2">
-          <Badge variant="outline">{product.category}</Badge>
+          <Badge variant="outline">{product.category ?? 'Not provided'}</Badge>
           {product.brand && <Badge variant="secondary">{product.brand}</Badge>}
           {product.fragile && <Badge variant="destructive">Fragile</Badge>}
           {product.hazardous && <Badge variant="destructive">Hazardous</Badge>}
@@ -289,7 +431,7 @@ export default function ProductDetailsPage() {
               <CardTitle>Description</CardTitle>
             </CardHeader>
             <CardContent>
-              <p>{product.description}</p>
+              <p>{product.description ?? 'Not provided'}</p>
             </CardContent>
           </Card>
 
@@ -301,34 +443,24 @@ export default function ProductDetailsPage() {
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div>
-                  <p className="text-sm text-text-secondary">Length</p>
-                  <p className="text-2xl font-bold">
-                    {product.dimensions.length}
-                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
-                  </p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Width</p>
-                  <p className="text-2xl font-bold">
-                    {product.dimensions.width}
-                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
-                  </p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Height</p>
-                  <p className="text-2xl font-bold">
-                    {product.dimensions.height}
-                    <span className="text-sm font-normal"> {product.dimensions.unit}</span>
-                  </p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Weight</p>
-                  <p className="text-2xl font-bold">
-                    {product.weight}
-                    <span className="text-sm font-normal"> kg</span>
-                  </p>
-                </div>
+                {(
+                  [
+                    ['Length', product.dimensions?.length, product.dimensions?.unit],
+                    ['Width', product.dimensions?.width, product.dimensions?.unit],
+                    ['Height', product.dimensions?.height, product.dimensions?.unit],
+                    ['Weight', product.weight, 'kg'],
+                  ] as const
+                ).map(([label, value, unit]) => (
+                  <div key={label}>
+                    <p className="text-sm text-text-secondary">{label}</p>
+                    <p className="text-2xl font-bold">
+                      {value !== undefined ? value : 'Not provided'}
+                      {value !== undefined && unit && (
+                        <span className="text-sm font-normal"> {unit}</span>
+                      )}
+                    </p>
+                  </div>
+                ))}
               </div>
             </CardContent>
           </Card>
@@ -360,7 +492,9 @@ export default function ProductDetailsPage() {
             <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-3">
               <DollarSign size={18} /> Pricing
             </h2>
-            <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
+            <p className="text-3xl font-bold">
+              {product.value !== undefined ? formatCurrency(product.value) : 'Not provided'}
+            </p>
             <p className="text-sm text-text-secondary">Unit price</p>
           </EmphasisPanel>
 
@@ -466,8 +600,53 @@ export default function ProductDetailsPage() {
               )}
             </CardContent>
           </Card>
+
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Product
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this catalog item. Existing inventory records may prevent deletion.
+              </p>
+              <Button
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this product
+              </Button>
+            </CardContent>
+          </Card>
         </div>
       </div>
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this product?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {product.name} from the catalog and cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete product'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }

package/src/movethewheels/pages/ProductsPage.tsx

@@ -48,7 +48,9 @@ export default function ProductsPage() {
       cell: (row) => (
         <div>
           <p className="font-medium">{row.name}</p>
-          <p className="text-sm text-text-secondary line-clamp-1">{row.description}</p>
+          <p className="text-sm text-text-secondary line-clamp-1">
+            {row.description ?? 'Not provided'}
+          </p>
         </div>
       ),
     },
@@ -57,27 +59,33 @@ export default function ProductsPage() {
       header: 'Category',
       accessorKey: 'category',
       sortable: true,
-      cell: (row) => <Badge variant="outline">{row.category}</Badge>,
+      cell: (row) => <Badge variant="outline">{row.category ?? 'Not provided'}</Badge>,
     },
     {
       id: 'dimensions',
       header: 'Dimensions',
       cell: (row) =>
-        `${row.dimensions.length}x${row.dimensions.width}x${row.dimensions.height} ${row.dimensions.unit}`,
+        row.dimensions
+          ? `${row.dimensions.length ?? 'Not provided'}x${row.dimensions.width ?? 'Not provided'}x${row.dimensions.height ?? 'Not provided'}${row.dimensions.unit ? ` ${row.dimensions.unit}` : ''}`
+          : 'Not provided',
     },
     {
       id: 'weight',
       header: 'Weight',
       accessorKey: 'weight',
       sortable: true,
-      cell: (row) => `${row.weight} kg`,
+      cell: (row) => (row.weight !== undefined ? `${row.weight} kg` : 'Not provided'),
     },
     {
       id: 'value',
       header: 'Value',
       accessorKey: 'value',
       sortable: true,
-      cell: (row) => <span className="font-medium">{formatCurrency(row.value)}</span>,
+      cell: (row) => (
+        <span className="font-medium">
+          {row.value !== undefined ? formatCurrency(row.value) : 'Not provided'}
+        </span>
+      ),
     },
     {
       id: 'flags',

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -195,16 +195,14 @@ function NewRouteForm({ editId }: { editId?: string }) {
           country: '',
         },
         type: stop.type,
-        scheduledTime: new Date(),
-        duration: 0,
         status: 'pending',
       }));
       if (isEditing) {
         const updated = await updateRoute(editId, {
           name: form.name.trim(),
           status: form.status,
-          vehicleId: form.vehicleId || undefined,
-          driverId: form.driverId || undefined,
+          vehicleId: form.vehicleId || null,
+          driverId: form.driverId || null,
           stops,
         });
         navigate?.(joinPath(basePath, `routes/${updated.id}`));
@@ -542,8 +540,12 @@ export default function RouteDetailsPage() {
       headerContent={
         <div className="flex gap-2">
           <StatusBadge status={route.status} customColors={ROUTE_STATUS_COLORS[route.status]} />
-          <Badge variant={route.optimized ? 'default' : 'secondary'}>
-            {route.optimized ? 'Optimized' : 'Not Optimized'}
+          <Badge variant={route.optimized === true ? 'default' : 'secondary'}>
+            {route.optimized === undefined
+              ? 'Optimization unknown'
+              : route.optimized
+                ? 'Optimized'
+                : 'Not Optimized'}
           </Badge>
         </div>
       }
@@ -668,14 +670,20 @@ export default function RouteDetailsPage() {
                         </div>
                         <div className="text-right">
                           <p className="text-sm">
-                            Scheduled: {formatDate(stop.scheduledTime, 'time')}
+                            {stop.scheduledTime
+                              ? `Scheduled: ${formatDate(stop.scheduledTime, 'time')}`
+                              : 'Scheduled: Not provided'}
                           </p>
                           {stop.actualTime && (
                             <p className="text-sm text-status-success-text">
                               Actual: {formatDate(stop.actualTime, 'time')}
                             </p>
                           )}
-                          <p className="text-xs text-text-secondary">{stop.duration} min stop</p>
+                          <p className="text-xs text-text-secondary">
+                            {stop.duration !== undefined
+                              ? `${stop.duration} min stop`
+                              : 'Duration not provided'}
+                          </p>
                         </div>
                       </div>
                     </div>

package/src/movethewheels/pages/RoutesPage.tsx

@@ -88,8 +88,10 @@ export default function RoutesPage() {
       id: 'optimized',
       header: 'Optimized',
       cell: (row) => (
-        <Badge variant={row.optimized ? 'default' : 'outline'}>
-          {row.optimized ? 'Yes' : 'No'}
+        <Badge
+          variant={row.optimized === undefined ? 'outline' : row.optimized ? 'default' : 'outline'}
+        >
+          {row.optimized === undefined ? 'Unknown' : row.optimized ? 'Yes' : 'No'}
         </Badge>
       ),
     },

package/src/movethewheels/pages/TrackingPage.tsx

@@ -67,7 +67,7 @@ export default function TrackingPage() {
           ? {
               lat: coord.lat,
               lng: coord.lng,
-              timestamp: location.timestamp?.toISOString() ?? new Date().toISOString(),
+              timestamp: location.timestamp?.toISOString(),
             }
           : null;
       })
@@ -87,7 +87,7 @@ export default function TrackingPage() {
     const current: TrackEndpoint | null = currentCoord
       ? {
           ...currentCoord,
-          label: tracking?.currentLocation.address || 'Current position',
+          label: tracking?.currentLocation?.address || 'Current position',
         }
       : null;
 
@@ -222,7 +222,7 @@ export default function TrackingPage() {
                     {t('movethewheels.tracking.details.lastUpdated', 'Last Updated')}
                   </p>
                   <p className="font-medium">
-                    {tracking
+                    {tracking?.lastUpdated
                       ? formatDate(tracking.lastUpdated, 'relative')
                       : t('movethewheels.tracking.details.noUpdates', 'No tracking updates yet')}
                   </p>
@@ -416,7 +416,9 @@ export default function TrackingPage() {
                         <div>
                           <p className="text-sm font-medium">{alert.message}</p>
                           <p className="text-xs text-text-secondary">
-                            {formatDate(alert.timestamp, 'relative')}
+                            {alert.timestamp
+                              ? formatDate(alert.timestamp, 'relative')
+                              : t('movethewheels.tracking.alerts.timeUnknown', 'Time not recorded')}
                             {alert.resolvedAt &&
                               ` - ${t('movethewheels.tracking.alerts.resolved', 'Resolved')}`}
                           </p>
@@ -456,18 +458,31 @@ export default function TrackingPage() {
                     </p>
                   </div>
                 )}
-                {tracking && (
+                {tracking?.currentLocation ? (
                   <>
                     <p className="text-sm">
                       {tracking.currentLocation.address ||
                         t('movethewheels.tracking.location.updating', 'Location updating...')}
                     </p>
-                    <p className="text-xs text-text-secondary mt-1">
-                      {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
-                      {formatDate(tracking.currentLocation.timestamp || new Date(), 'relative')}
-                    </p>
+                    {tracking.currentLocation.timestamp ? (
+                      <p className="text-xs text-text-secondary mt-1">
+                        {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
+                        {formatDate(tracking.currentLocation.timestamp, 'relative')}
+                      </p>
+                    ) : (
+                      <p className="text-xs text-text-secondary mt-1">
+                        {t(
+                          'movethewheels.tracking.location.timeUnknown',
+                          'Update time not recorded'
+                        )}
+                      </p>
+                    )}
                   </>
-                )}
+                ) : tracking ? (
+                  <p className="text-sm text-text-secondary">
+                    {t('movethewheels.tracking.location.unknown', 'Location not recorded')}
+                  </p>
+                ) : null}
               </CardContent>
             </Card>