improve registration flows

fix(wallet-transactions-table): update badge colors for better visibility

.build/dev/Dockerfile

@@ -0,0 +1,5 @@
+FROM node:22.17.0-alpine
+
+WORKDIR /var/www/html/
+
+CMD npm install && npm run dev -- --host 0.0.0.0

.build/dev/node.Dockerfile

@@ -1,5 +0,0 @@
-FROM node:18
-
-WORKDIR /var/www/html
-
-CMD npm run dev

.build/dev/prisma.Dockerfile

@@ -1,5 +0,0 @@
-FROM node:18
-
-WORKDIR /var/www/html
-
-CMD npx prisma studio

.build/prod/README.md

@@ -1,12 +0,0 @@
-### Docker/Podman compose.yml
-```yml
-services:
-  sarlinkportal:
-    image: git.shihaam.dev/sarlink/sarlink-portal
-    hostname: sarlink-portal
-    ports:
-      - 3000:3000
-#    volumes:
-#      - uploads:/var/www/html/public/uploads
-    env_file: .env
-```

.build/prod/bun.Dockerfile

@@ -1,23 +0,0 @@
-FROM node:20-slim AS builder
-WORKDIR /var/www/html
-ENV NEXT_TELEMETRY_DISABLED=1
-
-COPY . .
-RUN npm ci --legacy-peer-deps
-RUN npm run build
-
-FROM node:20-slim
-WORKDIR /var/www/html
-
-RUN apt update && apt install openssl -y
-
-COPY --from=builder /var/www/html/package.json ./
-COPY --from=builder /var/www/html/node_modules ./node_modules
-COPY --from=builder /var/www/html/.next ./.next
-COPY --from=builder /var/www/html/public ./public
-
-VOLUME /var/www/html
-
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["npm", "start"]

.build/prod/compose.yml

@@ -1,7 +0,0 @@
-services:
-   app:
-      build:
-        context: ../../
-        dockerfile: .build/prod/bun.Dockerfile
-      hostname: sarlink-portal
-      image: git.shihaam.dev/sarlink/sarlink-portal

.build/prod/prisma.Dockerfile

@@ -1,7 +0,0 @@
-FROM oven/bun:1.1.42-debian
-
-WORKDIR /var/www/html
-
-RUN apt update && apt install openssl -y
-
-CMD bunx prisma studio

.env.example

@@ -1,23 +1,4 @@
-# next auth
-NEXTAUTH_SECRET=""
-NEXTAUTH_URL=""
-## Portal API
-SARLINK_API_BASE_URL=""
-
-
-## MIB Payments
-PAYMENT_VERIFY_BASE_URL=""
-
-## People
-PEOPLE_API_URL=""
-
-## SMS
-SMS_API_URL=""
-SMS_API_KEY=""
-
-## omada
-OMADA_BASE_URL=""
-OMADA_SITE_ID=
-OMADA_GROUP_ID=
-OMADA_PROXY_API_KEY=""
-
+# API base for the browser → Django.
+# Dev: http://localhost:8000/  (docker compose maps host :8000 → backend:5000)
+# Prod: leave empty for same-origin (nginx proxies /api, /callback, /auth to Django)
+VITE_API_URL=http://localhost:8000/

.eslintrc.json

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

.github/workflows/mirror-to-sargitea.yml

@@ -1,19 +0,0 @@
-name: Sync Gitea Mirror on Push
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  sync-mirror:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Trigger Gitea Mirror Sync
-        run: |
-          curl -X POST \
-            -H "Authorization: token ${{ secrets.SAR_GITEA_TOKEN }}" \
-            -H "Accept: application/json" \
-            -H "Content-Type: application/json" \
-            https://git.shihaam.dev/api/v1/repos/${{ vars.SAR_GITEA_REPO_OWNER }}/${{ vars.SAR_GITEA_REPO_NAME }}/mirror-sync

.gitignore

@@ -1,46 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# env files (can opt-in for committing if needed)
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 .env 
-.env.local
-
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-
-#sqlite
-*.db

.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

README.md

@@ -1,45 +1,32 @@
-This is a web portal for SAR Link customers.
-# Todos
-## Layout
- - [ ] Auto hide the welcome banner after 5 seconds
+# React + TypeScript + Vite
 
-## User Menu
-### Devices
- - [x] Add mac vendor validation for adding devices
- - [x] Add all the filters for devices table (mobile responsive)
- - [x] Add cancel feature to selected devices floating button
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
 
+Currently, two official plugins are available:
 
- ### Payments1
- - [x] Show payments table
- - [x] Add all the filters for payment table (mobile responsive)
-    - [x] add slider range filter
- - [ ] Fix bill formula linking for generated payments
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 
-### Parental Control
- - [ ] Fix block device feature
- - [ ] Add all the filters for parental control table (mobile responsive)
- - [ ] Disable blocking if payment is pending or omit from the table if device payment is pending
+## React Compiler
 
-### Agreements
-- [ ] Implement file upload for admin side
-- [ ] Add customer relavant documents in a grid view
-- [ ] Add filtering by date for agreements
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-## Admin Controls
-### Users
-- [ ] Show users table
-- [ ] Add all relavant filters for users table
-- [ ] Verify or reject users with a custom message
-- [ ] Add functionality to send custom sms to users in user:id page
+## Expanding the Oxlint configuration
 
-### User Devices
-- [ ] Block or unblock from admin with custom message
-- [ ] Blocking devices for client and admin using useActionState instead of client side button onClick handlers
-- [ ] Show the devices table
-- [ ] Add all relevant filters for user devices table
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
 
-### User Payments
-- [ ] Show user payments table
-- [ ] Add relevant filters for user payments table
-- [ ] Add computation of total value for filtered results
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

actions/ninja/client.ts

@@ -1,68 +0,0 @@
-"use server";
-
-type CreateClientProps = {
-	group_settings_id: string;
-	address1: string;
-	city: string;
-	state: string;
-	postal_code: string;
-	country_id: string;
-	address2: string;
-	contacts: Contact;
-};
-
-type Contact = {
-	first_name: string;
-	last_name: string;
-	email: string;
-	phone: string;
-	send_email: boolean;
-	custom_value1: string;
-	custom_value2: string;
-	custom_value3: string;
-};
-export async function CreateClient({
-	group_settings_id = "",
-	address1 = "",
-	city,
-	state,
-	postal_code = "",
-	country_id = "462",
-	address2,
-	contacts,
-}: CreateClientProps) {
-	const response = await fetch(
-		"https://finance-staging.baraveli.dev/api/v1/clients",
-		{
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				"x-api-token": `${process.env.NINJA_API_KEY}`,
-			},
-			body: JSON.stringify({
-				group_settings_id,
-				address1,
-				city,
-				state,
-				postal_code,
-				country_id,
-				address2,
-				contacts: [
-					{
-						first_name: contacts.first_name,
-						last_name: contacts.last_name,
-						email: contacts.email || "",
-						phone: contacts.phone,
-						send_email: contacts.send_email,
-						custom_value1: contacts.custom_value1,
-						custom_value2: contacts.custom_value2,
-						custom_value3: contacts.custom_value3 || "",
-					},
-				],
-			}),
-		},
-	);
-	const data = await response.json();
-	console.log(data.data.contacts);
-	return data;
-}

actions/omada-actions.ts

@@ -1,159 +0,0 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
-import type { GroupProfile, MacAddress, OmadaResponse } from "@/lib/types";
-import { formatMacAddress } from "@/lib/utils";
-
-async function fetchOmadaGroupProfiles(siteId: string): Promise<OmadaResponse> {
-	if (!siteId) {
-		throw new Error("siteId is a required parameter");
-	}
-
-	const baseUrl: string = process.env.OMADA_BASE_URL || "";
-	const url: string = `${baseUrl}/api/v2/sites/${siteId}/setting/profiles/groups`;
-
-	const headers: HeadersInit = {
-		"X-API-key": process.env.OMADA_PROXY_API_KEY || "",
-	};
-
-	try {
-		const response: Response = await fetch(url, {
-			method: "GET",
-			headers: headers,
-		});
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-
-		const data: OmadaResponse = await response.json();
-		if (data.errorCode !== 0) {
-			throw new Error(`Error fetching group profiles: ${data.msg}`);
-		}
-		console.log({ data });
-		return data;
-	} catch (error) {
-		console.error("Error fetching Omada group profiles:", error);
-		throw error instanceof Error ? error : new Error("Unknown error occurred");
-	}
-}
-
-export { fetchOmadaGroupProfiles };
-
-export async function addDevicesToGroup({
-	siteId,
-	groupId,
-	newDevices,
-}: {
-	siteId?: string;
-	groupId?: string;
-	newDevices: MacAddress[];
-}) {
-	if (!siteId || !groupId) {
-		throw new Error("omadacId, siteId, and groupId are required parameters");
-	}
-
-	try {
-		// Fetch the existing group profiles
-		const groupProfiles: OmadaResponse = await fetchOmadaGroupProfiles(siteId);
-		// console.log(groupProfiles);
-		// Find the group profile with the specified groupId
-		const groupProfile: GroupProfile | undefined =
-			groupProfiles.result.data.find((profile) => profile.groupId === groupId);
-
-		if (!groupProfile) {
-			throw new Error(`Group with ID ${groupId} not found`);
-		}
-
-		// Create a new array with the existing and new devices
-		const updatedMacAddressList: MacAddress[] = [
-			...(groupProfile.macAddressList || []),
-			...newDevices,
-		];
-		// console.log({ updatedMacAddressList });
-		// Prepare the request payload
-		const requestBody = {
-			name: groupProfile.name,
-			type: groupProfile.type,
-			resource: groupProfile.resource,
-			ipList: groupProfile.ipList,
-			ipv6List: groupProfile.ipv6List,
-			macAddressList: updatedMacAddressList,
-			portList: null,
-			countryList: null,
-			portType: null,
-			portMaskList: null,
-			domainNamePort: null,
-		};
-
-		console.log(requestBody);
-		const baseUrl = process.env.OMADA_BASE_URL || "";
-		const url: string = `${baseUrl}/api/v2/sites/${siteId}/setting/profiles/groups/2/${groupId}`;
-
-		const headers: HeadersInit = {
-			"X-API-key": process.env.OMADA_PROXY_API_KEY || "",
-		};
-
-		const response = await fetch(url, {
-			method: "PATCH",
-			headers: headers,
-			body: JSON.stringify(requestBody),
-		});
-		console.log(response.status);
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-	} catch (error) {
-		console.error("Error adding devices to group:", error);
-		throw error instanceof Error ? error : new Error("Unknown error occurred");
-	}
-}
-
-export async function blockDevice({
-	macAddress,
-	type,
-	reason,
-	blockedBy = "PARENT",
-}: {
-	macAddress: string;
-	type: "block" | "unblock";
-	reason?: string;
-	blockedBy?: "ADMIN" | "PARENT";
-}) {
-	console.log("hello world asdasd");
-	if (!macAddress) {
-		throw new Error("macAddress is a required parameter");
-	}
-
-	try {
-		const baseUrl: string = process.env.OMADA_BASE_URL || "";
-		const url: string = `${baseUrl}/api/v2/sites/${process.env.OMADA_SITE_ID}/cmd/clients/${formatMacAddress(macAddress)}/${type}`;
-		console.log(url);
-		const headers: HeadersInit = {
-			"X-API-key": process.env.OMADA_PROXY_API_KEY || "",
-		};
-
-		const response = await fetch(url, {
-			method: "POST",
-			headers: headers,
-		});
-		console.log("blocking...");
-		console.log(response);
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-		// await prisma.device.update({
-		// 	where: {
-		// 		id: device?.id,
-		// 	},
-		// 	data: {
-		// 		reasonForBlocking: type === "block" ? reason : "",
-		// 		blocked: type === "block",
-		// 		blockedBy: blockedBy,
-		// 	},
-		// });
-		revalidatePath("/parental-control");
-	} catch (error) {
-		console.error("Error blocking device:", error);
-		throw error instanceof Error ? error : new Error("Unknown error occurred");
-	}
-}

actions/payment.ts

