diff --git a/src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx b/src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx index 088f1b735..6a9aea1b0 100644 --- a/src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx +++ b/src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx @@ -1,6 +1,6 @@ import { CircularProgress } from "@mui/material"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; -import React, { FunctionComponent, useEffect, useRef } from "react"; +import React, { FunctionComponent, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { OpdDTO, OpdWithOperationRowDTO } from "../../../../generated"; import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting"; @@ -8,6 +8,7 @@ import { usePermission } from "../../../../libraries/permissionUtils/usePermissi import { getOpdsWithOperationRows } from "../../../../state/opds"; import InfoBox from "../../infoBox/InfoBox"; import Table from "../../table/Table"; +import "./styles.scss"; interface IOwnProps { shouldUpdateTable: boolean; @@ -34,6 +35,9 @@ const PatientOPDTable: FunctionComponent = ({ const order = ["date", "disease"]; const dispatch = useAppDispatch(); const infoBoxRef = useRef(null); + const [mostRecentVisit, setMostRecentVisit] = useState< + OpdWithOperationRowDTO | undefined + >(undefined); const data = useAppSelector((state) => state.opds.getOpds.data ? state.opds.getOpds.data : [] @@ -67,10 +71,34 @@ const PatientOPDTable: FunctionComponent = ({ return results; }; + useEffect(() => { + if (data.length > 0) { + const mostRecent = data.reduce((latest, item) => { + if (!!item.opdDTO?.date && latest.opdDTO?.date) { + return new Date(item.opdDTO?.date) > new Date(latest.opdDTO?.date) + ? item + : latest; + } else { + return latest; + } + }); + + setMostRecentVisit(mostRecent); + } + }, [data]); + const onEdit = (row?: OpdDTO) => { handleEdit(data.find((item) => item.opdDTO?.code === row?.code)); }; + const getRowClassNames = (row: any): string => { + if ((row.opdDTO?.code ?? row.code) === mostRecentVisit?.opdDTO?.code) { + return "mostRecentVisit"; + } + + return ""; + }; + return (
{t("opd.previousentries")}
@@ -83,6 +111,7 @@ const PatientOPDTable: FunctionComponent = ({ columnsOrder={order} rowsPerPage={5} isCollapsabile={true} + rowClassNames={getRowClassNames} onEdit={canUpdate ? onEdit : undefined} addTitle={t("opd.addoperation")} /> diff --git a/src/components/accessories/patientOPD/patientOPDTable/styles.scss b/src/components/accessories/patientOPD/patientOPDTable/styles.scss new file mode 100644 index 000000000..c721cb0a2 --- /dev/null +++ b/src/components/accessories/patientOPD/patientOPDTable/styles.scss @@ -0,0 +1,7 @@ +.mostRecentVisit { + background-color: rgba(252, 24, 18, 0.04); + + td { + color: rgb(252, 24, 18); + } +} diff --git a/src/components/accessories/table/Table.tsx b/src/components/accessories/table/Table.tsx index d05f97b5d..a27122d9a 100644 --- a/src/components/accessories/table/Table.tsx +++ b/src/components/accessories/table/Table.tsx @@ -55,6 +55,7 @@ const Table: FunctionComponent = ({ addTitle, showEmptyCell = true, renderItemDetails, + rowClassNames, getCoreRow, onClose, onCancel, @@ -259,6 +260,7 @@ const Table: FunctionComponent = ({ filters, manualFilter ), + // eslint-disable-next-line react-hooks/exhaustive-deps [filterColumns, filters, manualFilter, rowData] ); @@ -351,6 +353,7 @@ const Table: FunctionComponent = ({ renderActions={() => renderActions(row)} isCollapsabile={isCollapsabile} showEmptyCell={showEmptyCell} + rowClassNames={rowClassNames} renderCellDetails={renderItemDetails} detailColSpan={detailColSpan} expanded={expanded} diff --git a/src/components/accessories/table/TableBodyRow.tsx b/src/components/accessories/table/TableBodyRow.tsx index f4b9d8627..344781052 100644 --- a/src/components/accessories/table/TableBodyRow.tsx +++ b/src/components/accessories/table/TableBodyRow.tsx @@ -16,6 +16,7 @@ const TableBodyRow: FunctionComponent = ({ isCollapsabile, showEmptyCell = true, renderCellDetails, + rowClassNames, coreRow, detailColSpan, expanded, @@ -30,7 +31,10 @@ const TableBodyRow: FunctionComponent = ({ return ( <> - + {isCollapsabile ? ( void; addTitle?: string; showEmptyCell?: boolean; + rowClassNames?: (row: T) => string; renderItemDetails?: (row: any) => void; coreData?: Array; identifierColumn?: string; @@ -66,6 +67,7 @@ export interface IRowProps { isCollapsabile?: boolean; renderActions: () => ReactNode; showEmptyCell?: boolean; + rowClassNames?: (row: T) => string; renderCellDetails?: (row: T) => any; coreRow?: any; detailColSpan?: number;