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,15 +1,18 @@
 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 type React from "react";
 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";

 export const metadata: Metadata = {
 	title: "YeloBit",
 	description: "Generated by create next app",
-  icons: "yellow-bit.svg"};
+	icons: "yellow-bit.svg",
+};

 export default function RootLayout({
 	children,
@@ -22,15 +25,13 @@ export default function RootLayout({
 				<link rel="icon" href="/public/favicon.ico" sizes="any" />
 			</head>
 			<body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
-    <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-      >
-        <Header></Header>
+				<Providers>
+					<Header>
+						<PrimaryNavigationMenu />
+					</Header>
 					{children}
 					<Footer />
-      </ThemeProvider>
+				</Providers>
 			</body>
 		</html>
 	);
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";

 export default function Home() {
 	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>
 		</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 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"}>
-			<div className={"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"}>
+		<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"
+			}
+		>
+			<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"}>
-				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+			<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"
+				}
+			>
+				<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>
-		</footer>
-	)
+			<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 Image from "next/image";
-import React from "react";
+import { AccountDialog } from "@/components/account-dialog";
 import { ThemeBtnSelector } from "@/components/theme-btn-selector";
+import Image from "next/image";
+import type React from "react";

-
-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"}>
-			<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>
+		<header
+			className={
+				"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"
+			}
+		>
+			<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"}>
-				{children}
-			</div>
-			<div className={"w-1/3 flex flex-row justify-end items-center"}>
+			<div className={"w-1/3 flex flex-row justify-center items-center"}>{children}</div>
+			<div
+				className={"w-1/3 flex flex-row justify-center md:justify-end gap-2 items-center"}
+			>
+				<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"
-import Image from "next/image";
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
 import { Boxes, Info } from "lucide-react";
+import Image from "next/image";

 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:
-			"For sighted users to preview content available behind a link.",
+		description: "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}/>
-										<div className="mb-2 mt-4 text-lg font-medium">
-											shadcn/ui
-										</div>
+										<Image
+											src={"logo-red.svg"}
+											alt={"Logo of Yidhra Studio"}
+											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
-											paste into your apps. Accessible. Customizable. Open
-											Source.
+											Beautifully designed components that you can copy and paste into
+											your apps. Accessible. Customizable. Open 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 { type ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+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 { 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")}>
-					Light
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					Dark
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
-					System
-				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("light")}>Light</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,24 +1,20 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+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.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+	<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";

 const AccordionTrigger = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -29,7 +25,7 @@ const AccordionTrigger = React.forwardRef<
 			ref={ref}
 			className={cn(
 				"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -37,8 +33,8 @@ const AccordionTrigger = React.forwardRef<
 			<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
 		</AccordionPrimitive.Trigger>
 	</AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

 const AccordionContent = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,8 +47,8 @@ const AccordionContent = React.forwardRef<
 	>
 		<div className={cn("pb-4 pt-0", className)}>{children}</div>
 	</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,16 +1,16 @@
-"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>,
@@ -19,13 +19,13 @@ const AlertDialogOverlay = React.forwardRef<
 	<AlertDialogPrimitive.Overlay
 		className={cn(
 			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
 		)}
 		{...props}
 		ref={ref}
 	/>
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

 const AlertDialogContent = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -37,27 +37,24 @@ const AlertDialogContent = React.forwardRef<
 			ref={ref}
 			className={cn(
 				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

 const AlertDialogHeader = ({
 	className,
 	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+		className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
 		{...props}
 	/>
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";

 const AlertDialogFooter = ({
 	className,
@@ -66,12 +63,12 @@ const AlertDialogFooter = ({
 	<div
 		className={cn(
 			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";

 const AlertDialogTitle = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -82,8 +79,8 @@ const AlertDialogTitle = React.forwardRef<
 		className={cn("text-lg font-semibold", className)}
 		{...props}
 	/>
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;

 const AlertDialogDescription = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -94,9 +91,8 @@ const AlertDialogDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;

 const AlertDialogAction = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -107,8 +103,8 @@ const AlertDialogAction = React.forwardRef<
 		className={cn(buttonVariants(), className)}
 		{...props}
 	/>
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;

 const AlertDialogCancel = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -116,15 +112,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<AlertDialogPrimitive.Cancel
 		ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
 		{...props}
 	/>
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

 export {
 	AlertDialog,
@@ -138,4 +130,4 @@ export {
 	AlertDialogDescription,
 	AlertDialogAction,
 	AlertDialogCancel,
-}
+};
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } 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",
@@ -16,8 +16,8 @@ const alertVariants = cva(
 		defaultVariants: {
 			variant: "default",
 		},
-  }
-)
+	},
+);

 const Alert = React.forwardRef<
 	HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
 		className={cn(alertVariants({ variant }), className)}
 		{...props}
 	/>
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";

 const AlertTitle = React.forwardRef<
 	HTMLParagraphElement,
@@ -41,19 +41,15 @@ const AlertTitle = React.forwardRef<
 		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
 		{...props}
 	/>
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";

 const AlertDescription = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+	<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...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,9 +1,9 @@
-"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>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;

 const AvatarImage = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
 		className={cn("aspect-square h-full w-full", className)}
 		{...props}
 	/>
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;

 const AvatarFallback = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+			className,
 		)}
 		{...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,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } 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",
@@ -20,17 +20,15 @@ const badgeVariants = cva(
 		defaultVariants: {
 			variant: "default",
 		},
-  }
-)
+	},
+);

 export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
 		VariantProps<typeof badgeVariants> {}

 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+	return <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,16 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "@radix-ui/react-slot";
+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,
 	React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+		separator?: React.ReactNode;
 	}
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";

 const BreadcrumbList = React.forwardRef<
 	HTMLOListElement,
@@ -20,12 +20,12 @@ const BreadcrumbList = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";

 const BreadcrumbItem = React.forwardRef<
 	HTMLLIElement,
@@ -36,16 +36,16 @@ const BreadcrumbItem = React.forwardRef<
 		className={cn("inline-flex items-center gap-1.5", className)}
 		{...props}
 	/>
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";

 const BreadcrumbLink = React.forwardRef<
 	HTMLAnchorElement,
 	React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+		asChild?: boolean;
 	}
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+	const Comp = asChild ? Slot : "a";

 	return (
 		<Comp
@@ -53,9 +53,9 @@ const BreadcrumbLink = React.forwardRef<
 			className={cn("transition-colors hover:text-foreground", className)}
 			{...props}
 		/>
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+	);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";

 const BreadcrumbPage = React.forwardRef<
 	HTMLSpanElement,
@@ -69,8 +69,8 @@ const BreadcrumbPage = React.forwardRef<
 		className={cn("font-normal text-foreground", className)}
 		{...props}
 	/>
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";

 const BreadcrumbSeparator = ({
 	children,
@@ -85,13 +85,10 @@ const BreadcrumbSeparator = ({
 	>
 		{children ?? <ChevronRight />}
 	</li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
 	<span
 		role="presentation"
 		aria-hidden="true"
@@ -101,8 +98,8 @@ const BreadcrumbEllipsis = ({
 		<MoreHorizontal className="h-4 w-4" />
 		<span className="sr-only">More</span>
 	</span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";

 export {
 	Breadcrumb,
@@ -112,4 +109,4 @@ export {
 	BreadcrumbPage,
 	BreadcrumbSeparator,
 	BreadcrumbEllipsis,
-}
+};
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } 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",
@@ -10,12 +10,10 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:
 					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
@@ -30,27 +28,27 @@ const buttonVariants = cva(
 			variant: "default",
 			size: "default",
 		},
-  }
-)
+	},
+);

 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	asChild?: boolean;
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+		const Comp = asChild ? Slot : "button";
 		return (
 			<Comp
 				className={cn(buttonVariants({ variant, size, className }))}
 				ref={ref}
 				{...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,13 +1,13 @@
-"use client"
+"use client";

-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type * as React from "react";
+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,
@@ -27,19 +27,18 @@ function Calendar({
 				nav: "space-x-1 flex items-center",
 				nav_button: cn(
 					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_next: "absolute right-1",
 				table: "w-full border-collapse space-y-1",
 				head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+				head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
 				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",
 				day: cn(
 					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_selected:
@@ -48,8 +47,7 @@ function Calendar({
 				day_outside:
 					"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_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
 				day_hidden: "invisible",
 				...classNames,
 			}}
@@ -59,8 +57,8 @@ function Calendar({
 			}}
 			{...props}
 		/>
-  )
+	);
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";

-export { Calendar }
+export { Calendar };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,33 +1,31 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
 		<div
 			ref={ref}
 			className={cn(
 				"rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+				className,
 			)}
 			{...props}
 		/>
-))
-Card.displayName = "Card"
+	),
+);
+Card.displayName = "Card";

-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
 		<div
 			ref={ref}
 			className={cn("flex flex-col space-y-1.5 p-6", className)}
 			{...props}
 		/>
-))
-CardHeader.displayName = "CardHeader"
+	),
+);
+CardHeader.displayName = "CardHeader";

 const CardTitle = React.forwardRef<
 	HTMLParagraphElement,
