first action update user pages .

2-update driver pages [fixed image display and notyfi]
3-update car pages [fixed image]
4-build tripe pages crud
5-build some role pages
6-build audit page
7-update ui compounants
8-update saidebar and topbar
9-cheange view to be ar view
10-cheange stractcher to be app,src
11-add validation layer by yup
12-add api image-proxy to broke image corse bloken

src/Components/Client/Addressformmodal.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Alert, Spinner } from "../UI";
+import type {
+  ClientAddress,
+  ClientAddressFormData,
+  ClientAddressFormErrors,
+} from "@/src/types/client";
+
+// ── Fixed styles ───────────────────────────────────────────────────────────
+const S = {
+  input: {
+    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)",
+  } as React.CSSProperties,
+  label: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: 6,
+    fontSize: 12,
+    fontWeight: 600,
+    color: "var(--color-text-secondary)",
+  } as React.CSSProperties,
+  errorText: {
+    fontSize: 11,
+    color: "var(--color-danger)",
+    fontWeight: 500,
+  } as React.CSSProperties,
+};
+
+// ── Validation ─────────────────────────────────────────────────────────────
+function validate(data: ClientAddressFormData): ClientAddressFormErrors {
+  const e: ClientAddressFormErrors = {};
+  if (!data.label.trim())      e.label      = "النوع مطلوب";
+  if (!data.street.trim())     e.street     = "العنوان مطلوب";
+  if (!data.city.trim())       e.city       = "المدينة مطلوبة";
+  if (!data.state.trim())      e.state      = "المنطقة مطلوبة";
+  if (!data.postalCode.trim()) e.postalCode = "الرمز البريدي مطلوب";
+  if (!data.country.trim())    e.country    = "الدولة مطلوبة";
+  return e;
+}
+
+const LABEL_PRESETS = ["فوترة", "شحن", "المقر الرئيسي", "فرع", "مستودع", "أخرى"];
+
+// ── Props ──────────────────────────────────────────────────────────────────
+interface AddressFormModalProps {
+  editAddress: ClientAddress | null; // null = create mode
+  onClose:     () => void;
+  onSubmit:    (data: ClientAddressFormData, isNew: boolean) => Promise<boolean>;
+}
+
+// ── Component ──────────────────────────────────────────────────────────────
+export function AddressFormModal({
+  editAddress,
+  onClose,
+  onSubmit,
+}: AddressFormModalProps) {
+  const isNew = editAddress === null;
+
+  const [form, setForm] = useState<ClientAddressFormData>({
+    label:      editAddress?.label      ?? "",
+    street:     editAddress?.street     ?? "",
+    city:       editAddress?.city       ?? "",
+    state:      editAddress?.state      ?? "",
+    postalCode: editAddress?.postalCode ?? "",
+    country:    editAddress?.country    ?? "المملكة العربية السعودية",
+    isPrimary:  editAddress?.isPrimary  ?? false,
+  });
+  const [errors,   setErrors]   = useState<ClientAddressFormErrors>({});
+  const [saving,   setSaving]   = useState(false);
+  const [apiError, setApiError] = useState("");
+  const firstRef               = useRef<HTMLSelectElement>(null);
+
+  useEffect(() => { firstRef.current?.focus(); }, []);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const set = (field: keyof ClientAddressFormData) =>
+    (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+      setForm((p) => ({ ...p, [field]: e.target.value }));
+      if (errors[field as keyof ClientAddressFormErrors])
+        setErrors((p) => ({ ...p, [field]: undefined }));
+    };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate(form);
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    setSaving(true);
+    setApiError("");
+    const ok = await onSubmit(form, isNew);
+    setSaving(false);
+    if (ok) onClose();
+    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+  };
+
+  const inputStyle = (field: keyof ClientAddressFormErrors): React.CSSProperties => ({
+    ...S.input,
+    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+  });
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="addr-modal-title"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        background: "rgba(15,23,42,0.55)",
+        backdropFilter: "blur(4px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: "100%",
+          maxWidth: 520,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-2xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+          overflow: "hidden",
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "1.25rem 1.5rem",
+            borderBottom: "1px solid var(--color-border)",
+            background: "var(--color-surface-muted)",
+          }}
+        >
+          <div>
+            <p
+              style={{
+                fontSize: 11,
+                letterSpacing: "0.3em",
+                textTransform: "uppercase",
+                color: "#2563EB",
+                fontWeight: 600,
+                margin: 0,
+              }}
+            >
+              {isNew ? "إضافة عنوان" : "تعديل عنوان"}
+            </p>
+            <h2
+              id="addr-modal-title"
+              style={{
+                fontSize: 17,
+                fontWeight: 700,
+                color: "var(--color-text-primary)",
+                margin: "4px 0 0",
+              }}
+            >
+              {isNew ? "عنوان جديد" : editAddress?.label}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="إغلاق"
+            style={{
+              width: 34,
+              height: 34,
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              cursor: "pointer",
+              fontSize: 18,
+              color: "var(--color-text-muted)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          style={{
+            padding: "1.5rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+          }}
+        >
+          {apiError && (
+            <Alert type="error" message={apiError} onClose={() => setApiError("")} />
+          )}
+
+          {/* Label + isPrimary */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0.75rem",
+              alignItems: "end",
+            }}
+          >
+            <label style={S.label}>
+              نوع العنوان *
+              <select
+                ref={firstRef}
+                style={{ ...inputStyle("label"), cursor: "pointer" }}
+                value={form.label}
+                onChange={set("label")}
+                dir="rtl"
+              >
+                <option value="">اختر النوع</option>
+                {LABEL_PRESETS.map((l) => (
+                  <option key={l} value={l}>{l}</option>
+                ))}
+              </select>
+              {errors.label && <span style={S.errorText}>{errors.label}</span>}
+            </label>
+
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                fontSize: 12,
+                fontWeight: 600,
+                color: "var(--color-text-secondary)",
+                paddingBottom: 2,
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={form.isPrimary}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, isPrimary: e.target.checked }))
+                }
+                style={{ width: 14, height: 14, cursor: "pointer" }}
+              />
+              عنوان رئيسي
+            </label>
+          </div>
+
+          {/* Street */}
+          <label style={S.label}>
+            الشارع / العنوان التفصيلي *
+            <input
+              style={inputStyle("street")}
+              value={form.street}
+              onChange={set("street")}
+              placeholder="شارع الملك فهد، مبنى 12"
+              dir="rtl"
+            />
+            {errors.street && <span style={S.errorText}>{errors.street}</span>}
+          </label>
+
+          {/* City + State */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={S.label}>
+              المدينة *
+              <input
+                style={inputStyle("city")}
+                value={form.city}
+                onChange={set("city")}
+                placeholder="الرياض"
+                dir="rtl"
+              />
+              {errors.city && <span style={S.errorText}>{errors.city}</span>}
+            </label>
+            <label style={S.label}>
+              المنطقة *
+              <input
+                style={inputStyle("state")}
+                value={form.state}
+                onChange={set("state")}
+                placeholder="منطقة الرياض"
+                dir="rtl"
+              />
+              {errors.state && <span style={S.errorText}>{errors.state}</span>}
+            </label>
+          </div>
+
+          {/* Postal code + Country */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={S.label}>
+              الرمز البريدي *
+              <input
+                style={inputStyle("postalCode")}
+                value={form.postalCode}
+                onChange={set("postalCode")}
+                placeholder="11564"
+                dir="ltr"
+              />
+              {errors.postalCode && (
+                <span style={S.errorText}>{errors.postalCode}</span>
+              )}
+            </label>
+            <label style={S.label}>
+              الدولة *
+              <input
+                style={inputStyle("country")}
+                value={form.country}
+                onChange={set("country")}
+                placeholder="المملكة العربية السعودية"
+                dir="rtl"
+              />
+              {errors.country && <span style={S.errorText}>{errors.country}</span>}
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div
+            style={{
+              display: "flex",
+              gap: "0.5rem",
+              justifyContent: "flex-end",
+              paddingTop: "0.5rem",
+            }}
+          >
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              style={{
+                height: 40,
+                padding: "0 1.25rem",
+                borderRadius: "var(--radius-md)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface)",
+                fontSize: 13,
+                fontWeight: 600,
+                color: "var(--color-text-secondary)",
+                cursor: saving ? "not-allowed" : "pointer",
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              إلغاء
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              style={{
+                height: 40,
+                padding: "0 1.5rem",
+                borderRadius: "var(--radius-md)",
+                border: "none",
+                background: saving
+                  ? "var(--color-brand-400)"
+                  : "var(--color-brand-600)",
+                fontSize: 13,
+                fontWeight: 700,
+                color: "#FFF",
+                cursor: saving ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              {saving && <Spinner size="sm" className="text-white" />}
+              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة العنوان" : "حفظ التغييرات"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}