@nebulit/embuilder 0.1.39

package/templates/frontend/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "vite_react_shadcn_ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@toast-ui/react-calendar": "^2.1.3",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@supabase/supabase-js": "^2.75.0",
+    "@tanstack/react-query": "^5.83.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-calendar": "^6.0.0",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "toast-ui": "^1.0.0",
+    "uuid": "^13.0.0",
+    "vaul": "^0.9.9",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "jsdom": "^20.0.3",
+    "lovable-tagger": "^1.1.13",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19",
+    "vitest": "^3.2.4"
+  }
+}

package/templates/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/frontend/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/templates/frontend/public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

package/templates/frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/templates/frontend/src/App.tsx

@@ -0,0 +1,47 @@
+import {Toaster} from "@/components/ui/toaster";
+import {Toaster as Sonner} from "@/components/ui/sonner";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {AuthProvider} from "@/contexts/AuthContext";
+
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {BrowserRouter, Routes, Route} from "react-router-dom";
+import Dashboard from "./pages/Dashboard";
+import Tables from "./pages/Tables";
+import Staff from "./pages/Staff";
+import Shifts from "./pages/Shifts";
+import Tasks from "./pages/Tasks";
+import Menus from "./pages/Menus";
+import Vacations from "./pages/Vacations";
+import NotFound from "./pages/NotFound";
+import Auth from "@/pages/Auth.tsx";
+import Register from "@/pages/Register.tsx";
+import { ProtectedRoute } from "./components/ProtectedRoute";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+    <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+        <TooltipProvider>
+            <Toaster/>
+            <Sonner/>
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/register" element={<Register/>}/>
+                    <Route path="/auth" element={<Auth/>}/>
+                    <Route path="/" element={<ProtectedRoute><Dashboard/></ProtectedRoute>}/>
+                    <Route path="/tables" element={<ProtectedRoute><Tables/></ProtectedRoute>}/>
+                    <Route path="/staff" element={<ProtectedRoute><Staff/></ProtectedRoute>}/>
+                    <Route path="/shifts" element={<ProtectedRoute><Shifts/></ProtectedRoute>}/>
+                    <Route path="/tasks" element={<ProtectedRoute><Tasks/></ProtectedRoute>}/>
+                    <Route path="/menus" element={<ProtectedRoute><Menus/></ProtectedRoute>}/>
+                    <Route path="/vacations" element={<ProtectedRoute><Vacations/></ProtectedRoute>}/>
+                    <Route path="*" element={<NotFound/>}/>
+                </Routes>
+            </BrowserRouter>
+        </TooltipProvider>
+        </AuthProvider>
+    </QueryClientProvider>
+);
+
+export default App;

package/templates/frontend/src/components/NavLink.tsx

@@ -0,0 +1,28 @@
+import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };

package/templates/frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,24 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, loading, tenantId } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!user || !tenantId) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  return <>{children}</>;
+}

package/templates/frontend/src/components/calendar/Calendar.tsx

