Merge branch 'dev' into clients-pops

2026-02-22 04:46:40 +00:00 · 2025-06-10 13:00:20 -04:00
parent d523ebe0e0 3503cc3338
commit 0537992603
282 changed files with 6489 additions and 3540 deletions
--- a/src/components/ContainersSelector.tsx
+++ b/src/components/ContainersSelector.tsx
@@ -0,0 +1,673 @@
+import { useEffect, useState, FC, useCallback, useMemo } from "react";
+import {
+    ColumnDef,
+    getCoreRowModel,
+    useReactTable,
+    flexRender,
+    getFilteredRowModel,
+    VisibilityState
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@/components/Credenza";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@/components/ui/popover";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuCheckboxItem
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Search, RefreshCw, Filter, Columns } from "lucide-react";
+import { GetSiteResponse, Container } from "@server/routers/site";
+import { useDockerSocket } from "@app/hooks/useDockerSocket";
+import { FaDocker } from "react-icons/fa";
+
+// Type definitions based on the JSON structure
+
+interface ContainerSelectorProps {
+    site: GetSiteResponse;
+    onContainerSelect?: (hostname: string, port?: number) => void;
+}
+
+export const ContainersSelector: FC<ContainerSelectorProps> = ({
+    site,
+    onContainerSelect
+}) => {
+    const [open, setOpen] = useState(false);
+
+    const { isAvailable, containers, fetchContainers } = useDockerSocket(site);
+
+    useEffect(() => {
+        console.log("DockerSocket isAvailable:", isAvailable);
+        if (isAvailable) {
+            fetchContainers();
+        }
+    }, [isAvailable]);
+
+    if (!site || !isAvailable) {
+        return null;
+    }
+
+    const handleContainerSelect = (container: Container, port?: number) => {
+        // Extract hostname - prefer IP address from networks, fallback to container name
+        const hostname = getContainerHostname(container);
+        onContainerSelect?.(hostname, port);
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <a
+                type="button"
+                className="text-sm text-primary hover:underline cursor-pointer"
+                onClick={() => setOpen(true)}
+            >
+                View Docker Containers
+            </a>
+            <Credenza open={open} onOpenChange={setOpen}>
+                <CredenzaContent className="max-w-[75vw] max-h-[75vh] flex flex-col">
+                    <CredenzaHeader>
+                        <CredenzaTitle>Containers in {site.name}</CredenzaTitle>
+                        <CredenzaDescription>
+                            Select any container to use as a hostname for this
+                            target. Click a port to use a port.
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <div className="flex-1 overflow-hidden min-h-0">
+                            <DockerContainersTable
+                                containers={containers}
+                                onContainerSelect={handleContainerSelect}
+                                onRefresh={() => fetchContainers()}
+                            />
+                        </div>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+};
+
+const DockerContainersTable: FC<{
+    containers: Container[];
+    onContainerSelect: (container: Container, port?: number) => void;
+    onRefresh: () => void;
+}> = ({ containers, onContainerSelect, onRefresh }) => {
+    const [searchInput, setSearchInput] = useState("");
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [hideContainersWithoutPorts, setHideContainersWithoutPorts] =
+        useState(true);
+    const [hideStoppedContainers, setHideStoppedContainers] = useState(false);
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+        labels: false
+    });
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setGlobalFilter(searchInput);
+        }, 100);
+
+        return () => clearTimeout(timer);
+    }, [searchInput]);
+
+    const getExposedPorts = useCallback((container: Container): number[] => {
+        const ports: number[] = [];
+
+        container.ports?.forEach((port) => {
+            if (port.privatePort) {
+                ports.push(port.privatePort);
+            }
+        });
+
+        return [...new Set(ports)]; // Remove duplicates
+    }, []);
+
+    const globalFilterFunction = useCallback(
+        (row: any, columnId: string, value: string) => {
+            const container = row.original as Container;
+            const searchValue = value.toLowerCase();
+
+            // Search across all relevant fields
+            const searchableFields = [
+                container.name,
+                container.image,
+                container.state,
+                container.status,
+                getContainerHostname(container),
+                ...Object.keys(container.networks),
+                ...Object.values(container.networks)
+                    .map((n) => n.ipAddress)
+                    .filter(Boolean),
+                ...getExposedPorts(container).map((p) => p.toString()),
+                ...Object.entries(container.labels).flat()
+            ];
+
+            return searchableFields.some((field) =>
+                field?.toString().toLowerCase().includes(searchValue)
+            );
+        },
+        [getExposedPorts]
+    );
+
+    const columns: ColumnDef<Container>[] = [
+        {
+            accessorKey: "name",
+            header: "Name",
+            cell: ({ row }) => (
+                <div className="font-medium">{row.original.name}</div>
+            )
+        },
+        {
+            accessorKey: "image",
+            header: "Image",
+            cell: ({ row }) => (
+                <div className="text-sm text-muted-foreground">
+                    {row.original.image}
+                </div>
+            )
+        },
+        {
+            accessorKey: "state",
+            header: "State",
+            cell: ({ row }) => (
+                <Badge
+                    variant={
+                        row.original.state === "running"
+                            ? "default"
+                            : "secondary"
+                    }
+                >
+                    {row.original.state}
+                </Badge>
+            )
+        },
+        {
+            accessorKey: "networks",
+            header: "Networks",
+            cell: ({ row }) => {
+                const networks = Object.keys(row.original.networks);
+                return (
+                    <div className="text-sm text-muted-foreground">
+                        {networks.length > 0
+                            ? networks.map((n) => (
+                                  <Badge key={n} variant="outlinePrimary">
+                                      {n}
+                                  </Badge>
+                              ))
+                            : "-"}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "hostname",
+            header: "Hostname/IP",
+            enableHiding: false,
+            cell: ({ row }) => (
+                <div className="text-sm font-mono">
+                    {getContainerHostname(row.original)}
+                </div>
+            )
+        },
+        {
+            accessorKey: "labels",
+            header: "Labels",
+            cell: ({ row }) => {
+                const labels = row.original.labels || {};
+                const labelEntries = Object.entries(labels);
+
+                if (labelEntries.length === 0) {
+                    return <span className="text-muted-foreground">-</span>;
+                }
+
+                return (
+                    <Popover modal>
+                        <PopoverTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 px-2 text-xs hover:bg-muted"
+                            >
+                                {labelEntries.length} label
+                                {labelEntries.length !== 1 ? "s" : ""}
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent side="top" align="start">
+                            <ScrollArea className="w-64 h-64">
+                                <div className="space-y-2">
+                                    <h4 className="font-medium text-sm">
+                                        Container Labels
+                                    </h4>
+                                    <div className="space-y-1">
+                                        {labelEntries.map(([key, value]) => (
+                                            <div key={key} className="text-xs">
+                                                <div className="font-mono font-medium text-foreground">
+                                                    {key}
+                                                </div>
+                                                <div className="font-mono text-muted-foreground pl-2 break-all">
+                                                    {value || "<empty>"}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </ScrollArea>
+                        </PopoverContent>
+                    </Popover>
+                );
+            }
+        },
+        {
+            accessorKey: "ports",
+            header: "Ports",
+            enableHiding: false,
+            cell: ({ row }) => {
+                const ports = getExposedPorts(row.original);
+                return (
+                    <div className="flex flex-wrap items-center gap-1">
+                        {ports.slice(0, 2).map((port) => (
+                            <Button
+                                key={port}
+                                variant="outline"
+                                size="sm"
+                                className="h-6 px-2 text-xs"
+                                onClick={() =>
+                                    onContainerSelect(row.original, port)
+                                }
+                            >
+                                {port}
+                            </Button>
+                        ))}
+                        {ports.length > 2 && (
+                            <Popover>
+                                <PopoverTrigger asChild>
+                                    <Button variant="link" size="sm">
+                                        +{ports.length - 2} more
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent
+                                    side="top"
+                                    className="w-auto"
+                                    align="end"
+                                >
+                                    {ports.slice(2).map((port) => (
+                                        <Button
+                                            key={port}
+                                            variant="outline"
+                                            size="sm"
+                                            className="h-6 px-2 text-xs"
+                                            onClick={() =>
+                                                onContainerSelect(
+                                                    row.original,
+                                                    port
+                                                )
+                                            }
+                                        >
+                                            {port}
+                                        </Button>
+                                    ))}
+                                </PopoverContent>
+                            </Popover>
+                        )}
+                    </div>
+                );
+            }
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const ports = getExposedPorts(row.original);
+                return (
+                    <Button
+                        variant="default"
+                        size="sm"
+                        onClick={() => onContainerSelect(row.original, ports[0])}
+                        disabled={row.original.state !== "running"}
+                    >
+                        Select
+                    </Button>
+                );
+            }
+        }
+    ];
+
+    const initialFilters = useMemo(() => {
+        let filtered = containers;
+
+        // Filter by port visibility
+        if (hideContainersWithoutPorts) {
+            filtered = filtered.filter((container) => {
+                const ports = getExposedPorts(container);
+                return ports.length > 0; // Show only containers WITH ports
+            });
+        }
+
+        // Filter by container state
+        if (hideStoppedContainers) {
+            filtered = filtered.filter((container) => {
+                return container.state === "running";
+            });
+        }
+
+        return filtered;
+    }, [
+        containers,
+        hideContainersWithoutPorts,
+        hideStoppedContainers,
+        getExposedPorts
+    ]);
+
+    const table = useReactTable({
+        data: initialFilters,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        globalFilterFn: globalFilterFunction,
+        state: {
+            globalFilter,
+            columnVisibility
+        },
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: setColumnVisibility
+    });
+
+    if (initialFilters.length === 0) {
+        return (
+            <div className="rounded-md max-h-[500px] overflow-hidden flex flex-col">
+                <div className="flex-1 flex items-center justify-center py-8">
+                    <div className="text-center text-muted-foreground space-y-3">
+                        {(hideContainersWithoutPorts ||
+                            hideStoppedContainers) &&
+                        containers.length > 0 ? (
+                            <>
+                                <p>
+                                    No containers found matching the current
+                                    filters.
+                                </p>
+                                <div className="space-x-2">
+                                    {hideContainersWithoutPorts && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() =>
+                                                setHideContainersWithoutPorts(
+                                                    false
+                                                )
+                                            }
+                                        >
+                                            Show containers without ports
+                                        </Button>
+                                    )}
+                                    {hideStoppedContainers && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() =>
+                                                setHideStoppedContainers(false)
+                                            }
+                                        >
+                                            Show stopped containers
+                                        </Button>
+                                    )}
+                                </div>
+                            </>
+                        ) : (
+                            <p>
+                                No containers found. Make sure Docker containers
+                                are running.
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="rounded-md max-h-[500px] overflow-hidden flex flex-col">
+            <div className="p-1 space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="relative flex-1">
+                        <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                            placeholder={`Search across ${initialFilters.length} containers...`}
+                            value={searchInput}
+                            onChange={(event) =>
+                                setSearchInput(event.target.value)
+                            }
+                            className="pl-8"
+                        />
+                        {searchInput &&
+                            table.getFilteredRowModel().rows.length > 0 && (
+                                <div className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+                                    {table.getFilteredRowModel().rows.length}{" "}
+                                    result
+                                    {table.getFilteredRowModel().rows.length !==
+                                    1
+                                        ? "s"
+                                        : ""}
+                                </div>
+                            )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="gap-2"
+                                >
+                                    <Filter className="h-4 w-4" />
+                                    Filters
+                                    {(hideContainersWithoutPorts ||
+                                        hideStoppedContainers) && (
+                                        <span className="bg-primary text-primary-foreground rounded-full w-5 h-5 text-xs flex items-center justify-center">
+                                            {Number(
+                                                hideContainersWithoutPorts
+                                            ) + Number(hideStoppedContainers)}
+                                        </span>
+                                    )}
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-64">
+                                <DropdownMenuLabel>
+                                    Filter Options
+                                </DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuCheckboxItem
+                                    checked={hideContainersWithoutPorts}
+                                    onCheckedChange={
+                                        setHideContainersWithoutPorts
+                                    }
+                                >
+                                    Ports
+                                </DropdownMenuCheckboxItem>
+                                <DropdownMenuCheckboxItem
+                                    checked={hideStoppedContainers}
+                                    onCheckedChange={setHideStoppedContainers}
+                                >
+                                    Stopped
+                                </DropdownMenuCheckboxItem>
+                                {(hideContainersWithoutPorts ||
+                                    hideStoppedContainers) && (
+                                    <>
+                                        <DropdownMenuSeparator />
+                                        <div className="p-2">
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => {
+                                                    setHideContainersWithoutPorts(
+                                                        false
+                                                    );
+                                                    setHideStoppedContainers(
+                                                        false
+                                                    );
+                                                }}
+                                                className="w-full text-xs"
+                                            >
+                                                Clear all filters
+                                            </Button>
+                                        </div>
+                                    </>
+                                )}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="gap-2"
+                                >
+                                    <Columns className="h-4 w-4" />
+                                    Columns
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-48">
+                                <DropdownMenuLabel>
+                                    Toggle Columns
+                                </DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                {table
+                                    .getAllColumns()
+                                    .filter((column) => column.getCanHide())
+                                    .map((column) => {
+                                        return (
+                                            <DropdownMenuCheckboxItem
+                                                key={column.id}
+                                                className="capitalize"
+                                                checked={column.getIsVisible()}
+                                                onCheckedChange={(value) =>
+                                                    column.toggleVisibility(
+                                                        !!value
+                                                    )
+                                                }
+                                            >
+                                                {column.id === "hostname"
+                                                    ? "Hostname/IP"
+                                                    : column.id}
+                                            </DropdownMenuCheckboxItem>
+                                        );
+                                    })}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={onRefresh}
+                        title="Refresh containers list"
+                    >
+                        <RefreshCw className="h-4 w-4" />
+                    </Button>
+                </div>
+            </div>
+            <div className="overflow-auto relative flex-1">
+                <Table sticky>
+                    <TableHeader sticky className="border-b">
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                  header.column.columnDef
+                                                      .header,
+                                                  header.getContext()
+                                              )}
+                                    </TableHead>
+                                ))}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    className={
+                                        row.original.state !== "running"
+                                            ? "opacity-50"
+                                            : ""
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    {searchInput && !globalFilter ? (
+                                        <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                                            <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                                            Searching...
+                                        </div>
+                                    ) : (
+                                        `No containers found matching "${globalFilter}".`
+                                    )}
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+};
+
+function getContainerHostname(container: Container): string {
+    // First, try to get IP from networks
+    const networks = Object.values(container.networks);
+    for (const network of networks) {
+        if (network.ipAddress) {
+            return network.ipAddress;
+        }
+    }
+
+    // Fallback to container name (works in Docker networks)
+    return container.name;
+}
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SidebarNav } from "@app/components/SidebarNav";
 import { OrgSelector } from "@app/components/OrgSelector";
 import { cn } from "@app/lib/cn";
