From fa3dd398e0f96fa4f370d5f97eb885264e282db5 Mon Sep 17 00:00:00 2001
From: cdricms <36056008+cdricms@users.noreply.github.com>
Date: Tue, 14 Jan 2025 09:48:41 +0100
Subject: [PATCH] Added dashboard

---
 latosa-frontend/app/(auth)/dashboard/page.tsx |  57 ++
 latosa-frontend/app/(auth)/layout.tsx         |  34 +
 .../app/{ => (main)}/contact/page.tsx         |   0
 .../app/{ => (main)}/gallery/page.tsx         |   6 +-
 .../app/(main)/history/[slug]/page.tsx        |  80 ++
 .../app/{ => (main)}/history/page.tsx         |   6 +-
 latosa-frontend/app/{ => (main)}/layout.tsx   |   2 +-
 .../app/{ => (main)}/login/page.tsx           |   0
 latosa-frontend/app/{ => (main)}/page.tsx     |   0
 latosa-frontend/app/globals.css               |  18 +-
 latosa-frontend/app/history/[slug]/page.tsx   |  63 --
 latosa-frontend/components/app-sidebar.tsx    | 175 ++++
 latosa-frontend/components/nav-main.tsx       |  73 ++
 latosa-frontend/components/nav-projects.tsx   |  89 ++
 latosa-frontend/components/nav-user.tsx       | 128 +++
 latosa-frontend/components/team-switcher.tsx  |  95 +++
 latosa-frontend/components/ui/breadcrumb.tsx  | 115 +++
 latosa-frontend/components/ui/collapsible.tsx |  11 +
 .../components/ui/dropdown-menu.tsx           | 204 +++++
 latosa-frontend/components/ui/separator.tsx   |  33 +
 latosa-frontend/components/ui/sidebar.tsx     | 788 ++++++++++++++++++
 latosa-frontend/components/ui/skeleton.tsx    |  15 +
 latosa-frontend/components/ui/tooltip.tsx     |  32 +
 latosa-frontend/hooks/use-mobile.tsx          |  23 +
 latosa-frontend/package-lock.json             | 169 +++-
 latosa-frontend/package.json                  |   6 +-
 latosa-frontend/tailwind.config.ts            |  16 +-
 27 files changed, 2157 insertions(+), 81 deletions(-)
 create mode 100644 latosa-frontend/app/(auth)/dashboard/page.tsx
 create mode 100644 latosa-frontend/app/(auth)/layout.tsx
 rename latosa-frontend/app/{ => (main)}/contact/page.tsx (100%)
 rename latosa-frontend/app/{ => (main)}/gallery/page.tsx (60%)
 create mode 100644 latosa-frontend/app/(main)/history/[slug]/page.tsx
 rename latosa-frontend/app/{ => (main)}/history/page.tsx (81%)
 rename latosa-frontend/app/{ => (main)}/layout.tsx (96%)
 rename latosa-frontend/app/{ => (main)}/login/page.tsx (100%)
 rename latosa-frontend/app/{ => (main)}/page.tsx (100%)
 delete mode 100644 latosa-frontend/app/history/[slug]/page.tsx
 create mode 100644 latosa-frontend/components/app-sidebar.tsx
 create mode 100644 latosa-frontend/components/nav-main.tsx
 create mode 100644 latosa-frontend/components/nav-projects.tsx
 create mode 100644 latosa-frontend/components/nav-user.tsx
 create mode 100644 latosa-frontend/components/team-switcher.tsx
 create mode 100644 latosa-frontend/components/ui/breadcrumb.tsx
 create mode 100644 latosa-frontend/components/ui/collapsible.tsx
 create mode 100644 latosa-frontend/components/ui/dropdown-menu.tsx
 create mode 100644 latosa-frontend/components/ui/separator.tsx
 create mode 100644 latosa-frontend/components/ui/sidebar.tsx
 create mode 100644 latosa-frontend/components/ui/skeleton.tsx
 create mode 100644 latosa-frontend/components/ui/tooltip.tsx
 create mode 100644 latosa-frontend/hooks/use-mobile.tsx

