"use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useTranslation } from "react-i18next"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { adminNavLabel } from "@/lib/admin-nav-label"; import { ADMIN_BASE } from "@/modules/_config/admin-nav"; import { useAdminProfile } from "@/stores/admin-session"; import React from "react"; const DRAW_ROUTE_LABELS: Record = { finance: "Draw Finance", review: "Review", results: "Results", }; const RULES_ROUTE_LABELS: Record = { plays: "nav.items.plays", odds: "nav.rulesOddsTitle", }; const RISK_ROUTE_LABELS: Record = { cap: "nav.riskCapTitle", }; const SETTINGS_ROUTE_LABELS: Record = { currencies: "currencies.title", }; const CONFIG_ROUTE_LABELS: Record = { "integration-sites": "integrationSites.title", plays: "nav.items.plays", odds: "nav.items.odds", rebate: "nav.items.rebate", jackpot: "nav.items.jackpot", "risk-cap": "nav.items.risk-cap", wallet: "wallet.title", }; function titleCase(value: string): string { return value .split("-") .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) .join(" "); } type BreadcrumbCrumb = { label: string; href: string; isCurrent: boolean; }; export function AdminBreadcrumb() { const { t } = useTranslation(["common", "dashboard", "audit", "config", "draws", "reports"]); const pathname = usePathname(); const profile = useAdminProfile(); const navItems = profile?.navigation ?? []; // Split the current path into segments. const segments = pathname.split("/").filter(Boolean); // Base breadcrumb: home / dashboard. const breadcrumbs: BreadcrumbCrumb[] = [ { label: t("nav.home", { ns: "common" }), href: ADMIN_BASE, isCurrent: pathname === ADMIN_BASE, }, ]; if (pathname !== ADMIN_BASE) { const businessSegment = segments[1]; if (businessSegment) { const navItem = navItems .filter( (item) => pathname === item.href || pathname.startsWith(`${item.href}/`) || (item.activeMatchPrefix != null && (pathname === item.activeMatchPrefix || pathname.startsWith(`${item.activeMatchPrefix}/`))), ) .sort((a, b) => b.href.length - a.href.length)[0]; if (navItem && navItem.href !== ADMIN_BASE) { const translatedNavLabel = adminNavLabel(navItem.segment, t, navItem.label); breadcrumbs.push({ label: translatedNavLabel, href: navItem.href, isCurrent: pathname === navItem.href || segments.length === 2, }); } else { breadcrumbs.push({ label: t(`nav.${businessSegment}`, { ns: "common", defaultValue: titleCase(businessSegment), }), href: `${ADMIN_BASE}/${businessSegment}`, isCurrent: segments.length === 2, }); } const navCoversPath = navItem != null && (pathname === navItem.href || pathname.startsWith(`${navItem.href}/`)); if (segments.length > 2 && !navCoversPath) { const subSegment = segments[2]; let subLabel = ""; if (businessSegment === "rules" && subSegment) { const key = RULES_ROUTE_LABELS[subSegment]; subLabel = key ? t(key, { ns: "config", defaultValue: titleCase(subSegment) }) : titleCase(subSegment); } else if (businessSegment === "risk" && subSegment) { const key = RISK_ROUTE_LABELS[subSegment]; subLabel = key ? t(key, { ns: "config", defaultValue: titleCase(subSegment) }) : titleCase(subSegment); } else if (businessSegment === "settings" && subSegment) { subLabel = t(SETTINGS_ROUTE_LABELS[subSegment] ?? `settings.${subSegment}`, { ns: "config", defaultValue: titleCase(subSegment), }); } else if (businessSegment === "config" && subSegment) { const key = CONFIG_ROUTE_LABELS[subSegment]; subLabel = key ? t(key, { ns: "config", defaultValue: titleCase(subSegment) }) : titleCase(subSegment); } else { subLabel = subSegment ? t(`subnav.${subSegment}`, { ns: "draws", defaultValue: DRAW_ROUTE_LABELS[subSegment] ?? titleCase(subSegment), }) : ""; } if (subLabel) { breadcrumbs.push({ label: subLabel, href: pathname, isCurrent: true, }); } } } } return ( {breadcrumbs.map((crumb, index) => { const isLast = index === breadcrumbs.length - 1; const itemKey = `${crumb.href}-${index}`; return ( {crumb.isCurrent ? ( {crumb.label} ) : ( }>{crumb.label} )} {!isLast && } ); })} ); }