Align tables a bit better and add setting to show icons instead of product texts

src/app/components/MainGrid.tsx

@@ -153,7 +153,7 @@ export const MainGrid = () => {
               <Grid
                 container
                 spacing={1}
-                sx={{ padding: 1 }}
+                sx={{ padding: 1, width: '100%' }}
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -1,5 +1,5 @@
 import { ColorContext, SessionContext } from "@/app/context/Context";
-import { PI_TYPES_MAP, STORAGE_IDS, STORAGE_CAPACITIES, PI_PRODUCT_VOLUMES } from "@/const";
+import { PI_TYPES_MAP, STORAGE_IDS, STORAGE_CAPACITIES, PI_PRODUCT_VOLUMES, EVE_IMAGE_URL } from "@/const";
 import { planetCalculations } from "@/planets";
 import { AccessToken, PlanetWithInfo } from "@/types";
 import CloseIcon from "@mui/icons-material/Close";
@@ -41,6 +41,7 @@ export const PlanetTableRow = ({
   character: AccessToken;
 }) => {
   const theme = useTheme();
+  const { showProductIcons } = useContext(SessionContext);
 
   const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
   const [planetConfigOpen, setPlanetConfigOpen] = useState(false);
@@ -153,6 +154,39 @@ export const PlanetTableRow = ({
     });
   };
 
+  const renderProductDisplay = (typeId: number, amount?: number) => {
+    if (showProductIcons) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
+          <Image
+            src={`${EVE_IMAGE_URL}/types/${typeId}/icon?size=32`}
+            alt={PI_TYPES_MAP[typeId].name}
+            width={32}
+            height={32}
+            style={{ marginRight: "5px" }}
+          />
+          {amount !== undefined && (
+            <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
+              {amount}/h
+            </Typography>
+          )}
+        </div>
+      );
+    }
+    return (
+      <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+        <Typography fontSize={theme.custom.smallText}>
+          {PI_TYPES_MAP[typeId].name}
+        </Typography>
+        {amount !== undefined && (
+          <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
+            {amount}/h
+          </Typography>
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       <TableRow
@@ -238,11 +272,12 @@ export const PlanetTableRow = ({
         <TableCell className="clickable-cell">{planet.upgrade_level}</TableCell>
         <TableCell className="clickable-cell">
           <div style={{ display: "flex", flexDirection: "column" }}>
+            {extractors.length === 0 &&<Typography fontSize={theme.custom.smallText}>No extractors</Typography>}
             {extractors.map((e, idx) => {
               return (
                 <div
                   key={`${e}-${idx}-${character.character.characterId}`}
-                  style={{ display: "flex" }}
+                  style={{ display: "flex", alignItems: "center" }}
                 >
                   <Typography
                     color={timeColor(e.expiry_time, colors)}
@@ -258,12 +293,7 @@ export const PlanetTableRow = ({
                       "STOPPED"
                     )}
                   </Typography>
-                  <Typography fontSize={theme.custom.smallText}>
+                  {renderProductDisplay(e.extractor_details?.product_type_id ?? 0)}
-                    {
-                      PI_TYPES_MAP[e.extractor_details?.product_type_id ?? 0]
-                        ?.name
-                    }
-                  </Typography>
                 </div>
               );
             })}
@@ -273,12 +303,12 @@ export const PlanetTableRow = ({
           <div style={{ display: "flex", flexDirection: "column" }}>
             {Array.from(localProduction).map((schematic, idx) => {
               return (
-                <Typography
+                <div
                   key={`prod-${character.character.characterId}-${planet.planet_id}-${idx}`}
-                  fontSize={theme.custom.smallText}
+                  style={{ display: "flex", alignItems: "center" }}
                 >
-                  {schematic[1].name}
+                  {renderProductDisplay(schematic[1].outputs[0].type_id)}
-                </Typography>
+                </div>
               );
             })}
           </div>
@@ -286,24 +316,24 @@ export const PlanetTableRow = ({
         <TableCell className="clickable-cell">
           <div style={{ display: "flex", flexDirection: "column" }}>
             {localImports.map((i) => (
-              <Typography
+              <div
                 key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
-                fontSize={theme.custom.smallText}
+                style={{ display: "flex", alignItems: "center" }}
               >
-                {PI_TYPES_MAP[i.type_id].name} ({i.quantity * i.factoryCount}/h)
+                {renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
-              </Typography>
+              </div>
             ))}
           </div>
         </TableCell>
         <TableCell className="clickable-cell">
           <div style={{ display: "flex", flexDirection: "column" }}>
             {localExports.map((exports) => (
-              <Typography
+              <div
                 key={`export-${character.character.characterId}-${planet.planet_id}-${exports.typeId}`}
-                fontSize={theme.custom.smallText}
+                style={{ display: "flex", alignItems: "center" }}
               >
-                {PI_TYPES_MAP[exports.typeId].name}
+                {renderProductDisplay(exports.typeId, exports.amount)}
-              </Typography>
+              </div>
             ))}
           </div>
         </TableCell>
@@ -371,6 +401,7 @@ export const PlanetTableRow = ({
         </TableCell>
         <TableCell className="clickable-cell">
           <div style={{ display: "flex", flexDirection: "column" }}>
+            {storageFacilities.length === 0 &&<Typography fontSize={theme.custom.smallText}>No storage</Typography>}
             {storageFacilities
               .sort((a, b) => {
                 const isALaunchpad = a.type_id === 2256 || a.type_id === 2542 || a.type_id === 2543 || a.type_id === 2544 || a.type_id === 2552 || a.type_id === 2555 || a.type_id === 2556 || a.type_id === 2557;

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -36,8 +36,8 @@ const PlanetaryIteractionTable = ({
 
   return (
     <StackItem width="100%">
-      <TableContainer component={Paper}>
+      <TableContainer component={Paper} sx={{ width: '100%' }}>
-        <Table size="small" aria-label="a dense table">
+        <Table size="small" aria-label="a dense table" sx={{ width: '100%' }}>
           <TableHead>
             <TableRow>
               <TableCell width="8%">

src/app/components/Settings/SettingsButtons.tsx

@@ -13,13 +13,15 @@ import {
   Typography,
   TextField,
   Box,
+  FormControlLabel,
+  Checkbox,
 } from "@mui/material";
 import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
 import React, { useState, useContext } from "react";
 
 export const SettingsButton = () => {
   const { colors, setColors } = useContext(ColorContext);
-  const { balanceThreshold, setBalanceThreshold } = useContext(SessionContext);
+  const { balanceThreshold, setBalanceThreshold, showProductIcons, setShowProductIcons } = useContext(SessionContext);
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -45,6 +47,10 @@ export const SettingsButton = () => {
     }
   };
 
+  const handleShowProductIconsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setShowProductIcons(event.target.checked);
+  };
+
   return (
     <Tooltip title="Toggle settings dialog">
       <>
@@ -57,13 +63,24 @@ export const SettingsButton = () => {
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
         >
-
           <DialogTitle id="alert-dialog-title">
             {"Settings"}
           </DialogTitle>
 
           <DialogContent style={{ paddingTop: "1rem" }}>
-          <Box sx={{ mt: 2 }}>
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="subtitle1">Display Settings</Typography>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={showProductIcons}
+                    onChange={handleShowProductIconsChange}
+                  />
+                }
+                label="Show product icons instead of names"
+              />
+            </Box>
+            <Box sx={{ mt: 2 }}>
               <Typography variant="subtitle1">Balance Threshold</Typography>
               <TextField
                 type="number"
@@ -87,7 +104,6 @@ export const SettingsButton = () => {
                 </div>
               );
             })}
-            
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose}>Close</Button>

src/app/components/Summary/Summary.tsx

@@ -199,8 +199,8 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
               sx={{ width: '100px' }}
             />
           </Box>
-          <TableContainer component={Paper}>
+          <TableContainer component={Paper} sx={{ width: '100%' }}>
-            <Table size="small" aria-label="a dense table">
+            <Table size="small" aria-label="a dense table" sx={{ width: '100%' }}>
               <TableHead>
                 <TableRow>
                   <TableCell width="20%">

src/app/context/Context.tsx

@@ -37,6 +37,8 @@ export const SessionContext = createContext<{
   }) => PlanetConfig;
   balanceThreshold: number;
   setBalanceThreshold: Dispatch<SetStateAction<number>>;
+  showProductIcons: boolean;
+  setShowProductIcons: (show: boolean) => void;
 }>({
   sessionReady: false,
   refreshSession: () => {},
@@ -62,7 +64,10 @@ export const SessionContext = createContext<{
   },
   balanceThreshold: 1000,
   setBalanceThreshold: () => {},
+  showProductIcons: false,
+  setShowProductIcons: () => {},
 });
+
 export type ColorSelectionType = {
   defaultColor: string;
   expiredColor: string;
@@ -84,6 +89,7 @@ export const defaultColors = {
   dayColor: "#2F695A",
   twoDaysColor: "#2F695A",
 };
+
 export const ColorContext = createContext<{
   colors: ColorSelectionType;
   setColors: (colors: ColorSelectionType) => void;

src/app/page.tsx

@@ -30,6 +30,7 @@ const Home = () => {
     undefined,
   );
   const [balanceThreshold, setBalanceThreshold] = useState(1000);
+  const [showProductIcons, setShowProductIcons] = useState(false);
 
   const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
   const [alertMode, setAlertMode] = useState(false);
@@ -278,6 +279,8 @@ const Home = () => {
         readPlanetConfig,
         balanceThreshold,
         setBalanceThreshold,
+        showProductIcons,
+        setShowProductIcons,
       }}
     >
       <CharacterContext.Provider