feat(dm): migrated all the dm topics

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

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(",")
@@ -170,6 +171,16 @@ export const runDatamartQuery = async (data: Data) => {
 		switch (data.name) {
 			case "activeArticles":
 				break;
+			case "orderState":
+				break;
+			case "invoiceAddress":
+				break;
+			case "bulkOrderArticleInfo":
+				datamartQuery = datamartQuery.replace(
+					"[articles]",
+					`${data.options.articles ? data.options.articles : "0"}`,
+				);
+				break;
 			case "deliveryByDateRange":
 				datamartQuery = datamartQuery
 					.replace("[startDate]", `${data.options.startDate}`)
@@ -274,12 +285,16 @@ 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;
+			case "financePriceAudit":
+				datamartQuery = datamartQuery.replace("[date]", `${data.options.date}`);
+
+				break;
 			default:
 				return returnFunc({
 					success: false,

backend/datamart/datamartData.utlis.ts

@@ -57,4 +57,12 @@ export const datamartData = [
 		optionsRequired: true,
 		howManyOptionsRequired: 2,
 	},
+	{
+		name: "Finance Price Audit",
+		endpoint: "financePriceAudit",
+		description: `Returns all sales and purchase price for quick reference where the date is less than the one provided.`,
+		options: "date",
+		optionsRequired: true,
+		howManyOptionsRequired: 1,
+	},
 ];

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

@@ -3,6 +3,8 @@ 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 prodAuditLogId from "./schema/prodAuditlog.lastProcessed.schema.js";
+import * as prodAuditLog from "./schema/prodAuditlog.schema.js";
 import * as scanUserSchema from "./schema/scanUsers.js";
 import * as settingsSchema from "./schema/settings.schema.js";
 
@@ -27,5 +29,7 @@ export const db = drizzle(queryClient, {
 		...opendockAVCheck,
 		...logs,
 		...dockScans,
+		...prodAuditLogId,
+		...prodAuditLog,
 	},
 });

backend/db/db.listener.ts

@@ -1,5 +1,6 @@
 import postgres from "postgres";
 import { createLogger } from "../logger/logger.controller.js";
+import { bufferProcess } from "../system/system.prodAuditLog.utils.js";
 import { handleDbNotification } from "./db.router.js";
 
 const log = createLogger({
@@ -37,6 +38,11 @@ export async function startDbNotificationListener() {
 
 		log.info({ stack: { channel } }, `Listening for ${channel}`);
 	}
+
+	// server side only listeners
+	await sql.listen("auditLog_inserted", async (rawPayload) => {
+		bufferProcess(rawPayload);
+	});
 }
 
 async function processNotification(

backend/db/db.setupNotifications.ts

@@ -19,6 +19,7 @@ export async function setupDbNotifications() {
 
 	await setupLogsNotifications();
 	await setupDockScansNotifications();
+	await setupProdAuditNotifications();
 
 	log.info({}, "DB notifications setup complete");
 }
@@ -97,3 +98,36 @@ async function setupDockScansNotifications() {
 
 	log.info({}, "Dock scan DB notification trigger ready");
 }
+
+async function setupProdAuditNotifications() {
+	await db.execute(sql`
+		CREATE OR REPLACE FUNCTION notify_auditLog_inserted()
+		RETURNS trigger AS $$
+		BEGIN
+			PERFORM pg_notify(
+				'auditLog_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 auditLog_inserted_notify_trigger ON prod_audit_log;
+	`);
+
+	await db.execute(sql`
+		CREATE TRIGGER auditLog_inserted_notify_trigger
+		AFTER INSERT ON prod_audit_log
+		FOR EACH ROW
+		EXECUTE FUNCTION notify_auditLog_inserted();
+	`);
+
+	log.info({}, "Audit Log DB notification trigger ready");
+}

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

@@ -0,0 +1,23 @@
+import { jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import type { z } from "zod";
+
+export const orderImport = pgTable("order_import", {
+	id: uuid("id").defaultRandom().primaryKey(),
+	receivingPlantId: text("receiving_plant_id").notNull(),
+	documentName: text("documentName"),
+	sender: text("sender"),
+	customerId: text("customer_id"),
+	invoiceAddressId: text("invoice_address_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 orderImportSchema = createSelectSchema(orderImport);
+export const newOrderImportSchema = createInsertSchema(orderImport);
+
+export type OrderImport = z.infer<typeof orderImportSchema>;
+export type NewOrderImport = z.infer<typeof newOrderImportSchema>;

backend/db/schema/prodAuditlog.lastProcessed.schema.ts

@@ -0,0 +1,39 @@
+import { integer, pgTable, timestamp } from "drizzle-orm/pg-core";
+
+export const prodAuditLogState = pgTable("prod_audit_log_state", {
+	id: integer("id").primaryKey().default(1),
+
+	lastImportedAuditId: integer("last_imported_audit_id").notNull().default(0),
+	lastProcessedAuditId: integer("last_processed_audit_id").notNull().default(0),
+
+	createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
+	updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
+});
+
+/*
+if the system fails do the process we do 
+and increase the retry to x max of 5 tries
+const nextRetryAt = new Date(Date.now() + Math.min(30 * retryCount, 600) * 1000);
+
+Cron every 30s
+  ↓
+Pull ERP AuditLog by Id > lastAuditId
+  ↓
+Insert into prod_audit_log
+  ↓
+Postgres NOTIFY wakes worker
+  ↓
+Worker processes pending rows
+  ↓
+Success = success
+Failure = error + retryCount + nextRetryAt
+20 failures = dead + email
+
+
+for the check we want to do 
+
+status IN ('pending', 'error')
+AND retry_count < 20
+AND (next_retry_at IS NULL OR next_retry_at <= NOW())
+
+*/

backend/db/schema/prodAuditlog.schema.ts

@@ -0,0 +1,70 @@
+import {
+	boolean,
+	integer,
+	jsonb,
+	pgTable,
+	serial,
+	text,
+	timestamp,
+} from "drizzle-orm/pg-core";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import type { z } from "zod";
+
+export const prodAuditLog = pgTable("prod_audit_log", {
+	id: serial("id").primaryKey(),
+	auditId: integer("audit_id").notNull().unique(),
+	actorName: text("actor_name").notNull(),
+	auditCreatedDate: timestamp("audit_created_date", {
+		withTimezone: true,
+	}).notNull(),
+	message: text("message").notNull(), // mirrors how prod sends it over basically this is where the domain its coming from is. well split by "." and then pass it to what it needs to go to later.
+	content: jsonb("content").notNull(),
+
+	status: text("status").notNull().default("pending"), // pending | processing | success | error | dead
+	processed: boolean("processed").default(false),
+
+	retryCount: integer("retry_count").notNull().default(0),
+	nextRetryAt: timestamp("next_retry_at", { withTimezone: true }),
+
+	errorMessage: text("error_message"),
+	errorStack: text("error_stack"),
+
+	processedAt: timestamp("processed_at", { withTimezone: true }),
+
+	createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
+	updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
+});
+
+export const prodAuditLogSchema = createSelectSchema(prodAuditLog);
+export const newProdAuditLogSchema = createInsertSchema(prodAuditLog);
+
+export type ProdAuditLog = z.infer<typeof prodAuditLogSchema>;
+export type NewProdAuditLog = z.infer<typeof newProdAuditLogSchema>;
+
+/*
+if the system fails do the process we do 
+and increase the retry to x max of 5 tries
+const nextRetryAt = new Date(Date.now() + Math.min(30 * retryCount, 600) * 1000);
+
+Cron every 30s
+  ↓
+Pull ERP AuditLog by Id > lastAuditId
+  ↓
+Insert into prod_audit_log
+  ↓
+Postgres NOTIFY wakes worker
+  ↓
+Worker processes pending rows
+  ↓
+Success = success
+Failure = error + retryCount + nextRetryAt
+20 failures = dead + email
+
+
+for the check we want to do 
+
+status IN ('pending', 'error')
+AND retry_count < 20
+AND (next_retry_at IS NULL OR next_retry_at <= NOW())
+
+*/

backend/dockdoorScanning/dockdoor.loadUnits.ts

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

backend/dockdoorScanning/dockdoor.socket.seed.ts

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

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

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

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

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

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

@@ -0,0 +1,231 @@
+import { addDays } from "date-fns";
+import XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.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 { data: a, error: ae } = await tryCatch(
+		runDatamartQuery({ name: "activeArticles", options: {} }),
+	);
+
+	if (ae) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "forecast",
+			message: `Error getting Article info`,
+			data: [ae.message],
+			notify: true,
+		});
+	}
+
+	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,113 @@
+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,
+		});
+	}
+
+	if (foreCastData.length === 0) {
+		return {
+			success: false,
+			message:
+				"There was an error processing the forecast did you upload the correct file?",
+			data: [],
+		};
+	} else {
+		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 : 400,
+	});
+});
+
+export default r;

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

