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/Topbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { clearAuth, getStoredUser } from "../../../lib/auth";
+import { clearAuth, getStoredUser } from "@/src/lib/auth";
 
 export function Topbar() {
   const router = useRouter();
@@ -24,14 +24,29 @@ export function Topbar() {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
+        /*
+          `justify-content: space-between` and `display: flex` are
+          direction-agnostic — they already flip with `dir` for free.
+          The title block (first child) lands at the inline-start edge
+          (right, in RTL) and the actions cluster (second child) lands
+          at inline-end (left). That matches the brief's "primary
+          actions easily accessible" requirement: in Arabic dashboards
+          the page title reads first at the right, and the role badge
+          + logout sit together at the natural reading end — unchanged
+          from before, just now correctly positioned by `dir` instead
+          of by accident.
+        */
       }}
     >
       <div>
-        <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text-primary)", margin: 0, textAlign: "start" }}>
           لوحة التحكم
         </p>
-        <p style={{ fontSize: 11, color: "var(--color-text-muted)", margin: 0 }}>
-          Operations dashboard
+        <p style={{ fontSize: 11, color: "var(--color-text-muted)", margin: 0, textAlign: "start" }}>
+          {/* English product label intentionally stays LTR-embedded so
+              "Operations dashboard" doesn't get its word order or
+              punctuation reversed by the surrounding RTL run. */}
+          <span className="ltr-embed">Operations dashboard</span>
         </p>
       </div>