@@ -1,366 +0,0 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
-import { getServerSession } from "next-auth";
-import { authOptions } from "@/app/auth";
-import type {
-	ApiError,
-	ApiResponse,
-	NewPayment,
-	Payment,
-	Topup
-} from "@/lib/backend-types";
-import type { TopupResponse } from "@/lib/types";
-import type { User } from "@/lib/types/user";
-import { handleApiResponse } from "@/utils/tryCatch";
-
-type GenericGetResponseProps = {
-	offset?: number;
-	limit?: number;
-	page?: number;
-	[key: string]: string | number | undefined;
-};
-
-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 // });
-		}/api/billing/payment/`,
-		{
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-			body: JSON.stringify(data),
-		},
-	);
-	if (!response.ok) {
-		const errorData = (await response.json()) as ApiError;
-		const errorMessage =
-			errorData.message || errorData.detail || "An error occurred.";
-		const error = new Error(errorMessage);
-		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
-		throw error;
-	}
-	const payment = (await response.json()) as Payment;
-	revalidatePath("/devices");
-	return payment;
-}
-
-export async function createTopup(data: { amount: number }) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/`,
-		{
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-			body: JSON.stringify(data),
-		},
-	);
-	return handleApiResponse<Topup>(response, "createTopup");
-}
-
-export async function getPayment({ id }: { id: string }) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${id}`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-
-	if (!response.ok) {
-		const errorData = (await response.json()) as ApiError;
-		const errorMessage =
-			errorData.message || errorData.detail || "An error occurred.";
-		const error = new Error(errorMessage);
-		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
-		throw error;
-	}
-	const data = (await response.json()) as Payment;
-	return data;
-}
-
-type GetPaymentProps = {
-	[key: string]: string | number | undefined; // Allow additional properties for flexibility
-};
-
-export async function getPayments(params: GetPaymentProps) {
-	// 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))}`)
-		.join("&");
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/?${query}`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-	if (!response.ok) {
-		const errorData = (await response.json()) as ApiError;
-		const errorMessage =
-			errorData.message || errorData.detail || "An error occurred.";
-		const error = new Error(errorMessage);
-		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
-		throw error;
-	}
-	const data = (await response.json()) as ApiResponse<Payment>;
-	return data;
-}
-
-export async function getTopups(params: GenericGetResponseProps) {
-
-	// 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))}`)
-		.join("&");
-
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/?${query}`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-	return handleApiResponse<ApiResponse<Topup>>(response, "getTopups");
-}
-
-export async function getTopup({ id }: { id: string }) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-
-	return handleApiResponse<Topup>(response, "getTopup");
-}
-
-export async function cancelTopup({ id }: { id: string }) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/cancel/`,
-		{
-			method: "PATCH",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-	return handleApiResponse<Topup>(response, "cancelTopup");
-}
-
-export async function cancelPayment({ id }: { id: string }) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${id}/cancel/`,
-		{
-			method: "PATCH",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-	return handleApiResponse<Payment>(response, "cancelPayment");
-}
-
-type UpdatePayment = {
-	id: string;
-	method: "TRANSFER" | "WALLET";
-	benefName?: string;
-	accountNo?: string;
-	absAmount?: string;
-	time?: string;
-};
-export async function verifyPayment({ id, method }: UpdatePayment) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${id}/verify/`,
-		{
-			method: "PUT",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-			body: JSON.stringify({
-				method,
-			}),
-		},
-	);
-	revalidatePath("/payments/[paymentId]", "page");
-	return handleApiResponse<Payment>(response, "updatePayment");
-}
-
-export type VerifyDevicePaymentState = {
-	payment?: Payment;
-	message: string;
-	success: boolean;
-	fieldErrors: Record<string, string>;
-	payload?: FormData;
-}
-
-export async function verifyDevicePayment(
-	_prevState: VerifyDevicePaymentState,
-	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 method = formData.get('method') as "TRANSFER" | "WALLET";
-
-	if (!paymentId) {
-		return {
-			message: "Payment ID is required",
-			success: false,
-			fieldErrors: { paymentId: "Payment ID is required" },
-		};
-	}
-
-	if (!method) {
-		return {
-			message: "Payment method is required",
-			success: false,
-			fieldErrors: { method: "Payment method is required" },
-		};
-	}
-
-	try {
-		const response = await fetch(
-			`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${paymentId}/verify/`,
-			{
-				method: "PUT",
-				headers: {
-					"Content-Type": "application/json",
-					Authorization: `Token ${session?.apiToken}`,
-				},
-				body: JSON.stringify({
-					method,
-				}),
-			},
-		);
-
-		const result = await handleApiResponse<Payment>(response, "verifyDevicePayment");
-
-		revalidatePath("/payments/[paymentId]", "page");
-
-		return {
-			message: method === "WALLET"
-				? "Payment completed successfully using wallet!"
-				: "Payment verification successful!",
-			success: true,
-			fieldErrors: {},
-			payment: result,
-		};
-	} catch (error: unknown) {
-		if (error instanceof Error) {
-			return {
-				message: error.message || "Payment verification failed. Please try again.",
-				success: false,
-				fieldErrors: {},
-			};
-		} else {
-			return {
-				message: "Payment verification failed.",
-				success: false,
-				fieldErrors: {},
-			};
-		}
-	}
-}
-
-
-export type VerifyTopupPaymentState = {
-	transaction?: {
-		sourceBank: string;
-		trxDate: string;
-	};
-	message: string;
-	success: boolean;
-	fieldErrors: Record<string, string>;
-	payload?: FormData;
-}
-export async function verifyTopupPayment(
-	_prevState: VerifyTopupPaymentState,
-	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;
-
-	if (!topupId) {
-		return {
-			message: "Topup ID is required",
-			success: false,
-			fieldErrors: { topupId: "Topup ID is required" },
-		};
-	}
-
-	try {
-		const response = await fetch(
-			`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${topupId}/verify/`,
-			{
-				method: "PUT",
-				headers: {
-					"Content-Type": "application/json",
-					Authorization: `Token ${session?.apiToken}`,
-				},
-			},
-		);
-
-		const result = await handleApiResponse<TopupResponse>(response, "verifyTopupPayment");
-
-		revalidatePath("/top-ups/[topupId]", "page");
-
-		return {
-			message: result.message || "Topup payment verified successfully",
-			success: true,
-			fieldErrors: {},
-			transaction: result.transaction,
-		};
-	} catch (error: unknown) {
-		if (error instanceof Error) {
-			return {
-				message: error.message || "Please check your payment details and try again.",
-				success: false,
-				fieldErrors: {},
-			};
-		} else {
-			return {
-				message: "Topup verification failed.",
-				success: false,
-				fieldErrors: {},
-			};
-		}
-	}
-}
-
-

actions/user-actions.ts

