@@ -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={
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user