diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index cc717485a..eec8fae28 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -2,24 +2,19 @@ import { useTheme } from "@emotion/react"; import TabPanel from "@mui/lab/TabPanel"; import { Box, - Checkbox, - Container, + ButtonGroup, Divider, + IconButton, MenuItem, Modal, Select, Stack, - Table, - TableBody, - TableCell, - TableHead, - TableRow, TextField, Typography, } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; import Button from "../../Button"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import EditSvg from "../../../assets/icons/edit.svg?react"; import Field from "../../Inputs/Field"; import { credentials } from "../../../Validation/validation"; @@ -27,6 +22,8 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import axiosInstance from "../../../Utils/axiosConfig"; import { createToast } from "../../../Utils/toastUtils"; import { useSelector } from "react-redux"; +import BasicTable from "../../BasicTable"; +import Remove from "../../../assets/icons/trash-bin.svg?react"; /** * TeamPanel component manages the organization and team members, @@ -36,138 +33,114 @@ import { useSelector } from "react-redux"; * @returns {JSX.Element} */ -const teamColumns = [ - { - id: "checkbox", - label: "", - sx: { minWidth: "20px", width: "40px" }, - }, - { - id: "name", - label: "NAME", - sx: { fontSize: "12px" }, - }, - { id: "email", label: "EMAIL", sx: { fontSize: "12px" } }, - { id: "role", label: "ROLE", sx: { fontSize: "12px" } }, -]; -//for testing, will be removed later -const teamConfig = [ - { - id: 0, - isChecked: false, - name: "John Connor", - email: "john@domain.com", - type: "admin", - role: "Administrator", - createdAt: "10/4/2022", - }, - { - id: 1, - isChecked: false, - name: "Adam McFadden", - email: "adam@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, - { - id: 2, - isChecked: false, - name: "Cris Cross", - email: "cris@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, - { - id: 3, - isChecked: false, - name: "Prince", - email: "prince@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, -]; -const actionsConfig = [ - { - value: "bulk", - label: "Bulk actions", - }, -]; -const roleConfig = [ - { - value: "role", - label: "Change role to", - }, -]; - const TeamPanel = () => { const theme = useTheme(); - //TODO - use redux loading state - //!! - currently all loading buttons are tied to the same state - const [isLoading, setIsLoading] = useState(false); - //TODO - connect to redux + + const { authToken } = useSelector((state) => state.auth); + //TODO const [orgStates, setOrgStates] = useState({ name: "Bluewave Labs", - isLoading: false, isEdit: false, }); + const [toInvite, setToInvite] = useState({ + email: "", + role: "", + }); + const [tableData, setTableData] = useState({}); + const [members, setMembers] = useState([]); + const [filter, setFilter] = useState("all"); + const [errors, setErrors] = useState({}); + useEffect(() => { + const fetchTeam = async () => { + try { + const response = await axiosInstance.get("/auth/users", { + headers: { Authorization: `Bearer ${authToken}` }, + }); + + setMembers(response.data.data); + } catch (error) { + createToast({ + body: error.message || "Error fetching team members.", + }); + } + }; + + fetchTeam(); + }, []); + + useEffect(() => { + let team = members; + if (filter !== "all") + team = members.filter((member) => member.role[0] === filter); + + const data = { + cols: [ + { id: 1, name: "NAME" }, + { id: 2, name: "EMAIL" }, + { id: 3, name: "ROLE" }, + { id: 4, name: "ACTION" }, + ], + rows: team?.map((member, idx) => { + return { + id: member._id, + data: [ + { + id: idx, + data: ( + + + {member.firstName + " " + member.lastName} + + + Created {new Date(member.createdAt).toLocaleDateString()} + + + ), + }, + { id: idx + 1, data: member.email }, + { + // TODO - Add select dropdown + id: idx + 2, + data: member.role[0] === "admin" ? "Administrator" : "Member", + }, + { + // TODO - Add delete onClick + id: idx + 3, + data: ( + + + + ), + }, + ], + }; + }), + }; + + setTableData(data); + }, [members, filter]); + + // RENAME ORGANIZATION const toggleEdit = () => { setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit })); }; const handleRename = () => {}; - const [teamStates, setTeamStates] = useState({ - members: teamConfig, - filter: "", - }); - const handleCheckCell = (id) => { - const updatedTeamStates = [...teamStates.members]; - updatedTeamStates[id] = { - ...updatedTeamStates[id], - isChecked: !updatedTeamStates[id].isChecked, - }; - setTeamStates((prev) => ({ - ...prev, - members: updatedTeamStates, - })); - }; - const handleFilter = (filter) => { - setTeamStates((prev) => ({ - ...prev, - filter: filter, - })); - }; - //TODO - implement select action function - const handleSelectActionType = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); - }; - //TODO - implement select role function - const handleSelectRoleType = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); - }; //TODO - implement save team function - const handleSaveTeam = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); - }; + const handleSaveTeam = () => {}; - const { authToken } = useSelector((state) => state.auth); - const [toInvite, setToInvite] = useState({ - email: "", - role: "", - }); - const [errors, setErrors] = useState({}); + // INVITE MEMBER + const [isOpen, setIsOpen] = useState(false); const handleChange = (event) => { const { value } = event.target; @@ -192,7 +165,7 @@ const TeamPanel = () => { return updatedErrors; }); }; - const [isOpen, setIsOpen] = useState(false); + const handleInviteMember = async () => { if (toInvite.role !== "user" || toInvite !== "admin") setToInvite((prev) => ({ ...prev, role: "user" })); @@ -233,97 +206,97 @@ const TeamPanel = () => { setErrors({}); }; - const handleMembersQuery = (type) => { - let count = 0; - teamStates.members.forEach((member) => { - type === "" ? count++ : member.type === type ? count++ : ""; - }); - return count; - }; return (
-
- - Organization name - - - - setOrgStates((prev) => ({ - ...prev, - name: event.target.value, - })) - } - disabled={!orgStates.isEdit} - sx={{ - color: theme.palette.otherColors.bluishGray, - "& .Mui-disabled": { - WebkitTextFillColor: "initial !important", - }, - "& .Mui-disabled fieldset": { - borderColor: "transparent !important", - }, - }} - inputProps={{ - sx: { textAlign: "end", padding: theme.gap.small }, - }} - /> -
-