@@ -35,45 +33,33 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<h3
 		ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
+		className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";

 const CardDescription = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+	<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";

 const CardContent = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
 	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";

-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} 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,45 +1,43 @@
-"use client"
+"use client";

-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "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 UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];

 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};

 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & 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) {
-    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<
@@ -47,78 +45,70 @@ const Carousel = React.forwardRef<
 	React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
 	(
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
+		{ orientation = "horizontal", opts, setApi, plugins, className, children, ...props },
+		ref,
 	) => {
 		const [carouselRef, api] = useEmblaCarousel(
 			{
 				...opts,
 				axis: orientation === "horizontal" ? "x" : "y",
 			},
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+			plugins,
+		);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);

 		const onSelect = React.useCallback((api: CarouselApi) => {
 			if (!api) {
-        return
+				return;
 			}

-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);

 		const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+			api?.scrollPrev();
+		}, [api]);

 		const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+			api?.scrollNext();
+		}, [api]);

 		const handleKeyDown = React.useCallback(
 			(event: React.KeyboardEvent<HTMLDivElement>) => {
 				if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
+					event.preventDefault();
+					scrollPrev();
 				} else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+					event.preventDefault();
+					scrollNext();
 				}
 			},
-      [scrollPrev, scrollNext]
-    )
+			[scrollPrev, scrollNext],
+		);

 		React.useEffect(() => {
 			if (!api || !setApi) {
-        return
+				return;
 			}

-      setApi(api)
-    }, [api, setApi])
+			setApi(api);
+		}, [api, setApi]);

 		React.useEffect(() => {
 			if (!api) {
-        return
+				return;
 			}

-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+			onSelect(api);
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);

 			return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+				api?.off("select", onSelect);
+			};
+		}, [api, onSelect]);

 		return (
 			<CarouselContext.Provider
@@ -126,8 +116,7 @@ const Carousel = React.forwardRef<
 					carouselRef,
 					api: api,
 					opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
 					scrollPrev,
 					scrollNext,
 					canScrollPrev,
@@ -145,16 +134,16 @@ const Carousel = React.forwardRef<
 					{children}
 				</div>
 			</CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
+		);
+	},
+);
+Carousel.displayName = "Carousel";

 const CarouselContent = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+	const { carouselRef, orientation } = useCarousel();

 	return (
 		<div ref={carouselRef} className="overflow-hidden">
@@ -163,20 +152,20 @@ const CarouselContent = React.forwardRef<
 				className={cn(
 					"flex",
 					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+					className,
 				)}
 				{...props}
 			/>
 		</div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+	);
+});
+CarouselContent.displayName = "CarouselContent";

 const CarouselItem = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+	const { orientation } = useCarousel();

 	return (
 		<div
@@ -186,19 +175,19 @@ const CarouselItem = React.forwardRef<
 			className={cn(
 				"min-w-0 shrink-0 grow-0 basis-full",
 				orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+	);
+});
+CarouselItem.displayName = "CarouselItem";

 const CarouselPrevious = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();

 	return (
 		<Button
@@ -210,7 +199,7 @@ const CarouselPrevious = React.forwardRef<
 				orientation === "horizontal"
 					? "-left-12 top-1/2 -translate-y-1/2"
 					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+				className,
 			)}
 			disabled={!canScrollPrev}
 			onClick={scrollPrev}
@@ -219,15 +208,15 @@ const CarouselPrevious = React.forwardRef<
 			<ArrowLeft className="h-4 w-4" />
 			<span className="sr-only">Previous slide</span>
 		</Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+	);
+});
+CarouselPrevious.displayName = "CarouselPrevious";

 const CarouselNext = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+	const { orientation, scrollNext, canScrollNext } = useCarousel();

 	return (
 		<Button
@@ -239,7 +228,7 @@ const CarouselNext = React.forwardRef<
 				orientation === "horizontal"
 					? "-right-12 top-1/2 -translate-y-1/2"
 					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+				className,
 			)}
 			disabled={!canScrollNext}
 			onClick={scrollNext}
