inventory-manager/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package.json
+package-lock.json

inventory-manager/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/material": "^5.14.18",
+        "@mui/icons-material": "^5.14.19",
+        "@mui/material": "^5.14.19",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -1944,9 +1945,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
-      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2526,9 +2527,9 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
       "dependencies": {
         "@floating-ui/utils": "^0.1.3"
       }
@@ -3334,14 +3335,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.24",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.24.tgz",
-      "integrity": "sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==",
+      "version": "5.0.0-beta.25",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.25.tgz",
+      "integrity": "sha512-Iiv+IcappRRv6IBlknIVmLkXxfp51NEX1+l9f+dIbBuPU4PaRULegr1lCeHKsC45KU5ruxM5xMg4R/de03aJQg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@babel/runtime": "^7.23.4",
         "@floating-ui/react-dom": "^2.0.4",
-        "@mui/types": "^7.2.9",
-        "@mui/utils": "^5.14.18",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
         "@popperjs/core": "^2.11.8",
         "clsx": "^2.0.0",
         "prop-types": "^15.8.1"
@@ -3351,7 +3352,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
@@ -3365,26 +3366,51 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.18.tgz",
-      "integrity": "sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.19.tgz",
+      "integrity": "sha512-y4JseIen5pmZs1n9hHy95HKKioKco8f6N2lford2AmjJigVJOv0KsU0qryiCpyuEUZmi/xCduVilHsK9DSkPcA==",
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/material": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
-      "integrity": "sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==",
+    "node_modules/@mui/icons-material": {
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.19.tgz",
+      "integrity": "sha512-yjP8nluXxZGe3Y7pS+yxBV+hWZSsSBampCxkZwaw+1l+feL+rfP74vbEFbMrX/Kil9I/Y1tWfy5bs/eNvwNpWw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/base": "5.0.0-beta.24",
-        "@mui/core-downloads-tracker": "^5.14.18",
-        "@mui/system": "^5.14.18",
-        "@mui/types": "^7.2.9",
-        "@mui/utils": "^5.14.18",
-        "@types/react-transition-group": "^4.4.8",
+        "@babel/runtime": "^7.23.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.19.tgz",
+      "integrity": "sha512-jSPLXst/YPgDGolhiu4rbethKjLVrI1IkoK8YrFUv8ygxDuhQdsE6+ZqjSSRXk3ytTMf6ghPnQ88OFRk4XjpNw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.4",
+        "@mui/base": "5.0.0-beta.25",
+        "@mui/core-downloads-tracker": "^5.14.19",
+        "@mui/system": "^5.14.19",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
+        "@types/react-transition-group": "^4.4.9",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -3396,7 +3422,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
@@ -3423,12 +3449,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.18.tgz",
-      "integrity": "sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.19.tgz",
+      "integrity": "sha512-U9w39VpXLGVM8wZlUU/47YGTsBSk60ZQRRxQZtdqPfN1N7OVllQeN4cEKZKR8PjqqR3aYRcSciQ4dc6CttRoXQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/utils": "^5.14.18",
+        "@babel/runtime": "^7.23.4",
+        "@mui/utils": "^5.14.19",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3436,7 +3462,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
@@ -3449,11 +3475,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.18.tgz",
-      "integrity": "sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.19.tgz",
+      "integrity": "sha512-jtj/Pyn/bS8PM7NXdFNTHWZfE3p+vItO4/HoQbUeAv3u+cnWXcTBGHHY/xdIn446lYGFDczTh1YyX8G4Ts0Rtg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@babel/runtime": "^7.23.4",
         "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -3463,7 +3489,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.4.1",
@@ -3480,15 +3506,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
-      "integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/private-theming": "^5.14.18",
-        "@mui/styled-engine": "^5.14.18",
-        "@mui/types": "^7.2.9",
-        "@mui/utils": "^5.14.18",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.19.tgz",
+      "integrity": "sha512-4e3Q+2nx+vgEsd0h5ftxlZGB7XtkkPos/zWqCqnxUs1l/T70s0lF2YNrWHHdSQ7LgtBu0eQ0qweZG2pR7KwkAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.4",
+        "@mui/private-theming": "^5.14.19",
+        "@mui/styled-engine": "^5.14.19",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -3498,7 +3524,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
@@ -3519,9 +3545,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.9",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.9.tgz",
-      "integrity": "sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==",
+      "version": "7.2.10",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz",
+      "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0"
       },