@@ -0,0 +1,191 @@
+import { isAfter } from "date-fns";
+import { format } from "date-fns-tz";
+import XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.js";
+import { excelDateStuff } from "../utils/excelToDate.utils.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { abbottForecast } from "./logistics.dm.forecast.map.abbott.js";
+import { postData } from "./logistics.dm.postData.js";
+
+// customeris/articles stuff will be in basis once we move to iowa
+const customerID = 8;
+const invoiceID = 9;
+const articles = "118,120";
+export const abbottOrders = async (data: any, user: any) => {
+	/**
+	 * Standard orders meaning that we get the standard file exported and fill it out and uplaod to lst.
+	 */
+
+	// articleInfo
+	const { data: article, error: ae } = await tryCatch(
+		runDatamartQuery({ name: "bulkOrderArticleInfo", options: { articles } }),
+	);
+
+	const a: any = article?.data;
+	if (ae) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [ae.message],
+			notify: true,
+		});
+	}
+
+	const { data: o, error: oe } = await tryCatch(
+		runDatamartQuery({ name: "orderState", options: {} }),
+	);
+
+	if (oe) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [oe.message],
+			notify: true,
+		});
+	}
+
+	const openOrders: any = o?.data;
+
+	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;
+
+	abbottForecast(sheet, user);
+	// Define custom headers
+	const customHeaders = ["date", "time", "newton8oz", "newton10oz"];
+	const orderData = XLSX.utils.sheet_to_json(sheet, {
+		range: 5, // Start at row 5 (index 4)
+		header: customHeaders,
+		defval: "", // Default value for empty cells
+	});
+
+	// the base of the import
+	const predefinedObject = {
+		receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+		documentName: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		externalRefNo: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		orders: [],
+	};
+	//const oOrders: any = openOrders;
+	//console.log(orderData);
+
+	function trimAll(str: string) {
+		return str.replace(/\s+/g, "");
+	}
+	let correctedOrders: any = orderData
+		.filter(
+			(o: any) =>
+				(o.newton8oz && o.newton8oz.trim() !== "") ||
+				(o.newton10oz && o.newton10oz.trim() !== ""),
+		)
+		.map((o: any) => ({
+			date: excelDateStuff(o.date, o.time),
+			po:
+				trimAll(o.newton8oz) !== ""
+					? trimAll(o.newton8oz)
+					: o.newton10oz.replace(/[\s\u00A0]+/g, ""),
+			customerArticleNumber:
+				o.newton8oz !== ""
+					? a.filter((a: any) => a.av === 118)[0].CustomerArticleNumber
+					: a.filter((a: any) => a.av === 120)[0].CustomerArticleNumber,
+			qty:
+				o.newton8oz !== ""
+					? a.filter((a: any) => a.av === 118)[0].totalTruckLoad
+					: a.filter((a: any) => a.av === 120)[0].totalTruckLoad,
+		}));
+
+	//console.log(correctedOrders);
+	// now we want to make sure we only correct orders that or after now
+	correctedOrders = correctedOrders.filter((o: any) => {
+		//const parsedDate = parse(o.date, "M/d/yyyy, h:mm:ss a", new Date());
+		return isAfter(new Date(o.date), new Date().toISOString());
+	});
+	//console.log(correctedOrders);
+	// last map to remove orders that have already been started
+	// correctedOrders = correctedOrders.filter((oo: any) =>
+	//     oOrders.some((o: any) => o.CustomerOrderNumber === oo.po)
+	// );
+	const postedOrders: any = [];
+	const filterOrders: any = correctedOrders;
+
+	//console.log(filterOrders);
+
+	filterOrders.forEach((oo: any) => {
+		const isMatch = openOrders.some(
+			(o: any) => String(o.po).trim() === String(oo.po).trim(),
+		);
+		//console.log(isMatch, oo.po);
+		if (!isMatch) {
+			//console.log(`ok to update: ${oo.po}`);
+
+			// oo = {
+			//     ...oo,
+			//     CustomerOrderNumber: oo.CustomerOrderNumber.replace(" ", ""),
+			// };
+			postedOrders.push(oo);
+		} else {
+			//console.log(`Not valid order to update: ${oo.po}`);
+			//console.log(oo)
+		}
+	});
+
+	// Map Excel data to predefinedObject format
+	const orders = filterOrders.map((o: any) => {
+		//console.log(o.po, " ", o.date, format(o.date, "M/d/yyyy HH:mm"));
+		return {
+			customerId: customerID,
+			invoiceAddressId: invoiceID,
+			customerOrderNo: o.po,
+			orderDate: new Date(Date.now()).toLocaleString("en-US"),
+			positions: [
+				{
+					deliveryAddressId: 8,
+					customerArticleNo: o.customerArticleNumber,
+					quantity: o.qty,
+					deliveryDate: format(o.date, "M/d/yyyy HH:mm"), // addHours(format(o.date, "M/d/yyyy HH:mm"), 1), //addHours(addDays(o.date, 1), 1), // adding this in so we can over come the constant 1 day behind thing as a work around
+					customerLineItemNo: 1, // this is how it is currently sent over from abbott
+					customerReleaseNo: 1, // same as above
+				},
+			],
+		};
+	});
+
+	//console.log(orders);
+	// combine it all together.
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		orders: [...predefinedObject.orders, ...orders],
+	};
+
+	//console.log(updatedPredefinedObject);
+	// post the orders to the server
+	const posting: any = await postData(
+		{
+			type: "orders",
+			endpoint: "/public/v1.0/DemandManagement/ORDERS",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		success: posting?.success,
+		message: posting?.message,
+		data: posting,
+	};
+};

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