@@ -1,131 +0,0 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
-import { redirect } from "next/navigation";
-import { getServerSession } from "next-auth";
-import { authOptions } from "@/app/auth";
-import type { RejectUserFormState } from "@/components/user/user-reject-dialog";
-import type { ApiError } from "@/lib/backend-types";
-import type { User, UserProfile } from "@/lib/types/user";
-import { handleApiResponse } from "@/utils/tryCatch";
-
-export async function VerifyUser(_userId: string) {
-	// const user = await prisma.user.findUnique({
-	// 	where: {
-	// 		id: userId,
-	// 	},
-	// 	include: {Rejectuser
-	// 		atoll: true,
-	// 		island: true,
-	// 	},
-	// });
-	// if (!user) {
-	// 	throw new Error("User not found");
-	// }
-	// const isValidPerson = await VerifyUserDetails({ user });
-	// if (!isValidPerson)
-	// 	throw new Error("The user details does not match national data.");
-	// if (isValidPerson) {
-	// 	await prisma.user.update({
-	// 		where: {
-	// 			id: userId,
-	// 		},
-	// 		data: {
-	// 			verified: true,
-	// 		},
-	// 	});
-	// const ninjaClient = await CreateClient({
-	// 	group_settings_id: "",
-	// 	address1: "",
-	// 	city: user.atoll?.name || "",
-	// 	state: user.island?.name || "",
-	// 	postal_code: "",
-	// 	country_id: "462",
-	// 	address2: user.address || "",
-	// 	contacts: {
-	// 		first_name: user.name?.split(" ")[0] || "",
-	// 		last_name: user.name?.split(" ")[1] || "",
-	// 		email: user.email || "",
-	// 		phone: user.phoneNumber || "",
-	// 		send_email: false,
-	// 		custom_value1: user.dob?.toISOString().split("T")[0] || "",
-	// 		custom_value2: user.id_card || "",
-	// 		custom_value3: "",
-	// 	},
-	// });
-	// }
-	// revalidatePath("/users");
-}
-
-export async function getProfile() {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/auth/profile/`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-
-	return handleApiResponse<User>(response, "getProfile");
-}
-
-
-
-export async function getProfileById(userId: string) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/${userId}/`,
-		{
-			method: "GET",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-		},
-	);
-
-	return handleApiResponse<UserProfile>(response, "getProfilebyId");
-}
-
-export async function rejectUser(
-	_prevState: RejectUserFormState,
-	formData: FormData
-): Promise<RejectUserFormState> {
-	const userId = formData.get("userId") as string;
-	const rejection_details = formData.get("rejection_details") as string;
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/${userId}/reject/`,
-		{
-			method: "DELETE",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
-			},
-			body: JSON.stringify({ rejection_details: rejection_details }),
-		},
-	);
-
-	if (!response.ok) {
-		const errorData = await response.json();
-		throw new Error(errorData.message || errorData.detail || "Failed to reject user");
-	}
-
-	// Handle 204 No Content response (successful deletion)
-	if (response.status === 204) {
-		revalidatePath("/users");
-		redirect("/users");
-	}
-
-	revalidatePath("/users");
-	const error = await response.json()
-	return {
-		message: (error as ApiError).message || (error as ApiError).detail || "An unexpected error occurred.",
-		fieldErrors: {},
-		payload: formData
-	};
-}

app/(auth)/auth/signup/page.tsx

@@ -1,16 +0,0 @@
-import SignUpForm from "@/components/auth/signup-form";
-import { redirect } from "next/navigation";
-
-export default async function SignupPage({
-	searchParams,
-}: {
-	searchParams: Promise<{ phone_number: string }>;
-}) {
-	const phone_number = (await searchParams).phone_number;
-	console.log({ phone_number });
-	if (!phone_number) {
-		return redirect("/auth/login");
-	}
-
-	return <SignUpForm />;
-}

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

@@ -1,36 +0,0 @@
-import { authOptions } from "@/app/auth";
-import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
-import ClientErrorMessage from "@/components/client-error-message";
-import { checkTempIdOrPhone } from "@/queries/authentication";
-import { tryCatch } from "@/utils/tryCatch";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-
-export default async function VerifyRegistrationOTP({
-	searchParams,
-}: {
-	searchParams: Promise<{ phone_number: string }>;
-}) {
-	const session = await getServerSession(authOptions)
-	if (session) {
-		// If the user is already logged in, redirect them to the home page
-		return redirect("/");
-	}
-	const phone_number = (await searchParams).phone_number;
-	if (!phone_number) {
-		return redirect("/login");
-	}
-	console.log(
-		"phone number from server page params (verify otp page)",
-		phone_number,
-	);
-	const [error, response] = await tryCatch(
-		checkTempIdOrPhone({ phone_number }),
-	);
-	if (error) {
-		console.log("Error in checkIdOrPhone", error);
-		return <ClientErrorMessage message={error.message} />;
-	}
-	if (response.otp_verified) redirect("/auth/signin");
-	return <VerifyRegistrationOTPForm phone_number={phone_number} />;
-}

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

@@ -1,19 +0,0 @@
-import VerifyOTPForm from "@/components/auth/verify-otp-form";
-import { redirect } from "next/navigation";
-
-export default async function VerifyOTP({
-	searchParams,
-}: {
-	searchParams: Promise<{ phone_number: string }>;
-}) {
-	const phone_number = (await searchParams).phone_number;
-	if (!phone_number) {
-		return redirect("/login");
-	}
-	console.log(
-		"phone number from server page params (verify otp page)",
-		phone_number,
-	);
-
-	return <VerifyOTPForm phone_number={phone_number} />;
-}

app/(dashboard)/agreements/page.tsx

@@ -1,13 +0,0 @@
-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">
-          Agreements
-        </h3>
-      </div>
-    </div>
-  )
-}

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

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

app/(dashboard)/devices/device-table-skeleton.tsx

@@ -1,78 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import { cn } from "@/lib/utils";
-
-export default function DevicesTableSkeleton() {
-	return (
-		<>
-			<div className="hidden sm:block">
-				<Table className="overflow-scroll">
-					<TableCaption>Table of all devices.</TableCaption>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Device Name</TableHead>
-							<TableHead>MAC Address</TableHead>
-							<TableHead>#</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody className="overflow-scroll">
-						{Array.from({ length: 10 }).map((_, i) => (
-							<TableRow key={`${i + 1}`}>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-							</TableRow>
-						))}
-					</TableBody>
-					<TableFooter>
-						<TableRow>
-							<TableCell colSpan={2}>
-								<Skeleton className="w-full  h-4 rounded" />
-							</TableCell>
-							<TableCell className="text-muted-foreground">
-								<Skeleton className="w-20 h-4 rounded" />
-							</TableCell>
-						</TableRow>
-					</TableFooter>
-				</Table>
-			</div>
-			<div className="sm:hidden my-4">
-				{Array.from({ length: 10 }).map((_, i) => (
-					<DeviceCardSkeleton key={`${i + 1}`} />
-				))}
-			</div>
-		</>
-	);
-}
-
-function DeviceCardSkeleton() {
-	return (
-		<div
-			className={cn(
-				"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
-			)}
-		>
-			<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
-				<Skeleton className="w-32 h-6" />
-				<Skeleton className="w-36 h-6" />
-				<Skeleton className="w-32 h-4" />
-				<Skeleton className="w-40 h-8" />
-			</div>
-		</div>
-	);
-}

app/(dashboard)/layout.tsx

@@ -1,14 +0,0 @@
-import { ApplicationLayout } from "@/components/auth/application-layout";
-import QueryProvider from "@/providers/query-provider";
-
-export default function DashboardLayout({
-	children,
-}: Readonly<{
-	children: React.ReactNode;
-}>) {
-	return <ApplicationLayout>
-		<QueryProvider>
-			{children}
-		</QueryProvider>
-	</ApplicationLayout>;
-}

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

@@ -1,41 +0,0 @@
-import { Suspense } from "react";
-import { DevicesTable } from "@/components/devices-table";
-import Search from "@/components/search";
-
-export default async function ParentalControl({
-  searchParams,
-}: {
-  searchParams: Promise<{
-    page: number;
-    sortBy: string;
-    status: string;
-  }>;
-}) {
-
-  const parentalControlFilters = {
-    is_active: "true",
-    has_a_pending_payment: "false",
-  };
-
-  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">Parental Control</h3>
-      </div>
-
-      <div
-        id="user-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <Search />
-      </div>
-      <Suspense key={(await searchParams).page} fallback={"loading...."}>
-        <DevicesTable
-          parentalControl={true}
-          searchParams={searchParams}
-          additionalFilters={parentalControlFilters}
-        />
-      </Suspense>
-    </div>
-  );
-}

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

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

app/(dashboard)/profile/page.tsx

@@ -1,95 +0,0 @@
-import { redirect } from "next/navigation";
-import { getServerSession } from "next-auth";
-import { getProfileById } from "@/actions/user-actions";
-import { authOptions } from "@/app/auth";
-import ClientErrorMessage from "@/components/client-error-message";
-import { Badge } from "@/components/ui/badge";
-import { FloatingLabelInput } from "@/components/ui/floating-label";
-import { tryCatch } from "@/utils/tryCatch";
-
-export default async function Profile() {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) return redirect("/auth/signin?callbackUrl=/profile");
-  const [error, profile] = await tryCatch(getProfileById(session?.user.id));
-  if (error) {
-    if (error.message === "Invalid token.") redirect("/auth/signin");
-    return <ClientErrorMessage message={error.message} />;
-  }
-  return (
-    <div>
-      <div className="flex justify-between items-center font-bold border rounded-md border-dashed title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Profile</h3>
-        <div className="text-sarLinkOrange uppercase font-mono text-sm flex flex-col items-center rounded gap-2 py-2 px-4">
-          <span>Profile Status</span>
-          {verifiedStatus(profile?.verified ?? false)}
-        </div>
-      </div>
-      <fieldset>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl">
-          <FloatingLabelInput
-            id="floating-name"
-            label="Full Name"
-            value={`${profile?.first_name} ${profile?.last_name}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-id-card"
-            label="ID Card"
-            value={`${profile?.id_card}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-island"
-            label="Island"
-            value={`${profile?.atoll.name}. ${profile?.island.name}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-dob"
-            label="Date of Birth"
-            value={`${new Date(
-              profile?.dob.toString() ?? "",
-            ).toLocaleDateString("en-US", {
-              month: "short",
-              day: "2-digit",
-              year: "numeric",
-            })}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-address"
-            label="Address"
-            value={`${profile?.address}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-mobile"
-            label="Phone Number"
-            value={`${profile?.mobile}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-account"
-            label="Account Number"
-            value={`${profile?.acc_no}`}
-            readOnly
-          />
-        </div>
-      </fieldset>
-      {/* <Suspense key={query} fallback={"loading...."}>
-        <TopupsTable searchParams={searchParams} />
-      </Suspense> */}
-    </div>
-  );
-}
-
-function verifiedStatus(status: boolean) {
-  switch (status) {
-    case true:
-      return <Badge className="bg-green-500 text-white">Verified</Badge>;
-    case false:
-      return <Badge className="bg-red-500 text-white">Not Verified</Badge>;
-    default:
-      return <Badge className="bg-yellow-500 text-white">Unknown</Badge>;
-  }
-}

app/(dashboard)/top-ups/[topupId]/page.tsx

@@ -1,80 +0,0 @@
-import { redirect } from "next/navigation";
-import { getTopup } from "@/actions/payment";
-import CancelTopupButton from "@/components/billing/cancel-topup-button";
-import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
-import ClientErrorMessage from "@/components/client-error-message";
-import TopupToPay from "@/components/topup-to-pay";
-import { Button } from "@/components/ui/button";
-import { TextShimmer } from "@/components/ui/text-shimmer";
-import { cn } from "@/lib/utils";
-import { tryCatch } from "@/utils/tryCatch";
-export default async function TopupPage({
-  params,
-}: {
-  params: Promise<{ topupId: string }>;
-}) {
-  const topupId = (await params).topupId;
-  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
-  if (error) {
-    if (error.message === "Invalid token.") redirect("/auth/signin");
-    return <ClientErrorMessage message={error.message} />;
-  }
-
-  return (
-    <div>
-      <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">Topup</h3>
-        <div className="flex flex-col gap-4 items-end w-full">
-          {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
-            <Button
-              disabled
-              className={cn(
-                "rounded-md opacity-100! uppercase font-semibold",
-                topup?.paid
-                  ? "text-green-900 bg-green-500/20"
-                  : "text-inherit bg-yellow-400",
-              )}
-            >
-              {topup.status}
-            </Button>
-          )}
-          {topup.status === "PENDING" && !topup.is_expired && (
-            <Button>
-              <TextShimmer>Payment Pending</TextShimmer>{" "}
-            </Button>
-          )}
-
-          {!topup.paid &&
-            (topup.is_expired ? (
-              <Button
-                disabled
-                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
-              >
-                Topup Expired
-              </Button>
-            ) : topup.status === "PENDING" ? (
-              <CancelTopupButton topupId={topupId} />
-            ) : topup.status === "CANCELLED" ? (
-              <Button disabled>Topup Cancelled</Button>
-            ) : (
-              ""
-            ))}
-        </div>
-      </div>
-      {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
-        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
-      )}
-      <div
-        id="user-topup-details"
-        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <TopupToPay
-          disabled={
-            topup.paid || topup.is_expired || topup.status === "CANCELLED"
-          }
-          topup={topup || undefined}
-        />
-      </div>
-    </div>
-  );
-}

app/(dashboard)/top-ups/page.tsx

@@ -1,86 +0,0 @@
-import { Suspense } from "react";
-import DynamicFilter from "@/components/generic-filter";
-import { TopupsTable } from "@/components/topups-table";
-
-export default async function Topups({
-  searchParams,
-}: {
-  searchParams: Promise<{
-    query: string;
-    page: number;
-    sortBy: string;
-    status: string;
-  }>;
-}) {
-  const query = (await searchParams)?.query || "";
-
-  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">My Topups</h3>
-      </div>
-      <div
-        id="topup-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <DynamicFilter
-          inputs={[
-            {
-              label: "Status",
-              name: "status",
-              type: "radio-group",
-              options: [
-                {
-                  label: "All",
-                  value: "",
-                },
-                {
-                  label: "Pending",
-                  value: "PENDING",
-                },
-                {
-                  label: "Cancelled",
-                  value: "CANCELLED",
-                },
-                {
-                  label: "Paid",
-                  value: "PAID",
-                },
-              ],
-            },
-            {
-              label: "Topup Expiry",
-              name: "is_expired",
-              type: "radio-group",
-              options: [
-                {
-                  label: "All",
-                  value: "",
-                },
-                {
-                  label: "Expired",
-                  value: "true",
-                },
-                {
-                  label: "Not Expired",
-                  value: "false",
-                },
-              ],
-            },
-            {
-              label: "Topup Amount",
-              name: "amount",
-              type: "dual-range-slider",
-              min: 0,
-              max: 1000,
-              step: 10,
-            },
-          ]}
-        />
-      </div>
-      <Suspense key={query} fallback={"loading...."}>
-        <TopupsTable searchParams={searchParams} />
-      </Suspense>
-    </div>
-  );
-}

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

@@ -1,26 +0,0 @@
-import { Suspense } from "react";
-import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
-
-export default async function UserPayments({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
-	}>;
-}) {
-	const query = (await searchParams)?.query || "";
-	// const session = await getServerSession(authOptions);
-	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">User Payments</h3>
-			</div>
-			<Suspense key={query} fallback={"loading...."}>
-				<UsersPaymentsTable searchParams={searchParams} />
-			</Suspense>
-		</div>
-	);
-}

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

@@ -1,14 +0,0 @@
-
-export default async function UserUpdate({
-  params,
-}: {
-  params: Promise<{
-    userId: string;
-  }>;
-}) {
-  const { userId } = await params;
-
-  return (
-    <div>UserUpdate: {userId}</div>
-  )
-}

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

@@ -1,184 +0,0 @@
-import Image from "next/image";
-import { redirect } from "next/navigation";
-import { getProfileById } from "@/actions/user-actions";
-import ClientErrorMessage from "@/components/client-error-message";
-import InputReadOnly from "@/components/input-read-only";
-import { Badge } from "@/components/ui/badge";
-import UserRejectDialog from "@/components/user/user-reject-dialog";
-import { UserVerifyDialog } from "@/components/user/user-verify-dialog";
-import { getNationalPerson } from "@/lib/person";
-import { tryCatch } from "@/utils/tryCatch";
-
-export default async function VerifyUserPage({
-	params,
-}: {
-	params: Promise<{
-		userId: string;
-	}>;
-}) {
-	const userId = (await params).userId;
-	const [error, dbUser] = await tryCatch(getProfileById(userId));
-
-	const [nationalDataEror, nationalData] = await tryCatch(getNationalPerson({ idCard: dbUser?.id_card ?? "" }))
-	if (nationalDataEror) {
-		console.warn("Error fetching national data:", nationalDataEror);
-	}
-	if (error) {
-		if (error.message === "UNAUTHORIZED") {
-			redirect("/auth/signin");
-		} else {
-			return <ClientErrorMessage message={error.message} />;
-		}
-	}
-
-	// return <pre>{JSON.stringify(nationalData, null, 2)}</pre>
-	const fullName = `${dbUser?.first_name} ${dbUser?.last_name}`;
-	const nationalDob = nationalData?.dob?.split("T")[0];
-	const dbUserDob = new Date(dbUser?.dob).toISOString().split("T")[0];
-
-	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">Verify user</h3>
-
-				<div className="flex gap-2">
-					{dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
-					{dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
-					{dbUser?.verified && (
-						<Badge variant={"secondary"} className="bg-lime-500">
-							Verified
-						</Badge>
-					)}
-				</div>
-			</div>
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start justify-start">
-				<div id="database-information">
-					<h4 className="p-2 rounded font-semibold">Database Information</h4>
-					<div className="shadow p-2 rounded-lg title-bg space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-						<InputReadOnly
-							showCheck
-							checkTrue={dbUser?.id_card === nationalData?.nic}
-							labelClassName="text-sarLinkOrange"
-							label="ID Card"
-							value={dbUser?.id_card ?? ""}
-						/>
-						<InputReadOnly
-							showCheck
-							checkTrue={fullName === nationalData?.name_en}
-							labelClassName="text-sarLinkOrange"
-							label="Name"
-							value={fullName}
-						/>
-						<InputReadOnly
-							showCheck
-							checkTrue={dbUser?.address === nationalData?.house_name_en}
-							labelClassName="text-sarLinkOrange"
-							label="House Name"
-							value={dbUser?.address ?? ""}
-						/>
-						<InputReadOnly
-							showCheck
-							checkTrue={dbUser?.island?.name === nationalData?.island_name_en}
-							labelClassName="text-sarLinkOrange"
-							label="Island"
-							value={dbUser?.island?.name ?? ""}
-						/>
-						<InputReadOnly
-							showCheck
-							checkTrue={dbUser?.atoll.name === nationalData?.atoll_en}
-							labelClassName="text-sarLinkOrange"
-							label="Atoll"
-							value={dbUser?.island?.name ?? ""}
-						/>
-
-						<InputReadOnly
-							showCheck
-							checkTrue={
-								dbUserDob === nationalDob
-							}
-							labelClassName="text-sarLinkOrange"
-							label="DOB"
-							value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
-								month: "short",
-								day: "2-digit",
-								year: "numeric",
-							})}
-						/>
-						<InputReadOnly
-							showCheck
-							checkTrue={dbUser?.mobile === nationalData?.primary_contact}
-							labelClassName="text-sarLinkOrange"
-							label="Phone Number"
-							value={dbUser?.mobile ?? ""}
-						/>
-					</div>
-				</div>
-				{(
-					<div id="national-information">
-						<h4 className="p-2 rounded font-semibold">National Information</h4>
-						<div className="shadow p-2 rounded-lg title-bg space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="ID Card"
-								value={nationalData?.nic ?? ""}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="Name"
-								value={nationalData?.name_en ?? ""}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="House Name"
-								value={nationalData?.house_name_en ?? ""}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="Island"
-								value={nationalData?.island_name_en ?? ""}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="Atoll"
-								value={nationalData?.atoll_en ?? ""}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="DOB"
-								value={new Date(nationalData?.dob ?? "").toLocaleDateString(
-									"en-US",
-									{
-										month: "short",
-										day: "2-digit",
-										year: "numeric",
-									},
-								)}
-							/>
-							<InputReadOnly
-								showCheck={false}
-								labelClassName="text-green-500"
-								label="Phone Number"
-								value={nationalData?.primary_contact ?? ""}
-							/>
-							<div className="flex flex-col col-span-2 items-center justify-center">
-								<Image
-									src={nationalData?.image_url || "https://i.pravatar.cc/300"}
-									height={100}
-									width={100}
-									className="object-fit aspect-square rounded-full"
-									alt="id photo"
-								/>
-							</div>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}

app/(dashboard)/users/page.tsx

@@ -1,80 +0,0 @@
-import Filter from "@/components/filter";
-import Search from "@/components/search";
-import { UsersTable } from "@/components/user-table";
-import {
-	AArrowDown,
-	AArrowUp,
-	CheckCheck,
-	Hourglass,
-	Minus,
-} from "lucide-react";
-import { Suspense } from "react";
-
-const sortfilterOptions = [
-	{
-		value: "asc",
-		label: "Ascending",
-		icon: <AArrowUp size={16} />,
-	},
-	{
-		value: "desc",
-		label: "Descending",
-		icon: <AArrowDown size={16} />,
-	},
-];
-
-export default async function AdminUsers({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
-	}>;
-}) {
-	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">Users</h3>
-			</div>
-
-			<div
-				id="user-table-filters"
-				className=" pb-4 gap-4 flex items-center justify-start"
-			>
-				<Search />
-				<Filter
-					options={[
-						{
-							value: "all",
-							label: "ALL",
-							icon: <Minus size={14} />,
-						},
-						{
-							value: "unverified",
-							label: "Unverfieid",
-							icon: <CheckCheck size={14} />,
-						},
-						{
-							value: "verified",
-							label: "Verified",
-							icon: <Hourglass size={14} />,
-						},
-					]}
-					defaultOption="all"
-					queryParamKey="status"
-				/>
-
-				<Filter
-					options={sortfilterOptions}
-					defaultOption="asc"
-					queryParamKey="sortBy"
-				/>
-			</div>
-			<Suspense fallback={"loading...."}>
-				<UsersTable searchParams={searchParams} />
-			</Suspense>
-		</div>
-	);
-}

app/(dashboard)/wallet/page.tsx

@@ -1,13 +0,0 @@
-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">
-          My Wallet
-        </h3>
-      </div>
-    </div>
-  )
-}

app/api/auth/[...nextauth]/route.ts

@@ -1,5 +0,0 @@
-import { authOptions } from "@/app/auth";
-import NextAuth from "next-auth";
-
-const handler = NextAuth(authOptions);
-export { handler as GET, handler as POST };

app/api/check-devices/route.ts

@@ -1,146 +0,0 @@
-export async function GET(request: Request) {
-	console.log(request.url);
-	return Response.json({ message: "Request received" });
-	// 	try {
-	// 		// Validate API key before proceeding
-	// 		validateApiKey(request);
-
-	// 		const currentTime = new Date();
-	// 		const hoursSinceLastRun =
-	// 			(currentTime.getTime() - lastRunTime.getTime()) / (1000 * 60 * 60);
-
-	// 		// Get all active and unblocked devices with their latest payment
-	// 		const devices = await prisma.device.findMany({
-	// 			where: {
-	// 				isActive: true,
-	// 				blocked: false,
-	// 			},
-	// 			include: {
-	// 				payments: true,
-	// 				User: {
-	// 					include: {
-	// 						devices: true,
-	// 					},
-	// 				},
-	// 			},
-	// 		});
-	// 		let devicesNeedingNotification = 0;
-	// 		let devicesBlocked = 0;
-
-	// 		for (const device of devices) {
-	// 			let expiryDate = new Date();
-
-	// 			const payment = device.payments[0];
-	// 			expiryDate = addMonths(
-	// 				payment?.paidAt || new Date(),
-	// 				payment?.numberOfMonths || 0,
-	// 			);
-
-	// 			// Calculate notification threshold (5 days before expiry)
-	// 			const notificationThreshold = addDays(expiryDate, -5);
-
-	// 			const currentDate = new Date();
-
-	// 			console.log("device name -> ", device.name);
-	// 			console.log("paid date -> ", device.payments[0]?.paidAt);
-	// 			console.log("no of months paid -> ", device.payments[0]?.numberOfMonths);
-	// 			console.log("calculated expire date -> ", expiryDate);
-	// 			console.log("notification threshold -> ", notificationThreshold);
-	// 			console.log("current date -> ", currentDate);
-
-	// 			// Check if device is within notification period
-	// 			if (
-	// 				isWithinInterval(currentDate, {
-	// 					start: notificationThreshold,
-	// 					end: expiryDate,
-	// 				})
-	// 			) {
-	// 				// Device is within 5 days of expiring
-	// 				if (device.User?.phoneNumber) {
-	// 					await sendNotifySms(
-	// 						new Date(expiryDate),
-	// 						device.User?.phoneNumber ?? "",
-	// 						device.name,
-	// 					);
-	// 					devicesNeedingNotification++;
-	// 				}
-	// 			}
-
-	// 			// Check if device has expired
-	// 			if (isAfter(currentDate, expiryDate)) {
-	// 				// Device has expired, block it
-	// 				// TODO: add a reason for blocking
-	// 				await blockDevice({
-	// 					macAddress: device.mac,
-	// 					type: "block",
-	// 				});
-	// 				await prisma.device.update({
-	// 					where: { id: device.id },
-	// 					data: {
-	// 						isActive: false,
-	// 						blocked: true,
-	// 					},
-	// 				});
-	// 				devicesBlocked++;
-	// 			}
-	// 		}
-
-	// 		if (hoursSinceLastRun < 24) {
-	// 			return Response.json({
-	// 				totalActiveDevices: devices.length,
-	// 				devicesChecked: {
-	// 					notified: devicesNeedingNotification,
-	// 					blocked: devicesBlocked,
-	// 				},
-	// 				message: "Check was run recently",
-	// 				nextCheckIn: `${Math.round(24 - hoursSinceLastRun)} hours`,
-	// 			});
-	// 		}
-
-	// 		return Response.json({
-	// 			success: true,
-	// 			totalActiveDevices: devices.length,
-	// 			devicesChecked: {
-	// 				notified: devicesNeedingNotification,
-	// 				blocked: devicesBlocked,
-	// 			},
-	// 			runAt: currentTime,
-	// 		});
-	// 	} catch (error) {
-	// 		if (error instanceof Error) {
-	// 			if (error.message === "API key is missing") {
-	// 				return Response.json({ error: "API key is required" }, { status: 401 });
-	// 			}
-	// 			if (error.message === "Invalid API key") {
-	// 				return Response.json({ error: "Invalid API key" }, { status: 403 });
-	// 			}
-	// 		}
-
-	// 		console.error("Error in device check:", error);
-	// 		return Response.json({ error: "Failed to check devices" }, { status: 500 });
-	// 	}
-	// }
-
-	// // Mock function - replace with your actual SMS implementation
-	// async function sendNotifySms(
-	// 	expireDate: Date,
-	// 	phoneNumber: string,
-	// 	deviceName?: string,
-	// ) {
-	// 	const respose = await fetch(`${process.env.SMS_API_BASE_URL}/api/sms`, {
-	// 		method: "POST",
-	// 		headers: {
-	// 			"Content-Type": "application/json",
-	// 			Authorization: `Bearer ${process.env.SMS_API_KEY}`,
-	// 		},
-	// 		body: JSON.stringify({
-	// 			check_delivery: false,
-	// 			number: phoneNumber,
-	// 			message: `REMINDER! Your device [${deviceName}] will expire on ${new Date(expireDate)}.`,
-	// 		}),
-	// 	});
-	// 	const data = await respose.json();
-	// 	console.log(data);
-	// 	return data;
-	//
-}

app/auth.ts

@@ -1,106 +0,0 @@
-import { logout } from "@/queries/authentication";
-import type { NextAuthOptions } from "next-auth";
-import type { JWT } from "next-auth/jwt";
-import CredentialsProvider from "next-auth/providers/credentials";
-
-export const authOptions: NextAuthOptions = {
-	pages: {
-		signIn: "/auth/signin",
-	},
-	session: {
-		strategy: "jwt",
-		maxAge: 30 * 60, // 30 mins
-	},
-	events: {
-		signOut({ token }) {
-			const apitoken = token.apiToken;
-			console.log("apitoken", apitoken);
-			logout({ token: apitoken as string });
-		},
-	},
-	providers: [
-		CredentialsProvider({
-			name: "Credentials",
-			credentials: {
-				pin: { label: "Pin", type: "text", placeholder: "000000" },
-			},
-			async authorize(credentials) {
-				const { pin } = credentials as {
-					pin: string;
-				};
-				console.log("pin", pin);
-				const res = await fetch(
-					`${process.env.SARLINK_API_BASE_URL}/callback/auth/`,
-					{
-						method: "POST",
-						headers: {
-							"Content-Type": "application/json",
-						},
-						body: JSON.stringify({
-							token: pin,
-						}),
-					},
-				);
-				console.log(res);
-				console.log("status", res.status);
-
-				const data = await res.json();
-				console.log({ data });
-				switch (res.status) {
-					case 200:
-						return { ...data.user, apiToken: data.token, expiry: data.expiry };
-					case 400:
-						throw new Error(
-							JSON.stringify({ message: data.token[0], status: res.status }),
-						);
-					case 429:
-						throw new Error(
-							JSON.stringify({ message: data.message, status: res.status }),
-						);
-					case 403:
-						throw new Error(
-							JSON.stringify({ message: data.error, status: res.status }),
-						);
-					default:
-						throw new Error(
-							JSON.stringify({
-								message: "FATAL: Unexprted Error occured!",
-								status: res.status,
-							}),
-						);
-				}
-			},
-		}),
-	],
-	callbacks: {
-		redirect: async ({ url, baseUrl }) => {
-			// Allows relative callback URLs
-			if (url.startsWith("/")) return `${baseUrl}${url}`;
-			return baseUrl;
-		},
-		session: async ({ session, token }) => {
-			const sanitizedToken = Object.keys(token).reduce((p, c) => {
-				// strip unnecessary properties
-				if (c !== "iat" && c !== "exp" && c !== "jti" && c !== "apiToken") {
-					Object.assign(p, { [c]: token[c] });
-				}
-				return p;
-			}, {});
-			// session.expires = token.expiry
-			return {
-				...session,
-				user: sanitizedToken,
-				apiToken: token.apiToken,
-				// expires: token.expiry,
-			};
-		},
-		jwt: ({ token, user }) => {
-			if (typeof user !== "undefined") {
-				// user has just signed in so the user object is populated
-				return user as unknown as JWT;
-			}
-			return token;
-		},
-	},
-	secret: process.env.NEXTAUTH_SECRET,
-};

app/layout.tsx

@@ -1,59 +0,0 @@
-import { Provider } from "jotai";
-import { ThemeProvider } from "@/providers/theme-provider";
-
-import type { Metadata } from "next";
-import { Barlow, Bokor } from "next/font/google";
-import NextTopLoader from "nextjs-toploader";
-import { Toaster } from "sonner";
-import "./globals.css";
-import { AuthProvider } from "@/providers/AuthProvider";
-import QueryProvider from "@/providers/query-provider";
-import { getServerSession } from "next-auth";
-import { authOptions } from "./auth";
-const barlow = Barlow({
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "600", "700", "800", "900"],
-  variable: "--font-barlow",
-});
-
-const bokor = Bokor({
-  subsets: ["latin"],
-  weight: ["400"],
-  variable: "--font-bokor",
-});
-
-export const metadata: Metadata = {
-  title: "SAR Link Portal",
-  description: "Sarlink Portal",
-};
-
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  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`}>
-        <AuthProvider session={session || undefined}>
-          <Provider>
-            <NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
-            <Toaster richColors />
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              <QueryProvider>
-                {children}
-              </QueryProvider>
-            </ThemeProvider>
-          </Provider>
-        </AuthProvider>
-      </body>
-
-    </html>
-  );
-}

app/next-auth.d.ts

@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// @ts-expect-error importing unused types are required here
-import NextAuth, { DefaultSession, type User, Session } from "next-auth";
-/* eslint-enable @typescript-eslint/no-unused-vars */
-declare module "next-auth" {
-	/**
-	 * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
-	 */
-
-	interface Session {
-		apiToken?: string;
-		name?: string | null;
-		email?: string | null;
-		image?: string | null;
-		user?: User & {
-			expiry?: string;
-			id?: number;
-			username?: string;
-			user_permissions?: { id: number; name: string }[];
-			id_card?: string;
-			mobile?: string;
-			wallet_balance?: number;
-			first_name?: string;
-			last_name?: string;
-			last_login?: string;
-			date_joined?: string;
-			is_superuser?: boolean;
-			is_admin?: boolean;
-		};
-		expires: ISODateString;
-	}
-}

app/page.tsx

@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function Home() {
-  return redirect("/devices");
-}

biome.json

@@ -1,37 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "tab"
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"suspicious": {
-				"noImplicitAnyLet": "error"
-			},
-			"recommended": true
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "double"
-		}
-	},
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	}
-}