@@ -248,9 +237,9 @@ const CarouselNext = React.forwardRef<
 			<ArrowRight className="h-4 w-4" />
 			<span className="sr-only">Next slide</span>
 		</Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+	);
+});
+CarouselNext.displayName = "CarouselNext";

 export {
 	type CarouselApi,
@@ -259,4 +248,4 @@ export {
 	CarouselItem,
 	CarouselPrevious,
 	CarouselNext,
-}
+};
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+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>,
@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -24,7 +24,7 @@ const Checkbox = React.forwardRef<
 			<Check className="h-4 w-4" />
 		</CheckboxPrimitive.Indicator>
 	</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,12 +1,12 @@
-"use client"
+"use client";

-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+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>,
@@ -16,12 +16,12 @@ const Command = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;

 interface CommandDialogProps extends DialogProps {}

@@ -34,8 +34,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 				</Command>
 			</DialogContent>
 		</Dialog>
-  )
-}
+	);
+};

 const CommandInput = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Input>,
@@ -47,14 +47,14 @@ const CommandInput = React.forwardRef<
 			ref={ref}
 			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",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</div>
-))
+));

-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;

 const CommandList = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.List>,
@@ -65,22 +65,18 @@ const CommandList = React.forwardRef<
 		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 		{...props}
 	/>
-))
+));

-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;

 const CommandEmpty = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Empty>,
 	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+	<CommandPrimitive.Empty 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>,
@@ -90,13 +86,13 @@ const CommandGroup = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));

-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;

 const CommandSeparator = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -107,8 +103,8 @@ const CommandSeparator = React.forwardRef<
 		className={cn("-mx-1 h-px bg-border", className)}
 		{...props}
 	/>
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;

 const CommandItem = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Item>,
@@ -118,13 +114,13 @@ const CommandItem = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));

-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;

 const CommandShortcut = ({
 	className,
@@ -132,15 +128,12 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
 		<span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
 			{...props}
 		/>
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";

 export {
 	Command,
@@ -152,4 +145,4 @@ export {
 	CommandItem,
 	CommandShortcut,
 	CommandSeparator,
-}
+};
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+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.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, children, ...props }, ref) => (
 	<ContextMenuPrimitive.SubTrigger
@@ -29,15 +29,15 @@ const ContextMenuSubTrigger = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	>
 		{children}
 		<ChevronRight className="ml-auto h-4 w-4" />
 	</ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;

 const ContextMenuSubContent = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -47,12 +47,12 @@ const ContextMenuSubContent = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;

 const ContextMenuContent = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -63,18 +63,18 @@ const ContextMenuContent = React.forwardRef<
 			ref={ref}
 			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",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;

 const ContextMenuItem = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<ContextMenuPrimitive.Item
@@ -82,12 +82,12 @@ const ContextMenuItem = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;

 const ContextMenuCheckboxItem = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -97,7 +97,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		checked={checked}
 		{...props}
@@ -109,9 +109,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;

 const ContextMenuRadioItem = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -121,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -132,13 +131,13 @@ const ContextMenuRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;

 const ContextMenuLabel = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.Label>,
 	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<ContextMenuPrimitive.Label
@@ -146,12 +145,12 @@ const ContextMenuLabel = React.forwardRef<
 		className={cn(
 			"px-2 py-1.5 text-sm font-semibold text-foreground",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;

 const ContextMenuSeparator = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -162,8 +161,8 @@ const ContextMenuSeparator = React.forwardRef<
 		className={cn("-mx-1 my-1 h-px bg-border", className)}
 		{...props}
 	/>
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;

 const ContextMenuShortcut = ({
 	className,
@@ -171,15 +170,12 @@ const ContextMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
 		<span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
 			{...props}
 		/>
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+	);
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";

 export {
 	ContextMenu,
@@ -197,4 +193,4 @@ export {
 	ContextMenuSubContent,
 	ContextMenuSubTrigger,
 	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,18 +1,18 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+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>,
@@ -22,12 +22,12 @@ const DialogOverlay = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
 			ref={ref}
 			className={cn(
 				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -50,36 +50,27 @@ const DialogContent = React.forwardRef<
 			</DialogPrimitive.Close>
 		</DialogPrimitive.Content>
 	</DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;

-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+		className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
 		{...props}
 	/>
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";

-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
 			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";

 const DialogTitle = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,14 +78,11 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Title
 		ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;

 const DialogDescription = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +93,8 @@ const DialogDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

 export {
 	Dialog,
@@ -119,4 +107,4 @@ export {
 	DialogFooter,
 	DialogTitle,
 	DialogDescription,
-}
+};
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";

-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Drawer = ({
 	shouldScaleBackground = true,
 	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
+	<DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+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>,
@@ -31,8 +28,8 @@ const DrawerOverlay = React.forwardRef<
 		className={cn("fixed inset-0 z-50 bg-black/80", className)}
 		{...props}
 	/>
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;

 const DrawerContent = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -44,7 +41,7 @@ const DrawerContent = React.forwardRef<
 			ref={ref}
 			className={cn(
 				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -52,30 +49,21 @@ const DrawerContent = React.forwardRef<
 			{children}
 		</DrawerPrimitive.Content>
 	</DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";

-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 		{...props}
 	/>
-)
-DrawerHeader.displayName = "DrawerHeader"
+);
+DrawerHeader.displayName = "DrawerHeader";

-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<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>,
@@ -83,14 +71,11 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DrawerPrimitive.Title
 		ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

 const DrawerDescription = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,8 +86,8 @@ const DrawerDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;

 export {
 	Drawer,
@@ -115,4 +100,4 @@ export {
 	DrawerFooter,
 	DrawerTitle,
 	DrawerDescription,
-}
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+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.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, children, ...props }, ref) => (
 	<DropdownMenuPrimitive.SubTrigger
@@ -29,16 +29,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	>
 		{children}
 		<ChevronRight className="ml-auto h-4 w-4" />
 	</DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;

 const DropdownMenuSubContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +47,12 @@ const DropdownMenuSubContent = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;

 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -66,18 +64,18 @@ const DropdownMenuContent = React.forwardRef<
 			sideOffset={sideOffset}
 			className={cn(
 				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;

 const DropdownMenuItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<DropdownMenuPrimitive.Item
@@ -85,12 +83,12 @@ const DropdownMenuItem = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

 const DropdownMenuCheckboxItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -100,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		checked={checked}
 		{...props}
@@ -112,9 +110,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;

 const DropdownMenuRadioItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -124,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -135,26 +132,22 @@ const DropdownMenuRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;

 const DropdownMenuLabel = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<DropdownMenuPrimitive.Label
 		ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
 		{...props}
 	/>
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

 const DropdownMenuSeparator = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,8 +158,8 @@ const DropdownMenuSeparator = React.forwardRef<
 		className={cn("-mx-1 my-1 h-px bg-muted", className)}
 		{...props}
 	/>
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

 const DropdownMenuShortcut = ({
 	className,
@@ -177,9 +170,9 @@ const DropdownMenuShortcut = ({
 			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
 			{...props}
 		/>
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

 export {
 	DropdownMenu,
@@ -197,4 +190,4 @@ export {
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
 	DropdownMenuRadioGroup,
-}
+};
--- a/src/components/ui/flip-words.tsx
+++ b/src/components/ui/flip-words.tsx
@@ -1,7 +1,7 @@
 "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,
@@ -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,34 +1,34 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
 	Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
 	FormProvider,
 	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,
-  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,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
 	...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -36,21 +36,21 @@ const FormField = <
 		<FormFieldContext.Provider value={{ name: props.name }}>
 			<Controller {...props} />
 		</FormFieldContext.Provider>
-  )
-}
+	);
+};

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();

-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);

 	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 {
 		id,
@@ -59,36 +59,35 @@ const useFormField = () => {
 		formDescriptionId: `${id}-form-item-description`,
 		formMessageId: `${id}-form-item-message`,
 		...fieldState,
-  }
-}
+	};
+};

 type FormItemContextValue = {
-  id: string
-}
+	id: string;
+};

 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+	{} as FormItemContextValue,
+);

-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const id = React.useId();

 		return (
 			<FormItemContext.Provider value={{ id }}>
 				<div ref={ref} className={cn("space-y-2", className)} {...props} />
 			</FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+		);
+	},
+);
+FormItem.displayName = "FormItem";

 const FormLabel = React.forwardRef<
 	React.ElementRef<typeof LabelPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+	const { error, formItemId } = useFormField();

 	return (
 		<Label
@@ -97,37 +96,35 @@ const FormLabel = React.forwardRef<
 			htmlFor={formItemId}
 			{...props}
 		/>
-  )
-})
-FormLabel.displayName = "FormLabel"
+	);
+});
+FormLabel.displayName = "FormLabel";

 const FormControl = React.forwardRef<
 	React.ElementRef<typeof Slot>,
 	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();

 	return (
 		<Slot
 			ref={ref}
 			id={formItemId}
 			aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
+				!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
 			}
 			aria-invalid={!!error}
 			{...props}
 		/>