diff --git a/latosa-frontend/app/(auth)/dashboard/page.tsx b/latosa-frontend/app/(auth)/dashboard/page.tsx
new file mode 100644
index 0000000..36e2957
--- /dev/null
+++ b/latosa-frontend/app/(auth)/dashboard/page.tsx
@@ -0,0 +1,57 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+	SidebarInset,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@/components/ui/sidebar";
+
+export default function Page() {
+	return (
+		<SidebarProvider>
+			<AppSidebar />
+			<SidebarInset>
+				<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+					<div className="flex items-center gap-2 px-4">
+						<SidebarTrigger className="-ml-1" />
+						<Separator
+							orientation="vertical"
+							className="mr-2 h-4"
+						/>
+						{/*<Breadcrumb>
+							<BreadcrumbList>
+								<BreadcrumbItem className="hidden md:block">
+									<BreadcrumbLink href="#">
+										Building Your Application
+									</BreadcrumbLink>
+								</BreadcrumbItem>
+								<BreadcrumbSeparator className="hidden md:block" />
+								<BreadcrumbItem>
+									<BreadcrumbPage>
+										Data Fetching
+									</BreadcrumbPage>
+								</BreadcrumbItem>
+							</BreadcrumbList>
+						</Breadcrumb>*/}
+					</div>
+				</header>
+				<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+					<div className="grid auto-rows-min gap-4 md:grid-cols-3">
+						<div className="aspect-video rounded-xl bg-muted/50" />
+						<div className="aspect-video rounded-xl bg-muted/50" />
+						<div className="aspect-video rounded-xl bg-muted/50" />
+					</div>
+					<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+				</div>
+			</SidebarInset>
+		</SidebarProvider>
+	);
+}
diff --git a/latosa-frontend/app/(auth)/layout.tsx b/latosa-frontend/app/(auth)/layout.tsx
new file mode 100644
index 0000000..87abb96
--- /dev/null
+++ b/latosa-frontend/app/(auth)/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "@/app/globals.css";
+
+const geistSans = Geist({
+	variable: "--font-geist-sans",
+	subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+	variable: "--font-geist-mono",
+	subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+	title: "Create Next App",
+	description: "Generated by create next app",
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="fr">
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+			>
+				{children}
+			</body>
+		</html>
+	);
+}
diff --git a/latosa-frontend/app/contact/page.tsx b/latosa-frontend/app/(main)/contact/page.tsx
similarity index 100%
rename from latosa-frontend/app/contact/page.tsx
rename to latosa-frontend/app/(main)/contact/page.tsx
diff --git a/latosa-frontend/app/gallery/page.tsx b/latosa-frontend/app/(main)/gallery/page.tsx
similarity index 60%
rename from latosa-frontend/app/gallery/page.tsx
rename to latosa-frontend/app/(main)/gallery/page.tsx
index 0c12a83..5a9a15b 100644
--- a/latosa-frontend/app/gallery/page.tsx
+++ b/latosa-frontend/app/(main)/gallery/page.tsx
@@ -1,7 +1,3 @@
 export default function Gallery() {
-	return (
-		<>
-
-		</>
-	)
+	return <></>;
 }
