refactor: Update account-related components and services

Enhanced account-related components and services to include wallet and asset information. Introduced `refreshUserData` function in account handler service to fetch and update user assets. Revised local storage service to include encoding and decoding functionality for secure storage. On the components side, `account-info` and `account-dialog` components have been updated to reflect the new functionalities and data fields. User interface for account information has been improved including details for cryptos and identity information.
feat(component): Add loading and context handling
2024-06-14 10:06:57 +02:00 · 2024-06-12 16:54:18 +02:00 · 2024-06-12 15:13:23 +02:00 · 2024-06-12 15:00:33 +02:00 · 2024-06-12 15:00:05 +02:00 · 2024-06-12 14:59:35 +02:00
95 changed files with 7311 additions and 3661 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,3 @@ next-env.d.ts
 .env.production
 .env.development
 .env*.local
 pnpm*.yaml
--- a/biome.json
+++ b/biome.json
@@ -0,0 +1,37 @@
 {
  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "files": {
    "include": [
      "./src/**/*.ts",
      "./src/**/*.tsx"
    ]
  },
  "vcs": {
    "enabled": true,
    "clientKind": "git"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "performance": {
        "recommended": true,
        "noDelete": "off"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "complexity": {
        "useLiteralKeys": "off"
      }
    }
  },
  "formatter": {
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 90
  }
 }
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
    "check": "biome check --skip-errors --apply src"
  },
  "dependencies": {
    "@fontsource-variable/kode-mono": "^5.0.3",
@@ -23,6 +24,7 @@
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
@@ -45,6 +47,7 @@
    "embla-carousel-react": "^8.1.3",
    "framer-motion": "^11.2.10",
    "input-otp": "^1.2.4",
    "lightweight-charts": "^4.1.4",
    "lucide-react": "^0.387.0",
    "next": "14.2.3",
    "next-themes": "^0.3.0",
@@ -60,9 +63,12 @@
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@biomejs/biome": "1.8.1",
    "@types/jest": "^29.5.12",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "jest": "^29.7.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,37 +1,38 @@
 import type { Metadata } from "next";
-import '@fontsource-variable/kode-mono';
+import "@fontsource-variable/kode-mono";
 import "./globals.css";
-import {ThemeProvider} from "@/components/providers/theme-provider";
+import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { PrimaryNavigationMenu } from "@/components/primary-nav";
 import { Providers } from "@/components/providers/providers";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import type React from "react";
 import {Footer} from "@/components/footer";
 import {Header} from "@/components/header";
 export const metadata: Metadata = {
-  title: "YeloBit",
+	title: "YeloBit",
-  description: "Generated by create next app",
+	description: "Generated by create next app",
-  icons: "yellow-bit.svg"};
+	icons: "yellow-bit.svg",
 };
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  return (
+	return (
-    <html lang="en">
+		<html lang="en">
-    <head>
+			<head>
-      <link rel="icon" href="/public/favicon.ico" sizes="any"/>
+				<link rel="icon" href="/public/favicon.ico" sizes="any" />
-    </head>
+			</head>
-    <body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
+			<body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
-    <ThemeProvider
+				<Providers>
-        attribute="class"
+					<Header>
-        defaultTheme="system"
+						<PrimaryNavigationMenu />
-        enableSystem
+					</Header>
-      >
+					{children}
-        <Header></Header>
+					<Footer />
-        {children}
+				</Providers>
-        <Footer/>
+			</body>
-      </ThemeProvider>
+		</html>
-      </body>
+	);
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
 import Image from "next/image";
 export default function Home() {
-  return (
+	return (
-    <main className="flex flex-col items-center justify-between p-24">
+		<main className="flex flex-col items-center justify-end h-full w-2/4">
-      <h1>Hello world !</h1>
+			<h1>Hello world !</h1>
-    </main>
+		</main>
-  );
+	);
 }
--- a/src/components/account-dialog.tsx
+++ b/src/components/account-dialog.tsx
@@ -0,0 +1,82 @@
 "use client";
 import { AccountInfo } from "@/components/account-info";
 import { UserDataContext } from "@/components/providers/userdata-provider";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { IUserData } from "@/interfaces/userdata.interface";
 import {
 	type Dispatch,
 	type SetStateAction,
 	useContext,
 	useEffect,
 	useState,
 } from "react";
 export function AccountDialog() {
 	const userContext = useContext(UserDataContext);
 	const [isLoaded, setIsLoaded] = useState<boolean>(false);
 	if (!userContext?.userData) {
 		userContext?.setUserData({
 			firstName: "Mathis",
 			lastName: "Herriot",
 			age: 23,
 			city: "Chambéry",
 			created_at: "jaj",
 			dollarAvailables: 34,
 			email: "mherriot@tutanota.com",
 			id: "098807e1-6681-407a-a2b4-e6b7e5ec1919",
 			isActive: true,
 			pseudo: "Avnyr",
 			roleId: "092fb1eb-4ce4-4e3e-9df1-d00d467c6a43",
 			updated_at: "",
 			wallet: {
 				uat: Date.now(),
 				update_interval: 30_000,
 				owned_cryptos: [
 					{
 						id: "1c237bcc-d2fa-4c4b-9a3a-f0efb4569e1e",
 						name: "Spectral",
 						value: 1.61051,
 						image:
 							"https://images.unsplash.com/photo-1640833906651-6bd1af7aeea3?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGNyeXB0b3xlbnwwfHwwfHx8MA%3D%3D",
 						quantity: 999,
 						created_at: "2024-06-08T22:42:14.113Z",
 						updated_at: "2024-06-11T12:48:07.001Z",
 					},
 					{
 						id: "6c0edc95-a968-4c2f-9169-33acfdc73575",
 						name: "SOL",
 						value: 30.91268053287073,
 						image:
 							"https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y3J5cHRvfGVufDB8fDB8fHww",
 						quantity: 998,
 						created_at: "2024-06-07T09:30:31.282Z",
 						updated_at: "2024-06-08T23:44:54.242Z",
 					},
 				],
 			},
 		});
 	}
 	useEffect(() => {
 		if (userContext?.userData) {
 			setIsLoaded(true);
 		}
 	}, [userContext?.userData]);
 	if (!isLoaded) {
 		return <Skeleton className="w-14 h-10 rounded" />;
 	}
 	return (
 		<div>
 			<AccountInfo
 				userData={userContext?.userData as IUserData}
 				setUserData={
 					userContext?.setUserData as Dispatch<SetStateAction<IUserData | undefined>>
 				}
 			/>
 		</div>
 	);
 }
--- a/src/components/account-info.tsx
+++ b/src/components/account-info.tsx
@@ -0,0 +1,112 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { IUserData } from "@/interfaces/userdata.interface";
 import { CopyButton } from "@/components/ui/copy-button";
 import {Bitcoin, Fingerprint, Landmark, RefreshCw, Unplug, User, Wallet} from "lucide-react";
 import type React from "react";
 import {useState} from "react";
 import {refreshUserData} from "@/services/account.handler";
 export function AccountInfo({
 	userData,
 	setUserData,
 }: {
 	userData: IUserData;
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
 }) {
 	const [refreshOngoing, setRefreshOngoing] = useState<boolean>(false)
 	function doingRefresh() {
 		setRefreshOngoing(true);
 		refreshUserData().then(()=>setRefreshOngoing(false))
 	}
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
 				<Button variant="outline" className={"gap-2 px-2"}>
 					<p>{userData.firstName}</p>
 					<User />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>{`${userData.firstName} ${userData.lastName}`}</DialogTitle>
 					<DialogDescription>Your personal account data.</DialogDescription>
 				</DialogHeader>
 				<div className={"flex flex-col items-center justify-center w-full"}>
 					<div className={"flex flex-col justify-evenly items-center gap-2"}>
 						<div
 							className={
 								"flex flex-col md:flex-row gap-2 justify-center md:justify-evenly items-start md:items-center w-full"
 							}
 						>
 							<div
 								className={
 									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
 								}
 							>
 								<Landmark />
 								<p className={"rounded bg-accent text-accent-foreground p-1"}>
 									{userData.dollarAvailables} $
 								</p>
 							</div>
 							<div
 								className={
 									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
 								}
 							>
 								<Bitcoin />
 								<p className={"rounded bg-accent text-accent-foreground p-1"}>
 									You dont have cryptos.
 								</p>
 							</div>
 						</div>
 						<div
 							className={"flex flex-col gap-3 justify-center items-start mx-auto mt-4"}
 						>
 							<div className={"flex flex-row text-nowrap flex-nowrap gap-1 text-primary"}>
 								<Fingerprint />
 								<h2>Your identity</h2>
 							</div>
 							<div
 								className={
 									"font-light text-xs md:text-sm flex flex-row items-center justify-start gap-1 bg-accent p-2 rounded"
 								}
 							>
 								<p>{userData.id}</p>
 								<CopyButton value={userData.id} />
 							</div>
 						</div>
 					</div>
 				</div>
 				<DialogFooter className={"flex justify-evenly items-center w-full gap-2"}>
 					{!refreshOngoing && <Button variant={"outline"} className={"gap-2 px-2"} onClick={()=>doingRefresh()}>
            <RefreshCw />
          </Button>}
 					<Button variant={"secondary"} className={"gap-2 px-2"}>
 						<Wallet />
 						<p>My wallet</p>
 					</Button>
 					<Button variant={"destructive"} className={"gap-2 px-2"}>
 						<Unplug />
 						<p>Disconnect</p>
 					</Button>
 				</DialogFooter>
 			</DialogContent>
 		</Dialog>
 	);
 }
--- a/src/components/auto-form/common/label.tsx
+++ b/src/components/auto-form/common/label.tsx
@@ -0,0 +1,23 @@
 import { FormLabel } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
 function AutoFormLabel({
 	label,
 	isRequired,
 	className,
 }: {
 	label: string;
 	isRequired: boolean;
 	className?: string;
 }) {
 	return (
 		<>
 			<FormLabel className={cn(className)}>
 				{label}
 				{isRequired && <span className="text-destructive"> *</span>}
 			</FormLabel>
 		</>
 	);
 }
 export default AutoFormLabel;
--- a/src/components/auto-form/common/tooltip.tsx
+++ b/src/components/auto-form/common/tooltip.tsx
@@ -0,0 +1,13 @@
 function AutoFormTooltip({ fieldConfigItem }: { fieldConfigItem: any }) {
 	return (
 		<>
 			{fieldConfigItem?.description && (
 				<p className="text-sm text-gray-500 dark:text-white">
 					{fieldConfigItem.description}
 				</p>
 			)}
 		</>
 	);
 }
 export default AutoFormTooltip;
--- a/src/components/auto-form/config.ts
+++ b/src/components/auto-form/config.ts
@@ -0,0 +1,35 @@
 import AutoFormCheckbox from "./fields/checkbox";
 import AutoFormDate from "./fields/date";
 import AutoFormEnum from "./fields/enum";
 import AutoFormFile from "./fields/file";
 import AutoFormInput from "./fields/input";
 import AutoFormNumber from "./fields/number";
 import AutoFormRadioGroup from "./fields/radio-group";
 import AutoFormSwitch from "./fields/switch";
 import AutoFormTextarea from "./fields/textarea";
 export const INPUT_COMPONENTS = {
 	checkbox: AutoFormCheckbox,
 	date: AutoFormDate,
 	select: AutoFormEnum,
 	radio: AutoFormRadioGroup,
 	switch: AutoFormSwitch,
 	textarea: AutoFormTextarea,
 	number: AutoFormNumber,
 	file: AutoFormFile,
 	fallback: AutoFormInput,
 };
 /**
 * Define handlers for specific Zod types.
 * You can expand this object to support more types.
 */
 export const DEFAULT_ZOD_HANDLERS: {
 	[key: string]: keyof typeof INPUT_COMPONENTS;
 } = {
 	ZodBoolean: "checkbox",
 	ZodDate: "date",
 	ZodEnum: "select",
 	ZodNativeEnum: "select",
 	ZodNumber: "number",
 };
--- a/src/components/auto-form/dependencies.ts
+++ b/src/components/auto-form/dependencies.ts
@@ -0,0 +1,57 @@
 import type { FieldValues, UseFormWatch } from "react-hook-form";
 import type * as z from "zod";
 import { type Dependency, DependencyType, type EnumValues } from "./types";
 export default function resolveDependencies<
 	SchemaType extends z.infer<z.ZodObject<any, any>>,
 >(
 	dependencies: Dependency<SchemaType>[],
 	currentFieldName: keyof SchemaType,
 	watch: UseFormWatch<FieldValues>,
 ) {
 	let isDisabled = false;
 	let isHidden = false;
 	let isRequired = false;
 	let overrideOptions: EnumValues | undefined;
 	const currentFieldValue = watch(currentFieldName as string);
 	const currentFieldDependencies = dependencies.filter(
 		(dependency) => dependency.targetField === currentFieldName,
 	);
 	for (const dependency of currentFieldDependencies) {
 		const watchedValue = watch(dependency.sourceField as string);
 		const conditionMet = dependency.when(watchedValue, currentFieldValue);
 		switch (dependency.type) {
 			case DependencyType.DISABLES:
 				if (conditionMet) {
 					isDisabled = true;
 				}
 				break;
 			case DependencyType.REQUIRES:
 				if (conditionMet) {
 					isRequired = true;
 				}
 				break;
 			case DependencyType.HIDES:
 				if (conditionMet) {
 					isHidden = true;
 				}
 				break;
 			case DependencyType.SETS_OPTIONS:
 				if (conditionMet) {
 					overrideOptions = dependency.options;
 				}
 				break;
 		}
 	}
 	return {
 		isDisabled,
 		isHidden,
 		isRequired,
 		overrideOptions,
 	};
 }
--- a/src/components/auto-form/fields/array.tsx
+++ b/src/components/auto-form/fields/array.tsx
@@ -0,0 +1,91 @@
 import {
 	AccordionContent,
 	AccordionItem,
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Plus, Trash } from "lucide-react";
 import { useFieldArray, type useForm } from "react-hook-form";
 import * as z from "zod";
 import { beautifyObjectName } from "../utils";
 import AutoFormObject from "./object";
 function isZodArray(item: z.ZodArray<any> | z.ZodDefault<any>): item is z.ZodArray<any> {
 	return item instanceof z.ZodArray;
 }
 function isZodDefault(
 	item: z.ZodArray<any> | z.ZodDefault<any>,
 ): item is z.ZodDefault<any> {
 	return item instanceof z.ZodDefault;
 }
 export default function AutoFormArray({
 	name,
 	item,
 	form,
 	path = [],
 	fieldConfig,
 }: {
 	name: string;
 	item: z.ZodArray<any> | z.ZodDefault<any>;
 	form: ReturnType<typeof useForm>;
 	path?: string[];
 	fieldConfig?: any;
 }) {
 	const { fields, append, remove } = useFieldArray({
 		control: form.control,
 		name,
 	});
 	const title = item._def.description ?? beautifyObjectName(name);
 	const itemDefType = isZodArray(item)
 		? item._def.type
 		: isZodDefault(item)
 			? item._def.innerType._def.type
 			: null;
 	return (
 		<AccordionItem value={name} className="border-none">
 			<AccordionTrigger>{title}</AccordionTrigger>
 			<AccordionContent>
 				{fields.map((_field, index) => {
 					const key = _field.id;
 					return (
 						<div className="mt-4 flex flex-col" key={`${key}`}>
 							<AutoFormObject
 								schema={itemDefType as z.ZodObject<any, any>}
 								form={form}
 								fieldConfig={fieldConfig}
 								path={[...path, index.toString()]}
 							/>
 							<div className="my-4 flex justify-end">
 								<Button
 									variant="secondary"
 									size="icon"
 									type="button"
 									className="hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0"
 									onClick={() => remove(index)}
 								>
 									<Trash className="size-4 " />
 								</Button>
 							</div>
 							<Separator />
 						</div>
 					);
 				})}
 				<Button
 					type="button"
 					variant="secondary"
 					onClick={() => append({})}
 					className="mt-4 flex items-center"
 				>
 					<Plus className="mr-2" size={16} />
 					Add
 				</Button>
 			</AccordionContent>
 		</AccordionItem>
 	);
 }
