Merge pull request #32 from Code-the-Dream-School/farkhondeh-dev2

Farkhondeh dev2
Code-the-Dream-School · Dec 11, 2024 · 80589eb · 80589eb
2 parents ce00df3 + 3d9adba
commit 80589eb
Show file tree

Hide file tree

Showing 6 changed files with 384 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
         "@emotion/styled": "^11.13.5",
         "axios": "^1.6.7",
         "framer-motion": "^6.5.1",
+        "node": "^22.12.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.4.0",

diff --git a/src/pages/Alarms.jsx b/src/pages/Alarms.jsx
@@ -1,36 +1,48 @@
 import React from 'react';
 import Alarmbutton from './AlarmButton.jsx';
 import { useEffect, useState } from 'react';
-import { drugData } from '../../data.js';
+
 import styles from './AlarmButton.module.css';
 
 export default function Alarms() {
-    //const [rowData, setRowdata] = useState([]);
-
     const [lowStockData, setLowStockData] = useState([]);
     const [noStockData, setnoStockData] = useState([]);
     const [expiringsoonData, setExpiringData] = useState([]);
 
     useEffect(() => {
-        const drugsData = drugData.filter((drug) => drug.class);
+        fetch('http://localhost:8000/api/v1/inventory')
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then((data) => {
+                FilterData(data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching data:', error);
+            });
+    }, []);
+
+    const FilterData = (drugsData) => {
         const lowStockFilter = drugsData.filter((drug) => {
             return parseInt(drug.quantity) !== 0 && drug.quantity <= drug.threshold;
         });
-
         setLowStockData(lowStockFilter); // Data drugs matching LowStuck
 
         const noStockFilter = drugsData.filter((drug) => parseInt(drug.quantity) === 0);
         setnoStockData(noStockFilter); // Data drugs matching no Stock
 
         const expirationDateData = drugsData.filter((drug) => {
-            const expirationDate = new Date(drug.expiration);
+            const expirationDate = new Date(drug.expirationDate);
+            if (isNaN(expirationDate)) return false;
             const today = new Date();
-
             return expirationDate - today < 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds
         });
 
         setExpiringData(expirationDateData); //Data for Date checking
-    }, []); // Dependencies
+    };
 
     return (
         <>
@@ -41,21 +53,21 @@ export default function Alarms() {
                     imagepath="../images/low-stock.png"
                     filterTitle="LowStock"
                     filterData={lowStockData}
-                    targetPage="Medication"
+                    targetPage="dashboard"
                 />
                 <Alarmbutton
                     message={`No Stock on ${noStockData.length} products`}
                     imagepath="../images/out-of-stock.png"
                     filterTitle="No Stock"
                     filterData={noStockData}
-                    targetPage="Medication"
+                    targetPage="dashboard"
                 />
                 <Alarmbutton
                     message={`Expiration soon on ${expiringsoonData.length} products`}
                     imagepath="../images/expire-soon.png"
                     filterTitle="Expire"
                     filterData={expiringsoonData}
-                    targetPage="Medication"
+                    targetPage="dashboard"
                 />
             </div>
         </>

diff --git a/src/pages/AllDrugs.jsx b/src/pages/AllDrugs.jsx
@@ -1,60 +1,134 @@
 import styled from 'styled-components';
 import { IoIosSearch } from 'react-icons/io';
 import { FaFilter } from 'react-icons/fa';
-import { drugData } from '../../data';
+//import { drugData } from '../../data';
 import { TbBellFilled } from 'react-icons/tb';
+import { useEffect, useState } from 'react';
+import FilterSearch from './FilterSearch';
+import Alarms from './Alarms';
+import { useLocation } from 'react-router-dom';
 
 const AllDrugs = () => {
     const columnLabels = [
         'name',
-        'generic',
+        'genericName',
         'class',
         'quantity',
-        'expiration date',
-        'lot #',
-        'ndc #',
+        'expirationDate',
+        'lot',
+        'ndcNumber',
         'view/edit/delete',
     ];
 
+    const [data, setData] = useState([]);
+    const [filterData, setFilterData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    const [searchsection, setSearchSection] = useState(false);
+    const [alarmSection, setAlarmSection] = useState(false);
+
+    const location = useLocation();
+    const { alarmFilterData: alarmFilterData } = location.state || {};
+
+    useEffect(() => {
+        fetch('http://localhost:8000/api/v1/inventory')
+            .then((response) => {
+                if (!response) {
+                    throw new error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then((data) => {
+                if (alarmFilterData) {
+                    // Use the passed alarm filter if available
+                    setFilterData(alarmFilterData);
+                } else {
+                    setData(data.data);
+                    setFilterData(data.data);
+                }
+
+                setLoading(false);
+            })
+            .catch((error) => setError(error.message));
+    }, [alarmFilterData]);
+
+    const toggleSearch = () => {
+        setSearchSection((prevState) => !prevState);
+    };
+
+    const handleFilter = (filteredData) => {
+        setFilterData(filteredData);
+    };
+
+    if (loading) return <p>Loading...</p>;
+    if (error) return <p>Error: {error}</p>;
+
+    const toggleAlarm = () => {
+        setAlarmSection((preState) => !preState);
+    };
+
     return (
         <Wrapper>
             {/*  */}
+
             <div className="centered-container">
                 <div className="bell-icon-box">
-                    <button className="bell-button">
+                    <button className="bell-button" onClick={toggleAlarm}>
                         <TbBellFilled className="bell-icon" />
                     </button>
                 </div>
                 <div className="filter-search-box">
                     <div className="left-filter-box">
-                        <button className="filter-button">
+                        <button className="filter-button" onClick={toggleSearch}>
                             <FaFilter className="filter-icon" />
                         </button>
                     </div>
+                    <div></div>
                     <div className="search-box">
                         <div className="search-icon">
                             <IoIosSearch />
                         </div>
-                        <input type="text" placeholder="Search ..." className="search-input" />
+                        <input
+                            type="text"
+                            placeholder="Search by drug name ..."
+                            className="search-input"
+                        />
                     </div>
                 </div>
-                <div className="blank"></div>
             </div>
-            {/*  */}
-            <div className="grid-container">
-                {/* Render column headers */}
-                {columnLabels.map((label, index) => (
-                    <div key={index} className="grid-item grid-header">
-                        {label}
+            <div className="advanced-search">
+                {searchsection && (
+                    <div>
+                        <br />
+                        <FilterSearch data={data} onFilter={handleFilter} />
                     </div>
-                ))}
-                {/* Render rows dynamically */}
-                {drugData.map((drug, rowIndex) =>
-                    columnLabels.map((label, colIndex) => (
-                        <div key={`${rowIndex}-${colIndex}`} className="grid-item">
-                            {drug[label] || ''}
+                )}
+            </div>
+            {/*  */}
+            {!alarmSection && (
+                <div className="grid-container">
+                    {/* Render column headers */}
+                    {columnLabels.map((label, index) => (
+                        <div key={index} className="grid-item grid-header">
+                            {label}
                         </div>
-                    ))
+                    ))}
+                    {/* Render rows dynamically */}
+                    {filterData.map((drug, rowIndex) =>
+                        columnLabels.map((label, colIndex) => (
+                            <div key={`${rowIndex}-${colIndex}`} className="grid-item">
+                                {drug[label] || ''}
+                            </div>
+                        ))
+                    )}
+                </div>
+            )}
+            <div className="Alarm-container">
+                {alarmSection && (
+                    <div>
+                        {' '}
+                        <Alarms />{' '}
+                    </div>
                 )}
             </div>
         </Wrapper>
@@ -154,4 +228,11 @@ const Wrapper = styled.section`
         background-color: var(--color-green-med);
         color: var(--color-blue-dark);
     }
+    .advanced-search {
+        align-items: center;
+        justify-content: center;
+        background-color: #f5f5f5;
+        border-radius: 8px;
+        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);
+    }
 `;