Clarify Scan Report Tables breadcrumbs

app/next-client-app/app/(protected)/scanreports/[id]/layout.tsx

@@ -47,7 +47,8 @@ export default async function ScanReportLayout(
   const items = [
     {
       name: "Tables",
-      iconName: "TableProperties"
+      iconName: "TableProperties",
+      matchPrefixes: ["tables"]
     },
     { name: "Rules", slug: "mapping_rules", iconName: "Waypoints" },
     { name: "Review Rules", slug: "review_rules", iconName: "SearchCheck" },
@@ -153,13 +154,7 @@ export default async function ScanReportLayout(
         <div>
           <NavGroup
             path={`/scanreports/${params.id}`}
-            items={[
-              ...items.map((x) => ({
-                text: x.name,
-                slug: x.slug,
-                iconName: x.iconName
-              }))
-            ]}
+            items={items.map(x => ({ ...x, text: x.name }))}
           />
         </div>
 

app/next-client-app/app/(protected)/scanreports/[id]/page.tsx

@@ -7,6 +7,7 @@ import { objToQuery } from "@/lib/client-utils";
 import { FilterParameters } from "@/types/filter";
 import ScanReportsTableClient from "@/components/scanreports/ScanReportsTableClient";
 import { DataTableFilter } from "@/components/data-table/DataTableFilter";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb";
 
 interface ScanReportsTableProps {
   params: Promise<{
@@ -43,14 +44,19 @@ export default async function ScanReportsTable(props: ScanReportsTableProps) {
 
   return (
     <div>
-      <div>
-        <ScanReportsTableClient
-          scanReportId={id}
-          Filter={filter}
-          initialScanReportsResult={scanReportsResult}
-          count={scanReportsTables.count}
-        />
-      </div>
+      <Breadcrumb className="mb-3">
+        <BreadcrumbList>
+          <BreadcrumbPage>
+            Tables
+          </BreadcrumbPage>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <ScanReportsTableClient
+        scanReportId={id}
+        Filter={filter}
+        initialScanReportsResult={scanReportsResult}
+        count={scanReportsTables.count}
+      />
     </div>
   );
 }

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx

@@ -12,8 +12,7 @@ import {
 } from "@/api/concepts";
 import { ConceptDataTable } from "@/components/concepts/ConceptDataTable";
 import { columns } from "./columns";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { TableBreadcrumbs } from "@/components/scanreports/TableBreadcrumbs";
 
 interface ScanReportsValueProps {
   params: Promise<{
@@ -66,17 +65,14 @@ export default async function ScanReportsValue(props: ScanReportsValueProps) {
       : [];
   return (
     <div>
-      <div className="gap-2 flex">
-        {" "}
-        <Link href={`/scanreports/${id}/tables/${tableId}`}>
-          <Button variant="secondary" className="mb-3">
-            Table: {table.name}
-          </Button>
-        </Link>
-        <Button variant="secondary" className="mb-3">
-          Field: {field.name}
-        </Button>
-      </div>
+      <TableBreadcrumbs
+        id={id}
+        tableId={tableId}
+        fieldId={fieldId}
+        tableName={table.name}
+        fieldName={field.name}
+        variant="field"
+      />
       <div>
         <ConceptDataTable
           count={scanReportsValues.count}

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/update/page.tsx

@@ -5,9 +5,8 @@ import {
   getScanReportTable,
 } from "@/api/scanreports";
 import { ScanReportFieldEditForm } from "@/components/scanreports/ScanReportFieldEditForm";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
 import { notFound } from "next/navigation";
+import { TableBreadcrumbs } from "@/components/scanreports/TableBreadcrumbs";
 
 interface ScanReportsEditFieldProps {
   params: Promise<{
@@ -37,17 +36,14 @@ export default async function ScanReportsEditField(props: ScanReportsEditFieldPr
 
   return (
     <div>
-      <div className="gap-2 flex">
-        {" "}
-        <Link href={`/scanreports/${id}/tables/${tableId}`}>
-          <Button variant={"secondary"} className="mb-3">
-            Table: {table.name}
-          </Button>
-        </Link>
-        <Button variant={"secondary"} className="mb-3">
-          Update Field: {field.name}
-        </Button>
-      </div>
+      <TableBreadcrumbs
+        id={id}
+        tableId={tableId}
+        fieldId={fieldId}
+        tableName={table.name}
+        fieldName={field.name}
+        variant="fieldUpdate"
+      />
       <div className="mt-2">
         <ScanReportFieldEditForm
           scanreportId={scanReport.id}

app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx

@@ -11,7 +11,7 @@ import {
   getAllScanReportConcepts,
 } from "@/api/concepts";
 import { ConceptDataTable } from "@/components/concepts/ConceptDataTable";
-import { Button } from "@/components/ui/button";
+import { TableBreadcrumbs } from "@/components/scanreports/TableBreadcrumbs";
 
 interface ScanReportsFieldProps {
   params: Promise<{
@@ -58,9 +58,12 @@ export default async function ScanReportsField(props: ScanReportsFieldProps) {
 
   return (
     <div>
-      <Button variant={"secondary"} className="mb-3">
-        Table: {tableName.name}
-      </Button>
+      <TableBreadcrumbs
+        id={id}
+        tableId={tableId}
+        tableName={tableName.name}
+        variant="table"
+      />
       <div>
         <ConceptDataTable
           count={scanReportsFields.count}

app/next-client-app/components/core/nav-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { Item } from "./nav-group";
 import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
@@ -26,14 +26,18 @@ export const NavButton = ({
   parallelRoutesKey?: string;
   item: Item;
 }) => {
-  const segment = useSelectedLayoutSegment(parallelRoutesKey);
+  const pathname = usePathname();
   const href = item.slug ? path + "/" + item.slug : path;
-  const isActive =
-    // Example home pages e.g. `/layouts`
-    (!item.slug && segment === null) ||
-    segment === item.segment ||
-    // Nested pages e.g. `/layouts/electronics`
-    segment === item.slug;
+  const isActive = item.slug
+    ? pathname === href || pathname.startsWith(href + "/")
+    : (
+        pathname === path ||
+        pathname === path + "/" ||
+        (item.matchPrefixes &&
+          item.matchPrefixes.some(prefix =>
+            pathname.startsWith(path + "/" + prefix)
+          ))
+      );
   const iconMap: { [key: string]: LucideIcon } = {
     SearchCheck,
     Waypoints,

app/next-client-app/components/core/nav-group.tsx

@@ -6,6 +6,7 @@ export type Item = {
   segment?: string;
   parallelRoutesKey?: string;
   iconName?: string;
+  matchPrefixes?: string[];
 };
 
 export const NavGroup = ({

app/next-client-app/components/scanreports/TableBreadcrumbs.tsx

@@ -0,0 +1,122 @@
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbPage } from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ChevronDownIcon } from "lucide-react";
+import { getScanReportFields, getScanReportTables } from "@/api/scanreports";
+
+interface TableBreadcrumbsProps {
+  id: string;
+  tableId?: string;
+  fieldId?: string;
+  tableName?: string;
+  fieldName?: string;
+  variant: "table" | "field" | "fieldUpdate";
+}
+
+// Helper: Table breadcrumb with dropdown
+function TableBreadcrumbWithDropdown({ id, tableId, tableName, tables }: { id: string, tableId: string, tableName: string, tables: any }) {
+  return (
+    <span className="flex items-center gap-1">
+      <Link href={`/scanreports/${id}/tables/${tableId}`}>Table: {tableName}</Link>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <span tabIndex={0} role="button" aria-label="Show table list">
+            <ChevronDownIcon size={16} />
+          </span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {tables.results.map((table: any) => (
+            <DropdownMenuItem asChild key={table.id}>
+              <Link href={`/scanreports/${id}/tables/${table.id}`}>{table.name}</Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </span>
+  );
+}
+
+// Helper: Field breadcrumb with dropdown
+function FieldBreadcrumbWithDropdown({ id, tableId, fieldId, fieldName, fields }: { id: string, tableId: string, fieldId: string, fieldName: string, fields: any }) {
+  return (
+    <span className="flex items-center gap-1">
+      <Link href={`/scanreports/${id}/tables/${tableId}/fields/${fieldId}`}>Field: {fieldName}</Link>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <span tabIndex={0} role="button" aria-label="Show field list">
+            <ChevronDownIcon size={16} />
+          </span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {fields.results.map((field: any) => (
+            <DropdownMenuItem asChild key={field.id}>
+              <Link href={`/scanreports/${id}/tables/${tableId}/fields/${field.id}`}>{field.name}</Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </span>
+  );
+}
+
+export async function TableBreadcrumbs({
+  id,
+  tableId,
+  fieldId,
+  tableName,
+  fieldName,
+  variant,
+}: TableBreadcrumbsProps) {
+  const tables = await getScanReportTables(id, undefined);
+  let fields: any = { count: 0, next: null, previous: null, results: [] };
+  if (tableId) {
+    fields = await getScanReportFields(id, tableId, undefined);
+  }
+
+  return (
+    <Breadcrumb className="mb-3">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <Link href={`/scanreports/${id}`}>Tables</Link>
+        </BreadcrumbItem>
+        {variant === "table" && tableId && tableName && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbPage>
+              <TableBreadcrumbWithDropdown id={id} tableId={tableId} tableName={tableName} tables={tables} />
+            </BreadcrumbPage>
+          </>
+        )}
+        {variant === "field" && tableId && tableName && fieldId && fieldName && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <TableBreadcrumbWithDropdown id={id} tableId={tableId} tableName={tableName} tables={tables} />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbPage>
+              <FieldBreadcrumbWithDropdown id={id} tableId={tableId} fieldId={fieldId} fieldName={fieldName} fields={fields} />
+            </BreadcrumbPage>
+          </>
+        )}
+        {variant === "fieldUpdate" && tableId && tableName && fieldId && fieldName && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <TableBreadcrumbWithDropdown id={id} tableId={tableId} tableName={tableName} tables={tables} />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbPage>
+              <Link href={`/scanreports/${id}/tables/${tableId}/fields/${fieldId}/update`}>Update Field: {fieldName}</Link>
+            </BreadcrumbPage>
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}