added loading skeletons and fixed some minor stuff along the way.

2024-10-30 11:15:12 -05:00
11 changed files with 502 additions and 952 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -16,7 +16,7 @@
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.7.7",
-        "lucide-react": "^0.454.0",
+        "jwt-decode": "^4.0.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "^6.26.2",
@ -13780,6 +13780,15 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -13982,15 +13991,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",
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.7",
-    "lucide-react": "^0.454.0",
+    "jwt-decode": "^4.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.2",
--- a/src/App.js
+++ b/src/App.js
@ -1,22 +1,55 @@
 // src/App.js
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate, useNavigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
+import { jwtDecode } from 'jwt-decode';
 import Login from './components/Login';
 import Boxes from './components/Boxes';
 import Items from './components/Items';
-import Navbar from './components/Navbar';  // Correct import here
-import Admin from './components/Admin';  // Correct import here
+import Navbar from './components/Navbar';
+import Admin from './components/Admin';
 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';
 export const SECONDARY_COLOR = '#ffffff';
 export const BACKGROUND_COLOR = '#dddddd';

+// New component for token expiration check
+function TokenExpirationCheck({ setToken }) {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const checkTokenExpiration = () => {
+      const token = localStorage.getItem('token');
+      if (!token) return;
+      
+      try {
+        const decodedToken = jwtDecode(token);
+        if (Date.now() >= decodedToken.exp * 1000) {
+          setToken(null);
+          localStorage.removeItem('token');
+          navigate('/api/v1/login');
+        }
+      } catch (error) {
+        localStorage.removeItem('token');
+        navigate('/api/v1/login');
+      }
+    };
+
+    window.addEventListener('focus', checkTokenExpiration);
+    const interval = setInterval(checkTokenExpiration, 60000);
+    
+    return () => {
+      window.removeEventListener('focus', checkTokenExpiration);
+      clearInterval(interval);
+    };
+  }, [navigate, setToken]);
+
+  return null;
+}
+
 function App() {
  const [token, setToken] = useState(localStorage.getItem('token'));

@ -27,21 +60,18 @@ function App() {
  }, [token]);

  return (
-    <EnhancedThemeProvider>
    <AppContext.Provider value={{ token, setToken }}>
-        <ErrorBoundary>
      <Router>
+        <TokenExpirationCheck setToken={setToken} />
        <Navbar />
        <AppRoutes token={token} setToken={setToken} />
      </Router>
-        </ErrorBoundary>
    </AppContext.Provider>
-    </EnhancedThemeProvider>
  );
 }

 function AppRoutes({ token, setToken }) {
-  const { id } = useParams(); // Move useParams here
+  const { id } = useParams();

  return (
    <>
@ -68,4 +98,5 @@ function AppRoutes({ token, setToken }) {
    </>
  );
 }
+
 export default App;
--- a/src/components/Admin.js
+++ b/src/components/Admin.js
@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-// import axios from 'axios';
+import axios from 'axios';
 import { Link, useNavigate } from 'react-router-dom';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 import './Admin.css';
@ -19,41 +19,33 @@ import {
  Container,
  Box,
  TextField,
-  CircularProgress,
-  Tab,
-  Tabs
+  CircularProgress
 } 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();
-  const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
  const { execute: createUser, loading: creatingUser, error: createError } = useApiCall();
  const { execute: deleteUser, loading: deletingUser, error: deleteError } = useApiCall();
-  const { execute: deleteTag, loading: deletingTag, error: deleteTagError } = useApiCall();
  const { execute: backupDB, loading: backingUp, error: backupError } = useApiCall();
  const { execute: restoreDB, loading: restoring, error: restoreError } = useApiCall();

  useEffect(() => {
-    const getInitialData = async () => {
+    const getUsers = async () => {
      try {
-        const [usersResponse, tagsResponse] = await Promise.all([
-          fetchUsers(() => api.admin.getUsers(localStorage.getItem('token'))),
-          fetchTags(() => api.tags.getAll(localStorage.getItem('token')))
-        ]);
-        setUsers(usersResponse.data);
-        setTags(tagsResponse.data);
+        const response = await fetchUsers(() => 
+          api.admin.getUsers(localStorage.getItem('token'))
+        );
+        setUsers(response.data);
      } catch (err) {}
    };
-    getInitialData();
+    getUsers();
  }, []);

  const handleCreateUser = async (e) => {
@ -81,19 +73,6 @@ export default function Admin() {
    } catch (err) {}
  };

-  const handleDeleteTag = async (tagId) => {
-    if (!window.confirm('Are you sure you want to delete this tag? This will remove it from all items.')) {
-      return;
-    }
-    
-    try {
-      await deleteTag(() => 
-        api.tags.delete(localStorage.getItem('token'), tagId)
-      );
-      setTags(tags.filter(tag => tag.ID !== tagId));
-    } catch (err) {}
-  };
-
  const handleBackupDatabase = async () => {
    try {
      const response = await backupDB(() => 
@ -130,21 +109,13 @@ export default function Admin() {
        Admin Dashboard
      </Typography>

-      {(usersError || createError || deleteError || backupError || restoreError || tagsError || deleteTagError) && (
+      {(usersError || createError || deleteError || backupError || restoreError) && (
        <Alert severity="error" sx={{ mb: 2 }}>
          {usersError?.message || createError?.message || deleteError?.message || 
-           backupError?.message || restoreError?.message || tagsError?.message || deleteTagError?.message}
+           backupError?.message || restoreError?.message}
        </Alert>
      )}
      
-      <Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)} sx={{ mb: 3 }}>
-        <Tab label="Users" />
-        <Tab label="Tags" />
-        <Tab label="Database" />
-      </Tabs>
-
-      {activeTab === 0 && (
-        <>
      <Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
        <Typography variant="h6" gutterBottom>
          Add New User
@ -219,66 +190,8 @@ export default function Admin() {
          </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}
@ -303,7 +216,6 @@ export default function Admin() {
          />
        </Button>
      </Box>
-      )}
    </Container>
  );
 }
--- a/src/components/Boxes.js
+++ b/src/components/Boxes.js
@ -10,11 +10,9 @@ import {
  TableHead, 
  TableRow,
  Alert,
-  CircularProgress,
-  Avatar,
-  Box
+  CircularProgress
 } from '@mui/material';
-import { Delete as DeleteIcon, Inventory as InventoryIcon } from '@mui/icons-material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Link as RouterLink } from 'react-router-dom';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 import { useApiCall } from './hooks/useApiCall';
@ -38,7 +36,7 @@ export default function Boxes({ token }) {
      } catch (err) {}
    };
    getBoxes();
-  }, [token]);
+  }, [token]); // Remove fetchBoxes from dependencies

  const handleCreateBox = async () => {
    if (!newBoxName.trim()) return;
@ -76,50 +74,23 @@ export default function Boxes({ token }) {
          <Table size="small">
            <TableHead>
              <TableRow>
-                <TableCell width="48px"></TableCell>
                <TableCell>Box Name</TableCell>
-                <TableCell align="right">Actions</TableCell>
+                <TableCell>Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {boxes.map((box) => (
                <TableRow key={box.ID}>
                  <TableCell>
-                    <Avatar 
-                      sx={{ 
-                        bgcolor: PRIMARY_COLOR,
-                        width: 32,
-                        height: 32
-                      }}
-                    >
-                      <InventoryIcon sx={{ color: SECONDARY_COLOR, fontSize: 20 }} />
-                    </Avatar>
+                    <RouterLink to={`/api/v1/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}>
+                      {box.name}
+                    </RouterLink>
                  </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>
@ -131,7 +102,6 @@ export default function Boxes({ token }) {
        </TableContainer>
      )}

-      <Box sx={{ mt: 2 }}>
      <TextField
        label="New Box"
        variant="outlined"
@ -139,23 +109,15 @@ export default function Boxes({ token }) {
        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 
-          }} 
+        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>
  );
 }
--- a/src/components/ItemDetails.js
+++ b/src/components/ItemDetails.js
@ -1,76 +1,55 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { 
-  TextField, 
-  Button, 
-  Container, 
-  Avatar, 
-  Tooltip, 
-  Alert, 
-  CircularProgress,
-  Box,
-  Typography
-} from '@mui/material';
+import { TextField, Button, Container, Avatar, Tooltip, Alert, CircularProgress } 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 }) {
-  const [item, setItem] = useState(initialItem);
-  const [name, setName] = useState(initialItem.name);
-  const [description, setDescription] = useState(initialItem.description);
-  const [imagePath, setImagePath] = useState(initialItem.image_path || '');
+export default function ItemDetails({ item, token, onSave, onClose }) {
+  const [name, setName] = useState(item.name);
+  const [description, setDescription] = useState(item.description);
+  const [imagePath, setImagePath] = useState(item.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 [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 getBoxes = async () => {
      try {
-        // Fetch item and boxes in parallel
-        const [itemResponse, boxesResponse] = await Promise.all([
-          fetchItem(() => api.items.getOne(token, initialItem.ID)),
-          fetchBoxes(() => api.boxes.getAll(token))
-        ]);
+        const response = await fetchBoxes(() => api.boxes.getAll(token));
+        setBoxes(response.data);
+      } catch (err) {}
+    };
+    getBoxes();
+  }, [token]);

-        const updatedItem = itemResponse.data;
-        setItem(updatedItem);
-        setName(updatedItem.name);
-        setDescription(updatedItem.description);
-        setImagePath(updatedItem.image_path || '');
-        setBoxes(boxesResponse.data);
-
-        // Load image
+  useEffect(() => {
+    const loadImage = async () => {
+      setLoading(true);
+      setError(null);
      try {
-          const imageResponse = await api.items.getImage(token, initialItem.ID);
+        const response = await api.items.getImage(token, item.ID);
        const reader = new FileReader();
        reader.onload = () => {
          setImageSrc(reader.result);
          setLoading(false);
        };
-          reader.readAsDataURL(imageResponse.data);
+        reader.readAsDataURL(response.data);
      } catch (err) {
        setImageSrc('/default.jpg');
-          setLoading(false);
-        }
-      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };
-
-    loadInitialData();
-  }, []); // Empty dependency array - only run once on mount
+    loadImage();
+  }, [item.ID, token]);

  const handleImageUpload = async () => {
    if (!fileInputRef.current?.files?.[0]) return null;
@ -107,13 +86,9 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
    setSelectedBoxId(event.target.value);
  };

-  const handleTagsChange = (newTags) => {
-    setItem(prev => ({...prev, tags: newTags}));
-  };
-
  return (
    <Container>
-      <h3>Edit Item: {name}</h3>
+      <h3>Edit Item: {item.name}</h3>
      
      {(error || boxesError || saveError || uploadError) && (
        <Alert severity="error" sx={{ mb: 2 }}>
@ -124,10 +99,6 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
      {loading ? (
        <CircularProgress />
      ) : (
-        /* Rest of your JSX remains the same */
-        // ... existing JSX code ...
-        <Box>
-          {/* Image section */}
        <Tooltip title="Click to enlarge">
          <Avatar
            src={imageSrc}
@ -136,8 +107,17 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
            onClick={() => setImageOverlayVisible(true)}
          />
        </Tooltip>
+      )}
+
+      {imageOverlayVisible && (
+        <div className="image-overlay">
+          <img src={imageSrc} alt={name} />
+          <button className="close-button" onClick={() => setImageOverlayVisible(false)}>
+            Close
+          </button>
+        </div>
+      )}

-          {/* Form fields */}
      <TextField
        label="Item Name"
        variant="outlined"
@ -147,7 +127,6 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
        onChange={(e) => setName(e.target.value)}
        disabled={savingItem}
      />
-          
      <TextField
        label="Item Description"
        variant="outlined"
@ -158,7 +137,6 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
        disabled={savingItem}
      />

-          {/* Box selection */}
      {loadingBoxes ? (
        <CircularProgress size={24} />
      ) : (
@ -176,21 +154,11 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
        </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>
+      <br />
+      <br />
      
-          {/* Buttons */}
-          <Box sx={{ mt: 2 }}>
      <Button 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
+        sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
        variant="contained" 
        component="label"
        disabled={uploadingImage || savingItem}
@ -206,7 +174,7 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
      </Button>

      <Button 
-              sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR, mr: 1 }}
+        sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
        variant="contained"
        onClick={handleSave}
        disabled={savingItem}
@ -222,9 +190,6 @@ export default function ItemDetails({ item: initialItem, token, onSave, onClose
      >
        Close
      </Button>
-          </Box>
-        </Box>
-      )}
    </Container>
  );
 }
--- a/src/components/Items.js
+++ b/src/components/Items.js
@ -19,9 +19,7 @@ import {
  DialogActions,
  Alert,
  CircularProgress,
-  Chip,
-  Typography,
-  FormGroup
+  Skeleton
 } from '@mui/material';
 import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
 import { useParams, useLocation } from 'react-router-dom';
@ -29,7 +27,6 @@ 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 }) => (
  <TableRow>
@ -38,20 +35,6 @@ const Item = React.memo(({ item, onDelete, onEdit, itemImages }) => (
    </TableCell>
    <TableCell>{item.name}</TableCell>
    <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">
@ -69,6 +52,26 @@ const Item = React.memo(({ item, onDelete, onEdit, itemImages }) => (
  </TableRow>
 ));

+const LoadingSkeleton = () => (
+  <TableRow>
+    <TableCell>
+      <Skeleton variant="circular" width={40} height={40} />
+    </TableCell>
+    <TableCell>
+      <Skeleton variant="text" width={100} />
+    </TableCell>
+    <TableCell>
+      <Skeleton variant="text" width="80%" />
+    </TableCell>
+    <TableCell>
+      <Box display="flex" gap={1}>
+        <Skeleton variant="circular" width={30} height={30} />
+        <Skeleton variant="circular" width={30} height={30} />
+      </Box>
+    </TableCell>
+  </TableRow>
+);
+
 export default function Items({ token }) {
  const { id: boxId } = useParams();
  const [items, setItems] = useState([]);
@ -76,35 +79,31 @@ export default function Items({ token }) {
  const [newItemDescription, setNewItemDescription] = useState('');
  const [editingItem, setEditingItem] = useState(null);
  const location = useLocation();
-  const boxName = location.state?.boxName || 'All Boxes';
+  const boxName = location.state?.boxName || 'Unknown Box';
  const [itemImages, setItemImages] = useState({});
  const fileInputRef = useRef(null);
  const [openAddItemDialog, setOpenAddItemDialog] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
-  const [availableTags, setAvailableTags] = useState([]);
-  const [selectedTags, setSelectedTags] = useState([]);
  
  const { execute: fetchItems, loading: loadingItems, error: itemsError } = useApiCall();
-  const { execute: fetchTags, loading: loadingTags, error: tagsError } = useApiCall();
  const { execute: createItem, loading: creatingItem, error: createError } = useApiCall();
  const { execute: deleteItem, loading: deletingItem, error: deleteError } = useApiCall();
  const { execute: uploadImage, loading: uploadingImage, error: uploadError } = useApiCall();

-  // Fetch items and tags on component mount
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        // Fetch items and tags in parallel
-        const [itemsResponse, tagsResponse] = await Promise.all([
-          fetchItems(() => boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)),
-          fetchTags(() => api.tags.getAll(token))
-        ]);
+  const url = boxId ? 
+    `${process.env.REACT_APP_API_URL}/api/v1/boxes/${boxId}/items` : 
+    `${process.env.REACT_APP_API_URL}/api/v1/items`;

-        setItems(itemsResponse.data);
-        setAvailableTags(tagsResponse.data);
+  useEffect(() => {
+    const getItems = async () => {
+      try {
+        const response = await fetchItems(() => 
+          boxId ? api.items.getByBox(token, boxId) : api.items.getAll(token)
+        );
+        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();
@ -125,79 +124,29 @@ export default function Items({ token }) {
        });
      } catch (err) {}
    };
-    loadData();
+    getItems();
  }, [token, boxId]);

-  // Filter items based on search query and selected tags
-  const filteredItems = useMemo(() => {
-    return items.filter(item => {
-      // 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 tagMatch = selectedTags.length === 0 || 
-        selectedTags.every(tagId => 
-          item.tags?.some(itemTag => itemTag.ID === tagId)
-        );
-
-      return textMatch && tagMatch;
-    });
-  }, [items, searchQuery, selectedTags]);
-
-  // Handle tag selection
-  const handleTagSelect = (tagId) => {
-    setSelectedTags(prev => 
-      prev.includes(tagId)
-        ? prev.filter(id => id !== tagId)
-        : [...prev, tagId]
-    );
+  const handleAddItem = () => {
+    setOpenAddItemDialog(true);
  };

-  // Rest of the component remains the same...
-  // (keeping all existing functions like handleAddItem, handleDeleteItem, etc.)
-  const handleAddItem = useCallback(() => {
-    setOpenAddItemDialog(true);
-  }, []);
-
-  const handleCloseAddItemDialog = useCallback(() => {
+  const handleCloseAddItemDialog = () => {
    setOpenAddItemDialog(false);
    setNewItemName('');
    setNewItemDescription('');
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
-  }, []);
+  };

-  const generateUniqueImageName = useCallback((imageName) => {
+  const generateUniqueImageName = (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 () => {
-    setEditingItem(null);
-    // Refresh the items list after editing
-    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 {
@ -247,20 +196,45 @@ export default function Items({ token }) {
      );
      setItems(response.data);
    } catch (err) {}
-  }, [token, boxId, newItemName, newItemDescription, createItem, uploadImage, fetchItems, generateUniqueImageName]);
+  }, [token, boxId, newItemName, newItemDescription, createItem, uploadImage, fetchItems]);
+
+  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 = async () => {
+    setEditingItem(null);
+    const response = await fetchItems(() => 
+      api.items.getAll(token, boxId)
+    );
+    setItems(response.data);
+  };
+
+  const filteredItems = useMemo(() => 
+    items.filter(item =>
+      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      item.description.toLowerCase().includes(searchQuery.toLowerCase())
+    ),
+    [items, searchQuery]
+  );

  return (
    <Container>
-      {(itemsError || tagsError || createError || deleteError || uploadError) && (
+      {(itemsError || createError || deleteError || uploadError) && (
        <Alert severity="error" sx={{ mb: 2 }}>
-          {itemsError?.message || tagsError?.message || createError?.message || 
-           deleteError?.message || uploadError?.message}
+          {itemsError?.message || createError?.message || deleteError?.message || uploadError?.message}
        </Alert>
      )}

-      <Box sx={{ mb: 3 }}>
      <TextField
-          label="Search items..."
+        label="Search"
        variant="outlined"
        fullWidth
        margin="normal"
@ -268,31 +242,7 @@ export default function Items({ token }) {
        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>
+      <h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : `${boxName} (${items.length} items)`}</h2>

      <Button 
        sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
@ -302,7 +252,6 @@ export default function Items({ token }) {
      >
        {creatingItem ? <CircularProgress size={24} /> : 'Add Item'}
      </Button>
-      </Box>

      <Dialog open={openAddItemDialog} onClose={handleCloseAddItemDialog}>
        <DialogTitle>Add New Item</DialogTitle>
@ -362,12 +311,16 @@ export default function Items({ token }) {
                <TableCell style={{ width: '40px' }}>Image</TableCell>
                <TableCell style={{ width: '100px' }}>Name</TableCell>
                <TableCell>Description</TableCell>
-                <TableCell>Tags</TableCell>
                <TableCell>Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
-              {filteredItems.map((item) => (
+              {loadingItems ? (
+                [...Array(5)].map((_, i) => (
+                  <LoadingSkeleton key={i} />
+                ))
+              ) : (
+                filteredItems.map((item) => (
                  <Item 
                    key={item.ID}
                    item={item}
@ -375,10 +328,12 @@ export default function Items({ token }) {
                    onDelete={handleDeleteItem}
                    onEdit={handleEditItem}
                  />
-              ))}
+                ))
+              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Container>
-  )};
+  );
+}
--- a/src/components/tagManager.js
+++ b/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;
--- a/src/components/themeProvider.js
+++ b/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;  
--- a/src/services/api.js
+++ b/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) => 
--- a/src/services/errorHandler.js
+++ b/src/services/errorHandler.js
@ -1,5 +1,6 @@
-// src/utils/errorHandler.js
+// src/services/errorHandler.js
 import axios from 'axios';
+import { jwtDecode } from 'jwt-decode';

 export class ApiError extends Error {
    constructor(message, status, details = {}) {
@ -7,23 +8,82 @@ export class ApiError extends Error {
      this.status = status;
      this.details = details;
    }
-  }
+}
  
-  // Enhanced API client with error handling
-  export const createApiClient = () => {
+export const createApiClient = () => {
  const client = axios.create({
-      baseURL: process.env.REACT_APP_API_URL
+    baseURL: process.env.REACT_APP_API_URL,
+    headers: {
+      'X-Content-Type-Options': 'nosniff',
+      'X-Frame-Options': 'DENY',
+      'X-XSS-Protection': '1; mode=block'
+    }
  });

+  // Add request interceptor for token validation
+  client.interceptors.request.use(async (config) => {
+    const token = localStorage.getItem('token');
+    if (!token) return config;
+
+    try {
+      const decodedToken = jwtDecode(token);
+      const currentTime = Date.now() / 1000;
+
+      if (decodedToken.exp < currentTime) {
+        localStorage.removeItem('token');
+        window.location.href = '/api/v1/login';
+        throw new ApiError('Session expired', 401);
+      }
+
+      // Refresh token if expiring soon
+      if (decodedToken.exp - currentTime < 300) {
+        try {
+          const response = await axios.post('/api/v1/refresh-token', { token });
+          localStorage.setItem('token', response.data.token);
+          config.headers.Authorization = `Bearer ${response.data.token}`;
+        } catch (error) {
+          localStorage.removeItem('token');
+          window.location.href = '/api/v1/login';
+          throw new ApiError('Failed to refresh token', 401);
+        }
+      }
+
+      config.headers.Authorization = `Bearer ${token}`;
+    } catch (error) {
+      localStorage.removeItem('token');
+      window.location.href = '/api/v1/login';
+      throw new ApiError('Invalid token', 401);
+    }
+
+    // Add CSRF token if available
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+    if (csrfToken) {
+      config.headers['X-CSRF-Token'] = csrfToken;
+    }
+
+    return config;
+  });
+
+  // Enhanced response interceptor
  client.interceptors.response.use(
    response => response,
    error => {
      if (error.response?.status === 401) {
        localStorage.removeItem('token');
-          window.location.href = '/login';
+        window.location.href = '/api/v1/login';
        return Promise.reject(new ApiError('Session expired', 401));
      }

+      // Handle rate limiting
+      if (error.response?.status === 429) {
+        return Promise.reject(new ApiError('Too many requests. Please try again later.', 429));
+      }
+
+      // Handle server errors
+      if (error.response?.status >= 500) {
+        return Promise.reject(new ApiError('Server error. Please try again later.', error.response.status));
+      }
+      
      return Promise.reject(new ApiError(
        error.response?.data?.message || 'An error occurred',
        error.response?.status,
@ -33,4 +93,4 @@ export class ApiError extends Error {
  );

  return client;
-  };
+};