From a54d643c542ab6e24c9e5cedeadb026a25bae0c9 Mon Sep 17 00:00:00 2001 From: Aaron Ashby <101434393+aaronashby@users.noreply.github.com> Date: Tue, 21 Oct 2025 01:01:53 -0400 Subject: [PATCH 1/3] Initial commit for branch Created users page scaffolding (header text, tabs, and user component container) and fixed spacing between header icons --- frontend/src/main-page/header/Header.tsx | 6 ++- frontend/src/main-page/header/UserButton.tsx | 16 +++++++ frontend/src/main-page/users/Users.tsx | 47 +++++++++++++++++++- 3 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 frontend/src/main-page/header/UserButton.tsx diff --git a/frontend/src/main-page/header/Header.tsx b/frontend/src/main-page/header/Header.tsx index 2478af5..8bf2250 100644 --- a/frontend/src/main-page/header/Header.tsx +++ b/frontend/src/main-page/header/Header.tsx @@ -14,6 +14,7 @@ import { Menu, Button } from "@chakra-ui/react"; import { FaCog } from "react-icons/fa"; import BellButton from "./Bell.tsx"; import { useLocation } from 'react-router-dom'; +import UserButton from "./UserButton.tsx"; interface NavBarProps { name: string; @@ -72,13 +73,13 @@ const Header: React.FC = observer(() => { ))} -
+
- @@ -95,6 +96,7 @@ const Header: React.FC = observer(() => { +
diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx new file mode 100644 index 0000000..2f04e77 --- /dev/null +++ b/frontend/src/main-page/header/UserButton.tsx @@ -0,0 +1,16 @@ +import { faUser } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +const UserButton = () => { + return ( +
+ + + +
+ ); +}; + +export default UserButton; diff --git a/frontend/src/main-page/users/Users.tsx b/frontend/src/main-page/users/Users.tsx index 5900856..3ec86c5 100644 --- a/frontend/src/main-page/users/Users.tsx +++ b/frontend/src/main-page/users/Users.tsx @@ -1,8 +1,51 @@ +import { useState } from "react"; + +// Represents a specific tab to show on the user page +enum UsersTab { + PendingUsers, + CurrentUsers, +} + function Users() { + const [usersTabStatus, setUsersTabStatus] = useState( + UsersTab.CurrentUsers + ); return ( -
- +
+
+

+ {usersTabStatus === UsersTab.CurrentUsers + ? "All Users" + : "Pending Users"} +

+

# new users

+
+
+ {/* TODO: For the time being, I had to push the tabs over to the left a bit because border corners are diagonally cut */} +
+ + +
+
); } From 1f811de8976b6fa01d80b2f55a8282c804479805 Mon Sep 17 00:00:00 2001 From: Aaron Ashby <101434393+aaronashby@users.noreply.github.com> Date: Tue, 28 Oct 2025 00:22:39 -0400 Subject: [PATCH 2/3] Made card components for approved and pending users --- .../src/main-page/users/ApprovedUserCard.tsx | 20 ++++++++++ .../src/main-page/users/PendingUserCard.tsx | 37 +++++++++++++++++++ .../src/main-page/users/UserPositionCard.tsx | 29 +++++++++++++++ frontend/src/main-page/users/Users.tsx | 19 +++++++++- 4 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 frontend/src/main-page/users/ApprovedUserCard.tsx create mode 100644 frontend/src/main-page/users/PendingUserCard.tsx create mode 100644 frontend/src/main-page/users/UserPositionCard.tsx diff --git a/frontend/src/main-page/users/ApprovedUserCard.tsx b/frontend/src/main-page/users/ApprovedUserCard.tsx new file mode 100644 index 0000000..3a8708f --- /dev/null +++ b/frontend/src/main-page/users/ApprovedUserCard.tsx @@ -0,0 +1,20 @@ +import UserPositionCard from "./UserPositionCard"; + +interface ApprovedUserCardProps { + name: string; + email: string; + position: string; +} + +const ApprovedUserCard = ({ name, email, position }: ApprovedUserCardProps) => { + return ( +
+

{name}

+

xxxxxxx

+

{email}

+ +
+ ); +}; + +export default ApprovedUserCard; diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx new file mode 100644 index 0000000..fb03258 --- /dev/null +++ b/frontend/src/main-page/users/PendingUserCard.tsx @@ -0,0 +1,37 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import UserPositionCard from "./UserPositionCard"; +import { faCheck, faX } from "@fortawesome/free-solid-svg-icons"; + +interface PendingUserCardProps { + name: string; + email: string; + position: string; + dateRequested: Date; +} + +const PendingUserCard = ({ + name, + email, + position, + dateRequested, +}: PendingUserCardProps) => { + return ( +
+

{name}

+

xxxxxxx

+

{email}

+ +

{dateRequested.toLocaleDateString("en-GB")}

+
+ + +
+
+ ); +}; + +export default PendingUserCard; diff --git a/frontend/src/main-page/users/UserPositionCard.tsx b/frontend/src/main-page/users/UserPositionCard.tsx new file mode 100644 index 0000000..6f15951 --- /dev/null +++ b/frontend/src/main-page/users/UserPositionCard.tsx @@ -0,0 +1,29 @@ +import { useMemo } from "react"; + +interface UserPositionCardProps { + position: string; +} + +const UserPositionCard = ({ position }: UserPositionCardProps) => { + const cardStyles = useMemo(() => { + switch (position.toLowerCase()) { + case "admin": + return "bg-[#BCFFD8] border-[#119548] text-[#119548]"; + case "employee": + return "bg-[#FFF8CA] border-[#F8CC16] text-[#8a710c]"; + case "deactive": + return "bg-[#FFB0B0] border-[#DF0404] text-[#DF0404]"; + case "inactive": + default: + return "bg-[#D3D3D3] border-[#666666] text-[#666666]"; + } + }, [position]); + + return ( +
+

{position}

+
+ ); +}; + +export default UserPositionCard; diff --git a/frontend/src/main-page/users/Users.tsx b/frontend/src/main-page/users/Users.tsx index 3ec86c5..f43115a 100644 --- a/frontend/src/main-page/users/Users.tsx +++ b/frontend/src/main-page/users/Users.tsx @@ -1,4 +1,6 @@ import { useState } from "react"; +import ApprovedUserCard from "./ApprovedUserCard"; +import PendingUserCard from "./PendingUserCard"; // Represents a specific tab to show on the user page enum UsersTab { @@ -22,7 +24,6 @@ function Users() {

