FIxes issues reported in QA

* Fixes form responsiveness in mobile displays * Fixes bugs in view details page * Fixes update log redirection * Fixes #8534 - Show patient category
ohcnetwork · Sep 13, 2024 · 08cc4d9 · 08cc4d9
1 parent beb0833
commit 08cc4d9
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 90 deletions.
diff --git a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
@@ -4,16 +4,22 @@ import ButtonV2 from "../../../Common/components/ButtonV2";
 import { DailyRoundsModel } from "../../../Patient/models";
 import LogUpdateCardAttribute from "./LogUpdateCardAttribute";
 import { ConsultationModel } from "../../models";
+import { useSlugs } from "../../../../Common/hooks/useSlug";
 
 interface Props {
   round: DailyRoundsModel;
   consultationData: ConsultationModel;
-  onViewDetails: () => void;
-  onUpdateLog?: () => void;
 }
 const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
+  const [facilityId, patientId, consultationId] = useSlugs(
+    "facility",
+    "patient",
+    "consultation",
+  );
   const { t } = useTranslation();
 
+  const consultationUrl = `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`;
+
   return (
     <div
       className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container"
@@ -42,7 +48,13 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
           ghost
           size="small"
           className="w-full"
-          onClick={props.onViewDetails}
+          href={
+            ["NORMAL", "TELEMEDICINE", "DOCTORS_LOG"].includes(
+              round.rounds_type!,
+            )
+              ? `${consultationUrl}/daily-rounds/${round.id}`
+              : `${consultationUrl}/daily_rounds/${round.id}`
+          }
         >
           <CareIcon icon="l-eye" className="text-lg" />
           <span>{t("view_details")}</span>
@@ -55,7 +67,16 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
           ghost
           size="small"
           className="w-full"
-          onClick={props.onUpdateLog}
+          href={
+            [
+              "NORMAL",
+              "TELEMEDICINE",
+              "DOCTORS_LOG",
+              "COMMUNITY_NURSES_LOG",
+            ].includes(round.rounds_type!)
+              ? `${consultationUrl}/daily-rounds/${round.id}/update`
+              : `${consultationUrl}/daily_rounds/${round.id}/update`
+          }
         >
           <CareIcon icon="l-pen" className="text-lg" />
           <span>{t("update_log")}</span>

diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -1,4 +1,3 @@
-import { navigate } from "raviger";
 import { DailyRoundsModel } from "../../Patient/models";
 import VirtualNursingAssistantLogUpdateCard from "./DailyRounds/VirtualNursingAssistantLogUpdateCard";
 import DefaultLogUpdateCard from "./DailyRounds/DefaultLogUpdateCard";
@@ -24,8 +23,6 @@ export default function DailyRoundsList({ consultation }: Props) {
   const { t } = useTranslation();
   const [query, setQuery] = useState<QueryParams>();
 
-  const consultationUrl = `/facility/${consultation.facility}/patient/${consultation.patient}/consultation/${consultation.id}`;
-
   return (
     <PaginatedList
       route={routes.getDailyReports}
@@ -83,14 +80,6 @@ export default function DailyRoundsList({ consultation }: Props) {
                       );
                     }
 
-                    const itemUrl = [
-                      "NORMAL",
-                      "TELEMEDICINE",
-                      "DOCTORS_LOG",
-                    ].includes(item.rounds_type as string)
-                      ? `${consultationUrl}/daily-rounds/${item.id}`
-                      : `${consultationUrl}/daily_rounds/${item.id}`;
-
                     return (
                       <TimelineNode
                         event={{
@@ -104,8 +93,6 @@ export default function DailyRoundsList({ consultation }: Props) {
                         <DefaultLogUpdateCard
                           round={item}
                           consultationData={consultation}
-                          onViewDetails={() => navigate(itemUrl)}
-                          onUpdateLog={() => navigate(`${itemUrl}/update`)}
                         />
                       </TimelineNode>
                     );

diff --git a/src/Components/LogUpdate/CriticalCarePreview.tsx b/src/Components/LogUpdate/CriticalCarePreview.tsx
@@ -58,12 +58,13 @@ export default function CriticalCarePreview(props: Props) {
       <Card className="md:rounded-xl lg:p-8">
         <h2 className="mb-3 flex flex-col gap-4 text-black md:flex-row md:items-center">
           <span>Consultation Updates</span>
-          <div className="max-w-min whitespace-nowrap rounded-full border border-primary-300 bg-primary-100 px-3 py-2 text-sm font-semibold text-primary-500">
+          <div className="max-w-min whitespace-nowrap rounded-full border border-primary-300 bg-primary-100 px-2.5 py-1.5 text-sm font-semibold text-primary-500">
             <span>{t(`ROUNDS_TYPE__${data.rounds_type}`)}</span>
           </div>
         </h2>
 
         <Section title="General">
+          <Detail label="Patient Category" value={data.patient_category} />
           <Detail
             label="Physical Examination Info"
             value={data.physical_examination_info}
@@ -95,41 +96,50 @@ export default function CriticalCarePreview(props: Props) {
             label="Level of Consciousness"
             value={tOption("CONSCIOUSNESS_LEVEL", "consciousness_level")}
           />
-          <div className="grid gap-x-4 gap-y-2 py-2 md:grid-cols-2">
-            {(["left", "right"] as const).map((dir) => (
-              <div
-                key={dir}
-                className="rounded border border-secondary-300 bg-secondary-100 p-3"
-              >
-                <h5 className="capitalize">{dir} Pupil</h5>
-                <Detail
-                  label="Size"
-                  value={
-                    data[`${dir}_pupil_size`] != null
-                      ? data[`${dir}_pupil_size`] || "Cannot be assessed"
-                      : undefined
-                  }
-                />
-                {data[`${dir}_pupil_size`] === 0 && (
+          {(data.left_pupil_light_reaction ||
+            data.left_pupil_light_reaction_detail ||
+            data.left_pupil_size ||
+            data.left_pupil_size_detail ||
+            data.right_pupil_light_reaction ||
+            data.right_pupil_light_reaction_detail ||
+            data.right_pupil_size ||
+            data.right_pupil_size_detail) && (
+            <div className="grid gap-x-4 gap-y-2 py-2 md:grid-cols-2">
+              {(["left", "right"] as const).map((dir) => (
+                <div
+                  key={dir}
+                  className="rounded border border-secondary-300 bg-secondary-100 p-3"
+                >
+                  <h5 className="capitalize">{dir} Pupil</h5>
                   <Detail
-                    label="Pupil size description"
-                    value={data[`${dir}_pupil_size_detail`]}
+                    label="Size"
+                    value={
+                      data[`${dir}_pupil_size`] != null
+                        ? data[`${dir}_pupil_size`] || "Cannot be assessed"
+                        : undefined
+                    }
                   />
-                )}
-                <Detail
-                  label="Light Reaction"
-                  value={tOption(
-                    "PUPIL_REACTION",
-                    `${dir}_pupil_light_reaction`,
+                  {data[`${dir}_pupil_size`] === 0 && (
+                    <Detail
+                      label="Pupil size description"
+                      value={data[`${dir}_pupil_size_detail`]}
+                    />
                   )}
-                />
-                <Detail
-                  label="Light Reaction Description"
-                  value={data[`${dir}_pupil_light_reaction_detail`]}
-                />
-              </div>
-            ))}
-          </div>
+                  <Detail
+                    label="Light Reaction"
+                    value={tOption(
+                      "PUPIL_REACTION",
+                      `${dir}_pupil_light_reaction`,
+                    )}
+                  />
+                  <Detail
+                    label="Light Reaction Description"
+                    value={data[`${dir}_pupil_light_reaction_detail`]}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
           <div className="space-y-1">
             <Detail label="Glasgow Eye Open" value={data.glasgow_eye_open} />
             <Detail
@@ -222,7 +232,7 @@ export default function CriticalCarePreview(props: Props) {
           />
         </Section>
 
-        <Section title="Vitals">
+        <Section title="Vitals" show={!!data.pain_scale_enhanced?.length}>
           {data.bp && (
             <div className="mb-2 max-w-96 space-y-1 rounded border border-secondary-300 bg-secondary-100 p-3">
               <h5>Blood Pressure</h5>
@@ -304,20 +314,23 @@ export default function CriticalCarePreview(props: Props) {
             label={t("heartbeat_description")}
             value={data.rhythm_detail}
           />
-          <h4 className="py-4">Pain Scale</h4>
-          <PainChart pain={data.pain_scale_enhanced ?? []} />
+          {!!data.pain_scale_enhanced?.length && (
+            <>
+              <h4 className="py-4">Pain Scale</h4>
+              <PainChart pain={data.pain_scale_enhanced ?? []} />
+            </>
+          )}
         </Section>
 
         {!!IOBalanceSections.flatMap((s) =>
           s.fields.flatMap((f) => data[f.key] ?? []),
         ).length && (
-          <Section title="I/O Balance">
-            <ShowOnData
-              data={data}
-              fields={IOBalanceSections.flatMap((s) =>
-                s.fields.map((f) => f.key),
-              )}
-            />
+          <Section
+            title="I/O Balance"
+            show={IOBalanceSections.flatMap((s) =>
+              s.fields.map((f) => f.key),
+            ).some((field) => data[field]?.length)}
+          >
             <div className="space-y-3">
               {IOBalanceSections.map(({ name, fields }) => (
                 <div key={name} className="space-y-2">
@@ -384,16 +397,18 @@ export default function CriticalCarePreview(props: Props) {
                 <li key={care.procedure}>
                   <Detail
                     label={t(`NURSING_CARE_PROCEDURE__${care.procedure}`)}
-                    value={care.description}
+                    value={care.description || t("no_remarks")}
                   />
                 </li>
               ))}
             </ul>
           </Section>
         )}
 
-        <Section title="Pressure Sore">
-          <ShowOnData data={data} fields={["pressure_sore"]} />
+        <Section
+          title="Pressure Sore"
+          show={!!(data.pressure_sore ?? []).length}
+        >
           <PressureSore
             log={data}
             readonly
@@ -521,9 +536,10 @@ const Section = (props: {
   title: string;
   children: React.ReactNode;
   subSection?: boolean;
+  show?: boolean;
 }) => {
   const parentContext = React.useContext(sectionContext);
-  const [hasValue, setHasValue] = React.useState(false);
+  const [hasValue, setHasValue] = React.useState(props.show ?? false);
 
   useEffect(() => {
     if (parentContext && hasValue) {
@@ -595,26 +611,6 @@ const Detail = (props: {
   );
 };
 
-const ShowOnData = (props: {
-  data: DailyRoundsModel;
-  fields: (keyof DailyRoundsModel)[];
-}) => {
-  const context = React.useContext(sectionContext);
-
-  useEffect(() => {
-    if (
-      context &&
-      props.fields.some(
-        (field) => props.data[field] != null && props.data[field] !== "",
-      )
-    ) {
-      context.hasValue();
-    }
-  }, [props.data, context]);
-
-  return null;
-};
-
 const ChoiceDetail = (props: {
   name: keyof DailyRoundsModel;
   data: DailyRoundsModel;

diff --git a/src/Components/LogUpdate/Sections/NursingCare.tsx b/src/Components/LogUpdate/Sections/NursingCare.tsx
@@ -34,7 +34,7 @@ const NursingCare = ({ log, onChange }: LogUpdateSectionProps) => {
           <tbody>
             {nursing.map((obj) => (
               <tr key={obj.procedure}>
-                <td className="whitespace-nowrap border border-secondary-400 p-2 pr-16 text-left text-sm font-semibold">
+                <td className="whitespace-nowrap border border-secondary-400 p-2 pr-4 text-left text-sm font-semibold md:pr-16">
                   {t(`NURSING_CARE_PROCEDURE__${obj.procedure}`)}
                 </td>
                 <td className="w-full border border-secondary-400">

diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
@@ -366,7 +366,7 @@ export const DailyRounds = (props: any) => {
           urination_frequency: state.form.urination_frequency,
           sleep: state.form.sleep,
           nutrition_route: state.form.nutrition_route,
-          oral_issue: state.form.oral_issue,
+          oral_issue: state.form.oral_issue ?? undefined,
           appetite: state.form.appetite,
           blood_sugar_level: state.form.blood_sugar_level,
           nursing: state.form.nursing,
@@ -384,9 +384,15 @@ export const DailyRounds = (props: any) => {
         if (obj) {
           dispatch({ type: "set_form", form: initForm });
           Notification.Success({
-            msg: `${t(obj.rounds_type as string)} log updated successfully`,
+            msg: t("LOG_UPDATE_UPDATED_NOTIFICATION", {
+              roundType: t(`ROUNDS_TYPE__${state.form.rounds_type}`),
+            }),
           });
-          if (["NORMAL", "TELEMEDICINE"].includes(state.form.rounds_type)) {
+          if (
+            ["NORMAL", "TELEMEDICINE", "COMMUNITY_NURSES_LOG"].includes(
+              state.form.rounds_type,
+            )
+          ) {
             navigate(
               `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`,
             );
@@ -675,7 +681,7 @@ export const DailyRounds = (props: any) => {
               <SelectFormField
                 {...selectField("bowel_difficulty", BOWEL_DIFFICULTY_CHOICES)}
               />
-              <div className="grid grid-cols-3 gap-x-6 md:col-span-2">
+              <div className="grid gap-x-6 md:col-span-2 md:grid-cols-3">
                 <h5 className="mb-3 md:col-span-3">Bladder</h5>
                 <SelectFormField
                   {...selectField("bladder_drainage", BLADDER_DRAINAGE_CHOICES)}
@@ -695,7 +701,7 @@ export const DailyRounds = (props: any) => {
                   )}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-x-6 md:col-span-2">
+              <div className="grid gap-x-6 md:col-span-2 md:grid-cols-2">
                 <h5 className="mb-3 md:col-span-2">Nutrition</h5>
                 <SelectFormField
                   {...selectField("nutrition_route", NUTRITION_ROUTE_CHOICES)}

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -166,6 +166,7 @@
   "not_specified": "Not Specified",
   "all_changes_have_been_saved": "All changes have been saved",
   "no_data_found": "No data found",
+  "no_remarks": "No remarks",
   "edit": "Edit",
   "clear_selection": "Clear selection",
   "select_date": "Select date",

diff --git a/src/Locale/en/LogUpdate.json b/src/Locale/en/LogUpdate.json
@@ -1,5 +1,6 @@
 {
   "LOG_UPDATE_CREATED_NOTIFICATION": "{{ roundType }} created successfully",
+  "LOG_UPDATE_UPDATED_NOTIFICATION": "{{ roundType }} updated successfully",
   "LOG_UPDATE_FIELD_LABEL__rounds_type": "Rounds Type",
   "LOG_UPDATE_FIELD_LABEL__consciousness_level": "Level of Consciousness",
   "LOG_UPDATE_FIELD_LABEL__sleep": "Sleep",