From ea4a69b0adbedea0c6d8f17dda6ce18639d51e03 Mon Sep 17 00:00:00 2001
From: Tanuj Nainwal <nainwaltanuj9389@gmail.com>
Date: Tue, 4 Feb 2025 00:21:05 +0530
Subject: [PATCH 1/2] improved tablet view responsiveness

---
 src/pages/Encounters/EncounterList.tsx | 280 +++++++++++++------------
 1 file changed, 142 insertions(+), 138 deletions(-)

diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index effc46721a5..8db184105de 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -214,8 +214,8 @@ export function EncounterList({
 
   return (
     <Page title={t("encounters")} hideBack={true}>
-      <div className="space-y-4 mt-2">
-        <div className="rounded-lg border bg-card shadow-sm">
+      <div className="space-y-4 mt-2 flex flex-col">
+        <div className="rounded-lg border bg-card shadow-sm flex flex-col">
           <div className="flex flex-col">
             <div className="flex flex-wrap items-center justify-between gap-2 p-4">
               <div className="flex flex-wrap items-center gap-2">
@@ -467,191 +467,195 @@ export function EncounterList({
               <div className="hidden md:flex items-center">
                 <Tabs value={status || "all"} className="w-full">
                   <TabsList className="bg-transparent p-0 h-8">
+                    <div className="flex flex-wrap">
+                      <TabsTrigger
+                        value="all"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: undefined,
+                          })
+                        }
+                      >
+                        All
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="planned"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: "planned",
+                          })
+                        }
+                      >
+                        <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
+                        Planned
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="in_progress"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: "in_progress",
+                          })
+                        }
+                      >
+                        <CareIcon icon="l-spinner" className="mr-2 h-4 w-4" />
+                        In Progress
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="discharged"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: "discharged",
+                          })
+                        }
+                      >
+                        <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
+                        Discharged
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="completed"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: "completed",
+                          })
+                        }
+                      >
+                        <CareIcon icon="l-check" className="mr-2 h-4 w-4" />
+                        Completed
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="cancelled"
+                        className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                        onClick={() =>
+                          updateQuery({
+                            ...{ encounter_class: encounterClass, priority },
+                            status: "cancelled",
+                          })
+                        }
+                      >
+                        <CareIcon icon="l-x" className="mr-2 h-4 w-4" />
+                        Cancelled
+                      </TabsTrigger>
+                    </div>
+                  </TabsList>
+                </Tabs>
+              </div>
+            </div>
+
+            <Separator className="hidden md:block" />
+
+            {/* Class Filter - Desktop */}
+            <div className="hidden md:block p-4">
+              <Tabs value={encounterClass || "all"} className="w-full">
+                <TabsList className="bg-transparent p-0 h-8">
+                  <div className="flex flex-wrap">
                     <TabsTrigger
                       value="all"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: undefined,
+                          status,
+                          priority,
+                          encounter_class: undefined,
                         })
                       }
                     >
-                      All
+                      All Types
                     </TabsTrigger>
                     <TabsTrigger
-                      value="planned"
+                      value="imp"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: "planned",
+                          status,
+                          priority,
+                          encounter_class: "imp",
                         })
                       }
                     >
-                      <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
-                      Planned
+                      <CareIcon icon="l-hospital" className="mr-2 h-4 w-4" />
+                      Inpatient
                     </TabsTrigger>
                     <TabsTrigger
-                      value="in_progress"
+                      value="amb"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: "in_progress",
+                          status,
+                          priority,
+                          encounter_class: "amb",
                         })
                       }
                     >
-                      <CareIcon icon="l-spinner" className="mr-2 h-4 w-4" />
-                      In Progress
+                      <CareIcon icon="l-user" className="mr-2 h-4 w-4" />
+                      Ambulatory
                     </TabsTrigger>
                     <TabsTrigger
-                      value="discharged"
+                      value="obsenc"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: "discharged",
+                          status,
+                          priority,
+                          encounter_class: "obsenc",
                         })
                       }
                     >
-                      <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
-                      Discharged
+                      <CareIcon icon="l-eye" className="mr-2 h-4 w-4" />
+                      Observation
                     </TabsTrigger>
                     <TabsTrigger
-                      value="completed"
+                      value="emer"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: "completed",
+                          status,
+                          priority,
+                          encounter_class: "emer",
                         })
                       }
                     >
-                      <CareIcon icon="l-check" className="mr-2 h-4 w-4" />
-                      Completed
+                      <CareIcon icon="l-ambulance" className="mr-2 h-4 w-4" />
+                      Emergency
                     </TabsTrigger>
                     <TabsTrigger
-                      value="cancelled"
+                      value="vr"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
                       onClick={() =>
                         updateQuery({
-                          ...{ encounter_class: encounterClass, priority },
-                          status: "cancelled",
+                          status,
+                          priority,
+                          encounter_class: "vr",
                         })
                       }
                     >
