"use client";
import {
useMemo,
useState,
type ReactNode,
} from "react";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
import {
Avatar,
Box,
Button,
CircularProgress,
IconButton,
Link,
Paper,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import type { RgcDecisionRow } from "../rgc-decision-data";
import { RgcDecisionStatusChip } from "./rgc-decision-status-chip";
const ROWS_PER_PAGE = 10;
const ROW_HEIGHT = 64;
function MinistryLogo({
ministry,
logo,
}: {
ministry: string;
logo?: string | null;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const shortName =
ministry
.trim()
.split(/\s+/)
.map((word) => word.charAt(0))
.join("")
.slice(0, 3)
.toUpperCase() || "M";
return (
{shortName}
);
}
function EllipsisText({
children,
}: {
children: ReactNode;
}) {
const theme = useTheme();
return (
{children}
);
}
function createPageNumbers(
currentPage: number,
totalPages: number,
): Array {
if (totalPages <= 7) {
return Array.from(
{ length: totalPages },
(_, index) => index + 1,
);
}
if (currentPage <= 4) {
return [
1,
2,
3,
4,
5,
"...",
totalPages,
];
}
if (currentPage >= totalPages - 3) {
return [
1,
"...",
totalPages - 4,
totalPages - 3,
totalPages - 2,
totalPages - 1,
totalPages,
];
}
return [
1,
"...",
currentPage - 1,
currentPage,
currentPage + 1,
"...",
totalPages,
];
}
function PaginationBar({
currentPage,
totalPages,
onPageChange,
}: {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const pages = useMemo(
() =>
createPageNumbers(
currentPage,
totalPages,
),
[currentPage, totalPages],
);
const buttonSx = {
height: 36,
minWidth: 104,
px: 1.3,
borderRadius: "8px",
textTransform: "none",
color: theme.palette.text.primary,
borderColor: theme.palette.divider,
fontSize: 12,
fontWeight: 600,
bgcolor: theme.palette.background.paper,
boxShadow: "none",
"&:hover": {
bgcolor: alpha(
theme.palette.primary.main,
isDark ? 0.14 : 0.06,
),
borderColor: theme.palette.primary.main,
boxShadow: "none",
},
"&.Mui-disabled": {
color: theme.palette.action.disabled,
borderColor: theme.palette.divider,
bgcolor: theme.palette.action.disabledBackground,
},
};
return (
}
onClick={() =>
onPageChange(
currentPage - 1,
)
}
sx={buttonSx}
>
Previous
{pages.map((page, index) => {
if (page === "...") {
return (
...
);
}
const active =
page === currentPage;
return (
);
})}
);
}
export function RgcDecisionTable({
rows,
loading,
onViewDetail,
}: {
rows: RgcDecisionRow[];
loading?: boolean;
onViewDetail: (row: RgcDecisionRow) => void;
}) {
const theme = useTheme();
const isDark =
theme.palette.mode === "dark";
const [
paginationState,
setPaginationState,
] = useState<{
rowsLength: number;
page: number;
}>({
rowsLength: rows.length,
page: 1,
});
const totalPages = Math.max(
1,
Math.ceil(
rows.length / ROWS_PER_PAGE,
),
);
const requestedPage =
paginationState.rowsLength ===
rows.length
? paginationState.page
: 1;
const currentPage = Math.min(
Math.max(requestedPage, 1),
totalPages,
);
const paginatedRows = useMemo(() => {
const startIndex =
(currentPage - 1) *
ROWS_PER_PAGE;
return rows.slice(
startIndex,
startIndex + ROWS_PER_PAGE,
);
}, [rows, currentPage]);
const emptyRowsCount = Math.max(
0,
ROWS_PER_PAGE -
paginatedRows.length,
);
const handlePageChange = (
page: number,
) => {
const safePage = Math.min(
Math.max(page, 1),
totalPages,
);
setPaginationState({
rowsLength: rows.length,
page: safePage,
});
};
const headerCellSx = {
height: 49,
py: 0,
px: 1.4,
color: theme.palette.text.secondary,
fontSize: 13,
fontWeight: 500,
borderColor: isDark
? alpha("#FFFFFF", 0.08)
: "#FFFFFF",
bgcolor: isDark
? alpha(
theme.palette.primary.main,
0.18,
)
: "#DCEEFF",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
};
const bodyCellSx = {
height: ROW_HEIGHT,
py: 0,
px: 1.4,
color: theme.palette.text.primary,
fontSize: 13,
fontWeight: 500,
borderColor: theme.palette.divider,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
};
return (
No
Ministry
RGC's Decision
Meeting Date
Category
Status
Indicator
Focal Person (H.E)
Source of Verification
Link to Verification Source
Action
{loading ? (
) : null}
{!loading &&
paginatedRows.map(
(row, index) => {
const rowNumber =
(currentPage -
1) *
ROWS_PER_PAGE +
index +
1;
return (
{
rowNumber
}
{
row.ministry
}
{
row.decision
}
{
row.meetingDate
}
{
row.category
}
{row.indicator ||
"-"}
{
row.focalPerson
}
{
row.sourceOfVerification
}
{row.verificationLink ? (
View Source
) : (
"-"
)}
onViewDetail(row)
}
onKeyDown={(event) => {
if (
event.key === "Enter" ||
event.key === " "
) {
event.preventDefault();
onViewDetail(row);
}
}}
sx={{
alignItems: "center",
flexWrap: "nowrap",
whiteSpace: "nowrap",
minWidth: 130,
width: "fit-content",
cursor: "pointer",
userSelect: "none",
color:
theme.palette.text
.secondary,
"&:hover": {
color:
theme.palette
.primary.main,
},
}}
>
);
},
)}
{!loading &&
rows.length > 0 &&
Array.from({
length: emptyRowsCount,
}).map(
(_, index) => (
),
)}
{!loading &&
rows.length === 0 ? (
<>
No RGC
Decision found.
{Array.from({
length:
ROWS_PER_PAGE -
1,
}).map(
(_, index) => (
),
)}
) : null}
{!loading ? (
) : null}
);
}
export default RgcDecisionTable;