Removed Oxygen Details from Update Facility form

src/Common/constants.tsx

@@ -225,6 +225,13 @@ export const getBedTypes = ({
  ];
 };
 
+export const OXYGEN_TYPES: Array<OptionsType> = [
+ { id: 1, text: "Liquid Oxygen" },
+ { id: 2, text: "Type B Cylinders" },
+ { id: 3, text: "Type C Cylinders" },
+ { id: 4, text: "Type D Cylinders" },
+];
+
 export const DOCTOR_SPECIALIZATION: Array<OptionsType> = [
  { id: 1, text: "General Medicine", desc: "bg-doctors-general" },
  { id: 2, text: "Pulmonology", desc: "bg-doctors-pulmonology" },

src/Components/Facility/FacilityCreate.tsx

@@ -463,32 +463,6 @@ export const FacilityCreate = (props: FacilityProps) => {
  latitude: state.form.latitude,
  longitude: state.form.longitude,
  phone_number: parsePhoneNumber(state.form.phone_number),
- oxygen_capacity: state.form.oxygen_capacity
- ? state.form.oxygen_capacity
- : 0,
- type_b_cylinders: state.form.type_b_cylinders
- ? state.form.type_b_cylinders
- : 0,
- type_c_cylinders: state.form.type_c_cylinders
- ? state.form.type_c_cylinders
- : 0,
- type_d_cylinders: state.form.type_d_cylinders
- ? state.form.type_d_cylinders
- : 0,
- expected_oxygen_requirement: state.form.expected_oxygen_requirement
- ? state.form.expected_oxygen_requirement
- : 0,
- expected_type_b_cylinders: state.form.expected_type_b_cylinders
- ? state.form.expected_type_b_cylinders
- : 0,
-
- expected_type_c_cylinders: state.form.expected_type_c_cylinders
- ? state.form.expected_type_c_cylinders
- : 0,
-
- expected_type_d_cylinders: state.form.expected_type_d_cylinders
- ? state.form.expected_type_d_cylinders
- : 0,
  };
 
  const { res, data: requestData } = facilityId
@@ -844,79 +818,6 @@ export const FacilityCreate = (props: FacilityProps) => {
  required
  types={["mobile", "landline"]}
  />
- <div className="grid grid-cols-1 gap-4 py-4 sm:grid-cols-2 md:col-span-2 xl:grid-cols-4">
- <TextFormField
- {...field("oxygen_capacity")}
- type="number"
- placeholder="0"
- label={t("liquid_oxygen_capacity")}
- trailingPadding=" "
- trailing={<FieldUnit unit={t("litres")} />}
- min={0}
- />
- <TextFormField
- {...field("expected_oxygen_requirement")}
- type="number"
- placeholder="0"
- trailingPadding=" "
- trailing={<FieldUnit unit={t("litres_per_day")} />}
- label={t("expected_burn_rate")}
- min={0}
- />
-
- <TextFormField
- {...field("type_b_cylinders")}
- type="number"
- placeholder="0"
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders")} />}
- min={0}
- />
- <TextFormField
- {...field("expected_type_b_cylinders")}
- type="number"
- placeholder="0"
- label={t("expected_burn_rate")}
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders_per_day")} />}
- min={0}
- />
- <TextFormField
- {...field("type_c_cylinders")}
- type="number"
- placeholder="0"
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders")} />}
- min={0}
- />
- <TextFormField
- {...field("expected_type_c_cylinders")}
- type="number"
- placeholder="0"
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders_per_day")} />}
- label={t("expected_burn_rate")}
- min={0}
- />
- <TextFormField
- {...field("type_d_cylinders")}
- type="number"
- placeholder="0"
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders")} />}
- min={0}
- />
- <TextFormField
- {...field("expected_type_d_cylinders")}
- type="number"
- placeholder="0"
- label={t("expected_burn_rate")}
- trailingPadding=" "
- trailing={<FieldUnit unit={t("cylinders_per_day")} />}
- min={0}
- />
- </div>
-
  {kasp_enabled && (
  <RadioFormField
  {...field("kasp_empanelled")}
@@ -999,7 +900,3 @@ export const FacilityCreate = (props: FacilityProps) => {
  );
  }
 };
-
-const FieldUnit = ({ unit }: { unit: string }) => {
- return <p className="mr-8 text-xs text-gray-700">{unit}</p>;
-};

src/Components/Facility/FacilityHome.tsx

@@ -15,7 +15,6 @@ import CoverImageEditModal from "./CoverImageEditModal";
 
 import Page from "../Common/components/Page";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import Table from "../Common/components/Table";
 
 import { navigate } from "raviger";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
@@ -27,6 +26,7 @@ import useQuery from "../../Utils/request/useQuery.js";
 import { FacilityHomeTriage } from "./FacilityHomeTriage.js";
 import { FacilityDoctorList } from "./FacilityDoctorList.js";
 import { FacilityBedCapacity } from "./FacilityBedCapacity.js";
+import { FacilityOxygenInformation } from "./FacilityOxygenInformation.js";
 import useSlug from "../../Common/hooks/useSlug.js";
 import { Popover, Transition } from "@headlessui/react";
 import { FieldLabel } from "../Form/FormFields/FormField.js";
@@ -52,7 +52,7 @@ export const FacilityHome = (props: any) => {
  const [editCoverImage, setEditCoverImage] = useState(false);
  const [imageKey, setImageKey] = useState(Date.now());
  const authUser = useAuthUser();
-
+ console.log("hell", props);
  useMessageListener((data) => console.log(data));
 
  const {
@@ -69,7 +69,6 @@ export const FacilityHome = (props: any) => {
  }
  },
  });
-
  const handleDeleteClose = () => {
  setOpenDeleteDialog(false);
  };
@@ -455,40 +454,11 @@ export const FacilityHome = (props: any) => {
  </div>
  <FacilityBedCapacity facilityId={facilityId} />
  <FacilityDoctorList facilityId={facilityId} />
-
- <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
- <h1 className="mb-6 text-xl font-bold">Oxygen Information</h1>
- <div
- className="overflow-x-auto overflow-y-hidden"
- id="facility-oxygen-info"
- >
- <Table
- headings={[
- "",
- "Oxygen capacity",
- "Type B cylinder",
- "Type C cylinder",
- "Type D cylinder",
- ]}
- rows={[
- [
- "Capacity",
- String(facilityData?.oxygen_capacity),
- String(facilityData?.type_b_cylinders),
- String(facilityData?.type_c_cylinders),
- String(facilityData?.type_d_cylinders),
- ],
- [
- "Daily Expected Consumption",
- String(facilityData?.expected_oxygen_requirement),
- String(facilityData?.expected_type_b_cylinders),
- String(facilityData?.expected_type_c_cylinders),
- String(facilityData?.expected_type_d_cylinders),
- ],
- ]}
- />
- </div>
- </div>
+ <FacilityOxygenInformation
+ facilityId={facilityId}
+ facilityData={facilityData}
+ facilityFetch={facilityFetch}
+ />
 
  <FacilityHomeTriage
  facilityId={facilityId}

src/Components/Facility/FacilityOxygenInformation.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { OXYGEN_TYPES } from "../../Common/constants";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import DialogModal from "../Common/Dialog";
+import ButtonV2 from "../Common/components/ButtonV2";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { OxygenDetails } from "./OxygenDetails";
+import { OxygenTypeCard } from "./OxygenTypeCard";
+
+export const FacilityOxygenInformation = ({
+ facilityId,
+ facilityData,
+ facilityFetch,
+}: any) => {
+ const [oxygenDetailsModalOpen, setOxygenDetailsModalOpen] = useState(false);
+
+ let capacityList: any = null;
+ const totalOxygen =
+ facilityData?.oxygen_capacity +
+ facilityData?.type_b_cylinders +
+ facilityData?.type_c_cylinders +
+ facilityData?.type_d_cylinders;
+
+ if (totalOxygen === 0) {
+ capacityList = (
+ <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+ No Oxygen Types Found
+ </h5>
+ );
+ } else {
+ const totalCapacity = totalOxygen;
+ const totalExpectedCapacity =
+ facilityData?.expected_oxygen_requirement +
+ facilityData?.expected_type_b_cylinders +
+ facilityData?.expected_type_c_cylinders +
+ facilityData?.expected_type_d_cylinders;
+
+ capacityList = (
+ <div className="mt-4 grid w-full gap-7 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+ <OxygenTypeCard
+ label="Total Oxygen"
+ used={totalExpectedCapacity}
+ total={totalCapacity}
+ handleUpdate={() => {
+ return;
+ }}
+ />
+ {facilityData?.oxygen_capacity !== 0 && (
+ <OxygenTypeCard
+ facilityId={facilityId}
+ oxygen_type={Number(OXYGEN_TYPES[0].id)}
+ label={OXYGEN_TYPES[0].text}
+ used={facilityData?.expected_oxygen_requirement}
+ total={facilityData?.oxygen_capacity}
+ handleUpdate={() => {
+ facilityFetch();
+ }}
+ facilityData={facilityData}
+ />
+ )}
+ {facilityData?.type_b_cylinders !== 0 && (
+ <OxygenTypeCard
+ facilityId={facilityId}
+ oxygen_type={Number(OXYGEN_TYPES[1].id)}
+ label={OXYGEN_TYPES[1].text}
+ used={facilityData?.expected_type_b_cylinders}
+ total={facilityData?.type_b_cylinders}
+ handleUpdate={() => {
+ facilityFetch();
+ }}
+ facilityData={facilityData}
+ />
+ )}
+ {facilityData?.type_c_cylinders !== 0 && (
+ <OxygenTypeCard
+ facilityId={facilityId}
+ oxygen_type={Number(OXYGEN_TYPES[2].id)}
+ label={OXYGEN_TYPES[2].text}
+ used={facilityData?.expected_type_c_cylinders}
+ total={facilityData?.type_c_cylinders}
+ handleUpdate={() => {
+ facilityFetch();
+ }}
+ facilityData={facilityData}
+ />
+ )}
+
+ {facilityData?.type_d_cylinders !== 0 && (
+ <OxygenTypeCard
+ facilityId={facilityId}
+ oxygen_type={Number(OXYGEN_TYPES[3].id)}
+ label={OXYGEN_TYPES[3].text}
+ used={facilityData?.expected_type_d_cylinders}
+ total={facilityData?.type_d_cylinders}
+ handleUpdate={() => {
+ facilityFetch();
+ }}
+ facilityData={facilityData}
+ />
+ )}
+ </div>
+ );
+ }
+
+ return (
+ <section id="facility-oxygen-information">
+ <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
+ <div className="justify-between md:flex md:pb-2">
+ <div className="mb-2 text-xl font-semibold">
+ Oxygen Supply and Consumption{" "}
+ </div>
+ <ButtonV2
+ id="facility-add-oxygen"
+ className="w-full md:w-auto"
+ onClick={() => setOxygenDetailsModalOpen(true)}
+ authorizeFor={NonReadOnlyUsers}
+ >
+ <CareIcon
+ icon="l-book-medical"
+ className="mr-2 text-lg text-white"
+ />
+ Add Oxygen Details
+ </ButtonV2>
+ </div>
+ <div>{capacityList}</div>
+ </div>
+
+ {oxygenDetailsModalOpen && (
+ <DialogModal
+ show={oxygenDetailsModalOpen}
+ onClose={() => setOxygenDetailsModalOpen(false)}
+ title="Add Oxygen Details"
+ className="max-w-md md:min-w-[600px]"
+ >
+ <OxygenDetails
+ facilityId={facilityId}
+ facilityData={facilityData}
+ handleClose={() => setOxygenDetailsModalOpen(false)}
+ handleUpdate={() => {
+ facilityFetch();
+ return;
+ }}
+ />
+ </DialogModal>
+ )}
+ </section>
+ );
+};