--- a/src/components/auto-form/fields/checkbox.tsx
+++ b/src/components/auto-form/fields/checkbox.tsx
@@ -0,0 +1,34 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { FormControl, FormItem } from "@/components/ui/form";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormCheckbox({
 	label,
 	isRequired,
 	field,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	return (
 		<div>
 			<FormItem>
 				<div className="mb-3 flex items-center gap-3">
 					<FormControl>
 						<Checkbox
 							checked={field.value}
 							onCheckedChange={field.onChange}
 							{...fieldProps}
 						/>
 					</FormControl>
 					<AutoFormLabel
 						label={fieldConfigItem?.label || label}
 						isRequired={isRequired}
 					/>
 				</div>
 			</FormItem>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 		</div>
 	);
 }
--- a/src/components/auto-form/fields/date.tsx
+++ b/src/components/auto-form/fields/date.tsx
@@ -0,0 +1,25 @@
 import { DatePicker } from "@/components/ui/date-picker";
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormDate({
 	label,
 	isRequired,
 	field,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	return (
 		<FormItem>
 			<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 			<FormControl>
 				<DatePicker date={field.value} setDate={field.onChange} {...fieldProps} />
 			</FormControl>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 			<FormMessage />
 		</FormItem>
 	);
 }
--- a/src/components/auto-form/fields/enum.tsx
+++ b/src/components/auto-form/fields/enum.tsx
@@ -0,0 +1,59 @@
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
 import type * as z from "zod";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 import { getBaseSchema } from "../utils";
 export default function AutoFormEnum({
 	label,
 	isRequired,
 	field,
 	fieldConfigItem,
 	zodItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def.values;
 	let values: [string, string][] = [];
 	if (!Array.isArray(baseValues)) {
 		values = Object.entries(baseValues);
 	} else {
 		values = baseValues.map((value) => [value, value]);
 	}
 	function findItem(value: any) {
 		return values.find((item) => item[0] === value);
 	}
 	return (
 		<FormItem>
 			<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 			<FormControl>
 				<Select onValueChange={field.onChange} defaultValue={field.value} {...fieldProps}>
 					<SelectTrigger className={fieldProps.className}>
 						<SelectValue placeholder={fieldConfigItem.inputProps?.placeholder}>
 							{field.value ? findItem(field.value)?.[1] : "Select an option"}
 						</SelectValue>
 					</SelectTrigger>
 					<SelectContent>
 						{values.map(([value, label]) => (
 							<SelectItem value={label} key={value}>
 								{label}
 							</SelectItem>
 						))}
 					</SelectContent>
 				</Select>
 			</FormControl>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 			<FormMessage />
 		</FormItem>
 	);
 }
--- a/src/components/auto-form/fields/file.tsx
+++ b/src/components/auto-form/fields/file.tsx
@@ -0,0 +1,64 @@
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Trash2 } from "lucide-react";
 import { type ChangeEvent, useState } from "react";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormFile({
 	label,
 	isRequired,
 	fieldConfigItem,
 	fieldProps,
 	field,
 }: AutoFormInputComponentProps) {
 	const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
 	const showLabel = _showLabel === undefined ? true : _showLabel;
 	const [file, setFile] = useState<string | null>(null);
 	const [fileName, setFileName] = useState<string | null>(null);
 	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
 		const file = e.target.files?.[0];
 		if (file) {
 			const reader = new FileReader();
 			reader.onloadend = () => {
 				setFile(reader.result as string);
 				setFileName(file.name);
 				field.onChange(reader.result as string);
 			};
 			reader.readAsDataURL(file);
 		}
 	};
 	const handleRemoveClick = () => {
 		setFile(null);
 	};
 	return (
 		<FormItem>
 			{showLabel && (
 				<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 			)}
 			{!file && (
 				<FormControl>
 					<Input
 						type="file"
 						{...fieldPropsWithoutShowLabel}
 						onChange={handleFileChange}
 						value={""}
 					/>
 				</FormControl>
 			)}
 			{file && (
 				<div className="flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0">
 					<p>{fileName}</p>
 					<button onClick={handleRemoveClick} aria-label="Remove image">
 						<Trash2 size={16} />
 					</button>
 				</div>
 			)}
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 			<FormMessage />
 		</FormItem>
 	);
 }
--- a/src/components/auto-form/fields/input.tsx
+++ b/src/components/auto-form/fields/input.tsx
@@ -0,0 +1,34 @@
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormInput({
 	label,
 	isRequired,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
 	const showLabel = _showLabel === undefined ? true : _showLabel;
 	const type = fieldProps.type || "text";
 	return (
 		<div className="flex flex-row  items-center space-x-2">
 			<FormItem className="flex w-full flex-col justify-start">
 				{showLabel && (
 					<AutoFormLabel
 						label={fieldConfigItem?.label || label}
 						isRequired={isRequired}
 					/>
 				)}
 				<FormControl>
 					<Input type={type} {...fieldPropsWithoutShowLabel} />
 				</FormControl>
 				<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 				<FormMessage />
 			</FormItem>
 		</div>
 	);
 }
--- a/src/components/auto-form/fields/number.tsx
+++ b/src/components/auto-form/fields/number.tsx
@@ -0,0 +1,28 @@
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormNumber({
 	label,
 	isRequired,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
 	const showLabel = _showLabel === undefined ? true : _showLabel;
 	return (
 		<FormItem>
 			{showLabel && (
 				<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 			)}
 			<FormControl>
 				<Input type="number" {...fieldPropsWithoutShowLabel} />
 			</FormControl>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 			<FormMessage />
 		</FormItem>
 	);
 }
--- a/src/components/auto-form/fields/object.tsx
+++ b/src/components/auto-form/fields/object.tsx
@@ -0,0 +1,175 @@
 import {
 	Accordion,
 	AccordionContent,
 	AccordionItem,
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { FormField } from "@/components/ui/form";
 import { type useForm, useFormContext } from "react-hook-form";
 import * as z from "zod";
 import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from "../config";
 import resolveDependencies from "../dependencies";
 import type { Dependency, FieldConfig, FieldConfigItem } from "../types";
 import {
 	beautifyObjectName,
 	getBaseSchema,
 	getBaseType,
 	zodToHtmlInputProps,
 } from "../utils";
 import AutoFormArray from "./array";
 function DefaultParent({ children }: { children: React.ReactNode }) {
 	return <>{children}</>;
 }
 export default function AutoFormObject<SchemaType extends z.ZodObject<any, any>>({
 	schema,
 	form,
 	fieldConfig,
 	path = [],
 	dependencies = [],
 }: {
 	schema: SchemaType | z.ZodEffects<SchemaType>;
 	form: ReturnType<typeof useForm>;
 	fieldConfig?: FieldConfig<z.infer<SchemaType>>;
 	path?: string[];
 	dependencies?: Dependency<z.infer<SchemaType>>[];
 }) {
 	const { watch } = useFormContext(); // Use useFormContext to access the watch function
 	if (!schema) {
 		return null;
 	}
 	const { shape } = getBaseSchema<SchemaType>(schema) || {};
 	if (!shape) {
 		return null;
 	}
 	const handleIfZodNumber = (item: z.ZodAny) => {
 		const isZodNumber = (item as any)._def.typeName === "ZodNumber";
 		const isInnerZodNumber = (item._def as any).innerType?._def?.typeName === "ZodNumber";
 		if (isZodNumber) {
 			(item as any)._def.coerce = true;
 		} else if (isInnerZodNumber) {
 			(item._def as any).innerType._def.coerce = true;
 		}
 		return item;
 	};
 	return (
 		<Accordion type="multiple" className="space-y-5 border-none">
 			{Object.keys(shape).map((name) => {
 				let item = shape[name] as z.ZodAny;
 				item = handleIfZodNumber(item) as z.ZodAny;
 				const zodBaseType = getBaseType(item);
 				const itemName = item._def.description ?? beautifyObjectName(name);
 				const key = [...path, name].join(".");
 				const {
 					isHidden,
 					isDisabled,
 					isRequired: isRequiredByDependency,
 					overrideOptions,
 				} = resolveDependencies(dependencies, name, watch);
 				if (isHidden) {
 					return null;
 				}
 				if (zodBaseType === "ZodObject") {
 					return (
 						<AccordionItem value={name} key={key} className="border-none">
 							<AccordionTrigger>{itemName}</AccordionTrigger>
 							<AccordionContent className="p-2">
 								<AutoFormObject
 									schema={item as unknown as z.ZodObject<any, any>}
 									form={form}
 									fieldConfig={
 										(fieldConfig?.[name] ?? {}) as FieldConfig<z.infer<typeof item>>
 									}
 									path={[...path, name]}
 								/>
 							</AccordionContent>
 						</AccordionItem>
 					);
 				}
 				if (zodBaseType === "ZodArray") {
 					return (
 						<AutoFormArray
 							key={key}
 							name={name}
 							item={item as unknown as z.ZodArray<any>}
 							form={form}
 							fieldConfig={fieldConfig?.[name] ?? {}}
 							path={[...path, name]}
 						/>
 					);
 				}
 				const fieldConfigItem: FieldConfigItem = fieldConfig?.[name] ?? {};
 				const zodInputProps = zodToHtmlInputProps(item);
 				const isRequired =
 					isRequiredByDependency ||
 					zodInputProps.required ||
 					fieldConfigItem.inputProps?.required ||
 					false;
 				if (overrideOptions) {
 					item = z.enum(overrideOptions) as unknown as z.ZodAny;
 				}
 				return (
 					<FormField
 						control={form.control}
 						name={key}
 						key={key}
 						render={({ field }) => {
 							const inputType =
 								fieldConfigItem.fieldType ??
 								DEFAULT_ZOD_HANDLERS[zodBaseType] ??
 								"fallback";
 							const InputComponent =
 								typeof inputType === "function" ? inputType : INPUT_COMPONENTS[inputType];
 							const ParentElement = fieldConfigItem.renderParent ?? DefaultParent;
 							const defaultValue = fieldConfigItem.inputProps?.defaultValue;
 							const value = field.value ?? defaultValue ?? "";
 							const fieldProps = {
 								...zodToHtmlInputProps(item),
 								...field,
 								...fieldConfigItem.inputProps,
 								disabled: fieldConfigItem.inputProps?.disabled || isDisabled,
 								ref: undefined,
 								value: value,
 							};
 							if (InputComponent === undefined) {
 								return <></>;
 							}
 							return (
 								<ParentElement key={`${key}.parent`}>
 									<InputComponent
 										zodInputProps={zodInputProps}
 										field={field}
 										fieldConfigItem={fieldConfigItem}
 										label={itemName}
 										isRequired={isRequired}
 										zodItem={item}
 										fieldProps={fieldProps}
 										className={fieldProps.className}
 									/>
 								</ParentElement>
 							);
 						}}
 					/>
 				);
 			})}
 		</Accordion>
 	);
 }
--- a/src/components/auto-form/fields/radio-group.tsx
+++ b/src/components/auto-form/fields/radio-group.tsx
@@ -0,0 +1,51 @@
 import { FormControl, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import type * as z from "zod";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 import { getBaseSchema } from "../utils";
 export default function AutoFormRadioGroup({
 	label,
 	isRequired,
 	field,
 	zodItem,
 	fieldProps,
 	fieldConfigItem,
 }: AutoFormInputComponentProps) {
 	const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def.values;
 	let values: string[] = [];
 	if (!Array.isArray(baseValues)) {
 		values = Object.entries(baseValues).map((item) => item[0]);
 	} else {
 		values = baseValues;
 	}
 	return (
 		<div>
 			<FormItem>
 				<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 				<FormControl>
 					<RadioGroup
 						onValueChange={field.onChange}
 						defaultValue={field.value}
 						{...fieldProps}
 					>
 						{values?.map((value: any) => (
 							<FormItem key={value} className="mb-2 flex items-center gap-3 space-y-0">
 								<FormControl>
 									<RadioGroupItem value={value} />
 								</FormControl>
 								<FormLabel className="font-normal">{value}</FormLabel>
 							</FormItem>
 						))}
 					</RadioGroup>
 				</FormControl>
 				<FormMessage />
 			</FormItem>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 		</div>
 	);
 }
--- a/src/components/auto-form/fields/switch.tsx
+++ b/src/components/auto-form/fields/switch.tsx
@@ -0,0 +1,34 @@
 import { FormControl, FormItem } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormSwitch({
 	label,
 	isRequired,
 	field,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	return (
 		<div>
 			<FormItem>
 				<div className="flex items-center gap-3">
 					<FormControl>
 						<Switch
 							checked={field.value}
 							onCheckedChange={field.onChange}
 							{...fieldProps}
 						/>
 					</FormControl>
 					<AutoFormLabel
 						label={fieldConfigItem?.label || label}
 						isRequired={isRequired}
 					/>
 				</div>
 			</FormItem>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 		</div>
 	);
 }
--- a/src/components/auto-form/fields/textarea.tsx
+++ b/src/components/auto-form/fields/textarea.tsx
@@ -0,0 +1,27 @@
 import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import AutoFormLabel from "../common/label";
 import AutoFormTooltip from "../common/tooltip";
 import type { AutoFormInputComponentProps } from "../types";
 export default function AutoFormTextarea({
 	label,
 	isRequired,
 	fieldConfigItem,
 	fieldProps,
 }: AutoFormInputComponentProps) {
 	const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
 	const showLabel = _showLabel === undefined ? true : _showLabel;
 	return (
 		<FormItem>
 			{showLabel && (
 				<AutoFormLabel label={fieldConfigItem?.label || label} isRequired={isRequired} />
 			)}
 			<FormControl>
 				<Textarea {...fieldPropsWithoutShowLabel} />
 			</FormControl>
 			<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
 			<FormMessage />
 		</FormItem>
 	);
 }
--- a/src/components/auto-form/index.tsx
+++ b/src/components/auto-form/index.tsx
@@ -0,0 +1,117 @@
 "use client";
 import { Form } from "@/components/ui/form";
 import type React from "react";
 import { useEffect } from "react";
 import { type DefaultValues, type FormState, useForm } from "react-hook-form";
 import type { z } from "zod";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import AutoFormObject from "@/components/auto-form/fields/object";
 import type { Dependency, FieldConfig } from "@/components/auto-form/types";
 import {
 	type ZodObjectOrWrapped,
 	getDefaultValues,
 	getObjectFormSchema,
 } from "@/components/auto-form/utils";
 export function AutoFormSubmit({
 	children,
 	className,
 	disabled,
 }: {
 	children?: React.ReactNode;
 	className?: string;
 	disabled?: boolean;
 }) {
 	return (
 		<Button type="submit" disabled={disabled} className={className}>
 			{children ?? "Submit"}
 		</Button>
 	);
 }
 function AutoForm<SchemaType extends ZodObjectOrWrapped>({
 	formSchema,
 	values: valuesProp,
 	onValuesChange: onValuesChangeProp,
 	onParsedValuesChange,
 	onSubmit: onSubmitProp,
 	fieldConfig,
 	children,
 	className,
 	dependencies,
 }: {
 	formSchema: SchemaType;
 	values?: Partial<z.infer<SchemaType>>;
 	onValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
 	onParsedValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
 	onSubmit?: (values: z.infer<SchemaType>) => void;
 	fieldConfig?: FieldConfig<z.infer<SchemaType>>;
 	children?:
 		| React.ReactNode
 		| ((formState: FormState<z.infer<SchemaType>>) => React.ReactNode);
 	className?: string;
 	dependencies?: Dependency<z.infer<SchemaType>>[];
 }) {
 	const objectFormSchema = getObjectFormSchema(formSchema);
 	const defaultValues: DefaultValues<z.infer<typeof objectFormSchema>> | null =
 		getDefaultValues(objectFormSchema, fieldConfig);
 	const form = useForm<z.infer<typeof objectFormSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: defaultValues ?? undefined,
 		values: valuesProp,
 	});
 	function onSubmit(values: z.infer<typeof formSchema>) {
 		const parsedValues = formSchema.safeParse(values);
 		if (parsedValues.success) {
 			onSubmitProp?.(parsedValues.data);
 		}
 	}
 	const values = form.watch();
 	// valuesString is needed because form.watch() returns a new object every time
 	const valuesString = JSON.stringify(values);
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		onValuesChangeProp?.(values);
 		const parsedValues = formSchema.safeParse(values);
 		if (parsedValues.success) {
 			onParsedValuesChange?.(parsedValues.data);
 		}
 	}, [valuesString]);
 	const renderChildren =
 		typeof children === "function"
 			? children(form.formState as FormState<z.infer<SchemaType>>)
 			: children;
 	return (
 		<div className="w-full">
 			<Form {...form}>
 				<form
 					onSubmit={(e) => {
 						form.handleSubmit(onSubmit)(e);
 					}}
 					className={cn("space-y-5", className)}
 				>
 					<AutoFormObject
 						schema={objectFormSchema}
 						form={form}
 						dependencies={dependencies}
 						fieldConfig={fieldConfig}
 					/>
 					{renderChildren}
 				</form>
 			</Form>
 		</div>
 	);
 }
 export default AutoForm;
--- a/src/components/auto-form/types.ts
+++ b/src/components/auto-form/types.ts
@@ -0,0 +1,71 @@
 import type React from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
 import type * as z from "zod";
 import type { INPUT_COMPONENTS } from "./config";
 export type FieldConfigItem = {
 	description?: React.ReactNode;
 	inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
 		showLabel?: boolean;
 	};
 	label?: string;
 	fieldType?: keyof typeof INPUT_COMPONENTS | React.FC<AutoFormInputComponentProps>;
 	renderParent?: (props: {
 		children: React.ReactNode;
 	}) => React.ReactElement | null;
 };
 export type FieldConfig<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
 	// If SchemaType.key is an object, create a nested FieldConfig, otherwise FieldConfigItem
 	[Key in keyof SchemaType]?: SchemaType[Key] extends object
 		? FieldConfig<z.infer<SchemaType[Key]>>
 		: FieldConfigItem;
 };
 export enum DependencyType {
 	DISABLES = 0,
 	REQUIRES = 1,
 	HIDES = 2,
 	SETS_OPTIONS = 3,
 }
 type BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
 	sourceField: keyof SchemaType;
 	type: DependencyType;
 	targetField: keyof SchemaType;
 	when: (sourceFieldValue: any, targetFieldValue: any) => boolean;
 };
 export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
 	BaseDependency<SchemaType> & {
 		type: DependencyType.DISABLES | DependencyType.REQUIRES | DependencyType.HIDES;
 	};
 export type EnumValues = readonly [string, ...string[]];
 export type OptionsDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
 	BaseDependency<SchemaType> & {
 		type: DependencyType.SETS_OPTIONS;
 		// Partial array of values from sourceField that will trigger the dependency
 		options: EnumValues;
 	};
 export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
 	| ValueDependency<SchemaType>
 	| OptionsDependency<SchemaType>;
 /**
 * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
 */
 export type AutoFormInputComponentProps = {
 	zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
 	field: ControllerRenderProps<FieldValues, any>;
 	fieldConfigItem: FieldConfigItem;
 	label: string;
 	isRequired: boolean;
 	fieldProps: any;
 	zodItem: z.ZodAny;
 	className?: string;
 };
--- a/src/components/auto-form/utils.ts
+++ b/src/components/auto-form/utils.ts
@@ -0,0 +1,167 @@
 import type React from "react";
 import type { DefaultValues } from "react-hook-form";
 import type { z } from "zod";
 import type { FieldConfig } from "./types";
 // TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
 export type ZodObjectOrWrapped =
 	| z.ZodObject<any, any>
 	| z.ZodEffects<z.ZodObject<any, any>>;
 /**
 * Beautify a camelCase string.
 * e.g. "myString" -> "My String"
 */
 export function beautifyObjectName(string: string) {
 	// if numbers only return the string
 	let output = string.replace(/([A-Z])/g, " $1");
 	output = output.charAt(0).toUpperCase() + output.slice(1);
 	return output;
 }
 /**
 * Get the lowest level Zod type.
 * This will unpack optionals, refinements, etc.
 */
 export function getBaseSchema<ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny>(
 	schema: ChildType | z.ZodEffects<ChildType>,
 ): ChildType | null {
 	if (!schema) return null;
 	if ("innerType" in schema._def) {
 		return getBaseSchema(schema._def.innerType as ChildType);
 	}
 	if ("schema" in schema._def) {
 		return getBaseSchema(schema._def.schema as ChildType);
 	}
 	return schema as ChildType;
 }
 /**
 * Get the type name of the lowest level Zod type.
 * This will unpack optionals, refinements, etc.
 */
 export function getBaseType(schema: z.ZodAny): string {
 	const baseSchema = getBaseSchema(schema);
 	return baseSchema ? baseSchema._def.typeName : "";
 }
 /**
 * Search for a "ZodDefult" in the Zod stack and return its value.
 */
 export function getDefaultValueInZodStack(schema: z.ZodAny): any {
 	const typedSchema = schema as unknown as z.ZodDefault<z.ZodNumber | z.ZodString>;
 	if (typedSchema._def.typeName === "ZodDefault") {
 		return typedSchema._def.defaultValue();
 	}
 	if ("innerType" in typedSchema._def) {
 		return getDefaultValueInZodStack(typedSchema._def.innerType as unknown as z.ZodAny);
 	}
 	if ("schema" in typedSchema._def) {
 		return getDefaultValueInZodStack((typedSchema._def as any).schema as z.ZodAny);
 	}
 	return undefined;
 }
 /**
 * Get all default values from a Zod schema.
 */
 export function getDefaultValues<Schema extends z.ZodObject<any, any>>(
 	schema: Schema,
 	fieldConfig?: FieldConfig<z.infer<Schema>>,
 ) {
 	if (!schema) return null;
 	const { shape } = schema;
 	type DefaultValuesType = DefaultValues<Partial<z.infer<Schema>>>;
 	const defaultValues = {} as DefaultValuesType;
 	if (!shape) return defaultValues;
 	for (const key of Object.keys(shape)) {
 		const item = shape[key] as z.ZodAny;
 		if (getBaseType(item) === "ZodObject") {
 			const defaultItems = getDefaultValues(
 				getBaseSchema(item) as unknown as z.ZodObject<any, any>,
 				fieldConfig?.[key] as FieldConfig<z.infer<Schema>>,
 			);
 			if (defaultItems !== null) {
 				for (const defaultItemKey of Object.keys(defaultItems)) {
 					const pathKey = `${key}.${defaultItemKey}` as keyof DefaultValuesType;
 					defaultValues[pathKey] = defaultItems[defaultItemKey];
 				}
 			}
 		} else {
 			let defaultValue = getDefaultValueInZodStack(item);
 			if (
 				(defaultValue === null || defaultValue === "") &&
 				fieldConfig?.[key]?.inputProps
 			) {
 				defaultValue = (fieldConfig?.[key]?.inputProps as unknown as any).defaultValue;
 			}
 			if (defaultValue !== undefined) {
 				defaultValues[key as keyof DefaultValuesType] = defaultValue;
 			}
 		}
 	}
 	return defaultValues;
 }
 export function getObjectFormSchema(schema: ZodObjectOrWrapped): z.ZodObject<any, any> {
 	if (schema?._def.typeName === "ZodEffects") {
 		const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>;
 		return getObjectFormSchema(typedSchema._def.schema);
 	}
 	return schema as z.ZodObject<any, any>;
 }
 /**
 * Convert a Zod schema to HTML input props to give direct feedback to the user.
 * Once submitted, the schema will be validated completely.
 */
 export function zodToHtmlInputProps(
 	schema: z.ZodNumber | z.ZodString | z.ZodOptional<z.ZodNumber | z.ZodString> | any,
 ): React.InputHTMLAttributes<HTMLInputElement> {
 	if (["ZodOptional", "ZodNullable"].includes(schema._def.typeName)) {
 		const typedSchema = schema as z.ZodOptional<z.ZodNumber | z.ZodString>;
 		return {
 			...zodToHtmlInputProps(typedSchema._def.innerType),
 			required: false,
 		};
 	}
 	const typedSchema = schema as z.ZodNumber | z.ZodString;
 	if (!("checks" in typedSchema._def))
 		return {
 			required: true,
 		};
 	const { checks } = typedSchema._def;
 	const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
 		required: true,
 	};
 	const type = getBaseType(schema);
 	for (const check of checks) {
 		if (check.kind === "min") {
 			if (type === "ZodString") {
 				inputProps.minLength = check.value;
 			} else {
 				inputProps.min = check.value;
 			}
 		}
 		if (check.kind === "max") {
 			if (type === "ZodString") {
 				inputProps.maxLength = check.value;
 			} else {
 				inputProps.max = check.value;
 			}
 		}
 	}
 	return inputProps;
 }
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,33 +1,59 @@
-import {Copyright} from "lucide-react";
+import { Copyright } from "lucide-react";
 import Link from "next/link";
 export function Footer() {
 	return (
-		<footer className={"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"}>
+		<footer
-			<div className={"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"}>
+			className={
-				<Copyright className={"w-4"}/>
+				"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"
 			}
 		>
 			<div
 				className={
 					"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"
 				}
 			>
 				<Copyright className={"w-4"} />
 				<h4 className={"pr-2"}>Yidhra Studio</h4>
-				<p>MIT <em>2024</em></p>
+				<p>
 					MIT <em>2024</em>
 				</p>
 			</div>
-			<div className={"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"}>
+			<div
-				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+				className={
 					"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"
 				}
 			>
 				<Link
 					href={"#"}
 					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
 				>
 					<h3 className={"text-nowrap text-center"}>Data privacy</h3>
 				</Link>
-				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+				<Link
 					href={"#"}
 					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
 				>
 					<h3 className={"text-nowrap text-center"}>Terms and conditions</h3>
 				</Link>
-				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+				<Link
 					href={"#"}
 					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
 				>
 					<h3 className={"text-nowrap text-center"}>Legal notice</h3>
 				</Link>
-				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+				<Link
 					href={"#"}
 					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
 				>
 					<h3 className={"text-nowrap text-center"}>Support Center</h3>
 				</Link>
 			</div>
-			<div className={"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"}>
+			<div
-			</div>
+				className={
 					"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"
 				}
 			></div>
 		</footer>
-	)
+	);
-}
+}
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,24 +1,35 @@
 import { AccountDialog } from "@/components/account-dialog";
 import { ThemeBtnSelector } from "@/components/theme-btn-selector";
 import Image from "next/image";