-  )
-})
-FormControl.displayName = "FormControl"
+	);
+});
+FormControl.displayName = "FormControl";

 const FormDescription = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+	const { formDescriptionId } = useFormField();

 	return (
 		<p
@@ -136,19 +133,19 @@ const FormDescription = React.forwardRef<
 			className={cn("text-sm text-muted-foreground", className)}
 			{...props}
 		/>
-  )
-})
-FormDescription.displayName = "FormDescription"
+	);
+});
+FormDescription.displayName = "FormDescription";

 const FormMessage = React.forwardRef<
 	HTMLParagraphElement,
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;

 	if (!body) {
-    return null
+		return null;
 	}

 	return (
@@ -160,9 +157,9 @@ const FormMessage = React.forwardRef<
 		>
 			{body}
 		</p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+	);
+});
+FormMessage.displayName = "FormMessage";

 export {
 	useFormField,
@@ -173,4 +170,4 @@ export {
 	FormDescription,
 	FormMessage,
 	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 {
@@ -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
-							product={product}
-							translate={translateX}
-							key={product.title}
-						/>
+						<ProductCard 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
-							product={product}
-							translate={translateX}
-							key={product.title}
-						/>
+						<ProductCard product={product} translate={translateX} key={product.title} />
 					))}
 				</motion.div>
 			</motion.div>
@@ -126,10 +118,7 @@ export const ProductCard = ({
 			key={product.title}
 			className="group/product h-96 w-[30rem] relative flex-shrink-0"
 		>
-			<Link
-				href={product.link}
-				className="block group-hover/product:shadow-2xl "
-			>
+			<Link 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,13 +1,13 @@
-"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>,
@@ -19,11 +19,11 @@ const HoverCardContent = React.forwardRef<
 		sideOffset={sideOffset}
 		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",
-      className
+			className,
 		)}
 		{...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,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
+import { OTPInput, OTPInputContext } from "input-otp";
+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>,
@@ -14,28 +14,28 @@ const InputOTP = React.forwardRef<
 		ref={ref}
 		containerClassName={cn(
 			"flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
+			containerClassName,
 		)}
 		className={cn("disabled:cursor-not-allowed", className)}
 		{...props}
 	/>
-))
-InputOTP.displayName = "InputOTP"
+));
+InputOTP.displayName = "InputOTP";

 const InputOTPGroup = React.forwardRef<
 	React.ElementRef<"div">,
 	React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
 	<div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+));
+InputOTPGroup.displayName = "InputOTPGroup";

 const InputOTPSlot = React.forwardRef<
 	React.ElementRef<"div">,
 	React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];

 	return (
 		<div
@@ -43,7 +43,7 @@ const InputOTPSlot = React.forwardRef<
 			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",
 				isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -54,9 +54,9 @@ const InputOTPSlot = React.forwardRef<
 				</div>
 			)}
 		</div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+	);
+});
+InputOTPSlot.displayName = "InputOTPSlot";

 const InputOTPSeparator = React.forwardRef<
 	React.ElementRef<"div">,
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
 	<div ref={ref} role="separator" {...props}>
 		<Dot />
 	</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,9 +1,8 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
 	({ className, type, ...props }, ref) => {
@@ -12,14 +11,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 				type={type}
 				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",
-          className
+					className,
 				)}
 				ref={ref}
 				{...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 { cva, type VariantProps } from "class-variance-authority"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } 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.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
 		VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;

