package-lock.json

@@ -16,7 +16,6 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.7.7",
-        "lucide-react": "^0.454.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.2",
@@ -13982,15 +13981,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.454.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
-      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

package.json

@@ -11,7 +11,6 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
-    "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

src/App.js

@@ -8,9 +8,7 @@ import Items from './components/Items';
 import Navbar from './components/Navbar';  // Correct import here
 import Admin from './components/Admin';  // Correct import here
 import { createContext } from 'react';
-import ErrorBoundary from './components/ErrorBoundary';
 import './styles.css'
-import { EnhancedThemeProvider } from './components/themeProvider';
 
 export const AppContext = createContext();
 export const PRIMARY_COLOR = '#333';
@@ -27,16 +25,12 @@ function App() {
   }, [token]);
 
   return (
-    <EnhancedThemeProvider>
+    <AppContext.Provider value={{ token, setToken }}>
-      <AppContext.Provider value={{ token, setToken }}>
+      <Router>
-        <ErrorBoundary>
+        <Navbar />
-          <Router>
+        <AppRoutes token={token} setToken={setToken} />
-            <Navbar />
+      </Router>
-            <AppRoutes token={token} setToken={setToken} />
+    </AppContext.Provider>
-          </Router>
-        </ErrorBoundary>
-      </AppContext.Provider>
-    </EnhancedThemeProvider>
   );
 }
 

src/components/Admin.js

@@ -1,309 +1,201 @@
+// src/components/Admin.js
 import React, { useState, useEffect, useRef } from 'react';
-// import axios from 'axios';
 import { Link, useNavigate } from 'react-router-dom';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
-import './Admin.css';
-import { useApiCall } from './hooks/useApiCall';
 import { api } from '../services/api';
+import './Admin.css'; // Import the CSS file
 import { 
-  Typography, 
+    Typography, 
-  Table, 
+    Table, 
-  TableBody, 
+    TableBody, 
-  TableCell, 
+    TableCell, 
-  TableContainer, 
+    TableContainer, 
-  TableHead, 
+    TableHead, 
-  TableRow, 
+    TableRow, 
-  Paper, 
+    Paper, 
-  Button, 
+    Button, 
-  Alert,
+    Alert,
-  Container,
+    Container,
-  Box,
+    Box,
-  TextField,
+    TextField,
-  CircularProgress,
+    Tab
-  Tab,
+  } from '@mui/material';
-  Tabs
-} from '@mui/material';
 