-import React from "react";
+import type React from "react";
 import {ThemeBtnSelector} from "@/components/theme-btn-selector";
 export function Header({title, children}: {title?: string, children?: React.ReactNode}) {
 export function Header({
 	title,
 	children,
 }: { title?: string; children?: React.ReactNode }) {
 	return (
-		<header className={"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 border-b-2"}>
+		<header
-			<div className={"flex flex-row justify-center md:justify-start items-center gap-2 md:w-1/3"}>
+			className={
-				<Image src={'yellow-bit.svg'} alt={'Logo of YeloBit'} width={42} height={42}/>
+				"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 pb-2 border-b-2"
-				<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>{title || 'YeloBit'}</h1>
+			}
 		>
 			<div
 				className={
 					"flex flex-row justify-center md:justify-start items-center gap-2 md:w-1/3"
 				}
 			>
 				<Image src={"yellow-bit.svg"} alt={"Logo of YeloBit"} width={42} height={42} />
 				<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>
 					{title || "YeloBit"}
 				</h1>
 			</div>
-			<div className={"w-1/3 flex flex-row justify-center items-center"}>
+			<div className={"w-1/3 flex flex-row justify-center items-center"}>{children}</div>
-				{children}
+			<div
-			</div>
+				className={"w-1/3 flex flex-row justify-center md:justify-end gap-2 items-center"}
-			<div className={"w-1/3 flex flex-row justify-end items-center"}>
+			>
-				<ThemeBtnSelector/>
+				<AccountDialog />
 				<ThemeBtnSelector />
 			</div>
 		</header>
-	)
+	);
-}
+}
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -1,117 +0,0 @@
 "use client";
 import React from "react";
 import { calsans } from "@/fonts/calsans";
 import Image from "next/image";
 import { twMerge } from "tailwind-merge";
 import { TracingBeam } from "@/components/ui/tracing-beam";
 export function TracingBeamDemo() {
  return (
    <TracingBeam className="px-6">
      <div className="max-w-2xl mx-auto antialiased pt-4 relative">
        {dummyContent.map((item, index) => (
          <div key={`content-${index}`} className="mb-10">
            <h2 className="bg-black text-white rounded-full text-sm w-fit px-4 py-1 mb-4">
              {item.badge}
            </h2>
            <p className={twMerge(calsans.className, "text-xl mb-4")}>
              {item.title}
            </p>
            <div className="text-sm  prose prose-sm dark:prose-invert">
              {item?.image && (
                <Image
                  src={item.image}
                  alt="blog thumbnail"
                  height="1000"
                  width="1000"
                  className="rounded-lg mb-10 object-cover"
                />
              )}
              {item.description}
            </div>
          </div>
        ))}
      </div>
    </TracingBeam>
  );
 }
 const dummyContent = [
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Sit duis est minim proident non nisi velit non consectetur. Esse
          adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt
          Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt
          incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur
          fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore
          nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in
          occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa
          officia sint labore. Tempor consectetur excepteur ut fugiat veniam
          commodo et labore dolore commodo pariatur.
        </p>
        <p>
          Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad
          veniam in commodo id reprehenderit adipisicing. Proident duis
          exercitation ad quis ex cupidatat cupidatat occaecat adipisicing.
        </p>
        <p>
          Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod
          reprehenderit deserunt amet laborum consequat adipisicing officia qui
          irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud.
          Amet culpa officia aliquip deserunt veniam deserunt officia
          adipisicing aliquip proident officia sunt.
        </p>
      </>
    ),
    badge: "React",
    image:
      "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
          deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
          non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
          sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
          velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
          commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
        </p>
        <p>
          In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse
          veniam fugiat esse qui sint ad sunt reprehenderit do qui proident
          reprehenderit. Laborum exercitation aliqua reprehenderit ea sint
          cillum ut mollit.
        </p>
      </>
    ),
    badge: "Changelog",
    image:
      "https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
          deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
          non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
          sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
          velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
          commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
        </p>
      </>
    ),
    badge: "Launch Week",
    image:
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
 ];
--- a/src/components/primary-nav.tsx
+++ b/src/components/primary-nav.tsx
@@ -1,9 +1,8 @@
-"use client"
+"use client";
-import * as React from "react"
+import Link from "next/link";
-import Link from "next/link"
+import * as React from "react";
 import { cn } from "@/lib/utils"
 import {
 	NavigationMenu,
 	NavigationMenuContent,
@@ -12,9 +11,10 @@ import {
 	NavigationMenuList,
 	NavigationMenuTrigger,
 	navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
+} from "@/components/ui/navigation-menu";
 import { cn } from "@/lib/utils";
 import { Boxes, Info } from "lucide-react";
 import Image from "next/image";
 import {Boxes, Info} from "lucide-react";
 const components: { title: string; href: string; description: string }[] = [
 	{
@@ -26,8 +26,7 @@ const components: { title: string; href: string; description: string }[] = [
 	{
 		title: "Hover Card",
 		href: "/docs/primitives/hover-card",
-		description:
+		description: "For sighted users to preview content available behind a link.",
 			"For sighted users to preview content available behind a link.",
 	},
 	{
 		title: "Progress",
@@ -52,14 +51,17 @@ const components: { title: string; href: string; description: string }[] = [
 		description:
 			"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
 	},
-]
+];
 export function PrimaryNavigationMenu() {
 	return (
 		<NavigationMenu>
 			<NavigationMenuList className={"flex flex-row flex-wrap md:flex-nowrap"}>
 				<NavigationMenuItem className={"relative"}>
-					<NavigationMenuTrigger className={"gap-1"}><Info className={"w-4"} />Getting started</NavigationMenuTrigger>
+					<NavigationMenuTrigger className={"gap-1"}>
 						<Info className={"w-4"} />
 						Getting started
 					</NavigationMenuTrigger>
 					<NavigationMenuContent className={""}>
 						<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
 							<li className="row-span-3">
@@ -68,14 +70,16 @@ export function PrimaryNavigationMenu() {
 										className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
 										href="/"
 									>
-										<Image src={'logo-red.svg'} alt={'Logo of Yidhra Studio'} width={64} height={64}/>
+										<Image
-										<div className="mb-2 mt-4 text-lg font-medium">
+											src={"logo-red.svg"}
-											shadcn/ui
+											alt={"Logo of Yidhra Studio"}
-										</div>
+											width={64}
 											height={64}
 										/>
 										<div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
 										<p className="text-sm leading-tight text-muted-foreground">
-											Beautifully designed components that you can copy and
+											Beautifully designed components that you can copy and paste into
-											paste into your apps. Accessible. Customizable. Open
+											your apps. Accessible. Customizable. Open Source.
 											Source.
 										</p>
 									</a>
 								</NavigationMenuLink>
@@ -93,7 +97,10 @@ export function PrimaryNavigationMenu() {
 					</NavigationMenuContent>
 				</NavigationMenuItem>
 				<NavigationMenuItem>
-					<NavigationMenuTrigger className={"gap-1"}><Boxes className={"w-4"} />Features</NavigationMenuTrigger>
+					<NavigationMenuTrigger className={"gap-1"}>
 						<Boxes className={"w-4"} />
 						Features
 					</NavigationMenuTrigger>
 					<NavigationMenuContent>
 						<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
 							{components.map((component) => (
@@ -117,7 +124,7 @@ export function PrimaryNavigationMenu() {
 				</NavigationMenuItem>
 			</NavigationMenuList>
 		</NavigationMenu>
-	)
+	);
 }
 const ListItem = React.forwardRef<
@@ -131,7 +138,7 @@ const ListItem = React.forwardRef<
 					ref={ref}
 					className={cn(
 						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-						className
+						className,
 					)}
 					{...props}
 				>
@@ -142,6 +149,6 @@ const ListItem = React.forwardRef<
 				</a>
 			</NavigationMenuLink>
 		</li>
-	)
+	);
-})
+});
-ListItem.displayName = "ListItem"
+ListItem.displayName = "ListItem";
--- a/src/components/providers/providers.tsx
+++ b/src/components/providers/providers.tsx
@@ -0,0 +1,14 @@
 "use client";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { UserDataProvider } from "@/components/providers/userdata-provider";
 import type React from "react";
 export function Providers({ children }: { children: React.ReactNode }) {
 	return (
 		<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
 			<UserDataProvider>{children}</UserDataProvider>
 		</ThemeProvider>
 	);
 }
--- a/src/components/providers/theme-provider.tsx
+++ b/src/components/providers/theme-provider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes/dist/types";
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import * as React from "react";
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-	return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
--- a/src/components/providers/userdata-provider.tsx
+++ b/src/components/providers/userdata-provider.tsx
@@ -0,0 +1,25 @@
 import type { IUserData } from "@/interfaces/userdata.interface";
 import { useEncodedLocalStorage } from "@/services/localStorage";
 import React from "react";
 export interface IUserDataProvider {
 	userData: IUserData | undefined;
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
 }
 export const UserDataContext = React.createContext<IUserDataProvider | undefined>(
 	undefined,
 );
 export const UserDataProvider = ({ children }: { children: React.ReactNode }) => {
 	const [userData, setUserData] = useEncodedLocalStorage<IUserData | undefined>(
 		"user_data",
 		undefined,
 	);
 	return (
 		<UserDataContext.Provider value={{ userData, setUserData }}>
 			{children}
 		</UserDataContext.Provider>
 	);
 };
--- a/src/components/theme-btn-selector.tsx
+++ b/src/components/theme-btn-selector.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
-import * as React from "react"
+import { MoonStar, Sun } from "lucide-react";
-import {MoonStar, Sun} from "lucide-react";
+import { useTheme } from "next-themes";
-import { useTheme } from "next-themes"
+import * as React from "react";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 export function ThemeBtnSelector() {
-	const { setTheme } = useTheme()
+	const { setTheme } = useTheme();
 	return (
 		<DropdownMenu>
@@ -25,16 +25,10 @@ export function ThemeBtnSelector() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>
+				<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-					Light
+				<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
 				<DropdownMenuItem onClick={() => setTheme("dark")}>
 					Dark
 				</DropdownMenuItem>
 				<DropdownMenuItem onClick={() => setTheme("system")}>
 					System
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
-	)
+	);
 }
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,58 +1,54 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react";
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
+	<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-    ref={ref}
+));
-    className={cn("border-b", className)}
+AccordionItem.displayName = "AccordionItem";
    {...props}
  />
 ))
 AccordionItem.displayName = "AccordionItem"
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+	<AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
+		<AccordionPrimitive.Trigger
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+				"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      {children}
+			{children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+			<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+	</AccordionPrimitive.Header>
-))
+));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
+	<AccordionPrimitive.Content
-    ref={ref}
+		ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
+		{...props}
-  >
+	>
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+		<div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
+	</AccordionPrimitive.Content>
-))
+));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,141 +1,133 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button";
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
+	<AlertDialogPrimitive.Overlay
-    className={cn(
+		className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-    ref={ref}
+		ref={ref}
-  />
+	/>
-))
+));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
+	<AlertDialogPortal>
-    <AlertDialogOverlay />
+		<AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
+		<AlertDialogPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  </AlertDialogPortal>
+	</AlertDialogPortal>
-))
+));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
+	<div
-    className={cn(
+		className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-      "flex flex-col space-y-2 text-center sm:text-left",
+		{...props}
-      className
+	/>
-    )}
+);
-    {...props}
+AlertDialogHeader.displayName = "AlertDialogHeader";
  />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 const AlertDialogFooter = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
+	<div
-    className={cn(
+		className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-)
+);
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
+	<AlertDialogPrimitive.Title
-    ref={ref}
+		ref={ref}
-    className={cn("text-lg font-semibold", className)}
+		className={cn("text-lg font-semibold", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
+	<AlertDialogPrimitive.Description
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+		className={cn("text-sm text-muted-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AlertDialogDescription.displayName =
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
  AlertDialogPrimitive.Description.displayName
 const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
+	<AlertDialogPrimitive.Action
-    ref={ref}
+		ref={ref}
-    className={cn(buttonVariants(), className)}
+		className={cn(buttonVariants(), className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
+	<AlertDialogPrimitive.Cancel
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-      buttonVariants({ variant: "outline" }),
+		{...props}
-      "mt-2 sm:mt-0",
+	/>
-      className
+));
-    )}
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
    {...props}
  />
 ))
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 export {
-  AlertDialog,
+	AlertDialog,
-  AlertDialogPortal,
+	AlertDialogPortal,
-  AlertDialogOverlay,
+	AlertDialogOverlay,
-  AlertDialogTrigger,
+	AlertDialogTrigger,
-  AlertDialogContent,
+	AlertDialogContent,
-  AlertDialogHeader,
+	AlertDialogHeader,
-  AlertDialogFooter,
+	AlertDialogFooter,
-  AlertDialogTitle,
+	AlertDialogTitle,
-  AlertDialogDescription,
+	AlertDialogDescription,
-  AlertDialogAction,
+	AlertDialogAction,
-  AlertDialogCancel,
+	AlertDialogCancel,
-}
+};
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,59 +1,55 @@
-import * as React from "react"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
+	{
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default: "bg-background text-foreground",
+				default: "bg-background text-foreground",
-        destructive:
+				destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
+			},
-    },
+		},
-    defaultVariants: {
+		defaultVariants: {
-      variant: "default",
+			variant: "default",
-    },
+		},
-  }
+	},
-)
+);
 const Alert = React.forwardRef<
-  HTMLDivElement,
+	HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
+	<div
-    ref={ref}
+		ref={ref}
-    role="alert"
+		role="alert"
-    className={cn(alertVariants({ variant }), className)}
+		className={cn(alertVariants({ variant }), className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-Alert.displayName = "Alert"
+Alert.displayName = "Alert";
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
+	<h5
-    ref={ref}
+		ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AlertTitle.displayName = "AlertTitle"
+AlertTitle.displayName = "AlertTitle";
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
+	<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-    ref={ref}
+));
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
+AlertDescription.displayName = "AlertDescription";
    {...props}
  />
 ))
 AlertDescription.displayName = "AlertDescription"
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@@ -1,7 +1,7 @@
-"use client"
+"use client";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-const AspectRatio = AspectRatioPrimitive.Root
+const AspectRatio = AspectRatioPrimitive.Root;
-export { AspectRatio }
+export { AspectRatio };
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,50 +1,50 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
+	<AvatarPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-Avatar.displayName = AvatarPrimitive.Root.displayName
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
+	<AvatarPrimitive.Image
-    ref={ref}
+		ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+		className={cn("aspect-square h-full w-full", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
+	<AvatarPrimitive.Fallback
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,36 +1,34 @@
-import * as React from "react"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
+	{
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default:
+				default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+					"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
+				secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
+				destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+				outline: "text-foreground",
-      },
+			},
-    },
+		},
-    defaultVariants: {
+		defaultVariants: {
-      variant: "default",
+			variant: "default",
-    },
+		},
-  }
+	},
-)
+);
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+	extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+		VariantProps<typeof badgeVariants> {}
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
+	return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
 }
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,115 +1,112 @@
-import * as React from "react"
+import { Slot } from "@radix-ui/react-slot";
-import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Breadcrumb = React.forwardRef<
-  HTMLElement,
+	HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
+	React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+		separator?: React.ReactNode;
-  }
+	}
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb"
+Breadcrumb.displayName = "Breadcrumb";
 const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
+	HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
+	React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
-  <ol
+	<ol
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-BreadcrumbList.displayName = "BreadcrumbList"
+BreadcrumbList.displayName = "BreadcrumbList";
 const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
+	HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
+	React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
-  <li
+	<li
-    ref={ref}
+		ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
+		className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-BreadcrumbItem.displayName = "BreadcrumbItem"
+BreadcrumbItem.displayName = "BreadcrumbItem";
 const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
+	HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
+	React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+		asChild?: boolean;
-  }
+	}
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+	const Comp = asChild ? Slot : "a";
-  return (
+	return (
-    <Comp
+		<Comp
-      ref={ref}
+			ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+			className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-})
+});
-BreadcrumbLink.displayName = "BreadcrumbLink"
+BreadcrumbLink.displayName = "BreadcrumbLink";
 const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
+	HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
+	React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
-  <span
+	<span
-    ref={ref}
+		ref={ref}
-    role="link"
+		role="link"
-    aria-disabled="true"
+		aria-disabled="true"
-    aria-current="page"
+		aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+		className={cn("font-normal text-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-BreadcrumbPage.displayName = "BreadcrumbPage"
+BreadcrumbPage.displayName = "BreadcrumbPage";
 const BreadcrumbSeparator = ({
-  children,
+	children,
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<"li">) => (
-  <li
+	<li
-    role="presentation"
+		role="presentation"
-    aria-hidden="true"
+		aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+		className={cn("[&>svg]:size-3.5", className)}
-    {...props}
+		{...props}
-  >
+	>
-    {children ?? <ChevronRight />}
+		{children ?? <ChevronRight />}
-  </li>
+	</li>
-)
+);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-const BreadcrumbEllipsis = ({
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  className,
+	<span
-  ...props
+		role="presentation"
-}: React.ComponentProps<"span">) => (
+		aria-hidden="true"
-  <span
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
-    role="presentation"
+		{...props}
-    aria-hidden="true"
+	>
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+		<MoreHorizontal className="h-4 w-4" />
-    {...props}
+		<span className="sr-only">More</span>
-  >
+	</span>
-    <MoreHorizontal className="h-4 w-4" />
+);
-    <span className="sr-only">More</span>
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
  </span>
 )
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
 export {
-  Breadcrumb,
+	Breadcrumb,
-  BreadcrumbList,
+	BreadcrumbList,
-  BreadcrumbItem,
+	BreadcrumbItem,
-  BreadcrumbLink,
+	BreadcrumbLink,
-  BreadcrumbPage,
+	BreadcrumbPage,
-  BreadcrumbSeparator,
+	BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+	BreadcrumbEllipsis,
-}
+};
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,56 +1,54 @@
-import * as React from "react"
+import { Slot } from "@radix-ui/react-slot";
-import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
+	{
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
-        outline:
+					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        secondary:
+				ghost: "hover:bg-accent hover:text-accent-foreground",
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				link: "text-primary underline-offset-4 hover:underline",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+			},
-        link: "text-primary underline-offset-4 hover:underline",
+			size: {
-      },
+				default: "h-10 px-4 py-2",
-      size: {
+				sm: "h-9 rounded-md px-3",
-        default: "h-10 px-4 py-2",
+				lg: "h-11 rounded-md px-8",
-        sm: "h-9 rounded-md px-3",
+				icon: "h-10 w-10",
-        lg: "h-11 rounded-md px-8",
+			},
-        icon: "h-10 w-10",
+		},
-      },
+		defaultVariants: {
-    },
+			variant: "default",
-    defaultVariants: {
+			size: "default",
-      variant: "default",
+		},
-      size: "default",
+	},
-    },
+);
  }
 )
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+		VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	asChild?: boolean;
 }
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+	({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+		const Comp = asChild ? Slot : "button";
-    return (
+		return (
-      <Comp
+			<Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+				className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
+				ref={ref}
-        {...props}
+				{...props}
-      />
+			/>
-    )
+		);
-  }
+	},
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
-export { Button, buttonVariants }
+export { Button, buttonVariants };
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,66 +1,64 @@
-"use client"
+"use client";
-import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react";
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import type * as React from "react";
-import { DayPicker } from "react-day-picker"
+import { DayPicker } from "react-day-picker";
-import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button";
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 function Calendar({
-  className,
+	className,
-  classNames,
+	classNames,
-  showOutsideDays = true,
+	showOutsideDays = true,
-  ...props
+	...props
 }: CalendarProps) {
-  return (
+	return (
-    <DayPicker
+		<DayPicker
-      showOutsideDays={showOutsideDays}
+			showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+			className={cn("p-3", className)}
-      classNames={{
+			classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
+				month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
+				caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+				caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+				nav: "space-x-1 flex items-center",
-        nav_button: cn(
+				nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+					buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
+				),
-        nav_button_previous: "absolute left-1",
+				nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+				nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
+				table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+				head_row: "flex",
-        head_cell:
+				head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
-        row: "flex w-full mt-2",
+				cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+				day: cn(
-        day: cn(
+					buttonVariants({ variant: "ghost" }),
-          buttonVariants({ variant: "ghost" }),
+					"h-9 w-9 p-0 font-normal aria-selected:opacity-100",
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+				),
-        ),
+				day_range_end: "day-range-end",
-        day_range_end: "day-range-end",
+				day_selected:
-        day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
-        day_today: "bg-accent text-accent-foreground",
+				day_outside:
-        day_outside:
+					"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+				day_disabled: "text-muted-foreground opacity-50",
-        day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_range_middle:
+				day_hidden: "invisible",
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+				...classNames,
-        day_hidden: "invisible",
+			}}
-        ...classNames,
+			components={{
-      }}
+				IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-      components={{
+				IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+			}}
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+			{...props}
-      }}
+		/>
-      {...props}
+	);
    />
  )
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
-export { Calendar }
+export { Calendar };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,79 +1,65 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Card = React.forwardRef<
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+	({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+		<div
->(({ className, ...props }, ref) => (
+			ref={ref}
-  <div
+			className={cn(
-    ref={ref}
+				"rounded-lg border bg-card text-card-foreground shadow-sm",
-    className={cn(
+				className,
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+			)}
-      className
+			{...props}
-    )}
+		/>
-    {...props}
+	),
-  />
+);
-))
+Card.displayName = "Card";
 Card.displayName = "Card"
