Treatment Summary UI Enhancement

public/locale/en.json

@@ -1421,6 +1421,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/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>

src/components/Patient/MedicationStatementList.tsx

@@ -64,9 +64,13 @@ function MedicationRow({
       <TableCell>
         <Badge
           variant="outline"
-          className={`whitespace-nowrap capitalize ${
-            MEDICATION_STATEMENT_STATUS_STYLES[statement.status]
-          }`}
+          className={
+            isPrintPreview
+              ? ""
+              : `whitespace-nowrap capitalize ${
+                  MEDICATION_STATEMENT_STATUS_STYLES[statement.status]
+                }`
+          }
         >
           {statement.status}
         </Badge>
@@ -136,9 +140,9 @@ export function MedicationStatementList({
 
   if (isLoading) {
     return (
-      <Card className={cn("border-none rounded-sm", className)}>
+      <Card className={cn("rounded-sm", className, isPrintPreview && "p-3")}>
         <CardHeader
-          className={cn("px-4 pt-4 pb-2", isPrintPreview && "px-0 py-2")}
+          className={cn("px-4 pt-4 pb-2", isPrintPreview && "px- py-2")}
         >
           <CardTitle>{t("ongoing_medications")}</CardTitle>
         </CardHeader>
@@ -160,23 +164,19 @@ 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")}
-        >
+      <Card className={cn("rounded-sm", className, isPrintPreview && "p-2")}>
+        <CardHeader className={cn("px-2 pt-4 pb-2")}>
           <CardTitle>{t("ongoing_medications")}</CardTitle>
         </CardHeader>
-        <CardContent
-          className={cn("px-2 pb-3 pt-2", isPrintPreview && "px-0 py-0")}
-        >
+        <CardContent className={cn("px-2 pb-3 pt-2")}>
           <p className="text-gray-500">{t("no_ongoing_medications")}</p>
         </CardContent>
       </Card>
     );
   }
 
   return (
-    <Card className={cn("border-none rounded-sm", className)}>
+    <Card className={cn("rounded-sm", className, isPrintPreview && "p-3")}>
       <CardHeader
         className={cn("px-4 pt-4 pb-2", isPrintPreview && "px-0 py-2")}
       >

src/components/Patient/TreatmentSummary.tsx

@@ -46,7 +46,7 @@ export default function TreatmentSummary({
     <PrintPreview
       title={`${t("treatment_summary")} - ${encounter.patient.name}`}
     >
-      <div className="min-h-screen bg-white py-2 max-w-4xl mx-auto">
+      <div className="min-h-screen py-2 max-w-4xl mx-auto">
         <div className="space-y-6">
           {/* Header */}
           <div className="flex justify-between items-start pb-2 border-b">
@@ -191,29 +191,29 @@ export default function TreatmentSummary({
             <AllergyList
               patientId={encounter.patient.id}
               encounterId={encounterId}
-              className="border-none shadow-none"
+              className="border border-black shadow-none"
               isPrintPreview={true}
             />
 
             {/* Symptoms */}
             <SymptomsList
               patientId={encounter.patient.id}
               encounterId={encounterId}
-              className="border-none shadow-none"
+              className="border border-black shadow-none"
               isPrintPreview={true}
             />
 
             {/* Diagnoses */}
             <DiagnosisList
               patientId={encounter.patient.id}
               encounterId={encounterId}
-              className="border-none shadow-none"
+              className="border border-black shadow-none"
               isPrintPreview={true}
             />
 
             {/* Medications */}
-            <div className="border-none shadow-none space-y-2">
-              <p className="text-sm font-semibold text-gray-950">
+            <div className="border border-black shadow-none p-3">
+              <p className="text-sm font-semibold text-gray-950 m-1">
                 {t("medications")}
               </p>
               <MedicationsTable
@@ -226,7 +226,7 @@ export default function TreatmentSummary({
           {/* Medication Statements */}
           <MedicationStatementList
             patientId={encounter.patient.id}
-            className="border-none shadow-none"
+            className="border border-black shadow-none"
             isPrintPreview={true}
           />
 

src/components/Patient/allergy/list.tsx

@@ -95,6 +95,7 @@ export function AllergyList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-2">
           <Skeleton className="h-[100px] w-full" />
@@ -118,6 +119,7 @@ export function AllergyList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-3 pt-2">
           <p className="text-gray-500">{t("no_allergies_recorded")}</p>
@@ -148,29 +150,41 @@ export function AllergyList({
         <TableCell>
           <Badge
             variant="outline"
-            className={`whitespace-nowrap ${
-              ALLERGY_CLINICAL_STATUS_STYLES[allergy.clinical_status]
-            }`}
+            className={
+              isPrintPreview
+                ? ""
+                : `whitespace-nowrap ${ALLERGY_CLINICAL_STATUS_STYLES[allergy.clinical_status]}`
+            }
           >
             {t(allergy.clinical_status)}
           </Badge>
         </TableCell>
         <TableCell>
           <Badge
             variant="outline"
-            className={`whitespace-nowrap ${
-              ALLERGY_CRITICALITY_STYLES[allergy.criticality]
-            }`}
+            className={
+              isPrintPreview
+                ? ""
+                : `whitespace-nowrap ${
+                    ALLERGY_CRITICALITY_STYLES[allergy.criticality]
+                  }`
+            }
           >
             {t(allergy.criticality)}
           </Badge>
         </TableCell>
         <TableCell>
           <Badge
             variant="outline"
-            className={`whitespace-nowrap capitalize ${
-              ALLERGY_VERIFICATION_STATUS_STYLES[allergy.verification_status]
-            }`}
+            className={
+              isPrintPreview
+                ? ""
+                : `whitespace-nowrap capitalize ${
+                    ALLERGY_VERIFICATION_STATUS_STYLES[
+                      allergy.verification_status
+                    ]
+                  }`
+            }
           >
             {t(allergy.verification_status)}
           </Badge>
@@ -305,7 +319,7 @@ const AllergyListLayout = ({
   isPrintPreview?: boolean;
 }) => {
   return (
-    <Card className={cn("border-none rounded-sm", className)}>
+    <Card className={cn("rounded-sm ", className, isPrintPreview && "p-2")}>
       <CardHeader
         className={cn(
           "flex justify-between flex-row",

src/components/Patient/diagnosis/DiagnosisTable.tsx

@@ -73,21 +73,31 @@ export function DiagnosisTable({
             <TableCell>
               <Badge
                 variant="outline"
-                className={`whitespace-nowrap ${
-                  DIAGNOSIS_CLINICAL_STATUS_STYLES[diagnosis.clinical_status]
-                }`}
+                className={
+                  isPrintPreview
+                    ? ""
+                    : `whitespace-nowrap ${
+                        DIAGNOSIS_CLINICAL_STATUS_STYLES[
+                          diagnosis.clinical_status
+                        ]
+                      }`
+                }
               >
                 {t(diagnosis.clinical_status)}
               </Badge>
             </TableCell>
             <TableCell>
               <Badge
                 variant="outline"
-                className={`whitespace-nowrap capitalize ${
-                  DIAGNOSIS_VERIFICATION_STATUS_STYLES[
-                    diagnosis.verification_status
-                  ]
-                }`}
+                className={
+                  isPrintPreview
+                    ? ""
+                    : `whitespace-nowrap capitalize ${
+                        DIAGNOSIS_VERIFICATION_STATUS_STYLES[
+                          diagnosis.verification_status
+                        ]
+                      }`
+                }
               >
                 {t(diagnosis.verification_status)}
               </Badge>

src/components/Patient/diagnosis/list.tsx

@@ -47,6 +47,7 @@ export function DiagnosisList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-2">
           <Skeleton className="h-[100px] w-full" />
@@ -71,6 +72,7 @@ export function DiagnosisList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-3 pt-2">
           <p className="text-gray-500">{t("no_diagnoses_recorded")}</p>
@@ -137,7 +139,7 @@ const DiagnosisListLayout = ({
   isPrintPreview?: boolean;
 }) => {
   return (
-    <Card className={cn("border-none rounded-sm", className)}>
+    <Card className={cn("rounded-sm ", className, isPrintPreview && "p-2")}>
       <CardHeader
         className={cn(
           "px-4 pt-4 pb-2 flex justify-between flex-row",

src/components/Patient/symptoms/SymptomTable.tsx

@@ -74,31 +74,43 @@ export function SymptomTable({
             <TableCell>
               <Badge
                 variant="outline"
-                className={`whitespace-nowrap ${
-                  SYMPTOM_SEVERITY_STYLES[symptom.severity]
-                }`}
+                className={
+                  isPrintPreview
+                    ? ""
+                    : `whitespace-nowrap ${
+                        SYMPTOM_SEVERITY_STYLES[symptom.severity]
+                      }`
+                }
               >
                 {t(symptom.severity)}
               </Badge>
             </TableCell>
             <TableCell>
               <Badge
                 variant="outline"
-                className={`whitespace-nowrap ${
-                  SYMPTOM_CLINICAL_STATUS_STYLES[symptom.clinical_status]
-                }`}
+                className={
+                  isPrintPreview
+                    ? ""
+                    : `whitespace-nowrap ${
+                        SYMPTOM_CLINICAL_STATUS_STYLES[symptom.clinical_status]
+                      }`
+                }
               >
                 {t(symptom.clinical_status)}
               </Badge>
             </TableCell>
             <TableCell>
               <Badge
                 variant="outline"
-                className={`whitespace-nowrap capitalize ${
-                  SYMPTOM_VERIFICATION_STATUS_STYLES[
-                    symptom.verification_status
-                  ]
-                }`}
+                className={
+                  isPrintPreview
+                    ? ""
+                    : `whitespace-nowrap capitalize ${
+                        SYMPTOM_VERIFICATION_STATUS_STYLES[
+                          symptom.verification_status
+                        ]
+                      }`
+                }
               >
                 {t(symptom.verification_status)}
               </Badge>

src/components/Patient/symptoms/list.tsx

@@ -47,6 +47,7 @@ export function SymptomsList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-2">
           <Skeleton className="h-[100px] w-full" />
@@ -70,6 +71,7 @@ export function SymptomsList({
         facilityId={facilityId}
         patientId={patientId}
         encounterId={encounterId}
+        className={className}
       >
         <CardContent className="px-2 pb-3 pt-2">
           <p className="text-gray-500">{t("no_symptoms_recorded")}</p>
@@ -135,7 +137,7 @@ const SymptomListLayout = ({
   isPrintPreview?: boolean;
 }) => {
   return (
-    <Card className={cn("border-none rounded-sm", className)}>
+    <Card className={cn("rounded-sm ", className, isPrintPreview && "p-2")}>
       <CardHeader
         className={cn(
           "flex justify-between flex-row",