@@ -0,0 +1,197 @@
+import * as XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+import { postData } from "./logistics.dm.postData.js";
+
+export const energizerOrders = async (data: any, user: any) => {
+	/**
+	 * Standard orders meaning that we get the standard file exported and fill it out and uplaod to lst.
+	 */
+
+	/*
+        get the order state.
+        */
+
+	const { data: o, error: oe } = await tryCatch(
+		runDatamartQuery({ name: "orderState", options: {} }),
+	);
+
+	if (oe) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [oe.message],
+			notify: true,
+		});
+	}
+
+	const openOrders: any = o?.data;
+
+	/*
+	get default invoice address
+	*/
+	const { data: invoice, error: ie } = await tryCatch(
+		runDatamartQuery({ name: "invoiceAddress", options: {} }),
+	);
+
+	if (ie) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [ie.message],
+			notify: true,
+		});
+	}
+
+	const i: any = invoice?.data;
+
+	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;
+
+	// define custom headers
+	const headers = [
+		"ITEM",
+		"PO",
+		"ReleaseNo",
+		"QTY",
+		"DELDATE",
+		"COMMENTS",
+		"What changed",
+		"CUSTOMERID",
+		"Remark",
+	];
+	const orderData = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 1,
+	});
+
+	// the base of the import
+	const predefinedObject = {
+		receivingPlantId: process.env.PROD_PLANT_TOKEN ?? "test1",
+		documentName: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		externalRefNo: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		orders: [],
+	};
+
+	let newOrders: any = orderData;
+
+	// for orders that are in od or managed by od we want to make sure we send out an email on this so we dont over right data that could be already planned with a carrier.
+	const odOrders: any = [];
+	const okToUpdateOrders: any = [];
+
+	for (const order of openOrders) {
+		if (order.AdditionalInformation1?.includes("od")) {
+			odOrders.push(order);
+		} else {
+			okToUpdateOrders.push(order);
+		}
+	}
+
+	if (odOrders.length > 0) {
+		console.log("send email for od touched orders", odOrders);
+	}
+
+	if (okToUpdateOrders.length === 0) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `All orders have been posted to od and releases will not be updated`,
+			data: [],
+			notify: false,
+		});
+	}
+
+	// filter out the orders that have already been started just to reduce the risk of errors.
+	newOrders.filter((oo: any) =>
+		okToUpdateOrders.some(
+			(o: any) => o.CustomerOrderNumber === oo.CustomerOrderNumber,
+		),
+	);
+
+	// filter out the blanks
+	newOrders = newOrders.filter((z: any) => z.ITEM !== "");
+
+	// let postedOrders: any = [];
+	// for (const [customerID, orders] of Object.entries(orderData)) {
+	//     // console.log(`Running for Customer ID: ${customerID}`);
+	//     const newOrders: any = orderData;
+
+	//     // filter out the orders that have already been started just to reduce the risk of errors.
+	//     newOrders.filter((oo: any) =>
+	//         openOrders.some(
+	//             (o: any) => o.CustomerOrderNumber === oo.CustomerOrderNumber
+	//         )
+	//     );
+
+	//     // map everything out for each order
+	const nOrder = newOrders.map((o: any) => {
+		const invoice = i.filter(
+			(i: any) => i.deliveryAddress === parseInt(o.CUSTOMERID),
+		);
+		if (!invoice) {
+			return null;
+		}
+		return {
+			customerId: parseInt(o.CUSTOMERID),
+			invoiceAddressId: invoice[0].invoiceAddress, // matched to the default invoice address
+			customerOrderNo: o.PO,
+			orderDate: new Date(Date.now()).toLocaleString("en-US"),
+			positions: [
+				{
+					deliveryAddressId: parseInt(o.CUSTOMERID),
+					customerArticleNo: o.ITEM,
+					quantity: parseInt(o.QTY),
+					deliveryDate: o.DELDATE, //excelDateStuff(o.DELDATE),
+					customerLineItemNo: o.ReleaseNo, // this is how it is currently sent over from abbott
+					customerReleaseNo: o.ReleaseNo, // same as above
+					remark: o.COMMENTS === "" ? null : o.COMMENTS,
+				},
+			],
+		};
+	});
+
+	//     // do that fun combining thing
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		orders: [...predefinedObject.orders, ...nOrder],
+	};
+
+	//     //console.log(updatedPredefinedObject);
+
+	//     // post the orders to the server
+	const posting: any = await postData(
+		{
+			type: "orders",
+			endpoint: "/public/v1.0/DemandManagement/ORDERS",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		customer: nOrder[0].CUSTOMERID,
+		//totalOrders: orders?.length(),
+		success: posting.success,
+		message: posting.message,
+		data: posting.data,
+	};
+};

backend/logistics/logistics.dm.orders.map.macroImport.ts

@@ -0,0 +1,202 @@
+import XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.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 macroImportOrders = async (data: any, user: any) => {
+	/**
+	 * Standard orders meaning that we get the standard file exported and fill it out and uplaod to lst.
+	 */
+
+	const plantToken = process.env.PROD_PLANT_TOKEN;
+
+	/*
+    get the order state.
+    */
+
+	const { data: o, error: oe } = await tryCatch(
+		runDatamartQuery({ name: "orderState", options: {} }),
+	);
+
+	if (oe) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [oe.message],
+			notify: true,
+		});
+	}
+
+	const openOrders: any = o?.data;
+
+	/*
+    get default invoice address
+    */
+	const { data: invoice, error: ie } = await tryCatch(
+		runDatamartQuery({ name: "invoiceAddress", options: {} }),
+	);
+
+	if (ie) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [ie.message],
+			notify: true,
+		});
+	}
+
+	const i: any = invoice?.data;
+
+	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;
+
+	// define custom headers
+	const headers = [
+		"CustomerArticleNumber",
+		"CustomerOrderNumber",
+		"CustomerLineNumber",
+		"CustomerRealeaseNumber",
+		"Quantity",
+		"DeliveryDate",
+		"CustomerID",
+		"Remark",
+	];
+	const orderData = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 5,
+	});
+
+	// the base of the import
+	const predefinedObject = {
+		receivingPlantId: plantToken ?? "test1",
+		documentName: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		externalRefNo: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		orders: [],
+	};
+
+	const removeBlanks = orderData.filter(
+		(n: any) => n.CustomerArticleNumber !== "",
+	);
+
+	const groupedByCustomer: any = removeBlanks.reduce((acc: any, item: any) => {
+		const id = item.CustomerID;
+		if (!acc[id]) {
+			acc[id] = [];
+		}
+		acc[id].push(item);
+		return acc;
+	}, {});
+
+	const postedOrders: any = [];
+	for (const [customerID, orders] of Object.entries(groupedByCustomer)) {
+		// console.log(`Running for Customer ID: ${customerID}`);
+		const filterOrders: any = orders;
+		const newOrders: any = [];
+		//newOrders.filter((oo) => openOrders.some((o) => String(o.CustomerOrderNumber) === String(oo.CustomerOrderNumber)));
+		//console.log(newOrders)
+		filterOrders.forEach((oo: any) => {
+			const isMatch = openOrders.some(
+				(o: any) =>
+					// check the header
+					String(o.CustomerOrderNumber).trim() ===
+						String(oo.CustomerOrderNumber).trim() &&
+					// and check the customer release is not in here.
+					String(o.CustomerReleaseNumber).trim() ===
+						String(oo.CustomerReleaseNumber).trim(),
+			);
+			if (!isMatch) {
+				//console.log(`ok to update: ${oo.CustomerOrderNumber}`);
+
+				newOrders.push(oo);
+			} else {
+				//console.log(`Not valid order to update: ${oo.CustomerOrderNumber}`);
+				//console.log(oo)
+			}
+		});
+
+		// filter out the orders that have already been started just to reduce the risk of errors.
+		newOrders.filter((oo: any) =>
+			openOrders.some(
+				(o: any) => o.CustomerOrderNumber === oo.CustomerOrderNumber,
+			),
+		);
+
+		// map everything out for each order
+		const nOrder = newOrders.map((o: any) => {
+			const invoice = i.find(
+				(inv: any) => inv.deliveryAddress === parseInt(customerID),
+			);
+			if (!invoice) {
+				return null;
+			}
+			return {
+				customerId: parseInt(customerID),
+				invoiceAddressId: invoice.invoiceAddress, // matched to the default invoice address
+				customerOrderNo: o.CustomerOrderNumber,
+				orderDate: new Date(Date.now()).toLocaleString("en-US"),
+				positions: [
+					{
+						deliveryAddressId: parseInt(customerID),
+						customerArticleNo: o.CustomerArticleNumber,
+						quantity: parseInt(o.Quantity),
+						deliveryDate: excelDateStuff(o.DeliveryDate),
+						customerLineItemNo: o.CustomerLineNumber, // this is how it is currently sent over from abbott
+						customerReleaseNo: o.CustomerRealeaseNumber, // same as above
+						remark: o.remark === "" ? null : o.remark,
+					},
+				],
+			};
+		});
+
+		// do that fun combining thing
+		const updatedPredefinedObject = {
+			...predefinedObject,
+			orders: [...predefinedObject.orders, ...nOrder],
+		};
+
+		//console.log(updatedPredefinedObject);
+
+		// post the orders to the server
+		const posting: any = await postData(
+			{
+				type: "orders",
+				endpoint: "/public/v1.0/DemandManagement/ORDERS",
+				data: updatedPredefinedObject as any,
+			},
+			user,
+		);
+
+		postedOrders.push({
+			customer: customerID,
+			//totalOrders: orders?.length(),
+			success: posting.success,
+			message: posting.message,
+			data: posting.data,
+		});
+	}
+
+	return {
+		success: true,
+		message:
+			"Standard Template was just processed successfully, please check AlplaProd 2.0 to confirm no errors. ",
+		data: postedOrders,
+	};
+};

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

