Treatment Summary UI Enhancement

public/locale/en.json

@@ -1441,6 +1441,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/components/Common/PrintTable.tsx

@@ -0,0 +1,64 @@
+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 }, index) => (
+              <TableHead
+                className={cn(
+                  index == 0 && "first:rounded-l-md",
+                  "h-auto py-1 pl-2 pr-2 text-black text-center",
+                )}
+                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="max-w-[200px] 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">
@@ -327,7 +338,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,13 @@ 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>