-export { Label }
+export { Label };
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,20 +1,20 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+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>,
@@ -24,12 +24,12 @@ const Menubar = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;

 const MenubarTrigger = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -39,17 +39,17 @@ const MenubarTrigger = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;

 const MenubarSubTrigger = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, children, ...props }, ref) => (
 	<MenubarPrimitive.SubTrigger
@@ -57,15 +57,15 @@ const MenubarSubTrigger = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	>
 		{children}
 		<ChevronRight className="ml-auto h-4 w-4" />
 	</MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;

 const MenubarSubContent = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -75,21 +75,17 @@ const MenubarSubContent = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;

 const MenubarContent = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
 	<MenubarPrimitive.Portal>
 		<MenubarPrimitive.Content
 			ref={ref}
@@ -98,19 +94,18 @@ const MenubarContent = React.forwardRef<
 			sideOffset={sideOffset}
 			className={cn(
 				"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
+				className,
 			)}
 			{...props}
 		/>
 	</MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;

 const MenubarItem = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<MenubarPrimitive.Item
@@ -118,12 +113,12 @@ const MenubarItem = React.forwardRef<
 		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",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;

 const MenubarCheckboxItem = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -133,7 +128,7 @@ const MenubarCheckboxItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		checked={checked}
 		{...props}
@@ -145,8 +140,8 @@ const MenubarCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;

 const MenubarRadioItem = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -156,7 +151,7 @@ const MenubarRadioItem = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -167,26 +162,22 @@ const MenubarRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;

 const MenubarLabel = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Label>,
 	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<MenubarPrimitive.Label
 		ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
 		{...props}
 	/>
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;

 const MenubarSeparator = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -197,8 +188,8 @@ const MenubarSeparator = React.forwardRef<
 		className={cn("-mx-1 my-1 h-px bg-muted", className)}
 		{...props}
 	/>
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;

 const MenubarShortcut = ({
 	className,
@@ -206,15 +197,12 @@ const MenubarShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
 		<span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
 			{...props}
 		/>
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
+	);
+};
+MenubarShortcut.displayname = "MenubarShortcut";

 export {
 	Menubar,
@@ -233,4 +221,4 @@ export {
 	MenubarGroup,
 	MenubarSub,
 	MenubarShortcut,
-}
+};
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+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>,
@@ -13,15 +13,15 @@ const NavigationMenu = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
+			className,
 		)}
 		{...props}
 	>
 		{children}
 		<NavigationMenuViewport />
 	</NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

 const NavigationMenuList = React.forwardRef<
 	React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -31,18 +31,18 @@ const NavigationMenuList = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"group flex flex-1 list-none items-center justify-center space-x-1",
-      className
+			className,
 		)}
 		{...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>,
@@ -59,8 +59,8 @@ const NavigationMenuTrigger = React.forwardRef<
 			aria-hidden="true"
 		/>
 	</NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

 const NavigationMenuContent = React.forwardRef<
 	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -70,14 +70,14 @@ const NavigationMenuContent = React.forwardRef<
 		ref={ref}
 		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 ",
-      className
+			className,
 		)}
 		{...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>,
@@ -87,15 +87,14 @@ const NavigationMenuViewport = React.forwardRef<
 		<NavigationMenuPrimitive.Viewport
 			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)]",
-        className
+				className,
 			)}
 			ref={ref}
 			{...props}
 		/>
 	</div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;

 const NavigationMenuIndicator = React.forwardRef<
 	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -105,15 +104,14 @@ const NavigationMenuIndicator = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	>
 		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
 	</NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

 export {
 	navigationMenuTriggerStyle,
@@ -125,4 +123,4 @@ export {
 	NavigationMenuLink,
 	NavigationMenuIndicator,
 	NavigationMenuViewport,
-}
+};
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,8 +1,8 @@
-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 { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { type ButtonProps, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";

 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 	<nav
@@ -11,33 +11,31 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 		className={cn("mx-auto flex w-full justify-center", className)}
 		{...props}
 	/>
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = "Pagination";

-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+	({ className, ...props }, ref) => (
 		<ul
 			ref={ref}
 			className={cn("flex flex-row items-center gap-1", className)}
 			{...props}
 		/>
-))
-PaginationContent.displayName = "PaginationContent"
+	),
+);
+PaginationContent.displayName = "PaginationContent";

