Made changes on my AddDrug component

src/App.jsx

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

src/components/AddMedicineForm.jsx

@@ -1,66 +1,65 @@
 import React from 'react';
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components'
+import styled from 'styled-components';
 
-
-const AddMedicineForm = ({ id, value, handleMedChange, placeholder, children }) => {
+const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => {
     const inputRef = useRef();
 
     useEffect(() => {
         inputRef.current.focus();
-    }, [value])
+    }, [value]);
 
     return (
         <div>
-
             <StyleInput
-                type={id === 'expirationDate' ? 'date' : 'text'}
+                type={
+                    id === 'expirationDate'
+                        ? 'date'
+                        : ['quantity', 'minAmount', 'lotNumber', 'ndcNumber'].includes(id)
+                          ? 'number'
+                          : '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,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // Accept string or number
     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 */
+    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;
+    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 */
-  }
-`;
+    /* Placeholder text color */
+    &::placeholder {
+        color: black; /* Set placeholder text to black */
+    }
+`;

src/main.jsx

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