-const CardHeader = React.forwardRef<
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+	({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+		<div
->(({ className, ...props }, ref) => (
+			ref={ref}
-  <div
+			className={cn("flex flex-col space-y-1.5 p-6", className)}
-    ref={ref}
+			{...props}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+		/>
-    {...props}
+	),
-  />
+);
-))
+CardHeader.displayName = "CardHeader";
 CardHeader.displayName = "CardHeader"
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h3
+	<h3
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
-      "text-2xl font-semibold leading-none tracking-tight",
+		{...props}
-      className
+	/>
-    )}
+));
-    {...props}
+CardTitle.displayName = "CardTitle";
  />
 ))
 CardTitle.displayName = "CardTitle"
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+	<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-    ref={ref}
+));
-    className={cn("text-sm text-muted-foreground", className)}
+CardDescription.displayName = "CardDescription";
    {...props}
  />
 ))
 CardDescription.displayName = "CardDescription"
 const CardContent = React.forwardRef<
-  HTMLDivElement,
+	HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
+));
-CardContent.displayName = "CardContent"
+CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef<
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+	({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+		<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
->(({ className, ...props }, ref) => (
+	),
-  <div
+);
-    ref={ref}
+CardFooter.displayName = "CardFooter";
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
 ))
 CardFooter.displayName = "CardFooter"
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,262 +1,251 @@
-"use client"
+"use client";
-import * as React from "react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import useEmblaCarousel, {
+import { ArrowLeft, ArrowRight } from "lucide-react";
-  type UseEmblaCarouselType,
+import * as React from "react";
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button";
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
-type CarouselApi = UseEmblaCarouselType[1]
+type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0]
+type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselPlugin = UseCarouselParameters[1];
 type CarouselProps = {
-  opts?: CarouselOptions
+	opts?: CarouselOptions;
-  plugins?: CarouselPlugin
+	plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical"
+	orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void
+	setApi?: (api: CarouselApi) => void;
-}
+};
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1]
+	api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void
+	scrollPrev: () => void;
-  scrollNext: () => void
+	scrollNext: () => void;
-  canScrollPrev: boolean
+	canScrollPrev: boolean;
-  canScrollNext: boolean
+	canScrollNext: boolean;
-} & CarouselProps
+} & CarouselProps;
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+	const context = React.useContext(CarouselContext);
-  if (!context) {
+	if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+		throw new Error("useCarousel must be used within a <Carousel />");
-  }
+	}
-  return context
+	return context;
 }
 const Carousel = React.forwardRef<
-  HTMLDivElement,
+	HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
-  (
+	(
-    {
+		{ orientation = "horizontal", opts, setApi, plugins, className, children, ...props },
-      orientation = "horizontal",
+		ref,
-      opts,
+	) => {
-      setApi,
+		const [carouselRef, api] = useEmblaCarousel(
-      plugins,
+			{
-      className,
+				...opts,
-      children,
+				axis: orientation === "horizontal" ? "x" : "y",
-      ...props
+			},
-    },
+			plugins,
-    ref
+		);
-  ) => {
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [carouselRef, api] = useEmblaCarousel(
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)
-    const onSelect = React.useCallback((api: CarouselApi) => {
+		const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
+			if (!api) {
-        return
+				return;
-      }
+			}
-      setCanScrollPrev(api.canScrollPrev())
+			setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext())
+			setCanScrollNext(api.canScrollNext());
-    }, [])
+		}, []);
-    const scrollPrev = React.useCallback(() => {
+		const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
+			api?.scrollPrev();
-    }, [api])
+		}, [api]);
-    const scrollNext = React.useCallback(() => {
+		const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
+			api?.scrollNext();
-    }, [api])
+		}, [api]);
-    const handleKeyDown = React.useCallback(
+		const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
+				if (event.key === "ArrowLeft") {
-          event.preventDefault()
+					event.preventDefault();
-          scrollPrev()
+					scrollPrev();
-        } else if (event.key === "ArrowRight") {
+				} else if (event.key === "ArrowRight") {
-          event.preventDefault()
+					event.preventDefault();
-          scrollNext()
+					scrollNext();
-        }
+				}
-      },
+			},
-      [scrollPrev, scrollNext]
+			[scrollPrev, scrollNext],
-    )
+		);
-    React.useEffect(() => {
+		React.useEffect(() => {
-      if (!api || !setApi) {
+			if (!api || !setApi) {
-        return
+				return;
-      }
+			}
-      setApi(api)
+			setApi(api);
-    }, [api, setApi])
+		}, [api, setApi]);
-    React.useEffect(() => {
+		React.useEffect(() => {
-      if (!api) {
+			if (!api) {
-        return
+				return;
-      }
+			}
-      onSelect(api)
+			onSelect(api);
-      api.on("reInit", onSelect)
+			api.on("reInit", onSelect);
-      api.on("select", onSelect)
+			api.on("select", onSelect);
-      return () => {
+			return () => {
-        api?.off("select", onSelect)
+				api?.off("select", onSelect);
-      }
+			};
-    }, [api, onSelect])
+		}, [api, onSelect]);
-    return (
+		return (
-      <CarouselContext.Provider
+			<CarouselContext.Provider
-        value={{
+				value={{
-          carouselRef,
+					carouselRef,
-          api: api,
+					api: api,
-          opts,
+					opts,
-          orientation:
+					orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
-          scrollPrev,
+					scrollNext,
-          scrollNext,
+					canScrollPrev,
-          canScrollPrev,
+					canScrollNext,
-          canScrollNext,
+				}}
-        }}
+			>
-      >
+				<div
-        <div
+					ref={ref}
-          ref={ref}
+					onKeyDownCapture={handleKeyDown}
-          onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
-          className={cn("relative", className)}
+					role="region"
-          role="region"
+					aria-roledescription="carousel"
-          aria-roledescription="carousel"
+					{...props}
-          {...props}
+				>
-        >
+					{children}
-          {children}
+				</div>
-        </div>
+			</CarouselContext.Provider>
-      </CarouselContext.Provider>
+		);
-    )
+	},
-  }
+);
-)
+Carousel.displayName = "Carousel";
 Carousel.displayName = "Carousel"
 const CarouselContent = React.forwardRef<
-  HTMLDivElement,
+	HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+	const { carouselRef, orientation } = useCarousel();
-  return (
+	return (
-    <div ref={carouselRef} className="overflow-hidden">
+		<div ref={carouselRef} className="overflow-hidden">
-      <div
+			<div
-        ref={ref}
+				ref={ref}
-        className={cn(
+				className={cn(
-          "flex",
+					"flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+					className,
-        )}
+				)}
-        {...props}
+				{...props}
-      />
+			/>
-    </div>
+		</div>
-  )
+	);
-})
+});
-CarouselContent.displayName = "CarouselContent"
+CarouselContent.displayName = "CarouselContent";
 const CarouselItem = React.forwardRef<
-  HTMLDivElement,
+	HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+	const { orientation } = useCarousel();
-  return (
+	return (
-    <div
+		<div
-      ref={ref}
+			ref={ref}
-      role="group"
+			role="group"
-      aria-roledescription="slide"
+			aria-roledescription="slide"
-      className={cn(
+			className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
+				"min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-})
+});
-CarouselItem.displayName = "CarouselItem"
+CarouselItem.displayName = "CarouselItem";
 const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
+	HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return (
+	return (
-    <Button
+		<Button
-      ref={ref}
+			ref={ref}
-      variant={variant}
+			variant={variant}
-      size={size}
+			size={size}
-      className={cn(
+			className={cn(
-        "absolute  h-8 w-8 rounded-full",
+				"absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
+				orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+					? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+				className,
-      )}
+			)}
-      disabled={!canScrollPrev}
+			disabled={!canScrollPrev}
-      onClick={scrollPrev}
+			onClick={scrollPrev}
-      {...props}
+			{...props}
-    >
+		>
-      <ArrowLeft className="h-4 w-4" />
+			<ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
+			<span className="sr-only">Previous slide</span>
-    </Button>
+		</Button>
-  )
+	);
-})
+});
-CarouselPrevious.displayName = "CarouselPrevious"
+CarouselPrevious.displayName = "CarouselPrevious";
 const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
+	HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return (
+	return (
-    <Button
+		<Button
-      ref={ref}
+			ref={ref}
-      variant={variant}
+			variant={variant}
-      size={size}
+			size={size}
-      className={cn(
+			className={cn(
-        "absolute h-8 w-8 rounded-full",
+				"absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
+				orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+					? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+				className,
-      )}
+			)}
-      disabled={!canScrollNext}
+			disabled={!canScrollNext}
-      onClick={scrollNext}
+			onClick={scrollNext}
-      {...props}
+			{...props}
-    >
+		>
-      <ArrowRight className="h-4 w-4" />
+			<ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
+			<span className="sr-only">Next slide</span>
-    </Button>
+		</Button>
-  )
+	);
-})
+});
-CarouselNext.displayName = "CarouselNext"
+CarouselNext.displayName = "CarouselNext";
 export {
-  type CarouselApi,
+	type CarouselApi,
-  Carousel,
+	Carousel,
-  CarouselContent,
+	CarouselContent,
-  CarouselItem,
+	CarouselItem,
-  CarouselPrevious,
+	CarouselPrevious,
-  CarouselNext,
+	CarouselNext,
-}
+};
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,30 +1,30 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react";
-import { Check } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
+	<CheckboxPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <CheckboxPrimitive.Indicator
+		<CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+			className={cn("flex items-center justify-center text-current")}
-    >
+		>
-      <Check className="h-4 w-4" />
+			<Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
+	</CheckboxPrimitive.Root>
-))
+));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-export { Checkbox }
+export { Checkbox };
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,155 +1,148 @@
-"use client"
+"use client";
-import * as React from "react"
+import type { DialogProps } from "@radix-ui/react-dialog";
-import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk";
-import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react";
-import { Search } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
 const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
+	React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive
+	<CommandPrimitive
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-Command.displayName = CommandPrimitive.displayName
+Command.displayName = CommandPrimitive.displayName;
 interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
+	return (
-    <Dialog {...props}>
+		<Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
+					{children}
-        </Command>
+				</Command>
-      </DialogContent>
+			</DialogContent>
-    </Dialog>
+		</Dialog>
-  )
+	);
-}
+};
 const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
+		<CommandPrimitive.Input
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  </div>
+	</div>
-))
+));
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
+	React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
+	<CommandPrimitive.List
-    ref={ref}
+		ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
+	<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-    ref={ref}
+));
    className="py-6 text-center text-sm"
    {...props}
  />
 ))
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
+	<CommandPrimitive.Group
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
+	<CommandPrimitive.Separator
-    ref={ref}
+		ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+		className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
+	<CommandPrimitive.Item
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
+	return (
-    <span
+		<span
-      className={cn(
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+			{...props}
-        className
+		/>
-      )}
+	);
-      {...props}
+};
-    />
+CommandShortcut.displayName = "CommandShortcut";
  )
 }
 CommandShortcut.displayName = "CommandShortcut"
 export {
-  Command,
+	Command,
-  CommandDialog,
+	CommandDialog,
-  CommandInput,
+	CommandInput,
-  CommandList,
+	CommandList,
-  CommandEmpty,
+	CommandEmpty,
-  CommandGroup,
+	CommandGroup,
-  CommandItem,
+	CommandItem,
-  CommandShortcut,
+	CommandShortcut,
-  CommandSeparator,
+	CommandSeparator,
-}
+};
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,200 +1,196 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
+	<ContextMenuPrimitive.SubTrigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}
+		{children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+		<ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
+	</ContextMenuPrimitive.SubTrigger>
-))
+));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
+	<ContextMenuPrimitive.SubContent
-    ref={ref}
+		ref={ref}
-    className={cn(
+		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",
+			"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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+	React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
+	<ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
+		<ContextMenuPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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",
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  </ContextMenuPrimitive.Portal>
+	</ContextMenuPrimitive.Portal>
-))
+));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+	React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
+	<ContextMenuPrimitive.Item
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
+	<ContextMenuPrimitive.CheckboxItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    checked={checked}
+		checked={checked}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
+			<ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+				<Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
+			</ContextMenuPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </ContextMenuPrimitive.CheckboxItem>
+	</ContextMenuPrimitive.CheckboxItem>
-))
+));
-ContextMenuCheckboxItem.displayName =
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
  ContextMenuPrimitive.CheckboxItem.displayName
 const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
+	<ContextMenuPrimitive.RadioItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
+			<ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+				<Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
+			</ContextMenuPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </ContextMenuPrimitive.RadioItem>
+	</ContextMenuPrimitive.RadioItem>
-))
+));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+	React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
+	<ContextMenuPrimitive.Label
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+			"px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
+	<ContextMenuPrimitive.Separator
-    ref={ref}
+		ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+		className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 const ContextMenuShortcut = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
+	return (
-    <span
+		<span
-      className={cn(
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+			{...props}
-        className
+		/>
-      )}
+	);
-      {...props}
+};
-    />
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
  )
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut"
 export {
-  ContextMenu,
+	ContextMenu,
-  ContextMenuTrigger,
+	ContextMenuTrigger,
-  ContextMenuContent,
+	ContextMenuContent,
-  ContextMenuItem,
+	ContextMenuItem,
-  ContextMenuCheckboxItem,
+	ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
+	ContextMenuRadioItem,
-  ContextMenuLabel,
+	ContextMenuLabel,
-  ContextMenuSeparator,
+	ContextMenuSeparator,
-  ContextMenuShortcut,
+	ContextMenuShortcut,
-  ContextMenuGroup,
+	ContextMenuGroup,
-  ContextMenuPortal,
+	ContextMenuPortal,
-  ContextMenuSub,
+	ContextMenuSub,
-  ContextMenuSubContent,
+	ContextMenuSubContent,
-  ContextMenuSubTrigger,
+	ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+	ContextMenuRadioGroup,
-}
+};
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -0,0 +1,37 @@
 "use client";
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 export const DatePicker = forwardRef<
 	HTMLDivElement,
 	{
 		date?: Date;
 		setDate: (date?: Date) => void;
 	}
 >(function DatePickerCmp({ date, setDate }, ref) {
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
 				<Button
 					variant={"outline"}
 					className={cn(
 						"w-full justify-start text-left font-normal",
 						!date && "text-muted-foreground",
 					)}
 				>
 					<CalendarIcon className="mr-2 h-4 w-4" />
 					{date ? format(date, "PPP") : <span>Pick a date</span>}
 				</Button>
 			</PopoverTrigger>
 			<PopoverContent className="w-auto p-0" ref={ref}>
 				<Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
 			</PopoverContent>
 		</Popover>
 	);
 });
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,122 +1,110 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react";
-import { X } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
+	<DialogPrimitive.Overlay
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+	<DialogPortal>
-    <DialogOverlay />
+		<DialogOverlay />
-    <DialogPrimitive.Content
+		<DialogPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      {children}
+			{children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+				<X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+				<span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+			</DialogPrimitive.Close>
-    </DialogPrimitive.Content>
+		</DialogPrimitive.Content>
-  </DialogPortal>
+	</DialogPortal>
-))
+));
-DialogContent.displayName = DialogPrimitive.Content.displayName
+DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div
-  ...props
+		className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
-}: React.HTMLAttributes<HTMLDivElement>) => (
+		{...props}
-  <div
+	/>
-    className={cn(
+);
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+DialogHeader.displayName = "DialogHeader";
      className
    )}
    {...props}
  />
 )
 DialogHeader.displayName = "DialogHeader"
-const DialogFooter = ({
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div
-  ...props
+		className={cn(
-}: React.HTMLAttributes<HTMLDivElement>) => (
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-  <div
+			className,
-    className={cn(
+		)}
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		{...props}
-      className
+	/>
-    )}
+);
-    {...props}
+DialogFooter.displayName = "DialogFooter";
  />
 )
 DialogFooter.displayName = "DialogFooter"
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
+	<DialogPrimitive.Title
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-      "text-lg font-semibold leading-none tracking-tight",
+		{...props}
-      className
+	/>
-    )}
+));
-    {...props}
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
  />
 ))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
+	<DialogPrimitive.Description
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+		className={cn("text-sm text-muted-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export {
-  Dialog,
+	Dialog,
-  DialogPortal,
+	DialogPortal,
-  DialogOverlay,
+	DialogOverlay,
-  DialogClose,
+	DialogClose,
-  DialogTrigger,
+	DialogTrigger,
-  DialogContent,
+	DialogContent,
-  DialogHeader,
+	DialogHeader,
-  DialogFooter,
+	DialogFooter,
-  DialogTitle,
+	DialogTitle,
-  DialogDescription,
+	DialogDescription,
-}
+};
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,118 +1,103 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "vaul";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Drawer = ({
-  shouldScaleBackground = true,
+	shouldScaleBackground = true,
-  ...props
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
+	<DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
-    shouldScaleBackground={shouldScaleBackground}
+);
-    {...props}
+Drawer.displayName = "Drawer";
  />
 )
 Drawer.displayName = "Drawer"
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+	React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
+	<DrawerPrimitive.Overlay
-    ref={ref}
+		ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+		className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
+	<DrawerPortal>
-    <DrawerOverlay />
+		<DrawerOverlay />
-    <DrawerPrimitive.Content
+		<DrawerPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
+			{children}
-    </DrawerPrimitive.Content>
+		</DrawerPrimitive.Content>
-  </DrawerPortal>
+	</DrawerPortal>
-))
+));
-DrawerContent.displayName = "DrawerContent"
+DrawerContent.displayName = "DrawerContent";
-const DrawerHeader = ({
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div
-  ...props
+		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-}: React.HTMLAttributes<HTMLDivElement>) => (
+		{...props}
-  <div
+	/>
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+);
-    {...props}
+DrawerHeader.displayName = "DrawerHeader";
  />
 )
 DrawerHeader.displayName = "DrawerHeader"
-const DrawerFooter = ({
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
-  ...props
+);
-}: React.HTMLAttributes<HTMLDivElement>) => (
+DrawerFooter.displayName = "DrawerFooter";
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
 )
 DrawerFooter.displayName = "DrawerFooter"
 const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
