update auth layer and update driver photo loading

also return just active car in create tripe and update tripe

app/login/page.tsx

@@ -1,153 +1,5 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { loginUser } from "@/src/lib/auth";
-import Logo from "@/src/utils/logo";
-import { Button } from "@/src/Components/UI";
-import { Input }  from "@/src/Components/UI";
-import { Alert }  from "@/src/Components/UI";
+import { LoginForm } from "@/src/Components/auth/login";
 
 export default function LoginPage() {
-  const [identity, setIdentity] = useState("");
-  const [password, setPassword] = useState("");
-  const [error,    setError]    = useState<string | null>(null);
-  const [loading,  setLoading]  = useState(false);
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-
-    try {
-      await loginUser(identity, password);
-    console.log("Login successful", { identity });
-      window.location.href = "/dashboard";
-    } catch (err) {
-      if (err instanceof Error) {
-        const msg = err.message.toLowerCase();
-        if (msg.includes("fetch") || msg.includes("network") || msg.includes("failed to fetch")) {
-          setError("Unable to connect. Please check your internet connection and try again later.");
-        } else {
-          setError(err.message);
-        }
-      } else {
-        setError("System temporarily unavailable. Please try later.");
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <main className="min-h-screen bg-slate-100 text-slate-900">
-      <section className="grid min-h-screen w-full lg:grid-cols-[1fr_1fr]">
-
-        {/* ── Left panel ─────────────────────────────────── */}
-        <aside className="relative overflow-hidden bg-linear-to-br from-blue-900 via-blue-600 to-blue-700 px-8 py-10 text-white lg:px-12 lg:py-14">
-          <div
-            aria-hidden="true"
-            className="absolute inset-0 opacity-30"
-            style={{
-              backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px)",
-              backgroundSize: "40px 40px",
-            }}
-          />
-          <div className="relative z-10 flex h-full flex-col justify-between">
-            <div>
-              <Logo white={true} />
-              <h1 className="mt-10 max-w-md text-[36px] font-bold leading-tight tracking-[-0.5px]">
-                اللوجستيات ببساطة، والتسليم بثقة.
-              </h1>
-              <p className="mt-4 max-w-md text-[15px] leading-7 text-white/75">
-                راقب عمليات التسليم، وقم بتنظيم السائقين، وحافظ على رؤية كل طلب من خلال تسجيل دخول آمن واحد.
-              </p>
-              <div className="mt-8 space-y-3">
-                {[
-                  ["التنسيق اللحظي",  "تتبع كل طلب من الاستلام إلى التسليم في مكان واحد."],
-                  ["وصول آمن",         "الجلسات المعتمدة على الصلاحيات تبقي مسارات العميل والإدارة منفصلة."],
-                  ["عمليات سريعة",    "استخدم لوحة الإدارة لمراجعة الحالة والتنبيهات وحركة الرحلات."],
-                ].map(([title, desc]) => (
-                  <article
-                    key={title}
-                    className="flex items-start gap-3 rounded-[10px] border border-white/15 bg-white/10 p-3"
-                  >
-                    <div aria-hidden="true" className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white/15 text-sm">
-                      •
-                    </div>
-                    <div>
-                      <h2 className="text-sm font-semibold">{title}</h2>
-                      <p className="text-xs text-white/80">{desc}</p>
-                    </div>
-                  </article>
-                ))}
-              </div>
-            </div>
-            <p className="text-[12px] text-white/50">مصمم لفرق العمليات التي تحتاج إلى الوضوح والسرعة والثقة.</p>
-          </div>
-        </aside>
-
-        {/* ── Right panel ────────────────────────────────── */}
-        <section className="flex items-center justify-center bg-slate-50 px-6 py-10 lg:px-8">
-          <form
-            onSubmit={handleSubmit}
-            className="w-full max-w-[400px] rounded-[14px] border border-slate-200 bg-white p-8 shadow-sm"
-            noValidate
-          >
-            <p className="text-[28px] font-bold text-slate-900">مرحبًا بعودتك</p>
-            <p className="mt-1 text-[14px] text-slate-500">سجل الدخول لإدارة عمليات التسليم</p>
-
-            <div className="mt-6 flex flex-col gap-4">
-              <Input
-                label="البريد الإلكتروني أو رقم الهاتف أو اسم المستخدم"
-                autoComplete="username"
-                value={identity}
-                onChange={(e) => setIdentity(e.target.value)}
-                placeholder="name@company.com / 05xxxxxxxx / username"
-                required
-              />
-
-              <Input
-                label="كلمة المرور"
-                type="password"
-                autoComplete="current-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                required
-              />
-            </div>
-
-            <div className="mt-3 flex justify-end">
-              <Link href="/forgot-password" className="text-[12px] text-blue-600 hover:underline">
-                هل نسيت كلمة المرور؟
-              </Link>
-            </div>
-
-            {error && (
-              <div className="mt-4">
-                <Alert type="error" message={error} onClose={() => setError(null)} />
-              </div>
-            )}
-
-            <Button
-              type="submit"
-              loading={loading}
-              fullWidth
-              className="mt-6 h-11"
-            >
-              {loading ? "جاري تسجيل الدخول…" : "تسجيل الدخول"}
-            </Button>
-
-            <p className="mt-4 text-center text-[13px] text-slate-500">
-              ليس لديك حساب؟{" "}
-              <Link href="/register" className="text-blue-600 hover:underline">
-                إنشاء حساب
-              </Link>
-            </p>
-          </form>
-        </section>
-      </section>
-    </main>
-  );
+  return <LoginForm />;
 }

