init

frontend/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:22-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json und package-lock.json zuerst, um den Cache zu nutzen
+COPY package.json package-lock.json ./
+
+# Installiere alle Abhängigkeiten
+RUN npm install
+
+# Kopiere den Rest der Anwendung
+COPY . .
+
+# Baue die Next.js-Anwendung
+RUN npm run build
+
+# Expose the port your Next.js app runs on
+EXPOSE 3050
+
+# Start the Next.js server
+CMD ["npm", "run", "start"]

frontend/app/dashboard/generateFlaechendruck/action.ts

@@ -0,0 +1,44 @@
+"use server";
+//import { promises as fs } from "fs";
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+//const sharedFolder = process.env.SHARED_FOLDER;
+
+export async function getVorlagen() {
+  try {
+    const response = await fetch(
+      `${apiUrl}/vorlageFlaechendruck/getAllFlaechendruckVorlagen`
+    );
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to fetch vorlagen");
+    }
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching vorlagen:", error);
+    throw new Error("An error occurred while fetching vorlagen.");
+  }
+}
+
+export async function generateFlaechendruck(formData: FormData) {
+  const vorlageIds = formData.getAll("vorlageIds") as string[];
+  const requestBody = {
+    rootDirectory: "Orders",
+    vorlageIds: vorlageIds,
+  };
+
+  const response = await fetch(`${apiUrl}/vorlageFlaechendruck/generate`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    const body = await response.text().catch(() => null);
+    const msg = body ? body : `HTTP ${response.status}`;
+    return { message: msg, status: false };
+  } else {
+    return { message: "Erfolgreiche Flächendruckgenerierung!", status: true };
+  }
+}