@@ -0,0 +1,258 @@
+import * as XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.js";
+import { db } from "../db/db.controller.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 standardOrders = async (data: any, user: any) => {
+	/**
+	 * Post a standard forecast based on the standard template.
+	 */
+
+	const plantToken = process.env.PROD_PLANT_TOKEN;
+
+	/*
+	get the order state.
+	*/
+
+	const { data: o, error: oe } = await tryCatch(
+		runDatamartQuery({ name: "orderState", options: {} }),
+	);
+
+	if (oe) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [oe.message],
+			notify: true,
+		});
+	}
+
+	const openOrders: any = o?.data;
+
+	/*
+	get default invoice address
+	*/
+	const { data: invoice, error: ie } = await tryCatch(
+		runDatamartQuery({ name: "invoiceAddress", options: {} }),
+	);
+
+	if (ie) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [ie.message],
+			notify: true,
+		});
+	}
+
+	const i: any = invoice?.data;
+
+	//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;
+
+	// define custom headers
+	const headers = [
+		"CustomerArticleNumber",
+		"CustomerOrderNumber",
+		"CustomerLineNumber",
+		"CustomerRealeaseNumber",
+		"Quantity",
+		"DeliveryDate",
+		"CustomerID",
+		"Remark",
+	];
+
+	const orderData = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 1,
+	});
+
+	// the base of the import
+	const predefinedObject = {
+		receivingPlantId: plantToken ?? "test1",
+		documentName: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		externalRefNo: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		orders: [],
+	};
+
+	// for orders that are in od or managed by od we want to make sure we send out an email on this so we dont over right data that could be already planned with a carrier.
+	const odOrders: any = [];
+	const okToUpdateOrders: any = [];
+
+	for (const order of openOrders) {
+		if (order.AdditionalInformation1?.includes("od")) {
+			odOrders.push(order);
+		} else {
+			okToUpdateOrders.push(order);
+		}
+	}
+
+	if (odOrders.length > 0) {
+		console.log("send email for od touched orders", odOrders);
+	}
+
+	if (okToUpdateOrders.length === 0) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `All orders have been posted to od and releases will not be updated`,
+			data: [],
+			notify: false,
+		});
+	}
+
+	const groupedByCustomer: any = orderData.reduce((acc: any, item: any) => {
+		const id = item.CustomerID;
+		if (!acc[id]) {
+			acc[id] = [];
+		}
+		acc[id].push(item);
+		return acc;
+	}, {});
+
+	const postedOrders: any = [];
+
+	for (const [customerID, orders] of Object.entries(groupedByCustomer)) {
+		// console.log(`Running for Customer ID: ${customerID}`);
+		const filterOrders: any = orders;
+		const newOrders: any = [];
+		//newOrders.filter((oo) => openOrders.some((o) => String(o.CustomerOrderNumber) === String(oo.CustomerOrderNumber)));
+		//console.log(newOrders)
+		filterOrders.forEach((oo: any) => {
+			const isMatch = okToUpdateOrders.some(
+				(o: any) =>
+					// check the header
+					String(o.CustomerOrderNumber).trim() ===
+						String(oo.CustomerOrderNumber).trim() &&
+					// and check the customer release is not in here.
+					String(o.CustomerRealeaseNumber).trim() ===
+						String(oo.CustomerRealeaseNumber).trim(),
+			);
+			if (!isMatch) {
+				//console.log(`ok to update: ${oo.CustomerOrderNumber}`);
+
+				newOrders.push(oo);
+			} else {
+				//console.log(`Not valid order to update: ${oo.CustomerOrderNumber}`);
+				//console.log(oo)
+			}
+		});
+
+		// filter out the orders that have already been started just to reduce the risk of errors.
+		newOrders.filter((oo: any) =>
+			openOrders.some(
+				(o: any) => o.CustomerOrderNumber === oo.CustomerOrderNumber,
+			),
+		);
+
+		// get the default time to put in here if an order dose not include the date
+		const { data: s, error } = await tryCatch(
+			db.query.settings.findFirst({
+				where: (setting, { eq }) => eq(setting.name, "defaultOrderTime"),
+			}),
+		);
+
+		if (error) {
+			return returnFunc({
+				success: false,
+				level: "error",
+				module: "utils",
+				subModule: "excelToDate",
+				message: "Failed to get the default order time setting.",
+				data: [],
+				notify: false,
+			});
+		}
+
+		const hour = parseInt(s?.value ?? "8", 10);
+
+		const defaultOrderTime =
+			Number.isNaN(hour) || hour < 1 || hour > 23 ? 800 : hour * 100;
+
+		// map everything out for each order
+		const nOrder = newOrders.map((o: any) => {
+			const invoice = i.find(
+				(inv: any) => inv.deliveryAddress === parseInt(customerID),
+			);
+			if (!invoice) {
+				return returnFunc({
+					success: false,
+					level: "error",
+					module: "logistics",
+					subModule: "orders",
+					message: `No invoice address found for ${customerID}`,
+					data: [],
+					notify: true,
+				});
+			}
+			return {
+				customerId: parseInt(customerID),
+				invoiceAddressId: invoice.invoiceAddress, // matched to the default invoice address
+				customerOrderNo: o.CustomerOrderNumber,
+				orderDate: new Date(Date.now()).toLocaleString("en-US"),
+				positions: [
+					{
+						deliveryAddressId: parseInt(customerID),
+						customerArticleNo: o.CustomerArticleNumber,
+						quantity: parseInt(o.Quantity),
+						deliveryDate: excelDateStuff(o.DeliveryDate, defaultOrderTime),
+						customerLineItemNo: o.CustomerLineNumber, // this is how it is currently sent over from abbott
+						customerReleaseNo: o.CustomerRealeaseNumber, // same as above
+						remark: o.Remark === "" ? null : o.Remark,
+					},
+				],
+			};
+		});
+
+		// do that fun combining thing
+		const updatedPredefinedObject = {
+			...predefinedObject,
+			orders: [...predefinedObject.orders, ...nOrder],
+		};
+
+		// post the orders to the server
+		const posting: any = await postData(
+			{
+				type: "orders",
+				endpoint: "/public/v1.0/DemandManagement/ORDERS",
+				data: updatedPredefinedObject as any,
+			},
+			user,
+		);
+
+		postedOrders.push({
+			customer: customerID,
+			//totalOrders: orders?.length(),
+			success: posting.success,
+			message: posting.message,
+			data: posting.data,
+		});
+	}
+
+	return {
+		success: postedOrders[0].success,
+		message: postedOrders[0].message,
+		data: postedOrders,
+	};
+};

