"feat: Added debug server and related components for improved development experience"

2025-05-23 07:24:51 +02:00
parent d457a8d86b
commit 9f6219832c
189 changed files with 35730 additions and 133 deletions
--- a/frontend/src/app/admin/about/page.tsx
+++ b/frontend/src/app/admin/about/page.tsx
@@ -0,0 +1,32 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Über MYP",
+};
+
+export default async function AdminPage() {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Über MYP</CardTitle>
+				<CardDescription>
+					<i className="italic">MYP &mdash; Manage Your Printer</i>
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="gap-y-2 flex flex-col">
+				<p className="max-w-[80ch]">
+					<strong>MYP</strong> ist eine Webanwendung zur Reservierung von 3D-Druckern. Sie wurde im Rahmen des
+					Abschlussprojektes der Fachinformatiker Ausbildung für Daten- und Prozessanalyse für die Technische
+					Berufsausbildung des Mercedes-Benz Werkes Berlin-Marienfelde entwickelt.
+				</p>
+				<p>
+					&copy; 2024{" "}
+					<a href="https://linkedin.com/in/torben-haack" target="_blank" rel="noreferrer">
+						Torben Haack
+					</a>
+				</p>
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/admin-sidebar.tsx
+++ b/frontend/src/app/admin/admin-sidebar.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { cn } from "@/utils/styles";
+import { FileIcon, HeartIcon, LayoutDashboardIcon, PrinterIcon, UsersIcon, WrenchIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface AdminSite {
+	name: string;
+	path: string;
+	icon: React.ReactNode;
+}
+
+export function AdminSidebar() {
+	const pathname = usePathname();
+	const adminSites: AdminSite[] = [
+		{
+			name: "Dashboard",
+			path: "/admin",
+			icon: <LayoutDashboardIcon className="w-4 h-4" />,
+		},
+		{
+			name: "Benutzer",
+			path: "/admin/users",
+			icon: <UsersIcon className="w-4 h-4" />,
+		},
+		{
+			name: "Drucker",
+			path: "/admin/printers",
+			icon: <PrinterIcon className="w-4 h-4" />,
+		},
+		{
+			name: "Druckaufträge",
+			path: "/admin/jobs",
+			icon: <FileIcon className="w-4 h-4" />,
+		},
+		{
+			name: "Einstellungen",
+			path: "/admin/settings",
+			icon: <WrenchIcon className="w-4 h-4" />,
+		},
+		{
+			name: "Über MYP",
+			path: "/admin/about",
+			icon: <HeartIcon className="w-4 h-4" />,
+		},
+	];
+
+	return (
+		<ul className="w-full">
+			{adminSites.map((site) => (
+				<li key={site.path}>
+					<Link
+						href={site.path}
+						className={cn("flex items-center gap-2 p-2 rounded hover:bg-muted", {
+							"font-semibold": pathname === site.path,
+						})}
+					>
+						{site.icon}
+						<span>{site.name}</span>
+					</Link>
+				</li>
+			))}
+		</ul>
+	);
+}
--- a/frontend/src/app/admin/charts/printer-error-chart.tsx
+++ b/frontend/src/app/admin/charts/printer-error-chart.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
+
+export const description = "Ein Säulendiagramm zur Darstellung der Abbruchgründe und ihrer Häufigkeit";
+
+interface AbortReasonCountChartProps {
+	abortReasonCount: {
+		abortReason: string;
+		count: number;
+	}[];
+}
+
+const chartConfig = {
+	abortReason: {
+		label: "Abbruchgrund",
+	},
+} satisfies ChartConfig;
+
+export function AbortReasonCountChart({ abortReasonCount }: AbortReasonCountChartProps) {
+	// Transform data to fit the chart structure
+	const chartData = abortReasonCount.map((reason) => ({
+		abortReason: reason.abortReason,
+		count: reason.count,
+	}));
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Abbruchgründe</CardTitle>
+				<CardDescription>Häufigkeit der Abbruchgründe für Druckaufträge</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer config={chartConfig}>
+					<BarChart
+						accessibilityLayer
+						data={chartData}
+						margin={{
+							top: 20,
+						}}
+					>
+						<CartesianGrid vertical={false} strokeDasharray="3 3" />
+						<XAxis
+							dataKey="abortReason"
+							tickLine={false}
+							tickMargin={10}
+							axisLine={false}
+							tickFormatter={(value) => value}
+						/>
+						<YAxis tickFormatter={(value) => `${value}`} />
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Bar dataKey="count" fill="hsl(var(--chart-1))" radius={8}>
+							<LabelList
+								position="top"
+								offset={12}
+								className="fill-foreground"
+								fontSize={12}
+								formatter={(value: number) => `${value}`}
+							/>
+						</Bar>
+					</BarChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/charts/printer-error-rate.tsx
+++ b/frontend/src/app/admin/charts/printer-error-rate.tsx
@@ -0,0 +1,66 @@
+"use client";
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import type { PrinterErrorRate } from "@/utils/analytics/error-rate";
+
+export const description = "Ein Säulendiagramm zur Darstellung der Fehlerrate";
+
+interface PrinterErrorRateChartProps {
+	printerErrorRate: PrinterErrorRate[];
+}
+
+const chartConfig = {
+	errorRate: {
+		label: "Fehlerrate",
+	},
+} satisfies ChartConfig;
+
+export function PrinterErrorRateChart({ printerErrorRate }: PrinterErrorRateChartProps) {
+	// Transform data to fit the chart structure
+	const chartData = printerErrorRate.map((printer) => ({
+		printer: printer.name,
+		errorRate: printer.errorRate,
+	}));
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Fehlerrate</CardTitle>
+				<CardDescription>Fehlerrate der Drucker in Prozent</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer config={chartConfig}>
+					<BarChart
+						accessibilityLayer
+						data={chartData}
+						margin={{
+							top: 20,
+						}}
+					>
+						<CartesianGrid vertical={false} strokeDasharray="3 3" />
+						<XAxis
+							dataKey="printer"
+							tickLine={false}
+							tickMargin={10}
+							axisLine={false}
+							tickFormatter={(value) => value}
+						/>
+						<YAxis tickFormatter={(value) => `${value}%`} />
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Bar dataKey="errorRate" fill="hsl(var(--chart-1))" radius={8}>
+							<LabelList
+								position="top"
+								offset={12}
+								className="fill-foreground"
+								fontSize={12}
+								formatter={(value: number) => `${value}%`}
+							/>
+						</Bar>
+					</BarChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/charts/printer-forecast.tsx
+++ b/frontend/src/app/admin/charts/printer-forecast.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+export const description = "Ein Bereichsdiagramm zur Darstellung der prognostizierten Nutzung pro Wochentag";
+
+interface ForecastData {
+	day: number; // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
+	usageMinutes: number;
+}
+
+interface ForecastChartProps {
+	forecastData: ForecastData[];
+}
+
+const chartConfig = {
+	usage: {
+		label: "Prognostizierte Nutzung",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
+const daysOfWeek = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+
+export function ForecastPrinterUsageChart({ forecastData }: ForecastChartProps) {
+	// Transform and slice data to fit the chart structure
+	const chartData = forecastData.map((data) => ({
+		//slice(1, forecastData.length - 1).
+		day: daysOfWeek[data.day], // Map day number to weekday name
+		usage: data.usageMinutes,
+	}));
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Prognostizierte Nutzung pro Wochentag</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer className="h-64 w-full" config={chartConfig}>
+					<AreaChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12, top: 12 }}>
+						<CartesianGrid vertical={true} />
+						<XAxis dataKey="day" type="category" tickLine={true} tickMargin={10} axisLine={false} />
+						<YAxis type="number" dataKey="usage" tickLine={false} tickMargin={10} axisLine={false} />
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Area
+							dataKey="usage"
+							type="step"
+							fill="hsl(var(--chart-1))"
+							fillOpacity={0.4}
+							stroke="hsl(var(--chart-1))"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col items-start gap-2 text-sm">
+				<div className="flex items-center gap-2 font-medium leading-none">
+					Zeigt die prognostizierte Nutzungszeit pro Wochentag in Minuten.
+				</div>
+				<div className="leading-none text-muted-foreground">
+					Besten Tage zur Wartung: {bestMaintenanceDays(forecastData)}
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
+
+function bestMaintenanceDays(forecastData: ForecastData[]) {
+	const sortedData = forecastData.map((a) => a).sort((a, b) => a.usageMinutes - b.usageMinutes); // Sort ascending
+
+	const q1Index = Math.floor(sortedData.length * 0.33);
+	const q1 = sortedData[q1Index].usageMinutes; // First quartile (Q1) value
+
+	const filteredData = sortedData.filter((data) => data.usageMinutes <= q1);
+
+	return filteredData
+		.map((data) => {
+			const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+			return days[data.day];
+		})
+		.join(", ");
+}
--- a/frontend/src/app/admin/charts/printer-utilization.tsx
+++ b/frontend/src/app/admin/charts/printer-utilization.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import * as React from "react";
+import { Label, Pie, PieChart } from "recharts";
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+
+export const description = "Nutzung des Druckers";
+
+interface ComponentProps {
+	data: {
+		printerId: string;
+		utilizationPercentage: number;
+		name: string;
+	};
+}
+
+const chartConfig = {} satisfies ChartConfig;
+
+export function PrinterUtilizationChart({ data }: ComponentProps) {
+	const totalUtilization = React.useMemo(() => data.utilizationPercentage, [data]);
+	const dataWithColor = {
+		...data,
+		fill: "rgb(34 197 94)",
+	};
+	const free = {
+		printerId: "-",
+		utilizationPercentage: 1 - data.utilizationPercentage,
+		name: "(Frei)",
+		fill: "rgb(212 212 212)",
+	};
+
+	return (
+		<Card className="flex flex-col">
+			<CardHeader className="items-center pb-0">
+				<CardTitle>{data.name}</CardTitle>
+				<CardDescription>Nutzung des ausgewählten Druckers</CardDescription>
+			</CardHeader>
+			<CardContent className="flex-1 pb-0">
+				<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
+					<PieChart>
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Pie
+							data={[dataWithColor, free]}
+							dataKey="utilizationPercentage"
+							nameKey="name"
+							innerRadius={60}
+							strokeWidth={5}
+						>
+							<Label
+								content={({ viewBox }) => {
+									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+										return (
+											<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+												<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+													{(totalUtilization * 100).toFixed(2)}%
+												</tspan>
+												<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+													Gesamt-Nutzung
+												</tspan>
+											</text>
+										);
+									}
+								}}
+							/>
+						</Pie>
+					</PieChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col gap-2 text-sm">
+				<div className="flex items-center gap-2 font-medium leading-none">
+					Übersicht der Nutzung <TrendingUp className="h-4 w-4" />
+				</div>
+				<div className="leading-none text-muted-foreground">Aktuelle Auslastung des Druckers</div>
+			</CardFooter>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/charts/printer-volume.tsx
+++ b/frontend/src/app/admin/charts/printer-volume.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+
+export const description = "Ein Balkendiagramm mit Beschriftung";
+
+interface PrintVolumes {
+	today: number;
+	thisWeek: number;
+	thisMonth: number;
+}
+
+const chartConfig = {
+	volume: {
+		label: "Volumen",
+	},
+} satisfies ChartConfig;
+
+interface PrinterVolumeChartProps {
+	printerVolume: PrintVolumes;
+}
+
+export function PrinterVolumeChart({ printerVolume }: PrinterVolumeChartProps) {
+	const chartData = [
+		{ period: "Heute", volume: printerVolume.today, color: "hsl(var(--chart-1))" },
+		{ period: "Diese Woche", volume: printerVolume.thisWeek, color: "hsl(var(--chart-2))" },
+		{ period: "Diesen Monat", volume: printerVolume.thisMonth, color: "hsl(var(--chart-3))" },
+	];
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Druckvolumen</CardTitle>
+				<CardDescription>Vergleich: Heute, Diese Woche, Diesen Monat</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer className="h-64 w-full" config={chartConfig}>
+					<BarChart
+						accessibilityLayer
+						data={chartData}
+						margin={{
+							top: 20,
+						}}
+					>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="period"
+							tickLine={false}
+							tickMargin={10}
+							axisLine={false}
+							tickFormatter={(value) => value}
+						/>
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Bar dataKey="volume" fill="var(--color-volume)" radius={8}>
+							<LabelList position="top" offset={12} className="fill-foreground" fontSize={12} />
+						</Bar>
+					</BarChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col items-start gap-2 text-sm">
+				<div className="leading-none text-muted-foreground">
+					Zeigt das Druckvolumen für heute, diese Woche und diesen Monat
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/jobs/page.tsx
+++ b/frontend/src/app/admin/jobs/page.tsx
@@ -0,0 +1,35 @@
+import { columns } from "@/app/my/jobs/columns";
+import { JobsTable } from "@/app/my/jobs/data-table";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/server/db";
+import { printJobs } from "@/server/db/schema";
+import { desc } from "drizzle-orm";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Alle Druckaufträge",
+};
+
+export default async function AdminJobsPage() {
+	const allJobs = await db.query.printJobs.findMany({
+		orderBy: [desc(printJobs.startAt)],
+		with: {
+			user: true,
+			printer: true,
+		},
+	});
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row justify-between items-center">
+				<div>
+					<CardTitle>Druckaufträge</CardTitle>
+					<CardDescription>Alle Druckaufträge</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent>
+				<JobsTable columns={columns} data={allJobs} />
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/layout.tsx
+++ b/frontend/src/app/admin/layout.tsx
@@ -0,0 +1,34 @@
+import { AdminSidebar } from "@/app/admin/admin-sidebar";
+import { validateRequest } from "@/server/auth";
+import { UserRole } from "@/server/auth/permissions";
+import { IS_NOT, guard } from "@/utils/guard";
+import { redirect } from "next/navigation";
+
+interface AdminLayoutProps {
+	children: React.ReactNode;
+}
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminLayout(props: AdminLayoutProps) {
+	const { children } = props;
+	const { user } = await validateRequest();
+
+	if (guard(user, IS_NOT, UserRole.ADMIN)) {
+		redirect("/");
+	}
+
+	return (
+		<main className="flex flex-1 flex-col gap-4">
+			<div className="mx-auto grid w-full gap-2">
+				<h1 className="text-3xl font-semibold">Admin</h1>
+			</div>
+			<div className="mx-auto grid w-full items-start gap-4 md:gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+				<nav className="grid gap-4 text-sm">
+					<AdminSidebar />
+				</nav>
+				<div>{children}</div>
+			</div>
+		</main>
+	);
+}
--- a/frontend/src/app/admin/page.tsx
+++ b/frontend/src/app/admin/page.tsx
@@ -0,0 +1,121 @@
+import { AbortReasonCountChart } from "@/app/admin/charts/printer-error-chart";
+import { PrinterErrorRateChart } from "@/app/admin/charts/printer-error-rate";
+import { ForecastPrinterUsageChart } from "@/app/admin/charts/printer-forecast";
+import { PrinterUtilizationChart } from "@/app/admin/charts/printer-utilization";
+import { PrinterVolumeChart } from "@/app/admin/charts/printer-volume";
+import { DataCard } from "@/components/data-card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { db } from "@/server/db";
+import { calculatePrinterErrorRate } from "@/utils/analytics/error-rate";
+import { calculateAbortReasonsCount } from "@/utils/analytics/errors";
+import { forecastPrinterUsage } from "@/utils/analytics/forecast";
+import { calculatePrinterUtilization } from "@/utils/analytics/utilization";
+import { calculatePrintVolumes } from "@/utils/analytics/volume";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Admin Dashboard",
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminPage() {
+	const currentDate = new Date();
+
+	const lastMonth = new Date();
+	lastMonth.setDate(currentDate.getDate() - 31);
+	const printers = await db.query.printers.findMany({});
+	const printJobs = await db.query.printJobs.findMany({
+		where: (job, { gte }) => gte(job.startAt, lastMonth),
+		with: {
+			printer: true,
+		},
+	});
+	if (printJobs.length < 1) {
+		return (
+			<Card className="w-full">
+				<CardHeader>
+					<CardTitle>Druckaufträge</CardTitle>
+					<CardDescription>Zurzeit sind keine Druckaufträge verfügbar.</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<p>Aktualisieren Sie die Seite oder prüfen Sie später erneut, ob neue Druckaufträge verfügbar sind.</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	const currentPrintJobs = printJobs.filter((job) => {
+		if (job.aborted) return false;
+
+		const endAt = job.startAt.getTime() + job.durationInMinutes * 1000 * 60;
+
+		return endAt > currentDate.getTime();
+	});
+	const occupiedPrinters = currentPrintJobs.map((job) => job.printer.id);
+	const freePrinters = printers.filter((printer) => !occupiedPrinters.includes(printer.id));
+	const printerUtilization = calculatePrinterUtilization(printJobs);
+	const printerVolume = calculatePrintVolumes(printJobs);
+	const printerAbortReasons = calculateAbortReasonsCount(printJobs);
+	const printerErrorRate = calculatePrinterErrorRate(printJobs);
+	const printerForecast = forecastPrinterUsage(printJobs);
+
+	return (
+		<>
+			<Tabs defaultValue={"@general"} className="flex flex-col gap-4 items-start">
+				<TabsList className="bg-neutral-100 w-full py-6">
+					<TabsTrigger value="@general">Allgemein</TabsTrigger>
+					<TabsTrigger value="@capacity">Druckerauslastung</TabsTrigger>
+					<TabsTrigger value="@report">Fehlerberichte</TabsTrigger>
+					<TabsTrigger value="@forecasts">Prognosen</TabsTrigger>
+				</TabsList>
+				<TabsContent value="@general" className="w-full">
+					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<DataCard
+								title="Aktuelle Auslastung"
+								value={`${Math.round((occupiedPrinters.length / (freePrinters.length + occupiedPrinters.length)) * 100)}%`}
+								icon={"Percent"}
+							/>
+						</div>
+						<DataCard title="Aktive Drucker" value={occupiedPrinters.length} icon={"Rotate3d"} />
+						<DataCard title="Freie Drucker" value={freePrinters.length} icon={"PowerOff"} />
+					</div>
+				</TabsContent>
+				<TabsContent value="@capacity" className="w-full">
+					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<PrinterVolumeChart printerVolume={printerVolume} />
+						</div>
+						{printerUtilization.map((data) => (
+							<PrinterUtilizationChart key={data.printerId} data={data} />
+						))}
+					</div>
+				</TabsContent>
+				<TabsContent value="@report" className="w-full">
+					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<PrinterErrorRateChart printerErrorRate={printerErrorRate} />
+						</div>
+						<div className="w-full col-span-2">
+							<AbortReasonCountChart abortReasonCount={printerAbortReasons} />
+						</div>
+					</div>
+				</TabsContent>
+				<TabsContent value="@forecasts" className="w-full">
+					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<ForecastPrinterUsageChart
+								forecastData={printerForecast.map((usageMinutes, index) => ({
+									day: index,
+									usageMinutes,
+								}))}
+							/>
+						</div>
+					</div>
+				</TabsContent>
+			</Tabs>
+		</>
+	);
+}
--- a/frontend/src/app/admin/printers/columns.tsx
+++ b/frontend/src/app/admin/printers/columns.tsx
@@ -0,0 +1,86 @@
+"use client";
+import type { printers } from "@/server/db/schema";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { InferSelectModel } from "drizzle-orm";
+import { ArrowUpDown, MoreHorizontal, PencilIcon } from "lucide-react";
+
+import { EditPrinterDialogContent, EditPrinterDialogTrigger } from "@/app/admin/printers/dialogs/edit-printer";
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { type PrinterStatus, translatePrinterStatus } from "@/utils/printers";
+import { useState } from "react";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+
+export const columns: ColumnDef<InferSelectModel<typeof printers>>[] = [
+	{
+		accessorKey: "id",
+		header: ({ column }) => {
+			return (
+				<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+					ID
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+	},
+	{
+		accessorKey: "name",
+		header: "Name",
+	},
+	{
+		accessorKey: "description",
+		header: "Beschreibung",
+	},
+	{
+		accessorKey: "status",
+		header: "Status",
+		cell: ({ row }) => {
+			const status = row.getValue("status");
+			const translated = translatePrinterStatus(status as PrinterStatus);
+
+			return translated;
+		},
+	},
+	{
+		id: "actions",
+		cell: ({ row }) => {
+			const printer = row.original;
+			const [open, setOpen] = useState(false);
+
+			return (
+				<Dialog open={open} onOpenChange={setOpen}>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="h-8 w-8 p-0">
+								<span className="sr-only">Menu öffnen</span>
+								<MoreHorizontal className="h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
+							<DropdownMenuItem asChild>ABC</DropdownMenuItem>
+							<DropdownMenuItem>
+								<EditPrinterDialogTrigger>
+									<div className="flex items-center gap-2">
+										<PencilIcon className="w-4 h-4" />
+										<span>Bearbeiten</span>
+									</div>
+								</EditPrinterDialogTrigger>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<EditPrinterDialogContent setOpen={setOpen} printer={printer} />
+				</Dialog>
+			);
+		},
+	},
+];
--- a/frontend/src/app/admin/printers/data-table.tsx
+++ b/frontend/src/app/admin/printers/data-table.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import {
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { SlidersHorizontalIcon } from "lucide-react";
+import { useState } from "react";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+		},
+	});
+
+	return (
+		<div>
+			<div className="flex items-center py-4">
+				<Input
+					placeholder="Name filtern..."
+					value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+					onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
+					className="max-w-sm"
+				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline" className="ml-auto flex items-center gap-2">
+							<SlidersHorizontalIcon className="h-4 w-4" />
+							<span>Spalten</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						{table
+							.getAllColumns()
+							.filter((column) => column.getCanHide())
+							.map((column) => {
+								return (
+									<DropdownMenuCheckboxItem
+										key={column.id}
+										className="capitalize"
+										checked={column.getIsVisible()}
+										onCheckedChange={(value) => column.toggleVisibility(!!value)}
+									>
+										{column.id}
+									</DropdownMenuCheckboxItem>
+								);
+							})}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="rounded-md border">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									Keine Ergebnisse gefunden.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+					Zurück
+				</Button>
+				<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+					Nächste Seite
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/app/admin/printers/dialogs/create-printer.tsx
+++ b/frontend/src/app/admin/printers/dialogs/create-printer.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { PrinterForm } from "@/app/admin/printers/form";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { useState } from "react";
+
+interface CreatePrinterDialogProps {
+	children: React.ReactNode;
+}
+
+export function CreatePrinterDialog(props: CreatePrinterDialogProps) {
+	const { children } = props;
+	const [open, setOpen] = useState(false);
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>{children}</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Drucker erstellen</DialogTitle>
+				</DialogHeader>
+				<PrinterForm setOpen={setOpen} />
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/src/app/admin/printers/dialogs/delete-printer.tsx
+++ b/frontend/src/app/admin/printers/dialogs/delete-printer.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
+import { deletePrinter } from "@/server/actions/printers";
+import { TrashIcon } from "lucide-react";
+
+interface DeletePrinterDialogProps {
+	printerId: string;
+	setOpen: (state: boolean) => void;
+}
+export function DeletePrinterDialog(props: DeletePrinterDialogProps) {
+	const { printerId, setOpen } = props;
+	const { toast } = useToast();
+
+	async function onSubmit() {
+		toast({
+			description: "Drucker wird gelöscht...",
+		});
+		try {
+			const result = await deletePrinter(printerId);
+			if (result?.error) {
+				toast({
+					description: result.error,
+					variant: "destructive",
+				});
+			}
+			toast({
+				description: "Drucker wurde gelöscht.",
+			});
+			setOpen(false);
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({
+					description: error.message,
+					variant: "destructive",
+				});
+			} else {
+				toast({
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+					variant: "destructive",
+				});
+			}
+		}
+	}
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" className="gap-2 flex items-center">
+					<TrashIcon className="w-4 h-4" />
+					<span>Drucker löschen</span>
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Bist Du dir sicher?</AlertDialogTitle>
+					<AlertDialogDescription>
+						Diese Aktion kann nicht rückgängig gemacht werden. Der Drucker und die damit verbundenen Daten werden
+						unwiderruflich gelöscht.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Abbrechen</AlertDialogCancel>
+					<AlertDialogAction className="bg-red-500" onClick={onSubmit}>
+						Ja, löschen
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+}
--- a/frontend/src/app/admin/printers/dialogs/edit-printer.tsx
+++ b/frontend/src/app/admin/printers/dialogs/edit-printer.tsx
@@ -0,0 +1,30 @@
+import { PrinterForm } from "@/app/admin/printers/form";
+import { DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import type { InferResultType } from "@/utils/drizzle";
+
+interface EditPrinterDialogTriggerProps {
+	children: React.ReactNode;
+}
+
+export function EditPrinterDialogTrigger(props: EditPrinterDialogTriggerProps) {
+	const { children } = props;
+
+	return <DialogTrigger asChild>{children}</DialogTrigger>;
+}
+
+interface EditPrinterDialogContentProps {
+	printer: InferResultType<"printers">;
+	setOpen: (open: boolean) => void;
+}
+export function EditPrinterDialogContent(props: EditPrinterDialogContentProps) {
+	const { printer, setOpen } = props;
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Drucker bearbeiten</DialogTitle>
+			</DialogHeader>
+			<PrinterForm setOpen={setOpen} printer={printer} />
+		</DialogContent>
+	);
+}
--- a/frontend/src/app/admin/printers/form.tsx
+++ b/frontend/src/app/admin/printers/form.tsx
@@ -0,0 +1,204 @@
+"use client";
+import { DeletePrinterDialog } from "@/app/admin/printers/dialogs/delete-printer";
+import { Button } from "@/components/ui/button";
+import { DialogClose } from "@/components/ui/dialog";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useToast } from "@/components/ui/use-toast";
+import { createPrinter, updatePrinter } from "@/server/actions/printers";
+import type { InferResultType } from "@/utils/drizzle";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SaveIcon, XCircleIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export const formSchema = z.object({
+	name: z
+		.string()
+		.min(2, {
+			message: "Der Name muss mindestens 2 Zeichen lang sein.",
+		})
+		.max(50),
+	description: z
+		.string()
+		.min(2, {
+			message: "Die Beschreibung muss mindestens 2 Zeichen lang sein.",
+		})
+		.max(50),
+	status: z.coerce.number().int().min(0).max(1),
+});
+
+interface PrinterFormProps {
+	printer?: InferResultType<"printers">;
+	setOpen: (state: boolean) => void;
+}
+
+export function PrinterForm(props: PrinterFormProps) {
+	const { printer, setOpen } = props;
+	const { toast } = useToast();
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: printer?.name ?? "",
+			description: printer?.description ?? "",
+			status: printer?.status ?? 0,
+		},
+	});
+
+	// 2. Define a submit handler.
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		// TODO: create or update
+		if (printer) {
+			toast({
+				description: "Drucker wird aktualisiert...",
+			});
+
+			// Update
+			try {
+				const result = await updatePrinter(printer.id, {
+					description: values.description,
+					name: values.name,
+					status: values.status,
+				});
+				if (result?.error) {
+					toast({
+						description: result.error,
+						variant: "destructive",
+					});
+				}
+
+				setOpen(false);
+
+				toast({
+					description: "Drucker wurde aktualisiert.",
+					variant: "default",
+				});
+			} catch (error) {
+				if (error instanceof Error) {
+					toast({
+						description: error.message,
+						variant: "destructive",
+					});
+				} else {
+					toast({
+						description: "Ein unbekannter Fehler ist aufgetreten.",
+						variant: "destructive",
+					});
+				}
+			}
+		} else {
+			toast({
+				description: "Drucker wird erstellt...",
+				variant: "default",
+			});
+
+			// Create
+			try {
+				const result = await createPrinter({
+					description: values.description,
+					name: values.name,
+					status: values.status,
+				});
+				if (result?.error) {
+					toast({
+						description: result.error,
+						variant: "destructive",
+					});
+				}
+
+				setOpen(false);
+
+				toast({
+					description: "Drucker wurde erstellt.",
+					variant: "default",
+				});
+			} catch (error) {
+				if (error instanceof Error) {
+					toast({
+						description: error.message,
+						variant: "destructive",
+					});
+				} else {
+					toast({
+						description: "Ein unbekannter Fehler ist aufgetreten.",
+						variant: "destructive",
+					});
+				}
+			}
+		}
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="name"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Name</FormLabel>
+							<FormControl>
+								<Input placeholder="Anycubic Kobra 2 Pro" {...field} />
+							</FormControl>
+							<FormDescription>Bitte gib einen eindeutigen Namen für den Drucker ein.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="description"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Beschreibung</FormLabel>
+							<FormControl>
+								<Input placeholder="80x80x80 Druckfläche, langsam" {...field} />
+							</FormControl>
+							<FormDescription>Füge eine kurze Beschreibung des Druckers hinzu.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="status"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Status</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a verified email to display" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value={"0"}>Verfügbar</SelectItem>
+									<SelectItem value={"1"}>Außer Betrieb</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormDescription>Wähle den aktuellen Status des Druckers.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<div className="flex justify-between items-center">
+					{printer && <DeletePrinterDialog setOpen={setOpen} printerId={printer?.id} />}
+					{!printer && (
+						<DialogClose asChild>
+							<Button variant="secondary" className="gap-2 flex items-center">
+								<XCircleIcon className="w-4 h-4" />
+								<span>Abbrechen</span>
+							</Button>
+						</DialogClose>
+					)}
+					<Button type="submit" className="gap-2 flex items-center">
+						<SaveIcon className="w-4 h-4" />
+						<span>Speichern</span>
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+}
--- a/frontend/src/app/admin/printers/page.tsx
+++ b/frontend/src/app/admin/printers/page.tsx
@@ -0,0 +1,31 @@
+import { columns } from "@/app/admin/printers/columns";
+import { DataTable } from "@/app/admin/printers/data-table";
+import { CreatePrinterDialog } from "@/app/admin/printers/dialogs/create-printer";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/server/db";
+import { PlusCircleIcon } from "lucide-react";
+
+export default async function AdminPage() {
+	const data = await db.query.printers.findMany();
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row justify-between items-center">
+				<div>
+					<CardTitle>Druckerverwaltung</CardTitle>
+					<CardDescription>Suche, Bearbeite, Lösche und Erstelle Drucker</CardDescription>
+				</div>
+				<CreatePrinterDialog>
+					<Button variant={"default"} className="flex gap-2 items-center">
+						<PlusCircleIcon className="w-4 h-4" />
+						<span>Drucker erstellen</span>
+					</Button>
+				</CreatePrinterDialog>
+			</CardHeader>
+			<CardContent>
+				<DataTable columns={columns} data={data} />
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/settings/download/route.ts
+++ b/frontend/src/app/admin/settings/download/route.ts
@@ -0,0 +1,7 @@
+import fs from "node:fs";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+	return new Response(fs.readFileSync("./db/sqlite.db"));
+}
--- a/frontend/src/app/admin/settings/page.tsx
+++ b/frontend/src/app/admin/settings/page.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Systemeinstellungen",
+};
+
+export default function AdminPage() {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Einstellungen</CardTitle>
+				<CardDescription>Systemeinstellungen</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="flex gap-8 items-center">
+					<p>Datenbank herunterladen</p>
+					<Button variant="default" asChild>
+						<Link href="/admin/settings/download" target="_blank">
+							Herunterladen
+						</Link>
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/admin/users/columns.tsx
+++ b/frontend/src/app/admin/users/columns.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { type UserRole, translateUserRole } from "@/server/auth/permissions";
+import type { users } from "@/server/db/schema";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { InferSelectModel } from "drizzle-orm";
+import {
+	ArrowUpDown,
+	MailIcon,
+	MessageCircleIcon,
+	MoreHorizontal,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Link from "next/link";
+import {
+	EditUserDialogContent,
+	EditUserDialogRoot,
+	EditUserDialogTrigger,
+} from "@/app/admin/users/dialog";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type User = {
+	id: string;
+	github_id: number;
+	username: string;
+	displayName: string;
+	email: string;
+	role: string;
+};
+
+export const columns: ColumnDef<InferSelectModel<typeof users>>[] = [
+	{
+		accessorKey: "id",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					ID
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+	},
+	{
+		accessorKey: "github_id",
+		header: "GitHub ID",
+	},
+	{
+		accessorKey: "username",
+		header: "Username",
+	},
+	{
+		accessorKey: "displayName",
+		header: "Name",
+	},
+	{
+		accessorKey: "email",
+		header: "E-Mail",
+	},
+	{
+		accessorKey: "role",
+		header: "Rolle",
+		cell: ({ row }) => {
+			const role = row.getValue("role");
+			const translated = translateUserRole(role as UserRole);
+
+			return translated;
+		},
+	},
+	{
+		id: "actions",
+		cell: ({ row }) => {
+			const user = row.original;
+
+			return (
+				<EditUserDialogRoot>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="h-8 w-8 p-0">
+								<span className="sr-only">Menu öffnen</span>
+								<MoreHorizontal className="h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
+							<DropdownMenuItem asChild>
+								<Link
+									target="_blank"
+									href={generateTeamsChatURL(user.email)}
+									className="flex gap-2 items-center"
+								>
+									<MessageCircleIcon className="w-4 h-4" />
+									<span>Teams-Chat öffnen</span>
+								</Link>
+							</DropdownMenuItem>
+							<DropdownMenuItem asChild>
+								<Link
+									target="_blank"
+									href={generateEMailURL(user.email)}
+									className="flex gap-2 items-center"
+								>
+									<MailIcon className="w-4 h-4" />
+									<span>E-Mail schicken</span>
+								</Link>
+							</DropdownMenuItem>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem>
+								<EditUserDialogTrigger />
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<EditUserDialogContent user={user as User} />
+				</EditUserDialogRoot>
+			);
+		},
+	},
+];
+
+function generateTeamsChatURL(email: string) {
+	return `https://teams.microsoft.com/l/chat/0/0?users=${email}`;
+}
+
+function generateEMailURL(email: string) {
+	return `mailto:${email}`;
+}
--- a/frontend/src/app/admin/users/data-table.tsx
+++ b/frontend/src/app/admin/users/data-table.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import {
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { SlidersHorizontalIcon } from "lucide-react";
+import { useState } from "react";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+		},
+	});
+
+	return (
+		<div>
+			<div className="flex items-center py-4">
+				<Input
+					placeholder="E-Mails filtern..."
+					value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+					onChange={(event) => table.getColumn("email")?.setFilterValue(event.target.value)}
+					className="max-w-sm"
+				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline" className="ml-auto flex items-center gap-2">
+							<SlidersHorizontalIcon className="h-4 w-4" />
+							<span>Spalten</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						{table
+							.getAllColumns()
+							.filter((column) => column.getCanHide())
+							.map((column) => {
+								return (
+									<DropdownMenuCheckboxItem
+										key={column.id}
+										className="capitalize"
+										checked={column.getIsVisible()}
+										onCheckedChange={(value) => column.toggleVisibility(!!value)}
+									>
+										{column.id}
+									</DropdownMenuCheckboxItem>
+								);
+							})}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="rounded-md border">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									Keine Ergebnisse gefunden.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+					Zurück
+				</Button>
+				<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+					Nächste Seite
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/app/admin/users/dialog.tsx
+++ b/frontend/src/app/admin/users/dialog.tsx
@@ -0,0 +1,56 @@
+import type { User } from "@/app/admin/users/columns";
+import { ProfileForm } from "@/app/admin/users/form";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { PencilIcon } from "lucide-react";
+
+interface EditUserDialogRootProps {
+	children: React.ReactNode;
+}
+
+export function EditUserDialogRoot(props: EditUserDialogRootProps) {
+	const { children } = props;
+
+	return <Dialog>{children}</Dialog>;
+}
+
+export function EditUserDialogTrigger() {
+	return (
+		<DialogTrigger className="flex gap-2 items-center">
+			<PencilIcon className="w-4 h-4" />
+			<span>Benutzer bearbeiten</span>
+		</DialogTrigger>
+	);
+}
+
+interface EditUserDialogContentProps {
+	user: User;
+}
+
+export function EditUserDialogContent(props: EditUserDialogContentProps) {
+	const { user } = props;
+
+	if (!user) {
+		return;
+	}
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Benutzer bearbeiten</DialogTitle>
+				<DialogDescription>
+					<strong>Hinweis:</strong> In den seltensten Fällen sollten die Daten
+					eines Benutzers geändert werden. Dies kann zu unerwarteten Problemen
+					führen.
+				</DialogDescription>
+			</DialogHeader>
+			<ProfileForm user={user} />
+		</DialogContent>
+	);
+}
--- a/frontend/src/app/admin/users/form.tsx
+++ b/frontend/src/app/admin/users/form.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import type { User } from "@/app/admin/users/columns";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { DialogClose } from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/components/ui/use-toast";
+import { deleteUser, updateUser } from "@/server/actions/users";
+import type { UserRole } from "@/server/auth/permissions";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SaveIcon, TrashIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export const formSchema = z.object({
+	username: z
+		.string()
+		.min(2, {
+			message: "Der Benutzername muss mindestens 2 Zeichen lang sein.",
+		})
+		.max(50),
+	displayName: z
+		.string()
+		.min(2, {
+			message: "Der Anzeigename muss mindestens 2 Zeichen lang sein.",
+		})
+		.max(50),
+	email: z.string().email(),
+	role: z.enum(["admin", "user", "guest"]),
+});
+
+interface ProfileFormProps {
+	user: User;
+}
+
+export function ProfileForm(props: ProfileFormProps) {
+	const { user } = props;
+	const { toast } = useToast();
+
+	// 1. Define your form.
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			username: user.username,
+			displayName: user.displayName,
+			email: user.email,
+			role: user.role as UserRole,
+		},
+	});
+
+	// 2. Define a submit handler.
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		toast({ description: "Benutzerprofil wird aktualisiert..." });
+
+		await updateUser(user.id, values);
+
+		toast({ description: "Benutzerprofil wurde aktualisiert." });
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="username"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Benutzername</FormLabel>
+							<FormControl>
+								<Input placeholder="MAXMUS" {...field} />
+							</FormControl>
+							<FormDescription>
+								Nur in Ausnahmefällen sollte der Benutzername geändert werden.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="displayName"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Anzeigename</FormLabel>
+							<FormControl>
+								<Input placeholder="Max Mustermann" {...field} />
+							</FormControl>
+							<FormDescription>
+								Der Anzeigename darf frei verändert werden.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="email"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>E-Mail Adresse</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="max.mustermann@mercedes-benz.com"
+									{...field}
+								/>
+							</FormControl>
+							<FormDescription>
+								Nur in Ausnahmefällen sollte die E-Mail Adresse geändert werden.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="role"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Benutzerrolle</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a verified email to display" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="admin">Administrator</SelectItem>
+									<SelectItem value="user">Benutzer</SelectItem>
+									<SelectItem value="guest">Gast</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormDescription>
+								Die Benutzerrolle bestimmt die Berechtigungen des Benutzers.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<div className="flex justify-between items-center">
+					<AlertDialog>
+						<AlertDialogTrigger asChild>
+							<Button
+								type="submit"
+								variant="destructive"
+								className="gap-2 flex items-center"
+							>
+								<TrashIcon className="w-4 h-4" />
+								<span>Benutzer löschen</span>
+							</Button>
+						</AlertDialogTrigger>
+						<AlertDialogContent>
+							<AlertDialogHeader>
+								<AlertDialogTitle>Bist du dir sicher?</AlertDialogTitle>
+								<AlertDialogDescription>
+									Diese Aktion kann nicht rückgängig gemacht werden. Das
+									Benutzerprofil und die damit verbundenen Daten werden
+									unwiderruflich gelöscht.
+								</AlertDialogDescription>
+							</AlertDialogHeader>
+							<AlertDialogFooter>
+								<AlertDialogCancel>Abbrechen</AlertDialogCancel>
+								<AlertDialogAction
+									className="bg-red-500"
+									onClick={() => {
+										toast({ description: "Benutzerprofil wird gelöscht..." });
+										deleteUser(user.id);
+										toast({ description: "Benutzerprofil wurde gelöscht." });
+									}}
+								>
+									Ja, löschen
+								</AlertDialogAction>
+							</AlertDialogFooter>
+						</AlertDialogContent>
+					</AlertDialog>
+					<DialogClose asChild>
+						<Button type="submit" className="gap-2 flex items-center">
+							<SaveIcon className="w-4 h-4" />
+							<span>Speichern</span>
+						</Button>
+					</DialogClose>
+				</div>
+			</form>
+		</Form>
+	);
+}
--- a/frontend/src/app/admin/users/page.tsx
+++ b/frontend/src/app/admin/users/page.tsx
@@ -0,0 +1,26 @@
+import { columns } from "@/app/admin/users/columns";
+import { DataTable } from "@/app/admin/users/data-table";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/server/db";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Alle Benutzer",
+};
+
+export default async function AdminPage() {
+	const data = await db.query.users.findMany();
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Benutzerverwaltung</CardTitle>
+				<CardDescription>Suche, Bearbeite und Lösche Benutzer</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<DataTable columns={columns} data={data} />
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/api/job/[jobId]/remaining-time/route.ts
+++ b/frontend/src/app/api/job/[jobId]/remaining-time/route.ts
@@ -0,0 +1,41 @@
+import { db } from "@/server/db";
+import { printJobs } from "@/server/db/schema";
+import { eq } from "drizzle-orm";
+
+export const dynamic = "force-dynamic";
+
+interface RemainingTimeRouteProps {
+	params: {
+		jobId: string;
+	};
+}
+export async function GET(request: Request, { params }: RemainingTimeRouteProps) {
+	// Trying to fix build error in container...
+	if (params.jobId === undefined) {
+		return Response.json({});
+	}
+
+	// Get the job details
+	const jobDetails = await db.query.printJobs.findFirst({
+		where: eq(printJobs.id, params.jobId),
+	});
+
+	// Check if the job exists
+	if (!jobDetails) {
+		return Response.json({
+			id: params.jobId,
+			error: "Job not found",
+		});
+	}
+
+	// Calculate the remaining time
+	const startAt = new Date(jobDetails.startAt).getTime();
+	const endAt = startAt + jobDetails.durationInMinutes * 60 * 1000;
+	const remainingTime = Math.max(0, endAt - Date.now());
+
+	// Return the remaining time
+	return Response.json({
+		id: params.jobId,
+		remainingTime,
+	});
+}
--- a/frontend/src/app/api/jobs/[id]/route.ts
+++ b/frontend/src/app/api/jobs/[id]/route.ts
@@ -0,0 +1,99 @@
+import { API_ENDPOINTS } from "@/utils/api-config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+	request: Request,
+	{ params }: { params: { id: string } }
+) {
+	try {
+		const id = params.id;
+		
+		// Rufe einzelnen Job vom externen Backend ab
+		const response = await fetch(`${API_ENDPOINTS.JOBS}/${id}`);
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const job = await response.json();
+		return Response.json(job);
+	} catch (error) {
+		console.error('Fehler beim Abrufen des Jobs vom Backend:', error);
+		return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
+
+export async function PUT(
+	request: Request,
+	{ params }: { params: { id: string } }
+) {
+	try {
+		const id = params.id;
+		const body = await request.json();
+		
+		// Sende Job-Aktualisierung an das externe Backend
+		const response = await fetch(`${API_ENDPOINTS.JOBS}/${id}`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(body)
+		});
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const result = await response.json();
+		return Response.json(result);
+	} catch (error) {
+		console.error('Fehler beim Aktualisieren des Jobs:', error);
+		return new Response(JSON.stringify({ error: 'Fehler beim Aktualisieren des Jobs' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
+
+export async function DELETE(
+	request: Request,
+	{ params }: { params: { id: string } }
+) {
+	try {
+		const id = params.id;
+		
+		// Sende Job-Löschung an das externe Backend
+		const response = await fetch(`${API_ENDPOINTS.JOBS}/${id}`, {
+			method: 'DELETE'
+		});
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const result = await response.json();
+		return Response.json(result);
+	} catch (error) {
+		console.error('Fehler beim Löschen des Jobs:', error);
+		return new Response(JSON.stringify({ error: 'Fehler beim Löschen des Jobs' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
--- a/frontend/src/app/api/jobs/route.ts
+++ b/frontend/src/app/api/jobs/route.ts
@@ -0,0 +1,59 @@
+import { API_ENDPOINTS } from "@/utils/api-config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+	try {
+		// Rufe Jobs vom externen Backend ab
+		const response = await fetch(API_ENDPOINTS.JOBS);
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const jobs = await response.json();
+		return Response.json(jobs);
+	} catch (error) {
+		console.error('Fehler beim Abrufen der Jobs vom Backend:', error);
+		return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
+
+export async function POST(request: Request) {
+	try {
+		const body = await request.json();
+		
+		// Sende Job-Erstellung an das externe Backend
+		const response = await fetch(API_ENDPOINTS.JOBS, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(body)
+		});
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const result = await response.json();
+		return Response.json(result);
+	} catch (error) {
+		console.error('Fehler beim Erstellen des Jobs:', error);
+		return new Response(JSON.stringify({ error: 'Fehler beim Erstellen des Jobs' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
--- a/frontend/src/app/api/printers/route.ts
+++ b/frontend/src/app/api/printers/route.ts
@@ -0,0 +1,27 @@
+import { API_ENDPOINTS } from "@/utils/api-config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+	try {
+		// Rufe Drucker vom externen Backend ab statt von der lokalen Datenbank
+		const response = await fetch(API_ENDPOINTS.PRINTERS);
+		
+		if (!response.ok) {
+			console.error(`Backend-Fehler: ${response.status} ${response.statusText}`);
+			return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+		
+		const printers = await response.json();
+		return Response.json(printers);
+	} catch (error) {
+		console.error('Fehler beim Abrufen der Drucker vom Backend:', error);
+		return new Response(JSON.stringify({ error: 'Backend nicht erreichbar' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}
--- a/frontend/src/app/auth/login/callback/route.ts
+++ b/frontend/src/app/auth/login/callback/route.ts
@@ -0,0 +1,123 @@
+import { lucia } from "@/server/auth";
+import { type GitHubUserResult, github, isValidCallbackHost, USED_CALLBACK_URL } from "@/server/auth/oauth";
+import { ALLOWED_CALLBACK_HOSTS } from "@/utils/api-config";
+import { db } from "@/server/db";
+import { users } from "@/server/db/schema";
+import { OAuth2RequestError } from "arctic";
+import { eq } from "drizzle-orm";
+import { generateIdFromEntropySize } from "lucia";
+import { cookies } from "next/headers";
+
+export const dynamic = "force-dynamic";
+
+interface GithubEmailResponse {
+	email: string;
+	primary: boolean;
+	verified: boolean;
+	visibility: string;
+}
+
+export async function GET(request: Request): Promise<Response> {
+	const url = new URL(request.url);
+	const code = url.searchParams.get("code");
+	const state = url.searchParams.get("state");
+	const storedState = cookies().get("github_oauth_state")?.value ?? null;
+	
+	// Log für Debugging
+	console.log("OAuth Callback erhalten:", url.toString());
+	console.log("Callback URL Validierung:", isValidCallbackHost(url.toString()));
+	console.log("Erlaubte Hosts:", ALLOWED_CALLBACK_HOSTS);
+	
+	if (!code || !state || !storedState || state !== storedState) {
+		return new Response(
+			JSON.stringify({
+				status_text: "Ungültiger OAuth-Callback",
+				data: { code, state, storedState, url: url.toString() },
+			}),
+			{
+				status: 400,
+			},
+		);
+	}
+
+	try {
+		// GitHub OAuth Code validieren - die redirectURI ist bereits im GitHub Client konfiguriert
+		const tokens = await github.validateAuthorizationCode(code);
+		
+		// Log zur Fehlersuche
+		console.log(`GitHub OAuth Token-Validierung erfolgreich, verwendete Callback-URL: ${USED_CALLBACK_URL}`);
+		
+		const githubUserResponse = await fetch("https://git.i.mercedes-benz.com/api/v3/user", {
+			headers: {
+				Authorization: `Bearer ${tokens.accessToken}`,
+			},
+		});
+		const githubUser: GitHubUserResult = await githubUserResponse.json();
+
+		// Sometimes email can be null in the user query.
+		if (githubUser.email === null || githubUser.email === undefined) {
+			const githubEmailResponse = await fetch("https://git.i.mercedes-benz.com/api/v3/user/emails", {
+				headers: {
+					Authorization: `Bearer ${tokens.accessToken}`,
+				},
+			});
+			const githubUserEmail: GithubEmailResponse[] = await githubEmailResponse.json();
+			githubUser.email = githubUserEmail[0].email;
+		}
+		const existingUser = await db.query.users.findFirst({
+			where: eq(users.github_id, githubUser.id),
+		});
+
+		if (existingUser) {
+			const session = await lucia.createSession(existingUser.id, {});
+			const sessionCookie = lucia.createSessionCookie(session.id);
+			cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+			return new Response(null, {
+				status: 302,
+				headers: {
+					Location: "/",
+				},
+			});
+		}
+
+		const userId = generateIdFromEntropySize(10); // 16 characters long
+
+		await db.insert(users).values({
+			id: userId,
+			github_id: githubUser.id,
+			username: githubUser.login,
+			displayName: githubUser.name,
+			email: githubUser.email,
+		});
+
+		const session = await lucia.createSession(userId, {});
+		const sessionCookie = lucia.createSessionCookie(session.id);
+		cookies().set(sessionCookie.name, sessionCookie.value, {
+			...sessionCookie.attributes,
+			secure: false, // Else cookie does not get set cause IT has not provided us an SSL certificate yet
+		});
+		return new Response(null, {
+			status: 302,
+			headers: {
+				Location: "/",
+			},
+		});
+	} catch (e) {
+		// the specific error message depends on the provider
+		if (e instanceof OAuth2RequestError) {
+			// invalid code
+			return new Response(
+				JSON.stringify({
+					status_text: "Invalid code",
+					error: JSON.stringify(e),
+				}),
+				{
+					status: 400,
+				},
+			);
+		}
+		return new Response(null, {
+			status: 500,
+		});
+	}
+}
--- a/frontend/src/app/auth/login/route.ts
+++ b/frontend/src/app/auth/login/route.ts
@@ -0,0 +1,30 @@
+import { github, USED_CALLBACK_URL } from "@/server/auth/oauth";
+import { generateState } from "arctic";
+import { cookies } from "next/headers";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(): Promise<Response> {
+	const state = generateState();
+	
+	// Verwende die zentral definierte Callback-URL
+	// Die redirectURI ist bereits im GitHub-Client konfiguriert
+	const url = await github.createAuthorizationURL(state, {
+		scopes: ["user"],
+	});
+	const ONE_HOUR = 60 * 60;
+
+	cookies().set("github_oauth_state", state, {
+		path: "/",
+		secure: false, //process.env.NODE_ENV === "production", -- can't be used until SSL certificate is provided by IT
+		httpOnly: true,
+		maxAge: ONE_HOUR,
+		sameSite: "lax",
+	});
+
+	// Log zur Fehlersuche
+	console.log(`GitHub OAuth redirect zu: ${url.toString()}`);
+	console.log(`Verwendete Callback-URL: ${USED_CALLBACK_URL}`);
+
+	return Response.redirect(url);
+}
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
--- a/frontend/src/app/job/[jobId]/cancel-form.tsx
+++ b/frontend/src/app/job/[jobId]/cancel-form.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { abortPrintJob } from "@/server/actions/printJobs";
+import { TriangleAlertIcon } from "lucide-react";
+import { useState } from "react";
+
+const formSchema = z.object({
+	abortReason: z
+		.string()
+		.min(1, {
+			message: "Bitte gebe einen Grund für den Abbruch an.",
+		})
+		.max(255, {
+			message: "Der Grund darf maximal 255 Zeichen lang sein.",
+		}),
+});
+
+interface CancelFormProps {
+	jobId: string;
+}
+
+export function CancelForm(props: CancelFormProps) {
+	const { jobId } = props;
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			abortReason: "",
+		},
+	});
+	const { toast } = useToast();
+	const [open, setOpen] = useState(false);
+
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		toast({
+			description: "Druckauftrag wird abgebrochen...",
+		});
+		try {
+			const result = await abortPrintJob(jobId, values.abortReason);
+			if (result?.error) {
+				toast({
+					description: result.error,
+					variant: "destructive",
+				});
+			}
+			setOpen(false);
+			toast({
+				description: "Druckauftrag wurde abgebrochen.",
+			});
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({
+					description: error.message,
+					variant: "destructive",
+				});
+			} else {
+				toast({
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+					variant: "destructive",
+				});
+			}
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant={"ghost"}
+					className="text-red-500 hover:text-red-600 flex-grow gap-2 items-center flex justify-start"
+				>
+					<TriangleAlertIcon className="w-4 h-4" />
+					<span>Druckauftrag abbrechen</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Druckauftrag abbrechen?</DialogTitle>
+					<DialogDescription>
+						Du bist dabei, den Druckauftrag abzubrechen. Bitte beachte, dass ein abgebrochener Druckauftrag nicht wieder
+						aufgenommen werden kann und der Drucker sich automatisch abschaltet.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+						<FormField
+							control={form.control}
+							name="abortReason"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Grund für den Abbruch</FormLabel>
+									<FormControl>
+										<Input {...field} />
+									</FormControl>
+									<FormDescription>
+										Bitte teile uns den Grund für den Abbruch des Druckauftrags mit. Wenn der Drucker eine Fehlermeldung
+										anzeigt, gib bitte nur diese Fehlermeldung an.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="flex flex-row justify-between">
+							<DialogClose asChild>
+								<Button variant={"secondary"}>Nein</Button>
+							</DialogClose>
+							<Button variant={"destructive"} type="submit">
+								Ja, Druck abbrechen
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/src/app/job/[jobId]/edit-comments.tsx
+++ b/frontend/src/app/job/[jobId]/edit-comments.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import { updatePrintComments } from "@/server/actions/printJobs";
+import { useDebouncedCallback } from "use-debounce";
+
+interface EditCommentsProps {
+	defaultValue: string | null;
+	jobId: string;
+	disabled?: boolean;
+}
+export function EditComments(props: EditCommentsProps) {
+	const { defaultValue, jobId, disabled } = props;
+	const { toast } = useToast();
+
+	const debounced = useDebouncedCallback(async (value) => {
+		try {
+			const result = await updatePrintComments(jobId, value);
+			if (result?.error) {
+				toast({
+					description: result.error,
+					variant: "destructive",
+				});
+			}
+			toast({
+				description: "Anmerkungen wurden gespeichert.",
+			});
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({
+					description: error.message,
+					variant: "destructive",
+				});
+			} else {
+				toast({
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+					variant: "destructive",
+				});
+			}
+		}
+	}, 1000);
+
+	return (
+		<div className="flex flex-col gap-2">
+			<Label>Anmerkungen</Label>
+			<Textarea
+				placeholder="Anmerkungen"
+				disabled={disabled}
+				defaultValue={defaultValue ?? ""}
+				onChange={(e) => debounced(e.target.value)}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/app/job/[jobId]/extend-form.tsx
+++ b/frontend/src/app/job/[jobId]/extend-form.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { extendPrintJob } from "@/server/actions/printJobs";
+import { CircleFadingPlusIcon } from "lucide-react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+
+const formSchema = z.object({
+	minutes: z.coerce.number().int().max(59, {
+		message: "Die Minuten müssen zwischen 0 und 59 liegen.",
+	}),
+	hours: z.coerce.number().int().max(24, {
+		message: "Die Stunden müssen zwischen 0 und 24 liegen.",
+	}),
+});
+
+interface ExtendFormProps {
+	jobId: string;
+}
+
+export function ExtendForm(props: ExtendFormProps) {
+	const { jobId } = props;
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			minutes: 0,
+			hours: 0,
+		},
+	});
+	const { toast } = useToast();
+	const [open, setOpen] = useState(false);
+	const { mutate } = useSWRConfig();
+
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		toast({
+			description: "Druckauftrag wird verlängert...",
+		});
+		try {
+			const result = await extendPrintJob(jobId, values.minutes, values.hours);
+
+			if (result?.error) {
+				toast({
+					description: result.error,
+					variant: "destructive",
+				});
+			}
+
+			setOpen(false);
+			form.reset();
+
+			mutate(`/api/job/${jobId}/remaining-time`); // Refresh the countdown
+
+			toast({
+				description: "Druckauftrag wurde verlängert.",
+			});
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({
+					description: error.message,
+					variant: "destructive",
+				});
+			} else {
+				toast({
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+					variant: "destructive",
+				});
+			}
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant={"ghost"} className="flex-grow gap-2 items-center flex justify-start">
+					<CircleFadingPlusIcon className="w-4 h-4" />
+					<span>Druckauftrag verlängern</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Druckauftrag verlängern</DialogTitle>
+					<DialogDescription>
+						Braucht dein Druck mehr Zeit als erwartet? Füge weitere Stunden oder Minuten zur Druckzeit hinzu.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+						<p className="text-sm px-4 py-2 text-yellow-700 bg-yellow-500/20 rounded-md">
+							<span className="font-medium">Wichtig:</span> Bitte verlängere die Druckzeit nur, wenn es sich um
+							denselben Druck handelt. Wenn es ein anderer Druck ist, brich bitte den aktuellen Druckauftrag ab und
+							starte einen neuen.
+						</p>
+						<div className="flex flex-row gap-2">
+							<FormField
+								control={form.control}
+								name="hours"
+								render={({ field }) => (
+									<FormItem className="w-1/2">
+										<FormLabel>Stunden</FormLabel>
+										<FormControl>
+											<Input placeholder="0" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="minutes"
+								render={({ field }) => (
+									<FormItem className="w-1/2">
+										<FormLabel>Minuten</FormLabel>
+										<FormControl>
+											<Input placeholder="0" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-row justify-between">
+							<DialogClose asChild>
+								<Button variant={"secondary"}>Abbrechen</Button>
+							</DialogClose>
+							<Button variant={"default"} type="submit">
+								Verlängern
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/src/app/job/[jobId]/finish-form.tsx
+++ b/frontend/src/app/job/[jobId]/finish-form.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { AlertDialogHeader } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { useToast } from "@/components/ui/use-toast";
+import { earlyFinishPrintJob } from "@/server/actions/printJobs";
+import { CircleCheckBigIcon } from "lucide-react";
+
+interface FinishFormProps {
+	jobId: string;
+}
+
+export function FinishForm(props: FinishFormProps) {
+	const { jobId } = props;
+	const { toast } = useToast();
+
+	async function onClick() {
+		toast({
+			description: "Druckauftrag wird abgeschlossen...",
+		});
+		try {
+			const result = await earlyFinishPrintJob(jobId);
+			if (result?.error) {
+				toast({
+					description: result.error,
+					variant: "destructive",
+				});
+			}
+			toast({
+				description: "Druckauftrag wurde abgeschlossen.",
+			});
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({
+					description: error.message,
+					variant: "destructive",
+				});
+			} else {
+				toast({
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+					variant: "destructive",
+				});
+			}
+		}
+	}
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant={"ghost"} className="flex-grow gap-2 items-center flex justify-start">
+					<CircleCheckBigIcon className="w-4 h-4" />
+					<span>Druckauftrag abschließen</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<AlertDialogHeader>
+					<DialogTitle>Druckauftrag abschließen?</DialogTitle>
+					<DialogDescription>
+						Du bist dabei, den Druckauftrag als abgeschlossen zu markieren. Dies führt dazu, dass der Drucker
+						automatisch herunterfährt.
+					</DialogDescription>
+				</AlertDialogHeader>
+				<div className="flex flex-col gap-4">
+					<p className="text-sm text-red-500 font-medium bg-red-500/20 px-4 py-2 rounded-md">
+						Bitte bestätige nur, wenn der Druckauftrag tatsächlich erfolgreich abgeschlossen wurde.
+					</p>
+					<div className="flex flex-row justify-between">
+						<DialogClose asChild>
+							<Button variant={"secondary"}>Abbrechen</Button>
+						</DialogClose>
+						<DialogClose asChild onClick={onClick}>
+							<Button variant={"default"}>Bestätigen</Button>
+						</DialogClose>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/src/app/job/[jobId]/page.tsx
+++ b/frontend/src/app/job/[jobId]/page.tsx
@@ -0,0 +1,123 @@
+import { CancelForm } from "@/app/job/[jobId]/cancel-form";
+import { EditComments } from "@/app/job/[jobId]/edit-comments";
+import { ExtendForm } from "@/app/job/[jobId]/extend-form";
+import { FinishForm } from "@/app/job/[jobId]/finish-form";
+import { Countdown } from "@/components/printer-card/countdown";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { validateRequest } from "@/server/auth";
+import { UserRole } from "@/server/auth/permissions";
+import { db } from "@/server/db";
+import { printJobs } from "@/server/db/schema";
+import { eq } from "drizzle-orm";
+import { ArchiveIcon } from "lucide-react";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Druckauftrag",
+};
+
+interface JobDetailsPageProps {
+	params: {
+		jobId: string;
+	};
+}
+export default async function JobDetailsPage(props: JobDetailsPageProps) {
+	const { jobId } = props.params;
+	const { user } = await validateRequest();
+
+	const jobDetails = await db.query.printJobs.findFirst({
+		where: eq(printJobs.id, jobId),
+		with: {
+			user: true,
+			printer: true,
+		},
+	});
+
+	if (!jobDetails) {
+		return <div>Druckauftrag wurde nicht gefunden.</div>;
+	}
+
+	const jobIsOnGoing = new Date(jobDetails.startAt).getTime() + jobDetails.durationInMinutes * 60 * 1000 > Date.now();
+	const jobIsAborted = jobDetails.aborted;
+	const userOwnsJob = jobDetails.userId === user?.id;
+	const userIsAdmin = user?.role === UserRole.ADMIN;
+	const userMayEditJob = userOwnsJob || userIsAdmin;
+
+	return (
+		<div className="flex flex-col gap-4">
+			<h1 className="text-3xl font-semibold">
+				Druckauftrag vom{" "}
+				{new Date(jobDetails.startAt).toLocaleString("de-DE", {
+					dateStyle: "medium",
+					timeStyle: "medium",
+				})}
+			</h1>
+			{!jobIsOnGoing || jobIsAborted ? (
+				<Alert className="bg-yellow-200 border-yellow-500 text-yellow-700 shadow-sm">
+					<ArchiveIcon className="h-4 w-4" />
+					<AlertTitle>Hinweis</AlertTitle>
+					<AlertDescription>
+						Dieser Druckauftrag wurde bereits abgeschlossen und kann nicht mehr bearbeitet werden.
+					</AlertDescription>
+				</Alert>
+			) : null}
+			<div className="flex flex-col lg:flex-row gap-4">
+				<Card className="w-full">
+					<CardContent className="p-4 flex flex-col gap-4">
+						<div className="flex flex-row justify-between">
+							<div>
+								<h2 className="font-semibold">Ansprechpartner</h2>
+								<p className="text-sm">{jobDetails.user.displayName}</p>
+								<p className="text-sm">{jobDetails.user.email}</p>
+							</div>
+							<div className="text-right">
+								{jobIsAborted && (
+									<>
+										<h2 className="font-semibold text-red-500">Abbruchsgrund</h2>
+										<p className="text-sm text-red-500">{jobDetails.abortReason}</p>
+									</>
+								)}
+								{jobIsOnGoing && (
+									<>
+										<h2 className="font-semibold">Verbleibende Zeit</h2>
+										<p className="text-sm">
+											<Countdown jobId={jobDetails.id} />
+										</p>
+									</>
+								)}
+							</div>
+						</div>
+						<EditComments
+							defaultValue={jobDetails.comments}
+							jobId={jobDetails.id}
+							disabled={!userMayEditJob || jobIsAborted || !jobIsOnGoing}
+						/>
+					</CardContent>
+				</Card>
+				{userMayEditJob && jobIsOnGoing && (
+					<Card className="w-full lg:w-96 ml-auto">
+						<CardHeader>
+							<CardTitle>Aktionen</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="flex w-full flex-col -ml-4 -mt-2">
+								<FinishForm jobId={jobDetails.id} />
+								<ExtendForm jobId={jobDetails.id} />
+								<CancelForm jobId={jobDetails.id} />
+							</div>
+						</CardContent>
+					</Card>
+				)}
+			</div>
+		</div>
+	);
+}
+
+/**
+ * 	durationInMinutes: integer("durationInMinutes").notNull(),
+		comments: text("comments"),
+		aborted: integer("aborted", { mode: "boolean" }).notNull().default(false),
+		abortReason: text("abortReason"),
+ */
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,36 @@
+import { Header } from "@/components/header";
+import { Toaster } from "@/components/ui/toaster";
+import type { Metadata } from "next";
+
+import "@/app/globals.css";
+
+export const metadata: Metadata = {
+	title: {
+		default: "MYP",
+		template: "%s | MYP",
+	},
+	description: "Generated by create next app",
+};
+
+interface RootLayoutProps {
+	children: React.ReactNode;
+}
+
+export const dynamic = "force-dynamic";
+
+export default function RootLayout(props: RootLayoutProps) {
+	const { children } = props;
+
+	return (
+		<html lang="de" suppressHydrationWarning>
+			<head />
+			<body className={"min-h-dvh bg-neutral-200 font-sans antialiased"}>
+				<Header />
+				<main className="flex-grow max-w-screen-2xl w-full mx-auto flex flex-col p-8 gap-4 text-foreground">
+					{children}
+				</main>
+				<Toaster />
+			</body>
+		</html>
+	);
+}
--- a/frontend/src/app/my/jobs/columns.tsx
+++ b/frontend/src/app/my/jobs/columns.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import type { InferResultType } from "@/utils/drizzle";
+import type { ColumnDef } from "@tanstack/react-table";
+import { BadgeCheckIcon, EyeIcon, HourglassIcon, MoreHorizontal, OctagonXIcon, ShareIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/components/ui/use-toast";
+import type { printers } from "@/server/db/schema";
+import type { InferSelectModel } from "drizzle-orm";
+import Link from "next/link";
+
+export const columns: ColumnDef<
+	InferResultType<
+		"printJobs",
+		{
+			printer: true;
+		}
+	>
+>[] = [
+	{
+		accessorKey: "printer",
+		header: "Drucker",
+		cell: ({ row }) => {
+			const printer: InferSelectModel<typeof printers> = row.getValue("printer");
+			return printer.name;
+		},
+	},
+	{
+		accessorKey: "startAt",
+		header: "Startzeitpunkt",
+		cell: ({ row }) => {
+			const startAt = new Date(row.original.startAt);
+
+			return `${startAt.toLocaleDateString("de-DE", {
+				dateStyle: "medium",
+			})} ${startAt.toLocaleTimeString("de-DE")}`;
+		},
+	},
+	{
+		accessorKey: "durationInMinutes",
+		header: "Dauer (Minuten)",
+	},
+	{
+		accessorKey: "comments",
+		header: "Anmerkungen",
+		cell: ({ row }) => {
+			const comments = row.original.comments;
+
+			if (comments) {
+				return <span className="text-sm">{comments.slice(0, 50)}</span>;
+			}
+
+			return <span className="text-muted-foreground text-sm">Keine Anmerkungen</span>;
+		},
+	},
+	{
+		accessorKey: "status",
+		header: "Status",
+		cell: ({ row }) => {
+			const aborted = row.original.aborted;
+
+			if (aborted) {
+				return (
+					<div className="flex items-center gap-2">
+						<OctagonXIcon className="w-4 h-4 text-red-500" /> <span className="text-red-600">Abgebrochen</span>
+					</div>
+				);
+			}
+
+			const startAt = new Date(row.original.startAt).getTime();
+			const endAt = startAt + row.original.durationInMinutes * 60 * 1000;
+
+			if (Date.now() < endAt) {
+				return (
+					<div className="flex items-center gap-2">
+						<HourglassIcon className="w-4 h-4 text-yellow-500" />
+						<span className="text-yellow-600">Läuft...</span>
+					</div>
+				);
+			}
+
+			return (
+				<div className="flex items-center gap-2">
+					<BadgeCheckIcon className="w-4 h-4 text-green-500" />
+					<span className="text-green-600">Abgeschlossen</span>
+				</div>
+			);
+		},
+	},
+	{
+		id: "actions",
+		cell: ({ row }) => {
+			const job = row.original;
+			const { toast } = useToast();
+
+			return (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" className="h-8 w-8 p-0">
+							<span className="sr-only">Menu öffnen</span>
+							<MoreHorizontal className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
+						<DropdownMenuItem
+							className="flex items-center gap-2"
+							onClick={() => {
+								const baseUrl = new URL(window.location.href);
+								baseUrl.pathname = `/job/${job.id}`;
+								navigator.clipboard.writeText(baseUrl.toString());
+								toast({
+									description: "URL zum Druckauftrag in die Zwischenablage kopiert.",
+								});
+							}}
+						>
+							<ShareIcon className="w-4 h-4" />
+							<span>Teilen</span>
+						</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem>
+							<Link href={`/job/${job.id}`} className="flex items-center gap-2">
+								<EyeIcon className="w-4 h-4" />
+								<span>Details anzeigen</span>
+							</Link>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			);
+		},
+	},
+];
--- a/frontend/src/app/my/jobs/data-table.tsx
+++ b/frontend/src/app/my/jobs/data-table.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function JobsTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div>
+			<div className="rounded-md border">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									Keine Ergebnisse gefunden
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-end space-x-2 py-4 select-none">
+				<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+					Vorherige Seite
+				</Button>
+				<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+					Nächste Seite
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/app/my/profile/page.tsx
+++ b/frontend/src/app/my/profile/page.tsx
@@ -0,0 +1,47 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { validateRequest } from "@/server/auth";
+import { UserRole, translateUserRole } from "@/server/auth/permissions";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+	title: "Dein Profil",
+};
+
+export default async function ProfilePage() {
+	const { user } = await validateRequest();
+
+	if (!user) {
+		redirect("/");
+	}
+
+	const badgeVariant = {
+		[UserRole.ADMIN]: "destructive" as const,
+		[UserRole.USER]: "default" as const,
+		[UserRole.GUEST]: "secondary" as const,
+	};
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row justify-between items-center">
+				<div>
+					<CardTitle>{user?.displayName}</CardTitle>
+					<CardDescription>
+						{user?.username} &mdash; {user?.email}
+					</CardDescription>
+				</div>
+				<Badge variant={badgeVariant[user?.role]}>{translateUserRole(user?.role)}</Badge>
+			</CardHeader>
+			<CardContent>
+				<p>
+					Deine Daten wurden vom <abbr>GitHub Enterprise Server</abbr> importiert und können hier nur angezeigt werden.
+				</p>
+				<p>
+					Solltest Du Änderungen oder eine Löschung deiner Daten von unserem Dienst beantragen wollen, so wende dich
+					bitte an einen Administrator.
+				</p>
+			</CardContent>
+		</Card>
+	);
+}
--- a/frontend/src/app/not-found.tsx
+++ b/frontend/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function NotFound() {
+	return (
+		<div>
+			<h2>Nicht gefunden</h2>
+			<p>Die angefragte Seite konnte nicht gefunden werden.</p>
+			<Link href="/">Zurück zur Startseite</Link>
+		</div>
+	);
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,71 @@
+import { columns } from "@/app/my/jobs/columns";
+import { JobsTable } from "@/app/my/jobs/data-table";
+import { DynamicPrinterCards } from "@/components/dynamic-printer-cards";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { validateRequest } from "@/server/auth";
+import { db } from "@/server/db";
+import { printJobs } from "@/server/db/schema";
+import { desc, eq } from "drizzle-orm";
+import { BoxesIcon, NewspaperIcon } from "lucide-react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Dashboard | MYP",
+};
+
+export default async function HomePage() {
+	const { user } = await validateRequest();
+	const userIsLoggedIn = Boolean(user);
+
+	const printers = await db.query.printers.findMany({
+		with: {
+			printJobs: {
+				limit: 1,
+				orderBy: (printJobs, { desc }) => [desc(printJobs.startAt)],
+			},
+		},
+	});
+
+	// biome-ignore lint/suspicious/noExplicitAny: temp. fix for jobs
+	let jobs: any[] = [];
+	if (userIsLoggedIn) {
+		jobs = await db.query.printJobs.findMany({
+			// biome-ignore lint/style/noNonNullAssertion: User exists if userIsLoggedIn is true
+			where: eq(printJobs.userId, user!.id),
+			orderBy: [desc(printJobs.startAt)],
+			with: {
+				printer: true,
+			},
+		});
+	}
+
+	return (
+		<>
+			{/* NEEDS TO BE FIXED FOR A NEW / EMPTY USER {isLoggedIn && <PersonalizedCards />} */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex flex-row items-center gap-x-1">
+						<BoxesIcon className="w-5 h-5" />
+						<span className="text-lg">Druckerbelegung</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+					<DynamicPrinterCards user={user} />
+				</CardContent>
+			</Card>
+			{userIsLoggedIn && (
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex flex-row items-center gap-x-1">
+							<NewspaperIcon className="w-5 h-5" />
+							<span className="text-lg">Druckaufträge</span>
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<JobsTable columns={columns} data={jobs} />
+					</CardContent>
+				</Card>
+			)}
+		</>
+	);
+}
--- a/frontend/src/app/printer/[printerId]/reserve/form.tsx
+++ b/frontend/src/app/printer/[printerId]/reserve/form.tsx
@@ -0,0 +1,169 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { DialogClose } from "@/components/ui/dialog";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import { createPrintJob } from "@/server/actions/printJobs";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CalendarPlusIcon, XCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { If, Then } from "react-if";
+import { z } from "zod";
+
+export const formSchema = z.object({
+	hours: z.coerce.number().int().min(0).max(96, {
+		message: "Die Stunden müssen zwischen 0 und 96 liegen.",
+	}),
+	minutes: z.coerce.number().int().min(0).max(59, {
+		message: "Die Minuten müssen zwischen 0 und 59 liegen.",
+	}),
+	comments: z.string().optional(),
+});
+
+interface PrinterReserveFormProps {
+	userId: string;
+	printerId: string;
+	isDialog?: boolean;
+}
+
+export function PrinterReserveForm(props: PrinterReserveFormProps) {
+	const { userId, printerId, isDialog } = props;
+	const router = useRouter();
+	const { toast } = useToast();
+	const [isLocked, setLocked] = useState(false);
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			hours: 0,
+			minutes: 0,
+			comments: "",
+		},
+	});
+
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		if (!isLocked) {
+			setLocked(true);
+			setTimeout(() => {
+				setLocked(false);
+			}, 1000 * 5);
+		} else {
+			toast({
+				description: "Bitte warte ein wenig, bevor du eine weitere Reservierung tätigst...",
+				variant: "default",
+			});
+			return;
+		}
+
+		if (values.hours === 0 && values.minutes === 0) {
+			form.setError("hours", {
+				message: "",
+			});
+			form.setError("minutes", {
+				message: "Die Dauer des Druckauftrags muss mindestens 1 Minute betragen.",
+			});
+			return;
+		}
+
+		try {
+			const jobId = await createPrintJob({
+				durationInMinutes: values.hours * 60 + values.minutes,
+				comments: values.comments,
+				userId: userId,
+				printerId: printerId,
+			});
+			if (typeof jobId === "object") {
+				toast({
+					description: jobId.error,
+					variant: "destructive",
+				});
+			}
+
+			router.push(`/job/${jobId}`);
+		} catch (error) {
+			if (error instanceof Error) {
+				toast({ variant: "destructive", description: error.message });
+			} else {
+				toast({
+					variant: "destructive",
+					description: "Ein unbekannter Fehler ist aufgetreten.",
+				});
+			}
+			return;
+		}
+
+		toast({ description: "Druckauftrag wurde erfolgreich erstellt." });
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+				<div className="flex flex-row gap-2">
+					<FormField
+						control={form.control}
+						name="hours"
+						render={({ field }) => (
+							<FormItem className="w-1/2">
+								<FormLabel>Stunden</FormLabel>
+								<FormControl>
+									<Input placeholder="0" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="minutes"
+						render={({ field }) => (
+							<FormItem className="w-1/2">
+								<FormLabel>Minuten</FormLabel>
+								<FormControl>
+									<Input placeholder="0" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>
+				<FormField
+					control={form.control}
+					name="comments"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Anmerkungen</FormLabel>
+							<FormControl>
+								<Textarea placeholder="" {...field} />
+							</FormControl>
+							<FormDescription>
+								In dieses Feld kannst du Anmerkungen zu deinem Druckauftrag hinzufügen. Sie können beispielsweise
+								Informationen über das Druckmaterial, die Druckqualität oder die Farbe enthalten.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<div className="flex justify-between items-center">
+					<If condition={isDialog}>
+						<Then>
+							<DialogClose asChild>
+								<Button variant={"secondary"} className="gap-2 flex items-center">
+									<XCircleIcon className="w-4 h-4" />
+									<span>Abbrechen</span>
+								</Button>
+							</DialogClose>
+						</Then>
+					</If>
+					<Button type="submit" className="gap-2 flex items-center" disabled={isLocked}>
+						<CalendarPlusIcon className="w-4 h-4" />
+						<span>Reservieren</span>
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+}
--- a/frontend/src/app/printer/[printerId]/reserve/page.tsx
+++ b/frontend/src/app/printer/[printerId]/reserve/page.tsx
@@ -0,0 +1,36 @@
+import { PrinterReserveForm } from "@/app/printer/[printerId]/reserve/form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { validateRequest } from "@/server/auth";
+import { redirect } from "next/navigation";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Drucker reservieren",
+};
+
+interface PrinterReservePageProps {
+	params: {
+		printerId: string;
+	};
+}
+
+export default async function PrinterReservePage(props: PrinterReservePageProps) {
+	const { user } = await validateRequest();
+	const { printerId } = props.params;
+
+	if (!user) {
+		return redirect("/");
+	}
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Drucker reservieren</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<PrinterReserveForm userId={user?.id} printerId={printerId} />
+			</CardContent>
+		</Card>
+	);
+}