-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+	({ 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,
@@ -52,12 +50,12 @@ const PaginationLink = ({
 				variant: isActive ? "outline" : "ghost",
 				size,
 			}),
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = "PaginationLink";

 const PaginationPrevious = ({
 	className,
@@ -72,8 +70,8 @@ const PaginationPrevious = ({
 		<ChevronLeft className="h-4 w-4" />
 		<span>Previous</span>
 	</PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = "PaginationPrevious";

 const PaginationNext = ({
 	className,
@@ -88,13 +86,10 @@ const PaginationNext = ({
 		<span>Next</span>
 		<ChevronRight className="h-4 w-4" />
 	</PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = "PaginationNext";

-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
 	<span
 		aria-hidden
 		className={cn("flex h-9 w-9 items-center justify-center", className)}
@@ -103,8 +98,8 @@ const PaginationEllipsis = ({
 		<MoreHorizontal className="h-4 w-4" />
 		<span className="sr-only">More pages</span>
 	</span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";

 export {
 	Pagination,
@@ -114,4 +109,4 @@ export {
 	PaginationLink,
 	PaginationNext,
 	PaginationPrevious,
-}
+};
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,13 +1,13 @@
-"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>,
@@ -20,12 +20,12 @@ const PopoverContent = React.forwardRef<
 			sideOffset={sideOffset}
 			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",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</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,9 +1,9 @@
-"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>,
@@ -13,7 +13,7 @@ const Progress = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -22,7 +22,7 @@ const Progress = React.forwardRef<
 			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 		/>
 	</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,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+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>,
@@ -16,9 +16,9 @@ const RadioGroup = React.forwardRef<
 			{...props}
 			ref={ref}
 		/>
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+	);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

 const RadioGroupItem = React.forwardRef<
 	React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -29,7 +29,7 @@ const RadioGroupItem = React.forwardRef<
 			ref={ref}
 			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",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef<
 				<Circle className="h-2.5 w-2.5 fill-current text-current" />
 			</RadioGroupPrimitive.Indicator>
 		</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,9 +1,9 @@
-"use client"
+"use client";

-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const ResizablePanelGroup = ({
 	className,
@@ -12,25 +12,25 @@ const ResizablePanelGroup = ({
 	<ResizablePrimitive.PanelGroup
 		className={cn(
 			"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
+);

-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;

 const ResizableHandle = ({
 	withHandle,
 	className,
 	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+	withHandle?: boolean;
 }) => (
 	<ResizablePrimitive.PanelResizeHandle
 		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",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -40,6 +40,6 @@ const ResizableHandle = ({
 			</div>
 		)}
 	</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,9 +1,9 @@
-"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>,
@@ -20,8 +20,8 @@ const ScrollArea = React.forwardRef<
 		<ScrollBar />
 		<ScrollAreaPrimitive.Corner />
 	</ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

 const ScrollBar = React.forwardRef<
 	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -32,17 +32,16 @@ const ScrollBar = React.forwardRef<
 		orientation={orientation}
 		className={cn(
 			"flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
 			orientation === "horizontal" &&
 				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+			className,
 		)}
 		{...props}
 	>
 		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
 	</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,16 +1,16 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+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>,
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
 			<ChevronDown className="h-4 w-4 opacity-50" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

 const SelectScrollUpButton = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,16 +38,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SelectPrimitive.ScrollUpButton
 		ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
 		{...props}
 	>
 		<ChevronUp className="h-4 w-4" />
 	</SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

 const SelectScrollDownButton = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,17 +52,13 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SelectPrimitive.ScrollDownButton
 		ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
 		{...props}
 	>
 		<ChevronDown className="h-4 w-4" />
 	</SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;

 const SelectContent = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Content>,
@@ -78,7 +71,7 @@ const SelectContent = React.forwardRef<
 				"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" &&
 					"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}
 			{...props}
@@ -88,7 +81,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					"p-1",
 					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}
@@ -96,8 +89,8 @@ const SelectContent = React.forwardRef<
 			<SelectScrollDownButton />
 		</SelectPrimitive.Content>
 	</SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;

 const SelectLabel = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Label>,
@@ -108,8 +101,8 @@ const SelectLabel = React.forwardRef<
 		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 		{...props}
 	/>
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;

 const SelectItem = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Item>,
@@ -119,7 +112,7 @@ const SelectItem = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -131,8 +124,8 @@ const SelectItem = React.forwardRef<

 		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 	</SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;

 const SelectSeparator = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -143,8 +136,8 @@ const SelectSeparator = React.forwardRef<
 		className={cn("-mx-1 my-1 h-px bg-muted", className)}
 		{...props}
 	/>
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

 export {
 	Select,
@@ -157,4 +150,4 @@ export {
 	SelectSeparator,
 	SelectScrollUpButton,
 	SelectScrollDownButton,
-}
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,18 +1,14 @@
-"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.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
 	<SeparatorPrimitive.Root
 		ref={ref}
 		decorative={decorative}
@@ -20,12 +16,11 @@ const Separator = React.forwardRef<
 		className={cn(
 			"shrink-0 bg-border",
 			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+			className,
 		)}
 		{...props}
 	/>
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;

-export { Separator }
+export { Separator };
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+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>,
@@ -22,13 +22,13 @@ const SheetOverlay = React.forwardRef<
 	<SheetPrimitive.Overlay
 		className={cn(
 			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+			className,
 		)}
 		{...props}
 		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",
@@ -46,8 +46,8 @@ const sheetVariants = cva(
 		defaultVariants: {
 			side: "right",
 		},
-  }
-)
+	},
+);

 interface SheetContentProps
 	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -71,36 +71,27 @@ const SheetContent = React.forwardRef<
 			</SheetPrimitive.Close>
 		</SheetPrimitive.Content>
 	</SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;

-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+		className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
 		{...props}
 	/>
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";

-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
 			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";

 const SheetTitle = React.forwardRef<
 	React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +102,8 @@ const SheetTitle = React.forwardRef<
 		className={cn("text-lg font-semibold text-foreground", className)}
 		{...props}
 	/>
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;

 const SheetDescription = React.forwardRef<
 	React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +114,8 @@ const SheetDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;

 export {
 	Sheet,
@@ -137,4 +128,4 @@ export {
 	SheetFooter,
 	SheetTitle,
 	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({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
 	return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
+		<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,9 +1,9 @@
-"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>,
@@ -11,10 +11,7 @@ const Slider = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SliderPrimitive.Root
 		ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
+		className={cn("relative flex w-full touch-none select-none items-center", className)}
 		{...props}
 	>
 		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
@@ -22,7 +19,7 @@ const Slider = React.forwardRef<
 		</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" />
 	</SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+));
+Slider.displayName = SliderPrimitive.Root.displayName;

-export { Slider }
+export { Slider };
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";

-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+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 (
 		<Sonner
@@ -19,13 +19,12 @@ const Toaster = ({ ...props }: ToasterProps) => {
 					description: "group-[.toast]:text-muted-foreground",
 					actionButton:
 						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 				},
 			}}
 			{...props}
 		/>
-  )
-}
+	);
+};

-export { Toaster }
+export { Toaster };
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"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>,
@@ -12,18 +12,18 @@ const Switch = React.forwardRef<
 	<SwitchPrimitives.Root
 		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",
-      className
+			className,
 		)}
 		{...props}
 		ref={ref}
 	>
 		<SwitchPrimitives.Thumb
 			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>
-))
-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,11 +1,9 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
 		<div className="relative w-full overflow-auto">
 			<table
 				ref={ref}
@@ -13,28 +11,25 @@ const Table = React.forwardRef<
 				{...props}
 			/>
 		</div>
-))
-Table.displayName = "Table"
+	),
+);
+Table.displayName = "Table";

 const TableHeader = React.forwardRef<
 	HTMLTableSectionElement,
 	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
 	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";

 const TableBody = React.forwardRef<
 	HTMLTableSectionElement,
 	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+	<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";

 const TableFooter = React.forwardRef<
 	HTMLTableSectionElement,
@@ -42,14 +37,11 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<tfoot
 		ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+		className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
 		{...props}
 	/>
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";

 const TableRow = React.forwardRef<
 	HTMLTableRowElement,
@@ -59,12 +51,12 @@ const TableRow = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";

 const TableHead = React.forwardRef<
 	HTMLTableCellElement,
@@ -74,12 +66,12 @@ const TableHead = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";

 const TableCell = React.forwardRef<
 	HTMLTableCellElement,
@@ -90,8 +82,8 @@ const TableCell = React.forwardRef<
 		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 		{...props}
 	/>
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";

 const TableCaption = React.forwardRef<
 	HTMLTableCaptionElement,
@@ -102,8 +94,8 @@ const TableCaption = React.forwardRef<
 		className={cn("mt-4 text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";

 export {
 	Table,
@@ -114,4 +106,4 @@ export {
 	TableRow,
 	TableCell,
 	TableCaption,
-}
+};
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"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>,
@@ -15,12 +15,12 @@ const TabsList = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;

 const TabsTrigger = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -30,12 +30,12 @@ const TabsTrigger = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

 const TabsContent = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Content>,
@@ -45,11 +45,11 @@ const TabsContent = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"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}
 	/>
-))
-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,6 +1,6 @@
-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> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 			<textarea
 				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",
-          className
+					className,
 				)}
 				ref={ref}
 				{...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,7 +1,15 @@
-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",
@@ -10,54 +18,60 @@ export enum toastType {
 	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:
-			icon = <MessageSquareText />
-			bgColor = 'bg-accent'
-			break
+			icon = <MessageSquareText />;
+			bgColor = "bg-accent";
+			break;
 		case toastType.add:
-			icon = <Plus />
-			bgColor = 'bg-accent'
-			break
+			icon = <Plus />;
+			bgColor = "bg-accent";
+			break;
 		case toastType.del:
-			icon = <Minus />
-			bgColor = 'bg-accent'
-			break
+			icon = <Minus />;
+			bgColor = "bg-accent";
+			break;
 		case toastType.info:
-			icon = <CircleHelp />
-			bgColor = 'bg-accent'
-			break
+			icon = <CircleHelp />;
+			bgColor = "bg-accent";
+			break;
 		case toastType.warn:
-			icon = <CircleAlert />
-			bgColor = 'bg-orange-500'
-			break
+			icon = <CircleAlert />;
+			bgColor = "bg-orange-500";
+			break;
 		case toastType.error:
-			icon = <Bug />
-			bgColor = 'bg-red-500'
-			break
+			icon = <Bug />;
+			bgColor = "bg-red-500";
+			break;
 		case toastType.success:
-			icon = <CircleCheckBig />
-			bgColor = 'bg-green-500'
-			break
+			icon = <CircleCheckBig />;
+			bgColor = "bg-green-500";
+			break;
 		case toastType.refused:
-			icon = <OctagonX />
-			bgColor = 'bg-red-700'
-			break
+			icon = <OctagonX />;
+			bgColor = "bg-red-700";
+			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,13 +1,13 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps, cva } from "class-variance-authority";
+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>,
@@ -17,12 +17,12 @@ const ToastViewport = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+			className,
 		)}
 		{...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",
@@ -37,8 +37,8 @@ const toastVariants = cva(
 		defaultVariants: {
 			variant: "default",
 		},
-  }
-)
+	},
+);

 const Toast = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Root>,
