From 0b2f8332a253f5c14cc8af75d0a9c2bb9b1fc8ab Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Wed, 2 Jul 2025 01:25:55 +0900
Subject: [PATCH] Add dynamic breadcrumb navigation and update `kanzlei` routes
 under `/demo`

---
 .../demo/kanzlei/bilanzbuchhalter/page.tsx    |   7 ++
 .../app/{ => demo}/kanzlei/page.tsx           |   0
 .../app/demo/kanzlei/rechtsanwalt/page.tsx    |   7 ++
 .../app/demo/kanzlei/steuer/page.tsx          |   7 ++
 internal_frontend/app/demo/settings/page.tsx  |  10 ++
 internal_frontend/app/layout.tsx              |  30 ++++-
 internal_frontend/components/app-sidebar.tsx  |   6 +-
 .../components/dynamic-breadcrumb.tsx         |  42 +++++++
 .../components/ui/breadcrumb.tsx              | 109 ++++++++++++++++++
 internal_frontend/lib/breadcrumb-map.ts       |   8 ++
 internal_frontend/utils/BreadcrumbUtils.ts    |  28 +++++
 11 files changed, 246 insertions(+), 8 deletions(-)
 create mode 100644 internal_frontend/app/demo/kanzlei/bilanzbuchhalter/page.tsx
 rename internal_frontend/app/{ => demo}/kanzlei/page.tsx (100%)
 create mode 100644 internal_frontend/app/demo/kanzlei/rechtsanwalt/page.tsx
 create mode 100644 internal_frontend/app/demo/kanzlei/steuer/page.tsx
 create mode 100644 internal_frontend/app/demo/settings/page.tsx
 create mode 100644 internal_frontend/components/dynamic-breadcrumb.tsx
 create mode 100644 internal_frontend/components/ui/breadcrumb.tsx
 create mode 100644 internal_frontend/lib/breadcrumb-map.ts
 create mode 100644 internal_frontend/utils/BreadcrumbUtils.ts

diff --git a/internal_frontend/app/demo/kanzlei/bilanzbuchhalter/page.tsx b/internal_frontend/app/demo/kanzlei/bilanzbuchhalter/page.tsx
new file mode 100644
index 0000000..c47a85d
--- /dev/null
+++ b/internal_frontend/app/demo/kanzlei/bilanzbuchhalter/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+    return (
+        <div>
+            Bilanzbuchhalter
+        </div>
+    );
+}
diff --git a/internal_frontend/app/kanzlei/page.tsx b/internal_frontend/app/demo/kanzlei/page.tsx
similarity index 100%
rename from internal_frontend/app/kanzlei/page.tsx
rename to internal_frontend/app/demo/kanzlei/page.tsx
diff --git a/internal_frontend/app/demo/kanzlei/rechtsanwalt/page.tsx b/internal_frontend/app/demo/kanzlei/rechtsanwalt/page.tsx
new file mode 100644
index 0000000..cfda556
--- /dev/null
+++ b/internal_frontend/app/demo/kanzlei/rechtsanwalt/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+    return (
+        <div>
+            Rechtsanwalt
+        </div>
+    );
+}
diff --git a/internal_frontend/app/demo/kanzlei/steuer/page.tsx b/internal_frontend/app/demo/kanzlei/steuer/page.tsx
new file mode 100644
index 0000000..4ebdb39
--- /dev/null
+++ b/internal_frontend/app/demo/kanzlei/steuer/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+    return (
+        <div>
+            Steuer
+        </div>
+    );
+}
diff --git a/internal_frontend/app/demo/settings/page.tsx b/internal_frontend/app/demo/settings/page.tsx
new file mode 100644
index 0000000..3e25776
--- /dev/null
+++ b/internal_frontend/app/demo/settings/page.tsx
@@ -0,0 +1,10 @@
+import {SidebarGroupLabel} from "@/components/ui/sidebar";
+
+export default function Home() {
+    return (
+        <div>
+            <SidebarGroupLabel>Documents</SidebarGroupLabel>
+            Settings
+        </div>
+    );
+}
diff --git a/internal_frontend/app/layout.tsx b/internal_frontend/app/layout.tsx
index 3e07644..865c33e 100644
--- a/internal_frontend/app/layout.tsx
+++ b/internal_frontend/app/layout.tsx
@@ -1,9 +1,11 @@
 import type {Metadata} from "next";
 import "./globals.css";
 import {ThemeProvider} from "@/components/theme-provider";