backend/logistics/logistics.dm.orders.route.ts

@@ -0,0 +1,104 @@
+import { Router } from "express";
+import multer from "multer";
+import { requireAuth } from "../middleware/auth.middleware.js";
+
+import { apiReturn } from "../utils/returnHelper.utils.js";
+import { abbottOrders } from "./logistics.dm.orders.map.abbott.js";
+import { energizerOrders } from "./logistics.dm.orders.map.energizer.js";
+import { macroImportOrders } from "./logistics.dm.orders.map.macroImport.js";
+import { standardOrders } from "./logistics.dm.orders.map.standard.js";
+import { scjOrders } from "./logistics.dm.orders.scj.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: "orders",
+			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: "orders",
+			message: "A fileType must be provided.",
+			data: [],
+			status: 400,
+		});
+	}
+
+	//console.log("fileType:", req.body.fileType);
+
+	let result: ForecastResult;
+
+	switch (fileType) {
+		case "standard":
+			result = await standardOrders(req.file, req.user);
+			break;
+
+		case "abbott":
+			// daytons orders
+			result = await abbottOrders(req.file, req.user);
+			break;
+
+		case "energizer":
+			// daytons orders
+			result = await energizerOrders(req.file, req.user);
+			break;
+
+		case "macro":
+			result = await macroImportOrders(req.file, req.user);
+			break;
+
+		case "scj":
+			// this is for west bend orders
+			result = await scjOrders(req.file, req.user);
+			break;
+
+		default:
+			return apiReturn(res, {
+				success: false,
+				level: "error",
+				module: "dm",
+				subModule: "orders",
+				message: `Invalid fileType: ${fileType}`,
+				data: [],
+				status: 400,
+			});
+	}
+
+	return apiReturn(res, {
+		success: result.success ?? false,
+		level: result.success ? "info" : "error",
+		module: "dm",
+		subModule: "orders",
+		message: result.success
+			? "The orders 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.orders.scj.ts

@@ -0,0 +1,175 @@
+import * as XLSX from "xlsx";
+import { runDatamartQuery } from "../datamart/datamart.controller.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 scjOrders = async (data: any, user: any) => {
+	/**
+	 * Standard orders meaning that we get the standard file exported and fill it out and uplaod to lst.
+	 */
+
+	const customerID = 48;
+
+	const plantToken = process.env.PROD_PLANT_TOKEN;
+
+	/*
+    get the order state.
+    */
+
+	const { data: o, error: oe } = await tryCatch(
+		runDatamartQuery({ name: "orderState", options: {} }),
+	);
+
+	if (oe) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [oe.message],
+			notify: true,
+		});
+	}
+
+	const openOrders: any = o?.data;
+
+	/*
+    get default invoice address
+    */
+	const { data: invoice, error: ie } = await tryCatch(
+		runDatamartQuery({ name: "invoiceAddress", options: {} }),
+	);
+
+	if (ie) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "logistics",
+			subModule: "orders",
+			message: `Error getting Article info`,
+			data: [ie.message],
+			notify: true,
+		});
+	}
+
+	const i: any = invoice?.data;
+
+	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;
+
+	// define custom headers
+	const headers = [
+		"ItemNo",
+		"Description",
+		"DeliveryDate",
+		"Quantity",
+		"PO",
+		"Releases",
+		"remarks",
+	];
+
+	const orderData = XLSX.utils.sheet_to_json(sheet, {
+		defval: "",
+		header: headers,
+		range: 1,
+	});
+
+	// the base of the import
+	const predefinedObject = {
+		receivingPlantId: plantToken ?? "test1",
+		documentName: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		sender: user.username || "lst-system",
+		externalRefNo: `OrdersFromLST-${new Date(Date.now()).toLocaleString(
+			"en-US",
+		)}`,
+		orders: [],
+	};
+
+	let newOrders: any = orderData;
+
+	// filter out the orders that have already been started just to reduce the risk of errors.
+	newOrders.filter((oo: any) =>
+		openOrders.some(
+			(o: any) => o.CustomerOrderNumber === oo.CustomerOrderNumber,
+		),
+	);
+
+	// filter out the blanks
+	newOrders = newOrders.filter((z: any) => z.ItemNo !== "");
+
+	const nOrder = newOrders.map((o: any) => {
+		const invoice = i.filter((i: any) => i.deliveryAddress === customerID);
+		if (!invoice) {
+			return null;
+		}
+
+		if (o.Releases === "") {
+			return null;
+		}
+
+		if (o.PO === "") {
+			return null;
+		}
+
+		const date = isNaN(o.DeliveryDate)
+			? new Date(o.DeliveryDate)
+			: excelDateStuff(o.DeliveryDate);
+		return {
+			customerId: customerID,
+			invoiceAddressId: invoice[0].invoiceAddress, // matched to the default invoice address
+			customerOrderNo: o.PO,
+			orderDate: new Date(Date.now()).toLocaleString("en-US"),
+			positions: [
+				{
+					deliveryAddressId: customerID,
+					customerArticleNo: o.ItemNo,
+					quantity: parseInt(o.Quantity),
+					deliveryDate: date, //excelDateStuff(o.DELDATE),
+					customerLineItemNo: o.PO, // this is how it is currently sent over from abbott
+					customerReleaseNo: o.Releases, // same as above
+					remark: o.remarks === "" ? null : o.remarks,
+				},
+			],
+		};
+	});
+
+	//console.log(nOrder.filter((o: any) => o !== undefined));
+
+	//     // do that fun combining thing
+	const updatedPredefinedObject = {
+		...predefinedObject,
+		orders: [
+			...predefinedObject.orders,
+			...nOrder.filter((o: any) => o !== undefined),
+		],
+	};
+
+	//console.log(updatedPredefinedObject.orders[0]);
+
+	//     // post the orders to the server
+	const posting: any = await postData(
+		{
+			type: "orders",
+			endpoint: "/public/v1.0/DemandManagement/ORDERS",
+			data: updatedPredefinedObject as any,
+		},
+		user,
+	);
+
+	return {
+		customer: customerID,
+		//totalOrders: orders?.length(),
+		success: posting.success,
+		message: posting.message,
+		data: posting.data,
+	};
+};

backend/logistics/logistics.dm.postData.ts

