Arda Samadi
cedeef4746
Ledger section with sub-tabs: overview (money held/owed, payouts by status, and a reconciliation warning card), payouts + transactions lists, per-seller balances list, and a per-seller detail showing recorded vs derived balance + discrepancy, bank accounts and payout history. Enabled the Ledger nav item. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { Link, Outlet, useLocation } from "@remix-run/react";
|
||
import { cn } from "~/lib/utils";
|
||
import { AdminPageTitle } from "~/components/admin/DataTable";
|
||
|
||
const TABS = [
|
||
{ label: "نمای کلی", to: "/admin/ledger", exact: true },
|
||
{ label: "برداشتها", to: "/admin/ledger/payouts" },
|
||
{ label: "تراکنشها", to: "/admin/ledger/transactions" },
|
||
{ label: "فروشندگان", to: "/admin/ledger/sellers" },
|
||
];
|
||
|
||
export default function LedgerLayout() {
|
||
const loc = useLocation();
|
||
const active = (t: (typeof TABS)[number]) =>
|
||
t.exact ? loc.pathname === t.to : loc.pathname.startsWith(t.to);
|
||
|
||
return (
|
||
<div>
|
||
<AdminPageTitle>دفتر مالی</AdminPageTitle>
|
||
<div className="flex gap-1 mb-5 border-b border-WHITE3 overflow-x-auto hide-scrollbar">
|
||
{TABS.map((t) => (
|
||
<Link
|
||
key={t.to}
|
||
to={t.to}
|
||
prefetch="intent"
|
||
className={cn(
|
||
"px-4 py-2 text-[13.5px] font-semibold whitespace-nowrap border-b-2 -mb-px transition-colors",
|
||
active(t)
|
||
? "border-BLACK text-BLACK"
|
||
: "border-transparent text-GRAY hover:text-BLACK2"
|
||
)}
|
||
>
|
||
{t.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<Outlet />
|
||
</div>
|
||
);
|
||
}
|