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

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}