@@ -23,6 +23,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useUserContext } from "@app/hooks/useUserContext";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useTheme } from "next-themes";

 interface LayoutProps {
    children: React.ReactNode;
@@ -61,6 +62,30 @@ export function Layout({
    const { user } = useUserContext();
    const { isUnlocked } = useLicenseStatusContext();

+    const { theme } = useTheme();
+    const [path, setPath] = useState<string>(""); // Default logo path
+
+    useEffect(() => {
+        function getPath() {
+            let lightOrDark = theme;
+
+            if (theme === "system" || !theme) {
+                lightOrDark = window.matchMedia("(prefers-color-scheme: dark)")
+                    .matches
+                    ? "dark"
+                    : "light";
+            }
+
+            if (lightOrDark === "light") {
+                return "/logo/word_mark_black.png";
+            }
+
+            return "/logo/word_mark_white.png";
+        }
+
+        setPath(getPath());
+    }, [theme, env]);
+
    return (
        <div className="flex flex-col h-screen overflow-hidden">
            {/* Full width header */}
@@ -139,12 +164,16 @@ export function Layout({
                                href="/"
                                className="flex items-center hidden md:block"
                            >
-                                <Image
-                                    src="/logo/pangolin_orange.svg"
-                                    alt="Pangolin Logo"
-                                    width={35}
-                                    height={35}
-                                />
+                                {path && (
+                                    <Image
+                                        src={path}
+                                        alt="Pangolin Logo"
+                                        width={110}
+                                        height={25}
+                                        priority={true}
+                                        quality={25}
+                                    />
+                                )}
                            </Link>
                            {showBreadcrumbs && (
                                <div className="hidden md:block overflow-x-auto scrollbar-hide">
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";

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

 const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -17,8 +17,8 @@ const Avatar = React.forwardRef<
    )}
    {...props}
  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;

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

 const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -44,7 +44,7 @@ const AvatarFallback = React.forwardRef<
    )}
    {...props}
  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";

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

 const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";

 const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
@@ -24,8 +24,8 @@ const BreadcrumbList = React.forwardRef<
    )}
    {...props}
  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";

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

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

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

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

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

 const BreadcrumbEllipsis = ({
  className,
@@ -101,8 +101,8 @@ const BreadcrumbEllipsis = ({
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";

 export {
  Breadcrumb,
@@ -112,4 +112,4 @@ export {
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
-}
+};
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";

-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;

-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";

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

-import { cn } from "@app/lib/cn"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@app/lib/cn";
+import { Dialog, DialogContent } from "@/components/ui/dialog";

 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
@@ -20,8 +20,8 @@ const Command = React.forwardRef<
    )}
    {...props}
  />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;

 interface CommandDialogProps extends DialogProps {}

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

 const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
@@ -52,9 +52,9 @@ const CommandInput = React.forwardRef<
      {...props}
    />
  </div>
-))
+));

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

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

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

 const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -78,9 +78,9 @@ const CommandEmpty = React.forwardRef<
    className="py-6 text-center text-sm"
    {...props}
  />