components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

components/account-information.tsx

@@ -1,56 +0,0 @@
-"use client"
-import { Clipboard, ClipboardCheck } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Button } from "./ui/button";
-
-export function AccountInfomation({
-  accountNo,
-  accName,
-}: {
-  accountNo: string;
-  accName: string;
-}) {
-  const [accNo, setAccNo] = useState(false);
-  return (
-    <div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
-      <h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
-        Account Information
-      </h6>
-      <div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
-        <div className="text-sm font-semibold">Account Name</div>
-        <span>{accName}</span>
-      </div>
-      <div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
-        <div className="flex flex-col items-center justify-center w-full">
-          <p className="text-sm font-semibold">Account No</p>
-          <span>{accountNo}</span>
-          <Button
-            onClick={() => {
-              setTimeout(() => {
-                setAccNo(true);
-                navigator.clipboard.writeText(accountNo);
-              }, 2000);
-              toast.success("Account number copied!");
-              setAccNo((prev) => !prev);
-            }}
-            className="mt-2 w-full"
-            variant={"secondary"}
-          >
-            {accNo ? (
-              <div className="flex items-center gap-2">
-                <span>Copy Account Number</span>
-                <Clipboard />
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                <span>Copy Account Number</span>
-                <ClipboardCheck color="green" />
-              </div>
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

components/admin/user-payments-table.tsx

@@ -1,236 +0,0 @@
-// import Pagination from "@/components/pagination";
-// import { Badge } from "@/components/ui/badge";
-// import { Button } from "@/components/ui/button";
-// import {
-// 	Table,
-// 	TableBody,
-// 	TableCaption,
-// 	TableCell,
-// 	TableFooter,
-// 	TableHead,
-// 	TableHeader,
-// 	TableRow,
-// } from "@/components/ui/table";
-// import Link from "next/link";
-
-export async function UsersPaymentsTable({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
-	}>;
-}) {
-	const query = (await searchParams)?.query || "";
-	console.log(query);
-	// const page = (await searchParams)?.page;
-	// const sortBy = (await searchParams)?.sortBy || "asc";
-	// const totalPayments = await prisma.payment.count({
-	//   where: {
-	//     OR: [
-	//       {
-	//         user: {
-	//           name: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           phoneNumber: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           address: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           id_card: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//     ],
-	//   },
-	// });
-
-	// const totalPages = Math.ceil(totalPayments / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
-
-	// const payments = await prisma.payment.findMany({
-	//   where: {
-	//     OR: [
-	//       {
-	//         user: {
-	//           name: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           phoneNumber: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           address: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           id_card: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//     ],
-	//   },
-	//   include: {
-	//     user: true,
-	//     devices: true,
-	//   },
-	//   skip: offset,
-	//   take: limit,
-	//   orderBy: {
-	//     id: `${sortBy}` as "asc" | "desc",
-	//   },
-	// });
-
-	// const users = await prisma.user.findMany({
-	// 	where: {
-	// 		role: "USER",
-	// 	},
-	// 	include: {
-	// 		atoll: true,
-	// 		island: true,
-	// 	},
-	// });
-	return null;
-	// return (
-	// 	<div>
-	// 		{payments.length === 0 ? (
-	// 			<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-	// 				<h3>No user payments yet.</h3>
-	// 			</div>
-	// 		) : (
-	// 			<>
-	// 				<Table className="overflow-scroll">
-	// 					<TableCaption>Table of all users.</TableCaption>
-	// 					<TableHeader>
-	// 						<TableRow>
-	// 							<TableHead>Devices paid</TableHead>
-	// 							<TableHead>User</TableHead>
-	// 							<TableHead>Amount</TableHead>
-	// 							<TableHead>Duration</TableHead>
-	// 							<TableHead>Payment Status</TableHead>
-	// 							<TableHead>Payment Method</TableHead>
-	// 							<TableHead>Paid At</TableHead>
-	// 							<TableHead>Action</TableHead>
-	// 						</TableRow>
-	// 					</TableHeader>
-	// 					<TableBody className="overflow-scroll">
-	// 						{payments.map((payment) => (
-	// 							<TableRow
-	// 								className={`${payment.paid && "title-bg dark:bg-black"}`}
-	// 								key={payment.id}
-	// 							>
-	// 								<TableCell className="font-medium">
-	// 									<ol className="list-disc list-inside text-sm">
-	// 										{payment.devices.map((device) => (
-	// 											<li
-	// 												key={device.id}
-	// 												className="text-sm text-muted-foreground"
-	// 											>
-	// 												{device.name}
-	// 											</li>
-	// 										))}
-	// 									</ol>
-	// 								</TableCell>
-	// 								<TableCell className="font-medium">
-	// 									{payment.user.id_card}
-	// 								</TableCell>
-	// 								<TableCell>{payment.user?.name}</TableCell>
-	// 								<TableCell>{payment.user?.name}</TableCell>
-	// 								<TableCell>{payment.id}</TableCell>
-
-	// 								<TableCell>
-	// 									{payment.paid ? (
-	// 										<Badge
-	// 											variant="outline"
-	// 											className="bg-lime-100 text-black"
-	// 										>
-	// 											Verified
-	// 										</Badge>
-	// 									) : (
-	// 										<Badge
-	// 											variant="outline"
-	// 											className="bg-yellow-100 text-black"
-	// 										>
-	// 											Unverified
-	// 										</Badge>
-	// 									)}
-	// 								</TableCell>
-	// 								<TableCell>
-	// 									{new Date(payment.paidAt ?? "").toLocaleDateString(
-	// 										"en-US",
-	// 										{
-	// 											month: "short",
-	// 											day: "2-digit",
-	// 											year: "numeric",
-	// 										},
-	// 									)}
-	// 								</TableCell>
-
-	// 								<TableCell>{payment.id}</TableCell>
-	// 								<TableCell>
-	// 									<Link href={`/payments/${payment.id}/verify`}>
-	// 										<Button>Details</Button>
-	// 									</Link>
-	// 								</TableCell>
-	// 							</TableRow>
-	// 						))}
-	// 					</TableBody>
-	// 					<TableFooter>
-	// 						<TableRow>
-	// 							<TableCell colSpan={8}>
-	// 								{query.length > 0 && (
-	// 									<p className="text-sm text-muted-foreground">
-	// 										Showing {payments.length} locations for &quot;{query}
-	// 										&quot;
-	// 									</p>
-	// 								)}
-	// 							</TableCell>
-	// 							<TableCell className="text-muted-foreground">
-	// 								{totalPayments} payments
-	// 							</TableCell>
-	// 						</TableRow>
-	// 					</TableFooter>
-	// 				</Table>
-	// 				<Pagination totalPages={totalPages} currentPage={page} />
-	// 			</>
-	// 		)}
-	// 	</div>
-	// );
-}

components/billing/cancel-topup-button.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { Loader2, Trash2 } from "lucide-react";
-import { useRouter } from "next/navigation";
-import React from "react";
-import { toast } from "sonner";
-import { cancelTopup } from "@/actions/payment";
-import { tryCatch } from "@/utils/tryCatch";
-import { Button } from "../ui/button";
-
-export default function CancelTopupButton({
-  topupId,
-}: { topupId: string }) {
-  const router = useRouter();
-  const [loading, setLoading] = React.useState(false);
-  return (
-    <Button
-      onClick={async () => {
-        setLoading(true);
-        const [error, topup] = await tryCatch(cancelTopup({ id: topupId }));
-        if (error) {
-          toast.error(error.message);
-          setLoading(false);
-        } else {
-          toast.success("Topup cancelled successfully!", {
-            description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
-            closeButton: true,
-          })
-          router.replace("/top-ups");
-        }
-      }}
-      disabled={loading}
-      variant={"destructive"}
-    >
-      Cancel Topup
-      {loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
-    </Button>
-  );
-}

components/billing/expiry-time-countdown.tsx

@@ -1,57 +0,0 @@
-'use client'
-import { usePathname, useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { Progress } from '@/components/ui/progress'
-
-const calculateTimeLeft = (expiresAt: string) => {
-  const now = Date.now()
-  const expirationTime = new Date(expiresAt).getTime()
-  return Math.max(0, Math.floor((expirationTime - now) / 1000))
-}
-
-const HumanizeTimeLeft = (seconds: number) => {
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
-  return `${minutes}m ${remainingSeconds}s`
-}
-
-export default function ExpiryCountDown({ expiresAt, expiryLabel }: { expiresAt: string, expiryLabel: string }) {
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(expiresAt))
-  const [mounted, setMounted] = useState(false)
-  const router = useRouter()
-  const pathname = usePathname()
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft(expiresAt))
-    }, 1000)
-
-    return () => clearInterval(timer)
-  }, [expiresAt])
-
-  useEffect(() => {
-    if (timeLeft <= 0) {
-      router.replace(pathname)
-    }
-  }, [timeLeft, router, pathname])
-
-  if (!mounted) {
-    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='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} />
-      )}
-    </div>
-  )
-}

