initial

2026-08-11 23:17:04 +07:00
parent bc37ab90f6
commit d7e0d81462
49 changed files with 9023 additions and 91 deletions
@@ -0,0 +1,182 @@
+<template>
+    <div
+      class="flex h-dvh flex-col lg:grid"
+      :class="sidebarOpen ? 'lg:grid-cols-[250px_1fr]' : 'lg:grid-cols-1'"
+    >
+    <div
+      v-if="sidebarOpen"
+      class="fixed inset-0 z-30 bg-black/40 lg:hidden"
+      @click="sidebarOpen = false"
+    ></div>
+    <aside
+      class="fixed inset-y-0 left-0 z-40 flex w-[250px] transform flex-col gap-2 bg-slate-800 p-4 text-slate-200 transition-transform duration-200 lg:static"
+      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
+    >
+      <div class="mb-4 flex items-center justify-between text-xl font-bold text-white">
+        <div class="flex items-center gap-2">
+          <i class="pi pi-briefcase"></i>
+          MWS
+        </div>
+        <button class="lg:hidden" aria-label="Close menu" @click="sidebarOpen = false">
+          <i class="pi pi-times text-lg"></i>
+        </button>
+      </div>
+      <nav class="flex flex-col gap-1">
+        <router-link
+          v-for="item in visibleNavItems"
+          :key="item.key"
+          class="nav-link"
+          :to="item.to"
+          @click="handleNavClick"
+        >
+          <i :class="item.icon"></i> {{ item.label }}
+        </router-link>
+        <router-link class="nav-link" to="/settings" @click="handleNavClick">
+          <i class="pi pi-cog"></i> Settings
+        </router-link>
+      </nav>
+      <div class="flex-1"></div>
+      <div class="flex items-center gap-2 text-slate-300">
+        <Avatar :label="initials" style="background: #3b82f6; color: #fff" size="normal" />
+        <span>{{ auth.user?.displayName ?? auth.user?.username }}</span>
+      </div>
+    </aside>
+
+    <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+      <div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5 dark:border-slate-800 dark:bg-slate-900 lg:px-6">
+        <div class="flex items-center gap-2">
+          <Button
+            icon="pi pi-bars"
+            rounded
+            text
+            :aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
+            @click="sidebarOpen = !sidebarOpen"
+          />
+          <span class="truncate text-slate-500 dark:text-slate-400">{{ currentProject?.name ?? 'My Workspace' }}</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <Button
+            :icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
+            rounded
+            text
+            :aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
+            @click="theme.toggle"
+          />
+          <Menu ref="menu" :model="menuItems" popup />
+          <Button
+            icon="pi pi-ellipsis-v"
+            rounded
+            text
+            aria-label="Options"
+            @click="toggleMenu"
+          />
+       </div>
+      </div>
+      <main class="flex-1 overflow-auto p-4 lg:p-6">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '../stores/auth'
+import { useTheme } from '../composables/useTheme'
+import { getProject } from '../services/backend'
+import type { Project } from '../types'
+
+const auth = useAuthStore()
+const route = useRoute()
+const menu = ref()
+const sidebarOpen = ref(false)
+const theme = useTheme()
+
+const desktopMq = window.matchMedia('(min-width: 1024px)')
+const isDesktop = ref(desktopMq.matches)
+desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
+
+function handleNavClick() {
+  if (!isDesktop.value) sidebarOpen.value = false
+}
+
+const navItems = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
+  { key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
+  { key: 'accounts', label: 'Accounts', icon: 'pi pi-users', to: '/accounts' },
+  { key: 'roles', label: 'Roles', icon: 'pi pi-shield', to: '/roles' },
+]
+const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
+
+const currentProject = ref<Project | null>(null)
+
+async function loadCurrentProject(id: string | string[]) {
+  try {
+    currentProject.value = await getProject(String(id))
+  } catch {
+    currentProject.value = null
+  }
+}
+
+watch(
+  () => route.params.id,
+  (id) => {
+    if (id) void loadCurrentProject(id)
+    else currentProject.value = null
+  },
+  { immediate: true },
+)
+
+const initials = computed(() => {
+  const name = auth.user?.displayName ?? auth.user?.username ?? '?'
+  return name.slice(0, 2).toUpperCase()
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (!isDesktop.value) sidebarOpen.value = false
+  },
+)
+
+const menuItems = computed(() => [
+  {
+    label: auth.user?.displayName ?? auth.user?.username,
+    items: [
+      {
+        label: 'Logout',
+        icon: 'pi pi-sign-out',
+        command: () => {
+          auth.logout()
+          window.location.href = '/login'
+        },
+      },
+    ],
+  },
+])
+
+function toggleMenu(event: Event) {
+  menu.value?.toggle(event)
+}
+</script>
+
+<style scoped>
+.nav-link {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #cbd5e1;
+}
+.nav-link:hover {
+  background-color: #334155;
+  color: #fff;
+}
+.nav-link.router-link-active {
+  background-color: #3b82f6;
+  color: #fff;
+}
+</style>
@@ -0,0 +1,24 @@
+<template>
+  <div class="project-layout">
+    <div class="mb-5 flex gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-700">
+      <router-link
+        class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-exact-active]:border-blue-500 [&.router-link-exact-active]:text-blue-500"
+        :to="{ name: 'project-overview' }"
+      >Overview</router-link>
+      <router-link
+        class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
+        :to="{ name: 'documents' }"
+      >Documents</router-link>
+      <router-link
+        class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
+        :to="{ name: 'tasks' }"
+      >Tasks</router-link>
+      <router-link
+        class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
+        :to="{ name: 'members' }"
+      >Members</router-link>
+    </div>
+
+    <router-view />
+  </div>
+</template>