made a reusable component for table in routine and nursing care procedures

.github/workflows/auto-testing-label.yml

@@ -38,7 +38,7 @@ jobs:
               }
 
               if (isChangesRequired) {
-                await github.rest.issues.createComment({
+                await github.issues.createComment({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: pr.number,

.github/workflows/cypress.yaml

@@ -1,6 +1,8 @@
 name: Cypress Tests
 
 on:
+  schedule:
+    - cron: "30 22 * * *"
   pull_request:
     branches:
       - develop
@@ -15,7 +17,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4]
+        containers: [1, 2, 3, 4, 5, 6, 7, 8]
     env:
       REACT_CARE_API_URL: http://localhost:9000
     steps:
@@ -134,4 +136,4 @@ jobs:
         if: steps.pr_origin.outputs.is_forked == 'true'
         with:
           name: cypress-videos
-          path: cypress/videos
+          path: cypress/videos

src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx

@@ -4,43 +4,20 @@ import { useTranslation } from "react-i18next";
 import Loading from "@/components/Common/Loading";
 import PageTitle from "@/components/Common/PageTitle";
 import Pagination from "@/components/Common/Pagination";
+import { ProcedureType } from "@/components/Common/prescription-builder/ProcedureBuilder";
 import { ConsultationTabProps } from "@/components/Facility/ConsultationDetails/index";
-import { NursingPlot } from "@/components/Facility/Consultations/NursingPlot";
+import LogUpdateAnalayseTable from "@/components/Facility/Consultations/LogUpdateAnalayseTable";
 import {
+  DailyRoundsRes,
+  NursingPlotFields,
   RoutineAnalysisRes,
   RoutineFields,
 } from "@/components/Facility/models";
 
-import { PAGINATION_LIMIT } from "@/common/constants";
+import { NURSING_CARE_PROCEDURES, PAGINATION_LIMIT } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { classNames, formatDate, formatTime } from "@/Utils/utils";
-
-export default function ConsultationNursingTab(props: ConsultationTabProps) {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <PageTitle
-        title={t("nursing_information")}
-        hideBack
-        breadcrumbs={false}
-      />
-      <div>
-        <h4>{t("routine")}</h4>
-        <RoutineSection {...props} />
-      </div>
-      <div>
-        <h4>{t("nursing_care")}</h4>
-        <NursingPlot
-          facilityId={props.facilityId}
-          patientId={props.patientId}
-          consultationId={props.consultationId}
-        />
-      </div>
-    </div>
-  );
-}
 
 const REVERSE_CHOICES = {
   appetite: {
@@ -114,6 +91,116 @@ const ROUTINE_ROWS = [
   { subField: true, field: "appetite" } as const,
 ];
 
+const NursingPlot = ({ consultationId }: ConsultationTabProps) => {
+  const { t } = useTranslation();
+  const [results, setResults] = useState<DailyRoundsRes["results"]>({});
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+
+  useEffect(() => {
+    const fetchDailyRounds = async (
+      currentPage: number,
+      consultationId: string,
+    ) => {
+      const { res, data } = await request(routes.dailyRoundsAnalyse, {
+        body: { page: currentPage, fields: NursingPlotFields },
+        pathParams: { consultationId },
+      });
+      if (res && res.ok && data) {
+        setResults(data.results);
+        setTotalCount(data.count);
+      }
+    };
+
+    fetchDailyRounds(currentPage, consultationId);
+  }, [consultationId, currentPage]);
+
+  const handlePagination = (page: number) => setCurrentPage(page);
+
+  const data = Object.entries(results).map(([date, result]) => {
+    if ("nursing" in result) {
+      return {
+        date: date,
+        nursing: result.nursing,
+      };
+    } else {
+      return {
+        date: date,
+        nursing: null,
+      };
+    }
+  });
+
+  const dataToDisplay = data
+    .map((x) =>
+      x.nursing
+        ? x.nursing.map((f: any) => {
+            f["date"] = x.date;
+            return f;
+          })
+        : [],
+    )
+    .reduce((accumulator, value) => accumulator.concat(value), []);
+
+  const filterEmpty = (field: (typeof NURSING_CARE_PROCEDURES)[number]) => {
+    const filtered = dataToDisplay.filter(
+      (i: ProcedureType) => i.procedure === field,
+    );
+    return filtered.length > 0;
+  };
+
+  const areFieldsEmpty = () => {
+    let emptyFieldCount = 0;
+    for (const field of NURSING_CARE_PROCEDURES) {
+      if (!filterEmpty(field)) emptyFieldCount++;
+    }
+    return emptyFieldCount === NURSING_CARE_PROCEDURES.length;
+  };
+
+  const rows = NURSING_CARE_PROCEDURES.filter((f) => filterEmpty(f)).map(
+    (procedure) => ({
+      field: procedure,
+      title: t(`NURSING_CARE_PROCEDURE__${procedure}`),
+    }),
+  );
+
+  const mappedData = dataToDisplay.reduce(
+    (acc: Record<string, any>, item: any) => {
+      if (!acc[item.date]) acc[item.date] = {};
+      acc[item.date][item.procedure] = item.description;
+      return acc;
+    },
+    {},
+  );
+
+  return (
+    <div>
+      <div>
+        {areFieldsEmpty() ? (
+          <div className="mt-1 w-full rounded-lg border bg-white p-4 shadow">
+            <div className="flex items-center justify-center text-2xl font-bold text-secondary-500">
+              {t("no_data_found")}
+            </div>
+          </div>
+        ) : (
+          <LogUpdateAnalayseTable data={mappedData} rows={rows} />
+        )}
+      </div>
+
+      {totalCount > PAGINATION_LIMIT && !areFieldsEmpty() && (
+        <div className="mt-4 flex w-full justify-center">
+          <Pagination
+            cPage={currentPage}
+            defaultPerPage={PAGINATION_LIMIT}
+            data={{ totalCount }}
+            onChange={handlePagination}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const RoutineSection = ({ consultationId }: ConsultationTabProps) => {
   const { t } = useTranslation();
   const [page, setPage] = useState(1);
@@ -158,65 +245,11 @@ const RoutineSection = ({ consultationId }: ConsultationTabProps) => {
 
   return (
     <div className="pb-8 pt-4">
-      <div className="m-2 w-full overflow-hidden overflow-x-auto rounded-lg border border-black shadow md:w-fit">
-        <table className="border-collapse overflow-hidden rounded-lg border bg-secondary-100">
-          <thead className="bg-white shadow">
-            <tr>
-              <th className="w-48 border-b-2 border-r-2 border-black" />
-              {Object.keys(results).map((date) => (
-                <th
-                  key={date}
-                  className="border border-b-2 border-secondary-500 border-b-black p-1 text-sm font-semibold"
-                >
-                  <p>{formatDate(date)}</p>
-                  <p>{formatTime(date)}</p>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="bg-secondary-200">
-            {ROUTINE_ROWS.map((row) => (
-              <tr
-                key={row.field ?? row.title}
-                className={classNames(
-                  row.title && "border-t-2 border-t-secondary-600",
-                )}
-              >
-                <td
-                  className={classNames(
-                    "border border-r-2 border-secondary-500 border-r-black bg-white p-2",
-                    row.subField ? "pl-4 font-medium" : "font-bold",
-                  )}
-                >
-                  {row.title ?? t(`LOG_UPDATE_FIELD_LABEL__${row.field!}`)}
-                </td>
-                {row.field &&
-                  Object.values(results).map((obj, idx) => (
-                    <td
-                      key={`${row.field}-${idx}`}
-                      className={classNames(
-                        "border border-secondary-500 bg-secondary-100 p-2 text-center font-medium",
-                      )}
-                    >
-                      {(() => {
-                        const value = obj[row.field];
-                        if (value == null) {
-                          return "-";
-                        }
-                        if (typeof value === "boolean") {
-                          return t(value ? "yes" : "no");
-                        }
-                        const choices = REVERSE_CHOICES[row.field];
-                        const choice = `${row.field.toUpperCase()}__${choices[value as keyof typeof choices]}`;
-                        return t(choice);
-                      })()}
-                    </td>
-                  ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <LogUpdateAnalayseTable
+        data={results}
+        rows={ROUTINE_ROWS}
+        choices={REVERSE_CHOICES}
+      />
 
       {totalCount != null && totalCount > PAGINATION_LIMIT && (
         <div className="mt-4 flex w-full justify-center">
@@ -231,3 +264,24 @@ const RoutineSection = ({ consultationId }: ConsultationTabProps) => {
     </div>
   );
 };
+
+export default function ConsultationNursingTab(props: ConsultationTabProps) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <PageTitle
+        title={t("nursing_information")}
+        hideBack
+        breadcrumbs={false}
+      />
+      <div>
+        <h4>{t("routine")}</h4>
+        <RoutineSection {...props} />
+      </div>
+      <div>
+        <h4>{t("nursing_care")}</h4>
+        <NursingPlot {...props} />
+      </div>
+    </div>
+  );
+}