Thad/jira 58 create dashboard page

AdminDashboard/package.json

@@ -7,24 +7,27 @@
         "dev": "vite",
         "dockerdev": "vite --host",
         "build": "vite build",
-        "lint": "eslint .",
         "preview": "vite preview",
-        "test": "vitest"
+        "test": "vitest",
+        "lint": "find ./src/ -type f ! -path './src/index.css' ! -path './src/tests/*' | xargs npx @biomejs/biome lint --write"
     },
     "dependencies": {
         "@auth0/auth0-react": "^2.3.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "axios": "^1.10.0",
+        "date-fns": "^4.1.0",
         "jwt-decode": "^4.0.0",
         "react": "^19.1.0",
         "react-colorful": "^5.6.1",
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
         "react-router": "^7.6.2",
-        "react-router-dom": "^7.6.2"
+        "react-router-dom": "^7.6.2",
+        "recharts": "^3.0.2"
     },
     "devDependencies": {
+        "@biomejs/biome": "2.1.1",
         "@eslint/js": "^9.25.0",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",

AdminDashboard/src/components/Management/AddItem.css

@@ -12,54 +12,95 @@
 }
 
 .modal-content {
-    background: linear-gradient(
+    /* background: linear-gradient(
         45deg,
         rgb(135, 197, 255) 0%,
         rgba(191, 191, 191, 0.95) 100%
-    );
-    padding: 1.75rem;
+    ); */
+    background: var(--surface-container);
+    color: var(--on-surface-container);
     border-radius: 10px;
     width: 80%;
     height: 80%;
     max-width: 700px;
     max-height: 700px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-    font-size: 30px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    padding-bottom: 2rem;
+}
+
+.modal-header-row {
+    margin-top: 0;
+    border-bottom: solid 1px black;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 0.5rem;
+    background: linear-gradient(
+        90deg,
+        rgba(29, 45, 69, 1) 0%,
+        rgba(34, 50, 73, 1) 100%
+    );
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+}
+
+.modal-header-row h2 {
+    font-size: 30px;
 }
 
-.modal-content h3 {
-    border-bottom: solid rgba(0, 0, 0, 0.28);
+.modal-header-row-right {
+    justify-content: flex-end;
+}
+
+.modal-close-button {
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+.modal-close-button svg {
+    font-size: 30px;
 }
 
 .modal-body {
     flex-grow: 1;
     overflow-y: auto;
-    margin-top: 1rem;
     padding-right: 2rem; /* gives space for scrollbar */
 }
 
 .modal-form {
-    font-size: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1rem;
 }
 
 .modal-form .form-group {
     margin-top: 1rem;
 }
 
 .modal-form label {
+    font-family: "Roboto Flex", sans-serif;
     display: block;
     margin-bottom: 0.5rem;
-    font-weight: bold;
-    text-transform: capitalize;
+    font-weight: 500;
 }
 
 .modal-form textarea {
     width: 100%;
     padding: 8px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--surface-container-outline);
+    background: var(--surface-container);
+    color: var(--on-surface-container);
     border-radius: 6px;
     resize: vertical;
     line-height: 1.4;
@@ -70,15 +111,19 @@
 .modal-form select {
     width: 100%; /* Jank Again */
     padding: 8px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--surface-container-outline);
+    background: var(--surface-container);
+    color: var(--on-surface-container);
     border-radius: 6px;
 }
 
 .modal-form input[type="text"] {
     width: 100%;
     padding: 8px;
     font-size: 16px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--surface-container-outline);
+    background: var(--surface-container);
+    color: var(--on-surface-container);
     border-radius: 6px;
     box-sizing: border-box;
 }
@@ -93,16 +138,16 @@
     height: 150px;
 }
 
-.image-preview-box {
+.modal-overlay .image-preview-box {
     margin-top: 8px;
     width: 150px;
     height: 150px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--surface-container-outline);
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #f8f8f8;
+    background-color: var(--surface-container);
     overflow: hidden;
 }
 
