feat: Sprint 4 complete — frontend MVP (admin dashboard + member portal)

Shadboard starter-kit (Next.js 15 + React 19 + shadcn/ui + Tailwind 4) Sprint 4.a — Admin Dashboard: - Auth: NextAuth.js v5, login page, middleware, token rotation - Dashboard: KPI cards, Recharts stock chart, quick actions - Members: TanStack Table (search/sort/paginate), add/edit forms - Distributions: multi-step form, real-time quota check, history - Stock: batch management, recall dialog, bar chart - Reports: monthly/member-list/recall, PDF/CSV download, preview Sprint 4.b — Member Portal: - Separate route group with top-nav layout (mobile-first) - Quota dashboard with radial SVG progress indicators - Distribution history with month filter - Profile/settings with password change Cross-cutting: - i18n: German (default) + English via next-intl - Dark + light mode (next-themes, user-togglable) - Playwright E2E tests (6/6 green) - Docker multi-stage build (node:22-alpine) - API proxy via Next.js rewrites Tech: Next.js 15.2.8, React 19, Tailwind 4, NextAuth v5, TanStack Table, Recharts, Zod, React Hook Form, Playwright
2026-06-12 17:18:38 +02:00
parent a1d4ba44e3
commit fe6e96dd3f
143 changed files with 23568 additions and 0 deletions
@@ -0,0 +1,51 @@
+"use client"
+
+import { signOut } from "next-auth/react"
+import { useTranslations } from "next-intl"
+import { LogOut } from "lucide-react"
+
+interface LogoutButtonProps {
+  variant?: "icon" | "full"
+  className?: string
+}
+
+export function LogoutButton({
+  variant = "full",
+  className = "",
+}: LogoutButtonProps) {
+  const t = useTranslations("auth")
+
+  async function handleLogout() {
+    // Call backend to revoke the token (best-effort)
+    try {
+      await fetch("/api/backend/auth/logout", { method: "POST" })
+    } catch {
+      // Ignore — sign out client-side regardless
+    }
+
+    await signOut({ callbackUrl: "/login" })
+  }
+
+  if (variant === "icon") {
+    return (
+      <button
+        onClick={handleLogout}
+        className={`inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
+        title={t("logout")}
+        aria-label={t("logout")}
+      >
+        <LogOut className="h-4 w-4" />
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={handleLogout}
+      className={`inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
+    >
+      <LogOut className="h-4 w-4" />
+      <span>{t("logout")}</span>
+    </button>
+  )
+}
@@ -0,0 +1,19 @@
+// Refer to Lucide documentation for more details https://lucide.dev/guide/packages/lucide-react
+import { icons } from "lucide-react"
+
+import type { DynamicIconNameType } from "@/types"
+import type { LucideProps } from "lucide-react"
+
+interface DynamicIconProps extends LucideProps {
+  name: DynamicIconNameType
+}
+
+// Component to render a dynamic Lucide icon based on its name.
+export function DynamicIcon({ name, ...props }: DynamicIconProps) {
+  const LucideIcon = icons[name] // Dynamically retrieve the icon by name.
+
+  // Return null if the icon name is invalid.
+  if (!LucideIcon) return null
+
+  return <LucideIcon {...props} />
+}
@@ -0,0 +1,160 @@
+"use client"
+
+import { Fragment, useCallback, useEffect, useState } from "react"
+import { usePathname, useRouter } from "next/navigation"
+import { ChevronDown, Search } from "lucide-react"
+
+import type { NavigationNestedItem, NavigationRootItem } from "@/types"
+import type { DialogProps } from "@radix-ui/react-dialog"
+
+import { navigationsData } from "@/data/navigations"
+
+import { cn, isActivePathname } from "@/lib/utils"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { DialogTitle } from "@/components/ui/dialog"
+import { Keyboard } from "@/components/ui/keyboard"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { DynamicIcon } from "@/components/dynamic-icon"
+
+interface CommandMenuProps extends DialogProps {
+  buttonClassName?: string
+}
+
+export function CommandMenu({ buttonClassName, ...props }: CommandMenuProps) {
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+  const router = useRouter()
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  const runCommand = useCallback((command: () => unknown) => {
+    setOpen(false)
+    command()
+  }, [])
+
+  const renderMenuItem = (item: NavigationRootItem | NavigationNestedItem) => {
+    // If the item has nested items, render it with a collapsible dropdown.
+    if (item.items) {
+      return (
+        <Collapsible key={item.title} className="group/collapsible">
+          <CommandItem asChild>
+            <CollapsibleTrigger className="w-full flex justify-between items-center gap-2 px-2 py-1.5 [&[data-state=open]>svg]:rotate-180">
+              <span className="flex items-center gap-2">
+                {"iconName" in item && (
+                  <DynamicIcon name={item.iconName} className="h-4 w-4" />
+                )}
+                <span>{item.title}</span>
+                {"label" in item && (
+                  <Badge variant="secondary">{item.label}</Badge>
+                )}
+              </span>
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            </CollapsibleTrigger>
+          </CommandItem>
+          <CollapsibleContent className="space-y-1 overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+            {item.items.map((subItem: NavigationNestedItem) =>
+              renderMenuItem(subItem)
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      )
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const isActive = isActivePathname(item.href, pathname)
+
+      return (
+        <CommandItem
+          key={item.title}
+          onSelect={() => runCommand(() => router.push(item.href))}
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5",
+            isActive && "bg-accent"
+          )}
+        >
+          {"iconName" in item ? (
+            <DynamicIcon name={item.iconName} />
+          ) : (
+            <DynamicIcon name="Circle" />
+          )}
+          <span>{item.title}</span>
+          {item.label && <Badge variant="secondary">{item.label}</Badge>}
+        </CommandItem>
+      )
+    }
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="lg"
+        className={cn(
+          "max-w-64 w-full justify-start px-3 rounded-md bg-muted/50 text-muted-foreground",
+          buttonClassName
+        )}
+        onClick={() => setOpen(true)}
+        {...props}
+      >
+        <Search className="me-2 h-4 w-4" />
+        <span>Search...</span>
+        <Keyboard className="ms-auto">K</Keyboard>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen} {...props}>
+        <DialogTitle className="sr-only">Search Menu</DialogTitle>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <ScrollArea className="h-[300px] max-h-[300px]">
+            {navigationsData.map((nav) => (
+              <CommandGroup
+                key={nav.title}
+                heading={nav.title}
+                className="[&_[cmdk-group-items]]:space-y-1"
+              >
+                {nav.items.map((item) => (
+                  <Fragment key={item.title}>{renderMenuItem(item)}</Fragment>
+                ))}
+              </CommandGroup>
+            ))}
+          </ScrollArea>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils"
+
+import { buttonVariants } from "@/components/ui/button"
+
+export function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="bg-background border-t border-sidebar-border">
+      <div className="container flex justify-between items-center p-4 md:px-6">
+        <p className="text-xs text-muted-foreground md:text-sm">
+          © {currentYear}{" "}
+          <a
+            href="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(buttonVariants({ variant: "link" }), "inline p-0")}
+          >
+            Shadboard
+          </a>
+          .
+        </p>
+        <p className="text-xs text-muted-foreground md:text-sm">
+          Designed & Developed by{" "}
+          <a
+            href="https://github.com/Qualiora"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(buttonVariants({ variant: "link" }), "inline p-0")}
+          >
+            Qualiora
+          </a>
+          .
+        </p>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,99 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { DynamicIcon } from "@/components/dynamic-icon"
+
+// Extend the global `Document` and `HTMLElement` interfaces to handle fullscreen API variations across browsers
+declare global {
+  interface Document {
+    webkitExitFullscreen?: () => Promise<void>
+    msExitFullscreen?: () => Promise<void>
+    webkitFullscreenElement?: Element | null
+    msFullscreenElement?: Element | null
+  }
+
+  interface HTMLElement {
+    webkitRequestFullscreen?: () => Promise<void>
+    msRequestFullscreen?: () => Promise<void>
+  }
+}
+
+export function FullscreenToggle() {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  const toggleFullscreen = () => {
+    const element = document.documentElement
+
+    // If fullscreen mode is not active, activate it
+    if (!isFullscreen) {
+      if (element.requestFullscreen) {
+        // Standard fullscreen API
+        element.requestFullscreen()
+      } else if (element.webkitRequestFullscreen) {
+        // For Safari
+        element.webkitRequestFullscreen()
+      } else if (element.msRequestFullscreen) {
+        // For IE/Edge
+        element.msRequestFullscreen()
+      } else {
+        alert("Fullscreen mode is not supported in this browser.")
+      }
+
+      // If fullscreen mode is active, deactivate it
+    } else {
+      if (document.exitFullscreen) {
+        // Standard fullscreen API
+        document.exitFullscreen()
+      } else if (document.webkitExitFullscreen) {
+        // For Safari
+        document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        // For IE/Edge
+        document.msExitFullscreen()
+      }
+    }
+  }
+
+  const handleFullscreenChange = () => {
+    // Update the fullscreen state when fullscreen changes
+    setIsFullscreen(
+      !!document.fullscreenElement ||
+        !!document.webkitFullscreenElement ||
+        !!document.msFullscreenElement
+    )
+  }
+
+  useEffect(() => {
+    // Add event listeners for fullscreen changes across various browsers
+    document.addEventListener("fullscreenchange", handleFullscreenChange)
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange)
+    document.addEventListener("msfullscreenchange", handleFullscreenChange)
+
+    // Cleanup event listeners to avoid memory leaks
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange)
+      document.removeEventListener(
+        "webkitfullscreenchange",
+        handleFullscreenChange
+      )
+      document.removeEventListener("msfullscreenchange", handleFullscreenChange)
+    }
+  }, [])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleFullscreen}
+      aria-label="Toggle Fullscreen"
+      className="hidden md:inline-flex"
+    >
+      <DynamicIcon
+        name={isFullscreen ? "Shrink" : "Expand"}
+        className="size-4"
+      />
+    </Button>
+  )
+}
@@ -0,0 +1,32 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+
+import { FullscreenToggle } from "@/components/layout/full-screen-toggle"
+import { ModeDropdown } from "@/components/layout/mode-dropdown"
+import { UserDropdown } from "@/components/layout/user-dropdown"
+import { ToggleMobileSidebar } from "../toggle-mobile-sidebar"
+
+export function BottomBarHeader() {
+  return (
+    <div className="container flex h-14 justify-between items-center gap-4">
+      <ToggleMobileSidebar />
+      <Link href="/" className="hidden text-foreground font-black lg:flex">
+        <Image
+          src="/images/icons/shadboard.svg"
+          alt=""
+          height={24}
+          width={24}
+          className="dark:invert"
+        />
+        <span>Shadboard</span>
+      </Link>
+      <div className="flex gap-2">
+        <FullscreenToggle />
+        <ModeDropdown />
+        <UserDropdown />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { BottomBarHeader } from "./bottom-bar-header"
+import { TopBarHeader } from "./top-bar-header"
+
+export function HorizontalLayoutHeader() {
+  return (
+    <header className="sticky top-0 z-50 w-full bg-background border-b border-sidebar-border">
+      <TopBarHeader />
+      <Separator className="hidden bg-sidebar-border h-[0.5px] md:block" />
+      <BottomBarHeader />
+    </header>
+  )
+}
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react"
+
+import { Footer } from "../footer"
+import { Sidebar } from "../sidebar"
+import { HorizontalLayoutHeader } from "./horizontal-layout-header"
+
+export function HorizontalLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Sidebar />
+      <div className="w-full">
+        <HorizontalLayoutHeader />
+        <main className="min-h-[calc(100svh-9.85rem)] bg-muted/40">
+          {children}
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,91 @@
+"use client"
+
+import { Fragment } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import type { NavigationNestedItem, NavigationRootItem } from "@/types"
+
+import { navigationsData } from "@/data/navigations"
+
+import { cn, isActivePathname } from "@/lib/utils"
+
+import { Badge } from "@/components/ui/badge"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+import { DynamicIcon } from "@/components/dynamic-icon"
+
+export function TopBarHeaderMenubar() {
+  const pathname = usePathname()
+
+  const renderMenuItem = (item: NavigationRootItem | NavigationNestedItem) => {
+    // If the item has nested items, render it with a MenubarSub.
+    if (item.items) {
+      return (
+        <MenubarSub>
+          <MenubarSubTrigger className="gap-2">
+            {"iconName" in item && (
+              <DynamicIcon name={item.iconName} className="me-2 h-4 w-4" />
+            )}
+            <span>{item.title}</span>
+            {"label" in item && <Badge variant="secondary">{item.label}</Badge>}
+          </MenubarSubTrigger>
+          <MenubarSubContent className="max-h-[90vh] flex flex-col flex-wrap gap-1">
+            {item.items.map((subItem: NavigationNestedItem) => {
+              return (
+                <MenubarItem key={subItem.title} className="p-0">
+                  {renderMenuItem(subItem)}
+                </MenubarItem>
+              )
+            })}
+          </MenubarSubContent>
+        </MenubarSub>
+      )
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const isActive = isActivePathname(item.href, pathname)
+
+      return (
+        <MenubarItem asChild>
+          <Link
+            href={item.href}
+            className={cn("w-full gap-2", isActive && "bg-accent")}
+          >
+            {"iconName" in item ? (
+              <DynamicIcon name={item.iconName} className="h-4 w-4" />
+            ) : (
+              <DynamicIcon name="Circle" className="h-2 w-2" />
+            )}
+            <span>{item.title}</span>
+            {"label" in item && <Badge variant="secondary">{item.label}</Badge>}
+          </Link>
+        </MenubarItem>
+      )
+    }
+  }
+
+  return (
+    <Menubar className="border-0">
+      {navigationsData.map((nav) => (
+        <MenubarMenu key={nav.title}>
+          <MenubarTrigger>{nav.title}</MenubarTrigger>
+          <MenubarContent className="space-y-1">
+            {nav.items.map((item) => (
+              <Fragment key={item.title}>{renderMenuItem(item)}</Fragment>
+            ))}
+          </MenubarContent>
+        </MenubarMenu>
+      ))}
+    </Menubar>
+  )
+}
@@ -0,0 +1,13 @@
+"use client"
+
+import { CommandMenu } from "@/components/layout/command-menu"
+import { TopBarHeaderMenubar } from "./top-bar-header-menubar"
+
+export function TopBarHeader() {
+  return (
+    <div className="container hidden justify-between items-center py-1 lg:flex">
+      <TopBarHeaderMenubar />
+      <CommandMenu buttonClassName="h-8" />
+    </div>
+  )
+}
@@ -0,0 +1,17 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { useIsVertical } from "@/hooks/use-is-vertical"
+import { HorizontalLayout } from "./horizontal-layout"
+import { VerticalLayout } from "./vertical-layout"
+
+export function Layout({ children }: { children: ReactNode }) {
+  const isVertical = useIsVertical()
+
+  return isVertical ? (
+    <VerticalLayout>{children}</VerticalLayout>
+  ) : (
+    <HorizontalLayout>{children}</HorizontalLayout>
+  )
+}
@@ -0,0 +1,66 @@
+"use client"
+
+import { useCallback } from "react"
+import { MoonStar, Sun, SunMoon } from "lucide-react"
+
+import type { ModeType } from "@/types"
+
+import { useSettings } from "@/hooks/use-settings"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+const modeIcons = {
+  light: Sun,
+  dark: MoonStar,
+  system: SunMoon,
+}
+
+export function ModeDropdown() {
+  const { settings, updateSettings } = useSettings()
+
+  const mode = settings.mode
+  const ModeIcon = modeIcons[mode]
+
+  const setMode = useCallback(
+    (modeName: ModeType) => {
+      updateSettings({ ...settings, mode: modeName })
+    },
+    [settings, updateSettings]
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Mode">
+          <ModeIcon className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Mode</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={mode}>
+          <DropdownMenuRadioItem value="light" onClick={() => setMode("light")}>
+            Light
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="dark" onClick={() => setMode("dark")}>
+            Dark
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem
+            value="system"
+            onClick={() => setMode("system")}
+          >
+            System
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -0,0 +1,143 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { ChevronDown } from "lucide-react"
+
+import type { NavigationNestedItem, NavigationRootItem } from "@/types"
+
+import { navigationsData } from "@/data/navigations"
+
+import { isActivePathname } from "@/lib/utils"
+
+import { useSettings } from "@/hooks/use-settings"
+import { Badge } from "@/components/ui/badge"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  Sidebar as SidebarWrapper,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { DynamicIcon } from "@/components/dynamic-icon"
+import { CommandMenu } from "./command-menu"
+
+export function Sidebar() {
+  const pathname = usePathname()
+  const { openMobile, setOpenMobile, isMobile } = useSidebar()
+  const { settings } = useSettings()
+
+  const isHoizontalAndDesktop = settings.layout === "horizontal" && !isMobile
+
+  // If the layout is horizontal and not on mobile, don't render the sidebar. (We use a menubar for horizontal layout navigation.)
+  if (isHoizontalAndDesktop) return null
+
+  const renderMenuItem = (item: NavigationRootItem | NavigationNestedItem) => {
+    // If the item has nested items, render it with a collapsible dropdown.
+    if (item.items) {
+      return (
+        <Collapsible className="group/collapsible">
+          <CollapsibleTrigger asChild>
+            <SidebarMenuButton className="w-full justify-between [&[data-state=open]>svg]:rotate-180">
+              <span className="flex items-center">
+                {"iconName" in item && (
+                  <DynamicIcon name={item.iconName} className="me-2 h-4 w-4" />
+                )}
+                <span>{item.title}</span>
+                {"label" in item && (
+                  <Badge variant="secondary" className="me-2">
+                    {item.label}
+                  </Badge>
+                )}
+              </span>
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+            <SidebarMenuSub>
+              {item.items.map((subItem: NavigationNestedItem) => (
+                <SidebarMenuItem key={subItem.title}>
+                  {renderMenuItem(subItem)}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </Collapsible>
+      )
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const isActive = isActivePathname(item.href, pathname)
+
+      return (
+        <SidebarMenuButton
+          isActive={isActive}
+          onClick={() => setOpenMobile(!openMobile)}
+          asChild
+        >
+          <Link href={item.href}>
+            {"iconName" in item && (
+              <DynamicIcon name={item.iconName} className="h-4 w-4" />
+            )}
+            <span>{item.title}</span>
+            {"label" in item && <Badge variant="secondary">{item.label}</Badge>}
+          </Link>
+        </SidebarMenuButton>
+      )
+    }
+  }
+
+  return (
+    <SidebarWrapper side="left">
+      <SidebarHeader>
+        <Link
+          href="/"
+          className="w-fit flex text-foreground font-black p-2 pb-0 mb-2"
+          onClick={() => isMobile && setOpenMobile(!openMobile)}
+        >
+          <Image
+            src="/images/icons/shadboard.svg"
+            alt=""
+            height={24}
+            width={24}
+            className="dark:invert"
+          />
+          <span>Shadboard</span>
+        </Link>
+        <CommandMenu buttonClassName="max-w-full" />
+      </SidebarHeader>
+      <ScrollArea>
+        <SidebarContent className="gap-0">
+          {navigationsData.map((nav) => (
+            <SidebarGroup key={nav.title}>
+              <SidebarGroupLabel>{nav.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {nav.items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      {renderMenuItem(item)}
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+      </ScrollArea>
+    </SidebarWrapper>
+  )
+}
@@ -0,0 +1,24 @@
+"use client"
+
+import { PanelLeft } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function ToggleMobileSidebar() {
+  const { isMobile, openMobile, setOpenMobile } = useSidebar()
+
+  if (isMobile) {
+    return (
+      <Button
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon"
+        onClick={() => setOpenMobile(!openMobile)}
+        aria-label="Toggle Sidebar"
+      >
+        <PanelLeft className="h-4 w-4" />
+      </Button>
+    )
+  }
+}
@@ -0,0 +1,76 @@
+import Link from "next/link"
+import { LogOut, User, UserCog } from "lucide-react"
+
+import { userData } from "@/data/user"
+
+import { getInitials } from "@/lib/utils"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function UserDropdown() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-lg"
+          aria-label="User"
+        >
+          <Avatar className="size-9">
+            <AvatarImage src={userData?.avatar} alt="" />
+            <AvatarFallback className="bg-transparent">
+              {userData?.name && getInitials(userData.name)}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent forceMount>
+        <DropdownMenuLabel className="flex gap-2">
+          <Avatar>
+            <AvatarImage src={userData?.avatar} alt="Avatar" />
+            <AvatarFallback className="bg-transparent">
+              {userData?.name && getInitials(userData.name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col overflow-hidden">
+            <p className="text-sm font-medium truncate">John Doe</p>
+            <p className="text-xs text-muted-foreground font-semibold truncate">
+              {userData?.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup className="max-w-48">
+          <DropdownMenuItem asChild>
+            <Link href="/">
+              <User className="me-2 size-4" />
+              Profile
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href="/">
+              <UserCog className="me-2 size-4" />
+              Settings
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="me-2 size-4" />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react"
+
+import { Footer } from "../footer"
+import { Sidebar } from "../sidebar"
+import { VerticalLayoutHeader } from "./vertical-layout-header"
+
+export function VerticalLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Sidebar />
+      <div className="w-full">
+        <VerticalLayoutHeader />
+        <main className="min-h-[calc(100svh-6.82rem)] bg-muted/40">
+          {children}
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,23 @@
+"use client"
+
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import { FullscreenToggle } from "@/components/layout/full-screen-toggle"
+import { ModeDropdown } from "@/components/layout/mode-dropdown"
+import { UserDropdown } from "@/components/layout/user-dropdown"
+import { ToggleMobileSidebar } from "../toggle-mobile-sidebar"
+
+export function VerticalLayoutHeader() {
+  return (
+    <header className="sticky top-0 z-50 w-full bg-background border-b border-sidebar-border">
+      <div className="container flex h-14 justify-between items-center gap-4">
+        <ToggleMobileSidebar />
+        <div className="grow flex justify-end gap-2">
+          <SidebarTrigger className="hidden lg:flex lg:me-auto" />
+          <FullscreenToggle />
+          <ModeDropdown />
+          <UserDropdown />
+        </div>
+      </div>
+    </header>
+  )
+}
@@ -0,0 +1,31 @@
+import Image from "next/image"
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+
+export function NotFound404() {
+  return (
+    <div className="min-h-screen w-full flex flex-col items-center justify-center gap-y-6 text-center text-foreground bg-background p-4">
+      <div className="flex flex-col-reverse justify-center items-center gap-y-6 md:flex-row md:text-start">
+        <Image
+          src="/images/illustrations/characters/character-02.svg"
+          alt=""
+          height={232}
+          width={249}
+          priority
+        />
+
+        <h1 className="inline-grid text-6xl font-black">
+          404 <span className="text-3xl font-semibold">Page Not Found</span>
+        </h1>
+      </div>
+      <p className="max-w-prose text-xl text-muted-foreground">
+        We couldn&apos;t find the page you&apos;re looking for. It might have
+        been moved or doesn&apos;t exist.
+      </p>
+      <Button size="lg" asChild>
+        <Link href="/">Home Page</Link>
+      </Button>
+    </div>
+  )
+}
@@ -0,0 +1,22 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { Cannabis } from "lucide-react"
+
+export function PortalFooter() {
+  const t = useTranslations("portal")
+
+  return (
+    <footer className="mt-auto border-t bg-muted/30">
+      <div className="mx-auto flex max-w-4xl items-center justify-between px-4 py-4">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Cannabis className="h-3 w-3" />
+          <span>{t("footerText")}</span>
+        </div>
+        <div className="text-xs text-muted-foreground">
+          &copy; {new Date().getFullYear()} CannaManage
+        </div>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,79 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useTranslations } from "next-intl"
+import { Cannabis, History, LayoutDashboard, LogOut, User } from "lucide-react"
+
+import { mockPortalUser } from "@/data/mock/portal"
+
+import { cn } from "@/lib/utils"
+
+import { ModeDropdown } from "@/components/layout/mode-dropdown"
+
+const navItems = [
+  { href: "/portal/dashboard", icon: LayoutDashboard, labelKey: "dashboard" },
+  { href: "/portal/history", icon: History, labelKey: "history" },
+  { href: "/portal/profile", icon: User, labelKey: "profile" },
+] as const
+
+export function PortalNavbar() {
+  const t = useTranslations("portal")
+  const pathname = usePathname()
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-4">
+        {/* Logo + Club Name */}
+        <Link
+          href="/portal/dashboard"
+          className="flex items-center gap-2 font-semibold"
+        >
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+            <Cannabis className="h-4 w-4 text-primary" />
+          </div>
+          <span className="hidden sm:inline-block text-sm">
+            {mockPortalUser.clubName}
+          </span>
+        </Link>
+
+        {/* Navigation Links */}
+        <nav className="flex items-center gap-1">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                <span className="hidden sm:inline-block">
+                  {t(item.labelKey)}
+                </span>
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* Right Side: Theme + Logout */}
+        <div className="flex items-center gap-1">
+          <ModeDropdown />
+          <Link
+            href="/portal-login"
+            className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            aria-label={t("logout")}
+          >
+            <LogOut className="h-4 w-4" />
+            <span className="hidden sm:inline-block">{t("logout")}</span>
+          </Link>
+        </div>
+      </div>
+    </header>
+  )
+}
@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority"
+
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export function Alert({
+  className,
+  variant,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <h5
+      data-slot="alert-title"
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("text-sm [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,155 @@
+"use client"
+
+import Link from "next/link"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cva } from "class-variance-authority"
+
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps, MouseEvent } from "react"
+
+import { cn, getInitials } from "@/lib/utils"
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export function Avatar({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex h-10 w-10 shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+export function AvatarImage({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square h-full w-full bg-muted rounded-lg object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function AvatarFallback({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex h-full w-full items-center justify-center bg-muted rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const avatarStackVariants = cva(
+  "transition duration-300 hover:scale-105 hover:z-10",
+  {
+    variants: {
+      size: {
+        default: "h-10 w-10",
+        sm: "h-9 w-9 text-sm",
+        lg: "h-11 w-11",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+interface AvatarStackProps
+  extends ComponentProps<"div">,
+    VariantProps<typeof avatarStackVariants> {
+  avatars: { src?: string; alt: string; href?: string }[]
+  limit?: number
+  onMoreButtonClick?: (event: MouseEvent<HTMLButtonElement>) => void
+}
+
+export function AvatarStack({
+  avatars,
+  limit = 4,
+  size,
+  onMoreButtonClick,
+  className,
+  ...props
+}: AvatarStackProps) {
+  const limitedAvatars = avatars.slice(0, limit)
+  const remainingCount = avatars.length - limitedAvatars.length
+
+  return (
+    <div className={cn("flex", className)} {...props}>
+      {limitedAvatars.slice(0, limit).map((avatar) => (
+        <TooltipProvider
+          key={`${avatar.alt}-${avatar.src}`}
+          delayDuration={200}
+        >
+          <Tooltip>
+            <TooltipTrigger className="-ms-1 -me-1">
+              {avatar.href ? (
+                <Link href={avatar.href}>
+                  <Avatar className={avatarStackVariants({ size })}>
+                    <AvatarImage
+                      src={avatar.src}
+                      className="border-2 border-background"
+                    />
+                    <AvatarFallback className="border-2 border-background">
+                      {getInitials(avatar.alt)}
+                    </AvatarFallback>
+                  </Avatar>
+                </Link>
+              ) : (
+                <Avatar className={avatarStackVariants({ size })}>
+                  <AvatarImage
+                    src={avatar.src}
+                    className="border-2 border-background"
+                  />
+                  <AvatarFallback className="border-2 border-background">
+                    {getInitials(avatar.alt)}
+                  </AvatarFallback>
+                </Avatar>
+              )}
+            </TooltipTrigger>
+            <TooltipContent className="capitalize -me-[1.23rem]">
+              <p>{avatar.alt}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
+
+      {/* Show "+N" button if avatars exceed the limit */}
+      {remainingCount > 0 && (
+        <button
+          type="button"
+          onClick={onMoreButtonClick}
+          className="-ms-1 -me-1"
+          aria-label="Show more"
+        >
+          <Avatar className={avatarStackVariants({ size })}>
+            <AvatarFallback className="border-2 border-background">
+              +{remainingCount}
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,47 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+type BadgeProps = ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean
+  }
+
+export function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: BadgeProps) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,107 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+import { LoaderCircle } from "lucide-react"
+
+import type { IconType } from "@/types"
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+interface ButtonProps
+  extends ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+interface ButtonLoadingProps extends ButtonProps {
+  isLoading: boolean
+  loadingIconClassName?: string
+  iconClassName?: string
+  icon?: IconType
+}
+
+export function ButtonLoading({
+  isLoading,
+  disabled,
+  children,
+  loadingIconClassName,
+  iconClassName,
+  icon: Icon,
+  ...props
+}: ButtonLoadingProps) {
+  let RenderedIcon
+  if (isLoading) {
+    RenderedIcon = (
+      <LoaderCircle
+        className={cn("me-2 size-4 animate-spin", loadingIconClassName)}
+        aria-hidden
+      />
+    )
+  } else if (Icon) {
+    RenderedIcon = (
+      <Icon className={cn("me-2 size-4", iconClassName)} aria-hidden />
+    )
+  }
+
+  return (
+    <Button
+      data-slot="button-loading"
+      type="submit"
+      disabled={isLoading || disabled}
+      aria-live="assertive"
+      aria-label={isLoading ? "Loading" : props["aria-label"]}
+      {...props}
+    >
+      {RenderedIcon}
+      {children}
+    </Button>
+  )
+}
@@ -0,0 +1,73 @@
+"use client"
+
+import { DayPicker } from "react-day-picker"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = ComponentProps<typeof DayPicker>
+
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        month: "space-y-4",
+        month_caption: "flex justify-center pt-1 items-center",
+        caption_label: "text-sm font-medium",
+        nav: "relative gap-x-1 flex items-center",
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute top-0 start-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute top-0 end-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "relative h-8 w-8 p-0 font-normal text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-e-md"
+        ),
+        day_button: "cursor-pointer h-full w-full aria-selected:opacity-100",
+        range_start: "rounded-md!",
+        range_end: "rounded-md!",
+        selected: cn(
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          props.mode === "range" && "rounded-none"
+        ),
+        today: "bg-accent text-accent-foreground",
+        outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: (props) => {
+          if (props.orientation === "left") {
+            return <ChevronLeft className="h-4 w-4" />
+          }
+          return <ChevronRight className="h-4 w-4" />
+        },
+      }}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface CardProps extends ComponentProps<"div"> {
+  asChild?: boolean
+}
+
+export function Card({ className, asChild, ...props }: CardProps) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="card"
+      className={cn(
+        "rounded-lg border bg-card text-card-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+interface CardTitleProps extends ComponentProps<"div"> {
+  asChild?: boolean
+}
+
+export function CardTitle({ className, asChild, ...props }: CardTitleProps) {
+  const Comp = asChild ? Slot : "h2"
+
+  return (
+    <Comp
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export function CardContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+export function CardFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,37 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Collapsible({
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function CollapsibleContent({
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,157 @@
+"use client"
+
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+export function Command({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type CommandDialogProps = ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}
+
+export function CommandDialog({ children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogContent
+        className="overflow-hidden p-0 rounded-md"
+        aria-describedby={undefined}
+      >
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function CommandInput({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center border-b px-3"
+    >
+      <Search className="me-2 size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function CommandList({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] overflow-y-auto overflow-x-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CommandEmpty({
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+export function CommandGroup({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+export function CommandItem({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "cursor-pointer relative flex gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CommandShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-sm tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,138 @@
+"use client"
+
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Dialog({
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export function DialogTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return (
+    <DialogPrimitive.Trigger
+      data-slot="dialog-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function DialogPortal({
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export function DialogClose({
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export function DialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] grid translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className="cursor-pointer absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+export function DialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,130 @@
+"use client"
+
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Root>) {
+  return (
+    <DrawerPrimitive.Root
+      data-slot="drawer"
+      shouldScaleBackground={shouldScaleBackground}
+      {...props}
+    />
+  )
+}
+
+export function DrawerTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return (
+    <DrawerPrimitive.Trigger
+      data-slot="drawer-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerPortal({
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+export function DrawerClose({
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+export function DrawerOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/80", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+export function DrawerHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,252 @@
+"use client"
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Dot } from "lucide-react"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function DropdownMenu({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export function DropdownMenuPortal({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+export function DropdownMenuTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+export function DropdownMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuSub({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+type DropdownMenuSubTriggerProps = ComponentProps<
+  typeof DropdownMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean
+}
+
+export function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "cursor-pointer flex items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:ps-8 focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto h-4 w-4 rtl:-scale-100" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+export function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+type DropdownMenuItemProps = ComponentProps<
+  typeof DropdownMenuPrimitive.Item
+> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}
+
+export function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Dot className="h-8 w-8 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+type DropdownMenuLabelProps = ComponentProps<
+  typeof DropdownMenuPrimitive.Label
+> & {
+  inset?: boolean
+}
+
+export function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ms-auto text-sm tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Input({ className, type, ...props }: ComponentProps<"input">) {
+  return (
+    <input
+      data-slot="input"
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Keyboard({
+  className,
+  children,
+  ...props
+}: ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="keyboard"
+      className={cn(
+        "pointer-events-none select-none h-5 inline-flex items-center gap-x-1 px-1.5 bg-muted text-sm text-muted-foreground font-mono border rounded-sm",
+        "before:content-['⌘']",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}
@@ -0,0 +1,25 @@
+"use client"
+
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+export function Label({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(labelVariants(), className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,262 @@
+"use client"
+
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Dot } from "lucide-react"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function MenubarMenu({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+export function MenubarGroup({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+export function MenubarPortal({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+export function MenubarRadioGroup({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+export function Menubar({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-9 items-center gap-x-1 rounded-md border bg-background p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenubarTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex cursor-pointer select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground cursor-pointer flex items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+export function MenubarSub({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+export function MenubarSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+type MenubarItemProps = ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}
+
+export function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenubarItemProps) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+export function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <Dot className="h-4 w-4 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+type MenubarLabelProps = ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}
+
+export function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: MenubarLabelProps) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenubarSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export function MenubarShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number
+  max?: number
+  indicatorClassName?: string
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value, max = 100, indicatorClassName, ...props }, ref) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        className={cn(
+          "bg-muted relative h-2 w-full overflow-hidden rounded-full",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "h-full rounded-full transition-all duration-300",
+            indicatorClassName
+          )}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    )
+  }
+)
+Progress.displayName = "Progress"
+
+export { Progress }
@@ -0,0 +1,61 @@
+"use client"
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+type ScrollAreaProps = ComponentProps<typeof ScrollAreaPrimitive.Root> &
+  Pick<
+    ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    "orientation"
+  >
+
+export function ScrollArea({
+  orientation,
+  className,
+  children,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="h-full w-full rounded-[inherit]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation={orientation} />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+export function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = React.forwardRef<
+  HTMLSelectElement,
+  React.SelectHTMLAttributes<HTMLSelectElement> & {
+    label?: string
+  }
+>(({ className, children, ...props }, ref) => (
+  <div className="relative">
+    <select
+      ref={ref}
+      className={cn(
+        "border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full appearance-none rounded-md border px-3 py-1 pe-8 text-sm shadow-sm transition-colors focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+    <ChevronDown className="pointer-events-none absolute end-2 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50" />
+  </div>
+))
+Select.displayName = "Select"
+
+export { Select }
@@ -0,0 +1,68 @@
+"use client"
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SeparatorWithText({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  children,
+  ...props
+}: ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <div
+      data-slot="separator-with-text"
+      className={cn(
+        "flex justify-between items-center",
+        orientation === "horizontal" ? "w-full" : "flex-col h-full",
+        className
+      )}
+    >
+      <Separator
+        decorative={decorative}
+        orientation={orientation}
+        className="shrink"
+        {...props}
+      />
+      <span
+        className={cn(
+          "shrink-0 px-2 text-sm text-muted-foreground uppercase",
+          orientation === "vertical" && "-rotate-90 rtl:rotate-90"
+        )}
+      >
+        {children}
+      </span>
+      <Separator
+        decorative={decorative}
+        orientation={orientation}
+        className="shrink"
+        {...props}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,150 @@
+"use client"
+
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Sheet({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+export function SheetTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return (
+    <SheetPrimitive.Trigger
+      data-slot="sheet-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function SheetClose({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export function SheetPortal({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+export function SheetOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-72 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-72 border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        start:
+          "inset-y-0 start-0 h-full w-72 border-e data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=closed]:rtl:slide-out-to-right data-[state=open]:rtl:slide-in-from-right sm:max-w-sm",
+        end: "inset-y-0 end-0 h-full w-72 border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:rtl:slide-out-to-left data-[state=open]:rtl:slide-in-from-left sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+type SheetContentProps = ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left" | "start" | "end"
+}
+
+export function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: SheetContentProps) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+export function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col space-y-1", className)}
+      {...props}
+    />
+  )
+}
+
+export function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SheetTitle({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,706 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import type { VariantProps } from "class-variance-authority"
+import type { CSSProperties, ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export const SIDEBAR_COOKIE_NAME = "sidebar:state"
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextType = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = createContext<SidebarContextType | null>(null)
+
+export function useSidebar() {
+  const context = useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+type SidebarProviderProps = ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: SidebarProviderProps) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = useMemo<SidebarContextType>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+type SidebarProps = ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}
+
+export function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: SidebarProps) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-slot="sidebar"
+          data-sidebar="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar text-sidebar-foreground p-0"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as CSSProperties
+          }
+          side={side}
+          aria-describedby={undefined}
+        >
+          <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="sidebar"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      className="group peer hidden md:block text-sidebar-foreground"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "duration-200 relative h-svh w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        className={cn(
+          "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-slot="sidebar-trigger"
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={className}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft className="h-4 w-4" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+export function SidebarRail({ className, ...props }: ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-slot="sidebar-rail"
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarInset({ className, ...props }: ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarGroup({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+type SidebarGroupLabelProps = ComponentProps<"div"> & { asChild?: boolean }
+
+export function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: SidebarGroupLabelProps) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-sm text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type SidebarGroupActionProps = ComponentProps<"button"> & { asChild?: boolean }
+
+export function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: SidebarGroupActionProps) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarGroupContent({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenu({ className, ...props }: ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuItem({ className, ...props }: ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+type SidebarMenuButtonProps = ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>
+
+export function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: SidebarMenuButtonProps) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+type SidebarMenuActionProps = ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}
+
+export function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: SidebarMenuActionProps) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuBadge({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-semibold tabular-nums text-sidebar-foreground select-none pointer-events-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type SidebarMenuSkeletonProps = ComponentProps<"div"> & {
+  showIcon?: boolean
+}
+
+export function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: SidebarMenuSkeletonProps) {
+  // Random width between 50 to 90%.
+  const width = useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-(--skeleton-width)"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+export function SidebarMenuSub({ className, ...props }: ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuSubItem({ ...props }: ComponentProps<"li">) {
+  return <li data-slot="sidebar-menu-sub-item" {...props} />
+}
+
+type SidebarMenuSubButtonProps = ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}
+
+export function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: SidebarMenuSubButtonProps) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,34 @@
+"use client"
+
+import { Toaster as Sonner } from "sonner"
+
+import type { ComponentProps } from "react"
+
+import { useSettings } from "@/hooks/use-settings"
+
+type ToasterProps = ComponentProps<typeof Sonner>
+
+export function Toaster({ ...props }: ToasterProps) {
+  const { settings } = useSettings()
+
+  const mode = settings.mode
+
+  return (
+    <Sonner
+      theme={mode as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
@@ -0,0 +1,128 @@
+"use client"
+
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import type { VariantProps } from "class-variance-authority"
+import type {
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  ReactElement,
+} from "react"
+
+import { cn } from "@/lib/utils"
+
+export const ToastProvider = ToastPrimitives.Provider
+
+export function ToastViewport({
+  className,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Viewport>) {
+  return (
+    <ToastPrimitives.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export function Toast({
+  className,
+  variant,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Root> &
+  VariantProps<typeof toastVariants>) {
+  return (
+    <ToastPrimitives.Root
+      data-slot="toast-root"
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export function ToastAction({
+  className,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Action>) {
+  return (
+    <ToastPrimitives.Action
+      data-slot="toast-action"
+      className={cn(
+        "cursor-pointer inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function ToastClose({
+  className,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Close>) {
+  return (
+    <ToastPrimitives.Close
+      data-slot="toast-close"
+      className={cn(
+        "cursor-pointer absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+        className
+      )}
+      toast-close=""
+      {...props}
+    >
+      <X className="h-4 w-4" />
+    </ToastPrimitives.Close>
+  )
+}
+
+export function ToastTitle({
+  className,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Title>) {
+  return (
+    <ToastPrimitives.Title
+      data-slot="toast-title"
+      className={cn("font-semibold [&+div]:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export function ToastDescription({
+  className,
+  ...props
+}: ComponentProps<typeof ToastPrimitives.Title>) {
+  return (
+    <ToastPrimitives.Description
+      data-slot="toast-description"
+      className={cn("text-sm opacity-90", className)}
+      {...props}
+    />
+  )
+}
+
+export type ToastProps = ComponentPropsWithoutRef<typeof Toast>
+
+export type ToastActionElement = ReactElement<typeof ToastAction>
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
@@ -0,0 +1,61 @@
+"use client"
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+export function Tooltip({
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+export function TooltipTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+}
+
+export function TooltipContent({
+  className,
+  sideOffset = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}