src/components/Boxes.js

@@ -1,6 +1,6 @@
 // src/components/Boxes.js
 import React, { useEffect, useState } from 'react';
-import { Container, Button, TextField, List, ListItem, ListItemText, IconButton } from '@mui/material';
+import { Container, Button, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
 import axios from 'axios';
@@ -51,6 +51,33 @@ export default function Boxes({ token }) {
 
   return (
     <Container>
+
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Box Name</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {boxes.map((box) => (
+              <TableRow key={box.ID}>
+                <TableCell>
+                  <RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}>
+                    {box.name}
+                  </RouterLink>
+                </TableCell>
+                <TableCell>
+                  <Button onClick={() => handleDeleteBox(box.ID)} startIcon={<DeleteIcon />}>
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
       <TextField
         label="New Box"
         variant="outlined"
@@ -61,23 +88,6 @@ export default function Boxes({ token }) {
       <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
         Add Box
       </Button>
-      <List>
-        {boxes.map((box) => (
-          <ListItem key={box.ID} secondaryAction={
-            <IconButton edge="end" onClick={() => handleDeleteBox(box.ID)}>
-              <DeleteIcon />
-            </IconButton>
-          }>
-            <ListItemText 
-              primary={
-                <RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}> {/* Use Link component */}
-                  {box.name}
-                </RouterLink>
-              } 
-            />
-          </ListItem>
-        ))}
-      </List>
     </Container>
   );
 }

src/components/ItemDetails.js

@@ -1,6 +1,6 @@
 // src/components/ItemDetails.js
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { TextField, Button, Container, Avatar } from '@mui/material';
+import { TextField, Button, Container, Avatar, Tooltip } from '@mui/material';
 import axios from 'axios';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 //import { useNavigate } from 'react-router-dom'; // Import useNavigate
@@ -195,13 +195,15 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
       <h3>Edit Item: {item.name}</h3>
 
       {/* Display the item image as an avatar */}
-      <Avatar
-        src={imageSrc}
-        alt={name}
-        onError={handleImageError}
-        sx={{ width: 100, height: 100, marginBottom: '16px' }} // Style the Avatar
-        onClick={handleAvatarClick}
-      />
+      <Tooltip title="Click to enlarge">
+        <Avatar
+          src={imageSrc}
+          alt={name}
+          onError={handleImageError}
+          sx={{ width: 200, height: 200, marginBottom: '16px' }} // Style the Avatar
+          onClick={handleAvatarClick}
+        />
+      </Tooltip>  
       {imageOverlayVisible && (
         <div className="image-overlay">
           <img src={imageSrc} alt={name} />
@@ -233,6 +235,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
         margin="normal"
         value={imagePath}
         onChange={(e) => setImagePath(e.target.value)} 
+        sx={{ display: 'none' }}
       />
       <input 
         type="file" 

src/components/Items.js

@@ -14,7 +14,16 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Box,
+  Tooltip
 } from '@mui/material';
+
 import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
 import axios from 'axios';
 import { useParams, useLocation } from 'react-router-dom'; 
@@ -377,44 +386,54 @@ export default function Items({ token }) {
           boxId={boxId}
           />
       ) : (
-        <List>
-          {items
-            .filter(item =>
-              item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-              item.description.toLowerCase().includes(searchQuery.toLowerCase())
-            )
-            .map((item) => (
-          <ListItem key={item.ID} secondaryAction={
-            <>
-              <IconButton edge="end" onClick={() => handleEditItem(item)}>
-                <EditIcon />
-              </IconButton>
-              <IconButton edge="end" sx={{ marginLeft: 4 }} onClick={() => handleDeleteItem(item.ID)}>
-                <DeleteIcon />
-              </IconButton>
-            </>
-          }>
-            <ListItemAvatar> 
-              <Avatar
-                src={itemImages[item.ID]} 
-                alt={item.name}
-                onError={handleImageError} 
-              />
-            </ListItemAvatar>
-            <ListItemText 
-              primary={item.name} 
-              secondary={
-                <>
-                  <Typography variant="body2">{item.description}</Typography>
-                  {item.image_path && (
-                    <Typography variant="caption">Image: {item.image_path}</Typography>
-                  )}
-                </>
-              } 
-            />
-          </ListItem>
-        ))}
-        </List>
+        <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ width: '40px' }}>Image</TableCell>
+              <TableCell style={{ width: '100px' }}>Name</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {items
+              .filter(item =>
+                item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                item.description.toLowerCase().includes(searchQuery.toLowerCase())
+              )
+              .map((item) => (
+                <TableRow key={item.ID}>
+                  <TableCell>
+                    <Avatar src={itemImages[item.ID] || '/images/default.jpg'} />
+                  </TableCell>
+                  <TableCell>{item.name}</TableCell>
+                  <TableCell>{item.description}</TableCell>
+                  <Box display="flex" justifyContent="space-between" width="100%">
+                    <Tooltip title="Edit Item">
+                      <IconButton 
+                        onClick={() => handleEditItem(item)}
+                        size="large"
+                        sx={{ mr: 1 }}
+                      >
+                        <EditIcon />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete Item">
+                      <IconButton 
+                        onClick={() => handleDeleteItem(item.ID)}
+                        size="large"
+                        color="error"
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
       )}
     </Container>
   );