@@ -3532,12 +3558,12 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.14.18",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
-      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.19.tgz",
+      "integrity": "sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@types/prop-types": "^15.7.10",
+        "@babel/runtime": "^7.23.4",
+        "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -3546,7 +3572,7 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
@@ -4791,9 +4817,9 @@
       "integrity": "sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.34",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.34.tgz",
-      "integrity": "sha512-U6eW/alrRk37FU/MS2RYMjx0Va2JGIVXELTODaTIYgvWGCV4Y4TfTUzG8DdmpDNIT0Xpj/R7GfyHOJJrDttcvg==",
+      "version": "17.0.71",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.71.tgz",
+      "integrity": "sha512-lfqOu9mp16nmaGRrS8deS2Taqhd5Ih0o92Te5Ws6I1py4ytHBcXLqh0YIqVsViqwVI5f+haiFM6hju814BzcmA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",

inventory-manager/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.18",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

inventory-manager/src/App.jsx

@@ -10,6 +10,7 @@ import {
   CreateOrganization,
   CreateRequest,
   ListAllOrganizations,
+  OrganizationSearch,
 } from "./components/user/index";
 import { useState } from "react";
 import useToken from "./components/useToken";
@@ -24,6 +25,7 @@ import OrganizationItemDetails from "./components/myorg/item/OrganizationItemDet
 import OrganizationItemCreate from "./components/myorg/item/OrganizationItemCreate";
 import OrganizationLocations from "./components/myorg/location/OrganizationLocations";
 import OrganizationRequests from "./components/myorg/request/OrganizationRequests";
