diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index c87fc1da2..8e129579a 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -109,8 +109,8 @@ function App() { - } - /> + } + /> - } - /> + } + /> ; setBreadcrumbSegment: (path: string, display: string) => void; }; -const BreadcrumbContext = createContext(undefined); +const BreadcrumbContext = createContext( + undefined, +); -export function BreadcrumbProvider({ children }: { children: React.ReactNode }) { +export function BreadcrumbProvider({ + children, +}: { + children: React.ReactNode; +}) { const [segments, setSegments] = useState>({}); const setBreadcrumbSegment = useCallback((path: string, display: string) => { - setSegments(prev => ({ + setSegments((prev) => ({ ...prev, - [path]: display + [path]: display, })); }, []); @@ -27,7 +33,7 @@ export function BreadcrumbProvider({ children }: { children: React.ReactNode }) export function useBreadcrumb() { const context = useContext(BreadcrumbContext); if (context === undefined) { - throw new Error('useBreadcrumb must be used within a BreadcrumbProvider'); + throw new Error("useBreadcrumb must be used within a BreadcrumbProvider"); } return context; -} \ No newline at end of file +} diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx index bec20cca3..fa851cfc4 100644 --- a/apps/console/src/layouts/ConsoleLayout.tsx +++ b/apps/console/src/layouts/ConsoleLayout.tsx @@ -15,7 +15,10 @@ import { SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar"; -import { BreadcrumbProvider, useBreadcrumb } from "@/contexts/BreadcrumbContext"; +import { + BreadcrumbProvider, + useBreadcrumb, +} from "@/contexts/BreadcrumbContext"; function BreadcrumbNavigation() { const location = useLocation(); @@ -26,10 +29,10 @@ function BreadcrumbNavigation() { // Check if we have a custom segment name const fullPath = pathSegments .slice(0, pathSegments.indexOf(segment) + 1) - .join('/'); - + .join("/"); + // Look for patterns like 'vendors/:id' in our segments - const patternPath = fullPath.replace(/\/[^/]+$/, '/:id'); + const patternPath = fullPath.replace(/\/[^/]+$/, "/:id"); if (segments[patternPath]) { return segments[patternPath]; } @@ -60,9 +63,7 @@ function BreadcrumbNavigation() { ) : ( - - {getBreadcrumbText(segment, path)} - + {getBreadcrumbText(segment, path)} )} diff --git a/apps/console/src/pages/PeopleOverviewPage.tsx b/apps/console/src/pages/PeopleOverviewPage.tsx index 6183584f7..db9cb98fb 100644 --- a/apps/console/src/pages/PeopleOverviewPage.tsx +++ b/apps/console/src/pages/PeopleOverviewPage.tsx @@ -37,7 +37,7 @@ function PeopleOverviewPageContent({ useEffect(() => { if (data.node?.primaryEmailAddress) { - setBreadcrumbSegment('peoples/:id', data.node.primaryEmailAddress); + setBreadcrumbSegment("peoples/:id", data.node.primaryEmailAddress); } }, [data.node?.primaryEmailAddress, setBreadcrumbSegment]); @@ -48,9 +48,7 @@ function PeopleOverviewPageContent({

{data.node?.fullName}

-

- View and manage person details -

+

View and manage person details

@@ -64,11 +62,15 @@ function PeopleOverviewPageContent({
- +

{data.node?.fullName}

- +

{data.node?.primaryEmailAddress}

@@ -86,12 +88,20 @@ function PeopleOverviewPageContent({
- -

{new Date(data.node?.createdAt).toLocaleString()}

+ +

+ {new Date(data.node?.createdAt).toLocaleString()} +

- -

{new Date(data.node?.updatedAt).toLocaleString()}

+ +

+ {new Date(data.node?.updatedAt).toLocaleString()} +

@@ -141,4 +151,4 @@ export default function PeopleOverviewPage() { ); -} \ No newline at end of file +} diff --git a/apps/console/src/pages/VendorOverviewPage.tsx b/apps/console/src/pages/VendorOverviewPage.tsx index 7404bac28..68f02699f 100644 --- a/apps/console/src/pages/VendorOverviewPage.tsx +++ b/apps/console/src/pages/VendorOverviewPage.tsx @@ -42,7 +42,7 @@ function VendorOverviewPageContent({ useEffect(() => { if (data.node?.name) { - setBreadcrumbSegment('vendors/:id', data.node.name); + setBreadcrumbSegment("vendors/:id", data.node.name); } }, [data.node?.name, setBreadcrumbSegment]);