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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 2x 2x 36x 36x 2x | import { Box, Stack } from "@mui/material";
import GiveTabs from "@shared/Tabs/GiveTabs";
import { GiveTabItem } from "@shared/Tabs/GiveTab.types";
import { HubFilters, HubPeriodType } from "../useHubFilters";
import HubDatePicker from "./HubDatePicker";
import HubMerchantDropdown from "./HubMerchantDropdown";
import HubProcessorDropdown from "./HubProcessorDropdown";
export interface HubFilterBarProps {
/** Acquirer account id — needed to fetch the processor-scoped merchant list. */
merchantId: number | undefined;
filters: HubFilters;
onPeriodTypeChange: (periodType: HubPeriodType) => void;
onAnchorDateChange: (anchorDate: string) => void;
onProcessorChange: (processorName: string) => void;
onMerchantChange: (merchantAccId?: number) => void;
}
const PERIOD_TABS: GiveTabItem[] = [
{ label: "Day", value: "day" },
{ label: "Month", value: "month" },
{ label: "Quarter", value: "quarter" },
{ label: "Yearly", value: "yearly" },
{ label: "All Time", value: "all_time" },
];
/**
* Reconciliation Hub filter bar. Left group: the period segmented control +
* the anchor/as-of date picker. Right group: the processor + merchant
* dropdowns. The tabs and picker are UI-only — the selected tab + anchor are
* resolved into the explicit startDate/endDate sent to the backend.
*/
const HubFilterBar = ({
merchantId,
filters,
onPeriodTypeChange,
onAnchorDateChange,
onProcessorChange,
onMerchantChange,
}: HubFilterBarProps) => {
return (
<Stack
direction="row"
flexWrap="wrap"
alignItems="center"
justifyContent="space-between"
gap="20px"
data-testid="hub-filter-bar"
>
{/* Left: period segmented control + date */}
<Stack direction="row" alignItems="center" gap="12px" flexWrap="wrap">
<Box
sx={(theme) => ({
display: "flex",
padding: "4px",
width: { xs: "100%", sm: "420px" },
border: `1px solid ${theme.palette.border?.primary ?? "#CCCCC9"}`,
borderRadius: "12px",
})}
>
<GiveTabs
type="pill"
variant="primary"
items={PERIOD_TABS}
selected={filters.periodType}
onClick={(value) => onPeriodTypeChange(value as HubPeriodType)}
containerSx={{ width: "100%", gap: "2px" }}
tabSx={{
flexGrow: 1,
minWidth: "72px",
justifyContent: "center",
whiteSpace: "nowrap",
borderRadius: "8px",
padding: "8px 12px",
}}
selectedTabSx={{ borderRadius: "8px" }}
/>
</Box>
<HubDatePicker
value={filters.anchorDate}
onChange={onAnchorDateChange}
/>
</Stack>
{/* Right: processor + merchant */}
<Stack direction="row" alignItems="center" gap="16px" flexWrap="wrap">
<HubProcessorDropdown
value={filters.processorName}
onChange={onProcessorChange}
/>
<HubMerchantDropdown
merchantId={merchantId}
filters={filters}
value={filters.merchantAccId}
onChange={onMerchantChange}
/>
</Stack>
</Stack>
);
};
export default HubFilterBar;
|