-))
+));

-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;

 const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
@@ -94,9 +94,9 @@ const CommandGroup = React.forwardRef<
    )}
    {...props}
  />
-))
+));

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

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

 const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
@@ -122,9 +122,9 @@ const CommandItem = React.forwardRef<
    )}
    {...props}
  />
-))
+));

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

 const CommandShortcut = ({
  className,
@@ -138,9 +138,9 @@ const CommandShortcut = ({
      )}
      {...props}
    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";

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

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

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

-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;

-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;

-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;

-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;

-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

 const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
@@ -36,9 +36,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;

 const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -52,9 +52,9 @@ const DropdownMenuSubContent = React.forwardRef<
    )}
    {...props}
  />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;

 const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -71,8 +71,8 @@ const DropdownMenuContent = React.forwardRef<
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;

 const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
@@ -89,8 +89,8 @@ const DropdownMenuItem = React.forwardRef<
    )}
    {...props}
  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

 const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -112,9 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;

 const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -135,8 +135,8 @@ const DropdownMenuRadioItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;

 const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
@@ -153,8 +153,8 @@ const DropdownMenuLabel = React.forwardRef<
    )}
    {...props}
  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

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

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

 export {
  DropdownMenu,
@@ -197,4 +197,4 @@ export {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
-}
+};
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";

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

 const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
