Sidebar

app/(main)/components/sidebar.tsx

@@ -0,0 +1,80 @@
+import Link from 'next/link';
+import { createClient } from '@/app/lib/supabase/server-client';
+
+type Role = 'default' | 'requestor' | 'admin' | 'superadmin' | 'owner';
+
+type SidebarLink = {
+  label: string;
+  href: string;
+  allowedRoles: Role[];
+};
+
+export default async function Sidebar() {
+  const supabase = await createClient();
+
+  // Get user claims (JWT)
+  const { data } = await supabase.auth.getClaims();
+  const role = data?.claims?.user_role as Role | undefined;
+
+  // Not logged in → no sidebar
+  if (!role) return null;
+
+  const links: SidebarLink[] = [
+    {
+      label: 'Home',
+      href: '/home',
+      allowedRoles: ['default', 'requestor', 'admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Profile',
+      href: '/profile',
+      allowedRoles: ['requestor', 'admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Request',
+      href: '/request',
+      allowedRoles: ['requestor', 'admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Outgoing Tickets',
+      href: '/outgoing-tickets',
+      allowedRoles: ['requestor', 'admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Manage',
+      href: '/manage',
+      allowedRoles: ['admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Incoming Tickets',
+      href: '/incoming-tickets',
+      allowedRoles: ['admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'Team',
+      href: '/team',
+      allowedRoles: ['requestor', 'admin', 'superadmin', 'owner'],
+    },
+    {
+      label: 'HQ',
+      href: '/hq',
+      allowedRoles: ['superadmin', 'owner'],
+    },
+  ];
+
+  return (
+    <aside>
+      <nav>
+        <ul>
+          {links
+            .filter((link) => link.allowedRoles.includes(role))
+            .map((link) => (
+              <li key={link.href}>
+                <Link href={link.href}>{link.label}</Link>
+              </li>
+            ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

app/(main)/hq/page.tsx

@@ -0,0 +1,8 @@
+export default function HQPage() {
+  return (
+    <main>
+      <h1>HQ</h1>
+      <p>This page is accessible to SUPERADMIN and OWNER users.</p>
+    </main>
+  );
+}

app/(main)/incoming-tickets/page.tsx

@@ -0,0 +1,8 @@
+export default function IncomingTicketsPage() {
+  return (
+    <main>
+      <h1>Incoming Tickets</h1>
+      <p>Manage incoming requests, to be completed.</p>
+    </main>
+  );
+}

app/(main)/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import Sidebar from './components/sidebar';
+
+export default function MainLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      {/* Sidebar */}
+      <Sidebar />
+
+      {/* Main page content */}
+      <main style={{ flex: 1, padding: '1rem' }}>
+        {children}
+      </main>
+    </div>
+  );
+}

app/(main)/manage/page.tsx

@@ -0,0 +1,8 @@
+export default function ManagePage() {
+  return (
+    <main>
+      <h1>Manage</h1>
+      <p>Manage page, to be completed.</p>
+    </main>
+  );
+}

app/(main)/request/page.tsx

@@ -0,0 +1,8 @@
+export default function RequestPage() {
+  return (
+    <main>
+      <h1>Request</h1>
+      <p>Request page, to be completed.</p>
+    </main>
+  );
+}

app/(main)/team/page.tsx

@@ -0,0 +1,8 @@
+export default function TeamPage() {
+  return (
+    <main>
+      <h1>Team</h1>
+      <p>Team page, to be completed.</p>
+    </main>
+  );
+}