@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/DriverDetailsPage-whEMOWs9.js

@@ -0,0 +1,490 @@
+import { A as e, M as t, d as n, f as r, g as i, h as a, i as o, j as s, l as c, lt as l, n as u, r as d, st as f, u as p } from "./PageLayout-BniRJaQ6.js";
+import { t as m } from "./arrow-left-ClW4Isj7.js";
+import { t as h } from "./clock-dRGG4rkF.js";
+import { t as g } from "./dollar-sign-B6RoYHHz.js";
+import { t as _ } from "./DocumentsCard-edDkgnJj.js";
+import { t as v } from "./file-text-BuDx4hZp.js";
+import { t as y } from "./map-pin-CqN1bbT1.js";
+import { t as b } from "./save-UDlog7hg.js";
+import { t as x } from "./square-pen-BcfB3Grd.js";
+import { t as S } from "./star-CVZHFwDx.js";
+import { t as C } from "./users-B8KhJBGg.js";
+import { r as w, t as T } from "./useFleet-g5Yri0G8.js";
+import { r as E } from "./StatusBadge-BNHXYvZx.js";
+import { t as D } from "./FormError-BKcb_wT-.js";
+import { n as O, r as k } from "./formatters-FWJDwTFv.js";
+import { useState as A } from "react";
+import { useParams as j } from "react-router-dom";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+import { EmphasisPanel as P, NextSteps as F, PagePurpose as I } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/DriverDetailsPage.tsx
+function L() {
+	let { basePath: t, navigate: n } = f(), { createDriver: r } = w(), [i, a] = A({
+		employeeId: "",
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		licenseNumber: ""
+	}), [c, u] = A(!1), [d, h] = A(null), g = () => n?.(l(t, "fleet/drivers")), _ = async (e) => {
+		if (e.preventDefault(), !i.employeeId.trim() || !i.firstName.trim() || !i.lastName.trim()) {
+			h("Employee ID, first name and last name are required.");
+			return;
+		}
+		u(!0), h(null);
+		try {
+			let e = await r({
+				employeeId: i.employeeId.trim(),
+				firstName: i.firstName.trim(),
+				lastName: i.lastName.trim(),
+				email: i.email.trim() || void 0,
+				phone: i.phone.trim() || void 0,
+				licenseNumber: i.licenseNumber.trim() || void 0
+			});
+			n?.(l(t, `fleet/drivers/${e.id}`));
+		} catch (e) {
+			console.error("Failed to create driver:", e), h(e instanceof Error ? e.message : "Failed to create driver. Please try again."), u(!1);
+		}
+	};
+	return /* @__PURE__ */ N(o, {
+		title: "Add Driver",
+		subtitle: "Add a driver to your workforce",
+		icon: /* @__PURE__ */ M(C, { size: 24 }),
+		headerActions: /* @__PURE__ */ N("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ N(p, {
+				variant: "outline",
+				onClick: g,
+				disabled: c,
+				children: [/* @__PURE__ */ M(m, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ N(p, {
+				onClick: _,
+				disabled: c,
+				children: [
+					/* @__PURE__ */ M(b, { size: 16 }),
+					" ",
+					c ? "Saving..." : "Add Driver"
+				]
+			})]
+		}),
+		children: [/* @__PURE__ */ M(I, {
+			icon: /* @__PURE__ */ M(C, { size: 18 }),
+			children: "Add a driver so they can be assigned to orders and routes. An employee ID and name get them on the roster — add contact details and license number to keep the record complete."
+		}), /* @__PURE__ */ N("form", {
+			onSubmit: _,
+			className: "max-w-2xl space-y-6",
+			children: [/* @__PURE__ */ M(D, { message: d }), /* @__PURE__ */ N(P, { children: [/* @__PURE__ */ M("h2", {
+				className: "text-base font-semibold text-text-primary mb-4",
+				children: "Driver Details"
+			}), /* @__PURE__ */ N("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ N("div", {
+					className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(s, {
+								htmlFor: "employeeId",
+								children: ["Employee ID ", /* @__PURE__ */ M("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ M(e, {
+								id: "employeeId",
+								value: i.employeeId,
+								onChange: (e) => a((t) => ({
+									...t,
+									employeeId: e.target.value
+								})),
+								placeholder: "EMP-001",
+								required: !0
+							})]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(s, {
+								htmlFor: "firstName",
+								children: ["First Name ", /* @__PURE__ */ M("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ M(e, {
+								id: "firstName",
+								value: i.firstName,
+								onChange: (e) => a((t) => ({
+									...t,
+									firstName: e.target.value
+								})),
+								placeholder: "Jane",
+								required: !0
+							})]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ N(s, {
+								htmlFor: "lastName",
+								children: ["Last Name ", /* @__PURE__ */ M("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ M(e, {
+								id: "lastName",
+								value: i.lastName,
+								onChange: (e) => a((t) => ({
+									...t,
+									lastName: e.target.value
+								})),
+								placeholder: "Doe",
+								required: !0
+							})]
+						})
+					]
+				}), /* @__PURE__ */ N("div", {
+					className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ M(s, {
+								htmlFor: "email",
+								children: "Email"
+							}), /* @__PURE__ */ M(e, {
+								id: "email",
+								type: "email",
+								value: i.email,
+								onChange: (e) => a((t) => ({
+									...t,
+									email: e.target.value
+								})),
+								placeholder: "jane.doe@example.com"
+							})]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ M(s, {
+								htmlFor: "phone",
+								children: "Phone"
+							}), /* @__PURE__ */ M(e, {
+								id: "phone",
+								value: i.phone,
+								onChange: (e) => a((t) => ({
+									...t,
+									phone: e.target.value
+								})),
+								placeholder: "+1-555-0100"
+							})]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ M(s, {
+								htmlFor: "licenseNumber",
+								children: "License Number"
+							}), /* @__PURE__ */ M(e, {
+								id: "licenseNumber",
+								value: i.licenseNumber,
+								onChange: (e) => a((t) => ({
+									...t,
+									licenseNumber: e.target.value
+								})),
+								placeholder: "D1234567"
+							})]
+						})
+					]
+				})]
+			})] })]
+		})]
+	});
+}
+function R() {
+	let { driverId: e } = j(), { basePath: s, navigate: b } = f(), { driver: w, isLoading: D, error: A, refetch: R } = T(e), z = () => b?.(l(s, "fleet/drivers")), B = (e) => b?.(l(s, e));
+	return e ? D ? /* @__PURE__ */ M(d, { message: "Loading driver details..." }) : A || !w ? /* @__PURE__ */ M(u, {
+		title: "Driver not found",
+		onRetry: R
+	}) : /* @__PURE__ */ N(o, {
+		title: w.fullName,
+		subtitle: `Employee ID: ${w.employeeId}`,
+		icon: /* @__PURE__ */ M(C, { size: 24 }),
+		headerActions: /* @__PURE__ */ N("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ N(p, {
+				variant: "outline",
+				onClick: z,
+				children: [/* @__PURE__ */ M(m, { size: 16 }), " Back"]
+			}), /* @__PURE__ */ N(p, { children: [/* @__PURE__ */ M(x, { size: 16 }), " Edit"] })]
+		}),
+		headerContent: /* @__PURE__ */ N("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ M(E, {
+				status: w.status,
+				type: "driver"
+			}), /* @__PURE__ */ N("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ M(S, {
+						size: 16,
+						className: "text-status-warning-text fill-current"
+					}),
+					/* @__PURE__ */ M("span", {
+						className: "font-medium",
+						children: w.ratings.overall.toFixed(1)
+					}),
+					/* @__PURE__ */ N("span", {
+						className: "text-text-secondary",
+						children: [
+							"(",
+							w.ratings.totalRatings,
+							" ratings)"
+						]
+					})
+				]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ M(I, {
+				icon: /* @__PURE__ */ M(C, { size: 18 }),
+				children: "A driver's full profile — performance ratings, working hours, documents, earnings and live location. Use it to confirm someone is road-ready and compliant before assigning them an order or route."
+			}),
+			/* @__PURE__ */ M(F, {
+				storageKey: "movethewheels-driver-details",
+				steps: [
+					{
+						id: "assign",
+						label: "Assign to an order",
+						description: "Hand a pending delivery to this driver.",
+						icon: /* @__PURE__ */ M(y, { size: 16 }),
+						onClick: () => B("orders")
+					},
+					{
+						id: "routes",
+						label: "Plan their route",
+						description: "Batch nearby drop-offs into an optimized itinerary.",
+						icon: /* @__PURE__ */ M(h, { size: 16 }),
+						onClick: () => B("routes")
+					},
+					{
+						id: "edit",
+						label: "Update driver record",
+						description: "Refresh documents, shift or compliance details.",
+						icon: /* @__PURE__ */ M(x, { size: 16 }),
+						onClick: () => {}
+					}
+				]
+			}),
+			/* @__PURE__ */ N("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ N("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ N(P, { children: [/* @__PURE__ */ N("h2", {
+							className: "flex items-center gap-2 text-base font-semibold text-text-primary mb-4",
+							children: [/* @__PURE__ */ M(S, { size: 18 }), " Ratings"]
+						}), /* @__PURE__ */ M("div", {
+							className: "grid grid-cols-2 md:grid-cols-3 gap-4",
+							children: [
+								{
+									label: "Punctuality",
+									value: w.ratings.punctuality
+								},
+								{
+									label: "Communication",
+									value: w.ratings.communication
+								},
+								{
+									label: "Handling",
+									value: w.ratings.carefulHandling
+								},
+								{
+									label: "Professionalism",
+									value: w.ratings.professionalism
+								},
+								{
+									label: "On-Time Delivery",
+									value: w.ratings.onTimeDelivery
+								}
+							].map((e) => /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-sm text-text-secondary",
+								children: e.label
+							}), /* @__PURE__ */ N("div", {
+								className: "flex items-center gap-2 mt-1",
+								children: [/* @__PURE__ */ M(t, {
+									value: e.value * 20,
+									className: "flex-1 h-2"
+								}), /* @__PURE__ */ M("span", {
+									className: "text-sm font-medium",
+									children: e.value.toFixed(1)
+								})]
+							})] }, e.label))
+						})] }),
+						/* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ N(i, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ M(h, { size: 18 }), " Working Hours"]
+						}) }), /* @__PURE__ */ M(r, { children: /* @__PURE__ */ N("div", {
+							className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+							children: [
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Shift"
+								}), /* @__PURE__ */ N("p", {
+									className: "font-medium",
+									children: [
+										w.workingHours.startTime,
+										" - ",
+										w.workingHours.endTime
+									]
+								})] }),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Working Days"
+								}), /* @__PURE__ */ N("p", {
+									className: "font-medium",
+									children: [w.workingHours.workingDays.length, " days/week"]
+								})] }),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Hours Today"
+								}), /* @__PURE__ */ N("p", {
+									className: "font-medium",
+									children: [
+										w.workingHours.currentHoursToday,
+										"h / ",
+										w.workingHours.maxHoursPerDay,
+										"h"
+									]
+								})] }),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Hours This Week"
+								}), /* @__PURE__ */ N("p", {
+									className: "font-medium",
+									children: [
+										w.workingHours.currentHoursThisWeek,
+										"h /",
+										" ",
+										w.workingHours.maxHoursPerWeek,
+										"h"
+									]
+								})] })
+							]
+						}) })] }),
+						/* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ N(i, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ M(v, { size: 18 }), " License"]
+						}) }), /* @__PURE__ */ M(r, { children: /* @__PURE__ */ M("div", {
+							className: "flex items-center justify-between p-3 border rounded-lg",
+							children: /* @__PURE__ */ N("div", { children: [
+								/* @__PURE__ */ M("p", {
+									className: "font-medium",
+									children: "Driver's License"
+								}),
+								/* @__PURE__ */ N("p", {
+									className: "text-sm text-text-secondary",
+									children: [w.licenseNumber || "—", w.licenseType ? ` - ${w.licenseType}` : ""]
+								}),
+								/* @__PURE__ */ N("p", {
+									className: "text-sm text-text-secondary",
+									children: ["Expires: ", k(w.licenseExpiry)]
+								})
+							] })
+						}) })] }),
+						/* @__PURE__ */ M(_, {
+							entityType: "driver",
+							entityId: w.id
+						})
+					]
+				}), /* @__PURE__ */ N("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ M(i, { children: "Statistics" }) }), /* @__PURE__ */ N(r, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Total Deliveries"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold",
+									children: w.completedOrders.toLocaleString()
+								})] }),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Today's Deliveries"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold",
+									children: w.todayOrders
+								})] }),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Join Date"
+								}), /* @__PURE__ */ M("p", {
+									className: "font-medium",
+									children: k(w.joinDate)
+								})] })
+							]
+						})] }),
+						/* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ N(i, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ M(g, { size: 18 }), " Earnings"]
+						}) }), /* @__PURE__ */ N(r, {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Total Earnings"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold",
+									children: O(w.earnings.totalEarnings)
+								})] }),
+								/* @__PURE__ */ N("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+										className: "text-sm text-text-secondary",
+										children: "This Week"
+									}), /* @__PURE__ */ M("p", {
+										className: "font-medium",
+										children: O(w.earnings.weeklyEarnings)
+									})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+										className: "text-sm text-text-secondary",
+										children: "This Month"
+									}), /* @__PURE__ */ M("p", {
+										className: "font-medium",
+										children: O(w.earnings.monthlyEarnings)
+									})] })]
+								}),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm text-text-secondary",
+									children: "Base Salary"
+								}), /* @__PURE__ */ N("p", {
+									className: "font-medium",
+									children: [O(w.baseSalary), "/year"]
+								})] })
+							]
+						})] }),
+						w.currentLocation && /* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ N(i, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ M(y, { size: 18 }), " Current Location"]
+						}) }), /* @__PURE__ */ N(r, { children: [/* @__PURE__ */ M("p", {
+							className: "text-sm",
+							children: w.currentLocation.address || "Location updating..."
+						}), /* @__PURE__ */ N("p", {
+							className: "text-xs text-text-secondary mt-1",
+							children: ["Updated ", k(w.currentLocation.timestamp || /* @__PURE__ */ new Date(), "relative")]
+						})] })] }),
+						/* @__PURE__ */ N(n, { children: [/* @__PURE__ */ M(a, { children: /* @__PURE__ */ M(i, { children: "Compliance Status" }) }), /* @__PURE__ */ M(r, {
+							className: "space-y-2",
+							children: Object.entries(w.compliance).filter(([e]) => e !== "lastUpdate").map(([e, t]) => /* @__PURE__ */ N("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ M("span", {
+									className: "text-sm capitalize",
+									children: e.replace(/([A-Z])/g, " $1")
+								}), /* @__PURE__ */ M(c, {
+									variant: t ? "default" : "destructive",
+									children: t ? "Compliant" : "Non-compliant"
+								})]
+							}, e))
+						})] })
+					]
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ M(L, {});
+}
+//#endregion
+export { R as default };