various

2025-12-05 19:17:36 -06:00 · 2024-01-13 17:16:51 -08:00
parent a11aa5c751
commit 1c87ac0546
25 changed files with 664 additions and 385 deletions
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -6,11 +6,12 @@
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
  },
  "aliases": {
    "components": "@/",
    "utils": "@lib/utils"
  }
-}
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,19 +11,20 @@
    "regen-client": "cd ../client/ts && yarn build"
  },
  "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-toast": "^1.1.5",
    "@tanstack/react-query": "^5.17.10",
+    "@tanstack/react-table": "^8.11.6",
    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
    "cmdk": "^0.2.0",
    "jotai": "^2.4.1",
    "lightweight-charts": "^4.0.1",
@@ -33,7 +34,7 @@
    "react-minimal-pie-chart": "^8.4.0",
    "react-router-dom": "^6.15.0",
    "reconnecting-websocket": "^4.4.0",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
--- a/frontend/src/components/config/util.tsx
+++ b/frontend/src/components/config/util.tsx
@@ -206,7 +206,7 @@ export const AccountSelector = ({
        </SelectTrigger>
        <SelectContent>
          {type === "Server" && (
-            <SelectItem value={""}>Same as build</SelectItem>
+            <SelectItem value={" "}>Same as build</SelectItem>
          )}
          {accounts?.[account_type]?.map((account) => (
            <SelectItem key={account} value={account}>
--- a/frontend/src/components/layouts.tsx
+++ b/frontend/src/components/layouts.tsx
@@ -87,7 +87,7 @@ interface SectionProps {

 export const Section = ({ title, icon, actions, children }: SectionProps) => (
  <div className="flex flex-col gap-2">
-    <div className="flex items-start justify-between min-h-[40px]">
+    <div className="flex items-start justify-between">
      <div className="flex items-center gap-2 text-muted-foreground">
        {icon}
        <h2 className="text-xl">{title}</h2>
@@ -155,7 +155,7 @@ export const ResourceCard = ({
      className="group hover:translate-y-[-2.5%] focus:translate-y-[-2.5%] transition-transform"
    >
      <Card className="h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors">
-        <CardHeader className="justify-between">
+        <CardHeader className="flex-row justify-between">
          <div>
            <CardTitle>
              <Components.Name id={id} />
--- a/frontend/src/components/resources/build/index.tsx
+++ b/frontend/src/components/resources/build/index.tsx
@@ -95,7 +95,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
  );
 };

-export const Build: RequiredResourceComponents = {
+export const BuildComponents: RequiredResourceComponents = {
  Name: ({ id }) => <>{useBuild(id)?.name}</>,
  Description: ({ id }) => <>{fmt_verison(useBuild(id)?.info.version)}</>,
  Info: ({ id }) => {
--- a/frontend/src/components/resources/deployment/index.tsx
+++ b/frontend/src/components/resources/deployment/index.tsx
@@ -18,49 +18,59 @@ import {
 import { Input } from "@ui/input";
 import { DeploymentLogs } from "./logs";
 import { Link } from "react-router-dom";
+import { DataTable } from "@ui/data-table";
+import { ResourceComponents } from "..";

 export const useDeployment = (id?: string) =>
  useRead("ListDeployments", {}, { refetchInterval: 5000 }).data?.find(
    (d) => d.id === id
  );

+const Icon = ({ id }: { id?: string }) => {
+  const state = useDeployment(id)?.info.state;
+
+  const color = () => {
+    if (state === Types.DockerContainerState.Running) return "fill-green-500";
+    if (state === Types.DockerContainerState.Paused) return "fill-orange-500";
+    if (state === Types.DockerContainerState.NotDeployed)
+      return "fill-blue-500";
+    return "fill-red-500";
+  };
+
+  return <Rocket className={cn("w-4", state && color())} />;
+};
+
+const Name = ({ id }: { id: string }) => <>{useDeployment(id)?.name}</>;
+const Description = ({ id }: { id: string }) => (
+  <>{useDeployment(id)?.info.status}</>
+);
+
+const Info = ({ id }: { id: string }) => {
+  const info = useDeployment(id)?.info;
+  const server = useServer(info?.server_id);
+
+  return (
+    <>
+      <Link
+        to={info?.build_id ? `/builds/${info.build_id}` : "."}
+        className="flex items-center gap-2"
+      >
+        <HardDrive className="w-4 h-4" />
+        {useDeployment(id)?.info.image || "N/A"}
+      </Link>
+      <Link to={`/servers/${server?.id}`} className="flex items-center gap-2">
+        <Server className="w-4 h-4" />
+        {server?.name ?? "N/A"}
+      </Link>
+    </>
+  );
+};
+
 export const Deployment: RequiredResourceComponents = {
-  Name: ({ id }) => <>{useDeployment(id)?.name}</>,
-  Description: ({ id }) => (
-    <>{useDeployment(id)?.info.status ?? "Not Deployed"}</>
-  ),
-  Info: ({ id }) => {
-    const info = useDeployment(id)?.info;
-    const server = useServer(info?.server_id);
-
-    return (
-      <>
-        <Link
-          to={info?.build_id ? `/builds/${info.build_id}` : "."}
-          className="flex items-center gap-2"
-        >
-          <HardDrive className="w-4 h-4" />
-          {useDeployment(id)?.info.image || "N/A"}
-        </Link>
-        <Link to={`/servers/${server?.id}`} className="flex items-center gap-2">
-          <Server className="w-4 h-4" />
-          {server?.name ?? "N/A"}
-        </Link>
-      </>
-    );
-  },
-  Icon: ({ id }) => {
-    const s = useDeployment(id)?.info.state;
-
-    const color = () => {
-      if (s === Types.DockerContainerState.Running) return "fill-green-500";
-      if (s === Types.DockerContainerState.Paused) return "fill-orange-500";
-      if (s === Types.DockerContainerState.NotDeployed) return "fill-blue-500";
-      return "fill-red-500";
-    };
-
-    return <Rocket className={cn("w-4 h-4", id && color())} />;
-  },
+  Name,
+  Description,
+  Info,
+  Icon,
  Actions: ({ id }) => (
    <div className="flex gap-4">
      <RedeployContainer id={id} />
@@ -98,4 +108,60 @@ export const Deployment: RequiredResourceComponents = {
      </NewResource>
    );
  },
+  Table: () => {
+    const deployments = useRead("ListDeployments", {}).data;
+    return (
+      <DataTable
+        data={deployments ?? []}
+        columns={[
+          {
+            accessorKey: "id",
+            header: "Name",
+            cell: ({ row }) => {
+              const id = row.original.id;
+              return (
+                <Link
+                  to={`/deployments/${id}`}
+                  className="flex items-center gap-2"
+                >
+                  <Icon id={id} />
+                  <Name id={id} />
+                </Link>
+              );
+            },
+          },
+          {
+            header: "Server",
+            cell: ({ row }) => {
+              const id = row.original.info.server_id;
+              return (
+                <Link to={`/servers/${id}`} className="flex items-center gap-2">
+                  <ResourceComponents.Server.Icon id={id} />
+                  <ResourceComponents.Server.Name id={id} />
+                </Link>
+              );
+            },
+          },
+          {
+            header: "Build",
+            cell: ({ row }) => {
+              const id = row.original.info.build_id;
+              if (!id) return null;
+              return (
+                <Link to={`/builds/${id}`} className="flex items-center gap-2">
+                  <ResourceComponents.Build.Icon id={id} />
+                  <ResourceComponents.Build.Name id={id} />
+                </Link>
+              );
+            },
+          },
+          {
+            accessorKey: "info.image",
+            header: "Image",
+          },
+          { header: "Tags", accessorFn: ({ tags }) => tags.join(", ") },
+        ]}
+      />
+    );
+  },
 };
--- a/frontend/src/components/resources/index.tsx
+++ b/frontend/src/components/resources/index.tsx
@@ -1,20 +1,20 @@
 import { RequiredResourceComponents, UsableResource } from "@types";
 import { Alerter } from "./alerter";
-import { Build } from "./build";
+import { BuildComponents } from "./build";
 import { Builder } from "./builder";
 import { Deployment } from "./deployment";
 import { Repo } from "./repo";
-import { Server } from "./server";
+import { ServerComponents } from "./server";
 import { Procedure } from "./procedure";

 export const ResourceComponents: {
  [key in UsableResource]: RequiredResourceComponents;
 } = {
  Alerter,
-  Build,
+  Build: BuildComponents,
  Builder,
  Deployment,
  Repo,
-  Server,
+  Server: ServerComponents,
  Procedure,
 };
--- a/frontend/src/components/resources/server/index.tsx
+++ b/frontend/src/components/resources/server/index.tsx
@@ -8,6 +8,8 @@ import { ConfigInner } from "@components/config";
 import { useState } from "react";
 import { NewResource } from "@components/layouts";
 import { Input } from "@ui/input";
+import { DataTable } from "@ui/data-table";
+import { useNavigate } from "react-router-dom";

 export const useServer = (id?: string) =>
  useRead("ListServers", {}).data?.find((d) => d.id === id);
@@ -120,7 +122,7 @@ const NewServer = () => {
  );
 };

-export const Server: RequiredResourceComponents = {
+export const ServerComponents: RequiredResourceComponents = {
  Name: ({ id }) => <>{useServer(id)?.name}</>,
  Description: ({ id }) => <>{useServer(id)?.info.status}</>,
  Info: ({ id }) => <ServerInfo id={id} />,
@@ -131,4 +133,30 @@ export const Server: RequiredResourceComponents = {
    Config: ({ id }) => <ServerConfig id={id} />,
  },
  New: () => <NewServer />,
+  Table: () => {
+    const servers = useRead("ListServers", {}).data;
+    const nav = useNavigate();
+    return (
+      <DataTable
+        onRowClick={({ id }) => nav(`/servers/${id}`)}
+        data={servers ?? []}
+        columns={[
+          {
+            header: "Name",
+            accessorKey: "id",
+            cell: ({ row }) => {
+              return (
+                <div className="flex gap-2">
+                  <ServerIconComponent id={row.original.id} />
+                  {row.original.name}
+                </div>
+              );
+            },
+          },
+          { header: "Region", accessorKey: "info.region" },
+          { header: "Tags", accessorFn: ({ tags }) => tags.join(", ") },
+        ]}
+      />
+    );
+  },
 };
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -16,9 +16,7 @@
    background-color: hsl(var(--primary));
    @apply rounded-lg;
  }
-  html {
-    scrollbar-gutter: stable;
-  }
+
  body {
    @apply bg-background text-foreground;
    font-family: Inter;
@@ -28,148 +26,66 @@
  }
 }

-/* blue theme */
-
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
+
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
+
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+
+    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
+
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
+
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
+
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
+
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
+
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --ring: 222.2 84% 4.9%;
+
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
+
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
+
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
+
+    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
+
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
+
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
+
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
+
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
+
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --ring: 212.7 26.8% 83.9%;
  }
 }
-
-/* green theme */
-/* 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 142.1 76.2% 36.3%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 144.9 80.4% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 142.4 71.8% 29.2%;
-  }
-} */
-
-/* neutral  theme */
-/* @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-} */
--- a/frontend/src/pages/resources.tsx
+++ b/frontend/src/pages/resources.tsx
@@ -1,7 +1,6 @@
-import { Page, Section, ResourceCard, ResourceRow } from "@components/layouts";
+import { Page, Section, ResourceCard } from "@components/layouts";
 import { ResourceComponents } from "@components/resources";
 import { useRead, useResourceParamType } from "@lib/hooks";
-import { cn } from "@lib/utils";
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
 import { useState } from "react";
@@ -13,7 +12,7 @@ export const Resources = () => {
  const list = useRead(`List${type}s`, {}).data;

  const [search, set] = useState("");
-  const [view, setView] = useState<"cards" | "rows">("cards");
+  const [view, setView] = useState<"cards" | "table">("table");

  return (
    <Page
@@ -22,9 +21,9 @@ export const Resources = () => {
        <div className="flex gap-4">
          <Button
            variant="outline"
-            onClick={() => setView((v) => (v === "cards" ? "rows" : "cards"))}
+            onClick={() => setView((v) => (v === "cards" ? "table" : "cards"))}
          >
-            show as {view === "cards" ? "rows" : "cards"}
+            show as {view === "cards" ? "table" : "cards"}
          </Button>
          <Input
            value={search}
@@ -37,20 +36,15 @@ export const Resources = () => {
      }
    >
      <Section title="">
-        <div
-          className={cn(
-            "grid gap-4",
-            view === "cards" ? "md:grid-cols-2 lg:grid-cols-3" : "items-center"
-          )}
-        >
-          {list?.map(({ id }) =>
-            view === "cards" ? (
+        {view === "cards" ? (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {list?.map(({ id }) => (
              <ResourceCard key={id} target={{ type, id }} />
-            ) : (
-              <ResourceRow key={id} target={{ type, id }} />
-            )
-          )}
-        </div>
+            ))}
+          </div>
+        ) : (
+          <Components.Table />
+        )}
      </Section>
    </Page>
  );
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -8,12 +8,14 @@ type OptionalIdComponent = React.FC<{ id?: string }>;
 export interface RequiredResourceComponents {
  Icon: OptionalIdComponent;

+  New: React.FC;
+
  Name: IdComponent;
  Description: IdComponent;
  Info: IdComponent;
  Actions: IdComponent;

-  New: React.FC;
+  Table: React.FC;

  Page: { [section: string]: IdComponent };
 }
--- a/frontend/src/ui/button.tsx
+++ b/frontend/src/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@lib/utils"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
@@ -14,7 +14,7 @@ const buttonVariants = cva(
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
--- a/frontend/src/ui/card.tsx
+++ b/frontend/src/ui/card.tsx
@@ -31,10 +31,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <h3
    ref={ref}
-    className={cn(
-      "font-semibold text-lg leading-none tracking-tight",
-      className
-    )}
+    className={cn("font-semibold leading-none tracking-tight", className)}
    {...props}
  />
 ));
--- a/frontend/src/ui/command.tsx
+++ b/frontend/src/ui/command.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { DialogProps } from "@radix-ui/react-dialog"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 import { Command as CommandPrimitive } from "cmdk"

--- a/frontend/src/ui/data-table.tsx
+++ b/frontend/src/ui/data-table.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { cn } from "@lib/utils";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ui/table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  onRowClick?: (row: TData) => void;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  onRowClick,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table className="table-fixed">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <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}
+                data-state={row.getIsSelected() && "selected"}
+                onClick={() => onRowClick && onRowClick(row.original)}
+                className={cn(onRowClick && "cursor-pointer")}
+              >
+                {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">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
--- a/frontend/src/ui/dialog.tsx
+++ b/frontend/src/ui/dialog.tsx
@@ -8,13 +8,9 @@ const Dialog = DialogPrimitive.Root

 const DialogTrigger = DialogPrimitive.Trigger

-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -23,7 +19,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm 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/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}
@@ -40,7 +36,7 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.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 md:w-full",
+        "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}
@@ -112,7 +108,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName

 export {
  Dialog,
+  DialogPortal,
+  DialogOverlay,
  DialogTrigger,
+  DialogClose,
  DialogContent,
  DialogHeader,
  DialogFooter,
--- a/frontend/src/ui/select.tsx
+++ b/frontend/src/ui/select.tsx
@@ -1,5 +1,10 @@
 import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons"
 import * as SelectPrimitive from "@radix-ui/react-select"

 import { cn } from "@lib/utils"
@@ -17,7 +22,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
@@ -30,6 +35,41 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
 const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
@@ -38,7 +78,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
@@ -46,6 +86,7 @@ const SelectContent = React.forwardRef<
      position={position}
      {...props}
    >
+      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
@@ -55,6 +96,7 @@ const SelectContent = React.forwardRef<
      >
        {children}
      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
 ))
@@ -115,4 +157,6 @@ export {
  SelectLabel,
  SelectItem,
  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
 }
--- a/frontend/src/ui/sheet.tsx
+++ b/frontend/src/ui/sheet.tsx
@@ -1,23 +1,17 @@
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { cva, type VariantProps } from "class-variance-authority"

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

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

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

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

-const SheetPortal = ({
-  className,
-  ...props
-}: SheetPrimitive.DialogPortalProps) => (
-  <SheetPrimitive.Portal className={cn(className)} {...props} />
-);
-SheetPortal.displayName = SheetPrimitive.Portal.displayName;
+const SheetPortal = SheetPrimitive.Portal

 const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -25,33 +19,33 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm 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/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-300",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
-);
+)

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

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

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

 const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
@@ -115,8 +109,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>,
@@ -127,11 +121,13 @@ 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,
+  SheetPortal,
+  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
@@ -139,4 +135,4 @@ export {
  SheetFooter,
  SheetTitle,
  SheetDescription,
-};
+}
--- a/frontend/src/ui/switch.tsx
+++ b/frontend/src/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
-      "peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
--- a/frontend/src/ui/table.tsx
+++ b/frontend/src/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@lib/utils"
+
+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"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  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"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <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,
+}
--- a/frontend/src/ui/toast.tsx
+++ b/frontend/src/ui/toast.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"

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

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

 const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -14,13 +14,13 @@ const ToastViewport = React.forwardRef<
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
-      "fixed gap-2 top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...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-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -36,7 +36,7 @@ const toastVariants = cva(
      variant: "default",
    },
  }