+import MyRequests from "./components/myrequests/MyRequests";
 
 function App() {
   // const [token, setToken] = useState();
@@ -57,6 +59,9 @@ function App() {
         <Route element={<PrivateRoutes token={token} />}>
           <Route path="/myorganizations" element={<MyOrganizations token={token}/>} />
         </Route>
+        <Route element={<PrivateRoutes token={token} />}>
+          <Route path="/myrequests" element={<MyRequests token={token}/>} />
+        </Route>
         <Route element={<PrivateRoutes token={token} />}>
           <Route path="/organizations/:orgId" element={<OrganizationDetails token={token}/> } />
         </Route>

inventory-manager/src/components/Navbar.jsx

@@ -40,6 +40,9 @@ export const Navbar = ({ token }) => {
               <li>
                 <NavLink to="/createorganization">Create Organization</NavLink>
               </li>
+              <li>
+                <NavLink to="/myrequests">My Requests</NavLink>
+            </li>
               <li>
                 <NavLink to="/createrequest">Create Request</NavLink>
               </li>

inventory-manager/src/components/myrequests/MyRequests.css

+.requests-list {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.request-item {
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+}
+
+.request-item h3 {
+    margin-bottom: 5px;
+}
+
+.request-details {
+    text-align: center;
+    margin-top: 50px;
+}
+
+h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+p {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+/* Center request information */
+.request-info {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+
+/* Add more styling as needed */

inventory-manager/src/components/myrequests/MyRequests.jsx

+import React, { useState, useEffect } from 'react';
+import Axios from 'axios';
+import PropTypes from "prop-types";
+import './MyRequests.css'
+import {Link, useLocation} from "react-router-dom";
+const MyRequests = ({ token }) => {
+    const [requests, setRequests] = useState([]);
+    // if (token == null || token == undefined)
+    //     const {token2} = useLocation();
+    //     token = token2;
+    const {state} = useLocation();
+    if (token == null || token == undefined)
+    {
+        console.log('updated token to be token2');
+        token = state.token2;
+    }
+    useEffect(() => {
+        const fetchRequests = async () => {
+            try {
+                console.log(token)
+                const response = await Axios.post('http://localhost:8080/request/user', {
+                    jwt: token.jwt
+                });
+
+                if (response.data.result === 'success') {
+                    setRequests(response.data.data);
+                } else {
+                    console.error('Error fetching requests');
+                }
+            } catch (error) {
+                console.error('Error fetching requests:', error);
+            }
+        };
+
+        fetchRequests();
+    }, [token]);
+
+    return (
+        <div className="request-list">
+            <h2>Your Requests</h2>
+            <ul>
+                {requests.map((request) => (
+                    <li key={request.requestId} className="request-item">
+                        {/* <Link to={`/organizations/${org.orgId}`}>
+                        <h3>{org.name}</h3>
+                        </Link> */}
+                        <p>Organization Name: {request.organizationName}</p>
+                        <p>Status: {request.status}</p>
+                        <p>Description: {request.description}</p>
+                        {/* Add more information as needed */}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+MyRequests.propTypes = {
+    token: PropTypes.shape({
+        jwt: PropTypes.string.isRequired,
+    }).isRequired,
+};
+export default MyRequests;

inventory-manager/src/components/user/CreateRequest.jsx

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Axios from "axios";
+import { useLocation } from 'react-router-dom';
+
 
 export const CreateRequest = (props) => {
-  const [reqId, setReqId] = useState("");
+  // const [reqId, setReqId] = useState("");
   const [userEmail, setUserEmail] = useState("");
   const [desc, setDesc] = useState("");
-  const [orgId, setOrgId] = useState("");
+  // const [orgId, setOrgId] = useState("");
   const [status, setStatus] = useState("");
   const [type, setType] = useState("");
+  const [organizationName, setOrganizationName] = useState(""); // name of org to join/add item to
+
+  const location = useLocation();
+  const rowData = location.state?.data;
+
+  useEffect(() => {
+    console.log("in use effect");
+    if (rowData) {
+      console.log(rowData);
+      //setUserEmail(rowData.ownerEmail || ""); // Example field
+      setType("JOIN");
+      //setDesc(rowData.description || "");
+      // ... set other fields similarly
+      setOrganizationName(rowData.name || "");
+    }
+  }, [rowData]);
 
 
   const handleSubmit = (e) => {
     e.preventDefault();
     Axios.post("http://localhost:8080/request/add", {
       userEmail: userEmail,
-      reqId: reqId,
+      // reqId: reqId,
       desc: desc,
-      orgId: orgId,
-      status: status,
+      organizationId: 2,
+      status: "PENDING",
       type: type,
+      organizationName: organizationName,
+      itemId: null,
+      quantity: null
     }).then((response) => {
       console.log(response);
     });
@@ -28,13 +49,22 @@ export const CreateRequest = (props) => {
     <div className="creation-form-container">
       <h2>Create Request</h2>
       <form className="create-form" onSubmit={handleSubmit}>
-        <label htmlFor="reqId">Request ID</label>
+        {/* <label htmlFor="reqId">Request ID</label>
         <input
           value={reqId}
           onChange={(e) => setReqId(e.target.value)}
           name="reqId"
           id="reqId"
           placeholder="Request ID"
+        /> */}
+
+        <label htmlFor="name">Organization/Item Name</label>
+        <input
+          value={organizationName}
+          onChange={(e) => setOrganizationName(e.target.value)}
+          name="name"
+          id="name"
+          placeholder="name"
         />
 
         <label htmlFor="userEmail">User Email</label>
@@ -75,14 +105,14 @@ export const CreateRequest = (props) => {
           placeholder="..."
         />
 
-        <label htmlFor="orgId">Organization ID</label>
+        {/* <label htmlFor="orgId">Organization ID</label>
         <input
           value={orgId}
           onChange={(e) => setOrgId(e.target.value)}
           id="orgId"
           name="orgId"
           placeholder="Organization ID"
-        />
+        /> */}
 
         <button type="submit">Create</button>
       </form>

inventory-manager/src/components/user/ListAllOrganizations.jsx

-import React, { useState, useEffect } from "react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-
+// import * as React from 'react';
+import React, { useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { visuallyHidden } from '@mui/utils';
 import Axios from "axios";
-import { Button } from "@mui/material";
+import { useNavigate } from 'react-router-dom';
+
+
+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
+// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
+// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
+// with exampleArray.slice().sort(exampleComparator)
+function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+const headCells = [
+  {
+    id: 'name',
+    numeric: false,
+    disablePadding: true,
+    label: 'Name',
+  },
+  {
+    id: 'category',
+    numeric: false,
+    disablePadding: true,
+    label: 'Category',
+  },
+  {
+    id: 'description',
+    numeric: false,
+    disablePadding: false,
+    label: 'Description',
+  },
+  {
+    id: 'owner',
+    numeric: false,
+    disablePadding: false,
+    label: 'Owner Email',
+  },
+  {
+    id: 'membercount',
+    numeric: false,
+    disablePadding: false,
+    label: 'Member',
+  },
+];
+
+function EnhancedTableHead(props) {
+  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+    props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {/* const [selectedRow, setSelectedRow] = React.useState({});
+
+        <TableRow
+          onClick={() => setSelectedRow(row)}
+          key={row.name}
+          sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+        ></TableRow> */}
+
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            // inputProps={{
+            //   'aria-label': 'select all desserts',
+            // }}
+          />
+        </TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.numeric ? 'right' : 'left'}
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+EnhancedTableHead.propTypes = {
+  numSelected: PropTypes.number.isRequired,
+  onRequestSort: PropTypes.func.isRequired,
+  onSelectAllClick: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  rowCount: PropTypes.number.isRequired,
+};
+
+function EnhancedTableToolbar(props) {
+  const { numSelected } = props;
+
+  return (
+    <Toolbar
+      sx={{
+        pl: { sm: 2 },
+        pr: { xs: 1, sm: 1 },
+        ...(numSelected > 0 && {
+          bgcolor: (theme) =>
+            alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+        }),
+      }}
+    >
+      {numSelected > 0 ? (
+        <Typography
+          sx={{ flex: '1 1 100%' }}
+          color="inherit"
+          variant="subtitle1"
+          component="div"
+        >
+          {numSelected} selected
+        </Typography>
+      ) : (
+        <Typography
+          sx={{ flex: '1 1 100%' }}
+          variant="h6"
+          id="tableTitle"
+          component="div"
+        >
+          Organizations
+        </Typography>
+      )}
+
+      {numSelected > 0 ? (
+        <Tooltip title="Delete">
+          <IconButton>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Filter list">
+          <IconButton>
+            <FilterListIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Toolbar>
+  );
+}
 
+EnhancedTableToolbar.propTypes = {
+  numSelected: PropTypes.number.isRequired,
+};
+
+//export default function EnhancedTable() {
 export const ListAllOrganizations = (props) => {
-  const [rows, setRows] = useState([]); // State to store the rows
-
-  useEffect(() => {
-    const fetchOrganizations = async () => {
-      try {
-        const response = await Axios.get(
-          "http://localhost:8080/organization/all"
-        );
-        setRows(response.data); // Update state with fetched data
-      } catch (error) {
-        console.error("Error fetching data: ", error);
-      }
-    };
-
-    fetchOrganizations();
-  }, []); // The empty array ensures this effect runs once on mount
+  const navigate = useNavigate();
+
+  const [order, setOrder] = React.useState('asc');
+  const [orderBy, setOrderBy] = React.useState('');
+  const [selected, setSelected] = React.useState([]);
+  const [page, setPage] = React.useState(0);
+  const [dense, setDense] = React.useState(false);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+  //export const ListAllOrganizations = (props) => {
+    const [rows, setRows] = useState([]); // State to store the rows
+  
+    useEffect(() => {
+      const fetchOrganizations = async () => {
+        try {
+          const response = await Axios.get("http://localhost:8080/organization/all");
+          setRows(response.data); // Update state with fetched data
+        } catch (error) {
+          console.error('Error fetching data: ', error);
+        }
+      };
+  
+      fetchOrganizations();
+    }, []); // The empty array ensures this effect runs once on mount
+
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event) => {
+    if (event.target.checked) {
+      const newSelected = rows.map((n) => n.id);
+      setSelected(newSelected);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleClick = (event, id) => {
+    const selectedIndex = selected.indexOf(id);
+    let newSelected = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+    setSelected(newSelected);
+  };
+
+  // const toRequest = (event, id) => {
+  //   window.location.href = `http://localhost:3000/createrequest`; 
+  // }
+
+  const toRequest = (event, row) => {
+    navigate('/createrequest', { state: { data: row } });
+  };
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleChangeDense = (event) => {
+    setDense(event.target.checked);
+  };
+
+  const isSelected = (id) => selected.indexOf(id) !== -1;
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  const visibleRows = React.useMemo(
+    () =>
+      stableSort(rows, getComparator(order, orderBy)).slice(
+        page * rowsPerPage,
+        page * rowsPerPage + rowsPerPage,
+      ),
+    [order, orderBy, page, rowsPerPage],
+  );
 
   return (
-    <div>
-      <TableContainer component={Paper}>
-        <Table sx={{ minWidth: 650 }} aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell align="right">Category</TableCell>
-              <TableCell align="right">Description</TableCell>
-              <TableCell align="right">Owner Email</TableCell>
-              <TableCell align="right">Member Count</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.name}
-                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
-                <TableCell component="th" scope="row">
-                  {row.name}
-                </TableCell>
-                <TableCell align="right">{row.category}</TableCell>
-                <TableCell align="right">{row.description}</TableCell>
-                <TableCell align="right">{row.ownerEmail}</TableCell>
-                <TableCell align="right">{row.memberCount}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <Box sx={{ width: '100%' }}>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <EnhancedTableToolbar numSelected={selected.length} />
+        <TableContainer>
+          <Table
+            sx={{ minWidth: 750 }}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+          >
+            <EnhancedTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+            />
+            <TableBody>
+              {visibleRows.map((row, index) => {
+                const isItemSelected = isSelected(row.id);
+                const labelId = `enhanced-table-checkbox-${index}`;
+
+                return (
+                  <TableRow
+                    hover
+                    // onClick={(event) => handleClick(event, row.id)}
+                    onClick={(event) => toRequest(event, row)}
+                    role="checkbox"
+                    aria-checked={isItemSelected}
+                    tabIndex={-1}
+                    key={row.id}
+                    selected={isItemSelected}
+                    sx={{ cursor: 'pointer' }}
+                  >
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        color="primary"
+                        checked={isItemSelected}
+                        inputProps={{
+                          'aria-labelledby': labelId,
+                        }}
+                      />
+                    </TableCell>
+                    <TableCell
+                      component="th"
+                      id={labelId}
+                      scope="row"
+                      padding="none"
+                    >
+                      {row.name}
+                    </TableCell>
+                   <TableCell align="left">{row.category}</TableCell>
+                   <TableCell align="left">{row.description}</TableCell>
+                   <TableCell align="left">{row.ownerEmail}</TableCell>
+                   <TableCell align="left">{row.memberCount}</TableCell>
+                  </TableRow>
+                );
+              })}
+              {emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: (dense ? 33 : 53) * emptyRows,
+                  }}
+                >
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+      <FormControlLabel
+        control={<Switch checked={dense} onChange={handleChangeDense} />}
+        label="Dense padding"
+      />
+    </Box>
   );
 };

inventory-manager/src/components/user/OrganizationSearch.jsx

+import { useState, useEffect} from "react";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/Search";
+import TextField from "@mui/material/TextField";
+import Axios from "axios";
+
+  export function OrganizationSearch() {
+
+    const [data, setRows] = useState([]); // State to store the rows
+  
+    useEffect(() => {
+      const fetchOrganizations = async () => {
+        try {
+          const response = await Axios.get("http://localhost:8080/organization/all");
+          console.log(response.data[0].name);
+          //setRows(response.data); // Update state with fetched data
+          setRows(response.data.map(org => org.name));
+        } catch (error) {
+          console.error('Error fetching data: ', error);
+          
+        }
+      };
+  
+      fetchOrganizations();
+    }, []); // The empty array ensures this effect runs once on mount
+    
+    const SearchBar = ({setSearchQuery}) => (
+        <form>
+          <TextField
+            id="search-bar"
+            className="text"
+            onInput={(e) => {
+              setSearchQuery(e.target.value);
+            }}
+            label="Enter an organization name"
+            variant="outlined"
+            placeholder="Search..."
+            size="small"
+          />
+          <IconButton type="submit" aria-label="search">
+            <SearchIcon style={{ fill: "blue" }} />
+          </IconButton>
+        </form>
+      );
+    
+      const filterData = (query, data) => {
+        if (!query) {
+          return data;
+        } else {
+          return data.filter((d) => d.toLowerCase().includes(query));
+        }
+      };
+
+    const [searchQuery, setSearchQuery] = useState("");
+    const dataFiltered = filterData(searchQuery, data);
+  
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignSelf: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          padding: 20
+        }}
+      >
+        <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+        <div style={{ padding: 3 }}>
+          {dataFiltered.map((d) => (
+            <div
+              className="text"
+              style={{
+                padding: 5,
+                justifyContent: "normal",
+                fontSize: 20,
+                color: "blue",
+                margin: 1,
+                width: "250px",
+                BorderColor: "green",
+                borderWidth: "10px"
+              }}
+              key={d.id}
+            >
+              {d}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+export default OrganizationSearch;

inventory-manager/src/components/user/index.js

@@ -5,3 +5,4 @@ export * from "./UpdatePassword";
 export * from "./CreateOrganization";
 export * from "./CreateRequest";
 export * from "./ListAllOrganizations";
+export * from "./OrganizationSearch";

src/main/java/com/example/accessingdatamysql/org/OrgController.java

@@ -35,4 +35,11 @@ public class OrgController {
         return orgRepository.findAll();
     }
 
+    // @GetMapping(path = "/org")
+    // public @ResponseBody Optional<User> getOrganization(@RequestBody Map<String, String> json)
+    // {
+    //     String email = json.get("email");
+    //     return userRepository.findById(email);
+    // }
+
 }

src/main/java/com/example/accessingdatamysql/request/CustomRequestRepository.java

@@ -28,7 +28,16 @@ public class CustomRequestRepository {
                 .setParameter("orgId", orgId);
         return query.getResultList();
     }
-
+    @Transactional
+    public List<Object> findUserRequests(String userEmail)
+    {
+        String nativeQuery = "SELECT r.status, r.description, r.type, r.quantity, i.name, o.name FROM REQUEST r JOIN ORGANIZATION o ON o.organization_id = r.organization_id JOIN ITEM i ON r.item_id = i.item_id WHERE r.user_email = :userEmail";
+        List<Object> requests = entityManager
+                .createNativeQuery(nativeQuery)
+                .setParameter("userEmail", userEmail)
+                .getResultList();
+        return requests;
+    }
     @Transactional
     public Object updateRequest(@RequestBody Map<String, Object> json)
     {

src/main/java/com/example/accessingdatamysql/request/RequestController.java

@@ -42,6 +42,37 @@ public class RequestController {
         return requestRepository.findById(1).get();
     }
 
+    @PostMapping(path="/user")
+    public @ResponseBody Map<String, Object> getUsersRequests(@RequestBody Map<String, Object> json)
+    {
+        System.out.println("in user");
+        Map<String, Object> response = new HashMap<>();
+        User found = new User();
+        AuthController au = new AuthController();
+        Map<String, String> res =  au.verify(json); // if the jwt token could not be verified
+        if (res.containsKey("login") && res.get("login").equals("failed"))
+        {
+            response.put("result", "failed = bad token or bad request");
+            return response;
+        }
+        Optional<User> usr = userRepository.findById(res.get("user"));
+        if (!usr.isPresent())
+        {
+            response.put("result", "failed = user not found");
+            return response;
+        }
+        response.put("result", "success");
+        response.put("data", customRequestRepository.findUserRequests(res.get("user")));
+        return response;
+    }
+    @PostMapping(path = "/add") // Map ONLY POST Requests
+    @ResponseBody
+    public Request addJsonOrg(@RequestBody Request req) {
+        // @ResponseBody means the returned String is the response, not a view name
+        // @RequestParam means it is a parameter from the GET or POST request
+        requestRepository.save(req);
+        return req;
+    }
     @PostMapping(path = "/user/requests")
     public @ResponseBody Map<String, Object> getOrgRequest(@RequestBody Map<String, Object> json)
     {