create driver page and client page also create oll driver , client layer

Components/Client/Deleteconfirmmodal.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Client } from "../../types/client";
+
+interface DeleteConfirmModalProps {
+  client:    Client;
+  deleting:  boolean;
+  onCancel:  () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmModal({
+  client,
+  deleting,
+  onCancel,
+  onConfirm,
+}: DeleteConfirmModalProps) {
+  // Close on Escape — identical to User/DeleteConfirmModal
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="del-client-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        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: 400,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* أيقونة الحذف */}
+        <div
+          style={{
+            width: 52,
+            height: 52,
+            margin: "0 auto",
+            borderRadius: "50%",
+            background: "#FEF2F2",
+            border: "1px solid #FECACA",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#DC2626"
+            strokeWidth="2"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2
+            id="del-client-title"
+            style={{
+              fontSize: 17,
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+              margin: 0,
+            }}
+          >
+            حذف العميل
+          </h2>
+          <p
+            style={{
+              marginTop: 8,
+              fontSize: 13,
+              color: "var(--color-text-muted)",
+              lineHeight: 1.6,
+            }}
+          >
+            هل أنت متأكد من حذف{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>
+              {client.name}
+            </strong>
+            ؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={deleting}
+            style={{
+              flex: 1,
+              height: 40,
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              fontSize: 13,
+              fontWeight: 600,
+              color: "var(--color-text-secondary)",
+              cursor: deleting ? "not-allowed" : "pointer",
+              fontFamily: "var(--font-sans)",
+            }}
+          >
+            إلغاء
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={deleting}
+            style={{
+              flex: 1,
+              height: 40,
+              borderRadius: "var(--radius-md)",
+              border: "none",
+              background: "#DC2626",
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#FFF",
+              cursor: deleting ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              fontFamily: "var(--font-sans)",
+              opacity: deleting ? 0.7 : 1,
+            }}
+          >
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}