Enhancement of Shift patient Tab

cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts

@@ -368,6 +368,11 @@ 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", { timeout: 10000 })
+      .should("be.visible")
+      .click();
+
     shiftCreation.typeCurrentFacilityPerson("Current Facility Person");
     shiftCreation.typeCurrentFacilityPhone("9999999999");
     shiftCreation.typeShiftReason("reason for shift");

public/locale/en.json

@@ -320,6 +320,7 @@
   "allow_transfer": "Allow Transfer",
   "allowed_formats_are": "Allowed formats are",
   "already_a_member": "Already a member?",
+  "ambulance_details": "Ambulance Details",
   "ambulance_driver_name": "Name of ambulance driver",
   "ambulance_number": "Ambulance No",
   "ambulance_phone_number": "Phone number of Ambulance",
@@ -575,6 +576,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",
@@ -773,6 +775,7 @@
   "forget_password": "Forgot password?",
   "forget_password_instruction": "Enter your username, and if it exists, we will send you a link to reset your password.",
   "frequency": "Frequency",
+  "from": "From",
   "from_user": "from User",
   "full_name": "Full Name",
   "full_screen": "Full Screen",
@@ -1005,6 +1008,7 @@
   "no_beds_available": "No beds available",
   "no_changes": "No changes",
   "no_changes_made": "No changes made",
+  "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",
@@ -1196,6 +1200,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",
@@ -1413,6 +1418,7 @@
   "third_party_software_licenses": "Third Party Software Licenses",
   "title_of_request": "Title of Request",
   "titrate_dosage": "Titrate Dosage",
+  "to": "To",
   "to_be_conducted": "To be conducted",
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",

src/CAREUI/interactive/SlideOver.tsx

@@ -98,15 +98,15 @@ export default function SlideOver({
             className={classNames(
               "pointer-events-auto fixed",
               directionClasses[slideFrom].stick,
-              !onlyChild && "md:p-2",
+              !onlyChild && "md:p-2 ",
             )}
           >
             {onlyChild ? (
               children
             ) : (
               <div
                 className={classNames(
-                  "flex flex-col bg-white md:rounded-xl",
+                  "flex flex-col bg-secondary-100 md:rounded-xl",
                   directionClasses[slideFrom].proportions,
                   dialogClass,
                 )}
@@ -127,7 +127,7 @@ export default function SlideOver({
                   </div>
                 </div>
                 <div
-                  className="flex-1 overflow-auto p-4"
+                  className="flex-1 overflow-auto p-4 bg-secondary-100"
                   data-test-id="slide-over-container"
                 >
                   {children}

src/CAREUI/misc/PrintPreview.tsx

@@ -29,7 +29,7 @@ export default function PrintPreview(props: Props) {
 
   return (
     <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
+      <div className="mx-auto my-8 max-w-[50rem]">
         <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
           <Button variant="primary" disabled={props.disabled} onClick={print}>
             <CareIcon icon="l-print" className="text-lg" />

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/shifting/:shiftId": ({
+    shiftId,
+  }) => <ShiftDetails id={shiftId} />,
   "/facility/:facilityId/patient/:patientId/files": ({
     facilityId,
     patientId,

src/Routers/routes/ShiftingRoutes.tsx

@@ -1,8 +1,7 @@
 import { Redirect } from "raviger";
 
-import { ShiftCreate } from "@/components/Patient/ShiftCreate";
+import { ReferralLetter } from "@/components/Shifting/ReferralLetter";
 import ShiftDetails from "@/components/Shifting/ShiftDetails";
-import { ShiftDetailsUpdate } from "@/components/Shifting/ShiftDetailsUpdate";
 import BoardView from "@/components/Shifting/ShiftingBoard";
 import ListView from "@/components/Shifting/ShiftingList";
 
@@ -16,11 +15,7 @@ const ShiftingRoutes: AppRoutes = {
   "/shifting/board": () => <BoardView />,
   "/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} />,
+  "/shifting/:id/referral-letter": ({ id }) => <ReferralLetter id={id} />,
 };
 
 export default ShiftingRoutes;

src/components/Common/AuthorizedButton.tsx

@@ -1,7 +1,9 @@
-import { Button, ButtonProps } from "@headlessui/react";
+import * as React from "react";
 
 import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
+import { Button, ButtonProps } from "@/components/ui/button";
+
 import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
 
 export const AuthorizedButton: React.FC<

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}/shifting/`);
           return;
         } else if (!id && data.suggestion === "A") {
           navigate(

src/components/Form/FormFields/PhoneNumberFormField.tsx

@@ -126,7 +126,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
               return (
                 <>
                   <PopoverButton className="absolute h-full">
-                    <div className="hover:border-1 absolute inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-gray-50">
+                    <div className="hover:border-1 absolute border-l rounded bg-secondary-200 border-y inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-secondary-300">
                       <span className="rounded-md pl-2">{country?.flag}</span>
                       <CareIcon
                         icon="l-angle-down"

src/components/Patient/PatientDetailsTab/ShiftingHistory.tsx

@@ -1,10 +1,11 @@
-import { navigate } from "raviger";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { AuthorizedButton } from "@/components/Common/AuthorizedButton";
 import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { ShiftCreate } from "@/components/Patient/ShiftCreate";
 import { PatientModel } from "@/components/Patient/models";
 import { formatFilter } from "@/components/Resource/ResourceCommons";
 import ShiftingTable from "@/components/Shifting/ShiftingTable";
@@ -18,6 +19,8 @@ import useTanStackQueryInstead from "@/Utils/request/useQuery";
 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"],
   });
@@ -43,31 +46,73 @@ 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 = shiftData?.results
+    ? 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>
-        <ButtonV2
-          className=""
+        <div className="flex mb-4 bg-gray-100 text-sm w-fit rounded-lg px-1 py-1">
+          <button
+            className={`px-3 py-2 ${
+              activeTab === "current"
+                ? "bg-white rounded-lg font-semibold shadow"
+                : ""
+            }`}
+            onClick={() => setActiveTab("current")}
+          >
+            {t("current_shifting")}
+          </button>
+          <button
+            className={`px-3 py-2 ${
+              activeTab === "previous"
+                ? "bg-white rounded-lg font-semibold shadow"
+                : ""
+            }`}
+            onClick={() => setActiveTab("previous")}
+          >
+            {t("previous_shifting")}
+          </button>
+        </div>
+        <AuthorizedButton
+          id="shift_create_button"
+          variant="outline_primary"
           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>
+        </AuthorizedButton>
+        <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/PatientDetailsTab/index.tsx

@@ -31,7 +31,7 @@ export const patientTabs = [
     component: ImmunisationRecords,
   },
   {
-    route: "shift",
+    route: "shifting",
     component: ShiftingHistory,
   },
   {