finsh user,car,driver pages also add validator layer to app build trip page

Components/car/CarFormModal.tsx

@@ -1,18 +1,23 @@
 "use client";
+// Components/Car/CarFormModal.tsx
 
 import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
 import { Alert, Spinner } from "../UI";
 import { get } from "../../services/api";
 import { getStoredToken } from "../../lib/auth";
+import { createCarSchema, updateCarSchema } from "@/validations/car.validator";
 import type {
   Car,
   CarFormErrors,
   CreateCarPayload,
+  InsuranceStatus,
   UpdateCarPayload,
 } from "../../types/car";
 import type { Branch } from "../../types/branch";
 
-// ── Shared input style ───────────────────────────────────────────────────────
+// ── Shared input style ────────────────────────────────────────────────────────
+
 const inputBase: React.CSSProperties = {
   width: "100%",
   height: 40,
@@ -41,34 +46,39 @@ const errorTextStyle: React.CSSProperties = {
   fontWeight: 500,
 };
 
-// ── Validation ───────────────────────────────────────────────────────────────
-function validate(form: Partial<CreateCarPayload>): CarFormErrors {
-  const e: CarFormErrors = {};
-  if (!form.manufacturer?.trim()) e.manufacturer = "الشركة المصنعة مطلوبة";
-  if (!form.model?.trim()) e.model = "الموديل مطلوب";
-  if (
-    !form.year ||
-    form.year < 1900 ||
-    form.year > new Date().getFullYear() + 1
-  )
-    e.year = "سنة غير صالحة";
-  if (!form.plateNumber?.trim()) e.plateNumber = "رقم اللوحة مطلوب";
-  if (!form.plateLetters?.trim()) e.plateLetters = "حروف اللوحة مطلوبة";
-  return e;
+// ── yup validation ────────────────────────────────────────────────────────────
+
+async function validate(
+  form: Partial<CreateCarPayload>,
+  isNew: boolean,
+): Promise<CarFormErrors> {
+  const schema = isNew ? createCarSchema : updateCarSchema;
+  try {
+    await schema.validate(form, { abortEarly: false });
+    return {};
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      return err.inner.reduce<CarFormErrors>((acc, e) => {
+        const field = e.path as keyof CarFormErrors;
+        if (field && !acc[field]) acc[field] = e.message;
+        return acc;
+      }, {});
+    }
+    return {};
+  }
 }
 
-// ── Date helper ──────────────────────────────────────────────────────────────
-// <input type="date"> gives "YYYY-MM-DD"; the backend z.string().datetime()
-// requires a full ISO-8601 string ("YYYY-MM-DDTHH:mm:ss.sssZ").
-// We keep state as the short form (so the input renders correctly) and convert
-// only at submit time.
+// ── Date helper ───────────────────────────────────────────────────────────────
+// <input type="date"> gives "YYYY-MM-DD"; backend expects full ISO-8601.
+
 function toIsoDateTime(val: string): string {
   if (!val) return val;
-  if (val.includes("T")) return val; // Already in ISO format, likely from an existing record — just return as-is.
-  return `${val}T00:00:00.000Z`; // transform "2026-12-31" → "2026-12-31T00:00:00.000Z"
+  if (val.includes("T")) return val;
+  return `${val}T00:00:00.000Z`;
 }
 
-// ── Props ────────────────────────────────────────────────────────────────────
+// ── Props ─────────────────────────────────────────────────────────────────────
+
 interface CarFormModalProps {
   editCar: Car | null;
   /** Pass pre-loaded branches or an empty array — the modal will auto-fetch if empty. */
@@ -80,7 +90,8 @@ interface CarFormModalProps {
   ) => Promise<boolean>;
 }
 
-// ── Component ────────────────────────────────────────────────────────────────
+// ── Component ─────────────────────────────────────────────────────────────────
+
 export function CarFormModal({
   editCar,
   branches: branchesProp,
@@ -104,13 +115,12 @@ export function CarFormModal({
         setBranches(list);
       })
       .catch(() => {
-        /* silently ignore — user can still submit */
+        /* silently ignore */
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // ── Form state — each field correctly typed ────────────────────────────────
-  // String fields
+  // ── Form state ─────────────────────────────────────────────────────────────
   const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
   const [model, setModel] = useState(editCar?.model ?? "");
   const [color, setColor] = useState(editCar?.color ?? "");
@@ -122,11 +132,11 @@ export function CarFormModal({
   );
   const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
   const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
-  const [currentStatus, setCurrentStatus] = useState(
+  const [currentStatus, setCurrentStatus] = useState<Car["currentStatus"]>(
     editCar?.currentStatus ?? "Active",
   );
-  const [insuranceStatus, setInsuranceStatus] = useState(
-    editCar?.insuranceStatus ?? "Valid",
+  const [insuranceStatus, setInsuranceStatus] = useState<InsuranceStatus>(
+    (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
   );
   const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
     editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
@@ -138,7 +148,6 @@ export function CarFormModal({
     editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
   );
   const [gpsDeviceId, setGpsDeviceId] = useState(editCar?.gpsDeviceId ?? "");
-  // Numeric fields — undefined when blank
   const [year, setYear] = useState<number | undefined>(
     editCar?.year ?? new Date().getFullYear(),
   );
@@ -165,11 +174,9 @@ export function CarFormModal({
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  // ── Number input helper ───────────────────────────────────────────────────
   const parseNum = (v: string): number | undefined =>
     v.trim() === "" ? undefined : Number(v);
 
-  // ── Input error style ─────────────────────────────────────────────────────
   const inputStyle = (field: keyof CarFormErrors): React.CSSProperties => ({
     ...inputBase,
     ...(errors[field]
@@ -181,26 +188,39 @@ export function CarFormModal({
     setErrors((p) => ({ ...p, [field]: undefined }));
 
   // ── Submit ────────────────────────────────────────────────────────────────
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    // Build a partial payload for validation (only required fields matter here)
-    const forValidation: Partial<CreateCarPayload> = {
+    // Build snapshot for yup — include all fields so optional rules also run
+    const formSnapshot: Partial<CreateCarPayload> = {
       manufacturer,
       model,
       year,
       plateNumber,
       plateLetters,
+      currentStatus,
+      insuranceStatus,
+      registrationNumber,
+      vinNumber,
+      ...(color && { color }),
+      ...(plateType && { plateType }),
+      ...(branchId && { branchId }),
+      ...(registrationExpiryDate && { registrationExpiryDate }),
+      ...(insuranceExpiryDate && { insuranceExpiryDate }),
+      ...(inspectionExpiryDate && { inspectionExpiryDate }),
+      ...(gpsDeviceId && { gpsDeviceId }),
+      ...(capacity !== undefined && { capacity }),
+      ...(weight !== undefined && { weight }),
     };
-    const errs = validate(forValidation);
+
+    const errs = await validate(formSnapshot, isNew);
     if (Object.keys(errs).length) {
       setErrors(errs);
       return;
     }
 
-    // Build the full payload — strip empty strings to avoid schema rejection.
-    // We use `unknown` cast here to satisfy TypeScript while we construct the
-    // object dynamically; the structure still fully matches CreateCarPayload.
+    // Build final payload — convert date strings to ISO-8601 for the backend
     const raw: Record<string, unknown> = {
       manufacturer,
       model,
@@ -209,8 +229,6 @@ export function CarFormModal({
       plateLetters,
       currentStatus,
     };
-
-    // Optional string fields — only include if non-empty
     if (color) raw.color = color;
     if (plateType) raw.plateType = plateType;
     if (registrationNumber) raw.registrationNumber = registrationNumber;
@@ -223,16 +241,11 @@ export function CarFormModal({
       raw.insuranceExpiryDate = toIsoDateTime(insuranceExpiryDate);
     if (inspectionExpiryDate)
       raw.inspectionExpiryDate = toIsoDateTime(inspectionExpiryDate);
-
     if (gpsDeviceId) raw.gpsDeviceId = gpsDeviceId;
-
-    // Numeric optional fields
     if (capacity !== undefined) raw.capacity = capacity;
     if (weight !== undefined) raw.weight = weight;
 
-    // Cast to CreateCarPayload — structure is identical, we just built it dynamically
     const payload = raw as unknown as CreateCarPayload;
-
     setSaving(true);
     setApiError("");
     const ok = await onSubmit(payload, isNew);
@@ -242,6 +255,7 @@ export function CarFormModal({
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
+
   return (
     <div
       role="dialog"
@@ -358,7 +372,7 @@ export function CarFormModal({
             />
           )}
 
-          {/* Section: Basic Info */}
+          {/* ── Section: Basic Info ── */}
           <p
             style={{
               fontSize: 11,
@@ -379,7 +393,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* Manufacturer — directly mapped to CreateCarPayload.manufacturer */}
             <label style={labelStyle}>
               الشركة المصنعة *
               <input
@@ -398,8 +411,6 @@ export function CarFormModal({
                 <span style={errorTextStyle}>{errors.manufacturer}</span>
               )}
             </label>
-
-            {/* Model — directly mapped to CreateCarPayload.model */}
             <label style={labelStyle}>
               الموديل *
               <input
@@ -425,7 +436,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* Year — maps to CreateCarPayload.year (number) */}
             <label style={labelStyle}>
               سنة الصنع *
               <input
@@ -464,7 +474,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Plate */}
+          {/* ── Section: Plate ── */}
           <p
             style={{
               fontSize: 11,
@@ -484,7 +494,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* plateNumber — directly mapped to CreateCarPayload.plateNumber */}
             <label style={labelStyle}>
               رقم اللوحة *
               <input
@@ -501,8 +510,6 @@ export function CarFormModal({
                 <span style={errorTextStyle}>{errors.plateNumber}</span>
               )}
             </label>
-
-            {/* plateLetters — directly mapped to CreateCarPayload.plateLetters */}
             <label style={labelStyle}>
               حروف اللوحة *
               <input
@@ -521,7 +528,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Registration & Legal */}
+          {/* ── Section: Registration & Legal ── */}
           <p
             style={{
               fontSize: 11,
@@ -542,24 +549,36 @@ export function CarFormModal({
             }}
           >
             <label style={labelStyle}>
-              رقم الاستمارة
+              رقم الاستمارة *
               <input
-                style={inputBase}
+                style={inputStyle("registrationNumber")}
                 value={registrationNumber}
-                onChange={(e) => setRegistrationNumber(e.target.value)}
+                onChange={(e) => {
+                  setRegistrationNumber(e.target.value);
+                  clearFieldError("registrationNumber");
+                }}
                 placeholder="SA-001234"
                 dir="ltr"
               />
+              {errors.registrationNumber && (
+                <span style={errorTextStyle}>{errors.registrationNumber}</span>
+              )}
             </label>
             <label style={labelStyle}>
               رقم الهيكل (VIN)
               <input
-                style={inputBase}
+                style={inputStyle("vinNumber")}
                 value={vinNumber}
-                onChange={(e) => setVinNumber(e.target.value)}
+                onChange={(e) => {
+                  setVinNumber(e.target.value);
+                  clearFieldError("vinNumber");
+                }}
                 placeholder="1HGBH41JXMN109186"
                 dir="ltr"
               />
+              {errors.vinNumber && (
+                <span style={errorTextStyle}>{errors.vinNumber}</span>
+              )}
             </label>
             <label style={labelStyle}>
               انتهاء الاستمارة
@@ -574,11 +593,9 @@ export function CarFormModal({
               حالة التأمين
               <select
                 style={{ ...inputBase, cursor: "pointer" }}
-                value={insuranceStatus ?? "Valid"}
+                value={insuranceStatus}
                 onChange={(e) =>
-                  setInsuranceStatus(
-                    e.target.value as Car["insuranceStatus"] | undefined,
-                  )
+                  setInsuranceStatus(e.target.value as InsuranceStatus)
                 }
                 dir="rtl"
               >
@@ -607,7 +624,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Operational */}
+          {/* ── Section: Operational ── */}
           <p
             style={{
               fontSize: 11,
@@ -669,35 +686,45 @@ export function CarFormModal({
                 dir="ltr"
               />
             </label>
-            {/* capacity — maps to CreateCarPayload.capacity (number | undefined) */}
             <label style={labelStyle}>
               الطاقة الاستيعابية
               <input
-                style={inputBase}
+                style={inputStyle("capacity")}
                 type="number"
                 min={0}
                 value={capacity ?? ""}
-                onChange={(e) => setCapacity(parseNum(e.target.value))}
+                onChange={(e) => {
+                  setCapacity(parseNum(e.target.value));
+                  clearFieldError("capacity");
+                }}
                 placeholder="0"
                 dir="ltr"
               />
+              {errors.capacity && (
+                <span style={errorTextStyle}>{errors.capacity}</span>
+              )}
             </label>
-            {/* weight — maps to CreateCarPayload.weight (number | undefined) */}
             <label style={labelStyle}>
               الوزن (كجم)
               <input
-                style={inputBase}
+                style={inputStyle("weight")}
                 type="number"
                 min={0}
                 value={weight ?? ""}
-                onChange={(e) => setWeight(parseNum(e.target.value))}
+                onChange={(e) => {
+                  setWeight(parseNum(e.target.value));
+                  clearFieldError("weight");
+                }}
                 placeholder="0"
                 dir="ltr"
               />
+              {errors.weight && (
+                <span style={errorTextStyle}>{errors.weight}</span>
+              )}
             </label>
           </div>
 
-          {/* Actions */}
+          {/* ── Actions ── */}
           <div
             style={{
               display: "flex",
@@ -758,4 +785,4 @@ export function CarFormModal({
       </div>
     </div>
   );
-}
+}