src/Components/Driver/DriverPhotos.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Spinner } from "../UI";
 
 export function PhotoCard({
   url,
@@ -8,10 +9,14 @@ export function PhotoCard({
   label: string;
 }) {
   const [imgError, setImgError] = useState(false);
+  const [imgLoaded, setImgLoaded] = useState(false);
 
-  // Reset error state when url changes so updated images get a fresh load attempt
+  // Reset error/loaded state when url changes so updated images get a fresh load attempt
   useEffect(() => {
-    queueMicrotask(() => setImgError(false));
+    queueMicrotask(() => {
+      setImgError(false);
+      setImgLoaded(false);
+    });
   }, [url]);
 
   return (
@@ -27,6 +32,7 @@ export function PhotoCard({
       </span>
       <div
         style={{
+          position: "relative",
           width: "100%",
           aspectRatio: "4/3",
           borderRadius: "var(--radius-md)",
@@ -39,16 +45,39 @@ export function PhotoCard({
         }}
       >
         {url && !imgError ? (
-          // key={url} forces a full remount whenever the URL changes,
-          // clearing any stale error state from a previous failed load.
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            key={url}
-            src={url}
-            alt={label}
-            style={{ width: "100%", height: "100%", objectFit: "cover" }}
-            onError={() => setImgError(true)}
-          />
+          <>
+            {!imgLoaded && (
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "var(--color-surface-muted)",
+                }}
+              >
+                <Spinner size="sm" className="text-blue-600" />
+              </div>
+            )}
+            {/* key={url} forces a full remount whenever the URL changes,
+                clearing any stale error/loaded state from a previous load. */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              key={url}
+              src={url}
+              alt={label}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                opacity: imgLoaded ? 1 : 0,
+                transition: "opacity 200ms",
+              }}
+              onLoad={() => setImgLoaded(true)}
+              onError={() => setImgError(true)}
+            />
+          </>
         ) : (
           <svg
             width="32"

src/Components/Trip/Tripformmodal.tsx

@@ -121,7 +121,7 @@ export function TripFormModal({
         ),
       )
       .catch(() => {});
-    get<{ data: { data: CarOption[] } }>("cars?limit=100&status=Active", token)
+    get<{ data: { data: CarOption[] } }>("cars?limit=100&currentStatus=Active", token)
       .then((res) =>
         setCars(
           (res as unknown as { data: { data: CarOption[] } }).data?.data ?? [],
@@ -137,7 +137,7 @@ export function TripFormModal({
       )
       .catch(() => {});
   }, []);
-
+  //console.log("cars", cars);
   // ── Form state ────────────────────────────────────────────────────────────
   const [title, setTitle] = useState(editTrip?.title ?? "");
   const [driverId, setDriverId] = useState(editTrip?.driverId ?? "");
@@ -338,7 +338,7 @@ export function TripFormModal({
             gap: "1rem",
           }}
         >
-          {/* ── Section: أساسيات الرحلة ── */}
+          {/* ── Section:trip management── */}
           <p style={sectionHeadingStyle}>أساسيات الرحلة</p>
 
           {/* Title */}

src/Components/auth/login.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Alert, Button, Input } from "@/src/Components/UI";
+import { useAuth } from "@/src/hooks/useAuth";
+import Logo from "@/src/utils/logo";
+import { loginSchema, type LoginFormData } from "@/src/validations/auth.validator";
+
+export function LoginForm() {
+  const { login, loading, error, clearError } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    mode: "onBlur",
+  });
+
+  const onSubmit = async (values: LoginFormData) => {
+    await login(values.identity, values.password);
+  };
+
+  return (
+    <main style={{ minHeight: "100vh", background: "var(--color-surface-muted)", color: "var(--color-text-primary)" }}>
+      <section style={{ minHeight: "100vh", width: "100%", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
+        <aside style={{ position: "relative", overflow: "hidden", background: "linear-gradient(135deg, #0f172a 0%, #2563EB 50%, #3b82f6 100%)", color: "#FFF", padding: "2.5rem 3rem", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
+          <div aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.28, backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
+          <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
+            <div>
+              <Logo white={true} />
+              <h1 style={{ marginTop: "2.5rem", maxWidth: "28rem", fontSize: "2.25rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em" }}>
+                اللوجستيات ببساطة، والتسليم بثقة.
+              </h1>
+              <p style={{ marginTop: "1rem", maxWidth: "28rem", fontSize: "0.95rem", lineHeight: 1.8, color: "rgba(255,255,255,0.75)" }}>
+                راقب عمليات التسليم، وقم بتنظيم السائقين، وحافظ على رؤية كل طلب من خلال تسجيل دخول آمن واحد.
+              </p>
+              <div style={{ marginTop: "2rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+                {[
+                  ["التنسيق اللحظي", "تتبع كل طلب من الاستلام إلى التسليم في مكان واحد."],
+                  ["وصول آمن", "الجلسات المعتمدة على الصلاحيات تبقي مسارات العميل والإدارة منفصلة."],
+                  ["عمليات سريعة", "استخدم لوحة الإدارة لمراجعة الحالة والتنبيهات وحركة الرحلات."],
+                ].map(([title, desc]) => (
+                  <article key={title} style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", borderRadius: "0.75rem", border: "1px solid rgba(255,255,255,0.15)", background: "rgba(255,255,255,0.1)", padding: "0.85rem" }}>
+                    <div aria-hidden="true" style={{ marginTop: "0.125rem", flexShrink: 0, width: "2.25rem", height: "2.25rem", borderRadius: "0.6rem", background: "rgba(255,255,255,0.15)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.95rem" }}>
+                      •
+                    </div>
+                    <div>
+                      <h2 style={{ fontSize: "0.9rem", fontWeight: 600, margin: 0 }}>{title}</h2>
+                      <p style={{ marginTop: "0.25rem", fontSize: "0.8rem", color: "rgba(255,255,255,0.8)" }}>{desc}</p>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </div>
+            <p style={{ fontSize: "0.75rem", color: "rgba(255,255,255,0.5)" }}>مصمم لفرق العمليات التي تحتاج إلى الوضوح والسرعة والثقة.</p>
+          </div>
+        </aside>
+
+        <section style={{ display: "flex", alignItems: "center", justifyContent: "center", background: "var(--color-surface)", padding: "2.5rem 1.5rem" }}>
+          <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%", maxWidth: "26rem", borderRadius: "0.9rem", border: "1px solid var(--color-border)", background: "#FFF", padding: "2rem", boxShadow: "var(--shadow-card)" }} noValidate>
+            <p style={{ fontSize: "1.75rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>مرحبًا بعودتك</p>
+            <p style={{ marginTop: "0.35rem", fontSize: "0.9rem", color: "var(--color-text-muted)" }}>سجل الدخول لإدارة عمليات التسليم</p>
+
+            <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+              <Input
+                label="البريد الإلكتروني أو رقم الهاتف أو اسم المستخدم"
+                autoComplete="username"
+                placeholder="name@company.com / 05xxxxxxxx / username"
+                error={errors.identity?.message}
+                {...register("identity")}
+              />
+
+              <Input
+                label="كلمة المرور"
+                type="password"
+                autoComplete="current-password"
+                placeholder="••••••••"
+                error={errors.password?.message}
+                {...register("password")}
+              />
+            </div>
+
+            <div style={{ marginTop: "0.75rem", display: "flex", justifyContent: "flex-end" }}>
+              <Link href="/forgot-password" style={{ fontSize: "0.8rem", color: "var(--color-brand-600)", textDecoration: "none" }}>
+                هل نسيت كلمة المرور؟
+              </Link>
+            </div>
+
+            {error && (
+              <div style={{ marginTop: "1rem" }}>
+                <Alert type="error" message={error} onClose={clearError} />
+              </div>
+            )}
+
+            <Button type="submit" loading={loading} fullWidth className="mt-6 h-11">
+              {loading ? "جاري تسجيل الدخول…" : "تسجيل الدخول"}
+            </Button>
+
+            <p style={{ marginTop: "1rem", textAlign: "center", fontSize: "0.85rem", color: "var(--color-text-muted)" }}>
+              ليس لديك حساب؟{" "}
+              <Link href="/register" style={{ color: "var(--color-brand-600)", textDecoration: "none" }}>
+                إنشاء حساب
+              </Link>
+            </p>
+          </form>
+        </section>
+      </section>
+    </main>
+  );
+}

src/hooks/useAuth.ts

@@ -0,0 +1,82 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import { saveAuth } from "@/src/lib/auth";
+import { authService } from "@/src/service/auth.service";
+import type { AuthUser, LoginRequest, User } from "@/src/types/auth";
+import { detectIdentityField } from "@/src/validations/auth.validator";
+
+type RawRole = { name?: string; permissions?: Array<{ permission?: { slug?: string } }> } | string;
+
+export function useAuth() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const login = useCallback(async (identity: string, password: string) => {
+    setError(null);
+    setLoading(true);
+
+    try {
+      const field = detectIdentityField(identity);
+      const payload: LoginRequest = { password };
+
+      if (field) {
+        payload[field] = identity;
+      }
+
+      const response = await authService.login(payload);
+      const envelope = (response as { data?: { data?: { token?: string; user?: User }; token?: string; user?: User } }).data ?? response;
+      const body = (envelope as { data?: { token?: string; user?: User }; token?: string; user?: User }).data ?? envelope;
+      const token = body?.token;
+      const user = body?.user;
+
+      if (!token || !user) {
+        throw new Error("اسم المستخدم أو كلمة المرور غير صحيحة.");
+      }
+
+      const rawRole = (user as unknown as { role?: RawRole }).role;
+      const roleName = typeof rawRole === "string"
+        ? rawRole
+        : typeof rawRole === "object" && rawRole !== null
+          ? rawRole.name
+          : undefined;
+
+      const rolePermissions =
+        typeof rawRole === "object" && rawRole !== null
+          ? (rawRole as Exclude<RawRole, string>).permissions ?? []
+          : [];
+
+      const permissions = Array.isArray(rolePermissions)
+        ? rolePermissions
+            .map((entry) => entry?.permission?.slug)
+            .filter((slug): slug is string => Boolean(slug))
+        : [];
+
+      const normalizedUser: AuthUser = { ...user, role: roleName, permissions };
+      saveAuth(token, normalizedUser);
+      router.replace("/dashboard");
+      return true;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "حدث خطأ غير متوقع. يرجى المحاولة لاحقًا.";
+      const normalized = message.toLowerCase();
+
+      if (normalized.includes("network") || normalized.includes("fetch") || normalized.includes("timeout")) {
+        setError("تعذر الاتصال بالخادم. يرجى التحقق من الاتصال والمحاولة مرة أخرى.");
+      } else if (normalized.includes("401") || normalized.includes("unauthorized")) {
+        setError("اسم المستخدم أو كلمة المرور غير صحيحة.");
+      } else {
+        setError(message);
+      }
+
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [router]);
+
+  return { login, loading, error, clearError };
+}

src/lib/auth.ts

@@ -5,6 +5,42 @@ const AUTH_TOKEN_KEY    = "auth_token";
 const AUTH_USER_KEY     = "auth_user";
 const AUTH_TOKEN_COOKIE = "auth_token";
 
+function normalizeUser(user: AuthUser | null | undefined): AuthUser | null {
+  if (!user) return null;
+
+  const rawRole = (user as unknown as { role?: unknown }).role;
+  const roleName = typeof rawRole === "string"
+    ? rawRole
+    : typeof rawRole === "object" && rawRole !== null && "name" in rawRole && typeof (rawRole as { name?: unknown }).name === "string"
+      ? (rawRole as { name: string }).name
+      : undefined;
+
+  const rawPermissions = Array.isArray((user as unknown as { permissions?: unknown[] }).permissions)
+    ? (user as unknown as { permissions?: unknown[] }).permissions
+    : typeof rawRole === "object" && rawRole !== null && "permissions" in rawRole
+      ? ((rawRole as { permissions?: unknown[] }).permissions ?? [])
+      : [];
+
+  const permissions = Array.isArray(rawPermissions)
+    ? rawPermissions
+        .map((entry) => {
+          if (typeof entry === "string") return entry;
+          if (entry && typeof entry === "object") {
+            if ("slug" in entry && typeof (entry as { slug?: unknown }).slug === "string") {
+              return (entry as { slug: string }).slug;
+            }
+            if ("permission" in entry && entry.permission && typeof (entry.permission as { slug?: unknown }).slug === "string") {
+              return (entry.permission as { slug: string }).slug;
+            }
+          }
+          return null;
+        })
+        .filter((entry): entry is string => Boolean(entry))
+    : [];
+
+  return { ...user, role: roleName, permissions };
+}
+
 // ── Cookie helpers ─────────────────────────────────────────────────────────
 function setTokenCookie(token: string) {
   if (typeof document === "undefined") return;
@@ -27,13 +63,14 @@ export function getStoredUser(): AuthUser | null {
   if (typeof window === "undefined") return null;
   const raw = localStorage.getItem(AUTH_USER_KEY);
   if (!raw) return null;
-  try { return JSON.parse(raw) as AuthUser; } catch { return null; }
+  try { return normalizeUser(JSON.parse(raw) as AuthUser); } catch { return null; }
 }
 
 export function saveAuth(token: string, user: AuthUser) {
   if (typeof window === "undefined") return;
+  const normalizedUser = normalizeUser(user);
   localStorage.setItem(AUTH_TOKEN_KEY, token);
-  localStorage.setItem(AUTH_USER_KEY, JSON.stringify(user));
+  localStorage.setItem(AUTH_USER_KEY, JSON.stringify(normalizedUser));
   setTokenCookie(token);
 }
 

src/service/auth.service.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+import type { LoginRequest, LoginResponse } from "@/src/types/auth";
+
+const authApi = axios.create({
+  baseURL: "/api/proxy",
+  timeout: 20000,
+});
+
+export const authService = {
+  login: async (payload: LoginRequest): Promise<LoginResponse> => {
+    const response = await authApi.post<LoginResponse>("/auth/login", payload);
+    return response.data;
+  },
+};

src/types/auth.ts

@@ -1,4 +1,4 @@
-export interface AuthUser {
+export interface User {
   id?: string;
   name?: string;
   userName?: string;
@@ -10,11 +10,25 @@ export interface AuthUser {
   [key: string]: unknown;
 }
 
-export interface LoginResponse {
-  token: string;
-  user: AuthUser;
+export type AuthUser = User;
+
+export interface LoginRequest {
+  userName?: string;
+  email?: string;
+  phone?: string;
+  password: string;
 }
+
 export interface LoginPayload {
   identity: string;
   password: string;
+}
+
+export interface LoginResponse {
+  token?: string;
+  user?: User;
+  data?: {
+    token?: string;
+    user?: User;
+  };
 }

src/validations/auth.validator.ts

@@ -0,0 +1,51 @@
+import * as yup from "yup";
+
+// phhone regex for saudi numbers
+const saudiPhoneRegex = /^(\+966|966|0)?5[0-9]{8}$/;
+
+function isEmail(value: string) {
+  return yup.string().email().isValidSync(value);
+}
+
+function isPhone(value: string) {
+  return saudiPhoneRegex.test(value);
+}
+
+function isUserName(value: string) {
+  return value.length >= 2;
+}
+
+export function detectIdentityField(identity: string) {
+  const value = identity.trim();
+
+  if (!value) return null;
+  if (isEmail(value)) return "email";
+  if (isPhone(value)) return "phone";
+  if (isUserName(value)) return "userName";
+  return null;
+}
+
+/**
+ * lopginSchema is a Yup validation schema for validating login form data. It checks that the identity field is either a valid email, a valid Saudi phone number, or a username with at least 2 characters. The password field must be at least 8 characters long.
+ */
+export const loginSchema = yup.object({
+  identity: yup
+    .string()
+    .trim()
+    .required("البريد الإلكتروني أو رقم الهاتف أو اسم المستخدم مطلوب")
+    .test(
+      "valid-identity",
+      "يجب إدخال بريد إلكتروني صحيح أو رقم هاتف سعودي صحيح أو اسم مستخدم لا يقل عن حرفين",
+      (value) => {
+        if (!value) return false;
+        return isEmail(value) || isPhone(value) || isUserName(value);
+      }
+    ),
+
+  password: yup
+    .string()
+    .required("كلمة المرور مطلوبة")
+    .min(8, "كلمة المرور يجب أن تكون 8 أحرف على الأقل"),
+});
+
+export type LoginFormData = yup.InferType<typeof loginSchema>;