-export default function Admin() {
-  const [users, setUsers] = useState([]);
-  const [tags, setTags] = useState([]);
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [activeTab, setActiveTab] = useState(0);
-  const navigate = useNavigate();
-  const fileInputRef = useRef(null);
 
-  const { execute: fetchUsers, loading: loadingUsers, error: usersError } = useApiCall();
+  export default function Admin() {
-  const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
+    const [users, setUsers] = useState([]);
-  const { execute: createUser, loading: creatingUser, error: createError } = useApiCall();
+    const [username, setUsername] = useState('');
-  const { execute: deleteUser, loading: deletingUser, error: deleteError } = useApiCall();
+    const [email, setEmail] = useState('');
-  const { execute: deleteTag, loading: deletingTag, error: deleteTagError } = useApiCall();
+    const [password, setPassword] = useState('');
-  const { execute: backupDB, loading: backingUp, error: backupError } = useApiCall();
+    const navigate = useNavigate();
-  const { execute: restoreDB, loading: restoring, error: restoreError } = useApiCall();
+    const fileInputRef = useRef(null);
   
-  useEffect(() => {
+    useEffect(() => {
-    const getInitialData = async () => {
+      fetchUsers();
+    }, []);
+  
+    const fetchUsers = async () => {
       try {
-        const [usersResponse, tagsResponse] = await Promise.all([
+        const response = await api.admin.getUsers(localStorage.getItem('token'));
-          fetchUsers(() => api.admin.getUsers(localStorage.getItem('token'))),
+        setUsers(response.data);
-          fetchTags(() => api.tags.getAll(localStorage.getItem('token')))
+      } catch (error) {
-        ]);
+        console.error('Error fetching users:', error);
-        setUsers(usersResponse.data);
+      }
-        setTags(tagsResponse.data);
-      } catch (err) {}
     };
-    getInitialData();
-  }, []);
   
-  const handleCreateUser = async (e) => {
+    const handleCreateUser = async (e) => {
-    e.preventDefault();
+      e.preventDefault();
-    try {
+      try {
-      const response = await createUser(() => 
+        const response = await api.admin.createUser(localStorage.getItem('token'), {
-        api.admin.createUser(
+          username,
-          localStorage.getItem('token'),
+          password,
-          { username, password, email }
+          email
-        )
+        });
-      );
+        setUsers([...users, response.data]);
-      setUsers([...users, response.data]);
+        setUsername('');
-      setUsername('');
+        setPassword('');
-      setPassword('');
+        setEmail('');
-      setEmail('');
+      } catch (error) {
-    } catch (err) {}
+        console.error(error);
-  };
+      }
+    };
   
-  const handleDeleteUser = async (id) => {
+    const handleDeleteUser = async (id) => {
-    try {
+      try {
-      await deleteUser(() => 
+        await api.admin.deleteUser(localStorage.getItem('token'), id);
-        api.admin.deleteUser(localStorage.getItem('token'), id)
+        setUsers(users.filter(user => user.id !== id));
-      );
+        fetchUsers();
-      setUsers(users.filter(user => user.id !== id));
+      } catch (error) {
-    } catch (err) {}
+        console.error(error);
-  };
+      }
+    };
   
-  const handleDeleteTag = async (tagId) => {
+    const handleBackupDatabase = async () => {
-    if (!window.confirm('Are you sure you want to delete this tag? This will remove it from all items.')) {
+      try {
-      return;
+        const response = await api.admin.backupDb(localStorage.getItem('token'));
-    }
+        const blob = new Blob([response.data], { type: 'application/x-sqlite3' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'database.db';
+        a.click();
+      } catch (error) {
+        console.error(error);
+      }
+    };
   
-    try {
+    const handleRestoreDatabase = async (e) => {
-      await deleteTag(() => 
+      e.preventDefault();
-        api.tags.delete(localStorage.getItem('token'), tagId)
+      try {
-      );
+        const file = fileInputRef.current.files[0];
-      setTags(tags.filter(tag => tag.ID !== tagId));
+        const formData = new FormData();
-    } catch (err) {}
+        formData.append('database', file);
-  };
   
-  const handleBackupDatabase = async () => {
+        const response = await api.admin.restoreDb(localStorage.getItem('token'), formData);
-    try {
-      const response = await backupDB(() => 
-        api.admin.backupDB(localStorage.getItem('token'))
-      );
-      const blob = new Blob([response.data], { type: 'application/x-sqlite3' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'database.db';
-      a.click();
-    } catch (err) {}
-  };
         
-  const handleRestoreDatabase = async (e) => {
+        if (response.status === 200) {
-    e.preventDefault();
+          alert('Database restored successfully');
-    if (!fileInputRef.current?.files?.[0]) return;
+          navigate('/admin');
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
   
-    try {
-      const formData = new FormData();
-      formData.append('database', fileInputRef.current.files[0]);
-
-      await restoreDB(() => 
-        api.admin.restoreDB(localStorage.getItem('token'), formData)
-      );
-      alert('Database restored successfully');
-      navigate('/admin');
-    } catch (err) {}
-  };
 
   return (
     <Container maxWidth="md">
       <Typography variant="h4" gutterBottom>
-        Admin Dashboard
+        Admin
       </Typography>
       
-      {(usersError || createError || deleteError || backupError || restoreError || tagsError || deleteTagError) && (
+      <Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Typography variant="h6" gutterBottom>
-          {usersError?.message || createError?.message || deleteError?.message || 
+          Add New User
-           backupError?.message || restoreError?.message || tagsError?.message || deleteTagError?.message}
+        </Typography>
-        </Alert>
+        <TextField
-      )}
+          label="Username"
+          variant="outlined"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          sx={{ mr: 2 }}
+        />
+        <TextField
+          label="Password"
+          type="password"
+          variant="outlined"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          sx={{ mr: 2 }}
+        />
+        <TextField
+          label="Email"
+          variant="outlined"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          sx={{ mr: 2 }}
+        />
+        <Button type="submit" sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary">
+          Add User
+        </Button>
+      </Box>
 
-      <Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)} sx={{ mb: 3 }}>
+      <TableContainer component={Paper}>
-        <Tab label="Users" />
+        <Table>
-        <Tab label="Tags" />
+          <TableHead>
-        <Tab label="Database" />
+            <TableRow>
-      </Tabs>
+              <TableCell>ID</TableCell>
+              <TableCell>Username</TableCell>
+              <TableCell>Email</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {users.map(user => (
+              <TableRow key={user.ID}>
+                <TableCell style={{ width: '30px' }}>{user.ID}</TableCell>
+                <TableCell style={{ width: '100px'}}>{user.username}</TableCell>
+                <TableCell style={{ width: '300px'}}>{user.email}</TableCell>
+                <TableCell>
+                  <Button 
+                    variant="contained" 
+                    color="error" 
+                    onClick={() => handleDeleteUser(user.ID)}
+                  >
+                    Delete User
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
-      {activeTab === 0 && (
+      <Box sx={{ mt: 4 }}>
-        <>
+        <Button 
-          <Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
+          variant="contained" 
-            <Typography variant="h6" gutterBottom>
+          color="primary" 
-              Add New User
+          onClick={handleBackupDatabase}
-            </Typography>
+          sx={{ mr: 2, backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR  }}
-            <TextField
+        >
-              label="Username"
+          Backup Database
-              variant="outlined"
+        </Button>
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              sx={{ mr: 2 }}
-              disabled={creatingUser}
-            />
-            <TextField
-              label="Password"
-              type="password"
-              variant="outlined"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              sx={{ mr: 2 }}
-              disabled={creatingUser}
-            />
-            <TextField
-              label="Email"
-              variant="outlined"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              sx={{ mr: 2 }}
-              disabled={creatingUser}
-            />
-            <Button 
-              type="submit" 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} 
-              variant="contained"
-              disabled={creatingUser}
-            >
-              {creatingUser ? <CircularProgress size={24} /> : 'Add User'}
-            </Button>
-          </Box>
 
-          {loadingUsers ? (
+        <Button 
-            <CircularProgress />
+          variant="contained" 
-          ) : (
+          color="secondary" 
-            <TableContainer component={Paper}>
+          component="label"
-              <Table>
+          sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
-                <TableHead>
+        >
-                  <TableRow>
+          Restore Database
-                    <TableCell>ID</TableCell>
+          <input
-                    <TableCell>Username</TableCell>
+            type="file"
-                    <TableCell>Email</TableCell>
+            hidden
-                    <TableCell>Actions</TableCell>
+            ref={fileInputRef}
-                  </TableRow>
+            onChange={handleRestoreDatabase}
-                </TableHead>
+          />
-                <TableBody>
+        </Button>
-                  {users.map(user => (
+      </Box>
-                    <TableRow key={user.ID}>
-                      <TableCell>{user.ID}</TableCell>
-                      <TableCell>{user.username}</TableCell>
-                      <TableCell>{user.email}</TableCell>
-                      <TableCell>
-                        <Button 
-                          variant="contained" 
-                          color="error" 
-                          onClick={() => handleDeleteUser(user.ID)}
-                          disabled={deletingUser}
-                        >
-                          {deletingUser ? <CircularProgress size={24} /> : 'Delete User'}
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          )}
-        </>
-      )}
-
-      {activeTab === 1 && (
-        <>
-          <Typography variant="h6" gutterBottom>
-            Manage Tags
-          </Typography>
-          {loadingTags ? (
-            <CircularProgress />
-          ) : (
-            <TableContainer component={Paper}>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Color</TableCell>
-                    <TableCell>Name</TableCell>
-                    <TableCell>Description</TableCell>
-                    <TableCell>Actions</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {tags.map(tag => (
-                    <TableRow key={tag.ID}>
-                      <TableCell>
-                        <Box
-                          sx={{
-                            width: 24,
-                            height: 24,
-                            backgroundColor: tag.color,
-                            borderRadius: '50%'
-                          }}
-                        />
-                      </TableCell>
-                      <TableCell>{tag.name}</TableCell>
-                      <TableCell>{tag.description}</TableCell>
-                      <TableCell>
-                        <Button 
-                          variant="contained" 
-                          color="error" 
-                          onClick={() => handleDeleteTag(tag.ID)}
-                          disabled={deletingTag}
-                        >
-                          {deletingTag ? <CircularProgress size={24} /> : 'Delete Tag'}
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          )}
-        </>
-      )}
-
-      {activeTab === 2 && (
-        <Box sx={{ mt: 4 }}>
-          <Typography variant="h6" gutterBottom>
-            Database Management
-          </Typography>
-          <Button 
-            variant="contained" 
-            onClick={handleBackupDatabase}
-            sx={{ mr: 2, backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
-            disabled={backingUp}
-          >
-            {backingUp ? <CircularProgress size={24} /> : 'Backup Database'}
-          </Button>
-
-          <Button 
-            variant="contained" 
-            component="label"
-            sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
-            disabled={restoring}
-          >
-            {restoring ? <CircularProgress size={24} /> : 'Restore Database'}
-            <input
-              type="file"
-              hidden
-              ref={fileInputRef}
-              onChange={handleRestoreDatabase}
-            />
-          </Button>
-        </Box>
-      )}
     </Container>
   );
 }

src/components/Boxes.js

@@ -1,161 +1,86 @@
+// src/components/Boxes.js
 import React, { useEffect, useState } from 'react';
-import { 
+import { Container, Button, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-  Container, 
+import { Delete as DeleteIcon } from '@mui/icons-material';
-  Button, 
+import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
-  TextField, 
-  Table, 
-  TableBody, 
-  TableCell, 
-  TableContainer, 
-  TableHead, 
-  TableRow,
-  Alert,
-  CircularProgress,
-  Avatar,
-  Box
-} from '@mui/material';
-import { Delete as DeleteIcon, Inventory as InventoryIcon } from '@mui/icons-material';
-import { Link as RouterLink } from 'react-router-dom';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
-import { useApiCall } from './hooks/useApiCall';
 import { api } from '../services/api';
 
 export default function Boxes({ token }) {
   const [boxes, setBoxes] = useState([]);
   const [newBoxName, setNewBoxName] = useState('');
 
-  const { execute: fetchBoxes, loading: loadingBoxes, error: boxesError } = useApiCall();
-  const { execute: createBox, loading: creatingBox, error: createError } = useApiCall();
-  const { execute: deleteBox, loading: deletingBox, error: deleteError } = useApiCall();
-
   useEffect(() => {
-    const getBoxes = async () => {
+    fetchBoxes();
-      try {
-        const response = await fetchBoxes(() => 
-          api.boxes.getAll(token)
-        );
-        setBoxes(response.data);
-      } catch (err) {}
-    };
-    getBoxes();
   }, [token]);
 
-  const handleCreateBox = async () => {
+  const fetchBoxes = async () => {
-    if (!newBoxName.trim()) return;
-
     try {
-      const response = await createBox(() => 
+      const response = await api.boxes.getAll(token);
-        api.boxes.create(token, { name: newBoxName })
+      setBoxes(response.data);
-      );
+    } catch (error) {
+      console.error('Error fetching boxes:', error);
+    }
+  };
+
+  const handleCreateBox = async () => {
+    try {
+      const response = await api.boxes.create(token, { name: newBoxName });
       setBoxes([...boxes, response.data]);
       setNewBoxName('');
-    } catch (err) {}
+    } catch (error) {
+      console.error('Error creating box:', error);
+    }
   };
 
   const handleDeleteBox = async (id) => {
     try {
-      await deleteBox(() => 
+      await api.boxes.delete(token, id);
-        api.boxes.delete(token, id)
-      );
       setBoxes(boxes.filter(box => box.ID !== id));
-    } catch (err) {}
+    } catch (error) {
+      console.error('Error deleting box:', error);
+    }
   };
 
   return (
     <Container>
-      {(boxesError || createError || deleteError) && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {boxesError?.message || createError?.message || deleteError?.message}
-        </Alert>
-      )}
 
-      {loadingBoxes ? (
+      <TableContainer>
-        <CircularProgress />
+        <Table size="small">
-      ) : (
+          <TableHead>
-        <TableContainer>
+            <TableRow>
-          <Table size="small">
+              <TableCell>Box Name</TableCell>
-            <TableHead>
+              <TableCell>Actions</TableCell>
-              <TableRow>
+            </TableRow>
-                <TableCell width="48px"></TableCell>
+          </TableHead>
-                <TableCell>Box Name</TableCell>
+          <TableBody>
-                <TableCell align="right">Actions</TableCell>
+            {boxes.map((box) => (
+              <TableRow key={box.ID}>
+                <TableCell>
+                  <RouterLink to={`/api/v1/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>
-            </TableHead>
+            ))}
-            <TableBody>
+          </TableBody>
-              {boxes.map((box) => (
+        </Table>
-                <TableRow key={box.ID}>
+      </TableContainer>
-                  <TableCell>
+      <TextField
-                    <Avatar 
+        label="New Box"
-                      sx={{ 
+        variant="outlined"
-                        bgcolor: PRIMARY_COLOR,
+        fullWidth
-                        width: 32,
+        value={newBoxName}
-                        height: 32
+        onChange={(e) => setNewBoxName(e.target.value)}
-                      }}
+      />
-                    >
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
-                      <InventoryIcon sx={{ color: SECONDARY_COLOR, fontSize: 20 }} />
+        Add Box
-                    </Avatar>
+      </Button>
-                  </TableCell>
-                  <TableCell>
-                    <Box
-                      component={RouterLink}
-                      to={`/api/v1/boxes/${box.ID}/items`}
-                      state={{ boxName: box.name, boxID: box.ID }}
-                      sx={{
-                        textDecoration: 'none',
-                        color: 'inherit',
-                        display: 'flex',
-                        alignItems: 'center',
-                        '&:hover': {
-                          textDecoration: 'underline'
-                        }
-                      }}
-                    >
-                      {box.name}
-                    </Box>
-                  </TableCell>
-                  <TableCell align="right">
-                    <Button 
-                      onClick={() => handleDeleteBox(box.ID)} 
-                      startIcon={<DeleteIcon />}
-                      disabled={deletingBox}
-                      color="error"
-                      size="small"
-                    >
-                      {deletingBox ? <CircularProgress size={20} /> : 'Delete'}
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-
-      <Box sx={{ mt: 2 }}>
-        <TextField
-          label="New Box"
-          variant="outlined"
-          fullWidth
-          value={newBoxName}
-          onChange={(e) => setNewBoxName(e.target.value)}
-          disabled={creatingBox}
-          sx={{ mb: 1 }}
-        />
-        <Button 
-          sx={{ 
-            backgroundColor: PRIMARY_COLOR, 
-            borderBottom: '1px solid', 
-            borderColor: '#444', 
-            color: SECONDARY_COLOR 
-          }} 
-          variant="contained" 
-          onClick={handleCreateBox}
-          disabled={creatingBox || !newBoxName.trim()}
-          fullWidth
-        >
-          {creatingBox ? <CircularProgress size={24} /> : 'Add Box'}
-        </Button>
-      </Box>
     </Container>
   );
 }

src/components/ErrorBoundary.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Alert, Button, Container } from '@mui/material';
-
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <Container>
-          <Alert severity="error" sx={{ mt: 2 }}>
-            Something went wrong
-            <Button 
-              onClick={() => window.location.reload()}
-              variant="outlined" 
-              size="small"
-              sx={{ ml: 2 }}
-            >
-              Reload Page
-            </Button>
-          </Alert>
-        </Container>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

src/components/ItemDetails.js

@@ -1,230 +1,200 @@
-import React, { useState, useEffect, useRef } from 'react';
+// src/components/ItemDetails.js
-import { 
+import React, { useState, useEffect, useRef, useCallback } from 'react';
-  TextField, 
+import { TextField, Button, Container, Avatar, Tooltip } from '@mui/material';
-  Button, 
-  Container, 
-  Avatar, 
-  Tooltip, 
-  Alert, 
-  CircularProgress,
-  Box,
-  Typography
-} from '@mui/material';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
-import { useApiCall } from './hooks/useApiCall';
 import { api } from '../services/api';
-import TagManager from './tagManager';
 
-export default function ItemDetails({ item: initialItem, token, onSave, onClose }) {
+export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
-  const [item, setItem] = useState(initialItem);
+  const [name, setName] = useState(item.name);
-  const [name, setName] = useState(initialItem.name);
+  const [description, setDescription] = useState(item.description);
-  const [description, setDescription] = useState(initialItem.description);
+  const [imagePath, setImagePath] = useState(item.image_path || '');
-  const [imagePath, setImagePath] = useState(initialItem.image_path || '');
   const [imageSrc, setImageSrc] = useState('/images/default.jpg');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
   const fileInputRef = useRef(null);
   const [imageOverlayVisible, setImageOverlayVisible] = useState(false);
+  const [boxName, setBoxName] = useState('');
   const [boxes, setBoxes] = useState([]);
-  const [selectedBoxId, setSelectedBoxId] = useState(initialItem.box_id);
+  const [selectedBoxId, setSelectedBoxId] = useState(item.box_id);
 
-  const { execute: fetchBoxes, loading: loadingBoxes, error: boxesError } = useApiCall();
-  const { execute: fetchItem, loading: loadingItem } = useApiCall();
-  const { execute: updateItem, loading: savingItem, error: saveError } = useApiCall();
-  const { execute: uploadImage, loading: uploadingImage, error: uploadError } = useApiCall();
-
-  // Single effect to load initial data
   useEffect(() => {
-    const loadInitialData = async () => {
+    const fetchBoxes = async () => {
       try {
-        // Fetch item and boxes in parallel
+        const response = await api.boxes.getAll(token);
-        const [itemResponse, boxesResponse] = await Promise.all([
+        setBoxes(response.data);
-          fetchItem(() => api.items.getOne(token, initialItem.ID)),
+      } catch (error) {
-          fetchBoxes(() => api.boxes.getAll(token))
+        console.error('Error fetching boxes:', error);
-        ]);
+      }
+    };
+    fetchBoxes();
+  }, [token]);
 
-        const updatedItem = itemResponse.data;
+  const handleBoxChange = (event) => {
-        setItem(updatedItem);
+    const newBoxId = event.target.value;
-        setName(updatedItem.name);
+    setSelectedBoxId(newBoxId);
-        setDescription(updatedItem.description);
+  };
-        setImagePath(updatedItem.image_path || '');
-        setBoxes(boxesResponse.data);
 
-        // Load image
+  useEffect(() => {
-        try {
+    const getBoxDetails = async (boxId) => {
-          const imageResponse = await api.items.getImage(token, initialItem.ID);
+      try {
-          const reader = new FileReader();
+        const boxIdNumber = +boxId;
-          reader.onload = () => {
+        if (isNaN(boxIdNumber)) {
-            setImageSrc(reader.result);
+          console.error('Invalid boxId:', boxId);
-            setLoading(false);
+          return;
-          };
-          reader.readAsDataURL(imageResponse.data);
-        } catch (err) {
-          setImageSrc('/default.jpg');
-          setLoading(false);
         }
-      } catch (err) {
+        const response = await api.boxes.getAll(token);
-        setError(err);
+        const box = response.data.find(b => b.ID === boxIdNumber);
-        setLoading(false);
+        if (box) {
+          setBoxName(box.name);
+        }
+      } catch (error) {
+        console.error('Error fetching box details:', error);
       }
     };
 
-    loadInitialData();
+    if (selectedBoxId !== item.box_id) {
-  }, []); // Empty dependency array - only run once on mount
+      getBoxDetails(selectedBoxId);
+    } else if (item.box_id) {
+      getBoxDetails(item.box_id);
+    }
+  }, [selectedBoxId, token, item.box_id]);
 
-  const handleImageUpload = async () => {
+  useEffect(() => {
-    if (!fileInputRef.current?.files?.[0]) return null;
+    const fetchItemImage = async () => {
+      try {
+        const response = await api.items.getImage(token, item.ID);
+        const reader = new FileReader();
+        reader.onload = () => setImageSrc(reader.result);
+        reader.readAsDataURL(response.data);
+      } catch (error) {
+        setImageSrc('/default.jpg');
+      }
+    };
+    fetchItemImage();
+  }, [item.ID, token]);
+
+  const handleImageUpload = useCallback(async () => {
+    if (!fileInputRef.current.files[0]) return;
 
     const formData = new FormData();
     formData.append('image', fileInputRef.current.files[0]);
 
     try {
-      const response = await uploadImage(() => 
+      const response = await api.items.uploadImage(token, item.ID, formData);
-        api.items.uploadImage(token, item.ID, formData)
-      );
       return response.data.imagePath;
-    } catch (err) {
+    } catch (error) {
-      return null;
+      console.error('Image upload failed:', error);
     }
-  };
+  }, [item.ID, token]);
 
-  const handleSave = async () => {
+  const handleSave = useCallback(async () => {
-    if (fileInputRef.current?.files?.[0]) {
+    let imagePath;
-      await handleImageUpload();
+    if (fileInputRef.current.files[0]) {
+      imagePath = await handleImageUpload();
     }
 
     try {
-      await updateItem(() => api.items.update(token, item.ID, {
+      await api.items.update(token, item.ID, {
         name,
         description,
         box_id: +selectedBoxId,
-      }));
+      });
       onSave();
-    } catch (err) {}
+    } catch (error) {
+      console.error('Item update failed:', error);
+    }
+  }, [item.ID, name, description, selectedBoxId, token, onSave, handleImageUpload]);
+
+  const handleImageError = (e) => {
+    e.target.src = '/images/default.jpg';
   };
 
-  const handleBoxChange = (event) => {
+  const handleAvatarClick = () => {
-    setSelectedBoxId(event.target.value);
+    setImageOverlayVisible(true);
   };
   
-  const handleTagsChange = (newTags) => {
+  const handleCloseOverlay = () => {
-    setItem(prev => ({...prev, tags: newTags}));
+    setImageOverlayVisible(false);
   };
 
   return (
     <Container>
-      <h3>Edit Item: {name}</h3>
+      <h3>Edit Item: {item.name}</h3>
 
-      {(error || boxesError || saveError || uploadError) && (
+      <Tooltip title="Click to enlarge">
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Avatar
-          {error?.message || boxesError?.message || saveError?.message || uploadError?.message}
+          src={imageSrc}
-        </Alert>
+          alt={name}
+          onError={handleImageError}
+          sx={{ width: 200, height: 200, marginBottom: '16px' }}
+          onClick={handleAvatarClick}
+        />
+      </Tooltip>  
+      {imageOverlayVisible && (
+        <div className="image-overlay">
+          <img src={imageSrc} alt={name} />
+          <button className="close-button" onClick={handleCloseOverlay}>
+            Close
+          </button>
+        </div>
       )}
+      <TextField
+        label="Item Name"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <TextField
+        label="Item Description"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+      <TextField 
+        label="Item Image Path" 
+        variant="outlined" 
+        fullWidth 
+        margin="normal"
+        value={imagePath}
+        onChange={(e) => setImagePath(e.target.value)} 
+        sx={{ display: 'none' }}
+      />
+      <input 
+        type="file" 
+        accept="image/*" 
+        ref={fileInputRef} 
+        style={{ display: 'none' }} 
+        id="editItemImageUpload"
+      />
+      <select value={selectedBoxId} onChange={handleBoxChange}>
+        <option value="">No box</option>
+        {boxes.map((box) => (
+          <option key={box.ID} value={box.ID}>
+            {box.name}
+          </option>
+        ))}
+      </select>     
+      <br/>
+      <br/>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" component="label" htmlFor="editItemImageUpload"> 
+        Upload Image
+        <input 
+          type="file" 
+          accept="image/*" 
+          id="image-upload" 
+          style={{ display: 'none' }} 
+          onChange={(e) => {
+            setImagePath(e.target.files[0].name); 
+          }}
+        />
+      </Button>
 
-      {loading ? (
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleSave}>
-        <CircularProgress />
+        Save Changes
-      ) : (
+      </Button>
-        /* Rest of your JSX remains the same */
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={onClose}>Close</Button>
-        // ... existing JSX code ...
-        <Box>
-          {/* Image section */}
-          <Tooltip title="Click to enlarge">
-            <Avatar
-              src={imageSrc}
-              alt={name}
-              sx={{ width: 200, height: 200, marginBottom: '16px' }}
-              onClick={() => setImageOverlayVisible(true)}
-            />
-          </Tooltip>
-
-          {/* Form fields */}
-          <TextField
-            label="Item Name"
-            variant="outlined"
-            fullWidth
-            margin="normal"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            disabled={savingItem}
-          />
-          
-          <TextField
-            label="Item Description"
-            variant="outlined"
-            fullWidth
-            margin="normal"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            disabled={savingItem}
-          />
-
-          {/* Box selection */}
-          {loadingBoxes ? (
-            <CircularProgress size={24} />
-          ) : (
-            <select 
-              value={selectedBoxId} 
-              onChange={handleBoxChange}
-              disabled={savingItem}
-            >
-              <option value="">No box</option>
-              {boxes.map((box) => (
-                <option key={box.ID} value={box.ID}>
-                  {box.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Tags section */}
-          <Box sx={{ my: 2 }}>
-            <Typography variant="subtitle1" gutterBottom>Tags</Typography>
-            <TagManager 
-              token={token} 
-              itemId={item.ID}
-              initialTags={item.tags || []}
-              onTagsChange={handleTagsChange}
-            />
-          </Box>
-
-          {/* Buttons */}
-          <Box sx={{ mt: 2 }}>
-            <Button 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
-              variant="contained" 
-              component="label"
-              disabled={uploadingImage || savingItem}
-            >
-              {uploadingImage ? <CircularProgress size={24} /> : 'Upload Image'}
-              <input
-                type="file"
-                accept="image/*"
-                ref={fileInputRef}
-                style={{ display: 'none' }}
-                onChange={(e) => setImagePath(e.target.files[0]?.name || '')}
-              />
-            </Button>
-
-            <Button 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
-              variant="contained"
-              onClick={handleSave}
-              disabled={savingItem}
-            >
-              {savingItem ? <CircularProgress size={24} /> : 'Save Changes'}
-            </Button>
-
-            <Button 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
-              variant="contained"
-              onClick={onClose}
-              disabled={savingItem}
-            >
-              Close
-            </Button>
-          </Box>
-        </Box>
-      )}
     </Container>
   );
 }

src/components/Items.js

@@ -1,9 +1,19 @@
-import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { 
   Container, 
+  List, 
+  ListItem, 
+  ListItemText,
+  TextField,
   Button,
   IconButton, 
-  TextField,
+  Typography,
+  Avatar,
+  ListItemAvatar,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
   TableContainer,
   Table,
   TableHead,
@@ -11,100 +21,215 @@ import {
   TableCell,
   TableBody,
   Box,
-  Tooltip,
+  Tooltip
-  Avatar,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Alert,
-  CircularProgress,
-  Chip,
-  Typography,
-  FormGroup
 } from '@mui/material';
-import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
-import { useParams, useLocation } from 'react-router-dom';
-import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
-import { useApiCall } from './hooks/useApiCall';
-import { api } from '../services/api';
-import ItemDetails from './ItemDetails';
-import TagManager from './tagManager';
 
-const Item = React.memo(({ item, onDelete, onEdit, itemImages }) => (
+import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
-  <TableRow>
+import axios from 'axios';
-    <TableCell>
+import { useParams, useLocation } from 'react-router-dom'; 
-      <Avatar src={itemImages[item.ID] || '/images/default.jpg'} />
+import ItemDetails from './ItemDetails';
-    </TableCell>
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
-    <TableCell>{item.name}</TableCell>
+import { api } from '../services/api';
-    <TableCell>{item.description}</TableCell>
-    <TableCell>
-      {item.tags?.map(tag => (
-        <Chip
-          key={tag.ID}
-          label={tag.name}
-          size="small"
-          style={{ 
-            backgroundColor: tag.color,
-            color: '#fff',
-            margin: '0 2px'
-          }}
-        />
-      ))}
-    </TableCell>
-    <TableCell>
-      <Box display="flex" justifyContent="space-between" width="100%">
-        <Tooltip title="Edit Item">
-          <IconButton onClick={() => onEdit(item)} size="large" sx={{ mr: 1 }}>
-            <EditIcon />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Delete Item">
-          <IconButton onClick={() => onDelete(item.ID)} size="large" color="error">
-            <DeleteIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    </TableCell>
-  </TableRow>
-));
 
 export default function Items({ token }) {
   const { id: boxId } = useParams(); 
   const [items, setItems] = useState([]);
   const [newItemName, setNewItemName] = useState('');
   const [newItemDescription, setNewItemDescription] = useState('');
+  // const [newItemImagePath, setNewItemImagePath] = useState('/images/default.jpg');
   const [editingItem, setEditingItem] = useState(null);
   const location = useLocation();
-  const boxName = location.state?.boxName || 'All Boxes';
+  const boxName = location.state?.boxName || 'Unknown Box';
+  // const boxID = location.state?.boxId; // used in handleClose function
   const [itemImages, setItemImages] = useState({});
   const fileInputRef = useRef(null);
-  const [openAddItemDialog, setOpenAddItemDialog] = useState(false);
+  const [openAddItemDialog, setOpenAddItemDialog] = useState(false); // For Add Item dialog
+  const { id } = useParams();
+  const boxID = id;
+  const url = boxId === undefined ? `${process.env.REACT_APP_API_URL}/api/v1/items` : `${process.env.REACT_APP_API_URL}/api/v1/boxes/${boxId}/items`;
   const [searchQuery, setSearchQuery] = useState('');
-  const [availableTags, setAvailableTags] = useState([]);
-  const [selectedTags, setSelectedTags] = useState([]);
 
-  const { execute: fetchItems, loading: loadingItems, error: itemsError } = useApiCall();
+  const debugLog = (message) => {
-  const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
+    if (process.env.DEBUG_API) {
-  const { execute: createItem, loading: creatingItem, error: createError } = useApiCall();
+      console.log(message);
-  const { execute: deleteItem, loading: deletingItem, error: deleteError } = useApiCall();
+    }
-  const { execute: uploadImage, loading: uploadingImage, error: uploadError } = useApiCall();
+  };
+  debugLog("Box ID: " + boxID);
 
-  // Fetch items and tags on component mount
+  // const handleSelectItem = (item) => {
-  useEffect(() => {
+  //   setSelectedItem(item);
-    const loadData = async () => {
+  // };
-      try {
+  const handleAddItem = () => {
-        // Fetch items and tags in parallel
+    setOpenAddItemDialog(true);
-        const [itemsResponse, tagsResponse] = await Promise.all([
+  };
-          fetchItems(() => boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)),
-          fetchTags(() => api.tags.getAll(token))
-        ]);
 
-        setItems(itemsResponse.data);
+  const handleCloseAddItemDialog = () => {
-        setAvailableTags(tagsResponse.data);
+    setOpenAddItemDialog(false);
+    setNewItemName('');
+    setNewItemDescription('');
+   // setNewItemImagePath('');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
 
+  /**
+   * This function takes an image name and returns a unique image name.
+   * The purpose of this function is to prevent overwriting of images with the same name.
+   * If the image name is 'image.jpg', a random string is generated and appended to the image name.
+   * This is used to prevent overwriting of images with the same name.
+   * For example, if an image named 'image.jpg' is uploaded, the function will return 'image_8xgu6hcu.jpg'
+   * This ensures that the image will not overwrite any existing image with the same name.
+   * @param {string} imageName - The name of the image
+   * @return {string} - The unique image name
+   */
+  const generateUniqueImageName = (imageName) => {
+    if (imageName.toLowerCase() === 'image.jpg') {
+      // Generate a random string
+      const randomString = Math.random().toString(36).substr(2, 9);
+      // Append the random string to the image name
+      return `image_${randomString}.jpg`;
+    }
+    // Return the original image name if it's not 'image.jpg'
+    return imageName;
+  };
+  
+
+  const handleImageUpload = async (itemId, imageFile, newImageName) => {
+    const formData = new FormData();
+    //const imageFile = fileInputRef.current.files[0];
+    //const newImageName = generateUniqueImageName(imageFile.name);
+    formData.append('image', new File([imageFile], newImageName, {
+      type: imageFile.type,
+    }));
+
+    // Create a new file with the unique name
+    // eslint-disable-next-line 
+    const newImageFile = new File([imageFile], newImageName, {
+      type: imageFile.type,
+    });
+
+    try {
+      const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/v1/items/${itemId}/upload`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'multipart/form-data'
+        }
+      });
+      // console.log('Image uploaded successfully!');
+      return response.data.imagePath; // Indicate successful upload
+    } catch (error) {
+      console.error('Image upload failed:', error);
+      return null; // Indicate upload failure
+    }
+  };
+
+  /**
+   * Handle saving a new item.
+   * 
+   * This function first creates the item without the image, then if the item creation is successful, 
+   * it uploads the image associated with the item.
+   * 
+   * @return {Promise<void>}
+   */
+
+  const handleSaveNewItem = async () => {
+    try {
+      const newItemResponse = await api.items.create(token, {
+        name: newItemName,
+        description: newItemDescription,
+        box_id: parseInt(boxId, 10)
+      });
+  
+      if (newItemResponse.status === 200 && fileInputRef.current.files[0]) {
+        const newItemId = newItemResponse.data.id;
+        const imageFile = fileInputRef.current.files[0];
+        const newImageName = generateUniqueImageName(imageFile.name);
+        const formData = new FormData();
+        formData.append('image', new File([imageFile], newImageName, {
+          type: imageFile.type,
+        }));
+        
+        await api.items.uploadImage(token, newItemId, formData);
+      }
+  
+      handleCloseAddItemDialog();
+      fetchItems();
+    } catch (error) {
+      console.error('Error adding item:', error);
+    }
+  };
+
+
+
+
+
+  //const [selectedItem, setSelectedItem] = React.useState(null);
+
+  const handleCloseItemDetails = () => {
+    setEditingItem(null); // Close the ItemDetails modal
+  };
+
+  const handleImageError = (e) => {
+    if (e.target.src.startsWith('data:image/')) {
+      console.error("Default image failed to load. Check the file path.");
+      return; 
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      e.target.onerror = null;
+      e.target.src = reader.result;
+    };
+    fetch('/default.jpg')
+      .then(res => res.blob())
+      .then(blob => reader.readAsDataURL(blob))
+      .catch(error => console.error("Error loading default image:", error));
+  };
+
+  const getImageSrc = useCallback((itemId) => {
+    return axios.get(`${process.env.REACT_APP_API_URL}/api/v1/items/${itemId}/image`, {
+      headers: { Authorization: `Bearer ${token}` },
+      responseType: 'blob'
+    })
+    .then(response => {
+      if (response.status === 200) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(response.data);
+        });
+      } else {
+        throw new Error('Image fetch failed');
+      }
+    })
+    .catch(() => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = '/default.jpg'; 
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0);
+          resolve(canvas.toDataURL());
+        };
+        img.onerror = reject;
+      });
+    });
+  }, [token]);
+
+  const fetchItems = useCallback(() => {
+    const fetchData = boxId ? 
+      api.items.getByBox(token, boxId) : 
+      api.items.getAll(token);
+      
+    fetchData
+      .then(response => {
+        setItems(response.data);
         // Fetch images for each item
-        itemsResponse.data.forEach(item => {
+        response.data.forEach(item => {
           api.items.getImage(token, item.ID)
             .then(response => {
               const reader = new FileReader();
@@ -115,195 +240,83 @@ export default function Items({ token }) {
                 }));
               };
               reader.readAsDataURL(response.data);
-            })
-            .catch(() => {
-              setItemImages(prev => ({
-                ...prev,
-                [item.ID]: '/default.jpg'
-              }));
             });
         });
-      } catch (err) {}
+      });
-    };
-    loadData();
   }, [token, boxId]);
+  // lint says I don't need boxId here
 
-  // Filter items based on search query and selected tags
+  useEffect(() => {
-  const filteredItems = useMemo(() => {
+    fetchItems();
-    return items.filter(item => {
+  }, [boxId, token, fetchItems]);
-      // Text search match
-      const textMatch = 
-        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        item.description.toLowerCase().includes(searchQuery.toLowerCase());
 
-      // Tag match - if no tags selected, show all items
+  // const handleAddItem = () => {
-      const tagMatch = selectedTags.length === 0 || 
+  //   const formData = new FormData();
-        selectedTags.every(tagId => 
+  //   formData.append('name', newItemName);
-          item.tags?.some(itemTag => itemTag.ID === tagId)
+  //   formData.append('description', newItemDescription);
-        );
+  //   formData.append('box_id', parseInt(boxId, 10));
+  //   // Append image only if a new one is selected
+  //   if (fileInputRef.current.files[0]) {
+  //     formData.append('image', fileInputRef.current.files[0]);
+  //   }
 
-      return textMatch && tagMatch;
+  //   axios.post(`${process.env.REACT_APP_API_URL}/items`, formData, {
-    });
+  //     headers: { 
-  }, [items, searchQuery, selectedTags]);
+  //       Authorization: `Bearer ${token}`,
+  //       'Content-Type': 'multipart/form-data' // Important for file uploads
+  //     }
+  //   }).then(() => {
+  //     setNewItemName('');
+  //     setNewItemDescription('');
+  //     setNewItemImagePath('');
+  //     // Clear the file input
+  //     if (fileInputRef.current) {
+  //       fileInputRef.current.value = '';
+  //     }
+  //     fetchItems();
+  //   });
+  // };
 
-  // Handle tag selection
+  const handleDeleteItem = (itemId) => {
-  const handleTagSelect = (tagId) => {
+    api.items.delete(token, itemId)
-    setSelectedTags(prev => 
+      .then(() => {
-      prev.includes(tagId)
+        fetchItems();
-        ? prev.filter(id => id !== tagId)
+      });
-        : [...prev, tagId]
-    );
   };
 
-  // Rest of the component remains the same...
+  const handleEditItem = (item) => {
-  // (keeping all existing functions like handleAddItem, handleDeleteItem, etc.)
-  const handleAddItem = useCallback(() => {
-    setOpenAddItemDialog(true);
-  }, []);
-
-  const handleCloseAddItemDialog = useCallback(() => {
-    setOpenAddItemDialog(false);
-    setNewItemName('');
-    setNewItemDescription('');
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  }, []);
-
-  const generateUniqueImageName = useCallback((imageName) => {
-    if (imageName.toLowerCase() === 'image.jpg') {
-      const randomString = Math.random().toString(36).substr(2, 9);
-      return `image_${randomString}.jpg`;
-    }
-    return imageName;
-  }, []);
-  const handleDeleteItem = useCallback(async (itemId) => {
-    try {
-      await deleteItem(() => api.items.delete(token, itemId));
-      setItems(prev => prev.filter(item => item.ID !== itemId));
-    } catch (err) {}
-  }, [token, deleteItem]);
-
-  const handleEditItem = useCallback((item) => {
     setEditingItem(item);
-  }, []);
+  };
 
-  const handleSaveEdit = useCallback(async () => {
+  const handleSaveEdit = () => {
     setEditingItem(null);
-    // Refresh the items list after editing
+    fetchItems();
-    try {
+  };
-      const response = await fetchItems(() => 
-        boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)
-      );
-      setItems(response.data);
-    } catch (err) {}
-  }, [token, boxId, fetchItems]);
-  
-  const handleSaveNewItem = useCallback(async () => {
-    try {
-      const newItemResponse = await createItem(() => 
-        api.items.create(token, {
-          name: newItemName,
-          description: newItemDescription,
-          box_id: parseInt(boxId, 10)
-        })
-      );
-  
-      if (newItemResponse.status === 200 && fileInputRef.current?.files?.[0]) {
-        const imageFile = fileInputRef.current.files[0];
-        const newImageName = generateUniqueImageName(imageFile.name);
-        const formData = new FormData();
-        formData.append('image', new File([imageFile], newImageName, {
-          type: imageFile.type,
-        }));
-  
-        await uploadImage(() => 
-          api.items.uploadImage(token, newItemResponse.data.id, formData)
-        );
-        if (newItemResponse.data.id) {
-          try {
-            const imageResponse = await api.items.getImage(token, newItemResponse.data.id);
-            const reader = new FileReader();
-            reader.onload = () => {
-              setItemImages(prev => ({
-                ...prev,
-                [newItemResponse.data.id]: reader.result
-              }));
-            };
-            reader.readAsDataURL(imageResponse.data);
-          } catch (err) {
-            setItemImages(prev => ({
-              ...prev,
-              [newItemResponse.data.id]: '/default.jpg'
-            }));
-          }
-        }
-      }
-  
-      handleCloseAddItemDialog();
-      
-      const response = await fetchItems(() => 
-        boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)
-      );
-      setItems(response.data);
-    } catch (err) {}
-  }, [token, boxId, newItemName, newItemDescription, createItem, uploadImage, fetchItems, generateUniqueImageName]);
 
   return (
     <Container>
-      {(itemsError || tagsError || createError || deleteError || uploadError) && (
+      <TextField
-        <Alert severity="error" sx={{ mb: 2 }}>
+        label="Search"
-          {itemsError?.message || tagsError?.message || createError?.message || 
+        variant="outlined"
-           deleteError?.message || uploadError?.message}
+        fullWidth
-        </Alert>
+        margin="normal"
-      )}
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      <h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : `${boxName} (${items.length} items)`}</h2>
+      <input 
+        type="file" 
+        accept="image/*" 
+        ref={fileInputRef} 
+        style={{ display: 'none' }} 
+        id="newItemImageUpload" // Unique ID
+      />
 
-      <Box sx={{ mb: 3 }}>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}variant="contained" color="primary" onClick={handleAddItem}>
-        <TextField
+        Add Item
-          label="Search items..."
+      </Button>
-          variant="outlined"
-          fullWidth
-          margin="normal"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-  
-        <Box sx={{ mt: 2, mb: 2 }}>
-          <Typography variant="subtitle1" gutterBottom>Filter by tags:</Typography>
-          <Box display="flex" flexWrap="wrap" gap={1}>
-            {availableTags.map(tag => (
-              <Chip
-                key={tag.ID}
-                label={tag.name}
-                style={{
-                  backgroundColor: selectedTags.includes(tag.ID) ? tag.color : 'transparent',
-                  color: selectedTags.includes(tag.ID) ? '#fff' : 'inherit',
-                  border: `1px solid ${tag.color}`
-                }}
-                onClick={() => handleTagSelect(tag.ID)}
-                clickable
-              />
-            ))}
-          </Box>
-        </Box>
-      </Box>
-  
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-        <Typography variant="h6">
-          {boxName === "All Boxes" ? "All Items" : `Items in ${boxName}`} 
-          ({filteredItems.length} items)
-        </Typography>
-  
-        <Button 
-          sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
-          variant="contained"
-          onClick={handleAddItem}
-          disabled={creatingItem}
-        >
-          {creatingItem ? <CircularProgress size={24} /> : 'Add Item'}
-        </Button>
-      </Box>
 
+      {/* Dialog for adding new item */}
       <Dialog open={openAddItemDialog} onClose={handleCloseAddItemDialog}>
         <DialogTitle>Add New Item</DialogTitle>
         <DialogContent>
@@ -327,58 +340,76 @@ export default function Items({ token }) {
             type="file"
             accept="image/*"
             ref={fileInputRef}
-            style={{ display: 'block', margin: '10px 0' }}
+            // capture="environment" // Capture the image from the user's camera
+            style={{ display: 'block', margin: '10px 0' }} // Style as needed
+            id="newItemImageUpload"
           />
         </DialogContent>
         <DialogActions>
           <Button onClick={handleCloseAddItemDialog}>Cancel</Button>
-          <Button 
+          <Button onClick={handleSaveNewItem} color="primary">
-            onClick={handleSaveNewItem} 
+            Save
-            color="primary"
-            disabled={creatingItem || !newItemName.trim()}
-          >
-            {creatingItem ? <CircularProgress size={24} /> : 'Save'}
           </Button>
         </DialogActions>
       </Dialog>
-  
+      {editingItem ? (
-      {editingItem && (
         <ItemDetails 
           item={editingItem} 
           token={token} 
           onSave={handleSaveEdit} 
-          onClose={() => setEditingItem(null)} 
+          onClose={handleCloseItemDetails} 
           boxId={boxId}
-        />
+          />
-      )}
-  
-      {loadingItems ? (
-        <CircularProgress />
       ) : (
         <TableContainer>
-          <Table>
+        <Table>
-            <TableHead>
+          <TableHead>
-              <TableRow>
+            <TableRow>
-                <TableCell style={{ width: '40px' }}>Image</TableCell>
+              <TableCell style={{ width: '40px' }}>Image</TableCell>
-                <TableCell style={{ width: '100px' }}>Name</TableCell>
+              <TableCell style={{ width: '100px' }}>Name</TableCell>
-                <TableCell>Description</TableCell>
+              <TableCell>Description</TableCell>
-                <TableCell>Tags</TableCell>
+              <TableCell>Actions</TableCell>
-                <TableCell>Actions</TableCell>
+            </TableRow>
-              </TableRow>
+          </TableHead>
-            </TableHead>
+          <TableBody>
-            <TableBody>
+            {items
-              {filteredItems.map((item) => (
+              .filter(item =>
-                <Item 
+                item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                  key={item.ID}
+                item.description.toLowerCase().includes(searchQuery.toLowerCase())
-                  item={item}
+              )
-                  itemImages={itemImages}
+              .map((item) => (
-                  onDelete={handleDeleteItem}
+                <TableRow key={item.ID}>
-                  onEdit={handleEditItem}
+                  <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>
+          </TableBody>
-          </Table>
+        </Table>
-        </TableContainer>
+      </TableContainer>
       )}
     </Container>
-  )};
+  );
+}

src/components/Login.js

@@ -1,26 +1,27 @@
 // src/components/Login.js
 import React, { useState } from 'react';
-import { Button, TextField, Container, Typography, Alert, CircularProgress } from '@mui/material';
+import { Button, TextField, Container, Typography, Alert } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 import { api } from '../services/api';
-import { useApiCall } from './hooks/useApiCall';
+
 
 export default function Login({ setToken }) {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState(false);
   const navigate = useNavigate();
-  const { execute, loading, error } = useApiCall();
 
   const handleLogin = async (e) => {
     e.preventDefault();
+    setLoginError(false);
     try {
-      const response = await execute(() => api.login({ username, password }));
+      const response = await api.login({ username, password });
       setToken(response.data.token);
       navigate('/boxes');
-    } catch (err) {
+    } catch (error) {
-      // Error handling is now managed by useApiCall
+      console.error('Login failed', error);
-      console.error('Login attempt failed');
+      setLoginError(true);
     }
   };
 
@@ -28,10 +29,9 @@ export default function Login({ setToken }) {
     <Container maxWidth="xs">
       <Typography variant="h4" gutterBottom>Login</Typography>
 
-      {error && (
+      {/* Display error message if loginError is true */}
-        <Alert severity="error">
+      {loginError && (
-          {error.status === 401 ? 'Invalid username or password' : error.message}
+        <Alert severity="error">Login Failed</Alert>
-        </Alert>
       )}
 
       <form onSubmit={handleLogin}>
@@ -52,15 +52,8 @@ export default function Login({ setToken }) {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
-        <Button 
+        <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" type="submit" fullWidth>
-          sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} 
+          Login
-          variant="contained" 
-          color="primary" 
-          type="submit" 
-          fullWidth
-          disabled={loading}
-        >
-          {loading ? <CircularProgress size={24} /> : 'Login'}
         </Button>
       </form>
     </Container>

src/components/hooks/useApiCall.js

@@ -1,43 +0,0 @@
-import { useState } from 'react';
-
-/**
- * useApiCall hook.
- *
- * This hook helps to wrap API calls in a way that makes it easier to manage
- * loading state and errors.
- *
- * @returns {Object} An object with `execute`, `loading`, and `error`
- * properties. `execute` is a function that wraps the API call and sets the
- * `loading` and `error` states accordingly. `loading` is a boolean that is
- * `true` while the API call is in progress and `false` otherwise. `error` is
- * `null` if the API call was successful and an error object if the API call
- * failed.
- *
- * @example
- * const { execute, loading, error } = useApiCall();
- *
- * const fetchData = async () => {
- *   const response = await execute(api.items.getAll());
- *   // Do something with the response
- * };
- */
-export const useApiCall = () => {
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-  
-    const execute = async (apiCall) => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await apiCall();
-        return result;
-      } catch (err) {
-        setError(err);
-        throw err;
-      } finally {
-        setLoading(false);
-      }
-    };
-  
-    return { execute, loading, error };
-  };

src/components/tagManager.js

@@ -1,181 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { 
-  Chip,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  TextField,
-  Button,
-  Box,
-  CircularProgress,
-  Alert
-} from '@mui/material';
-import { LocalOffer as TagIcon } from '@mui/icons-material';
-import { useApiCall } from './hooks/useApiCall';
-import { api } from '../services/api';
-
-const TagManager = React.memo(({ token, itemId, initialTags = [], onTagsChange }) => {
-  const [tags, setTags] = useState([]);
-  const [itemTags, setItemTags] = useState(initialTags);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [newTagName, setNewTagName] = useState('');
-  const [newTagDescription, setNewTagDescription] = useState('');
-  const [newTagColor, setNewTagColor] = useState('#3366ff');
-
-  const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
-  const { execute: createTag, loading: creatingTag, error: createError } = useApiCall();
-  const { execute: addTags, loading: addingTags, error: addError } = useApiCall();
-  const { execute: removeTag, loading: removingTag, error: removeError } = useApiCall();
-
-  // Only fetch tags once when component mounts
-  useEffect(() => {
-    const getTags = async () => {
-      try {
-        const response = await fetchTags(() => api.tags.getAll(token));
-        setTags(response.data);
-      } catch (err) {}
-    };
-    getTags();
-  }, []); // Empty dependency array - only run once on mount
-
-  // Update itemTags when initialTags prop changes
-  useEffect(() => {
-    setItemTags(initialTags);
-  }, [initialTags]);
-
-  const handleCreateTag = async () => {
-    try {
-      const response = await createTag(() => api.tags.create(token, {
-        name: newTagName,
-        description: newTagDescription,
-        color: newTagColor
-      }));
-      setTags(prevTags => [...prevTags, response.data]);
-      setOpenDialog(false);
-      setNewTagName('');
-      setNewTagDescription('');
-      setNewTagColor('#3366ff');
-    } catch (err) {}
-  };
-
-  const handleAddTag = async (tagId) => {
-    if (!itemId) return;
-    try {
-      await addTags(() => api.items.addTags(token, itemId, [tagId]));
-      const newTag = tags.find(t => t.ID === tagId);
-      if (newTag) {
-        const updatedTags = [...itemTags, newTag];
-        setItemTags(updatedTags);
-        onTagsChange?.(updatedTags);
-      }
-    } catch (err) {}
-  };
-
-  const handleRemoveTag = async (tagId) => {
-    if (!itemId) return;
-    try {
-      await removeTag(() => api.items.removeTag(token, itemId, tagId));
-      const updatedTags = itemTags.filter(tag => tag.ID !== tagId);
-      setItemTags(updatedTags);
-      onTagsChange?.(updatedTags);
-    } catch (err) {}
-  };
-
-  return (
-    <Box>
-      {(tagsError || createError || addError || removeError) && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {tagsError?.message || createError?.message || 
-           addError?.message || removeError?.message}
-        </Alert>
-      )}
-
-      <Box display="flex" alignItems="center" flexWrap="wrap" gap={1}>
-        {itemTags.map(tag => (
-          <Chip
-            key={tag.ID}
-            label={tag.name}
-            onDelete={() => handleRemoveTag(tag.ID)}
-            style={{ 
-              backgroundColor: tag.color,
-              color: '#fff'
-            }}
-            disabled={removingTag}
-          />
-        ))}
-
-        <Box sx={{ ml: 1 }}>
-          {loadingTags ? (
-            <CircularProgress size={24} />
-          ) : (
-            tags
-              .filter(tag => !itemTags.find(it => it.ID === tag.ID))
-              .map(tag => (
-                <Chip
-                  key={tag.ID}
-                  label={tag.name}
-                  onClick={() => handleAddTag(tag.ID)}
-                  style={{ 
-                    backgroundColor: tag.color,
-                    color: '#fff',
-                    margin: '0 4px'
-                  }}
-                  disabled={addingTags}
-                />
-              ))
-          )}
-        </Box>
-
-        <Button
-          startIcon={<TagIcon />}
-          variant="outlined"
-          size="small"
-          onClick={() => setOpenDialog(true)}
-          sx={{ ml: 1 }}
-        >
-          New Tag
-        </Button>
-      </Box>
-
-      <Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
-        <DialogTitle>Create New Tag</DialogTitle>
-        <DialogContent>
-          <TextField
-            label="Name"
-            value={newTagName}
-            onChange={(e) => setNewTagName(e.target.value)}
-            fullWidth
-            margin="normal"
-          />
-          <TextField
-            label="Description"
-            value={newTagDescription}
-            onChange={(e) => setNewTagDescription(e.target.value)}
-            fullWidth
-            margin="normal"
-          />
-          <TextField
-            label="Color"
-            type="color"
-            value={newTagColor}
-            onChange={(e) => setNewTagColor(e.target.value)}
-            fullWidth
-            margin="normal"
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button 
-            onClick={handleCreateTag}
-            disabled={creatingTag || !newTagName.trim()}
-          >
-            {creatingTag ? <CircularProgress size={24} /> : 'Create'}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-});
-
-export default TagManager;

src/components/themeProvider.js

@@ -1,134 +0,0 @@
-import React from 'react';
-import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
-import { grey, blue } from '@mui/material/colors';
-
-// Enhanced theme with better visual hierarchy and modern styling
-const theme = createTheme({
-  palette: {
-    mode: 'light',
-    primary: {
-      main: blue[700],
-      dark: blue[900],
-      light: blue[500],
-      contrastText: '#fff'
-    },
-    background: {
-      default: grey[100],
-      paper: '#fff'
-    }
-  },
-  typography: {
-    h1: {
-      fontSize: '2.5rem',
-      fontWeight: 600,
-      marginBottom: '1.5rem'
-    },
-    h2: {
-      fontSize: '2rem',
-      fontWeight: 500,
-      marginBottom: '1.25rem'
-    },
-    h3: {
-      fontSize: '1.75rem',
-      fontWeight: 500,
-      marginBottom: '1rem'
-    }
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: 'none',
-          borderRadius: 8,
-          padding: '8px 16px',
-          fontWeight: 500
-        },
-        contained: {
-          boxShadow: 'none',
-          '&:hover': {
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-          }
-        }
-      }
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          borderRadius: 12,
-          boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
-          '&:hover': {
-            boxShadow: '0 4px 12px rgba(0,0,0,0.12)'
-          }
-        }
-      }
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          '& .MuiOutlinedInput-root': {
-            borderRadius: 8,
-            backgroundColor: '#fff',
-            '&:hover fieldset': {
-              borderColor: blue[400]
-            }
-          }
-        }
-      }
-    },
-    MuiTable: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#fff',
-          borderRadius: 12,
-          overflow: 'hidden'
-        }
-      }
-    },
-    MuiTableHead: {
-      styleOverrides: {
-        root: {
-          backgroundColor: grey[50]
-        }
-      }
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        head: {
-          fontWeight: 600,
-          color: grey[900]
-        }
-      }
-    }
-  }
-});
-
-// Layout component for consistent padding and max-width
-const Layout = ({ children }) => (
-  <div className="p-6 max-w-7xl mx-auto">
-    {children}
-  </div>
-);
-
-// Enhanced page container with proper spacing and background
-const PageContainer = ({ children, title }) => (
-  <div className="min-h-screen bg-gray-100">
-    <Layout>
-      {title && <h1 className="text-3xl font-semibold mb-6">{title}</h1>}
-      <div className="bg-white rounded-xl shadow-sm p-6">
-        {children}
-      </div>
-    </Layout>
-  </div>
-);
-
-export function EnhancedThemeProvider({ children }) {
-    return (
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        {children}
-      </ThemeProvider>
-    );
-  }
-  
-  export { Layout, PageContainer };
-  export default EnhancedThemeProvider;  

src/services/api.js

@@ -36,15 +36,8 @@ const createApiClient = () => {
         }),
       getByBox: (token, boxId) => 
         client.get(`/api/v1/boxes/${boxId}/items`, { headers: authHeader(token) }),