+	<DrawerPrimitive.Title
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-      "text-lg font-semibold leading-none tracking-tight",
+		{...props}
-      className
+	/>
-    )}
+));
-    {...props}
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
  />
 ))
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
+	<DrawerPrimitive.Description
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+		className={cn("text-sm text-muted-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 export {
-  Drawer,
+	Drawer,
-  DrawerPortal,
+	DrawerPortal,
-  DrawerOverlay,
+	DrawerOverlay,
-  DrawerTrigger,
+	DrawerTrigger,
-  DrawerClose,
+	DrawerClose,
-  DrawerContent,
+	DrawerContent,
-  DrawerHeader,
+	DrawerHeader,
-  DrawerFooter,
+	DrawerFooter,
-  DrawerTitle,
+	DrawerTitle,
-  DrawerDescription,
+	DrawerDescription,
-}
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,200 +1,193 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
+	<DropdownMenuPrimitive.SubTrigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}
+		{children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+		<ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
+	</DropdownMenuPrimitive.SubTrigger>
-))
+));
-DropdownMenuSubTrigger.displayName =
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
  DropdownMenuPrimitive.SubTrigger.displayName
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
+	<DropdownMenuPrimitive.SubContent
-    ref={ref}
+		ref={ref}
-    className={cn(
+		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",
+			"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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DropdownMenuSubContent.displayName =
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
  DropdownMenuPrimitive.SubContent.displayName
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+	<DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
+		<DropdownMenuPrimitive.Content
-      ref={ref}
+			ref={ref}
-      sideOffset={sideOffset}
+			sideOffset={sideOffset}
-      className={cn(
+			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",
+				"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
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  </DropdownMenuPrimitive.Portal>
+	</DropdownMenuPrimitive.Portal>
-))
+));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
+	<DropdownMenuPrimitive.Item
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center 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",
+			"relative flex cursor-default select-none items-center 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",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
+	<DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		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",
+			"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
+			className,
-    )}
+		)}
-    checked={checked}
+		checked={checked}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
+			<DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+				<Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
+			</DropdownMenuPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </DropdownMenuPrimitive.CheckboxItem>
+	</DropdownMenuPrimitive.CheckboxItem>
-))
+));
-DropdownMenuCheckboxItem.displayName =
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
  DropdownMenuPrimitive.CheckboxItem.displayName
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
+	<DropdownMenuPrimitive.RadioItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		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",
+			"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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
+			<DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+				<Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
+			</DropdownMenuPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </DropdownMenuPrimitive.RadioItem>
+	</DropdownMenuPrimitive.RadioItem>
-))
+));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
+	<DropdownMenuPrimitive.Label
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-      "px-2 py-1.5 text-sm font-semibold",
+		{...props}
-      inset && "pl-8",
+	/>
-      className
+));
-    )}
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
    {...props}
  />
 ))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
+	<DropdownMenuPrimitive.Separator
-    ref={ref}
+		ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
+	return (
-    <span
+		<span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-}
+};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 export {
-  DropdownMenu,
+	DropdownMenu,
-  DropdownMenuTrigger,
+	DropdownMenuTrigger,
-  DropdownMenuContent,
+	DropdownMenuContent,
-  DropdownMenuItem,
+	DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+	DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+	DropdownMenuRadioItem,
-  DropdownMenuLabel,
+	DropdownMenuLabel,
-  DropdownMenuSeparator,
+	DropdownMenuSeparator,
-  DropdownMenuShortcut,
+	DropdownMenuShortcut,
-  DropdownMenuGroup,
+	DropdownMenuGroup,
-  DropdownMenuPortal,
+	DropdownMenuPortal,
-  DropdownMenuSub,
+	DropdownMenuSub,
-  DropdownMenuSubContent,
+	DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
+	DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+	DropdownMenuRadioGroup,
-}
+};
--- a/src/components/ui/flip-words.tsx
+++ b/src/components/ui/flip-words.tsx
@@ -1,13 +1,13 @@
 "use client";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, LayoutGroup } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 export const FlipWords = ({
-														words,
+	words,
-														duration = 3000,
+	duration = 3000,
-														className,
+	className,
-													}: {
+}: {
 	words: string[];
 	duration?: number;
 	className?: string;
@@ -60,7 +60,7 @@ export const FlipWords = ({
 				}}
 				className={cn(
 					"z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
-					className
+					className,
 				)}
 				key={currentWord}
 			>
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,176 +1,173 @@
-import * as React from "react"
+import type * as LabelPrimitive from "@radix-ui/react-label";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot";
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
 import {
-  Controller,
+	Controller,
-  ControllerProps,
+	type ControllerProps,
-  FieldPath,
+	type FieldPath,
-  FieldValues,
+	type FieldValues,
-  FormProvider,
+	FormProvider,
-  useFormContext,
+	useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
-import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label";
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
-const Form = FormProvider
+const Form = FormProvider;
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
+	TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
+	name: TName;
-}
+};
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+	{} as FormFieldContextValue,
-)
+);
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
+	TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
+	return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
+		<FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
+			<Controller {...props} />
-    </FormFieldContext.Provider>
+		</FormFieldContext.Provider>
-  )
+	);
-}
+};
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
+	const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext)
+	const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext()
+	const { getFieldState, formState } = useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
+	if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+		throw new Error("useFormField should be used within <FormField>");
-  }
+	}
-  const { id } = itemContext
+	const { id } = itemContext;
-  return {
+	return {
-    id,
+		id,
-    name: fieldContext.name,
+		name: fieldContext.name,
-    formItemId: `${id}-form-item`,
+		formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
+		formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
+		formMessageId: `${id}-form-item-message`,
-    ...fieldState,
+		...fieldState,
-  }
+	};
-}
+};
 type FormItemContextValue = {
-  id: string
+	id: string;
-}
+};
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+	{} as FormItemContextValue,
-)
+);
-const FormItem = React.forwardRef<
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+	({ className, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement>
+		const id = React.useId();
 >(({ className, ...props }, ref) => {
  const id = React.useId()
-  return (
+		return (
-    <FormItemContext.Provider value={{ id }}>
+			<FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+				<div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
+			</FormItemContext.Provider>
-  )
+		);
-})
+	},
-FormItem.displayName = "FormItem"
+);
 FormItem.displayName = "FormItem";
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+	const { error, formItemId } = useFormField();
-  return (
+	return (
-    <Label
+		<Label
-      ref={ref}
+			ref={ref}
-      className={cn(error && "text-destructive", className)}
+			className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
+			htmlFor={formItemId}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-})
+});
-FormLabel.displayName = "FormLabel"
+FormLabel.displayName = "FormLabel";
 const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
+	React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return (
+	return (
-    <Slot
+		<Slot
-      ref={ref}
+			ref={ref}
-      id={formItemId}
+			id={formItemId}
-      aria-describedby={
+			aria-describedby={
-        !error
+				!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-          ? `${formDescriptionId}`
+			}
-          : `${formDescriptionId} ${formMessageId}`
+			aria-invalid={!!error}
-      }
+			{...props}
-      aria-invalid={!!error}
+		/>
-      {...props}
+	);
-    />
+});
-  )
+FormControl.displayName = "FormControl";
 })
 FormControl.displayName = "FormControl"
 const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+	const { formDescriptionId } = useFormField();
-  return (
+	return (
-    <p
+		<p
-      ref={ref}
+			ref={ref}
-      id={formDescriptionId}
+			id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+			className={cn("text-sm text-muted-foreground", className)}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-})
+});
-FormDescription.displayName = "FormDescription"
+FormDescription.displayName = "FormDescription";
 const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
+	HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
+	const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children
+	const body = error ? String(error?.message) : children;
-  if (!body) {
+	if (!body) {
-    return null
+		return null;
-  }
+	}
-  return (
+	return (
-    <p
+		<p
-      ref={ref}
+			ref={ref}
-      id={formMessageId}
+			id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+			className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
+			{...props}
-    >
+		>
-      {body}
+			{body}
-    </p>
+		</p>
-  )
+	);
-})
+});
-FormMessage.displayName = "FormMessage"
+FormMessage.displayName = "FormMessage";
 export {
-  useFormField,
+	useFormField,
-  Form,
+	Form,
-  FormItem,
+	FormItem,
-  FormLabel,
+	FormLabel,
-  FormControl,
+	FormControl,
-  FormDescription,
+	FormDescription,
-  FormMessage,
+	FormMessage,
-  FormField,
+	FormField,
-}
+};
--- a/src/components/ui/hero-parallax.tsx
+++ b/src/components/ui/hero-parallax.tsx
@@ -1,18 +1,18 @@
 "use client";
 import React from "react";
 import {
 	type MotionValue,
 	motion,
 	useScroll,
 	useTransform,
 	useSpring,
-	MotionValue,
+	useTransform,
 } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 interface HeroParallaxProps {
 	products: product[];
-	children?: React.ReactNode
+	children?: React.ReactNode;
 }
 interface product {
@@ -21,7 +21,7 @@ interface product {
 	thumbnail: string;
 }
-export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
+export const HeroParallax = ({ products, children }: HeroParallaxProps) => {
 	const firstRow = products.slice(0, 5);
 	const secondRow = products.slice(5, 10);
 	const thirdRow = products.slice(10, 15);
@@ -35,27 +35,27 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 	const translateX = useSpring(
 		useTransform(scrollYProgress, [0, 1], [0, 1000]),
-		springConfig
+		springConfig,
 	);
 	const translateXReverse = useSpring(
 		useTransform(scrollYProgress, [0, 1], [0, -1000]),
-		springConfig
+		springConfig,
 	);
 	const rotateX = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [15, 0]),
-		springConfig
+		springConfig,
 	);
 	const opacity = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [0.2, 1]),
-		springConfig
+		springConfig,
 	);
 	const rotateZ = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [20, 0]),
-		springConfig
+		springConfig,
 	);
 	const translateY = useSpring(
 		useTransform(scrollYProgress, [0, 0.2], [-700, 500]),
-		springConfig
+		springConfig,
 	);
 	return (
 		<div
@@ -74,11 +74,7 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 			>
 				<motion.div className="flex flex-row-reverse space-x-reverse space-x-20 mb-20">
 					{firstRow.map((product) => (
-						<ProductCard
+						<ProductCard product={product} translate={translateX} key={product.title} />
 							product={product}
 							translate={translateX}
 							key={product.title}
 						/>
 					))}
 				</motion.div>
 				<motion.div className="flex flex-row  mb-20 space-x-20 ">
@@ -92,11 +88,7 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 				</motion.div>
 				<motion.div className="flex flex-row-reverse space-x-reverse space-x-20">
 					{thirdRow.map((product) => (
-						<ProductCard
+						<ProductCard product={product} translate={translateX} key={product.title} />
 							product={product}
 							translate={translateX}
 							key={product.title}
 						/>
 					))}
 				</motion.div>
 			</motion.div>
@@ -105,9 +97,9 @@ export const HeroParallax = ({ products, children }: HeroParallaxProps ) => {
 };
 export const ProductCard = ({
-															product,
+	product,
-															translate,
+	translate,
-														}: {
+}: {
 	product: {
 		title: string;
 		link: string;
@@ -126,10 +118,7 @@ export const ProductCard = ({
 			key={product.title}
 			className="group/product h-96 w-[30rem] relative flex-shrink-0"
 		>
-			<Link
+			<Link href={product.link} className="block group-hover/product:shadow-2xl ">
 				href={product.link}
 				className="block group-hover/product:shadow-2xl "
 			>
 				<Image
 					src={product.thumbnail}
 					height="600"
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
+	<HoverCardPrimitive.Content
-    ref={ref}
+		ref={ref}
-    align={align}
+		align={align}
-    sideOffset={sideOffset}
+		sideOffset={sideOffset}
-    className={cn(
+		className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,71 +1,71 @@
-"use client"
+"use client";
-import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp";
-import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react";
-import { Dot } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
+	React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+	React.ComponentPropsWithoutRef<typeof OTPInput>
 >(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
+	<OTPInput
-    ref={ref}
+		ref={ref}
-    containerClassName={cn(
+		containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
+			"flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
+			containerClassName,
-    )}
+		)}
-    className={cn("disabled:cursor-not-allowed", className)}
+		className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-InputOTP.displayName = "InputOTP"
+InputOTP.displayName = "InputOTP";
 const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
+	React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+	React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+	<div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
+));
-InputOTPGroup.displayName = "InputOTPGroup"
+InputOTPGroup.displayName = "InputOTPGroup";
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
+	React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
+	React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
+	const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return (
+	return (
-    <div
+		<div
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+				"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+				isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      {char}
+			{char}
-      {hasFakeCaret && (
+			{hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+					<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
+				</div>
-      )}
+			)}
-    </div>
+		</div>
-  )
+	);
-})
+});
-InputOTPSlot.displayName = "InputOTPSlot"
+InputOTPSlot.displayName = "InputOTPSlot";
 const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
+	React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+	React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
+	<div ref={ref} role="separator" {...props}>
-    <Dot />
+		<Dot />
-  </div>
+	</div>
-))
+));
-InputOTPSeparator.displayName = "InputOTPSeparator"
+InputOTPSeparator.displayName = "InputOTPSeparator";
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,25 +1,24 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-export interface InputProps
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
  extends React.InputHTMLAttributes<HTMLInputElement> {}
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+	({ className, type, ...props }, ref) => {
-    return (
+		return (
-      <input
+			<input
-        type={type}
+				type={type}
-        className={cn(
+				className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+					className,
-        )}
+				)}
-        ref={ref}
+				ref={ref}
-        {...props}
+				{...props}
-      />
+			/>
-    )
+		);
-  }
+	},
-)
+);
-Input.displayName = "Input"
+Input.displayName = "Input";
-export { Input }
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,26 +1,22 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-)
+);
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+		VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-    ref={ref}
+));
-    className={cn(labelVariants(), className)}
+Label.displayName = LabelPrimitive.Root.displayName;
    {...props}
  />
 ))
 Label.displayName = LabelPrimitive.Root.displayName
-export { Label }
+export { Label };
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,236 +1,224 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const MenubarMenu = MenubarPrimitive.Menu
+const MenubarMenu = MenubarPrimitive.Menu;
-const MenubarGroup = MenubarPrimitive.Group
+const MenubarGroup = MenubarPrimitive.Group;
-const MenubarPortal = MenubarPrimitive.Portal
+const MenubarPortal = MenubarPrimitive.Portal;
-const MenubarSub = MenubarPrimitive.Sub
+const MenubarSub = MenubarPrimitive.Sub;
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
+	React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
+	<MenubarPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+			"flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-Menubar.displayName = MenubarPrimitive.Root.displayName
+Menubar.displayName = MenubarPrimitive.Root.displayName;
 const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+	React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
+	<MenubarPrimitive.Trigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
+	<MenubarPrimitive.SubTrigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}
+		{children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+		<ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
+	</MenubarPrimitive.SubTrigger>
-))
+));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+	React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
+	<MenubarPrimitive.SubContent
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
+	React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  (
+	<MenubarPrimitive.Portal>
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+		<MenubarPrimitive.Content
-    ref
+			ref={ref}
-  ) => (
+			align={align}
-    <MenubarPrimitive.Portal>
+			alignOffset={alignOffset}
-      <MenubarPrimitive.Content
+			sideOffset={sideOffset}
-        ref={ref}
+			className={cn(
-        align={align}
+				"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        alignOffset={alignOffset}
+				className,
-        sideOffset={sideOffset}
+			)}
-        className={cn(
+			{...props}
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+		/>
-          className
+	</MenubarPrimitive.Portal>
-        )}
+));
-        {...props}
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
      />
    </MenubarPrimitive.Portal>
  )
 )
 MenubarContent.displayName = MenubarPrimitive.Content.displayName
 const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
+	React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
+	<MenubarPrimitive.Item
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+			inset && "pl-8",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
+	<MenubarPrimitive.CheckboxItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    checked={checked}
+		checked={checked}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
+			<MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+				<Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
+			</MenubarPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </MenubarPrimitive.CheckboxItem>
+	</MenubarPrimitive.CheckboxItem>
-))
+));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
+	<MenubarPrimitive.RadioItem
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
+			<MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+				<Circle className="h-2 w-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
+			</MenubarPrimitive.ItemIndicator>
-    </span>
+		</span>
-    {children}
+		{children}
-  </MenubarPrimitive.RadioItem>
+	</MenubarPrimitive.RadioItem>
-))
+));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
+	React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
-  }
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
+	<MenubarPrimitive.Label
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-      "px-2 py-1.5 text-sm font-semibold",
+		{...props}
-      inset && "pl-8",
+	/>
-      className
+));
-    )}
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
    {...props}
  />
 ))
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName
 const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
+	React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
+	<MenubarPrimitive.Separator
-    ref={ref}
+		ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 const MenubarShortcut = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
+	return (
-    <span
+		<span
-      className={cn(
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+			{...props}
-        className
+		/>
-      )}
+	);
-      {...props}
+};
-    />
+MenubarShortcut.displayname = "MenubarShortcut";
  )
 }
 MenubarShortcut.displayname = "MenubarShortcut"
 export {
-  Menubar,
+	Menubar,
-  MenubarMenu,
+	MenubarMenu,
-  MenubarTrigger,
+	MenubarTrigger,
-  MenubarContent,
+	MenubarContent,
-  MenubarItem,
+	MenubarItem,
-  MenubarSeparator,
+	MenubarSeparator,
-  MenubarLabel,
+	MenubarLabel,
-  MenubarCheckboxItem,
+	MenubarCheckboxItem,
-  MenubarRadioGroup,
+	MenubarRadioGroup,
-  MenubarRadioItem,
+	MenubarRadioItem,
-  MenubarPortal,
+	MenubarPortal,
-  MenubarSubContent,
+	MenubarSubContent,
-  MenubarSubTrigger,
+	MenubarSubTrigger,
-  MenubarGroup,
+	MenubarGroup,
-  MenubarSub,
+	MenubarSub,
-  MenubarShortcut,
+	MenubarShortcut,
-}
+};
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,128 +1,126 @@
-import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority";
-import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react";
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
+	<NavigationMenuPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+			"relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}
+		{children}
-    <NavigationMenuViewport />
+		<NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
+	</NavigationMenuPrimitive.Root>
-))
+));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
+	<NavigationMenuPrimitive.List
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
+			"group flex flex-1 list-none items-center justify-center space-x-1",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+	"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
-)
+);
 const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
+	<NavigationMenuPrimitive.Trigger
-    ref={ref}
+		ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}{" "}
+		{children}{" "}
-    <ChevronDown
+		<ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+			className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
+			aria-hidden="true"
-    />
+		/>
-  </NavigationMenuPrimitive.Trigger>
+	</NavigationMenuPrimitive.Trigger>
-))
+));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
+	<NavigationMenuPrimitive.Content
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "md:left-0 md:top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+			"md:left-0 md:top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute md:left-0 top-full flex justify-center")}>
+	<div className={cn("absolute md:left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
+		<NavigationMenuPrimitive.Viewport
-      className={cn(
+			className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-screen md:w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-screen md:w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
+				className,
-      )}
+			)}
-      ref={ref}
+			ref={ref}
-      {...props}
+			{...props}
-    />
+		/>
-  </div>
+	</div>
-))
+));
-NavigationMenuViewport.displayName =
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
  NavigationMenuPrimitive.Viewport.displayName
 const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
+	<NavigationMenuPrimitive.Indicator
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
+	</NavigationMenuPrimitive.Indicator>
-))
+));
-NavigationMenuIndicator.displayName =
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
  NavigationMenuPrimitive.Indicator.displayName
 export {
-  navigationMenuTriggerStyle,
+	navigationMenuTriggerStyle,
-  NavigationMenu,
+	NavigationMenu,
-  NavigationMenuList,
+	NavigationMenuList,
-  NavigationMenuItem,
+	NavigationMenuItem,
-  NavigationMenuContent,
+	NavigationMenuContent,
-  NavigationMenuTrigger,
+	NavigationMenuTrigger,
-  NavigationMenuLink,
+	NavigationMenuLink,
-  NavigationMenuIndicator,
+	NavigationMenuIndicator,
-  NavigationMenuViewport,
+	NavigationMenuViewport,
-}
+};
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,117 +1,112 @@
-import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { type ButtonProps, buttonVariants } from "@/components/ui/button";
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
+	<nav
-    role="navigation"
+		role="navigation"
-    aria-label="pagination"
+		aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+		className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
+		{...props}
-  />
+	/>
-)
+);
-Pagination.displayName = "Pagination"
+Pagination.displayName = "Pagination";
-const PaginationContent = React.forwardRef<
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  HTMLUListElement,
+	({ className, ...props }, ref) => (
-  React.ComponentProps<"ul">
+		<ul
->(({ className, ...props }, ref) => (
+			ref={ref}
-  <ul
+			className={cn("flex flex-row items-center gap-1", className)}
-    ref={ref}
+			{...props}
-    className={cn("flex flex-row items-center gap-1", className)}
+		/>
-    {...props}
+	),
-  />
+);
-))
+PaginationContent.displayName = "PaginationContent";
 PaginationContent.displayName = "PaginationContent"
