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
-cd lst_v3
-npm install
+npm run install --omit=dev
 ```
 
-Rename the .env-example to .env
+Next we want to do an initial db
 
-Update all the fields 
-
-```bash 
+```bash
 npm run dev:db:migrate
-npm run dev
-```
+```
+
+### Run the start command to get all the basic settings and modules installed
+
+1. Run the below
+
+```bash
+npm start
+```
+
+### Creating first user.
+
+ Open http://[SERVER]:[PORT]/api/docs or postman and create a user.
+    - Please do not try to manually enter a new user this is due to how the password is hashed, as well as setting systemAdmin for the first user.
+    - Change the server and port to what you changed in the DB.
+
+### Running as a serivice.
+
+You want to CD into the scripts folder.
+
+```bash
+cd .\scripts\
+```
+
+Next use the example command below to get the service up and running.
+
+-   Options legend
+    -   serviceName = not recommended to change to reduce issues with the update process
+    -   option = use install for the install, but you can use this script later to stop, start, restart the service.
+    -   appPath = where did you extract the server files
+    -   description = no need to change this unless you want it to be something else
+    -   command = do not change this unless you know what your doing and really need to change this.
+
+```powershell
+.\services.ps1 -serviceName "LSTV3_app" -option "install" -appPath "D:\LS_V3T" -description "Logistics Support Tool V3" -command "run start"
+```

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 p.IdArtikelvarianten in ([articles])",
+							? `and pl.ArticleHumanReadableId IN (${data.options.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/db.controller.ts

@@ -1,5 +1,7 @@
 import { drizzle } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
+import * as dockScans from "./schema/dockdoor.scans.schema.js";
+import * as logs from "./schema/logs.schema.js";
 import * as opendockAVCheck from "./schema/opendock_articleSetup.js";
 import * as scanUserSchema from "./schema/scanUsers.js";
 import * as settingsSchema from "./schema/settings.schema.js";
@@ -23,5 +25,7 @@ export const db = drizzle(queryClient, {
 		...scanUserSchema,
 		...settingsSchema,
 		...opendockAVCheck,
+		...logs,
+		...dockScans,
 	},
 });

backend/db/db.listener.ts

@@ -0,0 +1,59 @@
+import postgres from "postgres";
+import { createLogger } from "../logger/logger.controller.js";
+import { handleDbNotification } from "./db.router.js";
+
+const log = createLogger({
+	module: "db",
+	subModule: "notifications",
+});
+
+const CHANNELS = [
+	"logs_inserted",
+	// "labels_inserted",
+	// "dock_scans_inserted",
+] as const;
+
+type DbNotificationChannel = (typeof CHANNELS)[number];
+
+type DbNotificationPayload = {
+	table: string;
+	action: "INSERT" | "UPDATE" | "DELETE";
+	id: string;
+};
+
+export async function startDbNotificationListener() {
+	const sql = postgres({
+		host: `${process.env.DATABASE_HOST}`,
+		port: Number(process.env.DATABASE_PORT),
+		database: `${process.env.DATABASE_DB}`,
+		username: process.env.DATABASE_USER,
+		password: process.env.DATABASE_PASSWORD,
+	});
+
+	for (const channel of CHANNELS) {
+		await sql.listen(channel, async (rawPayload) => {
+			await processNotification(channel, rawPayload);
+		});
+
+		log.info({ stack: { channel } }, `Listening for ${channel}`);
+	}
+}
+
+async function processNotification(
+	channel: DbNotificationChannel,
+	rawPayload: string,
+) {
+	try {
+		const payload = JSON.parse(rawPayload) as DbNotificationPayload;
+
+		await handleDbNotification({
+			channel,
+			payload,
+		});
+	} catch (e) {
+		log.error(
+			{ stack: { channel, rawPayload, e }, notify: true },
+			"Failed processing DB notification",
+		);
+	}
+}

backend/db/db.router.ts

@@ -0,0 +1,41 @@
+import { handleDockScanInsertedNotification } from "../dockdoorScanning/dockdoor.socket.notifications.js";
+import { createLogger } from "../logger/logger.controller.js";
+import { handleLogInsertedNotification } from "../logger/logger.socket.notifications.js";
+
+const log = createLogger({
+	module: "db",
+	subModule: "notifications-router",
+});
+
+type DbNotification = {
+	channel: string;
+	payload: {
+		table: string;
+		action: "INSERT" | "UPDATE" | "DELETE";
+		id: string;
+	};
+};
+
+export async function handleDbNotification(notification: DbNotification) {
+	const { channel, payload } = notification;
+
+	switch (channel) {
+		case "logs_inserted":
+			await handleLogInsertedNotification(payload.id);
+			return;
+
+		// case "labels_inserted":
+		// 	await handleLabelInsertedNotification(payload.id);
+		// 	return;
+
+		case "dock_scan_inserted":
+			await handleDockScanInsertedNotification(payload.id);
+			return;
+
+		default:
+			log.warn(
+				{ stack: notification },
+				`Unhandled DB notification channel: ${channel}`,
+			);
+	}
+}

backend/db/db.setupNotifications.ts

@@ -0,0 +1,99 @@
+import { sql } from "drizzle-orm";
+import { db } from "../db/db.controller.js";
+import { createLogger } from "../logger/logger.controller.js";
+
+const log = createLogger({
+	module: "db",
+	subModule: "notifications",
+});
+
+/**
+ * Creates/updates Postgres notification functions + triggers.
+ *
+ * Safe to run on every app startup.
+ * CREATE OR REPLACE updates the function.
+ * DROP TRIGGER IF EXISTS prevents duplicate triggers.
+ */
+export async function setupDbNotifications() {
+	log.info({}, "Setting up DB notifications");
+
+	await setupLogsNotifications();
+	await setupDockScansNotifications();
+
+	log.info({}, "DB notifications setup complete");
+}
+
+/**
+ * Logs notification setup.
+ *
+ * Flow:
+ * 1. app inserts into logs table
+ * 2. trigger runs after insert
+ * 3. Postgres sends NOTIFY logs_inserted with the new log id
+ * 4. Node listener receives id and fetches/emits full row
+ */
+async function setupLogsNotifications() {
+	await db.execute(sql`
+		CREATE OR REPLACE FUNCTION notify_logs_inserted()
+		RETURNS trigger AS $$
+		BEGIN
+			PERFORM pg_notify(
+				'logs_inserted',
+				json_build_object(
+					'table', TG_TABLE_NAME,
+					'action', TG_OP,
+					'id', NEW.id
+				)::text
+			);
+
+			RETURN NEW;
+		END;
+		$$ LANGUAGE plpgsql;
+	`);
+
+	await db.execute(sql`
+		DROP TRIGGER IF EXISTS logs_inserted_notify_trigger ON logs;
+	`);
+
+	await db.execute(sql`
+		CREATE TRIGGER logs_inserted_notify_trigger
+		AFTER INSERT ON logs
+		FOR EACH ROW
+		EXECUTE FUNCTION notify_logs_inserted();
+	`);
+
+	log.info({}, "Logs DB notification trigger ready");
+}
+
+async function setupDockScansNotifications() {
+	await db.execute(sql`
+		CREATE OR REPLACE FUNCTION notify_dock_scan_inserted()
+		RETURNS trigger AS $$
+		BEGIN
+			PERFORM pg_notify(
+				'dock_scan_inserted',
+				json_build_object(
+					'table', TG_TABLE_NAME,
+					'action', TG_OP,
+					'id', NEW.id
+				)::text
+			);
+
+			RETURN NEW;
+		END;
+		$$ LANGUAGE plpgsql;
+	`);
+
+	await db.execute(sql`
+		DROP TRIGGER IF EXISTS dock_scan_inserted_notify_trigger ON dock_door_scans;
+	`);
+
+	await db.execute(sql`
+		CREATE TRIGGER dock_scan_inserted_notify_trigger
+		AFTER INSERT ON dock_door_scans
+		FOR EACH ROW
+		EXECUTE FUNCTION notify_dock_scan_inserted();
+	`);
+
+	log.info({}, "Dock scan DB notification trigger ready");
+}

backend/db/db.socketSeed.ts

@@ -0,0 +1,21 @@
+import { db } from "./db.controller.js";
+
+export const getRecentLogs = ({
+	module,
+	submodule,
+	limit = 200,
+}: {
+	module?: string | undefined;
+	submodule?: string | undefined;
+	limit?: number | undefined;
+}) => {
+	return db.query.logs.findMany({
+		where: (logs, { and, eq }) =>
+			and(
+				module ? eq(logs.module, module) : undefined,
+				submodule ? eq(logs.subModule, submodule) : undefined,
+			),
+		orderBy: (logs, { desc }) => [desc(logs.createdAt)],
+		limit,
+	});
+};

backend/db/schema/dockdoor.scans.schema.ts

@@ -6,7 +6,7 @@ export const dockDoorScans = pgTable("dock_door_scans", {
 	id: uuid("id").defaultRandom().primaryKey(),
 	dockId: text("dock_id").notNull(),
 	loadingOrder: text("loading_order").notNull(),
-	loadingUnit: text("loading_Unit").unique(), // can be running number or sscc depending on where it came from
+	loadingUnit: text("loading_Unit"), // can be running number or sscc depending on where it came from
 	loadingUnitStatus: text("loading_unit_status").default("loaded"), // TODO: add enums on the status of each load.
 	message: text("message"), // the response it gave when scanning
 	status: text("status").default("active"), // TODO: add in enums for this

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/db/schema/opendock_apt.schema.ts

@@ -16,6 +16,7 @@ export const opendockApt = pgTable(
 		id: uuid("id").defaultRandom().primaryKey(),
 		release: integer("release").notNull().unique("opendock_apt_release_unique"),
 		openDockAptId: text("open_dock_apt_id").notNull(),
+		status: text("status").default("active"),
 		appointment: jsonb("appointment").notNull().default([]),
 		upd_date: timestamp("upd_date", { withTimezone: true })
 			.notNull()

backend/dockdoorScanning/dockdoor.activeLoadingOrders.route.ts

@@ -16,6 +16,7 @@ r.get("/", async (_, res) => {
 				loadingDateTo: format(addDays(new Date(Date.now()), 3), "yyyy-MM-dd"),
 				states: [
 					1, // planned
+					2, // loading
 				],
 				//isCommissioned: true,
 			},

backend/dockdoorScanning/dockdoor.closeLoadingOrder.route.ts

@@ -16,7 +16,58 @@ const endLoading = z.object({
 });
 
 r.post("/", async (req, res) => {
-	// TODO: setup the emitter to just emit the data when we post to the db
+	if (req.body.clear) {
+		// just clear the loading order and clear out all the pallets to keep it clean.
+		await tryCatch(
+			db
+				.update(dockDoorScans)
+				.set({
+					status: "completed",
+					upd_date: sql`NOW()`,
+					upd_user: req.user?.username ?? "lst-dock-system",
+				})
+				.where(
+					req.body.loadingOrder
+						? eq(dockDoorScanners.currentLoadingOrder, req.body.loadingOrder)
+						: undefined,
+				)
+				.returning(),
+		);
+
+		const { data, error } = await tryCatch(
+			db
+				.update(dockDoorScanners)
+				.set({
+					currentLoadingOrder: "",
+					upd_date: sql`NOW()`,
+					upd_user: req.user?.username ?? "lst-dock-system",
+				})
+				.where(eq(dockDoorScanners.dockId, req.body.dockId))
+				.returning(),
+		);
+
+		if (error) {
+			return apiReturn(res, {
+				success: false,
+				level: "error",
+				module: "dockdoor",
+				subModule: "loadingOrder",
+				message: `Failed to updating the dock.`,
+				data: (error as any) ?? [],
+				status: 400,
+			});
+		}
+
+		return apiReturn(res, {
+			success: true,
+			level: "info",
+			module: "dockdoor",
+			subModule: "loadingOrder",
+			message: `Loading order: ${req.body.loadingOrder} was just cleared out do to the process being completed in some other means. \nThis includes any scanned pallets as well.`,
+			data: data ?? [],
+			status: 200,
+		});
+	}
 
 	try {
 		const validated = endLoading.parse(req.body);
@@ -32,13 +83,34 @@ r.post("/", async (req, res) => {
 		})) as any;
 
 		if (orders?.data.errors) {
-			console.log(orders.data.errors);
+			//console.log(orders.data.errors);
+
+			// if (orders.data.errors[0].code === 20) {
+			// 	await db
+			// 		.update(dockDoorScanners)
+			// 		.set({
+			// 			currentLoadingOrder: "",
+			// 			upd_date: sql`NOW()`,
+			// 			upd_user: req.user?.username ?? "lst-dock-system",
+			// 		})
+			// 		.where(eq(dockDoorScanners.dockId, validated.dockId));
+
+			// 	return apiReturn(res, {
+			// 		success: false,
+			// 		level: "warn",
+			// 		module: "dockdoor",
+			// 		subModule: "loadingOrder",
+			// 		message: `Loading order: ${validated.loadingOrder} cleared, It was probable completed by a scanner.. or user...`,
+			// 		data: (orders.data.errors as any) ?? [],
+			// 		status: 200,
+			// 	});
+			// }
 			return apiReturn(res, {
 				success: false,
 				level: "error",
 				module: "dockdoor",
 				subModule: "loadingOrder",
-				message: `Failed to finish the order.`,
+				message: `Failed to finish the order: ${orders.data.errors[0].message}`,
 				data: (orders.data.errors as any) ?? [],
 				status: 400,
 			});
@@ -48,10 +120,13 @@ r.post("/", async (req, res) => {
 			db
 				.update(dockDoorScans)
 				.set({
+					status: "completed",
 					upd_date: sql`NOW()`,
 					upd_user: req.user?.username ?? "lst-dock-system",
 				})
-				.where(eq(dockDoorScanners.currentLoadingOrder, validated.loadingOrder))
+				.where(
+					eq(dockDoorScans.loadingOrder, validated.loadingOrder.toString()),
+				)
 				.returning(),
 		);
 

backend/dockdoorScanning/dockdoor.loadUnits.ts

@@ -19,13 +19,19 @@ type Data = {
 
 const postScan = async (data: any) => {
 	try {
-		await db.insert(dockDoorScans).values({
-			dockId: data.dockId,
-			loadingOrder: data.loadingOrder,
-			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
-		});
+		const newScan = (await db
+			.insert(dockDoorScans)
+			.values({
+				dockId: data.dockId,
+				loadingOrder: data.loadingOrder,
+				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;
+
+		emitToRoom(`dockDoorLoading:${data.dockId}`, newScan[0]);
 	} catch (error) {
 		console.log("Error: ", error);
 	}
@@ -71,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,
@@ -81,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
@@ -94,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({
@@ -105,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}`,
 		});
 	}
 
@@ -132,8 +138,9 @@ const loadUnit = async (data: Data) => {
 				loadingUnit: unitToScan,
 				loadingUnitStatus: "notLoaded",
 				message: prod?.data.errors[0].message,
+				status: "error",
 			});
-			emitToRoom(`dockDoorLoading:${data.dockId}`, prod?.data.errors[0]);
+
 			return returnFunc({
 				success: false,
 				level: "error",
@@ -158,7 +165,7 @@ const loadUnit = async (data: Data) => {
 				loadingUnitStatus: "loaded",
 				message: emitData.message,
 			});
-			emitToRoom(`dockDoorLoading:${data.dockId}`, emitData as any);
+
 			return returnFunc({
 				success: true,
 				level: "info",

backend/dockdoorScanning/dockdoor.socket.notifications.ts

@@ -0,0 +1,17 @@
+import { eq } from "drizzle-orm";
+import { db } from "../db/db.controller.js";
+import { logs } from "../db/schema/logs.schema.js";
+import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
+
+export async function handleDockScanInsertedNotification(id: string) {
+	const row = await db.query.dockDoorScans.findFirst({
+		where: eq(logs.id, id),
+	});
+
+	if (!row) return;
+
+	// send only to the current dock door
+	if (row.dockId) {
+		emitToRoom(`dockDoorLoading:${row.dockId}`, row);
+	}
+}

backend/dockdoorScanning/dockdoor.socket.seed.ts

@@ -0,0 +1,22 @@
+import { db } from "../db/db.controller.js";
+
+export const getRecentDockScans = ({
+	loadingOrder,
+	limit = 200,
+}: {
+	loadingOrder: string;
+	limit?: number | undefined;
+}) => {
+	return db.query.dockDoorScans.findMany({
+		//where: (scans, { eq }) => eq(scans.status, "active"),
+		where: (scans, { and, eq }) =>
+			and(
+				eq(scans.status, "active"),
+				loadingOrder
+					? eq(scans.loadingOrder, loadingOrder)
+					: eq(scans.loadingOrder, "0"),
+			),
+		orderBy: (scans, { desc }) => [desc(scans.upd_date)],
+		limit,
+	});
+};

backend/eom/eom.lastPurchasePrice.route.ts

@@ -1,4 +1,3 @@
-import { formatInTimeZone } from "date-fns-tz";
 import { Router } from "express";
 import { prodQuery } from "../prodSql/prodSqlQuery.controller.js";
 import {

backend/eom/eom.productionConsumption.route.ts

@@ -1,4 +1,3 @@
-import { formatInTimeZone } from "date-fns-tz";
 import { Router } from "express";
 import { prodQuery } from "../prodSql/prodSqlQuery.controller.js";
 import {

backend/logger/logger.controller.ts

@@ -3,7 +3,6 @@ import { Writable } from "node:stream";
 import pino, { type Logger } from "pino";
 import { db } from "../db/db.controller.js";
 import { logs } from "../db/schema/logs.schema.js";
-import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
 import { tryCatch } from "../utils/trycatch.utils.js";
 import { notifySystemIssue } from "./logger.notify.js";
 //import build from "pino-abstract-transport";
@@ -50,10 +49,10 @@ const dbStream = new Writable({
 				notifySystemIssue(obj);
 			}
 
-			if (obj.room) {
-				emitToRoom(obj.room, res.data ? res.data[0] : obj);
-			}
-			emitToRoom("logs", res.data ? res.data[0] : obj);
+			// if (obj.room) {
+			// 	emitToRoom(obj.room, res.data ? res.data[0] : obj);
+			// }
+			// emitToRoom("logs", res.data ? res.data[0] : obj);
 			callback();
 		} catch (err) {
 			console.error("DB log insert error:", err);

backend/logger/logger.socket.notifications.ts

@@ -0,0 +1,24 @@
+import { eq } from "drizzle-orm";
+import { db } from "../db/db.controller.js";
+import { logs } from "../db/schema/logs.schema.js";
+import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
+
+export async function handleLogInsertedNotification(id: string) {
+	const row = await db.query.logs.findFirst({
+		where: eq(logs.id, id),
+	});
+
+	if (!row) return;
+
+	// More targeted rooms.
+	if (row.module) {
+		emitToRoom(`logs:${row.module}`, row);
+	}
+
+	if (row.subModule) {
+		emitToRoom(`logs:${row.subModule}`, row);
+	}
+
+	// Everyone listening to all logs.
+	emitToRoom("logs", row);
+}

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/opendock/openDockRreleaseMonitor.utils.ts

@@ -21,6 +21,7 @@ type Releases = {
 	ReleaseNumber: number;
 	DeliveryState: number;
 	DeliveryDate: Date;
+	ReleaseState: number;
 	LineItemHumanReadableId: number;
 	ArticleAlias: string;
 	LoadingUnits: string;
@@ -38,6 +39,8 @@ const actaulDocks = [
 	{ name: "matrix", dockId: "3e32cbfc-49f4-4138-b491-9d5df9c94754" },
 	{ name: "gerber", dockId: "9109e789-6c15-4cd9-87cb-de1b18627b6d" },
 	{ name: "rb", dockId: "6be02526-6183-4789-a73f-e0aa155e6d1e" },
+	//test server dock
+	{ name: "second", dockId: "e87c92bd-13b4-4f7e-bf5e-b0182884c47a" },
 ];
 const timeZone = process.env.TIMEZONE as string;
 const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000;
@@ -273,11 +276,65 @@ const postRelease = async (release: Releases) => {
 	if (existing) {
 		const id = existing.openDockAptId;
 
+		// deal with canceled stuff as we want this gone off od
+		if (release.ReleaseState === 2 || release.ReleaseState === 4) {
+			// delete the order in od and change the state to canceled in lst
+			try {
+				const response = await axios.delete(
+					`${process.env.OPENDOCK_URL}/appointment/${id}`,
+					{
+						headers: {
+							"content-type": "application/json; charset=utf-8",
+							Authorization: `Bearer ${odToken.odToken}`,
+						},
+					},
+					// {
+					// 	hardDelete: true,
+					// },
+				);
+
+				if (response.status === 400) {
+					log.error({}, response.data.data.message);
+					return;
+				}
+
+				// update the release in the db leaving as insert just incase something weird happened
+				try {
+					await db
+						.update(opendockApt)
+						.set({
+							status: "canceled",
+							upd_date: sql`Now()`,
+						})
+						.where(eq(opendockApt.release, release.ReleaseNumber))
+						.returning();
+
+					log.info({}, `${release.ReleaseNumber} was canceled`);
+				} catch (e) {
+					log.error(
+						{ stack: e },
+						`Error canceling the release: ${release.ReleaseNumber}`,
+					);
+				}
+				// biome-ignore lint/suspicious/noExplicitAny: to many possibilities
+			} catch (e: any) {
+				//console.info(newDockApt);
+				log.error(
+					{ stack: e.response.data },
+					`An error has occurred during canceling of the release: ${release.ReleaseNumber}`,
+				);
+
+				return;
+			}
+
+			return;
+		}
+
 		if (
 			(releaseLoadtypeCheck ||
 				opendDockArticleCheck?.loadType === "drop" ||
 				defaultDock?.value === "drop") &&
-			(release.DeliveryState === 0 || release.DeliveryState === 1)
+			release.DeliveryState === 2
 		) {
 			const setArrival = { ...newDockApt, status: "Arrived" };
 
@@ -391,7 +448,12 @@ const postRelease = async (release: Releases) => {
 
 				return;
 			}
-		} else {
+			// changing to only trigger the change if the state is 2 meaning it has a scan to it and already in progress of being loaded.
+		} else if (
+			release.DeliveryState === 0 ||
+			release.DeliveryState === 1 ||
+			release.DeliveryState === 2
+		) {
 			try {
 				const response = await axios.patch(
 					`${process.env.OPENDOCK_URL}/appointment/${id}`,
@@ -445,6 +507,117 @@ const postRelease = async (release: Releases) => {
 
 				return;
 			}
+			// if we are finished we need to set to completed
+		} else if (release.DeliveryState === 3 || release.DeliveryState === 4) {
+			try {
+				const response = await axios.patch(
+					`${process.env.OPENDOCK_URL}/appointment/${id}`,
+					newDockApt,
+					{
+						headers: {
+							"content-type": "application/json; charset=utf-8",
+							Authorization: `Bearer ${odToken.odToken}`,
+						},
+					},
+				);
+
+				if (response.status === 400) {
+					log.error({}, response.data.data.message);
+					return;
+				}
+
+				// update the release in the db leaving as insert just incase something weird happened
+				try {
+					await db
+						.insert(opendockApt)
+						.values({
+							release: release.ReleaseNumber,
+							openDockAptId: response.data.data.id,
+							appointment: response.data.data,
+						})
+						.onConflictDoUpdate({
+							target: opendockApt.release,
+							set: {
+								openDockAptId: response.data.data.id,
+								appointment: response.data.data,
+								status: "completed",
+								upd_date: sql`NOW()`,
+							},
+						})
+						.returning();
+
+					log.info({}, `${release.ReleaseNumber} was updated`);
+				} catch (e) {
+					log.error(
+						{ stack: e },
+						`Error updating the release: ${release.ReleaseNumber}`,
+					);
+				}
+				// biome-ignore lint/suspicious/noExplicitAny: to many possibilities
+			} catch (e: any) {
+				//console.info(newDockApt);
+				log.error(
+					{ stack: e.response.data },
+					`An error has occurred during patching of the release: ${release.ReleaseNumber}`,
+				);
+
+				return;
+			}
+		}
+	} else if (opendDockArticleCheck?.loadType === "live") {
+		try {
+			const response = await axios.post(
+				`${process.env.OPENDOCK_URL}/appointment`,
+				newDockApt,
+				{
+					headers: {
+						"content-type": "application/json; charset=utf-8",
+						Authorization: `Bearer ${odToken.odToken}`,
+					},
+				},
+			);
+
+			// we need the id,release#,status from this response, store it in lst, check if we have a release so we can just update it.
+			// this will be utilized when we are listening for the changes to the apts. that way we can update the state to arrived. we will run our own checks on this guy during the incoming messages.
+
+			if (response.status === 400) {
+				log.error({}, response.data.data.message);
+				return;
+			}
+
+			// the response to make it simple we want response.data.id, response.data.relNumber, status will be defaulted to Scheduled if we created it here.
+			// TODO: add this release data to our db. but save it in json format and well parse it out. that way we future proof it and have everything in here vs just a few things
+			//console.info(response.data.data, "Was Created");
+			try {
+				await db
+					.insert(opendockApt)
+					.values({
+						release: release.ReleaseNumber,
+						openDockAptId: response.data.data.id,
+						appointment: response.data.data,
+					})
+					.onConflictDoUpdate({
+						target: opendockApt.release,
+						set: {
+							openDockAptId: response.data.data.id,
+							appointment: response.data.data,
+							upd_date: sql`NOW()`,
+						},
+					})
+					.returning();
+
+				log.info({}, `${release.ReleaseNumber} was created`);
+			} catch (e) {
+				log.error({ stack: e }, "Error creating new release");
+			}
+			// biome-ignore lint/suspicious/noExplicitAny: to many possibilities
+		} catch (e: any) {
+			log.error(
+				{ stack: e?.response?.data },
+				`Error posting new release to opendock, ${release.ReleaseNumber}`,
+			);
+
+			return;
 		}
 	} else if (
 		(releaseLoadtypeCheck ||

backend/opendock/openDockUndoLastStatus.ts

@@ -0,0 +1,73 @@
+import axios from "axios";
+import { eq, sql } from "drizzle-orm";
+import { Router } from "express";
+import { db } from "../db/db.controller.js";
+import { opendockApt } from "../db/schema/opendock_apt.schema.js";
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { odToken } from "./opendock.utils.js";
+
+const r = Router();
+
+r.patch("/:id", async (req, res) => {
+	//const limit
+	const { id } = req.params;
+
+	try {
+		const response = await axios.patch(
+			`${process.env.OPENDOCK_URL}/appointment/${id}/undo-latest-status`,
+			{
+				headers: {
+					"content-type": "application/json; charset=utf-8",
+					Authorization: `Bearer ${odToken.odToken}`,
+				},
+			},
+		);
+
+		if (response.status === 400) {
+			return apiReturn(res, {
+				success: false,
+				level: "error",
+				module: "opendock",
+				subModule: "apt",
+				message: response.data.data.message,
+				data: [],
+				status: 400,
+			});
+		}
+
+		// update the release in the db
+		const { data } = await tryCatch(
+			db
+				.update(opendockApt)
+				.set({
+					appointment: response.data.data,
+					upd_date: sql`NOW()`,
+				})
+				.where(eq(opendockApt.openDockAptId, id)),
+		);
+
+		return apiReturn(res, {
+			success: true,
+			level: "info",
+			module: "opendock",
+			subModule: "apt",
+			message: `The release was reverted to the last state.`,
+			data: data as any,
+			status: 200,
+		});
+		// biome-ignore lint/suspicious/noExplicitAny: to many possibilities
+	} catch (e: any) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "opendock",
+			subModule: "apt",
+			message: `An error updating the release in opendock`,
+			data: e.response.data,
+			status: 400,
+		});
+	}
+});
+
+export default r;

backend/opendock/opendock.routes.ts

@@ -1,9 +1,9 @@
 import type { Express } from "express";
 import { requireAuth } from "../middleware/auth.middleware.js";
 import { featureCheck } from "../middleware/featureActive.middleware.js";
+import undo from "./openDockUndoLastStatus.js";
 import articleCheck from "./opendock.articleCheck.route.js";
-
-import getApt from "./opendockGetRelease.route.js";
+import getApt from "./opendockRelease.route.js";
 
 export const setupOpendockRoutes = (baseUrl: string, app: Express) => {
 	//setup all the routes
@@ -21,4 +21,11 @@ export const setupOpendockRoutes = (baseUrl: string, app: Express) => {
 		requireAuth,
 		articleCheck,
 	);
+
+	app.use(
+		`${baseUrl}/api/opendock/undo-latest-status`,
+		featureCheck("opendock_sync"),
+		requireAuth,
+		undo,
+	);
 };

backend/opendock/opendock.utils.ts

@@ -12,7 +12,7 @@ export let odToken: ODToken = {
 };
 
 export const getToken = async () => {
-	const log = createLogger({ module: "opendock", subModule: "releaseMonitor" });
+	const log = createLogger({ module: "opendock", subModule: "auth" });
 	try {
 		const { status, data } = await axios.post(
 			`${process.env.OPENDOCK_URL}/auth/login`,
@@ -29,7 +29,8 @@ export const getToken = async () => {
 
 		odToken = { odToken: data.access_token, tokenDate: new Date() };
 		log.info({ odToken }, "Token added");
+		return;
 	} catch (e) {
-		log.error({ error: e }, "Error getting/refreshing token");
+		log.error({ stack: e }, "Error getting/refreshing token");
 	}
 };

backend/opendock/opendockGetRelease.route.ts

@@ -1,40 +0,0 @@
-import { desc, gte, sql } from "drizzle-orm";
-import { Router } from "express";
-import { db } from "../db/db.controller.js";
-import { opendockApt } from "../db/schema/opendock_apt.schema.js";
-import { apiReturn } from "../utils/returnHelper.utils.js";
-import { tryCatch } from "../utils/trycatch.utils.js";
-
-const r = Router();
-
-r.get("/", async (_, res) => {
-	//const limit
-
-	const daysCreated = 30;
-
-	const { data } = await tryCatch(
-		db
-			.select()
-			.from(opendockApt)
-			.where(
-				gte(
-					opendockApt.createdAt,
-					sql.raw(`NOW() - INTERVAL '${daysCreated} days'`),
-				),
-			)
-			.orderBy(desc(opendockApt.createdAt))
-			.limit(500),
-	);
-
-	apiReturn(res, {
-		success: true,
-		level: "info",
-		module: "opendock",
-		subModule: "apt",
-		message: `The first ${data?.length} Apt(s) that were created in the last ${daysCreated} `,
-		data: data ?? [],
-		status: 200,
-	});
-});
-
-export default r;

backend/opendock/opendockRelease.route.ts

@@ -0,0 +1,124 @@
+import axios from "axios";
+import { and, desc, eq, gte, sql } from "drizzle-orm";
+import { Router } from "express";
+import { db } from "../db/db.controller.js";
+import { opendockApt } from "../db/schema/opendock_apt.schema.js";
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { odToken } from "./opendock.utils.js";
+
+const r = Router();
+
+r.get("/", async (req, res) => {
+	//const limit
+
+	const daysCreated = req.query.daysCreated ?? 30;
+
+	const { data } = await tryCatch(
+		db
+			.select()
+			.from(opendockApt)
+			.where(
+				and(
+					gte(
+						opendockApt.upd_date,
+						sql.raw(`NOW() - INTERVAL '${daysCreated} days'`),
+					),
+					eq(opendockApt.status, "active"),
+				),
+			)
+			.orderBy(desc(opendockApt.upd_date))
+			.limit(500),
+	);
+
+	apiReturn(res, {
+		success: true,
+		level: "info",
+		module: "opendock",
+		subModule: "apt",
+		message: `The first ${data?.length} Apt(s) that were created in the last ${daysCreated} `,
+		data: data ?? [],
+		status: 200,
+	});
+});
+
+r.delete("/:id", async (req, res) => {
+	const { id } = req.params;
+
+	const { data: releaseInfo } = (await tryCatch(
+		db
+			.select()
+			.from(opendockApt)
+			.where(eq(opendockApt.id, id as string)),
+	)) as any;
+
+	if (releaseInfo.length === 0) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "opendock",
+			subModule: "apt",
+			message: "Invalid release id passed over please try again",
+			data: [],
+			status: 400,
+		});
+	}
+
+	try {
+		const response = await axios.delete(
+			`${process.env.OPENDOCK_URL}/appointment/${releaseInfo[0].appointment.id}`,
+			{
+				headers: {
+					"content-type": "application/json; charset=utf-8",
+					Authorization: `Bearer ${odToken.odToken}`,
+				},
+			},
+			// {
+			// 	hardDelete: true,
+			// },
+		);
+
+		if (response.status === 400) {
+			return apiReturn(res, {
+				success: false,
+				level: "error",
+				module: "opendock",
+				subModule: "apt",
+				message: response.data.data.message,
+				data: [],
+				status: 400,
+			});
+		}
+
+		// update the release in the db leaving as insert just in-case something weird happened
+		const { data } = await tryCatch(
+			db
+				.delete(opendockApt)
+				.where(eq(opendockApt.id, id as string))
+				.returning(),
+		);
+
+		return apiReturn(res, {
+			success: true,
+			level: "info",
+			module: "opendock",
+			subModule: "apt",
+			message: `The release was deleted, this is un unrecoverable`,
+			data: data as any,
+			status: 200,
+		});
+		// biome-ignore lint/suspicious/noExplicitAny: to many possibilities
+	} catch (e: any) {
+		return apiReturn(res, {
+			success: false,
+			level: "error",
+			module: "opendock",
+			subModule: "apt",
+			message: `An error deleting the release in opendock`,
+			data: e.response.data,
+			status: 400,
+		});
+	}
+});
+
+export default r;

backend/prodSql/queries/datamart.deliveryByDateRange.sql

@@ -1,74 +1,73 @@
 use [test1_AlplaPROD2.0_Read]
 
-DECLARE @StartDate DATE = '[startDate]' -- 2025-1-1
-DECLARE @EndDate DATE = '[endDate]' -- 2025-1-31
-SELECT 
-r.[ArticleHumanReadableId]
-      ,[ReleaseNumber]
-	  ,h.CustomerOrderNumber
-	  ,x.CustomerLineItemNumber
-      ,[CustomerReleaseNumber]
-      ,[ReleaseState]
-      ,[DeliveryState]
-	  ,ea.JournalNummer as BOL_Number
-      ,[ReleaseConfirmationState]
-      ,[PlanningState]
+DECLARE @StartDate DATE = '[startDate]'
+DECLARE @EndDate   DATE = '[endDate]'
+
+;WITH bol_20 AS (   -- 2.0 BOL, one per release (newest doc wins)
+    SELECT  pos.ReleaseId,
+            dd.JournalNumber,
+            ROW_NUMBER() OVER (PARTITION BY pos.ReleaseId
+                               ORDER BY dd.ShippingDate DESC) AS rn
+    FROM    [outboundDelivery].[DeliveryDocumentPosition] (nolock) pos
+    JOIN    [outboundDelivery].[DeliveryDocument]         (nolock) dd
+              ON dd.Id = pos.DeliveryDocumentId
+    -- WHERE dd.DocumentType = <BOL value>   -- see note below
+)
+SELECT
+      r.[ArticleHumanReadableId]
+     ,[ReleaseNumber]
+     ,h.CustomerOrderNumber
+     ,x.CustomerLineItemNumber
+     ,[CustomerReleaseNumber]
+     ,[ReleaseState]
+     ,[DeliveryState]
+     ,COALESCE(ea.JournalNummer, bol_20.JournalNumber) AS BOL_Number   -- 1.0 or 2.0
+     ,[ReleaseConfirmationState]
+     ,[PlanningState]
       ,format(r.[OrderDate], 'yyyy-MM-dd HH:mm') as OrderDate
       --,r.[OrderDate]
       ,FORMAT(r.[DeliveryDate], 'yyyy-MM-dd HH:mm') as DeliveryDate
       --,r.[DeliveryDate]
       ,FORMAT(r.[LoadingDate], 'yyyy-MM-dd HH:mm') as LoadingDate
       --,r.[LoadingDate]
-      ,[Quantity]
-      ,[DeliveredQuantity]
-      ,r.[AdditionalInformation1]
-      ,r.[AdditionalInformation2]
-      ,[TradeUnits]
-      ,[LoadingUnits]
-      ,[Trucks]
-      ,[LoadingToleranceType]
-      ,[SalesPrice]
-      ,[Currency]
-      ,[QuantityUnit]
-      ,[SalesPriceRemark]
-      ,r.[Remark]
-      ,[Irradiated]
-      ,r.[CreatedByEdi]
-      ,[DeliveryAddressHumanReadableId]
-	  ,DeliveryAddressDescription
-      ,[CustomerArtNo]
-      ,[TotalPrice]
-      ,r.[ArticleAlias]
+     ,[Quantity]
+     ,[DeliveredQuantity]
+     ,r.[AdditionalInformation1]
+     ,r.[AdditionalInformation2]
+     ,[TradeUnits]
+     ,[LoadingUnits]
+     ,[Trucks]
+     ,[LoadingToleranceType]
+     ,[SalesPrice]
+     ,[Currency]
+     ,[QuantityUnit]
+     ,[SalesPriceRemark]
+     ,r.[Remark]
+     ,[Irradiated]
+     ,r.[CreatedByEdi]
+     ,[DeliveryAddressHumanReadableId]
+     ,DeliveryAddressDescription
+     ,[CustomerArtNo]
+     ,[TotalPrice]
+     ,r.[ArticleAlias]
+FROM [order].[Release] (nolock) AS r
+LEFT JOIN [order].LineItem AS x ON r.LineItemId = x.id
+LEFT JOIN [order].Header   AS h ON x.HeaderId   = h.id
 
-  FROM [order].[Release] (nolock) as r
+-- 1.0 BOL (legacy) — unchanged
+LEFT JOIN AlplaPROD_test1.dbo.V_LadePlanungenLadeAuftragAbruf (nolock) AS zz
+       ON zz.AbrufIdAuftragsAbruf = r.ReleaseNumber
+LEFT JOIN (
+    SELECT * FROM (
+        SELECT ROW_NUMBER() OVER (PARTITION BY IdJournal ORDER BY add_date DESC) AS RowNum, *
+        FROM [AlplaPROD_test1].[dbo].[T_Lieferungen] (nolock)
+    ) t WHERE RowNum = 1
+) AS ea ON zz.IdLieferschein = ea.IdJournal
 
- left join
- [order].LineItem as x on 
+-- 2.0 BOL (new)
+LEFT JOIN bol_20 ON bol_20.ReleaseId = r.Id AND bol_20.rn = 1
 
- r.LineItemId = x.id
-
- left join
- [order].Header as h on
- x.HeaderId = h.id
-
- --bol stuff
- left join 
- AlplaPROD_test1.dbo.V_LadePlanungenLadeAuftragAbruf (nolock) as zz 
- on zz.AbrufIdAuftragsAbruf = r.ReleaseNumber
-
- left join
-(select * from (SELECT 
-ROW_NUMBER() OVER (PARTITION BY IdJournal ORDER BY add_date DESC) AS RowNum
-,*
-  FROM [AlplaPROD_test1].[dbo].[T_Lieferungen] (nolock)) x
-
-  where  RowNum = 1) as ea on 
- zz.IdLieferschein = ea.IdJournal
-
-where 
---r.ReleaseNumber = 1452
-
-r.DeliveryDate between @StartDate AND @EndDate
+WHERE r.DeliveryDate BETWEEN @StartDate AND @EndDate
 and DeliveredQuantity > 0
 --and r.ArticleHumanReadableId in ([articles]) 
 --and Journalnummer = 169386

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

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,12 +1,15 @@
 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";
+import { setupDbNotifications } from "./db/db.setupNotifications.js";
 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";
@@ -30,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();
 
@@ -43,12 +47,13 @@ const start = async () => {
 	startTCPServer();
 	connectProdSql();
 	connectGPSql();
+	startDbNotificationListener();
 
 	// trigger startup processes these must run before anything else can run
 	await baseSettingValidationCheck();
 	systemSettings = await db.select().from(settings);
 
-	//when starting up long lived features the name must match the setting name.
+	// when starting up long lived features the name must match the setting name.
 	// also we always want to have long lived processes inside a setting check.
 	setTimeout(() => {
 		if (systemSettings.filter((n) => n.name === "opendock_sync")[0]?.active) {
@@ -89,6 +94,7 @@ const start = async () => {
 		startNotifications();
 		serversChecks();
 		aggregateRouteHitsForBusinessDay();
+		setupDbNotifications();
 
 		// can be removed at a later date
 		sqlJobCleanUp();

backend/socket.io/roomCache.socket.ts

@@ -1,8 +0,0 @@
-import type { RoomId } from "./roomDefinitions.socket.js";
-
-export const MAX_HISTORY = 50;
-export const FLUSH_INTERVAL = 100; // 50ms change higher if needed
-
-export const roomHistory = new Map<RoomId, unknown[]>();
-export const roomBuffers = new Map<RoomId, any[]>();
-export const roomFlushTimers = new Map<RoomId, NodeJS.Timeout>();

backend/socket.io/roomDefinitions.socket.ts

@@ -1,121 +0,0 @@
-import { desc, eq } from "drizzle-orm";
-import { db } from "../db/db.controller.js";
-import { logs } from "../db/schema/logs.schema.js";
-import { ppoRun } from "../warehousing/warehousing.ppooMonitor.js";
-import { dockDoorScans } from "../db/schema/dockdoor.scans.schema.js";
-
-type RoomDefinition<T = unknown> = {
-	seed: (limit: number) => Promise<T[]>;
-};
-
-export type StaticRoomId =
-	| "logs"
-	| "labels"
-	| "admin"
-	| "admin:build"
-	| "ppoo"
-	| "dockDoorLoading:2";
-export type DynamicRoomId = `dockDoorLoading:${string}`;
-export type RoomId = StaticRoomId | DynamicRoomId;
-
-export type RoomConfig = {
-	requiresAuth?: boolean;
-	role?: string[];
-	seed?: (limit: number, roomId: RoomId) => Promise<unknown[]>;
-};
-
-export const protectedRooms: Record<StaticRoomId, RoomConfig> = {
-	logs: { requiresAuth: true, role: ["admin", "systemAdmin"] },
-	//admin: { requiresAuth: false, role: ["admin", "systemAdmin"] },
-	labels: {},
-	admin: {},
-	"admin:build": {},
-	ppoo: {},
-	"dockDoorLoading:2": {},
-};
-
-export function getRoomConfig(roomId: string): RoomConfig | null {
-	if (roomId in protectedRooms) {
-		return protectedRooms[roomId as StaticRoomId];
-	}
-
-	if (roomId.startsWith("dockDoorLoading:")) {
-		const dockId = roomId.split(":")[1];
-
-		if (!dockId) return null;
-
-		return {
-			requiresAuth: true,
-			role: ["admin", "systemAdmin", "dockDoor"],
-		};
-	}
-
-	return null;
-}
-
-export const roomDefinition: Record<RoomId, RoomDefinition> = {
-	logs: {
-		seed: async (limit) => {
-			try {
-				const rows = await db
-					.select()
-					.from(logs)
-					.orderBy(desc(logs.createdAt))
-					.limit(limit);
-
-				return rows; //.reverse();
-			} catch (e) {
-				console.error("Failed to seed logs:", e);
-				return [];
-			}
-		},
-	},
-
-	labels: {
-		seed: async (limit) => {
-			console.info(limit);
-			return [];
-		},
-	},
-	admin: {
-		seed: async (limit) => {
-			console.info(limit);
-			return [];
-		},
-	},
-	"admin:build": {
-		seed: async (limit) => {
-			console.info(limit);
-			return [];
-		},
-	},
-	ppoo: {
-		seed: async (limit) => {
-			console.log(limit);
-			return {
-				type: "snapshot",
-				items: await ppoRun(),
-				createdAt: new Date().toISOString(),
-			} as any;
-		},
-	},
-
-	// TODO: add in dynamic room seeding
-	"dockDoorLoading:2": {
-		seed: async (limit) => {
-			console.log(limit);
-			try {
-				const rows = await db
-					.select()
-					.from(dockDoorScans).where(eq(dockDoorScans.status, "active"))
-					.orderBy(desc(dockDoorScans.upd_date))
-					.limit(limit);
-
-				return rows; //.reverse();
-			} catch (e) {
-				console.error("Failed to seed logs:", e);
-				return [];
-			}
-		},
-	},
-};

backend/socket.io/roomEmitter.socket.ts

@@ -1,27 +1,73 @@
 // the emitter setup
+// TODO: validate if we want to add event back in later..
+// let emitFn: ((roomId: string, event: string, payload: unknown) => void) | null =
+// 	null;
 
-import type { RoomId } from "./roomDefinitions.socket.js";
+import { createLogger } from "../logger/logger.controller.js";
 
-let addDataToRoom: ((roomId: RoomId, payload: unknown[]) => void) | null = null;
+type QueuedPayload = unknown;
+
+let emitFn: ((roomId: string, payload: QueuedPayload[]) => void) | null = null;
+
+const queues = new Map<string, QueuedPayload[]>();
+const timers = new Map<string, NodeJS.Timeout>();
+
+const FLUSH_MS = 500;
+const MAX_QUEUE_SIZE = 200;
 
 export const registerEmitter = (
-	fn: (roomId: RoomId, payload: unknown[]) => void,
+	fn: (roomId: string, payload: QueuedPayload) => void,
 ) => {
-	addDataToRoom = fn;
+	emitFn = fn;
 };
 
-export const emitToRoom = (roomId: RoomId, payload: unknown[]) => {
-	if (!addDataToRoom) {
+export const emitToRoom = (roomId: string, payload: QueuedPayload) => {
+	const log = createLogger({ module: "socket.io", subModule: "emitter" });
+	if (!emitFn) {
 		console.error("Socket emitter not initialized");
 		return;
 	}
 
-	addDataToRoom(roomId, payload);
+	const queue = queues.get(roomId) ?? [];
+
+	if (queue.length > MAX_QUEUE_SIZE) {
+		log.error(
+			{ stack: { roomId, size: queue.length }, notify: true },
+			`Socket queue exceeded max size for ${roomId}`,
+		);
+	}
+	queue.push(payload);
+	queues.set(roomId, queue);
+
+	if (timers.has(roomId)) return;
+
+	const timer = setTimeout(() => {
+		try {
+			const payloads = queues.get(roomId) ?? [];
+
+			if (payloads.length === 0) return;
+			emitFn?.(roomId, payloads);
+
+			queues.delete(roomId);
+		} catch (e) {
+			console.error("Socket emit failed", { roomId, e });
+		} finally {
+			timers.delete(roomId);
+		}
+	}, FLUSH_MS);
+
+	timers.set(roomId, timer);
 };
 
 /*
-import { emitToRoom } from "../socket/socketEmitter.js";
-// room name
-// its payload
-emitToRoom("logs", newLogRow);
+example emitToRoom(room, payload)
+
+payload can be anything json serilized example below.
+
+emitToRoom("inventory:ppoo", {
+  type: "snapshot",
+  location: "ppoo",
+  items,
+  createdAt: new Date().toISOString(),
+});
 */

backend/socket.io/roomService.socket.ts

@@ -1,88 +0,0 @@
-import type { Server } from "socket.io";
-import { createLogger } from "../logger/logger.controller.js";
-import {
-	FLUSH_INTERVAL,
-	MAX_HISTORY,
-	roomBuffers,
-	roomFlushTimers,
-	roomHistory,
-} from "./roomCache.socket.js";
-import { type RoomId, roomDefinition } from "./roomDefinitions.socket.js";
-
-// get the db data if not exiting already
-const log = createLogger({ module: "socket.io", subModule: "roomService" });
-let ioRef: Server | null = null;
-
-export const registerRoomService = (io: Server) => {
-	ioRef = io;
-};
-
-export const hasRoomMembers = (roomId: string): boolean => {
-	if (!ioRef) return false;
-
-	return (ioRef.sockets.adapter.rooms.get(roomId)?.size ?? 0) > 0;
-};
-
-export const getRoomMemberCount = (roomId: string): number => {
-	if (!ioRef) return 0;
-
-	return ioRef.sockets.adapter.rooms.get(roomId)?.size ?? 0;
-};
-export const preseedRoom = async (roomId: RoomId) => {
-	if (roomHistory.has(roomId)) {
-		return roomHistory.get(roomId);
-	}
-
-	const roomDef = roomDefinition[roomId] as any;
-
-	if (!roomDef) {
-		log.error({}, `Room ${roomId} is not defined`);
-	}
-
-	const latestData = await roomDef.seed(MAX_HISTORY);
-
-	roomHistory.set(roomId, latestData);
-
-	return latestData;
-};
-
-export const createRoomEmitter = (io: Server) => {
-	const addDataToRoom = <T>(roomId: RoomId, payload: T[]) => {
-		if (!roomHistory.has(roomId)) {
-			roomHistory.set(roomId, []);
-		}
-
-		const history = roomHistory.get(roomId)!;
-		history?.push(payload);
-
-		if (history?.length > MAX_HISTORY) {
-			history?.shift();
-		}
-
-		if (!roomBuffers.has(roomId)) {
-			roomBuffers.set(roomId, []);
-		}
-
-		roomBuffers.get(roomId)!.push(payload);
-
-		if (!roomFlushTimers.has(roomId)) {
-			const timer = setTimeout(() => {
-				const buffered = roomBuffers.get(roomId) || [];
-
-				if (buffered.length > 0) {
-					io.to(roomId).emit("room-update", {
-						roomId,
-						payloads: buffered, // ✅ array now
-					});
-				}
-
-				roomBuffers.set(roomId, []);
-				roomFlushTimers.delete(roomId);
-			}, FLUSH_INTERVAL);
-
-			roomFlushTimers.set(roomId, timer);
-		}
-	};
-
-	return { addDataToRoom };
-};

backend/socket.io/serverSetup.ts

@@ -1,33 +1,16 @@
 import type { Server as HttpServer } from "node:http";
-//import { dirname, join } from "node:path";
-//import { fileURLToPath } from "node:url";
 import { instrument } from "@socket.io/admin-ui";
 import { Server } from "socket.io";
 
 import { createLogger } from "../logger/logger.controller.js";
+import { auth } from "../utils/auth.utils.js";
 import { allowedOrigins } from "../utils/cors.utils.js";
 import { registerEmitter } from "./roomEmitter.socket.js";
-import {
-	createRoomEmitter,
-	preseedRoom,
-	registerRoomService,
-} from "./roomService.socket.js";
+import { registerHasRoomMembers } from "./socket.manager.js";
+import { isRoomKey, roomConfigs } from "./socket.roomConfig.js";
 
-//const __filename = fileURLToPath(import.meta.url);
-//const __dirname = dirname(__filename);
 const log = createLogger({ module: "socket.io", subModule: "setup" });
 
-import { auth } from "../utils/auth.utils.js";
-//import type { Session, User } from "better-auth"; // adjust if needed
-import { getRoomConfig } from "./roomDefinitions.socket.js";
-
-// declare module "socket.io" {
-// 	interface Socket {
-// 		user?: User | any;
-// 		session?: Session;
-// 	}
-// }
-
 export const setupSocketIORoutes = (baseUrl: string, server: HttpServer) => {
 	const io = new Server(server, {
 		path: `${baseUrl}/api/socket.io`,
@@ -37,12 +20,16 @@ export const setupSocketIORoutes = (baseUrl: string, server: HttpServer) => {
 		},
 	});
 
-	// manage members of the rooms.
-	registerRoomService(io);
+	registerHasRoomMembers((roomId) => {
+		return (io.sockets.adapter.rooms.get(roomId)?.size ?? 0) > 0;
+	});
 
-	// ✅ Create emitter instance
-	const { addDataToRoom } = createRoomEmitter(io);
-	registerEmitter(addDataToRoom);
+	registerEmitter((roomId, payloads) => {
+		io.to(roomId).emit("room-update", {
+			roomId,
+			payloads,
+		});
+	});
 
 	io.use(async (socket, next) => {
 		try {
@@ -85,79 +72,95 @@ export const setupSocketIORoutes = (baseUrl: string, server: HttpServer) => {
 			version: "1.0.0",
 		});
 
-		// s.on("join-room", async (rn) => {
-		// 	const config = protectedRooms[rn];
+		s.on("join-room", async ({ room, params }) => {
+			if (!isRoomKey(room)) return;
 
-		// 	if (config?.requiresAuth && !s.user) {
-		// 		return s.emit("room-error", {
-		// 			room: rn,
-		// 			message: "Authentication required",
-		// 		});
-		// 	}
-
-		// 	const roles = Array.isArray(config?.role) ? config?.role : [config?.role];
-
-		// 	//if (config?.role && s.user?.role !== config.role) {
-		// 	if (config?.role && !roles.includes(s.user?.role)) {
-		// 		return s.emit("room-error", {
-		// 			roomId: rn,
-		// 			message: `Not authorized to be in room: ${rn}`,
-		// 		});
-		// 	}
-		// 	s.join(rn);
-
-		// 	// get room seeded
-		// 	const history = await preseedRoom(rn);
-		// 	log.info({}, `User joined ${rn}: ${s.id}`);
-		// 	// send the intial data
-		// 	s.emit("room-update", {
-		// 		roomId: rn,
-		// 		payloads: history,
-		// 		initial: true,
-		// 	});
-		// });
-
-		s.on("join-room", async (rn: string) => {
-			const config = getRoomConfig(rn);
+			const config = roomConfigs[room];
 
 			if (!config) {
 				return s.emit("room-error", {
-					roomId: rn,
-					message: `Unknown room: ${rn}`,
+					roomId: room,
+					message: `Unknown room: ${room}`,
 				});
 			}
 
-			if (config.requiresAuth && !s.user) {
+			const actualRoom = config.buildRoom
+				? config.buildRoom(params)
+				: (room as any);
+
+			const allowed = config.canJoin
+				? await config.canJoin({
+						socket: s,
+						user: s.user,
+						room,
+						actualRoom,
+						params,
+					})
+				: true;
+
+			if (!allowed) {
 				return s.emit("room-error", {
-					roomId: rn,
-					message: "Authentication required",
+					roomId: room,
+					message: `Not authorized to be in room: ${room}`,
 				});
 			}
 
-			const roles = Array.isArray(config.role) ? config.role : [];
+			await s.join(actualRoom);
 
-			if (roles.length > 0 && !roles.includes(s.user?.role)) {
-				return s.emit("room-error", {
-					roomId: rn,
-					message: `Not authorized to be in room: ${rn}`,
-				});
-			}
-
-			s.join(rn);
-
-			const history = await preseedRoom(rn as any);
-
-			log.info({}, `User joined ${rn}: ${s.id}`);
-
-			s.emit("room-update", {
-				roomId: rn,
-				payloads: history,
-				initial: true,
+			s.emit("room-joined", {
+				room,
+				roomId: actualRoom,
+				params,
 			});
+
+			if (config.seed) {
+				const payloads = await config.seed({
+					room,
+					actualRoom,
+					params,
+					user: s.user,
+				});
+
+				s.emit("room-update", {
+					room,
+					roomId: actualRoom,
+					type: "snapshot",
+					payloads,
+				});
+			}
+
+			log.info(
+				{ room, actualRoom, params },
+				`User joined ${actualRoom}: ${s.id}`,
+			);
 		});
-		s.on("leave-room", (room) => {
-			s.leave(room);
-			log.info({}, `${s.id} left room: ${room}`);
+		// s.on("leave-room", (room) => {
+		// 	s.leave(room);
+		// 	log.info({}, `${s.id} left room: ${JSON.stringify(room)}`);
+		// });
+		s.on("leave-room", async ({ room, params }) => {
+			if (!isRoomKey(room)) return;
+
+			const config = roomConfigs[room];
+
+			if (!config) return;
+
+			const actualRoom = config.buildRoom
+				? config.buildRoom(params)
+				: (room as any);
+
+			await s.leave(actualRoom);
+
+			s.emit("room-left", {
+				room,
+				roomId: actualRoom,
+				params,
+			});
+
+			log.info(
+				{ room, actualRoom, params },
+				`${s.id} left room: ${actualRoom}`,
+			);
 		});
 	});
 

backend/socket.io/socket.manager.ts

@@ -0,0 +1,10 @@
+let hasMembersFn: ((roomId: string) => boolean) | null = null;
+
+export const registerHasRoomMembers = (fn: (roomId: string) => boolean) => {
+	hasMembersFn = fn;
+};
+
+export const hasRoomMembers = (roomId: string) => {
+	if (!hasMembersFn) return false;
+	return hasMembersFn(roomId);
+};

backend/socket.io/socket.roomConfig.ts

@@ -0,0 +1,117 @@
+import { getRecentLogs } from "../db/db.socketSeed.js";
+import { getRecentDockScans } from "../dockdoorScanning/dockdoor.socket.seed.js";
+
+export type RoomKey =
+	| "logs"
+	| "labels"
+	| "admin"
+	| "inventory"
+	| "dockDoorLoading";
+
+export type SocketUser = {
+	id: string;
+	email?: string;
+	role?: string;
+};
+
+export type CanJoinArgs = {
+	socket: any;
+	user?: SocketUser;
+	room: string;
+	actualRoom: string;
+	params?: Record<string, unknown>;
+};
+
+type RoomConfig = {
+	//requiresAuth?: boolean;
+	//roles?: string[];
+	canJoin?: (args: CanJoinArgs) => boolean | Promise<boolean>;
+	buildRoom?: (params?: Record<string, unknown>) => string | null;
+	seed?: (args: {
+		room: string;
+		actualRoom: string;
+		params?: Record<string, unknown>;
+		user?: SocketUser;
+	}) => Promise<unknown[]>;
+};
+
+export function isRoomKey(room: string): room is RoomKey {
+	return room in roomConfigs;
+}
+
+export const roomConfigs: Record<RoomKey, RoomConfig> = {
+	logs: {
+		canJoin: ({ user, params }) => {
+			if (!params?.submodule && !params?.module) {
+				return user?.role === "systemAdmin";
+			}
+
+			return true;
+		},
+		buildRoom: (params) => {
+			const module = String(params?.module ?? "").toLowerCase();
+			const submodule = String(params?.submodule ?? "").toLowerCase();
+
+			if (module && submodule) return `logs:${module}:${submodule}`;
+			if (submodule) return `logs:${submodule}`;
+			if (module) return `logs:${module}`;
+
+			return "logs";
+		},
+		seed: async ({ params }) => {
+			const module = params?.module ? String(params.module) : undefined;
+			const submodule = params?.submodule
+				? String(params.submodule)
+				: undefined;
+
+			return await getRecentLogs({
+				module,
+				submodule,
+				limit: 200,
+			});
+		},
+	},
+
+	labels: {
+		canJoin: () => true,
+		buildRoom: () => "labels",
+	},
+
+	admin: {
+		canJoin: ({ user, params }) => {
+			if (params?.section === "system") {
+				return user?.role === "systemAdmin";
+			}
+
+			return true;
+		},
+		buildRoom: (params) =>
+			params?.section ? `admin:${params.section}` : "admin",
+	},
+	inventory: {
+		canJoin: () => true,
+		buildRoom: (params) =>
+			params?.location ? `inventory:${params.location}` : null,
+	},
+
+	dockDoorLoading: {
+		canJoin: () => true,
+		buildRoom: (params) =>
+			params?.dockId ? `dockDoorLoading:${params.dockId}` : null,
+		seed: async ({ params }) => {
+			return await getRecentDockScans({
+				loadingOrder: params?.loadingOrder as string,
+				limit: 200,
+			});
+		},
+	},
+} satisfies Record<string, RoomConfig>;
+
+/*
+
+socket.emit("join-room", {
+  room: "dockDoorLoading",
+  params: { dockId: "2" },
+});
+
+*/

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) => {
-	if (!(await exists(buildNumberFile))) {
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
-		return 1;
-	}
-
-	const raw = await fsp.readFile(buildNumberFile, "utf8");
-	const current = Number.parseInt(raw.trim(), 10);
+const getNextBuildNumber = async (versionPath: string) => {
+	const raw = await fsp.readFile(versionPath, "utf8");
+	const config = JSON.parse(raw);
+	const current = Number.parseInt(config.build.trim(), 10);
 
+	let nextBuild: string;
 	if (Number.isNaN(current) || current < 1) {
-		await fsp.writeFile(buildNumberFile, "1", "utf8");
-		return 1;
+		nextBuild = "1";
+	} else {
+		nextBuild = String(current + 1); // Incrementing the build number
 	}
 
-	const next = current + 1;
+	const updatedConfig = {
+		...config,
+		build: nextBuild,
+		lastBuildDate: format(new Date(Date.now()), "M/d/yyyy HH:mm"),
+	};
 
-	await fsp.writeFile(buildNumberFile, String(next), "utf8");
+	await fsp.writeFile(
+		versionPath,
+		JSON.stringify(updatedConfig, null, 4) + "\n",
+		"utf8",
+	);
 
-	// update the server with the next build number
-
-	await updateAppStats({
-		currentBuild: next,
-		lastBuildAt: new Date(),
-		building: true,
-	});
-
-	return next;
+	return { version: config.version, build: config.build };
 };
 
 const cleanupOldBuilds = async (buildFolder: string, maxBuilds: number) => {
@@ -53,7 +52,8 @@ const cleanupOldBuilds = async (buildFolder: string, maxBuilds: number) => {
 
 	for (const entry of entries) {
 		if (!entry.isFile()) continue;
-		if (!/^LSTV3-\d+\.zip$/i.test(entry.name)) continue;
+		//if (!/^LSTV3-\d+\.zip$/i.test(entry.name)) continue;
+		if (!entry.name.includes("LSTV3")) continue;
 
 		const fullPath = path.join(buildFolder, entry.name);
 		const stat = await fsp.stat(fullPath);
@@ -85,7 +85,7 @@ export const zipBuild = async () => {
 	}
 
 	const includesFile = path.join(appDir, ".includes");
-	const buildNumberFile = path.join(appDir, ".buildNumber");
+	const version = path.join(appDir, "package.json");
 	const buildFolder = path.join(appDir, "builds");
 	const tempFolder = path.join(appDir, "temp", "zip-temp");
 	if (!(await exists(includesFile))) {
@@ -95,11 +95,13 @@ export const zipBuild = async () => {
 
 	await fsp.mkdir(buildFolder, { recursive: true });
 
-	const buildNumber = await getNextBuildNumber(buildNumberFile);
-	const zipFileName = `LSTV3-${buildNumber}.zip`;
+	const lstVersion = await getNextBuildNumber(version);
+	const zipFileName = `LSTV3-${lstVersion.version}.${lstVersion.build}.zip`;
 	const zipFile = path.join(buildFolder, zipFileName);
 	// make the folders in case they are not created already
-	emitBuildLog(`Using build number: ${buildNumber}`);
+	emitBuildLog(
+		`Using version, build number: ${lstVersion.version}.${lstVersion.build}`,
+	);
 
 	if (await exists(tempFolder)) {
 		await fsp.rm(tempFolder, { recursive: true, force: true });
@@ -166,11 +168,12 @@ export const zipBuild = async () => {
 	await updateAppStats({
 		lastUpdated: new Date(),
 		building: false,
+		currentBuild: lstVersion.build,
 	});
 
 	return {
 		success: true,
-		buildNumber,
+		build: lstVersion.build,
 		zipFile,
 		zipFileName,
 	};

backend/warehousing/warehousing.ppooMonitor.ts

@@ -1,5 +1,5 @@
 import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
-import { hasRoomMembers } from "../socket.io/roomService.socket.js";
+import { hasRoomMembers } from "../socket.io/socket.manager.js";
 import { runProdApi } from "../utils/prodEndpoint.utils.js";
 
 export const ppoRun = async () => {
@@ -17,11 +17,13 @@ export const ppoRun = async () => {
 };
 
 export const ppooMonitoring = async () => {
-	if (!hasRoomMembers(`ppoo`)) {
+	const roomId = "inventory:ppoo";
+
+	if (!hasRoomMembers(roomId)) {
 		return;
 	}
 
-	emitToRoom("ppoo", {
+	emitToRoom(roomId, {
 		type: "snapshot",
 		items: await ppoRun(),
 		createdAt: new Date().toISOString(),

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

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/TransportationBar.tsx

@@ -40,6 +40,11 @@ export default function TransportationBar() {
 					icon: link,
 					url: "/transportation/opendock",
 				},
+				{
+					title: "Active releases",
+					icon: link,
+					url: "/transportation/opendock/releases",
+				},
 			],
 		},
 	];

frontend/src/components/Sidebar/Warhouse.tsx

@@ -1,7 +1,7 @@
-import { useQuery } from "@tanstack/react-query";
+//import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { ChevronRight, Link as link } from "lucide-react";
-import { permissionQuery } from "../../lib/queries/permsCheck";
+//import { permissionQuery } from "../../lib/queries/permsCheck";
 import {
 	Collapsible,
 	CollapsibleContent,
@@ -21,11 +21,11 @@ import {
 } from "../ui/sidebar";
 
 export default function WarehouseBar() {
-	const { data: canCreate = false } = useQuery(
-		permissionQuery({
-			warehouse: ["read"],
-		}),
-	);
+	// const { data: canCreate = false } = useQuery(
+	// 	permissionQuery({
+	// 		warehouse: ["read"],
+	// 	}),
+	// );
 
 	const { setOpen } = useSidebar();
 	const items = [
@@ -33,7 +33,7 @@ export default function WarehouseBar() {
 			title: "Dock Door Scanning",
 			url: "/warehouse",
 			//icon,
-			isActive: canCreate,
+			isActive: true,
 			items: [
 				{
 					title: "DockDoorScanning",

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,12 +27,13 @@ export function AppSidebar() {
 			openDock: ["read"],
 		}),
 	);
+	const { setOpen } = useSidebar();
 
-	const { data: canReadWarehouse = false } = useQuery(
-		permissionQuery({
-			warehouse: ["read"],
-		}),
-	);
+	// const { data: canReadWarehouse = false } = useQuery(
+	// 	permissionQuery({
+	// 		warehouse: ["read"],
+	// 	}),
+	// );
 
 	return (
 		<Sidebar
@@ -36,7 +41,7 @@ export function AppSidebar() {
 			collapsible="offcanvas"
 			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
 		>
-			<SidebarHeader>
+			<SidebarContent>
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
@@ -53,8 +58,7 @@ export function AppSidebar() {
 
 							{!isLoading &&
 								settings.filter((n: any) => n.name === "dockDoorScanning")[0]
-									?.active &&
-								canReadWarehouse && <WarehouseBar />}
+									?.active && <WarehouseBar />}
 
 							{session &&
 								(session.user.role === "admin" ||
@@ -65,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",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
         "icon-lg": "size-9",
       },
     },

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(
-        "text-base leading-none font-medium",
-        className
-      )}
+      className={cn("text-sm font-medium", className)}
       {...props}
     />
   )
@@ -144,7 +143,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}

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 type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 
-/* eslint-disable */
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="input-group"
-			role="group"
-			className={cn(
-				"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
 const inputGroupAddonVariants = cva(
-	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-	{
-		variants: {
-			align: {
-				"inline-start":
-					"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-				"inline-end":
-					"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-				"block-start":
-					"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-				"block-end":
-					"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-			},
-		},
-		defaultVariants: {
-			align: "inline-start",
-		},
-	},
-);
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-xs font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
 
 function InputGroupAddon({
-	className,
-	align = "inline-start",
-	...props
+  className,
+  align = "inline-start",
+  ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-	return (
-		<div
-			role="group"
-			data-slot="input-group-addon"
-			data-align={align}
-			className={cn(inputGroupAddonVariants({ align }), className)}
-			onClick={(e) => {
-				if ((e.target as HTMLElement).closest("button")) {
-					return;
-				}
-				e.currentTarget.parentElement?.querySelector("input")?.focus();
-			}}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
 }
 
 const inputGroupButtonVariants = cva(
-	"flex items-center gap-2 text-sm shadow-none",
-	{
-		variants: {
-			size: {
-				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-				sm: "",
-				"icon-xs":
-					"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
-			},
-		},
-		defaultVariants: {
-			size: "xs",
-		},
-	},
-);
+  "flex items-center gap-2 text-xs shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "gap-1",
+        "icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
+        "icon-sm": "size-7 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
 
 function InputGroupButton({
-	className,
-	type = "button",
-	variant = "ghost",
-	size = "xs",
-	...props
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
 }: Omit<React.ComponentProps<typeof Button>, "size"> &
-	VariantProps<typeof inputGroupButtonVariants>) {
-	return (
-		<Button
-			type={type}
-			data-size={size}
-			variant={variant}
-			className={cn(inputGroupButtonVariants({ size }), className)}
-			{...props}
-		/>
-	);
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			className={cn(
-				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-xs text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
 function InputGroupInput({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<"input">) {
-	return (
-		<Input
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
 function InputGroupTextarea({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<"textarea">) {
-	return (
-		<Textarea
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
 export {
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupInput,
-	InputGroupText,
-	InputGroupTextarea,
-};
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

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