@@ -118,13 +163,13 @@
     gap: 0.5rem;
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid var(--surface-container-outline);
 }
 
 .modal-submit {
     padding: 8px 16px;
-    background-color: #007acc;
-    color: white;
+    background-color: var(--accept-button);
+    color: var(--on-accept-button);
     border: none;
     border-radius: 6px;
     cursor: pointer;
@@ -138,8 +183,8 @@
 
 .modal-cancel {
     padding: 8px 16px;
-    background-color: #eee;
-    color: #333;
+    background-color: var(--cancel-button);
+    color: var(--on-cancel-button);
     border: none;
     border-radius: 6px;
     cursor: pointer;

AdminDashboard/src/components/Management/AddItem.jsx

@@ -1,6 +1,7 @@
 import "./AddItem.css";
 import { useState } from "react";
 import { HexColorPicker } from "react-colorful";
+import { FaTimes } from "react-icons/fa";
 
 const AddItem = ({ title = "Item", onClose, onSubmit, schema = [] }) => {
     const initialState = {};
@@ -34,7 +35,18 @@ const AddItem = ({ title = "Item", onClose, onSubmit, schema = [] }) => {
     return (
         <div className="modal-overlay">
             <div className="modal-content">
-                <h3>Add New {title}</h3>
+                <div className="modal-header-row">
+                    <h2>Add New {title}</h2>
+                    <div className="modal-header-row-right">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="modal-close-button"
+                        >
+                            <FaTimes />
+                        </button>
+                    </div>
+                </div>
                 <div className="modal-body">
                     <form onSubmit={handleSubmit} className="modal-form">
                         {schema
@@ -206,7 +218,7 @@ const AddItem = ({ title = "Item", onClose, onSubmit, schema = [] }) => {
                                 className="modal-submit"
                                 disabled={!formValid}
                             >
-                                Save Question
+                                Save {title}
                             </button>
                         </div>
                     </form>

AdminDashboard/src/components/Management/Management_Layout.css

@@ -136,11 +136,11 @@
 }
 
 .table-row:hover {
-    background-color: var(--table-hover);
+    background: var(--table-hover);
 }
 
 .table-row-selected {
-    background-color: var(--table-selected) !important;
+    background: var(--table-selected) !important;
 }
 
 .table-cell {
@@ -168,19 +168,31 @@
     right: 0;
     width: 450px;
     height: calc(100% - 66px);
-    background: linear-gradient(
+    /* background: linear-gradient(
         90deg,
         rgba(191, 191, 191, 0.95) 0%,
         rgba(86, 172, 255, 1) 100%
-    );
+    ); */
+    /* background: var(--navbar-surface); */
+    /* background: rgb(193, 193, 193); */
+    /* background: linear-gradient(
+        90deg, 
+        rgba(215, 223, 255, 0.95) 0%,
+        rgb(209, 243, 255) 100%
+    ); */
+    background: var(--update-item-panel);
     transform: translateX(100%); /* start off-screen on the right */
     transition:
         transform 0.2s ease-in-out,
         width 0.2s ease-in-out;
     overflow-y: auto;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    /* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); */
     border-top-left-radius: 10px;
     z-index: 1000;
+    /* box-shadow: -9px 5px 5px rgb(146, 146, 146,0.9); */
+    /* box-shadow: -9px 5px 5px rgba(190, 196, 225, 0.95); */
+    box-shadow: -9px 5px 5px var(--update-item-panel-shadow);
+    /* color: white; */
 }
 
 /* When panel is active (shown) */
@@ -202,7 +214,9 @@
     border: none;
     cursor: pointer;
     z-index: 1100;
-    color: #333;
+    /* color: #333; */
+    /* color: white; */
+    color: var(--update-item-panel-button);
 }
 
 .panel-wrapper .expand-btn {
@@ -214,12 +228,14 @@
     border: none;
     font-size: 1.25rem;
     cursor: pointer;
-    color: rgba(0, 0, 0, 0.4);
+    color: var(--update-item-panel-button);
+    /* color: rgba(255, 255, 255, 1); */
     z-index: 1100;
 }
 
 .panel-wrapper.expanded .expand-btn {
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--update-item-panel-button);
+    /* color: rgba(255, 255, 255, 1); */
 }
 
 @media (max-width: 1080px) {