Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-18 10:12:07 +01:00
parent 8692482376
commit 53bceb5479
5 changed files with 47 additions and 30 deletions

View File

@@ -109,8 +109,8 @@ function App() {
<FrameworkListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
}
/>
<Route
path="/frameworks/:frameworkId"
element={
@@ -129,8 +129,8 @@ function App() {
<VendorOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
}
/>
<Route
path="/settings"
element={

View File

@@ -1,19 +1,25 @@
import React, { createContext, useContext, useState, useCallback } from 'react';
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);
const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(
undefined,
);
export function BreadcrumbProvider({ children }: { children: React.ReactNode }) {
export function BreadcrumbProvider({
children,
}: {
children: React.ReactNode;
}) {
const [segments, setSegments] = useState<Record<string, string>>({});
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;
}
}

View File

@@ -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() {
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={path}>
{getBreadcrumbText(segment, path)}
</Link>
<Link to={path}>{getBreadcrumbText(segment, path)}</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>

View File

@@ -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({
<h1 className="text-xl font-semibold text-gray-900">
{data.node?.fullName}
</h1>
<p className="text-gray-600">
View and manage person details
</p>
<p className="text-gray-600">View and manage person details</p>
</div>
<Card className="p-6">
@@ -64,11 +62,15 @@ function PeopleOverviewPageContent({
<div className="grid grid-cols-2 gap-4">
<div className="col-span-2">
<label className="text-sm font-medium text-gray-700">Full Name</label>
<label className="text-sm font-medium text-gray-700">
Full Name
</label>
<p className="mt-1">{data.node?.fullName}</p>
</div>
<div className="col-span-2">
<label className="text-sm font-medium text-gray-700">Email</label>
<label className="text-sm font-medium text-gray-700">
Email
</label>
<p className="mt-1">{data.node?.primaryEmailAddress}</p>
</div>
</div>
@@ -86,12 +88,20 @@ function PeopleOverviewPageContent({
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Created At</label>
<p className="mt-1">{new Date(data.node?.createdAt).toLocaleString()}</p>
<label className="text-sm font-medium text-gray-700">
Created At
</label>
<p className="mt-1">
{new Date(data.node?.createdAt).toLocaleString()}
</p>
</div>
<div>
<label className="text-sm font-medium text-gray-700">Last Updated</label>
<p className="mt-1">{new Date(data.node?.updatedAt).toLocaleString()}</p>
<label className="text-sm font-medium text-gray-700">
Last Updated
</label>
<p className="mt-1">
{new Date(data.node?.updatedAt).toLocaleString()}
</p>
</div>
</div>
</div>
@@ -141,4 +151,4 @@ export default function PeopleOverviewPage() {
</Suspense>
</>
);
}
}

View File

@@ -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]);