feat(frontend): sidebar Reconciliation nav entry with badge count

This commit is contained in:
Tyler
2026-06-20 00:04:30 -06:00
parent 99c8635178
commit 8412bdc090
+30
View File
@@ -1,6 +1,7 @@
import { NavLink } from "react-router-dom";
import {
Activity,
GitMerge,
LayoutDashboard,
Receipt,
Stethoscope,
@@ -8,6 +9,7 @@ import {
Users,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useReconciliation } from "@/hooks/useReconciliation";
const nav = [
{ to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
@@ -19,6 +21,13 @@ const nav = [
];
export function Sidebar() {
// Surface the unmatched-bucket size on the Reconciliation nav entry so the
// operator notices when manual reconciliation is needed.
const { unmatched } = useReconciliation();
const unmatchedCount =
(unmatched.data?.claims.length ?? 0) +
(unmatched.data?.remittances.length ?? 0);
return (
<aside className="hidden md:flex md:w-60 md:flex-col md:fixed md:inset-y-0 z-30 border-r border-border/60 bg-sidebar/60 backdrop-blur-xl">
<div className="flex h-16 items-center px-6 border-b border-border/60">
@@ -69,6 +78,27 @@ export function Sidebar() {
</NavLink>
</li>
))}
<li>
<NavLink
to="/reconciliation"
className={({ isActive }) =>
cn(
"group relative flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
isActive
? "nav-active"
: "text-muted-foreground hover:text-foreground hover:bg-muted/40"
)
}
>
<GitMerge className="h-4 w-4" strokeWidth={1.5} />
<span>Reconciliation</span>
{unmatchedCount > 0 && (
<span className="ml-auto text-[10px] font-mono tabular-nums text-warning">
{unmatchedCount > 99 ? "99+" : unmatchedCount}
</span>
)}
</NavLink>
</li>
</ul>
</nav>