@@ -0,0 +1,80 @@
+import { db } from "../db/db.controller.js";
+import { forecastImport } from "../db/schema/forecastImports.schema.js";
+import { orderImport } from "../db/schema/ordersImports.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;
+	invoiceAddressId?: 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,
+			});
+		}
+
+		if (data.type === "orders") {
+			await db.insert(orderImport).values({
+				receivingPlantId: data.data.receivingPlantId ?? "test1",
+				documentName: data.data.documentName ?? "order-data-missing",
+				sender: data.data.sender ?? "lst-user",
+				customerId: data.data.customerId ?? "0",
+				invoiceAddressId: data.data.invoiceAddressId ?? "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,28 @@
+import type { Express } from "express";
+import { featureCheck } from "../middleware/featureActive.middleware.js";
+import forecast from "./logistics.dm.forecast.route.js";
+import orders from "./logistics.dm.orders.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,
+	);
+
+	app.use(
+		`${baseUrl}/api/logistics/dm/orders`,
+		featureCheck("demandManagement"),
+		orders,
+	);
+
+	// all other system should be under /api/system/*
+};

backend/mobile/scanLogs.route.ts

@@ -3,6 +3,7 @@ import { Router } from "express";
 import { db } from "../db/db.controller.js";
 import { scanLog } from "../db/schema/scanlog.schema.js";
 import { scanUser } from "../db/schema/scanUsers.js";
+import { emitToRoom } from "../socket.io/roomEmitter.socket.js";
 import { apiReturn } from "../utils/returnHelper.utils.js";
 
 const router = Router();
@@ -32,6 +33,8 @@ router.post("/", async (req, res) => {
 		})
 		.returning();
 
+	emitToRoom(`scanLog`, newLog[0]);
+
 	return apiReturn(res, {
 		success: true,
 		level: "info",

backend/prodSql/queries/datamart.bulkOrderArticleInfo.sql

@@ -0,0 +1,26 @@
+USE [test1_AlplaPROD2.0_Read]
+SELECT 
+x.HumanReadableId as av
+,x.Name
+,Alias
+,CustomerDescription
+,CustomerArticleNumber
+,LoadingUnitPieces
+,LoadingUnitsPerTruck
+,LoadingUnitPieces * LoadingUnitsPerTruck as totalTruckLoad
+  FROM [masterData].[Article] (nolock) as x
+
+--get the sales price stuff
+left join
+(select * from (select * 
+,ROW_NUMBER() OVER (PARTITION BY articleId ORDER BY validAfter DESC) as rn
+from [masterData].[SalesPrice] (nolock))as b 
+where rn = 1) as s on 
+x.id = s.ArticleId
+
+-- link pkg info
+left join
+[masterData].[PackagingInstruction] (nolock) as p on
+s.PackagingId = p.id
+
+where x.HumanReadableId in ([articles])

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.financePriceAudit.sql

@@ -0,0 +1,63 @@
+use AlplaPROD_test1
+
+select 
+--(select wert from dbo.T_SystemParameter where Bezeichnung = 'Werkskuerzel') as Plant, 
+b.IdArtikelVarianten
+,ArtikelVariantenAlias
+,ArtikelVariantenBez
+,a.Bezeichnung as articleType
+,sum(EinlagerungsMengeVPKSum) totalPal
+,sum(EinlagerungsMengeSum) totalPieces
+--,ProduktionsDatumMin
+,pp.VKPreis as salesPrice
+,sp.EKPreis as purhcasePrice
+,FORMAT(convert(date, ProduktionsDatumMin, 111), 'yyyy-MM-dd') as bookinDate
+,DATEDIFF(DAY, convert(date, ProduktionsDatumMin, 111), getdate()) as aged
+--,* 
+
+from dbo.V_LagerPositionenBarcodes (nolock) b
+
+/* purhcase price */
+left join
+(select * from (select
+IdArtikelvarianten
+,VKPreis
+,ROW_NUMBER() OVER (PARTITION BY IdArtikelVarianten ORDER BY gueltigabDatum DESC) AS rn
+--,* 
+from T_HistoryVK (nolock))c
+
+where rn = 1) as pp on
+b.IdArtikelVarianten = pp.IdArtikelvarianten
+
+/* sales price */
+left join 
+(select * from (select
+IdArtikelvarianten
+,EKPreis
+,ROW_NUMBER() OVER (PARTITION BY IdArtikelVarianten ORDER BY gueltigabDatum DESC) AS rn
+--,* 
+from T_HistoryEK (nolock) )x
+
+where rn = 1) sp on
+sp.IdArtikelvarianten = b.IdArtikelVarianten
+
+/* article type */
+
+left join 
+
+T_Artikeltyp (nolock) a
+on a.IdArtikelTyp = b.IdArtikelTyp
+
+where IdWarenlager not in (1,5,6)
+and ProduktionsDatumMin < '[date]' -- '2025-05-31'
+
+group by b.IdArtikelVarianten
+,ArtikelVariantenAlias
+,ArtikelVariantenBez
+,convert(date, ProduktionsDatumMin, 111)
+,pp.VKPreis
+,sp.EKPreis
+,a.Bezeichnung
+
+
+order by IdArtikelVarianten

backend/prodSql/queries/datamart.invoiceAddress.sql

@@ -0,0 +1,15 @@
+use [test1_AlplaPROD2.0_Read]
+
+SELECT deliveryAddress.humanreadableid as deliveryAddress
+,invoice.HumanReadableId as invoiceAddress
+,[Default]
+
+  FROM [masterData].[InvoiceAddress] (nolock) as d
+
+  join
+  [masterData].[Address] deliveryAddress (nolock) on deliveryAddress.id = d.AddressId
+
+  join 
+  [masterData].[Address] invoice (nolock) on invoice.id = d.InvoiceAddressId
+
+ where [Default] = 1

backend/prodSql/queries/datamart.openOrders.sql

@@ -27,7 +27,15 @@ left join
 [order].Header as h (nolock) on
 h.id = l.HeaderId
 
-WHERE releasestate not in (1, 2, 4)
+/*
+0 = open
+1 = shipped
+2 = customer canceled
+3 = shipped
+4 = internal canceled
+*/
+
+WHERE releasestate not in (1, 2,3, 4)
 AND r.deliverydate between getDate() + -[startDay] and  getdate() + [endDay]
 
 order by r.deliverydate

backend/prodSql/queries/datamart.orderState.sql

@@ -0,0 +1,27 @@
+use [test1_AlplaPROD2.0_Read]
+
+SELECT
+CustomerOrderNumber 
+,r.CustomerReleaseNumber
+, OrderState
+, r.ReleaseState
+, h.CreatedByEdi
+,r.AdditionalInformation1 -- the info for od exists here, this will be mapped over to an email sending out saying someoen tryied to update an od release
+
+--, *
+  FROM [order].[Header] (nolock) h
+
+  /* get the line items to link to the headers */ 
+  left join
+  [order].[LineItem] (nolock) l on
+  l.HeaderId = h.id
+
+  /* get the releases to link to the headers */ 
+  left join
+  [order].[Release] (nolock) r on
+  r.LineItemId = l.id
+
+  where 
+  --h.CreatedByEdi = 1 
+  r.ReleaseState >= 1 
+  --and  CustomerOrderNumber in ( '2358392')

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/prodSql/queries/prod.auditlog.sql

@@ -0,0 +1,10 @@
+USE [test1_AlplaPROD2.0_Read]
+
+DECLARE @lastId BIGINT = [lstId];
+
+SELECT TOP (500)
+*
+FROM [support].[AuditLog] WITH (NOLOCK)
+WHERE ActorName NOT IN ('SCHEDULER', 'SCAN')
+  AND Id > @lastId
+ORDER BY Id ASC;

backend/routeHandler.routes.ts

@@ -7,6 +7,7 @@ import { setupDatamartRoutes } from "./datamart/datamart.routes.js";
 import { setupDockDoorRoutes } from "./dockdoorScanning/dockdoor.routes.js";
 import { setupEomRoutes } from "./eom/eom.routes.js";
 import { setupGPSqlRoutes } from "./gpSql/gpSql.routes.js";
+import { setupLogisticsRoutes } from "./logistics/logistics.routes.js";
 import { setupMobileRoutes } from "./mobile/mobile.routes.js";
 import { setupNotificationRoutes } from "./notification/notification.routes.js";
 import { setupOCPRoutes } from "./ocp/ocp.routes.js";
@@ -18,13 +19,13 @@ import { setupUtilsRoutes } from "./utils/utils.routes.js";
 
 export const setupRoutes = (baseUrl: string, app: Express) => {
 	//routes that are on by default
+	setupDatamartRoutes(baseUrl, app);
 	setupMobileRoutes(baseUrl, app);
 	setupSystemRoutes(baseUrl, app);
 	setupAdminRoutes(baseUrl, app);
 	setupApiDocsRoutes(baseUrl, app);
 	setupProdSqlRoutes(baseUrl, app);
 	setupGPSqlRoutes(baseUrl, app);
-	setupDatamartRoutes(baseUrl, app);
 	setupAuthRoutes(baseUrl, app);
 	setupUtilsRoutes(baseUrl, app);
 	setupOpendockRoutes(baseUrl, app);
@@ -33,4 +34,5 @@ export const setupRoutes = (baseUrl: string, app: Express) => {
 	setupTCPRoutes(baseUrl, app);
 	setupDockDoorRoutes(baseUrl, app);
 	setupEomRoutes(baseUrl, app);
+	setupLogisticsRoutes(baseUrl, app);
 };

backend/scaler/cronerActiveJobs.spec.ts

@@ -1,43 +0,0 @@
-import type { OpenAPIV3_1 } from "openapi-types";
-
-export const cronerActiveJobs: OpenAPIV3_1.PathsObject = {
-	"/api/utils/croner": {
-		get: {
-			summary: "Cron jobs",
-			description: "Returns all jobs on the server.",
-			tags: ["Utils"],
-			responses: {
-				"200": {
-					description: "Jobs returned",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									status: {
-										type: "boolean",
-										format: "boolean",
-										example: true,
-									},
-									uptime: {
-										type: "number",
-										format: "3454.34",
-										example: 3454.34,
-									},
-									memoryUsage: {
-										type: "string",
-										format: "Heap: 11.62 MB / RSS: 86.31 MB",
-									},
-									sqlServerStats: {
-										type: "number",
-										format: "442127",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};

backend/scaler/cronerStatusChange.spec.ts

@@ -1,94 +0,0 @@
-import type { OpenAPIV3_1 } from "openapi-types";
-
-export const cronerStatusChange: OpenAPIV3_1.PathsObject = {
-	"/api/utils/croner/{status}": {
-		patch: {
-			summary: "Pauses or Resume the Job",
-			description:
-				"When sending start or stop with job name it will resume or stop the job",
-			tags: ["Utils"],
-
-			parameters: [
-				{
-					name: "status",
-					in: "path",
-					required: true,
-					description: "Status change",
-					schema: {
-						type: "string",
-					},
-					example: "start",
-				},
-				{
-					name: "limit",
-					in: "query",
-					required: false, // 👈 optional
-					description: "Maximum number of records to return",
-					schema: {
-						type: "integer",
-						minimum: 1,
-						maximum: 100,
-					},
-					example: 10,
-				},
-			],
-			requestBody: {
-				required: true,
-				content: {
-					"application/json": {
-						schema: {
-							type: "object",
-							required: ["name"],
-							properties: {
-								name: {
-									type: "string",
-									example: "start",
-								},
-							},
-						},
-					},
-				},
-			},
-
-			responses: {
-				"200": {
-					description: "Successful response",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									success: { type: "boolean", example: true },
-									data: {
-										type: "object",
-										example: {
-											name: "exampleName",
-											value: "some value",
-										},
-									},
-								},
-							},
-						},
-					},
-				},
-				"400": {
-					description: "Bad request",
-					content: {
-						"application/json": {
-							schema: {
-								type: "object",
-								properties: {
-									success: { type: "boolean", example: false },
-									message: {
-										type: "string",
-										example: "Invalid name parameter",
-									},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-	},
-};

backend/server.ts

@@ -1,5 +1,6 @@
 import { createServer } from "node:http";
 import os from "node:os";
+
 import createApp from "./app.js";
 import { db } from "./db/db.controller.js";
 import { startDbNotificationListener } from "./db/db.listener.js";
@@ -8,7 +9,7 @@ import { dbCleanup } from "./db/dbCleanup.controller.js";
 import { type Setting, settings } from "./db/schema/settings.schema.js";
 import { connectGPSql } from "./gpSql/gpSqlConnection.controller.js";
 import { createLogger } from "./logger/logger.controller.js";
-import { historicalSchedule } from "./logistics/logistics.historicalInv.js";
+import { historicalSchedule } from "./logistics/logistics.utils.historicalInv.js";
 import { startNotifications } from "./notification/notification.controller.js";
 import { sqlJobCleanUp } from "./notification/notification.SqlJobCleanUp.js";
 import { createNotifications } from "./notification/notifications.master.js";
@@ -20,6 +21,7 @@ import { monitorAlplaPurchase } from "./purchase/purchase.controller.js";
 import { setupSocketIORoutes } from "./socket.io/serverSetup.js";
 import { serversChecks } from "./system/serverData.controller.js";
 import { baseSettingValidationCheck } from "./system/settingsBase.controller.js";
+import { monitorProdAuditLog } from "./system/system.prodAuditLog.utils.js";
 import { startTCPServer } from "./tcpServer/tcp.server.js";
 import {
 	aggregateRouteHitsForBusinessDay,
@@ -32,6 +34,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();
 
@@ -87,6 +90,9 @@ const start = async () => {
 		);
 
 		createCronJob("cleanHitsUp", "0 0 7 * * *", () => cleanupOldRouteHits());
+		createCronJob("ProdAuditLogMonitor", "*/30 * * * * *", () =>
+			monitorProdAuditLog(),
+		);
 		// one shots only needed to run on server startups
 		createNotifications();
 		startNotifications();

backend/socket.io/socket.roomConfig.ts

@@ -6,7 +6,8 @@ export type RoomKey =
 	| "labels"
 	| "admin"
 	| "inventory"
-	| "dockDoorLoading";
+	| "dockDoorLoading"
+	| "scanLog";
 
 export type SocketUser = {
 	id: string;
@@ -105,6 +106,11 @@ export const roomConfigs: Record<RoomKey, RoomConfig> = {
 			});
 		},
 	},
+
+	scanLog: {
+		canJoin: () => true,
+		buildRoom: () => "scanLog",
+	},
 } satisfies Record<string, RoomConfig>;
 
 /*

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/system/system.prodAuditLog.utils.ts

@@ -0,0 +1,168 @@
+import { eq } from "drizzle-orm";
+import { db } from "../db/db.controller.js";
+import { prodAuditLogState } from "../db/schema/prodAuditlog.lastProcessed.schema.js";
+import {
+	type NewProdAuditLog,
+	prodAuditLog,
+} from "../db/schema/prodAuditlog.schema.js";
+import { createLogger } from "../logger/logger.controller.js";
+import { prodQuery } from "../prodSql/prodSqlQuery.controller.js";
+import {
+	type SqlQuery,
+	sqlQuerySelector,
+} from "../prodSql/prodSqlQuerySelector.utils.js";
+import { delay } from "../utils/delay.utils.js";
+import { returnFunc } from "../utils/returnHelper.utils.js";
+import { tryCatch } from "../utils/trycatch.utils.js";
+
+const log = createLogger({ module: "system", subModule: "prodAuditLog" });
+let bufferProcessInProgress = false;
+
+export const monitorProdAuditLog = async () => {
+	const auditLogQuery = sqlQuerySelector(`prod.auditlog`) as SqlQuery;
+
+	/*
+    get the last processed audit log so we can only pull the newest ones.
+
+    as the initial go will be zero we want to look at the top 1 so we only pull the most recent one.
+
+    */
+
+	const latestAuditId = await db.select().from(prodAuditLogState).limit(1);
+	let auditQuery = auditLogQuery.query;
+	if (latestAuditId.length === 0) {
+		auditQuery = auditQuery
+			.replace(
+				"DECLARE @lastId BIGINT = [lstId];",
+				"--DECLARE @lastId BIGINT = [lstId];",
+			)
+			.replace("TOP (500)", "TOP (1)")
+			.replace("ASC", "DESC")
+			.replace("AND Id > @lastId", "--AND Id > @lastId");
+	} else {
+		auditQuery = auditQuery.replace(
+			"[lstId]",
+			`${latestAuditId[0]?.lastImportedAuditId}`,
+		);
+	}
+
+	const { data: queryRun, error } = await tryCatch(
+		prodQuery(auditQuery, `Running auditLog query`),
+	);
+
+	if (error) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "system",
+			subModule: "auditLog",
+			message: `Data for: AuditLog Failed`,
+			data: [error],
+			notify: false,
+		});
+	}
+
+	if (!queryRun.success) {
+		return returnFunc({
+			success: false,
+			level: "error",
+			module: "datamart",
+			subModule: "query",
+			message: queryRun.message,
+			data: queryRun.data,
+			notify: false,
+		});
+	}
+
+	const safeJsonParse = (value: unknown) => {
+		if (typeof value !== "string") return value;
+
+		try {
+			return JSON.parse(value);
+		} catch {
+			return { raw: value };
+		}
+	};
+
+	// remap everything lst logs to keep it easy to read
+
+	if (queryRun.data.length > 0) {
+		const auditRows = queryRun.data.map((r) => ({
+			auditId: r.Id,
+			actorName: r.ActorName,
+			auditCreatedDate: r.CreatedDateTime,
+			message: r.Message,
+			content: safeJsonParse(r.Content),
+			status: "pending",
+			processed: false,
+			retryCount: 0,
+		})) as NewProdAuditLog[];
+
+		await db.insert(prodAuditLog).values(auditRows).onConflictDoNothing();
+
+		const newestAuditId = queryRun.data.at(-1).Id;
+
+		await db
+			.insert(prodAuditLogState)
+			.values({
+				id: 1,
+				lastImportedAuditId: newestAuditId,
+				updatedAt: new Date(),
+			})
+			.onConflictDoUpdate({
+				target: prodAuditLogState.id,
+				set: {
+					lastImportedAuditId: newestAuditId,
+					updatedAt: new Date(),
+				},
+			});
+	}
+};
+
+export const bufferProcess = async (_data: unknown) => {
+	if (bufferProcessInProgress) {
+		log.debug({}, "[bufferProcess] already running, skipping trigger");
+		return;
+	}
+
+	bufferProcessInProgress = true;
+
+	try {
+		log.debug({}, "[bufferProcess] started");
+
+		while (true) {
+			const row = await db.query.prodAuditLog.findFirst({
+				where: (audit, { eq }) => eq(audit.processed, false),
+				orderBy: (audit, { asc }) => [asc(audit.auditId)],
+			});
+
+			if (!row) {
+				log.debug({}, "[bufferProcess] no pending rows");
+				break;
+			}
+
+			log.debug({}, "[bufferProcess] processing audit row", row.auditId);
+
+			// tiny delay so you can visually validate the flow
+			await delay(250);
+
+			// TODO add in case statement to do things, if thing returns good then say good if fails then we set to error and let it retry later.
+			// for items that don't fall in the case will auto set status to success
+			// console.log(row.message.split("."));
+			await db
+				.update(prodAuditLog)
+				.set({
+					processed: true,
+					status: "success",
+					processedAt: new Date(),
+					updatedAt: new Date(),
+				})
+				.where(eq(prodAuditLog.id, row.id));
+		}
+	} catch (error) {
+		log.error({ stack: error }, "[bufferProcess] failed");
+	} finally {
+		bufferProcessInProgress = false;
+		log.debug({}, "[bufferProcess] finished");
+	}
+};

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,44 @@
+import { getJsDateFromExcel } from "excel-date-to-js";
+
+export const excelDateStuff = (
+	serial: number,
+	defaultTime = 800,
+	time?: number,
+) => {
+	if (typeof serial !== "number" || serial <= 0) {
+		return "invalid Date";
+	}
+
+	// Get base date from Excel serial (this gives you UTC midnight)
+	const excelTime = excelSerialToTime(serial);
+	const finalTime = time ?? excelTime ?? defaultTime;
+
+	const date = getJsDateFromExcel(Math.floor(serial));
+
+	const localOffset = new Date().getTimezoneOffset() / 60;
+	const hours = Math.floor(finalTime / 100);
+	const minutes = finalTime % 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();
+};
+
+const excelSerialToTime = (serial: number): number | null => {
+	const fraction = serial % 1;
+
+	if (fraction <= 0) {
+		return null;
+	}
+
+	const totalMinutes = Math.round(fraction * 24 * 60);
+	const hours = Math.floor(totalMinutes / 60);
+	const minutes = totalMinutes % 60;
+
+	return hours * 100 + minutes;
+};

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

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

@@ -0,0 +1,53 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { Truck } from "lucide-react";
+import { getSettings } from "../../lib/queries/getSettings";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+export default function LogisticsSidebar({ session }: any) {
+	const { setOpen } = useSidebar();
+	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
+	const items = [
+		{
+			title: "Demand Management",
+			url: "/logistics/dm",
+			icon: Truck,
+			role: ["systemAdmin", "admin", "warehouse", "transport"],
+			module: "logistics",
+			active:
+				!isLoading &&
+				settings.filter((n: any) => n.name === "demandManagement")[0].active,
+		},
+	];
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Logistics</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<div key={item.title}>
+							{item.role.includes(session.user.role) && item.active && (
+								<SidebarMenuItem>
+									<SidebarMenuButton asChild>
+										<Link to={item.url} onClick={() => setOpen(false)}>
+											<item.icon />
+											<span>{item.title}</span>
+										</Link>
+									</SidebarMenuButton>
+								</SidebarMenuItem>
+							)}
+						</div>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -1,16 +1,21 @@
 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";
 import { permissionQuery } from "../../lib/queries/permsCheck";
 import AdminSidebar from "./AdminBar";
 import DocBar from "./DocBar";
+import LogisticsSidebar from "./LogisticsBar";
 import MobileBar from "./MobileBar";
 import TransportationBar from "./TransportationBar";
 import WarehouseBar from "./Warhouse";
@@ -24,6 +29,13 @@ export function AppSidebar() {
 		}),
 	);
 
+	const { data: canReadWarehouse = false } = useQuery(
+		permissionQuery({
+			warehouse: ["update"],
+		}),
+	);
+	const { setOpen } = useSidebar();
+
 	// const { data: canReadWarehouse = false } = useQuery(
 	// 	permissionQuery({
 	// 		warehouse: ["read"],
@@ -36,15 +48,17 @@ export function AppSidebar() {
 			collapsible="offcanvas"
 			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
 		>
-			<SidebarHeader>
+			<SidebarContent>
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
 							<DocBar />
 							{!isLoading &&
+								canReadWarehouse &&
 								settings.filter((n: any) => n.name === "mobile")[0].active && (
 									<MobileBar />
 								)}
+							{!isLoading && session && <LogisticsSidebar session={session} />}
 
 							{!isLoading &&
 								settings.filter((n: any) => n.name === "opendock_sync")[0]
@@ -64,7 +78,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,
+}

frontend/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

frontend/src/components/ui/label.tsx

@@ -11,7 +11,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}

frontend/src/components/ui/menubar.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-none border p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn("px-2 py-2 text-xs data-inset:pl-8", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

frontend/src/components/ui/native-select.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-none border border-input bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

frontend/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,164 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

frontend/src/components/ui/pagination.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-none bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}