@@ -51,9 +51,9 @@ const Toast = React.forwardRef<
 			className={cn(toastVariants({ variant }), className)}
 			{...props}
 		/>
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;

 const ToastAction = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Action>,
@@ -63,12 +63,12 @@ const ToastAction = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;

 const ToastClose = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Close>,
@@ -78,15 +78,15 @@ const ToastClose = React.forwardRef<
 		ref={ref}
 		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",
-      className
+			className,
 		)}
 		toast-close=""
 		{...props}
 	>
 		<X className="h-4 w-4" />
 	</ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;

 const ToastTitle = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Title>,
@@ -97,8 +97,8 @@ const ToastTitle = React.forwardRef<
 		className={cn("text-sm font-semibold", className)}
 		{...props}
 	/>
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;

 const ToastDescription = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Description>,
@@ -109,12 +109,12 @@ const ToastDescription = React.forwardRef<
 		className={cn("text-sm opacity-90", className)}
 		{...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,
@@ -126,4 +126,4 @@ export {
 	ToastDescription,
 	ToastClose,
 	ToastAction,
-}
+};
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";

 import {
 	Toast,
@@ -7,29 +7,25 @@ import {
 	ToastProvider,
 	ToastTitle,
 	ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";

 export function Toaster() {
-  const { toasts } = useToast()
+	const { toasts } = useToast();

 	return (
 		<ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
+			{toasts.map(({ id, title, description, action, ...props }) => (
 				<Toast key={id} {...props}>
 					<div className="grid gap-1">
 						{title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+						{description && <ToastDescription>{description}</ToastDescription>}
 					</div>
 					{action}
 					<ToastClose />
 				</Toast>
-        )
-      })}
+			))}
 			<ToastViewport />
 		</ToastProvider>
-  )
+	);
 }
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,18 +1,16 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { VariantProps } from "class-variance-authority"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { 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<
-  VariantProps<typeof toggleVariants>
->({
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
 	size: "default",
 	variant: "default",
-})
+});

 const ToggleGroup = React.forwardRef<
 	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -28,16 +26,16 @@ const ToggleGroup = React.forwardRef<
 			{children}
 		</ToggleGroupContext.Provider>
 	</ToggleGroupPrimitive.Root>
-))
+));

-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;

 const ToggleGroupItem = React.forwardRef<
 	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
 		VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+	const context = React.useContext(ToggleGroupContext);

 	return (
 		<ToggleGroupPrimitive.Item
@@ -47,15 +45,15 @@ const ToggleGroupItem = React.forwardRef<
 					variant: context.variant || variant,
 					size: context.size || size,
 				}),
-        className
+				className,
 			)}
 			{...props}
 		>
 			{children}
 		</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,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps, cva } 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",
@@ -25,8 +25,8 @@ const toggleVariants = cva(
 			variant: "default",
 			size: "default",
 		},
-  }
-)
+	},
+);

 const Toggle = React.forwardRef<
 	React.ElementRef<typeof TogglePrimitive.Root>,
@@ -38,8 +38,8 @@ const Toggle = React.forwardRef<
 		className={cn(toggleVariants({ variant, size, className }))}
 		{...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,15 +1,15 @@
-"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>,
@@ -20,11 +20,11 @@ const TooltipContent = React.forwardRef<
 		sideOffset={sideOffset}
 		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",
-      className
+			className,
 		)}
 		{...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,78 +1,75 @@
-"use client"
+"use client";

 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";

-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";

-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;

 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+	id: string;
+	title?: React.ReactNode;
+	description?: React.ReactNode;
+	action?: ToastActionElement;
+};

 const actionTypes = {
 	ADD_TOAST: "ADD_TOAST",
 	UPDATE_TOAST: "UPDATE_TOAST",
 	DISMISS_TOAST: "DISMISS_TOAST",
 	REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;

-let count = 0
+let count = 0;

 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
 }

