chore(release): 0.1.0-alpha.4

build(mobile): build file missed
refactor(frontend): changed the style to be boxy and like ccc
2026-06-23 14:26:17 -05:00 · 2026-06-23 14:24:52 -05:00 · 2026-06-23 14:24:33 -05:00 · 2026-06-23 14:24:09 -05:00 · 2026-06-23 14:23:43 -05:00 · 2026-06-22 06:22:57 -05:00
96 changed files with 19952 additions and 15623 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,56 @@
 # All Changes to LST can be found below.

+## [0.1.0-alpha.4](https://git.tuffraid.net/cowch/lst_v3/compare/v0.1.0-alpha.3...v0.1.0-alpha.4) (2026-06-23)
+
+
+### 🌟 Enhancements
+
+* **ccc:** added in forwarder to the ccc, currently always sending there ([263c709](https://git.tuffraid.net/cowch/lst_v3/commits/263c7095a8d0f3d4532fba2d81ef7bc225c17489))
+* **dm:** added in a repost incase we wanted do this instead of reuploading the file ([9a0bb18](https://git.tuffraid.net/cowch/lst_v3/commits/9a0bb18c5b9d5000cfd9c1c3e50a0442fb027bf2)), closes [#31](https://git.tuffraid.net/cowch/lst_v3/issues/31)
+* **dm:** standard forecast added in rest of migration to come ([39db142](https://git.tuffraid.net/cowch/lst_v3/commits/39db142db45ab7837ea753927c49fc04ff7ce84c))
+
+
+### 🐛 Bug fixes
+
+* **builds:** fixed non used variables ([2ebf695](https://git.tuffraid.net/cowch/lst_v3/commits/2ebf6955261849bebc63a1818b3d08d75d2e0dbb))
+* **datamart:** somereason it stopped working.. and added download types ([24af3ca](https://git.tuffraid.net/cowch/lst_v3/commits/24af3ca40310aebb484b0da3656bab4b8168c7fc))
+* **dockdoorscanner:** corrections to how things get posted so it makes more sense ([22a7b61](https://git.tuffraid.net/cowch/lst_v3/commits/22a7b612e17b66c317a4608f8a89e4f878574e0f))
+* **mobile:** added in more error handling key words and put a little more generic as well ([fd596ab](https://git.tuffraid.net/cowch/lst_v3/commits/fd596ab194d69603415a02cb667f5d651b55e2e4))
+* **mobile:** save missed on commit ([bc4728a](https://git.tuffraid.net/cowch/lst_v3/commits/bc4728a1565029e545f13beaf77f09ab01130837)), closes [#32](https://git.tuffraid.net/cowch/lst_v3/issues/32) [#31](https://git.tuffraid.net/cowch/lst_v3/issues/31)
+
+
+### 📝 Chore
+
+* **format:** formatting changes ([6fbe3a9](https://git.tuffraid.net/cowch/lst_v3/commits/6fbe3a9eed796f723d033352301f58a664a33979))
+* **logistics:** renamed the history util to better represent what it is ([ba09a77](https://git.tuffraid.net/cowch/lst_v3/commits/ba09a77f29f840b98b6adddec213e694fb89beba))
+
+
+### 📚 Documentation
+
+* **readme:** updated readme with actaul install ([1838c6f](https://git.tuffraid.net/cowch/lst_v3/commits/1838c6f1e938d631aef66fa5c547bc899ceacf51))
+
+
+### 🛠️ Code Refactor
+
+* **api docks:** added api docks back into the front end and prep for docusorus ([3a24d62](https://git.tuffraid.net/cowch/lst_v3/commits/3a24d629572276f91cf72a02534adb3b177efe8f))
+* **builds:** refactored how the builds works to include the build number now ([1b1918d](https://git.tuffraid.net/cowch/lst_v3/commits/1b1918dcd0d248e55ef93594256f7c8ffa897dc1))
+* **builds:** refactored the build process to hold in the build info plus version ([3e8417d](https://git.tuffraid.net/cowch/lst_v3/commits/3e8417dcff48d81f4516ca3305c5cf35e08dcce5))
+* **demand mgt:** new setting to make the time more dynamic ([eea5780](https://git.tuffraid.net/cowch/lst_v3/commits/eea5780bb603ca24f0a699fff96d0e01181fa55f))
+* **dm:** mapped remainder of the forecast. will need to run backup test ([7dbc31c](https://git.tuffraid.net/cowch/lst_v3/commits/7dbc31c046b817f1b195ff487249c7e2bab68e91))
+* **dockdoorscanning:** only show a truly active loading order 0 should never show up ([3f04609](https://git.tuffraid.net/cowch/lst_v3/commits/3f04609f824fe43cba8610734348980e1921538a))
+* **frontend:** changed the style to be boxy and like ccc ([4eef8fa](https://git.tuffraid.net/cowch/lst_v3/commits/4eef8fa418a8062316bb02c9b0c3e5f0dff855ca))
+* **psi:** rebuilt the delivery and planning data to 2.0 data ([6a14bab](https://git.tuffraid.net/cowch/lst_v3/commits/6a14bab30c66f01a3b732138ebbcf6005cde6ed7))
+
+
+### 📝 Testing Code
+
+* **dm:** repost test ([4ff10df](https://git.tuffraid.net/cowch/lst_v3/commits/4ff10dfcb2983e70e85a872d681210a803904111)), closes [#31](https://git.tuffraid.net/cowch/lst_v3/issues/31)
+
+
+### 📈 Project Builds
+
+* **mobile:** build file missed ([19ae01a](https://git.tuffraid.net/cowch/lst_v3/commits/19ae01afe40637027634db642cb55c4bf9399fa6))
+
 ## [0.1.0-alpha.3](https://git.tuffraid.net/cowch/lst_v3/compare/v0.1.0-alpha.2...v0.1.0-alpha.3) (2026-06-10)


--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 Quick summary of current rewrite/migration goal.

 - **Phase:** Backend rewrite
- **Last updated:** 2026-05-27
+- **Last updated:** 2026-06-17

 ---

@@ -39,21 +39,91 @@ _Status legend:_

 ---

-## Setup / Installation
+# Install

-How to run the current version of the app.
+## Files needed to be downloaded before install.
+
+### To run the server
+
+-   [PostgresSQL](https://www.postgresql.org/download/windows/) - current version using is 17
+-   [NodeJS](https://nodejs.org)
+-   [NSSM](https://nssm.cc/)
+
+### To manage the server
+
+-   [VSCODE](https://code.visualstudio.com/)
+
+## Creating directories needed
+
+-   Create a new folder where we will host the server files.
+    -   Copy the nssm.exe into this folder
+-   Copy the get the build from the releases and extract.
+    -   This will house all the compiles and minified files needed to start the server up, this includes the frontend.
+-   Save the nssm.exe into this folder as well, this will be used to control the service.
+
+## Do the initial install
+
+### DB instal setup
+
+1. Install postgres
+2. Open pgAdmin
+3. create a new Database named lst_db_v3. this can also be to your liking
+
+### Initial server setup
+
+1. Open VSCode and navigate to the folder where you extracted the files.
+2. Click trusted when it pops up.
+3. Open a terminal window inside vscode.
+4. Run the install script this will install all dependence's needed as well as do all the database migrations
+
+
+### Create the .env file
+
+In the root of the folder create a new .env file by renaming .env-example to .env
+
+change all the parameters to your desired server

 ```bash
-git clone https://git.tuffraid.net/cowch/lst_v3.git
-cd lst_v3
-npm install
+npm run install --omit=dev
 ```

-Rename the .env-example to .env
+Next we want to do an initial db

-Update all the fields 
-
-```bash 
+```bash
 npm run dev:db:migrate
-npm run dev
-```
+```
+
+### Run the start command to get all the basic settings and modules installed
+
+1. Run the below
+
+```bash
+npm start
+```
+
+### Creating first user.
+
+ Open http://[SERVER]:[PORT]/api/docs or postman and create a user.
+    - Please do not try to manually enter a new user this is due to how the password is hashed, as well as setting systemAdmin for the first user.
+    - Change the server and port to what you changed in the DB.
+
+### Running as a serivice.
+
+You want to CD into the scripts folder.
+
+```bash
+cd .\scripts\
+```
+
+Next use the example command below to get the service up and running.
+
+-   Options legend
+    -   serviceName = not recommended to change to reduce issues with the update process
+    -   option = use install for the install, but you can use this script later to stop, start, restart the service.
+    -   appPath = where did you extract the server files
+    -   description = no need to change this unless you want it to be something else
+    -   command = do not change this unless you know what your doing and really need to change this.
+
+```powershell
+.\services.ps1 -serviceName "LSTV3_app" -option "install" -appPath "D:\LS_V3T" -description "Logistics Support Tool V3" -command "run start"
+```
--- a/backend/app.ts
+++ b/backend/app.ts
@@ -2,6 +2,7 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { toNodeHandler } from "better-auth/node";
 import express from "express";
+import { createProxyMiddleware } from "http-proxy-middleware";
 import morgan from "morgan";
 import { umamiConfig } from "./configs/umami.config.js";
 import { createLogger } from "./logger/logger.controller.js";
@@ -9,6 +10,7 @@ import { routeHitMiddleware } from "./middleware/routeHit.middleware.js";
 import { setupRoutes } from "./routeHandler.routes.js";
 import { auth } from "./utils/auth.utils.js";
 import { lstCors } from "./utils/cors.utils.js";
+import { getAppVersion } from "./utils/version.utils.js";

 const createApp = async () => {
 	const log = createLogger({ module: "system", subModule: "main start" });
@@ -35,6 +37,7 @@ const createApp = async () => {
 	app.all(`${baseUrl}/api/auth/*splat`, toNodeHandler(auth));
 	app.use(express.json());

+	const version = await getAppVersion();
 	app.get(`${baseUrl}/api/lst-config.js`, (_, res) => {
 		res.type("application/javascript");
 		res.setHeader("Cache-Control", "no-store");
@@ -47,13 +50,31 @@ const createApp = async () => {
 			appVersion: ${JSON.stringify(umamiConfig.appVersion ?? "dev")},
 			umamiHost: ${JSON.stringify(umamiConfig.umamiHost ?? "")},
 			umamiWebsiteId: ${JSON.stringify(umamiConfig.umamiWebsiteId ?? "")},
-			timezone: ${JSON.stringify(process.env.TIMEZONE ?? "America/Chicago")}
+			timezone: ${JSON.stringify(process.env.TIMEZONE ?? "America/Chicago")},
+			version: ${JSON.stringify(version.version)},
+			lastBuildTIme: ${JSON.stringify(version.lastBuildTime)}
 		};
 	`);
 	});

 	setupRoutes(baseUrl, app);

+	// point to the ccc
+	// TODO: gate this behind a feature switch
+	app.use(
+		baseUrl + "/ccc",
+		createProxyMiddleware({
+			target: `http://localhost:${process.env.CCC || "5000"}`,
+			changeOrigin: true,
+			pathRewrite: (path, _) => {
+				return path.replace(`${baseUrl}/ccc`, "");
+			},
+			headers: {
+				"X-Forwarded-By": "express-proxy",
+			},
+		}),
+	);
+
 	app.use(
 		`${baseUrl}/app`,
 		express.static(join(__dirname, "../frontend/dist")),
--- a/backend/configs/scaler.config.ts
+++ b/backend/configs/scaler.config.ts
@@ -9,8 +9,6 @@ import os from "node:os";
 import { apiReference } from "@scalar/express-api-reference";
 // const port = 3000;
 import type { OpenAPIV3_1 } from "openapi-types";
-import { cronerActiveJobs } from "../scaler/cronerActiveJobs.spec.js";
-import { cronerStatusChange } from "../scaler/cronerStatusChange.spec.js";
 import { prodLoginSpec } from "../scaler/login.spec.js";
 import { openDockApt } from "../scaler/opendockGetRelease.spec.js";
 import { prodRestartSpec } from "../scaler/prodSqlRestart.spec.js";
@@ -19,12 +17,13 @@ import { prodStopSpec } from "../scaler/prodSqlStop.spec.js";
 import { prodRegisterSpec } from "../scaler/register.spec.js";
 // all the specs
 import { statusSpec } from "../scaler/stats.spec.js";
+import { getAppVersion } from "../utils/version.utils.js";

 export const openApiBase: OpenAPIV3_1.Document = {
 	openapi: "3.1.0",
 	info: {
 		title: "LST API",
-		version: "3.0.0",
+		version: (await getAppVersion()).version ?? "",
 		description: "Label System Tracking API",
 	},
 	servers: [
@@ -125,8 +124,6 @@ export const setupApiDocsRoutes = (baseUrl: string, app: Express) => {
 			...prodLoginSpec,
 			...prodRegisterSpec,
 			//...mergedDatamart,
-			...cronerActiveJobs,
-			...cronerStatusChange,
 			...openDockApt,

 			// Add more specs here as you build features
--- a/backend/datamart/datamart.controller.ts
+++ b/backend/datamart/datamart.controller.ts
@@ -37,6 +37,7 @@ const lstDbRun = async (data: Data) => {
 	if (data.options) {
 		if (data.name === "psiInventory") {
 			const ids = data.options.articles.split(",").map((id: any) => id.trim());
+
 			const whse = data.options.whseToInclude
 				? data.options.whseToInclude
 						.split(",")
@@ -274,10 +275,10 @@ export const runDatamartQuery = async (data: Data) => {
 					.replace("[startDate]", `${data.options.startDate}`)
 					.replace("[endDate]", `${data.options.endDate}`)
 					.replace(
-						"and p.IdArtikelvarianten in ([articles])",
+						"and pl.ArticleHumanReadableId IN ([articles]) ",
 						data.options.articles
-							? `and p.IdArtikelvarianten in (${data.options.articles})`
-							: "--and p.IdArtikelvarianten in ([articles])",
+							? `and pl.ArticleHumanReadableId IN (${data.options.articles})`
+							: "--and pl.ArticleHumanReadableId IN ([articles])",
 					);
 				break;
 			default:
--- a/backend/datamart/getDatamart.route.ts
+++ b/backend/datamart/getDatamart.route.ts
@@ -1,4 +1,5 @@
 import { Router } from "express";
+import * as XLSX from "xlsx";
 import { apiReturn } from "../utils/returnHelper.utils.js";
 import { runDatamartQuery } from "./datamart.controller.js";

@@ -7,13 +8,73 @@ const r = Router();
 type Options = {
 	name: string;
 	value: string;
+	format: string;
 };

 r.get("/:name", async (req, res) => {
 	const { name } = req.params;
-	const options = req.query as Options;
-
+	const options = { ...req.query } as Options;
 	const dataRan = await runDatamartQuery({ name, options });
+
+	if (!dataRan.success) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "datamart",
+			subModule: "query",
+			message: dataRan.message,
+			status: 500,
+		});
+	}
+
+	// XLSX Export
+	if (options.format?.toLowerCase() === "xlsx") {
+		const wb = XLSX.utils.book_new();
+
+		const ws = XLSX.utils.json_to_sheet(dataRan.data);
+
+		XLSX.utils.book_append_sheet(wb, ws, name);
+
+		const buffer = XLSX.write(wb, {
+			type: "buffer",
+			bookType: "xlsx",
+		});
+
+		res.setHeader(
+			"Content-Type",
+			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		);
+
+		res.setHeader("Content-Disposition", `attachment; filename="${name}.xlsx"`);
+
+		return res.send(buffer);
+	}
+
+	// CSV Export
+	if (options.format?.toLowerCase() === "csv") {
+		const rows = dataRan.data as any;
+
+		if (!rows.length) {
+			return res.status(200).send("");
+		}
+
+		const headers = Object.keys(rows[0]);
+
+		const csv = [
+			headers.join(","),
+			...rows.map((row: any) =>
+				headers
+					.map((h) => `"${String(row[h] ?? "").replace(/"/g, '""')}"`)
+					.join(","),
+			),
+		].join("\r\n");
+
+		res.setHeader("Content-Type", "text/csv");
+		res.setHeader("Content-Disposition", `attachment; filename="${name}.csv"`);
+
+		return res.send(csv);
+	}
+
 	return apiReturn(res, {
 		success: dataRan.success,
 		level: "info",
--- a/backend/logistics/logistics.dm.forecast.map.loreal.ts
+++ b/backend/logistics/logistics.dm.forecast.map.loreal.ts
@@ -6,7 +6,7 @@ import {
 	sqlQuerySelector,
 } from "../prodSql/prodSqlQuerySelector.utils.js";
 import { returnFunc } from "../utils/returnHelper.utils.js";
-import { sendEmail } from "../utils/sendEmail.utils.js";
+//import { sendEmail } from "../utils/sendEmail.utils.js";
 import { tryCatch } from "../utils/trycatch.utils.js";
 import { postData } from "./logistics.dm.postData.js";

@@ -83,7 +83,7 @@ export const lorealForecast = async (data: any, user: any) => {

 	const article: any = a?.data;

-	console.log(article);
+	//console.log(article);

 	// process the ebm forcast
 	for (let i = 0; i < ebmForeCastData.length; i++) {
@@ -127,31 +127,6 @@ export const lorealForecast = async (data: any, user: any) => {
 		//console.log(ebmForeCastData.length);
 	}

-	// petForeCastData.forEach((item: any, index: any) => {
-	//     //console.log(`Processing item ${index + 1} of ${forecastData.length}`);
-
-	//     // Extract the customer code
-	//     const customerCode = item["SOUTH PET BOTTLES"];
-
-	//     // Process each date in the current object
-	//     for (const [date, qty] of Object.entries(item)) {
-	//         // Skip metadata fields
-	//         if (petMetadataFields.includes(date)) continue;
-
-	//         if (qty === 0) continue;
-
-	//         // Create your transformed record
-	//         const record = {
-	//             customerArticleNo: customerCode,
-	//             requirementDate: excelDateStuff(parseInt(date)),
-	//             quantity: qty,
-	//         };
-
-	//         // Do something with this record
-	//         petForecastData.push(record);
-	//     }
-	// });
-
 	// pet forecast
 	for (let i = 0; i < petForeCastData.length; i++) {
 		// bottle code
@@ -200,25 +175,25 @@ export const lorealForecast = async (data: any, user: any) => {
 	//console.log(comForecast);

 	// email the  for the missing ones
-	const missedGrouped = Object.values(
-		missingSku.reduce((acc: any, item: any) => {
-			const key = item.customerArticleNo;
+	// const missedGrouped = Object.values(
+	// 	missingSku.reduce((acc: any, item: any) => {
+	// 		const key = item.customerArticleNo;

-			if (!acc[key]) {
-				// first time we see this customer
-				acc[key] = item;
-			} else {
-				// compare dates and keep the earliest
-				if (
-					new Date(item.requirementDate) < new Date(acc[key].requirementDate)
-				) {
-					acc[key] = item;
-				}
-			}
+	// 		if (!acc[key]) {
+	// 			// first time we see this customer
+	// 			acc[key] = item;
+	// 		} else {
+	// 			// compare dates and keep the earliest
+	// 			if (
+	// 				new Date(item.requirementDate) < new Date(acc[key].requirementDate)
+	// 			) {
+	// 				acc[key] = item;
+	// 			}
+	// 		}

-			return acc;
-		}, {}),
-	);
+	// 		return acc;
+	// 	}, {}),
+	// );

 	// TODO: change this to a flagged notification so that he users can subscribe or leave it. this removes the hardcody shit.
 	// const emailSetup = {
@@ -248,19 +223,7 @@ export const lorealForecast = async (data: any, user: any) => {

 	const updatedPredefinedObject = {
 		...predefinedObject,
-		positions: [
-			...predefinedObject.positions,
-			...ebmForecastData,
-
-			// ...ebmForecastData.filter(
-			//     (q: any) =>
-			//         q.customerArticleNo != "" && q.customerArticleNo != "Total"
-			// ),
-			// ...petForecastData.filter(
-			//     (q: any) =>
-			//         q.customerArticleNo != "" && q.customerArticleNo != "Total"
-			// ),
-		],
+		positions: [...predefinedObject.positions, ...ebmForecastData],
 	};
 	// console.log(updatedPredefinedObject);

--- a/backend/logistics/logistics.dm.forecast.map.pNg.ts
+++ b/backend/logistics/logistics.dm.forecast.map.pNg.ts
@@ -113,8 +113,8 @@ export const pNgForecast = async (data: any, user: any) => {
 			// }

 			return {
-				customerArticleNo: parseInt(o["Customer Item No."]),
-				requirementDate: excelDateStuff(parseInt(o["Request Date"])),
+				customerArticleNo: parseInt(o["Customer Item No."] ?? "0", 10),
+				requirementDate: excelDateStuff(parseInt(o["Request Date"] ?? "0", 10)),
 				quantity: o["Remaining Qty to be Shipped"],
 			};
 		});
--- a/backend/logistics/logistics.dm.repost.route.ts
+++ b/backend/logistics/logistics.dm.repost.route.ts
@@ -0,0 +1,57 @@
+import { Router } from "express";
+import { requireAuth } from "../middleware/auth.middleware.js";
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+const r = Router();
+
+r.post("/", requireAuth, async (req, res) => {
+	let posting: any;
+	
+
+	if (req.body.type !== "forecast" || req.body.type !== "orders") {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: "repost",
+			message: "You must pass over a proper type.",
+			data: [],
+			status: 500,
+		});
+	}
+
+	if (req.body.type === "forecast") {
+		posting = await postData(
+			{
+				type: "forecast",
+				endpoint: "/public/v1.0/DemandManagement/DELFOR",
+				data: req.body.data as any,
+			},
+			req.user,
+		);
+	}
+
+	if (req.body.type === "orders") {
+		posting = await postData(
+			{
+				type: "orders",
+				endpoint: "/public/v1.0/DemandManagement/ORDERS",
+				data: req.body.data as any,
+			},
+			req.user,
+		);
+	}
+
+	return apiReturn(res, {
+		success: posting.success,
+		level: posting.success ? "info" : "error",
+		module: "dm",
+		subModule: "repost",
+		message: posting.message,
+		data: [],
+		status: 200,
+	});
+});
+
+export default r;
--- a/backend/prodSql/queries/datamart.deliveryByDateRange.sql
+++ b/backend/prodSql/queries/datamart.deliveryByDateRange.sql
@@ -1,74 +1,73 @@
 use [test1_AlplaPROD2.0_Read]

-DECLARE @StartDate DATE = '[startDate]' -- 2025-1-1
-DECLARE @EndDate DATE = '[endDate]' -- 2025-1-31
-SELECT 
-r.[ArticleHumanReadableId]
-      ,[ReleaseNumber]
-	  ,h.CustomerOrderNumber
-	  ,x.CustomerLineItemNumber
-      ,[CustomerReleaseNumber]
-      ,[ReleaseState]
-      ,[DeliveryState]
-	  ,ea.JournalNummer as BOL_Number
-      ,[ReleaseConfirmationState]
-      ,[PlanningState]
+DECLARE @StartDate DATE = '[startDate]'
+DECLARE @EndDate   DATE = '[endDate]'
+
+;WITH bol_20 AS (   -- 2.0 BOL, one per release (newest doc wins)
+    SELECT  pos.ReleaseId,
+            dd.JournalNumber,
+            ROW_NUMBER() OVER (PARTITION BY pos.ReleaseId
+                               ORDER BY dd.ShippingDate DESC) AS rn
+    FROM    [outboundDelivery].[DeliveryDocumentPosition] (nolock) pos
+    JOIN    [outboundDelivery].[DeliveryDocument]         (nolock) dd
+              ON dd.Id = pos.DeliveryDocumentId
+    -- WHERE dd.DocumentType = <BOL value>   -- see note below
+)
+SELECT
+      r.[ArticleHumanReadableId]
+     ,[ReleaseNumber]
+     ,h.CustomerOrderNumber
+     ,x.CustomerLineItemNumber
+     ,[CustomerReleaseNumber]
+     ,[ReleaseState]
+     ,[DeliveryState]
+     ,COALESCE(ea.JournalNummer, bol_20.JournalNumber) AS BOL_Number   -- 1.0 or 2.0
+     ,[ReleaseConfirmationState]
+     ,[PlanningState]
      ,format(r.[OrderDate], 'yyyy-MM-dd HH:mm') as OrderDate
      --,r.[OrderDate]
      ,FORMAT(r.[DeliveryDate], 'yyyy-MM-dd HH:mm') as DeliveryDate
      --,r.[DeliveryDate]
      ,FORMAT(r.[LoadingDate], 'yyyy-MM-dd HH:mm') as LoadingDate
      --,r.[LoadingDate]
-      ,[Quantity]
-      ,[DeliveredQuantity]
-      ,r.[AdditionalInformation1]
-      ,r.[AdditionalInformation2]
-      ,[TradeUnits]
-      ,[LoadingUnits]
-      ,[Trucks]
-      ,[LoadingToleranceType]
-      ,[SalesPrice]
-      ,[Currency]
-      ,[QuantityUnit]
-      ,[SalesPriceRemark]
-      ,r.[Remark]
-      ,[Irradiated]
-      ,r.[CreatedByEdi]
-      ,[DeliveryAddressHumanReadableId]
-	  ,DeliveryAddressDescription
-      ,[CustomerArtNo]
-      ,[TotalPrice]
-      ,r.[ArticleAlias]
+     ,[Quantity]
+     ,[DeliveredQuantity]
+     ,r.[AdditionalInformation1]
+     ,r.[AdditionalInformation2]
+     ,[TradeUnits]
+     ,[LoadingUnits]
+     ,[Trucks]
+     ,[LoadingToleranceType]
+     ,[SalesPrice]
+     ,[Currency]
+     ,[QuantityUnit]
+     ,[SalesPriceRemark]
+     ,r.[Remark]
+     ,[Irradiated]
+     ,r.[CreatedByEdi]
+     ,[DeliveryAddressHumanReadableId]
+     ,DeliveryAddressDescription
+     ,[CustomerArtNo]
+     ,[TotalPrice]
+     ,r.[ArticleAlias]
+FROM [order].[Release] (nolock) AS r
+LEFT JOIN [order].LineItem AS x ON r.LineItemId = x.id
+LEFT JOIN [order].Header   AS h ON x.HeaderId   = h.id

-  FROM [order].[Release] (nolock) as r
+-- 1.0 BOL (legacy) — unchanged
+LEFT JOIN AlplaPROD_test1.dbo.V_LadePlanungenLadeAuftragAbruf (nolock) AS zz
+       ON zz.AbrufIdAuftragsAbruf = r.ReleaseNumber
+LEFT JOIN (
+    SELECT * FROM (
+        SELECT ROW_NUMBER() OVER (PARTITION BY IdJournal ORDER BY add_date DESC) AS RowNum, *
+        FROM [AlplaPROD_test1].[dbo].[T_Lieferungen] (nolock)
+    ) t WHERE RowNum = 1
+) AS ea ON zz.IdLieferschein = ea.IdJournal

- left join
- [order].LineItem as x on 
+-- 2.0 BOL (new)
+LEFT JOIN bol_20 ON bol_20.ReleaseId = r.Id AND bol_20.rn = 1

- r.LineItemId = x.id
-
- left join
- [order].Header as h on
- x.HeaderId = h.id
-
- --bol stuff
- left join 
- AlplaPROD_test1.dbo.V_LadePlanungenLadeAuftragAbruf (nolock) as zz 
- on zz.AbrufIdAuftragsAbruf = r.ReleaseNumber
-
- left join
-(select * from (SELECT 
-ROW_NUMBER() OVER (PARTITION BY IdJournal ORDER BY add_date DESC) AS RowNum
-,*
-  FROM [AlplaPROD_test1].[dbo].[T_Lieferungen] (nolock)) x
-
-  where  RowNum = 1) as ea on 
- zz.IdLieferschein = ea.IdJournal
-
-where 
--r.ReleaseNumber = 1452
-
-r.DeliveryDate between @StartDate AND @EndDate
+WHERE r.DeliveryDate BETWEEN @StartDate AND @EndDate
 and DeliveredQuantity > 0
 --and r.ArticleHumanReadableId in ([articles]) 
 --and Journalnummer = 169386
--- a/backend/prodSql/queries/datamart.psiDeliveryData.sql
+++ b/backend/prodSql/queries/datamart.psiDeliveryData.sql
@@ -1,79 +0,0 @@
-use AlplaPROD_test1
-/**
-
-move this over to the delivery date range query once we have the shift data mapped over correctly.
-
-update the psi stuff on this as well.
-**/
-DECLARE @StartDate DATE = '[startDate]' -- 2025-1-1
-DECLARE @EndDate DATE = '[endDate]' -- 2025-1-31
-SELECT 
-r.[ArticleHumanReadableId]
-      ,[ReleaseNumber]
-	  ,h.CustomerOrderNumber
-	  ,x.CustomerLineItemNumber
-      ,[CustomerReleaseNumber]
-      ,[ReleaseState]
-      ,[DeliveryState]
-	  ,ea.JournalNummer as BOL_Number
-      ,[ReleaseConfirmationState]
-      ,[PlanningState]
-      --,format(r.[OrderDate], 'yyyy-MM-dd HH:mm') as OrderDate
-      ,r.[OrderDate]
-      --,FORMAT(r.[DeliveryDate], 'yyyy-MM-dd HH:mm') as DeliveryDate
-      ,r.[DeliveryDate]
-      --,FORMAT(r.[LoadingDate], 'yyyy-MM-dd HH:mm') as LoadingDate
-      ,r.[LoadingDate]
-      ,[Quantity]
-      ,[DeliveredQuantity]
-      ,r.[AdditionalInformation1]
-      ,r.[AdditionalInformation2]
-      ,[TradeUnits]
-      ,[LoadingUnits]
-      ,[Trucks]
-      ,[LoadingToleranceType]
-      ,[SalesPrice]
-      ,[Currency]
-      ,[QuantityUnit]
-      ,[SalesPriceRemark]
-      ,r.[Remark]
-      ,[Irradiated]
-      ,r.[CreatedByEdi]
-      ,[DeliveryAddressHumanReadableId]
-	  ,DeliveryAddressDescription
-      ,[CustomerArtNo]
-      ,[TotalPrice]
-      ,r.[ArticleAlias]
-
-  FROM [order].[Release] (nolock) as r
-
- left join
- [order].LineItem as x on 
-
- r.LineItemId = x.id
-
- left join
- [order].Header as h on
- x.HeaderId = h.id
-
- --bol stuff
- left join 
- AlplaPROD_test1.dbo.V_LadePlanungenLadeAuftragAbruf (nolock) as zz 
- on zz.AbrufIdAuftragsAbruf = r.ReleaseNumber
-
- left join
-(select * from (SELECT 
-ROW_NUMBER() OVER (PARTITION BY IdJournal ORDER BY add_date DESC) AS RowNum
-,*
-  FROM [AlplaPROD_test1].[dbo].[T_Lieferungen] (nolock)) x
-
-  where  RowNum = 1) as ea on 
- zz.IdLieferschein = ea.IdJournal
-
-where 
-r.ArticleHumanReadableId in ([articles]) 
--r.ReleaseNumber = 1452
-
-and r.DeliveryDate between @StartDate AND @EndDate
--and DeliveredQuantity > 0
--and Journalnummer = 169386
--- a/backend/prodSql/queries/datamart.psiPlanningData.sql
+++ b/backend/prodSql/queries/datamart.psiPlanningData.sql
@@ -1,32 +1,72 @@
-    use AlplaPROD_test1
-    declare @start_date nvarchar(30) = '[startDate]' --'2025-01-01'
-    declare @end_date nvarchar(30) = '[endDate]' --'2025-08-09'
-    /*
-    articles will need to be passed over as well as the date structure we want to see
-    */
+use [test1_AlplaPROD2.0_Read]

-    select x.IdArtikelvarianten As Article,
-    ProduktionAlias as Description,
-    standort as MachineId,
-    MaschinenBezeichnung as MachineName,
-    --MaschZyklus as PlanningCycleTime,
-    x.IdProdPlanung as LotNumber,
-    FORMAT(ProdTag, 'MM/dd/yyyy') as ProductionDay,
-    x.planMenge as TotalPlanned,
-    ProduktionMenge as QTYPerDay,
-    round(ProduktionMengeVPK, 2) PalDay,
-    Status as finished
-    --MaschStdAuslastung as nee
-
-    from dbo.V_ProdLosProduktionJeProdTag_PLANNING (nolock) as x
-
-    left join 
-    dbo.V_ProdPlanung (nolock) as p on
-    x.IdProdPlanung = p.IdProdPlanung
-
-    where ProdTag between @start_date and @end_date 
-    and p.IdArtikelvarianten in ([articles])
-    --and V_ProdLosProduktionJeProdTag_PLANNING.IdKunde = 10 
-    --and IdProdPlanung = 18442
-
-    order by ProdTag desc
+DECLARE @start_date date    = '[startDate]'; --'2025-01-01'
+DECLARE @end_date   date    = '[endDate]'; --'2025-08-09'
+DECLARE @tz         sysname = 'Eastern Standard Time';   -- usday1; use 'Central Standard Time' for usksc1
+DECLARE @shiftSeconds int   = 7*3600;                    -- 07:00 production-day anchor
+--TODO: add in the proper  time zone based on the env, get correcr shift time as well
+;WITH src AS (
+    SELECT
+        pl.RunningNumber, pl.ArticleHumanReadableId, pl.ArticleAlias, pl.ArticleDescription,
+        pl.MachineLocation, pl.MachineDescription, pl.ProductionLotState, pl.ProductionInterrupt,
+        pl.PlanQuantityPieces, pl.PlanQuantityLoadingUnit,
+        CAST(pl.ProdStart AT TIME ZONE @tz AS datetime2(0)) AS StartLocal,
+        CAST(pl.PlanEnd   AT TIME ZONE @tz AS datetime2(0)) AS EndLocal
+    FROM productionScheduling.ProductionLot AS pl
+    WHERE pl.PlanEnd > pl.ProdStart
+        and pl.publishState = 1
+        and pl.ArticleHumanReadableId IN ([articles])   -- <-- article filter (was IdArtikelvarianten)
+      --AND pl.RunningNumber = 28094             -- <-- lot filter (was IdProdPlanung); comment out for all
+),
+calc AS (
+    SELECT *,
+        DATEADD(SECOND, @shiftSeconds,
+            CAST(CASE WHEN DATEDIFF(SECOND, CAST(StartLocal AS date), StartLocal) >= @shiftSeconds
+                      THEN CAST(StartLocal AS date)
+                      ELSE DATEADD(DAY,-1, CAST(StartLocal AS date)) END AS datetime2(0))) AS FirstBoundary
+    FROM src
+),
+days AS (   -- one row per production day the lot touches
+    SELECT RunningNumber, ArticleHumanReadableId, ArticleAlias, ArticleDescription, MachineLocation,
+           MachineDescription, ProductionLotState, PlanQuantityPieces, PlanQuantityLoadingUnit,
+           StartLocal, EndLocal, FirstBoundary AS DayStart
+    FROM calc
+    UNION ALL
+    SELECT RunningNumber, ArticleHumanReadableId, ArticleAlias, ArticleDescription, MachineLocation,
+           MachineDescription, ProductionLotState, PlanQuantityPieces, PlanQuantityLoadingUnit,
+           StartLocal, EndLocal, DATEADD(DAY,1,DayStart)
+    FROM days
+    WHERE DATEADD(DAY,1,DayStart) < EndLocal
+),
+seg AS (   -- working seconds inside each production day
+    SELECT *,
+        DATEDIFF(SECOND,
+            CASE WHEN StartLocal > DayStart                THEN StartLocal              ELSE DayStart                END,
+            CASE WHEN EndLocal   < DATEADD(DAY,1,DayStart) THEN EndLocal                ELSE DATEADD(DAY,1,DayStart) END
+        ) AS SegSec
+    FROM days
+),
+cum AS (   -- cumulative seconds for telescoping round
+    SELECT *,
+        SUM(SegSec) OVER (PARTITION BY RunningNumber ORDER BY DayStart ROWS UNBOUNDED PRECEDING)            AS CumEnd,
+        SUM(SegSec) OVER (PARTITION BY RunningNumber ORDER BY DayStart ROWS UNBOUNDED PRECEDING) - SegSec   AS CumStart,
+        SUM(SegSec) OVER (PARTITION BY RunningNumber)                                                       AS DenomSec
+    FROM seg
+)
+SELECT
+    ArticleHumanReadableId                                                                       AS Article,
+    ArticleAlias                                                                                 AS Description,
+    MachineLocation                                                                              AS MachineId,
+    MachineDescription                                                                           AS MachineName,
+    RunningNumber                                                                                AS LotNumber,
+    FORMAT(DayStart, 'MM/dd/yyyy')                                                               AS ProductionDay,
+    PlanQuantityPieces                                                                           AS TotalPlanned,
+    ROUND(PlanQuantityPieces      * 1.0 * CumEnd / DenomSec, 0)
+      - ROUND(PlanQuantityPieces  * 1.0 * CumStart / DenomSec, 0)                                AS QTYPerDay,
+    ROUND(PlanQuantityLoadingUnit * CumEnd / DenomSec, 2)
+      - ROUND(PlanQuantityLoadingUnit * CumStart / DenomSec, 2)                                  AS PalDay,
+    ProductionLotState                                                                           AS finished
+FROM cum
+WHERE CAST(DayStart AS date) BETWEEN @start_date AND @end_date   -- filter AFTER cumulative calc
+ORDER BY RunningNumber, DayStart DESC
+OPTION (MAXRECURSION 366); 
--- a/backend/routeHandler.routes.ts
+++ b/backend/routeHandler.routes.ts
@@ -19,13 +19,13 @@ import { setupUtilsRoutes } from "./utils/utils.routes.js";

 export const setupRoutes = (baseUrl: string, app: Express) => {
 	//routes that are on by default
+	setupDatamartRoutes(baseUrl, app);
 	setupMobileRoutes(baseUrl, app);
 	setupSystemRoutes(baseUrl, app);
 	setupAdminRoutes(baseUrl, app);
 	setupApiDocsRoutes(baseUrl, app);
 	setupProdSqlRoutes(baseUrl, app);
 	setupGPSqlRoutes(baseUrl, app);
-	setupDatamartRoutes(baseUrl, app);
 	setupAuthRoutes(baseUrl, app);
 	setupUtilsRoutes(baseUrl, app);
 	setupOpendockRoutes(baseUrl, app);
--- a/backend/scaler/cronerActiveJobs.spec.ts
+++ b/backend/scaler/cronerActiveJobs.spec.ts
@@ -1,43 +0,0 @@
-import type { OpenAPIV3_1 } from "openapi-types";
-
-export const cronerActiveJobs: OpenAPIV3_1.PathsObject = {
-	"/api/utils/croner": {
-		get: {
-			summary: "Cron jobs",
-			description: "Returns all jobs on the server.",
-			tags: ["Utils"],
-			responses: {
-				"200": {
-					description: "Jobs returned",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									status: {
-										type: "boolean",
-										format: "boolean",
-										example: true,
-									},
-									uptime: {
-										type: "number",
-										format: "3454.34",
-										example: 3454.34,
-									},
-									memoryUsage: {
-										type: "string",
-										format: "Heap: 11.62 MB / RSS: 86.31 MB",
-									},
-									sqlServerStats: {
-										type: "number",
-										format: "442127",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};
--- a/backend/scaler/cronerStatusChange.spec.ts
+++ b/backend/scaler/cronerStatusChange.spec.ts
@@ -1,94 +0,0 @@
-import type { OpenAPIV3_1 } from "openapi-types";
-
-export const cronerStatusChange: OpenAPIV3_1.PathsObject = {
-	"/api/utils/croner/{status}": {
-		patch: {
-			summary: "Pauses or Resume the Job",
-			description:
-				"When sending start or stop with job name it will resume or stop the job",
-			tags: ["Utils"],
-
-			parameters: [
-				{
-					name: "status",
-					in: "path",
-					required: true,
-					description: "Status change",
-					schema: {
-						type: "string",
-					},
-					example: "start",
-				},
-				{
-					name: "limit",
-					in: "query",
-					required: false, // 👈 optional
-					description: "Maximum number of records to return",
-					schema: {
-						type: "integer",
-						minimum: 1,
-						maximum: 100,
-					},
-					example: 10,
-				},
-			],
-			requestBody: {
-				required: true,
-				content: {
-					"application/json": {
-						schema: {
-							type: "object",
-							required: ["name"],
-							properties: {
-								name: {
-									type: "string",
-									example: "start",
-								},
-							},
-						},
-					},
-				},
-			},
-
-			responses: {
-				"200": {
-					description: "Successful response",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									success: { type: "boolean", example: true },
-									data: {
-										type: "object",
-										example: {
-											name: "exampleName",
-											value: "some value",
-										},
-									},
-								},
-							},
-						},
-					},
-				},
-				"400": {
-					description: "Bad request",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									success: { type: "boolean", example: false },
-									message: {
-										type: "string",
-										example: "Invalid name parameter",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};
--- a/backend/server.ts
+++ b/backend/server.ts
@@ -1,5 +1,6 @@
 import { createServer } from "node:http";
 import os from "node:os";
+
 import createApp from "./app.js";
 import { db } from "./db/db.controller.js";
 import { startDbNotificationListener } from "./db/db.listener.js";
@@ -32,6 +33,7 @@ import { ppooMonitoring } from "./warehousing/warehousing.ppooMonitor.js";

 const port = Number(process.env.PORT) || 3000;
 export let systemSettings: Setting[] = [];
+
 const start = async () => {
 	const { app, baseUrl } = await createApp();

--- a/backend/system/settingsBase.controller.ts
+++ b/backend/system/settingsBase.controller.ts
@@ -410,6 +410,17 @@ const newSettings: NewSetting[] = [
 		roles: ["admin"],
 		seedVersion: 1,
 	},
+	{
+		name: "defaultOrderTime",
+		value: "8",
+		active: true,
+		description:
+			"What time will we be using as our default time for orders that we do not pass a time over.",
+		moduleName: "demandManagement",
+		settingType: "standard",
+		roles: ["admin"],
+		seedVersion: 1,
+	},
 ];

 export const baseSettingValidationCheck = async () => {
--- a/backend/system/stats.route.ts
+++ b/backend/system/stats.route.ts
@@ -6,12 +6,15 @@ import {
 	type SqlQuery,
 	sqlQuerySelector,
 } from "../prodSql/prodSqlQuerySelector.utils.js";
+
 import { isServerRunning } from "../tcpServer/tcp.server.js";
+import { getAppVersion } from "../utils/version.utils.js";

 const router = Router();

 router.get("/", async (_, res) => {
 	const used = process.memoryUsage();
+	const version = await getAppVersion();

 	const query = sqlQuerySelector("prodSqlStats") as SqlQuery;

@@ -20,6 +23,8 @@ router.get("/", async (_, res) => {
 		status: "ok",
 		uptime: process.uptime(),
 		nodeVersion: process.version,
+		appVersion: version.version ?? "",
+		lastBuildDate: version.lastBuildTime ?? "",
 		memoryUsage: `Heap: ${(used.heapUsed / 1024 / 1024).toFixed(2)} MB / RSS: ${(
 			used.rss / 1024 / 1024
 		).toFixed(2)} MB`,
--- a/backend/utils/build.utils.ts
+++ b/backend/utils/build.utils.ts
@@ -2,6 +2,7 @@ import { spawn } from "node:child_process";
 import { createLogger } from "../logger/logger.controller.js";
 import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
 import { updateAppStats } from "./updateAppStats.utils.js";
+import { getAppVersion } from "./version.utils.js";
 import { zipBuild } from "./zipper.utils.js";

 export const emitBuildLog = (message: string, level = "info") => {
@@ -28,6 +29,8 @@ export let building = false;
 const log = createLogger({ module: "utils", subModule: "builds" });
 export const build = async () => {
 	const appDir = process.env.DEV_DIR ?? "";
+	const build = await getAppVersion();
+
 	return new Promise((resolve) => {
 		building = true;

@@ -72,6 +75,7 @@ export const build = async () => {
 				updateAppStats({
 					lastUpdated: new Date(),
 					building: false,
+					currentBuild: build.build,
 				});
 				emitBuildLog(`Build failed with code ${code}`, "error");
 				//reject(new Error(`Build failed with code ${code}`));
--- a/backend/utils/updateAppStats.utils.ts
+++ b/backend/utils/updateAppStats.utils.ts
@@ -4,6 +4,7 @@ import { appStats } from "../db/schema/stats.schema.js";
 export const updateAppStats = async (
 	data: Partial<typeof appStats.$inferInsert>,
 ) => {
+	console.log(data);
 	await db
 		.insert(appStats)
 		.values({
--- a/backend/utils/version.utils.ts
+++ b/backend/utils/version.utils.ts
@@ -0,0 +1,17 @@
+import fsp from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const getAppVersion = async () => {
+	const __filename = fileURLToPath(import.meta.url);
+	const __dirname = path.dirname(__filename);
+	const version = path.join(__dirname, "../../package.json");
+	const raw = await fsp.readFile(`${version}`, "utf8");
+	const config = JSON.parse(raw);
+
+	return {
+		version: `${config.version}.${parseInt((config.build as string) ?? "1", 0) - 1}`,
+		build: parseInt((config.build as string) ?? "1", 0),
+		lastBuildTime: config.lastBuildDate,
+	};
+};
--- a/backend/utils/zipper.utils.ts
+++ b/backend/utils/zipper.utils.ts
@@ -2,6 +2,7 @@ import fs from "node:fs";
 import fsp from "node:fs/promises";
 import path from "node:path";
 import archiver from "archiver";
+import { format } from "date-fns";
 import { createLogger } from "../logger/logger.controller.js";
 import { emitBuildLog } from "./build.utils.js";
 import { updateAppStats } from "./updateAppStats.utils.js";
@@ -17,33 +18,31 @@ const exists = async (target: string) => {
 	}
 };

-const getNextBuildNumber = async (buildNumberFile: string) => {
-	if (!(await exists(buildNumberFile))) {
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
-		return 1;
-	}
-
-	const raw = await fsp.readFile(buildNumberFile, "utf8");
-	const current = Number.parseInt(raw.trim(), 10);
+const getNextBuildNumber = async (versionPath: string) => {
+	const raw = await fsp.readFile(versionPath, "utf8");
+	const config = JSON.parse(raw);
+	const current = Number.parseInt(config.build.trim(), 10);

+	let nextBuild: string;
 	if (Number.isNaN(current) || current < 1) {
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
-		return 1;
+		nextBuild = "1";
+	} else {
+		nextBuild = String(current + 1); // Incrementing the build number
 	}

-	const next = current + 1;
+	const updatedConfig = {
+		...config,
+		build: nextBuild,
+		lastBuildDate: format(new Date(Date.now()), "M/d/yyyy HH:mm"),
+	};

-	await fsp.writeFile(buildNumberFile, String(next), "utf8");
+	await fsp.writeFile(
+		versionPath,
+		JSON.stringify(updatedConfig, null, 4) + "\n",
+		"utf8",
+	);

-	// update the server with the next build number
-
-	await updateAppStats({
-		currentBuild: next,
-		lastBuildAt: new Date(),
-		building: true,
-	});
-
-	return next;
+	return { version: config.version, build: config.build };
 };

 const cleanupOldBuilds = async (buildFolder: string, maxBuilds: number) => {
@@ -53,7 +52,8 @@ const cleanupOldBuilds = async (buildFolder: string, maxBuilds: number) => {

 	for (const entry of entries) {
 		if (!entry.isFile()) continue;
-		if (!/^LSTV3-\d+\.zip$/i.test(entry.name)) continue;
+		//if (!/^LSTV3-\d+\.zip$/i.test(entry.name)) continue;
+		if (!entry.name.includes("LSTV3")) continue;

 		const fullPath = path.join(buildFolder, entry.name);
 		const stat = await fsp.stat(fullPath);
@@ -85,7 +85,7 @@ export const zipBuild = async () => {
 	}

 	const includesFile = path.join(appDir, ".includes");
-	const buildNumberFile = path.join(appDir, ".buildNumber");
+	const version = path.join(appDir, "package.json");
 	const buildFolder = path.join(appDir, "builds");
 	const tempFolder = path.join(appDir, "temp", "zip-temp");
 	if (!(await exists(includesFile))) {
@@ -95,11 +95,13 @@ export const zipBuild = async () => {

 	await fsp.mkdir(buildFolder, { recursive: true });

-	const buildNumber = await getNextBuildNumber(buildNumberFile);
-	const zipFileName = `LSTV3-${buildNumber}.zip`;
+	const lstVersion = await getNextBuildNumber(version);
+	const zipFileName = `LSTV3-${lstVersion.version}.${lstVersion.build}.zip`;
 	const zipFile = path.join(buildFolder, zipFileName);
 	// make the folders in case they are not created already
-	emitBuildLog(`Using build number: ${buildNumber}`);
+	emitBuildLog(
+		`Using version, build number: ${lstVersion.version}.${lstVersion.build}`,
+	);

 	if (await exists(tempFolder)) {
 		await fsp.rm(tempFolder, { recursive: true, force: true });
@@ -166,11 +168,12 @@ export const zipBuild = async () => {
 	await updateAppStats({
 		lastUpdated: new Date(),
 		building: false,
+		currentBuild: lstVersion.build,
 	});

 	return {
 		success: true,
-		buildNumber,
+		build: lstVersion.build,
 		zipFile,
 		zipFileName,
 	};
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,12 +1,12 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
+  "style": "radix-lyra",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
-    "baseColor": "zinc",
+    "baseColor": "mist",
    "cssVariables": true,
    "prefix": ""
  },
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,7 @@
      "name": "frontend",
      "version": "0.0.0",
      "dependencies": {
-        "@base-ui/react": "^1.5.0",
+        "@base-ui/react": "^1.6.0",
        "@fontsource-variable/inter": "^5.2.8",
        "@tailwindcss/vite": "^4.2.1",
        "@tanstack/react-form": "^1.28.5",
@@ -20,14 +20,20 @@
        "better-auth": "^1.5.5",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
-        "date-fns": "^4.1.0",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.4.0",
        "date-fns-tz": "^3.2.0",
+        "embla-carousel-react": "^8.6.0",
+        "input-otp": "^1.4.2",
        "lucide-react": "^0.577.0",
        "next-themes": "^0.4.6",
        "radix-ui": "^1.4.3",
        "react": "^19.1.1",
+        "react-day-picker": "^10.0.1",
        "react-dom": "^19.1.1",
        "react-markdown": "^10.1.0",
+        "react-resizable-panels": "^4.11.2",
+        "recharts": "^3.8.0",
        "remark-gfm": "^4.0.1",
        "shadcn": "^4.0.8",
        "socket.io-client": "^4.8.3",
@@ -35,6 +41,7 @@
        "tailwind-merge": "^3.5.0",
        "tailwindcss": "^4.2.1",
        "tw-animate-css": "^1.4.0",
+        "vaul": "^1.1.2",
        "vite-imagetools": "^10.0.0",
        "zod": "^4.3.6"
      },
@@ -442,9 +449,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
-      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -496,13 +503,13 @@
      }
    },
    "node_modules/@base-ui/react": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.5.0.tgz",
-      "integrity": "sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.6.0.tgz",
+      "integrity": "sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.29.2",
-        "@base-ui/utils": "0.2.9",
+        "@base-ui/utils": "0.3.1",
        "@floating-ui/react-dom": "^2.1.8",
        "@floating-ui/utils": "^0.2.11",
        "use-sync-external-store": "^1.6.0"
@@ -534,14 +541,14 @@
      }
    },
    "node_modules/@base-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.3.1.tgz",
+      "integrity": "sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.29.2",
        "@floating-ui/utils": "^0.2.11",
-        "reselect": "^5.1.1",
+        "reselect": "^5.2.0",
        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
@@ -566,6 +573,12 @@
      "resolved": "https://registry.npmjs.org/@better-fetch/fetch/-/fetch-1.1.21.tgz",
      "integrity": "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A=="
    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.5.0.tgz",
+      "integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
+      "license": "MIT"
+    },
    "node_modules/@dotenvx/dotenvx": {
      "version": "1.55.1",
      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.55.1.tgz",
@@ -3750,6 +3763,42 @@
      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
      "license": "MIT"
    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-rc.7",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
@@ -4134,6 +4183,12 @@
      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
      "license": "MIT"
    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
    "node_modules/@swc/core": {
      "version": "1.15.18",
      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.18.tgz",
@@ -5094,6 +5149,69 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/debug": {
      "version": "4.1.13",
      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
@@ -5180,6 +5298,12 @@
      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
      "license": "MIT"
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@types/validate-npm-package-name": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
@@ -6436,6 +6560,22 @@
        "node": ">=6"
      }
    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/code-block-writer": {
      "version": "13.0.3",
      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
@@ -6625,6 +6765,127 @@
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "license": "MIT"
    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/data-uri-to-buffer": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -6635,9 +6896,9 @@
      }
    },
    "node_modules/date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -6670,6 +6931,12 @@
        }
      }
    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
    "node_modules/decode-named-character-reference": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
@@ -6916,6 +7183,34 @@
      "integrity": "sha512-QBMrTWEf00GXZmJyx2lbYD45jpI3TUFnNIzJ5BBc8piGUDwMPa1GV6HJWTZVvY/eiN3fSopl7NRbgGp9sZ9LTA==",
      "license": "ISC"
    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
    "node_modules/emoji-regex": {
      "version": "10.6.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -7029,6 +7324,16 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-toolkit": {
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.48.1.tgz",
+      "integrity": "sha512-wfnXlwd5I75eXRtdD2vuEs50xHHESECDsGD7yiQnfFVNoa5522NwXEbmgo98LfiukSQHs+mBM7/YG3qKJB9/mQ==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
    "node_modules/esbuild": {
      "version": "0.27.4",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.4.tgz",
@@ -7313,6 +7618,12 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
    "node_modules/eventsource": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -8142,6 +8453,16 @@
        "node": ">=20.0.0"
      }
    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/import-fresh": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -8180,6 +8501,25 @@
      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
      "license": "MIT"
    },
+    "node_modules/input-otp": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
+      "integrity": "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/ip-address": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -10848,6 +11188,32 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-day-picker": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-10.0.1.tgz",
+      "integrity": "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-dom": {
      "version": "19.2.4",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
@@ -10860,6 +11226,13 @@
        "react": "^19.2.4"
      }
    },
+    "node_modules/react-is": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/react-markdown": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
@@ -10887,6 +11260,29 @@
        "react": ">=18"
      }
    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-remove-scroll": {
      "version": "2.7.2",
      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -10934,6 +11330,16 @@
        }
      }
    },
+    "node_modules/react-resizable-panels": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.11.2.tgz",
+      "integrity": "sha512-+kfFbDZ8mygc7g0vxOcDzCVGuwiIUOnILqPoUHo6/uP+Mmyx6HzZU+kj1aOPDlktXuobYbr6BtQekvJwHRX4Eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -11007,6 +11413,57 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/recharts": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.0.tgz",
+      "integrity": "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts/node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
    "node_modules/remark-gfm": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -12415,6 +12872,19 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/vfile": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -12443,6 +12913,28 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
    "node_modules/vite": {
      "version": "7.3.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@base-ui/react": "^1.5.0",
+    "@base-ui/react": "^1.6.0",
    "@fontsource-variable/inter": "^5.2.8",
    "@tailwindcss/vite": "^4.2.1",
    "@tanstack/react-form": "^1.28.5",
@@ -22,14 +22,20 @@
    "better-auth": "^1.5.5",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
    "date-fns-tz": "^3.2.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
    "lucide-react": "^0.577.0",
    "next-themes": "^0.4.6",
    "radix-ui": "^1.4.3",
    "react": "^19.1.1",
+    "react-day-picker": "^10.0.1",
    "react-dom": "^19.1.1",
    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "^3.8.0",
    "remark-gfm": "^4.0.1",
    "shadcn": "^4.0.8",
    "socket.io-client": "^4.8.3",
@@ -37,6 +43,7 @@
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.2.1",
    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
    "vite-imagetools": "^10.0.0",
    "zod": "^4.3.6"
  },
--- a/frontend/src/components/Sidebar/sidebar.tsx
+++ b/frontend/src/components/Sidebar/sidebar.tsx
@@ -1,10 +1,14 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { LaptopMinimal } from "lucide-react";
 import {
 	Sidebar,
 	SidebarContent,
-	SidebarHeader,
+	SidebarFooter,
 	SidebarMenu,
+	SidebarMenuButton,
 	SidebarMenuItem,
+	useSidebar,
 } from "@/components/ui/sidebar";
 import { useSession } from "@/lib/auth-client";
 import { getSettings } from "../../lib/queries/getSettings";
@@ -23,6 +27,7 @@ export function AppSidebar() {
 			openDock: ["read"],
 		}),
 	);
+	const { setOpen } = useSidebar();

 	// const { data: canReadWarehouse = false } = useQuery(
 	// 	permissionQuery({
@@ -36,7 +41,7 @@ export function AppSidebar() {
 			collapsible="offcanvas"
 			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
 		>
-			<SidebarHeader>
+			<SidebarContent>
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
@@ -64,7 +69,24 @@ export function AppSidebar() {
 						</SidebarContent>
 					</SidebarMenuItem>
 				</SidebarMenu>
-			</SidebarHeader>
+			</SidebarContent>
+			{session &&
+				(session.user.role === "admin" ||
+					session.user.role === "systemAdmin" ||
+					session.user.role === "manager") && (
+					<SidebarFooter>
+						<SidebarMenu>
+							<SidebarMenuItem>
+								<SidebarMenuButton asChild>
+									<Link to={"/apidocs"} onClick={() => setOpen(false)}>
+										<LaptopMinimal />
+										<span>Api docs</span>
+									</Link>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						</SidebarMenu>
+					</SidebarFooter>
+				)}
 		</Sidebar>
 	);
 }
--- a/frontend/src/components/ui/accordion.tsx
+++ b/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-xs data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,197 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"

 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
@@ -55,7 +55,7 @@ function AlertDescription({
    <div
      data-slot="alert-description"
      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2",
        className
      )}
      {...props}
@@ -67,7 +67,10 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn(
+        "absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]",
+        className
+      )}
      {...props}
    />
  )
--- a/frontend/src/components/ui/aspect-ratio.tsx
+++ b/frontend/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -92,7 +92,7 @@ function AvatarGroupCount({
    <div
      data-slot="avatar-group-count"
      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"

 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,122 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-xs wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
--- a/frontend/src/components/ui/button-group.tsx
+++ b/frontend/src/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-none border bg-muted px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -5,15 +5,15 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
@@ -23,14 +23,12 @@ const buttonVariants = cva(
      size: {
        default:
          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
        "icon-lg": "size-9",
      },
    },
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
      data-slot="card"
      data-size={size}
      className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-none bg-card py-(--card-spacing) text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
        className
      )}
      {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-header"
      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
        className
      )}
      {...props}
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-title"
      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "text-sm font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
@@ -50,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
      {...props}
    />
  )
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      className={cn("px-(--card-spacing)", className)}
      {...props}
    />
  )
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-footer"
      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-none border-t p-(--card-spacing)",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -0,0 +1,240 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "inset-y-0 -left-12 my-auto"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "inset-y-0 -right-12 my-auto"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}
--- a/frontend/src/components/ui/chart.tsx
+++ b/frontend/src/components/ui/chart.tsx
@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-none border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ function Checkbox({
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/collapsible.tsx
+++ b/frontend/src/components/ui/collapsible.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Collapsible as CollapsiblePrimitive } from "radix-ui"

 function Collapsible({
--- a/frontend/src/components/ui/combobox.tsx
+++ b/frontend/src/components/ui/combobox.tsx
@@ -112,7 +112,7 @@ function ComboboxContent({
        <ComboboxPrimitive.Popup
          data-slot="combobox-content"
          data-chips={!!anchor}
-          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
          {...props}
        />
      </ComboboxPrimitive.Positioner>
@@ -125,7 +125,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
    <ComboboxPrimitive.List
      data-slot="combobox-list"
      className={cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0",
        className
      )}
      {...props}
@@ -142,7 +142,7 @@ function ComboboxItem({
    <ComboboxPrimitive.Item
      data-slot="combobox-item"
      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
@@ -176,7 +176,7 @@ function ComboboxLabel({
  return (
    <ComboboxPrimitive.GroupLabel
      data-slot="combobox-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      className={cn("px-2 py-2 text-xs text-muted-foreground", className)}
      {...props}
    />
  )
@@ -193,7 +193,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
    <ComboboxPrimitive.Empty
      data-slot="combobox-empty"
      className={cn(
-        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-xs text-muted-foreground group-data-empty/combobox-content:flex",
        className
      )}
      {...props}
@@ -208,7 +208,7 @@ function ComboboxSeparator({
  return (
    <ComboboxPrimitive.Separator
      data-slot="combobox-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
      {...props}
    />
  )
@@ -223,7 +223,7 @@ function ComboboxChips({
    <ComboboxPrimitive.Chips
      data-slot="combobox-chips"
      className={cn(
-        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-none border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
@@ -243,7 +243,7 @@ function ComboboxChip({
    <ComboboxPrimitive.Chip
      data-slot="combobox-chip"
      className={cn(
-        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-none bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-none p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="border-b pb-0">
+      <InputGroup className="h-8 border-none border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-0 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/frontend/src/components/ui/context-menu.tsx
+++ b/frontend/src/components/ui/context-menu.tsx
@@ -0,0 +1,261 @@
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none border bg-popover text-popover-foreground shadow-lg duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-2 text-xs text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "radix-ui"

@@ -59,7 +61,7 @@ function DialogContent({
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-xs/relaxed text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
@@ -87,7 +89,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
+      className={cn("flex flex-col gap-1 text-left", className)}
      {...props}
    />
  )
@@ -105,7 +107,7 @@ function DialogFooter({
    <div
      data-slot="dialog-footer"
      className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
@@ -127,10 +129,7 @@ function DialogTitle({
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
-      className={cn(
-        "text-base leading-none font-medium",
-        className
-      )}
+      className={cn("text-sm font-medium", className)}
      {...props}
    />
  )
@@ -144,7 +143,7 @@ function DialogDescription({
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/direction.tsx
+++ b/frontend/src/components/ui/direction.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }
--- a/frontend/src/components/ui/drawer.tsx
+++ b/frontend/src/components/ui/drawer.tsx
@@ -0,0 +1,132 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-sm font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"

@@ -41,7 +43,7 @@ function DropdownMenuContent({
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        align={align}
-        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
@@ -71,7 +73,7 @@ function DropdownMenuItem({
      data-inset={inset}
      data-variant={variant}
      className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
        className
      )}
      {...props}
@@ -93,7 +95,7 @@ function DropdownMenuCheckboxItem({
      data-slot="dropdown-menu-checkbox-item"
      data-inset={inset}
      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      checked={checked}
@@ -137,7 +139,7 @@ function DropdownMenuRadioItem({
      data-slot="dropdown-menu-radio-item"
      data-inset={inset}
      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
@@ -168,7 +170,7 @@ function DropdownMenuLabel({
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        "px-2 py-2 text-xs text-muted-foreground data-inset:pl-7",
        className
      )}
      {...props}
@@ -183,7 +185,7 @@ function DropdownMenuSeparator({
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
      {...props}
    />
  )
@@ -224,7 +226,7 @@ function DropdownMenuSubTrigger({
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
@@ -242,7 +244,7 @@ function DropdownMenuSubContent({
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
-      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
      {...props}
    />
  )
--- a/frontend/src/components/ui/empty.tsx
+++ b/frontend/src/components/ui/empty.tsx
@@ -0,0 +1,101 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
--- a/frontend/src/components/ui/field.tsx
+++ b/frontend/src/components/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-xs font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
--- a/frontend/src/components/ui/hover-card.tsx
+++ b/frontend/src/components/ui/hover-card.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-none bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/frontend/src/components/ui/input-group.tsx
+++ b/frontend/src/components/ui/input-group.tsx
@@ -1,154 +1,153 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"

-/* eslint-disable */
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="input-group"
-			role="group"
-			className={cn(
-				"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 const inputGroupAddonVariants = cva(
-	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-	{
-		variants: {
-			align: {
-				"inline-start":
-					"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-				"inline-end":
-					"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-				"block-start":
-					"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-				"block-end":
-					"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-			},
-		},
-		defaultVariants: {
-			align: "inline-start",
-		},
-	},
-);
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-xs font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)

 function InputGroupAddon({
-	className,
-	align = "inline-start",
-	...props
+  className,
+  align = "inline-start",
+  ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-	return (
-		<div
-			role="group"
-			data-slot="input-group-addon"
-			data-align={align}
-			className={cn(inputGroupAddonVariants({ align }), className)}
-			onClick={(e) => {
-				if ((e.target as HTMLElement).closest("button")) {
-					return;
-				}
-				e.currentTarget.parentElement?.querySelector("input")?.focus();
-			}}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
 }

 const inputGroupButtonVariants = cva(
-	"flex items-center gap-2 text-sm shadow-none",
-	{
-		variants: {
-			size: {
-				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-				sm: "",
-				"icon-xs":
-					"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
-			},
-		},
-		defaultVariants: {
-			size: "xs",
-		},
-	},
-);
+  "flex items-center gap-2 text-xs shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "gap-1",
+        "icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
+        "icon-sm": "size-7 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)

 function InputGroupButton({
-	className,
-	type = "button",
-	variant = "ghost",
-	size = "xs",
-	...props
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
 }: Omit<React.ComponentProps<typeof Button>, "size"> &
-	VariantProps<typeof inputGroupButtonVariants>) {
-	return (
-		<Button
-			type={type}
-			data-size={size}
-			variant={variant}
-			className={cn(inputGroupButtonVariants({ size }), className)}
-			{...props}
-		/>
-	);
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
 }

 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			className={cn(
-				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-xs text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function InputGroupInput({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<"input">) {
-	return (
-		<Input
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function InputGroupTextarea({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<"textarea">) {
-	return (
-		<Textarea
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 export {
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupInput,
-	InputGroupText,
-	InputGroupTextarea,
-};
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
--- a/frontend/src/components/ui/input-otp.tsx
+++ b/frontend/src/components/ui/input-otp.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-none has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
      type={type}
      data-slot="input"
      className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/item.tsx
+++ b/frontend/src/components/ui/item.tsx
@@ -0,0 +1,196 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-none border text-xs transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-xs font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground group-data-[size=xs]/item:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
--- a/frontend/src/components/ui/kbd.tsx
+++ b/frontend/src/components/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -11,7 +11,7 @@ function Label({
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/menubar.tsx
+++ b/frontend/src/components/ui/menubar.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-none border p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn("px-2 py-2 text-xs data-inset:pl-8", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
--- a/frontend/src/components/ui/native-select.tsx
+++ b/frontend/src/components/ui/native-select.tsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-none border border-input bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
--- a/frontend/src/components/ui/navigation-menu.tsx
+++ b/frontend/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,164 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
--- a/frontend/src/components/ui/pagination.tsx
+++ b/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,129 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-none bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-none bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
--- a/frontend/src/components/ui/radio-group.tsx
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
--- a/frontend/src/components/ui/resizable.tsx
+++ b/frontend/src/components/ui/resizable.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-none bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -44,7 +44,7 @@ function ScrollBar({
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-border"
+        className="relative flex-1 rounded-none bg-border"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"

@@ -17,7 +19,7 @@ function SelectGroup({
  return (
    <SelectPrimitive.Group
      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
+      className={cn("scroll-my-1", className)}
      {...props}
    />
  )
@@ -42,7 +44,7 @@ function SelectTrigger({
      data-slot="select-trigger"
      data-size={size}
      className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
@@ -67,7 +69,7 @@ function SelectContent({
      <SelectPrimitive.Content
        data-slot="select-content"
        data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
        position={position}
        align={align}
        {...props}
@@ -95,7 +97,7 @@ function SelectLabel({
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      className={cn("px-2 py-2 text-xs text-muted-foreground", className)}
      {...props}
    />
  )
@@ -110,7 +112,7 @@ function SelectItem({
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      )}
      {...props}
@@ -132,7 +134,7 @@ function SelectSeparator({
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      className={cn("pointer-events-none -mx-1 h-px bg-border", className)}
      {...props}
    />
  )
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -1,26 +1,26 @@
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import type * as React from "react";
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"

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

 function Separator({
-	className,
-	orientation = "horizontal",
-	decorative = true,
-	...props
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-	return (
-		<SeparatorPrimitive.Root
-			data-slot="separator"
-			decorative={decorative}
-			orientation={orientation}
-			className={cn(
-				"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
 }

-export { Separator };
+export { Separator }
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,143 +1,145 @@
-"use client";
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"

-import { XIcon } from "lucide-react";
-import { Dialog as SheetPrimitive } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"

 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }

 function SheetTrigger({
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }

 function SheetClose({
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }

 function SheetPortal({
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }

 function SheetOverlay({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-	return (
-		<SheetPrimitive.Overlay
-			data-slot="sheet-overlay"
-			className={cn(
-				"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function SheetContent({
-	className,
-	children,
-	side = "right",
-	showCloseButton = true,
-	...props
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-	side?: "top" | "right" | "bottom" | "left";
-	showCloseButton?: boolean;
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
-	return (
-		<SheetPortal>
-			<SheetOverlay />
-			<SheetPrimitive.Content
-				data-slot="sheet-content"
-				className={cn(
-					"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
-					side === "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",
-					side === "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",
-					side === "top" &&
-						"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-					side === "bottom" &&
-						"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				{showCloseButton && (
-					<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-						<XIcon className="size-4" />
-						<span className="sr-only">Close</span>
-					</SheetPrimitive.Close>
-				)}
-			</SheetPrimitive.Content>
-		</SheetPortal>
-	);
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
 }

 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sheet-header"
-			className={cn("flex flex-col gap-1.5 p-4", className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
 }

 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="sheet-footer"
-			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
 }

 function SheetTitle({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-	return (
-		<SheetPrimitive.Title
-			data-slot="sheet-title"
-			className={cn("font-semibold text-foreground", className)}
-			{...props}
-		/>
-	);
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "text-sm font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function SheetDescription({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-	return (
-		<SheetPrimitive.Description
-			data-slot="sheet-description"
-			className={cn("text-sm text-muted-foreground", className)}
-			{...props}
-		/>
-	);
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
 }

 export {
-	Sheet,
-	SheetTrigger,
-	SheetClose,
-	SheetContent,
-	SheetHeader,
-	SheetFooter,
-	SheetTitle,
-	SheetDescription,
-};
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"

 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="skeleton"
-			className={cn("animate-pulse rounded-md bg-accent", className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-none bg-muted", className)}
+      {...props}
+    />
+  )
 }

-export { Skeleton };
+export { Skeleton }
--- a/frontend/src/components/ui/slider.tsx
+++ b/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-none bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-3 shrink-0 rounded-none border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,43 +1,47 @@
-import {
-	CircleCheckIcon,
-	InfoIcon,
-	Loader2Icon,
-	OctagonXIcon,
-	TriangleAlertIcon,
-} from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"

 const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = "system" } = useTheme();
+  const { theme = "system" } = useTheme()

-	return (
-		<Sonner
-			theme={theme as ToasterProps["theme"]}
-			className="toaster group"
-			icons={{
-				success: <CircleCheckIcon className="size-4" />,
-				info: <InfoIcon className="size-4" />,
-				warning: <TriangleAlertIcon className="size-4" />,
-				error: <OctagonXIcon className="size-4" />,
-				loading: <Loader2Icon className="size-4 animate-spin" />,
-			}}
-			style={
-				{
-					"--normal-bg": "var(--popover)",
-					"--normal-text": "var(--popover-foreground)",
-					"--normal-border": "var(--border)",
-					"--border-radius": "var(--radius)",
-				} as React.CSSProperties
-			}
-			toastOptions={{
-				classNames: {
-					toast: "cn-toast",
-				},
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}

-export { Toaster };
+export { Toaster }
--- a/frontend/src/components/ui/spinner.tsx
+++ b/frontend/src/components/ui/spinner.tsx
@@ -3,7 +3,7 @@ import { Loader2Icon } from "lucide-react"

 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
-    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
  )
 }

--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Switch as SwitchPrimitive } from "radix-ui"

@@ -15,7 +17,7 @@ function Switch({
      data-slot="switch"
      data-size={size}
      className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -10,7 +10,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
    >
      <table
        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn("w-full caption-bottom text-xs", className)}
        {...props}
      />
    </div>
@@ -55,7 +55,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
    <tr
      data-slot="table-row"
      className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
        className
      )}
      {...props}
@@ -96,7 +96,7 @@ function TableCaption({
  return (
    <caption
      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      className={cn("mt-4 text-xs text-muted-foreground", className)}
      {...props}
    />
  )
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Tabs as TabsPrimitive } from "radix-ui"
@@ -23,7 +25,7 @@ function Tabs({
 }

 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-none p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
  {
    variants: {
      variant: {
@@ -61,7 +63,7 @@ function TabsTrigger({
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
@@ -79,7 +81,7 @@ function TabsContent({
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
+      className={cn("flex-1 text-xs/relaxed outline-none", className)}
      {...props}
    />
  )
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
    <textarea
      data-slot="textarea"
      className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/toggle-group.tsx
+++ b/frontend/src/components/ui/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-none data-[size=sm]:rounded-none data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
--- a/frontend/src/components/ui/toggle.tsx
+++ b/frontend/src/components/ui/toggle.tsx
@@ -5,7 +5,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"

 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-none text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
@@ -13,9 +13,10 @@ const toggleVariants = cva(
        outline: "border border-input bg-transparent hover:bg-muted",
      },
      size: {
-        default: "h-8 min-w-8 px-2",
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
-        lg: "h-9 min-w-9 px-2.5",
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
      },
    },
    defaultVariants: {
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -1,54 +1,57 @@
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+"use client"

-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"

 function TooltipProvider({
-	delayDuration = 0,
-	...props
+  delayDuration = 0,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-	return (
-		<TooltipPrimitive.Provider
-			data-slot="tooltip-provider"
-			delayDuration={delayDuration}
-			{...props}
-		/>
-	);
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
 }

 function Tooltip({
-	...props
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }

 function TooltipTrigger({
-	...props
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }

 function TooltipContent({
-	className,
-	sideOffset = 0,
-	children,
-	...props
+  className,
+  sideOffset = 0,
+  children,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				data-slot="tooltip-content"
-				sideOffset={sideOffset}
-				className={cn(
-					"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-			</TooltipPrimitive.Content>
-		</TooltipPrimitive.Portal>
-	);
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
 }

-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
--- a/frontend/src/lib/tableStuff/LstTable.tsx
+++ b/frontend/src/lib/tableStuff/LstTable.tsx
@@ -77,9 +77,7 @@ export default function LstTable({
 	return (
 		<div className={className}>
 			<div>{/* TODO: Add table header in here like title */}</div>
-			<ScrollArea
-				className={`w-full rounded-md border whitespace-nowrap ${height}`}
-			>
+			<ScrollArea className={`w-full border whitespace-nowrap ${height}`}>
 				<Table className={cn("w-full", tableClassName)}>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -11,9 +11,11 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as ForbiddenRouteImport } from './routes/forbidden'
 import { Route as AppDownRouteImport } from './routes/app-down'
+import { Route as ApidocsRouteImport } from './routes/apidocs'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DocsIndexRouteImport } from './routes/docs/index'
+import { Route as DocsDatamartRouteImport } from './routes/docs/datamart'
 import { Route as DocsSplatRouteImport } from './routes/docs/$'
 import { Route as AdminUsersRouteImport } from './routes/admin/users'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
@@ -41,6 +43,11 @@ const AppDownRoute = AppDownRouteImport.update({
  path: '/app-down',
  getParentRoute: () => rootRouteImport,
 } as any)
+const ApidocsRoute = ApidocsRouteImport.update({
+  id: '/apidocs',
+  path: '/apidocs',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AboutRoute = AboutRouteImport.update({
  id: '/about',
  path: '/about',
@@ -56,6 +63,11 @@ const DocsIndexRoute = DocsIndexRouteImport.update({
  path: '/docs/',
  getParentRoute: () => rootRouteImport,
 } as any)
+const DocsDatamartRoute = DocsDatamartRouteImport.update({
+  id: '/docs/datamart',
+  path: '/docs/datamart',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DocsSplatRoute = DocsSplatRouteImport.update({
  id: '/docs/$',
  path: '/docs/$',
@@ -145,6 +157,7 @@ const WarehouseDockdoorscanningScansDockScansRoute =
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
+  '/apidocs': typeof ApidocsRoute
  '/app-down': typeof AppDownRoute
  '/forbidden': typeof ForbiddenRoute
  '/login': typeof authLoginRoute
@@ -155,6 +168,7 @@ export interface FileRoutesByFullPath {
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
  '/docs/$': typeof DocsSplatRoute
+  '/docs/datamart': typeof DocsDatamartRoute
  '/docs/': typeof DocsIndexRoute
  '/user/profile': typeof authUserProfileRoute
  '/user/resetpassword': typeof authUserResetpasswordRoute
@@ -168,6 +182,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
+  '/apidocs': typeof ApidocsRoute
  '/app-down': typeof AppDownRoute
  '/forbidden': typeof ForbiddenRoute
  '/login': typeof authLoginRoute
@@ -178,6 +193,7 @@ export interface FileRoutesByTo {
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
  '/docs/$': typeof DocsSplatRoute
+  '/docs/datamart': typeof DocsDatamartRoute
  '/docs': typeof DocsIndexRoute
  '/user/profile': typeof authUserProfileRoute
  '/user/resetpassword': typeof authUserResetpasswordRoute
@@ -192,6 +208,7 @@ export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
+  '/apidocs': typeof ApidocsRoute
  '/app-down': typeof AppDownRoute
  '/forbidden': typeof ForbiddenRoute
  '/(auth)/login': typeof authLoginRoute
@@ -202,6 +219,7 @@ export interface FileRoutesById {
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
  '/docs/$': typeof DocsSplatRoute
+  '/docs/datamart': typeof DocsDatamartRoute
  '/docs/': typeof DocsIndexRoute
  '/(auth)/user/profile': typeof authUserProfileRoute
  '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
@@ -217,6 +235,7 @@ export interface FileRouteTypes {
  fullPaths:
    | '/'
    | '/about'
+    | '/apidocs'
    | '/app-down'
    | '/forbidden'
    | '/login'
@@ -227,6 +246,7 @@ export interface FileRouteTypes {
    | '/admin/settings'
    | '/admin/users'
    | '/docs/$'
+    | '/docs/datamart'
    | '/docs/'
    | '/user/profile'
    | '/user/resetpassword'
@@ -240,6 +260,7 @@ export interface FileRouteTypes {
  to:
    | '/'
    | '/about'
+    | '/apidocs'
    | '/app-down'
    | '/forbidden'
    | '/login'
@@ -250,6 +271,7 @@ export interface FileRouteTypes {
    | '/admin/settings'
    | '/admin/users'
    | '/docs/$'
+    | '/docs/datamart'
    | '/docs'
    | '/user/profile'
    | '/user/resetpassword'
@@ -263,6 +285,7 @@ export interface FileRouteTypes {
    | '__root__'
    | '/'
    | '/about'
+    | '/apidocs'
    | '/app-down'
    | '/forbidden'
    | '/(auth)/login'
@@ -273,6 +296,7 @@ export interface FileRouteTypes {
    | '/admin/settings'
    | '/admin/users'
    | '/docs/$'
+    | '/docs/datamart'
    | '/docs/'
    | '/(auth)/user/profile'
    | '/(auth)/user/resetpassword'
@@ -287,6 +311,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AboutRoute: typeof AboutRoute
+  ApidocsRoute: typeof ApidocsRoute
  AppDownRoute: typeof AppDownRoute
  ForbiddenRoute: typeof ForbiddenRoute
  authLoginRoute: typeof authLoginRoute
@@ -297,6 +322,7 @@ export interface RootRouteChildren {
  AdminSettingsRoute: typeof AdminSettingsRoute
  AdminUsersRoute: typeof AdminUsersRoute
  DocsSplatRoute: typeof DocsSplatRoute
+  DocsDatamartRoute: typeof DocsDatamartRoute
  DocsIndexRoute: typeof DocsIndexRoute
  authUserProfileRoute: typeof authUserProfileRoute
  authUserResetpasswordRoute: typeof authUserResetpasswordRoute
@@ -324,6 +350,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppDownRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/apidocs': {
+      id: '/apidocs'
+      path: '/apidocs'
+      fullPath: '/apidocs'
+      preLoaderRoute: typeof ApidocsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/about': {
      id: '/about'
      path: '/about'
@@ -345,6 +378,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof DocsIndexRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/docs/datamart': {
+      id: '/docs/datamart'
+      path: '/docs/datamart'
+      fullPath: '/docs/datamart'
+      preLoaderRoute: typeof DocsDatamartRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/docs/$': {
      id: '/docs/$'
      path: '/docs/$'
@@ -463,6 +503,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AboutRoute: AboutRoute,
+  ApidocsRoute: ApidocsRoute,
  AppDownRoute: AppDownRoute,
  ForbiddenRoute: ForbiddenRoute,
  authLoginRoute: authLoginRoute,
@@ -473,6 +514,7 @@ const rootRouteChildren: RootRouteChildren = {
  AdminSettingsRoute: AdminSettingsRoute,
  AdminUsersRoute: AdminUsersRoute,
  DocsSplatRoute: DocsSplatRoute,
+  DocsDatamartRoute: DocsDatamartRoute,
  DocsIndexRoute: DocsIndexRoute,
  authUserProfileRoute: authUserProfileRoute,
  authUserResetpasswordRoute: authUserResetpasswordRoute,
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -19,8 +19,10 @@ const RootLayout = () => {
 						<div className="relative min-h-[calc(100svh-var(--header-height))]">
 							<AppSidebar />

-							<main className="w-full p-4">
-								<div className="mx-auto w-full max-w-7xl">
+							<main className="w-full">
+								<div className="mx-auto w-full flex justify-center">
+									{" "}
+									{/* className="mx-auto w-full max-w-7xl" use this for dashboards and stuff*/}
 									<Outlet />
 								</div>
 							</main>
@@ -31,7 +33,7 @@ const RootLayout = () => {
 				</SidebarProvider>
 			</ThemeProvider>
 			{session && session.user.role === "systemAdmin" && (
-				<TanStackRouterDevtools />
+				<TanStackRouterDevtools position="bottom-right" />
 			)}
 		</div>
 	);
--- a/frontend/src/routes/admin/servers.tsx
+++ b/frontend/src/routes/admin/servers.tsx
@@ -248,7 +248,7 @@ function RouteComponent() {
 	};
 	//console.log(logs);
 	return (
-		<div className="flex flex-col gap-1">
+		<div className="flex flex-col gap-1 max-w-7xl">
 			<div className="flex gap-1 justify-end">
 				<Button onClick={triggerBuild}>Trigger Build</Button>
 				<Button onClick={() => clearRoom()}>Clear Logs</Button>
--- a/frontend/src/routes/apidocs.tsx
+++ b/frontend/src/routes/apidocs.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/apidocs")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<iframe
+			src="/lst/api/docs"
+			className="h-[calc(100vh-64px)] w-full border-0"
+			title="LST API Docs"
+		/>
+	);
+}
--- a/frontend/src/routes/app-down.tsx
+++ b/frontend/src/routes/app-down.tsx
@@ -26,7 +26,7 @@ function RouteComponent() {
 		router.navigate({ to: redirectPath, replace: true });
 	};
 	return (
-		<div className="flex items-center justify-center bg-background text-foreground">
+		<div className="flex items-center justify-center bg-background text-foreground mt-2">
 			<Card>
 				<CardHeader>
 					<p className="text-2xl">Oops, you shouldn't have done that</p>
--- a/frontend/src/routes/docs/datamart.tsx
+++ b/frontend/src/routes/docs/datamart.tsx
@@ -0,0 +1,17 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/docs/datamart")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="w-full h-[calc(100vh-48px)] overflow-hidden mr-2 ml-2">
+			<iframe
+				className="w-full h-full border-0"
+				title="datamart"
+				src="https://docs.tuffraid.net/share/40lshswjqq/p/logistics-support-tool-docs-g3nuKAZ7Pw"
+			/>
+		</div>
+	);
+}
--- a/frontend/src/routes/transportation/opendock/index.tsx
+++ b/frontend/src/routes/transportation/opendock/index.tsx
@@ -1,18 +1,18 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
+import { Trash } from "lucide-react";
 import { Suspense, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import { Spinner } from "../../../components/ui/spinner";
+import { api } from "../../../lib/apiHelper";
 import { authClient } from "../../../lib/auth-client";
 import { getArticleLinks } from "../../../lib/queries/getArticleLinks";
 import LstTable from "../../../lib/tableStuff/LstTable";
 import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
 import SkellyTable from "../../../lib/tableStuff/SkellyTable";
 import NewArticleLink from "./-components/NewArticleLink";
-import { api } from "../../../lib/apiHelper";
-import { toast } from "sonner";
-import { Button } from "../../../components/ui/button";
-import { Spinner } from "../../../components/ui/spinner";
-import { Trash } from "lucide-react";

 export const Route = createFileRoute("/transportation/opendock/")({
 	beforeLoad: async ({ location }) => {
@@ -97,77 +97,77 @@ const ArticleLinkTable = () => {
 			cell: (i) => i.getValue(),
 		}),
 		columnHelper.accessor("deleteUser", {
-					header: ({ column }) => (
-						<SearchableHeader
-							column={column}
-							title="Delete Link"
-							searchable={false}
-						/>
-					),
-					filterFn: "includesString",
-					cell: (i) => {
-						// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
-						const [activeToggle, setActiveToggle] = useState(false);
-		
-						const onTrigger = async () => {
-							setActiveToggle(true);
-		
-							try {
-								const res = await api.delete(
-									`/opendock/articleCheck/${i.row.original.id}`,
-		
-									{
-										withCredentials: true,
-										timeout: 5000,
-										validateStatus: () => true,
-									},
-								);
-		
-								if (res.data.success) {
-									toast.success(`AV: ${i.row.original.av} was deleted.`);
-									refetch();
-									setActiveToggle(false);
-								}
-		
-								if (!res.data.success) {
-									toast.error(
-										`AV: ${i.row.original.av} encountered an error when trying to delete: ${res.data.message}`,
-									);
-									refetch();
-									setActiveToggle(false);
-								}
-							} catch (error) {
-								setActiveToggle(false);
-								console.error(error);
-							}
-						};
-		
-						return (
-							<div>
-								<div className="flex items-center space-x-2">
-									<Button
-										variant="destructive"
-										disabled={activeToggle}
-										onClick={onTrigger}
-									>
-										{activeToggle ? (
-											<span>
-												<Spinner />
-											</span>
-										) : (
-											<span>
-												<Trash />
-											</span>
-										)}
-									</Button>
-								</div>
-							</div>
+			header: ({ column }) => (
+				<SearchableHeader
+					column={column}
+					title="Delete Link"
+					searchable={false}
+				/>
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
+				const [activeToggle, setActiveToggle] = useState(false);
+
+				const onTrigger = async () => {
+					setActiveToggle(true);
+
+					try {
+						const res = await api.delete(
+							`/opendock/articleCheck/${i.row.original.id}`,
+
+							{
+								withCredentials: true,
+								timeout: 5000,
+								validateStatus: () => true,
+							},
 						);
-					},
-				}),
+
+						if (res.data.success) {
+							toast.success(`AV: ${i.row.original.av} was deleted.`);
+							refetch();
+							setActiveToggle(false);
+						}
+
+						if (!res.data.success) {
+							toast.error(
+								`AV: ${i.row.original.av} encountered an error when trying to delete: ${res.data.message}`,
+							);
+							refetch();
+							setActiveToggle(false);
+						}
+					} catch (error) {
+						setActiveToggle(false);
+						console.error(error);
+					}
+				};
+
+				return (
+					<div>
+						<div className="flex items-center space-x-2">
+							<Button
+								variant="destructive"
+								disabled={activeToggle}
+								onClick={onTrigger}
+							>
+								{activeToggle ? (
+									<span>
+										<Spinner />
+									</span>
+								) : (
+									<span>
+										<Trash />
+									</span>
+								)}
+							</Button>
+						</div>
+					</div>
+				);
+			},
+		}),
 	];
 	return (
-		<div>
+		<div className="">
 			<div>
 				<div className="flex justify-end m-2">
 					<Suspense
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -4,4 +4,10 @@
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
+    "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
--- a/lstMobile/app.json
+++ b/lstMobile/app.json
@@ -15,7 +15,7 @@
        "foregroundImage": "./assets/adaptive-icon-white.png",
        "backgroundColor": "#ffffff"
      },
-      "versionCode": 43,
+      "versionCode": 44,
      "minSupportedVersionCode": 33,
      "predictiveBackGestureEnabled": false,
      "package": "net.alpla.lst.mobile",
--- a/lstMobile/src/lib/tcpScan.ts
+++ b/lstMobile/src/lib/tcpScan.ts
@@ -35,6 +35,14 @@ const ERROR_KEYWORDS = [
 	"delivered",
 	"blocked",
 	"not possible",
+	"forbidden",
+	"loading not",
+	"not",
+	"error",
+	"already",
+	"double",
+	"no",
+	"bad",
 ];

 // function parseErpResponse(buffer: Buffer) {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,112 +1,116 @@
 {
-	"name": "lst_v3",
-	"version": "0.1.0-alpha.3",
-	"description": "The tool that supports us in our everyday alplaprod",
-	"main": "index.js",
-	"scripts": {
-		"test": "dotenvx run -f .env -- vitest",
-		"test:run": "dotenvx run -f .env -- vitest run",
-		"dev": "concurrently -n \"server,frontend\" -c \"#007755, #1F73D1\" \"npm run dev:app\"  \"npm run dev:frontend\"",
-		"dev:app": "dotenvx run -f .env -- tsx watch backend/server.ts",
-		"dev:frontend": "cd frontend && npm run dev",
-		"dev:db:migrate": "npx drizzle-kit push",
-		"dev:db:generate": "tsc && npx drizzle-kit generate --config=drizzle.config.ts",
-		"build": "rimraf dist && npm run dev:db:generate && npm run dev:db:migrate && npm run build:app && npm run build:copySql && npm run build:copyGpSql  && npm run build:emailTemplate && cd frontend && npm run build",
-		"build:app": "tsc",
-		"agent": "powershell -ExecutionPolicy Bypass -File scripts/agentController.ps1",
-		"build:docker": "rimraf dist && npm run build:app && npm run build:copySql && npm run build:copyGpSql  && npm run build:emailTemplate",
-		"build:emailTemplate": "cpy \"backend/utils/mailViews/**/*\" dist/utils/mailViews --parents",
-		"build:copyGpSql": "cpy \"backend/gpSql/queries/**/*\" dist/gpSql/queries --parents",
-		"build:copySql": "cpy \"backend/prodSql/queries/**/*\" dist/prodSql/queries --parents",
-		"lint": "tsc && biome lint",
-		"start": "npm run start:server",
-		"start:server": "dotenvx run -f .env -- node dist/server.js",
-		"start:docker": "node dist/server.js",
-		"version": "changeset version",
-		"specCheck": "node scripts/check-route-specs.mjs",
-		"commit": "cz",
-		"release": "npm run build && commit-and-tag-version",
-		"build:apk": "cd lstMobile && expo prebuild --clean && cd android && gradlew.bat assembleRelease "
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://git.tuffraid.net/cowch/lst_v3.git"
-	},
-	"keywords": [],
-	"author": "",
-	"license": "ISC",
-	"type": "module",
-	"devDependencies": {
-		"@biomejs/biome": "2.4.8",
-		"@commitlint/cli": "^20.5.0",
-		"@commitlint/config-conventional": "^20.5.0",
-		"@types/archiver": "^7.0.0",
-		"@types/cors": "^2.8.19",
-		"@types/express": "^5.0.6",
-		"@types/morgan": "^1.9.10",
-		"@types/mssql": "^9.1.9",
-		"@types/multer": "^2.1.0",
-		"@types/net-snmp": "^3.23.0",
-		"@types/node": "^25.5.0",
-		"@types/nodemailer": "^7.0.11",
-		"@types/nodemailer-express-handlebars": "^4.0.6",
-		"@types/pg": "^8.18.0",
-		"@types/supertest": "^7.2.0",
-		"@types/swagger-jsdoc": "^6.0.4",
-		"@types/swagger-ui-express": "^4.1.8",
-		"commit-and-tag-version": "^12.7.1",
-		"commitizen": "^4.3.1",
-		"cpy-cli": "^7.0.0",
-		"cz-conventional-changelog": "^3.3.0",
-		"npm-check-updates": "^19.6.5",
-		"openapi-types": "^12.1.3",
-		"supertest": "^7.2.2",
-		"ts-node-dev": "^2.0.0",
-		"tsx": "^4.21.0",
-		"typescript": "^5.9.3",
-		"vitest": "^4.1.8"
-	},
-	"dependencies": {
-		"@dotenvx/dotenvx": "^1.57.0",
-		"@scalar/express-api-reference": "^0.9.4",
-		"@socket.io/admin-ui": "^0.5.1",
-		"archiver": "^7.0.1",
-		"axios": "^1.13.6",
-		"bcryptjs": "^3.0.3",
-		"better-auth": "^1.5.5",
-		"chokidar": "^5.0.0",
-		"concurrently": "^9.2.1",
-		"cors": "^2.8.6",
-		"croner": "^10.0.1",
-		"date-fns": "^4.1.0",
-		"date-fns-tz": "^3.2.0",
-		"drizzle-kit": "^0.31.10",
-		"drizzle-orm": "^0.45.1",
-		"drizzle-zod": "^0.8.3",
-		"excel-date-to-js": "^1.1.5",
-		"express": "^5.2.1",
-		"husky": "^9.1.7",
-		"ldapts": "^8.1.7",
-		"modbus-serial": "^8.0.25",
-		"morgan": "^1.10.1",
-		"mssql": "^12.2.1",
-		"multer": "^2.1.1",
-		"net-snmp": "^3.26.1",
-		"nodemailer": "^8.0.3",
-		"nodemailer-express-handlebars": "^7.0.0",
-		"pg": "^8.20.0",
-		"pino": "^10.3.1",
-		"pino-pretty": "^13.1.3",
-		"postgres": "^3.4.8",
-		"powershell": "^2.3.3",
-		"socket.io": "^4.8.3",
-		"socket.io-client": "^4.8.3",
-		"xlsx": "^0.18.5",
-		"zod": "^4.3.6"
-	},
-	"config": {
-		"commitizen": {
-			"path": "cz-conventional-changelog"
-		}
-	}
+    "name": "lst_v3",
+    "version": "0.1.0-alpha.4",
+    "build": "181",
+    "lastBuildDate": "6/22/2026 06:50",
+    "description": "The tool that supports us in our everyday alplaprod",
+    "main": "index.js",
+    "scripts": {
+        "test": "dotenvx run -f .env -- vitest",
+        "test:run": "dotenvx run -f .env -- vitest run",
+        "dev": "concurrently -n \"server,frontend\" -c \"#007755, #1F73D1\" \"npm run dev:app\"  \"npm run dev:frontend\"",
+        "dev:app": "dotenvx run -f .env -- tsx watch backend/server.ts",
+        "dev:frontend": "cd frontend && npm run dev",
+        "dev:db:migrate": "npx drizzle-kit push",
+        "dev:db:generate": "tsc && npx drizzle-kit generate --config=drizzle.config.ts",
+        "build": "rimraf dist && npm run dev:db:generate && npm run dev:db:migrate && npm run build:app && npm run build:copySql && npm run build:copyGpSql  && npm run build:emailTemplate && cd frontend && npm run build",
+        "build:app": "tsc",
+        "agent": "powershell -ExecutionPolicy Bypass -File scripts/agentController.ps1",
+        "build:docker": "rimraf dist && npm run build:app && npm run build:copySql && npm run build:copyGpSql  && npm run build:emailTemplate",
+        "build:emailTemplate": "cpy \"backend/utils/mailViews/**/*\" dist/utils/mailViews --parents",
+        "build:copyGpSql": "cpy \"backend/gpSql/queries/**/*\" dist/gpSql/queries --parents",
+        "build:copySql": "cpy \"backend/prodSql/queries/**/*\" dist/prodSql/queries --parents",
+        "lint": "tsc && biome lint",
+        "start": "npm run start:server",
+        "start:server": "dotenvx run -f .env -- node dist/server.js",
+        "start:docker": "node dist/server.js",
+        "version": "changeset version",
+        "specCheck": "node scripts/check-route-specs.mjs",
+        "commit": "cz",
+        "release": "npm run build && commit-and-tag-version",
+        "build:apk": "cd lstMobile && expo prebuild --clean && cd android && gradlew.bat assembleRelease "
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://git.tuffraid.net/cowch/lst_v3.git"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "type": "module",
+    "devDependencies": {
+        "@biomejs/biome": "2.4.8",
+        "@commitlint/cli": "^20.5.0",
+        "@commitlint/config-conventional": "^20.5.0",
+        "@types/archiver": "^7.0.0",
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/morgan": "^1.9.10",
+        "@types/mssql": "^9.1.9",
+        "@types/multer": "^2.1.0",
+        "@types/net-snmp": "^3.23.0",
+        "@types/node": "^25.5.0",
+        "@types/nodemailer": "^7.0.11",
+        "@types/nodemailer-express-handlebars": "^4.0.6",
+        "@types/pg": "^8.18.0",
+        "@types/supertest": "^7.2.0",
+        "@types/swagger-jsdoc": "^6.0.4",
+        "@types/swagger-ui-express": "^4.1.8",
+        "commit-and-tag-version": "^12.7.1",
+        "commitizen": "^4.3.1",
+        "cpy-cli": "^7.0.0",
+        "cz-conventional-changelog": "^3.3.0",
+        "npm-check-updates": "^19.6.5",
+        "openapi-types": "^12.1.3",
+        "supertest": "^7.2.2",
+        "ts-node-dev": "^2.0.0",
+        "tsx": "^4.21.0",
+        "typescript": "^5.9.3",
+        "vitest": "^4.1.8"
+    },
+    "dependencies": {
+        "@dotenvx/dotenvx": "^1.57.0",
+        "@scalar/express-api-reference": "^0.9.20",
+        "@socket.io/admin-ui": "^0.5.1",
+        "archiver": "^7.0.1",
+        "axios": "^1.13.6",
+        "bcryptjs": "^3.0.3",
+        "better-auth": "^1.5.5",
+        "chokidar": "^5.0.0",
+        "concurrently": "^9.2.1",
+        "cors": "^2.8.6",
+        "croner": "^10.0.1",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "drizzle-kit": "^0.31.10",
+        "drizzle-orm": "^0.45.1",
+        "drizzle-zod": "^0.8.3",
+        "excel-date-to-js": "^1.1.5",
+        "express": "^5.2.1",
+        "http-proxy-middleware": "^4.1.1",
+        "husky": "^9.1.7",
+        "ldapts": "^8.1.7",
+        "modbus-serial": "^8.0.25",
+        "morgan": "^1.10.1",
+        "mssql": "^12.2.1",
+        "multer": "^2.1.1",
+        "net-snmp": "^3.26.1",
+        "nodemailer": "^8.0.3",
+        "nodemailer-express-handlebars": "^7.0.0",
+        "pg": "^8.20.0",
+        "pino": "^10.3.1",
+        "pino-pretty": "^13.1.3",
+        "postgres": "^3.4.8",
+        "powershell": "^2.3.3",
+        "socket.io": "^4.8.3",
+        "socket.io-client": "^4.8.3",
+        "xlsx": "^0.18.5",
+        "zod": "^4.3.6",
+        "zod-openapi": "^6.0.0"
+    },
+    "config": {
+        "commitizen": {
+            "path": "cz-conventional-changelog"
+        }
+    }
 }
--- a/scripts/updateServer.ps1
+++ b/scripts/updateServer.ps1
@@ -31,24 +31,32 @@ function Update-Server {
        [string]$Server,
        [string]$Token
    )
-    $buildFile = Join-Path $AppDir ".buildNumber"
+    
+    $buildFile = Join-Path $AppDir "package.json"
    $BuildNumber = 1
    $BuildFolder = Join-Path $AppDir "builds"

-    if (Test-Path $BuildFile) {
-        $content = Get-Content $BuildFile | Select-Object -First 1
-        $num = $content.Trim() -as [int]  # safe cast
+    $packageJson = Get-Content $buildFile -Raw | ConvertFrom-Json
+        
+        # Extract the .build property and cast it safely to an integer
+        $num = "$($packageJson.version).$(([int]$packageJson.build) -1)" 
+    # if (Test-Path $BuildFile) {
+    #     # Parse the entire JSON file into a PowerShell object
+    #     $packageJson = Get-Content $buildFile -Raw | ConvertFrom-Json
+        
+    #     # Extract the .build property and cast it safely to an integer
+    #     $num = "($packageJson.version).($packageJson.build)" 

-        if ($num) {
-            $BuildNumber = $num + 1
-        }
-        else {
-            $BuildNumber = 1
-        }
-    }
+    #     if ($null -ne $num) {
+    #         $BuildNumber = $num + 1
+    #     }
+    #     else {
+    #         $BuildNumber = 1
+    #     }
+    # }

    # Get The current Build we have zipped up
-    $BuildNumber = ([int]$BuildNumber - 1).ToString()
+    $BuildNumber = $num


    # copy the latest build over
--- a/tsconfig.json.bak
+++ b/tsconfig.json.bak
@@ -1,41 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"module": "NodeNext",
-		"moduleResolution": "nodenext",
-		"strict": true,
-		"verbatimModuleSyntax": true,
-		"types": ["node", "better-auth"],
-		"jsx": "react-jsx",
-		"outDir": "./dist",
-		"removeComments": true,
-		"allowJs": false,
-		"rootDir": "./backend",
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true,
-		"noUncheckedIndexedAccess": true,
-		"exactOptionalPropertyTypes": true,
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["backend/*"],
-			"@features/*": ["backend/features/*"],
-			"@shared/*": ["backend/shared/*"],
-			"@config/*": ["backend/config/*"]
-		},
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		//"allowImportingTsExtensions": true,
-		"noEmit": false
-	},
-	"include": ["backend/**/*"],
-	"exclude": [
-		"node_modules",
-		"frontend",
-		"dist",
-		"lstDocs",
-		"database/testFiles",
-		"scripts"
-	]}
Author	SHA1	Message	Date
Blake Matthes	6f54f7dc16	chore(release): 0.1.0-alpha.4 All checks were successful Build and Push LST Docker Image / docker (push) Successful in 3m49s Details Release and Build Image / release (push) Successful in 1m12s Details	2026-06-23 14:26:17 -05:00
Blake Matthes	19ae01afe4	build(mobile): build file missed All checks were successful Build and Push LST Docker Image / docker (push) Successful in 2m28s Details	2026-06-23 14:24:52 -05:00
Blake Matthes	4eef8fa418	refactor(frontend): changed the style to be boxy and like ccc	2026-06-23 14:24:33 -05:00
Blake Matthes	eea5780bb6	refactor(demand mgt): new setting to make the time more dynamic	2026-06-23 14:24:09 -05:00
Blake Matthes	263c7095a8	feat(ccc): added in forwarder to the ccc, currently always sending there	2026-06-23 14:23:43 -05:00
Blake Matthes	bc4728a156	fix(mobile): save missed on commit All checks were successful Build and Push LST Docker Image / docker (push) Successful in 2m47s Details this is for the errors and the file didnt save or show saved before last commit ref #32 ref #31	2026-06-22 06:22:57 -05:00
Blake Matthes	fd596ab194	fix(mobile): added in more error handling key words and put a little more generic as well All checks were successful Build and Push LST Docker Image / docker (push) Successful in 2m33s Details	2026-06-22 06:12:00 -05:00
Blake Matthes	3e8417dcff	refactor(builds): refactored the build process to hold in the build info plus version All checks were successful Build and Push LST Docker Image / docker (push) Successful in 3m54s Details	2026-06-18 13:51:17 -05:00
Blake Matthes	1b1918dcd0	refactor(builds): refactored how the builds works to include the build number now this will be for the new lst - ccc	2026-06-17 10:34:53 -05:00
Blake Matthes	4ff10dfcb2	test(dm): repost test All checks were successful Build and Push LST Docker Image / docker (push) Successful in 1m39s Details Checking why comments do not post correctly ref #31	2026-06-17 01:50:25 -05:00
Blake Matthes	9a0bb18c5b	feat(dm): added in a repost incase we wanted do this instead of reuploading the file All checks were successful Build and Push LST Docker Image / docker (push) Successful in 2m34s Details ref #31	2026-06-17 01:44:15 -05:00
Blake Matthes	1838c6f1e9	docs(readme): updated readme with actaul install	2026-06-17 01:39:00 -05:00
Blake Matthes	3a24d62957	refactor(api docks): added api docks back into the front end and prep for docusorus All checks were successful Build and Push LST Docker Image / docker (push) Successful in 2m15s Details	2026-06-16 18:53:44 -05:00
Blake Matthes	6a14bab30c	refactor(psi): rebuilt the delivery and planning data to 2.0 data	2026-06-16 18:52:58 -05:00
Blake Matthes	2ebf695526	fix(builds): fixed non used variables All checks were successful Build and Push LST Docker Image / docker (push) Successful in 1m32s Details	2026-06-15 17:16:29 -05:00
Blake Matthes	24af3ca403	fix(datamart): somereason it stopped working.. and added download types there was a weird issue with the req.query that cause nothing to pull and make the excel files lag..... now excel macros are using the csv pull from here and added in the xlsx to download to bc why not makes it easier for later and can have bbuttons for every thing in lst too :D	2026-06-15 17:16:00 -05:00
Blake Matthes	6fbe3a9eed	chore(format): formatting changes	2026-06-15 17:14:05 -05:00