Dheekshitha2 · jing-yen · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 6, 2024
diff --git a/.env b/.env
@@ -1 +1,2 @@
 REACT_APP_API_URL=https://express-server-1.fly.dev
+ADMIN_PIN=003342
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,17 +10,20 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.19",
+    "@simplewebauthn/browser": "^10.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
+    "chart.js": "^4.4.4",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "passport": "^0.7.0",
     "passport-microsoft": "^1.0.0",
     "pg": "^8.11.3",
     "pg-promise": "^11.5.4",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",

diff --git a/public/EDIC.jpg b/public/EDIC.jpg
diff --git a/public/EDIC2.jpg b/public/EDIC2.jpg
diff --git a/public/assets/automatic_wire_stripper-rs_pro.jpg b/public/assets/automatic_wire_stripper-rs_pro.jpg
diff --git a/public/assets/automatic_wire_stripper-rs_pro2.jpg b/public/assets/automatic_wire_stripper-rs_pro2.jpg
diff --git a/public/assets/default.jpg b/public/assets/default.jpg
diff --git a/public/assets/default2.jpg b/public/assets/default2.jpg
diff --git a/public/assets/wire_wrap_tool-jonard_tools.jpg b/public/assets/wire_wrap_tool-jonard_tools.jpg
diff --git a/public/assets/wire_wrap_tool-jonard_tools2.jpg b/public/assets/wire_wrap_tool-jonard_tools2.jpg
diff --git a/public/desktop_screenshot.png b/public/desktop_screenshot.png
diff --git a/public/hub.jpg b/public/hub.jpg
diff --git a/public/hub_logo_white.png b/public/hub_logo_white.png
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,9 @@
 
 <head>
   <meta charset="utf-8" />
+  <meta http-equiv="Content-Security-Policy" content="frame-src https://outlook.office365.com https://login.microsoftonline.com;">
   <link rel="icon" href="%PUBLIC_URL%/hub_logo_white.png" />
