Merge branch 'develop' into encounter_card_design_update

public/locale/en.json

@@ -289,10 +289,9 @@
   "add_attachments": "Add Attachments",
   "add_beds": "Add Bed(s)",
   "add_beds_to_configure_presets": "Add beds to this location to configure presets for them.",
-  "add_consultation": "Add consultation",
-  "add_consultation_update": "Add Consultation Update",
   "add_department_team": "Add Department/Team",
   "add_details_of_patient": "Add Details of Patient",
+  "add_encounter": "Add Encounter",
   "add_exception": "Add Exception",
   "add_facility": "Add Facility",
   "add_files": "Add Files",
@@ -470,6 +469,7 @@
   "bed_type__400": "Isolation Bed",
   "bed_type__500": "Others",
   "before": "before",
+  "begin_clinical_encounter": "Begin a new clinical encounter for {{patientName}}. Select the appropriate encounter type, status, and priority to ensure proper documentation and care delivery.",
   "beta": "beta",
   "biologic": "Biologic",
   "bladder": "Bladder",
@@ -1159,6 +1159,7 @@
   "information_source_related_person": "Related Person",
   "information_source_user": "Hospital Staff",
   "inidcator_event": "Indicator Event",
+  "initiate_encounter": "Initiate Patient Encounter",
   "instruction_on_titration": "Instruction on titration",
   "instructions": "Instructions",
   "insurance__insurer_id": "Insurer ID",
@@ -1417,7 +1418,6 @@
   "no_child_locations_found": "No child locations found",
   "no_comments_available": "No comments available",
   "no_consultation_filed": "No consultation filed",
-  "no_consultation_history": "No consultation history available",
   "no_consultation_updates": "No consultation updates",
   "no_country_found": "No country found",
   "no_data_found": "No data found",
@@ -1426,6 +1426,7 @@
   "no_discharge_summaries_found": "No Discharge Summaries found",
   "no_doctors_found": "No Doctors Found",
   "no_duplicate_facility": "You should not create duplicate facilities",
+  "no_encounter_history": "No encounter history available",
   "no_encounters_found": "No encounters found",
   "no_facilities": "No Facilities found",
   "no_facilities_found": "No facilities found",
@@ -2201,6 +2202,7 @@
   "type_b_cylinders": "B Type Cylinders",
   "type_c_cylinders": "C Type Cylinders",
   "type_d_cylinders": "D Type Cylinders",
+  "type_of_encounter": "Type of Encounter",
   "type_patient_age": "Type Patient Age",
   "type_patient_name": "Type Patient Name",
   "type_to_search": "Type to search",

public/locale/ml.json

@@ -317,8 +317,6 @@
   "add_attachments": "അറ്റാച്ചുമെൻ്റുകൾ ചേർക്കുക",
   "add_beds": "കിടക്ക(കൾ) ചേർക്കുക",
   "add_beds_to_configure_presets": "അവയ്‌ക്കായി പ്രീസെറ്റുകൾ കോൺഫിഗർ ചെയ്യാൻ ഈ ലൊക്കേഷനിലേക്ക് കിടക്കകൾ ചേർക്കുക.",
-  "add_consultation": "കൂടിയാലോചന ചേർക്കുക",
-  "add_consultation_update": "കൺസൾട്ടേഷൻ അപ്ഡേറ്റ് ചേർക്കുക",
   "add_details_of_patient": "രോഗിയുടെ വിശദാംശങ്ങൾ ചേർക്കുക",
   "add_facility": "സൗകര്യം ചേർക്കുക",
   "add_files": "ഫയലുകൾ ചേർക്കുക",
@@ -1242,7 +1240,6 @@
   "no_changes": "മാറ്റങ്ങളൊന്നുമില്ല",
   "no_changes_made": "മാറ്റങ്ങളൊന്നും വരുത്തിയിട്ടില്ല",
   "no_consultation_filed": "ഒരു കൺസൾട്ടേഷനും ഫയൽ ചെയ്തിട്ടില്ല",
-  "no_consultation_history": "കൺസൾട്ടേഷൻ ചരിത്രമൊന്നും ലഭ്യമല്ല",
   "no_consultation_updates": "കൺസൾട്ടേഷൻ അപ്‌ഡേറ്റുകളൊന്നുമില്ല",
   "no_data_found": "വിവരങ്ങളൊന്നും കണ്ടെത്തിയില്ല",
   "no_doctors_found": "ഡോക്ടർമാരെ കണ്ടെത്തിയില്ല",

src/components/Encounter/CreateEncounterForm.tsx

