Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2x 16x 16x 16x 16x 16x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { useReconciliationHubMerchants } from "../hooks/useReconciliationHubMerchants";
import { HubFilters } from "../useHubFilters";
import PerMerchantBreakdownEmptyState from "./PerMerchantBreakdownEmptyState";
import PerMerchantBreakdownTable from "./PerMerchantBreakdownTable";
interface Props {
merchantId?: number;
filters: HubFilters;
}
/**
* Per-Merchant Breakdown: a horizontally scrollable table with a sticky first
* (Merchant) and last (Reconciled Status) column, a per-merchant logo, derived
* status chips, and a Totals row. Shows an empty state when no merchant has
* activity for the selected period.
*/
const PerMerchantBreakdown = ({ merchantId, filters }: Props) => {
const { data, isLoading } = useReconciliationHubMerchants(merchantId, filters);
const merchants = data?.merchants ?? [];
const totals = data?.totals;
const isEmpty = !isLoading && merchants.length === 0;
return (
// Design "Section Heading" spec: 46px above the label, 16px below. The
// parent hub Stack already contributes a 20px inter-section gap, so add
// 26px top padding (20 + 26 = 46) and use a 16px title→table gap.
<Stack gap="16px" pt="26px" data-testid="hub-per-merchant">
<GiveText variant="h6">Per Merchant Break Down</GiveText>
{isEmpty ? (
<PerMerchantBreakdownEmptyState />
) : (
<PerMerchantBreakdownTable
merchants={merchants}
totals={totals}
isLoading={isLoading}
/>
)}
</Stack>
);
};
export default PerMerchantBreakdown;
|