@@ -19,23 +19,23 @@ const InputOTP = React.forwardRef<
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
-))
-InputOTP.displayName = "InputOTP"
+));
+InputOTP.displayName = "InputOTP";

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

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

  return (
    <div
@@ -54,9 +54,9 @@ const InputOTPSlot = React.forwardRef<
        </div>
      )}
    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";

 const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";

-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";

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

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

 const labelVariants = cva(
    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+);

 const Label = React.forwardRef<
    React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
        className={cn(labelVariants(), className)}
        {...props}
    />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;

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

-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";

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

-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;

 const PopoverTrigger = React.forwardRef<
    React.ElementRef<typeof PopoverPrimitive.Trigger>,
@@ -16,7 +16,7 @@ const PopoverTrigger = React.forwardRef<
        className={cn(className, "rounded-md")}
        {...props}
    />
-))
+));

 const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -34,7 +34,7 @@ const PopoverContent = React.forwardRef<
      {...props}
    />
  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

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

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

 const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -16,9 +16,9 @@ const RadioGroup = React.forwardRef<
      {...props}
      ref={ref}
    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

 const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef<
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,48 +1,58 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@app/lib/cn";

-import { cn } from "@app/lib/cn"

-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}

-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}

-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";

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

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

-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;

-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;

-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;

 const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -30,8 +30,8 @@ const SelectTrigger = React.forwardRef<
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

 const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -47,8 +47,8 @@ const SelectScrollUpButton = React.forwardRef<
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

 const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -64,9 +64,9 @@ const SelectScrollDownButton = React.forwardRef<
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;

 const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
