Update

frontend/src/components/Header.tsx

@@ -0,0 +1,59 @@
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+interface HeaderProps {
+  title: string;
+  breadcrumbs?: Array<{
+    label: string;
+    path?: string;
+  }>;
+}
+
+export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex-shrink-0 py-4 px-4 border-b border-purple-500/20">
+      {/* Breadcrumb Navigation */}
+      {breadcrumbs.length > 0 && (
+        <div className="mb-3">
+          <Breadcrumb>
+            <BreadcrumbList>
+              {breadcrumbs.map((crumb, index) => (
+                <React.Fragment key={index}>
+                  {index > 0 && <BreadcrumbSeparator className="text-slate-400" />}
+                  <BreadcrumbItem>
+                    {crumb.path ? (
+                      <BreadcrumbLink
+                        onClick={() => navigate(crumb.path!)}
+                        className="text-purple-200 hover:text-white cursor-pointer"
+                      >
+                        {crumb.label}
+                      </BreadcrumbLink>
+                    ) : (
+                      <BreadcrumbPage className="text-white font-semibold">
+                        {crumb.label}
+                      </BreadcrumbPage>
+                    )}
+                  </BreadcrumbItem>
+                </React.Fragment>
+              ))}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      )}
+      
+      {/* Title */}
+      <h1 className="text-2xl font-bold text-white">{title}</h1>
+    </div>
+  );
+};