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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 2x 2x 8x 8x 48x | import { Box, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import {
ArrowUpRightIcon,
BankIcon,
CreditCardIcon,
StorefrontIcon,
WalletIcon,
} from "@phosphor-icons/react";
import { MoneyArrowUpIcon } from "@assets/rebrandIcons";
import { ReactNode } from "react";
import { ReconciliationHubView } from "../types";
import { formatHubAmount } from "../format";
import HubStatCard from "./HubStatCard";
import SectionHeading from "./SectionHeading";
interface Props {
data?: ReconciliationHubView;
}
const ICON_SIZE = 20;
/**
* Financial Details: Net Sales, Gross Fees, Processor Cost, Paid to Merchant,
* Reserve Held, and Merchant Balance — each as an icon-badged stat card laid
* out three per row.
*/
const HubFinancialDetails = ({ data }: Props) => {
const cards: { label: string; value?: number; icon: ReactNode }[] = [
{ label: "Net Sales (USD)", value: data?.netSales, icon: <WalletIcon size={ICON_SIZE} /> },
{ label: "Gross Fees (USD)", value: data?.grossFees, icon: <MoneyArrowUpIcon size={ICON_SIZE} /> },
{ label: "Processor Cost (USD)", value: data?.processorCost, icon: <CreditCardIcon size={ICON_SIZE} /> },
{ label: "Paid to Merchant (USD)", value: data?.paidToMerchant, icon: <ArrowUpRightIcon size={ICON_SIZE} /> },
{ label: "Reserve Held (USD)", value: data?.reserveHeld, icon: <BankIcon size={ICON_SIZE} /> },
{ label: "Merchant Balance (USD)", value: data?.merchantBalance, icon: <StorefrontIcon size={ICON_SIZE} /> },
];
return (
<Stack gap="12px" data-testid="hub-financial-details">
<SectionHeading variant="h6">Financial Details</SectionHeading>
{/*
Fixed three-per-row grid (design). A flex-wrap row would fit four cards
on the wide acquirer content area; a grid pins the column count. Steps
down to two then one column at the md / xs breakpoints so the cards'
300px min-width never overflows.
*/}
<Box
display="grid"
gap="20px"
gridTemplateColumns={{
xs: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(3, 1fr)",
}}
>
{cards.map((card) => (
<HubStatCard
key={card.label}
label={card.label}
value={formatHubAmount(card.value)}
icon={card.icon}
basis="300px"
/>
))}
</Box>
</Stack>
);
};
export default HubFinancialDetails;
|