-const PaginationItem = React.forwardRef<
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  HTMLLIElement,
+	({ className, ...props }, ref) => (
-  React.ComponentProps<"li">
+		<li ref={ref} className={cn("", className)} {...props} />
->(({ className, ...props }, ref) => (
+	),
-  <li ref={ref} className={cn("", className)} {...props} />
+);
-))
+PaginationItem.displayName = "PaginationItem";
 PaginationItem.displayName = "PaginationItem"
 type PaginationLinkProps = {
-  isActive?: boolean
+	isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+	React.ComponentProps<"a">;
 const PaginationLink = ({
-  className,
+	className,
-  isActive,
+	isActive,
-  size = "icon",
+	size = "icon",
-  ...props
+	...props
 }: PaginationLinkProps) => (
-  <a
+	<a
-    aria-current={isActive ? "page" : undefined}
+		aria-current={isActive ? "page" : undefined}
-    className={cn(
+		className={cn(
-      buttonVariants({
+			buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+				variant: isActive ? "outline" : "ghost",
-        size,
+				size,
-      }),
+			}),
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-)
+);
-PaginationLink.displayName = "PaginationLink"
+PaginationLink.displayName = "PaginationLink";
 const PaginationPrevious = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
+	<PaginationLink
-    aria-label="Go to previous page"
+		aria-label="Go to previous page"
-    size="default"
+		size="default"
-    className={cn("gap-1 pl-2.5", className)}
+		className={cn("gap-1 pl-2.5", className)}
-    {...props}
+		{...props}
-  >
+	>
-    <ChevronLeft className="h-4 w-4" />
+		<ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
+		<span>Previous</span>
-  </PaginationLink>
+	</PaginationLink>
-)
+);
-PaginationPrevious.displayName = "PaginationPrevious"
+PaginationPrevious.displayName = "PaginationPrevious";
 const PaginationNext = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
+	<PaginationLink
-    aria-label="Go to next page"
+		aria-label="Go to next page"
-    size="default"
+		size="default"
-    className={cn("gap-1 pr-2.5", className)}
+		className={cn("gap-1 pr-2.5", className)}
-    {...props}
+		{...props}
-  >
+	>
-    <span>Next</span>
+		<span>Next</span>
-    <ChevronRight className="h-4 w-4" />
+		<ChevronRight className="h-4 w-4" />
-  </PaginationLink>
+	</PaginationLink>
-)
+);
-PaginationNext.displayName = "PaginationNext"
+PaginationNext.displayName = "PaginationNext";
-const PaginationEllipsis = ({
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  className,
+	<span
-  ...props
+		aria-hidden
-}: React.ComponentProps<"span">) => (
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
-  <span
+		{...props}
-    aria-hidden
+	>
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+		<MoreHorizontal className="h-4 w-4" />
-    {...props}
+		<span className="sr-only">More pages</span>
-  >
+	</span>
-    <MoreHorizontal className="h-4 w-4" />
+);
-    <span className="sr-only">More pages</span>
+PaginationEllipsis.displayName = "PaginationEllipsis";
  </span>
 )
 PaginationEllipsis.displayName = "PaginationEllipsis"
 export {
-  Pagination,
+	Pagination,
-  PaginationContent,
+	PaginationContent,
-  PaginationEllipsis,
+	PaginationEllipsis,
-  PaginationItem,
+	PaginationItem,
-  PaginationLink,
+	PaginationLink,
-  PaginationNext,
+	PaginationNext,
-  PaginationPrevious,
+	PaginationPrevious,
-}
+};
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+	<PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
+		<PopoverPrimitive.Content
-      ref={ref}
+			ref={ref}
-      align={align}
+			align={align}
-      sideOffset={sideOffset}
+			sideOffset={sideOffset}
-      className={cn(
+			className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  </PopoverPrimitive.Portal>
+	</PopoverPrimitive.Portal>
-))
+));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,28 +1,28 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
+	<ProgressPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+			"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <ProgressPrimitive.Indicator
+		<ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+			className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
+		/>
-  </ProgressPrimitive.Root>
+	</ProgressPrimitive.Root>
-))
+));
-Progress.displayName = ProgressPrimitive.Root.displayName
+Progress.displayName = ProgressPrimitive.Root.displayName;
-export { Progress }
+export { Progress };
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,44 +1,44 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react";
-import { Circle } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
+	return (
-    <RadioGroupPrimitive.Root
+		<RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+			className={cn("grid gap-2", className)}
-      {...props}
+			{...props}
-      ref={ref}
+			ref={ref}
-    />
+		/>
-  )
+	);
-})
+});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
-  return (
+	return (
-    <RadioGroupPrimitive.Item
+		<RadioGroupPrimitive.Item
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+				<Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
+			</RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
+		</RadioGroupPrimitive.Item>
-  )
+	);
-})
+});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,45 +1,45 @@
-"use client"
+"use client";
-import { GripVertical } from "lucide-react"
+import { GripVertical } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as ResizablePrimitive from "react-resizable-panels";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const ResizablePanelGroup = ({
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+	<ResizablePrimitive.PanelGroup
-    className={cn(
+		className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+			"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-)
+);
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 const ResizableHandle = ({
-  withHandle,
+	withHandle,
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+	withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+	<ResizablePrimitive.PanelResizeHandle
-    className={cn(
+		className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {withHandle && (
+		{withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+			<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
+				<GripVertical className="h-2.5 w-2.5" />
-      </div>
+			</div>
-    )}
+		)}
-  </ResizablePrimitive.PanelResizeHandle>
+	</ResizablePrimitive.PanelResizeHandle>
-)
+);
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,48 +1,47 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
+	<ScrollAreaPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn("relative overflow-hidden", className)}
+		className={cn("relative overflow-hidden", className)}
-    {...props}
+		{...props}
-  >
+	>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
+			{children}
-    </ScrollAreaPrimitive.Viewport>
+		</ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+		<ScrollBar />
-    <ScrollAreaPrimitive.Corner />
+		<ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
+	</ScrollAreaPrimitive.Root>
-))
+));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
+		ref={ref}
-    orientation={orientation}
+		orientation={orientation}
-    className={cn(
+		className={cn(
-      "flex touch-none select-none transition-colors",
+			"flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
+			orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
-      orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
-      className
+		)}
-    )}
+		{...props}
-    {...props}
+	>
-  >
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
-))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,160 +1,153 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select";
-import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
+	<SelectPrimitive.Trigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    {children}
+		{children}
-    <SelectPrimitive.Icon asChild>
+		<SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+			<ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
+		</SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
+	</SelectPrimitive.Trigger>
-))
+));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
+	<SelectPrimitive.ScrollUpButton
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
-      "flex cursor-default items-center justify-center py-1",
+		{...props}
-      className
+	>
-    )}
+		<ChevronUp className="h-4 w-4" />
-    {...props}
+	</SelectPrimitive.ScrollUpButton>
-  >
+));
-    <ChevronUp className="h-4 w-4" />
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
  </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
+	<SelectPrimitive.ScrollDownButton
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
-      "flex cursor-default items-center justify-center py-1",
+		{...props}
-      className
+	>
-    )}
+		<ChevronDown className="h-4 w-4" />
-    {...props}
+	</SelectPrimitive.ScrollDownButton>
-  >
+));
-    <ChevronDown className="h-4 w-4" />
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
  </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
+	<SelectPrimitive.Portal>
-    <SelectPrimitive.Content
+		<SelectPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
-        position === "popper" &&
+				position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+				className,
-      )}
+			)}
-      position={position}
+			position={position}
-      {...props}
+			{...props}
-    >
+		>
-      <SelectScrollUpButton />
+			<SelectScrollUpButton />
-      <SelectPrimitive.Viewport
+			<SelectPrimitive.Viewport
-        className={cn(
+				className={cn(
-          "p-1",
+					"p-1",
-          position === "popper" &&
+					position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
+				)}
-      >
+			>
-        {children}
+				{children}
-      </SelectPrimitive.Viewport>
+			</SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
+			<SelectScrollDownButton />
-    </SelectPrimitive.Content>
+		</SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
+	</SelectPrimitive.Portal>
-))
+));
-SelectContent.displayName = SelectPrimitive.Content.displayName
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
+	<SelectPrimitive.Label
-    ref={ref}
+		ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
+	<SelectPrimitive.Item
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  >
+	>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
+			<SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+				<Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
+			</SelectPrimitive.ItemIndicator>
-    </span>
+		</span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
+	</SelectPrimitive.Item>
-))
+));
-SelectItem.displayName = SelectPrimitive.Item.displayName
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
+	<SelectPrimitive.Separator
-    ref={ref}
+		ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 export {
-  Select,
+	Select,
-  SelectGroup,
+	SelectGroup,
-  SelectValue,
+	SelectValue,
-  SelectTrigger,
+	SelectTrigger,
-  SelectContent,
+	SelectContent,
-  SelectLabel,
+	SelectLabel,
-  SelectItem,
+	SelectItem,
-  SelectSeparator,
+	SelectSeparator,
-  SelectScrollUpButton,
+	SelectScrollUpButton,
-  SelectScrollDownButton,
+	SelectScrollDownButton,
-}
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,31 +1,26 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-  (
+	<SeparatorPrimitive.Root
-    { className, orientation = "horizontal", decorative = true, ...props },
+		ref={ref}
-    ref
+		decorative={decorative}
-  ) => (
+		orientation={orientation}
-    <SeparatorPrimitive.Root
+		className={cn(
-      ref={ref}
+			"shrink-0 bg-border",
-      decorative={decorative}
+			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      orientation={orientation}
+			className,
-      className={cn(
+		)}
-        "shrink-0 bg-border",
+		{...props}
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+	/>
-        className
+));
-      )}
+Separator.displayName = SeparatorPrimitive.Root.displayName;
      {...props}
    />
  )
 )
 Separator.displayName = SeparatorPrimitive.Root.displayName
-export { Separator }
+export { Separator };
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,140 +1,131 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react";
-import { X } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
+	<SheetPrimitive.Overlay
-    className={cn(
+		className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-    ref={ref}
+		ref={ref}
-  />
+	/>
-))
+));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
+	{
-    variants: {
+		variants: {
-      side: {
+			side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
+				bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
+				right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+					"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
+			},
-    },
+		},
-    defaultVariants: {
+		defaultVariants: {
-      side: "right",
+			side: "right",
-    },
+		},
-  }
+	},
-)
+);
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+		VariantProps<typeof sheetVariants> {}
 const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
+	React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+	SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
+	<SheetPortal>
-    <SheetOverlay />
+		<SheetOverlay />
-    <SheetPrimitive.Content
+		<SheetPrimitive.Content
-      ref={ref}
+			ref={ref}
-      className={cn(sheetVariants({ side }), className)}
+			className={cn(sheetVariants({ side }), className)}
-      {...props}
+			{...props}
-    >
+		>
-      {children}
+			{children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+				<X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+				<span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
+			</SheetPrimitive.Close>
-    </SheetPrimitive.Content>
+		</SheetPrimitive.Content>
-  </SheetPortal>
+	</SheetPortal>
-))
+));
-SheetContent.displayName = SheetPrimitive.Content.displayName
+SheetContent.displayName = SheetPrimitive.Content.displayName;
-const SheetHeader = ({
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div
-  ...props
+		className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-}: React.HTMLAttributes<HTMLDivElement>) => (
+		{...props}
-  <div
+	/>
-    className={cn(
+);
-      "flex flex-col space-y-2 text-center sm:text-left",
+SheetHeader.displayName = "SheetHeader";
      className
    )}
    {...props}
  />
 )
 SheetHeader.displayName = "SheetHeader"
-const SheetFooter = ({
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  className,
+	<div
-  ...props
+		className={cn(
-}: React.HTMLAttributes<HTMLDivElement>) => (
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-  <div
+			className,
-    className={cn(
+		)}
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		{...props}
-      className
+	/>
-    )}
+);
-    {...props}
+SheetFooter.displayName = "SheetFooter";
  />
 )
 SheetFooter.displayName = "SheetFooter"
 const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
+	<SheetPrimitive.Title
-    ref={ref}
+		ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+		className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
+	<SheetPrimitive.Description
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+		className={cn("text-sm text-muted-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 export {
-  Sheet,
+	Sheet,
-  SheetPortal,
+	SheetPortal,
-  SheetOverlay,
+	SheetOverlay,
-  SheetTrigger,
+	SheetTrigger,
-  SheetClose,
+	SheetClose,
-  SheetContent,
+	SheetContent,
-  SheetHeader,
+	SheetHeader,
-  SheetFooter,
+	SheetFooter,
-  SheetTitle,
+	SheetTitle,
-  SheetDescription,
+	SheetDescription,
-}
+};
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,15 +1,9 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-function Skeleton({
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  className,
+	return (
-  ...props
+		<div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
-}: React.HTMLAttributes<HTMLDivElement>) {
+	);
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
 }
-export { Skeleton }
+export { Skeleton };
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,28 +1,25 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
+	<SliderPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("relative flex w-full touch-none select-none items-center", className)}
-      "relative flex w-full touch-none select-none items-center",
+		{...props}
-      className
+	>
-    )}
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-    {...props}
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
-  >
+		</SliderPrimitive.Track>
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+	</SliderPrimitive.Root>
-    </SliderPrimitive.Track>
+));
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+Slider.displayName = SliderPrimitive.Root.displayName;
  </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
-export { Slider }
+export { Slider };
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,31 +1,30 @@
-"use client"
+"use client";
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner } from "sonner";
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+	const { theme = "system" } = useTheme();
-  return (
+	return (
-    <Sonner
+		<Sonner
-      theme={theme as ToasterProps["theme"]}
+			theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+			className="toaster group"
-      toastOptions={{
+			toastOptions={{
-        classNames: {
+				classNames: {
-          toast:
+					toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+					description: "group-[.toast]:text-muted-foreground",
-          actionButton:
+					actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
+					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
-        },
+			}}
-      }}
+			{...props}
-      {...props}
+		/>
-    />
+	);
-  )
+};
 }
-export { Toaster }
+export { Toaster };
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
+	<SwitchPrimitives.Root
-    className={cn(
+		className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-    ref={ref}
+		ref={ref}
-  >
+	>
-    <SwitchPrimitives.Thumb
+		<SwitchPrimitives.Thumb
-      className={cn(
+			className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
+			)}
-    />
+		/>
-  </SwitchPrimitives.Root>
+	</SwitchPrimitives.Root>
-))
+));
-Switch.displayName = SwitchPrimitives.Root.displayName
+Switch.displayName = SwitchPrimitives.Root.displayName;
-export { Switch }
+export { Switch };
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,117 +1,109 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Table = React.forwardRef<
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  HTMLTableElement,
+	({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLTableElement>
+		<div className="relative w-full overflow-auto">
->(({ className, ...props }, ref) => (
+			<table
-  <div className="relative w-full overflow-auto">
+				ref={ref}
-    <table
+				className={cn("w-full caption-bottom text-sm", className)}
-      ref={ref}
+				{...props}
-      className={cn("w-full caption-bottom text-sm", className)}
+			/>
-      {...props}
+		</div>
-    />
+	),
-  </div>
+);
-))
+Table.displayName = "Table";
 Table.displayName = "Table"
 const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
+	HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
+));
-TableHeader.displayName = "TableHeader"
+TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
+	HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
+	<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-    ref={ref}
+));
-    className={cn("[&_tr:last-child]:border-0", className)}
+TableBody.displayName = "TableBody";
    {...props}
  />
 ))
 TableBody.displayName = "TableBody"
 const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
+	HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot
+	<tfoot
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+		{...props}
-      className
+	/>
-    )}
+));
-    {...props}
+TableFooter.displayName = "TableFooter";
  />
 ))
 TableFooter.displayName = "TableFooter"
 const TableRow = React.forwardRef<
-  HTMLTableRowElement,
+	HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
+	React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
+	<tr
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TableRow.displayName = "TableRow"
+TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef<
-  HTMLTableCellElement,
+	HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+	React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th
+	<th
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TableHead.displayName = "TableHead"
+TableHead.displayName = "TableHead";
 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
+	HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+	React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
+	<td
-    ref={ref}
+		ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TableCell.displayName = "TableCell"
+TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
+	HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+	React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
+	<caption
-    ref={ref}
+		ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+		className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TableCaption.displayName = "TableCaption"
+TableCaption.displayName = "TableCaption";
 export {
-  Table,
+	Table,
-  TableHeader,
+	TableHeader,
-  TableBody,
+	TableBody,
-  TableFooter,
+	TableFooter,
-  TableHead,
+	TableHead,
-  TableRow,
+	TableRow,
-  TableCell,
+	TableCell,
-  TableCaption,
+	TableCaption,
-}
+};
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,55 +1,55 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
+	React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
+	<TabsPrimitive.List
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TabsList.displayName = TabsPrimitive.List.displayName
+TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
+	<TabsPrimitive.Trigger
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
+	<TabsPrimitive.Content
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TabsContent.displayName = TabsPrimitive.Content.displayName
+TabsContent.displayName = TabsPrimitive.Content.displayName;
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,24 +1,24 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+	({ className, ...props }, ref) => {
-    return (
+		return (
-      <textarea
+			<textarea
-        className={cn(
+				className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+					className,
-        )}
+				)}
-        ref={ref}
+				ref={ref}
-        {...props}
+				{...props}
-      />
+			/>
-    )
+		);
-  }
+	},
-)
+);
-Textarea.displayName = "Textarea"
+Textarea.displayName = "Textarea";
-export { Textarea }
+export { Textarea };
--- a/src/components/ui/toast-box.tsx
+++ b/src/components/ui/toast-box.tsx
@@ -1,63 +1,77 @@
-import {Bug, CircleAlert, CircleCheckBig, CircleHelp, MessageSquareText, Minus, OctagonX, Plus} from "lucide-react";
+import {
 	Bug,
 	CircleAlert,
 	CircleCheckBig,
 	CircleHelp,
 	MessageSquareText,
 	Minus,
 	OctagonX,
 	Plus,
 } from "lucide-react";
 import React from "react";
 export enum toastType {
 	info = "info",
 	warn = "warn",
 	error = "error",
-	refused= "refused",
+	refused = "refused",
 	success = "success",
 	add = "add",
 	del = "del",
-	message = "message"
+	message = "message",
 }
