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

app/components/layout/Navbar.tsx

@@ -1,4 +1,4 @@
-import Logo from "@/utils/logo";
+import Logo from "@/src/utils/logo";
 import Link from "next/link";
 
 
@@ -13,7 +13,7 @@ const navLinks = [
 
 export default function Navbar() {
   return (
-    <nav dir="rtl" className="w-full border-b border-slate-200 bg-white text-slate-900 shadow-sm">x 
+    <nav dir="rtl" className="w-full border-b border-slate-200 bg-white text-slate-900 shadow-sm">
       <div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-6 lg:px-8">
         <a href="/" className="flex items-center gap-3 text-right">
           <Logo />
@@ -33,8 +33,21 @@ export default function Navbar() {
           ))}
         </div>
 
-        <div className="mr-auto flex items-center gap-2">
-          
+        {/*
+          Was `mr-auto`. `mr-*` is a PHYSICAL Tailwind utility — it means
+          "margin-right" no matter what `dir` says, so it would have
+          pinned the login button to the visual left in both LTR and
+          RTL, fighting the rest of the nav. `ms-auto` ("margin-inline-
+          start: auto") pushes against the start edge instead, which is
+          right in RTL and left in LTR — it tracks `dir` automatically.
+          This is the single most common RTL bug: Tailwind's l/r-prefixed
+          utilities (ml, mr, pl, pr, left-, right-, text-left, text-right,
+          rounded-l, rounded-r, border-l, border-r) are all physical and
+          need their logical (s/e) equivalents — ms, me, ps, pe, start-,
+          end-, text-start, text-end, rounded-s, rounded-e, border-s,
+          border-e — anywhere direction should matter.
+        */}
+        <div className="ms-auto flex items-center gap-2">
           <Link href="/login" className="flex h-[34px] items-center rounded-lg bg-blue-600 px-3 text-[13px] font-bold text-white shadow-sm transition hover:bg-blue-700">
             تسجيل الدخول ←
           </Link>