# new users

- {/* TODO: For the time being, I had to push the tabs over to the left a bit because border corners are diagonally cut */}
+
+ {usersTabStatus === UsersTab.CurrentUsers ? ( + + ) : ( + + )} +
); From d24dcabf0e928ad33525a0c875ec63576fda0542 Mon Sep 17 00:00:00 2001 From: Aaron Ashby <101434393+aaronashby@users.noreply.github.com> Date: Tue, 28 Oct 2025 17:05:04 -0400 Subject: [PATCH 3/3] Added header for user cards and configured spacing --- .../src/main-page/users/ApprovedUserCard.tsx | 12 +++--- .../src/main-page/users/PendingUserCard.tsx | 18 +++++---- frontend/src/main-page/users/Users.tsx | 40 ++++++++++++++----- 3 files changed, 47 insertions(+), 23 deletions(-) diff --git a/frontend/src/main-page/users/ApprovedUserCard.tsx b/frontend/src/main-page/users/ApprovedUserCard.tsx index 3a8708f..c99aa32 100644 --- a/frontend/src/main-page/users/ApprovedUserCard.tsx +++ b/frontend/src/main-page/users/ApprovedUserCard.tsx @@ -8,11 +8,13 @@ interface ApprovedUserCardProps { const ApprovedUserCard = ({ name, email, position }: ApprovedUserCardProps) => { return ( -
-

{name}

-

xxxxxxx

-

{email}

- +
+

{name}

+

xxxxxxx

+

{email}

+
+ +
); }; diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx index fb03258..8824633 100644 --- a/frontend/src/main-page/users/PendingUserCard.tsx +++ b/frontend/src/main-page/users/PendingUserCard.tsx @@ -16,13 +16,17 @@ const PendingUserCard = ({ dateRequested, }: PendingUserCardProps) => { return ( -
-

{name}

-

xxxxxxx

-

{email}

- -

{dateRequested.toLocaleDateString("en-GB")}

-
+
+

{name}

+

xxxxxxx

+

{email}

+
+ +
+

+ {dateRequested.toLocaleDateString("en-GB")} +

+
diff --git a/frontend/src/main-page/users/Users.tsx b/frontend/src/main-page/users/Users.tsx index f43115a..4c840ca 100644 --- a/frontend/src/main-page/users/Users.tsx +++ b/frontend/src/main-page/users/Users.tsx @@ -48,18 +48,36 @@ function Users() {
{usersTabStatus === UsersTab.CurrentUsers ? ( - + <> +
+

User Name

+

User ID

+

Email

+

Position

+
+ + ) : ( - + <> +
+

User Name

+

User ID

+

Email

+

Position

+

Date Requested

+
+
+ + )}