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

src/Components/Facility/ConsultationDetails/ConsultationNursingTab.tsx

@@ -6,9 +6,9 @@ import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
 import { RoutineAnalysisRes, RoutineFields } from "../models";
 import Loading from "../../Common/Loading";
-import { classNames, formatDate, formatTime } from "../../../Utils/utils";
 import Pagination from "../../Common/Pagination";
 import { PAGINATION_LIMIT } from "../../../Common/constants";
+import SharedSectionTable from "../Consultations/components/SharedTable";
 
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
 
@@ -153,65 +153,13 @@ 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>
+      <SharedSectionTable
+        data={results}
+        rows={ROUTINE_ROWS}
+        choices={REVERSE_CHOICES}
+        translateKey="LOG_UPDATE_FIELD_LABEL"
+        t={t}
+      />
 
       {totalCount != null && totalCount > PAGINATION_LIMIT && (
         <div className="mt-4 flex w-full justify-center">

src/Components/Facility/Consultations/NursingPlot.tsx

@@ -5,7 +5,7 @@ import {
   NURSING_CARE_PROCEDURES,
   PAGINATION_LIMIT,
 } from "../../../Common/constants";
-
+import SharedSectionTable from "./components/SharedTable";
 import Pagination from "../../Common/Pagination";
 import { formatDateTime } from "../../../Utils/utils";
 import { useTranslation } from "react-i18next";
@@ -71,50 +71,42 @@ export const NursingPlot = ({ consultationId }: any) => {
     else return false;
   };
 
+  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 className="">
         <div>
-          <div className="flex flex-row overflow-x-scroll">
-            {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>
+          {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>
-            )}
-            {NURSING_CARE_PROCEDURES.map(
-              (f) =>
-                filterEmpty(f) && (
-                  <div key={f} className="m-2 w-3/4">
-                    <div className="sticky top-0 z-10 rounded pt-2">
-                      <div className="mx-2 flex items-center justify-between rounded border bg-secondary-200 p-4">
-                        <h3 className="flex h-8 items-center text-sm">
-                          {t(`NURSING_CARE_PROCEDURE__${f}`)}
-                        </h3>
-                      </div>
-                    </div>
-                    <div className="m-2">
-                      {dataToDisplay
-                        .filter((i: any) => i.procedure === f)
-                        .map((care: any, index: number) => (
-                          <div
-                            key={index}
-                            className="my-2 w-full divide-y rounded-lg border bg-white p-4 shadow"
-                          >
-                            <div className="text-xs font-semibold">
-                              {care.date}
-                            </div>
-                            <div className="py-2 text-sm">
-                              {care.description}
-                            </div>
-                          </div>
-                        ))}
-                    </div>
-                  </div>
-                ),
-            )}
-          </div>
+            </div>
+          )}
+
+          {!areFieldsEmpty() && (
+            <SharedSectionTable
+              data={mappedData}
+              rows={rows}
+              translateKey="NURSING_CARE_PROCEDURE"
+              t={t}
+            />
+          )}
         </div>
       </div>
 

src/Components/Facility/Consultations/components/SharedTable.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { formatDate, formatTime } from "../../../../Utils/utils";
+import { classNames } from "../../../../Utils/utils";
+
+interface SharedSectionTableProps {
+  data: Record<string, any>;
+  rows: Array<{ title?: string; field?: string; subField?: boolean }>;
+  choices?: Record<string, Record<number | string, string>>;
+  translateKey: string;
+  t: (key: string) => string;
+}
+
+const SharedSectionTable: React.FC<SharedSectionTableProps> = ({
+  data,
+  rows,
+  choices = {},
+  translateKey,
+  t,
+}) => {
+  return (
+    <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="border-b-2 border-r-2 border-black" />
+            {Object.keys(data).map((date) => (
+              <th
+                key={date}
+                className="w-40 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">
+          {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(`${translateKey}__${row.field}`)}
+              </td>
+              {Object.values(data).map((obj, idx) => (
+                <td
+                  key={`${row.field}-${idx}`}
+                  className="border border-secondary-500 bg-secondary-100 p-2 text-center font-medium"
+                >
+                  {row.field
+                    ? choices[row.field]
+                      ? (choices[row.field][obj[row.field]] ?? "-")
+                      : (obj[row.field] ?? "-")
+                    : "-"}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default SharedSectionTable;