OH2-394 | Patient - visits: highlight the most recent visit

src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx

@@ -1,13 +1,14 @@
 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";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 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<IOwnProps> = ({
   const order = ["date", "disease"];
   const dispatch = useAppDispatch();
   const infoBoxRef = useRef<HTMLDivElement>(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<IOwnProps> = ({
     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 (
     <div className="patientOpdTable">
       <h5>{t("opd.previousentries")}</h5>
@@ -83,6 +111,7 @@ const PatientOPDTable: FunctionComponent<IOwnProps> = ({
           columnsOrder={order}
           rowsPerPage={5}
           isCollapsabile={true}
+          rowClassNames={getRowClassNames}
           onEdit={canUpdate ? onEdit : undefined}
           addTitle={t("opd.addoperation")}
         />

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);
+  }
+}

src/components/accessories/table/Table.tsx

@@ -55,6 +55,7 @@ const Table: FunctionComponent<IProps> = ({
   addTitle,
   showEmptyCell = true,
   renderItemDetails,
+  rowClassNames,
   getCoreRow,
   onClose,
   onCancel,
@@ -259,6 +260,7 @@ const Table: FunctionComponent<IProps> = ({
         filters,
         manualFilter
       ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [filterColumns, filters, manualFilter, rowData]
   );
 
@@ -351,6 +353,7 @@ const Table: FunctionComponent<IProps> = ({
                     renderActions={() => renderActions(row)}
                     isCollapsabile={isCollapsabile}
                     showEmptyCell={showEmptyCell}
+                    rowClassNames={rowClassNames}
                     renderCellDetails={renderItemDetails}
                     detailColSpan={detailColSpan}
                     expanded={expanded}

src/components/accessories/table/TableBodyRow.tsx

@@ -16,6 +16,7 @@ const TableBodyRow: FunctionComponent<IRowProps> = ({
   isCollapsabile,
   showEmptyCell = true,
   renderCellDetails,
+  rowClassNames,
   coreRow,
   detailColSpan,
   expanded,
@@ -30,7 +31,10 @@ const TableBodyRow: FunctionComponent<IRowProps> = ({
 
   return (
     <>
-      <TableRow key={rowIndex}>
+      <TableRow
+        className={rowClassNames ? rowClassNames(row) : ""}
+        key={rowIndex}
+      >
         {isCollapsabile ? (
           <TableCell width="40">
             <IconButton

src/components/accessories/table/types.ts

@@ -18,6 +18,7 @@ export interface IProps {
   onAdd?: (row: any) => void;
   addTitle?: string;
   showEmptyCell?: boolean;
+  rowClassNames?: <T>(row: T) => string;
   renderItemDetails?: (row: any) => void;
   coreData?: Array<any>;
   identifierColumn?: string;
@@ -66,6 +67,7 @@ export interface IRowProps {
   isCollapsabile?: boolean;
   renderActions: () => ReactNode;
   showEmptyCell?: boolean;
+  rowClassNames?: <T>(row: T) => string;
   renderCellDetails?: <T>(row: T) => any;
   coreRow?: any;
   detailColSpan?: number;