-export function ToastBox({title, message, type}: {title?: string, message: string, type: toastType}) {
+export function ToastBox({
 	title,
 	message,
 	type,
 }: { title?: string; message: string; type: toastType }) {
 	let icon: any;
 	let bgColor: string;
 	switch (type) {
-		case toastType.message :
+		case toastType.message:
-			icon = <MessageSquareText />
+			icon = <MessageSquareText />;
-			bgColor = 'bg-accent'
+			bgColor = "bg-accent";
-			break
+			break;
 		case toastType.add:
-			icon = <Plus />
+			icon = <Plus />;
-			bgColor = 'bg-accent'
+			bgColor = "bg-accent";
-			break
+			break;
 		case toastType.del:
-			icon = <Minus />
+			icon = <Minus />;
-			bgColor = 'bg-accent'
+			bgColor = "bg-accent";
-			break
+			break;
 		case toastType.info:
-			icon = <CircleHelp />
+			icon = <CircleHelp />;
-			bgColor = 'bg-accent'
+			bgColor = "bg-accent";
-			break
+			break;
 		case toastType.warn:
-			icon = <CircleAlert />
+			icon = <CircleAlert />;
-			bgColor = 'bg-orange-500'
+			bgColor = "bg-orange-500";
-			break
+			break;
 		case toastType.error:
-			icon = <Bug />
+			icon = <Bug />;
-			bgColor = 'bg-red-500'
+			bgColor = "bg-red-500";
-			break
+			break;
 		case toastType.success:
-			icon = <CircleCheckBig />
+			icon = <CircleCheckBig />;
-			bgColor = 'bg-green-500'
+			bgColor = "bg-green-500";
-			break
+			break;
 		case toastType.refused:
-			icon = <OctagonX />
+			icon = <OctagonX />;
-			bgColor = 'bg-red-700'
+			bgColor = "bg-red-700";
-			break
+			break;
 	}
 	return (
-		<div className={`flex flex-row items-center gap-2 scale-90 md:scale-100 p-2 rounded border ${bgColor}`}>
+		<div
 			className={`flex flex-row items-center gap-2 scale-90 md:scale-100 p-2 rounded border ${bgColor}`}
 		>
 			{icon}
 			<div className={"flex flex-col justify-center items-start"}>
 				{title && <h3 className={"text-nowrap font-bold text-xl"}>{title}</h3>}
 				<p className={"text-wrap"}>{message}</p>
 			</div>
 		</div>
-	)
+	);
-}
+}
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,129 +1,129 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast";
-import * as ToastPrimitives from "@radix-ui/react-toast"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react";
-import { X } from "lucide-react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
+	<ToastPrimitives.Viewport
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
+	{
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default: "border bg-background text-foreground",
+				default: "border bg-background text-foreground",
-        destructive:
+				destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+					"destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
+			},
-    },
+		},
-    defaultVariants: {
+		defaultVariants: {
-      variant: "default",
+			variant: "default",
-    },
+		},
-  }
+	},
-)
+);
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return (
+	return (
-    <ToastPrimitives.Root
+		<ToastPrimitives.Root
-      ref={ref}
+			ref={ref}
-      className={cn(toastVariants({ variant }), className)}
+			className={cn(toastVariants({ variant }), className)}
-      {...props}
+			{...props}
-    />
+		/>
-  )
+	);
-})
+});
-Toast.displayName = ToastPrimitives.Root.displayName
+Toast.displayName = ToastPrimitives.Root.displayName;
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
+	<ToastPrimitives.Action
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ToastAction.displayName = ToastPrimitives.Action.displayName
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
+	<ToastPrimitives.Close
-    ref={ref}
+		ref={ref}
-    className={cn(
+		className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+			className,
-    )}
+		)}
-    toast-close=""
+		toast-close=""
-    {...props}
+		{...props}
-  >
+	>
-    <X className="h-4 w-4" />
+		<X className="h-4 w-4" />
-  </ToastPrimitives.Close>
+	</ToastPrimitives.Close>
-))
+));
-ToastClose.displayName = ToastPrimitives.Close.displayName
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
+	<ToastPrimitives.Title
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm font-semibold", className)}
+		className={cn("text-sm font-semibold", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
+	<ToastPrimitives.Description
-    ref={ref}
+		ref={ref}
-    className={cn("text-sm opacity-90", className)}
+		className={cn("text-sm opacity-90", className)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 export {
-  type ToastProps,
+	type ToastProps,
-  type ToastActionElement,
+	type ToastActionElement,
-  ToastProvider,
+	ToastProvider,
-  ToastViewport,
+	ToastViewport,
-  Toast,
+	Toast,
-  ToastTitle,
+	ToastTitle,
-  ToastDescription,
+	ToastDescription,
-  ToastClose,
+	ToastClose,
-  ToastAction,
+	ToastAction,
-}
+};
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,35 +1,31 @@
-"use client"
+"use client";
 import {
-  Toast,
+	Toast,
-  ToastClose,
+	ToastClose,
-  ToastDescription,
+	ToastDescription,
-  ToastProvider,
+	ToastProvider,
-  ToastTitle,
+	ToastTitle,
-  ToastViewport,
+	ToastViewport,
-} from "@/components/ui/toast"
+} from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/components/ui/use-toast";
 export function Toaster() {
-  const { toasts } = useToast()
+	const { toasts } = useToast();
-  return (
+	return (
-    <ToastProvider>
+		<ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
+			{toasts.map(({ id, title, description, action, ...props }) => (
-        return (
+				<Toast key={id} {...props}>
-          <Toast key={id} {...props}>
+					<div className="grid gap-1">
-            <div className="grid gap-1">
+						{title && <ToastTitle>{title}</ToastTitle>}
-              {title && <ToastTitle>{title}</ToastTitle>}
+						{description && <ToastDescription>{description}</ToastDescription>}
-              {description && (
+					</div>
-                <ToastDescription>{description}</ToastDescription>
+					{action}
-              )}
+					<ToastClose />
-            </div>
+				</Toast>
-            {action}
+			))}
-            <ToastClose />
+			<ToastViewport />
-          </Toast>
+		</ToastProvider>
-        )
+	);
      })}
      <ToastViewport />
    </ToastProvider>
  )
 }
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,61 +1,59 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import type { VariantProps } from "class-variance-authority";
-import { VariantProps } from "class-variance-authority"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle";
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils";
-const ToggleGroupContext = React.createContext<
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  VariantProps<typeof toggleVariants>
+	size: "default",
->({
+	variant: "default",
-  size: "default",
+});
  variant: "default",
 })
 const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
+	<ToggleGroupPrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
+		className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
+		{...props}
-  >
+	>
-    <ToggleGroupContext.Provider value={{ variant, size }}>
+		<ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
+			{children}
-    </ToggleGroupContext.Provider>
+		</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
+	</ToggleGroupPrimitive.Root>
-))
+));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+		VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+	const context = React.useContext(ToggleGroupContext);
-  return (
+	return (
-    <ToggleGroupPrimitive.Item
+		<ToggleGroupPrimitive.Item
-      ref={ref}
+			ref={ref}
-      className={cn(
+			className={cn(
-        toggleVariants({
+				toggleVariants({
-          variant: context.variant || variant,
+					variant: context.variant || variant,
-          size: context.size || size,
+					size: context.size || size,
-        }),
+				}),
-        className
+				className,
-      )}
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      {children}
+			{children}
-    </ToggleGroupPrimitive.Item>
+		</ToggleGroupPrimitive.Item>
-  )
+	);
-})
+});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,45 +1,45 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle";
-import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { type VariantProps, cva } from "class-variance-authority";
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+	"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  {
+	{
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default: "bg-transparent",
+				default: "bg-transparent",
-        outline:
+				outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+					"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
+			},
-      size: {
+			size: {
-        default: "h-10 px-3",
+				default: "h-10 px-3",
-        sm: "h-9 px-2.5",
+				sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+				lg: "h-11 px-5",
-      },
+			},
-    },
+		},
-    defaultVariants: {
+		defaultVariants: {
-      variant: "default",
+			variant: "default",
-      size: "default",
+			size: "default",
-    },
+		},
-  }
+	},
-)
+);
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
+	<TogglePrimitive.Root
-    ref={ref}
+		ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
+		className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,30 +1,30 @@
-"use client"
+"use client";
-import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
+	<TooltipPrimitive.Content
-    ref={ref}
+		ref={ref}
-    sideOffset={sideOffset}
+		sideOffset={sideOffset}
-    className={cn(
+		className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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",
+			"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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
+			className,
-    )}
+		)}
-    {...props}
+		{...props}
-  />
+	/>
-))
+));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/src/components/ui/tracing-beam.tsx
+++ b/src/components/ui/tracing-beam.tsx
@@ -1,128 +0,0 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import {
  motion,
  useTransform,
  useScroll,
  useVelocity,
  useSpring,
 } from "framer-motion";
 import { cn } from "@/lib/utils";
 export const TracingBeam = ({
  children,
  className,
 }: {
  children: React.ReactNode;
  className?: string;
 }) => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const contentRef = useRef<HTMLDivElement>(null);
  const [svgHeight, setSvgHeight] = useState(0);
  useEffect(() => {
    if (contentRef.current) {
      setSvgHeight(contentRef.current.offsetHeight);
    }
  }, []);
  const y1 = useSpring(
    useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]),
    {
      stiffness: 500,
      damping: 90,
    }
  );
  const y2 = useSpring(
    useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]),
    {
      stiffness: 500,
      damping: 90,
    }
  );
  return (
    <motion.div
      ref={ref}
      className={cn("relative w-full max-w-4xl mx-auto h-full", className)}
    >
      <div className="absolute -left-4 md:-left-20 top-3">
        <motion.div
          transition={{
            duration: 0.2,
            delay: 0.5,
          }}
          animate={{
            boxShadow:
              scrollYProgress.get() > 0
                ? "none"
                : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
          }}
          className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"
        >
          <motion.div
            transition={{
              duration: 0.2,
              delay: 0.5,
            }}
            animate={{
              backgroundColor:
                scrollYProgress.get() > 0 ? "white" : "var(--emerald-500)",
              borderColor:
                scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)",
            }}
            className="h-2 w-2  rounded-full border border-neutral-300 bg-white"
          />
        </motion.div>
        <svg
          viewBox={`0 0 20 ${svgHeight}`}
          width="20"
          height={svgHeight} // Set the SVG height
          className=" ml-4 block"
          aria-hidden="true"
        >
          <motion.path
            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
            fill="none"
            stroke="#9091A0"
            strokeOpacity="0.16"
            transition={{
              duration: 10,
            }}
          ></motion.path>
          <motion.path
            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
            fill="none"
            stroke="url(#gradient)"
            strokeWidth="1.25"
            className="motion-reduce:hidden"
            transition={{
              duration: 10,
            }}
          ></motion.path>
          <defs>
            <motion.linearGradient
              id="gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              x2="0"
              y1={y1} // set y1 for gradient
              y2={y2} // set y2 for gradient
            >
              <stop stopColor="#18CCFC" stopOpacity="0"></stop>
              <stop stopColor="#18CCFC"></stop>
              <stop offset="0.325" stopColor="#6344F5"></stop>
              <stop offset="1" stopColor="#AE48FF" stopOpacity="0"></stop>
            </motion.linearGradient>
          </defs>
        </svg>
      </div>
      <div ref={contentRef}>{children}</div>
    </motion.div>
  );
 };
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -1,194 +1,191 @@
-"use client"
+"use client";
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
-import type {
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
  ToastActionElement,
  ToastProps,
 } from "@/components/ui/toast"
-const TOAST_LIMIT = 1
+const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_REMOVE_DELAY = 1000000;
 type ToasterToast = ToastProps & {
-  id: string
+	id: string;
-  title?: React.ReactNode
+	title?: React.ReactNode;
-  description?: React.ReactNode
+	description?: React.ReactNode;
-  action?: ToastActionElement
+	action?: ToastActionElement;
-}
+};
 const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
+	ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
-let count = 0
+let count = 0;
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString()
+	return count.toString();
 }
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 type Action =
-  | {
+	| {
-      type: ActionType["ADD_TOAST"]
+			type: ActionType["ADD_TOAST"];
-      toast: ToasterToast
+			toast: ToasterToast;
-    }
+	  }
-  | {
+	| {
-      type: ActionType["UPDATE_TOAST"]
+			type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>
+			toast: Partial<ToasterToast>;
-    }
+	  }
-  | {
+	| {
-      type: ActionType["DISMISS_TOAST"]
+			type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"]
+			toastId?: ToasterToast["id"];
-    }
+	  }
-  | {
+	| {
-      type: ActionType["REMOVE_TOAST"]
+			type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"]
+			toastId?: ToasterToast["id"];
-    }
+	  };
 interface State {
-  toasts: ToasterToast[]
+	toasts: ToasterToast[];
 }
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
+	if (toastTimeouts.has(toastId)) {
-    return
+		return;
-  }
+	}
-  const timeout = setTimeout(() => {
+	const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+		toastTimeouts.delete(toastId);
-    dispatch({
+		dispatch({
-      type: "REMOVE_TOAST",
+			type: "REMOVE_TOAST",
-      toastId: toastId,
+			toastId: toastId,
-    })
+		});
-  }, TOAST_REMOVE_DELAY)
+	}, TOAST_REMOVE_DELAY);
-  toastTimeouts.set(toastId, timeout)
+	toastTimeouts.set(toastId, timeout);
-}
+};
 export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
+	switch (action.type) {
-    case "ADD_TOAST":
+		case "ADD_TOAST":
-      return {
+			return {
-        ...state,
+				...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+			};
-    case "UPDATE_TOAST":
+		case "UPDATE_TOAST":
-      return {
+			return {
-        ...state,
+				...state,
-        toasts: state.toasts.map((t) =>
+				toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+					t.id === action.toast.id ? { ...t, ...action.toast } : t,
-        ),
+				),
-      }
+			};
-    case "DISMISS_TOAST": {
+		case "DISMISS_TOAST": {
-      const { toastId } = action
+			const { toastId } = action;
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
+			// but I'll keep it here for simplicity
-      if (toastId) {
+			if (toastId) {
-        addToRemoveQueue(toastId)
+				addToRemoveQueue(toastId);
-      } else {
+			} else {
-        state.toasts.forEach((toast) => {
+				state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
+					addToRemoveQueue(toast.id);
-        })
+				});
-      }
+			}
-      return {
+			return {
-        ...state,
+				...state,
-        toasts: state.toasts.map((t) =>
+				toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
+					t.id === toastId || toastId === undefined
-            ? {
+						? {
-                ...t,
+								...t,
-                open: false,
+								open: false,
-              }
+							}
-            : t
+						: t,
-        ),
+				),
-      }
+			};
-    }
+		}
-    case "REMOVE_TOAST":
+		case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
+			if (action.toastId === undefined) {
-        return {
+				return {
-          ...state,
+					...state,
-          toasts: [],
+					toasts: [],
-        }
+				};
-      }
+			}
-      return {
+			return {
-        ...state,
+				...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+			};
-  }
+	}
-}
+};
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+	memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
+	listeners.forEach((listener) => {
-    listener(memoryState)
+		listener(memoryState);
-  })
+	});
 }
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 function toast({ ...props }: Toast) {
-  const id = genId()
+	const id = genId();
-  const update = (props: ToasterToast) =>
+	const update = (props: ToasterToast) =>
-    dispatch({
+		dispatch({
-      type: "UPDATE_TOAST",
+			type: "UPDATE_TOAST",
-      toast: { ...props, id },
+			toast: { ...props, id },
-    })
+		});
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-  dispatch({
+	dispatch({
-    type: "ADD_TOAST",
+		type: "ADD_TOAST",
-    toast: {
+		toast: {
-      ...props,
+			...props,
-      id,
+			id,
-      open: true,
+			open: true,
-      onOpenChange: (open) => {
+			onOpenChange: (open) => {
-        if (!open) dismiss()
+				if (!open) dismiss();
-      },
+			},
-    },
+		},
-  })
+	});
-  return {
+	return {
-    id: id,
+		id: id,
-    dismiss,
+		dismiss,
-    update,
+		update,
-  }
+	};
 }
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+	const [state, setState] = React.useState<State>(memoryState);
-  React.useEffect(() => {
+	React.useEffect(() => {
-    listeners.push(setState)
+		listeners.push(setState);
-    return () => {
+		return () => {
-      const index = listeners.indexOf(setState)
+			const index = listeners.indexOf(setState);
-      if (index > -1) {
+			if (index > -1) {
-        listeners.splice(index, 1)
+				listeners.splice(index, 1);
-      }
+			}
-    }
+		};
-  }, [state])
+	}, [state]);
-  return {
+	return {
-    ...state,
+		...state,
-    toast,
+		toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+		dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+	};
 }
-export { useToast, toast }
+export { useToast, toast };
--- a/src/interfaces/api.interface.ts
+++ b/src/interfaces/api.interface.ts
@@ -0,0 +1,46 @@
 import { ITrade, type IUserWalletCryptos } from "@/interfaces/crypto.interface";
 import type { IUserData } from "@/interfaces/userdata.interface";
 // -----   Request    -----
 export interface IApiRegisterReq {
 	firstName: string;
 	lastName: string;
 	pseudo: string;
 	city: string;
 	email: string;
 	password: string;
 	age: number;
 }
 export interface IApiLoginReq {
 	email: string;
 	password: string;
 }
 // -----   Response   -----
 export interface IAbstractApiResponse {
 	message?: Array<string>;
 	error?: string;
 	statusCode?: number;
 }
 export interface IApiRegisterRes extends IAbstractApiResponse {
 	access_token?: string;
 	user?: IUserData;
 }
 export interface IApiLoginRes extends IAbstractApiResponse {
 	access_token?: string;
 }
 export interface IApiUserAssetsRes extends IAbstractApiResponse {
 	firstName?: string;
 	lastName?: string;
 	dollarAvailables?: number;
 	pseudo?: string;
 	UserHasCrypto?: IUserWalletCryptos[];
 }
 export interface IApiAllTrades extends IAbstractApiResponse {}
--- a/src/interfaces/crypto.interface.ts
+++ b/src/interfaces/crypto.interface.ts
@@ -0,0 +1,45 @@
 export interface IUserWalletCryptos {
 	Crypto?: ICryptoInWalletInfo;
 }
 export interface ICryptoInWalletInfo {
 	id: string;
 	name: string;
 	value: number;
 	image: string;
 	quantity: number;
 	created_at: string;
 	updated_at: string;
 }
 export type IAllTrades = ITrade[];
 export interface ITrade {
 	Giver: ISellerIdentity;
 	Receiver: IBuyerIdentity;
 	Crypto: ITradedCrypto;
 }
 export interface ISellerIdentity {
 	firstName: string;
 	lastName: string;
 	pseudo: string;
 	dollarAvailables: number;
 }
 export interface IBuyerIdentity {
 	firstName: string;
 	lastName: string;
 	pseudo: string;
 	dollarAvailables: number;
 }
 export interface ITradedCrypto {
 	id: string;
 	name: string;
 	value: number;
 	image: string;
 	quantity: number;
 	created_at: string;
 	updated_at: string;
 }
--- a/src/interfaces/userdata.interface.ts
+++ b/src/interfaces/userdata.interface.ts
@@ -0,0 +1,14 @@
 export interface IUserData {
 	id: string;
 	firstName: string;
 	lastName: string;
 	pseudo: string;
 	email: string;
 	roleId: string;
 	isActive: boolean;
 	city: string;
 	dollarAvailables: number;
 	age: number;
 	created_at: string;
 	updated_at: string;
 }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
+import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
--- a/src/services/account.handler.ts
+++ b/src/services/account.handler.ts
@@ -0,0 +1,114 @@
 "use client";
 import type {
 	IApiLoginReq,
 	IApiLoginRes,
 	IApiRegisterReq,
 	IApiRegisterRes, IApiUserAssetsRes,
 } from "@/interfaces/api.interface";
 import type {IUserData, IUserWallet} from "@/interfaces/userdata.interface";
 import ApiRequest from "@/services/apiRequest";
 import { useEncodedLocalStorage } from "@/services/localStorage";
 import {createContext, type Dispatch, type SetStateAction, useContext, useEffect, useState} from "react";
 import {type ICryptoInUserWalletInfo, ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
 const [userData, setUserData] = useEncodedLocalStorage<IUserData | null>(
 	"user_data",
 	null,
 );
 const UserDataContext = createContext<readonly [IUserData | null, Dispatch<SetStateAction<IUserData | null>>]>([userData, setUserData]);
 //TODO Run register task
 export async function doRegister(
 	registerData: IApiRegisterReq,
 ): Promise<IApiRegisterRes | null> {
 	console.trace(registerData);
 	try {
 		const ReqRes = await ApiRequest.standard.post.json<IApiRegisterReq, IApiRegisterRes>(
 			"auth/signup",
 			registerData,
 		);
 		console.trace(ReqRes.data);
 		if (ReqRes.data.user) {
 			setUserData(ReqRes.data.user);
 		}
 		// biome-ignore lint/complexity/noForEach: <explanation>
 		ReqRes.data.message?.forEach((err) => console.warn(err));
 		return ReqRes.data;
 	} catch (error) {
 		console.error("Error during registration:", error);
 		return null;
 	}
 }
 //TODO Run login task
 export async function doLogin(loginData: IApiLoginReq) {
 	try {
 		const ReqRes = await ApiRequest.standard.post.json<IApiLoginReq, IApiLoginRes>(
 			"auth/login",
 			loginData,
 		);
 		console.trace(ReqRes.data);
 		//if (ReqRes.data.user) {
 		//  setUserData(ReqRes.data.user)
 		//}
 		// biome-ignore lint/complexity/noForEach: <explanation>
 		ReqRes.data.message?.forEach((err) => console.warn(err));
 		return ReqRes.data;
 	} catch (err) {
 		console.error("Error during login:", err);
 		return null;
 	}
 }
 //TODO Run disconnect task
 export function doDisconnect() {
 	if (typeof window !== "undefined") {
 		window.localStorage.removeItem("sub");
 		return true;
 	}
 	console.log(
 		"Whut ? Why trying to remove an item from the localStorage when runner in SSR ?",
 	);
 	return false;
 }
 //TODO Run update user data
 export async function refreshUserData() {
 	if (!userData) return;
 	const isTokenAlive =typeof window !== "undefined" ? window.localStorage.getItem("sub") : null;
 	if (!isTokenAlive) return;
 	const _reqData = await ApiRequest.authenticated.get.json<IApiUserAssetsRes>("user/my-assets")
 	const old_userData = userData
 	// biome-ignore lint/style/useConst: <explanation>
 	let new_userData: IUserData = old_userData
 	let _owned_cryptos: ICryptoInUserWalletInfo[] = []
 	if (_reqData.data.UserHasCrypto) {
 		_owned_cryptos = _reqData.data.UserHasCrypto.map((el): ICryptoInUserWalletInfo =>{
 			return {
 				...el.Crypto,
 				owned_amount: el.amount
 			}
 		})
 	}
 	// biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
 	new_userData.wallet = {
 		uat: Date.now(),
 		update_interval: 30_000,
 		owned_cryptos: _owned_cryptos,
 	}
 	if (Date.now() >= old_userData.wallet.uat + (new_userData.wallet.update_interval / 1_000)) {
 		console.log("New update on userData.")
 		console.trace(new_userData)
 		setUserData(new_userData)
 	}
 }
--- a/src/services/apiRequest.ts
+++ b/src/services/apiRequest.ts
@@ -1,117 +1,83 @@
-'use client'
+"use client";
-import axios, {type AxiosResponse} from "axios";
+import axios, { type AxiosResponse } from "axios";
-const baseUrl = ""
+const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3333/";
 const AxiosConfigs = {
 	authenticated: {
 		json: () => {
 			return {
 				headers: {
-					'content-type': 'application/json',
+					"content-type": "application/json",
-					Authorization: `Bearer ${localStorage.getItem('sub')}`,
+					Authorization: `Bearer ${typeof window !== "undefined" ? window.localStorage.getItem("sub") : "not-ssr"}`,
 				},
-				validateStatus: function (status: number) {
+				validateStatus: (status: number) => {
 					return status < 500; // Resolve only if the status code is less than 500
-				}
+				},
-			}
+			};
-		}
+		},
 	},
 	standard: {
 		json: () => {
 			return {
 				headers: {
-					'content-type': 'application/json'
+					"content-type": "application/json",
 				},
-				validateStatus: function (status: number) {
+				validateStatus: (status: number) => {
 					return status < 500; // Resolve only if the status code is less than 500
-				}
+				},
-			}
+			};
-		}
+		},
-	}
+	},
 };
 async function doAuthenticatedJsonPostReq<ReqT, ResT>(
 	route: string,
 	body: ReqT,
 ): Promise<AxiosResponse<ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.authenticated.json());
 }
