fixed merge conflicts

.github/pull_request_template.md

@@ -0,0 +1,16 @@
+## Proposed Changes
+
+- Change 1
+- Change 2
+- More?
+
+@coronasafe/reviewers
+
+## Merge Checklist
+
+- [ ] Add specs that demonstrate bug / test a new feature.
+- [ ] Update [product documentation](https://docs.coronasafe.network/coronasafe-care-documentation/architecture/architecture-and-layering-of-care).
+- [ ] Ensure that UI text is kept in I18n files.
+- [ ] Prep screenshot or demo video for changelog entry, and attach it to issue.
+- [ ] Request for Peer Reviews
+- [ ] Completion of QA

package.json

@@ -79,7 +79,7 @@
     "raviger": "^4.1.0",
     "react": "18.1.0",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-csv": "^2.0.3",
+    "react-csv": "2.1.9",
     "react-csv-reader": "^3.3.1",
     "react-dates": "^21.8.0",
     "react-dom": "18.1.0",

src/Components/Common/Pagination.tsx

@@ -129,16 +129,16 @@ const Pagination = (props: PaginationProps) => {
         <button
           disabled={firstBtnDisable}
           onClick={() => handleChangePage("<")}
-          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:ring-primary focus:border-primary-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:ring-primary focus:border-primary-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 cursor-pointer"
         >
-          Previous
+          {"<"}
         </button>
         <button
           disabled={lastBtnDisable}
           onClick={() => handleChangePage(">")}
-          className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:ring-primary focus:border-primary-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+          className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:ring-primary focus:border-primary-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 cursor-pointer"
         >
-          Next
+          {">"}
         </button>
       </div>
       <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">

src/Components/ExternalResult/ResultItem.tsx

@@ -73,16 +73,16 @@ export default function ResultItem(props: any) {
       )}
 
       <div className="mx-3 md:mx-8 mb-10 mt-4">
-        <div className="flex justify-end">
+        <div className="flex flex-col md:flex-row gap-2 justify-end">
           <button
-            className="btn-primary btn mr-2"
+            className="btn-primary btn mr-2 w-full md:w-auto"
             onClick={() => navigate(`/external_results/${data.id}/update`)}
           >
             <i className="fas fa-pencil-alt text-white mr-2"></i>
             Update Record
           </button>
           <button
-            className="btn btn-danger"
+            className="btn btn-danger w-full md:w-auto"
             onClick={() => setShowDeleteAlert(true)}
           >
             <i className="fas fa-trash text-white mr-2"></i>

src/Components/ExternalResult/ResultList.tsx

@@ -374,7 +374,7 @@ export default function ResultList() {
             </dl>
           </div>
         </div>
-        <div className="md:mt-2">
+        <div className="mt-2">
           <div>
             <div className="text-sm font-semibold mb-2">Search by Name</div>
             <InputSearchBox
@@ -395,14 +395,14 @@ export default function ResultList() {
           </div>
         </div>
         <div className="mt-4 lg:mt-0 ml-auto flex flex-col justify-evenly gap-4">
-          <div className="flex justify-end gap-2">
-            <div
+          <div className="flex flex-col md:flex-row md:justify-end gap-2">
+            <button
               className="btn btn-primary"
               onClick={(_) => navigate("external_results/upload")}
             >
               Upload List
-            </div>
-            <div
+            </button>
+            <button
               className={clsx(
                 "btn btn-primary",
                 downloadLoading && "pointer-events-none"
@@ -417,7 +417,7 @@ export default function ResultList() {
                 )}
                 Export
               </span>
-            </div>
+            </button>
           </div>
           <div className="flex ml-auto gap-2 md:pt-0 pt-2">
             <button

src/Components/ExternalResult/ResultUpdate.tsx

@@ -331,27 +331,26 @@ export default function UpdateResult(props: any) {
               </RadioGroup>
             </div>
           </div>
-          <div className="flex justify-end mt-4">
+          <div className="flex flex-col md:flex-row gap-2 justify-end mt-4">
             <Button
               color="default"
               variant="contained"
               type="button"
+              className="w-full md:w-auto"
               onClick={goBack}
             >
-              {" "}
-              Cancel{" "}
+              Cancel
             </Button>
             <Button
               color="primary"
               variant="contained"
               type="submit"
-              style={{ marginLeft: "10px" }}
               startIcon={<CheckCircleOutlineIcon>save</CheckCircleOutlineIcon>}
               onClick={(e) => handleSubmit(e)}
               data-testid="submit-button"
+              className="w-full md:w-auto"
             >
-              {" "}
-              Submit{" "}
+              Submit
             </Button>
           </div>
         </form>

src/Components/Facility/AddInventoryForm.tsx

@@ -219,7 +219,7 @@ export const AddInventoryForm = (props: any) => {
   return (
     <div className="px-2">
       <PageTitle
-        title="Add Inventory"
+        title="Manage Inventory"
         crumbsReplacements={{ [facilityId]: { name: facilityName } }}
       />
       <div className="mt-4">
@@ -306,7 +306,7 @@ export const AddInventoryForm = (props: any) => {
                   startIcon={<CheckCircleOutlineIcon></CheckCircleOutlineIcon>}
                   onClick={(e) => handleSubmit(e)}
                 >
-                  Add Inventory
+                  Add/Update Inventory
                 </Button>
               </div>
             </CardContent>

src/Components/Facility/BedDeleteDialog.tsx

@@ -34,28 +34,23 @@ const BedDeleteDialog = (
     setDisable(true);
   };
   return (
-    <Dialog
-      open={props.show}
-      classes={{
-        paper: classes.paper,
-      }}
-      onClose={handleCancel}
-    >
+    <Dialog open={props.show} onClose={handleCancel}>
       <DialogContent>
         <DialogContentText
           id="alert-dialog-description"
-          className="flex text-gray-800 leading-relaxed"
+          className="text-gray-800 leading-relaxed"
         >
-          <div className="flex">
-            Are you sure you want to delete bed{" "}
-            <p className="mx-1 font-semibold capitalize">{name}</p> ?
-          </div>
+          <p className="inline">Are you sure you want to delete bed</p>
+          <p className="inline mx-1 font-semibold capitalize break-words">
+            {name}
+          </p>
+          <p className="inline">?</p>
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleCancel} color="primary">
+        <button onClick={handleCancel} className="btn btn-default">
           Cancel
-        </Button>
+        </button>
         <button
           onClick={handleSubmit}
           className="font-medium btn btn-danger"

src/Components/Facility/BedManagement.tsx

@@ -94,7 +94,7 @@ const BedRow = (props: BedRowProps) => {
         </div>
         <p className="break-all">{description}</p>
       </div>
-      <div className="flex">
+      <div className="sm:flex">
         <div className="px-2 py-2 w-full">
           <button
             onClick={() =>

src/Components/Facility/BedTypeCard.tsx

@@ -1,17 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 import { CapacityModal } from "./models";
 import { navigate } from "raviger";
 import { BED_TYPES } from "../../Common/constants";
 import moment from "moment";
 import { RoleButton } from "../Common/RoleButton";
+import { useDispatch } from "react-redux";
+import * as Notification from "../../Utils/Notifications";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@material-ui/core";
+import { deleteCapacity } from "../../Redux/actions";
 
 interface BedTypeProps extends CapacityModal {
   facilityId: number;
+  removeBedType: (bedTypeId: number | undefined) => void;
 }
 
 const BedTypeCard = (props: BedTypeProps) => {
   const bed = BED_TYPES.find((i) => i.id === props.room_type);
   const roomType = bed ? bed.text : "Unknown";
+
+  const dispatchAction: any = useDispatch();
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+  const handleDeleteSubmit = async () => {
+    if (props.room_type) {
+      const res = await dispatchAction(
+        deleteCapacity({
+          facilityId: props.facilityId,
+          bed_id: props.room_type,
+        })
+      );
+      if (res && res.status == 204) {
+        Notification.Success({
+          msg: "Bed type deleted successfully",
+        });
+        props.removeBedType(props.id);
+      }
+    }
+  };
+
+  const handleDeleteClose = () => {
+    setOpenDeleteDialog(false);
+  };
+
   return (
     <div className="px-2 py-2 lg:w-1/5 w-full">
       <div className="flex flex-col items-center shadow rounded-lg p-4 h-full justify-between">
@@ -22,21 +58,58 @@ const BedTypeCard = (props: BedTypeProps) => {
         <div className="font-bold text-xs mt-2 text-center">
           Currently Occupied / Total Capacity
         </div>
-        <RoleButton
-          className="btn btn-default"
-          handleClickCB={() =>
-            navigate(`/facility/${props.facilityId}/bed/${props.room_type}`)
-          }
-          disableFor="readOnly"
-          buttonType="html"
-        >
-          Edit
-        </RoleButton>
+        <div className="flex justify-evenly w-full gap-2 mt-2 pt-2 border border-t-gray-300">
+          <RoleButton
+            className="btn btn-default w-1/2"
+            handleClickCB={() =>
+              navigate(`/facility/${props.facilityId}/bed/${props.room_type}`)
+            }
+            disableFor="readOnly"
+            buttonType="html"
+          >
+            Edit
+          </RoleButton>
+          <RoleButton
+            className="btn btn-danger w-1/2"
+            handleClickCB={() => setOpenDeleteDialog(true)}
+            disableFor="readOnly"
+            buttonType="html"
+          >
+            Delete
+          </RoleButton>
+        </div>
         <div className="text-xs text-gray-600 mt-2">
           <i className="fas fa-history text-sm pr-2"></i>
           {props.modified_date && moment(props.modified_date).fromNow()}
         </div>
       </div>
+
+      <Dialog
+        maxWidth={"md"}
+        open={openDeleteDialog}
+        onClose={handleDeleteClose}
+      >
+        <DialogTitle className="flex justify-center bg-primary-100">
+          Are you sure you want to delete {roomType} type?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            You will not be able to access this bed type later.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <button onClick={handleDeleteClose} className="btn btn-primary">
+            Cancel
+          </button>
+          <button
+            onClick={handleDeleteSubmit}
+            id="facility-delete-confirm"
+            className="btn btn-danger"
+          >
+            Delete
+          </button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

src/Components/Facility/ConsultationCard.tsx

@@ -14,7 +14,7 @@ interface ConsultationProps {
 export const ConsultationCard = (props: ConsultationProps) => {
   const { itemData, isLastConsultation } = props;
   return (
-    <div className="block border rounded-lg bg-white shadow h-full cursor-pointer hover:border-primary-500 text-black mt-4">
+    <div className="block border rounded-lg bg-white shadow cursor-pointer hover:border-primary-500 text-black mt-4">
       {itemData.is_kasp && (
         <div className="ml-3 mt-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium leading-5 bg-yellow-100 text-yellow-800">
           {KASP_STRING}