chore: phase 1 lint/type fixes — commit all changes

src/Components/Driver/DriverDetailPanel.tsx

@@ -97,7 +97,7 @@ function PhotoCard({ url, label }: { url?: string | null; label: string }) {
   const [imgError, setImgError] = useState(false);
 
   useEffect(() => {
-    setImgError(false);
+    queueMicrotask(() => setImgError(false));
   }, [url]);
 
   return (
@@ -196,7 +196,7 @@ export function DriverDetailPanel({
     }
   }, [driverId]);
 
-  useEffect(() => { loadDriver(); }, [loadDriver]);
+  useEffect(() => { queueMicrotask(loadDriver); }, [loadDriver]);
 
   useEffect(() => {
     const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };

src/Components/Driver/DriverFormModal.tsx

@@ -16,6 +16,7 @@ import type {
   DriverStatus,
 } from "@/src/types/driver";
 import type { Branch } from "@/src/types/branch";
+import { FileInput } from "@/src/Components/Driver/DriverFormModalHelper";
 
 // ── Shared input style ───────────────────────────────────────────────────────
 
@@ -97,7 +98,7 @@ export function DriverFormModal({
   const [branches, setBranches] = useState<Branch[]>(branchesProp);
   useEffect(() => {
     if (branchesProp.length > 0) {
-      setBranches(branchesProp);
+      queueMicrotask(() => setBranches(branchesProp));
       return;
     }
     const token = getStoredToken();
@@ -108,8 +109,7 @@ export function DriverFormModal({
         setBranches(list);
       })
       .catch(() => { /* silently ignore */ });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [branchesProp]);
 
   // ── Form state ────────────────────────────────────────────────────────────
   const [name, setName]               = useState(editDriver?.name ?? "");
@@ -172,7 +172,7 @@ export function DriverFormModal({
     setErrors((p) => ({ ...p, [field]: undefined }));
 
   // ── Submit with yup validation ────────────────────────────────────────────
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     // Build the raw object to validate
@@ -211,7 +211,6 @@ export function DriverFormModal({
       }
     }
 
-    // ── Build clean payload to send to backend ────────────────────────────
     const payload: Record<string, unknown> = { name, phone };
     if (email)            payload.email            = email;
     if (address)          payload.address          = address;
@@ -253,39 +252,6 @@ export function DriverFormModal({
     }
   };
 
-  // ── File input helper ──────────────────────────────────────────────────────
-  function FileInput({
-    label: lbl,
-    current,
-    onChange,
-  }: {
-    label: string;
-    current: File | null;
-    onChange: (f: File | null) => void;
-  }) {
-    return (
-      <label style={labelStyle}>
-        {lbl}
-        <input
-          type="file"
-          accept="image/*"
-          onChange={(e) => onChange(e.target.files?.[0] ?? null)}
-          style={{
-            ...inputBase,
-            padding: "0.35rem 0.75rem",
-            height: "auto",
-            cursor: "pointer",
-          }}
-        />
-        {current && (
-          <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-            {current.name}
-          </span>
-        )}
-      </label>
-    );
-  }
-
   // ── Render ─────────────────────────────────────────────────────────────────
   return (
     <div
@@ -645,8 +611,8 @@ export function DriverFormModal({
           </p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <FileInput label="صورة السائق"  current={photo}          onChange={setPhoto} />
-            <FileInput label="صورة الهوية"  current={nationalPhoto}  onChange={setNationalPhoto} />
+            <FileInput label="صورة السائق" current={photo} onChange={setPhoto} />
+            <FileInput label="صورة الهوية" current={nationalPhoto} onChange={setNationalPhoto} />
             <FileInput label="صورة البطاقة" current={driverCardPhoto} onChange={setDriverCardPhoto} />
           </div>
 

src/Components/Driver/DriverFormModalHelper.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+const inputBase: React.CSSProperties = {
+  width: "100%",
+  height: 40,
+  padding: "0 0.75rem",
+  borderRadius: "var(--radius-md)",
+  border: "1px solid var(--color-border)",
+  background: "var(--color-surface)",
+  fontSize: 13,
+  color: "var(--color-text-primary)",
+  outline: "none",
+  fontFamily: "var(--font-sans)",
+};
+
+const labelStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  fontSize: 12,
+  fontWeight: 600,
+  color: "var(--color-text-secondary)",
+};
+
+export function FileInput({
+  label,
+  current,
+  onChange,
+}: {
+  label: string;
+  current: File | null;
+  onChange: (f: File | null) => void;
+}) {
+  return (
+    <label style={labelStyle}>
+      {label}
+      <input
+        type="file"
+        accept="image/*"
+        onChange={(e) => onChange(e.target.files?.[0] ?? null)}
+        style={{
+          ...inputBase,
+          padding: "0.35rem 0.75rem",
+          height: "auto",
+          cursor: "pointer",
+        }}
+      />
+      {current && (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          {current.name}
+        </span>
+      )}
+    </label>
+  );
+}

src/Components/Driver/DriverPhotos.tsx

@@ -11,7 +11,7 @@ export function PhotoCard({
 
   // Reset error state when url changes so updated images get a fresh load attempt
   useEffect(() => {
-    setImgError(false);
+    queueMicrotask(() => setImgError(false));
   }, [url]);
 
   return (