components/clickable-row.tsx

@@ -1,100 +0,0 @@
-"use client";
-import { useAtom } from "jotai";
-import { HandCoins } from "lucide-react";
-import Link from "next/link";
-import { TableCell, TableRow } from "@/components/ui/table";
-import { deviceCartAtom } from "@/lib/atoms";
-import type { Device } from "@/lib/backend-types";
-import { cn } from "@/lib/utils";
-import AddDevicesToCartButton from "./add-devices-to-cart-button";
-import BlockDeviceDialog from "./block-device-dialog";
-export default function ClickableRow({
-	device,
-	parentalControl,
-	admin = false,
-}: { device: Device; parentalControl?: boolean; admin?: boolean }) {
-	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
-
-	return (
-		<TableRow
-			key={device.id}
-			className={cn(
-				(parentalControl === false && device.blocked) || device.is_active
-					? "cursor-not-allowed hover:bg-accent-foreground/10"
-					: "cursor-pointer hover:bg-muted-foreground/10",
-			)}
-			onClick={() => {
-				if (device.blocked) return;
-				if (device.is_active === true) return;
-				if (device.has_a_pending_payment === true) return;
-				if (parentalControl === true) return;
-				setDeviceCart((prev) =>
-					devices.some((d) => d.id === device.id)
-						? prev.filter((d) => d.id !== device.id)
-						: [...prev, device],
-				);
-			}}
-		>
-			<TableCell>
-				<div className="flex flex-col items-start">
-					<Link
-						className={cn(
-							"hover:underline font-semibold",
-							device.is_active ? "text-green-600" : "",
-						)}
-						href={`/devices/${device.id}`}
-						onClick={(e) => e.stopPropagation()}
-					>
-						{device.name}
-					</Link>
-					{device.is_active ? (
-						<div className="text-muted-foreground">
-							Active until{" "}
-							<span className="font-semibold">
-								{new Date(device.expiry_date || "").toLocaleDateString(
-									"en-US",
-									{
-										month: "short",
-										day: "2-digit",
-										year: "numeric",
-									},
-								)}
-							</span>
-						</div>
-					) : (
-						<p className="text-muted-foreground">Device Inactive</p>
-					)}
-					{device.has_a_pending_payment && (
-						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
-								Payment Pending{" "}
-								<HandCoins className="animate-pulse" size={14} />
-							</span>
-						</Link>
-					)}
-
-					{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>
-						</div>
-					)}
-				</div>
-			</TableCell>
-			<TableCell className="font-medium">{device.mac}</TableCell>
-			<TableCell className="font-medium">{device?.vendor}</TableCell>
-			<TableCell>
-				{!parentalControl ? (
-					<AddDevicesToCartButton device={device} />
-				) : (
-					<BlockDeviceDialog
-						admin={admin}
-						type={device.blocked ? "unblock" : "block"}
-						device={device}
-						parentalControl={parentalControl}
-					/>
-				)}
-			</TableCell>
-		</TableRow>
-	);
-}

components/devices-to-pay.tsx

