Implemented Add Drug Modal

package.json

@@ -14,7 +14,11 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@chakra-ui/react": "^3.2.1",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
         "axios": "^1.6.7",
+        "framer-motion": "^6.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",

src/App.jsx

@@ -1,7 +1,10 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+
 
 import {
     AddDrug,
+    AddEdit,
     AdminAddUser,
     Alerts,
     Dashboard,
@@ -17,6 +20,7 @@ import {
     HomeLayout,
 } from './pages';
 
+
 const router = createBrowserRouter([
     {
         path: '/',
@@ -52,7 +56,11 @@ const router = createBrowserRouter([
     },
     {
         path: '/editdrug',
-        element: <EditDrug />,
+        element: <EditDrug />
+    },
+    {
+        path: '/AddEdit',
+        element: <AddEdit />
     },
     {
         path: '/dispense',
@@ -76,7 +84,15 @@ const router = createBrowserRouter([
     },
 ]);
 
+
 const App = () => {
-    return <RouterProvider router={router} />;
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+        </>
+    );
 };
+
 export default App;

src/components/AddMedicineForm.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components'
+
+
+const AddMedicineForm = ({ id, value, handleMedChange, placeholder, children }) => {
+    const inputRef = useRef();
+
+    useEffect(() => {
+        inputRef.current.focus();
+    }, [value])
+
+    return (
+        <div>
+
+            <StyleInput
+                type={id === 'expirationDate' ? 'date' : 'text'}
+                key={id}
+                id={id}
+                value={value} // Directly use value passed as a prop
+                onChange={handleMedChange}
+                placeholder={placeholder}
+                ref={inputRef}
+            />
+
+        </div>
+    )
+}
+/*
+AddMedicineForm.propTypes = {
+    id: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    handleMedChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+*/
+
+export default AddMedicineForm;
+
+export const FormField = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem; /* Adjust spacing between label and input */
+`;
+
+
+export const StyleInput = styled.input`
+text-size: 1rem;
+width: 100%;
+border: 1.5px solid #000;
+border-radius: 4px;
+display: flex; 
+flex-direction: column;
+align-items:flex-start;
+padding: 1em;
+margin: 0rem;
+color: #000;
+
+/* Placeholder text color */
+  &::placeholder {
+    color: black; /* Set placeholder text to black */
+  }
+`;

src/global.css

@@ -73,6 +73,10 @@ body {
     line-height: 1;
 }
 
+body.active-modal {
+    overflow: hidden;
+}
+
 h1,
 h2,
 h3,

src/main.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App.jsx';
+import './global.css';
+
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>