Treatment Summary UI Enhancement

public/locale/en.json

@@ -1445,6 +1445,7 @@
   "no_log_update_delta": "No changes since previous log update",
   "no_log_updates": "No log updates found",
   "no_medical_history_available": "No Medical History Available",
+  "no_medication_recorded": "No Medication Recorded",
   "no_medications_found_for_this_encounter": "No medications found for this encounter.",
   "no_medications_to_administer": "No medications to administer",
   "no_notices_for_you": "No notices for you.",

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/PrintTable.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+type HeaderRow = {
+  title: string;
+  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, title, 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}
+              >
+                {title}
+              </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/Medicine/MedicationsTable.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
+import { CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
@@ -60,6 +61,14 @@ export const MedicationsTable = ({
       </div>
     );
   }
+  if (!medications?.results.length) {
+    return (
+      <CardContent className="p-2">
+        <p className="text-gray-500">{t("no_medication_recorded")}</p>
+      </CardContent>
+    );
+  }
+
   return (
     <div className="border rounded-lg overflow-hidden">
       <Table>

src/components/Patient/MedicationStatementList.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -35,20 +36,14 @@ import medicationStatementApi from "@/types/emr/medicationStatement/medicationSt
 interface MedicationStatementListProps {
   patientId: string;
   className?: string;
-  isPrintPreview?: boolean;
 }
 
 interface MedicationRowProps {
   statement: MedicationStatementRead;
   isEnteredInError?: boolean;
-  isPrintPreview?: boolean;
 }
 
-function MedicationRow({
-  statement,
-  isEnteredInError,
-  isPrintPreview = false,
-}: MedicationRowProps) {
+function MedicationRow({ statement, isEnteredInError }: MedicationRowProps) {
   const { t } = useTranslation();
 
   return (
@@ -80,26 +75,22 @@ function MedicationRow({
       <TableCell className="max-w-[200px]">
         {statement.note ? (
           <div className="flex items-center gap-2">
-            {isPrintPreview ? (
-              <span className="text-gray-950">{statement.note}</span>
-            ) : (
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-7 text-xs shrink-0"
-                  >
-                    {t("see_note")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-80 p-4">
-                  <p className="text-sm text-gray-700 whitespace-pre-wrap">
-                    {statement.note}
-                  </p>
-                </PopoverContent>
-              </Popover>
-            )}
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 text-xs shrink-0"
+                >
+                  {t("see_note")}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-80 p-4">
+                <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                  {statement.note}
+                </p>
+              </PopoverContent>
+            </Popover>
           </div>
         ) : (
           "-"
@@ -121,11 +112,10 @@ function MedicationRow({
 
 export function MedicationStatementList({
   patientId,
-  className,
-  isPrintPreview = false,
+  className = "",
 }: MedicationStatementListProps) {
   const { t } = useTranslation();
-  const [showEnteredInError, setShowEnteredInError] = useState(isPrintPreview);
+  const [showEnteredInError, setShowEnteredInError] = useState(false);
 
   const { data: medications, isLoading } = useQuery({
     queryKey: ["medication_statements", patientId],
@@ -136,16 +126,9 @@ export function MedicationStatementList({
 
   if (isLoading) {
     return (
-      <Card className={cn("border-none rounded-sm", className)}>
-        <CardHeader
-          className={cn("px-4 pt-4 pb-2", isPrintPreview && "px-0 py-2")}
-        >
-          <CardTitle>{t("ongoing_medications")}</CardTitle>
-        </CardHeader>
-        <CardContent className="px-2 pb-2">
-          <Skeleton className="h-[100px] w-full" />
-        </CardContent>
-      </Card>
+      <MedicationStatementListLayout className={className}>
+        <Skeleton className="h-[100px] w-full" />
+      </MedicationStatementListLayout>
     );
   }
 
@@ -160,31 +143,18 @@ export function MedicationStatementList({
 
   if (!filteredMedications?.length) {
     return (
-      <Card className={cn("border-none rounded-sm", className)}>
-        <CardHeader
-          className={cn("px-4 pt-4 pb-2", isPrintPreview && "px-0 py-2")}
-        >
-          <CardTitle>{t("ongoing_medications")}</CardTitle>
-        </CardHeader>
-        <CardContent
-          className={cn("px-2 pb-3 pt-2", isPrintPreview && "px-0 py-0")}
-        >
-          <p className="text-gray-500">{t("no_ongoing_medications")}</p>
-        </CardContent>
-      </Card>
+      <MedicationStatementListLayout className={className}>
+        <p className="text-gray-500">{t("no_ongoing_medications")}</p>
+      </MedicationStatementListLayout>
     );
   }
 
   return (
-    <Card className={cn("border-none rounded-sm", className)}>
-      <CardHeader
-        className={cn("px-4 pt-4 pb-2", isPrintPreview && "px-0 py-2")}
-      >
-        <CardTitle>
-          {t("ongoing_medications")} ({filteredMedications.length})
-        </CardTitle>
-      </CardHeader>
-      <CardContent className={cn("px-2 pb-2", isPrintPreview && "px-0 py-0")}>
+    <MedicationStatementListLayout
+      medicationsCount={filteredMedications.length}
+      className={className}
+    >
+      <>
         <Table className="border-separate border-spacing-y-0.5">
           <TableHeader>
             <TableRow className="rounded-md overflow-hidden bg-gray-100">
@@ -226,7 +196,6 @@ export function MedicationStatementList({
                 key={statement.id}
                 statement={statement}
                 isEnteredInError={statement.status === "entered_in_error"}
-                isPrintPreview={isPrintPreview}
               />
             ))}
           </TableBody>
@@ -246,7 +215,29 @@ export function MedicationStatementList({
             </div>
           </>
         )}
-      </CardContent>
-    </Card>
+      </>
+    </MedicationStatementListLayout>
   );
 }
+
+const MedicationStatementListLayout = ({
+  children,
+  className,
+  medicationsCount,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  medicationsCount?: number | undefined;
+}) => {
+  return (
+    <Card className={cn("rounded-sm ", className)}>
+      <CardHeader className="px-4 pt-4 pb-2">
+        <CardTitle>
+          {t("ongoing_medications")}{" "}
+          {medicationsCount ? `(${medicationsCount})` : ""}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="px-2 pb-2">{children}</CardContent>
+    </Card>
+  );
+};