@@ -1,180 +0,0 @@
-"use client";
-import {
-	BadgeDollarSign,
-	Loader2,
-	Wallet
-} from "lucide-react";
-import { useActionState, useEffect } from "react";
-import { toast } from "sonner";
-import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableRow,
-} from "@/components/ui/table";
-import type { Payment } from "@/lib/backend-types";
-import type { User } from "@/lib/types/user";
-import { AccountInfomation } from "./account-information";
-import { Button } from "./ui/button";
-
-const initialState: VerifyDevicePaymentState = {
-	message: "",
-	success: false,
-	fieldErrors: {},
-};
-
-export default function DevicesToPay({
-	payment,
-	user,
-	disabled
-}: { payment?: Payment; user?: User, disabled?: boolean }) {
-	const [state, formAction, isPending] = useActionState(verifyDevicePayment, initialState);
-
-	// Handle toast notifications based on state changes
-	useEffect(() => {
-		if (state.success && state.message) {
-			toast.success("Payment successful!", {
-				closeButton: true,
-				description: state.message,
-			});
-		} else if (!state.success && state.message && state.message !== initialState.message) {
-			toast.error("Payment Verification Failed", {
-				closeButton: true,
-				description: state.message,
-			});
-		}
-	}, [state]);
-
-	const devices = payment?.devices;
-	if (devices?.length === 0) {
-		return null;
-	}
-	// 100+(n−1)×75
-	const walletBalance = user?.wallet_balance ?? 0;
-
-	const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
-
-	return (
-		<div className="w-full">
-			<div className="p-2 flex flex-col gap-2">
-				<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
-					{!payment?.paid ? "Devices to pay" : "Devices Paid"}
-				</h3>
-				<div className="flex flex-col gap-2">
-					{devices?.map((device) => (
-						<div
-							key={device.id}
-							className="bg-muted border rounded p-2 flex gap-2 items-center"
-						>
-							<div className="flex flex-col">
-								<div className="text-sm font-medium">{device.name}</div>
-								<div className="text-xs text-muted-foreground">
-									{device.mac}
-								</div>
-							</div>
-						</div>
-					))}
-				</div>
-			</div>
-			<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
-				<Table>
-					<TableCaption>
-						<div className="max-w-sm mx-auto">
-							<p>Please send the following amount to the payment address</p>
-							<AccountInfomation
-								accName="Baraveli Dev"
-								accountNo="90101400028321000"
-							/>
-							{payment?.paid ? (
-								<Button
-									size={"lg"}
-									variant={"secondary"}
-									disabled
-									className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
-								>
-									Payment Verified
-								</Button>
-							) : (
-								<div className="flex flex-col gap-2">
-									{isWalletPayVisible && (
-										<form action={formAction}>
-											<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
-											<input type="hidden" name="method" value="WALLET" />
-											<Button
-												disabled={isPending}
-												type="submit"
-												variant={"secondary"}
-												size={"lg"}
-											>
-												{isPending ? "Processing payment..." : "Pay with wallet"}
-												<Wallet />
-											</Button>
-										</form>
-									)}
-									<form action={formAction}>
-										<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
-										<input type="hidden" name="method" value="TRANSFER" />
-										<Button
-											disabled={isPending || disabled}
-											type="submit"
-											size={"lg"}
-											className="mb-4"
-										>
-											{isPending ? "Processing payment..." : "I have paid"}
-											{isPending ? (
-												<Loader2 className="animate-spin" />
-											) : (
-												<BadgeDollarSign />
-											)}
-										</Button>
-									</form>
-								</div>
-							)}
-						</div>
-					</TableCaption>
-					<TableBody className="">
-						<TableRow>
-							<TableCell>Payment created</TableCell>
-							<TableCell className="text-right">
-								{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>
-							<TableCell>Total Devices</TableCell>
-							<TableCell className="text-right text-xl">
-								{devices?.length}
-							</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell>Duration</TableCell>
-							<TableCell className="text-right text-xl">
-								{payment?.number_of_months} Months
-							</TableCell>
-
-						</TableRow>
-					</TableBody>
-					<TableFooter>
-						<TableRow className="">
-							<TableCell colSpan={1}>Total Due</TableCell>
-							<TableCell className="text-right text-3xl font-bold">
-								{payment?.amount?.toFixed(2)}
-							</TableCell>
-						</TableRow>
-					</TableFooter>
-				</Table>
-			</div>
-		</div>
-	);
-}
-
-

components/devices/device-filter.tsx

@@ -1,183 +0,0 @@
-"use client"
-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 { 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';
-export default function DeviceFilter() {
-  const { replace } = useRouter();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [disabled, startTransition] = useTransition();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const params = new URLSearchParams(searchParams.toString());
-
-
-  const [urlInputName] = useQueryState("name", {
-    clearOnDefault: true
-  })
-  const [urlInputMac] = useQueryState("mac", {
-    clearOnDefault: true
-  })
-  const [urlInputVendor] = useQueryState("vendor", {
-    clearOnDefault: true
-  })
-
-  // Local state for input fields
-  const [inputName, setInputName] = useState(urlInputName ?? "");
-  const [inputMac, setInputMac] = useState(urlInputMac ?? "");
-  const [inputVendor, setInputVendor] = useState(urlInputVendor ?? "");
-
-  // Map filter keys to their state setters
-  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 }) {
-
-    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(() => {
-      replace(`${pathname}?${params.toString()}`);
-    });
-  }
-
-  const appliedFilters = searchParams
-    .toString()
-    .split("&")
-    .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">
-            Filter
-            <ListFilter />
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <div className="mx-auto w-full max-w-3xl">
-            <DrawerHeader>
-              <DrawerTitle>Device Filters</DrawerTitle>
-              <DrawerDescription asChild>
-                <div>
-                  Select your desired filters here
-                </div>
-              </DrawerDescription>
-            </DrawerHeader>
-
-            <div className="grid sm:grid-cols-3 gap-4 p-4">
-              <Input
-                placeholder="Device name ..."
-                value={inputName || searchParams.get("name") || ""}
-                onChange={e => setInputName(e.target.value)}
-              />
-              <Input
-                placeholder="Device Mac address ..."
-                value={inputMac || searchParams.get("mac") || ""}
-                onChange={e => setInputMac(e.target.value)}
-              />
-              <Input
-                placeholder="Device vendor ..."
-                value={inputVendor || searchParams.get("vendor") || ""}
-                onChange={e => setInputVendor(e.target.value)}
-              />
-            </div>
-            <DrawerFooter className="max-w-sm mx-auto">
-              <Button
-                onClick={() => {
-                  handleSearch({
-                    name: inputName ?? "",
-                    mac: inputMac ?? "",
-                    vendor: inputVendor ?? "",
-                  });
-                }}
-              >
-                {disabled ? (
-                  <>
-                    <Loader2 className="ml-2 animate-spin" />
-                  </>
-                ) : (
-                  <>
-                    Apply Filters
-                  </>
-                )}
-              </Button>
-              <Button variant="secondary" onClick={() => {
-                setInputName("");
-                setInputMac("");
-                setInputVendor("");
-                replace(pathname)
-              }}>
-                Clear Filters
-              </Button>
-
-              <DrawerClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </div>
-        </DrawerContent>
-      </Drawer>
-      <div className="flex gap-2 w-fit flex-wrap">
-        {appliedFilters.map((filter) => (
-          <Badge
-            aria-disabled={disabled}
-            variant={"outline"}
-            className={cn("flex p-2 gap-2 items-center justify-between", { "opacity-50 pointer-events-none": disabled })}
-            key={filter}>
-            <span className="text-md">{prettyPrintFilter(filter)}</span>
-            {
-              disabled ? (
-                <Loader2 className="animate-spin" size={16} />
-              ) : (
-                <X
-                  className="bg-sarLinkOrange/50 rounded-full p-1 hover:cursor-pointer hover:ring ring-sarLinkOrange"
-                  size={16}
-                  onClick={() => {
-                    const key = filter.split("=")[0];
-                    params.delete(key);
-
-                    // Use the mapping to clear the correct input state
-                    filterSetters[key]?.("");
-
-                    startTransition(() => {
-                      replace(`${pathname}?${params.toString()}`);
-                    });
-                  }}
-                >
-                  Remove
-                </X>
-              )
-            }
-          </Badge>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-
-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>;
-    case "mac":
-      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>;
-    default:
-      return filter;
-  }
-}
-

components/full-page-loader.tsx

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

components/generic-filter.tsx

@@ -1,604 +0,0 @@
-"use client";
-import { ListFilter, Loader2, X } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useState, useTransition } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer";
-import { DualRangeSlider } from "@/components/ui/dual-range-slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
-
-interface CheckboxGroupProps {
-  label: string;
-  options: Array<{ value: string; label: string }>;
-  selectedValues: string[];
-  onChange: (values: string[]) => void;
-  name: string;
-}
-
-const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
-  label,
-  options,
-  selectedValues,
-  onChange,
-  name,
-}) => {
-  const handleCheckedChange = (value: string, checked: boolean) => {
-    if (checked) {
-      onChange([...selectedValues, value]);
-    } else {
-      onChange(selectedValues.filter((v) => v !== value));
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-2 p-2 border rounded-md">
-      <Label className="font-semibold text-sm">{label}</Label>
-      <div className="flex flex-col gap-2">
-        {options.map((option) => (
-          <div
-            key={`${name}-${option.value}`}
-            className="flex items-center space-x-2"
-          >
-            <Checkbox
-              id={`${name}-${option.value}`}
-              checked={selectedValues.includes(option.value)}
-              onCheckedChange={(checked) =>
-                handleCheckedChange(option.value, !!checked)
-              }
-            />
-            <Label htmlFor={`${name}-${option.value}`}>{option.label}</Label>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-type FilterOption = { value: string; label: string };
-
-type FilterInputConfig<TKey extends string> =
-  | {
-    name: TKey;
-    label: string;
-    placeholder: string;
-    type: "string" | "number";
-  }
-  | {
-    name: TKey;
-    label: string;
-    type: "checkbox-group";
-    options: FilterOption[];
-    serialize?: (values: string[]) => string;
-    deserialize?: (urlValue: string) => string[];
-  }
-  | {
-    name: TKey;
-    label: string;
-    type: "radio-group";
-    options: FilterOption[];
-  }
-  | {
-    name: TKey;
-    label: string;
-    type: "dual-range-slider";
-    min: number;
-    max: number;
-    step?: number;
-    sliderLabel?: string;
-    formatLabel?: (value: number | undefined) => React.ReactNode;
-  };
-
-// Utility type to extract the config for a specific key from the array
-type GetConfigForKey<
-  TKey,
-  TConfigArray extends FilterInputConfig<string>[],
-> = TConfigArray extends ReadonlyArray<infer U>
-  ? U extends FilterInputConfig<string> & { name: TKey }
-  ? U
-  : never
-  : never;
-
-// This type maps filter keys to their appropriate value types (string or string[])
-type FilterValues<
-  TFilterKeys extends string,
-  TInputs extends FilterInputConfig<string>[],
-> = {
-    [K in TFilterKeys]: GetConfigForKey<K, TInputs> extends {
-      type: "checkbox-group";
-    }
-    ? string[]
-    : GetConfigForKey<K, TInputs> extends { type: "radio-group" }
-    ? string
-    : GetConfigForKey<K, TInputs> extends { type: "dual-range-slider" }
-    ? number[]
-    : string;
-  };
-
-// Default serialization/deserialization for checkbox-group if not provided
-const defaultSerialize = (values: string[]) => values.join(",");
-const defaultDeserialize = (urlValue: string) =>
-  urlValue ? urlValue.split(",") : [];
-
-// --- Component Props ---
-interface DynamicFilterProps<
-  TFilterKeys extends string,
-  TInputs extends FilterInputConfig<TFilterKeys>[],
-> {
-  inputs: TInputs;
-  title?: string;
-  description?: string;
-}
-
-export default function DynamicFilter<
-  TFilterKeys extends string,
-  TInputs extends FilterInputConfig<TFilterKeys>[],
->({
-  inputs,
-  title = "Filters",
-  description = "Select your desired filters here",
-}: DynamicFilterProps<TFilterKeys, TInputs>) {
-  const { replace } = useRouter();
-  const [isOpen, setIsOpen] = useState(false);
-  const [disabled, startTransition] = useTransition();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-
-  // Use a ref or memoized value for URLSearchParams to avoid re-creations
-  // and ensure it's always based on the latest searchParams.
-  const currentParams = useMemo(
-    () => new URLSearchParams(searchParams.toString()),
-    [searchParams],
-  );
-
-  // Initialize local state for input values based on URL
-  const initialInputState = useMemo(() => {
-    const initialState: Partial<FilterValues<TFilterKeys, TInputs>> = {};
-    for (const input of inputs) {
-      const urlValue = searchParams.get(input.name);
-      if (input.type === "checkbox-group") {
-        const deserialize = input.deserialize || defaultDeserialize;
-        (initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
-          deserialize(urlValue || "") as FilterValues<
-            TFilterKeys,
-            TInputs
-          >[typeof input.name];
-      } else if (input.type === "dual-range-slider") {
-        const minValue = searchParams.get(`${input.name}_min`);
-        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] =
-          [parsedMin, parsedMax] as FilterValues<
-            TFilterKeys,
-            TInputs
-          >[typeof input.name];
-      } else {
-        (initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
-          (urlValue || "") as FilterValues<
-            TFilterKeys,
-            TInputs
-          >[typeof input.name];
-      }
-    }
-    return initialState as FilterValues<TFilterKeys, TInputs>;
-  }, [inputs, searchParams]); // Re-initialize if inputs config or URL searchParams change
-
-  const [inputValues, setInputValues] =
-    useState<FilterValues<TFilterKeys, TInputs>>(initialInputState);
-
-  // Update local state if URL searchParams change while drawer is closed
-  // This is important if filters are applied externally or on page load
-  useEffect(() => {
-    if (!isOpen) {
-      setInputValues(initialInputState);
-    }
-  }, [isOpen, initialInputState]);
-
-  // Handler for text/number input changes
-  const handleTextOrNumberInputChange =
-    (name: TFilterKeys) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      setInputValues((prev) => ({
-        ...prev,
-        [name]: e.target.value,
-      }));
-    };
-
-  // Handler for checkbox group changes
-  const handleCheckboxGroupChange =
-    (name: TFilterKeys) => (values: string[]) => {
-      setInputValues((prev) => ({
-        ...prev,
-        [name]: values,
-      }));
-    };
-
-  // Handler for dual range slider changes
-  const handleDualRangeChange =
-    (name: TFilterKeys) => (values: number[]) => {
-      setInputValues((prev) => ({
-        ...prev,
-        [name]: values,
-      }));
-    };
-
-  // Handles applying all filters
-  const handleApplyFilters = () => {
-    const newParams = new URLSearchParams(currentParams.toString()); // Start fresh with current params
-
-    for (const input of inputs) {
-      const value = inputValues[input.name];
-
-      if (input.type === "checkbox-group") {
-        const serialize = input.serialize || defaultSerialize;
-        const serializedValue = serialize(value as string[]);
-        if (serializedValue) {
-          newParams.set(input.name, serializedValue);
-        } else {
-          newParams.delete(input.name);
-        }
-      } 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)) {
-          newParams.set(`${input.name}_min`, rangeValues[0].toString());
-          newParams.set(`${input.name}_max`, rangeValues[1].toString());
-        } else {
-          newParams.delete(`${input.name}_min`);
-          newParams.delete(`${input.name}_max`);
-        }
-      } else {
-        // String/Number inputs
-        if (value) {
-          newParams.set(input.name, value as string);
-        } else {
-          newParams.delete(input.name);
-        }
-      }
-    }
-
-    newParams.set("page", "1");
-
-    startTransition(() => {
-      replace(`${pathname}?${newParams.toString()}`);
-      setIsOpen(false);
-    });
-  };
-
-  // Handles clearing all filters
-  const handleClearFilters = () => {
-    // Reset local input values
-    const clearedInputState: Partial<FilterValues<TFilterKeys, TInputs>> = {};
-    for (const input of inputs) {
-      if (input.type === "checkbox-group") {
-        (clearedInputState as FilterValues<TFilterKeys, TInputs>)[
-          input.name as TFilterKeys
-        ] = [] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
-      } 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];
-      } 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];
-      }
-    }
-    setInputValues(clearedInputState as FilterValues<TFilterKeys, TInputs>);
-
-    startTransition(() => {
-      replace(pathname);
-      setIsOpen(false);
-    });
-  };
-
-  // Dynamically constructs applied filters for badges
-  const appliedFilters = useMemo(() => {
-    const filters: Array<{
-      key: TFilterKeys;
-      value: string | string[] | number[];
-      label: string;
-      config: FilterInputConfig<TFilterKeys>;
-    }> = [];
-
-    for (const input of inputs) {
-      if (input.type === "dual-range-slider") {
-        const minValue = searchParams.get(`${input.name}_min`);
-        const maxValue = searchParams.get(`${input.name}_max`);
-        if (minValue && maxValue) {
-          const parsedMin = Number(minValue);
-          const parsedMax = Number(maxValue);
-          // Only show as applied filter if values are different from defaults
-          if (parsedMin !== input.min || parsedMax !== input.max) {
-            filters.push({
-              key: input.name,
-              value: [parsedMin, parsedMax],
-              label: input.label,
-              config: input,
-            });
-          }
-        }
-      } else {
-        const urlValue = searchParams.get(input.name);
-        if (urlValue) {
-          if (input.type === "checkbox-group") {
-            const deserialize = input.deserialize || defaultDeserialize;
-            const deserialized = deserialize(urlValue);
-            if (deserialized.length > 0) {
-              filters.push({
-                key: input.name,
-                value: deserialized,
-                label: input.label,
-                config: input,
-              });
-            }
-          } else {
-            filters.push({
-              key: input.name,
-              value: urlValue,
-              label: input.label,
-              config: input,
-            });
-          }
-        }
-      }
-    }
-    return filters;
-  }, [searchParams, inputs]);
-
-  // Dynamic `prettyPrintFilter` for badges
-  const prettyPrintFilter = (
-    _key: TFilterKeys,
-    value: string | string[] | number[],
-    config: FilterInputConfig<TFilterKeys>,
-  ) => {
-    if (config.type === "checkbox-group") {
-      const labels = (value as string[])
-        .map((v) => config.options.find((opt) => opt.value === v)?.label || v)
-        .join(", ");
-      return (
-        <p>
-          {config.label.replace(/%20/g, " ")}:{" "}
-          <span className="text-muted-foreground">{labels}</span>
-        </p>
-      );
-    }
-    if (config.type === "dual-range-slider") {
-      const rangeValues = value as number[];
-      const formatLabel = config.formatLabel || ((val: number | undefined) => val?.toString() || "");
-      return (
-        <p>
-          {config.label}:{" "}
-          <span className="text-muted-foreground">
-            {formatLabel(rangeValues[0])} - {formatLabel(rangeValues[1])}
-          </span>
-        </p>
-      );
-    }
-    if (config.type === "radio-group") {
-      const stringValue = value as string;
-      // For true/false values, display the label instead of the value
-      if (stringValue === "true" || stringValue === "false") {
-        const option = config.options.find((opt) => opt.value === stringValue);
-        const displayValue = option?.label || stringValue;
-        return (
-          <p>
-            {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>
-        </p>
-      );
-    }
-    return (
-      <p>
-        {config.label}: <span className="text-muted-foreground">{value}</span>
-      </p>
-    );
-  };
-
-  // Handles removing an individual filter
-  const handleRemoveFilter = (keyToRemove: TFilterKeys) => {
-    const newParams = new URLSearchParams(currentParams.toString());
-
-    // Clear the specific input's local state
-    const inputConfig = inputs.find((input) => input.name === keyToRemove);
-
-    if (inputConfig?.type === "dual-range-slider") {
-      newParams.delete(`${keyToRemove}_min`);
-      newParams.delete(`${keyToRemove}_max`);
-      setInputValues((prev) => ({
-        ...prev,
-        [keyToRemove]: [inputConfig.min, inputConfig.max],
-      }));
-    } else {
-      newParams.delete(keyToRemove);
-      setInputValues((prev) => ({
-        ...prev,
-        [keyToRemove]: inputConfig?.type === "checkbox-group" ? [] : "",
-      }));
-    }
-
-    newParams.set("page", "1"); // Reset page after removing a filter
-
-    startTransition(() => {
-      replace(`${pathname}?${newParams.toString()}`);
-    });
-  };
-
-  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 font-barlow sm:w-48 flex items-end justify-between"
-            onClick={() => setIsOpen(!isOpen)}
-            variant="outline"
-          >
-            Filter
-            <ListFilter />
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <div className="mx-auto w-full max-w-3xl">
-            <DrawerHeader>
-              <DrawerTitle>{title}</DrawerTitle>
-              <DrawerDescription asChild>
-                <div>{description}</div>
-              </DrawerDescription>
-            </DrawerHeader>
-
-            <div className="grid sm:grid-cols-3 gap-4 p-4">
-              {inputs.map((input) => {
-                switch (input.type) {
-                  case "string":
-                  case "number":
-                    return (
-                      <Input
-                        key={input.name}
-                        placeholder={input.placeholder}
-                        value={inputValues[input.name] as string}
-                        onChange={handleTextOrNumberInputChange(input.name)}
-                        type={input.type}
-                      />
-                    );
-                  case "checkbox-group":
-                    return (
-                      <CheckboxGroup
-                        key={input.name}
-                        name={input.name}
-                        label={input.label}
-                        options={input.options}
-                        selectedValues={inputValues[input.name] as string[]}
-                        onChange={handleCheckboxGroupChange(input.name)}
-                      />
-                    );
-                  case "dual-range-slider":
-                    return (
-                      <div
-                        key={input.name}
-                        className="px-2 w-full flex flex-col gap-2 p-2 border rounded-md"
-                      >
-                        <Label className="font-semibold text-sm">
-                          {input.label}
-                        </Label>
-                        <div className="px-3 py-2 mt-5">
-                          <DualRangeSlider
-                            label={(value) => <span className="text-xs">{value}{input.sliderLabel}</span>}
-                            value={inputValues[input.name] as number[]}
-                            onValueChange={handleDualRangeChange(input.name)}
-                            min={input.min}
-                            max={input.max}
-                            step={input.step || 1}
-                          />
-                        </div>
-                      </div>
-                    );
-                  case "radio-group":
-                    return (
-                      <div
-                        key={input.name}
-                        className="flex flex-col gap-2 p-2 border rounded-md"
-                      >
-                        <Label className="font-semibold text-sm">
-                          {input.label}
-                        </Label>
-                        <RadioGroup
-                          value={inputValues[input.name] as string}
-                          onValueChange={(value) =>
-                            setInputValues((prev) => ({
-                              ...prev,
-                              [input.name]: value,
-                            }))
-                          }
-                        >
-                          {input.options.map((option) => (
-                            <div
-                              key={`${input.name}-${option.value}`}
-                              className="flex items-center space-x-2"
-                            >
-                              <RadioGroupItem
-                                value={option.value}
-                                id={`${input.name}-${option.value}`}
-                              />
-                              <Label htmlFor={`${input.name}-${option.value}`}>
-                                {option.label}
-                              </Label>
-                            </div>
-                          ))}
-                        </RadioGroup>
-                      </div>
-                    );
-                  default:
-                    return null;
-                }
-              })}
-            </div>
-            <DrawerFooter className="max-w-sm mx-auto">
-              <Button onClick={handleApplyFilters} disabled={disabled}>
-                {disabled ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Applying...
-                  </>
-                ) : (
-                  <>Apply Filters</>
-                )}
-              </Button>
-              <Button variant="secondary" onClick={handleClearFilters}>
-                Clear Filters
-              </Button>
-              <DrawerClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </div>
-        </DrawerContent>
-      </Drawer>
-      <div className="flex gap-2 w-fit flex-wrap">
-        {appliedFilters.map((filter) => (
-          <Badge
-            aria-disabled={disabled}
-            variant={"outline"}
-            className={cn("flex p-2 gap-2 items-center justify-between", {
-              "opacity-50 pointer-events-none": disabled,
-            })}
-            key={filter.key}
-          >
-            <span className="text-md">
-              {prettyPrintFilter(filter.key, filter.value, filter.config)}
-            </span>
-            {disabled ? (
-              <Loader2 className="animate-spin" size={16} />
-            ) : (
-              <X
-                className="bg-sarLinkOrange/50 rounded-full p-1 hover:cursor-pointer hover:ring ring-sarLinkOrange"
-                size={16}
-                onClick={() => handleRemoveFilter(filter.key)}
-              >
-                Remove
-              </X>
-            )}
-          </Badge>
-        ))}
-      </div>
-    </div>
-  );
-}

components/how-to-get-mac.tsx

