feat: enhance device cart with cancel feature and improve payments table filters

fix: correct font variable usage and improve type handling in dynamic filter
feat: enforce strict TypeScript rules and add biome configuration
2025-11-05 13:17:00 +00:00 · 2025-06-29 19:55:00 +05:00 · 2025-06-28 12:01:25 +05:00 · 2025-06-28 12:01:17 +05:00 · 2025-06-27 14:27:44 +05:00 · 2025-06-27 13:12:29 +05:00
62 changed files with 11043 additions and 16104 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,9 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}
--- a/README.md
+++ b/README.md
@@ -6,11 +6,12 @@ This is a web portal for SAR Link customers.
 ## User Menu
 ### Devices
 - [x] Add mac vendor validation for adding devices
- - [ ] Add all the filters for devices table (mobile responsive)
+ - [x] Add all the filters for devices table (mobile responsive)
+ - [x] Add cancel feature to selected devices floating button

-### Payments
- - [ ] Show payments table
- - [ ] Add all the filters for payment table (mobile responsive)
+ ### Payments
+ - [x] Show payments table
+ - [x] Add all the filters for payment table (mobile responsive)
 - [ ] Fix bill formula linking for generated payments

 ### Parental Control
--- a/app/(dashboard)/agreements/page.tsx
+++ b/app/(dashboard)/agreements/page.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 export default function Agreements() {
  return (
    <div>
-      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+      <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>
--- a/app/(dashboard)/devices/page.tsx
+++ b/app/(dashboard)/devices/page.tsx
@@ -1,11 +1,10 @@
 import { authOptions } from "@/app/auth";
 import { DevicesTable } from "@/components/devices-table";
-import DeviceFilter from "@/components/devices/device-filter";
-import Search from "@/components/search";
+import DynamicFilter from "@/components/generic-filter";
 import AddDeviceDialogForm from "@/components/user/add-device-dialog";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import DevicesTableSkeleton from "./device-table-skeleton";

 export default async function Devices({
@@ -22,15 +21,39 @@ export default async function Devices({
 	if (session?.user?.is_admin) return redirect("/user-devices");
 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+			<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 Devices</h3>
 				<AddDeviceDialogForm user_id={session?.user?.id} />
 			</div>
 			<div
 				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-end"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
 			>
-				<DeviceFilter />
+				{/* <DeviceFilter /> */}
+				<DynamicFilter
+					description="Filter devices by name, MAC address, or vendor."
+					title="Device Filter"
+					inputs={[
+						{
+							name: "name",
+							label: "Device Name",
+							type: "string",
+							placeholder: "Enter device name",
+						},
+						{
+							name: "mac",
+							label: "MAC Address",
+							type: "string",
+							placeholder: "Enter MAC address",
+						},
+						{
+							name: "vendor",
+							label: "Vendor",
+							type: "string",
+							placeholder: "Enter vendor name",
+						}
+					]}
+				/>
 			</div>
 			<Suspense key={query || page} fallback={<DevicesTableSkeleton />}>
 				<DevicesTable parentalControl={false} searchParams={searchParams} />
--- a/app/(dashboard)/parental-control/page.tsx
+++ b/app/(dashboard)/parental-control/page.tsx
@@ -15,7 +15,7 @@ export default async function ParentalControl({
  const query = (await searchParams)?.query || "";
  return (
    <div>
-      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+      <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>

--- a/app/(dashboard)/payments/[paymentId]/page.tsx
+++ b/app/(dashboard)/payments/[paymentId]/page.tsx
@@ -25,13 +25,13 @@ export default async function PaymentPage({

 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
 				<h3 className="text-sarLinkOrange text-2xl">Payment</h3>
 				<div className="flex flex-col gap-4 items-end w-full">
 					<Button
 						disabled
 						className={cn(
-							"rounded-md !opacity-100 uppercase font-semibold",
+							"rounded-md opacity-100! uppercase font-semibold",
 							payment?.paid
 								? "text-green-500 bg-green-500/20"
 								: "text-yellow-500 bg-yellow-900",
--- a/app/(dashboard)/payments/page.tsx
+++ b/app/(dashboard)/payments/page.tsx
@@ -17,15 +17,14 @@ export default async function Payments({
 }) {
 	const query = (await searchParams)?.query || "";
 	const session = await getServerSession(authOptions);
-	if (!session?.user?.is_admin) {
+	if (session?.user?.is_admin) {
 		return redirect("/user-payments");
 	}
 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+			<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 Payments</h3>
 			</div>
-
 			<div
 				id="user-filters"
 				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
--- a/app/(dashboard)/user-devices/page.tsx
+++ b/app/(dashboard)/user-devices/page.tsx
@@ -18,7 +18,7 @@ export default async function UserDevices({
 	const query = (await searchParams)?.query || "";
 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+			<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 Devices
 				</h3>
--- a/app/(dashboard)/user-payments/page.tsx
+++ b/app/(dashboard)/user-payments/page.tsx
@@ -1,4 +1,6 @@
+import { authOptions } from "@/app/auth";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
+import { getServerSession } from "next-auth";
 import React, { Suspense } from "react";

 export default async function UserPayments({
@@ -12,12 +14,13 @@ export default async function UserPayments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-
+	const session = await getServerSession(authOptions);
 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+			<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>
+			<pre>{JSON.stringify(session, null, 2)}</pre>
 			<Suspense key={query} fallback={"loading...."}>
 				<UsersPaymentsTable searchParams={searchParams} />
 			</Suspense>
--- a/app/(dashboard)/users/page.tsx
+++ b/app/(dashboard)/users/page.tsx
@@ -35,7 +35,7 @@ export default async function AdminUsers({
 }) {
 	return (
 		<div>
-			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+			<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>

--- a/app/(dashboard)/wallet/page.tsx
+++ b/app/(dashboard)/wallet/page.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 export default function UserWallet() {
  return (
    <div>
-      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+      <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>
--- a/app/globals.css
+++ b/app/globals.css
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,8 @@
-import { ThemeProvider } from "@/providers/theme-provider";
 import { Provider } from "jotai";
+import { ThemeProvider } from "@/providers/theme-provider";

 import type { Metadata } from "next";
-import { Barlow } from "next/font/google";
+import { Barlow, Bokor } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Toaster } from "sonner";
 import "./globals.css";
@@ -16,6 +16,12 @@ const barlow = Barlow({
  variable: "--font-barlow",
 });

+const bokor = Bokor({
+  subsets: ["latin"],
+  weight: ["400"],
+  variable: "--font-bokor",
+});
+
 export const metadata: Metadata = {
  title: "SAR Link Portal",
  description: "Sarlink Portal",
@@ -29,7 +35,7 @@ export default async function RootLayout({
  const session = await getServerSession(authOptions);
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className={`${barlow.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
+      <body className={`${barlow.variable} ${bokor.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
        <AuthProvider session={session || undefined}>
          <Provider>
            <NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
--- a/biome.json
+++ b/biome.json
@@ -0,0 +1,37 @@
+{
+	"$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"
+			}
+		}
+	}
+}
--- a/components/device-cart.tsx
+++ b/components/device-cart.tsx
@@ -1,14 +1,14 @@
 "use client";

-import { Button } from "@/components/ui/button";
-import { deviceCartAtom } from "@/lib/atoms";
-import { useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import { MonitorSmartphone } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { deviceCartAtom } from "@/lib/atoms";

 export function DeviceCartDrawer() {
 	const pathname = usePathname();
-	const devices = useAtomValue(deviceCartAtom);
+	const [devices, setDevices] = useAtom(deviceCartAtom);
 	const router = useRouter();
 	if (pathname === "/payment" || pathname === "/devices-to-pay") {
 		return null;
@@ -16,14 +16,23 @@ export function DeviceCartDrawer() {

 	if (devices.length === 0) return null;
 	return (
-		<Button
-			size={"lg"}
-			className="bg-sarLinkOrange dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-12 z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200"
-			onClick={() => router.push("/devices-to-pay")}
-			variant="outline"
-		>
-			<MonitorSmartphone />
-			Pay {devices.length > 0 && `(${devices.length})`} Device
-		</Button>
+		<div className="bg-sarLinkOrange rounded-lg shadow-2xl dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-auto z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200 p-2 flex flex-col gap-2">
+			<Button
+				size={"lg"}
+				className="w-ful"
+				onClick={() => router.push("/devices-to-pay")}
+				variant="secondary"
+			>
+				<MonitorSmartphone />
+				Pay {devices.length > 0 && `(${devices.length})`} {devices.length > 1 ? "devices" : "device"}
+			</Button>
+			<Button
+				variant={"destructive"}
+				onClick={() => setDevices([])}
+				className="w-full"
+			>
+				Cancel
+			</Button>
+		</div>
 	);
 }
--- a/components/devices-for-payment.tsx
+++ b/components/devices-for-payment.tsx
@@ -46,7 +46,7 @@ export default function DevicesForPayment() {
 	};

 	if (disabled) {
-		return <FullPageLoader />
+		return <FullPageLoader />;
 	}
 	return (
 		<div className="max-w-lg mx-auto space-y-4 px-4">
--- a/components/generic-filter.tsx
+++ b/components/generic-filter.tsx
@@ -0,0 +1,477 @@
+"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 { 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[];
+  };
+
+// 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
+    : 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 {
+        (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,
+      }));
+    };
+
+  // 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 {
+        // 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 === "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[];
+      label: string;
+      config: FilterInputConfig<TFilterKeys>;
+    }> = [];
+
+    for (const input of inputs) {
+      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[],
+    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>
+      );
+    }
+    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());
+    newParams.delete(keyToRemove);
+    newParams.set("page", "1"); // Reset page after removing a filter
+
+    // Clear the specific input's local state
+    const inputConfig = inputs.find((input) => input.name === keyToRemove);
+    setInputValues((prev) => ({
+      ...prev,
+      [keyToRemove]: inputConfig?.type === "checkbox-group" ? [] : "",
+    }));
+
+    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 "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>
+  );
+}
--- a/components/input-read-only.tsx
+++ b/components/input-read-only.tsx
@@ -10,7 +10,7 @@ export default function InputReadOnly({ label, value, labelClassName, className,
  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", className)}>
+    <div className={cn("relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none", className)}>
      <div>

        <label htmlFor="input-33" className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}>
--- a/components/number-input.tsx
+++ b/components/number-input.tsx
@@ -29,14 +29,14 @@ export default function NumberInput({
    <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">
+        <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 tabular-nums text-foreground focus:outline-none" />
+          <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"
--- a/components/price-calculator.tsx
+++ b/components/price-calculator.tsx
@@ -35,7 +35,7 @@ export default function PriceCalculator() {

  return (
    <div className="border p-2 rounded-xl">
-      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+      <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>
@@ -69,7 +69,7 @@ export default function PriceCalculator() {
      </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">
+        <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"
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,57 +1,66 @@
 "use client"

 import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { ChevronDownIcon } from "lucide-react"

 import { cn } from "@/lib/utils"

-const Accordion = AccordionPrimitive.Root
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}

-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+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}
+    />
+  )
+}

-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
+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}
    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}

 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -1,10 +1,10 @@
 "use client"

+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

-import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"

 const AlertDialog = AlertDialogPrimitive.Root

@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 [data-[state=closed]:slide-out-to-top-[48%]] data-[state=open]:slide-in-from-left-1/2 [data-[state=open]:slide-in-from-top-[48%]] sm:rounded-lg",
        className
      )}
      {...props}
--- a/components/ui/aspect-ratio.tsx
+++ b/components/ui/aspect-ratio.tsx
@@ -1,6 +1,6 @@
 "use client"

-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

 const AspectRatio = AspectRatioPrimitive.Root

--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { Avatar as AvatarPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Slot as SlotPrimitive } from "radix-ui"
 import { ChevronRight, MoreHorizontal } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -45,7 +45,7 @@ const BreadcrumbLink = React.forwardRef<
    asChild?: boolean
  }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? SlotPrimitive.Slot : "a"

  return (
    <Comp
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot"
+import { Slot as SlotPrimitive } from "radix-ui"
 import { type VariantProps, cva } from "class-variance-authority"
 import * as React from "react"

@@ -45,7 +45,7 @@ function Button({
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"

  return (
    <Comp
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -29,7 +29,7 @@ function Calendar({
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "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
@@ -53,20 +53,20 @@ function Calendar({
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          "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",
+          "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]",
+          "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",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
          defaultClassNames.dropdowns
        ),
        dropdown_root: cn(
@@ -89,7 +89,7 @@ function Calendar({
        ),
        week: cn("mt-2 flex w-full", defaultClassNames.week),
        week_number_header: cn(
-          "w-[--cell-size] select-none",
+          "w-(--cell-size) select-none",
          defaultClassNames.week_number_header
        ),
        week_number: cn(
@@ -156,7 +156,7 @@ function Calendar({
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
@@ -198,7 +198,7 @@ function CalendarDayButton({
      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",
+        "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
      )}
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,365 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null
-      }
-
-      const [item] = payload
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
-      }
-
-      if (!value) {
-        return null
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
-
-    if (!active || !payload?.length) {
-      return null
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot"
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
-
-const ChartLegend = RechartsPrimitive.Legend
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
 import { Check } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@@ -1,6 +1,6 @@
 "use client"

-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"

 const Collapsible = CollapsiblePrimitive.Root

--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,33 +1,58 @@
 "use client"

 import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import { SearchIcon } from "lucide-react"

 import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"

-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
+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}
+    />
+  )
+}

-const CommandDialog = ({ children, ...props }: DialogProps) => {
+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}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <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>
@@ -35,110 +60,116 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
  )
 }

-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
+function CommandInput({
  className,
  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
-    <span
+    <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(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "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}
    />
  )
 }
-CommandShortcut.displayName = "CommandShortcut"

 export {
  Command,
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 import { Check, ChevronRight, Circle } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      "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}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] 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]",
+        "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}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
  <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",
+      "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
    )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
  <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",
+      "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}
@@ -120,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
  <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",
+      "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}
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,122 +1,143 @@
 "use client"

 import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+import { XIcon } from "lucide-react"

 import { cn } from "@/lib/utils"

-const Dialog = DialogPrimitive.Root
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}

-const DialogTrigger = DialogPrimitive.Trigger
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}

-const DialogPortal = DialogPrimitive.Portal
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}

-const DialogClose = DialogPrimitive.Close
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}

-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "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}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+    />
+  )
+}

-const DialogHeader = ({
+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.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}

-const DialogFooter = ({
+function DialogDescription({
  className,
  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}

 export {
  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
  DialogClose,
  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
 }
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 import { Check, ChevronRight, Circle } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "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}
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] 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]",
+        "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}
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
  <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",
+      "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
    )}
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
  <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",
+      "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}
@@ -124,7 +124,7 @@ const DropdownMenuRadioItem = React.forwardRef<
  <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",
+      "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}
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,8 +1,8 @@
 "use client"

 import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
+
 import {
  Controller,
  FormProvider,
@@ -104,13 +104,13 @@ const FormLabel = React.forwardRef<
 FormLabel.displayName = "FormLabel"

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

  return (
-    <Slot
+    <SlotPrimitive.Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
    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]",
+      "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}
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -13,7 +13,7 @@ const InputOTP = React.forwardRef<
  <OTPInput
    ref={ref}
    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      "flex items-center gap-2 has-disabled:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import { Label as LabelPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Menubar as MenubarPrimitive } from "radix-ui"
 import { Check, ChevronRight, Circle } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -94,7 +94,7 @@ const MenubarSubContent = React.forwardRef<
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      "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}
@@ -117,7 +117,7 @@ const MenubarContent = React.forwardRef<
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+          "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}
@@ -136,7 +136,7 @@ const MenubarItem = React.forwardRef<
  <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",
+      "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
    )}
@@ -152,7 +152,7 @@ const MenubarCheckboxItem = React.forwardRef<
  <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",
+      "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}
@@ -175,7 +175,7 @@ const MenubarRadioItem = React.forwardRef<
  <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",
+      "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}
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"

@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
  >
    {children}{" "}
    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--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-[var(--radix-navigation-menu-viewport-width)]",
+        "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}
@@ -104,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
  <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",
+      "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}
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,117 +0,0 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-)
-Pagination.displayName = "Pagination"
-
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
-
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
-
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className
-    )}
-    {...props}
-  />
-)
-PaginationLink.displayName = "PaginationLink"
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
-
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
-
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { Popover as PopoverPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
      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]",
+        "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}
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { Progress as ProgressPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { Circle } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-l border-l-transparent p-px",
      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-px",
      className
    )}
    {...props}
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
+import { Select as SelectPrimitive } from "radix-ui"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"

 import { cn } from "@/lib/utils"
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] 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]",
+        "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
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
        className={cn(
          "p-1",
          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
        )}
      >
        {children}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
  <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",
+      "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}
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { Separator as SeparatorPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className
      )}
      {...props}
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Dialog as SheetPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"

--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Slot as SlotPrimitive } from "radix-ui"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"

@@ -187,7 +187,7 @@ const Sidebar = React.forwardRef<
      return (
        <div
          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
@@ -204,7 +204,7 @@ const Sidebar = React.forwardRef<
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -234,24 +234,24 @@ const Sidebar = React.forwardRef<
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "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)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              ? "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",
+            "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)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              ? "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}
@@ -311,7 +311,7 @@ const SidebarRail = React.forwardRef<
      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",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "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",
@@ -442,7 +442,7 @@ const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? SlotPrimitive.Slot : "div"

  return (
    <Comp
@@ -463,7 +463,7 @@ const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"

  return (
    <Comp
@@ -522,7 +522,7 @@ const SidebarMenuItem = React.forwardRef<
 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",
+  "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: {
@@ -533,7 +533,7 @@ const sidebarMenuButtonVariants = cva(
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
      },
    },
    defaultVariants: {
@@ -563,7 +563,7 @@ const SidebarMenuButton = React.forwardRef<
    },
    ref
  ) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? SlotPrimitive.Slot : "button"
    const { isMobile, state } = useSidebar()

    const button = (
@@ -609,7 +609,7 @@ const SidebarMenuAction = React.forwardRef<
    showOnHover?: boolean
  }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"

  return (
    <Comp
@@ -679,7 +679,7 @@ const SidebarMenuSkeleton = React.forwardRef<
        />
      )}
      <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
+        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
@@ -723,7 +723,7 @@ const SidebarMenuSubButton = React.forwardRef<
    isActive?: boolean
  }
 >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? SlotPrimitive.Slot : "a"

  return (
    <Comp
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import { Slider as SliderPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { Switch as SwitchPrimitives } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { Tabs as TabsPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/components/ui/text-shimmer.tsx
+++ b/components/ui/text-shimmer.tsx
@@ -29,7 +29,7 @@ export function TextShimmer({
  return (
    <MotionComponent
      className={cn(
-        'relative inline-block bg-[length:250%_100%,auto] bg-clip-text',
+        'relative inline-block bg-size-[250%_100%,auto] bg-clip-text',
        'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]',
        '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]',
        'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 import { type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { Toggle as TogglePrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { Tooltip as TooltipPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
        className
      )}
      {...props}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,87 +1,66 @@
 {
-	"name": "sarlink-portal",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "next dev --turbopack",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint"
-	},
-	"dependencies": {
-		"@faker-js/faker": "^9.3.0",
-		"@hookform/resolvers": "^5.1.1",
-		"@pyncz/tailwind-mask-image": "^2.0.0",
-		"@radix-ui/react-accordion": "^1.2.11",
-		"@radix-ui/react-alert-dialog": "^1.1.14",
-		"@radix-ui/react-aspect-ratio": "^1.1.7",
-		"@radix-ui/react-avatar": "^1.1.10",
-		"@radix-ui/react-checkbox": "^1.3.2",
-		"@radix-ui/react-collapsible": "^1.1.11",
-		"@radix-ui/react-context-menu": "^2.2.15",
-		"@radix-ui/react-dialog": "^1.1.14",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
-		"@radix-ui/react-hover-card": "^1.1.14",
-		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-menubar": "^1.1.15",
-		"@radix-ui/react-navigation-menu": "^1.2.13",
-		"@radix-ui/react-popover": "^1.1.14",
-		"@radix-ui/react-progress": "^1.1.7",
-		"@radix-ui/react-radio-group": "^1.3.7",
-		"@radix-ui/react-scroll-area": "^1.2.9",
-		"@radix-ui/react-select": "^2.2.5",
-		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slider": "^1.3.5",
-		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.12",
-		"@radix-ui/react-toggle": "^1.1.9",
-		"@radix-ui/react-toggle-group": "^1.1.10",
-		"@radix-ui/react-tooltip": "^1.2.7",
-		"@tanstack/react-query": "^5.61.4",
-		"axios": "^1.8.4",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"cmdk": "^1.1.1",
-		"date-fns": "^4.1.0",
-		"embla-carousel-react": "^8.6.0",
-		"input-otp": "^1.4.2",
-		"jotai": "2.8.0",
-		"lucide-react": "^0.523.0",
-		"millify": "^6.1.0",
-		"moment": "^2.30.1",
-		"motion": "^12.15.0",
-		"next": "15.3.3",
-		"next-auth": "^4.24.11",
-		"next-themes": "^0.4.6",
-		"nextjs-toploader": "^3.7.15",
-		"nuqs": "^2.4.3",
-		"react": "19.1.0",
-		"react-aria-components": "^1.5.0",
-		"react-day-picker": "^9.7.0",
-		"react-dom": "19.1.0",
-		"react-hook-form": "^7.58.1",
-		"react-phone-number-input": "^3.4.9",
-		"react-resizable-panels": "^3.0.3",
-		"recharts": "^3.0.0",
-		"sonner": "^2.0.5",
-		"tailwind-merge": "^3.3.1",
-		"tailwindcss-animate": "^1.0.7",
-		"vaul": "^1.1.2",
-		"zod": "^3.25.67"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@types/node": "^22.10.2",
-		"@types/react": "^19.1.0",
-		"@types/react-dom": "^19.1.2",
-		"eslint": "^9.17.0",
-		"eslint-config-next": "15.1.2",
-		"postcss": "^8.4.49",
-		"tailwindcss": "^3.4.17",
-		"tailwindcss-motion": "^1.1.0",
-		"ts-node": "^10.9.2",
-		"typescript": "^5.8.3"
-	},
-	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "name": "sarlink-portal",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.3.0",
+    "@hookform/resolvers": "^5.1.1",
+    "@pyncz/tailwind-mask-image": "^2.0.0",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tanstack/react-query": "^5.61.4",
+    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "jotai": "2.8.0",
+    "lucide-react": "^0.523.0",
+    "millify": "^6.1.0",
+    "moment": "^2.30.1",
+    "motion": "^12.15.0",
+    "next": "15.3.3",
+    "next-auth": "^4.24.11",
+    "next-themes": "^0.4.6",
+    "nextjs-toploader": "^3.7.15",
+    "nuqs": "^2.4.3",
+    "radix-ui": "^1.4.2",
+    "react": "19.1.0",
+    "react-aria-components": "^1.5.0",
+    "react-day-picker": "^9.7.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.58.1",
+    "react-phone-number-input": "^3.4.9",
+    "react-resizable-panels": "^3.0.3",
+    "recharts": "^3.0.0",
+    "sonner": "^2.0.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.0.6",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "eslint": "^9.29.0",
+    "eslint-config-next": "15.1.2",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "tailwindcss-motion": "^1.1.0",
+    "ts-node": "^10.9.2",
+    "tw-animate-css": "^1.3.4",
+    "typescript": "^5.8.3"
+  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
  },
 };

--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,109 +0,0 @@
-import type { Config } from "tailwindcss";
-import tailwindcssAnimate from "tailwindcss-animate";
-import tailwindcssMotion from "tailwindcss-motion";
-export default {
-	darkMode: ["class"],
-	content: [
-		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
-		"./components/**/*.{js,ts,jsx,tsx,mdx}",
-		"./app/**/*.{js,ts,jsx,tsx,mdx}",
-	],
-	theme: {
-    	extend: {
-    		colors: {
-    			sarLinkOrange: '#f49b5b',
-    			background: 'hsl(var(--background))',
-    			foreground: 'hsl(var(--foreground))',
-    			card: {
-    				DEFAULT: 'hsl(var(--card))',
-    				foreground: 'hsl(var(--card-foreground))'
-    			},
-    			popover: {
-    				DEFAULT: 'hsl(var(--popover))',
-    				foreground: 'hsl(var(--popover-foreground))'
-    			},
-    			primary: {
-    				DEFAULT: 'hsl(var(--primary))',
-    				foreground: 'hsl(var(--primary-foreground))'
-    			},
-    			secondary: {
-    				DEFAULT: 'hsl(var(--secondary))',
-    				foreground: 'hsl(var(--secondary-foreground))'
-    			},
-    			muted: {
-    				DEFAULT: 'hsl(var(--muted))',
-    				foreground: 'hsl(var(--muted-foreground))'
-    			},
-    			accent: {
-    				DEFAULT: 'hsl(var(--accent))',
-    				foreground: 'hsl(var(--accent-foreground))'
-    			},
-    			destructive: {
-    				DEFAULT: 'hsl(var(--destructive))',
-    				foreground: 'hsl(var(--destructive-foreground))'
-    			},
-    			border: 'hsl(var(--border))',
-    			input: 'hsl(var(--input))',
-    			ring: 'hsl(var(--ring))',
-    			chart: {
-    				'1': 'hsl(var(--chart-1))',
-    				'2': 'hsl(var(--chart-2))',
-    				'3': 'hsl(var(--chart-3))',
-    				'4': 'hsl(var(--chart-4))',
-    				'5': 'hsl(var(--chart-5))'
-    			},
-    			sidebar: {
-    				DEFAULT: 'hsl(var(--sidebar-background))',
-    				foreground: 'hsl(var(--sidebar-foreground))',
-    				primary: 'hsl(var(--sidebar-primary))',
-    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-    				accent: 'hsl(var(--sidebar-accent))',
-    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-    				border: 'hsl(var(--sidebar-border))',
-    				ring: 'hsl(var(--sidebar-ring))'
-    			}
-    		},
-    		borderRadius: {
-    			lg: 'var(--radius)',
-    			md: 'calc(var(--radius) - 2px)',
-    			sm: 'calc(var(--radius) - 4px)'
-    		},
-    		fontFamily: {
-    			sans: [
-    				'var(--font-barlow)'
-    			],
-    			mono: [
-    				'var(--font-mono)'
-    			]
-    		},
-    		keyframes: {
-    			'accordion-down': {
-    				from: {
-    					height: '0'
-    				},
-    				to: {
-    					height: 'var(--radix-accordion-content-height)'
-    				}
-    			},
-    			'accordion-up': {
-    				from: {
-    					height: 'var(--radix-accordion-content-height)'
-    				},
-    				to: {
-    					height: '0'
-    				}
-    			}
-    		},
-    		animation: {
-    			'accordion-down': 'accordion-down 0.2s ease-out',
-    			'accordion-up': 'accordion-up 0.2s ease-out'
-    		}
-    	}
-    },
-	plugins: [
-		tailwindcssAnimate,
-		tailwindcssMotion,
-		require("@pyncz/tailwind-mask-image"),
-        require("tailwindcss-animate")
-    ],
-} satisfies Config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,15 @@
 {
  "compilerOptions": {
    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "noImplicitAny": true,
+    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
-    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
@@ -19,9 +24,18 @@
      }
    ],
    "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
i701	2834f23f80	feat: enhance device cart with cancel feature and improve payments table filters	2025-06-29 19:55:00 +05:00
i701	3f92a00bfe	fix: correct font variable usage and improve type handling in dynamic filter All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m18s Details	2025-06-28 12:01:25 +05:00
i701	79ecb625d9	feat: enforce strict TypeScript rules and add biome configuration	2025-06-28 12:01:17 +05:00
i701	11ac852762	chore: upgrade to tailwind v4 and add a generic filter for dynamic filter handling All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m51s Details	2025-06-27 14:27:44 +05:00
i701	9e0d2d277b	refactor: streamline package.json and tailwind.config.ts Some checks failed Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m56s Details - Simplified dependencies in package.json by removing unused packages and organizing existing ones. - Updated tailwind.config.ts for better readability and maintainability, ensuring consistent formatting and structure.	2025-06-27 13:12:29 +05:00
i701	71fc914bde	chore: update package.json ♻️ All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 8m0s Details	2025-06-26 19:30:29 +05:00
i701	967a1d29e3	wth what was yarn doing here 😭 Some checks failed Build and Push Docker Images / Build and Push Docker Images (push) Failing after 51s Details	2025-06-26 19:18:52 +05:00
i701	383ffddde6	fix: remove unused components and fix build 🐛 Some checks failed Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m13s Details	2025-06-26 19:01:25 +05:00
Abdulla Aidhaan	3727110bd6	Merge pull request #2 from i701/feat/devices-table-filter Some checks failed Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m16s Details feat(devices): add proper filter handling and update shadcn 🔨	2025-06-26 18:44:19 +05:00