added dropdown for create org and added pie chart

inventory-manager/package-lock.json

@@ -18,6 +18,7 @@
         "axios": "^1.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-google-charts": "^4.0.1",
         "react-router-dom": "^6.18.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -15234,6 +15235,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-google-charts": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.1.tgz",
+      "integrity": "sha512-V/hcMcNuBgD5w49BYTUDye+bUKaPmsU5vy/9W/Nj2xEeGn+6/AuH9IvBkbDcNBsY00cV9OeexdmgfI5RFHgsXQ==",
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

inventory-manager/package.json

@@ -13,6 +13,7 @@
     "axios": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-google-charts": "^4.0.1",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

inventory-manager/src/App.jsx

@@ -26,6 +26,7 @@ import OrganizationItemCreate from "./components/myorg/item/OrganizationItemCrea
 import OrganizationLocations from "./components/myorg/location/OrganizationLocations";
 import OrganizationRequests from "./components/myorg/request/OrganizationRequests";
 import MyRequests from "./components/myrequests/MyRequests";
+import OrgChart from "./components/stats/OrgChart";
 
 function App() {
   // const [token, setToken] = useState();
@@ -118,6 +119,7 @@ function App() {
           path="/listallorganizations"
           element={<ListAllOrganizations />}
         />
+        <Route path="/allorganizationstatistics" element={<OrgChart />} />
       </Routes>
     </div>
   );

inventory-manager/src/components/Navbar.jsx

@@ -34,15 +34,15 @@ export const Navbar = ({ token }) => {
               <li>
                 <NavLink to="/accountinfo">Account Information</NavLink>
               </li>
-            <li>
+              <li>
                 <NavLink to="/myorganizations">My Organizations</NavLink>
-            </li>
+              </li>
               <li>
                 <NavLink to="/createorganization">Create Organization</NavLink>
               </li>
               <li>
                 <NavLink to="/myrequests">My Requests</NavLink>
-            </li>
+              </li>
               <li>
                 <NavLink to="/createrequest">Create Request</NavLink>
               </li>
@@ -51,6 +51,11 @@ export const Navbar = ({ token }) => {
                   List All Organizations
                 </NavLink>
               </li>
+              <li>
+                <NavLink to="/allorganizationstatistics">
+                  Organziation Statistics
+                </NavLink>
+              </li>
               <li>
                 <NavLink
                   to="/"

inventory-manager/src/components/stats/OrgChart.jsx

+import React, { useState, useEffect } from "react";
+import Axios from "axios";
+import { Chart } from "react-google-charts";
+
+export const OrgChart = () => {
+  const [info, setInfo] = useState();
+
+  useEffect(() => {
+    // Fetch user information when the component mounts
+    getOrgStats();
+  }, []); // Empty dependency array ensures the effect runs once
+
+  const getOrgStats = async () => {
+    try {
+      const response = await Axios.get(
+        "http://localhost:8080/organization/all/stats"
+      );
+      const some = [["Task", "Hours per Day"], ...response.data.data];
+      setInfo(some);
+    } catch (error) {
+      console.error("Error fetching stats:", error);
+    }
+  };
+
+  const options = {
+    title: "My Daily Activities",
+  };
+
+  return (
+    <Chart
+      chartType="PieChart"
+      data={info}
+      options={options}
+      width={"100%"}
+      height={"400px"}
+    />
+  );
+};
+export default OrgChart;

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

@@ -47,6 +47,14 @@ export const CreateOrganization = ({ token }) => {
     window.location.reload(false);
   };
 
+  const categories = [
+    "GREEKLIFE",
+    "ACADEMIC",
+    "RECREATION",
+    "TECHNOLOGY",
+    "POLITICS",
+  ];
+
   return (
     <div className="creation-form-container">
       <h2>Create Organization</h2>
@@ -80,13 +88,18 @@ export const CreateOrganization = ({ token }) => {
         />
 
         <label htmlFor="category">Category</label>
-        <input
+        <select
           value={category}
           onChange={(e) => setCategory(e.target.value)}
           id="category"
-          name="category"
-          placeholder="Category"
-        />
+          name="category">
+          <option value="">Select a category</option>
+          {categories.map((cat, index) => (
+            <option key={index} value={cat}>
+              {cat}
+            </option>
+          ))}
+        </select>
 
         <button type="submit">Create</button>
       </form>

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

+package com.example.accessingdatamysql.org;
+
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.Query;
+import jakarta.transaction.Transactional;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Map;
+
+@Repository
+public class CustomOrganizationRepository
+{
+    @Autowired
+    private EntityManager entityManager;
+
+
+    @Transactional
+    public List<Object[]> countOrganizationsByCategory()
+    {
+        String query = "SELECT category, COUNT(*) FROM Organization GROUP BY category";
+        Query q = this.entityManager.createNativeQuery(query);
+        return (List<Object[]>)q.getResultList();
+    }
+
+}
\ No newline at end of file

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

@@ -6,18 +6,27 @@ import com.example.accessingdatamysql.myorg.OrganizationRoster;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
 @CrossOrigin
 @RestController // This means that this class is a Controller
 @RequestMapping(path="/organization") // This means URL's start with /demo (after Application path)
 public class OrgController {
-    @Autowired // This means to get the bean called userRepository
+    
     // Which is auto-generated by Spring, we will use it to handle the data
+    @Autowired
     private OrgRepository orgRepository;
 
-    @Autowired // This means to get the bean called userRepository
+    
     // Which is auto-generated by Spring, we will use it to handle the data
+    @Autowired
     private OrgRosterRepository orgRosterRepository;
 
+    @Autowired
+    private CustomOrganizationRepository customOrganizationRepository;
+
     @PostMapping(path = "/add") // Map ONLY POST Requests
     @ResponseBody
     public Organization addJsonOrg(@RequestBody Organization org) {
@@ -35,11 +44,18 @@ 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);
-    // }
+    @GetMapping(path="/all/stats")
+    public @ResponseBody Map<String, Object> getAllOrgStats() {
+        // This returns a JSON with statistics about how many organziations are in each category
+        List<Object[]> categoryCounts = customOrganizationRepository.countOrganizationsByCategory();
+        Map<String, Object> response = new HashMap<>();
+        // for (Object[] row : categoryCounts) {
+        //     Organization.Category category = (Organization.Category) row[0];
+        //     Long count = (Long) row[1];
+        //     stats.put(category.toString(), count);
+        // }
+        response.put("data", categoryCounts);
+        return response;
+    }
 
 }

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

@@ -12,7 +12,6 @@ public class Organization {
          RECREATION,
          TECHNOLOGY,
          POLITICS,
-
          GREEKLIFE
      }