-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;

 type Action =
 	| {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+			type: ActionType["ADD_TOAST"];
+			toast: ToasterToast;
 	  }
 	| {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+			type: ActionType["UPDATE_TOAST"];
+			toast: Partial<ToasterToast>;
 	  }
 	| {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+			type: ActionType["DISMISS_TOAST"];
+			toastId?: ToasterToast["id"];
 	  }
 	| {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+			type: ActionType["REMOVE_TOAST"];
+			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)) {
-    return
+		return;
 	}

 	const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+		toastTimeouts.delete(toastId);
 		dispatch({
 			type: "REMOVE_TOAST",
 			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) {
@@ -80,27 +77,27 @@ export const reducer = (state: State, action: Action): State => {
 			return {
 				...state,
 				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+			};

 		case "UPDATE_TOAST":
 			return {
 				...state,
 				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": {
-      const { toastId } = action
+			const { toastId } = action;

 			// ! Side effects ! - This could be extracted into a dismissToast() action,
 			// but I'll keep it here for simplicity
 			if (toastId) {
-        addToRemoveQueue(toastId)
+				addToRemoveQueue(toastId);
 			} else {
 				state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+					addToRemoveQueue(toast.id);
+				});
 			}

 			return {
@@ -111,46 +108,46 @@ export const reducer = (state: State, action: Action): State => {
 								...t,
 								open: false,
 							}
-            : t
+						: t,
 				),
-      }
+			};
 		}
 		case "REMOVE_TOAST":
 			if (action.toastId === undefined) {
 				return {
 					...state,
 					toasts: [],
-        }
+				};
 			}
 			return {
 				...state,
 				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) => {
-    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) =>
 		dispatch({
 			type: "UPDATE_TOAST",
 			toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+		});
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });

 	dispatch({
 		type: "ADD_TOAST",
@@ -159,36 +156,36 @@ function toast({ ...props }: Toast) {
 			id,
 			open: true,
 			onOpenChange: (open) => {
-        if (!open) dismiss()
+				if (!open) dismiss();
 			},
 		},
-  })
+	});

 	return {
 		id: id,
 		dismiss,
 		update,
-  }
+	};
 }

 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+	const [state, setState] = React.useState<State>(memoryState);

 	React.useEffect(() => {
-    listeners.push(setState)
+		listeners.push(setState);
 		return () => {
-      const index = listeners.indexOf(setState)
+			const index = listeners.indexOf(setState);
 			if (index > -1) {
-        listeners.splice(index, 1)
+				listeners.splice(index, 1);
 			}
-    }
-  }, [state])
+		};
+	}, [state]);

 	return {
 		...state,
 		toast,
 		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 { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+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,103 +1,69 @@
-'use client'
+"use client";

 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',
-					Authorization: `Bearer ${localStorage.getItem('sub')}`,
+					"content-type": "application/json",
+					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());
 }

-/**
- * Makes an authenticated JSON POST request using axios.
- * @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 doAuthenticatedGetReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
+	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json());
 }

-/**
- * Makes an authenticated GET request to the specified route using Axios.
- *
- * @param {string} route - The route to which the GET request is sent.
- * @returns {Promise<AxiosResponse>} - A promise that resolves to the Axios response object containing the request data and response details.
- */
-async function doAuthenticatedGetReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>> {
-	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json())
+async function doAuthenticatedPatchReq<ReqT, ResT>(
+	route: string,
+	body: ReqT,
+): Promise<AxiosResponse<ResT>> {
+	return await axios.patch(baseUrl + route, body, AxiosConfigs.authenticated.json());
 }

-/**
- * Performs an authenticated PATCH request to the specified route with the given body.
- *
- * @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())
+async function doAuthenticatedDelReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
+	return await axios.delete(baseUrl + route, AxiosConfigs.authenticated.json());
 }

 //TODO form/multipart req

-
-/**
- * Perform a JSON POST request.
- *
- * @param {string} route - The route to send the request to.
- * @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 doJsonPostReq<ReqT, ResT>(
+	route: string,
+	body: ReqT,
+): Promise<AxiosResponse<ResT>> {
+	return await axios.post(baseUrl + route, body, AxiosConfigs.standard.json());
 }

-/**
- * 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>>  {
+async function doJsonGetReq<ResT>(route: string): Promise<AxiosResponse<ResT>> {
 	return await axios.get(baseUrl + route, AxiosConfigs.standard.json());
 }

@@ -106,12 +72,12 @@ const ApiRequest = {
 		post: { json: doAuthenticatedJsonPostReq },
 		patch: { json: doAuthenticatedPatchReq },
 		delete: { json: doAuthenticatedDelReq },
-		get: {json: doAuthenticatedGetReq}
+		get: { json: doAuthenticatedGetReq },
 	},
 	standard: {
 		post: { json: doJsonPostReq },
-		get: {json: doJsonGetReq}
-	}
-}
+		get: { json: doJsonGetReq },
+	},
+};

 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) {
-				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])
-
-	return [storedValue, setStoredValue]
+	}, [key, storedValue]);
+	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.
- *
- * @param {string} key - The key to be used for storing the encoded value in local storage.
- * @param {T} fallbackValue - The fallback value to be used if no value is found in local storage.
- *
- * @return {readonly [T,  React.Dispatch<React.SetStateAction<T>>]} - An array containing the encoded value and a function to update the encoded value.
+ * @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 {T} initialValue - The initial value of the state.
+ * @return {[T, React.Dispatch<React.SetStateAction<T>>]} - A tuple containing the encoded state value and the function to update it.
 */
-export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
-	const [encodedValue, setEncodedValue] = useState<T>(() => {
-		const stored = localStorage.getItem(key);
-		return stored ? safelyParse(stored, fallbackValue) : fallbackValue;
-	});
-	useEffect(() => {
-		localStorage.setItem(key, safelyStringify(encodedValue));
-	}, [key, encodedValue]);
-	return [encodedValue, setEncodedValue] as const;
+export function useEncodedLocalStorage<T>(key: string, initialValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
+	const [encodedState, setEncodedState] = useState<T>(() => getFromLocalStorage(key, initialValue));

-	function safelyParse(stored: string, fallback: T): T {
+	useEffect(() => {
+		saveToLocalStorage(key, encodedState);
+	}, [encodedState, key]);
+
+	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 {
-			return JSON.parse(atob(stored));
+		const localStorageValue = localStorage?.getItem(key);
+		if (localStorageValue) {
+			return decodeFromBase64(localStorageValue);
+		}
+		return initialValue;
 	} catch {
-			return fallback;
+		return initialValue;
 	}
 }
-	function safelyStringify(value: T): string {
+
+/**
+ * Save a value to the local storage.
+ *
+ * @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 {
-			return btoa(JSON.stringify(value));
-		} catch {
-			return btoa(JSON.stringify(fallbackValue));
+		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