make header one in all page

src/Components/car/CarFormModal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Alert, Spinner } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import {
@@ -10,7 +11,6 @@ import {
 } from "@/src/validations/car.validator";
 import type {
   Car,
-  CarFormErrors,
   CreateCarPayload,
   InsuranceStatus,
   UpdateCarPayload,
@@ -18,7 +18,6 @@ import type {
 import type { Branch } from "@/src/types/branch";
 import { branchService } from "@/src/services/branch.service";
 
-
 // ── Shared input style ────────────────────────────────────────────────────────
 
 const inputBase: React.CSSProperties = {
@@ -49,27 +48,14 @@ const errorTextStyle: React.CSSProperties = {
   fontWeight: 500,
 };
 
-// ── 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 {};
-  }
-}
+const sectionHeadingStyle: React.CSSProperties = {
+  fontSize: 11,
+  letterSpacing: "0.25em",
+  textTransform: "uppercase",
+  color: "var(--color-text-hint)",
+  fontWeight: 700,
+  margin: "0.5rem 0 0",
+};
 
 // ── Date helper ───────────────────────────────────────────────────────────────
 // <input type="date"> gives "YYYY-MM-DD"; backend expects full ISO-8601.
@@ -80,6 +66,30 @@ function toIsoDateTime(val: string): string {
   return `${val}T00:00:00.000Z`;
 }
 
+// ── Form values shape ─────────────────────────────────────────────────────────
+// Mirrors the subset of CreateCarPayload/UpdateCarPayload actually edited here.
+
+interface CarFormValues {
+  manufacturer: string;
+  model: string;
+  color: string;
+  plateNumber: string;
+  plateLetters: string;
+  plateType: string;
+  registrationNumber: string;
+  vinNumber: string;
+  branchId: string;
+  currentStatus: Car["currentStatus"];
+  insuranceStatus: InsuranceStatus;
+  registrationExpiryDate: string;
+  insuranceExpiryDate: string;
+  inspectionExpiryDate: string;
+  gpsDeviceId: string;
+  year: number | undefined;
+  capacity: number | undefined;
+  weight: number | undefined;
+}
+
 // ── Props ─────────────────────────────────────────────────────────────────────
 
 interface CarFormModalProps {
@@ -104,67 +114,60 @@ export function CarFormModal({
   const isNew = editCar === null;
 
   // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
- const [branches, setBranches] = useState<Branch[]>(branchesProp);
-const loadBranches = useCallback(() => {
-  if (branchesProp.length > 0) {
-    queueMicrotask(() => setBranches(branchesProp));
-    return;
-  }
-  const token = getStoredToken();
-  branchService
-    .getOptions(token)
-    .then((list) => {
-      queueMicrotask(() => setBranches(list as unknown as Branch[]));
-    })
-    .catch(() => {
-      /* silently ignore */
-    });
-}, [branchesProp]);
+  const [branches, setBranches] = useState<Branch[]>(branchesProp);
+  const loadBranches = useCallback(() => {
+    if (branchesProp.length > 0) {
+      queueMicrotask(() => setBranches(branchesProp));
+      return;
+    }
+    const token = getStoredToken();
+    branchService
+      .getOptions(token)
+      .then((list) => {
+        queueMicrotask(() => setBranches(list as unknown as Branch[]));
+      })
+      .catch(() => {
+        /* silently ignore */
+      });
+  }, [branchesProp]);
 
   useEffect(() => {
     loadBranches();
   }, [loadBranches]);
 
-  // ── Form state ─────────────────────────────────────────────────────────────
-  const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
-  const [model, setModel] = useState(editCar?.model ?? "");
-  const [color, setColor] = useState(editCar?.color ?? "");
-  const [plateNumber, setPlateNumber] = useState(editCar?.plateNumber ?? "");
-  const [plateLetters, setPlateLetters] = useState(editCar?.plateLetters ?? "");
-  const [plateType, setPlateType] = useState(editCar?.plateType ?? "");
-  const [registrationNumber, setRegistrationNumber] = useState(
-    editCar?.registrationNumber ?? "",
-  );
-  const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
-  const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
-  const [currentStatus, setCurrentStatus] = useState<Car["currentStatus"]>(
-    editCar?.currentStatus ?? "Active",
-  );
-  const [insuranceStatus, setInsuranceStatus] = useState<InsuranceStatus>(
-    (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
-  );
-  const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
-    editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
-  );
-  const [insuranceExpiryDate, setInsuranceExpiryDate] = useState(
-    editCar?.insuranceExpiryDate?.slice(0, 10) ?? "",
-  );
-  const [inspectionExpiryDate, setInspectionExpiryDate] = useState(
-    editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
-  );
-  const [gpsDeviceId, setGpsDeviceId] = useState(editCar?.gpsDeviceId ?? "");
-  const [year, setYear] = useState<number | undefined>(
-    editCar?.year ?? new Date().getFullYear(),
-  );
-  const [capacity, setCapacity] = useState<number | undefined>(
-    editCar?.capacity ?? undefined,
-  );
-  const [weight, setWeight] = useState<number | undefined>(
-    editCar?.weight ?? undefined,
-  );
+  // ── react-hook-form ────────────────────────────────────────────────────────
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<CarFormValues>({
+    resolver: yupResolver(isNew ? createCarSchema : updateCarSchema) as never,
+    defaultValues: {
+      manufacturer: editCar?.manufacturer ?? "",
+      model: editCar?.model ?? "",
+      color: editCar?.color ?? "",
+      plateNumber: editCar?.plateNumber ?? "",
+      plateLetters: editCar?.plateLetters ?? "",
+      plateType: editCar?.plateType ?? "",
+      registrationNumber: editCar?.registrationNumber ?? "",
+      vinNumber: editCar?.vinNumber ?? "",
+      branchId: editCar?.branch?.id ?? "",
+      currentStatus: editCar?.currentStatus ?? "Active",
+      insuranceStatus: (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
+      registrationExpiryDate: editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
+      insuranceExpiryDate: editCar?.insuranceExpiryDate?.slice(0, 10) ?? "",
+      inspectionExpiryDate: editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
+      gpsDeviceId: editCar?.gpsDeviceId ?? "",
+      // NOTE: kept as number | undefined instead of RHF's valueAsNumber so an
+      // empty input maps to `undefined` (matches the old parseNum() guard)
+      // rather than NaN, which would otherwise trip the yup .typeError() rule.
+      year: editCar?.year ?? new Date().getFullYear(),
+      capacity: editCar?.capacity ?? undefined,
+      weight: editCar?.weight ?? undefined,
+    },
+  });
 
-  const [errors, setErrors] = useState<CarFormErrors>({});
-  const [saving, setSaving] = useState(false);
   const [apiError, setApiError] = useState("");
   const firstRef = useRef<HTMLInputElement>(null);
 
@@ -179,84 +182,63 @@ const loadBranches = useCallback(() => {
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  const parseNum = (v: string): number | undefined =>
-    v.trim() === "" ? undefined : Number(v);
+  // Numeric fields: empty string -> undefined (never NaN), matching the
+  // behavior of the old parseNum() helper.
+  const numberField = (
+    field: "year" | "capacity" | "weight",
+  ) =>
+    register(field, {
+      setValueAs: (v) => (v === "" || v === null ? undefined : Number(v)),
+    });
 
-  const inputStyle = (field: keyof CarFormErrors): React.CSSProperties => ({
+  const withError = (hasError: boolean): React.CSSProperties => ({
     ...inputBase,
-    ...(errors[field]
-      ? { borderColor: "var(--color-danger)", background: "#FEF2F2" }
-      : {}),
+    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
   });
 
-  const clearFieldError = (field: keyof CarFormErrors) =>
-    setErrors((p) => ({ ...p, [field]: undefined }));
-
   // ── Submit ────────────────────────────────────────────────────────────────
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    // 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 = await validate(formSnapshot, isNew);
-    if (Object.keys(errs).length) {
-      setErrors(errs);
-      return;
-    }
-
-    // Build final payload — convert date strings to ISO-8601 for the backend
+  const submitHandler = async (data: CarFormValues) => {
+    // Build final payload — convert date strings to ISO-8601 for the backend,
+    // and drop empty-optional fields exactly like the pre-refactor version did.
     const raw: Record<string, unknown> = {
-      manufacturer,
-      model,
-      year,
-      plateNumber,
-      plateLetters,
-      currentStatus,
+      manufacturer: data.manufacturer,
+      model: data.model,
+      year: data.year,
+      plateNumber: data.plateNumber,
+      plateLetters: data.plateLetters,
+      currentStatus: data.currentStatus,
     };
-    if (color) raw.color = color;
-    if (plateType) raw.plateType = plateType;
-    if (registrationNumber) raw.registrationNumber = registrationNumber;
-    if (vinNumber) raw.vinNumber = vinNumber;
-    if (branchId) raw.branchId = branchId;
-    if (insuranceStatus) raw.insuranceStatus = insuranceStatus;
-    if (registrationExpiryDate)
-      raw.registrationExpiryDate = toIsoDateTime(registrationExpiryDate);
-    if (insuranceExpiryDate)
-      raw.insuranceExpiryDate = toIsoDateTime(insuranceExpiryDate);
-    if (inspectionExpiryDate)
-      raw.inspectionExpiryDate = toIsoDateTime(inspectionExpiryDate);
-    if (gpsDeviceId) raw.gpsDeviceId = gpsDeviceId;
-    if (capacity !== undefined) raw.capacity = capacity;
-    if (weight !== undefined) raw.weight = weight;
+    if (data.color) raw.color = data.color;
+    if (data.plateType) raw.plateType = data.plateType;
+    if (data.registrationNumber) raw.registrationNumber = data.registrationNumber;
+    if (data.vinNumber) raw.vinNumber = data.vinNumber;
+    if (data.branchId) raw.branchId = data.branchId;
+    if (data.insuranceStatus) raw.insuranceStatus = data.insuranceStatus;
+    if (data.registrationExpiryDate)
+      raw.registrationExpiryDate = toIsoDateTime(data.registrationExpiryDate);
+    if (data.insuranceExpiryDate)
+      raw.insuranceExpiryDate = toIsoDateTime(data.insuranceExpiryDate);
+    if (data.inspectionExpiryDate)
+      raw.inspectionExpiryDate = toIsoDateTime(data.inspectionExpiryDate);
+    if (data.gpsDeviceId) raw.gpsDeviceId = data.gpsDeviceId;
+    // Defensive re-coercion: mirrors CarMaintenanceFormModal's
+    // toNumberOrUndefined() safeguard, in case capacity/weight ever round-trip
+    // as numeric strings from a Decimal-backed field on the backend.
+    if (data.capacity !== undefined && data.capacity !== null && !Number.isNaN(Number(data.capacity)))
+      raw.capacity = Number(data.capacity);
+    if (data.weight !== undefined && data.weight !== null && !Number.isNaN(Number(data.weight)))
+      raw.weight = Number(data.weight);
 
     const payload = raw as unknown as CreateCarPayload;
-    setSaving(true);
     setApiError("");
     const ok = await onSubmit(payload, isNew);
-    setSaving(false);
-    if (ok) onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+    if (ok) {
+      onClose();
+    } else {
+      setError("manufacturer", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
+      setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+    }
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
@@ -328,9 +310,7 @@ const loadBranches = useCallback(() => {
                 margin: "4px 0 0",
               }}
             >
-              {isNew
-                ? "مركبة جديدة"
-                : `${editCar?.manufacturer} ${editCar?.model}`}
+              {isNew ? "مركبة جديدة" : `${editCar?.manufacturer} ${editCar?.model}`}
             </h2>
           </div>
           <button
@@ -357,7 +337,7 @@ const loadBranches = useCallback(() => {
 
         {/* Form */}
         <form
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmit(submitHandler)}
           noValidate
           style={{
             padding: "1.5rem",
@@ -369,241 +349,130 @@ const loadBranches = useCallback(() => {
           }}
           dir="rtl"
         >
-          {apiError && (
+          {errors.manufacturer?.type === "manual" && (
             <Alert
               type="error"
-              message={apiError}
+              message={errors.manufacturer.message ?? ""}
               onClose={() => setApiError("")}
             />
           )}
 
           {/* ── Section: Basic Info ── */}
-          <p
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: 0,
-            }}
-          >
-            بيانات أساسية
-          </p>
+          <p style={sectionHeadingStyle}>بيانات أساسية</p>
 
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
             <label style={labelStyle}>
               الشركة المصنعة *
               <input
                 ref={firstRef}
-                style={inputStyle("manufacturer")}
-                value={manufacturer}
-                onChange={(e) => {
-                  setManufacturer(e.target.value);
-                  clearFieldError("manufacturer");
-                }}
+                style={withError(!!errors.manufacturer && errors.manufacturer.type !== "manual")}
+                {...register("manufacturer")}
                 placeholder="تويوتا"
                 dir="rtl"
                 autoComplete="off"
               />
-              {errors.manufacturer && (
-                <span style={errorTextStyle}>{errors.manufacturer}</span>
+              {errors.manufacturer && errors.manufacturer.type !== "manual" && (
+                <span style={errorTextStyle}>{errors.manufacturer.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               الموديل *
               <input
-                style={inputStyle("model")}
-                value={model}
-                onChange={(e) => {
-                  setModel(e.target.value);
-                  clearFieldError("model");
-                }}
+                style={withError(!!errors.model)}
+                {...register("model")}
                 placeholder="لاند كروزر"
                 dir="rtl"
               />
-              {errors.model && (
-                <span style={errorTextStyle}>{errors.model}</span>
-              )}
+              {errors.model && <span style={errorTextStyle}>{errors.model.message}</span>}
             </label>
           </div>
 
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
             <label style={labelStyle}>
               سنة الصنع *
               <input
-                style={inputStyle("year")}
+                style={withError(!!errors.year)}
                 type="number"
                 min={1900}
                 max={new Date().getFullYear() + 1}
-                value={year ?? ""}
-                onChange={(e) => {
-                  setYear(parseNum(e.target.value));
-                  clearFieldError("year");
-                }}
+                {...numberField("year")}
                 dir="ltr"
               />
-              {errors.year && <span style={errorTextStyle}>{errors.year}</span>}
+              {errors.year && <span style={errorTextStyle}>{errors.year.message}</span>}
             </label>
             <label style={labelStyle}>
               اللون
-              <input
-                style={inputBase}
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                placeholder="أبيض"
-                dir="rtl"
-              />
+              <input style={inputBase} {...register("color")} placeholder="أبيض" dir="rtl" />
             </label>
             <label style={labelStyle}>
               نوع اللوحة
-              <input
-                style={inputBase}
-                value={plateType}
-                onChange={(e) => setPlateType(e.target.value)}
-                placeholder="خاص"
-                dir="rtl"
-              />
+              <input style={inputBase} {...register("plateType")} placeholder="خاص" dir="rtl" />
             </label>
           </div>
 
           {/* ── Section: Plate ── */}
-          <p
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            بيانات اللوحة
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
+          <p style={sectionHeadingStyle}>بيانات اللوحة</p>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
             <label style={labelStyle}>
               رقم اللوحة *
               <input
-                style={inputStyle("plateNumber")}
-                value={plateNumber}
-                onChange={(e) => {
-                  setPlateNumber(e.target.value);
-                  clearFieldError("plateNumber");
-                }}
+                style={withError(!!errors.plateNumber)}
+                {...register("plateNumber")}
                 placeholder="1234"
                 dir="ltr"
               />
               {errors.plateNumber && (
-                <span style={errorTextStyle}>{errors.plateNumber}</span>
+                <span style={errorTextStyle}>{errors.plateNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               حروف اللوحة *
               <input
-                style={inputStyle("plateLetters")}
-                value={plateLetters}
-                onChange={(e) => {
-                  setPlateLetters(e.target.value);
-                  clearFieldError("plateLetters");
-                }}
+                style={withError(!!errors.plateLetters)}
+                {...register("plateLetters")}
                 placeholder="أ ب ج"
                 dir="rtl"
               />
               {errors.plateLetters && (
-                <span style={errorTextStyle}>{errors.plateLetters}</span>
+                <span style={errorTextStyle}>{errors.plateLetters.message}</span>
               )}
             </label>
           </div>
 
           {/* ── Section: Registration & Legal ── */}
-          <p
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            الترخيص والتأمين
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
+          <p style={sectionHeadingStyle}>الترخيص والتأمين</p>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
             <label style={labelStyle}>
               رقم الاستمارة *
               <input
-                style={inputStyle("registrationNumber")}
-                value={registrationNumber}
-                onChange={(e) => {
-                  setRegistrationNumber(e.target.value);
-                  clearFieldError("registrationNumber");
-                }}
+                style={withError(!!errors.registrationNumber)}
+                {...register("registrationNumber")}
                 placeholder="SA-001234"
                 dir="ltr"
               />
               {errors.registrationNumber && (
-                <span style={errorTextStyle}>{errors.registrationNumber}</span>
+                <span style={errorTextStyle}>{errors.registrationNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               رقم الهيكل (VIN)
               <input
-                style={inputStyle("vinNumber")}
-                value={vinNumber}
-                onChange={(e) => {
-                  setVinNumber(e.target.value);
-                  clearFieldError("vinNumber");
-                }}
+                style={withError(!!errors.vinNumber)}
+                {...register("vinNumber")}
                 placeholder="1HGBH41JXMN109186"
                 dir="ltr"
               />
               {errors.vinNumber && (
-                <span style={errorTextStyle}>{errors.vinNumber}</span>
+                <span style={errorTextStyle}>{errors.vinNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               انتهاء الاستمارة
-              <input
-                style={inputBase}
-                type="date"
-                value={registrationExpiryDate}
-                onChange={(e) => setRegistrationExpiryDate(e.target.value)}
-              />
+              <input style={inputBase} type="date" {...register("registrationExpiryDate")} />
             </label>
             <label style={labelStyle}>
               حالة التأمين
-              <select
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={insuranceStatus}
-                onChange={(e) =>
-                  setInsuranceStatus(e.target.value as InsuranceStatus)
-                }
-                dir="rtl"
-              >
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("insuranceStatus")} dir="rtl">
                 <option value="Valid">سارٍ</option>
                 <option value="Expired">منتهي</option>
                 <option value="NotInsured">غير مؤمَّن</option>
@@ -611,52 +480,20 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               انتهاء التأمين
-              <input
-                style={inputBase}
-                type="date"
-                value={insuranceExpiryDate}
-                onChange={(e) => setInsuranceExpiryDate(e.target.value)}
-              />
+              <input style={inputBase} type="date" {...register("insuranceExpiryDate")} />
             </label>
             <label style={labelStyle}>
               انتهاء الفحص الدوري
-              <input
-                style={inputBase}
-                type="date"
-                value={inspectionExpiryDate}
-                onChange={(e) => setInspectionExpiryDate(e.target.value)}
-              />
+              <input style={inputBase} type="date" {...register("inspectionExpiryDate")} />
             </label>
           </div>
 
           {/* ── Section: Operational ── */}
-          <p
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            بيانات تشغيلية
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
+          <p style={sectionHeadingStyle}>بيانات تشغيلية</p>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
             <label style={labelStyle}>
               الفرع
-              <select
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={branchId}
-                onChange={(e) => setBranchId(e.target.value)}
-                dir="rtl"
-              >
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("branchId")} dir="rtl">
                 <option value="">اختر الفرع</option>
                 {branches.map((b) => (
                   <option key={b.id} value={b.id}>
@@ -667,14 +504,7 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               الحالة
-              <select
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={currentStatus}
-                onChange={(e) =>
-                  setCurrentStatus(e.target.value as Car["currentStatus"])
-                }
-                dir="rtl"
-              >
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("currentStatus")} dir="rtl">
                 <option value="Active">نشط</option>
                 <option value="InMaintenance">صيانة</option>
                 <option value="InTrip">في رحلة</option>
@@ -683,65 +513,42 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               رقم GPS
-              <input
-                style={inputBase}
-                value={gpsDeviceId}
-                onChange={(e) => setGpsDeviceId(e.target.value)}
-                placeholder="GPS-001"
-                dir="ltr"
-              />
+              <input style={inputBase} {...register("gpsDeviceId")} placeholder="GPS-001" dir="ltr" />
             </label>
             <label style={labelStyle}>
               الطاقة الاستيعابية
               <input
-                style={inputStyle("capacity")}
+                style={withError(!!errors.capacity)}
                 type="number"
                 min={0}
-                value={capacity ?? ""}
-                onChange={(e) => {
-                  setCapacity(parseNum(e.target.value));
-                  clearFieldError("capacity");
-                }}
+                {...numberField("capacity")}
                 placeholder="0"
                 dir="ltr"
               />
               {errors.capacity && (
-                <span style={errorTextStyle}>{errors.capacity}</span>
+                <span style={errorTextStyle}>{errors.capacity.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               الوزن (كجم)
               <input
-                style={inputStyle("weight")}
+                style={withError(!!errors.weight)}
                 type="number"
                 min={0}
-                value={weight ?? ""}
-                onChange={(e) => {
-                  setWeight(parseNum(e.target.value));
-                  clearFieldError("weight");
-                }}
+                {...numberField("weight")}
                 placeholder="0"
                 dir="ltr"
               />
-              {errors.weight && (
-                <span style={errorTextStyle}>{errors.weight}</span>
-              )}
+              {errors.weight && <span style={errorTextStyle}>{errors.weight.message}</span>}
             </label>
           </div>
 
           {/* ── Actions ── */}
-          <div
-            style={{
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-end",
-              paddingTop: "0.5rem",
-            }}
-          >
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
             <button
               type="button"
               onClick={onClose}
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.25rem",
@@ -751,7 +558,7 @@ const loadBranches = useCallback(() => {
                 fontSize: 13,
                 fontWeight: 600,
                 color: "var(--color-text-secondary)",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 fontFamily: "var(--font-sans)",
               }}
             >
@@ -759,35 +566,29 @@ const loadBranches = useCallback(() => {
             </button>
             <button
               type="submit"
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.5rem",
                 borderRadius: "var(--radius-md)",
                 border: "none",
-                background: saving
-                  ? "var(--color-brand-400)"
-                  : "var(--color-brand-600)",
+                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
                 fontSize: 13,
                 fontWeight: 700,
                 color: "#FFF",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex",
                 alignItems: "center",
                 gap: 8,
                 fontFamily: "var(--font-sans)",
               }}
             >
-              {saving && <Spinner size="sm" className="text-white" />}
-              {saving
-                ? "جارٍ الحفظ…"
-                : isNew
-                  ? "إضافة المركبة"
-                  : "حفظ التغييرات"}
+              {isSubmitting && <Spinner size="sm" className="text-white" />}
+              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة المركبة" : "حفظ التغييرات"}
             </button>
           </div>
         </form>
       </div>
     </div>
   );
-}
+}