@@ -97,8 +97,8 @@ const SelectContent = React.forwardRef<
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;

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

 const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
@@ -132,8 +132,8 @@ const SelectItem = React.forwardRef<

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

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

 export {
  Select,
@@ -158,4 +158,4 @@ export {
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
-}
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";

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

 const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -25,7 +25,7 @@ const Separator = React.forwardRef<
      {...props}
    />
  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;

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

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

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

-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;

-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;

-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;

-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;

 const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -27,8 +27,8 @@ const SheetOverlay = React.forwardRef<
    {...props}
    ref={ref}
  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
  "fixed z-50 gap-4 bg-card p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-100 data-[state=open]:duration-300",
@@ -47,7 +47,7 @@ const sheetVariants = cva(
      side: "right",
    },
  }
-)
+);

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

 const SheetHeader = ({
  className,
@@ -85,8 +85,8 @@ const SheetHeader = ({
    )}
    {...props}
  />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";

 const SheetFooter = ({
  className,
@@ -99,8 +99,8 @@ const SheetFooter = ({
    )}
    {...props}
  />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";

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

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

 export {
  Sheet,
@@ -137,4 +137,4 @@ export {
  SheetFooter,
  SheetTitle,
  SheetDescription,
-}
+};
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";

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

 const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -23,7 +23,7 @@ const Switch = React.forwardRef<
      )}
    />
  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;

-export { Switch }
+export { Switch };
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,121 +1,138 @@
-import * as React from "react"
+import * as React from "react";

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

 export function TableContainer({ children }: { children: React.ReactNode }) {
-    return <div className="border rounded-lg bg-card">{children}</div>
+    return <div className="border rounded-lg bg-card">{children}</div>;
 }

 const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement> & { sticky?: boolean }
+>(({ className, sticky, ...props }, ref) => (
+    <div
+        className={cn("relative w-full", {
+            "overflow-auto": !sticky
+        })}
+    >
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+));
+Table.displayName = "Table";

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

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

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

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

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

 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+    <td
+        ref={ref}
+        className={cn(
+            "p-3 align-middle [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableCell.displayName = "TableCell";

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

 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption
+};
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";

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

-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;

 const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
@@ -19,8 +19,8 @@ const TabsList = React.forwardRef<
    )}
    {...props}
  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;

 const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -34,8 +34,8 @@ const TabsTrigger = React.forwardRef<
    )}
    {...props}
  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

 const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
