99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useRef } from "react";
|
|
import { ColumnDef, DataTableLayout } from "ikoncomponents";
|
|
import { useAppCache } from "@/app/utils/context/AppCacheContext";
|
|
|
|
export interface FXRateData {
|
|
id: string;
|
|
year: string;
|
|
currency: string;
|
|
fxRate: number;
|
|
activeStatus: boolean;
|
|
}
|
|
|
|
function FXRateDataTable() {
|
|
// FX rate data comes from the shared app-wide cache.
|
|
const { fxRateResponse, isLoading, refresh } = useAppCache();
|
|
|
|
const fxRateTableData = useMemo<FXRateData[]>(() => {
|
|
const rows: FXRateData[] = [];
|
|
(fxRateResponse?.content || []).forEach((item: any) => {
|
|
const fxRateDetails = item.fxRateDetails || {};
|
|
Object.values(fxRateDetails).forEach((yearGroup: any) => {
|
|
Object.values(yearGroup).forEach((detail: any) => {
|
|
rows.push({
|
|
id: detail.id,
|
|
year: detail.year,
|
|
currency: detail.currency,
|
|
fxRate: detail.fxRate,
|
|
activeStatus: detail.activeStatus,
|
|
});
|
|
});
|
|
});
|
|
});
|
|
return rows;
|
|
}, [fxRateResponse]);
|
|
|
|
// This table is list-only, so hide DataTableLayout's built-in List/Grid toggle
|
|
// (it has no prop to disable it). Once mounted we find the grid button and hide
|
|
// the whole toggle group, so a lone list button isn't left dangling.
|
|
const tableContainerRef = useRef<HTMLDivElement>(null);
|
|
const hidGridToggle = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (isLoading || hidGridToggle.current) return;
|
|
const gridButton =
|
|
tableContainerRef.current?.querySelector<HTMLButtonElement>(
|
|
'button[title="Grid View"]',
|
|
);
|
|
if (gridButton?.parentElement) {
|
|
gridButton.parentElement.style.display = "none";
|
|
hidGridToggle.current = true;
|
|
}
|
|
}, [isLoading]);
|
|
|
|
const columns: ColumnDef<FXRateData>[] = [
|
|
{
|
|
accessorKey: "year",
|
|
header: "Year",
|
|
cell: (row) => <span>{row.year ?? "n/a"}</span>,
|
|
},
|
|
{
|
|
accessorKey: "currency",
|
|
header: "Currency",
|
|
cell: (row) => <span>{row.currency ?? "n/a"}</span>,
|
|
},
|
|
{
|
|
accessorKey: "fxRate",
|
|
header: "FX Rate",
|
|
cell: (row) => <span>{row.fxRate ?? "n/a"}</span>,
|
|
},
|
|
{
|
|
accessorKey: "activeStatus",
|
|
header: "Status",
|
|
cell: (row) => (
|
|
<span>{row.activeStatus ? "Active" : "Inactive"}</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div ref={tableContainerRef}>
|
|
<DataTableLayout
|
|
data={fxRateTableData}
|
|
columns={columns}
|
|
extraTools={{
|
|
keyExtractor: (row: FXRateData) => row.id,
|
|
totalPages: 1,
|
|
currentPage: 1,
|
|
isLoading,
|
|
onReload: refresh,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FXRateDataTable;
|