Creating a CRM Super Admin

2026-09-19 21:54:21 +03:30
parent ff5ad21eb9
commit b016b4754f
28 changed files with 2977 additions and 6 deletions
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink, RouterView, useRouter } from 'vue-router';
+import { usePlatformAuthStore } from '@/stores/platform-auth';
+import UiIcon from '@/components/UiIcon.vue';
+import MentoLogo from '@/components/brand/MentoLogo.vue';
+import BrandName from '@/components/brand/BrandName.vue';
+
+const platform = usePlatformAuthStore();
+const router = useRouter();
+
+const displayName = computed(() => platform.admin?.fullName || 'سوپرادمین');
+
+function onLogout() {
+  platform.logout();
+  void router.push({ name: 'adm-login' });
+}
+</script>
+
+<template>
+  <div class="adm-shell">
+    <aside class="sidebar">
+      <div class="brand">
+        <MentoLogo :size="32" :show-text="false" />
+        <div class="brand-copy">
+          <BrandName />
+          <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>
+      </nav>
+
+      <div class="side-foot">
+        <p class="who">{{ displayName }}</p>
+        <button type="button" class="logout" @click="onLogout">
+          <UiIcon name="logout" :size="16" />
+          <span>خروج</span>
+        </button>
+      </div>
+    </aside>
+
+    <main class="main">
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.adm-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  background: var(--bg);
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  padding: 1.15rem 0.9rem;
+  background: #fff;
+  border-inline-end: 1px solid var(--line);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.2rem 0.35rem;
+}
+
+.brand-copy {
+  display: grid;
+  min-width: 0;
+}
+
+.brand-copy span {
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.nav {
+  display: grid;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 12px;
+  color: var(--ink-secondary);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.nav-item.router-link-active {
+  background: var(--accent-subtle);
+  color: var(--accent-deep);
+}
+
+.side-foot {
+  display: grid;
+  gap: 0.45rem;
+  padding: 0.35rem;
+}
+
+.who {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.logout {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 0;
+  background: transparent;
+  color: #94a3b8;
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0;
+}
+
+.main {
+  min-width: 0;
+  padding: 1.4rem 1.5rem 2rem;
+}
+
+@media (max-width: 800px) {
+  .adm-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    border-inline-end: 0;
+    border-bottom: 1px solid var(--line);
+    padding-bottom: 0.75rem;
+  }
+
+  .nav {
+    grid-template-columns: repeat(3, 1fr);
+    flex: none;
+  }
+
+  .nav-item {
+    justify-content: center;
+    font-size: 0.8rem;
+  }
+
+  .side-foot {
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+
+  .main {
+    padding: 1rem 0.9rem 1.6rem;
+  }
+}
+</style>