Redesign Gang management page

src/Gang/ui/GangMemberAccordion.tsx

@@ -1,36 +0,0 @@
-/**
- * React Component for a gang member on the management subpage.
- */
-import React, { useState } from "react";
-import { GangMember } from "../GangMember";
-import { GangMemberAccordionContent } from "./GangMemberAccordionContent";
-
-import Box from "@mui/material/Box";
-
-import Typography from "@mui/material/Typography";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
-import Paper from "@mui/material/Paper";
-import Collapse from "@mui/material/Collapse";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import ExpandLess from "@mui/icons-material/ExpandLess";
-interface IProps {
-  member: GangMember;
-}
-
-export function GangMemberAccordion(props: IProps): React.ReactElement {
-  const [open, setOpen] = useState(true);
-  return (
-    <Box component={Paper}>
-      <ListItemButton onClick={() => setOpen((old) => !old)}>
-        <ListItemText primary={<Typography>{props.member.name}</Typography>} />
-        {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
-      </ListItemButton>
-      <Collapse in={open} unmountOnExit>
-        <Box sx={{ mx: 4 }}>
-          <GangMemberAccordionContent member={props.member} />
-        </Box>
-      </Collapse>
-    </Box>
-  );
-}

src/Gang/ui/GangMemberAccordionContent.tsx

@@ -1,31 +0,0 @@
-/**
- * React Component for the content of the accordion of gang members on the
- * management subpage.
- */
-import React, { useState } from "react";
-import { GangMemberStats } from "./GangMemberStats";
-import { TaskSelector } from "./TaskSelector";
-import { TaskDescription } from "./TaskDescription";
-import { GangMember } from "../GangMember";
-import Grid from "@mui/material/Grid";
-
-interface IProps {
-  member: GangMember;
-}
-
-export function GangMemberAccordionContent(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  return (
-    <Grid container>
-      <Grid item xs={4}>
-        <GangMemberStats onAscend={() => setRerender((old) => !old)} member={props.member} />
-      </Grid>
-      <Grid item xs={4}>
-        <TaskSelector onTaskChange={() => setRerender((old) => !old)} member={props.member} />
-      </Grid>
-      <Grid item xs={4}>
-        <TaskDescription member={props.member} />
-      </Grid>
-    </Grid>
-  );
-}

src/Gang/ui/GangMemberCard.tsx

@@ -0,0 +1,26 @@
+/**
+ * React Component for a gang member on the management subpage.
+ */
+import React from "react";
+import { GangMember } from "../GangMember";
+import { GangMemberCardContent } from "./GangMemberCardContent";
+
+import Box from "@mui/material/Box";
+
+import ListItemText from "@mui/material/ListItemText";
+import Paper from "@mui/material/Paper";
+
+interface IProps {
+  member: GangMember;
+}
+
+export function GangMemberCard(props: IProps): React.ReactElement {
+  return (
+    <Box component={Paper} sx={{ width: 'auto' }}>
+      <Box sx={{ m: 1 }}>
+        <ListItemText primary={<b>{props.member.name}</b>} />
+        <GangMemberCardContent member={props.member} />
+      </Box>
+    </Box>
+  );
+}

src/Gang/ui/GangMemberCardContent.tsx

@@ -0,0 +1,62 @@
+/**
+ * React Component for the content of the accordion of gang members on the
+ * management subpage.
+ */
+import React, { useState } from "react";
+import { GangMemberStats } from "./GangMemberStats";
+import { TaskSelector } from "./TaskSelector";
+import { AscensionModal } from "./AscensionModal";
+
+import { Box } from "@mui/system";
+import { Button, Typography } from "@mui/material";
+import HelpIcon from "@mui/icons-material/Help";
+
+import { GangMember } from "../GangMember";
+import { StaticModal } from "../../ui/React/StaticModal";
+
+interface IProps {
+  member: GangMember;
+}
+
+export function GangMemberCardContent(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [ascendOpen, setAscendOpen] = useState(false);
+
+  return (
+    <>
+      {props.member.canAscend() && (
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', my: 1 }}>
+          <Button onClick={() => setAscendOpen(true)} style={{ flexGrow: 1, borderRightWidth: 0 }}>Ascend</Button>
+          <AscensionModal
+            open={ascendOpen}
+            onClose={() => setAscendOpen(false)}
+            member={props.member}
+            onAscend={() => setRerender((old) => !old)}
+          />
+          <Button onClick={() => setHelpOpen(true)} style={{ width: 'fit-content', borderLeftWidth: 0 }}>
+            <HelpIcon />
+          </Button>
+          <StaticModal open={helpOpen} onClose={() => setHelpOpen(false)}>
+            <Typography>
+              Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their
+              stat multipliers.
+              <br />
+              <br />
+              The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp
+              they have.
+              <br />
+              <br />
+              Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect
+              equal to the total respect earned by the member.
+            </Typography>
+          </StaticModal>
+        </Box>
+      )}
+      <Box display="grid" sx={{ gridTemplateColumns: '1fr 1fr', width: '100%', gap: 1 }}>
+        <GangMemberStats member={props.member} />
+        <TaskSelector onTaskChange={() => setRerender((old) => !old)} member={props.member} />
+      </Box>
+    </>
+  );
+}

src/Gang/ui/GangMemberList.tsx

@@ -2,23 +2,63 @@
  * React Component for the list of gang members on the management subpage.
  */
 import React, { useState } from "react";
-import { GangMemberAccordion } from "./GangMemberAccordion";
-import { GangMember } from "../GangMember";
+import { GangMemberCard } from "./GangMemberCard";
 import { RecruitButton } from "./RecruitButton";
 import { useGang } from "./Context";
 
+import { Box, TextField } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+
+import { GangMember } from "../GangMember";
+import { OptionSwitch } from "../../ui/React/OptionSwitch";
+
 export function GangMemberList(): React.ReactElement {
   const gang = useGang();
   const setRerender = useState(false)[1];
+  const [filter, setFilter] = useState("");
+  const [ascendOnly, setAscendOnly] = useState(false);
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setFilter(event.target.value.toLowerCase());
+  }
+
+  const members = gang.members
+    .filter((member) => member && member.name.toLowerCase().includes(filter))
+    .filter((member) => {
+      if (ascendOnly) return member.canAscend();
+      return true;
+    });
 
   return (
     <>
       <RecruitButton onRecruit={() => setRerender((old) => !old)} />
-      <ul>
-        {gang.members.map((member: GangMember) => (
-          <GangMemberAccordion key={member.name} member={member} />
+      <TextField
+        value={filter}
+        onChange={handleFilterChange}
+        autoFocus
+        InputProps={{
+          startAdornment: <SearchIcon />,
+          spellCheck: false
+        }}
+        placeholder="Filter by member name"
+        sx={{ m: 1, width: '15%' }}
+      />
+      <OptionSwitch
+        checked={ascendOnly}
+        onChange={(newValue) => (setAscendOnly(newValue))}
+        text="Show only ascendable"
+        tooltip={
+          <>
+            Filter the members list by whether or not the member
+            can be ascended.
+          </>
+        }
+      />
+      <Box display="grid" sx={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
+        {members.map((member: GangMember) => (
+          <GangMemberCard key={member.name} member={member} />
         ))}
-      </ul>
+      </Box>
     </>
   );
 }

src/Gang/ui/GangMemberStats.tsx

@@ -2,26 +2,31 @@
  * React Component for the first part of a gang member details.
  * Contains skills and exp.
  */
-import React, { useState } from "react";
-import { formatNumber } from "../../utils/StringHelperFunctions";
-import { numeralWrapper } from "../../ui/numeralFormat";
-import { GangMember } from "../GangMember";
-import { AscensionModal } from "./AscensionModal";
+import React from "react";
+import { useGang } from "./Context";
+
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-import { StaticModal } from "../../ui/React/StaticModal";
-import IconButton from "@mui/material/IconButton";
-import HelpIcon from "@mui/icons-material/Help";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@mui/material";
+
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { GangMember } from "../GangMember";
+import { Settings } from "../../Settings/Settings";
+import { formatNumber } from "../../utils/StringHelperFunctions";
+import { MoneyRate } from "../../ui/React/MoneyRate";
+import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
 
 interface IProps {
   member: GangMember;
-  onAscend: () => void;
 }
 
 export function GangMemberStats(props: IProps): React.ReactElement {
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [ascendOpen, setAscendOpen] = useState(false);
+  const classes = useStyles();
 
   const asc = {
     hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
@@ -32,6 +37,29 @@ export function GangMemberStats(props: IProps): React.ReactElement {
     cha: props.member.calculateAscensionMult(props.member.cha_asc_points),
   };
 
+  const generateTableRow = (name: string, level: number, exp: number, color: string): React.ReactElement => {
+    return (
+      <TableRow>
+        <TableCell classes={{ root: classes.cellNone }}>
+          <Typography style={{ color: color }}>{name}</Typography>
+        </TableCell>
+        <TableCell align="right" classes={{ root: classes.cellNone }}>
+          <Typography style={{ color: color }}>
+            {formatNumber(level, 0)} ({numeralWrapper.formatExp(exp)} exp)
+          </Typography>
+        </TableCell>
+      </TableRow>
+    )
+  }
+
+  const gang = useGang();
+  const data = [
+    [`Money:`, <MoneyRate money={5 * props.member.calculateMoneyGain(gang)} />],
+    [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(gang))} / sec`],
+    [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(gang))} / sec`],
+    [`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`],
+  ];
+
   return (
     <>
       <Tooltip
@@ -63,50 +91,28 @@ export function GangMemberStats(props: IProps): React.ReactElement {
           </Typography>
         }
       >
-        <Typography>
-          Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp)
-          <br />
-          Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp)
-          <br />
-          Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp)
-          <br />
-          Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp)
-          <br />
-          Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp)
-          <br />
-          Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp)
-          <br />
-        </Typography>
+        <Table sx={{ display: 'table', mb: 1, width: '100%' }}>
+          <TableBody>
+            {generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack)}
+            {generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat)}
+            {generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat)}
+            {generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat)}
+            {generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat)}
+            {generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha)}
+            <br />
+            {data.map(([a, b]) => (
+              <TableRow>
+                <TableCell classes={{ root: classes.cellNone }}>
+                  <Typography>{a}</Typography>
+                </TableCell>
+                <TableCell align="right" classes={{ root: classes.cellNone }}>
+                  <Typography>{b}</Typography>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </Tooltip>
-      <br />
-      {props.member.canAscend() && (
-        <>
-          <Button onClick={() => setAscendOpen(true)}>Ascend</Button>
-          <AscensionModal
-            open={ascendOpen}
-            onClose={() => setAscendOpen(false)}
-            member={props.member}
-            onAscend={props.onAscend}
-          />
-          <IconButton onClick={() => setHelpOpen(true)}>
-            <HelpIcon />
-          </IconButton>
-          <StaticModal open={helpOpen} onClose={() => setHelpOpen(false)}>
-            <Typography>
-              Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their
-              stat multipliers.
-              <br />
-              <br />
-              The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp
-              they have.
-              <br />
-              <br />
-              Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect
-              equal to the total respect earned by the member.
-            </Typography>
-          </StaticModal>
-        </>
-      )}
     </>
   );
 }

src/Gang/ui/RecruitButton.tsx

@@ -24,18 +24,20 @@ export function RecruitButton(props: IProps): React.ReactElement {
   if (!gang.canRecruitMember()) {
     const respect = gang.getRespectNeededToRecruitMember();
     return (
-      <Box display="flex" alignItems="center">
-        <Button sx={{ mx: 1 }} disabled>
+      <Box display="flex" alignItems="center" sx={{ mx: 1 }}>
+        <Button disabled>
           Recruit Gang Member
         </Button>
-        <Typography>{numeralWrapper.formatRespect(respect)} respect needed to recruit next member</Typography>
+        <Typography sx={{ ml: 1 }}>{numeralWrapper.formatRespect(respect)} respect needed to recruit next member</Typography>
       </Box>
     );
   }
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Recruit Gang Member</Button>
+      <Box sx={{ mx: 1 }}>
+        <Button onClick={() => setOpen(true)}>Recruit Gang Member</Button>
+      </Box>
       <RecruitModal open={open} onClose={() => setOpen(false)} onRecruit={props.onRecruit} />
     </>
   );

src/Gang/ui/TaskSelector.tsx

@@ -3,14 +3,15 @@
  * the task selector as well as some stats.
  */
 import React, { useState } from "react";
-import { numeralWrapper } from "../../ui/numeralFormat";
-import { StatsTable } from "../../ui/React/StatsTable";
-import { MoneyRate } from "../../ui/React/MoneyRate";
 import { useGang } from "./Context";
-import { GangMember } from "../GangMember";
+import { TaskDescription } from "./TaskDescription";
+
+import { Box } from "@mui/material";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 
+import { GangMember } from "../GangMember";
+
 interface IProps {
   member: GangMember;
   onTaskChange: () => void;
@@ -29,16 +30,9 @@ export function TaskSelector(props: IProps): React.ReactElement {
 
   const tasks = gang.getAllTaskNames();
 
-  const data = [
-    [`Money:`, <MoneyRate money={5 * props.member.calculateMoneyGain(gang)} />],
-    [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(gang))} / sec`],
-    [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(gang))} / sec`],
-    [`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`],
-  ];
-
   return (
-    <>
-      <Select onChange={onChange} value={currentTask}>
+    <Box>
+      <Select onChange={onChange} value={currentTask} sx={{ width: '100%' }}>
         <MenuItem key={0} value={"Unassigned"}>
           Unassigned
         </MenuItem>
@@ -48,8 +42,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
           </MenuItem>
         ))}
       </Select>
-
-      <StatsTable rows={data} />
-    </>
+      <TaskDescription member={props.member} />
+    </Box>
   );
 }