Enhancement of Shift patient Tab

cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts

@@ -367,6 +367,8 @@ describe("Patient Consultation in multiple combination", () => {
     cy.clickSubmitButton("Create Consultation");
     // Create a shifting request
     cy.closeNotification();
+    // cy.clickSubmitButton("Shift Patient");
+    cy.get("#shift_create_button").click();
     shiftCreation.typeCurrentFacilityPerson("Current Facility Person");
     shiftCreation.typeCurrentFacilityPhone("9999999999");
     shiftCreation.typeShiftReason("reason for shift");

public/locale/en.json

@@ -573,6 +573,7 @@
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
   "current_password": "Current Password",
+  "current_shifting": "Current Shifting",
   "customer_support_email": "Customer Support Email",
   "customer_support_name": "Customer Support Name",
   "customer_support_number": "Customer support number",
@@ -1193,6 +1194,7 @@
   "preset_name_placeholder": "Specify an identifiable name for the new preset",
   "preset_updated": "Preset updated",
   "prev_sessions": "Prev Sessions",
+  "previous_shifting": "Previous Shifting",
   "principal": "Principal",
   "principal_diagnosis": "Principal diagnosis",
   "print": "Print",

src/Routers/routes/PatientRoutes.tsx

@@ -7,6 +7,7 @@ import { patientTabs } from "@/components/Patient/PatientDetailsTab";
 import { PatientHome } from "@/components/Patient/PatientHome";
 import PatientNotes from "@/components/Patient/PatientNotes";
 import { PatientRegister } from "@/components/Patient/PatientRegister";
+import ShiftDetails from "@/components/Shifting/ShiftDetails";
 
 import { AppRoutes } from "@/Routers/AppRouter";
 
@@ -39,6 +40,9 @@ const PatientRoutes: AppRoutes = {
     facilityId,
     patientId,
   }) => <PatientNotes patientId={patientId} facilityId={facilityId} />,
+  "/facility/:facilityId/patient/:patientId/shift/:shiftId": ({ shiftId }) => (
+    <ShiftDetails id={shiftId} />
+  ),
   "/facility/:facilityId/patient/:patientId/files": ({
     facilityId,
     patientId,

src/Routers/routes/ShiftingRoutes.tsx

@@ -1,6 +1,6 @@
 import { Redirect } from "raviger";
 
-import { ShiftCreate } from "@/components/Patient/ShiftCreate";
+// import { ShiftCreate } from "@/components/Patient/ShiftCreate";
 import ShiftDetails from "@/components/Shifting/ShiftDetails";
 import { ShiftDetailsUpdate } from "@/components/Shifting/ShiftDetailsUpdate";
 import BoardView from "@/components/Shifting/ShiftingBoard";
@@ -17,10 +17,16 @@ const ShiftingRoutes: AppRoutes = {
   "/shifting/list": () => <ListView />,
   "/shifting/:id": ({ id }) => <ShiftDetails id={id} />,
   "/shifting/:id/update": ({ id }) => <ShiftDetailsUpdate id={id} />,
-  "/facility/:facilityId/patient/:patientId/shift/new": ({
-    facilityId,
-    patientId,
-  }) => <ShiftCreate facilityId={facilityId} patientId={patientId} />,
+  // "/facility/:facilityId/patient/:patientId/shift/new": ({
+  //   facilityId,
+  //   patientId,
+  // }) => (
+  //   <ShiftCreate
+  //     facilityId={facilityId}
+  //     patientId={patientId}
+  //     shrinked={false}
+  //   />
+  // ),
 };
 
 export default ShiftingRoutes;

src/components/Facility/ConsultationForm.tsx

@@ -770,7 +770,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         );
 
         if (data.suggestion === "R") {
-          navigate(`/facility/${facilityId}/patient/${patientId}/shift/new`);
+          navigate(`/facility/${facilityId}/patient/${patientId}/shift/`);
           return;
         } else if (!id && data.suggestion === "A") {
           navigate(

src/components/Patient/PatientDetailsTab/ShiftingHistory.tsx

@@ -1,4 +1,4 @@
-import { navigate } from "raviger";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -14,11 +14,14 @@ import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 
 import { PatientProps } from ".";
+import { ShiftCreate } from "../ShiftCreate";
 import { PatientModel } from "../models";
 
 const ShiftingHistory = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;
   const { t } = useTranslation();
+  const [isSlideOverOpen, setIsSlideOverOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("current");
   const { qParams, Pagination, resultsPerPage } = useFilters({
     cacheBlacklist: ["patient_name"],
   });
@@ -44,31 +47,72 @@ const ShiftingHistory = (props: PatientProps) => {
     },
   );
 
+  const CURRENT_STATUSES = [
+    "APPROVED",
+    "DESTINATION APPROVED",
+    "PATIENT TO BE PICKED UP",
+    "TRANSFER IN PROGRESS",
+  ];
+  const PREVIOUS_STATUSES = ["COMPLETED", "PATIENT EXPIRED", "CANCELLED"];
+
+  const filteredShiftData =
+    activeTab === "current"
+      ? shiftData?.results.filter((shift) =>
+          CURRENT_STATUSES.includes(shift.status),
+        )
+      : shiftData?.results.filter((shift) =>
+          PREVIOUS_STATUSES.includes(shift.status),
+        );
+
   return (
     <section className="mt-4">
       <div className="flex justify-between items-center">
-        <h2 className="my-4 ml-0 text-2xl font-semibold leading-tight">
-          {t("shifting_history")}
-        </h2>
+        <div className="flex mb-4 bg-gray-100 w-fit rounded-lg px-2 py-1">
+          <button
+            className={`px-4 py-2 ${
+              activeTab === "current"
+                ? "bg-white rounded-lg font-bold shadow"
+                : ""
+            }`}
+            onClick={() => setActiveTab("current")}
+          >
+            {t("current_shifting")}
+          </button>
+          <button
+            className={`px-4 py-2 ${
+              activeTab === "previous"
+                ? "bg-white rounded-lg font-bold shadow"
+                : ""
+            }`}
+            onClick={() => setActiveTab("previous")}
+          >
+            {t("previous_shifting")}
+          </button>
+        </div>
         <ButtonV2
-          className=""
+          id="shift_create_button"
           disabled={isPatientInactive(patientData, facilityId)}
           size="default"
-          onClick={() =>
-            navigate(`/facility/${facilityId}/patient/${id}/shift/new`)
-          }
+          onClick={() => setIsSlideOverOpen(true)}
           authorizeFor={NonReadOnlyUsers}
         >
           <span className="flex w-full items-center justify-start gap-2">
             <CareIcon icon="l-ambulance" className="text-xl" />
             {t("shift")}
           </span>
         </ButtonV2>
+        <ShiftCreate
+          facilityId={facilityId}
+          patientId={id}
+          open={isSlideOverOpen}
+          setOpen={setIsSlideOverOpen}
+        />
       </div>
-      <ShiftingTable hidePatient data={shiftData?.results} loading={loading} />
+
+      <ShiftingTable hidePatient data={filteredShiftData} loading={loading} />
       <div>
-        <Pagination totalCount={shiftData?.count || 0} />
-      </div>{" "}
+        <Pagination totalCount={filteredShiftData?.length || 0} />
+      </div>
     </section>
   );
 };

src/components/Patient/ShiftCreate.tsx

@@ -4,11 +4,13 @@ import { useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Card from "@/CAREUI/display/Card";
+// import Card from "@/CAREUI/display/Card";
+import SlideOver from "@/CAREUI/interactive/SlideOver";
 
 import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
+// import Page from "@/components/Common/Page";
 import { PhoneNumberValidator } from "@/components/Form/FieldValidators";
 import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
 import { FieldLabel } from "@/components/Form/FormFields/FormField";
@@ -38,11 +40,13 @@ import { parsePhoneNumber } from "@/Utils/utils";
 interface patientShiftProps {
   facilityId: string;
   patientId: string;
+  open: boolean;
+  setOpen: (state: boolean) => void;
 }
 
 export const ShiftCreate = (props: patientShiftProps) => {
   const { goBack } = useAppHistory();
-  const { facilityId, patientId } = props;
+  const { patientId } = props;
   const [isLoading, setIsLoading] = useState(false);
   const [patientCategory, setPatientCategory] = useState<any>();
   const { t } = useTranslation();
@@ -108,7 +112,7 @@ export const ShiftCreate = (props: patientShiftProps) => {
     errors: { ...initError },
   };
 
-  const { data: patientData } = useTanStackQueryInstead(routes.getPatient, {
+  const { data: _patientData } = useTanStackQueryInstead(routes.getPatient, {
     pathParams: {
       id: patientId,
     },
@@ -261,15 +265,14 @@ export const ShiftCreate = (props: patientShiftProps) => {
   });
 
   return (
-    <Page
-      title={"Create Shift Request"}
-      crumbsReplacements={{
-        [facilityId]: { name: patientData?.facility_object?.name || "" },
-        [patientId]: { name: patientData?.name || "" },
-      }}
-      backUrl={`/facility/${facilityId}/patient/${patientId}`}
+    <SlideOver
+      open={props.open}
+      setOpen={props.setOpen}
+      title="Create Shift Request"
+      slideFrom="right"
+      dialogClass="md:w-[650px]"
     >
-      <Card className="mx-auto mt-4 flex w-full max-w-3xl flex-col px-8 py-5 md:px-16 md:py-11">
+      <Card className="mx-auto mt-4 flex  flex-col ">
         <TextFormField
           {...field("refering_facility_contact_name")}
           label="Name of Contact person at the current facility"
@@ -397,6 +400,6 @@ export const ShiftCreate = (props: patientShiftProps) => {
           <Submit onClick={handleSubmit} />
         </div>
       </Card>
-    </Page>
+    </SlideOver>
   );
 };