Add mass collapse and expand

src/app/components/Account/AccountCard.tsx

@@ -3,7 +3,7 @@ import { Box, Stack, Typography, useTheme, Paper, IconButton } from "@mui/materi
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
 import { SessionContext } from "@/app/context/Context";
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import { PlanRow } from "./PlanRow";
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
@@ -60,12 +60,17 @@ const calculateAccountTotals = (characters: AccessToken[], piPrices: EvePraisalR
   };
 };
 
-export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
+export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { characters: AccessToken[], isCollapsed?: boolean }) => {
   const theme = useTheme();
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [localIsCollapsed, setLocalIsCollapsed] = useState(false);
   const { planMode, piPrices } = useContext(SessionContext);
   const { monthlyEstimate, storageValue } = calculateAccountTotals(characters, piPrices);
 
+  // Update local collapse state when prop changes
+  useEffect(() => {
+    setLocalIsCollapsed(propIsCollapsed ?? false);
+  }, [propIsCollapsed]);
+
   return (
     <Paper
       elevation={2}
@@ -134,16 +139,16 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
           </Box>
           <IconButton 
             size="small" 
-            onClick={() => setIsCollapsed(!isCollapsed)}
+            onClick={() => setLocalIsCollapsed(!localIsCollapsed)}
             sx={{ 
-              transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+              transform: localIsCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
               transition: 'transform 0.2s ease-in-out'
             }}
           >
-            {isCollapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            {localIsCollapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </Box>
-        {!isCollapsed && characters.map((c) => (
+        {!localIsCollapsed && characters.map((c) => (
           <Stack
             key={c.character.characterId}
             direction="row"

src/app/components/MainGrid.tsx

@@ -5,6 +5,7 @@ import {
   Grid,
   ThemeProvider,
   createTheme,
+  Button,
 } from "@mui/material";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
@@ -12,6 +13,8 @@ import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
 import { Summary } from "./Summary/Summary";
 import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -41,6 +44,7 @@ declare module "@mui/material/styles" {
 export const MainGrid = () => {
   const { characters, updateCharacter } = useContext(CharacterContext);
   const [accountOrder, setAccountOrder] = useState<string[]>([]);
+  const [allCollapsed, setAllCollapsed] = useState(false);
 
   // Initialize account order when characters change
   useEffect(() => {
@@ -134,6 +138,15 @@ export const MainGrid = () => {
       <Box sx={{ flexGrow: 1 }}>
         <ResponsiveAppBar />
         {compactMode ? <></> : <Summary characters={characters} />}
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start', padding: 1 }}>
+          <Button
+            startIcon={allCollapsed ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
+            onClick={() => setAllCollapsed(!allCollapsed)}
+            size="small"
+          >
+            {allCollapsed ? 'Expand All' : 'Collapse All'}
+          </Button>
+        </Box>
         <DragDropContextComponent onDragEnd={handleDragEnd}>
           <DroppableComponent droppableId="accounts">
             {(provided: any) => (
@@ -165,7 +178,10 @@ export const MainGrid = () => {
                         }}
                       >
                         {groupByAccount[account] && groupByAccount[account].length > 0 && (
-                          <AccountCard characters={groupByAccount[account]} />
+                          <AccountCard 
+                            characters={groupByAccount[account]} 
+                            isCollapsed={allCollapsed}
+                          />
                         )}
                       </Grid>
                     )}