feat(frontend): sidebar Reconciliation nav entry with badge count
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
Activity,
|
Activity,
|
||||||
|
GitMerge,
|
||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
Receipt,
|
Receipt,
|
||||||
Stethoscope,
|
Stethoscope,
|
||||||
@@ -8,6 +9,7 @@ import {
|
|||||||
Users,
|
Users,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useReconciliation } from "@/hooks/useReconciliation";
|
||||||
|
|
||||||
const nav = [
|
const nav = [
|
||||||
{ to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
|
{ to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
|
||||||
@@ -19,6 +21,13 @@ const nav = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export function Sidebar() {
|
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 (
|
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">
|
<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">
|
<div className="flex h-16 items-center px-6 border-b border-border/60">
|
||||||
@@ -69,6 +78,27 @@ export function Sidebar() {
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user