@@ -13,6 +13,7 @@ import {
 import { navigate } from "raviger";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import * as z from "zod";
 
@@ -138,6 +139,7 @@ export default function CreateEncounterForm({
 }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const queryClient = useQueryClient();
+  const { t } = useTranslation();
 
   const form = useForm<z.infer<typeof encounterFormSchema>>({
     resolver: zodResolver(encounterFormSchema),
@@ -161,12 +163,6 @@ export default function CreateEncounterForm({
         `/facility/${facilityId}/patient/${patientId}/encounter/${data.id}/updates`,
       );
     },
-    onError: (error) => {
-      const errorData = error.cause as { errors: { msg: string[] } };
-      errorData.errors.msg.forEach((er) => {
-        toast.error(er);
-      });
-    },
   });
 
   function onSubmit(data: z.infer<typeof encounterFormSchema>) {
@@ -199,17 +195,15 @@ export default function CreateEncounterForm({
             className="h-14 w-full justify-start text-lg"
           >
             <Stethoscope className="mr-4 size-6" />
-            Create Encounter
+            {t("create_encounter")}
           </Button>
         )}
       </SheetTrigger>
       <SheetContent className="overflow-y-auto">
         <SheetHeader>
-          <SheetTitle>Initiate Patient Encounter</SheetTitle>
+          <SheetTitle>{t("initiate_encounter")}</SheetTitle>
           <SheetDescription>
-            Begin a new clinical encounter for {patientName}. Select the
-            appropriate encounter type, status, and priority to ensure proper
-            documentation and care delivery.
+            {t("begin_clinical_encounter", { patientName })}
           </SheetDescription>
         </SheetHeader>
         <Form {...form}>
@@ -222,7 +216,9 @@ export default function CreateEncounterForm({
               name="encounter_class"
               render={({ field }) => (
                 <FormItem className="space-y-3">
-                  <FormLabel className="text-base">Type of Encounter</FormLabel>
+                  <FormLabel className="text-base">
+                    {t("type_of_encounter")}
+                  </FormLabel>
                   <div className="grid grid-cols-2 gap-3">
                     {encounterClasses.map(
                       ({ value, label, icon: Icon, description }) => (
@@ -239,7 +235,7 @@ export default function CreateEncounterForm({
                           <div className="flex flex-col items-center text-center">
                             <Icon className="size-6" />
                             <div className="text-sm font-bold">{label}</div>
-                            <div className="text-wrap text-xs text-center text-gray-500">
+                            <div className="text-wrap text-center text-xs text-gray-500">
                               {description}
                             </div>
                           </div>
@@ -258,7 +254,7 @@ export default function CreateEncounterForm({
                 name="status"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Status</FormLabel>
+                    <FormLabel>{t("status")}</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -343,7 +339,7 @@ export default function CreateEncounterForm({
             />
 
             <Button type="submit" className="w-full" disabled={isPending}>
-              {isPending ? "Creating..." : t("create_encounter")}
+              {isPending ? t("creating") : t("create_encounter")}
             </Button>
           </form>
         </Form>

src/components/Files/FilesTab.tsx

@@ -57,7 +57,6 @@ import { Patient } from "@/types/emr/newPatient";
 
 export interface FilesTabProps {
   type: "encounter" | "patient";
-  facilityId: string;
   patientId?: string;
   encounter?: Encounter;
   patient?: Patient;
@@ -651,27 +650,29 @@ export const FilesTab = (props: FilesTabProps) => {
         associatingId={associatingId}
       />
       <Tabs defaultValue={subPage}>
-        <TabsList className="grid w-auto grid-cols-2 w-fit">
-          <TabsTrigger value="all" asChild>
-            <Link
-              className="text-gray-600"
-              href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/all`}
-            >
-              {t("all")}
-            </Link>
-          </TabsTrigger>
-          <TabsTrigger value="discharge_summary" asChild>
-            <Link
-              className="text-gray-600"
-              href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/discharge_summary`}
-            >
-              {t("discharge_summary")}
-            </Link>
-          </TabsTrigger>
-        </TabsList>
-        <div className="grid grid-cols-2 xl:grid-cols-4 gap-2 mt-2">
+        {type === "encounter" && (
+          <TabsList className="grid w-auto grid-cols-2 sm:w-fit">
+            <TabsTrigger value="all" asChild>
+              <Link
+                className="text-gray-600"
+                href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/all`}
+              >
+                {t("all")}
+              </Link>
+            </TabsTrigger>
+            <TabsTrigger value="discharge_summary" asChild>
+              <Link
+                className="text-gray-600"
+                href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/discharge_summary`}
+              >
+                {t("discharge_summary")}
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        )}
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2 mt-2">
           <FilterButton />
-          {subPage === "discharge_summary" && (
+          {type === "encounter" && subPage === "discharge_summary" && (
             <>
               <Button
                 variant="outline_primary"
@@ -686,10 +687,6 @@ export const FilesTab = (props: FilesTabProps) => {
                 <CareIcon icon="l-sync" />
                 <span className="ml-2">{t("refresh")}</span>
               </Button>
-            </>
-          )}
-          {subPage === "discharge_summary" && (
-            <>
               <Button
                 variant="primary"
                 className="flex flex-row items-center"

src/components/Patient/PatientDetailsTab/Appointments.tsx

@@ -29,9 +29,10 @@ export const Appointments = (props: PatientProps) => {
   const { data } = useQuery({
     queryKey: ["patient-appointments", patientId],
     queryFn: query(scheduleApis.appointments.list, {
-      pathParams: { facility_id: facilityId },
+      pathParams: { facility_id: facilityId ?? "" },
       queryParams: { patient: patientId, limit: 100 },
     }),
+    enabled: !!facilityId,
   });
 
   const appointments = data?.results;

src/components/Patient/PatientDetailsTab/Demography.tsx

@@ -143,6 +143,7 @@ export const Demography = (props: PatientProps) => {
         <PLUGIN_Component
           key="patient_details_tab__demography__general_info"
           __name="PatientDetailsTabDemographyGeneralInfo"
+          facilityId={facilityId ?? ""}
           {...props}
         />,
         { label: t("full_name"), value: patientData.name },

src/components/Patient/PatientDetailsTab/EncounterHistory.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { Link, useQueryParams } from "raviger";
+import { useQueryParams } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
@@ -10,14 +10,15 @@ import { Button } from "@/components/ui/button";
 
 import PaginationComponent from "@/components/Common/Pagination";
 import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
+import CreateEncounterForm from "@/components/Encounter/CreateEncounterForm";
 import { EncounterCard } from "@/components/Facility/EncounterCard";
 import { PatientProps } from "@/components/Patient/PatientDetailsTab";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 
 const EncounterHistory = (props: PatientProps) => {
-  const { patientId, facilityId } = props;
+  const { patientId, facilityId, patientData } = props;
 
   const { t } = useTranslation();
 
@@ -46,28 +47,59 @@ const EncounterHistory = (props: PatientProps) => {
         ) : (
           <div>
             {encounterData?.results?.length === 0 ? (
-              <div className="p-2">
-                <div className="h-full space-y-2 rounded-lg bg-white px-7 py-12 border border-secondary-300">
-                  <div className="flex w-full items-center justify-center text-lg text-secondary-600">
-                    {t("no_consultation_history")}
+              facilityId ? (
+                <div className="p-2">
+                  <div className="h-full flex w-full items-center justify-center">
+                    <CreateEncounterForm
+                      facilityId={facilityId}
+                      patientId={patientId}
+                      patientName={patientData.name}
+                      trigger={
+                        <Button
+                          variant="outline"
+                          data-cy="create-encounter-button"
+                          className="group relative w-full h-[100px] md:h-[200px] overflow-hidden border-0 p-0 shadow-md hover:shadow-xl transition-all duration-300 justify-center"
+                        >
+                          <div className="p-4 md:p-6 w-full">
+                            <div className="flex w-full items-center gap-3 md:gap-4">
+                              <div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-xl">
+                                <CareIcon
+                                  icon="l-stethoscope"
+                                  className="size-5 md:size-6 text-primary"
+                                />
+                              </div>
+                              <div className="flex flex-col items-start gap-0.5">
+                                <span className="text-base md:text-lg font-semibold text-gray-800 group-hover:text-primary transition-colors line-clamp-1">
+                                  {t("create_encounter")}
+                                </span>
+                                <span className="text-xs md:text-sm text-gray-500 line-clamp-1">
+                                  {t("start_a_new_clinical_encounter")}
+                                </span>
+                              </div>
+                              <CareIcon
+                                icon="l-arrow-right"
+                                className="ml-auto size-4 md:size-5 text-gray-400 transform translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:opacity-100"
+                              />
+                            </div>
+                          </div>
+                        </Button>
+                      }
+                    />
                   </div>
-                  <div className="flex w-full items-center justify-center pt-4">
-                    <Button variant="outline_primary" asChild>
-                      <Link
-                        href={`/facility/${facilityId}/patient/${patientId}/consultation`}
-                      >
-                        <span className="flex w-full items-center justify-start gap-2">
-                          <CareIcon
-                            icon="l-chat-bubble-user"
-                            className="text-xl"
-                          />
-                          {t("add_consultation")}
+                </div>
+              ) : (
+                <div className="p-2">
+                  <div className="h-full space-y-2 rounded-lg bg-white px-7 py-12 border border-secondary-300">
+                    <div className="flex w-full items-center justify-center text-lg text-secondary-600">
+                      <div className="h-full flex w-full items-center justify-center">
+                        <span className="text-sm text-gray-500">
+                          {t("no_encounters_found")}
                         </span>
-                      </Link>
-                    </Button>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              )
             ) : (
               <ul className="grid gap-4">
                 {encounterData?.results?.map((encounter) => (

src/components/Patient/PatientDetailsTab/PatientFiles.tsx

@@ -6,7 +6,6 @@ export const PatientFilesTab = (props: PatientProps) => {
   return (
     <FilesTab
       type="patient"
-      facilityId={props.facilityId}
       patientId={props.patientData.id}
       patient={props.patientData}
     />