update user page and logo to be link also update profile page

app/components/layout/ConditionalNavbar.tsx

@@ -16,5 +16,5 @@ export default function ConditionalNavbar() {
   const isDashboardRoute = pathname?.startsWith("/dashboard");
   if (user || isDashboardRoute) return null;
 
-  return <Navbar />;
+  return "";
 }

app/components/layout/Sidebar.tsx

@@ -325,7 +325,7 @@ function SidebarContent({
           justifyContent: compact ? "center" : "flex-start",
         }}
       >
-        {compact ? <BrandIcon size={36} /> : <Logo white />}
+        {compact ? <BrandIcon size={36} /> : <Logo white href="/dashboard" />}
       </div>
 
       <nav

app/components/system/ExtensionAttributeCleanup.tsx

@@ -0,0 +1,40 @@
+
+"use client";
+
+import { useEffect } from "react";
+
+// Some browser extensions (Bitdefender TrafficLight and similar) inject
+// bis_skin_checked / bis_register attributes onto form elements before
+// React hydrates the page. This causes a harmless but noisy hydration
+// mismatch warning. This component strips those attributes after mount
+// and keeps watching for re-injection, without disabling SSR/hydration.
+const WATCHED_ATTRS = ["bis_skin_checked", "bis_register", "__processed_by_bitdefender__"];
+
+export function ExtensionAttributeCleanup() {
+  useEffect(() => {
+    function strip() {
+      const selector = WATCHED_ATTRS.map(a => `[${a}]`).join(",");
+      document.querySelectorAll(selector).forEach(el => {
+        WATCHED_ATTRS.forEach(attr => el.removeAttribute(attr));
+      });
+    }
+
+    // Initial cleanup right after hydration
+    strip();
+
+    // Extensions can re-inject the attribute after every re-render
+    // (e.g. after clicking Save, which re-renders the form), so keep
+    // watching instead of running once.
+    const observer = new MutationObserver(strip);
+    observer.observe(document.body, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: WATCHED_ATTRS,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Renders nothing — side-effect-only component
+  return null;
+}

app/dashboard/profile/page.tsx

@@ -6,7 +6,6 @@ export default function ProfilePage() {
   const { user, loading, error } = useCurrentUser();
 
   if (loading) {
-    // حالة تحميل بسيطة تتماشى مع سبينر الصور اللي عملتها قبل كده في الصفحات التانية
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
         <div className="h-8 w-8 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
@@ -27,12 +26,10 @@ export default function ProfilePage() {
     { label: "اسم المستخدم", value: user.userName ?? "—" },
     { label: "البريد الإلكتروني", value: user.email ?? "—" },
     { label: "رقم الهاتف", value: user.phone },
-    { label: "الحالة", value: user.isActive ? "نشط" : "غير نشط" },
     { label: "تاريخ الإنشاء", value: new Date(user.createdAt).toLocaleDateString("ar-SA") },
     { label: "آخر تحديث", value: new Date(user.updatedAt).toLocaleDateString("ar-SA") },
   ];
 
-  // تجميع الصلاحيات حسب الموديول عشان تبقى منظمة وسهلة القراءة
   const permissionsByModule = (user.role?.permissions ?? []).reduce<Record<string, string[]>>(
     (acc, entry) => {
       const mod = entry.permission.module || "أخرى";
@@ -43,81 +40,98 @@ export default function ProfilePage() {
     {},
   );
   const modules = Object.keys(permissionsByModule);
+  const totalPermissions = Object.values(permissionsByModule).reduce((n, arr) => n + arr.length, 0);
 
   return (
-    <div className="mx-auto max-w-2xl space-y-6 px-4 py-10" dir="rtl">
-      {/* بطاقة البيانات الأساسية */}
-      <div className="rounded-2xl bg-white p-6 shadow-md">
-        <div className="mb-6 flex flex-col items-center gap-3">
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-blue-50 text-2xl font-semibold text-blue-600 ring-2 ring-blue-100">
+    <div className="min-h-screen bg-slate-50" dir="rtl">
+      {/* top bar: user info */}
+      <div className="border-b border-slate-200 bg-white">
+        <div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-4 px-6 py-10 sm:flex-row sm:items-center">
+          <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xl font-semibold text-white">
             {user.name?.trim().charAt(0) ?? "?"}
           </div>
-          <h1 className="text-base font-semibold text-slate-900">{user.name}</h1>
-          {user.role?.name && (
-            <span className="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
-              {user.role.name}
+          <div className="flex-1 text-center sm:text-right">
+            <h1 className="text-lg font-semibold text-slate-900">{user.name}</h1>
+            <p className="mt-0.5 text-sm text-slate-500">{user.email ?? user.phone}</p>
+          </div>
+          <div className="flex items-center gap-2">
+            {user.role?.name && (
+              <span className="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
+                {user.role.name}
+              </span>
+            )}
+            <span
+              className={`rounded-full px-3 py-1 text-xs font-medium ${
+                user.isActive ? "bg-emerald-50 text-emerald-700" : "bg-slate-100 text-slate-500"
+              }`}
+            >
+              {user.isActive ? "نشط" : "غير نشط"}
             </span>
-          )}
+          </div>
         </div>
-
-        {/* عرض البيانات بشكل read-only بدون أي فورم أو زرار تعديل */}
-        <dl className="divide-y divide-slate-100">
-          {fields.map((f) => (
-            <div key={f.label} className="flex items-center justify-between py-2.5 text-[13px]">
-              <dt className="text-slate-500">{f.label}</dt>
-              <dd className="font-medium text-slate-800">{f.value}</dd>
-            </div>
-          ))}
-        </dl>
       </div>
 
-      {/* بطاقة الدور والصلاحيات */}
-      {user.role && (
-        <div className="rounded-2xl bg-white p-6 shadow-md">
-          <div className="mb-4">
-            <h2 className="text-sm font-semibold text-slate-900">الدور والصلاحيات</h2>
-            {user.role.description && (
-              <p className="mt-1 text-[13px] text-slate-500">{user.role.description}</p>
-            )}
+      {/* main content, full width */}
+      <div className="mx-auto w-full max-w-6xl px-6 py-8">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+          {/* account details */}
+          <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-100 lg:col-span-1">
+            <h2 className="mb-4 text-sm font-semibold text-slate-900">بيانات الحساب</h2>
+            <dl className="divide-y divide-slate-100">
+              {fields.map((f) => (
+                <div key={f.label} className="flex items-center justify-between py-2.5 text-[13px]">
+                  <dt className="text-slate-500">{f.label}</dt>
+                  <dd className="font-medium text-slate-800">{f.value}</dd>
+                </div>
+              ))}
+            </dl>
           </div>
 
-          {modules.length === 0 ? (
-            <p className="text-[13px] text-slate-400">لا توجد صلاحيات مسجّلة لهذا الدور.</p>
-          ) : (
-            <div className="space-y-2">
-              {modules.map((mod) => (
-                <details
-                  key={mod}
-                  className="group rounded-lg border border-slate-100 open:bg-slate-50"
-                  open
-                >
-                  <summary className="flex cursor-pointer list-none items-center justify-between px-3 py-2.5 text-[13px] font-medium text-slate-700">
-                    <span className="flex items-center gap-2">
-                      {mod}
-                      <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-normal text-slate-500">
+          {/* role and permissions */}
+          <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-100 lg:col-span-2">
+            <div className="mb-4 flex items-center justify-between">
+              <div>
+                <h2 className="text-sm font-semibold text-slate-900">الدور والصلاحيات</h2>
+                {user.role?.description && (
+                  <p className="mt-1 text-[13px] text-slate-500">{user.role.description}</p>
+                )}
+              </div>
+              {modules.length > 0 && (
+                <span className="rounded-full bg-slate-100 px-3 py-1 text-[11px] font-medium text-slate-500">
+                  {totalPermissions} صلاحية
+                </span>
+              )}
+            </div>
+
+            {modules.length === 0 ? (
+              <p className="text-[13px] text-slate-400">لا توجد صلاحيات مسجّلة لهذا الدور.</p>
+            ) : (
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {modules.map((mod) => (
+                  <div key={mod} className="rounded-xl border border-slate-100 bg-slate-50/60 p-3">
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="text-[13px] font-medium text-slate-700">{mod}</span>
+                      <span className="rounded-full bg-white px-2 py-0.5 text-[11px] font-normal text-slate-500 ring-1 ring-slate-100">
                         {permissionsByModule[mod].length}
                       </span>
-                    </span>
-                    <span className="text-slate-400 transition-transform group-open:rotate-180">
-                      ▾
-                    </span>
-                  </summary>
-                  <div className="flex flex-wrap gap-2 px-3 pb-3 pt-1">
-                    {permissionsByModule[mod].map((name) => (
-                      <span
-                        key={name}
-                        className="rounded-md bg-blue-50 px-2.5 py-1 text-[12px] font-medium text-blue-700"
-                      >
-                        {name}
-                      </span>
-                    ))}
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {permissionsByModule[mod].map((name) => (
+                        <span
+                          key={name}
+                          className="rounded-md bg-blue-50 px-2 py-1 text-[11px] font-medium text-blue-700"
+                        >
+                          {name}
+                        </span>
+                      ))}
+                    </div>
                   </div>
-                </details>
-              ))}
-            </div>
-          )}
+                ))}
+              </div>
+            )}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }

app/dashboard/users/page.tsx

@@ -65,6 +65,11 @@ export default function UsersPage() {
       {/* Create / Edit modal */}
       {formTarget !== false && (
         <UserFormModal
+          // CHANGE: added key — forces a full remount when switching between
+          // "new" and different edit targets, so useForm's defaultValues
+          // (roleId/branchId included) always reflect the correct user
+          // instead of possibly reusing stale state from a previous instance.
+          key={formTarget === null ? "new" : formTarget.id}
           editUser={formTarget}
           roles={roles}
           branches={branches}

app/home/page.tsx

@@ -130,12 +130,7 @@ export default function HomePage() {
               >
                 تسجيل الدخول للوحة التحكم
               </Link>
-              <Link
-                href="/how_work"
-                className="inline-flex h-11 items-center rounded-xl bg-white px-5 text-[13px] font-semibold text-blue-700 shadow-md"
-              >
-                كيف تعمل المنصة؟
-              </Link>
+             
             </div>
           </article>
 
@@ -214,9 +209,7 @@ export default function HomePage() {
             })}
           </div>
           <div className="mt-6">
-            <Link href="/features/app" className="text-[13px] font-semibold text-blue-600 hover:text-blue-700">
-              عرض كل المميزات ←
-            </Link>
+            
           </div>
         </article>
       </section>
@@ -273,12 +266,7 @@ export default function HomePage() {
             >
               ابدأ الآن
             </Link>
-            <Link
-              href="/prices"
-              className="inline-flex h-11 items-center rounded-xl border border-white/30 bg-white/10 px-6 text-[13px] font-semibold text-white backdrop-blur"
-            >
-              عرض الأسعار
-            </Link>
+           
           </div>
         </article>
       </section>

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "@tabler/icons-webfont/dist/tabler-icons.min.css";
 import "./globals.css";
 import ConditionalNavbar from "./components/layout/ConditionalNavbar";
+import { ExtensionAttributeCleanup } from "./components/system/ExtensionAttributeCleanup"; // CHANGE: added — fixes hydration mismatch caused by browser extensions
 
 import { Footer } from "./components/layout";
 
@@ -19,6 +20,9 @@ export default function RootLayout({
     // ⚠️ اتصلح: الـ Navbar والـ footer كانوا برة <html>/<body> وده HTML غير صالح
     <html lang="ar" dir="rtl">
       <body className="app-shell" suppressHydrationWarning>
+        {/* CHANGE: mounted globally so every route (not just the dashboard
+            form pages) gets protected from extension-injected attributes */}
+        <ExtensionAttributeCleanup />
         {/* الناف بار بيظهر بس لو مفيش يوزر مسجل دخول */}
         <ConditionalNavbar />
         {children}