internal frontend implementation with keycloak authentication

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>
+    );
+}