@@ -49,7 +49,7 @@ const TabsContent = React.forwardRef<
    )}
    {...props}
  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;

-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

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

 export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -16,9 +16,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
        ref={ref}
        {...props}
      />
-    )
+    );
  }
-)
-Textarea.displayName = "Textarea"
+);
+Textarea.displayName = "Textarea";

-export { Textarea }
+export { Textarea };
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";

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

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

-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;

 const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -21,8 +21,8 @@ const ToastViewport = React.forwardRef<
    )}
    {...props}
  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;

 const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-3 pr-8 transition-all  data-[swipe=cancel]:translate-x-0  data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]  data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]  data-[swipe=move]:transition-none  data-[state=open]:animate-in data-[state=open]:fade-in  data-[state=closed]:animate-out data-[state=closed]:fade-out data-[swipe=end]:animate-out",
@@ -38,7 +38,7 @@ const toastVariants = cva(
      variant: "default",
    },
  }
-)
+);

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

 const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
@@ -67,8 +67,8 @@ const ToastAction = React.forwardRef<
    )}
    {...props}
  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;

 const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
@@ -85,8 +85,8 @@ const ToastClose = React.forwardRef<
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;

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

 const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
@@ -109,8 +109,8 @@ const ToastDescription = React.forwardRef<
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;

 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

@@ -126,4 +126,4 @@ export {
  ToastDescription,
  ToastClose,
  ToastAction,
-}
+};
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,6 +1,6 @@
-"use client"
+"use client";

-import { useToast } from "@/hooks/useToast"
+import { useToast } from "@/hooks/useToast";
 import {
  Toast,
  ToastClose,
@@ -8,10 +8,10 @@ import {
  ToastProvider,
  ToastTitle,
  ToastViewport,
-} from "@/components/ui/toast"
+} from "@/components/ui/toast";

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

  return (
    <ToastProvider>
@@ -27,9 +27,9 @@ export function Toaster() {
            {action}
            <ToastClose />
          </Toast>
-        )
+        );
      })}
      <ToastViewport />
    </ToastProvider>
-  )
+  );
 }