9280 lines
252 KiB
Plaintext
Executable File
9280 lines
252 KiB
Plaintext
Executable File
This file is a merged representation of the entire codebase, combining all repository files into a single document.
|
|
Generated by Repomix on: 2024-12-09T06:29:51.427Z
|
|
|
|
================================================================
|
|
File Summary
|
|
================================================================
|
|
|
|
Purpose:
|
|
--------
|
|
This file contains a packed representation of the entire repository's contents.
|
|
It is designed to be easily consumable by AI systems for analysis, code review,
|
|
or other automated processes.
|
|
|
|
File Format:
|
|
------------
|
|
The content is organized as follows:
|
|
1. This summary section
|
|
2. Repository information
|
|
3. Repository structure
|
|
4. Multiple file entries, each consisting of:
|
|
a. A separator line (================)
|
|
b. The file path (File: path/to/file)
|
|
c. Another separator line
|
|
d. The full contents of the file
|
|
e. A blank line
|
|
|
|
Usage Guidelines:
|
|
-----------------
|
|
- This file should be treated as read-only. Any changes should be made to the
|
|
original repository files, not this packed version.
|
|
- When processing this file, use the file path to distinguish
|
|
between different files in the repository.
|
|
- Be aware that this file may contain sensitive information. Handle it with
|
|
the same level of security as you would the original repository.
|
|
|
|
Notes:
|
|
------
|
|
- Some files may have been excluded based on .gitignore rules and Repomix's
|
|
configuration.
|
|
- Binary files are not included in this packed representation. Please refer to
|
|
the Repository Structure section for a complete list of file paths, including
|
|
binary files.
|
|
|
|
Additional Info:
|
|
----------------
|
|
|
|
For more information about Repomix, visit: https://github.com/yamadashy/repomix
|
|
|
|
================================================================
|
|
Repository Structure
|
|
================================================================
|
|
.dockerignore
|
|
.env.example
|
|
.gitignore
|
|
biome.json
|
|
components.json
|
|
docker/build.sh
|
|
docker/caddy/Caddyfile
|
|
docker/compose.yml
|
|
docker/deploy.sh
|
|
docker/images/.gitattributes
|
|
docker/save.sh
|
|
Dockerfile
|
|
drizzle.config.ts
|
|
drizzle/0000_overjoyed_strong_guy.sql
|
|
drizzle/meta/_journal.json
|
|
drizzle/meta/0000_snapshot.json
|
|
next.config.mjs
|
|
package.json
|
|
postcss.config.mjs
|
|
public/next.svg
|
|
public/vercel.svg
|
|
README.md
|
|
scripts/generate-data.js
|
|
src/app/admin/about/page.tsx
|
|
src/app/admin/admin-sidebar.tsx
|
|
src/app/admin/charts/printer-error-chart.tsx
|
|
src/app/admin/charts/printer-error-rate.tsx
|
|
src/app/admin/charts/printer-forecast.tsx
|
|
src/app/admin/charts/printer-utilization.tsx
|
|
src/app/admin/charts/printer-volume.tsx
|
|
src/app/admin/jobs/page.tsx
|
|
src/app/admin/layout.tsx
|
|
src/app/admin/page.tsx
|
|
src/app/admin/printers/columns.tsx
|
|
src/app/admin/printers/data-table.tsx
|
|
src/app/admin/printers/dialogs/create-printer.tsx
|
|
src/app/admin/printers/dialogs/delete-printer.tsx
|
|
src/app/admin/printers/dialogs/edit-printer.tsx
|
|
src/app/admin/printers/form.tsx
|
|
src/app/admin/printers/page.tsx
|
|
src/app/admin/settings/download/route.ts
|
|
src/app/admin/settings/page.tsx
|
|
src/app/admin/users/columns.tsx
|
|
src/app/admin/users/data-table.tsx
|
|
src/app/admin/users/dialog.tsx
|
|
src/app/admin/users/form.tsx
|
|
src/app/admin/users/page.tsx
|
|
src/app/api/job/[jobId]/remaining-time/route.ts
|
|
src/app/api/printers/route.ts
|
|
src/app/auth/login/callback/route.ts
|
|
src/app/auth/login/route.ts
|
|
src/app/globals.css
|
|
src/app/job/[jobId]/cancel-form.tsx
|
|
src/app/job/[jobId]/edit-comments.tsx
|
|
src/app/job/[jobId]/extend-form.tsx
|
|
src/app/job/[jobId]/finish-form.tsx
|
|
src/app/job/[jobId]/page.tsx
|
|
src/app/layout.tsx
|
|
src/app/my/jobs/columns.tsx
|
|
src/app/my/jobs/data-table.tsx
|
|
src/app/my/profile/page.tsx
|
|
src/app/not-found.tsx
|
|
src/app/page.tsx
|
|
src/app/printer/[printerId]/reserve/form.tsx
|
|
src/app/printer/[printerId]/reserve/page.tsx
|
|
src/components/data-card.tsx
|
|
src/components/dynamic-printer-cards.tsx
|
|
src/components/header/index.tsx
|
|
src/components/header/navigation.tsx
|
|
src/components/login-button.tsx
|
|
src/components/logout-button.tsx
|
|
src/components/personalized-cards.tsx
|
|
src/components/printer-availability-badge.tsx
|
|
src/components/printer-card/countdown.tsx
|
|
src/components/printer-card/index.tsx
|
|
src/components/ui/alert-dialog.tsx
|
|
src/components/ui/alert.tsx
|
|
src/components/ui/avatar.tsx
|
|
src/components/ui/badge.tsx
|
|
src/components/ui/breadcrumb.tsx
|
|
src/components/ui/button.tsx
|
|
src/components/ui/card.tsx
|
|
src/components/ui/chart.tsx
|
|
src/components/ui/dialog.tsx
|
|
src/components/ui/dropdown-menu.tsx
|
|
src/components/ui/form.tsx
|
|
src/components/ui/hover-card.tsx
|
|
src/components/ui/input.tsx
|
|
src/components/ui/label.tsx
|
|
src/components/ui/scroll-area.tsx
|
|
src/components/ui/select.tsx
|
|
src/components/ui/skeleton.tsx
|
|
src/components/ui/sonner.tsx
|
|
src/components/ui/table.tsx
|
|
src/components/ui/tabs.tsx
|
|
src/components/ui/textarea.tsx
|
|
src/components/ui/toast.tsx
|
|
src/components/ui/toaster.tsx
|
|
src/components/ui/use-toast.ts
|
|
src/server/actions/authentication/logout.ts
|
|
src/server/actions/printers.ts
|
|
src/server/actions/printJobs.ts
|
|
src/server/actions/timer.ts
|
|
src/server/actions/user/delete.ts
|
|
src/server/actions/user/update.ts
|
|
src/server/actions/users.ts
|
|
src/server/auth/index.ts
|
|
src/server/auth/oauth.ts
|
|
src/server/auth/permissions.ts
|
|
src/utils/analytics/error-rate.ts
|
|
src/utils/analytics/errors.ts
|
|
src/utils/analytics/forecast.ts
|
|
src/utils/analytics/utilization.ts
|
|
src/utils/analytics/volume.ts
|
|
src/utils/drizzle.ts
|
|
src/utils/errors.ts
|
|
src/utils/fetch.ts
|
|
src/utils/guard.ts
|
|
src/utils/printers.ts
|
|
src/utils/strings.ts
|
|
src/utils/styles.ts
|
|
tailwind.config.ts
|
|
tsconfig.json
|
|
|
|
================================================================
|
|
Repository Files
|
|
================================================================
|
|
|
|
================
|
|
File: .dockerignore
|
|
================
|
|
# Build and utility assets
|
|
docker/
|
|
scripts/
|
|
|
|
# Ignore node_modules as they will be installed in the container
|
|
node_modules
|
|
|
|
# Ignore build artifacts
|
|
.next
|
|
|
|
# Ignore runtime data
|
|
db/
|
|
|
|
# Ignore local configuration files
|
|
.env
|
|
.env.example
|
|
|
|
# Ignore version control files
|
|
.git
|
|
.gitignore
|
|
|
|
# Ignore IDE/editor specific files
|
|
*.log
|
|
*.tmp
|
|
*.DS_Store
|
|
.vscode/
|
|
.idea/
|
|
|
|
================
|
|
File: .env.example
|
|
================
|
|
# OAuth Configuration
|
|
OAUTH_CLIENT_ID=client_id
|
|
OAUTH_CLIENT_SECRET=client_secret
|
|
|
|
================
|
|
File: .gitignore
|
|
================
|
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
|
|
# db folder
|
|
db/
|
|
|
|
# Env file
|
|
.env
|
|
|
|
|
|
# dependencies
|
|
/node_modules
|
|
/.pnp
|
|
.pnp.js
|
|
.yarn/install-state.gz
|
|
|
|
# testing
|
|
/coverage
|
|
|
|
# next.js
|
|
/.next/
|
|
/out/
|
|
|
|
# production
|
|
/build
|
|
|
|
# misc
|
|
.DS_Store
|
|
*.pem
|
|
|
|
# debug
|
|
npm-debug.log*
|
|
yarn-debug.log*
|
|
yarn-error.log*
|
|
|
|
# local env files
|
|
.env*.local
|
|
|
|
# vercel
|
|
.vercel
|
|
|
|
# typescript
|
|
*.tsbuildinfo
|
|
next-env.d.ts
|
|
|
|
================
|
|
File: biome.json
|
|
================
|
|
{
|
|
"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
|
|
"organizeImports": {
|
|
"enabled": true
|
|
},
|
|
"formatter": {
|
|
"enabled": true,
|
|
"lineWidth": 120
|
|
},
|
|
"linter": {
|
|
"enabled": true,
|
|
"rules": {
|
|
"recommended": true,
|
|
"correctness": {
|
|
"noUnusedImports": "error"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
================
|
|
File: components.json
|
|
================
|
|
{
|
|
"$schema": "https://ui.shadcn.com/schema.json",
|
|
"style": "new-york",
|
|
"rsc": true,
|
|
"tsx": true,
|
|
"tailwind": {
|
|
"config": "tailwind.config.ts",
|
|
"css": "src/app/globals.css",
|
|
"baseColor": "neutral",
|
|
"cssVariables": true,
|
|
"prefix": ""
|
|
},
|
|
"aliases": {
|
|
"components": "@/components",
|
|
"utils": "@/utils/styles"
|
|
}
|
|
}
|
|
|
|
================
|
|
File: docker/build.sh
|
|
================
|
|
#!/bin/bash
|
|
|
|
# Define image name
|
|
MYP_RP_IMAGE_NAME="myp-rp"
|
|
|
|
# Function to build Docker image
|
|
build_image() {
|
|
local image_name=$1
|
|
local dockerfile=$2
|
|
local platform=$3
|
|
|
|
echo "Building $image_name Docker image for $platform..."
|
|
|
|
docker buildx build --platform $platform -t ${image_name}:latest -f $dockerfile --load .
|
|
if [ $? -eq 0 ]; then
|
|
echo "$image_name Docker image built successfully"
|
|
else
|
|
echo "Error occurred while building $image_name Docker image"
|
|
exit 1
|
|
fi
|
|
}
|
|
|
|
# Create and use a builder instance (if not already created)
|
|
BUILDER_NAME="myp-rp-arm64-builder"
|
|
docker buildx create --name $BUILDER_NAME --use || docker buildx use $BUILDER_NAME
|
|
|
|
# Build myp-rp image
|
|
build_image "$MYP_RP_IMAGE_NAME" "$PWD/Dockerfile" "linux/arm64"
|
|
|
|
# Remove the builder instance
|
|
docker buildx rm $BUILDER_NAME
|
|
|
|
================
|
|
File: docker/caddy/Caddyfile
|
|
================
|
|
{
|
|
debug
|
|
}
|
|
|
|
m040tbaraspi001.de040.corpintra.net, m040tbaraspi001.de040.corpinter.net {
|
|
reverse_proxy myp-rp:3000
|
|
tls internal
|
|
}
|
|
|
|
================
|
|
File: docker/compose.yml
|
|
================
|
|
services:
|
|
caddy:
|
|
image: caddy:2.8
|
|
container_name: caddy
|
|
restart: unless-stopped
|
|
ports:
|
|
- 80:80
|
|
- 443:443
|
|
volumes:
|
|
- ./caddy/data:/data
|
|
- ./caddy/config:/config
|
|
- ./caddy/Caddyfile:/etc/caddy/Caddyfile:ro
|
|
myp-rp:
|
|
image: myp-rp:latest
|
|
container_name: myp-rp
|
|
env_file: "/srv/myp-env/github.env"
|
|
volumes:
|
|
- /srv/MYP-DB:/usr/src/app/db
|
|
restart: unless-stopped
|
|
|
|
================
|
|
File: docker/deploy.sh
|
|
================
|
|
#!/bin/bash
|
|
|
|
# Directory containing the Docker images
|
|
IMAGE_DIR="docker/images"
|
|
|
|
# Load all Docker images from the tar.xz files in the IMAGE_DIR
|
|
echo "Loading Docker images from $IMAGE_DIR..."
|
|
|
|
for image_file in "$IMAGE_DIR"/*.tar.xz; do
|
|
if [ -f "$image_file" ]; then
|
|
echo "Loading Docker image from $image_file..."
|
|
docker load -i "$image_file"
|
|
|
|
# Check if the image loading was successful
|
|
if [ $? -ne 0 ]; then
|
|
echo "Error occurred while loading Docker image from $image_file"
|
|
exit 1
|
|
fi
|
|
else
|
|
echo "No Docker image tar.xz files found in $IMAGE_DIR."
|
|
fi
|
|
done
|
|
|
|
# Execute docker compose
|
|
echo "Running docker compose..."
|
|
docker compose -f "docker/compose.yml" up -d
|
|
|
|
# Check if the operation was successful
|
|
if [ $? -eq 0 ]; then
|
|
echo "Docker compose executed successfully"
|
|
else
|
|
echo "Error occurred while executing docker compose"
|
|
exit 1
|
|
fi
|
|
|
|
echo "Deployment completed successfully"
|
|
|
|
================
|
|
File: docker/images/.gitattributes
|
|
================
|
|
caddy_2.8.tar.xz filter=lfs diff=lfs merge=lfs -text
|
|
myp-rp_latest.tar.xz filter=lfs diff=lfs merge=lfs -text
|
|
|
|
================
|
|
File: docker/save.sh
|
|
================
|
|
#!/bin/bash
|
|
|
|
# Get image name as argument
|
|
IMAGE_NAME=$1
|
|
PLATFORM="linux/arm64"
|
|
|
|
# Define paths
|
|
IMAGE_DIR="docker/images"
|
|
IMAGE_FILE="${IMAGE_DIR}/${IMAGE_NAME//[:\/]/_}.tar"
|
|
COMPRESSED_FILE="${IMAGE_FILE}.xz"
|
|
|
|
# Function to pull the image
|
|
pull_image() {
|
|
local image=$1
|
|
if [[ $image == arm64v8/* ]]; then
|
|
echo "Pulling image $image without platform specification..."
|
|
docker pull $image
|
|
else
|
|
echo "Pulling image $image for platform $PLATFORM..."
|
|
docker pull --platform $PLATFORM $image
|
|
fi
|
|
return $?
|
|
}
|
|
|
|
# Pull the image if it is not available locally
|
|
if ! docker image inspect ${IMAGE_NAME} &>/dev/null; then
|
|
if pull_image ${IMAGE_NAME}; then
|
|
echo "Image $IMAGE_NAME pulled successfully."
|
|
else
|
|
echo "Error occurred while pulling $IMAGE_NAME for platform $PLATFORM"
|
|
echo "Trying to pull $IMAGE_NAME without platform specification..."
|
|
|
|
# Attempt to pull again without platform
|
|
if pull_image ${IMAGE_NAME}; then
|
|
echo "Image $IMAGE_NAME pulled successfully without platform."
|
|
else
|
|
echo "Error occurred while pulling $IMAGE_NAME without platform."
|
|
echo "Trying to pull arm64v8/${IMAGE_NAME} instead..."
|
|
|
|
# Construct new image name
|
|
NEW_IMAGE_NAME="arm64v8/${IMAGE_NAME}"
|
|
if pull_image ${NEW_IMAGE_NAME}; then
|
|
echo "Image $NEW_IMAGE_NAME pulled successfully."
|
|
IMAGE_NAME=${NEW_IMAGE_NAME} # Update IMAGE_NAME to use the new one
|
|
else
|
|
echo "Error occurred while pulling $NEW_IMAGE_NAME"
|
|
exit 1
|
|
fi
|
|
fi
|
|
fi
|
|
else
|
|
echo "Image $IMAGE_NAME found locally. Skipping pull."
|
|
fi
|
|
|
|
# Save the Docker image
|
|
echo "Saving $IMAGE_NAME Docker image..."
|
|
docker save ${IMAGE_NAME} > $IMAGE_FILE
|
|
|
|
# Compress the Docker image (overwriting if file exists)
|
|
echo "Compressing $IMAGE_FILE..."
|
|
xz -z --force $IMAGE_FILE
|
|
|
|
if [ $? -eq 0 ]; then
|
|
echo "$IMAGE_NAME Docker image saved and compressed successfully as $COMPRESSED_FILE"
|
|
else
|
|
echo "Error occurred while compressing $IMAGE_NAME Docker image"
|
|
exit 1
|
|
fi
|
|
|
|
================
|
|
File: Dockerfile
|
|
================
|
|
FROM node:20-bookworm-slim
|
|
|
|
# Create application directory
|
|
RUN mkdir -p /usr/src/app
|
|
|
|
# Set environment variables
|
|
ENV PORT=3000
|
|
ENV NEXT_TELEMETRY_DISABLED=1
|
|
|
|
WORKDIR /usr/src/app
|
|
|
|
# Copy package.json and pnpm-lock.yaml
|
|
COPY package.json /usr/src/app
|
|
COPY pnpm-lock.yaml /usr/src/app
|
|
|
|
# Install pnpm
|
|
RUN corepack enable pnpm
|
|
|
|
# Install dependencies
|
|
RUN pnpm install
|
|
|
|
# Copy the rest of the application code
|
|
COPY . /usr/src/app
|
|
|
|
# Initialize Database, if it not already exists
|
|
RUN pnpm run db
|
|
|
|
# Build the application
|
|
RUN pnpm run build
|
|
|
|
EXPOSE 3000
|
|
|
|
# Start the application
|
|
CMD ["/bin/sh", "-c", "if [ ! -f ./db/sqlite.db ]; then pnpm db; fi && pnpm start"]
|
|
|
|
================
|
|
File: drizzle.config.ts
|
|
================
|
|
import { defineConfig } from "drizzle-kit";
|
|
|
|
//@ts-ignore - better-sqlite driver throws an error even though its an valid value
|
|
export default defineConfig({
|
|
dialect: "sqlite",
|
|
schema: "./src/server/db/schema.ts",
|
|
out: "./drizzle",
|
|
driver: "libsql",
|
|
dbCredentials: {
|
|
url: "file:./db/sqlite.db",
|
|
},
|
|
});
|
|
|
|
================
|
|
File: drizzle/0000_overjoyed_strong_guy.sql
|
|
================
|
|
CREATE TABLE `printJob` (
|
|
`id` text PRIMARY KEY NOT NULL,
|
|
`printerId` text NOT NULL,
|
|
`userId` text NOT NULL,
|
|
`startAt` integer NOT NULL,
|
|
`durationInMinutes` integer NOT NULL,
|
|
`comments` text,
|
|
`aborted` integer DEFAULT false NOT NULL,
|
|
`abortReason` text,
|
|
FOREIGN KEY (`printerId`) REFERENCES `printer`(`id`) ON UPDATE no action ON DELETE cascade,
|
|
FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
|
|
);
|
|
--> statement-breakpoint
|
|
CREATE TABLE `printer` (
|
|
`id` text PRIMARY KEY NOT NULL,
|
|
`name` text NOT NULL,
|
|
`description` text NOT NULL,
|
|
`status` integer DEFAULT 0 NOT NULL
|
|
);
|
|
--> statement-breakpoint
|
|
CREATE TABLE `session` (
|
|
`id` text PRIMARY KEY NOT NULL,
|
|
`user_id` text NOT NULL,
|
|
`expires_at` integer NOT NULL,
|
|
FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
|
|
);
|
|
--> statement-breakpoint
|
|
CREATE TABLE `user` (
|
|
`id` text PRIMARY KEY NOT NULL,
|
|
`github_id` integer NOT NULL,
|
|
`name` text,
|
|
`displayName` text,
|
|
`email` text NOT NULL,
|
|
`role` text DEFAULT 'guest'
|
|
);
|
|
|
|
================
|
|
File: drizzle/meta/_journal.json
|
|
================
|
|
{
|
|
"version": "6",
|
|
"dialect": "sqlite",
|
|
"entries": [
|
|
{
|
|
"idx": 0,
|
|
"version": "6",
|
|
"when": 1715416514336,
|
|
"tag": "0000_overjoyed_strong_guy",
|
|
"breakpoints": true
|
|
}
|
|
]
|
|
}
|
|
|
|
================
|
|
File: drizzle/meta/0000_snapshot.json
|
|
================
|
|
{
|
|
"version": "6",
|
|
"dialect": "sqlite",
|
|
"id": "791dc197-5254-4432-bd9f-1368d1a5aa6a",
|
|
"prevId": "00000000-0000-0000-0000-000000000000",
|
|
"tables": {
|
|
"printJob": {
|
|
"name": "printJob",
|
|
"columns": {
|
|
"id": {
|
|
"name": "id",
|
|
"type": "text",
|
|
"primaryKey": true,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"printerId": {
|
|
"name": "printerId",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"userId": {
|
|
"name": "userId",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"startAt": {
|
|
"name": "startAt",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"durationInMinutes": {
|
|
"name": "durationInMinutes",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"comments": {
|
|
"name": "comments",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": false,
|
|
"autoincrement": false
|
|
},
|
|
"aborted": {
|
|
"name": "aborted",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false,
|
|
"default": false
|
|
},
|
|
"abortReason": {
|
|
"name": "abortReason",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": false,
|
|
"autoincrement": false
|
|
}
|
|
},
|
|
"indexes": {},
|
|
"foreignKeys": {
|
|
"printJob_printerId_printer_id_fk": {
|
|
"name": "printJob_printerId_printer_id_fk",
|
|
"tableFrom": "printJob",
|
|
"tableTo": "printer",
|
|
"columnsFrom": [
|
|
"printerId"
|
|
],
|
|
"columnsTo": [
|
|
"id"
|
|
],
|
|
"onDelete": "cascade",
|
|
"onUpdate": "no action"
|
|
},
|
|
"printJob_userId_user_id_fk": {
|
|
"name": "printJob_userId_user_id_fk",
|
|
"tableFrom": "printJob",
|
|
"tableTo": "user",
|
|
"columnsFrom": [
|
|
"userId"
|
|
],
|
|
"columnsTo": [
|
|
"id"
|
|
],
|
|
"onDelete": "cascade",
|
|
"onUpdate": "no action"
|
|
}
|
|
},
|
|
"compositePrimaryKeys": {},
|
|
"uniqueConstraints": {}
|
|
},
|
|
"printer": {
|
|
"name": "printer",
|
|
"columns": {
|
|
"id": {
|
|
"name": "id",
|
|
"type": "text",
|
|
"primaryKey": true,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"name": {
|
|
"name": "name",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"description": {
|
|
"name": "description",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"status": {
|
|
"name": "status",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false,
|
|
"default": 0
|
|
}
|
|
},
|
|
"indexes": {},
|
|
"foreignKeys": {},
|
|
"compositePrimaryKeys": {},
|
|
"uniqueConstraints": {}
|
|
},
|
|
"session": {
|
|
"name": "session",
|
|
"columns": {
|
|
"id": {
|
|
"name": "id",
|
|
"type": "text",
|
|
"primaryKey": true,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"user_id": {
|
|
"name": "user_id",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"expires_at": {
|
|
"name": "expires_at",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
}
|
|
},
|
|
"indexes": {},
|
|
"foreignKeys": {
|
|
"session_user_id_user_id_fk": {
|
|
"name": "session_user_id_user_id_fk",
|
|
"tableFrom": "session",
|
|
"tableTo": "user",
|
|
"columnsFrom": [
|
|
"user_id"
|
|
],
|
|
"columnsTo": [
|
|
"id"
|
|
],
|
|
"onDelete": "cascade",
|
|
"onUpdate": "no action"
|
|
}
|
|
},
|
|
"compositePrimaryKeys": {},
|
|
"uniqueConstraints": {}
|
|
},
|
|
"user": {
|
|
"name": "user",
|
|
"columns": {
|
|
"id": {
|
|
"name": "id",
|
|
"type": "text",
|
|
"primaryKey": true,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"github_id": {
|
|
"name": "github_id",
|
|
"type": "integer",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"name": {
|
|
"name": "name",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": false,
|
|
"autoincrement": false
|
|
},
|
|
"displayName": {
|
|
"name": "displayName",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": false,
|
|
"autoincrement": false
|
|
},
|
|
"email": {
|
|
"name": "email",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": true,
|
|
"autoincrement": false
|
|
},
|
|
"role": {
|
|
"name": "role",
|
|
"type": "text",
|
|
"primaryKey": false,
|
|
"notNull": false,
|
|
"autoincrement": false,
|
|
"default": "'guest'"
|
|
}
|
|
},
|
|
"indexes": {},
|
|
"foreignKeys": {},
|
|
"compositePrimaryKeys": {},
|
|
"uniqueConstraints": {}
|
|
}
|
|
},
|
|
"enums": {},
|
|
"_meta": {
|
|
"schemas": {},
|
|
"tables": {},
|
|
"columns": {}
|
|
}
|
|
}
|
|
|
|
================
|
|
File: next.config.mjs
|
|
================
|
|
/** @type {import('next').NextConfig} */
|
|
const nextConfig = {
|
|
async headers() {
|
|
return [
|
|
{
|
|
source: "/:path*",
|
|
headers: [
|
|
{
|
|
key: "Access-Control-Allow-Origin",
|
|
value: "m040tbaraspi001.de040.corpintra.net",
|
|
},
|
|
{
|
|
key: "Access-Control-Allow-Methods",
|
|
value: "GET, POST, PUT, DELETE, OPTIONS",
|
|
},
|
|
{
|
|
key: "Access-Control-Allow-Headers",
|
|
value: "Content-Type, Authorization",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
},
|
|
};
|
|
|
|
export default nextConfig;
|
|
|
|
================
|
|
File: package.json
|
|
================
|
|
{
|
|
"name": "myp-rp",
|
|
"version": "1.0.0",
|
|
"private": true,
|
|
"packageManager": "pnpm@9.12.1",
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"db:create-default": "mkdir -p db/",
|
|
"db:generate-sqlite": "pnpm drizzle-kit generate",
|
|
"db:clean": "rm -rf db/ drizzle/",
|
|
"db:migrate": "pnpm drizzle-kit migrate",
|
|
"db": "pnpm db:create-default && pnpm db:generate-sqlite && pnpm db:migrate",
|
|
"db:reset": "pnpm db:clean && pnpm db"
|
|
},
|
|
"dependencies": {
|
|
"@faker-js/faker": "^9.2.0",
|
|
"@headlessui/react": "^2.1.10",
|
|
"@headlessui/tailwindcss": "^0.2.1",
|
|
"@hookform/resolvers": "^3.9.0",
|
|
"@libsql/client": "^0.14.0",
|
|
"@lucia-auth/adapter-drizzle": "^1.1.0",
|
|
"@radix-ui/react-alert-dialog": "^1.1.2",
|
|
"@radix-ui/react-avatar": "^1.1.1",
|
|
"@radix-ui/react-dialog": "^1.1.2",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
|
"@radix-ui/react-hover-card": "^1.1.2",
|
|
"@radix-ui/react-icons": "^1.3.0",
|
|
"@radix-ui/react-label": "^2.1.0",
|
|
"@radix-ui/react-scroll-area": "^1.2.0",
|
|
"@radix-ui/react-select": "^2.1.2",
|
|
"@radix-ui/react-slot": "^1.1.0",
|
|
"@radix-ui/react-tabs": "^1.1.1",
|
|
"@radix-ui/react-toast": "^1.2.2",
|
|
"@remixicon/react": "^4.3.0",
|
|
"@tanstack/react-table": "^8.20.5",
|
|
"@tremor/react": "^3.18.3",
|
|
"arctic": "^1.9.2",
|
|
"class-variance-authority": "^0.7.0",
|
|
"clsx": "^2.1.1",
|
|
"date-fns": "^4.1.0",
|
|
"drizzle-orm": "^0.30.10",
|
|
"lodash": "^4.17.21",
|
|
"lucia": "^3.2.1",
|
|
"lucide-react": "^0.378.0",
|
|
"luxon": "^3.5.0",
|
|
"next": "14.2.3",
|
|
"next-themes": "^0.3.0",
|
|
"oslo": "^1.2.1",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"react-hook-form": "^7.53.0",
|
|
"react-if": "^4.1.5",
|
|
"react-timer-hook": "^3.0.7",
|
|
"recharts": "^2.13.3",
|
|
"regression": "^2.0.1",
|
|
"sonner": "^1.5.0",
|
|
"sqlite": "^5.1.1",
|
|
"sqlite3": "^5.1.7",
|
|
"swr": "^2.2.5",
|
|
"tailwind-merge": "^2.5.3",
|
|
"tailwindcss-animate": "^1.0.7",
|
|
"use-debounce": "^10.0.3",
|
|
"uuid": "^11.0.2",
|
|
"zod": "^3.23.8"
|
|
},
|
|
"devDependencies": {
|
|
"@biomejs/biome": "^1.9.3",
|
|
"@tailwindcss/forms": "^0.5.9",
|
|
"@types/lodash": "^4.17.13",
|
|
"@types/luxon": "^3.4.2",
|
|
"@types/node": "^20.16.11",
|
|
"@types/react": "^18.3.11",
|
|
"@types/react-dom": "^18.3.1",
|
|
"drizzle-kit": "^0.21.4",
|
|
"postcss": "^8.4.47",
|
|
"tailwindcss": "^3.4.13",
|
|
"ts-node": "^10.9.2",
|
|
"typescript": "^5.6.3"
|
|
}
|
|
}
|
|
|
|
================
|
|
File: postcss.config.mjs
|
|
================
|
|
/** @type {import('postcss-load-config').Config} */
|
|
const config = {
|
|
plugins: {
|
|
tailwindcss: {},
|
|
},
|
|
};
|
|
|
|
export default config;
|
|
|
|
================
|
|
File: public/next.svg
|
|
================
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
|
|
================
|
|
File: public/vercel.svg
|
|
================
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
|
|
|
================
|
|
File: README.md
|
|
================
|
|
# MYP - Manage Your Printer
|
|
|
|
MYP (Manage Your Printer) ist eine Webanwendung zur Reservierung von 3D-Druckern.
|
|
Sie wurde im Rahmen des Abschlussprojektes der Fachinformatiker Ausbildung für Daten- und Prozessanalyse für die Technische Berufsausbildung des Mercedes-Benz Werkes Berlin-Marienfelde entwickelt.
|
|
|
|
## Deployment
|
|
|
|
### Voraussetzungen
|
|
|
|
- Netzwerk auf Raspberry Pi ist eingerichtet
|
|
- Docker ist installiert
|
|
|
|
### Schritte
|
|
|
|
1. Docker-Container bauen (docker/build.sh)
|
|
2. Docker-Container speichern (docker/save.sh caddy:2.8 myp-rp:latest)
|
|
3. Docker-Container auf Raspberry Pi bereitstellen (docker/deploy.sh)
|
|
|
|
## Entwicklerinformationen
|
|
|
|
### Raspberry Pi Einstellungen
|
|
|
|
Auf dem Raspberry Pi wurde Raspbian Lite installiert.
|
|
Unter /srv/* sind die Projektdateien zu finden.
|
|
|
|
### Anmeldedaten
|
|
|
|
```
|
|
Benutzer: myp
|
|
Passwort: (persönlich bekannt)
|
|
```
|
|
|
|
================
|
|
File: scripts/generate-data.js
|
|
================
|
|
const sqlite3 = require("sqlite3");
|
|
const faker = require("@faker-js/faker").faker;
|
|
const { random, sample, sampleSize, sum } = require("lodash");
|
|
const { DateTime } = require("luxon");
|
|
const { open } = require("sqlite");
|
|
const { v4: uuidv4 } = require("uuid");
|
|
|
|
const dbPath = "./db/sqlite.db";
|
|
|
|
// Configuration for test data generation
|
|
let startDate = DateTime.fromISO("2024-10-08");
|
|
let endDate = DateTime.fromISO("2024-11-08");
|
|
let numberOfPrinters = 5;
|
|
|
|
// Use weekday names for better readability and ease of setting trends
|
|
let avgPrintTimesPerDay = {
|
|
Monday: 4,
|
|
Tuesday: 2,
|
|
Wednesday: 5,
|
|
Thursday: 2,
|
|
Friday: 3,
|
|
Saturday: 0,
|
|
Sunday: 0,
|
|
}; // Average number of prints for each weekday
|
|
|
|
let avgPrintDurationPerDay = {
|
|
Monday: 240, // Total average duration in minutes for Monday
|
|
Tuesday: 30,
|
|
Wednesday: 45,
|
|
Thursday: 40,
|
|
Friday: 120,
|
|
Saturday: 0,
|
|
Sunday: 0,
|
|
}; // Average total duration of prints for each weekday
|
|
|
|
let printerUsage = {
|
|
"Drucker 1": 0.5,
|
|
"Drucker 2": 0.7,
|
|
"Drucker 3": 0.6,
|
|
"Drucker 4": 0.3,
|
|
"Drucker 5": 0.4,
|
|
}; // Usage percentages for each printer
|
|
|
|
// **New Configurations for Error Rates**
|
|
let generalErrorRate = 0.05; // 5% chance any print job may fail
|
|
let printerErrorRates = {
|
|
"Drucker 1": 0.02, // 2% error rate for Printer 1
|
|
"Drucker 2": 0.03,
|
|
"Drucker 3": 0.01,
|
|
"Drucker 4": 0.05,
|
|
"Drucker 5": 0.04,
|
|
}; // Error rates for each printer
|
|
|
|
const holidays = []; // Example holidays
|
|
const existingJobs = [];
|
|
|
|
const initDB = async () => {
|
|
console.log("Initializing database connection...");
|
|
return open({
|
|
filename: dbPath,
|
|
driver: sqlite3.Database,
|
|
});
|
|
};
|
|
|
|
const createUser = (isPowerUser = false) => {
|
|
const name = [faker.person.firstName(), faker.person.lastName()];
|
|
|
|
const user = {
|
|
id: uuidv4(),
|
|
github_id: faker.number.int(),
|
|
username: `${name[0].slice(0, 2)}${name[1].slice(0, 6)}`.toUpperCase(),
|
|
displayName: `${name[0]} ${name[1]}`.toUpperCase(),
|
|
email: `${name[0]}.${name[1]}@example.com`,
|
|
role: sample(["user", "admin"]),
|
|
isPowerUser,
|
|
};
|
|
console.log("Created user:", user);
|
|
return user;
|
|
};
|
|
|
|
const createPrinter = (index) => {
|
|
const printer = {
|
|
id: uuidv4(),
|
|
name: `Drucker ${index}`,
|
|
description: faker.lorem.sentence(),
|
|
status: random(0, 2),
|
|
};
|
|
console.log("Created printer:", printer);
|
|
return printer;
|
|
};
|
|
|
|
const isPrinterAvailable = (printer, startAt, duration) => {
|
|
const endAt = startAt + duration * 60 * 1000; // Convert minutes to milliseconds
|
|
return !existingJobs.some((job) => {
|
|
const jobStart = job.startAt;
|
|
const jobEnd = job.startAt + job.durationInMinutes * 60 * 1000;
|
|
return (
|
|
printer.id === job.printerId &&
|
|
((startAt >= jobStart && startAt < jobEnd) ||
|
|
(endAt > jobStart && endAt <= jobEnd) ||
|
|
(startAt <= jobStart && endAt >= jobEnd))
|
|
);
|
|
});
|
|
};
|
|
|
|
const createPrintJob = (users, printers, startAt, duration) => {
|
|
const user = sample(users);
|
|
let printer;
|
|
|
|
// Weighted selection based on printer usage
|
|
const printerNames = Object.keys(printerUsage);
|
|
const weightedPrinters = printers.filter((p) => printerNames.includes(p.name));
|
|
|
|
// Create a weighted array of printers based on usage percentages
|
|
const printerWeights = weightedPrinters.map((p) => ({
|
|
printer: p,
|
|
weight: printerUsage[p.name],
|
|
}));
|
|
|
|
const totalWeight = sum(printerWeights.map((pw) => pw.weight));
|
|
const randomWeight = Math.random() * totalWeight;
|
|
let accumulatedWeight = 0;
|
|
for (const pw of printerWeights) {
|
|
accumulatedWeight += pw.weight;
|
|
if (randomWeight <= accumulatedWeight) {
|
|
printer = pw.printer;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!printer) {
|
|
printer = sample(printers);
|
|
}
|
|
|
|
if (!isPrinterAvailable(printer, startAt, duration)) {
|
|
console.log("Printer not available, skipping job creation.");
|
|
return null;
|
|
}
|
|
|
|
// **Determine if the job should be aborted based on error rates**
|
|
let aborted = false;
|
|
let abortReason = null;
|
|
|
|
// Calculate the combined error rate
|
|
const printerErrorRate = printerErrorRates[printer.name] || 0;
|
|
const combinedErrorRate = 1 - (1 - generalErrorRate) * (1 - printerErrorRate);
|
|
|
|
if (Math.random() < combinedErrorRate) {
|
|
aborted = true;
|
|
const errorMessages = [
|
|
"Unbekannt",
|
|
"Keine Ahnung",
|
|
"Falsch gebucht",
|
|
"Filament gelöst",
|
|
"Druckabbruch",
|
|
"Düsenverstopfung",
|
|
"Schichthaftung fehlgeschlagen",
|
|
"Materialmangel",
|
|
"Dateifehler",
|
|
"Temperaturproblem",
|
|
"Mechanischer Fehler",
|
|
"Softwarefehler",
|
|
"Kalibrierungsfehler",
|
|
"Überhitzung",
|
|
];
|
|
abortReason = sample(errorMessages); // Generate a random abort reason
|
|
}
|
|
|
|
const printJob = {
|
|
id: uuidv4(),
|
|
printerId: printer.id,
|
|
userId: user.id,
|
|
startAt,
|
|
durationInMinutes: duration,
|
|
comments: faker.lorem.sentence(),
|
|
aborted,
|
|
abortReason,
|
|
};
|
|
console.log("Created print job:", printJob);
|
|
return printJob;
|
|
};
|
|
|
|
const generatePrintJobsForDay = async (users, printers, dayDate, totalJobsForDay, totalDurationForDay, db, dryRun) => {
|
|
console.log(`Generating print jobs for ${dayDate.toISODate()}...`);
|
|
|
|
// Generate random durations that sum up approximately to totalDurationForDay
|
|
const durations = [];
|
|
let remainingDuration = totalDurationForDay;
|
|
for (let i = 0; i < totalJobsForDay; i++) {
|
|
const avgJobDuration = remainingDuration / (totalJobsForDay - i);
|
|
const jobDuration = Math.max(
|
|
Math.round(random(avgJobDuration * 0.8, avgJobDuration * 1.2)),
|
|
5, // Minimum duration of 5 minutes
|
|
);
|
|
durations.push(jobDuration);
|
|
remainingDuration -= jobDuration;
|
|
}
|
|
|
|
// Shuffle durations to randomize job lengths
|
|
const shuffledDurations = sampleSize(durations, durations.length);
|
|
|
|
for (let i = 0; i < totalJobsForDay; i++) {
|
|
const duration = shuffledDurations[i];
|
|
|
|
// Random start time between 8 AM and 6 PM, adjusted to avoid overlapping durations
|
|
const possibleStartHours = Array.from({ length: 10 }, (_, idx) => idx + 8); // 8 AM to 6 PM
|
|
let startAt;
|
|
let attempts = 0;
|
|
do {
|
|
const hour = sample(possibleStartHours);
|
|
const minute = random(0, 59);
|
|
startAt = dayDate.set({ hour, minute, second: 0, millisecond: 0 }).toMillis();
|
|
attempts++;
|
|
if (attempts > 10) {
|
|
console.log("Unable to find available time slot, skipping job.");
|
|
break;
|
|
}
|
|
} while (!isPrinterAvailable(sample(printers), startAt, duration));
|
|
|
|
if (attempts > 10) continue;
|
|
|
|
const printJob = createPrintJob(users, printers, startAt, duration);
|
|
if (printJob) {
|
|
if (!dryRun) {
|
|
await db.run(
|
|
`INSERT INTO printJob (id, printerId, userId, startAt, durationInMinutes, comments, aborted, abortReason)
|
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
|
|
[
|
|
printJob.id,
|
|
printJob.printerId,
|
|
printJob.userId,
|
|
printJob.startAt,
|
|
printJob.durationInMinutes,
|
|
printJob.comments,
|
|
printJob.aborted ? 1 : 0,
|
|
printJob.abortReason,
|
|
],
|
|
);
|
|
}
|
|
existingJobs.push(printJob);
|
|
console.log("Inserted print job into database:", printJob.id);
|
|
}
|
|
}
|
|
};
|
|
|
|
const generateTestData = async (dryRun = false) => {
|
|
console.log("Starting test data generation...");
|
|
const db = await initDB();
|
|
|
|
// Generate users and printers
|
|
const users = [
|
|
...Array.from({ length: 7 }, () => createUser(false)),
|
|
...Array.from({ length: 3 }, () => createUser(true)),
|
|
];
|
|
const printers = Array.from({ length: numberOfPrinters }, (_, index) => createPrinter(index + 1));
|
|
|
|
if (!dryRun) {
|
|
// Insert users into the database
|
|
for (const user of users) {
|
|
await db.run(
|
|
`INSERT INTO user (id, github_id, name, displayName, email, role)
|
|
VALUES (?, ?, ?, ?, ?, ?)`,
|
|
[user.id, user.github_id, user.username, user.displayName, user.email, user.role],
|
|
);
|
|
console.log("Inserted user into database:", user.id);
|
|
}
|
|
|
|
// Insert printers into the database
|
|
for (const printer of printers) {
|
|
await db.run(
|
|
`INSERT INTO printer (id, name, description, status)
|
|
VALUES (?, ?, ?, ?)`,
|
|
[printer.id, printer.name, printer.description, printer.status],
|
|
);
|
|
console.log("Inserted printer into database:", printer.id);
|
|
}
|
|
}
|
|
|
|
// Generate print jobs for each day within the specified date range
|
|
let currentDay = startDate;
|
|
while (currentDay <= endDate) {
|
|
const weekdayName = currentDay.toFormat("EEEE"); // Get weekday name (e.g., 'Monday')
|
|
if (holidays.includes(currentDay.toISODate()) || avgPrintTimesPerDay[weekdayName] === 0) {
|
|
console.log(`Skipping holiday or no jobs scheduled: ${currentDay.toISODate()}`);
|
|
currentDay = currentDay.plus({ days: 1 });
|
|
continue;
|
|
}
|
|
|
|
const totalJobsForDay = avgPrintTimesPerDay[weekdayName];
|
|
const totalDurationForDay = avgPrintDurationPerDay[weekdayName];
|
|
|
|
await generatePrintJobsForDay(users, printers, currentDay, totalJobsForDay, totalDurationForDay, db, dryRun);
|
|
currentDay = currentDay.plus({ days: 1 });
|
|
}
|
|
|
|
if (!dryRun) {
|
|
await db.close();
|
|
console.log("Database connection closed. Test data generation complete.");
|
|
} else {
|
|
console.log("Dry run complete. No data was written to the database.");
|
|
}
|
|
};
|
|
|
|
const setConfigurations = (config) => {
|
|
if (config.startDate) startDate = DateTime.fromISO(config.startDate);
|
|
if (config.endDate) endDate = DateTime.fromISO(config.endDate);
|
|
if (config.numberOfPrinters) numberOfPrinters = config.numberOfPrinters;
|
|
if (config.avgPrintTimesPerDay) avgPrintTimesPerDay = config.avgPrintTimesPerDay;
|
|
if (config.avgPrintDurationPerDay) avgPrintDurationPerDay = config.avgPrintDurationPerDay;
|
|
if (config.printerUsage) printerUsage = config.printerUsage;
|
|
if (config.generalErrorRate !== undefined) generalErrorRate = config.generalErrorRate;
|
|
if (config.printerErrorRates) printerErrorRates = config.printerErrorRates;
|
|
};
|
|
|
|
// Example usage
|
|
setConfigurations({
|
|
startDate: "2024-10-08",
|
|
endDate: "2024-11-08",
|
|
numberOfPrinters: 6,
|
|
avgPrintTimesPerDay: {
|
|
Monday: 4, // High usage
|
|
Tuesday: 2, // Low usage
|
|
Wednesday: 3, // Low usage
|
|
Thursday: 2, // Low usage
|
|
Friday: 8, // High usage
|
|
Saturday: 0,
|
|
Sunday: 0,
|
|
},
|
|
avgPrintDurationPerDay: {
|
|
Monday: 300, // High total duration
|
|
Tuesday: 60, // Low total duration
|
|
Wednesday: 90,
|
|
Thursday: 60,
|
|
Friday: 240,
|
|
Saturday: 0,
|
|
Sunday: 0,
|
|
},
|
|
printerUsage: {
|
|
"Drucker 1": 2.3,
|
|
"Drucker 2": 1.7,
|
|
"Drucker 3": 0.1,
|
|
"Drucker 4": 1.5,
|
|
"Drucker 5": 2.4,
|
|
"Drucker 6": 0.3,
|
|
"Drucker 7": 0.9,
|
|
"Drucker 8": 0.1,
|
|
},
|
|
generalErrorRate: 0.05, // 5% general error rate
|
|
printerErrorRates: {
|
|
"Drucker 1": 0.02,
|
|
"Drucker 2": 0.03,
|
|
"Drucker 3": 0.1,
|
|
"Drucker 4": 0.05,
|
|
"Drucker 5": 0.04,
|
|
"Drucker 6": 0.02,
|
|
"Drucker 7": 0.01,
|
|
"PrinteDrucker 8": 0.03,
|
|
},
|
|
});
|
|
|
|
generateTestData(process.argv.includes("--dry-run"))
|
|
.then(() => {
|
|
console.log("Test data generation script finished.");
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error generating test data:", err);
|
|
});
|
|
|
|
================
|
|
File: src/app/admin/about/page.tsx
|
|
================
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Über MYP",
|
|
};
|
|
|
|
export default async function AdminPage() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Über MYP</CardTitle>
|
|
<CardDescription>
|
|
<i className="italic">MYP — Manage Your Printer</i>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="gap-y-2 flex flex-col">
|
|
<p className="max-w-[80ch]">
|
|
<strong>MYP</strong> ist eine Webanwendung zur Reservierung von 3D-Druckern. Sie wurde im Rahmen des
|
|
Abschlussprojektes der Fachinformatiker Ausbildung für Daten- und Prozessanalyse für die Technische
|
|
Berufsausbildung des Mercedes-Benz Werkes Berlin-Marienfelde entwickelt.
|
|
</p>
|
|
<p>
|
|
© 2024{" "}
|
|
<a href="https://linkedin.com/in/torben-haack" target="_blank" rel="noreferrer">
|
|
Torben Haack
|
|
</a>
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/admin-sidebar.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { cn } from "@/utils/styles";
|
|
import { FileIcon, HeartIcon, LayoutDashboardIcon, PrinterIcon, UsersIcon, WrenchIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
interface AdminSite {
|
|
name: string;
|
|
path: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
export function AdminSidebar() {
|
|
const pathname = usePathname();
|
|
const adminSites: AdminSite[] = [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/admin",
|
|
icon: <LayoutDashboardIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
name: "Benutzer",
|
|
path: "/admin/users",
|
|
icon: <UsersIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
name: "Drucker",
|
|
path: "/admin/printers",
|
|
icon: <PrinterIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
name: "Druckaufträge",
|
|
path: "/admin/jobs",
|
|
icon: <FileIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
name: "Einstellungen",
|
|
path: "/admin/settings",
|
|
icon: <WrenchIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
name: "Über MYP",
|
|
path: "/admin/about",
|
|
icon: <HeartIcon className="w-4 h-4" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ul className="w-full">
|
|
{adminSites.map((site) => (
|
|
<li key={site.path}>
|
|
<Link
|
|
href={site.path}
|
|
className={cn("flex items-center gap-2 p-2 rounded hover:bg-muted", {
|
|
"font-semibold": pathname === site.path,
|
|
})}
|
|
>
|
|
{site.icon}
|
|
<span>{site.name}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/charts/printer-error-chart.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
|
|
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
|
|
|
|
export const description = "Ein Säulendiagramm zur Darstellung der Abbruchgründe und ihrer Häufigkeit";
|
|
|
|
interface AbortReasonCountChartProps {
|
|
abortReasonCount: {
|
|
abortReason: string;
|
|
count: number;
|
|
}[];
|
|
}
|
|
|
|
const chartConfig = {
|
|
abortReason: {
|
|
label: "Abbruchgrund",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export function AbortReasonCountChart({ abortReasonCount }: AbortReasonCountChartProps) {
|
|
// Transform data to fit the chart structure
|
|
const chartData = abortReasonCount.map((reason) => ({
|
|
abortReason: reason.abortReason,
|
|
count: reason.count,
|
|
}));
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Abbruchgründe</CardTitle>
|
|
<CardDescription>Häufigkeit der Abbruchgründe für Druckaufträge</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig}>
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
top: 20,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="abortReason"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => value}
|
|
/>
|
|
<YAxis tickFormatter={(value) => `${value}`} />
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Bar dataKey="count" fill="hsl(var(--chart-1))" radius={8}>
|
|
<LabelList
|
|
position="top"
|
|
offset={12}
|
|
className="fill-foreground"
|
|
fontSize={12}
|
|
formatter={(value: number) => `${value}`}
|
|
/>
|
|
</Bar>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/charts/printer-error-rate.tsx
|
|
================
|
|
"use client";
|
|
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
|
|
import type { PrinterErrorRate } from "@/utils/analytics/error-rate";
|
|
|
|
export const description = "Ein Säulendiagramm zur Darstellung der Fehlerrate";
|
|
|
|
interface PrinterErrorRateChartProps {
|
|
printerErrorRate: PrinterErrorRate[];
|
|
}
|
|
|
|
const chartConfig = {
|
|
errorRate: {
|
|
label: "Fehlerrate",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export function PrinterErrorRateChart({ printerErrorRate }: PrinterErrorRateChartProps) {
|
|
// Transform data to fit the chart structure
|
|
const chartData = printerErrorRate.map((printer) => ({
|
|
printer: printer.name,
|
|
errorRate: printer.errorRate,
|
|
}));
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Fehlerrate</CardTitle>
|
|
<CardDescription>Fehlerrate der Drucker in Prozent</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig}>
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
top: 20,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="printer"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => value}
|
|
/>
|
|
<YAxis tickFormatter={(value) => `${value}%`} />
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Bar dataKey="errorRate" fill="hsl(var(--chart-1))" radius={8}>
|
|
<LabelList
|
|
position="top"
|
|
offset={12}
|
|
className="fill-foreground"
|
|
fontSize={12}
|
|
formatter={(value: number) => `${value}%`}
|
|
/>
|
|
</Bar>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/charts/printer-forecast.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
|
|
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
|
|
export const description = "Ein Bereichsdiagramm zur Darstellung der prognostizierten Nutzung pro Wochentag";
|
|
|
|
interface ForecastData {
|
|
day: number; // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
|
|
usageMinutes: number;
|
|
}
|
|
|
|
interface ForecastChartProps {
|
|
forecastData: ForecastData[];
|
|
}
|
|
|
|
const chartConfig = {
|
|
usage: {
|
|
label: "Prognostizierte Nutzung",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const daysOfWeek = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
|
|
|
export function ForecastPrinterUsageChart({ forecastData }: ForecastChartProps) {
|
|
// Transform and slice data to fit the chart structure
|
|
const chartData = forecastData.map((data) => ({
|
|
//slice(1, forecastData.length - 1).
|
|
day: daysOfWeek[data.day], // Map day number to weekday name
|
|
usage: data.usageMinutes,
|
|
}));
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Prognostizierte Nutzung pro Wochentag</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer className="h-64 w-full" config={chartConfig}>
|
|
<AreaChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12, top: 12 }}>
|
|
<CartesianGrid vertical={true} />
|
|
<XAxis dataKey="day" type="category" tickLine={true} tickMargin={10} axisLine={false} />
|
|
<YAxis type="number" dataKey="usage" tickLine={false} tickMargin={10} axisLine={false} />
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Area
|
|
dataKey="usage"
|
|
type="step"
|
|
fill="hsl(var(--chart-1))"
|
|
fillOpacity={0.4}
|
|
stroke="hsl(var(--chart-1))"
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
<div className="flex items-center gap-2 font-medium leading-none">
|
|
Zeigt die prognostizierte Nutzungszeit pro Wochentag in Minuten.
|
|
</div>
|
|
<div className="leading-none text-muted-foreground">
|
|
Besten Tage zur Wartung: {bestMaintenanceDays(forecastData)}
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function bestMaintenanceDays(forecastData: ForecastData[]) {
|
|
const sortedData = forecastData.map((a) => a).sort((a, b) => a.usageMinutes - b.usageMinutes); // Sort ascending
|
|
|
|
const q1Index = Math.floor(sortedData.length * 0.33);
|
|
const q1 = sortedData[q1Index].usageMinutes; // First quartile (Q1) value
|
|
|
|
const filteredData = sortedData.filter((data) => data.usageMinutes <= q1);
|
|
|
|
return filteredData
|
|
.map((data) => {
|
|
const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
|
|
return days[data.day];
|
|
})
|
|
.join(", ");
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/charts/printer-utilization.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { TrendingUp } from "lucide-react";
|
|
import * as React from "react";
|
|
import { Label, Pie, PieChart } from "recharts";
|
|
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
|
|
|
|
export const description = "Nutzung des Druckers";
|
|
|
|
interface ComponentProps {
|
|
data: {
|
|
printerId: string;
|
|
utilizationPercentage: number;
|
|
name: string;
|
|
};
|
|
}
|
|
|
|
const chartConfig = {} satisfies ChartConfig;
|
|
|
|
export function PrinterUtilizationChart({ data }: ComponentProps) {
|
|
const totalUtilization = React.useMemo(() => data.utilizationPercentage, [data]);
|
|
const dataWithColor = {
|
|
...data,
|
|
fill: "rgb(34 197 94)",
|
|
};
|
|
const free = {
|
|
printerId: "-",
|
|
utilizationPercentage: 1 - data.utilizationPercentage,
|
|
name: "(Frei)",
|
|
fill: "rgb(212 212 212)",
|
|
};
|
|
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardHeader className="items-center pb-0">
|
|
<CardTitle>{data.name}</CardTitle>
|
|
<CardDescription>Nutzung des ausgewählten Druckers</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
|
|
<PieChart>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Pie
|
|
data={[dataWithColor, free]}
|
|
dataKey="utilizationPercentage"
|
|
nameKey="name"
|
|
innerRadius={60}
|
|
strokeWidth={5}
|
|
>
|
|
<Label
|
|
content={({ viewBox }) => {
|
|
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
|
return (
|
|
<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
|
|
<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
|
|
{(totalUtilization * 100).toFixed(2)}%
|
|
</tspan>
|
|
<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
|
|
Gesamt-Nutzung
|
|
</tspan>
|
|
</text>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-2 text-sm">
|
|
<div className="flex items-center gap-2 font-medium leading-none">
|
|
Übersicht der Nutzung <TrendingUp className="h-4 w-4" />
|
|
</div>
|
|
<div className="leading-none text-muted-foreground">Aktuelle Auslastung des Druckers</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/charts/printer-volume.tsx
|
|
================
|
|
"use client";
|
|
import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
|
|
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
|
|
|
|
export const description = "Ein Balkendiagramm mit Beschriftung";
|
|
|
|
interface PrintVolumes {
|
|
today: number;
|
|
thisWeek: number;
|
|
thisMonth: number;
|
|
}
|
|
|
|
const chartConfig = {
|
|
volume: {
|
|
label: "Volumen",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
interface PrinterVolumeChartProps {
|
|
printerVolume: PrintVolumes;
|
|
}
|
|
|
|
export function PrinterVolumeChart({ printerVolume }: PrinterVolumeChartProps) {
|
|
const chartData = [
|
|
{ period: "Heute", volume: printerVolume.today, color: "hsl(var(--chart-1))" },
|
|
{ period: "Diese Woche", volume: printerVolume.thisWeek, color: "hsl(var(--chart-2))" },
|
|
{ period: "Diesen Monat", volume: printerVolume.thisMonth, color: "hsl(var(--chart-3))" },
|
|
];
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Druckvolumen</CardTitle>
|
|
<CardDescription>Vergleich: Heute, Diese Woche, Diesen Monat</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer className="h-64 w-full" config={chartConfig}>
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
top: 20,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="period"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => value}
|
|
/>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Bar dataKey="volume" fill="var(--color-volume)" radius={8}>
|
|
<LabelList position="top" offset={12} className="fill-foreground" fontSize={12} />
|
|
</Bar>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
<div className="leading-none text-muted-foreground">
|
|
Zeigt das Druckvolumen für heute, diese Woche und diesen Monat
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/jobs/page.tsx
|
|
================
|
|
import { columns } from "@/app/my/jobs/columns";
|
|
import { JobsTable } from "@/app/my/jobs/data-table";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { db } from "@/server/db";
|
|
import { printJobs } from "@/server/db/schema";
|
|
import { desc } from "drizzle-orm";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Alle Druckaufträge",
|
|
};
|
|
|
|
export default async function AdminJobsPage() {
|
|
const allJobs = await db.query.printJobs.findMany({
|
|
orderBy: [desc(printJobs.startAt)],
|
|
with: {
|
|
user: true,
|
|
printer: true,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row justify-between items-center">
|
|
<div>
|
|
<CardTitle>Druckaufträge</CardTitle>
|
|
<CardDescription>Alle Druckaufträge</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<JobsTable columns={columns} data={allJobs} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/layout.tsx
|
|
================
|
|
import { AdminSidebar } from "@/app/admin/admin-sidebar";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { IS_NOT, guard } from "@/utils/guard";
|
|
import { redirect } from "next/navigation";
|
|
|
|
interface AdminLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function AdminLayout(props: AdminLayoutProps) {
|
|
const { children } = props;
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
redirect("/");
|
|
}
|
|
|
|
return (
|
|
<main className="flex flex-1 flex-col gap-4">
|
|
<div className="mx-auto grid w-full gap-2">
|
|
<h1 className="text-3xl font-semibold">Admin</h1>
|
|
</div>
|
|
<div className="mx-auto grid w-full items-start gap-4 md:gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
|
|
<nav className="grid gap-4 text-sm">
|
|
<AdminSidebar />
|
|
</nav>
|
|
<div>{children}</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/page.tsx
|
|
================
|
|
import { AbortReasonCountChart } from "@/app/admin/charts/printer-error-chart";
|
|
import { PrinterErrorRateChart } from "@/app/admin/charts/printer-error-rate";
|
|
import { ForecastPrinterUsageChart } from "@/app/admin/charts/printer-forecast";
|
|
import { PrinterUtilizationChart } from "@/app/admin/charts/printer-utilization";
|
|
import { PrinterVolumeChart } from "@/app/admin/charts/printer-volume";
|
|
import { DataCard } from "@/components/data-card";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { db } from "@/server/db";
|
|
import { calculatePrinterErrorRate } from "@/utils/analytics/error-rate";
|
|
import { calculateAbortReasonsCount } from "@/utils/analytics/errors";
|
|
import { forecastPrinterUsage } from "@/utils/analytics/forecast";
|
|
import { calculatePrinterUtilization } from "@/utils/analytics/utilization";
|
|
import { calculatePrintVolumes } from "@/utils/analytics/volume";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Admin Dashboard",
|
|
};
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function AdminPage() {
|
|
const currentDate = new Date();
|
|
|
|
const lastMonth = new Date();
|
|
lastMonth.setDate(currentDate.getDate() - 31);
|
|
const printers = await db.query.printers.findMany({});
|
|
const printJobs = await db.query.printJobs.findMany({
|
|
where: (job, { gte }) => gte(job.startAt, lastMonth),
|
|
with: {
|
|
printer: true,
|
|
},
|
|
});
|
|
if (printJobs.length < 1) {
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader>
|
|
<CardTitle>Druckaufträge</CardTitle>
|
|
<CardDescription>Zurzeit sind keine Druckaufträge verfügbar.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Aktualisieren Sie die Seite oder prüfen Sie später erneut, ob neue Druckaufträge verfügbar sind.</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const currentPrintJobs = printJobs.filter((job) => {
|
|
if (job.aborted) return false;
|
|
|
|
const endAt = job.startAt.getTime() + job.durationInMinutes * 1000 * 60;
|
|
|
|
return endAt > currentDate.getTime();
|
|
});
|
|
const occupiedPrinters = currentPrintJobs.map((job) => job.printer.id);
|
|
const freePrinters = printers.filter((printer) => !occupiedPrinters.includes(printer.id));
|
|
const printerUtilization = calculatePrinterUtilization(printJobs);
|
|
const printerVolume = calculatePrintVolumes(printJobs);
|
|
const printerAbortReasons = calculateAbortReasonsCount(printJobs);
|
|
const printerErrorRate = calculatePrinterErrorRate(printJobs);
|
|
const printerForecast = forecastPrinterUsage(printJobs);
|
|
|
|
return (
|
|
<>
|
|
<Tabs defaultValue={"@general"} className="flex flex-col gap-4 items-start">
|
|
<TabsList className="bg-neutral-100 w-full py-6">
|
|
<TabsTrigger value="@general">Allgemein</TabsTrigger>
|
|
<TabsTrigger value="@capacity">Druckerauslastung</TabsTrigger>
|
|
<TabsTrigger value="@report">Fehlerberichte</TabsTrigger>
|
|
<TabsTrigger value="@forecasts">Prognosen</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="@general" className="w-full">
|
|
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
|
|
<div className="w-full col-span-2">
|
|
<DataCard
|
|
title="Aktuelle Auslastung"
|
|
value={`${Math.round((occupiedPrinters.length / (freePrinters.length + occupiedPrinters.length)) * 100)}%`}
|
|
icon={"Percent"}
|
|
/>
|
|
</div>
|
|
<DataCard title="Aktive Drucker" value={occupiedPrinters.length} icon={"Rotate3d"} />
|
|
<DataCard title="Freie Drucker" value={freePrinters.length} icon={"PowerOff"} />
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="@capacity" className="w-full">
|
|
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
|
|
<div className="w-full col-span-2">
|
|
<PrinterVolumeChart printerVolume={printerVolume} />
|
|
</div>
|
|
{printerUtilization.map((data) => (
|
|
<PrinterUtilizationChart key={data.printerId} data={data} />
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="@report" className="w-full">
|
|
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
|
|
<div className="w-full col-span-2">
|
|
<PrinterErrorRateChart printerErrorRate={printerErrorRate} />
|
|
</div>
|
|
<div className="w-full col-span-2">
|
|
<AbortReasonCountChart abortReasonCount={printerAbortReasons} />
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="@forecasts" className="w-full">
|
|
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
|
|
<div className="w-full col-span-2">
|
|
<ForecastPrinterUsageChart
|
|
forecastData={printerForecast.map((usageMinutes, index) => ({
|
|
day: index,
|
|
usageMinutes,
|
|
}))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/columns.tsx
|
|
================
|
|
"use client";
|
|
import type { printers } from "@/server/db/schema";
|
|
import type { ColumnDef } from "@tanstack/react-table";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
import { ArrowUpDown, MoreHorizontal, PencilIcon } from "lucide-react";
|
|
|
|
import { EditPrinterDialogContent, EditPrinterDialogTrigger } from "@/app/admin/printers/dialogs/edit-printer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog } from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { type PrinterStatus, translatePrinterStatus } from "@/utils/printers";
|
|
import { useState } from "react";
|
|
|
|
// This type is used to define the shape of our data.
|
|
// You can use a Zod schema here if you want.
|
|
|
|
export const columns: ColumnDef<InferSelectModel<typeof printers>>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
|
|
ID
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "Name",
|
|
},
|
|
{
|
|
accessorKey: "description",
|
|
header: "Beschreibung",
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "Status",
|
|
cell: ({ row }) => {
|
|
const status = row.getValue("status");
|
|
const translated = translatePrinterStatus(status as PrinterStatus);
|
|
|
|
return translated;
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => {
|
|
const printer = row.original;
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Menu öffnen</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
|
|
<DropdownMenuItem asChild>ABC</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<EditPrinterDialogTrigger>
|
|
<div className="flex items-center gap-2">
|
|
<PencilIcon className="w-4 h-4" />
|
|
<span>Bearbeiten</span>
|
|
</div>
|
|
</EditPrinterDialogTrigger>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<EditPrinterDialogContent setOpen={setOpen} printer={printer} />
|
|
</Dialog>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
================
|
|
File: src/app/admin/printers/data-table.tsx
|
|
================
|
|
"use client";
|
|
|
|
import {
|
|
type ColumnDef,
|
|
type ColumnFiltersState,
|
|
type SortingState,
|
|
type VisibilityState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getFilteredRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { SlidersHorizontalIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
interface DataTableProps<TData, TValue> {
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
}
|
|
|
|
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
onSortingChange: setSorting,
|
|
getSortedRowModel: getSortedRowModel(),
|
|
onColumnFiltersChange: setColumnFilters,
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
state: {
|
|
sorting,
|
|
columnFilters,
|
|
columnVisibility,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center py-4">
|
|
<Input
|
|
placeholder="Name filtern..."
|
|
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
|
|
onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
|
|
className="max-w-sm"
|
|
/>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" className="ml-auto flex items-center gap-2">
|
|
<SlidersHorizontalIcon className="h-4 w-4" />
|
|
<span>Spalten</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className="capitalize"
|
|
checked={column.getIsVisible()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{column.id}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<TableHead key={header.id}>
|
|
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
Keine Ergebnisse gefunden.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex items-center justify-end space-x-2 py-4">
|
|
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
|
Zurück
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
|
Nächste Seite
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/dialogs/create-printer.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { PrinterForm } from "@/app/admin/printers/form";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { useState } from "react";
|
|
|
|
interface CreatePrinterDialogProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function CreatePrinterDialog(props: CreatePrinterDialogProps) {
|
|
const { children } = props;
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Drucker erstellen</DialogTitle>
|
|
</DialogHeader>
|
|
<PrinterForm setOpen={setOpen} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/dialogs/delete-printer.tsx
|
|
================
|
|
"use client";
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { deletePrinter } from "@/server/actions/printers";
|
|
import { TrashIcon } from "lucide-react";
|
|
|
|
interface DeletePrinterDialogProps {
|
|
printerId: string;
|
|
setOpen: (state: boolean) => void;
|
|
}
|
|
export function DeletePrinterDialog(props: DeletePrinterDialogProps) {
|
|
const { printerId, setOpen } = props;
|
|
const { toast } = useToast();
|
|
|
|
async function onSubmit() {
|
|
toast({
|
|
description: "Drucker wird gelöscht...",
|
|
});
|
|
try {
|
|
const result = await deletePrinter(printerId);
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
toast({
|
|
description: "Drucker wurde gelöscht.",
|
|
});
|
|
setOpen(false);
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="destructive" className="gap-2 flex items-center">
|
|
<TrashIcon className="w-4 h-4" />
|
|
<span>Drucker löschen</span>
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Bist Du dir sicher?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Diese Aktion kann nicht rückgängig gemacht werden. Der Drucker und die damit verbundenen Daten werden
|
|
unwiderruflich gelöscht.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
|
<AlertDialogAction className="bg-red-500" onClick={onSubmit}>
|
|
Ja, löschen
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/dialogs/edit-printer.tsx
|
|
================
|
|
import { PrinterForm } from "@/app/admin/printers/form";
|
|
import { DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
|
|
interface EditPrinterDialogTriggerProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function EditPrinterDialogTrigger(props: EditPrinterDialogTriggerProps) {
|
|
const { children } = props;
|
|
|
|
return <DialogTrigger asChild>{children}</DialogTrigger>;
|
|
}
|
|
|
|
interface EditPrinterDialogContentProps {
|
|
printer: InferResultType<"printers">;
|
|
setOpen: (open: boolean) => void;
|
|
}
|
|
export function EditPrinterDialogContent(props: EditPrinterDialogContentProps) {
|
|
const { printer, setOpen } = props;
|
|
|
|
return (
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Drucker bearbeiten</DialogTitle>
|
|
</DialogHeader>
|
|
<PrinterForm setOpen={setOpen} printer={printer} />
|
|
</DialogContent>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/form.tsx
|
|
================
|
|
"use client";
|
|
import { DeletePrinterDialog } from "@/app/admin/printers/dialogs/delete-printer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DialogClose } from "@/components/ui/dialog";
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { createPrinter, updatePrinter } from "@/server/actions/printers";
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { SaveIcon, XCircleIcon } from "lucide-react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
export const formSchema = z.object({
|
|
name: z
|
|
.string()
|
|
.min(2, {
|
|
message: "Der Name muss mindestens 2 Zeichen lang sein.",
|
|
})
|
|
.max(50),
|
|
description: z
|
|
.string()
|
|
.min(2, {
|
|
message: "Die Beschreibung muss mindestens 2 Zeichen lang sein.",
|
|
})
|
|
.max(50),
|
|
status: z.coerce.number().int().min(0).max(1),
|
|
});
|
|
|
|
interface PrinterFormProps {
|
|
printer?: InferResultType<"printers">;
|
|
setOpen: (state: boolean) => void;
|
|
}
|
|
|
|
export function PrinterForm(props: PrinterFormProps) {
|
|
const { printer, setOpen } = props;
|
|
const { toast } = useToast();
|
|
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
name: printer?.name ?? "",
|
|
description: printer?.description ?? "",
|
|
status: printer?.status ?? 0,
|
|
},
|
|
});
|
|
|
|
// 2. Define a submit handler.
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
// TODO: create or update
|
|
if (printer) {
|
|
toast({
|
|
description: "Drucker wird aktualisiert...",
|
|
});
|
|
|
|
// Update
|
|
try {
|
|
const result = await updatePrinter(printer.id, {
|
|
description: values.description,
|
|
name: values.name,
|
|
status: values.status,
|
|
});
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
|
|
setOpen(false);
|
|
|
|
toast({
|
|
description: "Drucker wurde aktualisiert.",
|
|
variant: "default",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
toast({
|
|
description: "Drucker wird erstellt...",
|
|
variant: "default",
|
|
});
|
|
|
|
// Create
|
|
try {
|
|
const result = await createPrinter({
|
|
description: values.description,
|
|
name: values.name,
|
|
status: values.status,
|
|
});
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
|
|
setOpen(false);
|
|
|
|
toast({
|
|
description: "Drucker wurde erstellt.",
|
|
variant: "default",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Name</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Anycubic Kobra 2 Pro" {...field} />
|
|
</FormControl>
|
|
<FormDescription>Bitte gib einen eindeutigen Namen für den Drucker ein.</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="80x80x80 Druckfläche, langsam" {...field} />
|
|
</FormControl>
|
|
<FormDescription>Füge eine kurze Beschreibung des Druckers hinzu.</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="status"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Status</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a verified email to display" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
<SelectItem value={"0"}>Verfügbar</SelectItem>
|
|
<SelectItem value={"1"}>Außer Betrieb</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FormDescription>Wähle den aktuellen Status des Druckers.</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex justify-between items-center">
|
|
{printer && <DeletePrinterDialog setOpen={setOpen} printerId={printer?.id} />}
|
|
{!printer && (
|
|
<DialogClose asChild>
|
|
<Button variant="secondary" className="gap-2 flex items-center">
|
|
<XCircleIcon className="w-4 h-4" />
|
|
<span>Abbrechen</span>
|
|
</Button>
|
|
</DialogClose>
|
|
)}
|
|
<Button type="submit" className="gap-2 flex items-center">
|
|
<SaveIcon className="w-4 h-4" />
|
|
<span>Speichern</span>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/printers/page.tsx
|
|
================
|
|
import { columns } from "@/app/admin/printers/columns";
|
|
import { DataTable } from "@/app/admin/printers/data-table";
|
|
import { CreatePrinterDialog } from "@/app/admin/printers/dialogs/create-printer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { db } from "@/server/db";
|
|
import { PlusCircleIcon } from "lucide-react";
|
|
|
|
export default async function AdminPage() {
|
|
const data = await db.query.printers.findMany();
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row justify-between items-center">
|
|
<div>
|
|
<CardTitle>Druckerverwaltung</CardTitle>
|
|
<CardDescription>Suche, Bearbeite, Lösche und Erstelle Drucker</CardDescription>
|
|
</div>
|
|
<CreatePrinterDialog>
|
|
<Button variant={"default"} className="flex gap-2 items-center">
|
|
<PlusCircleIcon className="w-4 h-4" />
|
|
<span>Drucker erstellen</span>
|
|
</Button>
|
|
</CreatePrinterDialog>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DataTable columns={columns} data={data} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/settings/download/route.ts
|
|
================
|
|
import fs from "node:fs";
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export async function GET() {
|
|
return new Response(fs.readFileSync("./db/sqlite.db"));
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/settings/page.tsx
|
|
================
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Systemeinstellungen",
|
|
};
|
|
|
|
export default function AdminPage() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Einstellungen</CardTitle>
|
|
<CardDescription>Systemeinstellungen</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex gap-8 items-center">
|
|
<p>Datenbank herunterladen</p>
|
|
<Button variant="default" asChild>
|
|
<Link href="/admin/settings/download" target="_blank">
|
|
Herunterladen
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/users/columns.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { type UserRole, translateUserRole } from "@/server/auth/permissions";
|
|
import type { users } from "@/server/db/schema";
|
|
import type { ColumnDef } from "@tanstack/react-table";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
import {
|
|
ArrowUpDown,
|
|
MailIcon,
|
|
MessageCircleIcon,
|
|
MoreHorizontal,
|
|
} from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import Link from "next/link";
|
|
import {
|
|
EditUserDialogContent,
|
|
EditUserDialogRoot,
|
|
EditUserDialogTrigger,
|
|
} from "@/app/admin/users/dialog";
|
|
|
|
// This type is used to define the shape of our data.
|
|
// You can use a Zod schema here if you want.
|
|
export type User = {
|
|
id: string;
|
|
github_id: number;
|
|
username: string;
|
|
displayName: string;
|
|
email: string;
|
|
role: string;
|
|
};
|
|
|
|
export const columns: ColumnDef<InferSelectModel<typeof users>>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
ID
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "github_id",
|
|
header: "GitHub ID",
|
|
},
|
|
{
|
|
accessorKey: "username",
|
|
header: "Username",
|
|
},
|
|
{
|
|
accessorKey: "displayName",
|
|
header: "Name",
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "E-Mail",
|
|
},
|
|
{
|
|
accessorKey: "role",
|
|
header: "Rolle",
|
|
cell: ({ row }) => {
|
|
const role = row.getValue("role");
|
|
const translated = translateUserRole(role as UserRole);
|
|
|
|
return translated;
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => {
|
|
const user = row.original;
|
|
|
|
return (
|
|
<EditUserDialogRoot>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Menu öffnen</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
target="_blank"
|
|
href={generateTeamsChatURL(user.email)}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<MessageCircleIcon className="w-4 h-4" />
|
|
<span>Teams-Chat öffnen</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
target="_blank"
|
|
href={generateEMailURL(user.email)}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<MailIcon className="w-4 h-4" />
|
|
<span>E-Mail schicken</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<EditUserDialogTrigger />
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<EditUserDialogContent user={user as User} />
|
|
</EditUserDialogRoot>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
function generateTeamsChatURL(email: string) {
|
|
return `https://teams.microsoft.com/l/chat/0/0?users=${email}`;
|
|
}
|
|
|
|
function generateEMailURL(email: string) {
|
|
return `mailto:${email}`;
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/users/data-table.tsx
|
|
================
|
|
"use client";
|
|
|
|
import {
|
|
type ColumnDef,
|
|
type ColumnFiltersState,
|
|
type SortingState,
|
|
type VisibilityState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getFilteredRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { SlidersHorizontalIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
interface DataTableProps<TData, TValue> {
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
}
|
|
|
|
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
onSortingChange: setSorting,
|
|
getSortedRowModel: getSortedRowModel(),
|
|
onColumnFiltersChange: setColumnFilters,
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
state: {
|
|
sorting,
|
|
columnFilters,
|
|
columnVisibility,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center py-4">
|
|
<Input
|
|
placeholder="E-Mails filtern..."
|
|
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
|
|
onChange={(event) => table.getColumn("email")?.setFilterValue(event.target.value)}
|
|
className="max-w-sm"
|
|
/>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" className="ml-auto flex items-center gap-2">
|
|
<SlidersHorizontalIcon className="h-4 w-4" />
|
|
<span>Spalten</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className="capitalize"
|
|
checked={column.getIsVisible()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{column.id}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<TableHead key={header.id}>
|
|
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
Keine Ergebnisse gefunden.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex items-center justify-end space-x-2 py-4">
|
|
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
|
Zurück
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
|
Nächste Seite
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/users/dialog.tsx
|
|
================
|
|
import type { User } from "@/app/admin/users/columns";
|
|
import { ProfileForm } from "@/app/admin/users/form";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { PencilIcon } from "lucide-react";
|
|
|
|
interface EditUserDialogRootProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function EditUserDialogRoot(props: EditUserDialogRootProps) {
|
|
const { children } = props;
|
|
|
|
return <Dialog>{children}</Dialog>;
|
|
}
|
|
|
|
export function EditUserDialogTrigger() {
|
|
return (
|
|
<DialogTrigger className="flex gap-2 items-center">
|
|
<PencilIcon className="w-4 h-4" />
|
|
<span>Benutzer bearbeiten</span>
|
|
</DialogTrigger>
|
|
);
|
|
}
|
|
|
|
interface EditUserDialogContentProps {
|
|
user: User;
|
|
}
|
|
|
|
export function EditUserDialogContent(props: EditUserDialogContentProps) {
|
|
const { user } = props;
|
|
|
|
if (!user) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Benutzer bearbeiten</DialogTitle>
|
|
<DialogDescription>
|
|
<strong>Hinweis:</strong> In den seltensten Fällen sollten die Daten
|
|
eines Benutzers geändert werden. Dies kann zu unerwarteten Problemen
|
|
führen.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<ProfileForm user={user} />
|
|
</DialogContent>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/users/form.tsx
|
|
================
|
|
"use client";
|
|
|
|
import type { User } from "@/app/admin/users/columns";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DialogClose } from "@/components/ui/dialog";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { deleteUser, updateUser } from "@/server/actions/users";
|
|
import type { UserRole } from "@/server/auth/permissions";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { SaveIcon, TrashIcon } from "lucide-react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
export const formSchema = z.object({
|
|
username: z
|
|
.string()
|
|
.min(2, {
|
|
message: "Der Benutzername muss mindestens 2 Zeichen lang sein.",
|
|
})
|
|
.max(50),
|
|
displayName: z
|
|
.string()
|
|
.min(2, {
|
|
message: "Der Anzeigename muss mindestens 2 Zeichen lang sein.",
|
|
})
|
|
.max(50),
|
|
email: z.string().email(),
|
|
role: z.enum(["admin", "user", "guest"]),
|
|
});
|
|
|
|
interface ProfileFormProps {
|
|
user: User;
|
|
}
|
|
|
|
export function ProfileForm(props: ProfileFormProps) {
|
|
const { user } = props;
|
|
const { toast } = useToast();
|
|
|
|
// 1. Define your form.
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
username: user.username,
|
|
displayName: user.displayName,
|
|
email: user.email,
|
|
role: user.role as UserRole,
|
|
},
|
|
});
|
|
|
|
// 2. Define a submit handler.
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
toast({ description: "Benutzerprofil wird aktualisiert..." });
|
|
|
|
await updateUser(user.id, values);
|
|
|
|
toast({ description: "Benutzerprofil wurde aktualisiert." });
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="username"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Benutzername</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="MAXMUS" {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Nur in Ausnahmefällen sollte der Benutzername geändert werden.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="displayName"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Anzeigename</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Max Mustermann" {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Der Anzeigename darf frei verändert werden.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>E-Mail Adresse</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="max.mustermann@mercedes-benz.com"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
Nur in Ausnahmefällen sollte die E-Mail Adresse geändert werden.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="role"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Benutzerrolle</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a verified email to display" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
<SelectItem value="admin">Administrator</SelectItem>
|
|
<SelectItem value="user">Benutzer</SelectItem>
|
|
<SelectItem value="guest">Gast</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FormDescription>
|
|
Die Benutzerrolle bestimmt die Berechtigungen des Benutzers.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex justify-between items-center">
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
className="gap-2 flex items-center"
|
|
>
|
|
<TrashIcon className="w-4 h-4" />
|
|
<span>Benutzer löschen</span>
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Bist du dir sicher?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Diese Aktion kann nicht rückgängig gemacht werden. Das
|
|
Benutzerprofil und die damit verbundenen Daten werden
|
|
unwiderruflich gelöscht.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-red-500"
|
|
onClick={() => {
|
|
toast({ description: "Benutzerprofil wird gelöscht..." });
|
|
deleteUser(user.id);
|
|
toast({ description: "Benutzerprofil wurde gelöscht." });
|
|
}}
|
|
>
|
|
Ja, löschen
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
<DialogClose asChild>
|
|
<Button type="submit" className="gap-2 flex items-center">
|
|
<SaveIcon className="w-4 h-4" />
|
|
<span>Speichern</span>
|
|
</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/admin/users/page.tsx
|
|
================
|
|
import { columns } from "@/app/admin/users/columns";
|
|
import { DataTable } from "@/app/admin/users/data-table";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { db } from "@/server/db";
|
|
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Alle Benutzer",
|
|
};
|
|
|
|
export default async function AdminPage() {
|
|
const data = await db.query.users.findMany();
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Benutzerverwaltung</CardTitle>
|
|
<CardDescription>Suche, Bearbeite und Lösche Benutzer</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DataTable columns={columns} data={data} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/api/job/[jobId]/remaining-time/route.ts
|
|
================
|
|
import { db } from "@/server/db";
|
|
import { printJobs } from "@/server/db/schema";
|
|
import { eq } from "drizzle-orm";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
interface RemainingTimeRouteProps {
|
|
params: {
|
|
jobId: string;
|
|
};
|
|
}
|
|
export async function GET(request: Request, { params }: RemainingTimeRouteProps) {
|
|
// Trying to fix build error in container...
|
|
if (params.jobId === undefined) {
|
|
return Response.json({});
|
|
}
|
|
|
|
// Get the job details
|
|
const jobDetails = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, params.jobId),
|
|
});
|
|
|
|
// Check if the job exists
|
|
if (!jobDetails) {
|
|
return Response.json({
|
|
id: params.jobId,
|
|
error: "Job not found",
|
|
});
|
|
}
|
|
|
|
// Calculate the remaining time
|
|
const startAt = new Date(jobDetails.startAt).getTime();
|
|
const endAt = startAt + jobDetails.durationInMinutes * 60 * 1000;
|
|
const remainingTime = Math.max(0, endAt - Date.now());
|
|
|
|
// Return the remaining time
|
|
return Response.json({
|
|
id: params.jobId,
|
|
remainingTime,
|
|
});
|
|
}
|
|
|
|
================
|
|
File: src/app/api/printers/route.ts
|
|
================
|
|
import { getPrinters } from "@/server/actions/printers";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export async function GET() {
|
|
const printers = await getPrinters();
|
|
|
|
return Response.json(printers);
|
|
}
|
|
|
|
================
|
|
File: src/app/auth/login/callback/route.ts
|
|
================
|
|
import { lucia } from "@/server/auth";
|
|
import { type GitHubUserResult, github } from "@/server/auth/oauth";
|
|
import { db } from "@/server/db";
|
|
import { users } from "@/server/db/schema";
|
|
import { OAuth2RequestError } from "arctic";
|
|
import { eq } from "drizzle-orm";
|
|
import { generateIdFromEntropySize } from "lucia";
|
|
import { cookies } from "next/headers";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
interface GithubEmailResponse {
|
|
email: string;
|
|
primary: boolean;
|
|
verified: boolean;
|
|
visibility: string;
|
|
}
|
|
|
|
export async function GET(request: Request): Promise<Response> {
|
|
const url = new URL(request.url);
|
|
const code = url.searchParams.get("code");
|
|
const state = url.searchParams.get("state");
|
|
const storedState = cookies().get("github_oauth_state")?.value ?? null;
|
|
if (!code || !state || !storedState || state !== storedState) {
|
|
return new Response(
|
|
JSON.stringify({
|
|
status_text: "Something is wrong",
|
|
data: { code, state, storedState },
|
|
}),
|
|
{
|
|
status: 400,
|
|
},
|
|
);
|
|
}
|
|
|
|
try {
|
|
const tokens = await github.validateAuthorizationCode(code);
|
|
const githubUserResponse = await fetch("https://git.i.mercedes-benz.com/api/v3/user", {
|
|
headers: {
|
|
Authorization: `Bearer ${tokens.accessToken}`,
|
|
},
|
|
});
|
|
const githubUser: GitHubUserResult = await githubUserResponse.json();
|
|
|
|
// Sometimes email can be null in the user query.
|
|
if (githubUser.email === null || githubUser.email === undefined) {
|
|
const githubEmailResponse = await fetch("https://git.i.mercedes-benz.com/api/v3/user/emails", {
|
|
headers: {
|
|
Authorization: `Bearer ${tokens.accessToken}`,
|
|
},
|
|
});
|
|
const githubUserEmail: GithubEmailResponse[] = await githubEmailResponse.json();
|
|
githubUser.email = githubUserEmail[0].email;
|
|
}
|
|
const existingUser = await db.query.users.findFirst({
|
|
where: eq(users.github_id, githubUser.id),
|
|
});
|
|
|
|
if (existingUser) {
|
|
const session = await lucia.createSession(existingUser.id, {});
|
|
const sessionCookie = lucia.createSessionCookie(session.id);
|
|
cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
|
|
return new Response(null, {
|
|
status: 302,
|
|
headers: {
|
|
Location: "/",
|
|
},
|
|
});
|
|
}
|
|
|
|
const userId = generateIdFromEntropySize(10); // 16 characters long
|
|
|
|
await db.insert(users).values({
|
|
id: userId,
|
|
github_id: githubUser.id,
|
|
username: githubUser.login,
|
|
displayName: githubUser.name,
|
|
email: githubUser.email,
|
|
});
|
|
|
|
const session = await lucia.createSession(userId, {});
|
|
const sessionCookie = lucia.createSessionCookie(session.id);
|
|
cookies().set(sessionCookie.name, sessionCookie.value, {
|
|
...sessionCookie.attributes,
|
|
secure: false, // Else cookie does not get set cause IT has not provided us an SSL certificate yet
|
|
});
|
|
return new Response(null, {
|
|
status: 302,
|
|
headers: {
|
|
Location: "/",
|
|
},
|
|
});
|
|
} catch (e) {
|
|
// the specific error message depends on the provider
|
|
if (e instanceof OAuth2RequestError) {
|
|
// invalid code
|
|
return new Response(
|
|
JSON.stringify({
|
|
status_text: "Invalid code",
|
|
error: JSON.stringify(e),
|
|
}),
|
|
{
|
|
status: 400,
|
|
},
|
|
);
|
|
}
|
|
return new Response(null, {
|
|
status: 500,
|
|
});
|
|
}
|
|
}
|
|
|
|
================
|
|
File: src/app/auth/login/route.ts
|
|
================
|
|
import { github } from "@/server/auth/oauth";
|
|
import { generateState } from "arctic";
|
|
import { cookies } from "next/headers";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export async function GET(): Promise<Response> {
|
|
const state = generateState();
|
|
const url = await github.createAuthorizationURL(state, {
|
|
scopes: ["user"],
|
|
});
|
|
const ONE_HOUR = 60 * 60;
|
|
|
|
cookies().set("github_oauth_state", state, {
|
|
path: "/",
|
|
secure: false, //process.env.NODE_ENV === "production", -- can't be used until SSL certificate is provided by IT
|
|
httpOnly: true,
|
|
maxAge: ONE_HOUR,
|
|
sameSite: "lax",
|
|
});
|
|
|
|
return Response.redirect(url);
|
|
}
|
|
|
|
================
|
|
File: src/app/globals.css
|
|
================
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 221.2 83.2% 53.3%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 221.2 83.2% 53.3%;
|
|
--radius: 0.75rem;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 224.3 76.3% 48%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
}
|
|
|
|
================
|
|
File: src/app/job/[jobId]/cancel-form.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { abortPrintJob } from "@/server/actions/printJobs";
|
|
import { TriangleAlertIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
const formSchema = z.object({
|
|
abortReason: z
|
|
.string()
|
|
.min(1, {
|
|
message: "Bitte gebe einen Grund für den Abbruch an.",
|
|
})
|
|
.max(255, {
|
|
message: "Der Grund darf maximal 255 Zeichen lang sein.",
|
|
}),
|
|
});
|
|
|
|
interface CancelFormProps {
|
|
jobId: string;
|
|
}
|
|
|
|
export function CancelForm(props: CancelFormProps) {
|
|
const { jobId } = props;
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
abortReason: "",
|
|
},
|
|
});
|
|
const { toast } = useToast();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
toast({
|
|
description: "Druckauftrag wird abgebrochen...",
|
|
});
|
|
try {
|
|
const result = await abortPrintJob(jobId, values.abortReason);
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
setOpen(false);
|
|
toast({
|
|
description: "Druckauftrag wurde abgebrochen.",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant={"ghost"}
|
|
className="text-red-500 hover:text-red-600 flex-grow gap-2 items-center flex justify-start"
|
|
>
|
|
<TriangleAlertIcon className="w-4 h-4" />
|
|
<span>Druckauftrag abbrechen</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Druckauftrag abbrechen?</DialogTitle>
|
|
<DialogDescription>
|
|
Du bist dabei, den Druckauftrag abzubrechen. Bitte beachte, dass ein abgebrochener Druckauftrag nicht wieder
|
|
aufgenommen werden kann und der Drucker sich automatisch abschaltet.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<FormField
|
|
control={form.control}
|
|
name="abortReason"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Grund für den Abbruch</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Bitte teile uns den Grund für den Abbruch des Druckauftrags mit. Wenn der Drucker eine Fehlermeldung
|
|
anzeigt, gib bitte nur diese Fehlermeldung an.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex flex-row justify-between">
|
|
<DialogClose asChild>
|
|
<Button variant={"secondary"}>Nein</Button>
|
|
</DialogClose>
|
|
<Button variant={"destructive"} type="submit">
|
|
Ja, Druck abbrechen
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/job/[jobId]/edit-comments.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { updatePrintComments } from "@/server/actions/printJobs";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
|
|
interface EditCommentsProps {
|
|
defaultValue: string | null;
|
|
jobId: string;
|
|
disabled?: boolean;
|
|
}
|
|
export function EditComments(props: EditCommentsProps) {
|
|
const { defaultValue, jobId, disabled } = props;
|
|
const { toast } = useToast();
|
|
|
|
const debounced = useDebouncedCallback(async (value) => {
|
|
try {
|
|
const result = await updatePrintComments(jobId, value);
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
toast({
|
|
description: "Anmerkungen wurden gespeichert.",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}, 1000);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Label>Anmerkungen</Label>
|
|
<Textarea
|
|
placeholder="Anmerkungen"
|
|
disabled={disabled}
|
|
defaultValue={defaultValue ?? ""}
|
|
onChange={(e) => debounced(e.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/job/[jobId]/extend-form.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { extendPrintJob } from "@/server/actions/printJobs";
|
|
import { CircleFadingPlusIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useSWRConfig } from "swr";
|
|
|
|
const formSchema = z.object({
|
|
minutes: z.coerce.number().int().max(59, {
|
|
message: "Die Minuten müssen zwischen 0 und 59 liegen.",
|
|
}),
|
|
hours: z.coerce.number().int().max(24, {
|
|
message: "Die Stunden müssen zwischen 0 und 24 liegen.",
|
|
}),
|
|
});
|
|
|
|
interface ExtendFormProps {
|
|
jobId: string;
|
|
}
|
|
|
|
export function ExtendForm(props: ExtendFormProps) {
|
|
const { jobId } = props;
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
minutes: 0,
|
|
hours: 0,
|
|
},
|
|
});
|
|
const { toast } = useToast();
|
|
const [open, setOpen] = useState(false);
|
|
const { mutate } = useSWRConfig();
|
|
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
toast({
|
|
description: "Druckauftrag wird verlängert...",
|
|
});
|
|
try {
|
|
const result = await extendPrintJob(jobId, values.minutes, values.hours);
|
|
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
|
|
setOpen(false);
|
|
form.reset();
|
|
|
|
mutate(`/api/job/${jobId}/remaining-time`); // Refresh the countdown
|
|
|
|
toast({
|
|
description: "Druckauftrag wurde verlängert.",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant={"ghost"} className="flex-grow gap-2 items-center flex justify-start">
|
|
<CircleFadingPlusIcon className="w-4 h-4" />
|
|
<span>Druckauftrag verlängern</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Druckauftrag verlängern</DialogTitle>
|
|
<DialogDescription>
|
|
Braucht dein Druck mehr Zeit als erwartet? Füge weitere Stunden oder Minuten zur Druckzeit hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<p className="text-sm px-4 py-2 text-yellow-700 bg-yellow-500/20 rounded-md">
|
|
<span className="font-medium">Wichtig:</span> Bitte verlängere die Druckzeit nur, wenn es sich um
|
|
denselben Druck handelt. Wenn es ein anderer Druck ist, brich bitte den aktuellen Druckauftrag ab und
|
|
starte einen neuen.
|
|
</p>
|
|
<div className="flex flex-row gap-2">
|
|
<FormField
|
|
control={form.control}
|
|
name="hours"
|
|
render={({ field }) => (
|
|
<FormItem className="w-1/2">
|
|
<FormLabel>Stunden</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="0" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="minutes"
|
|
render={({ field }) => (
|
|
<FormItem className="w-1/2">
|
|
<FormLabel>Minuten</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="0" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row justify-between">
|
|
<DialogClose asChild>
|
|
<Button variant={"secondary"}>Abbrechen</Button>
|
|
</DialogClose>
|
|
<Button variant={"default"} type="submit">
|
|
Verlängern
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/job/[jobId]/finish-form.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { earlyFinishPrintJob } from "@/server/actions/printJobs";
|
|
import { CircleCheckBigIcon } from "lucide-react";
|
|
|
|
interface FinishFormProps {
|
|
jobId: string;
|
|
}
|
|
|
|
export function FinishForm(props: FinishFormProps) {
|
|
const { jobId } = props;
|
|
const { toast } = useToast();
|
|
|
|
async function onClick() {
|
|
toast({
|
|
description: "Druckauftrag wird abgeschlossen...",
|
|
});
|
|
try {
|
|
const result = await earlyFinishPrintJob(jobId);
|
|
if (result?.error) {
|
|
toast({
|
|
description: result.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
toast({
|
|
description: "Druckauftrag wurde abgeschlossen.",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} else {
|
|
toast({
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant={"ghost"} className="flex-grow gap-2 items-center flex justify-start">
|
|
<CircleCheckBigIcon className="w-4 h-4" />
|
|
<span>Druckauftrag abschließen</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<AlertDialogHeader>
|
|
<DialogTitle>Druckauftrag abschließen?</DialogTitle>
|
|
<DialogDescription>
|
|
Du bist dabei, den Druckauftrag als abgeschlossen zu markieren. Dies führt dazu, dass der Drucker
|
|
automatisch herunterfährt.
|
|
</DialogDescription>
|
|
</AlertDialogHeader>
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-sm text-red-500 font-medium bg-red-500/20 px-4 py-2 rounded-md">
|
|
Bitte bestätige nur, wenn der Druckauftrag tatsächlich erfolgreich abgeschlossen wurde.
|
|
</p>
|
|
<div className="flex flex-row justify-between">
|
|
<DialogClose asChild>
|
|
<Button variant={"secondary"}>Abbrechen</Button>
|
|
</DialogClose>
|
|
<DialogClose asChild onClick={onClick}>
|
|
<Button variant={"default"}>Bestätigen</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/job/[jobId]/page.tsx
|
|
================
|
|
import { CancelForm } from "@/app/job/[jobId]/cancel-form";
|
|
import { EditComments } from "@/app/job/[jobId]/edit-comments";
|
|
import { ExtendForm } from "@/app/job/[jobId]/extend-form";
|
|
import { FinishForm } from "@/app/job/[jobId]/finish-form";
|
|
import { Countdown } from "@/components/printer-card/countdown";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { printJobs } from "@/server/db/schema";
|
|
import { eq } from "drizzle-orm";
|
|
import { ArchiveIcon } from "lucide-react";
|
|
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Druckauftrag",
|
|
};
|
|
|
|
interface JobDetailsPageProps {
|
|
params: {
|
|
jobId: string;
|
|
};
|
|
}
|
|
export default async function JobDetailsPage(props: JobDetailsPageProps) {
|
|
const { jobId } = props.params;
|
|
const { user } = await validateRequest();
|
|
|
|
const jobDetails = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, jobId),
|
|
with: {
|
|
user: true,
|
|
printer: true,
|
|
},
|
|
});
|
|
|
|
if (!jobDetails) {
|
|
return <div>Druckauftrag wurde nicht gefunden.</div>;
|
|
}
|
|
|
|
const jobIsOnGoing = new Date(jobDetails.startAt).getTime() + jobDetails.durationInMinutes * 60 * 1000 > Date.now();
|
|
const jobIsAborted = jobDetails.aborted;
|
|
const userOwnsJob = jobDetails.userId === user?.id;
|
|
const userIsAdmin = user?.role === UserRole.ADMIN;
|
|
const userMayEditJob = userOwnsJob || userIsAdmin;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<h1 className="text-3xl font-semibold">
|
|
Druckauftrag vom{" "}
|
|
{new Date(jobDetails.startAt).toLocaleString("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "medium",
|
|
})}
|
|
</h1>
|
|
{!jobIsOnGoing || jobIsAborted ? (
|
|
<Alert className="bg-yellow-200 border-yellow-500 text-yellow-700 shadow-sm">
|
|
<ArchiveIcon className="h-4 w-4" />
|
|
<AlertTitle>Hinweis</AlertTitle>
|
|
<AlertDescription>
|
|
Dieser Druckauftrag wurde bereits abgeschlossen und kann nicht mehr bearbeitet werden.
|
|
</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<Card className="w-full">
|
|
<CardContent className="p-4 flex flex-col gap-4">
|
|
<div className="flex flex-row justify-between">
|
|
<div>
|
|
<h2 className="font-semibold">Ansprechpartner</h2>
|
|
<p className="text-sm">{jobDetails.user.displayName}</p>
|
|
<p className="text-sm">{jobDetails.user.email}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
{jobIsAborted && (
|
|
<>
|
|
<h2 className="font-semibold text-red-500">Abbruchsgrund</h2>
|
|
<p className="text-sm text-red-500">{jobDetails.abortReason}</p>
|
|
</>
|
|
)}
|
|
{jobIsOnGoing && (
|
|
<>
|
|
<h2 className="font-semibold">Verbleibende Zeit</h2>
|
|
<p className="text-sm">
|
|
<Countdown jobId={jobDetails.id} />
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<EditComments
|
|
defaultValue={jobDetails.comments}
|
|
jobId={jobDetails.id}
|
|
disabled={!userMayEditJob || jobIsAborted || !jobIsOnGoing}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
{userMayEditJob && jobIsOnGoing && (
|
|
<Card className="w-full lg:w-96 ml-auto">
|
|
<CardHeader>
|
|
<CardTitle>Aktionen</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex w-full flex-col -ml-4 -mt-2">
|
|
<FinishForm jobId={jobDetails.id} />
|
|
<ExtendForm jobId={jobDetails.id} />
|
|
<CancelForm jobId={jobDetails.id} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* durationInMinutes: integer("durationInMinutes").notNull(),
|
|
comments: text("comments"),
|
|
aborted: integer("aborted", { mode: "boolean" }).notNull().default(false),
|
|
abortReason: text("abortReason"),
|
|
*/
|
|
|
|
================
|
|
File: src/app/layout.tsx
|
|
================
|
|
import { Header } from "@/components/header";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import type { Metadata } from "next";
|
|
|
|
import "@/app/globals.css";
|
|
|
|
export const metadata: Metadata = {
|
|
title: {
|
|
default: "MYP",
|
|
template: "%s | MYP",
|
|
},
|
|
description: "Generated by create next app",
|
|
};
|
|
|
|
interface RootLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default function RootLayout(props: RootLayoutProps) {
|
|
const { children } = props;
|
|
|
|
return (
|
|
<html lang="de" suppressHydrationWarning>
|
|
<head />
|
|
<body className={"min-h-dvh bg-neutral-200 font-sans antialiased"}>
|
|
<Header />
|
|
<main className="flex-grow max-w-screen-2xl w-full mx-auto flex flex-col p-8 gap-4 text-foreground">
|
|
{children}
|
|
</main>
|
|
<Toaster />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/my/jobs/columns.tsx
|
|
================
|
|
"use client";
|
|
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
import type { ColumnDef } from "@tanstack/react-table";
|
|
import { BadgeCheckIcon, EyeIcon, HourglassIcon, MoreHorizontal, OctagonXIcon, ShareIcon } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import type { printers } from "@/server/db/schema";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
import Link from "next/link";
|
|
|
|
export const columns: ColumnDef<
|
|
InferResultType<
|
|
"printJobs",
|
|
{
|
|
printer: true;
|
|
}
|
|
>
|
|
>[] = [
|
|
{
|
|
accessorKey: "printer",
|
|
header: "Drucker",
|
|
cell: ({ row }) => {
|
|
const printer: InferSelectModel<typeof printers> = row.getValue("printer");
|
|
return printer.name;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "startAt",
|
|
header: "Startzeitpunkt",
|
|
cell: ({ row }) => {
|
|
const startAt = new Date(row.original.startAt);
|
|
|
|
return `${startAt.toLocaleDateString("de-DE", {
|
|
dateStyle: "medium",
|
|
})} ${startAt.toLocaleTimeString("de-DE")}`;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "durationInMinutes",
|
|
header: "Dauer (Minuten)",
|
|
},
|
|
{
|
|
accessorKey: "comments",
|
|
header: "Anmerkungen",
|
|
cell: ({ row }) => {
|
|
const comments = row.original.comments;
|
|
|
|
if (comments) {
|
|
return <span className="text-sm">{comments.slice(0, 50)}</span>;
|
|
}
|
|
|
|
return <span className="text-muted-foreground text-sm">Keine Anmerkungen</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "Status",
|
|
cell: ({ row }) => {
|
|
const aborted = row.original.aborted;
|
|
|
|
if (aborted) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<OctagonXIcon className="w-4 h-4 text-red-500" /> <span className="text-red-600">Abgebrochen</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const startAt = new Date(row.original.startAt).getTime();
|
|
const endAt = startAt + row.original.durationInMinutes * 60 * 1000;
|
|
|
|
if (Date.now() < endAt) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<HourglassIcon className="w-4 h-4 text-yellow-500" />
|
|
<span className="text-yellow-600">Läuft...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<BadgeCheckIcon className="w-4 h-4 text-green-500" />
|
|
<span className="text-green-600">Abgeschlossen</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => {
|
|
const job = row.original;
|
|
const { toast } = useToast();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Menu öffnen</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
className="flex items-center gap-2"
|
|
onClick={() => {
|
|
const baseUrl = new URL(window.location.href);
|
|
baseUrl.pathname = `/job/${job.id}`;
|
|
navigator.clipboard.writeText(baseUrl.toString());
|
|
toast({
|
|
description: "URL zum Druckauftrag in die Zwischenablage kopiert.",
|
|
});
|
|
}}
|
|
>
|
|
<ShareIcon className="w-4 h-4" />
|
|
<span>Teilen</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<Link href={`/job/${job.id}`} className="flex items-center gap-2">
|
|
<EyeIcon className="w-4 h-4" />
|
|
<span>Details anzeigen</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
================
|
|
File: src/app/my/jobs/data-table.tsx
|
|
================
|
|
"use client";
|
|
|
|
import {
|
|
type ColumnDef,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getPaginationRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
|
|
interface DataTableProps<TData, TValue> {
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
}
|
|
|
|
export function JobsTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<TableHead key={header.id}>
|
|
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
Keine Ergebnisse gefunden
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex items-center justify-end space-x-2 py-4 select-none">
|
|
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
|
Vorherige Seite
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
|
Nächste Seite
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/my/profile/page.tsx
|
|
================
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole, translateUserRole } from "@/server/auth/permissions";
|
|
import type { Metadata } from "next";
|
|
import { redirect } from "next/navigation";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Dein Profil",
|
|
};
|
|
|
|
export default async function ProfilePage() {
|
|
const { user } = await validateRequest();
|
|
|
|
if (!user) {
|
|
redirect("/");
|
|
}
|
|
|
|
const badgeVariant = {
|
|
[UserRole.ADMIN]: "destructive" as const,
|
|
[UserRole.USER]: "default" as const,
|
|
[UserRole.GUEST]: "secondary" as const,
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row justify-between items-center">
|
|
<div>
|
|
<CardTitle>{user?.displayName}</CardTitle>
|
|
<CardDescription>
|
|
{user?.username} — {user?.email}
|
|
</CardDescription>
|
|
</div>
|
|
<Badge variant={badgeVariant[user?.role]}>{translateUserRole(user?.role)}</Badge>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Deine Daten wurden vom <abbr>GitHub Enterprise Server</abbr> importiert und können hier nur angezeigt werden.
|
|
</p>
|
|
<p>
|
|
Solltest Du Änderungen oder eine Löschung deiner Daten von unserem Dienst beantragen wollen, so wende dich
|
|
bitte an einen Administrator.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/not-found.tsx
|
|
================
|
|
import Link from "next/link";
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<div>
|
|
<h2>Nicht gefunden</h2>
|
|
<p>Die angefragte Seite konnte nicht gefunden werden.</p>
|
|
<Link href="/">Zurück zur Startseite</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/page.tsx
|
|
================
|
|
import { columns } from "@/app/my/jobs/columns";
|
|
import { JobsTable } from "@/app/my/jobs/data-table";
|
|
import { DynamicPrinterCards } from "@/components/dynamic-printer-cards";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { db } from "@/server/db";
|
|
import { printJobs } from "@/server/db/schema";
|
|
import { desc, eq } from "drizzle-orm";
|
|
import { BoxesIcon, NewspaperIcon } from "lucide-react";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Dashboard | MYP",
|
|
};
|
|
|
|
export default async function HomePage() {
|
|
const { user } = await validateRequest();
|
|
const userIsLoggedIn = Boolean(user);
|
|
|
|
const printers = await db.query.printers.findMany({
|
|
with: {
|
|
printJobs: {
|
|
limit: 1,
|
|
orderBy: (printJobs, { desc }) => [desc(printJobs.startAt)],
|
|
},
|
|
},
|
|
});
|
|
|
|
// biome-ignore lint/suspicious/noExplicitAny: temp. fix for jobs
|
|
let jobs: any[] = [];
|
|
if (userIsLoggedIn) {
|
|
jobs = await db.query.printJobs.findMany({
|
|
// biome-ignore lint/style/noNonNullAssertion: User exists if userIsLoggedIn is true
|
|
where: eq(printJobs.userId, user!.id),
|
|
orderBy: [desc(printJobs.startAt)],
|
|
with: {
|
|
printer: true,
|
|
},
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* NEEDS TO BE FIXED FOR A NEW / EMPTY USER {isLoggedIn && <PersonalizedCards />} */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex flex-row items-center gap-x-1">
|
|
<BoxesIcon className="w-5 h-5" />
|
|
<span className="text-lg">Druckerbelegung</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<DynamicPrinterCards user={user} />
|
|
</CardContent>
|
|
</Card>
|
|
{userIsLoggedIn && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex flex-row items-center gap-x-1">
|
|
<NewspaperIcon className="w-5 h-5" />
|
|
<span className="text-lg">Druckaufträge</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<JobsTable columns={columns} data={jobs} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/printer/[printerId]/reserve/form.tsx
|
|
================
|
|
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DialogClose } from "@/components/ui/dialog";
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { createPrintJob } from "@/server/actions/printJobs";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { CalendarPlusIcon, XCircleIcon } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { If, Then } from "react-if";
|
|
import { z } from "zod";
|
|
|
|
export const formSchema = z.object({
|
|
hours: z.coerce.number().int().min(0).max(96, {
|
|
message: "Die Stunden müssen zwischen 0 und 96 liegen.",
|
|
}),
|
|
minutes: z.coerce.number().int().min(0).max(59, {
|
|
message: "Die Minuten müssen zwischen 0 und 59 liegen.",
|
|
}),
|
|
comments: z.string().optional(),
|
|
});
|
|
|
|
interface PrinterReserveFormProps {
|
|
userId: string;
|
|
printerId: string;
|
|
isDialog?: boolean;
|
|
}
|
|
|
|
export function PrinterReserveForm(props: PrinterReserveFormProps) {
|
|
const { userId, printerId, isDialog } = props;
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
const [isLocked, setLocked] = useState(false);
|
|
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
hours: 0,
|
|
minutes: 0,
|
|
comments: "",
|
|
},
|
|
});
|
|
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
if (!isLocked) {
|
|
setLocked(true);
|
|
setTimeout(() => {
|
|
setLocked(false);
|
|
}, 1000 * 5);
|
|
} else {
|
|
toast({
|
|
description: "Bitte warte ein wenig, bevor du eine weitere Reservierung tätigst...",
|
|
variant: "default",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (values.hours === 0 && values.minutes === 0) {
|
|
form.setError("hours", {
|
|
message: "",
|
|
});
|
|
form.setError("minutes", {
|
|
message: "Die Dauer des Druckauftrags muss mindestens 1 Minute betragen.",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const jobId = await createPrintJob({
|
|
durationInMinutes: values.hours * 60 + values.minutes,
|
|
comments: values.comments,
|
|
userId: userId,
|
|
printerId: printerId,
|
|
});
|
|
if (typeof jobId === "object") {
|
|
toast({
|
|
description: jobId.error,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
|
|
router.push(`/job/${jobId}`);
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast({ variant: "destructive", description: error.message });
|
|
} else {
|
|
toast({
|
|
variant: "destructive",
|
|
description: "Ein unbekannter Fehler ist aufgetreten.",
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
toast({ description: "Druckauftrag wurde erfolgreich erstellt." });
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<div className="flex flex-row gap-2">
|
|
<FormField
|
|
control={form.control}
|
|
name="hours"
|
|
render={({ field }) => (
|
|
<FormItem className="w-1/2">
|
|
<FormLabel>Stunden</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="0" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="minutes"
|
|
render={({ field }) => (
|
|
<FormItem className="w-1/2">
|
|
<FormLabel>Minuten</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="0" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<FormField
|
|
control={form.control}
|
|
name="comments"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Anmerkungen</FormLabel>
|
|
<FormControl>
|
|
<Textarea placeholder="" {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
In dieses Feld kannst du Anmerkungen zu deinem Druckauftrag hinzufügen. Sie können beispielsweise
|
|
Informationen über das Druckmaterial, die Druckqualität oder die Farbe enthalten.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex justify-between items-center">
|
|
<If condition={isDialog}>
|
|
<Then>
|
|
<DialogClose asChild>
|
|
<Button variant={"secondary"} className="gap-2 flex items-center">
|
|
<XCircleIcon className="w-4 h-4" />
|
|
<span>Abbrechen</span>
|
|
</Button>
|
|
</DialogClose>
|
|
</Then>
|
|
</If>
|
|
<Button type="submit" className="gap-2 flex items-center" disabled={isLocked}>
|
|
<CalendarPlusIcon className="w-4 h-4" />
|
|
<span>Reservieren</span>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/app/printer/[printerId]/reserve/page.tsx
|
|
================
|
|
import { PrinterReserveForm } from "@/app/printer/[printerId]/reserve/form";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { redirect } from "next/navigation";
|
|
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Drucker reservieren",
|
|
};
|
|
|
|
interface PrinterReservePageProps {
|
|
params: {
|
|
printerId: string;
|
|
};
|
|
}
|
|
|
|
export default async function PrinterReservePage(props: PrinterReservePageProps) {
|
|
const { user } = await validateRequest();
|
|
const { printerId } = props.params;
|
|
|
|
if (!user) {
|
|
return redirect("/");
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Drucker reservieren</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PrinterReserveForm userId={user?.id} printerId={printerId} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/data-card.tsx
|
|
================
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { icons } from "lucide-react";
|
|
|
|
interface GenericIconProps {
|
|
name: keyof typeof icons;
|
|
className: string;
|
|
}
|
|
|
|
function GenericIcon(props: GenericIconProps) {
|
|
const { name, className } = props;
|
|
const LucideIcon = icons[name];
|
|
|
|
return <LucideIcon className={className} />;
|
|
}
|
|
|
|
interface DataCardProps {
|
|
title: string;
|
|
description?: string;
|
|
value: string | number;
|
|
icon: keyof typeof icons;
|
|
}
|
|
|
|
export function DataCard(props: DataCardProps) {
|
|
const { title, description, value, icon } = props;
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
|
<GenericIcon name={icon} className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{value}</div>
|
|
<p className="text-xs text-muted-foreground"> </p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/dynamic-printer-cards.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { PrinterCard } from "@/components/printer-card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
import { fetcher } from "@/utils/fetch";
|
|
import type { RegisteredDatabaseUserAttributes } from "lucia";
|
|
import useSWR from "swr";
|
|
|
|
interface DynamicPrinterCardsProps {
|
|
user: RegisteredDatabaseUserAttributes | null;
|
|
}
|
|
|
|
export function DynamicPrinterCards(props: DynamicPrinterCardsProps) {
|
|
const { user } = props;
|
|
const { data, error, isLoading } = useSWR("/api/printers", fetcher, {
|
|
refreshInterval: 1000 * 15,
|
|
});
|
|
|
|
if (error) {
|
|
return <div>Ein Fehler ist aufgetreten.</div>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<>
|
|
{new Array(6).fill(null).map((_, index) => (
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
|
<Skeleton key={index} className="w-auto h-36 animate-pulse" />
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return data.map((printer: InferResultType<"printers", { printJobs: true }>) => {
|
|
return <PrinterCard key={printer.id} printer={printer} user={user} />;
|
|
});
|
|
}
|
|
|
|
================
|
|
File: src/components/header/index.tsx
|
|
================
|
|
import { HeaderNavigation } from "@/components/header/navigation";
|
|
import { LoginButton } from "@/components/login-button";
|
|
import { LogoutButton } from "@/components/logout-button";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole, hasRole } from "@/server/auth/permissions";
|
|
import { StickerIcon, UserIcon, WrenchIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { If, Then } from "react-if";
|
|
|
|
function getInitials(name: string | undefined) {
|
|
if (!name) return "";
|
|
|
|
const parts = name.split(" ");
|
|
if (parts.length === 1) return parts[0].slice(0, 2);
|
|
|
|
return parts[0].charAt(0) + parts[parts.length - 1].charAt(0);
|
|
}
|
|
|
|
export async function Header() {
|
|
const { user } = await validateRequest();
|
|
|
|
return (
|
|
<header className="h-16 bg-neutral-900 border-b-4 border-neutral-600 text-white select-none shadow-md">
|
|
<div className="px-8 h-full max-w-screen-2xl w-full mx-auto flex items-center justify-between">
|
|
<div className="flex flex-row items-center gap-8">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<StickerIcon size={20} />
|
|
<h1 className="text-lg font-mono">MYP</h1>
|
|
</Link>
|
|
<HeaderNavigation />
|
|
</div>
|
|
|
|
{user != null && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar>
|
|
<AvatarFallback className="bg-neutral-700">
|
|
<span className="font-semibold">{getInitials(user?.displayName)}</span>
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Mein Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/my/profile/" className="flex items-center gap-2">
|
|
<UserIcon className="w-4 h-4" />
|
|
<span>Mein Profil</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
|
|
<If condition={hasRole(user, UserRole.ADMIN)}>
|
|
<Then>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/admin/" className="flex items-center gap-2">
|
|
<WrenchIcon className="w-4 h-4" />
|
|
<span>Adminbereich</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</Then>
|
|
</If>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogoutButton />
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
{user == null && <LoginButton />}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/header/navigation.tsx
|
|
================
|
|
"use client";
|
|
import { cn } from "@/utils/styles";
|
|
import { ContactRoundIcon, LayersIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
interface Site {
|
|
name: string;
|
|
icon: JSX.Element;
|
|
path: string;
|
|
}
|
|
|
|
export function HeaderNavigation() {
|
|
const pathname = usePathname();
|
|
const sites: Site[] = [
|
|
{
|
|
name: "Dashboard",
|
|
icon: <LayersIcon className="w-4 h-4" />,
|
|
path: "/",
|
|
},
|
|
/* {
|
|
name: "Meine Druckaufträge",
|
|
path: "/my/jobs",
|
|
}, */
|
|
{
|
|
name: "Mein Profil",
|
|
icon: <ContactRoundIcon className="w-4 h-4" />,
|
|
path: "/my/profile",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<nav className="font-medium text-sm flex items-center gap-4 flex-row">
|
|
{sites.map((site) => (
|
|
<Link
|
|
key={site.path}
|
|
href={site.path}
|
|
className={cn("transition-colors hover:text-neutral-50 flex items-center gap-x-1", {
|
|
"text-primary-foreground font-semibold": pathname === site.path,
|
|
"text-neutral-500": pathname !== site.path,
|
|
})}
|
|
>
|
|
{site.icon}
|
|
<span>{site.name}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/login-button.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { ScanFaceIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
export function LoginButton() {
|
|
const { toast } = useToast();
|
|
const [isLocked, setLocked] = useState(false);
|
|
function onClick() {
|
|
if (!isLocked) {
|
|
toast({
|
|
description: "Du wirst angemeldet...",
|
|
});
|
|
|
|
// Prevent multiple clicks because of login delay...
|
|
setLocked(true);
|
|
setTimeout(() => {
|
|
setLocked(false);
|
|
}, 1000 * 5);
|
|
}
|
|
toast({
|
|
description: "Bitte warte einen Moment...",
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Button onClick={onClick} variant={"ghost"} className="gap-2 flex items-center" asChild disabled={isLocked}>
|
|
<Link href="/auth/login">
|
|
<ScanFaceIcon className="w-4 h-4" />
|
|
<span>Anmelden</span>
|
|
</Link>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/logout-button.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { logout } from "@/server/actions/authentication/logout";
|
|
import { LogOutIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export function LogoutButton() {
|
|
const { toast } = useToast();
|
|
function onClick() {
|
|
toast({
|
|
description: "Du wirst nun abgemeldet...",
|
|
});
|
|
logout();
|
|
}
|
|
|
|
return (
|
|
<Link href="/" onClick={onClick} className="flex items-center gap-2">
|
|
<LogOutIcon className="w-4 h-4" />
|
|
<span>Abmelden</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/personalized-cards.tsx
|
|
================
|
|
import { DataCard } from "@/components/data-card";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { db } from "@/server/db";
|
|
import { eq } from "drizzle-orm";
|
|
|
|
export default async function PersonalizedCards() {
|
|
const { user } = await validateRequest();
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
const allPrintJobs = await db.query.printJobs.findMany({
|
|
with: {
|
|
printer: true,
|
|
},
|
|
where: (printJobs) => eq(printJobs.userId, user.id),
|
|
});
|
|
|
|
const totalPrintingMinutes = allPrintJobs
|
|
.filter((job) => !job.aborted)
|
|
.reduce((acc, curr) => acc + curr.durationInMinutes, 0);
|
|
const averagePrintingHoursPerWeek = totalPrintingMinutes / 60 / 52;
|
|
|
|
const mostUsedPrinters = {printer:{name:'-'}}; /*allPrintJobs
|
|
.map((job) => job.printer.name)
|
|
.reduce((acc, curr) => {
|
|
acc[curr] = (acc[curr] || 0) + 1;
|
|
return acc;
|
|
}, {});*/
|
|
|
|
const mostUsedPrinter = 0; /*Object.keys(mostUsedPrinters).reduce((a, b) =>
|
|
mostUsedPrinters[a] > mostUsedPrinters[b] ? a : b,
|
|
);*/
|
|
|
|
const printerSuccessRate = (allPrintJobs.filter((job) => job.aborted).length / allPrintJobs.length) * 100;
|
|
|
|
const mostUsedWeekday = {printer:{name:'-'}}; /*allPrintJobs
|
|
.map((job) => job.startAt.getDay())
|
|
.reduce((acc, curr) => {
|
|
acc[curr] = (acc[curr] || 0) + 1;
|
|
return acc;
|
|
}, {});*/
|
|
|
|
const mostUsedWeekdayIndex = ""; /*Object.keys(mostUsedWeekday).reduce((a, b) =>
|
|
mostUsedWeekday[a] > mostUsedWeekday[b] ? a : b,
|
|
);*/
|
|
|
|
const mostUsedWeekdayName = new Intl.DateTimeFormat("de-DE", {
|
|
weekday: "long",
|
|
}).format(new Date(0, 0, Number.parseInt(mostUsedWeekdayIndex)));
|
|
|
|
return (
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<DataCard
|
|
icon="Clock10"
|
|
title="Druckstunden"
|
|
description="insgesamt"
|
|
value={`${(totalPrintingMinutes / 60).toFixed(2)}h`}
|
|
/>
|
|
<DataCard
|
|
icon="Calendar"
|
|
title="Aktivster Tag"
|
|
description="(nach Anzahl der Aufträgen)"
|
|
value={mostUsedWeekdayName}
|
|
/>
|
|
<DataCard icon="Heart" title="Lieblingsdrucker" description="" value={mostUsedPrinter} />
|
|
<DataCard icon="Check" title="Druckerfolgsquote" description="" value={`${printerSuccessRate.toFixed(2)}%`} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/printer-availability-badge.tsx
|
|
================
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { PrinterStatus, translatePrinterStatus } from "@/utils/printers";
|
|
import { cn } from "@/utils/styles";
|
|
|
|
interface PrinterAvailabilityBadgeProps {
|
|
status: PrinterStatus;
|
|
}
|
|
|
|
export function PrinterAvailabilityBadge(props: PrinterAvailabilityBadgeProps) {
|
|
const { status } = props;
|
|
|
|
return (
|
|
<Badge
|
|
className={cn("pointer-events-none select-none", {
|
|
"bg-green-500 hover:bg-green-500 animate-pulse":
|
|
status === PrinterStatus.IDLE,
|
|
"bg-red-500 hover:bg-red-500 opacity-50":
|
|
status === PrinterStatus.OUT_OF_ORDER,
|
|
"bg-orange-500 hover:bg-orange-500": status === PrinterStatus.RESERVED,
|
|
})}
|
|
>
|
|
{translatePrinterStatus(status)}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/printer-card/countdown.tsx
|
|
================
|
|
"use client";
|
|
import { revalidate } from "@/server/actions/timer";
|
|
import { fetcher } from "@/utils/fetch";
|
|
import useSWR from "swr";
|
|
|
|
interface CountdownProps {
|
|
jobId: string;
|
|
}
|
|
export function Countdown(props: CountdownProps) {
|
|
const { jobId } = props;
|
|
const { data, error, isLoading } = useSWR(`/api/job/${jobId}/remaining-time`, fetcher, {
|
|
refreshInterval: 1000 * 30,
|
|
});
|
|
|
|
if (error) {
|
|
return <span className="text-red-500">Ein Fehler ist aufgetreten.</span>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <>...</>;
|
|
}
|
|
|
|
const days = Math.floor(data.remainingTime / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((data.remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((data.remainingTime % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((data.remainingTime % (1000 * 60)) / 1000);
|
|
|
|
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
|
|
revalidate();
|
|
}
|
|
|
|
return (
|
|
<span className="tabular-nums" suppressHydrationWarning>
|
|
{days > 0 && <>{`${days}`.padStart(2, "0")}d </>}
|
|
{hours === 0 && minutes === 0 ? (
|
|
<>{`${seconds}`.padStart(2, "0")}s</>
|
|
) : (
|
|
<>
|
|
{`${hours}`.padStart(2, "0")}h {`${minutes}`.padStart(2, "0")}min
|
|
</>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/printer-card/index.tsx
|
|
================
|
|
"use client";
|
|
|
|
import { PrinterReserveForm } from "@/app/printer/[printerId]/reserve/form";
|
|
import { Countdown } from "@/components/printer-card/countdown";
|
|
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { UserRole, hasRole } from "@/server/auth/permissions";
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
import { PrinterStatus, derivePrinterStatus, translatePrinterStatus } from "@/utils/printers";
|
|
import { cn } from "@/utils/styles";
|
|
import type { RegisteredDatabaseUserAttributes } from "lucia";
|
|
import { CalendarPlusIcon, ChevronRightIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Else, If, Then } from "react-if";
|
|
|
|
interface PrinterCardProps {
|
|
printer: InferResultType<"printers", { printJobs: true }>;
|
|
user?: RegisteredDatabaseUserAttributes | null;
|
|
}
|
|
|
|
export function PrinterCard(props: PrinterCardProps) {
|
|
const { printer, user } = props;
|
|
const status = derivePrinterStatus(printer);
|
|
|
|
const userIsLoggedIn = Boolean(user);
|
|
|
|
return (
|
|
<Card
|
|
className={cn("w-auto h-36", {
|
|
"opacity-50 select-none cursor-not-allowed": status === PrinterStatus.OUT_OF_ORDER,
|
|
})}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex flex-row items-start justify-between">
|
|
<div>
|
|
<CardTitle>{printer.name}</CardTitle>
|
|
<CardDescription>{printer.description}</CardDescription>
|
|
</div>
|
|
<Badge
|
|
className={cn({
|
|
"bg-green-500 hover:bg-green-400": status === PrinterStatus.IDLE,
|
|
"bg-red-500 hover:bg-red-500": status === PrinterStatus.OUT_OF_ORDER,
|
|
"bg-yellow-500 hover:bg-yellow-400": status === PrinterStatus.RESERVED,
|
|
})}
|
|
>
|
|
{status === PrinterStatus.RESERVED && <Countdown jobId={printer.printJobs[0].id} />}
|
|
<If condition={status === PrinterStatus.RESERVED}>
|
|
<Else>{translatePrinterStatus(status)}</Else>
|
|
</If>
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-end">
|
|
<If condition={status === PrinterStatus.IDLE && userIsLoggedIn && !hasRole(user, UserRole.GUEST)}>
|
|
<Then>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant={"default"} className="flex items-center gap-2 w-full">
|
|
<CalendarPlusIcon className="w-4 h-4" />
|
|
<span>Reservieren</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<AlertDialogHeader>
|
|
<DialogTitle>{printer.name} reservieren</DialogTitle>
|
|
<DialogDescription>Gebe die geschätzte Druckdauer an.</DialogDescription>
|
|
</AlertDialogHeader>
|
|
<PrinterReserveForm isDialog={true} printerId={printer.id} userId={user?.id ?? ""} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Then>
|
|
</If>
|
|
{status === PrinterStatus.RESERVED && (
|
|
<Button asChild variant={"secondary"}>
|
|
<Link href={`/job/${printer.printJobs[0].id}`} className="flex items-center gap-2 w-full">
|
|
<ChevronRightIcon className="w-4 h-4" />
|
|
<span>Details anzeigen</span>
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/alert-dialog.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
import { buttonVariants } from "@/components/ui/button"
|
|
|
|
const AlertDialog = AlertDialogPrimitive.Root
|
|
|
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
|
|
|
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
|
|
|
const AlertDialogOverlay = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPrimitive.Overlay
|
|
className={cn(
|
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
className
|
|
)}
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
))
|
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
|
|
|
|
const AlertDialogContent = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPortal>
|
|
<AlertDialogOverlay />
|
|
<AlertDialogPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
</AlertDialogPortal>
|
|
))
|
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
|
|
|
|
const AlertDialogHeader = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col space-y-2 text-center sm:text-left",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
AlertDialogHeader.displayName = "AlertDialogHeader"
|
|
|
|
const AlertDialogFooter = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
AlertDialogFooter.displayName = "AlertDialogFooter"
|
|
|
|
const AlertDialogTitle = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPrimitive.Title
|
|
ref={ref}
|
|
className={cn("text-lg font-semibold", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
|
|
|
|
const AlertDialogDescription = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPrimitive.Description
|
|
ref={ref}
|
|
className={cn("text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertDialogDescription.displayName =
|
|
AlertDialogPrimitive.Description.displayName
|
|
|
|
const AlertDialogAction = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPrimitive.Action
|
|
ref={ref}
|
|
className={cn(buttonVariants(), className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
|
|
|
|
const AlertDialogCancel = React.forwardRef<
|
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
|
>(({ className, ...props }, ref) => (
|
|
<AlertDialogPrimitive.Cancel
|
|
ref={ref}
|
|
className={cn(
|
|
buttonVariants({ variant: "outline" }),
|
|
"mt-2 sm:mt-0",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
|
|
|
|
export {
|
|
AlertDialog,
|
|
AlertDialogPortal,
|
|
AlertDialogOverlay,
|
|
AlertDialogTrigger,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogFooter,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/alert.tsx
|
|
================
|
|
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const alertVariants = cva(
|
|
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "bg-background text-foreground",
|
|
destructive:
|
|
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
const Alert = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
|
>(({ className, variant, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
role="alert"
|
|
className={cn(alertVariants({ variant }), className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
Alert.displayName = "Alert"
|
|
|
|
const AlertTitle = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<h5
|
|
ref={ref}
|
|
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertTitle.displayName = "AlertTitle"
|
|
|
|
const AlertDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AlertDescription.displayName = "AlertDescription"
|
|
|
|
export { Alert, AlertTitle, AlertDescription }
|
|
|
|
================
|
|
File: src/components/ui/avatar.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Avatar = React.forwardRef<
|
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
|
>(({ className, ...props }, ref) => (
|
|
<AvatarPrimitive.Root
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
Avatar.displayName = AvatarPrimitive.Root.displayName
|
|
|
|
const AvatarImage = React.forwardRef<
|
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
|
>(({ className, ...props }, ref) => (
|
|
<AvatarPrimitive.Image
|
|
ref={ref}
|
|
className={cn("aspect-square h-full w-full", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
|
|
|
const AvatarFallback = React.forwardRef<
|
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
|
>(({ className, ...props }, ref) => (
|
|
<AvatarPrimitive.Fallback
|
|
ref={ref}
|
|
className={cn(
|
|
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
|
|
|
export { Avatar, AvatarImage, AvatarFallback }
|
|
|
|
================
|
|
File: src/components/ui/badge.tsx
|
|
================
|
|
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const badgeVariants = cva(
|
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
|
secondary:
|
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
destructive:
|
|
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
|
outline: "text-foreground",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
export interface BadgeProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof badgeVariants> {}
|
|
|
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
return (
|
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
|
)
|
|
}
|
|
|
|
export { Badge, badgeVariants }
|
|
|
|
================
|
|
File: src/components/ui/breadcrumb.tsx
|
|
================
|
|
import * as React from "react"
|
|
import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Breadcrumb = React.forwardRef<
|
|
HTMLElement,
|
|
React.ComponentPropsWithoutRef<"nav"> & {
|
|
separator?: React.ReactNode
|
|
}
|
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
|
|
Breadcrumb.displayName = "Breadcrumb"
|
|
|
|
const BreadcrumbList = React.forwardRef<
|
|
HTMLOListElement,
|
|
React.ComponentPropsWithoutRef<"ol">
|
|
>(({ className, ...props }, ref) => (
|
|
<ol
|
|
ref={ref}
|
|
className={cn(
|
|
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbList.displayName = "BreadcrumbList"
|
|
|
|
const BreadcrumbItem = React.forwardRef<
|
|
HTMLLIElement,
|
|
React.ComponentPropsWithoutRef<"li">
|
|
>(({ className, ...props }, ref) => (
|
|
<li
|
|
ref={ref}
|
|
className={cn("inline-flex items-center gap-1.5", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbItem.displayName = "BreadcrumbItem"
|
|
|
|
const BreadcrumbLink = React.forwardRef<
|
|
HTMLAnchorElement,
|
|
React.ComponentPropsWithoutRef<"a"> & {
|
|
asChild?: boolean
|
|
}
|
|
>(({ asChild, className, ...props }, ref) => {
|
|
const Comp = asChild ? Slot : "a"
|
|
|
|
return (
|
|
<Comp
|
|
ref={ref}
|
|
className={cn("transition-colors hover:text-foreground", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
BreadcrumbLink.displayName = "BreadcrumbLink"
|
|
|
|
const BreadcrumbPage = React.forwardRef<
|
|
HTMLSpanElement,
|
|
React.ComponentPropsWithoutRef<"span">
|
|
>(({ className, ...props }, ref) => (
|
|
<span
|
|
ref={ref}
|
|
role="link"
|
|
aria-disabled="true"
|
|
aria-current="page"
|
|
className={cn("font-normal text-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbPage.displayName = "BreadcrumbPage"
|
|
|
|
const BreadcrumbSeparator = ({
|
|
children,
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"li">) => (
|
|
<li
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
className={cn("[&>svg]:size-3.5", className)}
|
|
{...props}
|
|
>
|
|
{children ?? <ChevronRightIcon />}
|
|
</li>
|
|
)
|
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
|
|
|
|
const BreadcrumbEllipsis = ({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"span">) => (
|
|
<span
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
|
{...props}
|
|
>
|
|
<DotsHorizontalIcon className="h-4 w-4" />
|
|
<span className="sr-only">More</span>
|
|
</span>
|
|
)
|
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
|
|
|
|
export {
|
|
Breadcrumb,
|
|
BreadcrumbList,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
BreadcrumbEllipsis,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/button.tsx
|
|
================
|
|
import * as React from "react"
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
|
destructive:
|
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
|
outline:
|
|
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
secondary:
|
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
link: "text-primary underline-offset-4 hover:underline",
|
|
},
|
|
size: {
|
|
default: "h-9 px-4 py-2",
|
|
sm: "h-8 rounded-md px-3 text-xs",
|
|
lg: "h-10 rounded-md px-8",
|
|
icon: "h-9 w-9",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
export interface ButtonProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
VariantProps<typeof buttonVariants> {
|
|
asChild?: boolean
|
|
}
|
|
|
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
const Comp = asChild ? Slot : "button"
|
|
return (
|
|
<Comp
|
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
Button.displayName = "Button"
|
|
|
|
export { Button, buttonVariants }
|
|
|
|
================
|
|
File: src/components/ui/card.tsx
|
|
================
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Card = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"rounded-xl border bg-card text-card-foreground shadow",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
Card.displayName = "Card"
|
|
|
|
const CardHeader = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardHeader.displayName = "CardHeader"
|
|
|
|
const CardTitle = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<h3
|
|
ref={ref}
|
|
className={cn("font-semibold leading-none tracking-tight", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardTitle.displayName = "CardTitle"
|
|
|
|
const CardDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<p
|
|
ref={ref}
|
|
className={cn("text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardDescription.displayName = "CardDescription"
|
|
|
|
const CardContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
|
))
|
|
CardContent.displayName = "CardContent"
|
|
|
|
const CardFooter = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("flex items-center p-6 pt-0", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardFooter.displayName = "CardFooter"
|
|
|
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
|
|
|
================
|
|
File: src/components/ui/chart.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as RechartsPrimitive from "recharts"
|
|
import {
|
|
NameType,
|
|
Payload,
|
|
ValueType,
|
|
} from "recharts/types/component/DefaultTooltipContent"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
|
const THEMES = { light: "", dark: ".dark" } as const
|
|
|
|
export type ChartConfig = {
|
|
[k in 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
|
|
}
|
|
|
|
const ChartContainer = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<"div"> & {
|
|
config: ChartConfig
|
|
children: React.ComponentProps<
|
|
typeof RechartsPrimitive.ResponsiveContainer
|
|
>["children"]
|
|
}
|
|
>(({ id, className, children, config, ...props }, ref) => {
|
|
const uniqueId = React.useId()
|
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
|
|
|
return (
|
|
<ChartContext.Provider value={{ config }}>
|
|
<div
|
|
data-chart={chartId}
|
|
ref={ref}
|
|
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-none [&_.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[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ChartStyle id={chartId} config={config} />
|
|
<RechartsPrimitive.ResponsiveContainer>
|
|
{children}
|
|
</RechartsPrimitive.ResponsiveContainer>
|
|
</div>
|
|
</ChartContext.Provider>
|
|
)
|
|
})
|
|
ChartContainer.displayName = "Chart"
|
|
|
|
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
|
|
|
|
const ChartTooltipContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
|
React.ComponentProps<"div"> & {
|
|
hideLabel?: boolean
|
|
hideIndicator?: boolean
|
|
indicator?: "line" | "dot" | "dashed"
|
|
nameKey?: string
|
|
labelKey?: string
|
|
}
|
|
>(
|
|
(
|
|
{
|
|
active,
|
|
payload,
|
|
className,
|
|
indicator = "dot",
|
|
hideLabel = false,
|
|
hideIndicator = false,
|
|
label,
|
|
labelFormatter,
|
|
labelClassName,
|
|
formatter,
|
|
color,
|
|
nameKey,
|
|
labelKey,
|
|
},
|
|
ref
|
|
) => {
|
|
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 as keyof typeof config]?.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
|
|
ref={ref}
|
|
className={cn(
|
|
"grid min-w-[8rem] items-start gap-1.5 rounded-lg 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.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={item.dataKey}
|
|
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 && (
|
|
<span className="font-mono font-medium tabular-nums text-foreground">
|
|
{item.value.toLocaleString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
ChartTooltipContent.displayName = "ChartTooltip"
|
|
|
|
const ChartLegend = RechartsPrimitive.Legend
|
|
|
|
const ChartLegendContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<"div"> &
|
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
|
hideIcon?: boolean
|
|
nameKey?: string
|
|
}
|
|
>(
|
|
(
|
|
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
|
ref
|
|
) => {
|
|
const { config } = useChart()
|
|
|
|
if (!payload?.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"flex items-center justify-center gap-4",
|
|
verticalAlign === "top" ? "pb-3" : "pt-3",
|
|
className
|
|
)}
|
|
>
|
|
{payload.map((item) => {
|
|
const key = `${nameKey || item.dataKey || "value"}`
|
|
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
|
|
|
return (
|
|
<div
|
|
key={item.value}
|
|
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>
|
|
)
|
|
}
|
|
)
|
|
ChartLegendContent.displayName = "ChartLegend"
|
|
|
|
// Helper to extract item config from a payload.
|
|
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 as keyof typeof config]
|
|
}
|
|
|
|
export {
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
ChartStyle,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/dialog.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|
import { Cross2Icon } from "@radix-ui/react-icons"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Dialog = DialogPrimitive.Root
|
|
|
|
const DialogTrigger = DialogPrimitive.Trigger
|
|
|
|
const DialogPortal = DialogPrimitive.Portal
|
|
|
|
const DialogClose = DialogPrimitive.Close
|
|
|
|
const DialogOverlay = React.forwardRef<
|
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
|
>(({ className, ...props }, ref) => (
|
|
<DialogPrimitive.Overlay
|
|
ref={ref}
|
|
className={cn(
|
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
|
|
|
const DialogContent = React.forwardRef<
|
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<DialogPortal>
|
|
<DialogOverlay />
|
|
<DialogPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
|
<Cross2Icon className="h-4 w-4" />
|
|
<span className="sr-only">Close</span>
|
|
</DialogPrimitive.Close>
|
|
</DialogPrimitive.Content>
|
|
</DialogPortal>
|
|
))
|
|
DialogContent.displayName = DialogPrimitive.Content.displayName
|
|
|
|
const DialogHeader = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
DialogHeader.displayName = "DialogHeader"
|
|
|
|
const DialogFooter = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
DialogFooter.displayName = "DialogFooter"
|
|
|
|
const DialogTitle = React.forwardRef<
|
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
|
>(({ className, ...props }, ref) => (
|
|
<DialogPrimitive.Title
|
|
ref={ref}
|
|
className={cn(
|
|
"text-lg font-semibold leading-none tracking-tight",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
|
|
|
const DialogDescription = React.forwardRef<
|
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
|
>(({ className, ...props }, ref) => (
|
|
<DialogPrimitive.Description
|
|
ref={ref}
|
|
className={cn("text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
|
|
|
export {
|
|
Dialog,
|
|
DialogPortal,
|
|
DialogOverlay,
|
|
DialogTrigger,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogFooter,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/dropdown-menu.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
|
import {
|
|
CheckIcon,
|
|
ChevronRightIcon,
|
|
DotFilledIcon,
|
|
} from "@radix-ui/react-icons"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const DropdownMenu = DropdownMenuPrimitive.Root
|
|
|
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
|
|
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
|
|
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
|
|
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
|
|
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
|
|
|
const DropdownMenuSubTrigger = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
inset?: boolean
|
|
}
|
|
>(({ className, inset, children, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.SubTrigger
|
|
ref={ref}
|
|
className={cn(
|
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
|
inset && "pl-8",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
|
</DropdownMenuPrimitive.SubTrigger>
|
|
))
|
|
DropdownMenuSubTrigger.displayName =
|
|
DropdownMenuPrimitive.SubTrigger.displayName
|
|
|
|
const DropdownMenuSubContent = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
|
>(({ className, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.SubContent
|
|
ref={ref}
|
|
className={cn(
|
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DropdownMenuSubContent.displayName =
|
|
DropdownMenuPrimitive.SubContent.displayName
|
|
|
|
const DropdownMenuContent = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Portal>
|
|
<DropdownMenuPrimitive.Content
|
|
ref={ref}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
</DropdownMenuPrimitive.Portal>
|
|
))
|
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
|
|
|
const DropdownMenuItem = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
inset?: boolean
|
|
}
|
|
>(({ className, inset, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Item
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
inset && "pl-8",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
|
|
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
|
>(({ className, children, checked, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.CheckboxItem
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
className
|
|
)}
|
|
checked={checked}
|
|
{...props}
|
|
>
|
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
<DropdownMenuPrimitive.ItemIndicator>
|
|
<CheckIcon className="h-4 w-4" />
|
|
</DropdownMenuPrimitive.ItemIndicator>
|
|
</span>
|
|
{children}
|
|
</DropdownMenuPrimitive.CheckboxItem>
|
|
))
|
|
DropdownMenuCheckboxItem.displayName =
|
|
DropdownMenuPrimitive.CheckboxItem.displayName
|
|
|
|
const DropdownMenuRadioItem = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.RadioItem
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
<DropdownMenuPrimitive.ItemIndicator>
|
|
<DotFilledIcon className="h-4 w-4 fill-current" />
|
|
</DropdownMenuPrimitive.ItemIndicator>
|
|
</span>
|
|
{children}
|
|
</DropdownMenuPrimitive.RadioItem>
|
|
))
|
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
|
|
|
const DropdownMenuLabel = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
|
inset?: boolean
|
|
}
|
|
>(({ className, inset, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Label
|
|
ref={ref}
|
|
className={cn(
|
|
"px-2 py-1.5 text-sm font-semibold",
|
|
inset && "pl-8",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
|
|
|
const DropdownMenuSeparator = React.forwardRef<
|
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
>(({ className, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Separator
|
|
ref={ref}
|
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
|
|
|
const DropdownMenuShortcut = ({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
|
return (
|
|
<span
|
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
|
|
|
export {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuGroup,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuRadioGroup,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/form.tsx
|
|
================
|
|
import * as React from "react"
|
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
import {
|
|
Controller,
|
|
ControllerProps,
|
|
FieldPath,
|
|
FieldValues,
|
|
FormProvider,
|
|
useFormContext,
|
|
} from "react-hook-form"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
import { Label } from "@/components/ui/label"
|
|
|
|
const Form = FormProvider
|
|
|
|
type FormFieldContextValue<
|
|
TFieldValues extends FieldValues = FieldValues,
|
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
|
> = {
|
|
name: TName
|
|
}
|
|
|
|
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
|
{} as FormFieldContextValue
|
|
)
|
|
|
|
const FormField = <
|
|
TFieldValues extends FieldValues = FieldValues,
|
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
|
>({
|
|
...props
|
|
}: ControllerProps<TFieldValues, TName>) => {
|
|
return (
|
|
<FormFieldContext.Provider value={{ name: props.name }}>
|
|
<Controller {...props} />
|
|
</FormFieldContext.Provider>
|
|
)
|
|
}
|
|
|
|
const useFormField = () => {
|
|
const fieldContext = React.useContext(FormFieldContext)
|
|
const itemContext = React.useContext(FormItemContext)
|
|
const { getFieldState, formState } = useFormContext()
|
|
|
|
const fieldState = getFieldState(fieldContext.name, formState)
|
|
|
|
if (!fieldContext) {
|
|
throw new Error("useFormField should be used within <FormField>")
|
|
}
|
|
|
|
const { id } = itemContext
|
|
|
|
return {
|
|
id,
|
|
name: fieldContext.name,
|
|
formItemId: `${id}-form-item`,
|
|
formDescriptionId: `${id}-form-item-description`,
|
|
formMessageId: `${id}-form-item-message`,
|
|
...fieldState,
|
|
}
|
|
}
|
|
|
|
type FormItemContextValue = {
|
|
id: string
|
|
}
|
|
|
|
const FormItemContext = React.createContext<FormItemContextValue>(
|
|
{} as FormItemContextValue
|
|
)
|
|
|
|
const FormItem = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => {
|
|
const id = React.useId()
|
|
|
|
return (
|
|
<FormItemContext.Provider value={{ id }}>
|
|
<div ref={ref} className={cn("space-y-2", className)} {...props} />
|
|
</FormItemContext.Provider>
|
|
)
|
|
})
|
|
FormItem.displayName = "FormItem"
|
|
|
|
const FormLabel = React.forwardRef<
|
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
|
>(({ className, ...props }, ref) => {
|
|
const { error, formItemId } = useFormField()
|
|
|
|
return (
|
|
<Label
|
|
ref={ref}
|
|
className={cn(error && "text-destructive", className)}
|
|
htmlFor={formItemId}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
FormLabel.displayName = "FormLabel"
|
|
|
|
const FormControl = React.forwardRef<
|
|
React.ElementRef<typeof Slot>,
|
|
React.ComponentPropsWithoutRef<typeof Slot>
|
|
>(({ ...props }, ref) => {
|
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
|
|
|
return (
|
|
<Slot
|
|
ref={ref}
|
|
id={formItemId}
|
|
aria-describedby={
|
|
!error
|
|
? `${formDescriptionId}`
|
|
: `${formDescriptionId} ${formMessageId}`
|
|
}
|
|
aria-invalid={!!error}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
FormControl.displayName = "FormControl"
|
|
|
|
const FormDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => {
|
|
const { formDescriptionId } = useFormField()
|
|
|
|
return (
|
|
<p
|
|
ref={ref}
|
|
id={formDescriptionId}
|
|
className={cn("text-[0.8rem] text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
FormDescription.displayName = "FormDescription"
|
|
|
|
const FormMessage = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, children, ...props }, ref) => {
|
|
const { error, formMessageId } = useFormField()
|
|
const body = error ? String(error?.message) : children
|
|
|
|
if (!body) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<p
|
|
ref={ref}
|
|
id={formMessageId}
|
|
className={cn("text-[0.8rem] font-medium text-destructive", className)}
|
|
{...props}
|
|
>
|
|
{body}
|
|
</p>
|
|
)
|
|
})
|
|
FormMessage.displayName = "FormMessage"
|
|
|
|
export {
|
|
useFormField,
|
|
Form,
|
|
FormItem,
|
|
FormLabel,
|
|
FormControl,
|
|
FormDescription,
|
|
FormMessage,
|
|
FormField,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/hover-card.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const HoverCard = HoverCardPrimitive.Root
|
|
|
|
const HoverCardTrigger = HoverCardPrimitive.Trigger
|
|
|
|
const HoverCardContent = React.forwardRef<
|
|
React.ElementRef<typeof HoverCardPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
|
<HoverCardPrimitive.Content
|
|
ref={ref}
|
|
align={align}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
|
|
|
|
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
|
|
|
================
|
|
File: src/components/ui/input.tsx
|
|
================
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
export interface InputProps
|
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, type, ...props }, ref) => {
|
|
return (
|
|
<input
|
|
type={type}
|
|
className={cn(
|
|
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
Input.displayName = "Input"
|
|
|
|
export { Input }
|
|
|
|
================
|
|
File: src/components/ui/label.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const labelVariants = cva(
|
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
)
|
|
|
|
const Label = React.forwardRef<
|
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
|
VariantProps<typeof labelVariants>
|
|
>(({ className, ...props }, ref) => (
|
|
<LabelPrimitive.Root
|
|
ref={ref}
|
|
className={cn(labelVariants(), className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
Label.displayName = LabelPrimitive.Root.displayName
|
|
|
|
export { Label }
|
|
|
|
================
|
|
File: src/components/ui/scroll-area.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const ScrollArea = React.forwardRef<
|
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<ScrollAreaPrimitive.Root
|
|
ref={ref}
|
|
className={cn("relative overflow-hidden", className)}
|
|
{...props}
|
|
>
|
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
|
{children}
|
|
</ScrollAreaPrimitive.Viewport>
|
|
<ScrollBar />
|
|
<ScrollAreaPrimitive.Corner />
|
|
</ScrollAreaPrimitive.Root>
|
|
))
|
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
|
|
|
const ScrollBar = React.forwardRef<
|
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
>(({ className, orientation = "vertical", ...props }, ref) => (
|
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
ref={ref}
|
|
orientation={orientation}
|
|
className={cn(
|
|
"flex touch-none select-none transition-colors",
|
|
orientation === "vertical" &&
|
|
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
orientation === "horizontal" &&
|
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
))
|
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
|
|
|
export { ScrollArea, ScrollBar }
|
|
|
|
================
|
|
File: src/components/ui/select.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
CaretSortIcon,
|
|
CheckIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
} from "@radix-ui/react-icons"
|
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Select = SelectPrimitive.Root
|
|
|
|
const SelectGroup = SelectPrimitive.Group
|
|
|
|
const SelectValue = SelectPrimitive.Value
|
|
|
|
const SelectTrigger = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<SelectPrimitive.Trigger
|
|
ref={ref}
|
|
className={cn(
|
|
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<SelectPrimitive.Icon asChild>
|
|
<CaretSortIcon className="h-4 w-4 opacity-50" />
|
|
</SelectPrimitive.Icon>
|
|
</SelectPrimitive.Trigger>
|
|
))
|
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
|
|
|
const SelectScrollUpButton = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
|
>(({ className, ...props }, ref) => (
|
|
<SelectPrimitive.ScrollUpButton
|
|
ref={ref}
|
|
className={cn(
|
|
"flex cursor-default items-center justify-center py-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ChevronUpIcon />
|
|
</SelectPrimitive.ScrollUpButton>
|
|
))
|
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
|
|
|
const SelectScrollDownButton = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
|
>(({ className, ...props }, ref) => (
|
|
<SelectPrimitive.ScrollDownButton
|
|
ref={ref}
|
|
className={cn(
|
|
"flex cursor-default items-center justify-center py-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ChevronDownIcon />
|
|
</SelectPrimitive.ScrollDownButton>
|
|
))
|
|
SelectScrollDownButton.displayName =
|
|
SelectPrimitive.ScrollDownButton.displayName
|
|
|
|
const SelectContent = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
|
<SelectPrimitive.Portal>
|
|
<SelectPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
position === "popper" &&
|
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
className
|
|
)}
|
|
position={position}
|
|
{...props}
|
|
>
|
|
<SelectScrollUpButton />
|
|
<SelectPrimitive.Viewport
|
|
className={cn(
|
|
"p-1",
|
|
position === "popper" &&
|
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
)}
|
|
>
|
|
{children}
|
|
</SelectPrimitive.Viewport>
|
|
<SelectScrollDownButton />
|
|
</SelectPrimitive.Content>
|
|
</SelectPrimitive.Portal>
|
|
))
|
|
SelectContent.displayName = SelectPrimitive.Content.displayName
|
|
|
|
const SelectLabel = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
|
>(({ className, ...props }, ref) => (
|
|
<SelectPrimitive.Label
|
|
ref={ref}
|
|
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
|
|
|
const SelectItem = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<SelectPrimitive.Item
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
<SelectPrimitive.ItemIndicator>
|
|
<CheckIcon className="h-4 w-4" />
|
|
</SelectPrimitive.ItemIndicator>
|
|
</span>
|
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
</SelectPrimitive.Item>
|
|
))
|
|
SelectItem.displayName = SelectPrimitive.Item.displayName
|
|
|
|
const SelectSeparator = React.forwardRef<
|
|
React.ElementRef<typeof SelectPrimitive.Separator>,
|
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
|
>(({ className, ...props }, ref) => (
|
|
<SelectPrimitive.Separator
|
|
ref={ref}
|
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
|
|
|
export {
|
|
Select,
|
|
SelectGroup,
|
|
SelectValue,
|
|
SelectTrigger,
|
|
SelectContent,
|
|
SelectLabel,
|
|
SelectItem,
|
|
SelectSeparator,
|
|
SelectScrollUpButton,
|
|
SelectScrollDownButton,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/skeleton.tsx
|
|
================
|
|
import { cn } from "@/utils/styles"
|
|
|
|
function Skeleton({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Skeleton }
|
|
|
|
================
|
|
File: src/components/ui/sonner.tsx
|
|
================
|
|
"use client"
|
|
|
|
import { useTheme } from "next-themes"
|
|
import { Toaster as Sonner } from "sonner"
|
|
|
|
type ToasterProps = React.ComponentProps<typeof Sonner>
|
|
|
|
const Toaster = ({ ...props }: ToasterProps) => {
|
|
const { theme = "system" } = useTheme()
|
|
|
|
return (
|
|
<Sonner
|
|
theme={theme as ToasterProps["theme"]}
|
|
className="toaster group"
|
|
toastOptions={{
|
|
classNames: {
|
|
toast:
|
|
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
description: "group-[.toast]:text-muted-foreground",
|
|
actionButton:
|
|
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
cancelButton:
|
|
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
|
},
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Toaster }
|
|
|
|
================
|
|
File: src/components/ui/table.tsx
|
|
================
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Table = React.forwardRef<
|
|
HTMLTableElement,
|
|
React.HTMLAttributes<HTMLTableElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div className="relative w-full overflow-auto">
|
|
<table
|
|
ref={ref}
|
|
className={cn("w-full caption-bottom text-sm", className)}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
))
|
|
Table.displayName = "Table"
|
|
|
|
const TableHeader = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
|
))
|
|
TableHeader.displayName = "TableHeader"
|
|
|
|
const TableBody = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<tbody
|
|
ref={ref}
|
|
className={cn("[&_tr:last-child]:border-0", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableBody.displayName = "TableBody"
|
|
|
|
const TableFooter = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<tfoot
|
|
ref={ref}
|
|
className={cn(
|
|
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableFooter.displayName = "TableFooter"
|
|
|
|
const TableRow = React.forwardRef<
|
|
HTMLTableRowElement,
|
|
React.HTMLAttributes<HTMLTableRowElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<tr
|
|
ref={ref}
|
|
className={cn(
|
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableRow.displayName = "TableRow"
|
|
|
|
const TableHead = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.ThHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<th
|
|
ref={ref}
|
|
className={cn(
|
|
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHead.displayName = "TableHead"
|
|
|
|
const TableCell = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.TdHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<td
|
|
ref={ref}
|
|
className={cn(
|
|
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCell.displayName = "TableCell"
|
|
|
|
const TableCaption = React.forwardRef<
|
|
HTMLTableCaptionElement,
|
|
React.HTMLAttributes<HTMLTableCaptionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<caption
|
|
ref={ref}
|
|
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCaption.displayName = "TableCaption"
|
|
|
|
export {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableFooter,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
TableCaption,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/tabs.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const Tabs = TabsPrimitive.Root
|
|
|
|
const TabsList = React.forwardRef<
|
|
React.ElementRef<typeof TabsPrimitive.List>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.List
|
|
ref={ref}
|
|
className={cn(
|
|
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TabsList.displayName = TabsPrimitive.List.displayName
|
|
|
|
const TabsTrigger = React.forwardRef<
|
|
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.Trigger
|
|
ref={ref}
|
|
className={cn(
|
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
|
|
|
const TabsContent = React.forwardRef<
|
|
React.ElementRef<typeof TabsPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TabsContent.displayName = TabsPrimitive.Content.displayName
|
|
|
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
|
|
|
================
|
|
File: src/components/ui/textarea.tsx
|
|
================
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
export interface TextareaProps
|
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
|
|
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
({ className, ...props }, ref) => {
|
|
return (
|
|
<textarea
|
|
className={cn(
|
|
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
Textarea.displayName = "Textarea"
|
|
|
|
export { Textarea }
|
|
|
|
================
|
|
File: src/components/ui/toast.tsx
|
|
================
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Cross2Icon } from "@radix-ui/react-icons"
|
|
import * as ToastPrimitives from "@radix-ui/react-toast"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/utils/styles"
|
|
|
|
const ToastProvider = ToastPrimitives.Provider
|
|
|
|
const ToastViewport = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
|
>(({ className, ...props }, ref) => (
|
|
<ToastPrimitives.Viewport
|
|
ref={ref}
|
|
className={cn(
|
|
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
|
|
|
const toastVariants = cva(
|
|
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "border bg-background text-foreground",
|
|
destructive:
|
|
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
const Toast = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Root>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
|
VariantProps<typeof toastVariants>
|
|
>(({ className, variant, ...props }, ref) => {
|
|
return (
|
|
<ToastPrimitives.Root
|
|
ref={ref}
|
|
className={cn(toastVariants({ variant }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
Toast.displayName = ToastPrimitives.Root.displayName
|
|
|
|
const ToastAction = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Action>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
|
>(({ className, ...props }, ref) => (
|
|
<ToastPrimitives.Action
|
|
ref={ref}
|
|
className={cn(
|
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ToastAction.displayName = ToastPrimitives.Action.displayName
|
|
|
|
const ToastClose = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Close>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
|
>(({ className, ...props }, ref) => (
|
|
<ToastPrimitives.Close
|
|
ref={ref}
|
|
className={cn(
|
|
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
|
className
|
|
)}
|
|
toast-close=""
|
|
{...props}
|
|
>
|
|
<Cross2Icon className="h-4 w-4" />
|
|
</ToastPrimitives.Close>
|
|
))
|
|
ToastClose.displayName = ToastPrimitives.Close.displayName
|
|
|
|
const ToastTitle = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Title>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
|
>(({ className, ...props }, ref) => (
|
|
<ToastPrimitives.Title
|
|
ref={ref}
|
|
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
|
|
|
const ToastDescription = React.forwardRef<
|
|
React.ElementRef<typeof ToastPrimitives.Description>,
|
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
|
>(({ className, ...props }, ref) => (
|
|
<ToastPrimitives.Description
|
|
ref={ref}
|
|
className={cn("text-sm opacity-90", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
|
|
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
|
|
|
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
|
|
|
export {
|
|
type ToastProps,
|
|
type ToastActionElement,
|
|
ToastProvider,
|
|
ToastViewport,
|
|
Toast,
|
|
ToastTitle,
|
|
ToastDescription,
|
|
ToastClose,
|
|
ToastAction,
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/toaster.tsx
|
|
================
|
|
"use client"
|
|
|
|
import {
|
|
Toast,
|
|
ToastClose,
|
|
ToastDescription,
|
|
ToastProvider,
|
|
ToastTitle,
|
|
ToastViewport,
|
|
} from "@/components/ui/toast"
|
|
import { useToast } from "@/components/ui/use-toast"
|
|
|
|
export function Toaster() {
|
|
const { toasts } = useToast()
|
|
|
|
return (
|
|
<ToastProvider>
|
|
{toasts.map(function ({ id, title, description, action, ...props }) {
|
|
return (
|
|
<Toast key={id} {...props}>
|
|
<div className="grid gap-1">
|
|
{title && <ToastTitle>{title}</ToastTitle>}
|
|
{description && (
|
|
<ToastDescription>{description}</ToastDescription>
|
|
)}
|
|
</div>
|
|
{action}
|
|
<ToastClose />
|
|
</Toast>
|
|
)
|
|
})}
|
|
<ToastViewport />
|
|
</ToastProvider>
|
|
)
|
|
}
|
|
|
|
================
|
|
File: src/components/ui/use-toast.ts
|
|
================
|
|
"use client"
|
|
|
|
// Inspired by react-hot-toast library
|
|
import * as React from "react"
|
|
|
|
import type {
|
|
ToastActionElement,
|
|
ToastProps,
|
|
} from "@/components/ui/toast"
|
|
|
|
const TOAST_LIMIT = 1
|
|
const TOAST_REMOVE_DELAY = 1000000
|
|
|
|
type ToasterToast = ToastProps & {
|
|
id: string
|
|
title?: React.ReactNode
|
|
description?: React.ReactNode
|
|
action?: ToastActionElement
|
|
}
|
|
|
|
const actionTypes = {
|
|
ADD_TOAST: "ADD_TOAST",
|
|
UPDATE_TOAST: "UPDATE_TOAST",
|
|
DISMISS_TOAST: "DISMISS_TOAST",
|
|
REMOVE_TOAST: "REMOVE_TOAST",
|
|
} as const
|
|
|
|
let count = 0
|
|
|
|
function genId() {
|
|
count = (count + 1) % Number.MAX_SAFE_INTEGER
|
|
return count.toString()
|
|
}
|
|
|
|
type ActionType = typeof actionTypes
|
|
|
|
type Action =
|
|
| {
|
|
type: ActionType["ADD_TOAST"]
|
|
toast: ToasterToast
|
|
}
|
|
| {
|
|
type: ActionType["UPDATE_TOAST"]
|
|
toast: Partial<ToasterToast>
|
|
}
|
|
| {
|
|
type: ActionType["DISMISS_TOAST"]
|
|
toastId?: ToasterToast["id"]
|
|
}
|
|
| {
|
|
type: ActionType["REMOVE_TOAST"]
|
|
toastId?: ToasterToast["id"]
|
|
}
|
|
|
|
interface State {
|
|
toasts: ToasterToast[]
|
|
}
|
|
|
|
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
|
|
|
const addToRemoveQueue = (toastId: string) => {
|
|
if (toastTimeouts.has(toastId)) {
|
|
return
|
|
}
|
|
|
|
const timeout = setTimeout(() => {
|
|
toastTimeouts.delete(toastId)
|
|
dispatch({
|
|
type: "REMOVE_TOAST",
|
|
toastId: toastId,
|
|
})
|
|
}, TOAST_REMOVE_DELAY)
|
|
|
|
toastTimeouts.set(toastId, timeout)
|
|
}
|
|
|
|
export const reducer = (state: State, action: Action): State => {
|
|
switch (action.type) {
|
|
case "ADD_TOAST":
|
|
return {
|
|
...state,
|
|
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
|
}
|
|
|
|
case "UPDATE_TOAST":
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.map((t) =>
|
|
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
),
|
|
}
|
|
|
|
case "DISMISS_TOAST": {
|
|
const { toastId } = action
|
|
|
|
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
|
// but I'll keep it here for simplicity
|
|
if (toastId) {
|
|
addToRemoveQueue(toastId)
|
|
} else {
|
|
state.toasts.forEach((toast) => {
|
|
addToRemoveQueue(toast.id)
|
|
})
|
|
}
|
|
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.map((t) =>
|
|
t.id === toastId || toastId === undefined
|
|
? {
|
|
...t,
|
|
open: false,
|
|
}
|
|
: t
|
|
),
|
|
}
|
|
}
|
|
case "REMOVE_TOAST":
|
|
if (action.toastId === undefined) {
|
|
return {
|
|
...state,
|
|
toasts: [],
|
|
}
|
|
}
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
|
}
|
|
}
|
|
}
|
|
|
|
const listeners: Array<(state: State) => void> = []
|
|
|
|
let memoryState: State = { toasts: [] }
|
|
|
|
function dispatch(action: Action) {
|
|
memoryState = reducer(memoryState, action)
|
|
listeners.forEach((listener) => {
|
|
listener(memoryState)
|
|
})
|
|
}
|
|
|
|
type Toast = Omit<ToasterToast, "id">
|
|
|
|
function toast({ ...props }: Toast) {
|
|
const id = genId()
|
|
|
|
const update = (props: ToasterToast) =>
|
|
dispatch({
|
|
type: "UPDATE_TOAST",
|
|
toast: { ...props, id },
|
|
})
|
|
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
|
|
|
dispatch({
|
|
type: "ADD_TOAST",
|
|
toast: {
|
|
...props,
|
|
id,
|
|
open: true,
|
|
onOpenChange: (open) => {
|
|
if (!open) dismiss()
|
|
},
|
|
},
|
|
})
|
|
|
|
return {
|
|
id: id,
|
|
dismiss,
|
|
update,
|
|
}
|
|
}
|
|
|
|
function useToast() {
|
|
const [state, setState] = React.useState<State>(memoryState)
|
|
|
|
React.useEffect(() => {
|
|
listeners.push(setState)
|
|
return () => {
|
|
const index = listeners.indexOf(setState)
|
|
if (index > -1) {
|
|
listeners.splice(index, 1)
|
|
}
|
|
}
|
|
}, [state])
|
|
|
|
return {
|
|
...state,
|
|
toast,
|
|
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
|
}
|
|
}
|
|
|
|
export { useToast, toast }
|
|
|
|
================
|
|
File: src/server/actions/authentication/logout.ts
|
|
================
|
|
"use server";
|
|
|
|
import { lucia, validateRequest } from "@/server/auth";
|
|
import strings from "@/utils/strings";
|
|
import { revalidatePath } from "next/cache";
|
|
import { cookies } from "next/headers";
|
|
|
|
export async function logout(path?: string) {
|
|
const { session } = await validateRequest();
|
|
|
|
if (!session) {
|
|
return {
|
|
error: strings.ERROR.NO_SESSION,
|
|
};
|
|
}
|
|
|
|
try {
|
|
await lucia.invalidateSession(session.id);
|
|
} catch (error) {
|
|
return {
|
|
error: strings.ERROR.NO_SESSION,
|
|
};
|
|
}
|
|
|
|
const sessionCookie = lucia.createBlankSessionCookie();
|
|
cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
|
|
|
|
revalidatePath(path ?? "/");
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/printers.ts
|
|
================
|
|
"use server";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { printers, users } from "@/server/db/schema";
|
|
import { IS_NOT, guard } from "@/utils/guard";
|
|
import strings from "@/utils/strings";
|
|
import { type InferInsertModel, eq } from "drizzle-orm";
|
|
import { revalidatePath } from "next/cache";
|
|
|
|
export async function createPrinter(printer: InferInsertModel<typeof printers>) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
if (!printer) {
|
|
return {
|
|
error: "Druckerdaten sind erforderlich.",
|
|
};
|
|
}
|
|
|
|
try {
|
|
await db.insert(printers).values(printer);
|
|
} catch (error) {
|
|
return {
|
|
error: "Drucker konnte nicht hinzugefügt werden.",
|
|
};
|
|
}
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function updatePrinter(id: string, data: InferInsertModel<typeof printers>) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
if (!data) {
|
|
return {
|
|
error: "Druckerdaten sind erforderlich.",
|
|
};
|
|
}
|
|
|
|
try {
|
|
await db.update(printers).set(data).where(eq(printers.id, id));
|
|
} catch (error) {
|
|
return {
|
|
error: "Druckerdaten sind erforderlich.",
|
|
};
|
|
}
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function deletePrinter(id: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
try {
|
|
await db.delete(printers).where(eq(printers.id, id));
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
return {
|
|
error: error.message,
|
|
};
|
|
}
|
|
return {
|
|
error: "Ein unbekannter Fehler ist aufgetreten.",
|
|
};
|
|
}
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function getPrinters() {
|
|
return await db.query.printers.findMany({
|
|
with: {
|
|
printJobs: {
|
|
limit: 1,
|
|
orderBy: (printJobs, { desc }) => [desc(printJobs.startAt)],
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/printJobs.ts
|
|
================
|
|
"use server";
|
|
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { printJobs, users } from "@/server/db/schema";
|
|
import { IS, guard } from "@/utils/guard";
|
|
import strings from "@/utils/strings";
|
|
import { type InferInsertModel, eq } from "drizzle-orm";
|
|
import { revalidatePath } from "next/cache";
|
|
|
|
export async function createPrintJob(printJob: InferInsertModel<typeof printJobs>) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
try {
|
|
const result = await db.insert(printJobs).values(printJob).returning({
|
|
jobId: printJobs.id,
|
|
});
|
|
|
|
return result[0].jobId;
|
|
} catch (error) {
|
|
return {
|
|
error: "Druckauftrag konnte nicht hinzugefügt werden.",
|
|
};
|
|
}
|
|
}
|
|
|
|
/* async function updatePrintJob(jobId: string, printJob: InferInsertModel<typeof printJobs>) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, is, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION
|
|
}
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, is, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION
|
|
}
|
|
}
|
|
|
|
await db.update(printJobs).set(printJob).where(eq(printJobs.id, jobId));
|
|
} */
|
|
|
|
export async function abortPrintJob(jobId: string, reason: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get the print job
|
|
const printJob = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, jobId),
|
|
});
|
|
|
|
if (!printJob) {
|
|
return {
|
|
error: "Druckauftrag nicht gefunden",
|
|
};
|
|
}
|
|
|
|
// Check if the print job is already aborted or completed
|
|
if (printJob.aborted) {
|
|
return { error: "Druckauftrag wurde bereits abgebrochen" };
|
|
}
|
|
|
|
if (new Date(printJob.startAt).getTime() + printJob.durationInMinutes * 60 * 1000 < Date.now()) {
|
|
return { error: "Druckauftrag ist bereits abgeschlossen" };
|
|
}
|
|
|
|
// Check if user is the owner of the print job
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
if (printJob.userId !== dbUser!.id && dbUser!.role !== UserRole.ADMIN) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get duration in minutes since startAt
|
|
const duration = Math.floor((Date.now() - new Date(printJob.startAt).getTime()) / 1000 / 60);
|
|
|
|
await db
|
|
.update(printJobs)
|
|
.set({
|
|
aborted: true,
|
|
abortReason: reason,
|
|
durationInMinutes: duration,
|
|
comments: `${printJob.comments}\n\n---${dbUser?.username}: Druckauftrag abgebrochen`,
|
|
})
|
|
.where(eq(printJobs.id, jobId));
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function earlyFinishPrintJob(jobId: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get the print job
|
|
const printJob = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, jobId),
|
|
});
|
|
|
|
if (!printJob) {
|
|
return { error: "Druckauftrag nicht gefunden" };
|
|
}
|
|
|
|
// Check if the print job is already aborted or completed
|
|
if (printJob.aborted) {
|
|
return { error: "Druckauftrag wurde bereits abgebrochen" };
|
|
}
|
|
|
|
if (new Date(printJob.startAt).getTime() + printJob.durationInMinutes * 60 * 1000 < Date.now()) {
|
|
return { error: "Druckauftrag ist bereits abgeschlossen" };
|
|
}
|
|
|
|
// Check if user is the owner of the print job
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
if (printJob.userId !== dbUser!.id && dbUser!.role !== UserRole.ADMIN) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get duration in minutes since startAt
|
|
const duration = Math.floor((Date.now() - new Date(printJob.startAt).getTime()) / 1000 / 60);
|
|
|
|
await db
|
|
.update(printJobs)
|
|
.set({
|
|
durationInMinutes: duration,
|
|
comments: `${printJob.comments}\n\n---${dbUser?.username}: Druckauftrag vorzeitig abgeschlossen`,
|
|
})
|
|
.where(eq(printJobs.id, jobId));
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function extendPrintJob(jobId: string, minutes: number, hours: number) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get the print job
|
|
const printJob = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, jobId),
|
|
});
|
|
|
|
if (!printJob) {
|
|
return { error: "Druckauftrag nicht gefunden" };
|
|
}
|
|
|
|
// Check if the print job is already aborted or completed
|
|
if (printJob.aborted) {
|
|
return { error: "Druckauftrag wurde bereits abgebrochen" };
|
|
}
|
|
|
|
if (new Date(printJob.startAt).getTime() + printJob.durationInMinutes * 60 * 1000 < Date.now()) {
|
|
return { error: "Druckauftrag ist bereits abgeschlossen" };
|
|
}
|
|
|
|
// Check if user is the owner of the print job
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
if (printJob.userId !== dbUser!.id && dbUser!.role !== UserRole.ADMIN) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const duration = minutes + hours * 60;
|
|
|
|
await db
|
|
.update(printJobs)
|
|
.set({
|
|
durationInMinutes: printJob.durationInMinutes + duration,
|
|
comments: `${printJob.comments}\n\n---${dbUser?.username}: Verlängert um ${hours} Stunden und ${minutes} Minuten`,
|
|
})
|
|
.where(eq(printJobs.id, jobId));
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
export async function updatePrintComments(jobId: string, comments: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS, UserRole.GUEST)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
// Get the print job
|
|
const printJob = await db.query.printJobs.findFirst({
|
|
where: eq(printJobs.id, jobId),
|
|
});
|
|
|
|
if (!printJob) {
|
|
return { error: "Druckauftrag nicht gefunden" };
|
|
}
|
|
|
|
// Check if the print job is already aborted or completed
|
|
if (printJob.aborted) {
|
|
return { error: "Druckauftrag wurde bereits abgebrochen" };
|
|
}
|
|
|
|
if (new Date(printJob.startAt).getTime() + printJob.durationInMinutes * 60 * 1000 < Date.now()) {
|
|
return { error: "Druckauftrag ist bereits abgeschlossen" };
|
|
}
|
|
|
|
// Check if user is the owner of the print job
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
if (printJob.userId !== dbUser!.id && dbUser!.role !== UserRole.ADMIN) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
await db
|
|
.update(printJobs)
|
|
.set({
|
|
comments,
|
|
})
|
|
.where(eq(printJobs.id, jobId));
|
|
|
|
revalidatePath("/");
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/timer.ts
|
|
================
|
|
"use server";
|
|
|
|
import { revalidatePath } from "next/cache";
|
|
|
|
export async function revalidate() {
|
|
revalidatePath("/");
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/user/delete.ts
|
|
================
|
|
"use server";
|
|
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { users } from "@/server/db/schema";
|
|
import { IS, IS_NOT, guard } from "@/utils/guard";
|
|
import strings from "@/utils/strings";
|
|
import { eq } from "drizzle-orm";
|
|
import { revalidatePath } from "next/cache";
|
|
|
|
/**
|
|
* Deletes a user from the database
|
|
* @param userId User ID to delete
|
|
* @param path Path to revalidate
|
|
*/
|
|
export async function deleteUser(userId: string, path?: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const targetUser = await db.query.users.findFirst({
|
|
where: eq(users.id, userId),
|
|
});
|
|
|
|
if (!targetUser) {
|
|
return {
|
|
error: "Benutzer nicht gefunden",
|
|
};
|
|
}
|
|
|
|
if (guard(targetUser, IS, UserRole.ADMIN)) {
|
|
return {
|
|
error: "Admins können nicht gelöscht werden.",
|
|
};
|
|
}
|
|
|
|
await db.delete(users).where(eq(users.id, userId));
|
|
|
|
revalidatePath(path ?? "/admin/users");
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/user/update.ts
|
|
================
|
|
import type { formSchema } from "@/app/admin/users/form";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { users } from "@/server/db/schema";
|
|
import { IS_NOT, guard } from "@/utils/guard";
|
|
import strings from "@/utils/strings";
|
|
import { eq } from "drizzle-orm";
|
|
import { revalidatePath } from "next/cache";
|
|
import type { z } from "zod";
|
|
|
|
/**
|
|
* Updates a user in the database
|
|
* @param userId User ID to update
|
|
* @param data Updated user data
|
|
* @param path Path to revalidate
|
|
*/
|
|
export async function updateUser(userId: string, data: z.infer<typeof formSchema>, path?: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
await db.update(users).set(data).where(eq(users.id, userId));
|
|
|
|
revalidatePath(path ?? "/admin/users");
|
|
}
|
|
|
|
================
|
|
File: src/server/actions/users.ts
|
|
================
|
|
"use server";
|
|
|
|
import type { formSchema } from "@/app/admin/users/form";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { users } from "@/server/db/schema";
|
|
import { IS, IS_NOT, guard } from "@/utils/guard";
|
|
import strings from "@/utils/strings";
|
|
import { eq } from "drizzle-orm";
|
|
import { revalidatePath } from "next/cache";
|
|
import type { z } from "zod";
|
|
|
|
/**
|
|
* @deprecated
|
|
*/
|
|
export async function updateUser(userId: string, data: z.infer<typeof formSchema>) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
await db.update(users).set(data).where(eq(users.id, userId));
|
|
|
|
revalidatePath("/admin/users");
|
|
}
|
|
|
|
/**
|
|
* @deprecated
|
|
*/
|
|
export async function deleteUser(userId: string) {
|
|
const { user } = await validateRequest();
|
|
|
|
if (guard(user, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const dbUser = await db.query.users.findFirst({
|
|
// biome-ignore lint/style/noNonNullAssertion: guard already checks against null
|
|
where: eq(users.id, user!.id),
|
|
});
|
|
|
|
if (guard(dbUser, IS_NOT, UserRole.ADMIN)) {
|
|
return {
|
|
error: strings.ERROR.PERMISSION,
|
|
};
|
|
}
|
|
|
|
const targetUser = await db.query.users.findFirst({
|
|
where: eq(users.id, userId),
|
|
});
|
|
|
|
if (!targetUser) {
|
|
return { error: "Benutzer nicht gefunden" };
|
|
}
|
|
|
|
if (guard(targetUser, IS, UserRole.ADMIN)) {
|
|
return { error: "Kann keinen Admin löschen" };
|
|
}
|
|
|
|
await db.delete(users).where(eq(users.id, userId));
|
|
|
|
revalidatePath("/admin/users");
|
|
}
|
|
|
|
================
|
|
File: src/server/auth/index.ts
|
|
================
|
|
import type { UserRole } from "@/server/auth/permissions";
|
|
import { db } from "@/server/db";
|
|
import { sessions, users } from "@/server/db/schema";
|
|
import { DrizzleSQLiteAdapter } from "@lucia-auth/adapter-drizzle";
|
|
import { Lucia, type RegisteredDatabaseUserAttributes, type Session } from "lucia";
|
|
import { cookies } from "next/headers";
|
|
import { cache } from "react";
|
|
|
|
//@ts-ignore
|
|
const adapter = new DrizzleSQLiteAdapter(db, sessions, users);
|
|
|
|
export const lucia = new Lucia(adapter, {
|
|
sessionCookie: {
|
|
expires: false,
|
|
attributes: {
|
|
secure: process.env.NODE_ENV === "production",
|
|
},
|
|
},
|
|
getUserAttributes: (attributes) => {
|
|
return {
|
|
id: attributes.id,
|
|
username: attributes.username,
|
|
displayName: attributes.displayName,
|
|
email: attributes.email,
|
|
role: attributes.role,
|
|
};
|
|
},
|
|
});
|
|
|
|
export const validateRequest = cache(
|
|
async (): Promise<{ user: RegisteredDatabaseUserAttributes; session: Session } | { user: null; session: null }> => {
|
|
const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
|
|
if (!sessionId) {
|
|
return {
|
|
user: null,
|
|
session: null,
|
|
};
|
|
}
|
|
|
|
const result = await lucia.validateSession(sessionId);
|
|
// next.js throws when you attempt to set cookie when rendering page
|
|
try {
|
|
if (result.session?.fresh) {
|
|
const sessionCookie = lucia.createSessionCookie(result.session.id);
|
|
cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
|
|
}
|
|
if (!result.session) {
|
|
const sessionCookie = lucia.createBlankSessionCookie();
|
|
cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
|
|
}
|
|
} catch {}
|
|
|
|
return result as {
|
|
user: RegisteredDatabaseUserAttributes;
|
|
session: Session;
|
|
};
|
|
},
|
|
);
|
|
|
|
declare module "lucia" {
|
|
interface Register {
|
|
Lucia: typeof Lucia;
|
|
DatabaseUserAttributes: {
|
|
id: string;
|
|
github_id: number;
|
|
username: string;
|
|
displayName: string;
|
|
email: string;
|
|
role: UserRole;
|
|
};
|
|
}
|
|
}
|
|
|
|
================
|
|
File: src/server/auth/oauth.ts
|
|
================
|
|
import { GitHub } from "arctic";
|
|
|
|
export const github = new GitHub(process.env.OAUTH_CLIENT_ID as string, process.env.OAUTH_CLIENT_SECRET as string, {
|
|
enterpriseDomain: "https://git.i.mercedes-benz.com",
|
|
});
|
|
|
|
export interface GitHubUserResult {
|
|
id: number;
|
|
login: string;
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
================
|
|
File: src/server/auth/permissions.ts
|
|
================
|
|
import type { RegisteredDatabaseUserAttributes } from "lucia";
|
|
|
|
export enum UserRole {
|
|
ADMIN = "admin",
|
|
USER = "user",
|
|
GUEST = "guest",
|
|
}
|
|
|
|
/**
|
|
* @deprecated
|
|
*/
|
|
export function hasRole(user: RegisteredDatabaseUserAttributes | null | undefined, role: UserRole) {
|
|
return user?.role === role;
|
|
}
|
|
|
|
/**
|
|
* @deprecated
|
|
*/
|
|
export function translateUserRole(role: UserRole) {
|
|
switch (role) {
|
|
case UserRole.ADMIN:
|
|
return "Administrator";
|
|
case UserRole.USER:
|
|
return "Benutzer";
|
|
case UserRole.GUEST:
|
|
return "Gast";
|
|
}
|
|
}
|
|
|
|
================
|
|
File: src/utils/analytics/error-rate.ts
|
|
================
|
|
import type { printJobs } from "@/server/db/schema";
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
|
|
export interface PrinterErrorRate {
|
|
printerId: string;
|
|
name: string;
|
|
errorRate: number; // Error rate as a percentage (0-100)
|
|
}
|
|
|
|
/**
|
|
* Calculates the error rate for print jobs aggregated by printer as a percentage.
|
|
*
|
|
* @param pJobs - Array of print job objects.
|
|
* @returns An array of PrinterErrorRate objects, each containing the printer ID and its error rate.
|
|
*/
|
|
export function calculatePrinterErrorRate(
|
|
pJobs: InferResultType<"printJobs", { printer: true }>[],
|
|
): PrinterErrorRate[] {
|
|
if (pJobs.length === 0) {
|
|
return []; // No jobs, no data.
|
|
}
|
|
const printers = pJobs.map((job) => job.printer);
|
|
|
|
// Group jobs by printer ID
|
|
const jobsByPrinter: Record<string, InferSelectModel<typeof printJobs>[]> = pJobs.reduce(
|
|
(acc, job) => {
|
|
if (!acc[job.printerId]) {
|
|
acc[job.printerId] = [];
|
|
}
|
|
acc[job.printerId].push(job);
|
|
return acc;
|
|
},
|
|
{} as Record<string, InferSelectModel<typeof printJobs>[]>,
|
|
);
|
|
|
|
// Calculate the error rate for each printer
|
|
const printerErrorRates: PrinterErrorRate[] = Object.entries(jobsByPrinter).map(([printerId, jobs]) => {
|
|
const totalJobs = jobs.length;
|
|
const abortedJobsCount = jobs.filter((job) => job.aborted).length;
|
|
const errorRate = (abortedJobsCount / totalJobs) * 100;
|
|
|
|
const printer = printers.find((printer) => printer.id === printerId);
|
|
const printerName = printer ? printer.name : "Unbekannter Drucker";
|
|
|
|
return {
|
|
printerId,
|
|
name: printerName,
|
|
errorRate: Number.parseFloat(errorRate.toFixed(2)), // Rounded to two decimal places
|
|
};
|
|
});
|
|
|
|
return printerErrorRates;
|
|
}
|
|
|
|
================
|
|
File: src/utils/analytics/errors.ts
|
|
================
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
|
|
export interface AbortReasonCount {
|
|
abortReason: string;
|
|
count: number;
|
|
}
|
|
|
|
/**
|
|
* Calculates the count of each unique abort reason for print jobs.
|
|
*
|
|
* @param pJobs - Array of print job objects.
|
|
* @returns An array of AbortReasonCount objects, each containing the abort reason and its count.
|
|
*/
|
|
export function calculateAbortReasonsCount(pJobs: InferResultType<"printJobs">[]): AbortReasonCount[] {
|
|
if (pJobs.length === 0) {
|
|
return []; // No jobs, no data.
|
|
}
|
|
|
|
// Filter aborted jobs and count each abort reason
|
|
const abortReasonsCount = pJobs
|
|
.filter((job) => job.aborted && job.abortReason) // Consider only aborted jobs with a reason
|
|
.reduce(
|
|
(acc, job) => {
|
|
const reason = job.abortReason || "Unbekannter Grund";
|
|
if (!acc[reason]) {
|
|
acc[reason] = 0;
|
|
}
|
|
acc[reason]++;
|
|
return acc;
|
|
},
|
|
{} as Record<string, number>,
|
|
);
|
|
|
|
// Convert the result to an array of AbortReasonCount objects
|
|
return Object.entries(abortReasonsCount).map(([abortReason, count]) => ({
|
|
abortReason,
|
|
count,
|
|
}));
|
|
}
|
|
|
|
================
|
|
File: src/utils/analytics/forecast.ts
|
|
================
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
|
|
type UsagePerDay = {
|
|
day: number; // 0 (Sunday) to 6 (Saturday)
|
|
usageMinutes: number;
|
|
};
|
|
|
|
function aggregateUsageByDay(jobs: InferResultType<"printJobs">[]): {
|
|
usageData: UsagePerDay[];
|
|
earliestDate: Date;
|
|
latestDate: Date;
|
|
} {
|
|
const usagePerDayMap = new Map<number, number>();
|
|
|
|
let earliestDate: Date | null = null;
|
|
let latestDate: Date | null = null;
|
|
|
|
for (const job of jobs) {
|
|
let remainingDuration = job.durationInMinutes;
|
|
const currentStart = new Date(job.startAt);
|
|
|
|
// Update earliest and latest dates
|
|
if (!earliestDate || currentStart < earliestDate) {
|
|
earliestDate = new Date(currentStart);
|
|
}
|
|
const jobEnd = new Date(currentStart);
|
|
jobEnd.setMinutes(jobEnd.getMinutes() + job.durationInMinutes);
|
|
if (!latestDate || jobEnd > latestDate) {
|
|
latestDate = new Date(jobEnd);
|
|
}
|
|
|
|
while (remainingDuration > 0) {
|
|
const day = currentStart.getDay();
|
|
|
|
// Calculate minutes remaining in the current day
|
|
const minutesRemainingInDay = (24 - currentStart.getHours()) * 60 - currentStart.getMinutes();
|
|
const minutesToAdd = Math.min(remainingDuration, minutesRemainingInDay);
|
|
|
|
// Update the usage for the current day
|
|
const usageMinutes = usagePerDayMap.get(day) || 0;
|
|
usagePerDayMap.set(day, usageMinutes + minutesToAdd);
|
|
|
|
// Update remaining duration and move to the next day
|
|
remainingDuration -= minutesToAdd;
|
|
currentStart.setDate(currentStart.getDate() + 1);
|
|
currentStart.setHours(0, 0, 0, 0); // Start at the beginning of the next day
|
|
}
|
|
}
|
|
|
|
const usageData: UsagePerDay[] = Array.from({ length: 7 }, (_, day) => ({
|
|
day,
|
|
usageMinutes: usagePerDayMap.get(day) || 0,
|
|
}));
|
|
|
|
if (earliestDate === null) {
|
|
earliestDate = new Date();
|
|
}
|
|
|
|
if (latestDate === null) {
|
|
latestDate = new Date();
|
|
}
|
|
|
|
return { usageData, earliestDate: earliestDate, latestDate: latestDate };
|
|
}
|
|
|
|
function countWeekdays(startDate: Date, endDate: Date): number[] {
|
|
const countPerDay = Array(7).fill(0);
|
|
const currentDate = new Date(startDate);
|
|
currentDate.setHours(0, 0, 0, 0); // Ensure starting at midnight
|
|
endDate.setHours(0, 0, 0, 0); // Ensure ending at midnight
|
|
|
|
while (currentDate <= endDate) {
|
|
const day = currentDate.getDay();
|
|
countPerDay[day]++;
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
}
|
|
return countPerDay;
|
|
}
|
|
|
|
export function forecastPrinterUsage(jobs: InferResultType<"printJobs">[]): number[] {
|
|
const { usageData, earliestDate, latestDate } = aggregateUsageByDay(jobs);
|
|
|
|
// Count the number of times each weekday occurs in the data period
|
|
const weekdaysCount = countWeekdays(earliestDate, latestDate);
|
|
|
|
const forecasts: number[] = [];
|
|
for (const data of usageData) {
|
|
const dayCount = weekdaysCount[data.day];
|
|
let usagePrediction = data.usageMinutes / dayCount;
|
|
if (Number.isNaN(usagePrediction)) {
|
|
usagePrediction = 0;
|
|
}
|
|
forecasts.push(Math.round(usagePrediction));
|
|
}
|
|
|
|
return forecasts;
|
|
}
|
|
|
|
================
|
|
File: src/utils/analytics/utilization.ts
|
|
================
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
|
|
export function calculatePrinterUtilization(jobs: InferResultType<"printJobs", { printer: true }>[]) {
|
|
const printers = jobs.reduce<Record<string, string>>((acc, job) => {
|
|
acc[job.printerId] = job.printer.name;
|
|
return acc;
|
|
}, {});
|
|
|
|
const usedTimePerPrinter: Record<string, number> = jobs.reduce(
|
|
(acc, job) => {
|
|
acc[job.printer.id] = (acc[job.printer.id] || 0) + job.durationInMinutes;
|
|
|
|
return acc;
|
|
},
|
|
{} as Record<string, number>,
|
|
);
|
|
|
|
const totalTimeInMinutes = 60 * 35 * 3; // 60 Minutes * 35h * 3 Weeks
|
|
// 35h Woche, 3 mal in der Woche in TBA
|
|
|
|
const printerUtilizationPercentage = Object.keys(usedTimePerPrinter).map((printerId) => {
|
|
const usedTime = usedTimePerPrinter[printerId];
|
|
|
|
return {
|
|
printerId,
|
|
name: printers[printerId],
|
|
utilizationPercentage: usedTime / totalTimeInMinutes,
|
|
};
|
|
});
|
|
|
|
return printerUtilizationPercentage;
|
|
}
|
|
|
|
================
|
|
File: src/utils/analytics/volume.ts
|
|
================
|
|
import type { printJobs } from "@/server/db/schema";
|
|
import { endOfDay, endOfMonth, endOfWeek, startOfDay, startOfMonth, startOfWeek } from "date-fns";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
|
|
interface PrintVolumes {
|
|
today: number;
|
|
thisWeek: number;
|
|
thisMonth: number;
|
|
}
|
|
|
|
/**
|
|
* Calculates the number of print jobs for today, this week, and this month.
|
|
*
|
|
* @param printJobs - Array of print job objects.
|
|
* @returns An object with counts of print jobs for today, this week, and this month.
|
|
*/
|
|
export function calculatePrintVolumes(pJobs: InferSelectModel<typeof printJobs>[]): PrintVolumes {
|
|
const now = new Date();
|
|
|
|
// Define time ranges with week starting on Monday
|
|
const timeRanges = {
|
|
today: { start: startOfDay(now), end: endOfDay(now) },
|
|
thisWeek: {
|
|
start: startOfWeek(now, { weekStartsOn: 1 }),
|
|
end: endOfWeek(now, { weekStartsOn: 1 }),
|
|
},
|
|
thisMonth: { start: startOfMonth(now), end: endOfMonth(now) },
|
|
};
|
|
|
|
// Initialize counts
|
|
const volumes: PrintVolumes = {
|
|
today: 0,
|
|
thisWeek: 0,
|
|
thisMonth: 0,
|
|
};
|
|
|
|
// Iterate over print jobs and count based on time ranges
|
|
for (const job of pJobs) {
|
|
const jobStart = new Date(job.startAt);
|
|
if (jobStart >= timeRanges.today.start && jobStart <= timeRanges.today.end) {
|
|
volumes.today += 1;
|
|
}
|
|
if (jobStart >= timeRanges.thisWeek.start && jobStart <= timeRanges.thisWeek.end) {
|
|
volumes.thisWeek += 1;
|
|
}
|
|
if (jobStart >= timeRanges.thisMonth.start && jobStart <= timeRanges.thisMonth.end) {
|
|
volumes.thisMonth += 1;
|
|
}
|
|
}
|
|
|
|
return volumes;
|
|
}
|
|
|
|
================
|
|
File: src/utils/drizzle.ts
|
|
================
|
|
import type * as schema from "@/server/db/schema";
|
|
import type { BuildQueryResult, DBQueryConfig, ExtractTablesWithRelations } from "drizzle-orm";
|
|
|
|
type Schema = typeof schema;
|
|
type TSchema = ExtractTablesWithRelations<Schema>;
|
|
|
|
/**
|
|
* Infer the relation type of a table.
|
|
*/
|
|
export type IncludeRelation<TableName extends keyof TSchema> = DBQueryConfig<
|
|
"one" | "many",
|
|
boolean,
|
|
TSchema,
|
|
TSchema[TableName]
|
|
>["with"];
|
|
|
|
/**
|
|
* Infer the result type of a query with optional relations.
|
|
*/
|
|
export type InferResultType<
|
|
TableName extends keyof TSchema,
|
|
With extends IncludeRelation<TableName> | undefined = undefined,
|
|
> = BuildQueryResult<
|
|
TSchema,
|
|
TSchema[TableName],
|
|
{
|
|
with: With;
|
|
}
|
|
>;
|
|
|
|
================
|
|
File: src/utils/errors.ts
|
|
================
|
|
import strings from "@/utils/strings";
|
|
|
|
/**
|
|
* Base error class.
|
|
*/
|
|
class BaseError extends Error {
|
|
constructor(message?: string) {
|
|
// Pass the message to the Error constructor
|
|
super(message);
|
|
|
|
// Set the name of the error
|
|
this.name = this.constructor.name;
|
|
|
|
// Capture the stack trace
|
|
if (Error.captureStackTrace) {
|
|
Error.captureStackTrace(this, this.constructor);
|
|
} else {
|
|
this.stack = new Error(message).stack;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Permission error class.
|
|
*/
|
|
export class PermissionError extends BaseError {
|
|
constructor() {
|
|
super(strings.ERROR.PERMISSION);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Authentication error class.
|
|
*/
|
|
export class AuthenticationError extends BaseError {
|
|
constructor() {
|
|
super(strings.ERROR.NO_SESSION);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Validation error class.
|
|
*/
|
|
export class ValidationError extends BaseError {
|
|
constructor() {
|
|
super(strings.ERROR.VALIDATION);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Not found error class.
|
|
*/
|
|
export class NotFoundError extends BaseError {
|
|
constructor() {
|
|
super(strings.ERROR.NOT_FOUND);
|
|
}
|
|
}
|
|
|
|
export default BaseError;
|
|
|
|
================
|
|
File: src/utils/fetch.ts
|
|
================
|
|
export const fetcher = (url: string) => fetch(url).then((response) => response.json());
|
|
|
|
================
|
|
File: src/utils/guard.ts
|
|
================
|
|
import type { UserRole } from "@/server/auth/permissions";
|
|
import type { users } from "@/server/db/schema";
|
|
import type { InferSelectModel } from "drizzle-orm";
|
|
import type { RegisteredDatabaseUserAttributes } from "lucia";
|
|
|
|
// Constants for better readability
|
|
export const IS = false;
|
|
export const IS_NOT = true;
|
|
|
|
/**
|
|
* Checks if a user has the required role(s).
|
|
* @param user - The user to check.
|
|
* @param negate - Whether to negate the result.
|
|
* @param roleRequirements - The required role(s).
|
|
* @returns Whether the user has the required role(s).
|
|
*/
|
|
export function guard(
|
|
user: RegisteredDatabaseUserAttributes | InferSelectModel<typeof users> | undefined | null,
|
|
negate: boolean,
|
|
roleRequirements: UserRole | UserRole[],
|
|
) {
|
|
// Early return for unauthenticated users
|
|
if (!user) {
|
|
return true;
|
|
}
|
|
|
|
// Normalize roleRequirements to an array
|
|
const requiredRoles = Array.isArray(roleRequirements) ? roleRequirements : [roleRequirements];
|
|
|
|
// Check if the user's role is in the required roles
|
|
const userHasRequiredRole = requiredRoles.includes(user.role as UserRole);
|
|
|
|
// Return the result, negated if necessary
|
|
return negate ? !userHasRequiredRole : userHasRequiredRole;
|
|
}
|
|
|
|
================
|
|
File: src/utils/printers.ts
|
|
================
|
|
import type { InferResultType } from "@/utils/drizzle";
|
|
|
|
export enum PrinterStatus {
|
|
IDLE = 0,
|
|
OUT_OF_ORDER = 1,
|
|
RESERVED = 2,
|
|
}
|
|
|
|
export function derivePrinterStatus(
|
|
printer: InferResultType<"printers", { printJobs: true }>,
|
|
) {
|
|
if (printer.status === PrinterStatus.OUT_OF_ORDER) {
|
|
return PrinterStatus.OUT_OF_ORDER;
|
|
}
|
|
|
|
const activePrintJob = printer.printJobs[0];
|
|
|
|
if (!activePrintJob || activePrintJob.aborted) {
|
|
return PrinterStatus.IDLE;
|
|
}
|
|
|
|
const now = Date.now();
|
|
const startAt = new Date(activePrintJob.startAt).getTime();
|
|
const endAt = startAt + activePrintJob.durationInMinutes * 60 * 1000;
|
|
if (now < endAt) {
|
|
return PrinterStatus.RESERVED;
|
|
}
|
|
|
|
return PrinterStatus.IDLE;
|
|
}
|
|
|
|
export function translatePrinterStatus(status: PrinterStatus) {
|
|
switch (status) {
|
|
case PrinterStatus.IDLE:
|
|
return "Verfügbar";
|
|
case PrinterStatus.OUT_OF_ORDER:
|
|
return "Außer Betrieb";
|
|
case PrinterStatus.RESERVED:
|
|
return "Reserviert";
|
|
}
|
|
}
|
|
|
|
================
|
|
File: src/utils/strings.ts
|
|
================
|
|
/**
|
|
* Contains all strings used in the application.
|
|
*/
|
|
export default {
|
|
ERROR: {
|
|
PERMISSION: "Du besitzt nicht die erforderlichen Berechtigungen um diese Aktion auszuführen.",
|
|
VALIDATION: "Die Eingabe ist ungültig.",
|
|
NOT_FOUND: "Die angeforderten Daten konnten nicht gefunden werden.",
|
|
NO_SESSION: "Du bist nicht angemeldet.",
|
|
},
|
|
};
|
|
|
|
================
|
|
File: src/utils/styles.ts
|
|
================
|
|
import { type ClassValue, clsx } from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
/**
|
|
* Utility function to merge classes with tailwindcss.
|
|
* @param inputs Classes to merge
|
|
* @returns classes
|
|
*/
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
================
|
|
File: tailwind.config.ts
|
|
================
|
|
/** @type {import('tailwindcss').Config} */
|
|
|
|
const tremor = {
|
|
content: [
|
|
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module
|
|
],
|
|
theme: {
|
|
transparent: "transparent",
|
|
current: "currentColor",
|
|
extend: {
|
|
colors: {
|
|
// light mode
|
|
tremor: {
|
|
brand: {
|
|
faint: "#eff6ff", // blue-50
|
|
muted: "#bfdbfe", // blue-200
|
|
subtle: "#60a5fa", // blue-400
|
|
DEFAULT: "#3b82f6", // blue-500
|
|
emphasis: "#1d4ed8", // blue-700
|
|
inverted: "#ffffff", // white
|
|
},
|
|
background: {
|
|
muted: "#f9fafb", // gray-50
|
|
subtle: "#f3f4f6", // gray-100
|
|
DEFAULT: "#ffffff", // white
|
|
emphasis: "#374151", // gray-700
|
|
},
|
|
border: {
|
|
DEFAULT: "#e5e7eb", // gray-200
|
|
},
|
|
ring: {
|
|
DEFAULT: "#e5e7eb", // gray-200
|
|
},
|
|
content: {
|
|
subtle: "#9ca3af", // gray-400
|
|
DEFAULT: "#6b7280", // gray-500
|
|
emphasis: "#374151", // gray-700
|
|
strong: "#111827", // gray-900
|
|
inverted: "#ffffff", // white
|
|
},
|
|
},
|
|
// dark mode
|
|
"dark-tremor": {
|
|
brand: {
|
|
faint: "#0B1229", // custom
|
|
muted: "#172554", // blue-950
|
|
subtle: "#1e40af", // blue-800
|
|
DEFAULT: "#3b82f6", // blue-500
|
|
emphasis: "#60a5fa", // blue-400
|
|
inverted: "#030712", // gray-950
|
|
},
|
|
background: {
|
|
muted: "#131A2B", // custom
|
|
subtle: "#1f2937", // gray-800
|
|
DEFAULT: "#111827", // gray-900
|
|
emphasis: "#d1d5db", // gray-300
|
|
},
|
|
border: {
|
|
DEFAULT: "#1f2937", // gray-800
|
|
},
|
|
ring: {
|
|
DEFAULT: "#1f2937", // gray-800
|
|
},
|
|
content: {
|
|
subtle: "#4b5563", // gray-600
|
|
DEFAULT: "#6b7280", // gray-500
|
|
emphasis: "#e5e7eb", // gray-200
|
|
strong: "#f9fafb", // gray-50
|
|
inverted: "#000000", // black
|
|
},
|
|
},
|
|
},
|
|
boxShadow: {
|
|
// light
|
|
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
"tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
"tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
// dark
|
|
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
"dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
"dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
},
|
|
borderRadius: {
|
|
"tremor-small": "0.375rem",
|
|
"tremor-default": "0.5rem",
|
|
"tremor-full": "9999px",
|
|
},
|
|
fontSize: {
|
|
"tremor-label": ["0.75rem"],
|
|
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
|
|
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
|
|
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
},
|
|
},
|
|
},
|
|
safelist: [
|
|
{
|
|
pattern:
|
|
/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
variants: ["hover", "ui-selected"],
|
|
},
|
|
{
|
|
pattern:
|
|
/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
variants: ["hover", "ui-selected"],
|
|
},
|
|
{
|
|
pattern:
|
|
/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
variants: ["hover", "ui-selected"],
|
|
},
|
|
{
|
|
pattern:
|
|
/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
},
|
|
{
|
|
pattern:
|
|
/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
},
|
|
{
|
|
pattern:
|
|
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
|
},
|
|
],
|
|
plugins: [require("@headlessui/tailwindcss")],
|
|
};
|
|
|
|
module.exports = {
|
|
...tremor,
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./pages/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
"./app/**/*.{ts,tsx}",
|
|
"./src/**/*.{ts,tsx}",
|
|
...tremor.content,
|
|
],
|
|
theme: {
|
|
...tremor.theme,
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
...tremor.theme.extend,
|
|
colors: {
|
|
...tremor.theme.extend.colors,
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
...tremor.theme.extend.borderRadius,
|
|
},
|
|
keyframes: {
|
|
"accordion-down": {
|
|
from: { height: 0 },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: 0 },
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate"), ...tremor.plugins],
|
|
};
|
|
|
|
================
|
|
File: tsconfig.json
|
|
================
|
|
{
|
|
"compilerOptions": {
|
|
"lib": ["dom", "dom.iterable", "esnext"],
|
|
"allowJs": true,
|
|
"skipLibCheck": true,
|
|
"strict": true,
|
|
"noEmit": true,
|
|
"esModuleInterop": true,
|
|
"module": "esnext",
|
|
"moduleResolution": "bundler",
|
|
"resolveJsonModule": true,
|
|
"isolatedModules": true,
|
|
"jsx": "preserve",
|
|
"incremental": true,
|
|
"plugins": [
|
|
{
|
|
"name": "next"
|
|
}
|
|
],
|
|
"paths": {
|
|
"@/*": ["./src/*"]
|
|
}
|
|
},
|
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
|
"exclude": ["node_modules"]
|
|
}
|