-/**
+async function doAuthenticatedGetReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
- * Makes an authenticated JSON POST request using axios.
+	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json());
 * @param {string} route - The route to send the request to.
 * @param {object} body - The request body.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - The promise that resolves to the response from the server.
 */
 async function doAuthenticatedJsonPostReq<ReqT, ResT>(route:string, body:object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }
-/**
+async function doAuthenticatedPatchReq<ReqT, ResT>(
- * Makes an authenticated GET request to the specified route using Axios.
+	route: string,
- *
+	body: ReqT,
- * @param {string} route - The route to which the GET request is sent.
+): Promise<AxiosResponse<ResT>> {
- * @returns {Promise<AxiosResponse>} - A promise that resolves to the Axios response object containing the request data and response details.
+	return await axios.patch(baseUrl + route, body, AxiosConfigs.authenticated.json());
 */
 async function doAuthenticatedGetReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json())
 }
-/**
+async function doAuthenticatedDelReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
- * Performs an authenticated PATCH request to the specified route with the given body.
+	return await axios.delete(baseUrl + route, AxiosConfigs.authenticated.json());
 *
 * @param {string} route - The route to send the PATCH request to.
 * @param {object} body - The body of the request.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - A Promise that resolves to the AxiosResponse object containing the response data.
 */
 async function doAuthenticatedPatchReq<ReqT, ResT>(route:string, body: object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.patch(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }
 /**
 * Sends an authenticated DELETE request to the specified route.
 *
 * @param {string} route - The route to send the request to.
 *
 * @return {Promise<AxiosResponse<ReqT, ResT>>} A Promise that resolves to the AxiosResponse object containing the response data.
 */
 async function doAuthenticatedDelReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.delete(baseUrl + route, AxiosConfigs.authenticated.json())
 }
 //TODO form/multipart req
-
+async function doJsonPostReq<ReqT, ResT>(
-/**
+	route: string,
- * Perform a JSON POST request.
+	body: ReqT,
- *
+): Promise<AxiosResponse<ResT>> {
- * @param {string} route - The route to send the request to.
+	return await axios.post(baseUrl + route, body, AxiosConfigs.standard.json());
 * @param {object} body - The JSON object to send in the request body.
 *
 * @return {Promise<AxiosResponse<ReqT, ResT>>} - A promise that resolves with the response from the server.
 *
 * @throws {Error} - If an error occurs during the request.
 */
 async function doJsonPostReq<ReqT, ResT>(route:string, body: object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.standard.json())
 }
-/**
+async function doJsonGetReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
 * Perform a JSON GET request using Axios.
 *
 * @param {string} route - The route URL to make the GET request to.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - A promise that resolves to the AxiosResponse object.
 */
 async function doJsonGetReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>>  {
 	return await axios.get(baseUrl + route, AxiosConfigs.standard.json());
 }
 const ApiRequest = {
 	authenticated: {
-		post: {json: doAuthenticatedJsonPostReq},
+		post: { json: doAuthenticatedJsonPostReq },
-		patch: {json: doAuthenticatedPatchReq},
+		patch: { json: doAuthenticatedPatchReq },
-		delete: {json: doAuthenticatedDelReq},
+		delete: { json: doAuthenticatedDelReq },
-		get: {json: doAuthenticatedGetReq}
+		get: { json: doAuthenticatedGetReq },
 	},
 	standard: {
-		post: {json: doJsonPostReq},
+		post: { json: doJsonPostReq },
-		get: {json: doJsonGetReq}
+		get: { json: doJsonGetReq },
-	}
+	},
-}
+};
-export default ApiRequest;
+export default ApiRequest;
--- a/src/services/exchange.handler.ts
+++ b/src/services/exchange.handler.ts
--- a/src/services/localStorage.ts
+++ b/src/services/localStorage.ts
@@ -1,6 +1,9 @@
-'use client'
+"use client";
-import React, {useEffect, useState} from "react";
+import type React from "react";
 import { useEffect, useRef, useState } from "react";
 const localStorage = typeof window !== "undefined" ? window.localStorage : null;
 /**
 * A custom React hook that allows you to store and retrieve data in the browser's localStorage.
@@ -9,66 +12,104 @@ import React, {useEffect, useState} from "react";
 * @param {T} initial - The initial value for the stored data.
 * @returns {[T, React.Dispatch<React.SetStateAction<T>>]} - An array containing the stored value and a function to update the stored value.
 */
-export function useLocalStorage<T>(key: string, initial: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+export function useLocalStorage<T>(
 	key: string,
 	initial: T,
 ): [T, React.Dispatch<React.SetStateAction<T>>] {
 	const readValue = () => {
-		const item = typeof window !== 'undefined' ? window.localStorage.getItem(key) : null
+		const item = localStorage?.getItem(key);
 		if (item) {
 			try {
-				return JSON.parse(item)
+				return JSON.parse(item);
-			} catch(error) {
+			} catch (error) {
-				console.warn(`Error reading localStorage key “${key}”:`, error)
+				console.warn(`Error reading localStorage key “${key}”:`, error);
 			}
 		}
 		return initial;
 	};
-		return initial
+	const [storedValue, setStoredValue] = useState<T>(readValue);
 	}
 	const [storedValue, setStoredValue] = useState<T>(readValue)
 	useEffect(() => {
 		try {
-			typeof window !== 'undefined' && window.localStorage.setItem(key, JSON.stringify(storedValue))
+			localStorage?.setItem(key, JSON.stringify(storedValue));
 		} catch (error) {
-			console.warn(`Error setting localStorage key “${key}”:`, error)
+			console.warn(`Error setting localStorage key “${key}”:`, error);
 		}
-	}, [key, storedValue])
+	}, [key, storedValue]);
-
+	return [storedValue, setStoredValue];
 	return [storedValue, setStoredValue]
 }
 /**
- * Custom hook that provides a way to store and retrieve encoded values in local storage.
+ * Custom hook that provides an encoded version of a state value and a function to update that value.
 *
- * @template T - The type of the value to be stored.
+ * @template T - The type of the state value.
- *
+ * @param {string} key - The key under which the state value is stored in the local storage.
- * @param {string} key - The key to be used for storing the encoded value in local storage.
+ * @param {T} initialValue - The initial value of the state.
- * @param {T} fallbackValue - The fallback value to be used if no value is found in local storage.
+ * @return {[T, React.Dispatch<React.SetStateAction<T>>]} - A tuple containing the encoded state value and the function to update it.
 *
 * @return {readonly [T,  React.Dispatch<React.SetStateAction<T>>]} - An array containing the encoded value and a function to update the encoded value.
 */
-export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
+export function useEncodedLocalStorage<T>(key: string, initialValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
-	const [encodedValue, setEncodedValue] = useState<T>(() => {
+	const [encodedState, setEncodedState] = useState<T>(() => getFromLocalStorage(key, initialValue));
 		const stored = localStorage.getItem(key);
 		return stored ? safelyParse(stored, fallbackValue) : fallbackValue;
 	});
 	useEffect(() => {
 		localStorage.setItem(key, safelyStringify(encodedValue));
 	}, [key, encodedValue]);
 	return [encodedValue, setEncodedValue] as const;
-	function safelyParse(stored: string, fallback: T): T {
+	useEffect(() => {
-		try {
+		saveToLocalStorage(key, encodedState);
-			return JSON.parse(atob(stored));
+	}, [encodedState, key]);
-		} catch {
+
-			return fallback;
+	return [encodedState, setEncodedState] as const;
 }
 /**
 * Retrieves a value from the localStorage with the given key.
 *
 * @param {string} key - The key to retrieve the value from.
 * @param {T} initialValue - The initial value to be returned if the value does not exist in the localStorage.
 * @returns {T} - The retrieved value from the localStorage or the initial value if it does not exist.
 */
 function getFromLocalStorage<T>(key: string, initialValue: T): T {
 	try {
 		const localStorageValue = localStorage?.getItem(key);
 		if (localStorageValue) {
 			return decodeFromBase64(localStorageValue);
 		}
 		return initialValue;
 	} catch {
 		return initialValue;
 	}
-	function safelyStringify(value: T): string {
+}
-		try {
+
-			return btoa(JSON.stringify(value));
+/**
-		} catch {
+ * Save a value to the local storage.
-			return btoa(JSON.stringify(fallbackValue));
+ *
-		}
+ * @param {string} key - The key to store the value.
-	}
+ * @param {*} value - The value to be stored.
-}
+ * @return {void}
 */
 function saveToLocalStorage<T>(key: string, value: T): void {
 	try {
 		const encoded = encodeToBase64(value);
 		localStorage?.setItem(key, encoded);
 	} catch {}
 }
 /**
 * Decodes a string value from Base64 encoding.
 *
 * @param {string} value - The Base64 encoded string to decode.
 * @template T - The type of the decoded value.
 * @returns {T} - The decoded value.
 */
 function decodeFromBase64<T>(value: string) {
 	const decoded = atob(value);
 	return JSON.parse(decoded) as T;
 }
 /**
 * Encodes the given value to Base64.
 *
 * @param {T} value - The value to be encoded.
 * @returns {string} - The Base64 encoded string.
 */
 function encodeToBase64<T>(value: T): string {
 	const serializedState = JSON.stringify(value);
 	return btoa(serializedState);
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss"
 // @ts-ignore
 import {default as flattenColorPalette} from "tailwindcss/lib/util/flattenColorPalette";
 const config = {
  darkMode: ["class"],
  content: [
@@ -74,7 +77,19 @@ const config = {
      },
    },
  },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), addVariablesForColors],
 } satisfies Config
 // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
 function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );
  addBase({
    ":root": newVars,
  });
 }
 export default config
Author	SHA1	Message	Date
Mathis	d9858ecae8	refactor: Update account-related components and services Enhanced account-related components and services to include wallet and asset information. Introduced `refreshUserData` function in account handler service to fetch and update user assets. Revised local storage service to include encoding and decoding functionality for secure storage. On the components side, `account-info` and `account-dialog` components have been updated to reflect the new functionalities and data fields. User interface for account information has been improved including details for cryptos and identity information.	2024-06-14 10:06:57 +02:00
Mathis	a873095099	feat(component): Add loading and context handling The update enhances the account dialog component by introducing loading state management and improved context handling. Instead of displaying "Loading..." while user data is being fetched, a Skeleton component is now rendered. Additionally, detailed user data fields are now provided when setting the user data context. An effect hook supplies the proper loading state management.	2024-06-12 16:54:18 +02:00
Mathis	600692e3e5	feat(component): Add loading and context handling The update enhances the account dialog component by introducing loading state management and improved context handling. Instead of displaying "Loading..." while user data is being fetched, a Skeleton component is now rendered. Additionally, detailed user data fields are now provided when setting the user data context. An effect hook supplies the proper loading state management.	2024-06-12 15:13:23 +02:00
Mathis	efb6eaf274	feat(component): modify CSS classes for improved layout Updated the classes in the Header component to enhance layout presentation. Particularly, added padding at the bottom and updated the alignment for better responsiveness. This will enhance user interface on multiple device dimensions.	2024-06-12 15:00:33 +02:00
Mathis	b3907697a0	feat(ui): add DatePicker component A new DatePicker component has been added to the UI components directory. This component includes a dropdown calendar for a user-friendly date selector. It utilizes a popover triggered by a button for seamless date selection and integration.	2024-06-12 15:00:05 +02:00
Mathis	c51e4fcc77	feat(auto-form): add new fields and form files to AutoForm component Added several files to the AutoForm component for better form functionality including a file for each type of input field (checkbox, date, enum, file, number, radio-group, switch, etc). Managed the configurations in a separate file and handled dependencies to control form behaviours. This commit enhances form handling capabilities and simplifies the process for creating versatile forms.	2024-06-12 14:59:35 +02:00
Mathis	6976e3a317	feat(component): replace Sheet with Dialog, enhance user interaction The 'Sheet' UI component in 'account-info' component is replaced with a 'Dialog'. This commit also upgrades userData delivery, and includes interactivity enhancements like added wallet and disconnect buttons. The user's first name is presented in the dialog header.	2024-06-12 14:58:25 +02:00
Mathis	24c168bc44	feat(interface): add new interfaces for user assets and trades This commit includes two additional interfaces for handling user assets and trades. The `IApiUserAssetsRes` interface provides a way to store and manage the user assets response from the API. The `IApiAllTrades` interface has been introduced for dealing with all trades data. Necessary imports are also added in the file.	2024-06-12 14:50:50 +02:00
Mathis	f3fd897a3f	feat(interfaces): Add crypto interface This commit adds the crypto interface file to the src/interfaces directory. The file includes the IUserWalletCryptos, ICryptoInWalletInfo, IAllTrades, ITrade, ISellerIdentity, IBuyerIdentity, and ITradedCrypto interfaces, defining the structure and data types for the user wallet cryptos, all trades, and traded crypto.	2024-06-12 14:50:28 +02:00
Mathis	3dfee64e8e	feat: Add new biome.json configuration file This commit introduces a new biome.json file which contains configuration for organizing imports, included files, version control, linter rules and formatting parameters. It's intended to optimize code quality checks and make the codebase more maintainable.	2024-06-12 09:49:28 +02:00
Mathis	dea98f41a9	feat: add '@biomejs/biome' as a devDependency This commit introduces '@biomejs/biome' version 1.8.1 as a devDependency in the pnpm-lock.yaml file. This also includes additions of '@biomejs' related CLI tools for various platforms (darwin, linux, win32) with different architectures (x64, arm64) as optional dependencies, providing support for multiple environments.	2024-06-12 09:48:56 +02:00
Mathis	cfa18733b4	feat(package): add biome check script and biome devDependency This commit adds a new "check" script in the package.json that uses Biome for checking our codebase. It also includes Biome as a new development dependency to facilitate the use of the check script.	2024-06-12 09:48:28 +02:00
Mathis	a7899d8a4a	feat(services): refactor localStorage service The updated code refactors the `localStorage.ts` service. The refactoring introduces typescript syntax on the import statement, adds a safer use of localStorage when window is undefined, and enhances readability of the code by modifying the function signature to multiple lines. Additionally, it removes unnecessary lines for cleaner code structure.	2024-06-12 09:47:56 +02:00
Mathis	1c42b6a4b6	feat: Improve code formatting and import order Rearranged import orders for better visibility and readability. Also, cleaned up some of the typescript and JSX by adding appropriate line breaks and spaces, and ensuring the use of semicolons for better punctuation.	2024-06-12 09:47:17 +02:00
Mathis	4d00d4b936	feat(handler): add login, registration functionality The login and registration functionality have been implemented using the new `IApiLoginReq`, `IApiLoginRes`, `IApiRegisterReq`, `IApiRegisterRes` interfaces. These include error handling and data storing in local storage.	2024-06-11 16:59:02 +02:00
Mathis	2c333d9c00	feat(component): update user data references from name to firstName The changes replace the "name" property references with "firstName" in the account-info component. The user interface buttons' labels and input field placeholders now utilize "firstName" for user data. This adjustment provides clearer and more accurate data presentation to the users.	2024-06-11 16:58:43 +02:00
Mathis	697dcbf4b8	feat(services): update baseUrl in apiRequest This commit updates the baseUrl value in the apiRequest service. It now uses the API_URL from the environment variables, or defaults to "http://localhost:3333" if the environment variable is not set.	2024-06-11 16:55:45 +02:00
Mathis	278cf844c2	feat(services): update apiRequest module Updated the apiRequest module with refinements in authorization and removal of redundant comments. The changes allow handling server-side rendering and type enforcement in request body.	2024-06-11 16:08:57 +02:00
Mathis	e9048ca7eb	feat(interfaces): add API request/response interfaces Created new typescript interfaces for API. They include IApiRegisterReq, IApiLoginReq, IAbstractApiResponse, IApiRegisterRes, and IApiLoginRes. These interfaces will be used to properly structure the data for API requests and responses, thus enhancing type safety and maintainability.	2024-06-11 16:08:34 +02:00
Mathis	950cb9137f	feat(interface): extend IUserData properties This commit enriches the IUserData interface by adding a series of new properties for a more comprehensive representation of a user. These additional properties include id, firstName, lastName, pseudo, email, roleId, isActive, city, dollarAvailables, age, created_at, and updated_at.	2024-06-11 16:07:59 +02:00
Mathis	882729ffc9	Revert "feat: Implement new auto-form components and fields" This reverts commit `dc17e4a8f7`.	2024-06-10 11:58:40 +02:00
Mathis	dfa443d373	feat: update and remove specific dependencies Details: This update makes three major changes in dependency tree. Firstly, packages '@react-three/drei', '@react-three/fiber', 'three', 'three-globe', '@types/three', '@types/jest' and 'jest' have been removed. Secondly, the '@babel/core' package has been added as a new dependency. Thirdly, version of the 'next' package has been updated. Please review compatibility before upgrading.	2024-06-10 11:54:25 +02:00
Mathis	dc17e4a8f7	feat: Implement new auto-form components and fields This commit includes the creation of new react components and fields for auto-form functionality. The components include AutoFormLabel, AutoFormTooltip, and specific field components for data types such as AutoFormObject, AutoFormArray, AutoFormDate, AutoFormCheckbox, and others. Added tests to ensure the correct rendering of fields, labels generation, among other behaviors.	2024-06-10 11:51:23 +02:00
Mathis	036acfce23	feat(services): update default value in UserDataContext The default value in the UserDataContext has been updated. Previously, it was set to false and now it has been changed to an object with the name property set to "Avnyr".	2024-06-10 11:50:05 +02:00
Mathis	606f37e78f	feat: Add new packages to pnpm-lock This commit consists of adding new packages to the `pnpm-lock.yaml` file. Packages include '@radix-ui/react-navigation-menu', '@react-three/drei', 'lightweight-charts', 'three', 'three-globe', '@types/three', among others. Also, it includes the addition of new package versions and their integrity hashes. Verify the diff for full changes.	2024-06-10 11:35:54 +02:00
Mathis	1dd0384857	feat(components, services): Add user data management and account handling This commit introduces user data management with the addition of new interfaces and services. User data interface which defines the structure of user data was created. Account handler service for registering, logging in, updating user data and disconnecting was also added. User data provider component was created for managing user data state. The account info component for displaying and editing the user account was introduced too. Finally, updates were made in the existing components and services for accommodating these new elements.	2024-06-07 16:57:37 +02:00
Mathis	d624ac6ab2	feat(page): update layout styling The structure of the main component in page.tsx has been adjusted to better accommodate its content. The div styling has been updated from full width with padding to half-width, full height, and content justified to the end.	2024-06-07 14:34:31 +02:00
Mathis	409926a97b	feat(tailwind.config): add global CSS variables for colors A new function, `addVariablesForColors`, has been added into the Tailwind configuration file to map each Tailwind color into a global CSS variable. This allows usage such as `var(--gray-200)` throughout the application for all Tailwind colors.	2024-06-07 14:26:48 +02:00