-);
+)

 const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
@@ -49,9 +49,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>,
@@ -65,8 +65,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>,
@@ -83,8 +83,8 @@ const ToastClose = React.forwardRef<
  >
    <Cross2Icon 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>,
@@ -95,8 +95,8 @@ const ToastTitle = React.forwardRef<
    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
    {...props}
  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName

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

-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

-type ToastActionElement = React.ReactElement<typeof ToastAction>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>

 export {
  type ToastProps,
@@ -124,4 +124,4 @@ export {
  ToastDescription,
  ToastClose,
  ToastAction,
-};
+}
--- a/frontend/src/ui/toaster.tsx
+++ b/frontend/src/ui/toaster.tsx
@@ -5,11 +5,11 @@ import {
  ToastProvider,
  ToastTitle,
  ToastViewport,
-} from "@ui/toast";
-import { useToast } from "@ui/use-toast";
+} from "@//ui/toast"
+import { useToast } from "@//ui/use-toast"

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

  return (
    <ToastProvider>
@@ -25,9 +25,9 @@ export function Toaster() {
            {action}
            <ToastClose />
          </Toast>
-        );
+        )
      })}
      <ToastViewport />
    </ToastProvider>
-  );
+  )
 }
--- a/frontend/src/ui/use-toast.ts
+++ b/frontend/src/ui/use-toast.ts
@@ -1,73 +1,76 @@
 // Inspired by react-hot-toast library
