("all");
+ const { walletAddress } = useWalletContext();
+ const financialData = useFinancialDashboard(activeTab);
+
+ const amountByDateChartData = React.useMemo(
+ () => financialData.amountsByDate.map((d) => ({ month: d.date, desktop: d.amount })),
+ [financialData.amountsByDate]
+ );
+
+ const escrowTypeDonutData = React.useMemo(
+ () =>
+ financialData.typeSlices.map((s) => ({
+ browser: s.type === "single" ? "single" : "multi",
+ visitors: s.value,
+ fill:
+ s.type === "single" ? "var(--color-single)" : "var(--color-multi)",
+ })),
+ [financialData.typeSlices]
+ );
+
+ const createdByDateChartData = React.useMemo(
+ () =>
+ financialData.createdByDate.map((d) => ({ month: d.date, desktop: d.count })),
+ [financialData.createdByDate]
+ );
+
+ if (!walletAddress) {
+ return (
+
+
+ Financial Dashboard
+
+
+
+
+
+ Connect your wallet
+
+ Connect your wallet to see your receiver dashboard and escrow
+ totals.
+
+
+
+
+ );
+ }
+
+ if (financialData.isLoading && financialData.totalEscrows === 0) {
+ return (
+
+
+ Financial Dashboard
+
+
setActiveTab(v as FinancialDashboardTab)}>
+
+ All
+ Single Release
+ Multi Release
+
+
+
+
+
+ Financial Dashboard
+
+
+
+ Error loading escrows
+
+ Something went wrong. You can try again.
+
+ financialData.refetch()} className="mt-4">
+ Retry
+
+
+
+
+ );
+ }
+
+ if (!financialData.isLoading && financialData.totalEscrows === 0) {
+ return (
+
+
+ Financial Dashboard
+
+ setActiveTab(v as FinancialDashboardTab)}>
+
+ All
+ Single Release
+ Multi Release
+
+
+
+
+
+
+ No escrows as receiver
+
+ You have no escrows where you are the receiver. Totals will appear
+ here once you have incoming escrow activity.
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Financial Dashboard
+
+
+
setActiveTab(v as FinancialDashboardTab)}>
+
+ All
+ Single Release
+ Multi Release
+
+
+
+ {/* KPI Cards: Total Amount, Total Released, Total Balance (spec), plus Escrows count */}
+
+
+
+ Total Amount
+
+
+
+ {financialData.isLoading ? "-" : formatCurrency(financialData.totalAmount, "USDC")}
+
+ Sum of all escrow amounts (SR + MR)
+
+
+
+
+ Total Released
+
+
+
+ {financialData.isLoading ? "-" : formatCurrency(financialData.totalReleased, "USDC")}
+
+ Released to you (SR + MR milestones)
+
+
+
+
+ Total Balance
+
+
+
+ {financialData.isLoading ? "-" : formatCurrency(financialData.totalBalance, "USDC")}
+
+ Pending (Total Amount − Released)
+
+
+
+
+ Escrows
+
+
+
+ {financialData.isLoading ? "-" : financialData.totalEscrows}
+
+ Total number of escrows
+
+
+
+
+
+
+ {/* Charts */}
+
+
+
+ Escrow Amounts
+ Amounts by date
+
+
+
+ {amountByDateChartData.length > 0 ? (
+
+
+ new Date(String(value)).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ })
+ }
+ />
+
+ ) : (
+
+
+ No data
+ No Data Available
+
+
+ )}
+
+
+
+
+
+
+ Escrow Types
+ Escrow types
+
+
+
+ {escrowTypeDonutData.some((d) => Number(d.visitors) > 0) ? (
+
+
+ {escrowTypeDonutData.map((slice, idx) => (
+ |
+ ))}
+
+
+ ) : (
+
+
+ No data
+ No Data Available
+
+
+ )}
+
+
+
+ Single
+
+
+ Multi
+
+
+
+
+
+
+ Escrow Created
+ Created escrows by date
+
+
+
+ {createdByDateChartData.length > 0 ? (
+
+
+ new Date(String(value)).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ })
+ }
+ />
+ Math.max(max, 1)]}
+ />
+
+ ) : (
+
+
+ No data
+ No Data Available
+
+
+ )}
+
+
+
+
+
;
+
+interface ChartContainerProps {
+ config: ChartConfig;
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function ChartContainer({
+ config,
+ className,
+ children,
+}: ChartContainerProps) {
+ const style: React.CSSProperties = {};
+ for (const [key, value] of Object.entries(config)) {
+ const varName = `--color-${key}` as const;
+ if (value.color) (style as Record)[varName] = value.color;
+ }
+ return (
+
+ {children}
+
+ );
+}
+
+type RechartsPayloadItem = {
+ value?: number | string;
+ dataKey?: string;
+ color?: string;
+ name?: string;
+};
+
+type RechartsTooltipContentProps = {
+ active?: boolean;
+ label?: string | number;
+ payload?: RechartsPayloadItem[];
+};
+
+export type ChartTooltipContentProps = {
+ hideLabel?: boolean;
+ indicator?: "line" | "dot";
+} & RechartsTooltipContentProps;
+
+export function ChartTooltip(
+ props: React.ComponentProps
+) {
+ return
+ {!hideLabel ?
{label}
: null}
+
+ {payload.map((item, idx) => (
+
+
+ {item.name ?? String(item.dataKey)}
+
+
+ {item.value as React.ReactNode}
+
+
+ ))}
+
+
(
+ () => filtered.length,
+ [filtered.length]
+ );
+
+ const totalAmount = React.useMemo(() => {
+ return filtered.reduce((acc: number, e) => acc + getEscrowAmount(e), 0);
+ }, [filtered]);
+
+ const totalReleased = React.useMemo(() => {
+ return filtered.reduce(
+ (acc: number, e) => acc + getReleasedAmount(e),
+ 0
+ );
+ }, [filtered]);
+
+ const totalBalance = React.useMemo(
+ () => totalAmount - totalReleased,
+ [totalAmount, totalReleased]
+ );
+
+ const typeSlices = React.useMemo(() => {
+ let single = 0;
+ let multi = 0;
+ for (const e of filtered) {
+ if (e.type === "single-release") single += 1;
+ else if (e.type === "multi-release") multi += 1;
+ }
+ return [
+ { type: "single", value: single, fill: "var(--color-single)" },
+ { type: "multi", value: multi, fill: "var(--color-multi)" },
+ ];
+ }, [filtered]);
+
+ const amountsByDate = React.useMemo(() => {
+ const map = new Map();
+ for (const e of filtered) {
+ const key = getCreatedDateKey(e.createdAt);
+ const current = map.get(key) ?? 0;
+ map.set(key, current + getEscrowAmount(e));
+ }
+ return Array.from(map.entries())
+ .map(([date, amount]) => ({ date, amount }))
+ .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+ }, [filtered]);
+
+ const createdByDate = React.useMemo(() => {
+ const map = new Map();
+ for (const e of filtered) {
+ const key = getCreatedDateKey(e.createdAt);
+ map.set(key, (map.get(key) ?? 0) + 1);
+ }
+ return Array.from(map.entries())
+ .map(([date, count]) => ({ date, count }))
+ .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+ }, [filtered]);
+
+ return {
+ isLoading,
+ isFetching,
+ isError,
+ refetch,
+ totalEscrows,
+ totalAmount,
+ totalReleased,
+ totalBalance,
+ typeSlices,
+ amountsByDate,
+ createdByDate,
+ } as const;
+}
+
+export type UseFinancialDashboardReturn = ReturnType;