chore(release): 0.1.0-alpha.4

this is for the errors and the file didnt save or show saved before last commit

ref #32 ref #31

CHANGELOG.md

@@ -1,5 +1,135 @@
 # 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)
+
+
+### 🌟 Enhancements
+
+* **eom:** migrated eom endpoints from old version validated working ([e909e8d](https://git.tuffraid.net/cowch/lst_v3/commits/e909e8deecb54a3e4c39789609b0aa7435b9e08a))
+* **mobile:** added auto download of latest ([6d0fb8a](https://git.tuffraid.net/cowch/lst_v3/commits/6d0fb8aee45c8b5c56ccd7d8a010e1dc803408bf))
+* **mobile:** dock door scanning backend added ([fe0b157](https://git.tuffraid.net/cowch/lst_v3/commits/fe0b1573f3ba6fd220f181088b994588c52af139)), closes [#12](https://git.tuffraid.net/cowch/lst_v3/issues/12)
+* **opendock:** added delete button in the article tab ([4464cea](https://git.tuffraid.net/cowch/lst_v3/commits/4464cea022ba48744b884b83fef0fc3f3421dea5)), closes [#23](https://git.tuffraid.net/cowch/lst_v3/issues/23)
+* **opendock:** added in a new article link system ([bb7931d](https://git.tuffraid.net/cowch/lst_v3/commits/bb7931d6c8d0f5ce4065955491e9ee1247b5e92d))
+* **warehousing:** ppoo monitoring added ([8b07694](https://git.tuffraid.net/cowch/lst_v3/commits/8b076949a7f8e723bc87619f729082d2c1991b2d)), closes [#13](https://git.tuffraid.net/cowch/lst_v3/issues/13)
+
+
+### 🐛 Bug fixes
+
+* **app:** type in the templates... they all looked the same ([2a648f6](https://git.tuffraid.net/cowch/lst_v3/commits/2a648f63064a300b0a2888bae3322b857af6a238))
+* **dock door scanning:** correction to how the data is posted ([2f49573](https://git.tuffraid.net/cowch/lst_v3/commits/2f495739e653c462eff7f10ff6343d9572f25563))
+* **dockscanner:** removed console log ([4249e90](https://git.tuffraid.net/cowch/lst_v3/commits/4249e90307ba1a1992753803e1dc3ab7dd7ac95e))
+* **eom:** removed un needed imports ([05c553e](https://git.tuffraid.net/cowch/lst_v3/commits/05c553e9279c6e8384d61073781bf915733b0ab5))
+* **logistics:** historical checks for no data errors when feature is activeed ([4f848bb](https://git.tuffraid.net/cowch/lst_v3/commits/4f848bb649f350c9d370daa09c6fc48f7b76e2e2))
+* **mobile users:** corrected and endpoint that prevented us from change the pin number ([347edb7](https://git.tuffraid.net/cowch/lst_v3/commits/347edb7078fb4ce959975cd968a6f026bacc98bf))
+* **mobile:** scan log incorrect user ref ([9c0ef1f](https://git.tuffraid.net/cowch/lst_v3/commits/9c0ef1f5dfa13e8f7e1f72d47d0d5842b3da3c87))
+* **mobile:** temp removed the autodownload as its causing issues ([3ef0f23](https://git.tuffraid.net/cowch/lst_v3/commits/3ef0f230ddbaef4c3d738cc531e7afee25b210dd))
+* **mobile:** ui over lapping ([db28635](https://git.tuffraid.net/cowch/lst_v3/commits/db28635c8c260d0f378e109755d32201acdb2328)), closes [#25](https://git.tuffraid.net/cowch/lst_v3/issues/25)
+* **notifications:** missed api converstion in the front end for updating ([5281118](https://git.tuffraid.net/cowch/lst_v3/commits/52811185965cb0fe4c9b42e73c447b67e917a5ca))
+* **opendock:** changed the header of delete to be properly named ([865f280](https://git.tuffraid.net/cowch/lst_v3/commits/865f280cfaf82a7126ca4b57d658aed50cf19a73)), closes [#23](https://git.tuffraid.net/cowch/lst_v3/issues/23)
+* **opendock:** correction to article link success on delete ([a717260](https://git.tuffraid.net/cowch/lst_v3/commits/a717260b8d5cf72534b055721de2b79901506875)), closes [#23](https://git.tuffraid.net/cowch/lst_v3/issues/23)
+* **opendock:** ref wrong field oops ([f635415](https://git.tuffraid.net/cowch/lst_v3/commits/f635415b751e11d0e7beb557d18b83915155428a))
+* **scanner:** corrected teh endpoint to delete the user if needed ([6dd1a5b](https://git.tuffraid.net/cowch/lst_v3/commits/6dd1a5b332a853f0e2c7226ac1f64e403ef752d7))
+
+
+### 📚 Documentation
+
+* **app:** updated last updated to the readme to show current progress ([78f7b8a](https://git.tuffraid.net/cowch/lst_v3/commits/78f7b8a179d078fc1b2740fd2bf4af71a3df8292))
+* **app:** updated readme ([1a3d8a7](https://git.tuffraid.net/cowch/lst_v3/commits/1a3d8a7ddcb7a2e51da4b77968ffdefb7644a0b1))
+
+
+### 🛠️ Code Refactor
+
+* **backend:** dock door scanning socket and perms ([f8335f5](https://git.tuffraid.net/cowch/lst_v3/commits/f8335f5217c339a7dc09883fa8ba9c60aa4c35b1))
+* **datamart:** if added to query will include plant token now ([7d722c4](https://git.tuffraid.net/cowch/lst_v3/commits/7d722c4aac16bc1d2cfbfbc70539783f34003f77))
+* **db:** added in notifications vs pulling from the db makes it easier on the system ([706ab8b](https://git.tuffraid.net/cowch/lst_v3/commits/706ab8b448aafb81da94a76fbf8d3d400cba616b))
+* **db:** added timezone check in so it comes over correct based on the backend timezone ([2558b2e](https://git.tuffraid.net/cowch/lst_v3/commits/2558b2e5bb68be7a3f46de09bb509c99423adeb6))
+* **dock door scanning:** fixes and final writes for the intial trial went smooth ([86e1237](https://git.tuffraid.net/cowch/lst_v3/commits/86e1237509b81722dee7b42762d0bfced8d26fa3))
+* **dock scanner:** more work on dock scanner and semi finished ([6eaae0f](https://git.tuffraid.net/cowch/lst_v3/commits/6eaae0f5378e39c4002dadd8325833698dd960e7))
+* **dockscanning:** more work on the dock door scanning ([7671172](https://git.tuffraid.net/cowch/lst_v3/commits/7671172d975355b5d245a482b481726b49153578)), closes [#12](https://git.tuffraid.net/cowch/lst_v3/issues/12)
+* **logger:** included error in the stack version so we dont have to remove it all ([da87e2e](https://git.tuffraid.net/cowch/lst_v3/commits/da87e2e1d322a45ca9a7b500d77499fe4c7b999e))
+* **logs:** refactored to show the submodule and stack as well to make it more easy to watch ([45a0dee](https://git.tuffraid.net/cowch/lst_v3/commits/45a0dee9caae14df639439b905fa81b340791197))
+* **logs:** socket io setup to be properly logging ([9ff428f](https://git.tuffraid.net/cowch/lst_v3/commits/9ff428f5ea1051e62521632947092f74eb93944d))
+* **mobile:** intial addin of dockdoor scanning on mobile ([2a35381](https://git.tuffraid.net/cowch/lst_v3/commits/2a35381fe400fc46e6f10c4e72c3ab9ac435e0e5))
+* **mobile:** moved logout to the tab bar ([bcdf956](https://git.tuffraid.net/cowch/lst_v3/commits/bcdf9566bcf721a085f46ce3befe783eb7b91949))
+* **mobile:** new error found and added in ([7bbdd4e](https://git.tuffraid.net/cowch/lst_v3/commits/7bbdd4e5552889434aff81ed10ea7c64174f7d34))
+* **mobile:** setup - added button to go home as it caused confustion ([c15ee07](https://git.tuffraid.net/cowch/lst_v3/commits/c15ee070e7057ad8a5e3d42f51c230d680db9e21))
+* **new role:** added in warehouse role ([55418e2](https://git.tuffraid.net/cowch/lst_v3/commits/55418e2f098193b0891129a19532608dce2abd9c))
+* **opend dock:** added in default dock so it uses the default setup as a backup ([8fc3129](https://git.tuffraid.net/cowch/lst_v3/commits/8fc3129f7d687d45dc242aca9a6e71f43d0352ab))
+* **opendock:** added in check for really using the article link ([cfc497c](https://git.tuffraid.net/cowch/lst_v3/commits/cfc497c1f2254dc12a6e7bb15cfc0dce2a64c1e6))
+* **opendock:** added in proper complete and ignore of picksheets ([3ad84da](https://git.tuffraid.net/cowch/lst_v3/commits/3ad84dab71ceea081efc824e97d075c6f33807ad))
+* **opendock:** added some new goodies to the app to help manage releases ([c0a7d4a](https://git.tuffraid.net/cowch/lst_v3/commits/c0a7d4a1252e3f14240d14288a3ac4add44a6463))
+* **opendock:** changed the article to look at the label to match all plants ([a2d9a6c](https://git.tuffraid.net/cowch/lst_v3/commits/a2d9a6c127cae3b6dc5beb1a996558ab1383fa8c))
+* **opendock:** changed the subModule for better logging ([7c4c5f9](https://git.tuffraid.net/cowch/lst_v3/commits/7c4c5f980a15e13e2a43a8583a652622370ec1dd))
+* **opendock:** if load type is drop we will not do anything unless its already scanned ([5a7046b](https://git.tuffraid.net/cowch/lst_v3/commits/5a7046bacd9323627a37c89d7a9a329383e8b1be))
+* **server builds:** added in proper logging will still need fine tuned though ([15c939e](https://git.tuffraid.net/cowch/lst_v3/commits/15c939ebe8b808b3a9a46a4c1e62fb0488d3649b))
+* **servers:** all remaining servers added ([5f2148f](https://git.tuffraid.net/cowch/lst_v3/commits/5f2148f5f0f7688cf71e1dad99d4a5f6c34241dd))
+* **socket.io:** complete rewrite to manage dynamic rooms and seeding better ([9440b44](https://git.tuffraid.net/cowch/lst_v3/commits/9440b44f3bb1842d0e6ffc479d340ae9c5b84656))
+* **socketio:** changes that if we are in dock room to constant reseed the room ([8fcb2c6](https://git.tuffraid.net/cowch/lst_v3/commits/8fcb2c66ed25c746dc1d63c5290e11fe6a56328e))
+* **times:** added a better view for times as we save all db as there respective timezone ([40edbc3](https://git.tuffraid.net/cowch/lst_v3/commits/40edbc3eae9000afea447f81ec127884712b38da))
+* **warehouse:** fixed ppoo check to match the new changes ([2e460c7](https://git.tuffraid.net/cowch/lst_v3/commits/2e460c7f8aeb7de1d641c42357001704a4d8d8b2))
+
+
+### 📝 Testing Code
+
+* **test:** added in vitest to start doing more testing before deploying ([e6b92ae](https://git.tuffraid.net/cowch/lst_v3/commits/e6b92aeb109394691dd2a7d548ddadd02769a159))
+
+
+### 📈 Project changes
+
+* **app:** added more labels to the templates ([69a9a81](https://git.tuffraid.net/cowch/lst_v3/commits/69a9a81a889aca010ec8835ffab7084f7cd4a9b0))
+* **app:** changed the issues templates to be easier to add to the part of the app needed ([188fdd0](https://git.tuffraid.net/cowch/lst_v3/commits/188fdd0eb7c6bedf52ae1dcc9109a0fdbe969a21))
+
 ## [0.1.0-alpha.2](https://git.tuffraid.net/cowch/lst_v3/compare/v0.1.0-alpha.1...v0.1.0-alpha.2) (2026-05-23)
 
 

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
+npm run install --omit=dev
-cd lst_v3
-npm install
 ```
 
-Rename the .env-example to .env
+Next we want to do an initial db
-
-Update all the fields 
 
 ```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"
 ```

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")),

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

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 pl.ArticleHumanReadableId IN (${data.options.articles})`
-							: "--and p.IdArtikelvarianten in ([articles])",
+							: "--and pl.ArticleHumanReadableId IN ([articles])",
 					);
 				break;
 			default:

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",

backend/db/schema/forecastImports.schema.ts

@@ -0,0 +1,22 @@
+import { jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import type { z } from "zod";
+
+export const forecastImport = pgTable("forecast_import", {
+	id: uuid("id").defaultRandom().primaryKey(),
+	receivingPlantId: text("receiving_plant_id").notNull(),
+	documentName: text("documentName"),
+	sender: text("sender"),
+	customerId: text("customer_id"),
+	rawData: jsonb("raw_data").default([]),
+	add_date: timestamp("add_date", { withTimezone: true }).defaultNow(),
+	add_user: text("add_user").default("lst-system"),
+	upd_date: timestamp("upd_date", { withTimezone: true }).defaultNow(),
+	upd_user: text("upd_user").default("lst-system"),
+});
+
+export const forecastImportSchema = createSelectSchema(forecastImport);
+export const newForecastImportSchema = createInsertSchema(forecastImport);
+
+export type ForecastImport = z.infer<typeof forecastImportSchema>;
+export type NeworecastImport = z.infer<typeof newForecastImportSchema>;

backend/dockdoorScanning/dockdoor.loadUnits.ts

@@ -27,6 +27,7 @@ const postScan = async (data: any) => {
 				loadingUnit: data.loadingUnit.sscc ?? data.loadingUnit.runningNo, // can be running number or sscc depending on where it came from
 				loadingUnitStatus: data.loadingUnitStatus, // TODO: add enums on the status of each load.
 				message: data.message, // the response it gave when scanning
+				status: data.status ?? undefined,
 			})
 			.returning()) as any;
 
@@ -76,6 +77,7 @@ const loadUnit = async (data: Data) => {
 			loadingUnitStatus: "notLoaded",
 			message:
 				"There are know current active loading orders please start one and try again.",
+			status: "error",
 		});
 		return returnFunc({
 			success: true,
@@ -86,7 +88,6 @@ const loadUnit = async (data: Data) => {
 				"There are know current active loading orders please start one and try again.",
 			data: [],
 			notify: false,
-			room: `dockDoorLoading:${data.dockId}`,
 		});
 	}
 	// check if its a valids an sscc
@@ -99,6 +100,7 @@ const loadUnit = async (data: Data) => {
 			loadingUnitStatus: "noread",
 			message:
 				"Failed to load the unit to the truck, there was no pallet read.",
+			status: "error",
 		});
 
 		return returnFunc({
@@ -110,7 +112,6 @@ const loadUnit = async (data: Data) => {
 				"Failed to load the unit to the truck, there was no pallet read.",
 			data: [],
 			notify: false,
-			room: `dockDoorLoading:${data.dockId}`,
 		});
 	}
 
@@ -137,6 +138,7 @@ const loadUnit = async (data: Data) => {
 				loadingUnit: unitToScan,
 				loadingUnitStatus: "notLoaded",
 				message: prod?.data.errors[0].message,
+				status: "error",
 			});
 
 			return returnFunc({

backend/dockdoorScanning/dockdoor.socket.seed.ts

@@ -12,7 +12,9 @@ export const getRecentDockScans = ({
 		where: (scans, { and, eq }) =>
 			and(
 				eq(scans.status, "active"),
-				loadingOrder ? eq(scans.loadingOrder, loadingOrder) : undefined,
+				loadingOrder
+					? eq(scans.loadingOrder, loadingOrder)
+					: eq(scans.loadingOrder, "0"),
 			),
 		orderBy: (scans, { desc }) => [desc(scans.upd_date)],
 		limit,

backend/logistics/logistics.dm.forecast.map.abbott.ts

@@ -0,0 +1,92 @@
+import XLSX from "xlsx";
+import { excelDateStuff } from "../utils/excelToDate.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+export const abbottForecast = async (sheet: any, user: any) => {
+	/*
+	This is the forecast but will only be triggered when the actual sheet is passed over from the orders in. this is being done this way due to the truck list being sent over as well.
+	*/
+	const customerId = 8;
+	const posting: any = [];
+
+	const customHeaders = [
+		"date",
+		"time",
+		"newton8oz",
+		"newton10oz",
+		"E",
+		"F",
+		"fDate",
+		"f8ozqty",
+		"I",
+		"J",
+		"K",
+		"L",
+		"M",
+		"f10ozqty",
+	];
+	const forecastData = XLSX.utils.sheet_to_json(sheet, {
+		range: 5, // Start at row 5 (index 4)
+		header: customHeaders,
+		defval: "", // Default value for empty cells
+	});
+
+	for (let i = 1; i < forecastData.length; i++) {
+		const row: any = forecastData[i];
+		//console.log(row);
+		//if (row.fDate == undefined) continue;
+
+		if (row.fDate !== "") {
+			const date = isNaN(row.fDate)
+				? new Date(row.fDate)
+				: excelDateStuff(row.fDate);
+			// for 8oz do
+			if (row.f8ozqty > 0) {
+				posting.push({
+					customerArticleNo: "45300DA",
+					quantity: row.f8ozqty,
+					requirementDate: date,
+				});
+			}
+
+			if (row.f10ozqty > 0) {
+				posting.push({
+					customerArticleNo: "43836DA",
+					quantity: row.f10ozqty,
+					requirementDate: date,
+				});
+			}
+		}
+	}
+	// the predefined data that will never change
+	const predefinedObject = {
+		receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+		documentName: `ForecastFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		customerId: customerId,
+		positions: [],
+	};
+
+	// add the new forecast to the predefined data
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		positions: [...predefinedObject.positions, ...posting],
+	};
+
+	const forecast: any = await postData(
+		{
+			type: "forecast",
+			endpoint: "/public/v1.0/DemandManagement/DELFOR",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		success: forecast.success,
+		message: forecast.message,
+		data: forecast.data,
+	};
+};

backend/logistics/logistics.dm.forecast.map.energizer.ts

@@ -0,0 +1,86 @@
+import XLSX from "xlsx";
+import { excelDateStuff } from "../utils/excelToDate.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+export const energizerForecast = async (data: any, user: any) => {
+	/**
+	 * Post a standard forecast based on the standard template.
+	 */
+	const buffer = Buffer.from(data.buffer);
+
+	const workbook = XLSX.read(buffer, { type: "buffer" });
+
+	const sheet: any = workbook.Sheets.Sheet1;
+	// const range = XLSX.utils.decode_range(sheet["!ref"]);
+
+	// const headers = [
+	// 	"CustomerArticleNumber",
+	// 	"Quantity",
+	// 	"RequirementDate",
+	// 	"CustomerID",
+	// ];
+
+	// formatting the data
+	const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 }) as any;
+
+	const posting: any = [];
+	const customerId = 44;
+
+	for (let i = 1; i < rows.length; i++) {
+		const row: any = rows[i];
+		const material = row[0];
+
+		if (material === undefined) continue;
+		for (let j = 1; j < row.length; j++) {
+			const qty = row[j];
+
+			if (qty && qty > 0) {
+				const requirementDate = rows[0][j]; // first row is dates
+				const date = Number.isNaN(requirementDate)
+					? new Date(requirementDate)
+					: excelDateStuff(requirementDate);
+
+				posting.push({
+					customerArticleNo: material,
+					quantity: qty,
+					requirementDate: date,
+				});
+			}
+		}
+	}
+
+	//console.log(posting);
+
+	// the predefined data that will never change
+	const predefinedObject = {
+		receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+		documentName: `ForecastFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		customerId: customerId,
+		positions: [],
+	};
+
+	// add the new forecast to the predefined data
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		positions: [...predefinedObject.positions, ...posting],
+	};
+
+	//post it
+	const forecastData: any = await postData(
+		{
+			type: "forecast",
+			endpoint: "/public/v1.0/DemandManagement/DELFOR",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		success: forecastData.success,
+		message: forecastData.message,
+		data: forecastData.data,
+	};
+};

backend/logistics/logistics.dm.forecast.map.loreal.ts

@@ -0,0 +1,245 @@
+import { addDays } from "date-fns";
+import XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.js";
+import {
+	type SqlQuery,
+	sqlQuerySelector,
+} from "../prodSql/prodSqlQuerySelector.utils.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+//import { sendEmail } from "../utils/sendEmail.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+const customerID = 4;
+export const lorealForecast = async (data: any, user: any) => {
+	/**
+	 * Post a standard forecast based on the standard template.
+	 */
+
+	const buffer = Buffer.from(data.buffer);
+
+	const workbook = XLSX.read(buffer, { type: "buffer" });
+
+	const sheet: any = workbook.Sheets["Alpla HDPE"];
+	const range = XLSX.utils.decode_range(sheet["!ref"]);
+
+	const psheet: any = workbook.Sheets["Alpla PET"];
+	const prange = XLSX.utils.decode_range(psheet["!ref"]);
+
+	const headers = [];
+	for (let C = range.s.c; C <= range.e.c; ++C) {
+		const cellAddress = XLSX.utils.encode_cell({ r: 1, c: C }); // row 0 = Excel row 1
+		const cell = sheet[cellAddress];
+		headers.push(cell ? cell.v : undefined);
+	}
+
+	const pheaders = [];
+	for (let C = prange.s.c; C <= prange.e.c; ++C) {
+		const cellAddress = XLSX.utils.encode_cell({ r: 1, c: C }); // row 0 = Excel row 1
+		const cell = psheet[cellAddress];
+		pheaders.push(cell ? cell.v : undefined);
+	}
+
+	const ebmForeCastData: any = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 3,
+	});
+
+	const petForeCastData: any = XLSX.utils.sheet_to_json(psheet, {
+		defval: "",
+		header: pheaders,
+		range: 3,
+	});
+
+	const ebmForecastData: any = [];
+	const missingSku: any = [];
+
+	const avSQLQuery = sqlQuerySelector(`datamart.activeArticles`) as SqlQuery;
+
+	if (!avSQLQuery.success) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "forecast",
+			message: `Error getting Article info`,
+			data: [avSQLQuery.message],
+			notify: true,
+		});
+	}
+
+	const { data: a, error: ae } = await tryCatch(
+		runDatamartQuery({ name: "activeArticles", options: {} }),
+	);
+
+	if (ae) {
+		return {
+			success: false,
+			message: "Error getting active av",
+			data: [],
+		};
+	}
+
+	const article: any = a?.data;
+
+	//console.log(article);
+
+	// process the ebm forcast
+	for (let i = 0; i < ebmForeCastData.length; i++) {
+		// bottle code
+		const sku = ebmForeCastData[i]["HDPE Bottle Code"];
+
+		// ignore the blanks
+		if (sku === "") continue;
+
+		// ignore zero qty
+		// if (ebmForeCastData[i][`Day ${i}`]) continue;
+
+		for (let f = 0; f <= 90; f++) {
+			const day = `Day ${f + 1}`;
+			// if (ebmForeCastData[i][day] === 0) continue;
+
+			const forcast = {
+				customerArticleNo: sku,
+				requirementDate: addDays(new Date(Date.now()), f), //excelDateStuff(parseInt(date)),
+				quantity: ebmForeCastData[i][day] ?? 0,
+			};
+
+			if (forcast.quantity === 0) continue;
+
+			// checking to make sure there is a real av to add to.
+			const activeAV = article.filter(
+				(c: any) =>
+					c?.CustomerArticleNumber === forcast.customerArticleNo.toString(),
+			);
+
+			if (activeAV.length === 0) {
+				if (typeof forcast.customerArticleNo === "number") {
+					missingSku.push(forcast);
+				}
+				continue;
+			}
+
+			ebmForecastData.push(forcast);
+		}
+
+		//console.log(ebmForeCastData.length);
+	}
+
+	// pet forecast
+	for (let i = 0; i < petForeCastData.length; i++) {
+		// bottle code
+		const sku = petForeCastData[i]["South PET Bottle Code"];
+
+		// ignore the blanks
+		if (sku === "") continue;
+
+		// ignore zero qty
+		// if (ebmForeCastData[i][`Day ${i}`]) continue;
+
+		for (let f = 0; f <= 90; f++) {
+			const day = `Day ${f + 1}`;
+			// if (ebmForeCastData[i][day] === 0) continue;
+
+			const forcast = {
+				customerArticleNo: sku,
+				requirementDate: addDays(new Date(Date.now()), f), //excelDateStuff(parseInt(date)),
+				quantity: petForeCastData[i][day] ?? 0,
+			};
+
+			if (forcast.quantity === 0 || forcast.quantity === "") continue;
+
+			if (forcast.customerArticleNo < 99999) {
+				//console.log(`Sku a normal av ${forcast.customerArticleNo}`);
+				continue;
+			}
+
+			// checking to make sure there is a real av to add to.
+			const activeAV = article.filter(
+				(c: any) =>
+					c?.CustomerArticleNumber === forcast.customerArticleNo.toString(),
+			);
+
+			if (activeAV.length === 0) {
+				if (typeof forcast.customerArticleNo === "number") {
+					missingSku.push(forcast);
+				}
+				continue;
+			}
+
+			ebmForecastData.push(forcast);
+		}
+	}
+
+	//console.log(comForecast);
+
+	// email the  for the missing ones
+	// 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;
+	// 			}
+	// 		}
+
+	// 		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 = {
+	// 	email:
+	// 		"Blake.matthes@alpla.com; Stuart.Gladney@alpla.com; Harold.Mccalister@alpla.com; Jenn.Osbourn@alpla.com",
+	// 	subject:
+	// 		missedGrouped.length > 0
+	// 			? `Alert! There are ${missedGrouped.length}, missing skus.`
+	// 			: `Alert! There is a missing SKU.`,
+	// 	template: "missingLorealSkus",
+	// 	context: {
+	// 		items: missedGrouped,
+	// 	},
+	// };
+	// sendEmail(emailSetup);
+
+	// if the customerarticle number is not matching just ignore it
+	const predefinedObject = {
+		receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+		documentName: `ForecastFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		customerId: customerID,
+		positions: [],
+	};
+
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		positions: [...predefinedObject.positions, ...ebmForecastData],
+	};
+	// console.log(updatedPredefinedObject);
+
+	// posting the data to the new backend so we can store the data.
+	const posting: any = await postData(
+		{
+			type: "forecast",
+			endpoint: "/public/v1.0/DemandManagement/DELFOR",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		success: posting.success,
+		message: posting.message,
+		data: posting.data === "" ? ebmForecastData : posting.data,
+	};
+};

backend/logistics/logistics.dm.forecast.map.pNg.ts

@@ -0,0 +1,182 @@
+import XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.js";
+import { db } from "../db/db.controller.js";
+import { settings } from "../db/schema/settings.schema.js";
+import {
+	type SqlQuery,
+	sqlQuerySelector,
+} from "../prodSql/prodSqlQuerySelector.utils.js";
+import { excelDateStuff } from "../utils/excelToDate.utils.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+export const pNgForecast = async (data: any, user: any) => {
+	/**
+	 * Post a standard forecast based on the standard template.
+	 */
+
+	const { data: s, error: e } = await tryCatch(db.select().from(settings));
+
+	if (e) {
+		return {
+			sucess: false,
+			message: `Error getting settings`,
+			data: e,
+		};
+	}
+
+	const pNg = s.filter((n: any) => n.name === "pNgAddress");
+
+	const avSQLQuery = sqlQuerySelector(`datamart.activeArticles`) as SqlQuery;
+
+	if (!avSQLQuery.success) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "forecast",
+			message: `Error getting Article info`,
+			data: [avSQLQuery.message],
+			notify: true,
+		});
+	}
+
+	const { data: a, error: ae } = await tryCatch(
+		runDatamartQuery({ name: "activeArticles", options: {} }),
+	);
+
+	if (ae) {
+		return {
+			success: false,
+			message: "Error getting active av",
+			data: [],
+		};
+	}
+
+	const article: any = a?.data;
+
+	const buffer = Buffer.from(data.buffer);
+
+	const workbook = XLSX.read(buffer, { type: "buffer" });
+
+	//const sheet: any = workbook.Sheets[sheetName];
+	const sheet: any = workbook.Sheets["SchedAgreementUIConfigSpreadshe"];
+	const range = XLSX.utils.decode_range(sheet["!ref"]);
+
+	const headers = [];
+	for (let C = range.s.c; C <= range.e.c; ++C) {
+		const cellAddress = XLSX.utils.encode_cell({ r: 0, c: C }); // row 0 = Excel row 1
+		const cell = sheet[cellAddress];
+		headers.push(cell ? cell.v : undefined);
+	}
+
+	//console.log(headers);
+	const forecastData: any = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 1,
+	});
+
+	const groupedByCustomer: any = forecastData.reduce((acc: any, item: any) => {
+		const id = item.CustomerID;
+		if (!acc[id]) {
+			acc[id] = [];
+		}
+		acc[id].push(item);
+		return acc;
+	}, {});
+
+	const foreCastData: any = [];
+
+	for (const [customerID, forecast] of Object.entries(groupedByCustomer)) {
+		//console.log(`Running for Customer ID: ${customerID}`);
+		const newForecast: any = forecast;
+
+		const predefinedObject = {
+			receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+			documentName: `ForecastFromLST-${new Date(Date.now()).toLocaleString(
+				"en-US",
+			)}`,
+			sender: user.username || "lst-system",
+			customerId: pNg[0]?.value,
+			positions: [],
+		};
+
+		// map everything out for each order
+		const nForecast = newForecast.map((o: any) => {
+			// const invoice = i.filter(
+			//     (i: any) => i.deliveryAddress === parseInt(customerID)
+			// );
+			// if (!invoice) {
+			//     return;
+			// }
+
+			return {
+				customerArticleNo: parseInt(o["Customer Item No."] ?? "0", 10),
+				requirementDate: excelDateStuff(parseInt(o["Request Date"] ?? "0", 10)),
+				quantity: o["Remaining Qty to be Shipped"],
+			};
+		});
+
+		// check to make sure the av belongs in this plant.
+		const onlyNumbers = nForecast.filter((n: any) => n.quantity > 0);
+		const filteredForecast: any = [];
+
+		for (let i = 0; i < nForecast.length; i++) {
+			//console.log(nForecast[i].customerArticleNo);
+			const activeAV = article.filter(
+				(c: any) =>
+					c?.CustomerArticleNumber ===
+						nForecast[i]?.customerArticleNo.toString() &&
+					// validate it works via the default address
+					c?.IdAdresse === parseInt(pNg[0]?.value ?? "139", 10),
+			);
+
+			if (activeAV.length > 0) {
+				filteredForecast.push(onlyNumbers[i]);
+			}
+		}
+
+		if (filteredForecast.length === 0) {
+			console.log("Nothing to post");
+			return {
+				success: true,
+				message: "No forecast to be posted",
+				data: foreCastData,
+			};
+		}
+
+		// do that fun combining thing
+		const updatedPredefinedObject = {
+			...predefinedObject,
+			positions: [...predefinedObject.positions, ...filteredForecast],
+		};
+
+		//console.log(updatedPredefinedObject);
+
+		// post the orders to the server
+		const posting: any = await postData(
+			{
+				type: "forecast",
+				endpoint: "/public/v1.0/DemandManagement/DELFOR",
+				data: updatedPredefinedObject as any,
+			},
+			user,
+		);
+
+		foreCastData.push({
+			customer: customerID,
+			//totalOrders: orders?.length(),
+			success: posting.success,
+			message: posting.message,
+			data: posting.data,
+		});
+	}
+
+	return {
+		success: foreCastData[0].success,
+		message: foreCastData[0].message,
+		data: foreCastData,
+	};
+};

backend/logistics/logistics.dm.forecast.map.standard.ts

@@ -0,0 +1,104 @@
+import * as XLSX from "xlsx";
+import { excelDateStuff } from "../utils/excelToDate.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+export const standardForecast = async (data: any, user: any) => {
+	/**
+	 * Post a standard forecast based on the standard template.
+	 */
+
+	const plantToken = process.env.PROD_PLANT_TOKEN;
+
+	//const arrayBuffer = await data.arrayBuffer();
+	const buffer = Buffer.from(data.buffer);
+
+	const workbook = XLSX.read(buffer, { type: "buffer" });
+
+	const sheetName = workbook.SheetNames[0] as string;
+	const sheet = workbook.Sheets[sheetName] as any;
+
+	const headers = [
+		"CustomerArticleNumber",
+		"Quantity",
+		"RequirementDate",
+		"CustomerID",
+	];
+
+	const forecastData: any = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 1,
+	});
+
+	const groupedByCustomer: any = forecastData.reduce((acc: any, item: any) => {
+		const id = item.CustomerID;
+		if (!acc[id]) {
+			acc[id] = [];
+		}
+		acc[id].push(item);
+		return acc;
+	}, {});
+
+	const foreCastData: any = [];
+
+	for (const [customerID, forecast] of Object.entries(groupedByCustomer)) {
+		//console.log(`Running for Customer ID: ${customerID}`);
+		const newForecast: any = forecast;
+
+		const predefinedObject = {
+			receivingPlantId: plantToken,
+			documentName: `ForecastFromLST-${new Date(Date.now()).toLocaleString(
+				"en-US",
+			)}`,
+			sender: user.username || "lst-system",
+			customerId: customerID,
+			positions: [],
+		};
+
+		// map everything out for each order
+		const nForecast = newForecast.map((o: any) => {
+			// const invoice = i.filter(
+			//     (i: any) => i.deliveryAddress === parseInt(customerID)
+			// );
+			// if (!invoice) {
+			//     return;
+			// }
+			return {
+				customerArticleNo: o.CustomerArticleNumber,
+				requirementDate: excelDateStuff(parseInt(o.RequirementDate)),
+				quantity: o.Quantity,
+			};
+		});
+
+		// do that fun combining thing
+		const updatedPredefinedObject = {
+			...predefinedObject,
+			positions: [...predefinedObject.positions, ...nForecast],
+		};
+
+		//console.log(updatedPredefinedObject);
+
+		// post the orders to the server
+		const posting: any = await postData(
+			{
+				type: "forecast",
+				endpoint: "/public/v1.0/DemandManagement/DELFOR",
+				data: updatedPredefinedObject as any,
+			},
+			user,
+		);
+
+		foreCastData.push({
+			customer: customerID,
+			//totalOrders: orders?.length(),
+			success: posting.success,
+			message: posting.message,
+			data: posting.data,
+		});
+	}
+
+	return {
+		success: foreCastData[0].success,
+		message: foreCastData[0].message,
+		data: foreCastData,
+	};
+};

backend/logistics/logistics.dm.forecast.route.ts

@@ -0,0 +1,95 @@
+import { Router } from "express";
+import multer from "multer";
+import { requireAuth } from "../middleware/auth.middleware.js";
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { energizerForecast } from "./logistics.dm.forecast.map.energizer.js";
+import { lorealForecast } from "./logistics.dm.forecast.map.loreal.js";
+import { pNgForecast } from "./logistics.dm.forecast.map.pNg.js";
+import { standardForecast } from "./logistics.dm.forecast.map.standard.js";
+
+type ForecastResult = {
+	success?: boolean;
+	message?: string;
+	data?: unknown;
+};
+
+const r = Router();
+
+const upload = multer({
+	storage: multer.memoryStorage(),
+});
+
+r.post("/", requireAuth, upload.single("file"), async (req, res) => {
+	if (!req.file) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: "forecast",
+			message: "A file must be added to be able to run the forecast.",
+			data: [],
+			status: 400,
+		});
+	}
+
+	const { fileType } = req.body;
+
+	if (typeof fileType !== "string") {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: "forecast",
+			message: "A fileType must be provided.",
+			data: [],
+			status: 400,
+		});
+	}
+
+	//console.log("fileType:", req.body.fileType);
+
+	let result: ForecastResult;
+
+	switch (fileType) {
+		case "standard":
+			result = await standardForecast(req.file, req.user);
+			break;
+
+		case "loreal":
+			result = await lorealForecast(req.file, req.user);
+			break;
+
+		case "pg":
+			result = await pNgForecast(req.file, req.user);
+			break;
+
+		case "energizer":
+			result = await energizerForecast(req.file, req.user);
+			break;
+
+		default:
+			return apiReturn(res, {
+				success: false,
+				level: "error",
+				module: "dm",
+				subModule: "forecast",
+				message: `Invalid fileType: ${fileType}`,
+				data: [],
+				status: 400,
+			});
+	}
+
+	return apiReturn(res, {
+		success: result.success ?? false,
+		level: result.success ? "info" : "error",
+		module: "dm",
+		subModule: "forecast",
+		message: result.success
+			? "The forecast was accepted by Alplaprod 2.0 please check to make sure everything processed properly."
+			: (result.message as string),
+		data: result.data ?? ([] as any),
+		status: result.success ? 200 : 500,
+	});
+});
+
+export default r;

backend/logistics/logistics.dm.postData.ts

@@ -0,0 +1,65 @@
+import { db } from "../db/db.controller.js";
+import { forecastImport } from "../db/schema/forecastImports.schema.js";
+import { runProdApi } from "../utils/prodEndpoint.utils.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+
+type PostData = {
+	receivingPlantId: string;
+	documentName: string;
+	sender: string;
+	customerId: string;
+	positions: unknown[];
+};
+type Data = {
+	type: "orders" | "forecast";
+	endpoint: string;
+	data: PostData;
+};
+export const postData = async (data: Data, user: any) => {
+	const posting = await runProdApi(
+		{
+			method: "post",
+			endpoint: data.endpoint,
+			data: [data.data],
+		},
+		"Forecast post",
+	);
+
+	if (!posting?.success) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: data.type === "orders" ? "orders" : "forecast",
+			message:
+				posting?.message ??
+				`Error in posting the ${data.type === "orders" ? "orders" : "forecast"} data`,
+			data: posting?.data ?? [],
+			notify: false,
+		});
+	}
+
+	if (posting.success) {
+		if (data.type === "forecast") {
+			await db.insert(forecastImport).values({
+				receivingPlantId: data.data.receivingPlantId ?? "test1",
+				documentName: data.data.documentName ?? "forecast-data-missing",
+				sender: data.data.sender ?? "lst-user",
+				customerId: data.data.customerId ?? "0",
+				rawData: data ?? [],
+				add_user: user.username ?? undefined,
+				upd_user: user.username ?? undefined,
+			});
+		}
+
+		return returnFunc({
+			success: true,
+			level: "info",
+			module: "dm",
+			subModule: data.type === "orders" ? "orders" : "forecast",
+			message: posting?.message ?? "",
+			data: (data.data as any) ?? [],
+			notify: false,
+		});
+	}
+};

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;

backend/logistics/logistics.dm.template.route.ts

@@ -0,0 +1,79 @@
+import { format } from "date-fns";
+import { Router } from "express";
+import { requireAuth } from "../middleware/auth.middleware.js";
+import { excelTemplate, type Template } from "../utils/excelTemplates.utils.js";
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+
+const r = Router();
+
+r.get("/", requireAuth, async (req, res) => {
+	const { filename } = req.query;
+
+	const templateNames = ["orders", "forecast"];
+	if (typeof filename !== "string" || !templateNames.includes(filename)) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: "template",
+			message: "You are required to pass over the template name.",
+			data: [],
+			status: 500,
+		});
+	}
+
+	const name = `${filename}-Template-${format(
+		new Date(Date.now()),
+		"M-d-yyyy",
+	)}.xlsx`;
+
+	const standardHeaders = [
+		"CustomerArticleNumber",
+		"CustomerOrderNumber",
+		"CustomerLineNumber",
+		"CustomerRealeaseNumber",
+		"Quantity",
+		"DeliveryDate",
+		"CustomerID",
+		"Remark",
+		// "InvoiceID",
+	];
+
+	const forecastHeaders = [
+		"CustomerArticleNumber",
+		"Quantity",
+		"RequirementDate",
+		"CustomerID",
+	];
+
+	const template = {
+		name,
+		headers: filename === "orders" ? standardHeaders : forecastHeaders,
+	} as Template;
+
+	//console.log(template);
+	const { data, error } = await tryCatch(excelTemplate(template));
+
+	if (error || !data) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "dm",
+			subModule: "template",
+			message: "There was an error creating the Excel template.",
+			data: [],
+			status: 500,
+		});
+	}
+
+	res.set({
+		"Content-Type":
+			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		"Content-Disposition": `attachment; filename="${name}"`,
+	});
+
+	return res.status(200).send(data);
+});
+
+export default r;

backend/logistics/logistics.routes.ts

@@ -0,0 +1,21 @@
+import type { Express } from "express";
+import { featureCheck } from "../middleware/featureActive.middleware.js";
+import forecast from "./logistics.dm.forecast.route.js";
+import createTemplate from "./logistics.dm.template.route.js";
+
+export const setupLogisticsRoutes = (baseUrl: string, app: Express) => {
+	//stats will be like this as we dont need to change this
+
+	app.use(
+		`${baseUrl}/api/logistics/dm/template`,
+		featureCheck("demandManagement"),
+		createTemplate,
+	);
+	app.use(
+		`${baseUrl}/api/logistics/dm/forecast`,
+		featureCheck("demandManagement"),
+		forecast,
+	);
+
+	// all other system should be under /api/system/*
+};

backend/prodSql/queries/datamart.deliveryByDateRange.sql

@@ -1,74 +1,73 @@
 use [test1_AlplaPROD2.0_Read]
 
-DECLARE @StartDate DATE = '[startDate]' -- 2025-1-1
+DECLARE @StartDate DATE = '[startDate]'
-DECLARE @EndDate DATE = '[endDate]' -- 2025-1-31
+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]
+      r.[ArticleHumanReadableId]
-      ,[ReleaseNumber]
+     ,[ReleaseNumber]
-	  ,h.CustomerOrderNumber
+     ,h.CustomerOrderNumber
-	  ,x.CustomerLineItemNumber
+     ,x.CustomerLineItemNumber
-      ,[CustomerReleaseNumber]
+     ,[CustomerReleaseNumber]
-      ,[ReleaseState]
+     ,[ReleaseState]
-      ,[DeliveryState]
+     ,[DeliveryState]
-	  ,ea.JournalNummer as BOL_Number
+     ,COALESCE(ea.JournalNummer, bol_20.JournalNumber) AS BOL_Number   -- 1.0 or 2.0
-      ,[ReleaseConfirmationState]
+     ,[ReleaseConfirmationState]
-      ,[PlanningState]
+     ,[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]
+     ,[Quantity]
-      ,[DeliveredQuantity]
+     ,[DeliveredQuantity]
-      ,r.[AdditionalInformation1]
+     ,r.[AdditionalInformation1]
-      ,r.[AdditionalInformation2]
+     ,r.[AdditionalInformation2]
-      ,[TradeUnits]
+     ,[TradeUnits]
-      ,[LoadingUnits]
+     ,[LoadingUnits]
-      ,[Trucks]
+     ,[Trucks]
-      ,[LoadingToleranceType]
+     ,[LoadingToleranceType]
-      ,[SalesPrice]
+     ,[SalesPrice]
-      ,[Currency]
+     ,[Currency]
-      ,[QuantityUnit]
+     ,[QuantityUnit]
-      ,[SalesPriceRemark]
+     ,[SalesPriceRemark]
-      ,r.[Remark]
+     ,r.[Remark]
-      ,[Irradiated]
+     ,[Irradiated]
-      ,r.[CreatedByEdi]
+     ,r.[CreatedByEdi]
-      ,[DeliveryAddressHumanReadableId]
+     ,[DeliveryAddressHumanReadableId]
-	  ,DeliveryAddressDescription
+     ,DeliveryAddressDescription
-      ,[CustomerArtNo]
+     ,[CustomerArtNo]
-      ,[TotalPrice]
+     ,[TotalPrice]
-      ,r.[ArticleAlias]
+     ,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
+-- 2.0 BOL (new)
- [order].LineItem as x on 
+LEFT JOIN bol_20 ON bol_20.ReleaseId = r.Id AND bol_20.rn = 1
 
- r.LineItemId = x.id
+WHERE r.DeliveryDate BETWEEN @StartDate AND @EndDate
-
- 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
 and DeliveredQuantity > 0
 --and r.ArticleHumanReadableId in ([articles]) 
 --and Journalnummer = 169386

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

backend/prodSql/queries/datamart.psiPlanningData.sql

@@ -1,32 +1,72 @@
-    use AlplaPROD_test1
+use [test1_AlplaPROD2.0_Read]
-    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
-    */
 
-    select x.IdArtikelvarianten As Article,
+DECLARE @start_date date    = '[startDate]'; --'2025-01-01'
-    ProduktionAlias as Description,
+DECLARE @end_date   date    = '[endDate]'; --'2025-08-09'
-    standort as MachineId,
+DECLARE @tz         sysname = 'Eastern Standard Time';   -- usday1; use 'Central Standard Time' for usksc1
-    MaschinenBezeichnung as MachineName,
+DECLARE @shiftSeconds int   = 7*3600;                    -- 07:00 production-day anchor
-    --MaschZyklus as PlanningCycleTime,
+--TODO: add in the proper  time zone based on the env, get correcr shift time as well
-    x.IdProdPlanung as LotNumber,
+;WITH src AS (
-    FORMAT(ProdTag, 'MM/dd/yyyy') as ProductionDay,
+    SELECT
-    x.planMenge as TotalPlanned,
+        pl.RunningNumber, pl.ArticleHumanReadableId, pl.ArticleAlias, pl.ArticleDescription,
-    ProduktionMenge as QTYPerDay,
+        pl.MachineLocation, pl.MachineDescription, pl.ProductionLotState, pl.ProductionInterrupt,
-    round(ProduktionMengeVPK, 2) PalDay,
+        pl.PlanQuantityPieces, pl.PlanQuantityLoadingUnit,
-    Status as finished
+        CAST(pl.ProdStart AT TIME ZONE @tz AS datetime2(0)) AS StartLocal,
-    --MaschStdAuslastung as nee
+        CAST(pl.PlanEnd   AT TIME ZONE @tz AS datetime2(0)) AS EndLocal
-
+    FROM productionScheduling.ProductionLot AS pl
-    from dbo.V_ProdLosProduktionJeProdTag_PLANNING (nolock) as x
+    WHERE pl.PlanEnd > pl.ProdStart
-
+        and pl.publishState = 1
-    left join 
+        and pl.ArticleHumanReadableId IN ([articles])   -- <-- article filter (was IdArtikelvarianten)
-    dbo.V_ProdPlanung (nolock) as p on
+      --AND pl.RunningNumber = 28094             -- <-- lot filter (was IdProdPlanung); comment out for all
-    x.IdProdPlanung = p.IdProdPlanung
+),
-
+calc AS (
-    where ProdTag between @start_date and @end_date 
+    SELECT *,
-    and p.IdArtikelvarianten in ([articles])
+        DATEADD(SECOND, @shiftSeconds,
-    --and V_ProdLosProduktionJeProdTag_PLANNING.IdKunde = 10 
+            CAST(CASE WHEN DATEDIFF(SECOND, CAST(StartLocal AS date), StartLocal) >= @shiftSeconds
-    --and IdProdPlanung = 18442
+                      THEN CAST(StartLocal AS date)
-
+                      ELSE DATEADD(DAY,-1, CAST(StartLocal AS date)) END AS datetime2(0))) AS FirstBoundary
-    order by ProdTag desc
+    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); 

backend/routeHandler.routes.ts

@@ -7,6 +7,7 @@ import { setupDatamartRoutes } from "./datamart/datamart.routes.js";
 import { setupDockDoorRoutes } from "./dockdoorScanning/dockdoor.routes.js";
 import { setupEomRoutes } from "./eom/eom.routes.js";
 import { setupGPSqlRoutes } from "./gpSql/gpSql.routes.js";
+import { setupLogisticsRoutes } from "./logistics/logistics.routes.js";
 import { setupMobileRoutes } from "./mobile/mobile.routes.js";
 import { setupNotificationRoutes } from "./notification/notification.routes.js";
 import { setupOCPRoutes } from "./ocp/ocp.routes.js";
@@ -18,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);
@@ -33,4 +34,5 @@ export const setupRoutes = (baseUrl: string, app: Express) => {
 	setupTCPRoutes(baseUrl, app);
 	setupDockDoorRoutes(baseUrl, app);
 	setupEomRoutes(baseUrl, app);
+	setupLogisticsRoutes(baseUrl, app);
 };

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",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};

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",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};

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";
@@ -8,7 +9,7 @@ import { dbCleanup } from "./db/dbCleanup.controller.js";
 import { type Setting, settings } from "./db/schema/settings.schema.js";
 import { connectGPSql } from "./gpSql/gpSqlConnection.controller.js";
 import { createLogger } from "./logger/logger.controller.js";
-import { historicalSchedule } from "./logistics/logistics.historicalInv.js";
+import { historicalSchedule } from "./logistics/logistics.utils.historicalInv.js";
 import { startNotifications } from "./notification/notification.controller.js";
 import { sqlJobCleanUp } from "./notification/notification.SqlJobCleanUp.js";
 import { createNotifications } from "./notification/notifications.master.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();
 

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 () => {

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`,

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}`));

backend/utils/excelTemplates.utils.ts

@@ -0,0 +1,49 @@
+import * as XLSX from "xlsx";
+
+export type Template = {
+	name: string;
+	headers: string[];
+};
+
+export const excelTemplate = async (data: Template) => {
+	/**
+	 * Creates the standard Template for bulk orders in
+	 */
+
+	// const headers = [
+	//     [
+	//         "CustomerArticleNumber",
+	//         "CustomerOrderNumber",
+	//         "CustomerLineNumber",
+	//         "CustomerRealeaseNumber",
+	//         "Quantity",
+	//         "DeliveryDate",
+	//         "CustomerID",
+	//         "Remark",
+	//         // "InvoiceID",
+	//     ],
+	// ];
+
+	// create a new workbook
+	const wb = XLSX.utils.book_new();
+	const ws = XLSX.utils.aoa_to_sheet([data.headers]);
+	//const ws2 = XLSX.utils.aoa_to_sheet(headers2);
+
+	const columnWidths = data.headers.map((header) => ({
+		width: header.length + 2,
+	}));
+
+	ws["!cols"] = columnWidths;
+
+	// append the worksheet to the workbook
+	XLSX.utils.book_append_sheet(wb, ws, `Sheet1`);
+	//XLSX.utils.book_append_sheet(wb, ws2, `Sheet2`);
+
+	// Creates the file to disk'
+	// XLSX.writeFile(wb, data.name);
+
+	// Write the workbook to a buffer and return it
+	const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "buffer" });
+
+	return excelBuffer;
+};

backend/utils/excelToDate.utils.ts

@@ -0,0 +1,28 @@
+import { getJsDateFromExcel } from "excel-date-to-js";
+
+export const excelDateStuff = (serial: number, time?: any) => {
+	if (typeof serial !== "number" || serial <= 0) {
+		return "invalid Date";
+	}
+
+	// Default time to 8:00 AM if not provided
+	if (!time) {
+		time = 800;
+	}
+
+	// Get base date from Excel serial (this gives you UTC midnight)
+	const date = getJsDateFromExcel(serial);
+
+	const localOffset = new Date().getTimezoneOffset() / 60;
+	const hours = Math.floor(time / 100);
+	const minutes = time % 100;
+
+	// Set the time in UTC
+	date.setUTCHours(hours + localOffset);
+	date.setUTCMinutes(minutes);
+	date.setUTCSeconds(0);
+	date.setUTCMilliseconds(0);
+
+	//console.log(date.toISOString(), serial, time);
+	return date.toISOString();
+};

backend/utils/prodEndpoint.utils.ts

@@ -1,5 +1,6 @@
 import https from "node:https";
 import axios from "axios";
+import { createLogger } from "../logger/logger.controller.js";
 import { returnFunc } from "./returnHelper.utils.js";
 import { tryCatch } from "./trycatch.utils.js";
 
@@ -59,9 +60,14 @@ export const prodEndpointCreation = async (endpoint: string) => {
  * @param timeoutDelay
  * @returns
  */
-export const runProdApi = async (data: Data) => {
+export const runProdApi = async (data: Data, name?: string) => {
+	const log = createLogger({ module: "utils", subModule: "prodEndpoints" });
 	const url = await prodEndpointCreation(data.endpoint);
 
+	log.debug(
+		{ stack: data },
+		`Info passed over for ${name ? name : "Missing name"}`,
+	);
 	const { data: d, error } = await tryCatch(
 		axios({
 			method: data.method as string,
@@ -94,7 +100,7 @@ export const runProdApi = async (data: Data) => {
 				level: "error",
 				module: "utils",
 				subModule: "prodEndpoint",
-				message: "Data from prod endpoint",
+				message: "Error data from prod endpoint",
 				data: d.data,
 				notify: false,
 			});
@@ -104,10 +110,30 @@ export const runProdApi = async (data: Data) => {
 				level: "error",
 				module: "utils",
 				subModule: "prodEndpoint",
-				message: "Data from prod endpoint",
+				message: "Error data from prod endpoint",
 				data: d.data,
 				notify: false,
 			});
+		case 500:
+			return returnFunc({
+				success: false,
+				level: "error",
+				module: "utils",
+				subModule: "prodEndpoint",
+				message: "Error data from prod endpoint",
+				data: d.data,
+				notify: false,
+			});
+		default:
+			returnFunc({
+				success: false,
+				level: "error",
+				module: "utils",
+				subModule: "prodEndpoint",
+				message: "Unknown error encountered",
+				data: d?.data as any,
+				notify: false,
+			});
 	}
 
 	if (error) {

backend/utils/returnHelper.utils.ts

@@ -18,7 +18,8 @@ export interface ReturnHelper<T = unknown[]> {
 		| "admin"
 		| "mobile"
 		| "dockdoor"
-		| "eom";
+		| "eom"
+		| "dm";
 	subModule: string;
 
 	level: "info" | "error" | "debug" | "fatal" | "warn";

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({

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,
+	};
+};

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) => {
+const getNextBuildNumber = async (versionPath: string) => {
-	if (!(await exists(buildNumberFile))) {
+	const raw = await fsp.readFile(versionPath, "utf8");
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
+	const config = JSON.parse(raw);
-		return 1;
+	const current = Number.parseInt(config.build.trim(), 10);
-	}
-
-	const raw = await fsp.readFile(buildNumberFile, "utf8");
-	const current = Number.parseInt(raw.trim(), 10);
 
+	let nextBuild: string;
 	if (Number.isNaN(current) || current < 1) {
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
+		nextBuild = "1";
-		return 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
+	return { version: config.version, build: config.build };
-
-	await updateAppStats({
-		currentBuild: next,
-		lastBuildAt: new Date(),
-		building: true,
-	});
-
-	return next;
 };
 
 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 lstVersion = await getNextBuildNumber(version);
-	const zipFileName = `LSTV3-${buildNumber}.zip`;
+	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,
 	};

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": ""
   },

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",
+      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
-      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "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",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.6.0.tgz",
-      "integrity": "sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==",
+      "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",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.3.1.tgz",
-      "integrity": "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==",
+      "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",
+      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "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",

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"
   },

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>
 	);
 }

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 }

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,
+}

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}
     />
   )

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 }

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}

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: {

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,
+}

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,
+}

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",
+        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-[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",
+        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":
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
-          "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-none",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "size-9",
       },
     },

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 }

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}

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,
+}

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,
+}

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}

frontend/src/components/ui/collapsible.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
 function Collapsible({

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}

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,
+}

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,
+}

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(
+      className={cn("text-sm font-medium", className)}
-        "text-base leading-none 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}

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 }

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,
+}

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}
     />
   )

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,
+}

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,
+}

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 }

frontend/src/components/ui/input-group.tsx

@@ -1,154 +1,153 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
-import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority"
-import { Button } from "@/components/ui/button";
+
-import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils"
-import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 
-/* eslint-disable */
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-	return (
+  return (
-		<div
+    <div
-			data-slot="input-group"
+      data-slot="input-group"
-			role="group"
+      role="group"
-			className={cn(
+      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",
+        "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,
+        className
-			)}
+      )}
-			{...props}
+      {...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",
+  "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: {
+    variants: {
-			align: {
+      align: {
-				"inline-start":
+        "inline-start":
-					"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-				"inline-end":
+        "inline-end":
-					"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-				"block-start":
+        "block-start":
-					"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-				"block-end":
+        "block-end":
-					"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-			},
+      },
-		},
+    },
-		defaultVariants: {
+    defaultVariants: {
-			align: "inline-start",
+      align: "inline-start",
-		},
+    },
-	},
+  }
-);
+)
 
 function InputGroupAddon({
-	className,
+  className,
-	align = "inline-start",
+  align = "inline-start",
-	...props
+  ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-	return (
+  return (
-		<div
+    <div
-			role="group"
+      role="group"
-			data-slot="input-group-addon"
+      data-slot="input-group-addon"
-			data-align={align}
+      data-align={align}
-			className={cn(inputGroupAddonVariants({ align }), className)}
+      className={cn(inputGroupAddonVariants({ align }), className)}
-			onClick={(e) => {
+      onClick={(e) => {
-				if ((e.target as HTMLElement).closest("button")) {
+        if ((e.target as HTMLElement).closest("button")) {
-					return;
+          return
-				}
+        }
-				e.currentTarget.parentElement?.querySelector("input")?.focus();
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
-			}}
+      }}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 const inputGroupButtonVariants = cva(
-	"flex items-center gap-2 text-sm shadow-none",
+  "flex items-center gap-2 text-xs shadow-none",
-	{
+  {
-		variants: {
+    variants: {
-			size: {
+      size: {
-				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-				sm: "",
+        sm: "gap-1",
-				"icon-xs":
+        "icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
-					"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-7 p-0 has-[>svg]:p-0",
-				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
-			},
+    },
-		},
+    defaultVariants: {
-		defaultVariants: {
+      size: "xs",
-			size: "xs",
+    },
-		},
+  }
-	},
+)
-);
 
 function InputGroupButton({
-	className,
+  className,
-	type = "button",
+  type = "button",
-	variant = "ghost",
+  variant = "ghost",
-	size = "xs",
+  size = "xs",
-	...props
+  ...props
 }: Omit<React.ComponentProps<typeof Button>, "size"> &
-	VariantProps<typeof inputGroupButtonVariants>) {
+  VariantProps<typeof inputGroupButtonVariants>) {
-	return (
+  return (
-		<Button
+    <Button
-			type={type}
+      type={type}
-			data-size={size}
+      data-size={size}
-			variant={variant}
+      variant={variant}
-			className={cn(inputGroupButtonVariants({ size }), className)}
+      className={cn(inputGroupButtonVariants({ size }), className)}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-	return (
+  return (
-		<span
+    <span
-			className={cn(
+      className={cn(
-				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-xs text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-				className,
+        className
-			)}
+      )}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function InputGroupInput({
-	className,
+  className,
-	...props
+  ...props
 }: React.ComponentProps<"input">) {
-	return (
+  return (
-		<Input
+    <Input
-			data-slot="input-group-control"
+      data-slot="input-group-control"
-			className={cn(
+      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",
+        "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,
+        className
-			)}
+      )}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function InputGroupTextarea({
-	className,
+  className,
-	...props
+  ...props
 }: React.ComponentProps<"textarea">) {
-	return (
+  return (
-		<Textarea
+    <Textarea
-			data-slot="input-group-control"
+      data-slot="input-group-control"
-			className={cn(
+      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",
+        "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,
+        className
-			)}
+      )}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 export {
-	InputGroup,
+  InputGroup,
-	InputGroupAddon,
+  InputGroupAddon,
-	InputGroupButton,
+  InputGroupButton,
-	InputGroupInput,
+  InputGroupText,
-	InputGroupText,
+  InputGroupInput,
-	InputGroupTextarea,
+  InputGroupTextarea,
-};
+}

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 }

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}

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,
+}

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 }

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}

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,
+}

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 }

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,
+}

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,
+}

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,
+}

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 }

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 }

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 }

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>
   )

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}
     />
   )

frontend/src/components/ui/separator.tsx

@@ -1,26 +1,26 @@
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as React from "react"
-import type * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Separator({
-	className,
+  className,
-	orientation = "horizontal",
+  orientation = "horizontal",
-	decorative = true,
+  decorative = true,
-	...props
+  ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-	return (
+  return (
-		<SeparatorPrimitive.Root
+    <SeparatorPrimitive.Root
-			data-slot="separator"
+      data-slot="separator"
-			decorative={decorative}
+      decorative={decorative}
-			orientation={orientation}
+      orientation={orientation}
-			className={cn(
+      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",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-				className,
+        className
-			)}
+      )}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
-export { Separator };
+export { Separator }

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 { cn } from "@/lib/utils"
-import { Dialog as SheetPrimitive } from "radix-ui";
+import { Button } from "@/components/ui/button"
-import type * as React from "react";
+import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils";
 
 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,
+  className,
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-	return (
+  return (
-		<SheetPrimitive.Overlay
+    <SheetPrimitive.Overlay
-			data-slot="sheet-overlay"
+      data-slot="sheet-overlay"
-			className={cn(
+      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",
+        "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,
+        className
-			)}
+      )}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function SheetContent({
-	className,
+  className,
-	children,
+  children,
-	side = "right",
+  side = "right",
-	showCloseButton = true,
+  showCloseButton = true,
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-	side?: "top" | "right" | "bottom" | "left";
+  side?: "top" | "right" | "bottom" | "left"
-	showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
-	return (
+  return (
-		<SheetPortal>
+    <SheetPortal>
-			<SheetOverlay />
+      <SheetOverlay />
-			<SheetPrimitive.Content
+      <SheetPrimitive.Content
-				data-slot="sheet-content"
+        data-slot="sheet-content"
-				className={cn(
+        data-side={side}
-					"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",
+        className={cn(
-					side === "right" &&
+          "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",
-						"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",
+          className
-					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",
+        {...props}
-					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",
+        {children}
-					side === "bottom" &&
+        {showCloseButton && (
-						"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
-					className,
+            <Button
-				)}
+              variant="ghost"
-				{...props}
+              className="absolute top-3 right-3"
-			>
+              size="icon-sm"
-				{children}
+            >
-				{showCloseButton && (
+              <XIcon
-					<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>
-						<span className="sr-only">Close</span>
+            </Button>
-					</SheetPrimitive.Close>
+          </SheetPrimitive.Close>
-				)}
+        )}
-			</SheetPrimitive.Content>
+      </SheetPrimitive.Content>
-		</SheetPortal>
+    </SheetPortal>
-	);
+  )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return (
+  return (
-		<div
+    <div
-			data-slot="sheet-header"
+      data-slot="sheet-header"
-			className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn("flex flex-col gap-0.5 p-4", className)}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-	return (
+  return (
-		<div
+    <div
-			data-slot="sheet-footer"
+      data-slot="sheet-footer"
-			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 function SheetTitle({
-	className,
+  className,
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-	return (
+  return (
-		<SheetPrimitive.Title
+    <SheetPrimitive.Title
-			data-slot="sheet-title"
+      data-slot="sheet-title"
-			className={cn("font-semibold text-foreground", className)}
+      className={cn(
-			{...props}
+        "text-sm font-medium text-foreground",
-		/>
+        className
-	);
+      )}
+      {...props}
+    />
+  )
 }
 
 function SheetDescription({
-	className,
+  className,
-	...props
+  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-	return (
+  return (
-		<SheetPrimitive.Description
+    <SheetPrimitive.Description
-			data-slot="sheet-description"
+      data-slot="sheet-description"
-			className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
 export {
-	Sheet,
+  Sheet,
-	SheetTrigger,
+  SheetTrigger,
-	SheetClose,
+  SheetClose,
-	SheetContent,
+  SheetContent,
-	SheetHeader,
+  SheetHeader,
-	SheetFooter,
+  SheetFooter,
-	SheetTitle,
+  SheetTitle,
-	SheetDescription,
+  SheetDescription,
-};
+}

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 (
+  return (
-		<div
+    <div
-			data-slot="skeleton"
+      data-slot="skeleton"
-			className={cn("animate-pulse rounded-md bg-accent", className)}
+      className={cn("animate-pulse rounded-none bg-muted", className)}
-			{...props}
+      {...props}
-		/>
+    />
-	);
+  )
 }
 
-export { Skeleton };
+export { Skeleton }

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 }

frontend/src/components/ui/sonner.tsx

@@ -1,43 +1,47 @@
-import {
+import { useTheme } from "next-themes"
-	CircleCheckIcon,
+import { Toaster as Sonner, type ToasterProps } from "sonner"
-	InfoIcon,
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
-	Loader2Icon,
-	OctagonXIcon,
-	TriangleAlertIcon,
-} from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = "system" } = useTheme();
+  const { theme = "system" } = useTheme()
 
-	return (
+  return (
-		<Sonner
+    <Sonner
-			theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps["theme"]}
-			className="toaster group"
+      className="toaster group"
-			icons={{
+      icons={{
-				success: <CircleCheckIcon className="size-4" />,
+        success: (
-				info: <InfoIcon className="size-4" />,
+          <CircleCheckIcon className="size-4" />
-				warning: <TriangleAlertIcon className="size-4" />,
+        ),
-				error: <OctagonXIcon className="size-4" />,
+        info: (
-				loading: <Loader2Icon className="size-4 animate-spin" />,
+          <InfoIcon className="size-4" />
-			}}
+        ),
-			style={
+        warning: (
-				{
+          <TriangleAlertIcon className="size-4" />
-					"--normal-bg": "var(--popover)",
+        ),
-					"--normal-text": "var(--popover-foreground)",
+        error: (
-					"--normal-border": "var(--border)",
+          <OctagonXIcon className="size-4" />
-					"--border-radius": "var(--radius)",
+        ),
-				} as React.CSSProperties
+        loading: (
-			}
+          <Loader2Icon className="size-4 animate-spin" />
-			toastOptions={{
+        ),
-				classNames: {
+      }}
-					toast: "cn-toast",
+      style={
-				},
+        {
-			}}
+          "--normal-bg": "var(--popover)",
-			{...props}
+          "--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 }

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} />
   )
 }
 

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}

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}
     />
   )

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}
     />
   )

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}

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 }

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",
+        default:
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-9 min-w-9 px-2.5",
+        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: {

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,
+  delayDuration = 0,
-	...props
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-	return (
+  return (
-		<TooltipPrimitive.Provider
+    <TooltipPrimitive.Provider
-			data-slot="tooltip-provider"
+      data-slot="tooltip-provider"
-			delayDuration={delayDuration}
+      delayDuration={delayDuration}
-			{...props}
+      {...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,
+  className,
-	sideOffset = 0,
+  sideOffset = 0,
-	children,
+  children,
-	...props
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-	return (
+  return (
-		<TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
+      <TooltipPrimitive.Content
-				data-slot="tooltip-content"
+        data-slot="tooltip-content"
-				sideOffset={sideOffset}
+        sideOffset={sideOffset}
-				className={cn(
+        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",
+          "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,
+          className
-				)}
+        )}
-				{...props}
+        {...props}
-			>
+      >
-				{children}
+        {children}
-				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" />
-			</TooltipPrimitive.Content>
+      </TooltipPrimitive.Content>
-		</TooltipPrimitive.Portal>
+    </TooltipPrimitive.Portal>
-	);
+  )
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

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
+			<ScrollArea className={`w-full border whitespace-nowrap ${height}`}>
-				className={`w-full rounded-md border whitespace-nowrap ${height}`}
-			>
 				<Table className={cn("w-full", tableClassName)}>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (

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,

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">
+							<main className="w-full">
-								<div className="mx-auto w-full max-w-7xl">
+								<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>
 	);

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>