add admin checks for admin pages and run biome formating 🔨

.eslintrc.json

@@ -1,8 +1,5 @@
 {
-  "extends": [
+	"extends": ["next/core-web-vitals", "next/typescript"],
-    "next/core-web-vitals",
-    "next/typescript"
-  ],
 	"rules": {
 		"@typescript-eslint/no-explicit-any": "error"
 	}

actions/payment.ts

@@ -8,7 +8,7 @@ import type {
 	ApiResponse,
 	NewPayment,
 	Payment,
-	Topup
+	Topup,
 } from "@/lib/backend-types";
 import type { TopupResponse } from "@/lib/types";
 import { handleApiResponse } from "@/utils/tryCatch";
@@ -24,7 +24,8 @@ export async function createPayment(data: NewPayment) {
 	const session = await getServerSession(authOptions);
 	console.log("data", data);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL // });
+		`${
+			process.env.SARLINK_API_BASE_URL // });
 		}/api/billing/payment/`,
 		{
 			method: "POST",
@@ -93,11 +94,17 @@ type GetPaymentProps = {
 	[key: string]: string | number | undefined; // Allow additional properties for flexibility
 };
 
-export async function getPayments(params: GetPaymentProps, allPayments = false) {
+export async function getPayments(
+	params: GetPaymentProps,
+	allPayments = false,
+) {
 	// Build query string from all defined params
 	const query = Object.entries(params)
 		.filter(([_, value]) => value !== undefined && value !== "")
-		.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+		.map(
+			([key, value]) =>
+				`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
+		)
 		.join("&");
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
@@ -122,12 +129,17 @@ export async function getPayments(params: GetPaymentProps, allPayments = false)
 	return data;
 }
 
-export async function getTopups(params: GenericGetResponseProps, all_topups = false) {
+export async function getTopups(
-
+	params: GenericGetResponseProps,
+	all_topups = false,
+) {
 	// Build query string from all defined params
 	const query = Object.entries(params)
 		.filter(([_, value]) => value !== undefined && value !== "")
-		.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+		.map(
+			([key, value]) =>
+				`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
+		)
 		.join("&");
 
 	const session = await getServerSession(authOptions);
@@ -223,17 +235,17 @@ export type VerifyDevicePaymentState = {
 	success: boolean;
 	fieldErrors: Record<string, string>;
 	payload?: FormData;
-}
+};
 
 export async function verifyDevicePayment(
 	_prevState: VerifyDevicePaymentState,
-	formData: FormData
+	formData: FormData,
 ): Promise<VerifyDevicePaymentState> {
 	const session = await getServerSession(authOptions);
 
 	// Get the payment ID and method from the form data
-	const paymentId = formData.get('paymentId') as string;
+	const paymentId = formData.get("paymentId") as string;
-	const method = formData.get('method') as "TRANSFER" | "WALLET";
+	const method = formData.get("method") as "TRANSFER" | "WALLET";
 
 	if (!paymentId) {
 		return {
@@ -266,12 +278,16 @@ export async function verifyDevicePayment(
 			},
 		);
 
-		const result = await handleApiResponse<Payment>(response, "verifyDevicePayment");
+		const result = await handleApiResponse<Payment>(
+			response,
+			"verifyDevicePayment",
+		);
 
 		revalidatePath("/payments/[paymentId]", "page");
 
 		return {
-			message: method === "WALLET"
+			message:
+				method === "WALLET"
 					? "Payment completed successfully using wallet!"
 					: "Payment verification successful!",
 			success: true,
@@ -281,7 +297,8 @@ export async function verifyDevicePayment(
 	} catch (error: unknown) {
 		if (error instanceof Error) {
 			return {
-				message: error.message || "Payment verification failed. Please try again.",
+				message:
+					error.message || "Payment verification failed. Please try again.",
 				success: false,
 				fieldErrors: {},
 			};
@@ -295,7 +312,6 @@ export async function verifyDevicePayment(
 	}
 }
 
-
 export type VerifyTopupPaymentState = {
 	transaction?: {
 		sourceBank: string;
@@ -305,15 +321,15 @@ export type VerifyTopupPaymentState = {
 	success: boolean;
 	fieldErrors: Record<string, string>;
 	payload?: FormData;
-}
+};
 export async function verifyTopupPayment(
 	_prevState: VerifyTopupPaymentState,
-	formData: FormData
+	formData: FormData,
 ): Promise<VerifyTopupPaymentState> {
 	const session = await getServerSession(authOptions);
 
 	// Get the topup ID from the form data or use a hidden input
-	const topupId = formData.get('topupId') as string;
+	const topupId = formData.get("topupId") as string;
 
 	if (!topupId) {
 		return {
@@ -335,7 +351,10 @@ export async function verifyTopupPayment(
 			},
 		);
 
-		const result = await handleApiResponse<TopupResponse>(response, "verifyTopupPayment");
+		const result = await handleApiResponse<TopupResponse>(
+			response,
+			"verifyTopupPayment",
+		);
 
 		revalidatePath("/top-ups/[topupId]", "page");
 
@@ -348,7 +367,8 @@ export async function verifyTopupPayment(
 	} catch (error: unknown) {
 		if (error instanceof Error) {
 			return {
-				message: error.message || "Please check your payment details and try again.",
+				message:
+					error.message || "Please check your payment details and try again.",
 				success: false,
 				fieldErrors: {},
 			};
@@ -361,5 +381,3 @@ export async function verifyTopupPayment(
 		}
 	}
 }
-
-

actions/user-actions.ts

@@ -9,37 +9,45 @@ import type { ApiError } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
 import { handleApiResponse } from "@/utils/tryCatch";
 
-type VerifyUserResponse = {
+type VerifyUserResponse =
-	"ok": boolean,
+	| {
-	"mismatch_fields": string[] | null,
+			ok: boolean;
-	"error": string | null,
+			mismatch_fields: string[] | null;
-	"detail": string | null
+			error: string | null;
-} | {
+			detail: string | null;
-	"message": boolean,
+	  }
+	| {
+			message: boolean;
 	  };
 export async function verifyUser(userId: string) {
 	const session = await getServerSession(authOptions);
 	if (!session?.apiToken) {
-		return { ok: false, error: 'Not authenticated' } as const;
+		return { ok: false, error: "Not authenticated" } as const;
 	}
 
 	try {
 		const r = await fetch(
 			`${process.env.SARLINK_API_BASE_URL}/api/auth/users/${userId}/verify/`,
 			{
-				method: 'PUT',
+				method: "PUT",
 				headers: {
-					'Content-Type': 'application/json',
+					"Content-Type": "application/json",
 					Authorization: `Token ${session.apiToken}`,
 				},
 			},
 		);
-		const body = (await r.json().catch(() => ({}))) as VerifyUserResponse &
+		const body = (await r.json().catch(() => ({}))) as VerifyUserResponse & {
-		{ message?: string; detail?: string };
+			message?: string;
+			detail?: string;
+		};
 
 		if (!r.ok) {
-			const msg = body?.message || body?.detail || 'User verification failed';
+			const msg = body?.message || body?.detail || "User verification failed";
-			return { ok: false, error: msg, mismatch_fields: body?.mismatch_fields || null } as const;
+			return {
+				ok: false,
+				error: msg,
+				mismatch_fields: body?.mismatch_fields || null,
+			} as const;
 		}
 
 		return { ok: true, data: body } as const;
@@ -66,7 +74,7 @@ export async function getProfile() {
 
 export async function rejectUser(
 	_prevState: RejectUserFormState,
-	formData: FormData
+	formData: FormData,
 ): Promise<RejectUserFormState> {
 	const userId = formData.get("userId") as string;
 	const rejection_details = formData.get("rejection_details") as string;
@@ -85,7 +93,9 @@ export async function rejectUser(
 
 	if (!response.ok) {
 		const errorData = await response.json();
-		throw new Error(errorData.message || errorData.detail || "Failed to reject user");
+		throw new Error(
+			errorData.message || errorData.detail || "Failed to reject user",
+		);
 	}
 
 	// Handle 204 No Content response (successful deletion)
@@ -95,11 +105,14 @@ export async function rejectUser(
 	}
 
 	revalidatePath("/users");
-	const error = await response.json()
+	const error = await response.json();
 	return {
-		message: (error as ApiError).message || (error as ApiError).detail || "An unexpected error occurred.",
+		message:
+			(error as ApiError).message ||
+			(error as ApiError).detail ||
+			"An unexpected error occurred.",
 		fieldErrors: {},
-		payload: formData
+		payload: formData,
 	};
 }
 
@@ -116,10 +129,9 @@ export type UpdateUserFormState = {
 	payload?: FormData;
 };
 
-
 export async function updateUser(
 	_prevState: UpdateUserFormState,
-	formData: FormData
+	formData: FormData,
 ): Promise<UpdateUserFormState> {
 	const userId = formData.get("userId") as string;
 	const data: Record<string, string | number | boolean> = {};
@@ -128,7 +140,7 @@ export async function updateUser(
 			data[key] = typeof value === "number" ? value : String(value);
 		}
 	}
-	console.log("data in update user action", data)
+	console.log("data in update user action", data);
 
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
@@ -142,18 +154,21 @@ export async function updateUser(
 			body: JSON.stringify(data),
 		},
 	);
-	console.log("response in update user action", response)
+	console.log("response in update user action", response);
 
 	if (!response.ok) {
 		const errorData = await response.json();
 		return {
-			message: errorData.message || errorData.detail || "An error occurred while updating the user.",
+			message:
+				errorData.message ||
+				errorData.detail ||
+				"An error occurred while updating the user.",
 			fieldErrors: errorData.field_errors || {},
 			payload: formData,
-		}
+		};
 	}
 
-	const updatedUser = await response.json() as User;
+	const updatedUser = (await response.json()) as User;
 	revalidatePath("/users/[userId]/update", "page");
 	revalidatePath("/users/[userId]/verify", "page");
 	return {
@@ -164,7 +179,7 @@ export async function updateUser(
 
 export async function updateUserAgreement(
 	_prevState: UpdateUserFormState,
-	formData: FormData
+	formData: FormData,
 ): Promise<UpdateUserFormState> {
 	const userId = formData.get("userId") as string;
 	// Remove userId from formData before sending to API
@@ -174,7 +189,7 @@ export async function updateUserAgreement(
 			apiFormData.append(key, value);
 		}
 	}
-	console.log({ apiFormData })
+	console.log({ apiFormData });
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/${userId}/agreement/`,
@@ -186,17 +201,20 @@ export async function updateUserAgreement(
 			body: apiFormData,
 		},
 	);
-	console.log("response in update user agreement action", response)
+	console.log("response in update user agreement action", response);
 	if (!response.ok) {
 		const errorData = await response.json();
 		return {
-			message: errorData.message || errorData.detail || "An error occurred while updating the user agreement.",
+			message:
+				errorData.message ||
+				errorData.detail ||
+				"An error occurred while updating the user agreement.",
 			fieldErrors: errorData.field_errors || {},
 			payload: formData,
-		}
+		};
 	}
 
-	const updatedUserAgreement = await response.json() as { agreement: string };
+	const updatedUserAgreement = (await response.json()) as { agreement: string };
 	revalidatePath("/users/[userId]/update", "page");
 	revalidatePath("/users/[userId]/verify", "page");
 	revalidatePath("/users/[userId]/agreement", "page");

app/(auth)/auth/layout.tsx

@@ -1,7 +1,8 @@
-
 export default function AuthLayout({
 	children,
-}: { children: React.ReactNode }) {
+}: {
+	children: React.ReactNode;
+}) {
 	return (
 		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
 			{children}

app/(auth)/auth/verify-otp-registration/page.tsx

@@ -11,7 +11,7 @@ export default async function VerifyRegistrationOTP({
 }: {
 	searchParams: Promise<{ phone_number: string }>;
 }) {
-	const session = await getServerSession(authOptions)
+	const session = await getServerSession(authOptions);
 	if (session) {
 		// If the user is already logged in, redirect them to the home page
 		return redirect("/");

app/(dashboard)/agreements/page.tsx

@@ -1,13 +1,11 @@
-import React from 'react'
+import React from "react";
 
 export default function Agreements() {
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">
+				<h3 className="text-sarLinkOrange text-2xl">Agreements</h3>
-          Agreements
-        </h3>
 			</div>
 		</div>
-  )
+	);
 }

app/(dashboard)/devices-to-pay/loading.tsx

@@ -1,8 +1,6 @@
-import FullPageLoader from '@/components/full-page-loader'
+import FullPageLoader from "@/components/full-page-loader";
-import React from 'react'
+import React from "react";
 
 export default function Loading() {
-  return (
+	return <FullPageLoader />;
-    <FullPageLoader />
-  )
 }

app/(dashboard)/devices/page.tsx

@@ -49,7 +49,7 @@ export default async function Devices({
 							label: "Vendor",
 							type: "string",
 							placeholder: "Enter vendor name",
-						}
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/layout.tsx

@@ -6,9 +6,9 @@ export default function DashboardLayout({
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
-	return <ApplicationLayout>
+	return (
-		<QueryProvider>
+		<ApplicationLayout>
-			{children}
+			<QueryProvider>{children}</QueryProvider>
-		</QueryProvider>
+		</ApplicationLayout>
-	</ApplicationLayout>;
+	);
 }

app/(dashboard)/parental-control/page.tsx

@@ -11,7 +11,6 @@ export default async function ParentalControl({
 		status: string;
 	}>;
 }) {
-
 	const parentalControlFilters = {
 		is_active: "true",
 		has_a_pending_payment: "false",
@@ -48,9 +47,10 @@ export default async function ParentalControl({
 							label: "Vendor",
 							type: "string",
 							placeholder: "Enter vendor name",
-            }
+						},
 					]}
-        />      </div>
+				/>{" "}
+			</div>
 			<Suspense key={(await searchParams).page} fallback={"loading...."}>
 				<DevicesTable
 					parentalControl={true}

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -31,7 +31,9 @@ export default async function PaymentPage({
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
 				<h3 className="text-sarLinkOrange text-2xl">Payment</h3>
 				<div className="flex flex-col gap-4 items-end w-full">
-					{!payment.is_expired && payment.paid && payment.status !== "PENDING" && (
+					{!payment.is_expired &&
+						payment.paid &&
+						payment.status !== "PENDING" && (
 							<Button
 								disabled
 								className={cn(

app/(dashboard)/price-calculator/page.tsx

@@ -1,8 +1,6 @@
-import PriceCalculator from '@/components/price-calculator'
+import PriceCalculator from "@/components/price-calculator";
-import React from 'react'
+import React from "react";
 
 export default function Pricing() {
-  return (
+	return <PriceCalculator />;
-    <PriceCalculator />
-  )
 }

app/(dashboard)/user-devices/page.tsx

@@ -17,7 +17,7 @@ export default async function UserDevices({
 }) {
 	const query = (await searchParams)?.query || "";
 	const session = await getServerSession(authOptions);
-	if (session?.user?.is_admin !== true) redirect("/devices?page=1");
+	if (!session?.user?.is_admin) redirect("/devices?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -55,7 +55,7 @@ export default async function UserDevices({
 							label: "Device User",
 							type: "string",
 							placeholder: "User name or id card",
-						}
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/user-payments/page.tsx

@@ -1,4 +1,7 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
 import DynamicFilter from "@/components/generic-filter";
 
@@ -13,7 +16,9 @@ export default async function UserPayments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	// const session = await getServerSession(authOptions);
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/payments?page=1");
+
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -70,9 +75,8 @@ export default async function UserPayments({
 							{ label: "All", value: "" },
 							{ label: "Wallet", value: "WALLET" },
 							{ label: "Transfer", value: "TRANSFER" },
-						]
+						],
 					},
-
 				]}
 			/>
 			<Suspense key={query} fallback={"loading...."}>

app/(dashboard)/user-topups/page.tsx

@@ -1,4 +1,7 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import { AdminTopupsTable } from "@/components/admin/admin-topup-table";
 import DynamicFilter from "@/components/generic-filter";
 
@@ -10,7 +13,8 @@ export default async function UserTopups({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-  // const session = await getServerSession(authOptions);
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/top-ups?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

app/(dashboard)/users/[userId]/agreement/page.tsx

@@ -24,10 +24,9 @@ export default async function UserUpdate({
 }) {
 	const { userId } = await params;
 	const session = await getServerSession(authOptions);
-  if (!session?.user?.is_admin) return null
+	if (!session?.user?.is_admin) return redirect("/devices?page=1");
 	const [error, user] = await tryCatch(getProfileById(userId));
 
-
 	if (error) {
 		if (error.message === "UNAUTHORIZED") {
 			redirect("/auth/signin");
@@ -39,7 +38,9 @@ export default async function UserUpdate({
 	return (
 		<div>
 			<div className="flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Upload user user agreement</h3>
+				<h3 className="text-sarLinkOrange text-2xl">
+					Upload user user agreement
+				</h3>
 			</div>
 			<UserAgreementForm user={user} />
 		</div>

app/(dashboard)/users/[userId]/update/page.tsx

@@ -24,10 +24,9 @@ export default async function UserUpdate({
 }) {
 	const { userId } = await params;
 	const session = await getServerSession(authOptions);
-  if (!session?.user?.is_admin) return null
+	if (!session?.user?.is_admin) return redirect("/devices?page=1");
 	const [error, user] = await tryCatch(getProfileById(userId));
 
-
 	if (error) {
 		if (error.message === "UNAUTHORIZED") {
 			redirect("/auth/signin");

app/(dashboard)/users/[userId]/verify/page.tsx

@@ -22,7 +22,9 @@ export default async function VerifyUserPage({
 	const userId = (await params).userId;
 	const [error, dbUser] = await tryCatch(getProfileById(userId));
 
-	const [nationalDataEror, nationalData] = await tryCatch(getNationalPerson({ idCard: dbUser?.id_card ?? "" }))
+	const [nationalDataEror, nationalData] = await tryCatch(
+		getNationalPerson({ idCard: dbUser?.id_card ?? "" }),
+	);
 	if (nationalDataEror) {
 		console.warn("Error fetching national data:", nationalDataEror);
 	}
@@ -47,19 +49,23 @@ export default async function VerifyUserPage({
 				<div className="flex flex-wrap gap-2">
 					{dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
 					{dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
-					<Link href={'update'}>
+					<Link href={"update"}>
 						<Button className="hover:cursor-pointer">
 							<PencilIcon />
 							Update User
 						</Button>
 					</Link>
-					<Link href={'agreement'}>
+					<Link href={"agreement"}>
 						<Button className="hover:cursor-pointer">
 							<FileTextIcon />
 							Update Agreement
 						</Button>
 					</Link>
-					<Link href={dbUser?.agreement || "#"} target="_blank" rel="noopener noreferrer">
+					<Link
+						href={dbUser?.agreement || "#"}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						<Button className="hover:cursor-pointer">
 							<EyeIcon />
 							View Agreement
@@ -114,9 +120,7 @@ export default async function VerifyUserPage({
 
 						<InputReadOnly
 							showCheck
-							checkTrue={
+							checkTrue={dbUserDob === nationalDob}
-								dbUserDob === nationalDob
-							}
 							labelClassName="text-sarLinkOrange"
 							label="DOB"
 							value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
@@ -134,7 +138,7 @@ export default async function VerifyUserPage({
 						/>
 					</div>
 				</div>
-				{(
+				{
 					<div id="national-information">
 						<h4 className="p-2 rounded font-semibold">National Information</h4>
 						<div className="bg-green-800/10 shadow p-2 rounded-lg border border-dashed border-green-800 space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -198,7 +202,7 @@ export default async function VerifyUserPage({
 							</div>
 						</div>
 					</div>
-				)}
+				}
 			</div>
 		</div>
 	);

app/(dashboard)/users/page.tsx

@@ -1,18 +1,19 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import DynamicFilter from "@/components/generic-filter";
 import { UsersTable } from "@/components/user-table";
 
-
 export default async function AdminUsers({
 	searchParams,
 }: {
 	searchParams: Promise<{
-		query: string;
+		[key: string]: string;
-		page: number;
-		sortBy: string;
-		status: string;
 	}>;
 }) {
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/devices?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -73,8 +74,9 @@ export default async function AdminUsers({
 								{
 									label: "Unverified",
 									value: "false",
-								}]
+								},
-						}
+							],
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/wallet/page.tsx

@@ -1,13 +1,11 @@
-import React from 'react'
+import React from "react";
 
 export default function UserWallet() {
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">
+				<h3 className="text-sarLinkOrange text-2xl">My Wallet</h3>
-          My Wallet
-        </h3>
 			</div>
 		</div>
-  )
+	);
 }

app/globals.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "tailwindcss-animate";
 @plugin "@pyncz/tailwind-mask-image";
 @plugin "tailwindcss-motion";
@@ -117,7 +117,6 @@ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-
 }
 
 .dark {
@@ -152,7 +151,6 @@ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.556 0 0);
-
 }
 
 @layer base {

app/layout.tsx

@@ -35,7 +35,9 @@ export default async function RootLayout({
 	const session = await getServerSession(authOptions);
 	return (
 		<html lang="en" suppressHydrationWarning>
-      <body className={`${barlow.variable} ${bokor.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
+			<body
+				className={`${barlow.variable} ${bokor.variable} antialiased font-sans bg-gray-100 dark:bg-black`}
+			>
 				<AuthProvider session={session || undefined}>
 					<Provider>
 						<NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
@@ -46,14 +48,11 @@ export default async function RootLayout({
 							enableSystem
 							disableTransitionOnChange
 						>
-              <QueryProvider>
+							<QueryProvider>{children}</QueryProvider>
-                {children}
-              </QueryProvider>
 						</ThemeProvider>
 					</Provider>
 				</AuthProvider>
 			</body>
-
 		</html>
 	);
 }

components/account-information.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";

components/admin/admin-devices-table.tsx

@@ -45,9 +45,7 @@ export async function AdminDevicesTable({
 	apiParams.limit = limit;
 	apiParams.offset = offset;
 
-	const [error, devices] = await tryCatch(
+	const [error, devices] = await tryCatch(getDevices(apiParams, true));
-		getDevices(apiParams, true),
-	);
 	if (error) {
 		if (error.message === "UNAUTHORIZED") {
 			redirect("/auth/signin");
@@ -78,9 +76,7 @@ export async function AdminDevicesTable({
 							</TableHeader>
 							<TableBody className="overflow-scroll">
 								{data?.map((device) => (
-									<TableRow
+									<TableRow key={device.id}>
-										key={device.id}
-									>
 										<TableCell>
 											<div className="flex flex-col items-start">
 												<Link
@@ -96,18 +92,19 @@ export async function AdminDevicesTable({
 													<div className="text-muted-foreground">
 														Active until{" "}
 														<span className="font-semibold">
-															{new Date(device.expiry_date || "").toLocaleDateString(
+															{new Date(
-																"en-US",
+																device.expiry_date || "",
-																{
+															).toLocaleDateString("en-US", {
 																month: "short",
 																day: "2-digit",
 																year: "numeric",
-																},
+															})}
-															)}
 														</span>
 													</div>
 												) : (
-													<p className="text-muted-foreground">Device Inactive</p>
+													<p className="text-muted-foreground">
+														Device Inactive
+													</p>
 												)}
 												{device.has_a_pending_payment && (
 													<Link href={`/payments/${device.pending_payment_id}`}>
@@ -121,7 +118,9 @@ export async function AdminDevicesTable({
 												{device.blocked_by === "ADMIN" && device.blocked && (
 													<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
 														<span className="font-semibold">Comment</span>
-														<p className="text-neutral-400">{device?.reason_for_blocking}</p>
+														<p className="text-neutral-400">
+															{device?.reason_for_blocking}
+														</p>
 													</div>
 												)}
 											</div>
@@ -129,12 +128,15 @@ export async function AdminDevicesTable({
 										<TableCell className="font-medium">
 											<div className="flex flex-col items-start">
 												{device?.user?.name}
-												<span className="text-muted-foreground">{device?.user?.id_card}</span>
+												<span className="text-muted-foreground">
+													{device?.user?.id_card}
+												</span>
 											</div>
-
 										</TableCell>
 										<TableCell className="font-medium">{device.mac}</TableCell>
-										<TableCell className="font-medium">{device?.vendor}</TableCell>
+										<TableCell className="font-medium">
+											{device?.vendor}
+										</TableCell>
 										<TableCell>
 											{!device.has_a_pending_payment && (
 												<BlockDeviceDialog
@@ -151,9 +153,7 @@ export async function AdminDevicesTable({
 								<TableRow>
 									<TableCell colSpan={5} className="text-muted-foreground">
 										{meta?.total === 1 ? (
-											<p className="text-center">
+											<p className="text-center">Total {meta?.total} device.</p>
-												Total {meta?.total} device.
-											</p>
 										) : (
 											<p className="text-center">
 												Total {meta?.total} devices.
@@ -170,8 +170,7 @@ export async function AdminDevicesTable({
 						currentPage={meta?.current_page}
 					/>
 				</>
-			)
+			)}
-			}
 		</div>
 	);
 }

components/admin/admin-topup-table.tsx

@@ -1,4 +1,3 @@
-import { Calendar } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTopups } from "@/actions/payment";
@@ -12,8 +11,6 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import type { Topup } from "@/lib/backend-types";
-import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 import Pagination from "../pagination";
 import { Badge } from "../ui/badge";
@@ -57,7 +54,7 @@ export async function AdminTopupsTable({
 				</div>
 			) : (
 				<>
-          <div className="hidden sm:block">
+					<div>
 						<Table className="overflow-scroll">
 							<TableCaption>Table of all topups.</TableCaption>
 							<TableHeader>
@@ -71,11 +68,12 @@ export async function AdminTopupsTable({
 							<TableBody className="overflow-scroll">
 								{topups?.data?.map((topup) => (
 									<TableRow key={topup.id}>
-
 										<TableCell>
 											<div className="flex flex-col items-start">
 												{topup?.user?.name}
-                        <span className="text-muted-foreground">{topup?.user?.id_card}</span>
+												<span className="text-muted-foreground">
+													{topup?.user?.id_card}
+												</span>
 											</div>
 										</TableCell>
 										<TableCell>
@@ -101,8 +99,7 @@ export async function AdminTopupsTable({
 											MVR
 										</TableCell>
 										<TableCell>
-                      <div
+											<div>
-                      >
 												<div className="flex items-center gap-2 mt-2">
 													<Link
 														className="font-medium hover:underline"
@@ -131,11 +128,6 @@ export async function AdminTopupsTable({
 							</TableFooter>
 						</Table>
 					</div>
-          <div className="sm:hidden block">
-            {data.map((topup) => (
-              <MobileTopupDetails key={topup.id} topup={topup} />
-            ))}
-          </div>
 					<Pagination
 						totalPages={meta?.last_page}
 						currentPage={meta?.current_page}
@@ -145,61 +137,3 @@ export async function AdminTopupsTable({
 		</div>
 	);
 }
-
-function MobileTopupDetails({ topup }: { topup: Topup }) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-start border rounded p-2 my-2",
-        topup?.paid
-          ? "bg-green-500/10 border-dashed border-green=500"
-          : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <Calendar size={16} opacity={0.5} />
-        <span className="text-muted-foreground text-sm">
-          {new Date(topup.created_at).toLocaleDateString("en-US", {
-            month: "short",
-            day: "2-digit",
-            year: "numeric",
-          })}
-        </span>
-      </div>
-      <div className="flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
-        {topup?.user?.name}
-        <span className="text-muted-foreground">{topup?.user?.id_card}</span>
-      </div>
-      <div className="flex items-center gap-2 mt-2">
-        <Link
-          className="font-medium hover:underline"
-          href={`/top-ups/${topup.id}`}
-        >
-          <Button size={"sm"} variant="outline">
-            View Details
-          </Button>
-        </Link>
-      </div>
-
-      <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
-        <div className="block sm:hidden">
-          <h3 className="text-sm font-medium">Amount</h3>
-          <span className="text-sm text-muted-foreground">
-            {topup.amount.toFixed(2)} MVR
-          </span>
-        </div>
-        <span className="font-semibold pr-2">
-          {topup.paid ? (
-            <Badge className="bg-green-100 dark:bg-green-700" variant="outline">
-              {topup.status}
-            </Badge>
-          ) : topup.is_expired ? (
-            <Badge>Expired</Badge>
-          ) : (
-            <Badge variant="secondary">{topup.status}</Badge>
-          )}
-        </span>
-      </div>
-    </div>
-  );
-}

components/auth/account-popver.tsx

@@ -54,7 +54,6 @@ export function AccountPopover() {
 							</Button>
 						</Link>
 					</div>
-
 				</div>
 			</PopoverContent>
 		</Popover>

components/auth/application-layout.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
-import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { getProfile } from "@/actions/user-actions";
 import { authOptions } from "@/app/auth";
 import { DeviceCartDrawer } from "@/components/device-cart";
@@ -19,7 +19,9 @@ import { AccountPopover } from "./account-popver";
 
 export async function ApplicationLayout({
 	children,
-}: { children: React.ReactNode }) {
+}: {
+	children: React.ReactNode;
+}) {
 	const session = await getServerSession(authOptions);
 
 	if (!session) return redirect("/auth/signin");
@@ -50,9 +52,7 @@ export async function ApplicationLayout({
 				/>
 				<DeviceCartDrawer />
 				<div className="p-4 flex flex-col flex-1 rounded-lg bg-background">
-					<NuqsAdapter>
+					<NuqsAdapter>{children}</NuqsAdapter>
-						{children}
-					</NuqsAdapter>
 				</div>
 			</SidebarInset>
 		</SidebarProvider>

components/auth/signup-form.tsx

@@ -59,7 +59,8 @@ export default function SignUpForm() {
 					<Link href="login" className="underline">
 						login
 					</Link>
-				</div>-
+				</div>
+				-
 			</>
 		);
 	}
@@ -72,9 +73,17 @@ export default function SignUpForm() {
 						{/* Logo */}
 						<div className="mb-8">
 							<div className="w-20 h-20 bg-transparent backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4">
-								<Image src="/logo.png" alt="Company Logo" height={1080} width={1080} className="w-12 h-12 text-white" />
+								<Image
+									src="/logo.png"
+									alt="Company Logo"
+									height={1080}
+									width={1080}
+									className="w-12 h-12 text-white"
+								/>
 							</div>
-							<h3 className="text-xl font-semibold dark:text-orange-100">SAR Link Portal</h3>
+							<h3 className="text-xl font-semibold dark:text-orange-100">
+								SAR Link Portal
+							</h3>
 						</div>
 
 						<h1 className="text-4xl font-bold mb-6">Welcome to Our Platform</h1>
@@ -92,7 +101,10 @@ export default function SignUpForm() {
 				<div className="max-w-sm shadow-2xl shadow-sarLinkOrange/20 h-fit my-auto mt-2 w-full bg-white dark:bg-transparent rounded-lg m-auto backdrop-blur-lg self-center border-2 border-sarLinkOrange/10 dark:border-sarLinkOrange/50">
 					<div className="py-2 px-4 my-2 space-y-2">
 						<div className="space-y-2">
-							<label htmlFor="name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="name"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								Full Name
 							</label>
 
@@ -105,7 +117,9 @@ export default function SignUpForm() {
 								name="name"
 								type="text"
 								disabled={isPending}
-								defaultValue={(actionState?.payload?.get("name") || "") as string}
+								defaultValue={
+									(actionState?.payload?.get("name") || "") as string
+								}
 								placeholder="Full Name"
 							/>
 							{actionState?.errors?.fieldErrors.name && (
@@ -115,7 +129,10 @@ export default function SignUpForm() {
 							)}
 						</div>
 						<div className="space-y-2">
-							<label htmlFor="id_card" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="id_card"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								ID Card
 							</label>
 							<Input
@@ -146,7 +163,10 @@ export default function SignUpForm() {
 						</div>
 						<div>
 							<div className="space-y-2">
-								<label htmlFor="atoll" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								<label
+									htmlFor="atoll"
+									className="text-sm font-medium text-slate-700 dark:text-slate-300"
+								>
 									Atoll
 								</label>
 								<Select
@@ -154,7 +174,9 @@ export default function SignUpForm() {
 									onValueChange={(v) => {
 										console.log({ v });
 										setAtoll(
-											atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
+											atolls?.data.find(
+												(atoll) => atoll.id === Number.parseInt(v),
+											),
 										);
 									}}
 									name="atoll_id"
@@ -181,7 +203,10 @@ export default function SignUpForm() {
 								</Select>
 							</div>
 							<div className="space-y-2">
-								<label htmlFor="island" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								<label
+									htmlFor="island"
+									className="text-sm font-medium text-slate-700 dark:text-slate-300"
+								>
 									Island
 								</label>
 								<Select disabled={isPending} name="island_id">
@@ -192,7 +217,10 @@ export default function SignUpForm() {
 										<SelectGroup>
 											<SelectLabel>Islands</SelectLabel>
 											{atoll?.islands?.map((island) => (
-												<SelectItem key={island.id} value={island.id.toString()}>
+												<SelectItem
+													key={island.id}
+													value={island.id.toString()}
+												>
 													{island.name}
 												</SelectItem>
 											))}
@@ -208,7 +236,10 @@ export default function SignUpForm() {
 						</div>
 
 						<div className="space-y-2">
-							<label htmlFor="address" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="address"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								Address
 							</label>
 							<Input
@@ -233,7 +264,10 @@ export default function SignUpForm() {
 						</div>
 
 						<div className="space-y-2">
-							<label htmlFor="dob" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="dob"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								Date of Birth
 							</label>
 							<Input
@@ -244,7 +278,9 @@ export default function SignUpForm() {
 								)}
 								name="dob"
 								disabled={isPending}
-								defaultValue={(actionState?.payload?.get("dob") || "") as string}
+								defaultValue={
+									(actionState?.payload?.get("dob") || "") as string
+								}
 								type="date"
 								placeholder="Date of birth"
 							/>
@@ -260,7 +296,10 @@ export default function SignUpForm() {
 							)}
 						</div>
 						<div className="space-y-2">
-							<label htmlFor="accNo" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="accNo"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								Account Number
 							</label>
 
@@ -273,7 +312,9 @@ export default function SignUpForm() {
 								name="accNo"
 								type="number"
 								disabled={isPending}
-								defaultValue={(actionState?.payload?.get("accNo") || "") as string}
+								defaultValue={
+									(actionState?.payload?.get("accNo") || "") as string
+								}
 								placeholder="Account no"
 							/>
 							{actionState?.errors?.fieldErrors.accNo && (
@@ -283,7 +324,10 @@ export default function SignUpForm() {
 							)}
 						</div>
 						<div className="space-y-2">
-							<label htmlFor="phone_number" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+							<label
+								htmlFor="phone_number"
+								className="text-sm font-medium text-slate-700 dark:text-slate-300"
+							>
 								Phone Number
 							</label>
 							<Input
@@ -316,7 +360,8 @@ export default function SignUpForm() {
 								<input
 									type="checkbox"
 									defaultChecked={
-										((actionState?.payload?.get("terms") || "") as string) === "on"
+										((actionState?.payload?.get("terms") || "") as string) ===
+										"on"
 									}
 									name="terms"
 									id="terms"
@@ -340,7 +385,8 @@ export default function SignUpForm() {
 								<input
 									type="checkbox"
 									defaultChecked={
-										((actionState?.payload?.get("policy") || "") as string) === "on"
+										((actionState?.payload?.get("policy") || "") as string) ===
+										"on"
 									}
 									name="policy"
 									id="terms"
@@ -372,9 +418,7 @@ export default function SignUpForm() {
 						</Link>
 					</div>
 				</div>
-
 			</form>
 		</div>
-
 	);
 }

components/auth/verify-otp-form.tsx

@@ -20,7 +20,9 @@ const OTPSchema = z.object({
 
 export default function VerifyOTPForm({
 	phone_number,
-}: { phone_number: string }) {
+}: {
+	phone_number: string;
+}) {
 	const [isPending, startTransition] = useTransition();
 	const router = useRouter();
 	console.log("verification in OTP form", phone_number);

components/auth/verify-registration-otp-form.tsx

@@ -12,7 +12,9 @@ import { useActionState } from "react";
 
 export default function VerifyRegistrationOTPForm({
 	phone_number,
-}: { phone_number: string }) {
+}: {
+	phone_number: string;
+}) {
 	console.log("verification in OTP form", phone_number);
 
 	const searchParams = useSearchParams();

components/billing/cancel-payment-button.tsx

@@ -10,14 +10,18 @@ import { Button } from "../ui/button";
 
 export default function CancelPaymentButton({
 	paymentId,
-}: { paymentId: string }) {
+}: {
+	paymentId: string;
+}) {
 	const router = useRouter();
 	const [loading, setLoading] = React.useState(false);
 	return (
 		<Button
 			onClick={async () => {
 				setLoading(true);
-				const [error, payment] = await tryCatch(cancelPayment({ id: paymentId }));
+				const [error, payment] = await tryCatch(
+					cancelPayment({ id: paymentId }),
+				);
 				console.log(payment);
 				if (error) {
 					toast.error(error.message);

components/billing/cancel-topup-button.tsx

@@ -8,9 +8,7 @@ import { cancelTopup } from "@/actions/payment";
 import { tryCatch } from "@/utils/tryCatch";
 import { Button } from "../ui/button";
 
-export default function CancelTopupButton({
+export default function CancelTopupButton({ topupId }: { topupId: string }) {
-  topupId,
-}: { topupId: string }) {
 	const router = useRouter();
 	const [loading, setLoading] = React.useState(false);
 	return (
@@ -25,7 +23,7 @@ export default function CancelTopupButton({
 					toast.success("Topup cancelled successfully!", {
 						description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
 						closeButton: true,
-          })
+					});
 					router.replace("/top-ups");
 				}
 			}}

components/billing/expiry-time-countdown.tsx

@@ -1,57 +1,67 @@
-'use client'
+"use client";
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import { Progress } from '@/components/ui/progress'
+import { Progress } from "@/components/ui/progress";
 
 const calculateTimeLeft = (expiresAt: string) => {
-  const now = Date.now()
+	const now = Date.now();
-  const expirationTime = new Date(expiresAt).getTime()
+	const expirationTime = new Date(expiresAt).getTime();
-  return Math.max(0, Math.floor((expirationTime - now) / 1000))
+	return Math.max(0, Math.floor((expirationTime - now) / 1000));
-}
+};
 
 const HumanizeTimeLeft = (seconds: number) => {
-  const minutes = Math.floor(seconds / 60)
+	const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60
+	const remainingSeconds = seconds % 60;
-  return `${minutes}m ${remainingSeconds}s`
+	return `${minutes}m ${remainingSeconds}s`;
-}
+};
 
-export default function ExpiryCountDown({ expiresAt, expiryLabel }: { expiresAt: string, expiryLabel: string }) {
+export default function ExpiryCountDown({
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(expiresAt))
+	expiresAt,
-  const [mounted, setMounted] = useState(false)
+	expiryLabel,
-  const router = useRouter()
+}: {
-  const pathname = usePathname()
+	expiresAt: string;
+	expiryLabel: string;
+}) {
+	const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(expiresAt));
+	const [mounted, setMounted] = useState(false);
+	const router = useRouter();
+	const pathname = usePathname();
 	useEffect(() => {
-    setMounted(true)
+		setMounted(true);
-  }, [])
+	}, []);
 
 	useEffect(() => {
 		const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft(expiresAt))
+			setTimeLeft(calculateTimeLeft(expiresAt));
-    }, 1000)
+		}, 1000);
 
-    return () => clearInterval(timer)
+		return () => clearInterval(timer);
-  }, [expiresAt])
+	}, [expiresAt]);
 
 	useEffect(() => {
 		if (timeLeft <= 0) {
-      router.replace(pathname)
+			router.replace(pathname);
 		}
-  }, [timeLeft, router, pathname])
+	}, [timeLeft, router, pathname]);
 
 	if (!mounted) {
-    return null
+		return null;
 	}
 	return (
-    <div className='overflow-clip relative mx-2 p-4 rounded-md border border-dashed flex items-center justify-between text-muted-foreground'>
+		<div className="overflow-clip relative mx-2 p-4 rounded-md border border-dashed flex items-center justify-between text-muted-foreground">
-      <div className='absolute inset-0 title-bg mask-b-from-0' />
+			<div className="absolute inset-0 title-bg mask-b-from-0" />
 			{timeLeft ? (
 				<span>Time left: {HumanizeTimeLeft(timeLeft)}</span>
 			) : (
 				<span>{expiryLabel} has expired.</span>
 			)}
 			{timeLeft > 0 && (
-        <Progress className='absolute bottom-0 left-0 right-0' color='#f49b5b' value={timeLeft / 600 * 100} />
+				<Progress
+					className="absolute bottom-0 left-0 right-0"
+					color="#f49b5b"
+					value={(timeLeft / 600) * 100}
+				/>
 			)}
 		</div>
-  )
+	);
 }

components/block-device-dialog.tsx

@@ -46,7 +46,10 @@ export default function BlockDeviceDialog({
 	parentalControl?: boolean;
 }) {
 	const [open, setOpen] = useState(false);
-	const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
+	const [state, formAction, isPending] = useActionState(
+		blockDeviceAction,
+		initialState,
+	);
 	const [isTransitioning, startTransition] = useTransition();
 
 	const handleSimpleBlock = () => {
@@ -99,7 +102,11 @@ export default function BlockDeviceDialog({
 	// If device is not blocked and user is not admin, show simple block button
 	if (!device.blocked && parentalControl) {
 		return (
-			<Button onClick={handleSimpleBlock} disabled={isLoading} variant="destructive">
+			<Button
+				onClick={handleSimpleBlock}
+				disabled={isLoading}
+				variant="destructive"
+			>
 				<ShieldBan />
 				{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
 			</Button>
@@ -137,10 +144,13 @@ export default function BlockDeviceDialog({
 									rows={10}
 									name="reason_for_blocking"
 									id="reason_for_blocking"
-									defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
+									defaultValue={
+										(state?.payload?.get("reason_for_blocking") || "") as string
+									}
 									className={cn(
 										"col-span-5 mt-2",
-										(state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
+										state.fieldErrors?.reason_for_blocking &&
+											"ring-2 ring-red-500",
 									)}
 								/>
 								<span className="text-sm text-red-500">

components/clickable-row.tsx

@@ -12,7 +12,11 @@ export default function ClickableRow({
 	device,
 	parentalControl,
 	admin = false,
-}: { device: Device; parentalControl?: boolean; admin?: boolean }) {
+}: {
+	device: Device;
+	parentalControl?: boolean;
+	admin?: boolean;
+}) {
 	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
 	return (

components/device-card.tsx

@@ -12,7 +12,11 @@ import { Badge } from "./ui/badge";
 export default function DeviceCard({
 	device,
 	parentalControl,
-}: { device: Device; parentalControl?: boolean, isAdmin?: boolean }) {
+}: {
+	device: Device;
+	parentalControl?: boolean;
+	isAdmin?: boolean;
+}) {
 	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
 	const isChecked = devices.some((d) => d.id === device.id);
@@ -46,7 +50,10 @@ export default function DeviceCard({
 				<div className="">
 					<div className="font-semibold flex flex-col items-start gap-2 mb-2">
 						<Link
-							className={cn("font-medium hover:underline ml-0.5", device.is_active ? "text-green-600" : "")}
+							className={cn(
+								"font-medium hover:underline ml-0.5",
+								device.is_active ? "text-green-600" : "",
+							)}
 							href={`/devices/${device.id}`}
 						>
 							{device.name}
@@ -59,7 +66,6 @@ export default function DeviceCard({
 						</Badge>
 					</div>
 
-
 					{device.is_active ? (
 						<div className="text-muted-foreground ml-0.5">
 							Active until{" "}

components/device-cart.tsx

@@ -24,7 +24,8 @@ export function DeviceCartDrawer() {
 				variant="secondary"
 			>
 				<MonitorSmartphone />
-				Pay {devices.length > 0 && `(${devices.length})`} {devices.length > 1 ? "devices" : "device"}
+				Pay {devices.length > 0 && `(${devices.length})`}{" "}
+				{devices.length > 1 ? "devices" : "device"}
 			</Button>
 			<Button
 				variant={"destructive"}

components/devices-table.tsx

@@ -52,9 +52,7 @@ export async function DevicesTable({
 	}
 	apiParams.limit = limit;
 	apiParams.offset = offset;
-	const [error, devices] = await tryCatch(
+	const [error, devices] = await tryCatch(getDevices(apiParams));
-		getDevices(apiParams),
-	);
 	if (error) {
 		if (error.message === "UNAUTHORIZED") {
 			redirect("/auth/signin");
@@ -96,9 +94,7 @@ export async function DevicesTable({
 								<TableRow>
 									<TableCell colSpan={4} className="text-muted-foreground">
 										{meta?.total === 1 ? (
-											<p className="text-center">
+											<p className="text-center">Total {meta?.total} device.</p>
-												Total {meta?.total} device.
-											</p>
 										) : (
 											<p className="text-center">
 												Total {meta?.total} devices.
@@ -123,8 +119,7 @@ export async function DevicesTable({
 						currentPage={meta?.current_page}
 					/>
 				</>
-			)
+			)}
-			}
 		</div>
 	);
 }

components/devices-to-pay.tsx

@@ -1,12 +1,11 @@
 "use client";
-import {
+import { BadgeDollarSign, Loader2, Wallet } from "lucide-react";
-	BadgeDollarSign,
-	Loader2,
-	Wallet
-} from "lucide-react";
 import { useActionState, useEffect } from "react";
 import { toast } from "sonner";
-import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
+import {
+	type VerifyDevicePaymentState,
+	verifyDevicePayment,
+} from "@/actions/payment";
 import {
 	Table,
 	TableBody,
@@ -29,9 +28,16 @@ const initialState: VerifyDevicePaymentState = {
 export default function DevicesToPay({
 	payment,
 	user,
-	disabled
+	disabled,
-}: { payment?: Payment; user?: User, disabled?: boolean }) {
+}: {
-	const [state, formAction, isPending] = useActionState(verifyDevicePayment, initialState);
+	payment?: Payment;
+	user?: User;
+	disabled?: boolean;
+}) {
+	const [state, formAction, isPending] = useActionState(
+		verifyDevicePayment,
+		initialState,
+	);
 
 	// Handle toast notifications based on state changes
 	useEffect(() => {
@@ -40,7 +46,11 @@ export default function DevicesToPay({
 				closeButton: true,
 				description: state.message,
 			});
-		} else if (!state.success && state.message && state.message !== initialState.message) {
+		} else if (
+			!state.success &&
+			state.message &&
+			state.message !== initialState.message
+		) {
 			toast.error("Payment Verification Failed", {
 				closeButton: true,
 				description: state.message,
@@ -101,7 +111,11 @@ export default function DevicesToPay({
 								<div className="flex flex-col gap-2">
 									{isWalletPayVisible && (
 										<form action={formAction}>
-											<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
+											<input
+												type="hidden"
+												name="paymentId"
+												value={payment?.id ?? ""}
+											/>
 											<input type="hidden" name="method" value="WALLET" />
 											<Button
 												disabled={isPending}
@@ -109,13 +123,19 @@ export default function DevicesToPay({
 												variant={"secondary"}
 												size={"lg"}
 											>
-												{isPending ? "Processing payment..." : "Pay with wallet"}
+												{isPending
+													? "Processing payment..."
+													: "Pay with wallet"}
 												<Wallet />
 											</Button>
 										</form>
 									)}
 									<form action={formAction}>
-										<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
+										<input
+											type="hidden"
+											name="paymentId"
+											value={payment?.id ?? ""}
+										/>
 										<input type="hidden" name="method" value="TRANSFER" />
 										<Button
 											disabled={isPending || disabled}
@@ -139,14 +159,17 @@ export default function DevicesToPay({
 						<TableRow>
 							<TableCell>Payment created</TableCell>
 							<TableCell className="text-right">
-								{new Date(payment?.created_at ?? "").toLocaleDateString("en-US", {
+								{new Date(payment?.created_at ?? "").toLocaleDateString(
+									"en-US",
+									{
 										month: "short",
 										day: "2-digit",
 										year: "numeric",
 										minute: "2-digit",
 										hour: "2-digit",
 										second: "2-digit",
-								})}
+									},
+								)}
 							</TableCell>
 						</TableRow>
 						<TableRow>
@@ -160,7 +183,6 @@ export default function DevicesToPay({
 							<TableCell className="text-right text-xl">
 								{payment?.number_of_months} Months
 							</TableCell>
-
 						</TableRow>
 					</TableBody>
 					<TableFooter>
@@ -176,5 +198,3 @@ export default function DevicesToPay({
 		</div>
 	);
 }
-
-

components/devices/device-filter.tsx

@@ -1,13 +1,22 @@
-"use client"
+"use client";
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
+import {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "@/components/ui/drawer";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import { ListFilter, Loader2, X } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useQueryState } from "nuqs";
-import { useState, useTransition } from 'react';
+import { useState, useTransition } from "react";
 export default function DeviceFilter() {
 	const { replace } = useRouter();
 
@@ -17,16 +26,15 @@ export default function DeviceFilter() {
 	const pathname = usePathname();
 	const params = new URLSearchParams(searchParams.toString());
 
-
 	const [urlInputName] = useQueryState("name", {
-    clearOnDefault: true
+		clearOnDefault: true,
-  })
+	});
 	const [urlInputMac] = useQueryState("mac", {
-    clearOnDefault: true
+		clearOnDefault: true,
-  })
+	});
 	const [urlInputVendor] = useQueryState("vendor", {
-    clearOnDefault: true
+		clearOnDefault: true,
-  })
+	});
 
 	// Local state for input fields
 	const [inputName, setInputName] = useState(urlInputName ?? "");
@@ -34,16 +42,29 @@ export default function DeviceFilter() {
 	const [inputVendor, setInputVendor] = useState(urlInputVendor ?? "");
 
 	// Map filter keys to their state setters
-  const filterSetters: Record<string, React.Dispatch<React.SetStateAction<string>>> = {
+	const filterSetters: Record<
+		string,
+		React.Dispatch<React.SetStateAction<string>>
+	> = {
 		name: setInputName,
 		mac: setInputMac,
 		vendor: setInputVendor,
 	};
-  function handleSearch({ name, mac, vendor }: { name: string; mac: string; vendor: string }) {
+	function handleSearch({
-
+		name,
-    if (name) params.set("name", name); else params.delete("name");
+		mac,
-    if (mac) params.set("mac", mac); else params.delete("mac");
+		vendor,
-    if (vendor) params.set("vendor", vendor); else params.delete("vendor");
+	}: {
+		name: string;
+		mac: string;
+		vendor: string;
+	}) {
+		if (name) params.set("name", name);
+		else params.delete("name");
+		if (mac) params.set("mac", mac);
+		else params.delete("mac");
+		if (vendor) params.set("vendor", vendor);
+		else params.delete("vendor");
 		params.set("page", "1");
 
 		startTransition(() => {
@@ -54,12 +75,16 @@ export default function DeviceFilter() {
 	const appliedFilters = searchParams
 		.toString()
 		.split("&")
-    .filter((filter) => !filter.startsWith("page=") && filter)
+		.filter((filter) => !filter.startsWith("page=") && filter);
 	return (
 		<div className="flex flex-col items-start justify-start gap-2 w-full">
 			<Drawer open={isOpen} onOpenChange={setIsOpen}>
 				<DrawerTrigger asChild>
-          <Button className="w-full sm:w-48 flex items-end justify-between" onClick={() => setIsOpen(!isOpen)} variant="outline">
+					<Button
+						className="w-full sm:w-48 flex items-end justify-between"
+						onClick={() => setIsOpen(!isOpen)}
+						variant="outline"
+					>
 						Filter
 						<ListFilter />
 					</Button>
@@ -69,9 +94,7 @@ export default function DeviceFilter() {
 						<DrawerHeader>
 							<DrawerTitle>Device Filters</DrawerTitle>
 							<DrawerDescription asChild>
-                <div>
+								<div>Select your desired filters here</div>
-                  Select your desired filters here
-                </div>
 							</DrawerDescription>
 						</DrawerHeader>
 
@@ -79,17 +102,17 @@ export default function DeviceFilter() {
 							<Input
 								placeholder="Device name ..."
 								value={inputName || searchParams.get("name") || ""}
-                onChange={e => setInputName(e.target.value)}
+								onChange={(e) => setInputName(e.target.value)}
 							/>
 							<Input
 								placeholder="Device Mac address ..."
 								value={inputMac || searchParams.get("mac") || ""}
-                onChange={e => setInputMac(e.target.value)}
+								onChange={(e) => setInputMac(e.target.value)}
 							/>
 							<Input
 								placeholder="Device vendor ..."
 								value={inputVendor || searchParams.get("vendor") || ""}
-                onChange={e => setInputVendor(e.target.value)}
+								onChange={(e) => setInputVendor(e.target.value)}
 							/>
 						</div>
 						<DrawerFooter className="max-w-sm mx-auto">
@@ -107,17 +130,18 @@ export default function DeviceFilter() {
 										<Loader2 className="ml-2 animate-spin" />
 									</>
 								) : (
-                  <>
+									<>Apply Filters</>
-                    Apply Filters
-                  </>
 								)}
 							</Button>
-              <Button variant="secondary" onClick={() => {
+							<Button
+								variant="secondary"
+								onClick={() => {
 									setInputName("");
 									setInputMac("");
 									setInputVendor("");
-                replace(pathname)
+									replace(pathname);
-              }}>
+								}}
+							>
 								Clear Filters
 							</Button>
 
@@ -133,11 +157,13 @@ export default function DeviceFilter() {
 					<Badge
 						aria-disabled={disabled}
 						variant={"outline"}
-            className={cn("flex p-2 gap-2 items-center justify-between", { "opacity-50 pointer-events-none": disabled })}
+						className={cn("flex p-2 gap-2 items-center justify-between", {
-            key={filter}>
+							"opacity-50 pointer-events-none": disabled,
+						})}
+						key={filter}
+					>
 						<span className="text-md">{prettyPrintFilter(filter)}</span>
-            {
+						{disabled ? (
-              disabled ? (
 							<Loader2 className="animate-spin" size={16} />
 						) : (
 							<X
@@ -157,8 +183,7 @@ export default function DeviceFilter() {
 							>
 								Remove
 							</X>
-              )
+						)}
-            }
 					</Badge>
 				))}
 			</div>
@@ -166,18 +191,28 @@ export default function DeviceFilter() {
 	);
 }
 
-
 function prettyPrintFilter(filter: string) {
 	const [key, value] = filter.split("=");
 	switch (key) {
 		case "name":
-      return <p>Device Name: <span className="text-muted-foreground">{value}</span></p>;
+			return (
+				<p>
+					Device Name: <span className="text-muted-foreground">{value}</span>
+				</p>
+			);
 		case "mac":
-      return <p>MAC Address: <span className="text-muted-foreground">{value}</span></p>;
+			return (
+				<p>
+					MAC Address: <span className="text-muted-foreground">{value}</span>
+				</p>
+			);
 		case "vendor":
-      return <p>Vendor: <span className="text-muted-foreground">{value}</span></p>;
+			return (
+				<p>
+					Vendor: <span className="text-muted-foreground">{value}</span>
+				</p>
+			);
 		default:
 			return filter;
 	}
 }
-

components/full-page-loader.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
-import { Loader2 } from 'lucide-react'
+import { Loader2 } from "lucide-react";
 export default function FullPageLoader() {
 	return (
-    <div className='flex items-center justify-center h-screen'>
+		<div className="flex items-center justify-center h-screen">
-      <Loader2 className='animate-spin' />
+			<Loader2 className="animate-spin" />
 		</div>
-  )
+	);
 }

components/generic-filter.tsx

@@ -181,11 +181,10 @@ export default function DynamicFilter<
 				const maxValue = searchParams.get(`${input.name}_max`);
 				const parsedMin = minValue ? Number(minValue) : input.min;
 				const parsedMax = maxValue ? Number(maxValue) : input.max;
-        (initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
+				(initialState as FilterValues<TFilterKeys, TInputs>)[input.name] = [
-          [parsedMin, parsedMax] as FilterValues<
+					parsedMin,
-            TFilterKeys,
+					parsedMax,
-            TInputs
+				] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
-          >[typeof input.name];
 			} else {
 				(initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
 					(urlValue || "") as FilterValues<
@@ -227,8 +226,7 @@ export default function DynamicFilter<
 		};
 
 	// Handler for dual range slider changes
-  const handleDualRangeChange =
+	const handleDualRangeChange = (name: TFilterKeys) => (values: number[]) => {
-    (name: TFilterKeys) => (values: number[]) => {
 		setInputValues((prev) => ({
 			...prev,
 			[name]: values,
@@ -253,7 +251,10 @@ export default function DynamicFilter<
 			} else if (input.type === "dual-range-slider") {
 				const rangeValues = value as number[];
 				// Only set params if values are different from the default min/max
-        if (rangeValues.length === 2 && (rangeValues[0] !== input.min || rangeValues[1] !== input.max)) {
+				if (
+					rangeValues.length === 2 &&
+					(rangeValues[0] !== input.min || rangeValues[1] !== input.max)
+				) {
 					newParams.set(`${input.name}_min`, rangeValues[0].toString());
 					newParams.set(`${input.name}_max`, rangeValues[1].toString());
 				} else {
@@ -290,8 +291,15 @@ export default function DynamicFilter<
 			} else if (input.type === "dual-range-slider") {
 				(clearedInputState as FilterValues<TFilterKeys, TInputs>)[
 					input.name as TFilterKeys
-        ] = [input.min, input.max] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
+				] = [input.min, input.max] as FilterValues<
-      } else if (input.type === "radio-group" || input.type === "string" || input.type === "number") {
+					TFilterKeys,
+					TInputs
+				>[typeof input.name];
+			} else if (
+				input.type === "radio-group" ||
+				input.type === "string" ||
+				input.type === "number"
+			) {
 				(clearedInputState as FilterValues<TFilterKeys, TInputs>)[
 					input.name as TFilterKeys
 				] = "" as FilterValues<TFilterKeys, TInputs>[typeof input.name];
@@ -378,7 +386,9 @@ export default function DynamicFilter<
 		}
 		if (config.type === "dual-range-slider") {
 			const rangeValues = value as number[];
-      const formatLabel = config.formatLabel || ((val: number | undefined) => val?.toString() || "");
+			const formatLabel =
+				config.formatLabel ||
+				((val: number | undefined) => val?.toString() || "");
 			return (
 				<p>
 					{config.label}:{" "}
@@ -396,14 +406,16 @@ export default function DynamicFilter<
 				const displayValue = option?.label || stringValue;
 				return (
 					<p>
-            {config.label}: <span className="text-muted-foreground">{displayValue}</span>
+						{config.label}:{" "}
+						<span className="text-muted-foreground">{displayValue}</span>
 					</p>
 				);
 			}
 			// For other values, display as normal
 			return (
 				<p>
-          {config.label}: <span className="text-muted-foreground">{stringValue}</span>
+					{config.label}:{" "}
+					<span className="text-muted-foreground">{stringValue}</span>
 				</p>
 			);
 		}
@@ -501,7 +513,12 @@ export default function DynamicFilter<
 												</Label>
 												<div className="px-3 py-2 mt-5">
 													<DualRangeSlider
-                            label={(value) => <span className="text-xs">{value}{input.sliderLabel}</span>}
+														label={(value) => (
+															<span className="text-xs">
+																{value}
+																{input.sliderLabel}
+															</span>
+														)}
 														value={inputValues[input.name] as number[]}
 														onValueChange={handleDualRangeChange(input.name)}
 														min={input.min}

components/how-to-get-mac.tsx

@@ -1,21 +1,16 @@
-import { PhoneIcon } from "lucide-react"
+import { PhoneIcon } from "lucide-react";
-import Link from "next/link"
+import Link from "next/link";
 import {
 	Accordion,
 	AccordionContent,
 	AccordionItem,
 	AccordionTrigger,
-} from "@/components/ui/accordion"
+} from "@/components/ui/accordion";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-
 
 export function GetMacAccordion() {
 	return (
-    <Accordion
+		<Accordion type="single" collapsible className="w-full">
-      type="single"
-      collapsible
-      className="w-full"
-    >
 			<AccordionItem value="item-1">
 				<AccordionTrigger>How do I find my MAC Address?</AccordionTrigger>
 				<AccordionContent className="flex flex-col gap-4 text-start">
@@ -46,19 +41,15 @@ export function GetMacAccordion() {
 						<AccordionItem value="windows">
 							<AccordionTrigger>Windows Laptop</AccordionTrigger>
 							<AccordionContent>
-                Settings ➜ Network and Internet ➜ Wi-Fi ➜ Hardware
+								Settings ➜ Network and Internet ➜ Wi-Fi ➜ Hardware Properties ➜
-                Properties ➜ Physical address (MAC):
+								Physical address (MAC):
 							</AccordionContent>
 						</AccordionItem>
 						<AccordionItem value="other">
 							<AccordionTrigger>Other Device</AccordionTrigger>
 							<AccordionContent>
-                <p>
+								<p>Please contact SAR Link for assistance.</p>
-                  Please contact SAR Link for assistance.
+								<Link href="tel:+9609198026">
-                </p>
-                <Link
-                  href="tel:+9609198026"
-                >
 									<Button className="mt-4">
 										<PhoneIcon className="mr-2" />
 										9198026
@@ -70,5 +61,5 @@ export function GetMacAccordion() {
 				</AccordionContent>
 			</AccordionItem>
 		</Accordion>
-  )
+	);
 }

components/input-read-only.tsx

@@ -1,19 +1,33 @@
-import { CheckCheck, X } from 'lucide-react';
+import { CheckCheck, X } from "lucide-react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-export default function InputReadOnly({ label, value, labelClassName, className, showCheck = true, checkTrue = false }: {
+export default function InputReadOnly({
+	label,
+	value,
+	labelClassName,
+	className,
+	showCheck = true,
+	checkTrue = false,
+}: {
 	label: string;
 	value: string;
 	labelClassName?: string;
 	className?: string;
 	showCheck?: boolean;
-  checkTrue?: boolean
+	checkTrue?: boolean;
 }) {
 	return (
-    <div className={cn("relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none col-span-2 sm:col-span-1", className)}>
+		<div
+			className={cn(
+				"relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none col-span-2 sm:col-span-1",
+				className,
+			)}
+		>
 			<div>
-
+				<label
-        <label htmlFor="input-33" className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}>
+					htmlFor="input-33"
+					className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}
+				>
 					{label}
 				</label>
 				<input
@@ -29,13 +43,12 @@ export default function InputReadOnly({ label, value, labelClassName, className,
 			{showCheck && (
 				<div>
 					{checkTrue ? (
-            <CheckCheck className='mx-4 text-green-500' />
+						<CheckCheck className="mx-4 text-green-500" />
 					) : (
-            <X className='mx-4 text-red-500' />
+						<X className="mx-4 text-red-500" />
 					)}
 				</div>
 			)}
 		</div>
-
+	);
-  )
 }

components/number-input.tsx

@@ -9,7 +9,6 @@ import {
 	NumberField,
 } from "react-aria-components";
 
-
 export default function NumberInput({
 	maxAllowed,
 	label,
@@ -17,7 +16,14 @@ export default function NumberInput({
 	onChange,
 	className,
 	isDisabled,
-}: { maxAllowed?: number, label: string; value: number; onChange: (value: number) => void, className?: string, isDisabled?: boolean }) {
+}: {
+	maxAllowed?: number;
+	label: string;
+	value: number;
+	onChange: (value: number) => void;
+	className?: string;
+	isDisabled?: boolean;
+}) {
 	useEffect(() => {
 		if (maxAllowed) {
 			if (value > maxAllowed) {
@@ -26,7 +32,13 @@ export default function NumberInput({
 		}
 	}, [maxAllowed, value, onChange]);
 	return (
-    <NumberField isDisabled={isDisabled} className={cn(className)} value={value} minValue={0} onChange={onChange}>
+		<NumberField
+			isDisabled={isDisabled}
+			className={cn(className)}
+			value={value}
+			minValue={0}
+			onChange={onChange}
+		>
 			<div className="space-y-2">
 				<Label className="text-sm font-medium text-foreground">{label}</Label>
 				<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">

components/payments-table.tsx

@@ -189,7 +189,13 @@ export async function PaymentsTable({
 	);
 }
 
-export function MobilePaymentDetails({ payment, isAdmin = false }: { payment: Payment, isAdmin?: boolean }) {
+export function MobilePaymentDetails({
+	payment,
+	isAdmin = false,
+}: {
+	payment: Payment;
+	isAdmin?: boolean;
+}) {
 	return (
 		<div
 			className={cn(
@@ -267,7 +273,9 @@ export function MobilePaymentDetails({ payment, isAdmin = false }: { payment: Pa
 						{isAdmin && (
 							<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
 								{payment?.user?.name}
-								<span className="text-muted-foreground">{payment?.user?.id_card}</span>
+								<span className="text-muted-foreground">
+									{payment?.user?.id_card}
+								</span>
 							</div>
 						)}
 					</div>

components/price-calculator.tsx

@@ -10,7 +10,6 @@ import { useAtom } from "jotai";
 import { useEffect } from "react";
 import NumberInput from "./number-input";
 
-
 export default function PriceCalculator() {
 	const [initialPrice, setInitialPrice] = useAtom(initialPriceAtom);
 	const [discountPercentage, setDiscountPercentage] = useAtom(
@@ -36,9 +35,7 @@ export default function PriceCalculator() {
 	return (
 		<div className="border p-2 rounded-xl">
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">
+				<h3 className="text-sarLinkOrange text-2xl">Price Calculator</h3>
-          Price Calculator
-        </h3>
 			</div>
 			<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
 				{/* Initial Price Input */}
@@ -87,4 +84,3 @@ export default function PriceCalculator() {
 		</div>
 	);
 }
-

components/topup-to-pay.tsx

@@ -1,8 +1,5 @@
 "use client";
-import {
+import { BadgeDollarSign, Loader2 } from "lucide-react";
-	BadgeDollarSign,
-	Loader2
-} from "lucide-react";
 import { useActionState, useEffect } from "react";
 import { toast } from "sonner";
 import {
@@ -154,5 +151,3 @@ export default function TopupToPay({
 		</div>
 	);
 }
-
-

components/ui/accordion.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Accordion as AccordionPrimitive } from "radix-ui"
+import { Accordion as AccordionPrimitive } from "radix-ui";
-import { ChevronDownIcon } from "lucide-react"
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Accordion({
 	...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
@@ -22,7 +22,7 @@ function AccordionItem({
 			className={cn("border-b last:border-b-0", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AccordionTrigger({
@@ -36,7 +36,7 @@ function AccordionTrigger({
 				data-slot="accordion-trigger"
 				className={cn(
 					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
+					className,
 				)}
 				{...props}
 			>
@@ -44,7 +44,7 @@ function AccordionTrigger({
 				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
 			</AccordionPrimitive.Trigger>
 		</AccordionPrimitive.Header>
-  )
+	);
 }
 
 function AccordionContent({
@@ -60,7 +60,7 @@ function AccordionContent({
 		>
 			<div className={cn("pt-0 pb-4", className)}>{children}</div>
 		</AccordionPrimitive.Content>
-  )
+	);
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/alert-dialog.tsx

@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react"
+import * as React from "react";
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function AlertDialog({
 	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({
@@ -16,7 +16,7 @@ function AlertDialogTrigger({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
 	return (
 		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+	);
 }
 
 function AlertDialogPortal({
@@ -24,7 +24,7 @@ function AlertDialogPortal({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
 	return (
 		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+	);
 }
 
 function AlertDialogOverlay({
@@ -36,11 +36,11 @@ function AlertDialogOverlay({
 			data-slot="alert-dialog-overlay"
 			className={cn(
 				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogContent({
@@ -54,12 +54,12 @@ function AlertDialogContent({
 				data-slot="alert-dialog-content"
 				className={cn(
 					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+					className,
 				)}
 				{...props}
 			/>
 		</AlertDialogPortal>
-  )
+	);
 }
 
 function AlertDialogHeader({
@@ -72,7 +72,7 @@ function AlertDialogHeader({
 			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogFooter({
@@ -84,11 +84,11 @@ function AlertDialogFooter({
 			data-slot="alert-dialog-footer"
 			className={cn(
 				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogTitle({
@@ -101,7 +101,7 @@ function AlertDialogTitle({
 			className={cn("text-lg font-semibold", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogDescription({
@@ -114,7 +114,7 @@ function AlertDialogDescription({
 			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogAction({
@@ -126,7 +126,7 @@ function AlertDialogAction({
 			className={cn(buttonVariants(), className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function AlertDialogCancel({
@@ -138,7 +138,7 @@ function AlertDialogCancel({
 			className={cn(buttonVariants({ variant: "outline" }), className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 export {
@@ -153,4 +153,4 @@ export {
 	AlertDialogDescription,
 	AlertDialogAction,
 	AlertDialogCancel,
-}
+};

components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
 	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@@ -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,8 +41,8 @@ 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,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
 		className={cn("text-sm [&_p]:leading-relaxed", className)}
 		{...props}
 	/>
-))
+));
-AlertDescription.displayName = "AlertDescription"
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

components/ui/app-sidebar.tsx

@@ -146,17 +146,19 @@ export async function AppSidebar({
 	} else {
 		// Filter out ADMIN CONTROL category for non-admin users
 		const nonAdminCategories = categories.filter(
-			(category) => category.id !== "ADMIN CONTROL"
+			(category) => category.id !== "ADMIN CONTROL",
 		);
 
 		const filteredCategories = nonAdminCategories.map((category) => {
 			const filteredChildren = category.children.filter((child) => {
 				const permIdentifier = child.perm_identifier;
-				return session?.user?.user_permissions?.some((permission: Permission) => {
+				return session?.user?.user_permissions?.some(
+					(permission: Permission) => {
 						const permissionParts = permission.name.split(" ");
 						const modelNameFromPermission = permissionParts.slice(2).join(" ");
 						return modelNameFromPermission === permIdentifier;
-				});
+					},
+				);
 			});
 
 			return { ...category, children: filteredChildren };

components/ui/aspect-ratio.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
 
-const AspectRatio = AspectRatioPrimitive.Root
+const AspectRatio = AspectRatioPrimitive.Root;
 
-export { AspectRatio }
+export { AspectRatio };

components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Avatar as AvatarPrimitive } from "radix-ui"
+import { Avatar as AvatarPrimitive } from "radix-ui";
 
-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 };

components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
 	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
 		defaultVariants: {
 			variant: "default",
 		},
-  }
+	},
-)
+);
 
 export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
 	return (
 		<div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/breadcrumb.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "radix-ui";
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { ChevronRight, MoreHorizontal } from "lucide-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} />)
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb"
+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 ? SlotPrimitive.Slot : "a"
+	const Comp = asChild ? SlotPrimitive.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,8 +85,8 @@ const BreadcrumbSeparator = ({
 	>
 		{children ?? <ChevronRight />}
 	</li>
-)
+);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
 	className,
@@ -101,8 +101,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 +112,4 @@ export {
 	BreadcrumbPage,
 	BreadcrumbSeparator,
 	BreadcrumbEllipsis,
-}
+};

components/ui/button.tsx

@@ -1,8 +1,8 @@
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "radix-ui";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
 	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -32,8 +32,8 @@ const buttonVariants = cva(
 			variant: "default",
 			size: "default",
 		},
-  }
+	},
-)
+);
 
 function Button({
 	className,
@@ -43,9 +43,9 @@ function Button({
 	...props
 }: React.ComponentProps<"button"> &
 	VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+		asChild?: boolean;
 	}) {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
+	const Comp = asChild ? SlotPrimitive.Slot : "button";
 
 	return (
 		<Comp
@@ -53,7 +53,7 @@ function Button({
 			className={cn(buttonVariants({ variant, size, className }))}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/calendar.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
 	ChevronDownIcon,
 	ChevronLeftIcon,
 	ChevronRightIcon,
-} from "lucide-react"
+} from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button";
 
 function Calendar({
 	className,
@@ -21,9 +21,9 @@ function Calendar({
 	components,
 	...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+	const defaultClassNames = getDefaultClassNames();
 
 	return (
 		<DayPicker
@@ -32,7 +32,7 @@ function Calendar({
 				"bg-background group/calendar p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
 				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
 				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+				className,
 			)}
 			captionLayout={captionLayout}
 			formatters={{
@@ -44,34 +44,34 @@ function Calendar({
 				root: cn("w-fit", defaultClassNames.root),
 				months: cn(
 					"relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
+					defaultClassNames.months,
 				),
 				month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
 				nav: cn(
 					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
+					defaultClassNames.nav,
 				),
 				button_previous: cn(
 					buttonVariants({ variant: buttonVariant }),
 					"h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
+					defaultClassNames.button_previous,
 				),
 				button_next: cn(
 					buttonVariants({ variant: buttonVariant }),
 					"h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
+					defaultClassNames.button_next,
 				),
 				month_caption: cn(
 					"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
+					defaultClassNames.month_caption,
 				),
 				dropdowns: cn(
 					"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
+					defaultClassNames.dropdowns,
 				),
 				dropdown_root: cn(
 					"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
+					defaultClassNames.dropdown_root,
 				),
 				dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
 				caption_label: cn(
@@ -79,44 +79,44 @@ function Calendar({
 					captionLayout === "label"
 						? "text-sm"
 						: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+					defaultClassNames.caption_label,
 				),
 				table: "w-full border-collapse",
 				weekdays: cn("flex", defaultClassNames.weekdays),
 				weekday: cn(
 					"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
+					defaultClassNames.weekday,
 				),
 				week: cn("mt-2 flex w-full", defaultClassNames.week),
 				week_number_header: cn(
 					"w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
+					defaultClassNames.week_number_header,
 				),
 				week_number: cn(
 					"text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
+					defaultClassNames.week_number,
 				),
 				day: cn(
 					"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day
+					defaultClassNames.day,
 				),
 				range_start: cn(
 					"bg-accent rounded-l-md",
-          defaultClassNames.range_start
+					defaultClassNames.range_start,
 				),
 				range_middle: cn("rounded-none", defaultClassNames.range_middle),
 				range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
 				today: cn(
 					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+					defaultClassNames.today,
 				),
 				outside: cn(
 					"text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+					defaultClassNames.outside,
 				),
 				disabled: cn(
 					"text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+					defaultClassNames.disabled,
 				),
 				hidden: cn("invisible", defaultClassNames.hidden),
 				...classNames,
@@ -130,13 +130,13 @@ function Calendar({
 							className={cn(className)}
 							{...props}
 						/>
-          )
+					);
 				},
 				Chevron: ({ className, orientation, ...props }) => {
 					if (orientation === "left") {
 						return (
 							<ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+						);
 					}
 
 					if (orientation === "right") {
@@ -145,12 +145,12 @@ function Calendar({
 								className={cn("size-4", className)}
 								{...props}
 							/>
-            )
+						);
 					}
 
 					return (
 						<ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+					);
 				},
 				DayButton: CalendarDayButton,
 				WeekNumber: ({ children, ...props }) => {
@@ -160,13 +160,13 @@ function Calendar({
 								{children}
 							</div>
 						</td>
-          )
+					);
 				},
 				...components,
 			}}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CalendarDayButton({
@@ -175,12 +175,12 @@ function CalendarDayButton({
 	modifiers,
 	...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+	const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+	const ref = React.useRef<HTMLButtonElement>(null);
 	React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
+		if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused])
+	}, [modifiers.focused]);
 
 	return (
 		<Button
@@ -200,11 +200,11 @@ function CalendarDayButton({
 			className={cn(
 				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
 				defaultClassNames.day,
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

components/ui/card.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";
 
 const Card = React.forwardRef<
 	HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"rounded-xl border bg-card text-card-foreground shadow",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-Card.displayName = "Card"
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
 	HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
 		className={cn("flex flex-col space-y-1.5 p-6", className)}
 		{...props}
 	/>
-))
+));
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
 	HTMLDivElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
 		className={cn("font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
-))
+));
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
 	HTMLDivElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
+));
-CardDescription.displayName = "CardDescription"
+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,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
 		className={cn("flex items-center p-6 pt-0", className)}
 		{...props}
 	/>
-))
+));
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

components/ui/carousel.tsx

@@ -1,45 +1,45 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import useEmblaCarousel, {
 	type UseEmblaCarouselType,
-} from "embla-carousel-react"
+} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
+type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0]
+type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
+	opts?: CarouselOptions;
-  plugins?: CarouselPlugin
+	plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical"
+	orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void
+	setApi?: (api: CarouselApi) => void;
-}
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1]
+	api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void
+	scrollPrev: () => void;
-  scrollNext: () => void
+	scrollNext: () => void;
-  canScrollPrev: boolean
+	canScrollPrev: boolean;
-  canScrollNext: boolean
+	canScrollNext: boolean;
-} & CarouselProps
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+	const context = React.useContext(CarouselContext);
 
 	if (!context) {
-    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<
@@ -56,69 +56,69 @@ const Carousel = React.forwardRef<
 			children,
 			...props
 		},
-    ref
+		ref,
 	) => {
 		const [carouselRef, api] = useEmblaCarousel(
 			{
 				...opts,
 				axis: orientation === "horizontal" ? "x" : "y",
 			},
-      plugins
+			plugins,
-    )
+		);
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
 
 		const onSelect = React.useCallback((api: CarouselApi) => {
 			if (!api) {
-        return
+				return;
 			}
 
-      setCanScrollPrev(api.canScrollPrev())
+			setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext())
+			setCanScrollNext(api.canScrollNext());
-    }, [])
+		}, []);
 
 		const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
+			api?.scrollPrev();
-    }, [api])
+		}, [api]);
 
 		const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
+			api?.scrollNext();
-    }, [api])
+		}, [api]);
 
 		const handleKeyDown = React.useCallback(
 			(event: React.KeyboardEvent<HTMLDivElement>) => {
 				if (event.key === "ArrowLeft") {
-          event.preventDefault()
+					event.preventDefault();
-          scrollPrev()
+					scrollPrev();
 				} else if (event.key === "ArrowRight") {
-          event.preventDefault()
+					event.preventDefault();
-          scrollNext()
+					scrollNext();
 				}
 			},
-      [scrollPrev, scrollNext]
+			[scrollPrev, scrollNext],
-    )
+		);
 
 		React.useEffect(() => {
 			if (!api || !setApi) {
-        return
+				return;
 			}
 
-      setApi(api)
+			setApi(api);
-    }, [api, setApi])
+		}, [api, setApi]);
 
 		React.useEffect(() => {
 			if (!api) {
-        return
+				return;
 			}
 
-      onSelect(api)
+			onSelect(api);
-      api.on("reInit", onSelect)
+			api.on("reInit", onSelect);
-      api.on("select", onSelect)
+			api.on("select", onSelect);
 
 			return () => {
-        api?.off("select", onSelect)
+				api?.off("select", onSelect);
-      }
+			};
-    }, [api, onSelect])
+		}, [api, onSelect]);
 
 		return (
 			<CarouselContext.Provider
@@ -145,16 +145,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 +163,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 +186,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 +210,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 +219,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 +239,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 +248,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 +259,4 @@ export {
 	CarouselItem,
 	CarouselPrevious,
 	CarouselNext,
-}
+};

components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { Check } from "lucide-react"
+import { Check } from "lucide-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 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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 };

components/ui/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 
-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 };

components/ui/command.tsx

@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk"
+import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react"
+import { SearchIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
 	DialogHeader,
 	DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/components/ui/dialog";
 
 function Command({
 	className,
@@ -22,11 +22,11 @@ function Command({
 			data-slot="command"
 			className={cn(
 				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandDialog({
@@ -37,10 +37,10 @@ function CommandDialog({
 	showCloseButton = true,
 	...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
+	title?: string;
-  description?: string
+	description?: string;
-  className?: string
+	className?: string;
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
 	return (
 		<Dialog {...props}>
@@ -57,7 +57,7 @@ function CommandDialog({
 				</Command>
 			</DialogContent>
 		</Dialog>
-  )
+	);
 }
 
 function CommandInput({
@@ -74,12 +74,12 @@ function CommandInput({
 				data-slot="command-input"
 				className={cn(
 					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
+					className,
 				)}
 				{...props}
 			/>
 		</div>
-  )
+	);
 }
 
 function CommandList({
@@ -91,11 +91,11 @@ function CommandList({
 			data-slot="command-list"
 			className={cn(
 				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandEmpty({
@@ -107,7 +107,7 @@ function CommandEmpty({
 			className="py-6 text-center text-sm"
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandGroup({
@@ -119,11 +119,11 @@ function CommandGroup({
 			data-slot="command-group"
 			className={cn(
 				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandSeparator({
@@ -136,7 +136,7 @@ function CommandSeparator({
 			className={cn("bg-border -mx-1 h-px", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandItem({
@@ -148,11 +148,11 @@ function CommandItem({
 			data-slot="command-item"
 			className={cn(
 				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CommandShortcut({
@@ -164,11 +164,11 @@ function CommandShortcut({
 			data-slot="command-shortcut"
 			className={cn(
 				"text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 export {
@@ -181,4 +181,4 @@ export {
 	CommandItem,
 	CommandShortcut,
 	CommandSeparator,
-}
+};

components/ui/context-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-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-32 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 origin-(--radix-context-menu-content-transform-origin)",
-      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 max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-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 origin-(--radix-context-menu-content-transform-origin)",
-        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,9 @@ const ContextMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</ContextMenuPrimitive.CheckboxItem>
-))
+));
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+	ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -121,7 +121,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 +132,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 +146,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 +162,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,
@@ -173,13 +173,13 @@ const ContextMenuShortcut = ({
 		<span
 			className={cn(
 				"ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-}
+};
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
 	ContextMenu,
@@ -197,4 +197,4 @@ export {
 	ContextMenuSubContent,
 	ContextMenuSubTrigger,
 	ContextMenuRadioGroup,
-}
+};

components/ui/datepicker.tsx

@@ -1,75 +1,82 @@
-import { eachMonthOfInterval, endOfYear, format, startOfYear } from "date-fns"
+import { eachMonthOfInterval, endOfYear, format, startOfYear } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react"
+import { Calendar as CalendarIcon } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar"
+import { Calendar } from "@/components/ui/calendar";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/components/ui/popover";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/select";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface DatePickerProps {
-  date: Date | undefined
+	date: Date | undefined;
-  setDate: (date: Date | undefined) => void
+	setDate: (date: Date | undefined) => void;
 }
 
 export function DatePicker({ date, setDate }: DatePickerProps) {
-  const [month, setMonth] = React.useState<number>(date ? date.getMonth() : new Date().getMonth())
+	const [month, setMonth] = React.useState<number>(
-  const [year, setYear] = React.useState<number>(date ? date.getFullYear() : new Date().getFullYear())
+		date ? date.getMonth() : new Date().getMonth(),
+	);
+	const [year, setYear] = React.useState<number>(
+		date ? date.getFullYear() : new Date().getFullYear(),
+	);
 
 	const years = React.useMemo(() => {
-    const currentYear = new Date().getFullYear()
+		const currentYear = new Date().getFullYear();
-    return Array.from({ length: currentYear - 1900 + 1 }, (_, i) => currentYear - i)
+		return Array.from(
-  }, [])
+			{ length: currentYear - 1900 + 1 },
+			(_, i) => currentYear - i,
+		);
+	}, []);
 
 	const months = React.useMemo(() => {
 		if (year) {
 			return eachMonthOfInterval({
 				start: startOfYear(new Date(year, 0, 1)),
-        end: endOfYear(new Date(year, 0, 1))
+				end: endOfYear(new Date(year, 0, 1)),
-      })
+			});
 		}
-    return []
+		return [];
-  }, [year])
+	}, [year]);
 
 	React.useEffect(() => {
 		if (date) {
-      setMonth(date.getMonth())
+			setMonth(date.getMonth());
-      setYear(date.getFullYear())
+			setYear(date.getFullYear());
 		}
-  }, [date])
+	}, [date]);
 
 	const handleYearChange = (selectedYear: string) => {
-    const newYear = Number.parseInt(selectedYear, 10)
+		const newYear = Number.parseInt(selectedYear, 10);
-    setYear(newYear)
+		setYear(newYear);
 		if (date) {
-      const newDate = new Date(date)
+			const newDate = new Date(date);
-      newDate.setFullYear(newYear)
+			newDate.setFullYear(newYear);
-      setDate(newDate)
+			setDate(newDate);
-    }
 		}
+	};
 
 	const handleMonthChange = (selectedMonth: string) => {
-    const newMonth = Number.parseInt(selectedMonth, 10)
+		const newMonth = Number.parseInt(selectedMonth, 10);
-    setMonth(newMonth)
+		setMonth(newMonth);
 		if (date) {
-      const newDate = new Date(date)
+			const newDate = new Date(date);
-      newDate.setMonth(newMonth)
+			newDate.setMonth(newMonth);
-      setDate(newDate)
+			setDate(newDate);
 		} else {
-      setDate(new Date(year, newMonth, 1))
+			setDate(new Date(year, newMonth, 1));
-    }
 		}
+	};
 
 	return (
 		<Popover>
@@ -78,7 +85,7 @@ export function DatePicker({ date, setDate }: DatePickerProps) {
 					variant={"outline"}
 					className={cn(
 						"w-full justify-start text-left font-normal",
-            !date && "text-muted-foreground"
+						!date && "text-muted-foreground",
 					)}
 				>
 					<CalendarIcon className="mr-2 h-4 w-4" />
@@ -118,12 +125,12 @@ export function DatePicker({ date, setDate }: DatePickerProps) {
 					onSelect={setDate}
 					month={new Date(year, month)}
 					onMonthChange={(newMonth) => {
-            setMonth(newMonth.getMonth())
+						setMonth(newMonth.getMonth());
-            setYear(newMonth.getFullYear())
+						setYear(newMonth.getFullYear());
 					}}
 					initialFocus
 				/>
 			</PopoverContent>
 		</Popover>
-  )
+	);
 }

components/ui/dialog.tsx

@@ -1,33 +1,33 @@
-"use client"
+"use client";
 
-import { XIcon } from "lucide-react"
+import { XIcon } from "lucide-react";
-import { Dialog as DialogPrimitive } from "radix-ui"
+import { Dialog as DialogPrimitive } from "radix-ui";
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Dialog({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
 			data-slot="dialog-overlay"
 			className={cn(
 				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
 	showCloseButton = true,
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
 	return (
 		<DialogPortal data-slot="dialog-portal">
@@ -61,7 +61,7 @@ function DialogContent({
 				data-slot="dialog-content"
 				className={cn(
 					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+					className,
 				)}
 				{...props}
 			>
@@ -77,7 +77,7 @@ function DialogContent({
 				)}
 			</DialogPrimitive.Content>
 		</DialogPortal>
-  )
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="dialog-footer"
 			className={cn(
 				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
 			className={cn("text-lg leading-none font-semibold", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
 			className={cn("text-start text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 export {
@@ -140,4 +140,4 @@ export {
 	DialogPortal,
 	DialogTitle,
 	DialogTrigger,
-}
+};

components/ui/drawer.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Drawer = ({
 	shouldScaleBackground = true,
@@ -13,14 +13,14 @@ const Drawer = ({
 		shouldScaleBackground={shouldScaleBackground}
 		{...props}
 	/>
-)
+);
-Drawer.displayName = "Drawer"
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +31,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 +44,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,8 +52,8 @@ const DrawerContent = React.forwardRef<
 			{children}
 		</DrawerPrimitive.Content>
 	</DrawerPortal>
-))
+));
-DrawerContent.displayName = "DrawerContent"
+DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
 	className,
@@ -63,8 +63,8 @@ const DrawerHeader = ({
 		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 		{...props}
 	/>
-)
+);
-DrawerHeader.displayName = "DrawerHeader"
+DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
 	className,
@@ -74,8 +74,8 @@ const DrawerFooter = ({
 		className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 		{...props}
 	/>
-)
+);
-DrawerFooter.displayName = "DrawerFooter"
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -85,12 +85,12 @@ const DrawerTitle = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"text-lg font-semibold leading-none tracking-tight",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,8 +101,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 +115,4 @@ export {
 	DrawerFooter,
 	DrawerTitle,
 	DrawerDescription,
-}
+};

components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-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,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		className={cn(
 			"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	>
 		{children}
 		<ChevronRight className="ml-auto" />
 	</DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+	DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"z-50 min-w-32 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 origin-(--radix-dropdown-menu-content-transform-origin)",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+	DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -67,18 +67,18 @@ const DropdownMenuContent = React.forwardRef<
 			className={cn(
 				"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-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 origin-(--radix-dropdown-menu-content-transform-origin)",
-        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
@@ -86,12 +86,12 @@ const DropdownMenuItem = React.forwardRef<
 		className={cn(
 			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -101,7 +101,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}
@@ -113,9 +113,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+	DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -125,7 +125,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}
 	>
@@ -136,13 +136,13 @@ 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
@@ -150,12 +150,12 @@ const DropdownMenuLabel = React.forwardRef<
 		className={cn(
 			"px-2 py-1.5 text-sm font-semibold",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -166,8 +166,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,
@@ -178,9 +178,9 @@ const DropdownMenuShortcut = ({
 			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
 			{...props}
 		/>
-  )
+	);
-}
+};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
 	DropdownMenu,
@@ -198,4 +198,4 @@ export {
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
 	DropdownMenuRadioGroup,
-}
+};

components/ui/dual-range-slider.tsx

@@ -1,25 +1,31 @@
-'use client';
+"use client";
 
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from 'react';
+import * as React from "react";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-interface DualRangeSliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {
+interface DualRangeSliderProps
-  labelPosition?: 'top' | 'bottom';
+	extends React.ComponentProps<typeof SliderPrimitive.Root> {
+	labelPosition?: "top" | "bottom";
 	label?: (value: number | undefined) => React.ReactNode;
 }
 
 const DualRangeSlider = React.forwardRef<
 	React.ElementRef<typeof SliderPrimitive.Root>,
 	DualRangeSliderProps
->(({ className, label, labelPosition = 'top', ...props }, ref) => {
+>(({ className, label, labelPosition = "top", ...props }, ref) => {
-  const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];
+	const initialValue = Array.isArray(props.value)
+		? props.value
+		: [props.min, props.max];
 
 	return (
 		<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">
@@ -31,9 +37,9 @@ const DualRangeSlider = React.forwardRef<
 						{label && (
 							<span
 								className={cn(
-                  'absolute flex w-full justify-center',
+									"absolute flex w-full justify-center",
-                  labelPosition === 'top' && '-top-7',
+									labelPosition === "top" && "-top-7",
-                  labelPosition === 'bottom' && 'top-4',
+									labelPosition === "bottom" && "top-4",
 								)}
 							>
 								{label(value)}
@@ -45,6 +51,6 @@ const DualRangeSlider = React.forwardRef<
 		</SliderPrimitive.Root>
 	);
 });
-DualRangeSlider.displayName = 'DualRangeSlider';
+DualRangeSlider.displayName = "DualRangeSlider";
 
 export { DualRangeSlider };

components/ui/floating-label.tsx

@@ -1,14 +1,22 @@
-import * as React from 'react';
+import * as React from "react";
-import { Input } from '@/components/ui/input';
+import { Input } from "@/components/ui/input";
-import { Label } from '@/components/ui/label';
+import { Label } from "@/components/ui/label";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-const FloatingInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+const FloatingInput = React.forwardRef<
-  ({ className, ...props }, ref) => {
+	HTMLInputElement,
-    return <Input placeholder=" " className={cn('peer', className)} ref={ref} {...props} />;
+	React.InputHTMLAttributes<HTMLInputElement>
-  },
+>(({ className, ...props }, ref) => {
+	return (
+		<Input
+			placeholder=" "
+			className={cn("peer", className)}
+			ref={ref}
+			{...props}
+		/>
 	);
-FloatingInput.displayName = 'FloatingInput';
+});
+FloatingInput.displayName = "FloatingInput";
 
 const FloatingLabel = React.forwardRef<
 	React.ElementRef<typeof Label>,
@@ -17,7 +25,7 @@ const FloatingLabel = React.forwardRef<
 	return (
 		<Label
 			className={cn(
-        'peer-focus:secondary peer-focus:dark:secondary absolute start-2 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-background px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 dark:bg-background rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 cursor-text',
+				"peer-focus:secondary peer-focus:dark:secondary absolute start-2 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-background px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 dark:bg-background rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 cursor-text",
 				className,
 			)}
 			ref={ref}
@@ -25,9 +33,11 @@ const FloatingLabel = React.forwardRef<
 		/>
 	);
 });
-FloatingLabel.displayName = 'FloatingLabel';
+FloatingLabel.displayName = "FloatingLabel";
 
-type FloatingLabelInputProps = React.InputHTMLAttributes<HTMLInputElement> & { label?: string };
+type FloatingLabelInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+	label?: string;
+};
 
 const FloatingLabelInput = React.forwardRef<
 	React.ElementRef<typeof FloatingInput>,
@@ -40,6 +50,6 @@ const FloatingLabelInput = React.forwardRef<
 		</div>
 	);
 });
-FloatingLabelInput.displayName = 'FloatingLabelInput';
+FloatingLabelInput.displayName = "FloatingLabelInput";
 
 export { FloatingInput, FloatingLabel, FloatingLabelInput };

components/ui/form.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
 
 import {
 	Controller,
@@ -10,27 +10,27 @@ import {
 	type ControllerProps,
 	type FieldPath,
 	type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
 
-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>) => {
@@ -38,21 +38,21 @@ const FormField = <
 		<FormFieldContext.Provider value={{ name: props.name }}>
 			<Controller {...props} />
 		</FormFieldContext.Provider>
-  )
+	);
-}
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
+	const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext)
+	const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext()
+	const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);
 
 	if (!fieldContext) {
-    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,
@@ -61,36 +61,36 @@ 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 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
@@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
 			htmlFor={formItemId}
 			{...props}
 		/>
-  )
+	);
-})
+});
-FormLabel.displayName = "FormLabel"
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
 	React.ElementRef<typeof SlotPrimitive.Slot>,
 	React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
 
 	return (
 		<SlotPrimitive.Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
 			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
@@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
 			className={cn("text-[0.8rem] 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 { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children
+	const body = error ? String(error?.message ?? "") : children;
 
 	if (!body) {
-    return null
+		return null;
 	}
 
 	return (
@@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
 		>
 			{body}
 		</p>
-  )
+	);
-})
+});
-FormMessage.displayName = "FormMessage"
+FormMessage.displayName = "FormMessage";
 
 export {
 	useFormField,
@@ -175,4 +176,4 @@ export {
 	FormDescription,
 	FormMessage,
 	FormField,
-}
+};

components/ui/hover-card.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui"
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
 
-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 origin-(--radix-hover-card-content-transform-origin)",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };

components/ui/input-otp.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp"
+import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react"
+import { Minus } from "lucide-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 inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
 	return (
 		<div
@@ -43,7 +43,7 @@ const InputOTPSlot = React.forwardRef<
 			className={cn(
 				"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
 				isActive && "z-10 ring-1 ring-ring",
-        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}>
 		<Minus />
 	</div>
-))
+));
-InputOTPSeparator.displayName = "InputOTPSeparator"
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

components/ui/input.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";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (
@@ -11,11 +11,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Input }
+export { Input };

components/ui/label.tsx

@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Label as LabelPrimitive } from "radix-ui"
+import { Label as LabelPrimitive } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-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>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
 		className={cn(labelVariants(), className)}
 		{...props}
 	/>
-))
+));
-Label.displayName = LabelPrimitive.Root.displayName
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };

components/ui/menubar.tsx

@@ -1,39 +1,39 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Menubar as MenubarPrimitive } from "radix-ui"
+import { Menubar as MenubarPrimitive } from "radix-ui";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function MenubarMenu({
 	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />
+	return <MenubarPrimitive.Menu {...props} />;
 }
 
 function MenubarGroup({
 	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />
+	return <MenubarPrimitive.Group {...props} />;
 }
 
 function MenubarPortal({
 	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />
+	return <MenubarPrimitive.Portal {...props} />;
 }
 
 function MenubarRadioGroup({
 	...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />
+	return <MenubarPrimitive.RadioGroup {...props} />;
 }
 
 function MenubarSub({
 	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 const Menubar = React.forwardRef<
@@ -44,12 +44,12 @@ const Menubar = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-Menubar.displayName = MenubarPrimitive.Root.displayName
+Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -59,17 +59,17 @@ const MenubarTrigger = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex cursor-default select-none items-center rounded-sm px-3 py-1 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
@@ -77,15 +77,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>,
@@ -95,12 +95,12 @@ const MenubarSubContent = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"z-50 min-w-32 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 origin-(--radix-menubar-content-transform-origin)",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Content>,
@@ -108,7 +108,7 @@ const MenubarContent = React.forwardRef<
 >(
 	(
 		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
+		ref,
 	) => (
 		<MenubarPrimitive.Portal>
 			<MenubarPrimitive.Content
@@ -118,19 +118,19 @@ const MenubarContent = React.forwardRef<
 				sideOffset={sideOffset}
 				className={cn(
 					"z-50 min-w-48 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 origin-(--radix-menubar-content-transform-origin)",
-          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
@@ -138,12 +138,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>,
@@ -153,7 +153,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}
@@ -165,8 +165,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>,
@@ -176,7 +176,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}
 	>
@@ -187,13 +187,13 @@ 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
@@ -201,12 +201,12 @@ const MenubarLabel = React.forwardRef<
 		className={cn(
 			"px-2 py-1.5 text-sm font-semibold",
 			inset && "pl-8",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -217,8 +217,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,
@@ -228,13 +228,13 @@ const MenubarShortcut = ({
 		<span
 			className={cn(
 				"ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-}
+};
-MenubarShortcut.displayname = "MenubarShortcut"
+MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
 	Menubar,
@@ -253,4 +253,4 @@ export {
 	MenubarGroup,
 	MenubarSub,
 	MenubarShortcut,
-}
+};

components/ui/navigation-menu.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from "react";
-import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react"
+import { ChevronDown } from "lucide-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-9 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-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+	"group inline-flex h-9 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-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
-)
+);
 
 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(
 			"left-0 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,15 @@ const NavigationMenuViewport = React.forwardRef<
 		<NavigationMenuPrimitive.Viewport
 			className={cn(
 				"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
-        className
+				className,
 			)}
 			ref={ref}
 			{...props}
 		/>
 	</div>
-))
+));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+	NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
 	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -105,15 +105,15 @@ 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
+	NavigationMenuPrimitive.Indicator.displayName;
 
 export {
 	navigationMenuTriggerStyle,
@@ -125,4 +125,4 @@ export {
 	NavigationMenuLink,
 	NavigationMenuIndicator,
 	NavigationMenuViewport,
-}
+};

components/ui/phone-input.tsx

@@ -61,7 +61,11 @@ const InputComponent = React.forwardRef<
 	HTMLInputElement,
 	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-	<Input className={cn("mx-2 bg-white/10 backdrop-blur-md", className)} {...props} ref={ref} />
+	<Input
+		className={cn("mx-2 bg-white/10 backdrop-blur-md", className)}
+		{...props}
+		ref={ref}
+	/>
 ));
 InputComponent.displayName = "InputComponent";
 

components/ui/popover.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui"
+import { Popover as PopoverPrimitive } from "radix-ui";
 
-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 PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
 	React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -22,12 +22,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 origin-(--radix-popover-content-transform-origin)",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</PopoverPrimitive.Portal>
-))
+));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

components/ui/progress.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { Progress as ProgressPrimitive } from "radix-ui"
+import { Progress as ProgressPrimitive } from "radix-ui";
-import * as React from "react"
+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,16 +13,20 @@ const Progress = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative h-1 w-full overflow-hidden rounded-full bg-primary/20",
-      className
+			className,
 		)}
 		{...props}
 	>
 		<ProgressPrimitive.Indicator
-      className={cn("h-full w-full flex-1 transition-all", className, (value ?? 0) < 20 ? "bg-red-500" : "bg-sarLinkOrange")}
+			className={cn(
+				"h-full w-full flex-1 transition-all",
+				className,
+				(value ?? 0) < 20 ? "bg-red-500" : "bg-sarLinkOrange",
+			)}
 			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 		/>
 	</ProgressPrimitive.Root>
-))
+));
-Progress.displayName = ProgressPrimitive.Root.displayName
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };

components/ui/radio-group.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { Circle } from "lucide-react"
+import { Circle } from "lucide-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 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef<
 				<Circle className="h-3.5 w-3.5 fill-primary" />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
-  )
+	);
-})
+});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };

components/ui/resizable.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { GripVertical } from "lucide-react"
+import { GripVertical } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ResizablePanelGroup = ({
 	className,
@@ -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 };

components/ui/scroll-area.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 
-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>,
@@ -36,13 +36,13 @@ const ScrollBar = React.forwardRef<
 				"h-full w-2.5 border-l border-l-transparent p-px",
 			orientation === "horizontal" &&
 				"h-2.5 flex-col border-t border-t-transparent p-px",
-      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 };

components/ui/select.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui"
+import { Select as SelectPrimitive } from "radix-ui";
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-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-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring 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>,
@@ -40,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex cursor-default items-center justify-center py-1",
-      className
+			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>,
@@ -57,15 +57,15 @@ const SelectScrollDownButton = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex cursor-default items-center justify-center py-1",
-      className
+			className,
 		)}
 		{...props}
 	>
 		<ChevronDown className="h-4 w-4" />
 	</SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+	SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Content>,
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
 				"relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-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 origin-(--radix-select-content-transform-origin)",
 				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 +88,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					"p-1",
 					position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
 				)}
 			>
 				{children}
@@ -96,8 +96,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 +108,8 @@ const SelectLabel = React.forwardRef<
 		className={cn("px-2 py-1.5 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 +119,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-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -130,8 +130,8 @@ const SelectItem = React.forwardRef<
 		</span>
 		<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>,
@@ -142,8 +142,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,
@@ -156,4 +156,4 @@ export {
 	SelectSeparator,
 	SelectScrollUpButton,
 	SelectScrollDownButton,
-}
+};

components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Separator as SeparatorPrimitive } from "radix-ui"
+import { Separator as SeparatorPrimitive } from "radix-ui";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
 	React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 >(
 	(
 		{ className, orientation = "horizontal", decorative = true, ...props },
-    ref
+		ref,
 	) => (
 		<SeparatorPrimitive.Root
 			ref={ref}
@@ -20,12 +20,12 @@ const Separator = React.forwardRef<
 			className={cn(
 				"shrink-0 bg-border",
 				orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	),
-)
+);
-Separator.displayName = SeparatorPrimitive.Root.displayName
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

components/ui/sheet.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Dialog as SheetPrimitive } from "radix-ui"
+import { Dialog as SheetPrimitive } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react"
+import { X } from "lucide-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=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -46,8 +46,8 @@ const sheetVariants = cva(
 		defaultVariants: {
 			side: "right",
 		},
-  }
+	},
-)
+);
 
 interface SheetContentProps
 	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -71,8 +71,8 @@ const SheetContent = React.forwardRef<
 			{children}
 		</SheetPrimitive.Content>
 	</SheetPortal>
-))
+));
-SheetContent.displayName = SheetPrimitive.Content.displayName
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
 	className,
@@ -81,12 +81,12 @@ const SheetHeader = ({
 	<div
 		className={cn(
 			"flex flex-col space-y-2 text-center sm:text-left",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
+);
-SheetHeader.displayName = "SheetHeader"
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
 	className,
@@ -95,12 +95,12 @@ const SheetFooter = ({
 	<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 +111,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 +123,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 +137,4 @@ export {
 	SheetFooter,
 	SheetTitle,
 	SheetDescription,
-}
+};

components/ui/sidebar.tsx

@@ -1,64 +1,64 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "radix-ui";
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react"
+import { PanelLeft } from "lucide-react";
 
-import { useIsMobile } from "@/hooks/use-mobile"
+import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
 import {
 	Sheet,
 	SheetContent,
 	SheetDescription,
 	SheetHeader,
 	SheetTitle,
-} from "@/components/ui/sheet"
+} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
+	state: "expanded" | "collapsed";
-  open: boolean
+	open: boolean;
-  setOpen: (open: boolean) => void
+	setOpen: (open: boolean) => void;
-  openMobile: boolean
+	openMobile: boolean;
-  setOpenMobile: (open: boolean) => void
+	setOpenMobile: (open: boolean) => void;
-  isMobile: boolean
+	isMobile: boolean;
-  toggleSidebar: () => void
+	toggleSidebar: () => void;
-}
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+	const context = React.useContext(SidebarContext);
 	if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+		throw new Error("useSidebar must be used within a SidebarProvider.");
 	}
 
-  return context
+	return context;
 }
 
 const SidebarProvider = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
+		defaultOpen?: boolean;
-    open?: boolean
+		open?: boolean;
-    onOpenChange?: (open: boolean) => void
+		onOpenChange?: (open: boolean) => void;
 	}
 >(
 	(
@@ -71,36 +71,36 @@ const SidebarProvider = React.forwardRef<
 			children,
 			...props
 		},
-    ref
+		ref,
 	) => {
-    const isMobile = useIsMobile()
+		const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false)
+		const [openMobile, setOpenMobile] = React.useState(false);
 
 		// This is the internal state of the sidebar.
 		// We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
+		const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open
+		const open = openProp ?? _open;
 		const setOpen = React.useCallback(
 			(value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
+				const openState = typeof value === "function" ? value(open) : value;
 				if (setOpenProp) {
-          setOpenProp(openState)
+					setOpenProp(openState);
 				} else {
-          _setOpen(openState)
+					_setOpen(openState);
 				}
 
 				// This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 			},
-      [setOpenProp, open]
+			[setOpenProp, open],
-    )
+		);
 
 		// Helper to toggle the sidebar.
 		const toggleSidebar = React.useCallback(() => {
 			return isMobile
 				? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
+				: setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile])
+		}, [isMobile, setOpen, setOpenMobile]);
 
 		// Adds a keyboard shortcut to toggle the sidebar.
 		React.useEffect(() => {
@@ -109,18 +109,18 @@ const SidebarProvider = React.forwardRef<
 					event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
 					(event.metaKey || event.ctrlKey)
 				) {
-          event.preventDefault()
+					event.preventDefault();
-          toggleSidebar()
+					toggleSidebar();
-        }
 				}
+			};
 
-      window.addEventListener("keydown", handleKeyDown)
+			window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown)
+			return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar])
+		}, [toggleSidebar]);
 
 		// We add a state so that we can do data-state="expanded" or "collapsed".
 		// This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
+		const state = open ? "expanded" : "collapsed";
 
 		const contextValue = React.useMemo<SidebarContextProps>(
 			() => ({
@@ -132,8 +132,16 @@ const SidebarProvider = React.forwardRef<
 				setOpenMobile,
 				toggleSidebar,
 			}),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+			[
-    )
+				state,
+				open,
+				setOpen,
+				isMobile,
+				openMobile,
+				setOpenMobile,
+				toggleSidebar,
+			],
+		);
 
 		return (
 			<SidebarContext.Provider value={contextValue}>
@@ -148,7 +156,7 @@ const SidebarProvider = React.forwardRef<
 						}
 						className={cn(
 							"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
+							className,
 						)}
 						ref={ref}
 						{...props}
@@ -157,17 +165,17 @@ const SidebarProvider = React.forwardRef<
 					</div>
 				</TooltipProvider>
 			</SidebarContext.Provider>
-    )
+		);
-  }
+	},
-)
+);
-SidebarProvider.displayName = "SidebarProvider"
+SidebarProvider.displayName = "SidebarProvider";
 
 const Sidebar = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> & {
-    side?: "left" | "right"
+		side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset"
+		variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none"
+		collapsible?: "offcanvas" | "icon" | "none";
 	}
 >(
 	(
@@ -179,23 +187,23 @@ const Sidebar = React.forwardRef<
 			children,
 			...props
 		},
-    ref
+		ref,
 	) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+		const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
 		if (collapsible === "none") {
 			return (
 				<div
 					className={cn(
 						"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-            className
+						className,
 					)}
 					ref={ref}
 					{...props}
 				>
 					{children}
 				</div>
-      )
+			);
 		}
 
 		if (isMobile) {
@@ -219,7 +227,7 @@ const Sidebar = React.forwardRef<
 						<div className="flex h-full w-full flex-col">{children}</div>
 					</SheetContent>
 				</Sheet>
-      )
+			);
 		}
 
 		return (
@@ -239,7 +247,7 @@ const Sidebar = React.forwardRef<
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
 							? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+							: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
 					)}
 				/>
 				<div
@@ -252,7 +260,7 @@ const Sidebar = React.forwardRef<
 						variant === "floating" || variant === "inset"
 							? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
 							: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
+						className,
 					)}
 					{...props}
 				>
@@ -264,16 +272,16 @@ const Sidebar = React.forwardRef<
 					</div>
 				</div>
 			</div>
-    )
+		);
-  }
+	},
-)
+);
-Sidebar.displayName = "Sidebar"
+Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = React.forwardRef<
 	React.ElementRef<typeof Button>,
 	React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+	const { toggleSidebar } = useSidebar();
 
 	return (
 		<Button
@@ -283,23 +291,23 @@ const SidebarTrigger = React.forwardRef<
 			size="icon"
 			className={cn("h-7 w-7", className)}
 			onClick={(event) => {
-        onClick?.(event)
+				onClick?.(event);
-        toggleSidebar()
+				toggleSidebar();
 			}}
 			{...props}
 		>
 			<PanelLeft />
 			<span className="sr-only">Toggle Sidebar</span>
 		</Button>
-  )
+	);
-})
+});
-SidebarTrigger.displayName = "SidebarTrigger"
+SidebarTrigger.displayName = "SidebarTrigger";
 
 const SidebarRail = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+	const { toggleSidebar } = useSidebar();
 
 	return (
 		<button
@@ -316,13 +324,13 @@ const SidebarRail = React.forwardRef<
 				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
 				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
 				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarRail.displayName = "SidebarRail"
+SidebarRail.displayName = "SidebarRail";
 
 const SidebarInset = React.forwardRef<
 	HTMLDivElement,
@@ -334,13 +342,13 @@ const SidebarInset = React.forwardRef<
 			className={cn(
 				"relative flex w-full flex-1 flex-col bg-background",
 				"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarInset.displayName = "SidebarInset"
+SidebarInset.displayName = "SidebarInset";
 
 const SidebarInput = React.forwardRef<
 	React.ElementRef<typeof Input>,
@@ -352,13 +360,13 @@ const SidebarInput = React.forwardRef<
 			data-sidebar="input"
 			className={cn(
 				"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarInput.displayName = "SidebarInput"
+SidebarInput.displayName = "SidebarInput";
 
 const SidebarHeader = React.forwardRef<
 	HTMLDivElement,
@@ -371,9 +379,9 @@ const SidebarHeader = React.forwardRef<
 			className={cn("flex flex-col gap-2 p-2", className)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarHeader.displayName = "SidebarHeader"
+SidebarHeader.displayName = "SidebarHeader";
 
 const SidebarFooter = React.forwardRef<
 	HTMLDivElement,
@@ -386,9 +394,9 @@ const SidebarFooter = React.forwardRef<
 			className={cn("flex flex-col gap-2 p-2", className)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarFooter.displayName = "SidebarFooter"
+SidebarFooter.displayName = "SidebarFooter";
 
 const SidebarSeparator = React.forwardRef<
 	React.ElementRef<typeof Separator>,
@@ -401,9 +409,9 @@ const SidebarSeparator = React.forwardRef<
 			className={cn("mx-2 w-auto bg-sidebar-border", className)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarSeparator.displayName = "SidebarSeparator"
+SidebarSeparator.displayName = "SidebarSeparator";
 
 const SidebarContent = React.forwardRef<
 	HTMLDivElement,
@@ -415,13 +423,13 @@ const SidebarContent = React.forwardRef<
 			data-sidebar="content"
 			className={cn(
 				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarContent.displayName = "SidebarContent"
+SidebarContent.displayName = "SidebarContent";
 
 const SidebarGroup = React.forwardRef<
 	HTMLDivElement,
@@ -434,15 +442,15 @@ const SidebarGroup = React.forwardRef<
 			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarGroup.displayName = "SidebarGroup"
+SidebarGroup.displayName = "SidebarGroup";
 
 const SidebarGroupLabel = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "div"
+	const Comp = asChild ? SlotPrimitive.Slot : "div";
 
 	return (
 		<Comp
@@ -451,19 +459,19 @@ const SidebarGroupLabel = React.forwardRef<
 			className={cn(
 				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
 
 const SidebarGroupAction = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
+	const Comp = asChild ? SlotPrimitive.Slot : "button";
 
 	return (
 		<Comp
@@ -474,13 +482,13 @@ const SidebarGroupAction = React.forwardRef<
 				// Increases the hit area of the button on mobile.
 				"after:absolute after:-inset-2 after:md:hidden",
 				"group-data-[collapsible=icon]:hidden",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarGroupAction.displayName = "SidebarGroupAction"
+SidebarGroupAction.displayName = "SidebarGroupAction";
 
 const SidebarGroupContent = React.forwardRef<
 	HTMLDivElement,
@@ -492,8 +500,8 @@ const SidebarGroupContent = React.forwardRef<
 		className={cn("w-full text-sm", className)}
 		{...props}
 	/>
-))
+));
-SidebarGroupContent.displayName = "SidebarGroupContent"
+SidebarGroupContent.displayName = "SidebarGroupContent";
 
 const SidebarMenu = React.forwardRef<
 	HTMLUListElement,
@@ -505,8 +513,8 @@ const SidebarMenu = React.forwardRef<
 		className={cn("flex w-full min-w-0 flex-col gap-1", className)}
 		{...props}
 	/>
-))
+));
-SidebarMenu.displayName = "SidebarMenu"
+SidebarMenu.displayName = "SidebarMenu";
 
 const SidebarMenuItem = React.forwardRef<
 	HTMLLIElement,
@@ -518,8 +526,8 @@ const SidebarMenuItem = React.forwardRef<
 		className={cn("group/menu-item relative", className)}
 		{...props}
 	/>
-))
+));
-SidebarMenuItem.displayName = "SidebarMenuItem"
+SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
 	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -540,15 +548,15 @@ const sidebarMenuButtonVariants = cva(
 			variant: "default",
 			size: "default",
 		},
-  }
+	},
-)
+);
 
 const SidebarMenuButton = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<"button"> & {
-    asChild?: boolean
+		asChild?: boolean;
-    isActive?: boolean
+		isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 	} & VariantProps<typeof sidebarMenuButtonVariants>
 >(
 	(
@@ -561,10 +569,10 @@ const SidebarMenuButton = React.forwardRef<
 			className,
 			...props
 		},
-    ref
+		ref,
 	) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button"
+		const Comp = asChild ? SlotPrimitive.Slot : "button";
-    const { isMobile, state } = useSidebar()
+		const { isMobile, state } = useSidebar();
 
 		const button = (
 			<Comp
@@ -575,16 +583,16 @@ const SidebarMenuButton = React.forwardRef<
 				className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
 				{...props}
 			/>
-    )
+		);
 
 		if (!tooltip) {
-      return button
+			return button;
 		}
 
 		if (typeof tooltip === "string") {
 			tooltip = {
 				children: tooltip,
-      }
+			};
 		}
 
 		return (
@@ -597,19 +605,19 @@ const SidebarMenuButton = React.forwardRef<
 					{...tooltip}
 				/>
 			</Tooltip>
-    )
+		);
-  }
+	},
-)
+);
-SidebarMenuButton.displayName = "SidebarMenuButton"
+SidebarMenuButton.displayName = "SidebarMenuButton";
 
 const SidebarMenuAction = React.forwardRef<
 	HTMLButtonElement,
 	React.ComponentProps<"button"> & {
-    asChild?: boolean
+		asChild?: boolean;
-    showOnHover?: boolean
+		showOnHover?: boolean;
 	}
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
+	const Comp = asChild ? SlotPrimitive.Slot : "button";
 
 	return (
 		<Comp
@@ -625,13 +633,13 @@ const SidebarMenuAction = React.forwardRef<
 				"group-data-[collapsible=icon]:hidden",
 				showOnHover &&
 					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarMenuAction.displayName = "SidebarMenuAction"
+SidebarMenuAction.displayName = "SidebarMenuAction";
 
 const SidebarMenuBadge = React.forwardRef<
 	HTMLDivElement,
@@ -647,23 +655,23 @@ const SidebarMenuBadge = React.forwardRef<
 			"peer-data-[size=default]/menu-button:top-1.5",
 			"peer-data-[size=lg]/menu-button:top-2.5",
 			"group-data-[collapsible=icon]:hidden",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
 
 const SidebarMenuSkeleton = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<"div"> & {
-    showIcon?: boolean
+		showIcon?: boolean;
 	}
 >(({ className, showIcon = false, ...props }, ref) => {
 	// Random width between 50 to 90%.
 	const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
+		return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, [])
+	}, []);
 
 	return (
 		<div
@@ -688,9 +696,9 @@ const SidebarMenuSkeleton = React.forwardRef<
 				}
 			/>
 		</div>
-  )
+	);
-})
+});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
 
 const SidebarMenuSub = React.forwardRef<
 	HTMLUListElement,
@@ -702,28 +710,28 @@ const SidebarMenuSub = React.forwardRef<
 		className={cn(
 			"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
 			"group-data-[collapsible=icon]:hidden",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-SidebarMenuSub.displayName = "SidebarMenuSub"
+SidebarMenuSub.displayName = "SidebarMenuSub";
 
 const SidebarMenuSubItem = React.forwardRef<
 	HTMLLIElement,
 	React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 const SidebarMenuSubButton = React.forwardRef<
 	HTMLAnchorElement,
 	React.ComponentProps<"a"> & {
-    asChild?: boolean
+		asChild?: boolean;
-    size?: "sm" | "md"
+		size?: "sm" | "md";
-    isActive?: boolean
+		isActive?: boolean;
 	}
 >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a"
+	const Comp = asChild ? SlotPrimitive.Slot : "a";
 
 	return (
 		<Comp
@@ -737,13 +745,13 @@ const SidebarMenuSubButton = React.forwardRef<
 				size === "sm" && "text-xs",
 				size === "md" && "text-sm",
 				"group-data-[collapsible=icon]:hidden",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
-})
+});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 export {
 	Sidebar,
@@ -770,4 +778,4 @@ export {
 	SidebarSeparator,
 	SidebarTrigger,
 	useSidebar,
-}
+};

components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
 	className,
@@ -9,7 +9,7 @@ function Skeleton({
 			className={cn("animate-pulse rounded-md bg-primary/10", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Skeleton }
+export { Skeleton };

components/ui/slider.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Slider as SliderPrimitive } from "radix-ui"
+import { Slider as SliderPrimitive } from "radix-ui";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Slider = React.forwardRef<
 	React.ElementRef<typeof SliderPrimitive.Root>,
@@ -13,7 +13,7 @@ const Slider = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex w-full touch-none select-none items-center",
-      className
+			className,
 		)}
 		{...props}
 	>
@@ -22,7 +22,7 @@ const Slider = React.forwardRef<
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
 	</SliderPrimitive.Root>
-))
+));
-Slider.displayName = SliderPrimitive.Root.displayName
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };

components/ui/sonner.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+	const { theme = "system" } = useTheme();
 
 	return (
 		<Sonner
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
 			}}
 			{...props}
 		/>
-  )
+	);
-}
+};
 
-export { Toaster }
+export { Toaster };

components/ui/switch.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Switch as SwitchPrimitives } from "radix-ui"
+import { Switch as SwitchPrimitives } from "radix-ui";
 
-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-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
 			)}
 		/>
 	</SwitchPrimitives.Root>
-))
+));
-Switch.displayName = SwitchPrimitives.Root.displayName
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };

components/ui/table.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";
 
 const Table = React.forwardRef<
 	HTMLTableElement,
@@ -13,16 +13,16 @@ 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,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
 		className={cn("[&_tr:last-child]:border-0", className)}
 		{...props}
 	/>
-))
+));
-TableBody.displayName = "TableBody"
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
 	HTMLTableSectionElement,
@@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-TableFooter.displayName = "TableFooter"
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
 	HTMLTableRowElement,
@@ -59,12 +59,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 +74,12 @@ const TableHead = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-TableHead.displayName = "TableHead"
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
 	HTMLTableCellElement,
@@ -89,12 +89,12 @@ const TableCell = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-TableCell.displayName = "TableCell"
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
 	HTMLTableCaptionElement,
@@ -105,8 +105,8 @@ const TableCaption = React.forwardRef<
 		className={cn("mt-4 text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
+));
-TableCaption.displayName = "TableCaption"
+TableCaption.displayName = "TableCaption";
 
 export {
 	Table,
@@ -117,4 +117,4 @@ export {
 	TableRow,
 	TableCell,
 	TableCaption,
-}
+};

components/ui/tabs.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Tabs as TabsPrimitive } from "radix-ui"
+import { Tabs as TabsPrimitive } from "radix-ui";
 
-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-9 items-center justify-center rounded-lg 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-md px-3 py-1 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",
-      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 };

components/ui/text-shimmer.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
-import React, { useMemo, type JSX } from 'react';
+import React, { useMemo, type JSX } from "react";
-import { motion } from 'motion/react';
+import { motion } from "motion/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
 interface TextShimmerProps {
 	children: string;
@@ -13,13 +13,13 @@ interface TextShimmerProps {
 
 export function TextShimmer({
 	children,
-  as: Component = 'p',
+	as: Component = "p",
 	className,
 	duration = 2,
 	spread = 2,
 }: TextShimmerProps) {
 	const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements
+		Component as keyof JSX.IntrinsicElements,
 	);
 
 	const dynamicSpread = useMemo(() => {
@@ -29,22 +29,22 @@ export function TextShimmer({
 	return (
 		<MotionComponent
 			className={cn(
-        'relative inline-block bg-size-[250%_100%,auto] bg-clip-text',
+				"relative inline-block bg-size-[250%_100%,auto] bg-clip-text",
-        'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]',
+				"text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
-        '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]',
+				"[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
+				"dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
-        className
+				className,
 			)}
-      initial={{ backgroundPosition: '100% center' }}
+			initial={{ backgroundPosition: "100% center" }}
-      animate={{ backgroundPosition: '0% center' }}
+			animate={{ backgroundPosition: "0% center" }}
 			transition={{
 				repeat: Infinity,
 				duration,
-        ease: 'linear',
+				ease: "linear",
 			}}
 			style={
 				{
-          '--spread': `${dynamicSpread}px`,
+					"--spread": `${dynamicSpread}px`,
 					backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
 				} as React.CSSProperties
 			}

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";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 	return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 			data-slot="textarea"
 			className={cn(
 				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Textarea }
+export { Textarea };

components/ui/toggle-group.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import { type VariantProps } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle"
+import { toggleVariants } from "@/components/ui/toggle";
 
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants>
 >({
 	size: "default",
 	variant: "default",
-})
+});
 
 const ToggleGroup = React.forwardRef<
 	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -28,16 +28,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 +47,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 };

components/ui/toggle.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Toggle as TogglePrimitive } from "radix-ui"
+import { Toggle as TogglePrimitive } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
 	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -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 };

components/ui/tooltip.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui"
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 
-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>,
@@ -21,12 +21,12 @@ const TooltipContent = React.forwardRef<
 			sideOffset={sideOffset}
 			className={cn(
 				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
-        className
+				className,
 			)}
 			{...props}
 		/>
 	</TooltipPrimitive.Portal>
-))
+));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

components/user-table.tsx

@@ -92,7 +92,9 @@ export async function UsersTable({
 									className={`${user.verified && "title-bg dark:bg-black"}`}
 									key={user.id}
 								>
-									<TableCell className="font-medium">{user.first_name} {user.last_name}</TableCell>
+									<TableCell className="font-medium">
+										{user.first_name} {user.last_name}
+									</TableCell>
 									<TableCell className="font-medium">{user.id_card}</TableCell>
 									<TableCell>{user.atoll?.name}</TableCell>
 									<TableCell>{user.island?.name}</TableCell>
@@ -144,8 +146,10 @@ export async function UsersTable({
 							</TableRow>
 						</TableFooter>
 					</Table>
-					<Pagination totalPages={meta?.last_page}
+					<Pagination
-						currentPage={meta?.current_page} />
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
 				</>
 			)}
 		</div>

components/user/add-device-dialog.tsx

@@ -4,7 +4,15 @@ import { Loader2, Plus } from "lucide-react";
 import { useActionState, useEffect, useState } from "react"; // Import useActionState
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+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 { addDeviceAction } from "@/queries/devices";
@@ -19,7 +27,6 @@ export type AddDeviceFormState = {
 	payload?: FormData;
 };
 
-
 export const initialState: AddDeviceFormState = {
 	message: "",
 	fieldErrors: {},
@@ -30,7 +37,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 
 	const [state, formAction, pending] = useActionState(
 		addDeviceAction,
-		initialState
+		initialState,
 	);
 
 	useEffect(() => {
@@ -53,7 +60,11 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
-				<Button className="gap-2 items-center" disabled={pending} variant="default">
+				<Button
+					className="gap-2 items-center"
+					disabled={pending}
+					variant="default"
+				>
 					Add Device
 					<Plus size={16} />
 				</Button>
@@ -71,9 +82,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 					<div className="grid gap-4 py-4">
 						<div className="flex flex-col gap-2">
 							<div>
-								<Label htmlFor="device_name">
+								<Label htmlFor="device_name">Device Name</Label>
-									Device Name
-								</Label>
 								<Input
 									placeholder="eg: iPhone X"
 									type="text"
@@ -90,13 +99,13 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 							</div>
 
 							<div>
-								<Label htmlFor="mac_address">
+								<Label htmlFor="mac_address">Mac Address</Label>
-									Mac Address
-								</Label>
 								<Input
 									placeholder="Mac address of your device"
 									name="mac_address"
-									defaultValue={(state?.payload?.get("mac_address") || "") as string}
+									defaultValue={
+										(state?.payload?.get("mac_address") || "") as string
+									}
 									id="mac_address"
 									className="col-span-3"
 								/>