Editing Super Admin permissions and visual changes

apps/web/src/layouts/AdmLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { RouterLink, RouterView, useRouter } from 'vue-router';
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router';
 import { usePlatformAuthStore } from '@/stores/platform-auth';
 import UiIcon from '@/components/UiIcon.vue';
 import MentoLogo from '@/components/brand/MentoLogo.vue';
@@ -8,9 +8,32 @@ import BrandName from '@/components/brand/BrandName.vue';
 
 const platform = usePlatformAuthStore();
 const router = useRouter();
+const route = useRoute();
 
 const displayName = computed(() => platform.admin?.fullName || 'سوپرادمین');
 
+const pageTitle = computed(() => {
+  switch (route.name) {
+    case 'adm-dashboard':
+      return 'داشبورد';
+    case 'adm-organizations':
+      return 'محیط‌ها';
+    case 'adm-users':
+      return 'کاربران';
+    case 'adm-admins':
+      return 'ادمین‌ها';
+    default:
+      return 'سوپرادمین';
+  }
+});
+
+const tabs = [
+  { name: 'adm-dashboard', label: 'خانه', icon: 'home' as const },
+  { name: 'adm-organizations', label: 'محیط‌ها', icon: 'building' as const },
+  { name: 'adm-users', label: 'کاربران', icon: 'users' as const },
+  { name: 'adm-admins', label: 'ادمین‌ها', icon: 'lock' as const },
+];
+
 function onLogout() {
   platform.logout();
   void router.push({ name: 'adm-login' });
@@ -19,36 +42,41 @@ function onLogout() {
 
 <template>
   <div class="adm-shell">
-    <aside class="sidebar">
+    <aside class="sidebar desktop-only">
       <div class="brand">
-        <MentoLogo :size="32" :show-text="false" />
+        <div class="brand-mark">
+          <MentoLogo :size="36" :show-text="false" />
+        </div>
         <div class="brand-copy">
           <BrandName />
-          <span>پنل سوپرادمین</span>
+          <span>کنترل پلتفرم</span>
         </div>
       </div>
 
-      <nav class="nav">
-        <RouterLink :to="{ name: 'adm-dashboard' }" class="nav-item">
-          <UiIcon name="home" :size="18" />
-          <span>داشبورد</span>
-        </RouterLink>
-        <RouterLink :to="{ name: 'adm-organizations' }" class="nav-item">
-          <UiIcon name="building" :size="18" />
-          <span>محیط‌ها</span>
-        </RouterLink>
-        <RouterLink :to="{ name: 'adm-users' }" class="nav-item">
-          <UiIcon name="users" :size="18" />
-          <span>کاربران</span>
-        </RouterLink>
-        <RouterLink :to="{ name: 'adm-admins' }" class="nav-item">
-          <UiIcon name="lock" :size="18" />
-          <span>ادمین‌ها</span>
+      <nav class="nav" aria-label="منوی سوپرادمین">
+        <RouterLink
+          v-for="tab in tabs"
+          :key="tab.name"
+          :to="{ name: tab.name }"
+          class="nav-item"
+        >
+          <span class="nav-ico" aria-hidden="true">
+            <UiIcon :name="tab.icon" :size="18" />
+          </span>
+          <span>{{ tab.label }}</span>
         </RouterLink>
       </nav>
 
       <div class="side-foot">
-        <p class="who">{{ displayName }}</p>
+        <div class="who-card">
+          <span class="who-avatar" aria-hidden="true">
+            {{ displayName.slice(0, 1) }}
+          </span>
+          <div class="who-meta">
+            <strong>{{ displayName }}</strong>
+            <small>سوپرادمین</small>
+          </div>
+        </div>
         <button type="button" class="logout" @click="onLogout">
           <UiIcon name="logout" :size="16" />
           <span>خروج</span>
@@ -56,9 +84,40 @@ function onLogout() {
       </div>
     </aside>
 
-    <main class="main">
-      <RouterView />
-    </main>
+    <div class="stage">
+      <header class="topbar">
+        <div class="top-brand mobile-only">
+          <MentoLogo :size="28" :show-text="false" />
+          <div>
+            <strong>{{ pageTitle }}</strong>
+            <small>سوپرادمین</small>
+          </div>
+        </div>
+        <div class="top-desktop desktop-only">
+          <h1>{{ pageTitle }}</h1>
+          <p>مدیریت حساب‌ها، اشتراک و ماژول‌ها</p>
+        </div>
+        <button type="button" class="logout-top mobile-only" @click="onLogout">
+          <UiIcon name="logout" :size="18" />
+        </button>
+      </header>
+
+      <main class="main">
+        <RouterView />
+      </main>
+    </div>
+
+    <nav class="tabbar" aria-label="ناوبری پایین">
+      <RouterLink
+        v-for="tab in tabs"
+        :key="tab.name"
+        :to="{ name: tab.name }"
+        class="tab"
+      >
+        <UiIcon :name="tab.icon" :size="20" />
+        <span>{{ tab.label }}</span>
+      </RouterLink>
+    </nav>
   </div>
 </template>
 
@@ -67,122 +126,299 @@ function onLogout() {
   min-height: 100vh;
   min-height: 100dvh;
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   background:
-    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(45, 212, 191, 0.08), transparent 55%),
-    var(--bg);
+    radial-gradient(ellipse 70% 45% at 100% -10%, rgba(20, 184, 166, 0.14), transparent 55%),
+    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(14, 165, 233, 0.08), transparent 50%),
+    linear-gradient(180deg, #f4fbfa 0%, var(--bg) 40%);
+}
+
+.desktop-only {
+  display: flex;
+}
+
+.mobile-only {
+  display: none;
 }
 
 .sidebar {
-  display: flex;
   flex-direction: column;
-  gap: 1.2rem;
-  padding: 1.15rem 0.9rem;
-  background: #fff;
-  border-inline-end: 1px solid var(--line);
-  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.03);
+  gap: 1.35rem;
+  padding: 1.25rem 1rem;
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(12px);
+  border-inline-end: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
+  box-shadow: 10px 0 40px rgba(15, 23, 42, 0.04);
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
-  padding: 0.2rem 0.35rem;
+  gap: 0.75rem;
+  padding: 0.35rem 0.4rem;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: linear-gradient(145deg, var(--accent-subtle), #fff);
+  border: 1px solid color-mix(in srgb, var(--accent) 18%, white);
+  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.08);
 }
 
 .brand-copy {
   display: grid;
   min-width: 0;
+  gap: 0.1rem;
 }
 
 .brand-copy span {
   color: var(--muted);
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
 }
 
 .nav {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.35rem;
   flex: 1;
+  align-content: start;
 }
 
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  padding: 0.7rem 0.8rem;
-  border-radius: 12px;
+  gap: 0.7rem;
+  padding: 0.72rem 0.8rem;
+  border-radius: 14px;
   color: var(--ink-secondary);
   text-decoration: none;
-  font-weight: 700;
-  font-size: 0.9rem;
+  font-weight: 750;
+  font-size: 0.92rem;
+  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--ink);
+}
+
+.nav-ico {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 11px;
+  background: var(--surface-subtle);
+  color: var(--muted);
 }
 
 .nav-item.router-link-active {
-  background: var(--accent-subtle);
+  background: linear-gradient(135deg, var(--accent-subtle), #fff);
   color: var(--accent-deep);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, white);
+}
+
+.nav-item.router-link-active .nav-ico {
+  background: var(--accent);
+  color: #fff;
 }
 
 .side-foot {
   display: grid;
-  gap: 0.45rem;
-  padding: 0.35rem;
+  gap: 0.65rem;
+  padding-top: 0.35rem;
+  border-top: 1px solid var(--line-light);
 }
 