-                      <CareIcon icon="l-x" className="mr-2 h-4 w-4" />
-                      Cancelled
+                      <CareIcon icon="l-video" className="mr-2 h-4 w-4" />
+                      Virtual
                     </TabsTrigger>
-                  </TabsList>
-                </Tabs>
-              </div>
-            </div>
-
-            <Separator className="hidden md:block" />
-
-            {/* Class Filter - Desktop */}
-            <div className="hidden md:block p-4">
-              <Tabs value={encounterClass || "all"} className="w-full">
-                <TabsList className="bg-transparent p-0 h-8">
-                  <TabsTrigger
-                    value="all"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: undefined,
-                      })
-                    }
-                  >
-                    All Types
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="imp"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "imp",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-hospital" className="mr-2 h-4 w-4" />
-                    Inpatient
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="amb"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "amb",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-user" className="mr-2 h-4 w-4" />
-                    Ambulatory
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="obsenc"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "obsenc",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-eye" className="mr-2 h-4 w-4" />
-                    Observation
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="emer"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "emer",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-ambulance" className="mr-2 h-4 w-4" />
-                    Emergency
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="vr"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "vr",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-video" className="mr-2 h-4 w-4" />
-                    Virtual
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="hh"
-                    className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
-                    onClick={() =>
-                      updateQuery({
-                        status,
-                        priority,
-                        encounter_class: "hh",
-                      })
-                    }
-                  >
-                    <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
-                    Home Health
-                  </TabsTrigger>
+                    <TabsTrigger
+                      value="hh"
+                      className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                      onClick={() =>
+                        updateQuery({
+                          status,
+                          priority,
+                          encounter_class: "hh",
+                        })
+                      }
+                    >
+                      <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
+                      Home Health
+                    </TabsTrigger>
+                  </div>
                 </TabsList>
               </Tabs>
             </div>

From 85bfad8282fbdeb7be1686c2a1af2d04c5dbe22a Mon Sep 17 00:00:00 2001
From: Tanuj Nainwal <nainwaltanuj9389@gmail.com>
Date: Tue, 4 Feb 2025 17:21:19 +0530
Subject: [PATCH 2/2] solved i18n issue

---
 src/pages/Encounters/EncounterList.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 8db184105de..f6eaf605c80 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -478,7 +478,7 @@ export function EncounterList({
                           })
                         }
                       >
-                        All
+                        {t("all")}
                       </TabsTrigger>
                       <TabsTrigger
                         value="planned"
@@ -491,7 +491,7 @@ export function EncounterList({
                         }
                       >
                         <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
-                        Planned
+                        {t("encounter_status__planned")}
                       </TabsTrigger>
                       <TabsTrigger
                         value="in_progress"
@@ -504,7 +504,7 @@ export function EncounterList({
                         }
                       >
                         <CareIcon icon="l-spinner" className="mr-2 h-4 w-4" />
-                        In Progress
+                        {t("encounter_class__in_progress")}
                       </TabsTrigger>
                       <TabsTrigger
                         value="discharged"
@@ -517,7 +517,7 @@ export function EncounterList({
                         }
                       >
                         <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
-                        Discharged
+                        {t("discharge")}
                       </TabsTrigger>
                       <TabsTrigger
                         value="completed"
@@ -530,7 +530,7 @@ export function EncounterList({
                         }
                       >
                         <CareIcon icon="l-check" className="mr-2 h-4 w-4" />
-                        Completed
+                        {t("completed")}
                       </TabsTrigger>
                       <TabsTrigger
                         value="cancelled"
@@ -543,7 +543,7 @@ export function EncounterList({
                         }
                       >
                         <CareIcon icon="l-x" className="mr-2 h-4 w-4" />
-                        Cancelled
+                        {t("cancelled")}
                       </TabsTrigger>
                     </div>
                   </TabsList>
@@ -569,7 +569,7 @@ export function EncounterList({
                         })
                       }
                     >
-                      All Types
+                      {t("all")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="imp"
@@ -583,7 +583,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-hospital" className="mr-2 h-4 w-4" />
-                      Inpatient
+                      {t("encounter_class__imp")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="amb"
@@ -597,7 +597,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-user" className="mr-2 h-4 w-4" />
-                      Ambulatory
+                      {t("encounter_class__amb")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="obsenc"
@@ -611,7 +611,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-eye" className="mr-2 h-4 w-4" />
-                      Observation
+                      {t("encounter_class__obsenc")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="emer"
@@ -625,7 +625,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-ambulance" className="mr-2 h-4 w-4" />
-                      Emergency
+                      {t("emergency")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="vr"
@@ -639,7 +639,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-video" className="mr-2 h-4 w-4" />
-                      Virtual
+                      {t("encounter_class__vr")}
                     </TabsTrigger>
                     <TabsTrigger
                       value="hh"
@@ -653,7 +653,7 @@ export function EncounterList({
                       }
                     >
                       <CareIcon icon="l-home" className="mr-2 h-4 w-4" />
-                      Home Health
+                      {t("encounter_class__hh")}
                     </TabsTrigger>
                   </div>
                 </TabsList>