frontend/app/dashboard/generateFlaechendruck/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getVorlagen, generateFlaechendruck } from "./action";
+import { toast, Bounce } from "react-toastify";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+
+export default function Page() {
+  const [vorlagen, setVorlagen] = useState<
+    { id: number; name: string; printer: string }[]
+  >([]);
+  const [selectedVorlagen, setSelectedVorlagen] = useState<number[]>([]);
+  const [isUploading, setIsUploading] = useState(false); // Zustand für den Upload
+
+  // API-Aufruf, um Vorlagen zu laden
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data = await getVorlagen(); // Server-Action aufrufen
+        setVorlagen(
+          data.map(
+            (item: { id: number; product_type: string; printer: string }) => ({
+              id: item.id,
+              name: item.product_type,
+              printer: item.printer,
+            })
+          )
+        );
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (selectedVorlagen.length === 0) {
+      return;
+    }
+
+    const formData = new FormData();
+    selectedVorlagen.forEach((id) => {
+      formData.append("vorlageIds", id.toString());
+    });
+    setIsUploading(true);
+    const res = await generateFlaechendruck(formData);
+    if (res.status) {
+      toast.success(res.message, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    } else {
+      toast.error(res.message, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    }
+
+    setIsUploading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <>
+        <form onSubmit={handleSubmit}>
+          <Card className="w-[350px]">
+            <CardHeader>
+              <CardTitle>Generierung Flächendruck</CardTitle>
+              <CardDescription>
+                Wählen sie Vorlagen zur Generierung aus.
+              </CardDescription>
+            </CardHeader>
+
+            <CardContent>
+              {!isUploading ? (
+                <div className="grid w-full items-center gap-4">
+                  <div className="flex flex-col space-y-1.5">
+                    <Label htmlFor="framework" className="mb-4">
+                      Vorlagen
+                    </Label>
+                    <div className="flex flex-col space-y-2">
+                      {vorlagen.map((vorlage) => (
+                        <div
+                          key={vorlage.id}
+                          className="flex items-start space-x-2"
+                        >
+                          <input
+                            type="checkbox"
+                            id={`vorlage-${vorlage.id}`}
+                            value={vorlage.id}
+                            onChange={(e) => {
+                              const id = parseInt(e.target.value, 10);
+                              if (e.target.checked) {
+                                setSelectedVorlagen((prev) => [...prev, id]);
+                              } else {
+                                setSelectedVorlagen((prev) =>
+                                  prev.filter((v) => v !== id)
+                                );
+                              }
+                            }}
+                            className="mt-1"
+                          />
+                          <label
+                            htmlFor={`vorlage-${vorlage.id}`}
+                            className="text-gray-700"
+                          >
+                            Printer: {vorlage.printer} - {vorlage.name}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-center w-full h-32">
+                  <div role="status">
+                    <svg
+                      aria-hidden="true"
+                      className="w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-black"
+                      viewBox="0 0 100 101"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                        fill="currentColor"
+                      />
+                      <path
+                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                        fill="currentFill"
+                      />
+                    </svg>
+                    <span className="sr-only">Loading...</span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+            <CardFooter className="flex justify-between">
+              {!isUploading ? <Button type="submit">Start</Button> : null}
+            </CardFooter>
+          </Card>
+        </form>
+      </>
+    </div>
+  );
+}

frontend/app/dashboard/generateRollendruck/action.ts

@@ -0,0 +1,45 @@
+"use server";
+//import { promises as fs } from "fs";
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+//const sharedFolder = process.env.SHARED_FOLDER;
+
+export async function getVorlagen() {
+  try {
+    const response = await fetch(
+      `${apiUrl}/VorlageRollenDruck/getAllRollendruckVorlagen`
+    );
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to fetch vorlagen");
+    }
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching vorlagen:", error);
+    throw new Error("An error occurred while fetching vorlagen.");
+  }
+}
+
+export async function uploadFiles(formData: FormData) {
+  const vorlageIds = formData.getAll("vorlageIds") as string[];
+
+  // JSON-Daten erstellen
+  const requestBody = {
+    rootDirectory: "Rollendruck",
+    vorlageIds: vorlageIds,
+  };
+  const response = await fetch(`${apiUrl}/VorlageRollenDruck/generate`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    const body = await response.text().catch(() => null);
+    const msg = body ? body : `HTTP ${response.status}`;
+    return { message: msg, status: false };
+  } else {
+    return { message: "Erfolgreiche Rollendruckgenerierung!", status: true };
+  }
+}

frontend/app/dashboard/generateRollendruck/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getVorlagen, uploadFiles } from "./action";
+import { toast, Bounce } from "react-toastify";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+
+export default function Page() {
+  const [vorlagen, setVorlagen] = useState<
+    { id: number; printer: string; height: number; width: number }[]
+  >([]);
+  const [selectedVorlagen, setSelectedVorlagen] = useState<number[]>([]);
+  const [isUploading, setIsUploading] = useState(false); // Zustand für den Upload
+
+  // API-Aufruf, um Vorlagen zu laden
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data = await getVorlagen(); // Server-Action aufrufen
+        setVorlagen(
+          data.map(
+            (item: {
+              id: number;
+              printer: string;
+              height: number;
+              width: number;
+            }) => ({
+              id: item.id,
+              printer: item.printer,
+              height: item.height,
+              width: item.width,
+            })
+          )
+        );
+      } catch (err) {
+        console.error("Error fetching vorlagen:", err);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (selectedVorlagen.length === 0) {
+      alert("Please select at least one Vorlage before submitting.");
+      return;
+    }
+
+    const formData = new FormData();
+    selectedVorlagen.forEach((id) => {
+      formData.append("vorlageIds", id.toString()); // Fügt die ausgewählten Vorlagen-IDs hinzu
+    });
+    setIsUploading(true);
+    const res = await uploadFiles(formData);
+    if (res.status) {
+      toast.success(res.message, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    } else {
+      toast.error(res.message, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    }
+    setIsUploading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <>
+        <form onSubmit={handleSubmit}>
+          <Card className="w-[350px]">
+            <CardHeader>
+              <CardTitle>Generierung Rollendruck</CardTitle>
+              <CardDescription>
+                Wählen sie Vorlagen zur Generierung aus.
+              </CardDescription>
+            </CardHeader>
+
+            <CardContent>
+              {!isUploading ? (
+                <div className="grid w-full items-center gap-4">
+                  <div className="flex flex-col space-y-1.5">
+                    <Label htmlFor="framework" className="mb-4">
+                      Vorlagen
+                    </Label>
+                    <div className="flex flex-col space-y-2">
+                      {vorlagen.map((vorlage) => (
+                        <div
+                          key={vorlage.id}
+                          className="flex items-start space-x-2"
+                        >
+                          <input
+                            type="checkbox"
+                            id={`vorlage-${vorlage.id}`}
+                            value={vorlage.id}
+                            onChange={(e) => {
+                              const id = parseInt(e.target.value, 10);
+                              if (e.target.checked) {
+                                setSelectedVorlagen((prev) => [...prev, id]);
+                              } else {
+                                setSelectedVorlagen((prev) =>
+                                  prev.filter((v) => v !== id)
+                                );
+                              }
+                            }}
+                            className="mt-1"
+                          />
+                          <label
+                            htmlFor={`vorlage-${vorlage.id}`}
+                            className="text-gray-700"
+                          >
+                            Printer: {vorlage.printer} - {vorlage.height}mm x{" "}
+                            {vorlage.width}mm
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-center w-full h-32">
+                  <div role="status">
+                    <svg
+                      aria-hidden="true"
+                      className="w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-black"
+                      viewBox="0 0 100 101"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                        fill="currentColor"
+                      />
+                      <path
+                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                        fill="currentFill"
+                      />
+                    </svg>
+                    <span className="sr-only">Loading...</span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+            <CardFooter className="flex justify-between">
+              {!isUploading ? <Button type="submit">Start</Button> : null}
+            </CardFooter>
+          </Card>
+        </form>
+      </>
+    </div>
+  );
+}

frontend/app/dashboard/layout.tsx

@@ -0,0 +1,13 @@
+import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AdminPanelLayout>
+      <main>{children}</main>
+    </AdminPanelLayout>
+  );
+}

frontend/app/dashboard/page.tsx

@@ -0,0 +1,14 @@
+export default function Page() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 text-gray-800">
+      <div className="bg-white shadow-md rounded-lg p-8 max-w-lg text-center">
+        <h1 className="text-2xl font-bold mb-4 text-gray-900">
+          Willkommen im Dashboard
+        </h1>
+        <h2 className="text-lg text-gray-600">
+          Navigieren Sie über das Menü auf der linken Seite zu den Anwendungen.
+        </h2>
+      </div>
+    </div>
+  );
+}

frontend/app/dashboard/updateOrders/page.tsx

@@ -0,0 +1,9 @@
+import UploadForm from "@/components/upload-form/page";
+
+export default async function Home() {
+  return (
+    <main>
+      <UploadForm />
+    </main>
+  );
+}

frontend/app/dashboard/vorlagenFlaechendruck/action.ts

@@ -0,0 +1,42 @@
+"use server";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function getTableData() {
+  try {
+    const res = await fetch(
+      `${apiUrl}/vorlageFlaechendruck/getAllFlaechendruckVorlagen`
+    );
+    if (!res.ok) {
+      console.error("Response status:", res.status);
+    }
+
+    const data: {
+      id: number;
+      product_type: string;
+      height: number;
+      width: number;
+      printer: string;
+      coordinates: {
+        x: number;
+        y: number;
+        rotation: number;
+      }[];
+    }[] = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching vorlagen:", error);
+    throw new Error("An error occurred while fetching vorlagen.");
+  }
+}
+export async function deleteVorlageFlaechendruck(id: number) {
+  const res = await fetch(`${apiUrl}/vorlageFlaechendruck/delete/${id}`, {
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to delete item");
+  }
+
+  return;
+}

frontend/app/dashboard/vorlagenFlaechendruck/components/action.ts

@@ -0,0 +1,83 @@
+"use server";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function createVorlage(formData: FormData) {
+  const printer = formData.get("printer") as string;
+  const product_type = formData.get("product_type") as string;
+  const height = Number(formData.get("height"));
+  const width = Number(formData.get("width"));
+  const coordinatesJson = formData.get("coordinates") as string;
+  const coordinates = JSON.parse(coordinatesJson);
+
+  const payload = {
+    printer,
+    product_type,
+    height,
+    width,
+    coordinates,
+  };
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/vorlageFlaechendruck/createWithCoordinates`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+      }
+    );
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}
+
+export async function alterVorlage(formData: FormData) {
+  const id = Number(formData.get("id"));
+  const printer = formData.get("printer") as string;
+  const product_type = formData.get("product_type") as string;
+  const height = Number(formData.get("height"));
+  const width = Number(formData.get("width"));
+  const coordinatesJson = formData.get("coordinates") as string;
+  const coordinates = JSON.parse(coordinatesJson);
+
+  const payload = {
+    id,
+    printer,
+    product_type,
+    height,
+    width,
+    coordinates,
+  };
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/vorlageFlaechendruck/alterVorlage`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+      }
+    );
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}

frontend/app/dashboard/vorlagenFlaechendruck/components/addDialog.tsx

@@ -0,0 +1,276 @@
+"use Client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator";
+
+import { Plus } from "lucide-react";
+
+
+import { useFieldArray } from "react-hook-form";
+
+import { createVorlage } from "./action";
+
+import { useState } from "react";
+
+export default function AddDialog({ onNewEntry }: { onNewEntry: () => void }) {
+    const [open, setOpen] = useState(false)
+    const formSchema = z.object({
+        Drucker: z.string().min(1, {
+            message: "Druckername muss mindestens 2 Zeichen lang sein.",
+        }),
+        Artikeltyp: z.string().min(1, {
+            message: "Artikeltyp muss mindestens 2 Zeichen lang sein.",
+        }),
+        Höhe: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Höhe muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Höhe muss mindestens 1 sein.",
+            })
+        ),
+        Breite: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Breite muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Breite muss mindestens 1 sein.",
+            })
+        ),
+        Koordinaten: z.array(
+            z.object({
+                x: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "X-Koordinate muss mindestens 0 sein.",
+                    })
+                ),
+                y: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "Y-Koordinate muss mindestens 0 sein.",
+                    })
+                ),
+                rotation: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "Rotation muss mindestens 0 sein.",
+                    })
+                ),
+            })
+        ).min(1, {
+            message: "Es muss mindestens eine Koordinate angegeben werden.",
+        }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            Drucker: "",
+            Artikeltyp: "",
+            Höhe: 0,
+            Breite: 0,
+            Koordinaten: [{ x: 0, y: 0, rotation: 0 }],
+        },
+    });
+
+    const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name: "Koordinaten",
+    });
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const formData = new FormData();
+
+        formData.append("printer", values.Drucker);
+        formData.append("product_type", values.Artikeltyp);
+        formData.append("height", values.Höhe.toString());
+        formData.append("width", values.Breite.toString());
+        formData.append("coordinates", JSON.stringify(values.Koordinaten));
+        try {
+            await createVorlage(formData);
+            setOpen(false);
+            form.reset();
+            onNewEntry();
+        }
+        catch (error) {
+            console.error("Error submitting form:", error);
+            throw new Error("An error occurred while submitting the form.");
+        }
+
+    }
+    return (
+        <div>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant="outline" className="mt-2 mb-2 border-green-700 text-green-700">
+                        Vorlage hinzufügen
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="mb-8">Vorlage hinzufügen</DialogTitle>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                                <FormField
+                                    control={form.control}
+                                    name="Drucker"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Drucker Name</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Druckers, auf dem die Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Artikeltyp"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Artikel Typ</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Artikels, der auf der Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Höhe"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Höhe</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Die Höhe der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Breite"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Breite</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+
+                                                Die Breite der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <div className="max-h-64 overflow-y-auto">
+                                    <FormLabel className="mb-4">Koordinaten:</FormLabel>
+                                    <Separator />
+                                    {fields.map((field, index) => (
+                                        <div key={field.id} className="space-y-4">
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.x`}
+
+                                                render={({ field }) => (
+                                                    <FormItem className="mt-4">
+                                                        <FormLabel>X-Koordinate</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.y`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Y-Koordinate</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.rotation`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Rotation</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <Button
+                                                type="button"
+                                                variant="destructive"
+                                                onClick={() => remove(index)}
+                                            >
+                                                Entfernen
+                                            </Button>
+                                            <Separator className="mt-4" />
+                                        </div>
+                                    ))}
+
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        onClick={() => append({ x: 0, y: 0, rotation: 0 })}
+                                        className="mt-4"
+                                    >
+                                        <Plus />
+                                    </Button>
+                                </div>
+                                <Button type="submit">
+                                    Hinzufügen
+                                </Button>
+
+                            </form>
+                        </Form>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/app/dashboard/vorlagenFlaechendruck/components/alterDialog.tsx

@@ -0,0 +1,294 @@
+"use Client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator";
+
+import { Plus } from "lucide-react";
+
+
+import { useFieldArray } from "react-hook-form";
+
+import { alterVorlage } from "./action";
+
+import { useState } from "react";
+
+type TableData = {
+    id: number;
+    product_type: string;
+    height: number;
+    width: number;
+    printer: string;
+    coordinates: { x: number; y: number; rotation: number }[];
+};
+
+type AlterDialogProps = {
+    onNewEntry: () => void;
+    data: TableData;
+};
+
+export default function AlterDialog({ onNewEntry, data }: AlterDialogProps) {
+    const [open, setOpen] = useState(false)
+    const formSchema = z.object({
+        Drucker: z.string().min(1, {
+            message: "Druckername muss mindestens 2 Zeichen lang sein.",
+        }),
+        Artikeltyp: z.string().min(1, {
+            message: "Artikeltyp muss mindestens 2 Zeichen lang sein.",
+        }),
+        Höhe: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Höhe muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Höhe muss mindestens 1 sein.",
+            })
+        ),
+        Breite: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Breite muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Breite muss mindestens 1 sein.",
+            })
+        ),
+        Koordinaten: z.array(
+            z.object({
+                x: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "X-Koordinate muss mindestens 0 sein.",
+                    })
+                ),
+                y: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "Y-Koordinate muss mindestens 0 sein.",
+                    })
+                ),
+                rotation: z.preprocess(
+                    (value) => (typeof value === "string" ? parseFloat(value) : value),
+                    z.number().min(0, {
+                        message: "Rotation muss mindestens 0 sein.",
+                    })
+                ),
+            })
+        ).min(1, {
+            message: "Es muss mindestens eine Koordinate angegeben werden.",
+        }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            Drucker: data.printer,
+            Artikeltyp: data.product_type,
+            Höhe: data.height,
+            Breite: data.width,
+            Koordinaten: data.coordinates.map((coord) => ({
+                x: coord.x,
+                y: coord.y,
+                rotation: coord.rotation,
+            })),
+        },
+    });
+
+    const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name: "Koordinaten",
+    });
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const formData = new FormData();
+        formData.append("id", data.id.toString());
+        formData.append("printer", values.Drucker);
+        formData.append("product_type", values.Artikeltyp);
+        formData.append("height", values.Höhe.toString());
+        formData.append("width", values.Breite.toString());
+        formData.append("coordinates", JSON.stringify(values.Koordinaten));
+        try {
+            await alterVorlage(formData);
+            setOpen(false);
+            form.reset();
+            onNewEntry();
+        }
+        catch (error) {
+            console.error("Error submitting form:", error);
+            throw new Error("An error occurred while submitting the form.");
+        }
+
+    }
+    return (
+        <div>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant="ghost"  className="font-normal pl-2">
+                        Vorlage bearbeiten
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="mb-8">Vorlage bearbeiten</DialogTitle>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                                <FormField
+                                    control={form.control}
+                                    name="Drucker"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Drucker Name</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Druckers, auf dem die Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Artikeltyp"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Artikel Typ</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Artikels, der auf der Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Höhe"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Höhe</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Die Höhe der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Breite"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Breite</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+
+                                                Die Breite der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <div className="max-h-64 overflow-y-auto">
+                                    <FormLabel className="mb-4">Koordinaten:</FormLabel>
+                                    <Separator />
+                                    {fields.map((field, index) => (
+                                        <div key={field.id} className="space-y-4">
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.x`}
+
+                                                render={({ field }) => (
+                                                    <FormItem className="mt-4">
+                                                        <FormLabel>X-Koordinate</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.y`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Y-Koordinate</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name={`Koordinaten.${index}.rotation`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Rotation</FormLabel>
+                                                        <FormControl>
+                                                            <Input type="number" step="any" {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <Button
+                                                type="button"
+                                                variant="destructive"
+                                                onClick={() => remove(index)}
+                                            >
+                                                Entfernen
+                                            </Button>
+                                            <Separator className="mt-4" />
+                                        </div>
+                                    ))}
+
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        onClick={() => append({ x: 0, y: 0, rotation: 0 })}
+                                        className="mt-4"
+                                    >
+                                        <Plus />
+                                    </Button>
+                                </div>
+                                <Button type="submit">
+                                    Änderungen speichern
+                                </Button>
+
+                            </form>
+                        </Form>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/app/dashboard/vorlagenFlaechendruck/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Ellipsis } from "lucide-react"
+import { getTableData, deleteVorlageFlaechendruck } from "./action";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+import AddDialog from "./components/addDialog";
+import AlterDialog from "./components/alterDialog";
+
+type TableData = {
+  id: number;
+  product_type: string;
+  height: number;
+  width: number;
+  printer: string;
+  coordinates: { x: number; y: number; rotation: number }[];
+};
+export default function Page() {
+  const [data, setData] = useState<TableData[]>([]);
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const result = await getTableData();
+        setData(result);
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  const handleNewEntry = async () => {
+    try {
+      const result = await getTableData(); // Daten erneut abrufen
+      setData(result); // Tabelle aktualisieren
+    } catch (error) {
+      console.error("Fehler beim Aktualisieren der Daten:", error);
+    }
+  };
+
+  const deleteEntry = async (id: number) => {
+    try {
+      await deleteVorlageFlaechendruck(id);
+      await handleNewEntry();
+    }
+    catch (error) {
+      console.error("Fehler beim Löschen der Daten:", error);
+    }
+  };
+
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-5xl mx-auto">
+        {/* Table Section */}
+        <Table className="bg-white shadow-md border border-gray-300">
+          <TableCaption>Vorlagen Flächendruck</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Drucker</TableHead>
+              <TableHead>Artikel Typ</TableHead>
+              <TableHead>Höhe</TableHead>
+              <TableHead>Breite</TableHead>
+              <TableHead>Koordinaten</TableHead>
+              <TableHead className="text-right">
+                <AddDialog onNewEntry={handleNewEntry} />
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {data.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell>{item.printer}</TableCell>
+                <TableCell>{item.product_type}</TableCell>
+                <TableCell>{item.height}</TableCell>
+                <TableCell >{item.width}</TableCell>
+                <TableCell>
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="outline">Anzeigen</Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                      <DialogHeader>
+                        <DialogTitle>Koordinaten</DialogTitle>
+                        <DialogDescription>
+                          Hier sind die Koordinaten für die ausgewählte Vorlage. X und Y Werte in Millimetern.
+                        </DialogDescription>
+                      </DialogHeader>
+                      <Table>
+                        <TableCaption>Koordinaten Tabelle</TableCaption>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>X</TableHead>
+                            <TableHead>Y</TableHead>
+                            <TableHead className="text-right">Rotation</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {item.coordinates.map((coordi) => (
+                            <TableRow key={crypto.randomUUID()}>
+                              <TableCell>{coordi.x}</TableCell>
+                              <TableCell>{coordi.y}</TableCell>
+                              <TableCell className="text-right">{coordi.rotation}°</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </DialogContent>
+                  </Dialog>
+
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <Ellipsis />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <AlterDialog onNewEntry={handleNewEntry} data={item} />
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem variant="destructive">
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            onClick={(event) => {
+                              event.stopPropagation(); // Verhindert das Schließen des Dropdown-Menüs
+                            }}
+                          >
+                            Eintrag Löschen
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Sind Sie sich sicher?</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+                              <AlertDialogAction
+                                onClick={() => {
+                                  deleteEntry(item.id); // Eintrag löschen
+                                }}
+                              >
+                                Löschen
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

frontend/app/dashboard/vorlagenRollendruck/action.ts

@@ -0,0 +1,69 @@
+"use server";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function getTableData() {
+  try {
+    const res = await fetch(
+      `${apiUrl}/VorlageRollenDruck/getAllRollendruckVorlagen`
+    );
+    if (!res.ok) {
+      console.error("Response status:", res.status);
+    }
+
+    const data: {
+      id: number;
+      height: number;
+      width: number;
+      printer: string;
+      articleTypes: string;
+    }[] = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching vorlagen:", error);
+    throw new Error("An error occurred while fetching vorlagen.");
+  }
+}
+export async function deleteVorlageRollendruck(id: number) {
+  const res = await fetch(`${apiUrl}/VorlageRollenDruck/delete/${id}`, {
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to delete item");
+  }
+
+  return;
+}
+
+export async function getTableDataDupli() {
+  try {
+    const res = await fetch(
+      `${apiUrl}/VorlageRollenDruck/getAllDupliArtikel`
+    );
+    if (!res.ok) {
+      console.error("Response status:", res.status);
+    }
+
+    const data: {
+      id: number;
+      product_type: string;
+    }[] = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching vorlagen:", error);
+    throw new Error("An error occurred while fetching vorlagen.");
+  }
+}
+
+export async function deleteDupliEntry(id: number) {
+  const res = await fetch(`${apiUrl}/VorlageRollenDruck/deleteDupli/${id}`, {
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to delete item");
+  }
+
+  return;
+}

frontend/app/dashboard/vorlagenRollendruck/components/action.ts

@@ -0,0 +1,107 @@
+"use server";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function createVorlage(formData: FormData) {
+  const printer = formData.get("printer") as string;
+  const height = Number(formData.get("height"));
+  const width = Number(formData.get("width"));
+  const articleTypes = formData.get("articleTypes") as string;
+
+  const payload = {
+    printer,
+    height,
+    width,
+    articleTypes
+  };
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/VorlageRollenDruck/createRollenDruckVorlage`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+      }
+    );
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}
+
+export async function alterVorlage(formData: FormData) {
+  const id = Number(formData.get("id"));
+  const printer = formData.get("printer") as string;
+  const height = Number(formData.get("height"));
+  const width = Number(formData.get("width"));
+  const articleTypes = formData.get("articleTypes") as string;
+
+  const payload = {
+    id,
+    printer,
+    height,
+    width,
+    articleTypes
+  };
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/VorlageRollenDruck/alterVorlage`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+      }
+    );
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}
+
+export async function addDupliArtikel(fromData: FormData) {
+  const artikelTyp = fromData.get("ArtikelTyp") as string;
+
+  const payload = {
+    product_type: artikelTyp,
+  };
+
+  try {
+    const response = await fetch(
+      `${apiUrl}/VorlageRollenDruck/addDupliArtikel`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+      }
+    );
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}

frontend/app/dashboard/vorlagenRollendruck/components/addDialog.tsx

@@ -0,0 +1,177 @@
+"use Client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+
+import { createVorlage } from "./action";
+
+import { useState } from "react";
+
+export default function AddDialog({ onNewEntry }: { onNewEntry: () => void }) {
+    const [open, setOpen] = useState(false)
+    const formSchema = z.object({
+        Drucker: z.string().min(1, {
+            message: "Druckername muss mindestens 2 Zeichen lang sein.",
+        }),
+        Höhe: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Höhe muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Höhe muss mindestens 1 sein.",
+            })
+        ),
+        Breite: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Breite muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Breite muss mindestens 1 sein.",
+            })
+        ),
+        ArtikelTypen: z
+            .string()
+            .regex(/^(\s*\w+\s*)(,\s*\w+\s*)*$/, {
+                message: "Bitte geben Sie eine durch Kommas getrennte Liste ein (z.B. te, bs, s, s, s)",
+            }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            Drucker: "",
+            Höhe: 0,
+            Breite: 0,
+            ArtikelTypen: "",
+        },
+    });
+
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const formData = new FormData();
+
+        formData.append("printer", values.Drucker);
+        formData.append("height", values.Höhe.toString());
+        formData.append("width", values.Breite.toString());
+        formData.append("articleTypes", values.ArtikelTypen);
+        try {
+            await createVorlage(formData);
+            setOpen(false);
+            form.reset();
+            onNewEntry();
+        }
+        catch (error) {
+            console.error("Error submitting form:", error);
+            throw new Error("An error occurred while submitting the form.");
+        }
+
+    }
+    return (
+        <div>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant="outline" className="mt-2 mb-2 border-green-700 text-green-700">
+                        Vorlage hinzufügen
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="mb-8">Vorlage hinzufügen</DialogTitle>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                                <FormField
+                                    control={form.control}
+                                    name="Drucker"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Drucker Name</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Druckers, auf dem die Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Höhe"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Höhe</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Die Höhe der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Breite"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Breite</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+
+                                                Die Breite der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="ArtikelTypen"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Artikel Typen</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Geben Sie die Artikeltypen als durch Kommas getrennte Liste ein (z.B. te, bs, s, s, s).
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <Button type="submit">
+                                    Hinzufügen
+                                </Button>
+                            </form>
+                        </Form>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/app/dashboard/vorlagenRollendruck/components/addDialogDupli.tsx

@@ -0,0 +1,99 @@
+"use Client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+
+import {addDupliArtikel} from "./action";
+
+import { useState } from "react";
+import {Plus} from "lucide-react";
+
+export default function AddDialog({ onNewEntry }: { onNewEntry: () => void }) {
+    const [open, setOpen] = useState(false)
+    const formSchema = z.object({
+        ArtikelTyp: z.string().min(1, {
+            message: "Druckername muss mindestens 2 Zeichen lang sein.",
+        }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            ArtikelTyp: "",
+        },
+    });
+
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const formData = new FormData();
+
+        formData.append("ArtikelTyp", values.ArtikelTyp);
+        try {
+            await addDupliArtikel(formData);
+            setOpen(false);
+            form.reset();
+            onNewEntry();
+        }
+        catch (error) {
+            console.error("Error submitting form:", error);
+            throw new Error("An error occurred while submitting the form.");
+        }
+
+    }
+    return (
+        <div>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant={"outline"} className="border-green-700 text-green-700 mt-2 mb-2" ><Plus /></Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="mb-8">ArtikelTyp hinzufügen</DialogTitle>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                                <FormField
+                                    control={form.control}
+                                    name="ArtikelTyp"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>ArtikelTyp</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Typ des Artikels, der dupliziert gedruckt werden soll.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <Button type="submit">
+                                    Hinzufügen
+                                </Button>
+                            </form>
+                        </Form>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/app/dashboard/vorlagenRollendruck/components/alterDialog.tsx

@@ -0,0 +1,190 @@
+"use Client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+import { alterVorlage } from "./action";
+
+import { useState } from "react";
+
+type TableData = {
+    id: number;
+    printer: string;
+    height: number;
+    width: number;
+    articleTypes: string;
+};
+
+type AlterDialogProps = {
+    onNewEntry: () => void;
+    data: TableData;
+};
+
+export default function AlterDialog({ onNewEntry, data }: AlterDialogProps) {
+    const [open, setOpen] = useState(false)
+    const formSchema = z.object({
+        Drucker: z.string().min(1, {
+            message: "Druckername muss mindestens 2 Zeichen lang sein.",
+        }),
+        Höhe: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Höhe muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Höhe muss mindestens 1 sein.",
+            })
+        ),
+        Breite: z.preprocess(
+            (value) => (typeof value === "string" ? parseFloat(value) : value),
+            z.number({
+                invalid_type_error: "Breite muss eine gültige Zahl sein. Bspw. 1.5 .",
+            }).min(1, {
+                message: "Breite muss mindestens 1 sein.",
+            })
+        ),
+        ArtikelTypen: z
+            .string()
+            .regex(/^(\s*\w+\s*)(,\s*\w+\s*)*$/, {
+                message: "Bitte geben Sie eine durch Kommas getrennte Liste ein (z.B. te, bs, s, s, s)",
+            }),
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            Drucker: data.printer,
+            Höhe: data.height,
+            Breite: data.width,
+            ArtikelTypen: data.articleTypes,
+        },
+    });
+
+
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const formData = new FormData();
+        formData.append("id", data.id.toString());
+        formData.append("printer", values.Drucker);
+        formData.append("height", values.Höhe.toString());
+        formData.append("width", values.Breite.toString());
+        formData.append("articleTypes", values.ArtikelTypen);
+        try {
+            await alterVorlage(formData);
+            setOpen(false);
+            form.reset();
+            onNewEntry();
+        }
+        catch (error) {
+            console.error("Error submitting form:", error);
+            throw new Error("An error occurred while submitting the form.");
+        }
+
+    }
+    return (
+        <div>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant="ghost" className="font-normal pl-2">
+                        Vorlage bearbeiten
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="mb-8">Vorlage bearbeiten</DialogTitle>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                                <FormField
+                                    control={form.control}
+                                    name="Drucker"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Drucker Name</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <DialogDescription>
+                                                Der Name des Druckers, auf dem die Vorlage gedruckt wird.
+                                            </DialogDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Höhe"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Höhe</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Die Höhe der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="Breite"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Breite</FormLabel>
+                                            <FormControl>
+                                                <Input type="number" step="any" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+
+                                                Die Breite der Vorlage in Millimeter.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="ArtikelTypen"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Artikel Typen</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Geben Sie eine durch Kommas getrennte Liste von Artikeltypen ein (z.B. te, bs, s, s, s).
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <Button type="submit">
+                                    Änderungen speichern
+                                </Button>
+                            </form>
+                        </Form>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/app/dashboard/vorlagenRollendruck/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Ellipsis } from "lucide-react"
+import { getTableData, deleteVorlageRollendruck, getTableDataDupli, deleteDupliEntry } from "./action";
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+
+import AddDialog from "./components/addDialog";
+import AlterDialog from "./components/alterDialog";
+import AddDialogDupli from "./components/addDialogDupli";
+
+type TableData = {
+    id: number;
+    printer: string;
+    height: number;
+    width: number;
+    articleTypes: string;
+};
+export default function Page() {
+    const [data, setData] = useState<TableData[]>([]);
+    const [dupliData, setDupliData] = useState<{ id: number; product_type: string }[]>([]);
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const result = await getTableData();
+                setData(result || []);
+                const dupliResult = await getTableDataDupli();
+                setDupliData(Array.isArray(dupliResult) ? dupliResult : []);
+            } catch (error) {
+                console.error("Fehler beim Laden der Daten:", error);
+            }
+        }
+        fetchData();
+    }, []);
+
+    const handleNewEntry = async () => {
+        try {
+            const result = await getTableData(); // Daten erneut abrufen
+            setData(result); // Tabelle aktualisieren
+        } catch (error) {
+            console.error("Fehler beim Aktualisieren der Daten:", error);
+        }
+    };
+
+    const handleNewEntry2 = async () => {
+        try {
+            const result = await getTableDataDupli(); // Daten erneut abrufen
+            setDupliData(result) // Tabelle aktualisieren
+        } catch (error) {
+            console.error("Fehler beim Aktualisieren der Daten:", error);
+        }
+    };
+
+    const deleteEntry = async (id: number) => {
+        try {
+            await deleteVorlageRollendruck(id);
+            await handleNewEntry();
+        }
+        catch (error) {
+            console.error("Fehler beim Löschen der Daten:", error);
+        }
+    };
+
+    const deleteEntryDupli = async (id: number) => {
+        try {
+            await deleteDupliEntry(id);
+            await handleNewEntry2();
+        }
+        catch (error) {
+            console.error("Fehler beim Löschen der Daten:", error);
+        }
+    }
+
+
+    return (
+        <div className="min-h-screen bg-gray-50 p-6">
+            <div className="flex w-full max-w-6xl mx-auto gap-2">
+                <div className="w-1/3 flex-shrink-0">
+                    <Table className="bg-white shadow-md border border-gray-300">
+                        <TableCaption>Artikel für Duplizierung</TableCaption>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-[100px]">Artikel Typ</TableHead>
+                                <TableHead className="text-right">
+                                    <AddDialogDupli onNewEntry={handleNewEntry2} />
+                                </TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {dupliData.map((item) => (
+                                <TableRow key={item.id}>
+                                    <TableCell>{item.product_type}</TableCell>
+                                    <TableCell className="text-right">
+                                        <Button onClick={() => {
+                                            deleteEntryDupli(item.id); // Eintrag löschen
+                                        }} variant={"outline"} className="border-red-700 text-red-700 h-6">Entfernen</Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+
+                <div className="flex-1">
+                    <Table className="bg-white shadow-md border border-gray-300">
+                        <TableCaption>Vorlagen Rollendruck</TableCaption>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-[100px]">Drucker</TableHead>
+                                <TableHead>Höhe</TableHead>
+                                <TableHead>Breite</TableHead>
+                                <TableHead>Artikel Typen</TableHead>
+                                <TableHead className="text-right">
+                                    <AddDialog onNewEntry={handleNewEntry} />
+                                </TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {data.map((item) => (
+                                <TableRow key={item.id}>
+                                    <TableCell>{item.printer}</TableCell>
+                                    <TableCell>{item.height}</TableCell>
+                                    <TableCell>{item.width}</TableCell>
+                                    <TableCell>
+                                        <Dialog>
+                                            <DialogTrigger asChild>
+                                                <Button variant="outline">Anzeigen</Button>
+                                            </DialogTrigger>
+                                            <DialogContent>
+                                                <DialogHeader>
+                                                    <DialogTitle>Artikel Typen</DialogTitle>
+                                                    <DialogDescription>
+                                                        Hier sind die Artikel Typen gelistet, die von der Vorlage unterstützt werden.
+                                                    </DialogDescription>
+                                                </DialogHeader>
+                                                {item.articleTypes}
+                                            </DialogContent>
+                                        </Dialog>
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger asChild>
+                                                <Button variant="ghost" size="icon">
+                                                    <Ellipsis />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent align="end">
+                                                <AlterDialog onNewEntry={handleNewEntry} data={item} />
+                                                <DropdownMenuSeparator />
+                                                <DropdownMenuItem variant="destructive">
+                                                    <AlertDialog>
+                                                        <AlertDialogTrigger
+                                                            onClick={(event) => {
+                                                                event.stopPropagation(); // Verhindert das Schließen des Dropdown-Menüs
+                                                            }}
+                                                        >
+                                                            Eintrag Löschen
+                                                        </AlertDialogTrigger>
+                                                        <AlertDialogContent>
+                                                            <AlertDialogHeader>
+                                                                <AlertDialogTitle>Sind Sie sich sicher?</AlertDialogTitle>
+                                                                <AlertDialogDescription>
+                                                                    Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.
+                                                                </AlertDialogDescription>
+                                                            </AlertDialogHeader>
+                                                            <AlertDialogFooter>
+                                                                <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+                                                                <AlertDialogAction
+                                                                    onClick={() => {
+                                                                        deleteEntry(item.id); // Eintrag löschen
+                                                                    }}
+                                                                >
+                                                                    Löschen
+                                                                </AlertDialogAction>
+                                                            </AlertDialogFooter>
+                                                        </AlertDialogContent>
+                                                    </AlertDialog>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/layout.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+import { ToastContainer, Bounce } from "react-toastify";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "ERP - Wolga Kreativ",
+  description: "Wolga ERP",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ToastContainer
+          position="bottom-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick={false}
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="light"
+          transition={Bounce}
+        />
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/login/page.tsx

@@ -0,0 +1,9 @@
+import SignInPage from "@/components/auth/signin-form";
+
+export default function Page() {
+  return (
+    <>
+      <SignInPage></SignInPage>
+    </>
+  );
+}

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/components/action.ts

@@ -0,0 +1,15 @@
+"use server";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function deleteVorlageFlaechendruck(id: number) {
+  const res = await fetch(`${apiUrl}/vorlageFlaechendruck/delete/${id}`, {
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to delete item");
+  }
+
+  return;
+}

frontend/components/admin-panel/admin-panel-layout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Footer } from "@/components/admin-panel/footer";
+import { Sidebar } from "@/components/admin-panel/sidebar";
+import { useSidebar } from "@/hooks/use-sidebar";
+import { useStore } from "@/hooks/use-store";
+import { cn } from "@/lib/utils";
+
+export default function AdminPanelLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const sidebar = useStore(useSidebar, (x) => x);
+  if (!sidebar) return null;
+  const { getOpenState, settings } = sidebar;
+  return (
+    <>
+      <Sidebar />
+      <main
+        className={cn(
+          "min-h-[calc(100vh_-_56px)] bg-zinc-50 dark:bg-zinc-900 transition-[margin-left] ease-in-out duration-300",
+          !settings.disabled
+            ? getOpenState()
+              ? "ml-0 lg:ml-72" // Sidebar geöffnet
+              : "ml-0 lg:ml-[90px]" // Sidebar minimiert
+            : "ml-0" // Sidebar deaktiviert
+        )}
+      >
+        {children}
+      </main>
+      <footer
+        className={cn(
+          "transition-[margin-left] ease-in-out duration-300",
+          !settings.disabled
+            ? getOpenState()
+              ? "ml-0 lg:ml-72"
+              : "ml-0 lg:ml-[90px]"
+            : "ml-0"
+        )}
+      >
+        <Footer />
+      </footer>
+    </>
+  );
+}

frontend/components/admin-panel/collapse-menu-button.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { ChevronDown, Dot, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@/components/ui/collapsible";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider
+} from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSeparator
+} from "@/components/ui/dropdown-menu";
+import { usePathname } from "next/navigation";
+
+type Submenu = {
+  href: string;
+  label: string;
+  active?: boolean;
+};
+
+interface CollapseMenuButtonProps {
+  icon: LucideIcon;
+  label: string;
+  active: boolean;
+  submenus: Submenu[];
+  isOpen: boolean | undefined;
+}
+
+export function CollapseMenuButton({
+  icon: Icon,
+  label,
+  submenus,
+  isOpen
+}: CollapseMenuButtonProps) {
+  const pathname = usePathname();
+  const isSubmenuActive = submenus.some((submenu) =>
+    submenu.active === undefined ? submenu.href === pathname : submenu.active
+  );
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
+
+  return isOpen ? (
+    <Collapsible
+      open={isCollapsed}
+      onOpenChange={setIsCollapsed}
+      className="w-full"
+    >
+      <CollapsibleTrigger
+        className="[&[data-state=open]>div>div>svg]:rotate-180 mb-1"
+        asChild
+      >
+        <Button
+          variant={isSubmenuActive ? "secondary" : "ghost"}
+          className="w-full justify-start h-10"
+        >
+          <div className="w-full items-center flex justify-between">
+            <div className="flex items-center">
+              <span className="mr-4">
+                <Icon size={18} />
+              </span>
+              <p
+                className={cn(
+                  "max-w-[150px] truncate",
+                  isOpen
+                    ? "translate-x-0 opacity-100"
+                    : "-translate-x-96 opacity-0"
+                )}
+              >
+                {label}
+              </p>
+            </div>
+            <div
+              className={cn(
+                "whitespace-nowrap",
+                isOpen
+                  ? "translate-x-0 opacity-100"
+                  : "-translate-x-96 opacity-0"
+              )}
+            >
+              <ChevronDown
+                size={18}
+                className="transition-transform duration-200"
+              />
+            </div>
+          </div>
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+        {submenus.map(({ href, label, active }, index) => (
+          <Button
+            key={index}
+            variant={
+              (active === undefined && pathname === href) || active
+                ? "secondary"
+                : "ghost"
+            }
+            className="w-full justify-start h-10 mb-1"
+            asChild
+          >
+            <Link href={href}>
+              <span className="mr-4 ml-2">
+                <Dot size={18} />
+              </span>
+              <p
+                className={cn(
+                  "max-w-[170px] truncate",
+                  isOpen
+                    ? "translate-x-0 opacity-100"
+                    : "-translate-x-96 opacity-0"
+                )}
+              >
+                {label}
+              </p>
+            </Link>
+          </Button>
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  ) : (
+    <DropdownMenu>
+      <TooltipProvider disableHoverableContent>
+        <Tooltip delayDuration={100}>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={isSubmenuActive ? "secondary" : "ghost"}
+                className="w-full justify-start h-10 mb-1"
+              >
+                <div className="w-full items-center flex justify-between">
+                  <div className="flex items-center">
+                    <span className={cn(isOpen === false ? "" : "mr-4")}>
+                      <Icon size={18} />
+                    </span>
+                    <p
+                      className={cn(
+                        "max-w-[200px] truncate",
+                        isOpen === false ? "opacity-0" : "opacity-100"
+                      )}
+                    >
+                      {label}
+                    </p>
+                  </div>
+                </div>
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right" align="start" alignOffset={2}>
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DropdownMenuContent side="right" sideOffset={25} align="start">
+        <DropdownMenuLabel className="max-w-[190px] truncate">
+          {label}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {submenus.map(({ href, label, active }, index) => (
+          <DropdownMenuItem key={index} asChild>
+            <Link
+              className={`cursor-pointer ${
+                ((active === undefined && pathname === href) || active) &&
+                "bg-secondary"
+              }`}
+              href={href}
+            >
+              <p className="max-w-[180px] truncate">{label}</p>
+            </Link>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuArrow className="fill-border" />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

frontend/components/admin-panel/content-layout.tsx

@@ -0,0 +1,15 @@
+import { Navbar } from "@/components/admin-panel/navbar";
+
+interface ContentLayoutProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function ContentLayout({ title, children }: ContentLayoutProps) {
+  return (
+    <div>
+      <Navbar title={title} />
+      <div className="container pt-8 pb-8 px-4 sm:px-8">{children}</div>
+    </div>
+  );
+}

frontend/components/admin-panel/footer.tsx

@@ -0,0 +1,12 @@
+export function Footer() {
+  return (
+    <div className="z-20 w-full bg-background/95 shadow backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-4 md:mx-8 flex h-14 items-center">
+        <p className="text-xs md:text-sm leading-loose text-muted-foreground text-left">
+          Built by{" "}
+          Andreas Wilms
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/components/admin-panel/menu.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import Link from "next/link";
+import { Ellipsis, LogOut } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { cn } from "@/lib/utils";
+import { getMenuList } from "@/lib/menu-list";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { CollapseMenuButton } from "@/components/admin-panel/collapse-menu-button";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import { logout } from "@/lib/session";
+
+interface MenuProps {
+  isOpen: boolean | undefined;
+}
+
+export function Menu({ isOpen }: MenuProps) {
+  const pathname = usePathname();
+  const menuList = getMenuList(pathname);
+  const router = useRouter();
+
+  async function handleLogOut() {
+    await logout();
+    router.push("/login");
+  }
+
+  return (
+    <ScrollArea className="[&>div>div[style]]:!block">
+      <nav className="mt-8 h-full w-full">
+        <ul className="flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-2">
+          {menuList.map(({ groupLabel, menus }, index) => (
+            <li className={cn("w-full", groupLabel ? "pt-5" : "")} key={index}>
+              {(isOpen && groupLabel) || isOpen === undefined ? (
+                <p className="text-sm font-medium text-muted-foreground px-4 pb-2 max-w-[248px] truncate">
+                  {groupLabel}
+                </p>
+              ) : !isOpen && isOpen !== undefined && groupLabel ? (
+                <TooltipProvider>
+                  <Tooltip delayDuration={100}>
+                    <TooltipTrigger className="w-full">
+                      <div className="w-full flex justify-center items-center">
+                        <Ellipsis className="h-5 w-5" />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{groupLabel}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <p className="pb-2"></p>
+              )}
+              {menus.map(
+                ({ href, label, icon: Icon, active, submenus }, index) =>
+                  !submenus || submenus.length === 0 ? (
+                    <div className="w-full" key={index}>
+                      <TooltipProvider disableHoverableContent>
+                        <Tooltip delayDuration={100}>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant={
+                                (active === undefined &&
+                                  pathname.startsWith(href)) ||
+                                active
+                                  ? "secondary"
+                                  : "ghost"
+                              }
+                              className="w-full justify-start h-10 mb-1"
+                              asChild
+                            >
+                              <Link href={href}>
+                                <span
+                                  className={cn(isOpen === false ? "" : "mr-4")}
+                                >
+                                  <Icon size={18} />
+                                </span>
+                                <p
+                                  className={cn(
+                                    "max-w-[200px] truncate",
+                                    isOpen === false
+                                      ? "-translate-x-96 opacity-0"
+                                      : "translate-x-0 opacity-100"
+                                  )}
+                                >
+                                  {label}
+                                </p>
+                              </Link>
+                            </Button>
+                          </TooltipTrigger>
+                          {isOpen === false && (
+                            <TooltipContent side="right">
+                              {label}
+                            </TooltipContent>
+                          )}
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  ) : (
+                    <div className="w-full" key={index}>
+                      <CollapseMenuButton
+                        icon={Icon}
+                        label={label}
+                        active={
+                          active === undefined
+                            ? pathname.startsWith(href)
+                            : active
+                        }
+                        submenus={submenus}
+                        isOpen={isOpen}
+                      />
+                    </div>
+                  )
+              )}
+            </li>
+          ))}
+          <li className="w-full grow flex items-end">
+            <TooltipProvider disableHoverableContent>
+              <Tooltip delayDuration={100}>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={handleLogOut}
+                    variant="outline"
+                    className="w-full justify-center h-10 mt-5"
+                  >
+                    <span className={cn(isOpen === false ? "" : "mr-4")}>
+                      <LogOut size={18} />
+                    </span>
+                    <p
+                      className={cn(
+                        "whitespace-nowrap",
+                        isOpen === false ? "opacity-0 hidden" : "opacity-100"
+                      )}
+                    >
+                      Abmelden
+                    </p>
+                  </Button>
+                </TooltipTrigger>
+                {isOpen === false && (
+                  <TooltipContent side="right">Sign out</TooltipContent>
+                )}
+              </Tooltip>
+            </TooltipProvider>
+          </li>
+        </ul>
+      </nav>
+    </ScrollArea>
+  );
+}

frontend/components/admin-panel/navbar.tsx

@@ -0,0 +1,24 @@
+import { ModeToggle } from "@/components/mode-toggle";
+import { UserNav } from "@/components/admin-panel/user-nav";
+import { SheetMenu } from "@/components/admin-panel/sheet-menu";
+
+interface NavbarProps {
+  title: string;
+}
+
+export function Navbar({ title }: NavbarProps) {
+  return (
+    <header className="sticky top-0 z-10 w-full bg-background/95 shadow backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:shadow-secondary">
+      <div className="mx-4 sm:mx-8 flex h-14 items-center">
+        <div className="flex items-center space-x-4 lg:space-x-0">
+          <SheetMenu />
+          <h1 className="font-bold">{title}</h1>
+        </div>
+        <div className="flex flex-1 items-center justify-end">
+          <ModeToggle />
+          <UserNav />
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/components/admin-panel/sheet-menu.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { MenuIcon, PanelsTopLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Menu } from "@/components/admin-panel/menu";
+import {
+  Sheet,
+  SheetHeader,
+  SheetContent,
+  SheetTrigger,
+  SheetTitle
+} from "@/components/ui/sheet";
+
+export function SheetMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger className="lg:hidden" asChild>
+        <Button className="h-8" variant="outline" size="icon">
+          <MenuIcon size={20} />
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="sm:w-72 px-3 h-full flex flex-col" side="left">
+        <SheetHeader>
+          <Button
+            className="flex justify-center items-center pb-2 pt-1"
+            variant="link"
+            asChild
+          >
+            <Link href="/dashboard" className="flex items-center gap-2">
+              <PanelsTopLeft className="w-6 h-6 mr-1" />
+              <SheetTitle className="font-bold text-lg">Brand</SheetTitle>
+            </Link>
+          </Button>
+        </SheetHeader>
+        <Menu isOpen />
+      </SheetContent>
+    </Sheet>
+  );
+}

frontend/components/admin-panel/sidebar-toggle.tsx

@@ -0,0 +1,29 @@
+import { ChevronLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface SidebarToggleProps {
+  isOpen: boolean | undefined;
+  setIsOpen?: () => void;
+}
+
+export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {
+  return (
+    <div className="invisible lg:visible absolute top-[12px] -right-[16px] z-20">
+      <Button
+        onClick={() => setIsOpen?.()}
+        className="rounded-md w-8 h-8"
+        variant="outline"
+        size="icon"
+      >
+        <ChevronLeft
+          className={cn(
+            "h-4 w-4 transition-transform ease-in-out duration-700",
+            isOpen === false ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </Button>
+    </div>
+  );
+}

frontend/components/admin-panel/sidebar.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { Menu } from "@/components/admin-panel/menu";
+import { SidebarToggle } from "@/components/admin-panel/sidebar-toggle";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/hooks/use-sidebar";
+import { useStore } from "@/hooks/use-store";
+import { cn } from "@/lib/utils";
+import { PanelsTopLeft } from "lucide-react";
+import Link from "next/link";
+
+export function Sidebar() {
+  const sidebar = useStore(useSidebar, (x) => x);
+  if (!sidebar) return null;
+  const { isOpen, toggleOpen, getOpenState, setIsHover, settings } = sidebar;
+  return (
+    <aside
+      className={cn(
+        "fixed top-0 left-0 z-20 h-screen -translate-x-full lg:translate-x-0 transition-[width] ease-in-out duration-300",
+        !getOpenState() ? "w-[90px]" : "w-72",
+        settings.disabled && "hidden"
+      )}
+    >
+      <SidebarToggle isOpen={isOpen} setIsOpen={toggleOpen} />
+      <div
+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}
+        className="relative h-full flex flex-col px-3 py-4 overflow-y-auto shadow-md dark:shadow-zinc-800"
+      >
+        <Button
+          className={cn(
+            "transition-transform ease-in-out duration-300 mb-1",
+            !getOpenState() ? "translate-x-1" : "translate-x-0"
+          )}
+          variant="link"
+          asChild
+        >
+          <Link href="/" className="flex items-center gap-2">
+            <PanelsTopLeft className="w-6 h-6 mr-1" />
+            <h1
+              className={cn(
+                "font-bold text-lg whitespace-nowrap transition-[transform,opacity,display] ease-in-out duration-300",
+                !getOpenState()
+                  ? "-translate-x-96 opacity-0 hidden"
+                  : "translate-x-0 opacity-100"
+              )}
+            >
+              ERP
+            </h1>
+          </Link>
+        </Button>
+        <Menu isOpen={getOpenState()} />
+      </div>
+    </aside>
+  );
+}

frontend/components/admin-panel/user-nav.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { LayoutGrid, LogOut, User } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function UserNav() {
+  return (
+    <DropdownMenu>
+      <TooltipProvider disableHoverableContent>
+        <Tooltip delayDuration={100}>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className="relative h-8 w-8 rounded-full"
+              >
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src="#" alt="Avatar" />
+                  <AvatarFallback className="bg-transparent">JD</AvatarFallback>
+                </Avatar>
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Profile</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">John Doe</p>
+            <p className="text-xs leading-none text-muted-foreground">
+              johndoe@example.com
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem className="hover:cursor-pointer" asChild>
+            <Link href="/dashboard" className="flex items-center">
+              <LayoutGrid className="w-4 h-4 mr-3 text-muted-foreground" />
+              Dashboard
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="hover:cursor-pointer" asChild>
+            <Link href="/account" className="flex items-center">
+              <User className="w-4 h-4 mr-3 text-muted-foreground" />
+              Account
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="hover:cursor-pointer" onClick={() => {}}>
+          <LogOut className="w-4 h-4 mr-3 text-muted-foreground" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

frontend/components/auth/actions.ts

@@ -0,0 +1,78 @@
+"use server";
+
+import { SignupFormSchema, FormState } from "../../lib/definitions";
+import { login } from "@/lib/session";
+
+const apiUrl = process.env.NEXT_SERVER_API_URL;
+
+export async function signup(state: FormState, formData: FormData) {
+  // Validate form fields
+  const validatedFields = SignupFormSchema.safeParse({
+    name: formData.get("name"),
+    password: formData.get("password"),
+  });
+
+  // If any form fields are invalid, return early
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  // Call the provider or db to create a user...
+  const name = formData.get("name") as string;
+  const password = formData.get("password") as string;
+
+  const payload = {
+    name,
+    password,
+  };
+
+  try {
+    const response = await fetch(`${apiUrl}/auth/signup`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      console.error("Response status:", response.status);
+      throw new Error("Failed to submit form");
+    } else {
+    }
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}
+
+export async function signin(name: string, password: string) {
+  const payload = {
+    name,
+    password,
+  };
+
+  try {
+    const response = await fetch(`${apiUrl}/auth/signin`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      return false;
+    }
+
+    await login(name);
+    return true;
+  } catch (error) {
+    console.error("Error submitting form:", error);
+    throw new Error("An error occurred while submitting the form.");
+  }
+}

frontend/components/auth/signin-form.tsx

@@ -0,0 +1,117 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { signin } from "./actions"; // optional: remove if you use your own API
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { toast, Bounce } from "react-toastify";
+import { useRouter } from "next/navigation";
+
+type FormData = {
+  name: string;
+  password: string;
+};
+
+export default function SignInPage() {
+  const { register, handleSubmit, formState } = useForm<FormData>({
+    mode: "onSubmit",
+  });
+  const router = useRouter();
+
+  async function onSubmit(data: FormData) {
+    // Example with next-auth credential sign in (optional)
+    // If you use your own API, replace this block with a fetch to /api/auth/signin
+    const res = await signin(data.name, data.password);
+    if (res) {
+      router.push("/dashboard");
+    } else {
+      toast.error("Falsche Anmeldedaten!", {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Anmelden</CardTitle>
+          <CardDescription>
+            Nutze deinen Namen und Passwort zum anmelden.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            id="signin-form"
+            onSubmit={handleSubmit(onSubmit)}
+            className="space-y-4"
+          >
+            <div>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="Dein Name"
+                suppressHydrationWarning={true}
+                {...register("name", { required: "Name is required" })}
+                aria-invalid={Boolean(formState.errors.name)}
+              />
+              {formState.errors.name && (
+                <p className="text-sm text-red-600 mt-1">
+                  {formState.errors.name.message}
+                </p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Dein Passwort"
+                suppressHydrationWarning={true}
+                {...register("password", {
+                  required: "Password is required",
+                  minLength: 4,
+                })}
+                aria-invalid={Boolean(formState.errors.password)}
+              />
+              {formState.errors.password && (
+                <p className="text-sm text-red-600 mt-1">
+                  {formState.errors.password.type === "minLength"
+                    ? "Password must be at least 6 characters"
+                    : formState.errors.password.message}
+                </p>
+              )}
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <div className="w-full flex justify-end">
+            <Button
+              form="signin-form"
+              type="submit"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting ? "Anmelden..." : "Anmelden"}
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

frontend/components/auth/signup-form.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { signup } from "./actions";
+import { useActionState } from "react";
+
+export default function SignupForm() {
+  const [state, action, pending] = useActionState(signup, undefined);
+
+  return (
+    <form action={action}>
+      <div>
+        <label htmlFor="name">Name</label>
+        <input id="name" name="name" placeholder="Name" />
+      </div>
+      {state?.errors?.name && <p>{state.errors.name}</p>}
+      <div>
+        <label htmlFor="password">Password</label>
+        <input id="password" name="password" type="password" />
+      </div>
+      {state?.errors?.password && (
+        <div>
+          <p>Password must:</p>
+          <ul>
+            {state.errors.password.map((error) => (
+              <li key={error}>- {error}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <button disabled={pending} type="submit">
+        Sign Up
+      </button>
+    </form>
+  );
+}

frontend/components/header.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+export default function Header() {
+  return (
+    <header className="bg-gray-900 text-white shadow-md">
+      <nav className="flex justify-between items-center max-w-7xl mx-auto p-4">
+        {/* Logo */}
+        <h1 className="text-2xl font-bold tracking-wide">
+          <Link href="/" className="hover:text-gray-300">
+            Print Auftrag
+          </Link>
+        </h1>
+
+        {/* Navigation Links */}
+        <ul className="flex space-x-6 text-lg">
+          <li>
+            <Link
+              href="/generateFlaechendruck"
+              className="hover:text-gray-300 transition-colors duration-200"
+            >
+              PDF Generating
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="/"
+              className="hover:text-gray-300 transition-colors duration-200"
+            >
+              Vorlagen
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}

frontend/components/mode-toggle.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider
+} from "@/components/ui/tooltip";
+
+export function ModeToggle() {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <TooltipProvider disableHoverableContent>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <Button
+            className="rounded-full w-8 h-8 bg-background mr-2"
+            variant="outline"
+            size="icon"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          >
+            <SunIcon className="w-[1.2rem] h-[1.2rem] rotate-90 scale-0 transition-transform ease-in-out duration-500 dark:rotate-0 dark:scale-100" />
+            <MoonIcon className="absolute w-[1.2rem] h-[1.2rem] rotate-0 scale-1000 transition-transform ease-in-out duration-500 dark:-rotate-90 dark:scale-0" />
+            <span className="sr-only">Switch Theme</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Switch Theme</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

frontend/components/providers/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider, ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

frontend/components/table.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { deleteVorlageFlaechendruck } from "./action";
+
+export default function Table({
+  data,
+}: {
+  data: {
+    id: number;
+    printer: string;
+    product_type: string;
+    height: number;
+    width: number;
+    coordinates: {
+      x: number;
+      y: number;
+      rotation: number;
+    }[];
+  }[];
+}) {
+  async function onDelete(id: number) {
+    try {
+      await deleteVorlageFlaechendruck(id);
+
+      window.location.reload();
+    } catch (error) {
+      console.error(error);
+      alert("An error occurred while deleting the item.");
+    }
+  }
+  return (
+    <div className="p-6 bg-gray-50 min-h-screen">
+      <div className="overflow-x-auto">
+        <table className="table-auto border-collapse border border-gray-300 w-full bg-white shadow-md rounded-lg">
+          <thead>
+            <tr className="bg-gray-100 text-gray-700">
+              <th className="border border-gray-300 px-4 py-2">Printer</th>
+              <th className="border border-gray-300 px-4 py-2">Product Type</th>
+              <th className="border border-gray-300 px-4 py-2">Height</th>
+              <th className="border border-gray-300 px-4 py-2">Width</th>
+              <th className="border border-gray-300 px-4 py-2">Coordinates</th>
+              <th className="border border-gray-300 px-4 py-2">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item) => (
+              <tr
+                key={item.id}
+                className="hover:bg-gray-50 transition duration-200"
+              >
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.printer}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.product_type}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.height}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.width}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  <ul className="list-disc list-inside">
+                    {item.coordinates.map((coord, index) => (
+                      <li key={index} className="text-sm text-gray-600">
+                        X: {coord.x}, Y: {coord.y}, Rotation: {coord.rotation}
+                      </li>
+                    ))}
+                  </ul>
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  <button
+                    onClick={() => onDelete(item.id)}
+                    className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition duration-200"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

frontend/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

frontend/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

frontend/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

frontend/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

frontend/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

frontend/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

frontend/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

frontend/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+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 } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  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
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

frontend/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

frontend/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

frontend/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

frontend/components/ui/select.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          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)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

frontend/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

frontend/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

frontend/components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

frontend/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

frontend/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

frontend/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/components/upload-form/action.ts

@@ -0,0 +1,57 @@
+"use server";
+import { main, OrderData } from "./orderUpdateBillbee";
+
+export async function uploadFile(formData: FormData) {
+  const file = formData.get("file") as File;
+
+  // Check if the file is a CSV
+  if (!file || (file.type !== "text/csv" && !file.name.endsWith(".csv"))) {
+    return { message: "Ausgewählte Datei ist keine CSV", status: false };
+  }
+  const arrayBuffer = await file.arrayBuffer();
+  const buffer = new Uint8Array(arrayBuffer);
+
+  // Decode the buffer to a string
+  const decoder: TextDecoder = new TextDecoder("utf-8");
+  const csvContent: string = decoder.decode(buffer);
+
+  // Determine the delimiter (comma or semicolon)
+  const delimiter = csvContent.includes(";") ? ";" : ",";
+
+  // Parse the CSV content using the detected delimiter
+  const rows: string[][] = csvContent
+    .split("\n")
+    .map((row) => row.split(delimiter));
+
+  const requiredHeaders = ["Bestellnummer", "Sendungsnummer"];
+  const headers: string[] = rows[0].map((header) =>
+    header.trim().replace(/\r/g, "")
+  );
+  // Check if CSV containes required Headers
+  const allHeadersPresent: boolean = requiredHeaders.every((header) =>
+    headers.includes(header)
+  );
+  if (!allHeadersPresent) {
+    return {
+      message:
+        'CSV enthält nicht die notwendigen Header "Bestellnummer" und "Sendungsnummer"',
+      status: false,
+    };
+  }
+
+  // Get the indices of the required headers
+  const indices: number[] = requiredHeaders.map((header) =>
+    headers.indexOf(header)
+  );
+
+  // Create an array of objects with only the required headers
+  const filteredData: OrderData[] = rows.slice(1).map((row) => {
+    const orderData: OrderData = {
+      Bestellnummer: row[indices[0]] ? row[indices[0]].trim() : null,
+      Sendungsnummer: row[indices[1]] ? row[indices[1]].trim() : null,
+    };
+    return orderData;
+  });
+
+  return { data: await main(filteredData), status: true };
+}

frontend/components/upload-form/orderUpdateBillbee.ts

@@ -0,0 +1,120 @@
+"use server";
+
+const API_KEY = process.env.BILLBEE_API_KEY as string;
+const USERNAME = process.env.BILLBEE_USERNAME as string;
+const API_PASSWORD = process.env.BILLBEE_PASSWORD as string;
+
+const BASE_URL = "https://api.billbee.io/api/v1";
+
+export interface OrderData {
+  Bestellnummer: string | null;
+  Sendungsnummer: string | null;
+}
+
+export interface RespError {
+  orderId: string | null;
+  error: string;
+}
+
+async function addShipment(orderId: string, shippingId: string) {
+  const url = `${BASE_URL}/orders/${orderId}/shipment`;
+  const headers: HeadersInit = {
+    "X-Billbee-Api-Key": API_KEY,
+    accept: "application/json",
+    "Content-Type": "application/json",
+    Authorization: "Basic " + btoa(`${USERNAME}:${API_PASSWORD}`),
+  };
+
+  const payload = {
+    ShippingId: shippingId,
+    ShippingProviderId: 6082,
+    ShipmentType: 0,
+  };
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: headers,
+    body: JSON.stringify(payload),
+    credentials: "include", // Include credentials for basic auth
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error ${response.status}: ${await response.text()}`);
+  }
+
+  // Update order status
+  const updateUrl = `${BASE_URL}/orders/${orderId}/orderstate`;
+  const updatePayload = {
+    NewStateId: 4,
+  };
+
+  const updateResponse = await fetch(updateUrl, {
+    method: "PUT",
+    headers: headers,
+    body: JSON.stringify(updatePayload),
+    credentials: "include",
+  });
+
+  if (!updateResponse.ok) {
+    throw new Error(
+      `Error updating order status ${
+        updateResponse.status
+      }: ${await updateResponse.text()}`
+    );
+  }
+}
+
+async function getByExternalId(externalId: string) {
+  const url = `${BASE_URL}/orders/findbyextref/${externalId}`;
+  const headers: HeadersInit = {
+    "X-Billbee-Api-Key": API_KEY,
+    accept: "application/json",
+    Authorization: "Basic " + btoa(`${USERNAME}:${API_PASSWORD}`),
+  };
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: headers,
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error ${response.status}: ${await response.text()}`);
+  }
+
+  return await response.json();
+}
+
+async function updateCompleteShipment(orderId: string, shippingId: string) {
+  const res = await getByExternalId(orderId);
+  const content = res.Data;
+  const billbeeId = content.BillBeeOrderId;
+  await addShipment(billbeeId, shippingId);
+}
+
+export async function main(data: OrderData[]) {
+  const errors: RespError[] = [];
+
+  for (const { Bestellnummer, Sendungsnummer } of data) {
+    if (!Bestellnummer || !Sendungsnummer) {
+      errors.push({
+        orderId: Bestellnummer,
+        error: "Order ID or Shipping ID is None",
+      });
+      continue;
+    }
+
+    try {
+      await updateCompleteShipment(Bestellnummer, Sendungsnummer);
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : "Unknown error";
+      console.error(`Error processing order ${Bestellnummer}: ${errorMessage}`);
+      errors.push({ orderId: Bestellnummer, error: errorMessage });
+    }
+  }
+  const result = {
+    successful: data.length - errors.length,
+    errors: errors,
+  };
+  return result;
+}

frontend/components/upload-form/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { uploadFile } from "./action";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { RespError } from "./orderUpdateBillbee";
+import { toast, Bounce } from "react-toastify";
+
+export default function UploadForm() {
+  const fileInput = useRef<HTMLInputElement | null>(null);
+  const [uploadResult, setUploadResult] = useState<{
+    successful: number;
+    errors: RespError[];
+  } | null>(null);
+  const [isProcessing, setIsProcessing] = useState<true | false>(false);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault(); // Prevent the default form submission
+
+    if (fileInput.current?.files) {
+      const file = fileInput.current.files[0];
+      const data = new FormData();
+      data.append("file", file);
+
+      setIsProcessing(true);
+      const res = await uploadFile(data);
+      if (res.status && res.data) {
+        setUploadResult(res.data);
+        toast.success(res.message, {
+          position: "bottom-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: false,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+          transition: Bounce,
+        });
+      } else {
+        toast.error(res.message, {
+          position: "bottom-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: false,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+          transition: Bounce,
+        });
+      }
+
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
+      <Card className="w-full max-w-sm mb-4">
+        {" "}
+        {/* Added margin-bottom for spacing */}
+        <CardHeader>
+          <CardTitle>Lade eine Datei hoch</CardTitle>
+        </CardHeader>
+        {!isProcessing ? (
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <CardContent className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="file">Choose a file</Label>
+                <Input id="file" type="file" name="file" ref={fileInput} />
+              </div>
+            </CardContent>
+
+            <CardFooter className="flex justify-end">
+              <Button type="submit">Submit</Button>
+            </CardFooter>
+          </form>
+        ) : (
+          <div className="flex items-center justify-center w-full h-32">
+            <div role="status">
+              <svg
+                aria-hidden="true"
+                className="w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-black"
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              <span className="sr-only">Loading...</span>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {uploadResult && (
+        <div className="w-full max-w-sm">
+          <Card className="overflow-hidden">
+            <CardHeader>
+              <CardTitle>Upload Result</CardTitle>
+            </CardHeader>
+            <CardContent className="h-64 overflow-y-auto p-4">
+              <p className="font-semibold">
+                Anzahl erfolgreicher Updates: {uploadResult.successful}
+              </p>
+
+              {uploadResult.errors.length > 0 && (
+                <div className="mt-2">
+                  <h4 className="font-semibold">Errors:</h4>
+                  <ul className="list-disc list-inside">
+                    {uploadResult.errors.map((error, index) => (
+                      <li key={index}>
+                        <span className="font-medium">Order ID:</span>{" "}
+                        {error.orderId || "N/A"},
+                        <span className="font-medium"> Error:</span>{" "}
+                        {error.error}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

frontend/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

frontend/hooks/use-sidebar.ts

@@ -0,0 +1,49 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import { produce } from "immer";
+
+type SidebarSettings = { disabled: boolean; isHoverOpen: boolean };
+type SidebarStore = {
+  isOpen: boolean;
+  isHover: boolean;
+  settings: SidebarSettings;
+  toggleOpen: () => void;
+  setIsOpen: (isOpen: boolean) => void;
+  setIsHover: (isHover: boolean) => void;
+  getOpenState: () => boolean;
+  setSettings: (settings: Partial<SidebarSettings>) => void;
+};
+
+export const useSidebar = create(
+  persist<SidebarStore>(
+    (set, get) => ({
+      isOpen: true,
+      isHover: false,
+      settings: { disabled: false, isHoverOpen: false },
+      toggleOpen: () => {
+        set({ isOpen: !get().isOpen });
+      },
+      setIsOpen: (isOpen: boolean) => {
+        set({ isOpen });
+      },
+      setIsHover: (isHover: boolean) => {
+        set({ isHover });
+      },
+      getOpenState: () => {
+        const state = get();
+        return state.isOpen || (state.settings.isHoverOpen && state.isHover);
+      },
+      setSettings: (settings: Partial<SidebarSettings>) => {
+        set(
+          produce((state: SidebarStore) => {
+            state.settings = { ...state.settings, ...settings };
+          })
+        );
+      }
+    }),
+    {
+      name: "sidebar",
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+);

frontend/hooks/use-store.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+/**
+ * This hook fix hydration when use persist to save hook data to localStorage
+ */
+export const useStore = <T, F>(
+  store: (callback: (state: T) => unknown) => unknown,
+  callback: (state: T) => F
+) => {
+  const result = store(callback) as F;
+  const [data, setData] = useState<F>();
+
+  useEffect(() => {
+    setData(result);
+  }, [result]);
+
+  return data;
+};

frontend/lib/definitions.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+
+export const SignupFormSchema = z.object({
+  name: z
+    .string()
+    .min(2, { message: "Name must be at least 2 characters long." })
+    .trim(),
+  password: z
+    .string()
+    .min(4, { message: "Be at least 8 characters long" })
+    .trim(),
+});
+
+export type FormState =
+  | {
+      errors?: {
+        name?: string[];
+        email?: string[];
+        password?: string[];
+      };
+      message?: string;
+    }
+  | undefined;
+
+export interface SessionPayload {
+  userId: string;
+  expiresAt: Date;
+}

frontend/lib/menu-list.ts

@@ -0,0 +1,121 @@
+import { Tag, SquarePen, Barcode, LucideIcon } from "lucide-react";
+
+type Submenu = {
+  href: string;
+  label: string;
+  active?: boolean;
+};
+
+type Menu = {
+  href: string;
+  label: string;
+  active?: boolean;
+  icon: LucideIcon;
+  submenus?: Submenu[];
+};
+
+type Group = {
+  groupLabel: string;
+  menus: Menu[];
+};
+
+export function getMenuList(pathname: string): Group[] {
+  return [
+    /*
+    {
+      groupLabel: "",
+      menus: [
+        {
+          href: "/dashboard",
+          label: "Dashboard",
+          icon: LayoutGrid,
+          submenus: []
+        }
+      ]
+    },
+    */
+    {
+      groupLabel: "Flächendruck Service",
+      menus: [
+        {
+          href: "/dashboard/generateFlaechendruck",
+          label: "Generieren",
+          icon: Tag,
+          active: pathname === "/dashboard/generateFlaechendruck",
+        },
+        {
+          href: "/dashboard/vorlagenFlaechendruck",
+          label: "Vorlagen",
+          icon: SquarePen,
+          active: pathname === "/dashboard/vorlagenFlaechendruck",
+
+          /*submenus: [
+            {
+              href: "/posts",
+              label: "All Posts"
+            },
+            {
+              href: "/posts/new",
+              label: "New Post"
+            }
+          ]*/
+        },
+      ],
+    },
+    {
+      groupLabel: "Rollendruck Service",
+      menus: [
+        {
+          href: "/dashboard/generateRollendruck",
+          label: "Generieren",
+          icon: Tag,
+          active: pathname === "/dashboard/generateRollendruck",
+        },
+        {
+          href: "/dashboard/vorlagenRollendruck",
+          label: "Vorlagen",
+          icon: SquarePen,
+          active: pathname === "/dashboard/vorlagenRollendruck",
+
+          /*submenus: [
+            {
+              href: "/posts",
+              label: "All Posts"
+            },
+            {
+              href: "/posts/new",
+              label: "New Post"
+            }
+          ]*/
+        },
+      ],
+    },
+    {
+      groupLabel: "Billbee Service",
+      menus: [
+        {
+          href: "/dashboard/updateOrders",
+          label: "Update Sendungen",
+          icon: Barcode,
+          active: pathname === "/dashboard/updateOrders",
+        },
+      ],
+    },
+    /*
+    {
+      groupLabel: "Settings",
+      menus: [
+        {
+          href: "/users",
+          label: "Users",
+          icon: Users
+        },
+        {
+          href: "/account",
+          label: "Account",
+          icon: Settings
+        }
+      ]
+    }*/
+  ];
+}

frontend/lib/session.ts

@@ -0,0 +1,56 @@
+"use server";
+
+import { SignJWT, jwtVerify, JWTPayload } from "jose";
+import { cookies } from "next/headers";
+
+const secretKey = process.env.SESSION_SECRET;
+const key = new TextEncoder().encode(secretKey);
+
+type SessionPayload = JWTPayload & {
+  user?: { name: string };
+  expires?: Date;
+};
+
+export async function encrypt(payload: SessionPayload) {
+  return await new SignJWT(payload)
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime("7d")
+    .sign(key);
+}
+
+export async function decrypt(session: string | undefined = "") {
+  try {
+    const { payload } = await jwtVerify(session, key, {
+      algorithms: ["HS256"],
+    });
+    return payload;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (error) {
+    return null;
+  }
+}
+
+export async function login(name: string) {
+  // Verify credentials && get the user
+
+  const user = { name: name };
+
+  // Create the session
+  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+  const session = await encrypt({ user, expires });
+
+  // Save the session in a cookie
+  (await cookies()).set("session", session, { expires, httpOnly: true });
+}
+
+export async function logout() {
+  // Destroy the session
+  (await cookies()).set("session", "", { expires: new Date(0) });
+}
+
+export async function getSession() {
+  const session = (await cookies()).get("session")?.value;
+  if (!session) return null;
+  return await decrypt(session);
+}

frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/middleware.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import { decrypt } from "@/lib/session";
+import { cookies } from "next/headers";
+
+// Define all public routes here
+const publicRoutes = ["/login"];
+
+export default async function middleware(req: NextRequest) {
+  const path = req.nextUrl.pathname;
+  const isPublicRoute = publicRoutes.includes(path);
+
+  // Get the session cookie and decrypt it
+  const cookie = (await cookies()).get("session")?.value;
+  const session = await decrypt(cookie);
+
+  // If a user is NOT authenticated and is trying to access a PROTECTED route,
+  // redirect them to the login page.
+  if (!session?.user && !isPublicRoute) {
+    return NextResponse.redirect(new URL("/login", req.nextUrl));
+  }
+
+  // If a user IS authenticated and is trying to access a PUBLIC route (like /login),
+  // redirect them to a protected route (e.g., a dashboard or home page).
+  if (session?.user && isPublicRoute) {
+    return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
+  }
+
+  if (session?.user && path == "/") {
+    return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
+  }
+
+  // Otherwise, allow the request to proceed
+  return NextResponse.next();
+}
+
+// Routes Middleware should not run on
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
+};

frontend/next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  experimental: {
+    serverActions: {
+      bodySizeLimit: "5gb", // Erhöht die Grenze auf 10 MB
+    },
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack -p 3050",
+    "build": "next build",
+    "start": "next start -p 3050",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "curl": "^0.1.4",
+    "immer": "^10.1.1",
+    "jose": "^6.1.0",
+    "lucide-react": "^0.484.0",
+    "next": "15.2.4",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-toastify": "^11.0.5",
+    "tailwind-merge": "^3.0.2",
+    "tw-animate-css": "^1.2.4",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.4",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "optionalDependencies": {
+    "@tailwindcss/oxide-linux-arm64-gnu": "^4.0.15",
+    "lightningcss-linux-arm64-gnu": "^1.29.3"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

frontend/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/next.svg

@@ -0,0 +1 @@
+<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>

frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}