@@ -1,74 +0,0 @@
-import { PhoneIcon } from "lucide-react"
-import Link from "next/link"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import { Button } from "@/components/ui/button"
-
-
-export function GetMacAccordion() {
-  return (
-    <Accordion
-      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">
-          <p>
-            A MAC (Media Access Control) address is a unique identifier assigned
-            to a device`&apos;`s network. It is used to identify the device on a
-            network, helping to differentiate devices on a network.
-          </p>
-          <Accordion type="single" collapsible className="w-full">
-            <AccordionItem value="iphone">
-              <AccordionTrigger>iPhone</AccordionTrigger>
-              <AccordionContent>
-                Settings ➜ General ➜ About ➜ Wi-Fi Address
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="redmi">
-              <AccordionTrigger>Redmi</AccordionTrigger>
-              <AccordionContent>
-                Settings ➜ About ➜ Wi-Fi MAC Address
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="samsung">
-              <AccordionTrigger>Samsung</AccordionTrigger>
-              <AccordionContent>
-                Settings ➜ About phone ➜ Status Information ➜ Wi-Fi MAC Address
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="windows">
-              <AccordionTrigger>Windows Laptop</AccordionTrigger>
-              <AccordionContent>
-                Settings ➜ Network and Internet ➜ Wi-Fi ➜ Hardware
-                Properties ➜ Physical address (MAC):
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="other">
-              <AccordionTrigger>Other Device</AccordionTrigger>
-              <AccordionContent>
-                <p>
-                  Please contact SAR Link for assistance.
-                </p>
-                <Link
-                  href="tel:+9609198026"
-                >
-                  <Button className="mt-4">
-                    <PhoneIcon className="mr-2" />
-                    9198026
-                  </Button>
-                </Link>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}

components/input-read-only.tsx

@@ -1,41 +0,0 @@
-import { CheckCheck, X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export default function InputReadOnly({ label, value, labelClassName, className, showCheck = true, checkTrue = false }: {
-  label: string;
-  value: string;
-  labelClassName?: string;
-  className?: string;
-  showCheck?: 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>
-
-        <label htmlFor="input-33" className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}>
-          {label}
-        </label>
-        <input
-          id="input-33"
-          className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
-          placeholder={value}
-          disabled
-          value={value}
-          type="text"
-        />
-      </div>
-
-      {showCheck && (
-        <div>
-          {checkTrue ? (
-            <CheckCheck className='mx-4 text-green-500' />
-          ) : (
-            <X className='mx-4 text-red-500' />
-          )}
-        </div>
-      )}
-    </div>
-
-  )
-}

components/number-input.tsx

@@ -1,50 +0,0 @@
-import { cn } from "@/lib/utils";
-import { Minus, Plus } from "lucide-react";
-import { useEffect } from "react";
-import {
-  Button,
-  Group,
-  Input,
-  Label,
-  NumberField,
-} from "react-aria-components";
-
-
-export default function NumberInput({
-  maxAllowed,
-  label,
-  value,
-  onChange,
-  className,
-  isDisabled,
-}: { maxAllowed?: number, label: string; value: number; onChange: (value: number) => void, className?: string, isDisabled?: boolean }) {
-  useEffect(() => {
-    if (maxAllowed) {
-      if (value > maxAllowed) {
-        onChange(maxAllowed);
-      }
-    }
-  }, [maxAllowed, value, onChange]);
-  return (
-    <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">
-          <Button
-            slot="decrement"
-            className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <Minus size={16} strokeWidth={2} aria-hidden="true" />
-          </Button>
-          <Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
-          <Button
-            slot="increment"
-            className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <Plus size={16} strokeWidth={2} aria-hidden="true" />
-          </Button>
-        </Group>
-      </div>
-    </NumberField>
-  );
-}

components/payments-table.tsx

@@ -1,272 +0,0 @@
-import { Calendar } from "lucide-react";
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { getPayments } from "@/actions/payment";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { Payment } from "@/lib/backend-types";
-import { cn } from "@/lib/utils";
-import { tryCatch } from "@/utils/tryCatch";
-import Pagination from "./pagination";
-import { Badge } from "./ui/badge";
-import { Button } from "./ui/button";
-import { Separator } from "./ui/separator";
-
-export async function PaymentsTable({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		[key: string]: unknown;
-	}>;
-}) {
-	const resolvedParams = await searchParams;
-	const page = Number.parseInt(resolvedParams.page as string) || 1;
-	const limit = 10;
-	const offset = (page - 1) * limit;
-	const apiParams: Record<string, string | number | undefined> = {};
-	for (const [key, value] of Object.entries(resolvedParams)) {
-		if (value !== undefined && value !== "") {
-			apiParams[key] = typeof value === "number" ? value : String(value);
-		}
-	}
-	apiParams.limit = limit;
-	apiParams.offset = offset;
-	const [error, payments] = await tryCatch(getPayments(apiParams));
-
-	if (error) {
-		if (error.message.includes("Unauthorized")) {
-			redirect("/auth/signin");
-		} else {
-			return <pre>{JSON.stringify(error, null, 2)}</pre>;
-		}
-	}
-	const { data, meta } = payments;
-	return (
-		<div>
-			{data?.length === 0 ? (
-				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-					<h3>No Payments yet.</h3>
-				</div>
-			) : (
-				<>
-					<div className="hidden sm:block">
-						<Table className="overflow-scroll">
-							<TableCaption>Table of all devices.</TableCaption>
-							<TableHeader>
-								<TableRow>
-									<TableHead>Details</TableHead>
-									<TableHead>Duration</TableHead>
-									<TableHead>Status</TableHead>
-									<TableHead>Amount</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody className="overflow-scroll">
-								{payments?.data?.map((payment) => (
-									<TableRow key={payment.id}>
-										<TableCell>
-											<div
-												className={cn(
-													"flex flex-col items-start border rounded p-2",
-													payment?.paid
-														? "bg-green-500/10 border-dashed border-green-500"
-														: payment?.is_expired
-															? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-															: "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">
-														{new Date(payment.created_at).toLocaleDateString(
-															"en-US",
-															{
-																month: "short",
-																day: "2-digit",
-																year: "numeric",
-																minute: "2-digit",
-																hour: "2-digit",
-																timeZone: "Indian/Maldives", // Force consistent timezone
-															},
-														)}
-													</span>
-												</div>
-
-												<div className="flex items-center gap-2 mt-2">
-													<Link
-														className="font-medium hover:underline"
-														href={`/payments/${payment.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">
-													<h3 className="text-sm font-medium">Devices</h3>
-													<ol className="list-disc list-inside text-sm">
-														{payment.devices.map((device) => (
-															<li
-																key={device.id}
-																className="text-sm text-muted-foreground"
-															>
-																{device.name}
-															</li>
-														))}
-													</ol>
-												</div>
-											</div>
-										</TableCell>
-
-										<TableCell className="font-medium">
-											{payment.number_of_months} Months
-										</TableCell>
-										<TableCell>
-											<span className="font-semibold pr-2">
-												{payment.paid ? (
-													<Badge
-														className={cn(
-															payment.status === "PENDING"
-																? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
-																: "bg-green-100 dark:bg-green-700",
-														)}
-														variant="outline"
-													>
-														{payment.status}
-													</Badge>
-												) : payment.is_expired ? (
-													<Badge>Expired</Badge>
-												) : (
-													<Badge variant="outline">{payment.status}</Badge>
-												)}
-											</span>
-										</TableCell>
-										<TableCell>
-											<span className="font-semibold pr-2">
-												{payment.amount.toFixed(2)}
-											</span>
-											MVR
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-							<TableFooter>
-								<TableRow>
-									<TableCell colSpan={4} className="text-muted-foreground">
-										{meta?.total === 1 ? (
-											<p className="text-center">
-												Total {meta?.total} payment.
-											</p>
-										) : (
-											<p className="text-center">
-												Total {meta?.total} payments.
-											</p>
-										)}{" "}
-									</TableCell>
-								</TableRow>
-							</TableFooter>
-						</Table>
-						<Pagination
-							totalPages={meta.last_page}
-							currentPage={meta.current_page}
-						/>
-					</div>
-					<div className="sm:hidden block">
-						{data.map((payment) => (
-							<MobilePaymentDetails key={payment.id} payment={payment} />
-						))}
-					</div>
-				</>
-			)}
-		</div>
-	);
-}
-
-function MobilePaymentDetails({ payment }: { payment: Payment }) {
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
-				payment?.paid
-					? "bg-green-500/10 border-dashed border-green-500"
-					: payment?.is_expired
-						? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-						: "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(payment.created_at).toLocaleDateString("en-US", {
-						month: "short",
-						day: "2-digit",
-						year: "numeric",
-						minute: "2-digit",
-						hour: "2-digit",
-						timeZone: "Indian/Maldives", // Force consistent timezone
-					})}
-				</span>
-			</div>
-
-			<div className="flex items-center gap-2 mt-2">
-				<Link
-					className="font-medium hover:underline"
-					href={`/payments/${payment.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">
-				<h3 className="text-sm font-medium">Devices</h3>
-				<ol className="list-disc list-inside text-sm">
-					{payment.devices.map((device) => (
-						<li key={device.id} className="text-sm text-muted-foreground">
-							{device.name}
-						</li>
-					))}
-				</ol>
-				<div className="block sm:hidden">
-					<Separator className="my-2" />
-					<h3 className="text-sm font-medium">Duration</h3>
-					<span className="text-sm text-muted-foreground">
-						{payment.number_of_months} Months
-					</span>
-					<Separator className="my-2" />
-					<h3 className="text-sm font-medium">Amount</h3>
-					<div className="flex items-center justify-between">
-						<span className="text-sm text-muted-foreground">
-							{payment.amount.toFixed(2)} MVR
-						</span>
-						<span className="font-semibold pr-2">
-							{payment.paid ? (
-								<Badge
-									className={cn(
-										payment.status === "PENDING"
-											? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
-											: "bg-green-100 dark:bg-green-700",
-									)}
-									variant="outline"
-								>
-									{payment.status}
-								</Badge>
-							) : payment.is_expired ? (
-								<Badge>Expired</Badge>
-							) : (
-								<Badge variant="secondary">{payment.status}</Badge>
-							)}
-						</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

components/price-calculator.tsx

@@ -1,90 +0,0 @@
-"use client";
-import {
-  discountPercentageAtom,
-  formulaResultAtom,
-  initialPriceAtom,
-  numberOfDaysAtom,
-  numberOfDevicesAtom,
-} from "@/lib/atoms";
-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(
-    discountPercentageAtom,
-  );
-  const [numberOfDevices, setNumberOfDevices] = useAtom(numberOfDevicesAtom);
-  const [numberOfDays, setNumberOfDays] = useAtom(numberOfDaysAtom);
-  const [formulaResult, setFormulaResult] = useAtom(formulaResultAtom);
-
-  useEffect(() => {
-    const basePrice = initialPrice + (numberOfDevices - 1) * discountPercentage;
-    setFormulaResult(
-      `Price for ${numberOfDevices} device(s) over ${numberOfDays} day(s): MVR ${basePrice.toFixed(2)}`,
-    );
-  }, [
-    initialPrice,
-    discountPercentage,
-    numberOfDevices,
-    numberOfDays,
-    setFormulaResult,
-  ]);
-
-  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">
-          Price Calculator
-        </h3>
-      </div>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        {/* Initial Price Input */}
-        <NumberInput
-          label="Initial Price"
-          value={initialPrice}
-          onChange={(value) => setInitialPrice(value)}
-        />
-        {/* Number of Devices Input */}
-        <NumberInput
-          label="Number of Devices"
-          value={numberOfDevices}
-          onChange={(value) => setNumberOfDevices(value)}
-        />
-        {/* Number of Days Input */}
-        <NumberInput
-          label="Number of Days"
-          value={numberOfDays}
-          onChange={(value) => setNumberOfDays(value)}
-        />
-
-        {/* Discount Percentage Input */}
-        <NumberInput
-          label="Discount Percentage"
-          value={discountPercentage}
-          onChange={(value) => setDiscountPercentage(value)}
-        />
-      </div>
-
-      <div className="mt-4">
-        <div className="title-bg relative rounded-lg border border-input 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-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
-          <label
-            htmlFor=""
-            className="block px-3 pt-2 text-md font-medium text-foreground"
-          >
-            Total
-          </label>
-          <input
-            className="flex font-mono font-semibold h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
-            value={formulaResult}
-            readOnly
-            placeholder={"Result"}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-

components/topup-to-pay.tsx

@@ -1,158 +0,0 @@
-"use client";
-import {
-	BadgeDollarSign,
-	Loader2
-} from "lucide-react";
-import { useActionState, useEffect } from "react";
-import { toast } from "sonner";
-import {
-	type VerifyTopupPaymentState,
-	verifyTopupPayment,
-} from "@/actions/payment";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableRow,
-} from "@/components/ui/table";
-import type { Topup } from "@/lib/backend-types";
-import { AccountInfomation } from "./account-information";
-import { Button } from "./ui/button";
-
-const initialState: VerifyTopupPaymentState = {
-	message: "",
-	success: false,
-	fieldErrors: {},
-};
-export default function TopupToPay({
-	topup,
-	disabled,
-}: {
-	topup?: Topup;
-	disabled?: boolean;
-}) {
-	const [state, formAction, isPending] = useActionState(
-		verifyTopupPayment,
-		initialState,
-	);
-
-	// Handle toast notifications based on state changes
-	useEffect(() => {
-		if (state.success && state.message) {
-			toast.success("Topup successful!", {
-				closeButton: true,
-				description: state.transaction
-					? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
-					: state.message,
-			});
-		} else if (
-			!state.success &&
-			state.message &&
-			state.message !== initialState.message
-		) {
-			toast.error("Topup Payment Verification Failed", {
-				closeButton: true,
-				description: state.message,
-			});
-		}
-	}, [state]);
-
-	return (
-		<div className="w-full">
-			<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
-				<Table>
-					<TableCaption>
-						<div className="max-w-sm mx-auto">
-							<p>Please send the following amount to the payment address</p>
-							<AccountInfomation
-								accName="Baraveli Dev"
-								accountNo="90101400028321000"
-							/>
-							{topup?.paid ? (
-								<Button
-									size={"lg"}
-									variant={"secondary"}
-									disabled
-									className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
-								>
-									Topup Payment Verified
-								</Button>
-							) : (
-								<div className="flex flex-col gap-2">
-									<form action={formAction}>
-										<input
-											type="hidden"
-											name="topupId"
-											value={topup?.id ?? ""}
-										/>
-										<Button
-											disabled={disabled || isPending}
-											type="submit"
-											size={"lg"}
-											className="mb-4 w-full"
-										>
-											{isPending ? "Processing payment..." : "I have paid"}
-											{isPending ? (
-												<Loader2 className="animate-spin" />
-											) : (
-												<BadgeDollarSign />
-											)}
-										</Button>
-									</form>
-								</div>
-							)}
-						</div>
-					</TableCaption>
-					<TableBody className="">
-						<TableRow>
-							<TableCell>Topup created</TableCell>
-							<TableCell className="text-right text-muted-foreground">
-								{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
-									month: "short",
-									day: "2-digit",
-									year: "numeric",
-									minute: "2-digit",
-									hour: "2-digit",
-									second: "2-digit",
-								})}
-							</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell>Payment received</TableCell>
-							<TableCell className="text-right text-sarLinkOrange">
-								{topup?.paid_at
-									? new Date(topup.paid_at).toLocaleDateString("en-US", {
-										month: "short",
-										day: "2-digit",
-										year: "numeric",
-										minute: "2-digit",
-										hour: "2-digit",
-										second: "2-digit",
-									})
-									: "-"}
-							</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell>MIB Reference</TableCell>
-							<TableCell className="text-right">
-								{topup?.mib_reference ? topup.mib_reference : "-"}
-							</TableCell>
-						</TableRow>
-					</TableBody>
-					<TableFooter>
-						<TableRow className="">
-							<TableCell colSpan={1}>Total Due</TableCell>
-							<TableCell className="text-right text-3xl font-bold">
-								{topup?.amount?.toFixed(2)}
-							</TableCell>
-						</TableRow>
-					</TableFooter>
-				</Table>
-			</div>
-		</div>
-	);
-}
-
-

components/topups-table.tsx

@@ -1,219 +0,0 @@
-import { Calendar } from "lucide-react";
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { getTopups } from "@/actions/payment";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableHead,
-	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";
-import { Button } from "./ui/button";
-
-export async function TopupsTable({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		[key: string]: unknown;
-	}>;
-}) {
-	const resolvedParams = await searchParams;
-	const page = Number.parseInt(resolvedParams.page as string) || 1;
-	const limit = 10;
-	const offset = (page - 1) * limit;
-	// Build params object
-	const apiParams: Record<string, string | number | undefined> = {};
-	for (const [key, value] of Object.entries(resolvedParams)) {
-		if (value !== undefined && value !== "") {
-			apiParams[key] = typeof value === "number" ? value : String(value);
-		}
-	}
-	apiParams.limit = limit;
-	apiParams.offset = offset;
-	const [error, topups] = await tryCatch(getTopups(apiParams));
-
-	if (error) {
-		if (error.message.includes("Unauthorized")) {
-			redirect("/auth/signin");
-		} else {
-			return <pre>{JSON.stringify(error, null, 2)}</pre>;
-		}
-	}
-	const { data, meta } = topups;
-	return (
-		<div>
-			{data?.length === 0 ? (
-				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-					<h3>No topups yet.</h3>
-				</div>
-			) : (
-				<>
-					<div className="hidden sm:block">
-						<Table className="overflow-scroll">
-							<TableCaption>Table of all topups.</TableCaption>
-							<TableHeader>
-								<TableRow>
-									<TableHead>Details</TableHead>
-									<TableHead>Status</TableHead>
-									<TableHead>Amount</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody className="overflow-scroll">
-								{topups?.data?.map((topup) => (
-									<TableRow key={topup.id}>
-										<TableCell>
-											<div
-												className={cn(
-													"flex flex-col items-start border rounded p-2",
-													topup?.paid
-														? "bg-green-500/10 border-dashed border-green-500"
-														: topup?.is_expired
-															? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-															: "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">
-														{new Date(topup.created_at).toLocaleDateString(
-															"en-US",
-															{
-																month: "short",
-																day: "2-digit",
-																year: "numeric",
-																minute: "2-digit",
-																hour: "2-digit",
-															},
-														)}
-													</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>
-										</TableCell>
-
-										<TableCell>
-											<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="outline">{topup.status}</Badge>
-												)}
-											</span>
-										</TableCell>
-										<TableCell>
-											<span className="font-semibold pr-2">
-												{topup.amount.toFixed(2)}
-											</span>
-											MVR
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-							<TableFooter>
-								<TableRow>
-									<TableCell colSpan={4} className="text-muted-foreground">
-										{meta?.total === 1 ? (
-											<p className="text-center">Total {meta?.total} topup.</p>
-										) : (
-											<p className="text-center">Total {meta?.total} topups.</p>
-										)}
-									</TableCell>
-								</TableRow>
-							</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}
-					/>
-				</>
-			)}
-		</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 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/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Accordion as AccordionPrimitive } from "radix-ui"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        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
-        )}
-        {...props}
-      >
-        {children}
-        <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({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/alert-dialog.tsx

@@ -1,156 +0,0 @@
-"use client"
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import * as React from "react"
-import { buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      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
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        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
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-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",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

components/ui/app-sidebar.tsx

@@ -1,216 +0,0 @@
-import {
-	BadgePlus,
-	Calculator,
-	ChevronRight,
-	Coins,
-	CreditCard,
-	Handshake,
-	MonitorSpeaker,
-	Smartphone,
-	UsersRound,
-	Wallet2Icon,
-} from "lucide-react";
-import Link from "next/link";
-import { getServerSession } from "next-auth";
-import { authOptions } from "@/app/auth";
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarHeader,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarRail,
-} from "@/components/ui/sidebar";
-
-type Permission = {
-	id: number;
-	name: string;
-};
-
-type Categories = {
-	id: string;
-	children: (
-		| {
-			title: string;
-			link: string;
-			perm_identifier: string;
-			icon: React.JSX.Element;
-		}
-		| {
-			title: string;
-			link: string;
-			icon: React.JSX.Element;
-			perm_identifier?: undefined;
-		}
-	)[];
-}[];
-
-export async function AppSidebar({
-	...props
-}: React.ComponentProps<typeof Sidebar>) {
-	const categories = [
-		{
-			id: "MENU",
-			url: "#",
-			children: [
-				{
-					title: "Devices",
-					link: "/devices?page=1",
-					perm_identifier: "device",
-					icon: <Smartphone size={16} />,
-				},
-				{
-					title: "Payments",
-					link: "/payments?page=1",
-					icon: <CreditCard size={16} />,
-					perm_identifier: "payment",
-				},
-				{
-					title: "Top Ups",
-					link: "/top-ups?page=1",
-					icon: <BadgePlus size={16} />,
-					perm_identifier: "topup",
-				},
-				{
-					title: "Parental Control",
-					link: "/parental-control?page=1",
-					icon: <CreditCard size={16} />,
-					perm_identifier: "device",
-				},
-				{
-					title: "Agreements",
-					link: "/agreements",
-					icon: <Handshake size={16} />,
-					perm_identifier: "device",
-				},
-				{
-					title: "Wallet",
-					link: "/wallet",
-					icon: <Wallet2Icon size={16} />,
-					perm_identifier: "wallet",
-				},
-			],
-		},
-		{
-			id: "ADMIN CONTROL",
-			url: "#",
-			children: [
-				{
-					title: "Users",
-					link: "/users",
-					icon: <UsersRound size={16} />,
-					perm_identifier: "device",
-				},
-				{
-					title: "User Devices",
-					link: "/user-devices",
-					icon: <MonitorSpeaker size={16} />,
-					perm_identifier: "device",
-				},
-				{
-					title: "User Payments",
-					link: "/user-payments",
-					icon: <Coins size={16} />,
-					perm_identifier: "payment",
-				},
-				{
-					title: "Price Calculator",
-					link: "/price-calculator",
-					icon: <Calculator size={16} />,
-					perm_identifier: "device",
-				},
-			],
-		},
-	];
-
-	const session = await getServerSession(authOptions);
-
-	let CATEGORIES: Categories;
-	if (session?.user?.is_admin) {
-		CATEGORIES = categories;
-	} else {
-		// Filter out ADMIN CONTROL category for non-admin users
-		const nonAdminCategories = categories.filter(
-			(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) => {
-					const permissionParts = permission.name.split(" ");
-					const modelNameFromPermission = permissionParts.slice(2).join(" ");
-					return modelNameFromPermission === permIdentifier;
-				});
-			});
-
-			return { ...category, children: filteredChildren };
-		});
-
-		CATEGORIES = filteredCategories.filter(
-			(category) => category.children.length > 0,
-		);
-	}
-
-	return (
-		<Sidebar {...props} className="z-50">
-			<SidebarHeader>
-				<h4 className="p-2 rounded title-bg border text-center uppercase ">
-					Sar Link Portal
-				</h4>
-			</SidebarHeader>
-			<SidebarContent className="gap-0">
-				{CATEGORIES.map((item) => {
-					return (
-						<Collapsible
-							key={item.id}
-							title={item.id}
-							defaultOpen
-							className="group/collapsible"
-						>
-							<SidebarGroup>
-								<SidebarGroupLabel
-									asChild
-									className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-								>
-									<CollapsibleTrigger>
-										{item.id}{" "}
-										<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-									</CollapsibleTrigger>
-								</SidebarGroupLabel>
-								<CollapsibleContent>
-									<SidebarGroupContent>
-										<SidebarMenu>
-											{item.children.map((item) => (
-												<SidebarMenuItem key={item.title}>
-													<SidebarMenuButton className="py-6" asChild>
-														<Link className="text-md" href={item.link}>
-															{item.icon}
-															<span className="opacity-70 ml-2">
-																{item.title}
-															</span>
-														</Link>
-													</SidebarMenuButton>
-												</SidebarMenuItem>
-											))}
-										</SidebarMenu>
-									</SidebarGroupContent>
-								</CollapsibleContent>
-							</SidebarGroup>
-						</Collapsible>
-					);
-				})}
-			</SidebarContent>
-			<SidebarRail />
-		</Sidebar>
-	);
-}

components/ui/aspect-ratio.tsx

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

components/ui/avatar.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

components/ui/badge.tsx

@@ -1,36 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
-
-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",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof badgeVariants> { }
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

components/ui/breadcrumb.tsx

@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

components/ui/button.tsx

@@ -1,59 +0,0 @@
-import { Slot as SlotPrimitive } from "radix-ui"
-import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
-
-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",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

components/ui/calendar.tsx

@@ -1,210 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "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
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          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
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          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
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          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
-        ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          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
-        ),
-        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
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          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
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          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
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      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
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }

components/ui/card.tsx

@@ -1,76 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/carousel.tsx

@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}

components/ui/checkbox.tsx

@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
-import { Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    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
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }

components/ui/collapsible.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/command.tsx

@@ -1,184 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        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
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      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
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      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
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

components/ui/context-menu.tsx

@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    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
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    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
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      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
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    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
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}

components/ui/datepicker.tsx

@@ -1,129 +0,0 @@
-import { eachMonthOfInterval, endOfYear, format, startOfYear } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { cn } from "@/lib/utils"
-
-interface DatePickerProps {
-  date: Date | undefined
-  setDate: (date: Date | undefined) => void
-}
-
-export function DatePicker({ date, setDate }: DatePickerProps) {
-  const [month, setMonth] = React.useState<number>(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()
-    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))
-      })
-    }
-    return []
-  }, [year])
-
-  React.useEffect(() => {
-    if (date) {
-      setMonth(date.getMonth())
-      setYear(date.getFullYear())
-    }
-  }, [date])
-
-  const handleYearChange = (selectedYear: string) => {
-    const newYear = Number.parseInt(selectedYear, 10)
-    setYear(newYear)
-    if (date) {
-      const newDate = new Date(date)
-      newDate.setFullYear(newYear)
-      setDate(newDate)
-    }
-  }
-
-  const handleMonthChange = (selectedMonth: string) => {
-    const newMonth = Number.parseInt(selectedMonth, 10)
-    setMonth(newMonth)
-    if (date) {
-      const newDate = new Date(date)
-      newDate.setMonth(newMonth)
-      setDate(newDate)
-    } else {
-      setDate(new Date(year, newMonth, 1))
-    }
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-full justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <div className="flex justify-between p-2 space-x-1">
-          <Select onValueChange={handleYearChange} value={year.toString()}>
-            <SelectTrigger className="w-[120px]">
-              <SelectValue placeholder="Year" />
-            </SelectTrigger>
-            <SelectContent>
-              {years.map((y) => (
-                <SelectItem key={y} value={y.toString()}>
-                  {y}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select onValueChange={handleMonthChange} value={month.toString()}>
-            <SelectTrigger className="w-[120px]">
-              <SelectValue placeholder="Month" />
-            </SelectTrigger>
-            <SelectContent>
-              {months.map((m, index) => (
-                <SelectItem key={`${index + 1}`} value={index.toString()}>
-                  {format(m, "MMMM")}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          month={new Date(year, month)}
-          onMonthChange={(newMonth) => {
-            setMonth(newMonth.getMonth())
-            setYear(newMonth.getFullYear())
-          }}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}

components/ui/dialog.tsx

@@ -1,143 +0,0 @@
-"use client"
-
-import { XIcon } from "lucide-react"
-import { Dialog as DialogPrimitive } from "radix-ui"
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      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
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        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
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-start text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}

components/ui/drawer.tsx

@@ -1,118 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      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
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}

components/ui/dropdown-menu.tsx

@@ -1,201 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    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
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    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
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 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
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

components/ui/dual-range-slider.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-interface DualRangeSliderProps 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) => {
-  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)}
-      {...props}
-    >
-      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-        <SliderPrimitive.Range className="absolute h-full bg-primary" />
-      </SliderPrimitive.Track>
-      {initialValue.map((value, index) => (
-        <React.Fragment key={`${index + 1}`}>
-          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
-            {label && (
-              <span
-                className={cn(
-                  'absolute flex w-full justify-center',
-                  labelPosition === 'top' && '-top-7',
-                  labelPosition === 'bottom' && 'top-4',
-                )}
-              >
-                {label(value)}
-              </span>
-            )}
-          </SliderPrimitive.Thumb>
-        </React.Fragment>
-      ))}
-    </SliderPrimitive.Root>
-  );
-});
-DualRangeSlider.displayName = 'DualRangeSlider';
-
-export { DualRangeSlider };

