Minor Changes In Encounter Page (#10017)

ohcnetwork · Jan 23, 2025 · 080906e · 080906e
1 parent 089875d
commit 080906e
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 44 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -712,9 +712,11 @@
   "created_on": "Created On",
   "creating": "Creating...",
   "creating_facility": "Creating Facility...",
+  "critical": "Critical",
   "criticality": "Criticality",
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
+  "current_organizations": "Current Organizations",
   "current_password": "Current Password",
   "current_role": "Current Role",
   "current_status": "Current Status",
@@ -910,6 +912,7 @@
   "encounter_discharge_disposition__snf": "Skilled nursing facility",
   "encounter_duration_confirmation": "The duration of this encounter would be",
   "encounter_id": "Encounter ID",
+  "encounter_manage_organization_description": "Add or remove organizations from this encouter",
   "encounter_marked_as_complete": "Encounter Completed",
   "encounter_notes__all_discussions": "All Discussions",
   "encounter_notes__be_first_to_send": "Be the first to send a message",
@@ -1238,6 +1241,7 @@
   "last_modified": "Last Modified",
   "last_modified_by": "Last Modified By",
   "last_name": "Last Name",
+  "last_occurrence": "Last Occurrence",
   "last_online": "Last Online",
   "last_serviced_on": "Last Serviced On",
   "last_updated_by": "Last updated by",
@@ -1381,6 +1385,7 @@
   "next_week_short": "Next wk",
   "no": "No",
   "no_address_provided": "No address provided",
+  "no_allergies_recorded": "No allergies recorded",
   "no_appointments": "No appointments found",
   "no_attachments_found": "This communication has no attachments.",
   "no_availabilities_yet": "No availabilities yet",
@@ -1412,6 +1417,7 @@
   "no_notices_for_you": "No notices for you.",
   "no_observations": "No Observations",
   "no_ongoing_medications": "No Ongoing Medications",
+  "no_organizations_added_yet": "No organizations added yet",
   "no_organizations_found": "No Organizations Found",
   "no_organizations_selected": "No organizations selected",
   "no_patient_record_found": "No Patient Records Found",
@@ -1482,6 +1488,7 @@
   "on_hold": "On Hold",
   "ongoing_medications": "Ongoing Medications",
   "only_indian_mobile_numbers_supported": "Currently only Indian numbers are supported",
+  "onset": "Onset",
   "op_encounter": "OP Encounter",
   "op_file_closed": "OP file closed",
   "open": "Open",
@@ -1949,6 +1956,7 @@
   "set_home_facility": "Set as home facility",
   "set_your_local_language": "Set your local language",
   "settings_and_filters": "Settings and Filters",
+  "severity": "Severity",
   "severity_of_breathlessness": "Severity of Breathlessness",
   "sex": "Sex",
   "shared_by": "Shared By",
@@ -2019,13 +2027,15 @@
   "subscribed_successfully": "Subscribed Successfully",
   "subscription_error": "Subscription Error",
   "subscription_failed": "Subscription Failed",
+  "substance": "Substance",
   "suggested_investigations": "Suggested Investigations",
   "suggestion": "Suggestion",
   "summary": "Summary",
   "support": "Support",
   "switch": "Switch",
   "switch_bed": "Switch Bed",
   "switch_camera_is_not_available": "Switch camera is not available.",
+  "symptom": "Symptom",
   "symptoms": "Symptoms",
   "symptoms_empty_message": "No symptoms recorded",
   "systolic": "Systolic",
@@ -2216,6 +2226,7 @@
   "ventilator_oxygen_modality": "Oxygen Modality",
   "ventilator_oxygen_modality_oxygen_rate": "Oxygen Flow Rate",
   "ventilator_spo2": "SpO₂",
+  "verification": "Verification",
   "verification_failed": "Verification Failed",
   "verify": "Verify",
   "verify_and_link": "Verify and Link",

diff --git a/src/components/Patient/ManageEncounterOrganizations.tsx b/src/components/Patient/ManageEncounterOrganizations.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { t } from "i18next";
 import { Building, Loader2, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -81,22 +82,21 @@ export default function ManageEncounterOrganizations({
         {trigger || (
           <Button variant="outline" size="sm">
             <Building className="mr-2 h-4 w-4" />
-            Manage Organizations
+            {t("manage_organizations")}
           </Button>
         )}
       </SheetTrigger>
       <SheetContent>
         <SheetHeader>
-          <SheetTitle>Manage Organizations</SheetTitle>
+          <SheetTitle>{t("manage_organizations")}</SheetTitle>
           <SheetDescription>
-            Add or remove organizations from this encounter
+            {t("encounter_manage_organization_description")}
           </SheetDescription>
         </SheetHeader>
 
         <div className="space-y-6 py-4">
           <div className="space-y-4">
             <div className="space-y-4">
-              <h3 className="text-sm font-medium">Add Organization</h3>
               <FacilityOrganizationSelector
                 facilityId={facilityId}
                 value={selectedOrg}
@@ -109,12 +109,14 @@ export default function ManageEncounterOrganizations({
                 disabled={!selectedOrg || isAdding}
               >
                 {isAdding && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Add Organization
+                {t("add_organizations")}
               </Button>
             </div>
 
             <div className="space-y-4">
-              <h3 className="text-sm font-medium">Current Organizations</h3>
+              <h3 className="text-sm font-medium">
+                {t("current_organizations")}
+              </h3>
               <div className="space-y-2">
                 {encounter.organizations.map((org) => (
                   <div
@@ -148,7 +150,7 @@ export default function ManageEncounterOrganizations({
                 ))}
                 {encounter.organizations.length === 0 && (
                   <p className="text-sm text-muted-foreground">
-                    No organizations added yet
+                    {t("no_organizations_added_yet")}
                   </p>
                 )}
               </div>

diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
@@ -16,6 +16,7 @@ import {
 import { Avatar } from "@/components/Common/Avatar";
 
 import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
 import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
 import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi";
 
@@ -37,7 +38,7 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>Allergies</CardTitle>
+          <CardTitle>{t("allergies")}</CardTitle>
         </CardHeader>
         <CardContent>
           <Skeleton className="h-[100px] w-full" />
@@ -50,10 +51,10 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>Allergies</CardTitle>
+          <CardTitle>{t("allergies")}</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">No allergies recorded</p>
+          <p className="text-muted-foreground">{t("no_allergies_recorded")}</p>
         </CardContent>
       </Card>
     );
@@ -136,7 +137,9 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
                     className="w-4 h-4"
                     imageUrl={allergy.created_by.profile_picture_url}
                   />
-                  <span className="text-sm">{allergy.created_by.username}</span>
+                  <span className="text-sm">
+                    {formatName(allergy.created_by)}
+                  </span>
                 </TableCell>
               </TableRow>
             ))}

diff --git a/src/components/Patient/diagnosis/DiagnosisTable.tsx b/src/components/Patient/diagnosis/DiagnosisTable.tsx
@@ -1,3 +1,5 @@
+import { t } from "i18next";
+
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -10,6 +12,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import { formatName } from "@/Utils/utils";
 import { Diagnosis } from "@/types/emr/diagnosis/diagnosis";
 
 export const getStatusBadgeStyle = (status: string) => {
@@ -41,12 +44,12 @@ export function DiagnosisTable({
       {showHeader && (
         <TableHeader>
           <TableRow>
-            <TableHead>Diagnosis</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Verification</TableHead>
-            <TableHead>Onset</TableHead>
-            <TableHead>Notes</TableHead>
-            <TableHead>By</TableHead>
+            <TableHead>{t("diagnosis")}</TableHead>
+            <TableHead>{t("status")}</TableHead>
+            <TableHead>{t("verification")}</TableHead>
+            <TableHead>{t("onset")}</TableHead>
+            <TableHead>{t("notes")}</TableHead>
+            <TableHead>{t("created_by")}</TableHead>
           </TableRow>
         </TableHeader>
       )}
@@ -77,16 +80,17 @@ export function DiagnosisTable({
             <TableCell className="max-w-[200px] truncate">
               {diagnosis.note || "-"}
             </TableCell>
-            <TableCell className="whitespace-nowrap flex items-center gap-2">
-              <Avatar
-                name={`${diagnosis.created_by?.first_name} ${diagnosis.created_by?.last_name}`}
-                className="w-4 h-4"
-                imageUrl={diagnosis.created_by?.profile_picture_url}
-              />
-              <span className="text-sm">
-                {diagnosis.created_by?.first_name}{" "}
-                {diagnosis.created_by?.last_name}
-              </span>
+            <TableCell className="whitespace-nowrap ">
+              <div className="flex items-center gap-2">
+                <Avatar
+                  name={formatName(diagnosis.created_by)}
+                  className="w-4 h-4"
+                  imageUrl={diagnosis.created_by?.profile_picture_url}
+                />
+                <span className="text-sm">
+                  {formatName(diagnosis.created_by)}
+                </span>
+              </div>
             </TableCell>
           </TableRow>
         ))}

diff --git a/src/components/Patient/symptoms/SymptomTable.tsx b/src/components/Patient/symptoms/SymptomTable.tsx
@@ -1,3 +1,5 @@
+import { t } from "i18next";
+
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -10,6 +12,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import { formatName } from "@/Utils/utils";
 import { Symptom } from "@/types/emr/symptom/symptom";
 
 export const getStatusBadgeStyle = (status: string) => {
@@ -41,12 +44,12 @@ export function SymptomTable({
       {showHeader && (
         <TableHeader>
           <TableRow>
-            <TableHead>Symptom</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Severity</TableHead>
-            <TableHead>Onset</TableHead>
-            <TableHead>Notes</TableHead>
-            <TableHead>By</TableHead>
+            <TableHead>{t("symptom")}</TableHead>
+            <TableHead>{t("status")}</TableHead>
+            <TableHead>{t("severity")}</TableHead>
+            <TableHead>{t("onset")}</TableHead>
+            <TableHead>{t("notes")}</TableHead>
+            <TableHead>{t("created_by")}</TableHead>
           </TableRow>
         </TableHeader>
       )}
@@ -77,15 +80,17 @@ export function SymptomTable({
             <TableCell className="max-w-[200px] truncate">
               {symptom.note || "-"}
             </TableCell>
-            <TableCell className="whitespace-nowrap flex items-center gap-2">
-              <Avatar
-                name={`${symptom.created_by?.first_name} ${symptom.created_by?.last_name}`}
-                className="w-4 h-4"
-                imageUrl={symptom.created_by?.profile_picture_url}
-              />
-              <span className="text-sm">
-                {symptom.created_by?.first_name} {symptom.created_by?.last_name}
-              </span>
+            <TableCell className="whitespace-nowrap">
+              <div className="flex items-center gap-2">
+                <Avatar
+                  name={formatName(symptom.created_by)}
+                  className="w-4 h-4"
+                  imageUrl={symptom.created_by?.profile_picture_url}
+                />
+                <span className="text-sm">
+                  {formatName(symptom.created_by)}
+                </span>
+              </div>
             </TableCell>
           </TableRow>
         ))}

diff --git a/src/pages/Encounters/EncounterShow.tsx b/src/pages/Encounters/EncounterShow.tsx
@@ -241,8 +241,8 @@ export const EncounterShow = (props: Props) => {
           </Link>
         </div>
       </nav>
-      <div className="mt-4 w-full border-b-2 border-secondary-200">
-        <div className="mt-2 flex w-full flex-col md:flex-row">
+      <div className="mt-4 xl:mt-0 w-full border-b-2 border-secondary-200">
+        <div className="mt-2 xl:mt-0 flex w-full flex-col md:flex-row">
           <div className="size-full rounded-lg border bg-white text-black shadow">
             <PatientInfoCard
               patient={encounterData.patient}