Merge remote-tracking branch 'upstream/develop' into develop

src/App.tsx

@@ -18,13 +18,23 @@ import AuthUserProvider from "@/Providers/AuthUserProvider";
 import HistoryAPIProvider from "@/Providers/HistoryAPIProvider";
 import Routers from "@/Routers";
 import { handleHttpError } from "@/Utils/request/errorHandler";
+import { HTTPError } from "@/Utils/request/types";
 
 import { PubSubProvider } from "./Utils/pubsubContext";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry: 2,
+      retry: (failureCount, error) => {
+        // Only retry network errors or server errors (502, 503, 504) up to 3 times
+        if (
+          error.message === "Network Error" ||
+          (error instanceof HTTPError && [502, 503, 504].includes(error.status))
+        ) {
+          return failureCount < 3;
+        }
+        return false;
+      },
       refetchOnWindowFocus: false,
     },
   },

src/CAREUI/misc/PrintPreview.tsx

@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 
 import Page from "@/components/Common/Page";
 
+import useAppHistory from "@/hooks/useAppHistory";
 import useBreakpoints from "@/hooks/useBreakpoints";
 
 type Props = {
@@ -26,11 +27,16 @@ type Props = {
 export default function PrintPreview(props: Props) {
   const normalScale = useBreakpoints({ default: 1 });
   const { t } = useTranslation();
+  const { goBack } = useAppHistory();
 
   return (
     <Page title={props.title}>
       <div className="mx-auto my-8 xl:w-[50rem] border rounded-xl border-gray-200 shadow-2xl overflow-hidden">
         <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
+          <Button variant="outline" onClick={() => goBack()}>
+            <CareIcon icon="l-arrow-left" className="text-lg" />
+            {t("back")}
+          </Button>
           <Button variant="primary" disabled={props.disabled} onClick={print}>
             <CareIcon icon="l-print" className="text-lg" />
             {t("print")}

src/Routers/routes/ConsultationRoutes.tsx

@@ -16,8 +16,12 @@ const consultationRoutes: AppRoutes = {
       />
     ),
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/treatment_summary":
-    ({ facilityId, encounterId }) => (
-      <TreatmentSummary facilityId={facilityId} encounterId={encounterId} />
+    ({ facilityId, encounterId, patientId }) => (
+      <TreatmentSummary
+        facilityId={facilityId}
+        encounterId={encounterId}
+        patientId={patientId}
+      />
     ),
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire":
     ({ facilityId, encounterId, patientId }) => (

src/components/Common/AvatarEditModal.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from "dompurify";
 import React, {
   ChangeEventHandler,
   useCallback,
@@ -135,11 +136,12 @@ const AvatarEditModal = ({
       setSelectedFile(undefined);
       return;
     }
-    if (!isImageFile(e.target.files[0])) {
+    const file = e.target.files[0];
+    if (!isImageFile(file)) {
       toast.warning(t("please_upload_an_image_file"));
       return;
     }
-    setSelectedFile(e.target.files[0]);
+    setSelectedFile(file);
   };
 
   const uploadAvatar = async () => {
@@ -231,7 +233,11 @@ const AvatarEditModal = ({
                   <>
                     <div className="flex flex-1 items-center justify-center rounded-lg">
                       <img
-                        src={preview || imageUrl}
+                        src={
+                          preview && preview.startsWith("blob:")
+                            ? DOMPurify.sanitize(preview)
+                            : imageUrl
+                        }
                         alt="cover-photo"
                         className="h-full w-full object-cover"
                       />

src/components/Common/PrintTable.tsx

@@ -0,0 +1,66 @@
+import { t } from "i18next";
+
+import { cn } from "@/lib/utils";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+type HeaderRow = {
+  key: string;
+  width?: number;
+};
+
+type TableRowType = Record<string, string | undefined>;
+interface GenericTableProps {
+  headers: HeaderRow[];
+  rows: TableRowType[] | undefined;
+}
+
+export default function PrintTable({ headers, rows }: GenericTableProps) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray">
+      <Table className="w-full">
+        <TableHeader>
+          <TableRow className="bg-transparent hover:bg-transparent divide-x divide-gray border-b-gray">
+            {headers.map(({ key, width }, index) => (
+              <TableHead
+                className={cn(
+                  index == 0 && "first:rounded-l-md",
+                  "h-auto py-1 pl-2 pr-2 text-black text-center ",
+                  width && `w-${width}`,
+                )}
+                key={key}
+              >
+                {t(key)}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {!!rows &&
+            rows.map((row, index) => (
+              <TableRow
+                key={index}
+                className="bg-transparent hover:bg-transparent divide-x divide-gray"
+              >
+                {headers.map(({ key }) => (
+                  <TableCell
+                    className="break-words whitespace-normal text-center"
+                    key={key}
+                  >
+                    {row[key] || "-"}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx

@@ -197,12 +197,23 @@ function StructuredResponseBadge({
   );
 }
 
-function ResponseCard({ item }: { item: QuestionnaireResponse }) {
+function ResponseCard({
+  item,
+  isPrintPreview,
+}: {
+  item: QuestionnaireResponse;
+  isPrintPreview?: boolean;
+}) {
   const isStructured = !item.questionnaire;
   const structuredType = Object.keys(item.structured_responses || {})[0];
 
   return (
-    <Card className="flex flex-col py-3 px-4 transition-colors hover:bg-muted/50">
+    <Card
+      className={cn(
+        "flex flex-col py-3 px-4 transition-colors hover:bg-muted/50",
+        isPrintPreview && "shadow-none",
+      )}
+    >
       <div className="flex items-start justify-between">
         <div className="space-y-1">
           <div className="flex items-center gap-2 text-xs text-gray-500">
@@ -317,7 +328,12 @@ export default function QuestionnaireResponsesList({
         ) : (
           <div>
             {questionnarieResponses?.results?.length === 0 ? (
-              <Card className="p-6">
+              <Card
+                className={cn(
+                  "p-6",
+                  isPrintPreview && "shadow-none border-gray",
+                )}
+              >
                 <div className="text-lg font-medium text-gray-500">
                   {t("no_questionnaire_responses")}
                 </div>
@@ -327,7 +343,11 @@ export default function QuestionnaireResponsesList({
                 {questionnarieResponses?.results?.map(
                   (item: QuestionnaireResponse) => (
                     <li key={item.id} className="w-full">
-                      <ResponseCard key={item.id} item={item} />
+                      <ResponseCard
+                        key={item.id}
+                        item={item}
+                        isPrintPreview={isPrintPreview}
+                      />
                     </li>
                   ),
                 )}

src/components/Location/LocationSearch.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import {
   Command,
@@ -33,6 +34,7 @@ export function LocationSearch({
   disabled,
   value,
 }: LocationSearchProps) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
 
@@ -60,6 +62,7 @@ export function LocationSearch({
           <CommandInput
             placeholder="Search locations..."
             value={search}
+            className="outline-none border-none ring-0 shadow-none"
             onValueChange={setSearch}
           />
           <CommandEmpty>No locations found.</CommandEmpty>
@@ -73,7 +76,15 @@ export function LocationSearch({
                   setOpen(false);
                 }}
               >
-                {location.name}
+                <span>{location.name}</span>
+                <span className="text-xs text-gray-500">
+                  {t(`location_form__${location.form}`)}
+                  {" in "}
+                  {formatLocationParent(location)}
+                </span>
+                <span className="text-xs text-gray-500 ml-auto">
+                  {t(`location_status__${location.status}`)}
+                </span>
               </CommandItem>
             ))}
           </CommandGroup>
@@ -82,3 +93,12 @@ export function LocationSearch({
     </Popover>
   );
 }
+
+const formatLocationParent = (location: LocationList) => {
+  const parents: string[] = [];
+  while (location.parent?.name) {
+    parents.push(location.parent?.name);
+    location = location.parent;
+  }
+  return parents.reverse().join(" > ");
+};