feat: sidebar

src/app/dashboard/(active)/account/loading.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { NewPasskeyButton } from "./passkey-button"
+
+export default function Loading() {
+  return (
+    <main className="container">
+      <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
+      <div className="flex gap-4 mb-12">
+        <Skeleton className="h-32 w-32 rounded-full" />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Name:</span>
+            <Skeleton className="w-40 h-5" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Email:</span>
+            <Skeleton className="w-70 h-5" />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Telegram:</span>
+            <Skeleton className="w-60 h-5" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 justify-start items-start">
+        <h3>Passkeys</h3>
+        <Skeleton className="w-full h-10" />
+        <NewPasskeyButton />
+      </div>
+    </main>
+  )
+}

src/app/dashboard/(active)/account/page.tsx

@@ -21,7 +21,7 @@ export default async function Account() {
   const { user } = session
 
   return (
-    <main className="container mx-auto px-4 py-8">
+    <main className="container">
       <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
       <div className="flex gap-4 mb-12">
         <ProfilePic user={user} />

src/app/dashboard/(active)/azure/members/loading.tsx

@@ -2,7 +2,7 @@ import { SkeletonAssocTable } from "./table"
 
 export default function Loading() {
   return (
-    <div className="container p-8">
+    <div className="container">
       <SkeletonAssocTable />
     </div>
   )

src/app/dashboard/(active)/azure/members/page.tsx

@@ -8,7 +8,7 @@ export default async function AssocMembers() {
   const members = await getAzureMembers()
 
   return (
-    <div className="container p-8">
+    <div className="container">
       <ErrorBoundary fallback={<div>Something went wrong</div>}>
         <Suspense fallback={<Spinner />}>
           <AssocTable members={members} />

src/app/dashboard/(active)/azure/members/table.tsx

@@ -33,7 +33,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
   const users = sociFilter ? members.filter((v) => v.isMember) : members
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge
@@ -60,7 +60,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
 
 export function SkeletonAssocTable() {
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge className="animate-pulse w-15" />

src/app/dashboard/(active)/breadcrumb.tsx

@@ -0,0 +1,74 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { Fragment, useMemo } from "react"
+import { NAV_MAP } from "@/components/dashboard-sidebar/data"
+import {
+  BreadcrumbItem as BreadcrumbItemComponent,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  Breadcrumb as BreadcrumbRoot,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+
+export type BreadcrumbItem = {
+  title: string
+  url?: string
+}
+
+export function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  const pathname = usePathname()
+  const items = useMemo(() => getBreadcrumbs(NAV_MAP, pathname), [pathname])
+
+  return (
+    <BreadcrumbRoot className={className} {...props}>
+      <BreadcrumbList>
+        {items.map((item, i) => (
+          <Fragment key={`breadcrumb-item-${i}`}>
+            <BreadcrumbItemComponent className="hidden md:block">
+              {i === items.length - 1 ? (
+                <BreadcrumbPage>{item.title}</BreadcrumbPage>
+              ) : item.url ? (
+                <BreadcrumbLink href={item.url}>{item.title}</BreadcrumbLink>
+              ) : (
+                item.title
+              )}
+            </BreadcrumbItemComponent>
+            {i < items.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  )
+}
+
+function getBreadcrumbs(navMap: Map<string, string>, pathname: string): BreadcrumbItem[] {
+  const segments = pathname.split("/").filter(Boolean)
+  const breadcrumbs: BreadcrumbItem[] = []
+
+  let currentPath = ""
+  let i = 0
+
+  for (const segment of segments) {
+    currentPath += `/${segment}`
+    let title = navMap.get(currentPath)
+    if (!title) {
+      if (isUUIDorId(segment)) {
+        title = "Details"
+      } else {
+        title = segment.charAt(0).toUpperCase() + segment.slice(1)
+      }
+    }
+
+    // note: at the moment we do not plan to make category pages.
+    // If such pages are made in the future, this logic can be removed
+    breadcrumbs.push({ title, url: i !== 1 ? currentPath : undefined })
+    i++
+  }
+
+  return breadcrumbs
+}
+
+function isUUIDorId(segment: string) {
+  return !Number.isNaN(Number(segment)) || segment.length > 20 // Regex custom a seconda dei tuoi ID
+}

src/app/dashboard/(active)/complete-profile.tsx

@@ -1,13 +1,17 @@
 "use client"
 
-import type { User } from "better-auth"
 import { UserRoundPenIcon } from "lucide-react"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import { useSession } from "@/lib/auth"
+
+export function CompleteProfile() {
+  const { data, isPending } = useSession()
+
+  if (!data || isPending) return null
 
-export function CompleteProfile({ user }: { user: User }) {
   return (
-    !user.name && (
+    !data.user.name && (
       <div className="flex items-center p-2 pl-4 mb-4 gap-2 rounded-lg border text-accent-foreground bg-yellow-400/10 border-yellow-400">
         <UserRoundPenIcon size={16} />
         <p className="grow">Your profile is incomplete, please enter the missing information.</p>

src/app/dashboard/(active)/layout.tsx

@@ -0,0 +1,50 @@
+import { cookies } from "next/headers"
+import { DashboardSidebar } from "@/components/dashboard-sidebar"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { COOKIES } from "@/constants"
+import { Breadcrumb } from "./breadcrumb"
+
+function parseCookie(cookie: string) {
+  try {
+    const parsed = JSON.parse(cookie)
+    return parsed
+  } catch (_e) {
+    return {}
+  }
+}
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const sidebarCookies = await getSidebarCookies()
+
+  return (
+    <SidebarProvider
+      defaultOpen={sidebarCookies.open}
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <DashboardSidebar categoryState={sidebarCookies.state} />
+      <SidebarInset className="px-4">
+        <header className="flex h-16 shrink-0 relative items-center justify-between gap-2 border-b mb-8">
+          <SidebarTrigger className="-ml-1" size="icon" />
+          <Breadcrumb className="absolute left-1/2 -translate-x-1/2" />
+          <div></div>
+        </header>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+async function getSidebarCookies() {
+  const cookieStore = await cookies()
+
+  const sidebarCategoryStateCookie = cookieStore.get(COOKIES.SIDEBAR_CATEGORY_STATE)?.value
+  const sidebarOpenCookie = cookieStore.get(COOKIES.SIDEBAR_OPEN)?.value
+  const state: Record<string, boolean> = sidebarCategoryStateCookie ? parseCookie(sidebarCategoryStateCookie) : {}
+  const open: boolean = sidebarOpenCookie !== undefined ? parseCookie(sidebarOpenCookie) : true
+
+  return { state, open }
+}

src/app/dashboard/(active)/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-8 px-4">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="font-heading text-[12rem] leading-none font-bold tracking-tight text-primary">404</h1>
+        <h2 className="font-heading text-2xl font-semibold text-foreground">Not found</h2>
+        <p className="max-w-sm text-muted-foreground">
+          The resource you&apos;re looking for doesn&apos;t exist or has been moved.
+        </p>
+      </div>
+      <Link href=".">
+        <Button>Go Back</Button>
+      </Link>
+    </div>
+  )
+}

src/app/dashboard/(active)/page.tsx

@@ -1,45 +1,16 @@
-import Image from "next/image"
-import Link from "next/link"
-import azureSvg from "@/assets/svg/azure.svg"
-import telegramSvg from "@/assets/svg/telegram.svg"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { getServerSession } from "@/server/auth"
+import { InfoIcon } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { CompleteProfile } from "./complete-profile"
 
-export default async function AdminHome() {
-  const { data: session } = await getServerSession()
+export default function AdminHome() {
   return (
-    session && (
-      <div className="container py-8 px-2">
-        <CompleteProfile user={session.user} />
-        <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Home</h2>
-
-        <div className="gap-4 flex justify-start flex-wrap items-center">
-          <Link href="/dashboard/azure">
-            <Card className="w-90 hover:bg-accent transition-colors">
-              <CardHeader>
-                <CardTitle className="flex gap-2">
-                  <Image alt="azure logo" src={azureSvg} className="size-5" />
-                  Azure
-                </CardTitle>
-                <CardDescription>Manage Azure related things</CardDescription>
-              </CardHeader>
-            </Card>
-          </Link>
-
-          <Link href="/dashboard/telegram">
-            <Card className="w-90 hover:bg-accent transition-colors">
-              <CardHeader>
-                <CardTitle className="flex gap-2">
-                  <Image alt="telegram logo" src={telegramSvg} className="size-5" />
-                  Telegram
-                </CardTitle>
-                <CardDescription>Manage Telegram related things</CardDescription>
-              </CardHeader>
-            </Card>
-          </Link>
-        </div>
-      </div>
-    )
+    <div className="container">
+      <CompleteProfile />
+      <Alert variant="info">
+        <InfoIcon />
+        <AlertTitle>Page under construction</AlertTitle>
+        <AlertDescription>Use the sidebar to access the sections</AlertDescription>
+      </Alert>
+    </div>
   )
 }

src/app/dashboard/(active)/telegram/grants/delete-grant.tsx

@@ -19,7 +19,13 @@ import {
 import { Button } from "@/components/ui/button"
 import { interruptGrant } from "@/server/actions/grants"
 
-export function DeleteGrant({ userId, onDelete }: { userId: number; onDelete(): void }) {
+export function DeleteGrant({
+  userId,
+  // onDelete
+}: {
+  userId: number
+  // onDelete(): void
+}) {
   const router = useRouter()
   const [open, setOpen] = useState(false)
 
@@ -33,7 +39,7 @@ export function DeleteGrant({ userId, onDelete }: { userId: number; onDelete():
       else {
         toast.success("Grant interrupted successfully")
         router.refresh()
-        onDelete()
+        // onDelete()
       }
     } catch (err) {
       toast.error("There was an error")

src/app/dashboard/(active)/telegram/grants/grant-list.tsx

@@ -19,7 +19,7 @@ export function GrantList({ grants, isScheduled }: { grants: Grants; isScheduled
         <GrantRow row={r} key={r.grant.id} />
       ))}
       {grants.length === 0 && (
-        <div className="w-full text-center py-2 italic">
+        <div className="w-full text-center py-4 italic">
           There are no {isScheduled ? "scheduled" : "ongoing"} grants
         </div>
       )}
@@ -36,7 +36,7 @@ function GrantRow({ row: r }: { row: Grants[number] }) {
       </p>
       <p>{format(r.grant.validSince, "yyyy/MM/dd HH:mm")}</p>
       <p>{format(r.grant.validUntil, "yyyy/MM/dd HH:mm")}</p>
-      <DeleteGrant userId={r.grant.userId} onDelete={() => null} />
+      <DeleteGrant userId={r.grant.userId} />
     </div>
   )
 }