-import * as React from "react";
+import * as React from "react"

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

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

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

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

-let count = 0;
+let count = 0

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

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

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

 interface State {
-  toasts: ToasterToast[];
+  toasts: ToasterToast[]
 }

-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

 const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
-    return;
+    return
  }

  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
+    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
+    })
+  }, TOAST_REMOVE_DELAY)

-  toastTimeouts.set(toastId, timeout);
-};
+  toastTimeouts.set(toastId, timeout)
+}

 export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
@@ -75,7 +78,7 @@ export const reducer = (state: State, action: Action): State => {
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
+      }

    case "UPDATE_TOAST":
      return {
@@ -83,19 +86,19 @@ export const reducer = (state: State, action: Action): State => {
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
-      };
+      }

    case "DISMISS_TOAST": {
-      const { toastId } = action;
+      const { toastId } = action

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

      return {
@@ -108,44 +111,44 @@ export const reducer = (state: State, action: Action): State => {
              }
            : t
        ),
-      };
+      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
-        };
+        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
+      }
  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
 }

-type Toast = Omit<ToasterToast, "id">;
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">

 function toast({ ...props }: Toast) {
-  const id = genId();
+  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

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

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

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

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

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
+  }
 }

-export { useToast, toast };
+export { useToast, toast }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,7 +6,8 @@ module.exports = {
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
-	],
+  ],
+  prefix: "",
  theme: {
    container: {
      center: true,
@@ -58,12 +59,12 @@ module.exports = {
      },
      keyframes: {
        "accordion-down": {
-          from: { height: 0 },
+          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+          to: { height: "0" },
        },
      },
      animation: {
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -191,6 +191,13 @@
  dependencies:
    regenerator-runtime "^0.14.0"

+"@babel/runtime@^7.23.5":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.22.5":
  version "7.22.15"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -555,20 +562,20 @@
    aria-hidden "^1.1.1"
    react-remove-scroll "2.5.4"

-"@radix-ui/react-dialog@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz#06bce6c16bb93eb36d7a8589e665a20f4c1c52c1"
-  integrity sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==
+"@radix-ui/react-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "1.0.1"
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
    "@radix-ui/react-focus-guards" "1.0.1"
-    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-focus-scope" "1.0.4"
    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-portal" "1.0.4"
    "@radix-ui/react-presence" "1.0.1"
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-slot" "1.0.2"
@@ -595,10 +602,10 @@
    "@radix-ui/react-use-callback-ref" "1.0.0"
    "@radix-ui/react-use-escape-keydown" "1.0.0"

-"@radix-ui/react-dismissable-layer@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
-  integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "1.0.1"
@@ -607,17 +614,17 @@
    "@radix-ui/react-use-callback-ref" "1.0.1"
    "@radix-ui/react-use-escape-keydown" "1.0.3"

-"@radix-ui/react-dropdown-menu@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz#19bf4de8ffa348b4eb6a86842f14eff93d741170"
-  integrity sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==
+"@radix-ui/react-dropdown-menu@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63"
+  integrity sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "1.0.1"
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-context" "1.0.1"
    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-menu" "2.0.5"
+    "@radix-ui/react-menu" "2.0.6"
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-use-controllable-state" "1.0.1"

@@ -645,10 +652,10 @@
    "@radix-ui/react-primitive" "1.0.0"
    "@radix-ui/react-use-callback-ref" "1.0.0"

-"@radix-ui/react-focus-scope@1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9"
-  integrity sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.1"
@@ -684,10 +691,10 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.3"

-"@radix-ui/react-menu@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.5.tgz#a7d78b0808c4d38269240bf5d5c7ffea3e225e16"
-  integrity sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==
+"@radix-ui/react-menu@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"
+  integrity sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "1.0.1"
@@ -695,12 +702,12 @@
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-context" "1.0.1"
    "@radix-ui/react-direction" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
    "@radix-ui/react-focus-guards" "1.0.1"
-    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-focus-scope" "1.0.4"
    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-popper" "1.1.2"
-    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
    "@radix-ui/react-presence" "1.0.1"
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-roving-focus" "1.0.4"
@@ -709,10 +716,10 @@
    aria-hidden "^1.1.1"
    react-remove-scroll "2.5.5"

-"@radix-ui/react-popper@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
-  integrity sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@floating-ui/react-dom" "^2.0.0"
@@ -734,10 +741,10 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.0"

-"@radix-ui/react-portal@1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
-  integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.3"
@@ -801,10 +808,10 @@
    "@radix-ui/react-use-callback-ref" "1.0.1"
    "@radix-ui/react-use-controllable-state" "1.0.1"

-"@radix-ui/react-select@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"
-  integrity sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==
+"@radix-ui/react-select@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.0.0.tgz#a3511792a51a7018d6559357323a7f52e0e38887"
+  integrity sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/number" "1.0.1"
@@ -813,12 +820,12 @@
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-context" "1.0.1"
    "@radix-ui/react-direction" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
    "@radix-ui/react-focus-guards" "1.0.1"
-    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-focus-scope" "1.0.4"
    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-popper" "1.1.2"
-    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-slot" "1.0.2"
    "@radix-ui/react-use-callback-ref" "1.0.1"
@@ -874,18 +881,18 @@
    "@radix-ui/react-roving-focus" "1.0.4"
    "@radix-ui/react-use-controllable-state" "1.0.1"

-"@radix-ui/react-toast@^1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.4.tgz#9a7fc2d71700886f3292f7699c905f1e01be59e1"
-  integrity sha512-wf+fc8DOywrpRK3jlPlWVe+ELYGHdKDaaARJZNuUTWyWYq7+ANCFLp4rTjZ/mcGkJJQ/vZ949Zis9xxEpfq9OA==
+"@radix-ui/react-toast@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6"
+  integrity sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "1.0.1"
    "@radix-ui/react-collection" "1.0.3"
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.4"
-    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-portal" "1.0.4"
    "@radix-ui/react-presence" "1.0.1"
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-use-callback-ref" "1.0.1"
@@ -1008,6 +1015,18 @@
  dependencies:
    "@tanstack/query-core" "5.17.10"

+"@tanstack/react-table@^8.11.6":
+  version "8.11.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.11.6.tgz#ae234355eaae230ede95ebcbadb3251482eb6087"
+  integrity sha512-i0heTVZtuHF9VPMwcYoZ21hbzGDmLjxHYemDMvbGpjk5fUZ8nLF3S8qjVRU79XfPW8KK9o7iTU2fGFVQQmxMSQ==
+  dependencies:
+    "@tanstack/table-core" "8.11.6"
+
+"@tanstack/table-core@8.11.6":
+  version "8.11.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.11.6.tgz#ab753617b64d72f868f6ea4666059912f0c98441"
+  integrity sha512-69WEY1PaZROaGYUrseng4/4sMYnRGhDe1vM6888CnWekGz/wuCnvqwOoOuKGYivnaiI4BVmZq4WKWhvahyj3/g==
+
 "@types/json-schema@^7.0.12":
  version "7.0.12"
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
@@ -1319,11 +1338,16 @@ class-variance-authority@^0.7.0:
  dependencies:
    clsx "2.0.0"

-clsx@2.0.0, clsx@^2.0.0:
+clsx@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==

+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 cmdk@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
@@ -2424,10 +2448,12 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

-tailwind-merge@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
-  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+tailwind-merge@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.0.tgz#b6bb1c63ef26283c9e6675ba237df83bbd554688"
+  integrity sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==
+  dependencies:
+    "@babel/runtime" "^7.23.5"

 tailwindcss-animate@^1.0.7:
  version "1.0.7"