-.who {
-  margin: 0;
+.who-card {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.55rem;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid var(--line-light);
+}
+
+.who-avatar {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+  font-weight: 900;
+}
+
+.who-meta {
+  display: grid;
+  min-width: 0;
+}
+
+.who-meta strong {
+  font-size: 0.86rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.who-meta small {
   color: var(--muted);
-  font-size: 0.8rem;
+  font-size: 0.72rem;
   font-weight: 700;
 }
 
 .logout {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.4rem;
-  border: 0;
-  background: transparent;
-  color: #94a3b8;
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--muted);
   font: inherit;
-  font-size: 0.8rem;
+  font-size: 0.82rem;
+  font-weight: 750;
+  cursor: pointer;
+  padding: 0.55rem 0.75rem;
+  border-radius: 12px;
+}
+
+.logout:hover {
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 30%, white);
+}
+
+.stage {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem 0.85rem;
+  background: color-mix(in srgb, #f4fbfa 78%, transparent);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid transparent;
+}
+
+.top-desktop h1 {
+  margin: 0;
+  font-size: 1.35rem;
+  letter-spacing: -0.02em;
+}
+
+.top-desktop p {
+  margin: 0.2rem 0 0;
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.top-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.top-brand strong {
+  display: block;
+  font-size: 1rem;
+}
+
+.top-brand small {
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.logout-top {
+  border: 0;
+  background: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
   cursor: pointer;
-  padding: 0;
 }
 
 .main {
+  flex: 1;
   min-width: 0;
-  padding: 1.4rem 1.5rem 2rem;
+  padding: 0.4rem 1.5rem 2rem;
 }
 
-@media (max-width: 800px) {
+.tabbar {
+  display: none;
+  position: sticky;
+  bottom: 0;
+  z-index: 30;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.15rem;
+  padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(16px);
+  border-top: 1px solid var(--line-light);
+  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.06);
+}
+
+.tab {
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  padding: 0.45rem 0.2rem;
+  border-radius: 12px;
+  text-decoration: none;
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
+.tab.router-link-active {
+  color: var(--accent-deep);
+  background: var(--accent-subtle);
+}
+
+@media (max-width: 860px) {
   .adm-shell {
     grid-template-columns: 1fr;
   }
 
-  .sidebar {
-    border-inline-end: 0;
-    border-bottom: 1px solid var(--line);
-    padding-bottom: 0.75rem;
+  .desktop-only {
+    display: none !important;
   }
 
-  .nav {
-    grid-template-columns: repeat(4, 1fr);
-    flex: none;
+  .mobile-only {
+    display: flex;
   }
 
-  .nav-item {
-    justify-content: center;
-    font-size: 0.8rem;
-  }
-
-  .side-foot {
-    grid-template-columns: 1fr auto;
-    align-items: center;
+  .topbar {
+    padding: 0.75rem 0.9rem;
+    border-bottom: 1px solid var(--line-light);
   }
 
   .main {
-    padding: 1rem 0.9rem 1.6rem;
+    padding: 0.75rem 0.9rem calc(1.2rem + env(safe-area-inset-bottom));
+  }
+
+  .tabbar {
+    display: grid;
   }
 }
 </style>