Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancements to the nursing care procedures and routines tables #9079

Merged
merged 5 commits into from
Nov 20, 2024
Merged

Enhancements to the nursing care procedures and routines tables #9079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efff4f0
made a reusable component for table in routine and nursing care proce…
sainak Nov 13, 2024
bdc62d8
optimize
sainak Nov 13, 2024
01fc4a4
minor refactor
sainak Nov 13, 2024
e1bd38c
Merge remote-tracking branch 'origin/develop' into issues/8562/Nursin…
sainak Nov 13, 2024
1cabe0a
fix typo
sainak Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 116 additions & 87 deletions src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,18 @@ import Loading from "@/components/Common/Loading";
import PageTitle from "@/components/Common/PageTitle";
import Pagination from "@/components/Common/Pagination";
import { ConsultationTabProps } from "@/components/Facility/ConsultationDetails/index";
import { NursingPlot } from "@/components/Facility/Consultations/NursingPlot";
import LogUpdateAnalyseTable from "@/components/Facility/Consultations/LogUpdateAnalyseTable";
import {
NursingPlotFields,
NursingPlotRes,
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: {
Expand Down Expand Up @@ -114,6 +90,92 @@ const ROUTINE_ROWS = [
{ subField: true, field: "appetite" } as const,
];

const NursingPlot = ({ consultationId }: ConsultationTabProps) => {
const { t } = useTranslation();
const [results, setResults] = useState<{ [date: string]: NursingPlotRes }>(
{},
);
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?.ok && data) {
setResults(data.results as { [date: string]: NursingPlotRes });
setTotalCount(data.count);
}
};

fetchDailyRounds(currentPage, consultationId);
}, [consultationId, currentPage]);
sainak marked this conversation as resolved.
Show resolved Hide resolved

const handlePagination = (page: number) => setCurrentPage(page);

let fieldsToDisplay = new Set<string>();

/**
* Transforms nursing procedure results into a structured format where dates are mapped to procedures and their descriptions.
* Groups nursing data by date, collecting unique procedures and their corresponding descriptions.
*/
const tableData = Object.entries(results).reduce(
(acc: Record<string, Record<string, string>>, [date, result]) => {
if ("nursing" in result) {
result.nursing.forEach((field) => {
if (field.procedure && !acc[date]) acc[date] = {};
acc[date][field.procedure] = field.description;
// Add procedure to the set of procedures to display
fieldsToDisplay.add(field.procedure);
});
}
return acc;
},
{},
);

fieldsToDisplay = fieldsToDisplay.intersection(
new Set(NURSING_CARE_PROCEDURES),
);

const rows = Array.from(fieldsToDisplay).map((procedure) => ({
field: procedure,
title: t(`NURSING_CARE_PROCEDURE__${procedure}`),
}));

return (
<div>
<div>
{fieldsToDisplay.size == 0 ? (
<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>
) : (
<LogUpdateAnalyseTable data={tableData} rows={rows} />
)}
</div>

{totalCount > PAGINATION_LIMIT && fieldsToDisplay.size > 0 && (
<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);
Expand Down Expand Up @@ -158,65 +220,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>
<LogUpdateAnalyseTable
data={results}
rows={ROUTINE_ROWS}
choices={REVERSE_CHOICES}
/>

{totalCount != null && totalCount > PAGINATION_LIMIT && (
<div className="mt-4 flex w-full justify-center">
Expand All @@ -231,3 +239,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 aria-label={t("routine")}>{t("routine")}</h4>
<RoutineSection {...props} />
</div>
<div>
<h4 aria-label={t("nursing_care")}>{t("nursing_care")}</h4>
<NursingPlot {...props} />
</div>
</div>
);
}
93 changes: 93 additions & 0 deletions src/components/Facility/Consultations/LogUpdateAnalyseTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from "react";
import { useTranslation } from "react-i18next";

import { classNames, formatDate, formatTime } from "@/Utils/utils";

interface SharedSectionTableProps {
data: Record<string, Record<string, string | boolean | null>>;
rows: Array<{ title?: string; field?: string; subField?: boolean }>;
choices?: Record<string, Record<string | number, string>>;
}

const LogUpdateAnalyseTable: React.FC<SharedSectionTableProps> = ({
data,
rows,
choices = {},
}) => {
const { t } = useTranslation();

const dataValues = React.useMemo(() => Object.values(data), [data]);

const getDisplayValue = (
value: string | boolean | null | undefined,
field?: string,
): string => {
if (typeof value === "boolean") {
return t(value ? "yes" : "no");
}

if (field && choices[field]) {
const choiceMap = choices[field];
const choice =
typeof value === "string" || typeof value === "number"
? choiceMap[value]
: undefined;
return choice ? t(`${field.toUpperCase()}__${choice}`) : "-";
}

return typeof value === "string" ? value : "-";
};

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 rounded-lg border bg-secondary-100">
<thead className="sticky top-0 bg-white shadow">
<tr>
<th className="sticky left-0 border-b-2 border-r-2 border-black bg-white"></th>
{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",
)}
>
<th
className={classNames(
"sticky left-0 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!}`)}
</th>
{dataValues.map((obj, idx) => {
const value = row.field ? obj[row.field] : undefined;
return (
<td
key={`${row.field}-${idx}`}
className="w-80 border border-l-2 border-secondary-500 bg-secondary-100 p-2 text-center font-medium"
>
{row.field ? getDisplayValue(value, row.field) : "-"}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
);
};
Comment on lines +41 to +91
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance table accessibility.

While the table structure and styling are well-implemented, consider adding these accessibility improvements:

-    <div className="m-2 w-full overflow-hidden overflow-x-auto rounded-lg border border-black shadow md:w-fit">
+    <div 
+      className="m-2 w-full overflow-hidden overflow-x-auto rounded-lg border border-black shadow md:w-fit"
+      role="region"
+      aria-label={t('nursing_care_table')}
+    >
       <table className="border-collapse rounded-lg border bg-secondary-100">
+        <caption className="sr-only">{t('nursing_care_table_caption')}</caption>
         <thead className="sticky top-0 bg-white shadow">
           <tr>
-            <th className="sticky left-0 border-b-2 border-r-2 border-black bg-white"></th>
+            <th scope="col" className="sticky left-0 border-b-2 border-r-2 border-black bg-white"></th>
             {Object.keys(data).map((date) => (
               <th
+                scope="col"
                 key={date}
                 className="w-40 border border-b-2 border-secondary-500 border-b-black p-1 text-sm font-semibold"
               >

This adds:

  1. ARIA roles and labels for screen readers
  2. Proper table header scoping
  3. Hidden caption for better table context

Committable suggestion skipped: line range outside the PR's diff.


export default LogUpdateAnalyseTable;
Loading
Loading