project list

app/api/chat/route.ts

@@ -2,7 +2,6 @@ import { OpenAIStream, StreamingTextResponse } from 'ai';
 import OpenAI from 'openai';
 
 import { auth } from '@/auth';
-import { nanoid } from '@/lib/utils';
 import {
 	ChatCompletionMessageParam,
 	ChatCompletionContentPart,

app/api/llens/projects/route.ts

@@ -0,0 +1 @@
+export async function GET(req: Request) {}

app/chat/page.tsx

@@ -7,7 +7,7 @@ import { useAtomValue } from 'jotai';
 import { datasetAtom } from '../../state';
 import { EmptyScreen } from '../../components/chat/EmptyScreen';
 
-export default function IndexPage() {
+export default function Page() {
 	const id = nanoid();
 	const dataset = useAtomValue(datasetAtom);
 

app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-export default function IndexPage() {
+export default function Page() {
 	return (
 		<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
 			Welcome to Insight Playground

app/project/[projectId]/page.tsx

@@ -0,0 +1,36 @@
+import MediaGrid from '@/components/project/MediaGrid';
+import { fetchProjectMedia } from '@/lib/fetch/clef';
+import { Suspense } from 'react';
+
+interface PageProps {
+	params: {
+		projectId: string;
+	};
+}
+
+export default async function Page({ params }: PageProps) {
+	const { projectId } = params;
+
+	return (
+		<div className="pb-[150px] pt-4 md:pt-10 h-full">
+			<div className="flex h-full">
+				<div className="w-1/2 relative border-r border-gray-300 overflow-auto">
+					<Suspense
+						fallback={
+							<div className="flex justify-center items-center size-full text-sm">
+								Loading media...
+							</div>
+						}
+					>
+						<MediaGrid projectId={Number(projectId)} />
+					</Suspense>
+				</div>
+				<div className="w-1/2 relative overflow-auto">
+					{/* <ChatList messages={messages} /> */}
+					{/* <ChatScrollAnchor trackVisibility={isLoading} /> */}
+					Chat
+				</div>
+			</div>
+		</div>
+	);
+}

app/{chat → project}/layout.tsx

@@ -1,11 +1,13 @@
+import ProjectListSideBar from '@/components/sidebar/ProjectListSideBar';
+
 interface ChatLayoutProps {
 	children: React.ReactNode;
 }
 
-export default async function ChatLayout({ children }: ChatLayoutProps) {
+export default async function Layout({ children }: ChatLayoutProps) {
 	return (
 		<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-			{/* <SidebarDesktop /> */}
+			<ProjectListSideBar />
 			<div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
 				{children}
 			</div>

app/project/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+	const content = '<- Select a project from sidebar';
+	return (
+		<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2 font-medium">
+			{content}
+		</div>
+	);
+}

components/header.tsx

@@ -16,7 +16,7 @@ export async function Header() {
 	return (
 		<header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
 			<Button variant="link" asChild className="mr-2">
-				<Link href="/projects">Projects</Link>
+				<Link href="/project">Projects</Link>
 			</Button>
 			<Button variant="link" asChild className="mr-2">
 				<Link href="/chat">Chat</Link>

components/project/MediaGrid.tsx

@@ -0,0 +1,16 @@
+import { fetchProjectMedia } from '@/lib/fetch/clef';
+import MediaTile from './MediaTile';
+
+export default async function MediaGrid({ projectId }: { projectId: number }) {
+	const mediaList = await fetchProjectMedia({ projectId });
+
+	return (
+		<div className="relative size-full p-6 max-w-3xl mx-auto">
+			<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+				{mediaList.map(media => (
+					<MediaTile key={media.id} media={media} />
+				))}
+			</div>
+		</div>
+	);
+}

components/project/MediaTile.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { MediaDetails } from '@/lib/fetch/clef';
+
+export interface MediaTileProps {
+	media: MediaDetails;
+}
+
+const MediaTile: React.FC<MediaTileProps> = ({ media }) => {
+	const { url: imageSrc, id, name } = media;
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<div className="relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content">
+					<Image
+						src={imageSrc}
+						draggable={false}
+						alt="dataset images"
+						width={500}
+						height={500}
+						objectFit="cover"
+						className="rounded-xl"
+					/>
+				</div>
+			</TooltipTrigger>
+			<TooltipContent>{name}</TooltipContent>
+		</Tooltip>
+	);
+};
+
+export default MediaTile;

components/sidebar/ProjectCard.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { ProjectBaseInfo } from '@/lib/fetch/clef';
+import { format } from 'date-fns';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+export interface ProjectCardProps {
+	projectInfo: ProjectBaseInfo;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
+	const {
+		id,
+		name,
+		created_at,
+		organization: { name: orgName },
+	} = projectInfo;
+
+	const { projectId: projectIdFromParam } = useParams();
+
+	const formattedDate = format(created_at, 'yyyy-MM-dd');
+	return (
+		<Link
+			className={cn(
+				'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+				Number(projectIdFromParam) === id && 'border-gray-500',
+			)}
+			href={`/project/${id}`}
+		>
+			<div>
+				<p className="text-xs text-gray-500">{orgName}</p>
+				<p className="text-sm font-medium text-black mb-1">{name}</p>
+				<p className="text-xs text-gray-500">{formattedDate}</p>
+			</div>
+		</Link>
+	);
+};
+
+export default ProjectCard;

components/sidebar/ProjectListSideBar.tsx

@@ -0,0 +1,23 @@
+import { auth } from '@/auth';
+import { fetchRecentProjectList } from '@/lib/fetch/clef';
+import { redirect } from 'next/navigation';
+import { v5 as uuidV5 } from 'uuid';
+import ProjectCard from './ProjectCard';
+
+export interface ProjectListSideBarProps {}
+
+const ProjectListSideBar: React.FC<ProjectListSideBarProps> = async () => {
+	const recentProjects = await fetchRecentProjectList();
+	return (
+		<div
+			data-state="open"
+			className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
+		>
+			{recentProjects.map(project => (
+				<ProjectCard key={project.id} projectInfo={project} />
+			))}
+		</div>
+	);
+};
+
+export default ProjectListSideBar;

lib/fetch/clef.ts

@@ -0,0 +1,95 @@
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+import { v5 as uuidV5 } from 'uuid';
+
+interface ApiResponse<T> {
+	code: number; // code from server 0
+	message: string;
+	data: T;
+}
+
+const clefApiBuilder = <Params extends object | void, Resp>(path: string) => {
+	return async (params: Params): Promise<Resp> => {
+		const session = await auth();
+		if (!session?.user?.email) {
+			redirect('/');
+		}
+
+		const adminEmail = session.user.email;
+		const sessionUser = {
+			id: uuidV5(adminEmail, uuidV5.URL),
+			orgId: '-1024',
+			email: adminEmail,
+			username: adminEmail.split('@')[0],
+			userRole: 'adminPortal',
+			bucket: 'fake_bucket',
+		};
+
+		const baseURL = `https://app.dev.landing.ai/${path}`;
+
+		// Create a URL object with query params
+		const url = new URL(baseURL);
+		Object.entries(params ?? {}).forEach(([key, value]) =>
+			url.searchParams.append(key, value),
+		);
+
+		const res = await fetch(url.toString(), {
+			headers: {
+				'Content-Type': 'application/json',
+				sessionuser: JSON.stringify(sessionUser),
+				'X-ROUTE': 'mingruizhang-landing',
+			},
+		});
+
+		if (!res.ok) {
+			console.error('ERROR: fetch data failure', res.status);
+			// This will activate the closest `error.js` Error Boundary
+			throw new Error('Failed to fetch data');
+		}
+		const { data }: ApiResponse<Resp> = await res.json();
+		return data;
+	};
+};
+
+export type ProjectBaseInfo = {
+	id: number;
+	name: string;
+	created_at: Date;
+	organization: {
+		id: number;
+		name: string;
+	};
+};
+/**
+ * Fetch recent projects from all organizations from past 30 days, excluding
+ * 1. test organization such as bdd, cypress
+ * 2. internal organization such as landing, landing-ai, orgId=1
+ * 3. projects not containing media or only contain sample media
+ * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
+ */
+export const fetchRecentProjectList = clefApiBuilder<void, ProjectBaseInfo[]>(
+	'api/admin/projects/recent',
+);
+
+export type MediaDetails = {
+	id: number;
+	name: string;
+	path: string;
+	url: string;
+	projectId: number;
+	thumbnails: [string, string, string];
+	properties: {
+		width: number;
+		height: number;
+		format: string;
+		orientation: number;
+	};
+};
+/**
+ * Randomly fetch 10 media from a given project
+ * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
+ */
+export const fetchProjectMedia = clefApiBuilder<
+	{ projectId: number },
+	MediaDetails[]
+>('api/admin/project/media');

package.json

@@ -13,8 +13,6 @@
 		"format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache"
 	},
 	"dependencies": {
-		"@radix-ui/react-alert-dialog": "^1.0.5",
-		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-select": "^2.0.0",
@@ -28,6 +26,7 @@
 		"ai": "^2.2.31",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
+		"date-fns": "^3.6.0",
 		"focus-trap-react": "^10.2.3",
 		"framer-motion": "^10.18.0",
 		"geist": "^1.2.1",
@@ -47,7 +46,8 @@
 		"react-syntax-highlighter": "^15.5.0",
 		"react-textarea-autosize": "^8.5.3",
 		"remark-gfm": "^3.0.1",
-		"remark-math": "^5.1.1"
+		"remark-math": "^5.1.1",
+		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
 		"@tailwindcss/typography": "^0.5.10",
@@ -55,6 +55,7 @@
 		"@types/react": "^18.2.48",
 		"@types/react-dom": "^18.2.18",
 		"@types/react-syntax-highlighter": "^15.5.11",
+		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/parser": "^6.19.0",
 		"autoprefixer": "^10.4.17",
 		"eslint": "^8.56.0",

pnpm-lock.yaml

@@ -4,167 +4,168 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-importers:
-
-  .:
-    dependencies:
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.0.6
-        version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-label':
-        specifier: ^2.0.2
-        version: 2.0.2(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-select':
-        specifier: ^2.0.0
-        version: 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.0.2
-        version: 1.0.2(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.0.7
-        version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@vercel/analytics':
-        specifier: ^1.1.2
-        version: 1.2.2(next@14.1.0)(react@18.2.0)
-      '@vercel/kv':
-        specifier: ^1.0.1
-        version: 1.0.1
-      '@vercel/og':
-        specifier: ^0.6.2
-        version: 0.6.2
-      ai:
-        specifier: ^2.2.31
-        version: 2.2.36(react@18.2.0)(solid-js@1.8.16)(svelte@4.2.12)(vue@3.4.21)
-      class-variance-authority:
-        specifier: ^0.7.0
-        version: 0.7.0
-      clsx:
-        specifier: ^2.1.0
-        version: 2.1.0
-      focus-trap-react:
-        specifier: ^10.2.3
-        version: 10.2.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
-      framer-motion:
-        specifier: ^10.18.0
-        version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      geist:
-        specifier: ^1.2.1
-        version: 1.2.2(next@14.1.0)
-      immer:
-        specifier: ^10.0.3
-        version: 10.0.3
-      jotai:
-        specifier: ^2.7.0
-        version: 2.7.0(@types/react@18.2.60)(react@18.2.0)
-      nanoid:
-        specifier: ^5.0.4
-        version: 5.0.6
-      next:
-        specifier: 14.1.0
-        version: 14.1.0(react-dom@18.2.0)(react@18.2.0)
-      next-auth:
-        specifier: 5.0.0-beta.16
-        version: 5.0.0-beta.16(next@14.1.0)(react@18.2.0)
-      next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.1.0)(react-dom@18.2.0)(react@18.2.0)
-      openai:
-        specifier: ^4.24.7
-        version: 4.28.0
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      react-dropzone:
-        specifier: ^14.2.3
-        version: 14.2.3(react@18.2.0)
-      react-hot-toast:
-        specifier: ^2.4.1
-        version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
-      react-intersection-observer:
-        specifier: ^9.5.3
-        version: 9.8.1(react-dom@18.2.0)(react@18.2.0)
-      react-markdown:
-        specifier: ^8.0.7
-        version: 8.0.7(@types/react@18.2.60)(react@18.2.0)
-      react-syntax-highlighter:
-        specifier: ^15.5.0
-        version: 15.5.0(react@18.2.0)
-      react-textarea-autosize:
-        specifier: ^8.5.3
-        version: 8.5.3(@types/react@18.2.60)(react@18.2.0)
-      remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1
-      remark-math:
-        specifier: ^5.1.1
-        version: 5.1.1
-    devDependencies:
-      '@tailwindcss/typography':
-        specifier: ^0.5.10
-        version: 0.5.10(tailwindcss@3.4.1)
-      '@types/node':
-        specifier: ^20.11.5
-        version: 20.11.20
-      '@types/react':
-        specifier: ^18.2.48
-        version: 18.2.60
-      '@types/react-dom':
-        specifier: ^18.2.18
-        version: 18.2.19
-      '@types/react-syntax-highlighter':
-        specifier: ^15.5.11
-        version: 15.5.11
-      '@typescript-eslint/parser':
-        specifier: ^6.19.0
-        version: 6.21.0(eslint@8.57.0)(typescript@5.3.3)
-      autoprefixer:
-        specifier: ^10.4.17
-        version: 10.4.17(postcss@8.4.35)
-      eslint:
-        specifier: ^8.56.0
-        version: 8.57.0
-      eslint-config-next:
-        specifier: 14.1.0
-        version: 14.1.0(eslint@8.57.0)(typescript@5.3.3)
-      eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@8.57.0)
-      eslint-plugin-tailwindcss:
-        specifier: ^3.14.0
-        version: 3.14.3(tailwindcss@3.4.1)
-      postcss:
-        specifier: ^8.4.33
-        version: 8.4.35
-      prettier:
-        specifier: ^3.2.4
-        version: 3.2.5
-      tailwind-merge:
-        specifier: ^2.2.0
-        version: 2.2.1
-      tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.1
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.1)
-      typescript:
-        specifier: ^5.3.3
-        version: 5.3.3
+dependencies:
+  '@radix-ui/react-dropdown-menu':
+    specifier: ^2.0.6
+    version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-label':
+    specifier: ^2.0.2
+    version: 2.0.2(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-select':
+    specifier: ^2.0.0
+    version: 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-separator':
+    specifier: ^1.0.3
+    version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-slot':
+    specifier: ^1.0.2
+    version: 1.0.2(@types/react@18.2.60)(react@18.2.0)
+  '@radix-ui/react-switch':
+    specifier: ^1.0.3
+    version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-tooltip':
+    specifier: ^1.0.7
+    version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
+  '@vercel/analytics':
+    specifier: ^1.1.2
+    version: 1.2.2(next@14.1.0)(react@18.2.0)
+  '@vercel/kv':
+    specifier: ^1.0.1
+    version: 1.0.1
+  '@vercel/og':
+    specifier: ^0.6.2
+    version: 0.6.2
+  ai:
+    specifier: ^2.2.31
+    version: 2.2.36(react@18.2.0)(solid-js@1.8.16)(svelte@4.2.12)(vue@3.4.21)
+  class-variance-authority:
+    specifier: ^0.7.0
+    version: 0.7.0
+  clsx:
+    specifier: ^2.1.0
+    version: 2.1.0
+  date-fns:
+    specifier: ^3.6.0
+    version: 3.6.0
+  focus-trap-react:
+    specifier: ^10.2.3
+    version: 10.2.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+  framer-motion:
+    specifier: ^10.18.0
+    version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+  geist:
+    specifier: ^1.2.1
+    version: 1.2.2(next@14.1.0)
+  immer:
+    specifier: ^10.0.3
+    version: 10.0.3
+  jotai:
+    specifier: ^2.7.0
+    version: 2.7.0(@types/react@18.2.60)(react@18.2.0)
+  nanoid:
+    specifier: ^5.0.4
+    version: 5.0.6
+  next:
+    specifier: 14.1.0
+    version: 14.1.0(react-dom@18.2.0)(react@18.2.0)
+  next-auth:
+    specifier: 5.0.0-beta.16
+    version: 5.0.0-beta.16(next@14.1.0)(react@18.2.0)
+  next-themes:
+    specifier: ^0.2.1
+    version: 0.2.1(next@14.1.0)(react-dom@18.2.0)(react@18.2.0)
+  openai:
+    specifier: ^4.24.7
+    version: 4.28.0
+  react:
+    specifier: ^18.2.0
+    version: 18.2.0
+  react-dom:
+    specifier: ^18.2.0
+    version: 18.2.0(react@18.2.0)
+  react-dropzone:
+    specifier: ^14.2.3
+    version: 14.2.3(react@18.2.0)
+  react-hot-toast:
+    specifier: ^2.4.1
+    version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
+  react-intersection-observer:
+    specifier: ^9.5.3
+    version: 9.8.1(react-dom@18.2.0)(react@18.2.0)
+  react-markdown:
+    specifier: ^8.0.7
+    version: 8.0.7(@types/react@18.2.60)(react@18.2.0)
+  react-syntax-highlighter:
+    specifier: ^15.5.0
+    version: 15.5.0(react@18.2.0)
+  react-textarea-autosize:
+    specifier: ^8.5.3
+    version: 8.5.3(@types/react@18.2.60)(react@18.2.0)
+  remark-gfm:
+    specifier: ^3.0.1
+    version: 3.0.1
+  remark-math:
+    specifier: ^5.1.1
+    version: 5.1.1
+  uuid:
+    specifier: ^9.0.1
+    version: 9.0.1
+
+devDependencies:
+  '@tailwindcss/typography':
+    specifier: ^0.5.10
+    version: 0.5.10(tailwindcss@3.4.1)
+  '@types/node':
+    specifier: ^20.11.5
+    version: 20.11.20
+  '@types/react':
+    specifier: ^18.2.48
+    version: 18.2.60
+  '@types/react-dom':
+    specifier: ^18.2.18
+    version: 18.2.19
+  '@types/react-syntax-highlighter':
+    specifier: ^15.5.11
+    version: 15.5.11
+  '@types/uuid':
+    specifier: ^9.0.8
+    version: 9.0.8
+  '@typescript-eslint/parser':
+    specifier: ^6.19.0
+    version: 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+  autoprefixer:
+    specifier: ^10.4.17
+    version: 10.4.17(postcss@8.4.35)
+  eslint:
+    specifier: ^8.56.0
+    version: 8.57.0
+  eslint-config-next:
+    specifier: 14.1.0
+    version: 14.1.0(eslint@8.57.0)(typescript@5.3.3)
+  eslint-config-prettier:
+    specifier: ^9.1.0
+    version: 9.1.0(eslint@8.57.0)
+  eslint-plugin-tailwindcss:
+    specifier: ^3.14.0
+    version: 3.14.3(tailwindcss@3.4.1)
+  postcss:
+    specifier: ^8.4.33
+    version: 8.4.35
+  prettier:
+    specifier: ^3.2.4
+    version: 3.2.5
+  tailwind-merge:
+    specifier: ^2.2.0
+    version: 2.2.1
+  tailwindcss:
+    specifier: ^3.4.1
+    version: 3.4.1
+  tailwindcss-animate:
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.4.1)
+  typescript:
+    specifier: ^5.3.3
+    version: 5.3.3
 
 packages:
 
@@ -393,6 +394,7 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
@@ -536,32 +538,6 @@ packages:
       '@babel/runtime': 7.23.9
     dev: false
 
-  /@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.60)(react@18.2.0)
-      '@types/react': 18.2.60
-      '@types/react-dom': 18.2.19
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -635,40 +611,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.60)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.60)(react@18.2.0)
-      '@types/react': 18.2.60
-      '@types/react-dom': 18.2.19
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.60)(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-direction@1.0.1(@types/react@18.2.60)(react@18.2.0):
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
     peerDependencies:
@@ -1354,6 +1296,10 @@ packages:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
 
+  /@types/uuid@9.0.8:
+    resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
+    dev: true
+
   /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2071,6 +2017,10 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+    dev: false
+
   /debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -5097,7 +5047,7 @@ packages:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.23
+      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.5
       acorn: 8.11.3
       aria-query: 5.3.0
@@ -5488,6 +5438,11 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+    dev: false
+
   /uvu@0.5.6:
     resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
     engines: {node: '>=8'}