diff --git a/latosa-frontend/app/(main)/history/[slug]/page.tsx b/latosa-frontend/app/(main)/history/[slug]/page.tsx
new file mode 100644
index 0000000..bea6a2e
--- /dev/null
+++ b/latosa-frontend/app/(main)/history/[slug]/page.tsx
@@ -0,0 +1,80 @@
+"use server";
+
+export default async function HistoryDetails({
+	params,
+}: {
+	params: Promise<{ slug: string }>;
+}) {
+	const { slug } = await params;
+	const default_img: string =
+		"https://shadcnblocks.com/images/block/placeholder-dark-1.svg";
+	const default_style: string =
+		"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg";
+	const sub_header_style: string =
+		"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl";
+
+	return (
+		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
+			<section className="container self-center max-w-2xl">
+				<div className="blog-title w-full h-28 justify-center">
+					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
+						{slug}
+					</h1>
+				</div>
+				<div className="content">
+					<div>
+						<h2 className={sub_header_style}>Subtitle 1</h2>
+						<p className={default_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
+						</p>
+					</div>
+					<div>
+						<img
+							src={default_img}
+							alt={slug}
+							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
+						/>
+					</div>
+					<div>
+						<h2 className={sub_header_style}>Subtitle 2</h2>
+						<p className={default_style}>
+							Lorem ipsm dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
+						</p>
+					</div>
+					<div>
+						<img
+							src={default_img}
+							alt={slug}
+							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
+						/>
+					</div>
+					<div>
+						<h2 className={sub_header_style}>Subtitle 3</h2>
+						<p className={default_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
+						</p>
+						<p className={default_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
+						</p>
+					</div>
+				</div>
+			</section>
+		</main>
+	);
+}
diff --git a/latosa-frontend/app/history/page.tsx b/latosa-frontend/app/(main)/history/page.tsx
similarity index 81%
rename from latosa-frontend/app/history/page.tsx
rename to latosa-frontend/app/(main)/history/page.tsx
index 893b516..d27089e 100644
--- a/latosa-frontend/app/history/page.tsx
+++ b/latosa-frontend/app/(main)/history/page.tsx
@@ -1,9 +1,9 @@
 import Blog from "@/components/blog";
 
 export default function History() {
-	return(
+	return (
 		<div className="flex flex-col">
-			<Blog />			
+			<Blog />
 		</div>
-	)
+	);
 }
diff --git a/latosa-frontend/app/layout.tsx b/latosa-frontend/app/(main)/layout.tsx
similarity index 96%
rename from latosa-frontend/app/layout.tsx
rename to latosa-frontend/app/(main)/layout.tsx
index 5a322db..798ff81 100644
--- a/latosa-frontend/app/layout.tsx
+++ b/latosa-frontend/app/(main)/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "@/app/globals.css";
 import Navbar from "@/components/nav-bar";
 import Footer from "@/components/footer";
 
diff --git a/latosa-frontend/app/login/page.tsx b/latosa-frontend/app/(main)/login/page.tsx
similarity index 100%
rename from latosa-frontend/app/login/page.tsx
rename to latosa-frontend/app/(main)/login/page.tsx
diff --git a/latosa-frontend/app/page.tsx b/latosa-frontend/app/(main)/page.tsx
similarity index 100%
rename from latosa-frontend/app/page.tsx
rename to latosa-frontend/app/(main)/page.tsx
diff --git a/latosa-frontend/app/globals.css b/latosa-frontend/app/globals.css
index 11d8278..296a425 100644
--- a/latosa-frontend/app/globals.css
+++ b/latosa-frontend/app/globals.css
@@ -8,7 +8,7 @@ body {
 
 @layer base {
 	:root {
-	  /* Define your custom padding value */
+		/* Define your custom padding value */
 		--background: 0 0% 100%;
 		--foreground: 0 0% 3.9%;
 		--card: 0 0% 100%;
@@ -34,6 +34,14 @@ body {
 		--chart-4: 43 74% 66%;
 		--chart-5: 27 87% 67%;
 		--radius: 0.5rem;
+		--sidebar-background: 0 0% 98%;
+		--sidebar-foreground: 240 5.3% 26.1%;
+		--sidebar-primary: 240 5.9% 10%;
+		--sidebar-primary-foreground: 0 0% 98%;
+		--sidebar-accent: 240 4.8% 95.9%;
+		--sidebar-accent-foreground: 240 5.9% 10%;
+		--sidebar-border: 220 13% 91%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
 
 	.dark {
@@ -61,6 +69,14 @@ body {
 		--chart-3: 30 80% 55%;
 		--chart-4: 280 65% 60%;
 		--chart-5: 340 75% 55%;
+		--sidebar-background: 240 5.9% 10%;
+		--sidebar-foreground: 240 4.8% 95.9%;
+		--sidebar-primary: 224.3 76.3% 48%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 240 3.7% 15.9%;
+		--sidebar-accent-foreground: 240 4.8% 95.9%;
+		--sidebar-border: 240 3.7% 15.9%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
 }
 
diff --git a/latosa-frontend/app/history/[slug]/page.tsx b/latosa-frontend/app/history/[slug]/page.tsx
deleted file mode 100644
index d37d138..0000000
--- a/latosa-frontend/app/history/[slug]/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use server"
-
-export default async function HistoryDetails({
-	params,
-}: {
-	params: Promise<{ slug: string }>;
-}) {
-	const { slug } = await params;
-	const default_img: string = "https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
-	const default_style: string = "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg"
-	const sub_header_style: string = "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl"
-
-	return (
-		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
-			<section className="container self-center max-w-2xl">
-				<div className="blog-title w-full h-28 justify-center">
-					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
-						{slug}
-					</h1>
-				</div>
-				<div className="content">
-					<div>
-						<h2 className={sub_header_style}>Subtitle 1</h2>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={default_img}
-							alt={slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-
-					</div>
-					<div>
-						<h2 className={sub_header_style}>Subtitle 2</h2>
-						<p className={default_style}>
-							Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={default_img}
-							alt={slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-
-					</div>
-					<div>
-						<h2 className={sub_header_style}>Subtitle 3</h2>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
-						</p>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
-						</p>
-					</div>
-				</div>
-			</section>
-		</main>
-	)
-}
diff --git a/latosa-frontend/components/app-sidebar.tsx b/latosa-frontend/components/app-sidebar.tsx
new file mode 100644
index 0000000..bab033f
--- /dev/null
+++ b/latosa-frontend/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import * as React from "react";
+import {
+	AudioWaveform,
+	BookOpen,
+	Bot,
+	Command,
+	Frame,
+	GalleryVerticalEnd,
+	Map,
+	PieChart,
+	Settings2,
+	SquareTerminal,
+} from "lucide-react";
+
+import { NavMain } from "@/components/nav-main";
+import { NavProjects } from "@/components/nav-projects";
+import { NavUser } from "@/components/nav-user";
+import { TeamSwitcher } from "@/components/team-switcher";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarRail,
+} from "@/components/ui/sidebar";
+
+// This is sample data.
+const data = {
+	user: {
+		name: "shadcn",
+		email: "m@example.com",
+		avatar: "/avatars/shadcn.jpg",
+	},
+	teams: [
+		{
+			name: "Acme Inc",
+			logo: GalleryVerticalEnd,
+			plan: "Enterprise",
+		},
+		{
+			name: "Acme Corp.",
+			logo: AudioWaveform,
+			plan: "Startup",
+		},
+		{
+			name: "Evil Corp.",
+			logo: Command,
+			plan: "Free",
+		},
+	],
+	navMain: [
+		{
+			title: "Playground",
+			url: "#",
+			icon: SquareTerminal,
+			isActive: true,
+			items: [
+				{
+					title: "History",
+					url: "#",
+				},
+				{
+					title: "Starred",
+					url: "#",
+				},
+				{
+					title: "Settings",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Models",
+			url: "#",
+			icon: Bot,
+			items: [
+				{
+					title: "Genesis",
+					url: "#",
+				},
+				{
+					title: "Explorer",
+					url: "#",
+				},
+				{
+					title: "Quantum",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Documentation",
+			url: "#",
+			icon: BookOpen,
+			items: [
+				{
+					title: "Introduction",
+					url: "#",
+				},
+				{
+					title: "Get Started",
+					url: "#",
+				},
+				{
+					title: "Tutorials",
+					url: "#",
+				},
+				{
+					title: "Changelog",
+					url: "#",
+				},
+			],
+		},
+		{
+			title: "Settings",
+			url: "#",
+			icon: Settings2,
+			items: [
+				{
+					title: "General",
+					url: "#",
+				},
+				{
+					title: "Team",
+					url: "#",
+				},
+				{
+					title: "Billing",
+					url: "#",
+				},
+				{
+					title: "Limits",
+					url: "#",
+				},
+			],
+		},
+	],
+	projects: [
+		{
+			name: "Design Engineering",
+			url: "#",
+			icon: Frame,
+		},
+		{
+			name: "Sales & Marketing",
+			url: "#",
+			icon: PieChart,
+		},
+		{
+			name: "Travel",
+			url: "#",
+			icon: Map,
+		},
+	],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	return (
+		<Sidebar collapsible="icon" {...props}>
+			<SidebarHeader>
+				<TeamSwitcher teams={data.teams} />
+			</SidebarHeader>
+			<SidebarContent>
+				<NavMain items={data.navMain} />
+				<NavProjects projects={data.projects} />
+			</SidebarContent>
+			<SidebarFooter>
+				<NavUser user={data.user} />
+			</SidebarFooter>
+			<SidebarRail />
+		</Sidebar>
+	);
+}
diff --git a/latosa-frontend/components/nav-main.tsx b/latosa-frontend/components/nav-main.tsx
new file mode 100644
index 0000000..902fb43
--- /dev/null
+++ b/latosa-frontend/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { ChevronRight, type LucideIcon } from "lucide-react";
+
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+} from "@/components/ui/sidebar";
+
+export function NavMain({
+	items,
+}: {
+	items: {
+		title: string;
+		url: string;
+		icon?: LucideIcon;
+		isActive?: boolean;
+		items?: {
+			title: string;
+			url: string;
+		}[];
+	}[];
+}) {
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Platform</SidebarGroupLabel>
+			<SidebarMenu>
+				{items.map((item) => (
+					<Collapsible
+						key={item.title}
+						asChild
+						defaultOpen={item.isActive}
+						className="group/collapsible"
+					>
+						<SidebarMenuItem>
+							<CollapsibleTrigger asChild>
+								<SidebarMenuButton tooltip={item.title}>
+									{item.icon && <item.icon />}
+									<span>{item.title}</span>
+									<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+								</SidebarMenuButton>
+							</CollapsibleTrigger>
+							<CollapsibleContent>
+								<SidebarMenuSub>
+									{item.items?.map((subItem) => (
+										<SidebarMenuSubItem key={subItem.title}>
+											<SidebarMenuSubButton asChild>
+												<a href={subItem.url}>
+													<span>{subItem.title}</span>
+												</a>
+											</SidebarMenuSubButton>
+										</SidebarMenuSubItem>
+									))}
+								</SidebarMenuSub>
+							</CollapsibleContent>
+						</SidebarMenuItem>
+					</Collapsible>
+				))}
+			</SidebarMenu>
+		</SidebarGroup>
+	);
+}
diff --git a/latosa-frontend/components/nav-projects.tsx b/latosa-frontend/components/nav-projects.tsx
new file mode 100644
index 0000000..cd27490
--- /dev/null
+++ b/latosa-frontend/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import {
+	Folder,
+	Forward,
+	MoreHorizontal,
+	Trash2,
+	type LucideIcon,
+} from "lucide-react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function NavProjects({
+	projects,
+}: {
+	projects: {
+		name: string;
+		url: string;
+		icon: LucideIcon;
+	}[];
+}) {
+	const { isMobile } = useSidebar();
+
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+			<SidebarGroupLabel>Projects</SidebarGroupLabel>
+			<SidebarMenu>
+				{projects.map((item) => (
+					<SidebarMenuItem key={item.name}>
+						<SidebarMenuButton asChild>
+							<a href={item.url}>
+								<item.icon />
+								<span>{item.name}</span>
+							</a>
+						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction showOnHover>
+									<MoreHorizontal />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-48 rounded-lg"
+								side={isMobile ? "bottom" : "right"}
+								align={isMobile ? "end" : "start"}
+							>
+								<DropdownMenuItem>
+									<Folder className="text-muted-foreground" />
+									<span>View Project</span>
+								</DropdownMenuItem>
+								<DropdownMenuItem>
+									<Forward className="text-muted-foreground" />
+									<span>Share Project</span>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem>
+									<Trash2 className="text-muted-foreground" />
+									<span>Delete Project</span>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</SidebarMenuItem>
+				))}
+				<SidebarMenuItem>
+					<SidebarMenuButton className="text-sidebar-foreground/70">
+						<MoreHorizontal className="text-sidebar-foreground/70" />
+						<span>More</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			</SidebarMenu>
+		</SidebarGroup>
+	);
+}
diff --git a/latosa-frontend/components/nav-user.tsx b/latosa-frontend/components/nav-user.tsx
new file mode 100644
index 0000000..018d2dc
--- /dev/null
+++ b/latosa-frontend/components/nav-user.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import {
+	BadgeCheck,
+	Bell,
+	ChevronsUpDown,
+	CreditCard,
+	LogOut,
+	Sparkles,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function NavUser({
+	user,
+}: {
+	user: {
+		name: string;
+		email: string;
+		avatar: string;
+	};
+}) {
+	const { isMobile } = useSidebar();
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<Avatar className="h-8 w-8 rounded-lg">
+								<AvatarImage
+									src={user.avatar}
+									alt={user.name}
+								/>
+								<AvatarFallback className="rounded-lg">
+									CN
+								</AvatarFallback>
+							</Avatar>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">
+									{user.name}
+								</span>
+								<span className="truncate text-xs">
+									{user.email}
+								</span>
+							</div>
+							<ChevronsUpDown className="ml-auto size-4" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						side={isMobile ? "bottom" : "right"}
+						align="end"
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="p-0 font-normal">
+							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+								<Avatar className="h-8 w-8 rounded-lg">
+									<AvatarImage
+										src={user.avatar}
+										alt={user.name}
+									/>
+									<AvatarFallback className="rounded-lg">
+										CN
+									</AvatarFallback>
+								</Avatar>
+								<div className="grid flex-1 text-left text-sm leading-tight">
+									<span className="truncate font-semibold">
+										{user.name}
+									</span>
+									<span className="truncate text-xs">
+										{user.email}
+									</span>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem>
+								<Sparkles />
+								Upgrade to Pro
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem>
+								<BadgeCheck />
+								Account
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<CreditCard />
+								Billing
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<Bell />
+								Notifications
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem>
+							<LogOut />
+							Log out
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}
diff --git a/latosa-frontend/components/team-switcher.tsx b/latosa-frontend/components/team-switcher.tsx
new file mode 100644
index 0000000..691d254
--- /dev/null
+++ b/latosa-frontend/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function TeamSwitcher({
+	teams,
+}: {
+	teams: {
+		name: string;
+		logo: React.ElementType;
+		plan: string;
+	}[];
+}) {
+	const { isMobile } = useSidebar();
+	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+								<activeTeam.logo className="size-4" />
+							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">
+									{activeTeam.name}
+								</span>
+								<span className="truncate text-xs">
+									{activeTeam.plan}
+								</span>
+							</div>
+							<ChevronsUpDown className="ml-auto" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						align="start"
+						side={isMobile ? "bottom" : "right"}
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="text-xs text-muted-foreground">
+							Teams
+						</DropdownMenuLabel>
+						{teams.map((team, index) => (
+							<DropdownMenuItem
+								key={team.name}
+								onClick={() => setActiveTeam(team)}
+								className="gap-2 p-2"
+							>
+								<div className="flex size-6 items-center justify-center rounded-sm border">
+									<team.logo className="size-4 shrink-0" />
+								</div>
+								{team.name}
+								<DropdownMenuShortcut>
+									⌘{index + 1}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+						))}
+						<DropdownMenuSeparator />
+						<DropdownMenuItem className="gap-2 p-2">
+							<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+								<Plus className="size-4" />
+							</div>
+							<div className="font-medium text-muted-foreground">
+								Add team
+							</div>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}
diff --git a/latosa-frontend/components/ui/breadcrumb.tsx b/latosa-frontend/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..a35685a
--- /dev/null
+++ b/latosa-frontend/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
+>(({ asChild, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			className={cn("transition-colors hover:text-foreground", className)}
+			{...props}
+		/>
+	);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("font-normal text-foreground", className)}
+		{...props}
+	/>
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) => (
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+		{...props}
+	>
+		{children ?? <ChevronRight />}
+	</li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};
diff --git a/latosa-frontend/components/ui/collapsible.tsx b/latosa-frontend/components/ui/collapsible.tsx
new file mode 100644
index 0000000..cb003d1
--- /dev/null
+++ b/latosa-frontend/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/latosa-frontend/components/ui/dropdown-menu.tsx b/latosa-frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..dd1719a
--- /dev/null
+++ b/latosa-frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+	DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		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}
+	/>
+));
+DropdownMenuSubContent.displayName =
+	DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			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>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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 left-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>
+));
+DropdownMenuCheckboxItem.displayName =
+	DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest opacity-60",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};
diff --git a/latosa-frontend/components/ui/separator.tsx b/latosa-frontend/components/ui/separator.tsx
new file mode 100644
index 0000000..aa82e63
--- /dev/null
+++ b/latosa-frontend/components/ui/separator.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+	React.ComponentRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"shrink-0 bg-border",
+				orientation === "horizontal"
+					? "h-[1px] w-full"
+					: "h-full w-[1px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/latosa-frontend/components/ui/sidebar.tsx b/latosa-frontend/components/ui/sidebar.tsx
new file mode 100644
index 0000000..9bf66fb
--- /dev/null
+++ b/latosa-frontend/components/ui/sidebar.tsx
@@ -0,0 +1,788 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+const SidebarProvider = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		defaultOpen?: boolean;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+>(
+	(
+		{
+			defaultOpen = true,
+			open: openProp,
+			onOpenChange: setOpenProp,
+			className,
+			style,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const isMobile = useIsMobile();
+		const [openMobile, setOpenMobile] = React.useState(false);
+
+		// This is the internal state of the sidebar.
+		// We use openProp and setOpenProp for control from outside the component.
+		const [_open, _setOpen] = React.useState(defaultOpen);
+		const open = openProp ?? _open;
+		const setOpen = React.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 = React.useCallback(() => {
+			return isMobile
+				? setOpenMobile((open) => !open)
+				: setOpen((open) => !open);
+		}, [isMobile, setOpen, setOpenMobile]);
+
+		// Adds a keyboard shortcut to toggle the sidebar.
+		React.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 = React.useMemo<SidebarContext>(
+			() => ({
+				state,
+				open,
+				setOpen,
+				isMobile,
+				openMobile,
+				setOpenMobile,
+				toggleSidebar,
+			}),
+			[
+				state,
+				open,
+				setOpen,
+				isMobile,
+				openMobile,
+				setOpenMobile,
+				toggleSidebar,
+			],
+		);
+
+		return (
+			<SidebarContext.Provider value={contextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div
+						style={
+							{
+								"--sidebar-width": SIDEBAR_WIDTH,
+								"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+								...style,
+							} as React.CSSProperties
+						}
+						className={cn(
+							"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+							className,
+						)}
+						ref={ref}
+						{...props}
+					>
+						{children}
+					</div>
+				</TooltipProvider>
+			</SidebarContext.Provider>
+		);
+	},
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	}
+>(
+	(
+		{
+			side = "left",
+			variant = "sidebar",
+			collapsible = "offcanvas",
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+		if (collapsible === "none") {
+			return (
+				<div
+					className={cn(
+						"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+						className,
+					)}
+					ref={ref}
+					{...props}
+				>
+					{children}
+				</div>
+			);
+		}
+
+		if (isMobile) {
+			return (
+				<Sheet
+					open={openMobile}
+					onOpenChange={setOpenMobile}
+					{...props}
+				>
+					<SheetContent
+						data-sidebar="sidebar"
+						data-mobile="true"
+						className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+						style={
+							{
+								"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+							} as React.CSSProperties
+						}
+						side={side}
+					>
+						<div className="flex h-full w-full flex-col">
+							{children}
+						</div>
+					</SheetContent>
+				</Sheet>
+			);
+		}
+
+		return (
+			<div
+				ref={ref}
+				className="group peer hidden md:block text-sidebar-foreground"
+				data-state={state}
+				data-collapsible={state === "collapsed" ? collapsible : ""}
+				data-variant={variant}
+				data-side={side}
+			>
+				{/* 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)_+_theme(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)_+_theme(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"
+					>
+						{children}
+					</div>
+				</div>
+			</div>
+		);
+	},
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+	React.ComponentRef<typeof Button>,
+	React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			ref={ref}
+			data-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeft />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			ref={ref}
+			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",
+				"[[data-side=left]_&]:cursor-w-resize [[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 group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+	return (
+		<main
+			ref={ref}
+			className={cn(
+				"relative flex min-h-svh flex-1 flex-col bg-background",
+				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+	React.ComponentRef<typeof Input>,
+	React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+	return (
+		<Input
+			ref={ref}
+			data-sidebar="input"
+			className={cn(
+				"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+	React.ComponentRef<typeof Separator>,
+	React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+	return (
+		<Separator
+			ref={ref}
+			data-sidebar="separator"
+			className={cn("mx-2 w-auto bg-sidebar-border", className)}
+			{...props}
+		/>
+	);
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			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}
+		/>
+	);
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="group"
+			className={cn(
+				"relative flex w-full min-w-0 flex-col p-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="group-label"
+			className={cn(
+				"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none 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}
+		/>
+	);
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			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-none 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 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		data-sidebar="group-content"
+		className={cn("w-full text-sm", className)}
+		{...props}
+	/>
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		data-sidebar="menu"
+		className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+		{...props}
+	/>
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		data-sidebar="menu-item"
+		className={cn("group/menu-item relative", className)}
+		{...props}
+	/>
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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",
+		},
+	},
+);
+
+const SidebarMenuButton = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+	} & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+	(
+		{
+			asChild = false,
+			isActive = false,
+			variant = "default",
+			size = "default",
+			tooltip,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const Comp = asChild ? Slot : "button";
+		const { isMobile, state } = useSidebar();
+
+		const button = (
+			<Comp
+				ref={ref}
+				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>
+		);
+	},
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		showOnHover?: boolean;
+	}
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			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-none 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 after:md: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}
+		/>
+	);
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		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-medium 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}
+	/>
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		showIcon?: boolean;
+	}
+>(({ className, showIcon = false, ...props }, ref) => {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			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 React.CSSProperties
+				}
+			/>
+		</div>
+	);
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		data-sidebar="menu-sub"
+		className={cn(
+			"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+			"group-data-[collapsible=icon]:hidden",
+			className,
+		)}
+		{...props}
+	/>
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentProps<"a"> & {
+		asChild?: boolean;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			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-none 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}
+		/>
+	);
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
diff --git a/latosa-frontend/components/ui/skeleton.tsx b/latosa-frontend/components/ui/skeleton.tsx
new file mode 100644
index 0000000..bbfd2a2
--- /dev/null
+++ b/latosa-frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("animate-pulse rounded-md bg-primary/10", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };
diff --git a/latosa-frontend/components/ui/tooltip.tsx b/latosa-frontend/components/ui/tooltip.tsx
new file mode 100644
index 0000000..906f2d2
--- /dev/null
+++ b/latosa-frontend/components/ui/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ComponentRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs 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}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/latosa-frontend/hooks/use-mobile.tsx b/latosa-frontend/hooks/use-mobile.tsx
new file mode 100644
index 0000000..530a3d9
--- /dev/null
+++ b/latosa-frontend/hooks/use-mobile.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(
+			`(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
+		);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}
diff --git a/latosa-frontend/package-lock.json b/latosa-frontend/package-lock.json
index 1fab4b6..acaae52 100644
--- a/latosa-frontend/package-lock.json
+++ b/latosa-frontend/package-lock.json
@@ -10,15 +10,19 @@
 			"dependencies": {
 				"@radix-ui/react-accordion": "^1.2.2",
 				"@radix-ui/react-avatar": "^1.1.2",
+				"@radix-ui/react-collapsible": "^1.1.2",
 				"@radix-ui/react-dialog": "^1.1.4",
+				"@radix-ui/react-dropdown-menu": "^2.1.4",
 				"@radix-ui/react-label": "^2.1.1",
 				"@radix-ui/react-navigation-menu": "^1.2.3",
 				"@radix-ui/react-select": "^2.1.4",
+				"@radix-ui/react-separator": "^1.1.1",
 				"@radix-ui/react-slot": "^1.1.1",
+				"@radix-ui/react-tooltip": "^1.1.6",
 				"class-variance-authority": "^0.7.1",
 				"clsx": "^2.1.1",
 				"embla-carousel-react": "^8.5.2",
-				"lucide-react": "^0.471.0",
+				"lucide-react": "^0.471.1",
 				"next": "15.1.4",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
@@ -1173,6 +1177,35 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-dropdown-menu": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz",
+			"integrity": "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-menu": "2.1.4",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-focus-guards": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -1254,6 +1287,46 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-menu": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz",
+			"integrity": "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-collection": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-dismissable-layer": "1.1.3",
+				"@radix-ui/react-focus-guards": "1.1.1",
+				"@radix-ui/react-focus-scope": "1.1.1",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-popper": "1.2.1",
+				"@radix-ui/react-portal": "1.1.3",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-roving-focus": "1.1.1",
+				"@radix-ui/react-slot": "1.1.1",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "^2.6.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-navigation-menu": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.3.tgz",
@@ -1393,6 +1466,37 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-roving-focus": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
+			"integrity": "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-collection": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-select": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.4.tgz",
@@ -1436,6 +1540,29 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-separator": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.1.tgz",
+			"integrity": "sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-slot": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
@@ -1454,6 +1581,40 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tooltip": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.6.tgz",
+			"integrity": "sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.3",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-popper": "1.2.1",
+				"@radix-ui/react-portal": "1.1.3",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-slot": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0",
+				"@radix-ui/react-visually-hidden": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -4603,9 +4764,9 @@
 			"license": "ISC"
 		},
 		"node_modules/lucide-react": {
-			"version": "0.471.0",
-			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.471.0.tgz",
-			"integrity": "sha512-3L0OOJClsKDETJGK7nABqW8ftaVmUjWzluzPpw/6dGdI1bOmzsLsCjZpAEpg24Xs/U7xdYveQU+CBkHxWy7MrA==",
+			"version": "0.471.1",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.471.1.tgz",
+			"integrity": "sha512-syOxwPhf62gg2YOsz72HRn+CIpeudFy67AeKnSR8Hn/fIIF4ubhNbRF+pQ2CaJrl+X9Os4PL87z2DXQi3DVeDA==",
 			"license": "ISC",
 			"peerDependencies": {
 				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/latosa-frontend/package.json b/latosa-frontend/package.json
index 00df92d..d0dcc32 100644
--- a/latosa-frontend/package.json
+++ b/latosa-frontend/package.json
@@ -11,15 +11,19 @@
 	"dependencies": {
 		"@radix-ui/react-accordion": "^1.2.2",
 		"@radix-ui/react-avatar": "^1.1.2",
+		"@radix-ui/react-collapsible": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.4",
+		"@radix-ui/react-dropdown-menu": "^2.1.4",
 		"@radix-ui/react-label": "^2.1.1",
 		"@radix-ui/react-navigation-menu": "^1.2.3",
 		"@radix-ui/react-select": "^2.1.4",
+		"@radix-ui/react-separator": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-tooltip": "^1.1.6",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"embla-carousel-react": "^8.5.2",
-		"lucide-react": "^0.471.0",
+		"lucide-react": "^0.471.1",
 		"next": "15.1.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
diff --git a/latosa-frontend/tailwind.config.ts b/latosa-frontend/tailwind.config.ts
index 07347e8..f256b7d 100644
--- a/latosa-frontend/tailwind.config.ts
+++ b/latosa-frontend/tailwind.config.ts
@@ -50,6 +50,18 @@ export default {
 					"4": "hsl(var(--chart-4))",
 					"5": "hsl(var(--chart-5))",
 				},
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground":
+						"hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground":
+						"hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+				},
 			},
 			borderRadius: {
 				lg: "var(--radius)",
@@ -80,7 +92,5 @@ export default {
 			},
 		},
 	},
-	plugins: [
-		require("tailwindcss-animate")
-	],
+	plugins: [require("tailwindcss-animate")],
 } satisfies Config;