components/ui/floating-label.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { cn } from '@/lib/utils';
-
-const FloatingInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ className, ...props }, ref) => {
-    return <Input placeholder=" " className={cn('peer', className)} ref={ref} {...props} />;
-  },
-);
-FloatingInput.displayName = 'FloatingInput';
-
-const FloatingLabel = React.forwardRef<
-  React.ElementRef<typeof Label>,
-  React.ComponentPropsWithoutRef<typeof Label>
->(({ className, ...props }, ref) => {
-  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',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FloatingLabel.displayName = 'FloatingLabel';
-
-type FloatingLabelInputProps = React.InputHTMLAttributes<HTMLInputElement> & { label?: string };
-
-const FloatingLabelInput = React.forwardRef<
-  React.ElementRef<typeof FloatingInput>,
-  React.PropsWithoutRef<FloatingLabelInputProps>
->(({ id, label, ...props }, ref) => {
-  return (
-    <div className="relative">
-      <FloatingInput ref={ref} id={id} {...props} />
-      <FloatingLabel htmlFor={id}>{label}</FloatingLabel>
-    </div>
-  );
-});
-FloatingLabelInput.displayName = 'FloatingLabelInput';
-
-export { FloatingInput, FloatingLabel, FloatingLabelInput };

components/ui/form.tsx

@@ -1,178 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
-
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-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()
-
-  return (
-    <SlotPrimitive.Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}

components/ui/hover-card.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { HoverCard as HoverCardPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    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
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }

components/ui/input-otp.tsx

@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Minus } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-disabled:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-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"
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      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
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "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
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }

components/ui/label.tsx

@@ -1,26 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

components/ui/menubar.tsx

@@ -1,256 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Menubar as MenubarPrimitive } from "radix-ui"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    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
-    )}
-    {...props}
-  />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    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
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    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
-    )}
-    {...props}
-  />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        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
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    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
-    )}
-    {...props}
-  />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}

components/ui/navigation-menu.tsx

@@ -1,128 +0,0 @@
-import * as React from "react"
-import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-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"
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    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
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <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
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    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
-    )}
-    {...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
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}

components/ui/popover.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverAnchor = PopoverPrimitive.Anchor
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      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
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

components/ui/progress.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import { Progress as ProgressPrimitive } from "radix-ui"
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-1 w-full overflow-hidden rounded-full bg-primary/20",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      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
-
-export { Progress }

components/ui/radio-group.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
-import { Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      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
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-3.5 w-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }

components/ui/resizable.tsx

@@ -1,45 +0,0 @@
-"use client"
-
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
-
-const ResizablePanel = ResizablePrimitive.Panel
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  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
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

components/ui/scroll-area.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "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
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }

components/ui/select.tsx

@@ -1,159 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Select as SelectPrimitive } from "radix-ui"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    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
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "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
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    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
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

components/ui/separator.tsx

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

components/ui/sheet.tsx

@@ -1,140 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Dialog as SheetPrimitive } from "radix-ui"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <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
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-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",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

components/ui/sidebar.tsx

@@ -1,773 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
-import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
-        if (setOpenProp) {
-          setOpenProp(openState)
-        } else {
-          _setOpen(openState)
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-      },
-      [setOpenProp, open]
-    )
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
-        }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
-
-    const contextValue = React.useMemo<SidebarContextProps>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    )
-  }
-)
-SidebarProvider.displayName = "SidebarProvider"
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      )
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-          )}
-        />
-        <div
-          className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarRail.displayName = "SidebarRail"
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex 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
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "div"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      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
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button"
-    const { isMobile, state } = useSidebar()
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
-
-    if (!tooltip) {
-      return button
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    )
-  }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}