Use name for breadcrump

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/contexts/BreadcrumbContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+type BreadcrumbContextType = {
+  segments: Record<string, string>;
+  setBreadcrumbSegment: (path: string, display: string) => void;
+};
+
+const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(undefined);
+
+export function BreadcrumbProvider({ children }: { children: React.ReactNode }) {
+  const [segments, setSegments] = useState<Record<string, string>>({});
+
+  const setBreadcrumbSegment = useCallback((path: string, display: string) => {
+    setSegments(prev => ({
+      ...prev,
+      [path]: display
+    }));
+  }, []);
+
+  return (
+    <BreadcrumbContext.Provider value={{ segments, setBreadcrumbSegment }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+}
+
+export function useBreadcrumb() {
+  const context = useContext(BreadcrumbContext);
+  if (context === undefined) {
+    throw new Error('useBreadcrumb must be used within a BreadcrumbProvider');
+  }
+  return context;
+} 

apps/console/src/layouts/ConsoleLayout.tsx

@@ -15,19 +15,30 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { BreadcrumbProvider, useBreadcrumb } from "@/contexts/BreadcrumbContext";
 
-export default function ConsoleLayout() {
+function BreadcrumbNavigation() {
   const location = useLocation();
   const pathSegments = location.pathname.split("/").filter(Boolean);
+  const { segments } = useBreadcrumb();
+
+  const getBreadcrumbText = (segment: string, path: string) => {
+    // Check if we have a custom segment name
+    const fullPath = pathSegments
+      .slice(0, pathSegments.indexOf(segment) + 1)
+      .join('/');
+    
+    // Look for patterns like 'vendors/:id' in our segments
+    const patternPath = fullPath.replace(/\/[^/]+$/, '/:id');
+    if (segments[patternPath]) {
+      return segments[patternPath];
+    }
+
+    // Default to capitalized segment
+    return segment.charAt(0).toUpperCase() + segment.slice(1);
+  };
 
   return (
-    <SidebarProvider>
-      <AppSidebar />
-      <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
@@ -45,13 +56,12 @@ export default function ConsoleLayout() {
               <BreadcrumbItem>
                 {isLast ? (
                   <BreadcrumbPage>
-                            {segment.charAt(0).toUpperCase() + segment.slice(1)}
+                    {getBreadcrumbText(segment, path)}
                   </BreadcrumbPage>
                 ) : (
                   <BreadcrumbLink asChild>
                     <Link to={path}>
-                              {segment.charAt(0).toUpperCase() +
+                      {getBreadcrumbText(segment, path)}
-                                segment.slice(1)}
                     </Link>
                   </BreadcrumbLink>
                 )}
@@ -61,6 +71,20 @@ export default function ConsoleLayout() {
         })}
       </BreadcrumbList>
     </Breadcrumb>
+  );
+}
+
+export default function ConsoleLayout() {
+  return (
+    <BreadcrumbProvider>
+      <SidebarProvider>
+        <AppSidebar />
+        <SidebarInset>
+          <header className="flex h-16 shrink-0 items-center gap-2">
+            <div className="flex items-center gap-2 px-4">
+              <SidebarTrigger className="-ml-1" />
+              <Separator orientation="vertical" className="mr-2 h-4" />
+              <BreadcrumbNavigation />
             </div>
           </header>
           <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
@@ -68,5 +92,6 @@ export default function ConsoleLayout() {
           </div>
         </SidebarInset>
       </SidebarProvider>
+    </BreadcrumbProvider>
   );
 }

apps/console/src/pages/VendorOverviewPage.tsx

@@ -16,6 +16,8 @@ import { Suspense, useEffect } from "react";
 import type { VendorOverviewPageQuery as VendorOverviewPageQueryType } from "./__generated__/VendorOverviewPageQuery.graphql";
 import { useParams } from "react-router";
 import { Helmet } from "react-helmet-async";
+import { useBreadcrumb } from "@/contexts/BreadcrumbContext";
+
 const VendorOverviewPageQuery = graphql`
   query VendorOverviewPageQuery($vendorId: ID!) {
     node(id: $vendorId) {
@@ -36,6 +38,13 @@ function VendorOverviewPageContent({
 }) {
   const data = usePreloadedQuery(VendorOverviewPageQuery, queryRef);
   const [riskLevel, setRiskLevel] = useState("medium");
+  const { setBreadcrumbSegment } = useBreadcrumb();
+
+  useEffect(() => {
+    if (data.node?.name) {
+      setBreadcrumbSegment('vendors/:id', data.node.name);
+    }
+  }, [data.node?.name, setBreadcrumbSegment]);
 
   return (
     <div className="space-y-6 p-4 md:p-6 lg:p-8">