From 01dc31654868b5981a976190adc609cea464f006 Mon Sep 17 00:00:00 2001
From: Bodhisha Thomas <bodhisha@gmail.com>
Date: Fri, 12 Jun 2020 10:25:12 +0530
Subject: [PATCH] add inventory form

---
 src/Components/Facility/AddInventoryForm.tsx  | 146 ++++++++++++++++++
 src/Components/Facility/FacilityHome.tsx      |  11 ++
 .../{Inventory => Facility}/InventoryList.tsx |  38 +++--
 src/Components/Facility/TriageForm.tsx        |   5 +-
 src/Router/AppRouter.tsx                      |  16 +-
 5 files changed, 188 insertions(+), 28 deletions(-)
 create mode 100644 src/Components/Facility/AddInventoryForm.tsx
 rename src/Components/{Inventory => Facility}/InventoryList.tsx (84%)

diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx
new file mode 100644
index 00000000000..d588d31aba5
--- /dev/null
+++ b/src/Components/Facility/AddInventoryForm.tsx
@@ -0,0 +1,146 @@
+import { Button, Card, CardContent, InputLabel } from "@material-ui/core";
+import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
+import moment from 'moment';
+import React, { useCallback, useReducer, useState } from "react";
+import { useDispatch } from "react-redux";
+import { statusType, useAbortableEffect } from "../../Common/utils";
+import { createTriageForm, getTriageDetails } from "../../Redux/actions";
+import * as Notification from "../../Utils/Notifications.js";
+import { DateInputField, TextInputField } from "../Common/HelperInputFields";
+import { Loading } from "../Common/Loading";
+import PageTitle from "../Common/PageTitle";
+import { PatientStatsModel } from "./models";
+
+
+const initForm: any = {
+  inventory_name: "",
+  inventory_description: "",
+  inventory_stock: "",
+  inventory_min_stock: "",
+};
+
+const initialState = {
+  form: { ...initForm },
+  errors: { ...initForm }
+};
+
+const triageFormReducer = (state = initialState, action: any) => {
+  switch (action.type) {
+    case "set_form": {
+      return {
+        ...state,
+        form: action.form
+      };
+    }
+    case "set_error": {
+      return {
+        ...state,
+        errors: action.errors
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+const goBack = () => {
+  window.history.go(-1);
+};
+
+export const AddInventoryForm = () => {
+  const dispatchAction: any = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+
+
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+  };
+
+  const handleChange = (e: any) => {
+ //handlechange
+};
+
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (<div>
+    <PageTitle title="Add Inventory" />
+    <div className="mt-4">
+      <Card>
+        <form onSubmit={e => handleSubmit(e)}>
+          <CardContent>
+            <div className="mt-2 grid gap-4 grid-cols-1 md:grid-cols-2">
+              <div>
+                <InputLabel id="inventory_name_label">Inventory Name</InputLabel>
+                <TextInputField
+                    name="inventory_name"
+                    variant="outlined"
+                    margin="dense"
+                    type="number"
+                    value=""
+                    onChange={handleChange}
+                    errors=""
+                />
+              </div>
+              <div>
+                <InputLabel id="inventory_description_label">Inventory Description</InputLabel>
+                <TextInputField
+                  name="inventory_description"
+                  variant="outlined"
+                  margin="dense"
+                  type="number"
+                  value=""
+                  onChange={handleChange}
+                  errors=""
+                />
+              </div>
+              <div>
+                <InputLabel id="available_stock_label">Available Stock</InputLabel>
+                <TextInputField
+                  name="available_stock"
+                  variant="outlined"
+                  margin="dense"
+                  type="number"
+                  value=""
+                  onChange={handleChange}
+                  errors=""
+                />
+              </div>
+              <div>
+                <InputLabel id="min_stock_label">Minimum Stock Required</InputLabel>
+                <TextInputField
+                  name="min_stock"
+                  variant="outlined"
+                  margin="dense"
+                  type="number"
+                  value=""
+                  onChange={handleChange}
+                  errors=""
+                />
+              </div>
+            </div>
+            <div className="flex justify-between mt-4">
+              <Button
+                color="default"
+                variant="contained"
+                type="button"
+                onClick={goBack}
+              >Cancel</Button>
+              <Button
+                color="primary"
+                variant="contained"
+                type="submit"
+                style={{ marginLeft: "auto" }}
+                startIcon={<CheckCircleOutlineIcon></CheckCircleOutlineIcon>}
+                onClick={e => handleSubmit(e)}
+              >Add Inventory</Button>
+            </div>
+          </CardContent>
+        </form>
+      </Card>
+    </div>
+  </div>);
+};
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index ba8d3c40f6a..feb718015c5 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -203,6 +203,17 @@ export const FacilityHome = (props: any) => {
                     Add Triage
                   </Button>
                 </Grid>
+                <Grid item xs={12} className="w3-center">
+                  <Button
+                    fullWidth
+                    variant="contained"
+                    color="primary"
+                    size="small"
+                    onClick={() => navigate(`/facility/${facilityId}/inventory`)}
+                  >
+                    Inventory Management
+                  </Button>
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
diff --git a/src/Components/Inventory/InventoryList.tsx b/src/Components/Facility/InventoryList.tsx
similarity index 84%
rename from src/Components/Inventory/InventoryList.tsx
rename to src/Components/Facility/InventoryList.tsx
index fc72812b76e..d8d4ea17187 100644
--- a/src/Components/Inventory/InventoryList.tsx
+++ b/src/Components/Facility/InventoryList.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import PageTitle from '../Common/PageTitle'
-import AddInventory from './AddInventory';
+import { Button } from "@material-ui/core";
+import { navigate } from "hookrouter";
+
 
 export default function InventoryList() {
 
@@ -16,8 +18,7 @@ export default function InventoryList() {
         {id: "21", name: "jai", description: "Hey", stock: "100", minStock :"20"},
         {id: "3", name: "will", description: "Hey", stock: "100", minStock :"20"},
         {id: "4", name: "sss", description: "Hey", stock: "100", minStock :"20"},
-        {id: "5", name: "bodhi", description: "Hey", stock: "100", minStock :"20"},
-        {id: "6", name: "bodhi", description: "Hey", stock: "100", minStock :"20"},
+   
     ]
     
     return (
@@ -25,6 +26,17 @@ export default function InventoryList() {
         <PageTitle title="Inventory" hideBack={true} />
         <div className="container mx-auto px-4 sm:px-8">
             <div className="py-8">
+
+            <Button
+                    variant="contained"
+                    color="primary"
+                    size="small"
+                    // onClick={() => navigate(`/facility/${facilityId}/inventory/add`)}
+                    onClick={() => navigate(`/facility/inventory/add`)}
+
+                  >
+                    Add Inventory
+                  </Button>
                 <div className="my-2 flex sm:flex-row flex-col">
                     <div className="flex flex-row mb-1 sm:mb-0">
                         <div className="relative">
@@ -74,19 +86,19 @@ export default function InventoryList() {
                             <thead>
                                 <tr>
                                     <th
-                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-400 text-left text-xs font-semibold text-white uppercase tracking-wider">
                                         Name
                                     </th>
                                     <th
-                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-400 text-left text-xs font-semibold text-white uppercase tracking-wider">
                                         Description
                                     </th>
                                     <th
-                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-400 text-left text-xs font-semibold text-white uppercase tracking-wider">
                                         Stock
                                     </th>
                                     <th
-                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                                        className="px-5 py-3 border-b-2 border-gray-200 bg-green-400 text-left text-xs font-semibold text-white uppercase tracking-wider">
                                         Minimum Stock
                                     </th>
                                 </tr>
@@ -118,14 +130,6 @@ export default function InventoryList() {
                                         {item.minStock}
                                         </p>
                                     </td>
-                                    {/* <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                        <span
-                                            className="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
-                                            <span aria-hidden
-                                                className="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
-                                            <span className="relative">Activo</span>
-                                        </span>
-                                    </td> */}
                                 </tr>
                                 
                             </tbody>
@@ -138,11 +142,11 @@ export default function InventoryList() {
                             </span>
                             <div className="inline-flex mt-2 xs:mt-0">
                                 <button
-                                    className="text-sm bg-green-300 hover:bg-green-400 text-gray-800 font-semibold py-2 px-4 rounded-l">
+                                    className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded-l">
                                     Prev
                                 </button>
                                 <button
-                                    className="text-sm bg-green-300 hover:bg-green-400 text-gray-800 font-semibold py-2 px-4 rounded-r">
+                                    className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded-r">
                                     Next
                                 </button>
                             </div>
diff --git a/src/Components/Facility/TriageForm.tsx b/src/Components/Facility/TriageForm.tsx
index 4b1ed353ddd..167b7659213 100644
--- a/src/Components/Facility/TriageForm.tsx
+++ b/src/Components/Facility/TriageForm.tsx
@@ -187,10 +187,9 @@ export const TriageForm = (props: triageFormProps) => {
                     variant="outlined"
                     margin="dense"
                     type="number"
-                    InputLabelProps={{ shrink: !!state.form.num_patients_visited }}
-                    value={state.form.num_patients_visited}
+                    value=""
                     onChange={handleChange}
-                    errors={state.errors.num_patients_visited}
+                    errors=""
                 />
               </div>
               <div>
diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx
index d50a9f4501b..eb9d3568ce4 100644
--- a/src/Router/AppRouter.tsx
+++ b/src/Router/AppRouter.tsx
@@ -30,7 +30,8 @@ import { TreatmentForm } from "../Components/Patient/TreatmentForm";
 import ManageUsers from "../Components/Users/ManageUsers";
 import { UserAdd } from "../Components/Users/UserAdd";
 import AmbulanceOnboarding from "../Components/Ambulance/AmbulanceOnboarding";
-import InventoryList from "../Components/Inventory/InventoryList";
+import InventoryList from "../Components/Facility/InventoryList";
+import {AddInventoryForm} from "../Components/Facility/AddInventoryForm"
 const img =
   "https://cdn.coronasafe.network/light-logo.svg";
 const logoBlack =
@@ -117,9 +118,14 @@ const routes = {
   "/facility/:facilityId/patient/:patientId/consultation/:consultationId/daily-rounds/:id": ({ facilityId, patientId, consultationId, id }: any) => (
     <DailyRoundListDetails facilityId={facilityId} patientId={patientId} consultationId={consultationId} id={id} />
   ),
-  "/inventory": () => <InventoryList />,
+  "/facility/:facilityId/inventory": ({ facilityId }: any) => (<InventoryList />),
+  "/facility/:facilityId/inventory/add": ({ facilityId }: any) => (<AddInventoryForm />),
+  "/facility/inventory/add": () => (<AddInventoryForm />),
+
 };
 
+
+
 let menus = [
   {
     title: "Facilities",
@@ -145,12 +151,6 @@ let menus = [
     title: "Users",
     link: "/users",
     icon: "fas fa-user-friends"
-  },
-  {
-    title: "Inventory",
-    link:"/inventory",
-    icon: "fas fa-store"
-    
   }
 ];