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/not_found/page.tsx

@@ -1,7 +1,82 @@
-import React from 'react'
+import Link from "next/link";
 
-export default function page() {
+export default function NotFound() {
   return (
-    <div>page</div>
-  )
-}
+    <main
+      dir="rtl"
+      style={{
+        minHeight: "100vh",
+        background: "var(--color-surface-muted)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      <div style={{ textAlign: "center", maxWidth: 480 }}>
+        {/* Large 404 */}
+        <p style={{
+          fontSize: "6rem",
+          fontWeight: 800,
+          color: "var(--color-brand-600)",
+          lineHeight: 1,
+          margin: 0,
+          fontFamily: "var(--font-mono)",
+        }}>
+          404
+        </p>
+
+        <h1 style={{
+          fontSize: "1.5rem",
+          fontWeight: 700,
+          color: "var(--color-text-primary)",
+          marginTop: "1rem",
+        }}>
+          الصفحة غير موجودة
+        </h1>
+
+        <p style={{
+          fontSize: 14,
+          color: "var(--color-text-muted)",
+          marginTop: "0.75rem",
+          lineHeight: 1.7,
+        }}>
+          الصفحة التي تبحث عنها غير موجودة أو ربما تم نقلها أو حذفها.
+        </p>
+
+        <div style={{ marginTop: "2rem", display: "flex", gap: "0.75rem", justifyContent: "center", flexWrap: "wrap" }}>
+          <Link href="/dashboard"
+            style={{
+              height: 40, padding: "0 1.5rem",
+              borderRadius: "var(--radius-lg)",
+              border: "none", background: "var(--color-brand-600)",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              textDecoration: "none",
+              display: "inline-flex", alignItems: "center", gap: 8,
+            }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" />
+            </svg>
+            لوحة التحكم
+          </Link>
+
+          <Link href="/"
+            style={{
+              height: 40, padding: "0 1.5rem",
+              borderRadius: "var(--radius-lg)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              fontSize: 13, fontWeight: 600,
+              color: "var(--color-text-secondary)",
+              textDecoration: "none",
+              display: "inline-flex", alignItems: "center",
+            }}>
+            الصفحة الرئيسية
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}