-      addTags: (token, itemId, tagIds) => 
-        client.post(`/api/v1/items/${itemId}/tags`, tagIds, { 
-          headers: authHeader(token) 
-        }),
-      removeTag: (token, itemId, tagId) => 
-        client.delete(`/api/v1/items/${itemId}/tags/${tagId}`, { 
-          headers: authHeader(token) 
-        }),
     },
+
     // Boxes
     boxes: {
       getAll: (token) => 
@@ -55,19 +48,6 @@ const createApiClient = () => {
         client.delete(`/api/v1/boxes/${id}`, { headers: authHeader(token) }),
     },
 
-    tags: {
-      getAll: (token) => 
-        client.get('/api/v1/tags', { headers: authHeader(token) }),
-      create: (token, tagData) => 
-        client.post('/api/v1/tags', tagData, { headers: authHeader(token) }),
-      update: (token, id, tagData) => 
-        client.put(`/api/v1/tags/${id}`, tagData, { headers: authHeader(token) }),
-      delete: (token, id) => 
-        client.delete(`/api/v1/tags/${id}`, { headers: authHeader(token) }),
-      getItems: (token, id) => 
-        client.get(`/api/v1/tags/${id}/items`, { headers: authHeader(token) }),
-    },
-
     // Admin
     admin: {
       getUsers: (token) => 

src/services/errorHandler.js

@@ -1,36 +0,0 @@
-// src/utils/errorHandler.js
-import axios from 'axios';
-
-export class ApiError extends Error {
-    constructor(message, status, details = {}) {
-      super(message);
-      this.status = status;
-      this.details = details;
-    }
-  }
-  
-  // Enhanced API client with error handling
-  export const createApiClient = () => {
-    const client = axios.create({
-      baseURL: process.env.REACT_APP_API_URL
-    });
-  
-    client.interceptors.response.use(
-      response => response,
-      error => {
-        if (error.response?.status === 401) {
-          localStorage.removeItem('token');
-          window.location.href = '/login';
-          return Promise.reject(new ApiError('Session expired', 401));
-        }
-        
-        return Promise.reject(new ApiError(
-          error.response?.data?.message || 'An error occurred',
-          error.response?.status,
-          error.response?.data
-        ));
-      }
-    );
-  
-    return client;
-  };