@@ -0,0 +1,302 @@
+import {useMemo, useRef, useCallback} from "react";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {Calendar as CalendarIcon, ChevronLeft, ChevronRight, Phone, Mail, Clock, AlignLeft} from "lucide-react";
+import Calendar from "@toast-ui/react-calendar";
+import "@toast-ui/calendar/dist/toastui-calendar.min.css";
+import {useState} from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {format} from "date-fns";
+import {de} from "date-fns/locale";
+
+
+export type CalendarEntry = {
+    type: string,
+    id: string,
+    title: string,
+    description: string,
+    phone: string,
+    email: string,
+    start: string,
+    end: string,
+    showupRegistered?: boolean,
+}
+
+interface DashboardCalendarProps {
+    entries: CalendarEntry[];
+    onAppointmentClick: (appointment: CalendarEntry) => void;
+    onNoShow?: (reservationId: string) => void;
+    onShowUp?: (reservationId: string) => void;
+}
+
+export function DashboardCalendar({
+                                      entries,
+                                      onAppointmentClick,
+                                      onNoShow,
+                                      onShowUp,
+                                  }: DashboardCalendarProps) {
+    const calendarRef = useRef<typeof Calendar>(null);
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [view, setView] = useState<'month' | 'week' | 'day'>('month');
+    const [selectedEntry, setSelectedEntry] = useState<CalendarEntry | null>(null);
+
+    // Convert appointments to Toast UI Calendar events
+    const events = useMemo(() => {
+        return entries.map(entry => {
+            const showup = entry.showupRegistered === true;
+            return {
+                id: entry.id,
+                calendarId: 'reservations',
+                title: entry.title,
+                body: entry.description || '',
+                email: entry.email,
+                phone: entry.phone,
+                start: new Date(entry.start),
+                end: new Date(entry.end),
+                category: 'time' as const,
+                backgroundColor: showup ? '#16a34a' : 'hsl(var(--primary))',
+                color: '#ffffff',
+                borderColor: showup ? '#15803d' : 'hsl(var(--primary))',
+                raw: entry,
+            };
+        });
+    }, [entries]);
+
+    const calendars = useMemo(() => [
+        {
+            id: 'reservations',
+            name: 'Appointments',
+            backgroundColor: 'hsl(var(--primary))',
+            borderColor: 'hsl(var(--primary))',
+            color: 'hsl(var(--primary-foreground))',
+        },
+    ], []);
+
+    const handleClickEvent = useCallback((eventInfo: { event: { raw: CalendarEntry } }) => {
+        if (eventInfo.event.raw) {
+            setSelectedEntry(eventInfo.event.raw);
+            onAppointmentClick(eventInfo.event.raw);
+        }
+    }, [onAppointmentClick]);
+
+    const handlePrev = () => {
+        const calendarInstance = (calendarRef.current as any)?.getInstance?.();
+        if (calendarInstance) {
+            calendarInstance.prev();
+            setCurrentDate(calendarInstance.getDate().toDate());
+        }
+    };
+
+    const handleNext = () => {
+        const calendarInstance = (calendarRef.current as any)?.getInstance?.();
+        if (calendarInstance) {
+            calendarInstance.next();
+            setCurrentDate(calendarInstance.getDate().toDate());
+        }
+    };
+
+    const handleToday = () => {
+        const calendarInstance = (calendarRef.current as any)?.getInstance?.();
+        if (calendarInstance) {
+            calendarInstance.today();
+            setCurrentDate(calendarInstance.getDate().toDate());
+        }
+    };
+
+    const handleViewChange = (newView: 'month' | 'week' | 'day') => {
+        setView(newView);
+        const calendarInstance = (calendarRef.current as any)?.getInstance?.();
+        if (calendarInstance) {
+            calendarInstance.changeView(newView);
+        }
+    };
+
+    const formatCurrentDate = () => {
+        return currentDate.toLocaleDateString('de-DE', {
+            month: 'long',
+            year: 'numeric'
+        });
+    };
+
+    const formatDateTime = (dateStr: string) => {
+        try {
+            return format(new Date(dateStr), "dd. MMMM yyyy, HH:mm 'Uhr'", {locale: de});
+        } catch {
+            return dateStr;
+        }
+    };
+
+    return (
+        <>
+            <Card className="mt-6">
+                <CardHeader>
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                        <CardTitle className="flex items-center gap-2">
+                            <CalendarIcon className="h-5 w-5"/>
+                            Kalender
+                        </CardTitle>
+
+                        <div className="flex items-center gap-2">
+                            {/* View Toggle */}
+                            <div className="flex rounded-md border overflow-hidden">
+                                <Button
+                                    variant={view === 'month' ? 'default' : 'ghost'}
+                                    size="sm"
+                                    onClick={() => handleViewChange('month')}
+                                    className="rounded-none"
+                                >
+                                    Monat
+                                </Button>
+                                <Button
+                                    variant={view === 'week' ? 'default' : 'ghost'}
+                                    size="sm"
+                                    onClick={() => handleViewChange('week')}
+                                    className="rounded-none border-x"
+                                >
+                                    Woche
+                                </Button>
+                                <Button
+                                    variant={view === 'day' ? 'default' : 'ghost'}
+                                    size="sm"
+                                    onClick={() => handleViewChange('day')}
+                                    className="rounded-none"
+                                >
+                                    Tag
+                                </Button>
+                            </div>
+
+                            {/* Navigation */}
+                            <div className="flex items-center gap-1">
+                                <Button variant="outline" size="icon" onClick={handlePrev}>
+                                    <ChevronLeft className="h-4 w-4"/>
+                                </Button>
+                                <Button variant="outline" size="sm" onClick={handleToday}>
+                                    Heute
+                                </Button>
+                                <Button variant="outline" size="icon" onClick={handleNext}>
+                                    <ChevronRight className="h-4 w-4"/>
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <p className="text-lg font-semibold mt-2">{formatCurrentDate()}</p>
+                </CardHeader>
+                <CardContent>
+                    <div className="calendar-wrapper" style={{height: '600px'}}>
+                        <Calendar
+                            ref={calendarRef}
+                            height="100%"
+                            view={view}
+                            calendars={calendars}
+                            events={events}
+                            month={{
+                                dayNames: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+                                startDayOfWeek: 1,
+                            }}
+                            week={{
+                                dayNames: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+                                startDayOfWeek: 1,
+                                hourStart: 6,
+                                hourEnd: 22,
+                                taskView: false,
+                                eventView: ['time'],
+                            }}
+                            usageStatistics={false}
+                            isReadOnly={true}
+                            onClickEvent={handleClickEvent}
+                            template={{
+                                time(event: { title: string, body: string, raw: { email: string, phone: string } }) {
+                                    const emailIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:3px"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>`;
+                                    const phoneIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:3px"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>`;
+                                    return `<span style="font-size: 12px;">
+                                    <div><b>${event.title}</b></div><br/>
+                                    <div>Anlass / Beschreibung: ${event.body}</div>
+                                    ${event.raw?.email ? `<div>${emailIcon}${event.raw.email}</div>` : ''}
+                                    ${event.raw?.phone ? `<div>${phoneIcon}${event.raw.phone}</div>` : ''}
+                                    </span>`;
+                                },
+                                allday(event: { title: string }) {
+                                    return `<span style="font-size: 12px;">${event.title}</span>`;
+                                },
+                                timegridDisplayPrimaryTime({time}: { time: Date }) {
+                                    return `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`;
+                                },
+                                timegridDisplayTime({time}: { time: Date }) {
+                                    return `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`;
+                                },
+                            }}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Dialog open={!!selectedEntry} onOpenChange={(open) => !open && setSelectedEntry(null)}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>{selectedEntry?.title}</DialogTitle>
+                    </DialogHeader>
+                    {selectedEntry && (
+                        <div className="space-y-4 pt-2">
+                            <div className="flex items-start gap-3">
+                                <Clock className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0"/>
+                                <div className="text-sm">
+                                    <p>{formatDateTime(selectedEntry.start)}</p>
+                                    <p className="text-muted-foreground">bis {formatDateTime(selectedEntry.end)}</p>
+                                </div>
+                            </div>
+                            {selectedEntry.description && (
+                                <div className="flex items-start gap-3">
+                                    <AlignLeft className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0"/>
+                                    <p className="text-sm">{selectedEntry.description}</p>
+                                </div>
+                            )}
+                            {selectedEntry.email && (
+                                <div className="flex items-center gap-3">
+                                    <Mail className="h-4 w-4 text-muted-foreground shrink-0"/>
+                                    <a href={`mailto:${selectedEntry.email}`}
+                                       className="text-sm text-primary hover:underline">
+                                        {selectedEntry.email}
+                                    </a>
+                                </div>
+                            )}
+                            {selectedEntry.phone && (
+                                <div className="flex items-center gap-3">
+                                    <Phone className="h-4 w-4 text-muted-foreground shrink-0"/>
+                                    <a href={`tel:${selectedEntry.phone}`}
+                                       className="text-sm text-primary hover:underline">
+                                        {selectedEntry.phone}
+                                    </a>
+                                </div>
+                            )}
+                            <div className="flex gap-3 pt-2">
+                                <Button
+                                    className="flex-1 bg-green-600 hover:bg-green-700 text-white"
+                                    onClick={() => {
+                                        onShowUp?.(selectedEntry.id);
+                                        setSelectedEntry(null);
+                                    }}
+                                >
+                                    Sind gekommen
+                                </Button>
+                                <Button
+                                    className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+                                    onClick={() => {
+                                        onNoShow?.(selectedEntry.id);
+                                        setSelectedEntry(null);
+                                    }}
+                                >
+                                    Sind nicht gekommen
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

package/templates/frontend/src/components/layout/DashboardLayout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { Sidebar } from "./Sidebar";
+import { Header } from "./Header";
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+  title: string;
+  subtitle?: string;
+}
+
+export function DashboardLayout({ children, title, subtitle }: DashboardLayoutProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar />
+      <div className="pl-64">
+        <Header title={title} subtitle={subtitle} />
+        <main className="p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

package/templates/frontend/src/components/layout/Header.tsx

@@ -0,0 +1,45 @@
+import { Bell, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface HeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+export function Header({ title, subtitle }: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div>
+        <h1 className="text-xl font-semibold text-foreground">{title}</h1>
+        {subtitle && (
+          <p className="text-sm text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="relative hidden md:block">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            className="w-64 pl-9"
+          />
+        </div>
+
+        <Button variant="ghost" size="icon" className="relative">
+          <Bell className="h-5 w-5" />
+          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+            3
+          </span>
+        </Button>
+
+        <div className="flex items-center gap-3">
+          <div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center">
+            <span className="text-sm font-medium text-primary">JD</span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}