320 dev implement user page design

frontend/src/components/Button.tsx

@@ -19,7 +19,7 @@ export default function Button({ text, onClick, className, logo, logoPosition, d
   return (
     <button onClick={onClick} disabled={disabled || false} type={type || "button"}
     className={`
-        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:text-white
+        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
         flex items-center justify-center 
         ${className}
       `}

frontend/src/custom/ActionConfirmation.tsx

@@ -1,3 +1,4 @@
+import Button from "../components/Button";
 import { IoIosWarning } from "react-icons/io";
 
 {/* The popup that appears on delete */}
@@ -22,7 +23,7 @@ import { IoIosWarning } from "react-icons/io";
 
     return (
       <div 
-        className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300"
+        className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[1500] transition-opacity duration-300"
         onClick={onCloseDelete}
       >
         <div 
@@ -63,21 +64,11 @@ import { IoIosWarning } from "react-icons/io";
 
           {/* Buttons */}
           <div className="flex w-full justify-between ">
-            <button
-              className="rounded-lg hover:bg-gray-200 border-2 border-black bg-red-light transition-colors w-32 h-12"
-              onClick={onCloseDelete}
-            >
-              No, cancel
-            </button>
-            <button
-              className="rounded-lg text-black border-2 border-black hover:bg-red-700 transition-colors w-32 h-12"
-              onClick={() => {
+            <Button text="No, cancel" onClick={onCloseDelete} className=" text-red border-red hover:border-red hover:bg-red-light active:bg-red" />
+            <Button text="Yes, confirm" onClick={() => {
                 onConfirmDelete();
                 onCloseDelete();
-              }}
-            >
-              Yes, confirm
-            </button>
+              }} className="border-grey-500" />
           </div>
 
           </div>

frontend/src/external/bcanSatchel/actions.ts

@@ -65,6 +65,11 @@ export const updateSort = action(
   (sort: {header: keyof Grant, asc: boolean}) => ({ sort, })
 );
 
+export const updateUserSort = action(
+  "updateUserSort",
+  (sort: {header: keyof User, sort: "asc" | "desc" | "none"}) => ({ sort, })
+); 
+
 /**
  * Append a new grant to the current list of grants.
  */
@@ -75,6 +80,11 @@ export const updateSearchQuery = action(
   (searchQuery: string) => ({ searchQuery })
 );
 
+export const updateUserQuery = action(
+  "updateUserQuery",
+  (userQuery: string) => ({ userQuery })
+);
+
 export const setNotifications = action(
   'setNotifications',
   (notifications: Notification[]) => ({notifications})

frontend/src/external/bcanSatchel/mutators.ts

@@ -9,7 +9,9 @@ import {
   updateSearchQuery,
   updateYearFilter,
   setNotifications,
-  updateSort
+  updateSort,
+  updateUserQuery,
+  updateUserSort,
 } from './actions';
 import { getAppStore, persistToSessionStorage } from './store';
 import { setActiveUsers, setInactiveUsers } from './actions';
@@ -117,3 +119,14 @@ mutator(updateSort, (actionMessage) => {
   const store = getAppStore();
   store.sort = actionMessage.sort;
 })
+
+mutator(updateUserQuery, (actionMessage) => {
+  const store = getAppStore();
+  store.userQuery = actionMessage.userQuery;
+  console.log('Updated userQuery:', store.userQuery);
+})
+
+mutator(updateUserSort, (actionMessage) => {
+  const store = getAppStore();
+  store.userSort = actionMessage.sort;
+}) 

frontend/src/external/bcanSatchel/store.ts

@@ -18,7 +18,9 @@ export interface AppState {
   activeUsers: User[] | [];
   inactiveUsers: User[] | [];
   sort: {header: keyof Grant, asc: boolean} | null;
+  userSort: {header: keyof User, sort: "asc" | "desc" | "none"} | null;
   notifications: Notification[];
+  userQuery: string;
 }
 
 // Define initial state
@@ -36,6 +38,8 @@ const initialState: AppState = {
   inactiveUsers: [],
   notifications: [],
   sort: null,
+  userSort: null,
+  userQuery: '',
 };
 
 /**

frontend/src/main-page/MainPage.tsx

@@ -2,11 +2,11 @@ import { Routes, Route } from "react-router-dom";
 import Dashboard from "./dashboard/Dashboard";
 import GrantPage from "./grants/GrantPage";
 import NavBar from "./navbar/NavBar";
-import Users from "./users/Users";
 import RestrictedPage from "./restricted/RestrictedPage";
 import CashFlowPage from "./cash-flow/CashFlowPage";
 import Settings from "./settings/Settings";
-import Footer from "./Footer";
+import Footer from "../main-page/Footer";
+import UsersPage from "./users/UsersPage";
 
 function MainPage() {
   return (
@@ -26,7 +26,7 @@ function MainPage() {
               path="/my-grants"
               element={<GrantPage showOnlyMyGrants={true} />}
             />
-            <Route path="/users" element={<Users />} />
+            <Route path="/users" element={<UsersPage />} />
             <Route path="/restricted" element={<RestrictedPage />} />
             <Route path="/cash-flow" element={<CashFlowPage />} />
             <Route path="/settings" element={<Settings />} />

frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx

@@ -77,7 +77,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
               },
             )}M`}
           </div>
-          <div className={`gap-1 flex flex-col absolute ${width > 250 ? "mt-12" : "mt-2"}`}>
+          <div className={`gap-1 flex break-all flex-col absolute ${width > 250 ? "mt-12" : "mt-2"}`}>
             <LabelItem
               name="Received"
               percent={sumReceived / total}

frontend/src/main-page/dashboard/DateFilter.tsx

@@ -65,7 +65,7 @@ const DateFilter: React.FC = observer(() => {
         className="bg-white border-grey-500 inline-flex items-center justify-between text-sm lg:text-base"
       />
       <div
-        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
+        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-grey-500 shadow-lg`}
       >
         <button
           className="close-button absolute top-3 right-4 text-lg"
@@ -100,8 +100,8 @@ const DateFilter: React.FC = observer(() => {
             </li>
           ))}
         </ul>
-        <hr className="border-t mx-4 border-gray-200" />
-        <button className="p-2" onClick={() => handleReset()}>
+        <hr className="border-t mx-4 border-grey-400" />
+        <button className="p-2 border-0 hover:text-grey-600" onClick={() => handleReset()}>
           Reset
         </button>
       </div>

frontend/src/main-page/grants/filter-bar/GrantSearch.tsx

@@ -4,7 +4,6 @@ import Fuse from "fuse.js";
 import { updateSearchQuery } from "../../../external/bcanSatchel/actions";
 import { getAppStore } from "../../../external/bcanSatchel/store";
 import { Grant } from "../../../../../middle-layer/types/Grant";
-import { Input } from "@chakra-ui/react";
 
 function GrantSearch() {
   const [userInput, setUserInput] = useState(getAppStore().searchQuery || "");
@@ -44,10 +43,9 @@ function GrantSearch() {
           marginLeft: "2px",
         }}
       />
-      <Input
+      <input
         placeholder="Search for a grant..."
-        variant="subtle"
-        className="px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
+        className="w-full px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
         onChange={handleInputChange}
         value={userInput}
         style={{ paddingLeft: "2rem" }} // make room for the icon