Feat/team-collaboration

app/components/AppSidebar.vue

@@ -2,7 +2,7 @@
 import {
   LayoutDashboard, Briefcase, Users, Inbox,
   ChevronLeft, Eye, Kanban, FileText, LogOut, Table2, Hand,
-  Sun, Moon, MessageSquarePlus,
+  Sun, Moon, MessageSquarePlus, Settings,
 } from 'lucide-vue-next'
 
 const route = useRoute()
@@ -29,6 +29,7 @@ const navItems = [
   { label: 'Jobs', to: '/dashboard/jobs', icon: Briefcase, exact: false },
   { label: 'Candidates', to: '/dashboard/candidates', icon: Users, exact: false },
   { label: 'Applications', to: '/dashboard/applications', icon: Inbox, exact: false },
+  { label: 'Settings', to: '/dashboard/settings', icon: Settings, exact: false },
 ]
 
 // ─────────────────────────────────────────────

app/components/CandidateDetailSidebar.vue

@@ -63,15 +63,7 @@ const documents = computed(() => candidateData.value?.documents ?? [])
 // ─────────────────────────────────────────────
 // Status transitions
 // ─────────────────────────────────────────────
-
-const STATUS_TRANSITIONS: Record<string, string[]> = {
-  new: ['screening', 'interview', 'rejected'],
-  screening: ['interview', 'offer', 'rejected'],
-  interview: ['offer', 'rejected'],
-  offer: ['hired', 'rejected'],
-  hired: [],
-  rejected: ['new'],
-}
+import { APPLICATION_STATUS_TRANSITIONS } from '~~/shared/status-transitions'
 
 const transitionLabels: Record<string, string> = {
   new: 'Re-open',
@@ -102,7 +94,7 @@ const statusBadgeClasses: Record<string, string> = {
 
 const allowedTransitions = computed(() => {
   if (!application.value) return []
-  return STATUS_TRANSITIONS[application.value.status] ?? []
+  return APPLICATION_STATUS_TRANSITIONS[application.value.status] ?? []
 })
 
 const isTransitioning = ref(false)

app/components/SettingsSidebar.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {
+  Building2, Users, UserCircle, ChevronLeft, Settings,
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const localePath = useLocalePath()
+
+const settingsNav = [
+  {
+    label: 'General',
+    description: 'Organization profile',
+    to: '/dashboard/settings',
+    icon: Building2,
+    exact: true,
+  },
+  {
+    label: 'Members',
+    description: 'Team & invitations',
+    to: '/dashboard/settings/members',
+    icon: Users,
+    exact: true,
+  },
+  {
+    label: 'Account',
+    description: 'Profile & security',
+    to: '/dashboard/settings/account',
+    icon: UserCircle,
+    exact: true,
+  },
+]
+
+function isActive(to: string, exact: boolean) {
+  const localizedTo = localePath(to)
+  if (exact) return route.path === localizedTo
+  return route.path === localizedTo || route.path.startsWith(`${localizedTo}/`)
+}
+</script>
+
+<template>
+  <aside
+    class="flex h-full w-56 min-w-56 flex-col border-r border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-y-auto"
+  >
+    <!-- Header -->
+    <div class="px-4 pt-5 pb-4">
+      <NuxtLink
+        :to="$localePath('/dashboard')"
+        class="inline-flex items-center gap-1.5 text-xs font-medium text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors no-underline mb-3"
+      >
+        <ChevronLeft class="size-3.5" />
+        Back to dashboard
+      </NuxtLink>
+      <div class="flex items-center gap-2.5">
+        <div class="flex items-center justify-center size-8 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400">
+          <Settings class="size-4" />
+        </div>
+        <h2 class="text-sm font-semibold text-surface-900 dark:text-surface-100">
+          Settings
+        </h2>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex-1 px-3 pb-5">
+      <div class="flex flex-col gap-0.5">
+        <NuxtLink
+          v-for="item in settingsNav"
+          :key="item.to"
+          :to="$localePath(item.to)"
+          class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-all no-underline"
+          :class="isActive(item.to, item.exact)
+            ? 'bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium'
+            : 'text-surface-600 dark:text-surface-400 hover:bg-surface-50 dark:hover:bg-surface-800/60 hover:text-surface-900 dark:hover:text-surface-100'"
+        >
+          <div
+            class="flex items-center justify-center size-8 rounded-md transition-colors"
+            :class="isActive(item.to, item.exact)
+              ? 'bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400'
+              : 'bg-surface-100 dark:bg-surface-800 text-surface-400 dark:text-surface-500 group-hover:text-surface-600 dark:group-hover:text-surface-300'"
+          >
+            <component :is="item.icon" class="size-4" />
+          </div>
+          <div class="min-w-0">
+            <div class="truncate leading-tight">{{ item.label }}</div>
+            <div
+              class="text-[11px] leading-tight mt-0.5 truncate"
+              :class="isActive(item.to, item.exact)
+                ? 'text-brand-500/70 dark:text-brand-400/60'
+                : 'text-surface-400 dark:text-surface-500'"
+            >
+              {{ item.description }}
+            </div>
+          </div>
+        </NuxtLink>
+      </div>
+    </nav>
+  </aside>
+</template>

app/composables/usePermission.ts

@@ -0,0 +1,69 @@
+import type { statements } from '~~/shared/permissions'
+
+/**
+ * Permission descriptor — same shape as the server-side PermissionRequest.
+ * Maps a resource to the actions being checked.
+ *
+ * Example: `{ job: ['create'] }` or `{ candidate: ['read', 'update'] }`
+ */
+type PermissionRequest = {
+  [K in keyof typeof statements]?: ReadonlyArray<(typeof statements)[K][number]>
+}
+
+/**
+ * ─────────────────────────────────────────────
+ * usePermission — client-side permission gating
+ * ─────────────────────────────────────────────
+ *
+ * Returns reactive `allowed` (boolean ref) indicating whether the
+ * current user's role satisfies the given permission set.
+ *
+ * Uses Better Auth's `checkRolePermission` which runs synchronously
+ * on the client against the AC config — no server roundtrip required.
+ *
+ * **Important:** client-side checks are cosmetic only.  They control
+ * UI visibility (hide buttons, disable inputs).  The real enforcement
+ * happens on the server via `requirePermission()`.
+ *
+ * Usage:
+ * ```vue
+ * <script setup>
+ * const { allowed: canCreateJob } = usePermission({ job: ['create'] })
+ * </script>
+ *
+ * <template>
+ *   <UButton v-if="canCreateJob" @click="createJob">New Job</UButton>
+ * </template>
+ * ```
+ */
+export function usePermission(permissions: PermissionRequest) {
+  const role = ref<string | null>(null)
+
+  // Fetch the active member's role and re-fetch when org changes
+  const activeOrgState = authClient.useActiveOrganization()
+
+  async function fetchRole() {
+    const { data, error } = await authClient.organization.getActiveMemberRole()
+    if (!error) {
+      role.value = data?.role ?? null
+    }
+  }
+
+  // Fetch on mount and whenever the active org changes
+  watch(
+    () => activeOrgState.value.data?.id,
+    () => fetchRole(),
+    { immediate: true },
+  )
+
+  const allowed = computed(() => {
+    if (!role.value) return false
+
+    return authClient.organization.checkRolePermission({
+      permissions: permissions as Record<string, string[]>,
+      role: role.value as 'owner' | 'admin' | 'member',
+    })
+  })
+
+  return { allowed, role: readonly(role) }
+}

app/layouts/dashboard.vue

@@ -15,7 +15,7 @@ const isDemo = computed(() => {
 </script>
 
 <template>
-  <div class="flex min-h-screen">
+  <div class="flex h-screen">
     <AppSidebar />
     <PreviewUpsellModal v-if="isUpsellOpen" @close="closeUpsell" />
     <main class="flex-1 overflow-y-auto bg-surface-50 dark:bg-surface-950 px-6 py-8">

app/pages/dashboard/applications/[id].vue

@@ -24,15 +24,7 @@ useSeoMeta({
 // ─────────────────────────────────────────────
 // Status transitions
 // ─────────────────────────────────────────────
-
-const STATUS_TRANSITIONS: Record<string, string[]> = {
-  new: ['screening', 'interview', 'rejected'],
-  screening: ['interview', 'offer', 'rejected'],
-  interview: ['offer', 'rejected'],
-  offer: ['hired', 'rejected'],
-  hired: [],
-  rejected: ['new'],
-}
+import { APPLICATION_STATUS_TRANSITIONS } from '~~/shared/status-transitions'
 
 const transitionLabels: Record<string, string> = {
   new: 'Re-open',
@@ -63,7 +55,7 @@ const transitionDotClasses: Record<string, string> = {
 
 const allowedTransitions = computed(() => {
   if (!application.value) return []
-  return STATUS_TRANSITIONS[application.value.status] ?? []
+  return APPLICATION_STATUS_TRANSITIONS[application.value.status] ?? []
 })
 
 const isTransitioning = ref(false)

app/pages/dashboard/jobs/[id]/index.vue

@@ -21,13 +21,7 @@ useSeoMeta({
 // ─────────────────────────────────────────────
 // Status transitions
 // ─────────────────────────────────────────────
-
-const JOB_STATUS_TRANSITIONS: Record<string, string[]> = {
-  draft: ['open', 'archived'],
-  open: ['closed', 'archived'],
-  closed: ['open', 'archived'],
-  archived: ['draft', 'open'],
-}
+import { JOB_STATUS_TRANSITIONS } from '~~/shared/status-transitions'
 
 const transitionLabels: Record<string, string> = {
   draft: 'Revert to Draft',

app/pages/dashboard/jobs/[id]/pipeline.vue

@@ -47,14 +47,7 @@ const columns = [
   { key: 'rejected', label: 'Rejected', color: 'surface' },
 ] as const
 
-const STATUS_TRANSITIONS: Record<string, string[]> = {
-  new: ['screening', 'interview', 'rejected'],
-  screening: ['interview', 'offer', 'rejected'],
-  interview: ['offer', 'rejected'],
-  offer: ['hired', 'rejected'],
-  hired: [],
-  rejected: ['new'],
-}
+import { APPLICATION_STATUS_TRANSITIONS } from '~~/shared/status-transitions'
 
 function getColumnApps(status: string) {
   return applications.value.filter((a: any) => a.status === status)
@@ -153,7 +146,7 @@ const isLoading = computed(() => jobFetchStatus.value === 'pending' || appFetchS
               :candidate-email="app.candidateEmail"
               :created-at="app.createdAt"
               :score="app.score"
-              :allowed-transitions="STATUS_TRANSITIONS[app.status] ?? []"
+              :allowed-transitions="APPLICATION_STATUS_TRANSITIONS[app.status] ?? []"
               :is-transitioning="transitioningId === app.id"
               @transition="handleTransition(app.id, $event)"
             />

app/pages/dashboard/jobs/[id]/swipe.vue

@@ -197,14 +197,7 @@ useSeoMeta({
   robots: 'noindex, nofollow',
 })
 
-const STATUS_TRANSITIONS: Record<string, string[]> = {
-  new: ['screening', 'interview', 'rejected'],
-  screening: ['interview', 'offer', 'rejected'],
-  interview: ['offer', 'rejected'],
-  offer: ['hired', 'rejected'],
-  hired: [],
-  rejected: ['new'],
-}
+import { APPLICATION_STATUS_TRANSITIONS } from '~~/shared/status-transitions'
 
 const statusBadgeClasses: Record<string, string> = {
   new: 'bg-brand-50 text-brand-700 dark:bg-brand-950 dark:text-brand-400',
@@ -274,7 +267,7 @@ function scoreClass(score: number) {
 
 const allowedTransitions = computed(() => {
   if (!currentSummary.value) return []
-  return STATUS_TRANSITIONS[currentSummary.value.status] ?? []
+  return APPLICATION_STATUS_TRANSITIONS[currentSummary.value.status] ?? []
 })
 
 function isCurrentStatus(status: string) {

app/pages/dashboard/settings.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard',
+  middleware: ['auth', 'require-org'],
+})
+</script>
+
+<template>
+  <div class="flex min-w-0 flex-1 -mx-6 -my-8">
+    <div class="sticky -top-8 h-screen shrink-0">
+      <SettingsSidebar />
+    </div>
+    <div class="flex-1 min-w-0 px-8 py-8">
+      <NuxtPage />
+    </div>
+  </div>
+</template>