-import {SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar"
+import {SidebarInset, SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar"
 import {AppSidebar} from "@/components/app-sidebar"
 import React from "react";
+import {Separator} from "@/components/ui/separator";
+import {DynamicBreadcrumb} from "@/components/dynamic-breadcrumb";
 
 export const metadata: Metadata = {
     title: "Internal | Rhein Software",
@@ -16,7 +18,6 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-
         <html lang="de" suppressHydrationWarning>
         <body>
         <ThemeProvider
@@ -25,10 +26,29 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
         >
-            <SidebarProvider>
+            <SidebarProvider
+                style={
+                    {
+                        "--sidebar-width": "calc(var(--spacing) * 72)",
+                        "--header-height": "calc(var(--spacing) * 12)",
+                    } as React.CSSProperties
+                }
+            >
                 <AppSidebar/>
                 <main>
-                    <SidebarTrigger/>
+                    <SidebarInset>
+                        <header
+                            className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+                            <div className="flex items-center gap-2 px-4">
+                                <SidebarTrigger className="-ml-1"/>
+                                <Separator
+                                    orientation="vertical"
+                                    className="mr-2 data-[orientation=vertical]:h-4"
+                                />
+                                <DynamicBreadcrumb/>
+                            </div>
+                        </header>
+                    </SidebarInset>
                     {children}
                 </main>
             </SidebarProvider>
@@ -36,4 +56,4 @@ export default function RootLayout({
         </body>
         </html>
     );
-}
+}
\ No newline at end of file
diff --git a/internal_frontend/components/app-sidebar.tsx b/internal_frontend/components/app-sidebar.tsx
index cb5dd4d..279084a 100644
--- a/internal_frontend/components/app-sidebar.tsx
+++ b/internal_frontend/components/app-sidebar.tsx
@@ -116,17 +116,17 @@ export function AppSidebar() {
                                 <CollapsibleContent>
                                     <SidebarMenuSub className="ml-4 border-l border-border pl-4 flex flex-col gap-y-1">
                                         <SidebarMenuSubItem>
-                                            <SidebarMenuSubButton href="/kanzlei/steuer">
+                                            <SidebarMenuSubButton href="/demo/kanzlei/steuer">
                                                 Steuer
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>
                                         <SidebarMenuSubItem>
-                                            <SidebarMenuSubButton href="/kanzlei/rechtsanwalt">
+                                            <SidebarMenuSubButton href="/demo/kanzlei/rechtsanwalt">
                                                 Rechtsanwalt
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>
                                         <SidebarMenuSubItem>
-                                            <SidebarMenuSubButton href="/kanzlei/bilanzbuchhalter">
+                                            <SidebarMenuSubButton href="/demo/kanzlei/bilanzbuchhalter">
                                                 Bilanzbuchhalter
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>
diff --git a/internal_frontend/components/dynamic-breadcrumb.tsx b/internal_frontend/components/dynamic-breadcrumb.tsx
new file mode 100644
index 0000000..623bb49
--- /dev/null
+++ b/internal_frontend/components/dynamic-breadcrumb.tsx
@@ -0,0 +1,42 @@
+// components/dynamic-breadcrumb.tsx
+'use client';
+
+import {usePathname} from 'next/navigation';
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import React from 'react';
+import {getBreadcrumbs} from "@/utils/BreadcrumbUtils";
+
+export function DynamicBreadcrumb() {
+    const pathname = usePathname();
+    const breadcrumbs = getBreadcrumbs(pathname);
+
+    return (
+        <Breadcrumb>
+            <BreadcrumbList>
+                {breadcrumbs.map((breadcrumb, index) => (
+                    <React.Fragment key={breadcrumb.href}>
+                        <BreadcrumbItem className="hidden md:block">
+                            {breadcrumb.isCurrentPage ? (
+                                <BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
+                            ) : (
+                                <BreadcrumbLink href={breadcrumb.href}>
+                                    {breadcrumb.label}
+                                </BreadcrumbLink>
+                            )}
+                        </BreadcrumbItem>
+                        {index < breadcrumbs.length - 1 && (
+                            <BreadcrumbSeparator className="hidden md:block"/>
+                        )}
+                    </React.Fragment>
+                ))}
+            </BreadcrumbList>
+        </Breadcrumb>
+    );
+}
\ No newline at end of file
diff --git a/internal_frontend/components/ui/breadcrumb.tsx b/internal_frontend/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..eb88f32
--- /dev/null
+++ b/internal_frontend/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/internal_frontend/lib/breadcrumb-map.ts b/internal_frontend/lib/breadcrumb-map.ts
new file mode 100644
index 0000000..4a06b70
--- /dev/null
+++ b/internal_frontend/lib/breadcrumb-map.ts
@@ -0,0 +1,8 @@
+// lib/breadcrumb-map.ts
+export const breadcrumbMap: Record<string, string> = {
+    'dashboard': 'Dashboard',
+    'settings': 'Settings',
+    'demo': 'Demo',
+    'users': 'User Management',
+    // Add more mappings as needed
+};
\ No newline at end of file
diff --git a/internal_frontend/utils/BreadcrumbUtils.ts b/internal_frontend/utils/BreadcrumbUtils.ts
new file mode 100644
index 0000000..c10de82
--- /dev/null
+++ b/internal_frontend/utils/BreadcrumbUtils.ts
@@ -0,0 +1,28 @@
+// utils/getBreadcrumbs.ts
+import {breadcrumbMap} from '@/lib/breadcrumb-map';
+
+export type Breadcrumb = {
+    label: string;
+    href: string;
+    isCurrentPage?: boolean;
+};
+
+export function getBreadcrumbs(path: string): Breadcrumb[] {
+    const pathSegments = path.split('/').filter(Boolean);
+
+    return pathSegments.map((segment, index) => {
+        const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
+        // Use the mapping if it exists, otherwise format the segment
+        const label = breadcrumbMap[segment.toLowerCase()] ||
+            segment
+                .split('-')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(' ');
+
+        return {
+            label,
+            href,
+            isCurrentPage: index === pathSegments.length - 1
+        };
+    });
+}
\ No newline at end of file