+  <link rel="manifest" href="/manifest.json" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,32 @@
+{
+    "short_name": "Hub App",
+    "name": "Book Equipment, Makers and Spaces",
+    "icons": [
+      {
+        "src": "/hub_logo_white.png",
+        "type": "image/png",
+        "sizes": "585x585"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#FFF",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#FFF",
+    "description": "Weather forecast information",
+    "screenshots": [
+      {
+        "src": "/phone_screenshot.png",
+        "type": "image/png",
+        "sizes": "1290x2795",
+        "form_factor": "narrow"
+      },
+      {
+        "src": "/desktop_screenshot.png",
+        "type": "image/png",
+        "sizes": "1920x1080",
+        "form_factor": "wide"
+      }
+    ]
+  }
diff --git a/public/phone_screenshot.png b/public/phone_screenshot.png
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,65 @@
 import './styles/App.css';
 import Navbar from './components/Navbar';
 import Home from './pages/Home';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Catalogue from './pages/Catalogue';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import NewBorrowForm from './components/NewBorrowForm';
+import NewCollectForm from './components/NewCollectForm';
+import NewReturnForm from './components/NewReturnForm';
 import { CartProvider } from './components/CartContext'; // Import the provider
-
+import { LocationProvider } from './components/LocationContext';
+import LoanDashboard from './pages/Dashboard';
+import OutlookBooking from './pages/Booking';
+import { useEffect, useState } from 'react';
+import VerifyPIN from './components/VerifyPIN';
 
 function App() {
+  // Verify PIN logic for all situations
+  const [verifiedByStaff, setVerifiedByStaff] = useState(false);
+  const [verifying, setVerifying] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const startVerificationProcess = () => {
+    setVerifying(true);
+  }
+
+  const handleVerificationResponse = (verified) => {
+    console.log('Verification response:', verified);
+    setVerifiedByStaff(verified);
+    setVerifying(false); 
+    if (location.pathname=='/catalogue' && verified) navigate('/dashboard');
+  }
+
+
+  useEffect(() => {
+    console.log('Location:', location.pathname);
+    if (location.pathname=='/dashboard') return;
+    setVerifiedByStaff(false);
+    setVerifying(false);
+  }, [location.pathname]);
+
   return (
     <div className="App">
       <CartProvider>
-        <Router>
+      <LocationProvider>
           <Navbar />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/new-borrow-form" element={<NewBorrowForm />} />
-          </Routes>
-        </Router>
+          <VerifyPIN setVerifiedByStaff={handleVerificationResponse} verifying={verifying}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/catalogue" element={<Catalogue startVerification={startVerificationProcess} verifiedByStaff={verifiedByStaff}/>} />
+              <Route path="/new-borrow-form" element={<NewBorrowForm />} />
+              <Route path="/booking" element={<OutlookBooking /> /*not used*/} />
+            </Routes>
+            {window.location.host != 'edic.vercel.app' /*only on edic-vercel.app*/ && 
+            <Routes>
+              <Route path="/new-collect-form" element={<NewCollectForm startVerification={startVerificationProcess} verifiedByStaff={verifiedByStaff}/>} />
+              <Route path="/new-return-form" element={<NewReturnForm startVerification={startVerificationProcess} verifiedByStaff={verifiedByStaff} />} />
+              <Route path="/dashboard" element={<LoanDashboard startVerification={()=>alert('hi')} verifiedByStaff={verifiedByStaff} />} />
+            </Routes>
+            }
+          </VerifyPIN>
+      </LocationProvider>
       </CartProvider>
     </div>
   );

diff --git a/src/components/InventoryList.js b/src/components/InventoryList.js
@@ -3,6 +3,7 @@ import Modal from './Modal';
 import '../styles/App.css';
 import SearchBar from './SearchBar';
 import { useCart } from './CartContext';
+import { useWhichLocation } from './LocationContext';
 
 function InventoryItem({ item, onAddToCart }) {
     const [modalOpen, setModalOpen] = useState(false);
@@ -31,8 +32,7 @@ function InventoryItem({ item, onAddToCart }) {
             <div className={`inventory-item`} onClick={handleItemClick}>
                 <img src={imageUrl} alt={item.item_name} onError={handleImageError} className="item-image" />
                 <h3 className="item-title">{item.item_name}</h3>
-                {item.brand && <p className="item-brand">{item.brand}</p>}
-                <p className="item-details">Qty: {item.qty_available}</p>
+                <p className="item-brand">{item.brand}&zwnj;</p>
             </div>
 
             <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)}>
@@ -57,6 +57,7 @@ function InventoryItem({ item, onAddToCart }) {
 
 
 function InventoryList() {
+    const { whichLocation } = useWhichLocation();
     const [items, setItems] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedCategories, setSelectedCategories] = useState([]);
@@ -82,14 +83,15 @@ function InventoryList() {
 
 
     useEffect(() => {
-        fetch(`${API_URL}/api/inventory`)
+        console.log(whichLocation);
+        fetch(`${API_URL}/api/inventory`+ (whichLocation=='e2a' ? 'E2A' : ''))
             .then(response => response.json())
             .then(data => {
                 const groupedItems = groupAndSumItems(data);
                 setItems(groupedItems);
             })
             .catch(error => console.error('Error fetching data:', error));
-    }, [API_URL]);
+    }, [API_URL, whichLocation]);
 
 
     const handleSearchChange = (newSearchTerm) => {
@@ -157,9 +159,8 @@ function InventoryList() {
         .sort((a, b) => a.item_name.localeCompare(b.item_name)); // This line adds sorting by item_name
 
     return (
-        <div className="main-content">
-            <div>
-                <SearchBar
+        <div className="">
+            <SearchBar
                     onSearchChange={handleSearchChange}
                     onCategoryChange={handleCategoryChange}
                     selectedCategories={selectedCategories}
@@ -173,7 +174,6 @@ function InventoryList() {
                         />)
                     )}
                 </div>
-            </div>
         </div>
     );
 }

diff --git a/src/components/LocationContext.js b/src/components/LocationContext.js
@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const LocationContext = createContext();
+
+export function useWhichLocation() {
+    return useContext(LocationContext);
+}
+
+export const LocationProvider = ({ children }) => {
+    const [whichLocation, setWhichLocation] = useState('hub');
+
+    return (
+        <LocationContext.Provider value={{ whichLocation, setWhichLocation }}>
+            {children}
+        </LocationContext.Provider>
+    );
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		REACT_APP_API_URL=https://express-server-1.fly.dev
		ADMIN_PIN=003342