🗑️ Remove old frontend folder

frontend/.dockerignore

@@ -1,75 +0,0 @@
-# Docker ignore file for LocalLend Frontend
-# This prevents unnecessary files from being copied to Docker build context
-
-# Dependencies
-node_modules/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Development files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# Build outputs (these will be generated inside the container)
-dist/
-build/
-
-# IDE and editor files
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS generated files
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
-
-# Git
-.git/
-.gitignore
-
-# Documentation (optional - comment out if you want docs in container)
-README.md
-README-LOCALLEND.md
-SETUP.md
-*.md
-
-# Development configuration
-.eslintrc*
-.prettierrc*
-
-# Testing
-coverage/
-.nyc_output/
-
-# Docker files themselves (to avoid recursion)
-Dockerfile
-docker-compose*.yml
-.dockerignore
-
-# Logs
-logs/
-*.log
-
-# Runtime data
-pids/
-*.pid
-*.seed
-*.pid.lock
-
-# Coverage directory used by tools like istanbul
-coverage/
-.nyc_output/
-
-# Dependencies lock files (package-lock.json will be copied separately)
-package-lock.json
-yarn.lock

frontend/.env

@@ -1,15 +0,0 @@
-# Environment Variables for LocalLend Frontend
-
-# API Configuration
-VITE_API_BASE_URL=http://localhost:8080
-
-# Image/Upload Configuration - DEPRECATED
-# Images are now stored in Cloudinary (cloud storage) and return full URLs
-# This local upload endpoint is no longer used
-# VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-
-# App Configuration
-VITE_APP_TITLE=LocalLend
-
-# Development Configuration
-VITE_NODE_ENV=development

frontend/.env.example

@@ -1,18 +0,0 @@
-# Environment Variables for LocalLend Frontend
-
-# API Configuration
-VITE_API_BASE_URL=http://localhost:8080
-
-# Image/Upload Configuration - DEPRECATED
-# Images are now stored in Cloudinary (cloud storage) and return full URLs
-# This local upload endpoint is no longer used
-# VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-
-# App Configuration
-VITE_APP_TITLE=LocalLend
-
-# Development Settings
-VITE_DEV_MODE=true
-
-# Note: All environment variables in Vite must be prefixed with VITE_
-# These variables will be available in the application via import.meta.env

frontend/.env.production

@@ -1,18 +0,0 @@
-# Production Environment Variables for Docker Container
-
-# API Configuration - Update this to point to your backend service
-VITE_API_BASE_URL=http://localhost:8080
-
-# Image/Upload Configuration - DEPRECATED  
-# Images are now stored in Cloudinary (cloud storage) and return full URLs
-# This local upload endpoint is no longer used
-# VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-
-# App Configuration
-VITE_APP_TITLE=LocalLend
-
-# Production Settings
-NODE_ENV=production
-
-# Note: In Docker Compose, you might want to use service names:
-# VITE_API_BASE_URL=http://locallend-backend:8080

frontend/.gitignore

@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Environment files
-.env
-.env.local
-.env.*.local
-
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

frontend/DOCKER-SUMMARY.md

@@ -1,119 +0,0 @@
-# 🐳 LocalLend Frontend - Docker Setup Complete!
-
-## 📋 What's Been Created
-
-Your LocalLend frontend is now fully containerized with a complete Docker setup:
-
-### 🔧 Docker Configuration Files
-
-- **`Dockerfile`** - Production build with Nginx serving
-- **`Dockerfile.dev`** - Development build with hot reload
-- **`docker-compose.yml`** - Production orchestration
-- **`docker-compose.dev.yml`** - Development orchestration
-- **`nginx.conf`** - Nginx configuration with React Router support
-- **`.dockerignore`** - Optimized build context
-- **`.env.production`** - Production environment variables
-- **`healthcheck.sh`** - Container health monitoring
-
-### 🚀 Quick Commands
-
-```bash
-# Development (with hot reload)
-npm run docker:dev
-
-# Production build and run
-npm run docker:compose:build
-
-# View development logs
-npm run docker:dev:logs
-
-# Stop all containers
-npm run docker:stop
-```
-
-## 🏗 Architecture
-
-### Production Container
-- **Multi-stage build**: Node.js build → Nginx serve
-- **Size optimized**: ~50MB final image
-- **Performance**: Gzip compression, asset caching
-- **Security**: Security headers, non-root user
-- **Health checks**: Automatic container monitoring
-
-### Development Container
-- **Hot reload**: Live code changes
-- **Volume mounting**: Source code sync
-- **Port mapping**: 5173 (Vite dev server)
-- **Fast rebuilds**: Cached node_modules
-
-## 🌐 Usage Options
-
-### Option 1: Development with Docker
-```bash
-# Start development container with hot reload
-npm run docker:dev
-
-# Access at: http://localhost:5173
-# Code changes will auto-reload
-```
-
-### Option 2: Production with Docker
-```bash
-# Build and run production container
-npm run docker:compose:build
-
-# Access at: http://localhost:3000
-# Served by Nginx with optimizations
-```
-
-### Option 3: Backend Integration
-Update `.env.production` for your backend:
-```env
-# Local backend
-VITE_API_BASE_URL=http://localhost:8080
-
-# Docker backend (same network)
-VITE_API_BASE_URL=http://locallend-backend:8080
-```
-
-## 🔗 Full Stack Docker (Optional)
-
-To run backend + frontend + database together, uncomment the backend services in `docker-compose.yml`:
-
-```bash
-# Edit docker-compose.yml and uncomment backend/mongodb
-# Then run:
-docker-compose up --build -d
-
-# Services available:
-# Frontend: http://localhost:3000
-# Backend: http://localhost:8080
-# MongoDB: localhost:27017
-```
-
-## ✅ Benefits of This Docker Setup
-
-1. **Consistent Environment**: Same runtime everywhere
-2. **Easy Deployment**: Single container deployment
-3. **Development Parity**: Dev/prod environment matching
-4. **Scalability**: Ready for orchestration (Kubernetes, etc.)
-5. **Isolation**: No dependency conflicts
-6. **Performance**: Optimized for production serving
-7. **Monitoring**: Built-in health checks
-
-## 📚 Documentation
-
-- **`DOCKER.md`** - Complete Docker setup guide
-- **`README-LOCALLEND.md`** - Full project documentation
-- **`SETUP.md`** - Installation troubleshooting
-
----
-
-## 🚀 Next Steps
-
-1. **Start Development**: `npm run docker:dev`
-2. **Configure Backend**: Update API URLs in environment files
-3. **Test Integration**: Verify frontend → backend communication
-4. **Deploy**: Use production Docker setup for deployment
-
-Your LocalLend frontend is now production-ready with Docker! 🎉

frontend/DOCKER.md

@@ -1,219 +0,0 @@
-# LocalLend Frontend - Docker Setup Guide
-
-## 🐳 Docker Containerization
-
-This guide explains how to run the LocalLend frontend application using Docker.
-
-## 📋 Prerequisites
-
-- **Docker Desktop** installed and running
-- **Docker Compose** (included with Docker Desktop)
-- **Backend API** running (either locally or in Docker)
-
-## 🚀 Quick Start with Docker
-
-### Option 1: Using Docker Compose (Recommended)
-
-```bash
-# Build and start the container
-npm run docker:compose:build
-
-# Or use docker-compose directly
-docker-compose up --build -d
-```
-
-The frontend will be available at: `http://localhost:3000`
-
-### Option 2: Using Docker directly
-
-```bash
-# Build the Docker image
-npm run docker:build
-
-# Run the container
-npm run docker:run
-
-# Or use docker commands directly
-docker build -t locallend-frontend .
-docker run -p 3000:80 locallend-frontend
-```
-
-## 🔧 Docker Configuration Files
-
-### Dockerfile (Multi-stage build)
-- **Stage 1 (Builder):** Installs dependencies and builds the React app
-- **Stage 2 (Production):** Serves the built app using Nginx
-
-### docker-compose.yml
-- Orchestrates the frontend container
-- Includes optional backend and MongoDB services (commented out)
-- Sets up networking between services
-
-### nginx.conf
-- Handles client-side routing for React Router
-- Serves static assets with proper caching
-- Includes security headers and gzip compression
-
-## 🌐 Environment Configuration
-
-### Production Environment (.env.production)
-```env
-VITE_API_BASE_URL=http://localhost:8080
-VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-VITE_APP_TITLE=LocalLend
-```
-
-### Docker Compose Environment
-If using Docker Compose with backend services, update the API URL:
-```env
-VITE_API_BASE_URL=http://locallend-backend:8080
-```
-
-## 📦 Container Details
-
-- **Base Image:** node:18-alpine (for building), nginx:alpine (for serving)
-- **Port:** 80 inside container, mapped to 3000 on host
-- **Size:** Optimized multi-stage build (~50MB final image)
-- **Restart Policy:** unless-stopped
-
-## 🛠 Docker Commands
-
-```bash
-# Build and run with compose
-docker-compose up --build -d
-
-# View logs
-docker-compose logs -f locallend-frontend
-
-# Stop containers
-docker-compose down
-
-# Rebuild only frontend
-docker-compose build locallend-frontend
-
-# Access container shell (for debugging)
-docker exec -it locallend-frontend_locallend-frontend_1 sh
-
-# View Nginx config inside container
-docker exec locallend-frontend_locallend-frontend_1 cat /etc/nginx/conf.d/default.conf
-```
-
-## 🔗 Backend Integration
-
-### Option 1: Backend running locally
-```env
-# In .env.production
-VITE_API_BASE_URL=http://localhost:8080
-```
-
-### Option 2: Backend in Docker (same network)
-```env
-# In .env.production  
-VITE_API_BASE_URL=http://locallend-backend:8080
-```
-
-### Option 3: Nginx proxy (recommended for production)
-Uncomment the API proxy section in `nginx.conf`:
-```nginx
-location /api/ {
-    proxy_pass http://backend:8080;
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_set_header X-Forwarded-Proto $scheme;
-}
-```
-
-## 🏗 Full Stack Docker Setup
-
-To run the entire LocalLend application with Docker:
-
-1. **Uncomment backend services** in `docker-compose.yml`
-2. **Build/obtain backend Docker image**
-3. **Update environment variables** for service communication
-4. **Run the full stack:**
-   ```bash
-   docker-compose up --build -d
-   ```
-
-Services will be available at:
-- Frontend: `http://localhost:3000`
-- Backend API: `http://localhost:8080`
-- MongoDB: `localhost:27017`
-
-## 🔍 Troubleshooting
-
-### Build Issues
-```bash
-# Clear Docker cache
-docker system prune -a
-
-# Build without cache
-docker-compose build --no-cache
-
-# Check build logs
-docker-compose logs locallend-frontend
-```
-
-### Network Issues
-```bash
-# Check container networks
-docker network ls
-
-# Inspect network
-docker network inspect locallend-frontend_locallend-network
-```
-
-### Container Access
-```bash
-# Check running containers
-docker ps
-
-# Access container logs
-docker logs <container-id>
-
-# Shell into container
-docker exec -it <container-id> sh
-```
-
-## 📊 Performance Optimization
-
-The Docker setup includes:
-- **Multi-stage builds** to minimize image size
-- **Nginx gzip compression** for faster loading
-- **Static asset caching** with proper headers
-- **Production build optimization** via Vite
-
-## 🔒 Security Features
-
-- Non-root user in container
-- Security headers (X-Frame-Options, X-Content-Type-Options, etc.)
-- Minimal attack surface with Alpine Linux
-- No sensitive data in container layers
-
----
-
-## 🚀 Production Deployment
-
-For production deployment:
-
-1. **Update environment variables** for production URLs
-2. **Configure HTTPS** (add SSL certificates to nginx.conf)
-3. **Set up proper logging** and monitoring
-4. **Use Docker secrets** for sensitive data
-5. **Implement health checks** in docker-compose.yml
-
-Example production docker-compose:
-```yaml
-services:
-  locallend-frontend:
-    image: locallend-frontend:latest
-    restart: always
-    environment:
-      - VITE_API_BASE_URL=https://api.yourdomain.com
-    healthcheck:
-      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:80/"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-```

frontend/Dockerfile

@@ -1,44 +0,0 @@
-# Use the official Node.js runtime as the base image
-FROM node:18-alpine AS builder
-
-# Set the working directory in the container
-WORKDIR /app
-
-# Copy package.json and package-lock.json (if available)
-COPY package*.json ./
-
-# Install dependencies (using npm install since package-lock.json may not exist)
-RUN npm install --legacy-peer-deps
-
-# Copy the rest of the application code
-COPY . .
-
-# Accept build argument for API URL
-ARG VITE_API_BASE_URL=http://localhost:8080
-ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
-
-# Build the application for production
-RUN npm run build
-
-# Production stage - Use Nginx to serve the built app
-FROM nginx:alpine AS production
-
-# Copy the built app from the builder stage
-COPY --from=builder /app/dist /usr/share/nginx/html
-
-# Copy custom nginx configuration
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-# Copy health check script
-COPY healthcheck.sh /usr/local/bin/healthcheck.sh
-RUN chmod +x /usr/local/bin/healthcheck.sh
-
-# Add health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD /usr/local/bin/healthcheck.sh
-
-# Expose port 80
-EXPOSE 80
-
-# Start Nginx
-CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile.dev

@@ -1,21 +0,0 @@
-# Development Dockerfile - Hot reload enabled
-FROM node:20-alpine
-
-# Set working directory
-WORKDIR /app
-
-# Install patch-package globally to fix the missing dependency
-RUN npm install -g patch-package
-
-# Install dependencies
-COPY package*.json ./
-RUN npm install --legacy-peer-deps
-
-# Copy source code
-COPY . .
-
-# Expose development port
-EXPOSE 5173
-
-# Start development server
-CMD ["npm", "run", "dev", "--", "--host"]

frontend/ENDPOINT_FIX_SUMMARY.md

@@ -1,184 +0,0 @@
-# FIXED: Item Status Toggle - Wrong Endpoint Issue
-
-## 🎯 **Root Cause Identified**
-
-**The frontend was calling the wrong API endpoint!**
-
-### **Frontend was calling:**
-```
-PATCH /api/items/{id}/status
-```
-
-### **Backend actually has:**
-```
-PATCH /api/items/{id}/toggle-availability
-PATCH /api/items/{id}/availability
-```
-
-This mismatch caused the "No static resource" error because the backend doesn't have a `/status` endpoint.
-
----
-
-## 🔧 **Frontend Fixes Applied**
-
-### **1. Updated DashboardPage.tsx**
-```typescript
-// OLD (wrong endpoint)
-await fetch(`/api/items/${itemId}/status`, {
-  method: 'PATCH',
-  body: JSON.stringify({ status: newStatus })
-});
-
-// NEW (correct endpoints with fallback)
-// Try toggle endpoint first
-let response = await fetch(`/api/items/${itemId}/toggle-availability`, {
-  method: 'PATCH'  // No body needed for toggle
-});
-
-// If 404, try availability endpoint
-if (!response.ok && response.status === 404) {
-  response = await fetch(`/api/items/${itemId}/availability`, {
-    method: 'PATCH',
-    body: JSON.stringify({ status: newStatus })
-  });
-}
-```
-
-### **2. Updated itemService.ts**
-```typescript
-// OLD (wrong endpoint)
-updateItemStatus: async (itemId: string, status: ItemStatus, userId: string) => {
-  return await api.patch(`/api/items/${itemId}/status`, { status }, {
-    headers: addUserIdHeader(userId)
-  });
-}
-
-// NEW (correct endpoints with fallback)
-updateItemStatus: async (itemId: string, status: ItemStatus, userId: string) => {
-  try {
-    // Try toggle endpoint first (simpler)
-    return await api.patch(`/api/items/${itemId}/toggle-availability`, null, {
-      headers: addUserIdHeader(userId)
-    });
-  } catch (error) {
-    // Fallback to availability endpoint
-    if (error?.response?.status === 404) {
-      return await api.patch(`/api/items/${itemId}/availability`, { status }, {
-        headers: addUserIdHeader(userId)
-      });
-    }
-    throw error;
-  }
-}
-```
-
----
-
-## 🧪 **Backend Testing**
-
-### **Test Toggle Endpoint:**
-```bash
-curl -X PATCH http://localhost:8080/api/items/test123/toggle-availability \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer {TOKEN}" \
-  -H "X-User-Id: {USER_ID}"
-```
-
-### **Test Availability Endpoint:**
-```bash
-curl -X PATCH http://localhost:8080/api/items/test123/availability \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer {TOKEN}" \
-  -H "X-User-Id: {USER_ID}" \
-  -d '{"status":"UNAVAILABLE"}'
-```
-
-### **Expected Responses:**
-- ✅ **200 OK** with updated item JSON = Working correctly
-- ✅ **401 Unauthorized** = Auth required (expected without valid token)
-- ✅ **403 Forbidden** = Permission issue (expected if not owner)
-- ❌ **404 Not Found** = Endpoint doesn't exist
-- ❌ **"No static resource"** = API server not running
-
----
-
-## 🎯 **What Should Happen Now**
-
-### **With Toggle Endpoint (`/toggle-availability`):**
-1. User clicks "Make Unavailable" 
-2. Frontend calls PATCH `/api/items/{id}/toggle-availability`
-3. Backend toggles status (AVAILABLE → UNAVAILABLE)
-4. Returns updated item with new status
-5. Frontend updates UI to show new status
-
-### **With Availability Endpoint (`/availability`):**
-1. User clicks "Make Unavailable"
-2. Frontend calls PATCH `/api/items/{id}/availability` with `{"status":"UNAVAILABLE"}`
-3. Backend sets specific status
-4. Returns updated item with new status
-5. Frontend updates UI to show new status
-
----
-
-## 🔍 **Debugging Steps**
-
-### **1. Test which endpoint your backend has:**
-```bash
-# Test toggle
-curl -X PATCH http://localhost:8080/api/items/test/toggle-availability
-
-# Test availability  
-curl -X PATCH http://localhost:8080/api/items/test/availability
-```
-
-### **2. Check frontend logs:**
-- Look for "📡 Used endpoint:" in console
-- Should show either `/toggle-availability` or `/availability`
-- Should NOT show `/status` anymore
-
-### **3. Verify success:**
-- Click "Make Unavailable" button
-- Should see "✅ Item status updated successfully" 
-- Button should change to "Make Available"
-- Status badge should update color
-
----
-
-## 💡 **Backend Colleague Notes**
-
-### **If using toggle endpoint:**
-```java
-@PatchMapping("/api/items/{itemId}/toggle-availability")
-public ResponseEntity<Item> toggleAvailability(@PathVariable String itemId, @RequestHeader("X-User-Id") String userId) {
-    // Toggle between AVAILABLE ↔ UNAVAILABLE
-    // Don't change if status is BORROWED
-}
-```
-
-### **If using availability endpoint:**
-```java
-@PatchMapping("/api/items/{itemId}/availability")  
-public ResponseEntity<Item> setAvailability(@PathVariable String itemId, @RequestBody Map<String, String> body, @RequestHeader("X-User-Id") String userId) {
-    String status = body.get("status");
-    // Set to specific status (AVAILABLE/UNAVAILABLE)
-}
-```
-
-### **Both should:**
-- ✅ Validate user owns the item
-- ✅ Return updated item JSON
-- ✅ Handle authentication/authorization
-- ✅ Prevent changing BORROWED items
-
----
-
-## 🎉 **Expected Result**
-
-The "Make Unavailable" button should now work correctly because:
-
-1. ✅ **Correct API endpoints** - Using actual backend endpoints
-2. ✅ **Fallback logic** - Tries both endpoints to find which works  
-3. ✅ **Proper error handling** - Shows specific error messages
-4. ✅ **Enhanced debugging** - Logs which endpoint was used
-
-**The static resource error should be gone!** The frontend now calls the endpoints that actually exist on your backend.

frontend/FIELD_NAME_FIX.md

@@ -1,58 +0,0 @@
-# FIXED: Field Name Error - "isAvailable" Required
-
-## 🎯 **Backend Error Message**
-```
-"isAvailable field is required"
-```
-
-**Issue:** Backend expects field name `isAvailable` (not `available`)
-
----
-
-## 🔧 **Quick Fix Applied**
-
-### **BEFORE (Wrong field name):**
-```json
-{
-  "available": true  // ❌ Wrong field name
-}
-```
-
-### **AFTER (Correct field name):**
-```json
-{
-  "isAvailable": true  // ✅ Correct field name
-}
-```
-
----
-
-## 📁 **Files Updated:**
-
-### **1. itemService.ts**
-```typescript
-// Changed from:
-{ available: isAvailable }
-
-// To:
-{ isAvailable }  // ES6 shorthand for { isAvailable: isAvailable }
-```
-
-### **2. DashboardPage.tsx**
-```typescript
-// Changed from:
-body: JSON.stringify({ available: isAvailable })
-
-// To:
-body: JSON.stringify({ isAvailable })
-```
-
----
-
-## ✅ **Should Work Now:**
-
-- **"Make Unavailable"** → Sends `{"isAvailable": false}`
-- **"Make Available"** → Sends `{"isAvailable": true}`
-- **No more field validation errors** from backend
-
-The backend should now accept the requests with the correct `isAvailable` field name!

frontend/FRONTEND_ENV_FIXED.md

@@ -1,260 +0,0 @@
-# Frontend Environment Variables - Fixed! 🔧
-
-## 🚨 Issue Identified
-
-The frontend `.env` file had a **conflict** with the new Cloudinary implementation:
-
-1. ❌ `.env` was **NOT gitignored** (could leak configuration)
-2. ❌ `VITE_IMAGE_BASE_URL=http://localhost:8080/uploads` pointed to non-existent local upload endpoint
-3. ❌ Suggested local file storage (incompatible with Cloudinary cloud storage)
-
-## ✅ Solution Applied
-
-### 1. Added `.env` to `.gitignore`
-
-**File: `locallend-frontend/.gitignore`**
-
-Added:
-```gitignore
-# Environment files
-.env
-.env.local
-.env.*.local
-```
-
-Now the `.env` file won't be accidentally committed!
-
-### 2. Deprecated `VITE_IMAGE_BASE_URL`
-
-**Files Updated:**
-- `locallend-frontend/.env`
-- `locallend-frontend/.env.example`
-- `locallend-frontend/.env.production`
-
-**Before:**
-```bash
-VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-```
-
-**After:**
-```bash
-# Image/Upload Configuration - DEPRECATED
-# Images are now stored in Cloudinary (cloud storage) and return full URLs
-# This local upload endpoint is no longer used
-# VITE_IMAGE_BASE_URL=http://localhost:8080/uploads
-```
-
-### 3. Updated TypeScript Definitions
-
-**File: `src/vite-env.d.ts`**
-
-Made `VITE_IMAGE_BASE_URL` optional:
-```typescript
-interface ImportMetaEnv {
-  readonly VITE_API_BASE_URL: string;
-  readonly VITE_IMAGE_BASE_URL?: string; // DEPRECATED: Images use Cloudinary full URLs
-  readonly VITE_APP_TITLE: string;
-}
-```
-
-### 4. Enhanced `getImageUrl` Helper
-
-**File: `src/utils/helpers.ts`**
-
-Updated to properly handle Cloudinary URLs:
-
-```typescript
-export const getImageUrl = (imagePath: string): string => {
-  if (!imagePath) return '/placeholder-image.jpg';
-  
-  // If already a full URL (Cloudinary or other), return as-is
-  if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
-    return imagePath;
-  }
-  
-  // Legacy support for relative paths (backward compatibility)
-  if (import.meta.env.VITE_IMAGE_BASE_URL) {
-    return `${import.meta.env.VITE_IMAGE_BASE_URL}${imagePath}`;
-  }
-  
-  return imagePath;
-};
-```
-
-**Benefits:**
-- ✅ Works with Cloudinary full URLs (primary use case)
-- ✅ Backward compatible with relative paths
-- ✅ Proper fallback to placeholder
-- ✅ Well-documented with JSDoc
-
-## 📊 Comparison: Local vs Cloudinary Storage
-
-### Local File Storage (Old Approach - Deprecated)
-
-```
-Frontend Upload Flow:
-1. User selects image
-2. Upload to /api/uploads endpoint
-3. Server saves to disk: /uploads/image123.jpg
-4. Server returns: "/image123.jpg"
-5. Frontend combines: VITE_IMAGE_BASE_URL + "/image123.jpg"
-6. Result: "http://localhost:8080/uploads/image123.jpg"
-
-Problems:
-❌ Files stored on server disk
-❌ Not Docker-friendly
-❌ No CDN/optimization
-❌ Manual cleanup needed
-❌ Doesn't scale
-```
-
-### Cloudinary Storage (New Approach - Implemented)
-
-```
-Frontend Upload Flow:
-1. User selects image
-2. Upload to /api/images/upload endpoint
-3. Server uploads to Cloudinary cloud
-4. Cloudinary returns full URL
-5. Server returns: "https://res.cloudinary.com/demo/image/upload/v1234/locallend/items/abc123.jpg"
-6. Frontend uses URL directly (no base URL needed)
-
-Benefits:
-✅ Cloud storage (infinite capacity)
-✅ Works everywhere (Docker, cloud, local)
-✅ CDN delivery (fast worldwide)
-✅ Automatic optimization
-✅ Image transformations
-✅ Scales automatically
-✅ No base URL concatenation needed
-```
-
-## 🎯 How Images Work Now
-
-### Backend (Spring Boot)
-
-1. **Upload Endpoint:** `POST /api/images/upload`
-   - Accepts `multipart/form-data` with file
-   - Uploads to Cloudinary
-   - Returns **full Cloudinary URL**
-
-2. **Item Creation:** `POST /api/items`
-   - Accepts array of image URLs
-   - Stores full URLs in MongoDB
-
-### Frontend (React)
-
-1. **Upload (AddItemPage):**
-   ```typescript
-   // User selects files
-   const formData = new FormData();
-   formData.append('file', file);
-   
-   // Upload to backend
-   const response = await fetch('/api/images/upload', {
-     method: 'POST',
-     body: formData
-   });
-   
-   const result = await response.json();
-   // result.url = "https://res.cloudinary.com/.../image.jpg"
-   ```
-
-2. **Display (DashboardPage, SearchPage, etc):**
-   ```typescript
-   // Item has full Cloudinary URLs
-   <img src={item.images[0]} alt={item.name} />
-   // Renders: <img src="https://res.cloudinary.com/.../image.jpg" />
-   ```
-
-3. **Using Helper (Optional):**
-   ```typescript
-   import { getImageUrl } from '@/utils/helpers';
-   
-   <img src={getImageUrl(item.images[0])} alt={item.name} />
-   // Helper passes through full URLs unchanged
-   ```
-
-## 🔍 No More Conflicts!
-
-### Before (Conflicting Approaches)
-
-```
-.env says:           Use /uploads endpoint
-Backend implements:  Cloudinary cloud storage
-Frontend expects:    Relative paths + base URL
-Result:              CONFLICT! 😱
-```
-
-### After (Unified Approach)
-
-```
-.env says:           Use Cloudinary (deprecated old config)
-Backend implements:  Cloudinary cloud storage ✅
-Frontend uses:       Full Cloudinary URLs ✅
-Result:              WORKS PERFECTLY! 🎉
-```
-
-## 📝 What to Do Next
-
-### For Development:
-
-1. **Pull latest changes:**
-   ```bash
-   git pull origin prishiv_dev
-   ```
-
-2. **The `.env` file is now gitignored**, so you need to:
-   ```bash
-   cd locallend-frontend
-   cp .env.example .env
-   ```
-
-3. **No configuration needed!**
-   - `VITE_API_BASE_URL` still points to `http://localhost:8080`
-   - `VITE_IMAGE_BASE_URL` is deprecated (not needed)
-   - Images work automatically with Cloudinary
-
-4. **Start frontend:**
-   ```bash
-   npm run dev
-   ```
-
-### For Production:
-
-Update `VITE_API_BASE_URL` to point to your production backend:
-
-```bash
-# .env.production
-VITE_API_BASE_URL=https://your-production-api.com
-```
-
-Images will work automatically since Cloudinary provides full URLs.
-
-## ✅ Verification Checklist
-
-- [x] `.env` added to `.gitignore`
-- [x] `VITE_IMAGE_BASE_URL` deprecated (commented out)
-- [x] TypeScript types updated (optional property)
-- [x] `getImageUrl` helper enhanced for Cloudinary
-- [x] Backward compatibility maintained
-- [x] Documentation updated
-- [x] No breaking changes for existing code
-
-## 🎓 Key Takeaways
-
-1. **Cloudinary URLs are complete** - No base URL needed
-2. **`.env` files should be gitignored** - Prevents config leaks
-3. **Helper functions still work** - Pass-through for full URLs
-4. **Backward compatible** - Old code won't break
-5. **Future-proof** - Can switch storage providers if needed
-
-## 📚 Related Documentation
-
-- **Backend:** `ENV_SETUP.md` - Environment variable setup
-- **Images:** `IMAGE_UPLOAD_SETUP.md` - Complete image upload guide
-- **Quick Start:** `IMAGE_UPLOAD_QUICKSTART.md` - 5-minute setup
-
----
-
-**No more conflicts!** The frontend and backend now work together seamlessly with Cloudinary. 🚀

frontend/FRONTEND_INTEGRATION_GUIDE.txt

@@ -1,1510 +0,0 @@
-================================================================================
-                    LOCALLEND BACKEND API INTEGRATION GUIDE
-                          Frontend Development Reference
-================================================================================
-
-TABLE OF CONTENTS
------------------
-1. System Overview
-2. Authentication & Authorization
-3. API Endpoints Reference
-4. Data Models & DTOs
-5. Frontend Pages/Views Required
-6. Common Workflows
-7. Error Handling
-8. Best Practices
-
-
-================================================================================
-1. SYSTEM OVERVIEW
-================================================================================
-
-LocalLend is a peer-to-peer item sharing platform where users can:
-- List items they own for others to borrow
-- Browse and search items available in their community
-- Request to borrow items from other users
-- Manage bookings (approve, track, complete)
-- Rate users and items after completed transactions
-- Build trust scores through positive interactions
-
-TECHNOLOGY STACK:
-- Backend: Spring Boot 3.5.6 with MongoDB
-- Authentication: JWT (JSON Web Tokens)
-- API Style: RESTful JSON APIs
-- Security: Spring Security with role-based access
-
-
-================================================================================
-2. AUTHENTICATION & AUTHORIZATION
-================================================================================
-
-2.1 AUTHENTICATION FLOW
------------------------
-1. User registers via POST /api/auth/register
-2. User logs in via POST /api/auth/login → receives JWT token
-3. Include token in all subsequent requests:
-   Header: Authorization: Bearer <jwt_token>
-
-2.2 REQUIRED HEADERS
---------------------
-For ALL authenticated requests:
-- Authorization: Bearer <jwt_token>
-
-For item/booking operations (owner/borrower specific):
-- Authorization: Bearer <jwt_token>
-- X-User-Id: <user_id>
-
-2.3 PUBLIC ENDPOINTS (No Authentication Required)
--------------------------------------------------
-- POST   /api/auth/register
-- POST   /api/auth/login
-- GET    /api/categories/**
-- GET    /api/items/**
-- GET    /api/users/{userId}/public
-- GET    /api/users/search
-
-2.4 USER ROLES
---------------
-- USER: Standard user (default role)
-- ADMIN: Administrative access (future feature)
-
-All users have the same basic permissions but operations are restricted based on
-ownership (e.g., only item owner can delete their items).
-
-
-================================================================================
-3. API ENDPOINTS REFERENCE
-================================================================================
-
-BASE URL: http://localhost:8080
-
-------------------------------------------------------------------------------
-3.1 AUTHENTICATION ENDPOINTS
-------------------------------------------------------------------------------
-
-POST /api/auth/register
-------------------------
-Register a new user account
-
-Request Body:
-{
-  "username": "string (3-50 chars, required)",
-  "name": "string (2-100 chars, required)",
-  "email": "string (valid email, required)",
-  "password": "string (min 8 chars, required)",
-  "phoneNumber": "string (optional)"
-}
-
-Response (200):
-{
-  "id": "string",
-  "username": "string",
-  "name": "string",
-  "email": "string",
-  "phoneNumber": "string",
-  "profileImageUrl": "string",
-  "role": "USER",
-  "isActive": true,
-  "createdDate": "timestamp",
-  "trustScore": 5.0,
-  "itemCount": 0,
-  "memberSince": "string",
-  "totalItemsShared": 0,
-  "totalBookings": 0
-}
-
-
-POST /api/auth/login
---------------------
-Login and receive JWT token
-
-Request Body:
-{
-  "usernameOrEmail": "string (required)",
-  "password": "string (required)"
-}
-
-Response (200):
-{
-  "token": "eyJhbGc...",
-  "type": "Bearer",
-  "user": {
-    "id": "string",
-    "username": "string",
-    "name": "string",
-    "email": "string",
-    "role": "USER",
-    "trustScore": 5.0
-  }
-}
-
-
-------------------------------------------------------------------------------
-3.2 USER ENDPOINTS
-------------------------------------------------------------------------------
-
-GET /api/users/{userId}/public
--------------------------------
-Get public user profile (no authentication required)
-
-Response (200):
-{
-  "id": "string",
-  "username": "string",
-  "name": "string",
-  "profileImageUrl": "string",
-  "trustScore": 5.0,
-  "itemCount": 3,
-  "memberSince": "Member since November 2025"
-}
-
-
-GET /api/users/search?query={searchTerm}
------------------------------------------
-Search users by username or name
-
-Query Parameters:
-- query: string (search term)
-
-Response (200):
-{
-  "data": [
-    {
-      "id": "string",
-      "username": "string",
-      "name": "string",
-      "profileImageUrl": "string",
-      "trustScore": 5.0,
-      "itemCount": 3
-    }
-  ],
-  "count": 1
-}
-
-
-------------------------------------------------------------------------------
-3.3 CATEGORY ENDPOINTS
-------------------------------------------------------------------------------
-
-GET /api/categories
--------------------
-Get all categories (public endpoint)
-
-Query Parameters:
-- sort: string (optional, default: "name")
-
-Response (200):
-{
-  "data": [
-    {
-      "id": "string",
-      "name": "string",
-      "description": "string",
-      "parent_category_id": "string",
-      "parent_category_name": "string",
-      "is_active": true,
-      "item_count": 5,
-      "has_subcategories": false,
-      "created_at": "timestamp",
-      "updated_at": "timestamp"
-    }
-  ],
-  "success": true,
-  "count": 2,
-  "message": "Categories retrieved successfully"
-}
-
-
-POST /api/categories
---------------------
-Create a new category (authenticated)
-
-Headers:
-- Authorization: Bearer <token>
-
-Request Body:
-{
-  "name": "string (required)",
-  "description": "string (optional)",
-  "parentCategoryId": "string (optional)"
-}
-
-Response (201): Returns created category object
-
-
-GET /api/categories/{categoryId}
----------------------------------
-Get single category details
-
-Response (200): Returns category object with subcategories
-
-
-GET /api/categories/search?term={searchTerm}
---------------------------------------------
-Search categories by name or description
-
-Response (200): Returns matching categories
-
-
-------------------------------------------------------------------------------
-3.4 ITEM ENDPOINTS
-------------------------------------------------------------------------------
-
-GET /api/items
---------------
-Get all items with pagination (public endpoint)
-
-Query Parameters:
-- page: integer (default: 0)
-- size: integer (default: 10)
-- sort: string (default: "createdAt,desc")
-- categoryId: string (optional, filter by category)
-- ownerId: string (optional, filter by owner)
-- condition: string (optional, NEW|EXCELLENT|GOOD|FAIR|POOR)
-- status: string (optional, AVAILABLE|UNAVAILABLE|BORROWED)
-
-Response (200):
-{
-  "content": [
-    {
-      "id": "string",
-      "name": "string",
-      "description": "string",
-      "condition": "EXCELLENT",
-      "status": "AVAILABLE",
-      "deposit": 50.0,
-      "images": ["url1", "url2"],
-      "averageRating": 4.5,
-      "ownerId": "string",
-      "ownerName": "string",
-      "categoryId": "string",
-      "categoryName": "string",
-      "canBeBorrowed": true,
-      "createdAt": "timestamp",
-      "updatedAt": "timestamp"
-    }
-  ],
-  "pageable": {...},
-  "totalElements": 6,
-  "totalPages": 1,
-  "first": true,
-  "last": true
-}
-
-
-POST /api/items
----------------
-Create a new item listing (authenticated)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Request Body:
-{
-  "name": "string (required)",
-  "description": "string (required)",
-  "categoryId": "string (required)",
-  "deposit": 0.0,
-  "images": ["url1", "url2"],
-  "condition": "EXCELLENT" // NEW|EXCELLENT|GOOD|FAIR|POOR
-}
-
-Response (201): Returns created item object
-
-
-GET /api/items/{itemId}
------------------------
-Get single item details
-
-Response (200): Returns detailed item object
-
-
-PUT /api/items/{itemId}
------------------------
-Update item details (owner only)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Request Body:
-{
-  "name": "string",
-  "description": "string",
-  "categoryId": "string",
-  "deposit": 50.0,
-  "condition": "GOOD"
-}
-
-Response (200): Returns updated item object
-
-
-DELETE /api/items/{itemId}
---------------------------
-Delete item (owner only, must have no active bookings)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Response (204): No content on success
-
-
-PATCH /api/items/{itemId}/status
----------------------------------
-Update item availability status (owner only)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Request Body:
-{
-  "status": "AVAILABLE" // AVAILABLE|UNAVAILABLE|BORROWED
-}
-
-Response (200): Returns updated item object
-
-
-GET /api/items/search?query={searchTerm}
-----------------------------------------
-Search items by name or description
-
-Query Parameters:
-- query: string (required)
-- categoryId: string (optional)
-- condition: string (optional)
-
-Response (200): Returns matching items
-
-
-------------------------------------------------------------------------------
-3.5 BOOKING ENDPOINTS
-------------------------------------------------------------------------------
-
-POST /api/bookings
-------------------
-Create a new booking request
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <borrower_id>
-
-Request Body:
-{
-  "itemId": "string (required)",
-  "startDate": "2025-11-10T10:00:00 (required, future date)",
-  "endDate": "2025-11-13T10:00:00 (required, after start date)",
-  "bookingNotes": "string (max 500 chars, optional)",
-  "depositAmount": 100.0,
-  "requestedDurationDays": 3,
-  "acceptTerms": true (required, must be true)
-}
-
-Response (201):
-{
-  "id": "string",
-  "itemId": "string",
-  "itemName": "string",
-  "borrowerId": "string",
-  "borrowerName": "string",
-  "ownerId": "string",
-  "ownerName": "string",
-  "status": "PENDING",
-  "startDate": "timestamp",
-  "endDate": "timestamp",
-  "bookingNotes": "string",
-  "depositAmount": 100.0,
-  "createdDate": "timestamp",
-  "isRated": false,
-  "durationDays": 3,
-  "statusDescription": "string",
-  "timeAgo": "string",
-  "canBeCancelled": true,
-  "canBeConfirmed": false
-}
-
-
-GET /api/bookings/my-bookings
------------------------------
-Get bookings where current user is borrower
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Response (200): Array of booking objects
-
-
-GET /api/bookings/my-owned-bookings
------------------------------------
-Get bookings for items owned by current user
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Response (200): Array of booking objects
-
-
-GET /api/bookings/pending-approvals
-------------------------------------
-Get bookings awaiting owner approval
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <owner_id>
-
-Response (200): Array of pending booking objects
-
-
-GET /api/bookings/{bookingId}
-------------------------------
-Get single booking details
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <user_id>
-
-Response (200): Returns booking object
-
-
-PATCH /api/bookings/{bookingId}/approve
-----------------------------------------
-Approve a booking request (owner only)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <owner_id>
-
-Response (200): Returns updated booking with status CONFIRMED
-
-
-PATCH /api/bookings/{bookingId}/reject
----------------------------------------
-Reject a booking request (owner only)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <owner_id>
-
-Request Body (optional):
-{
-  "rejectionReason": "string (max 500 chars)"
-}
-
-Response (200): Returns updated booking with status REJECTED
-
-
-PATCH /api/bookings/{bookingId}/start
---------------------------------------
-Start a confirmed booking (borrower picks up item)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <borrower_id>
-
-Response (200): Returns updated booking with status ACTIVE
-
-
-PATCH /api/bookings/{bookingId}/complete
------------------------------------------
-Complete an active booking (borrower returns item)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <borrower_id>
-
-Response (200): Returns updated booking with status COMPLETED
-
-
-PATCH /api/bookings/{bookingId}/cancel
----------------------------------------
-Cancel a booking (borrower only, before it starts)
-
-Headers:
-- Authorization: Bearer <token>
-- X-User-Id: <borrower_id>
-
-Request Body (optional):
-{
-  "cancellationReason": "string (max 500 chars)"
-}
-
-Response (200): Returns updated booking with status CANCELLED
-
-
-BOOKING STATUS FLOW:
-PENDING → CONFIRMED → ACTIVE → COMPLETED
-   ↓          ↓         ↓
-REJECTED   CANCELLED  CANCELLED
-
-
-------------------------------------------------------------------------------
-3.6 RATING ENDPOINTS
-------------------------------------------------------------------------------
-
-POST /api/ratings
------------------
-Create a new rating (requires completed booking for user ratings)
-
-Headers:
-- Authorization: Bearer <token>
-
-Request Body:
-{
-  "rateeId": "string (user being rated, required)",
-  "ratingType": "USER_TO_USER|USER_TO_ITEM|BORROWER_TO_OWNER|OWNER_TO_BORROWER",
-  "ratingValue": 5, // 1-5 (required)
-  "comment": "string (max 1000 chars, optional)",
-  "bookingId": "string (required for user ratings)",
-  "itemId": "string (required for USER_TO_ITEM)",
-  "isAnonymous": false
-}
-
-Response (201):
-{
-  "success": true,
-  "message": "Rating created successfully",
-  "data": {
-    "id": "string",
-    "rater_id": "string",
-    "rater_name": "string",
-    "ratee_id": "string",
-    "ratee_name": "string",
-    "rating_type": "BORROWER_TO_OWNER",
-    "rating_value": 5,
-    "comment": "string",
-    "booking_id": "string",
-    "created_at": "timestamp",
-    "is_anonymous": false
-  }
-}
-
-RATING VALIDATION (Issue #26):
-- Booking must exist and be COMPLETED
-- Only borrower can rate the booking
-- Each booking can only be rated once
-- Trust scores automatically updated after rating
-
-
-GET /api/ratings/can-rate/{bookingId}
---------------------------------------
-Check if current user can rate a booking (Issue #26 feature)
-
-Headers:
-- Authorization: Bearer <token>
-
-Response (200):
-{
-  "success": true,
-  "can_rate": true,
-  "booking_id": "string"
-}
-
-Returns false if:
-- Booking doesn't exist
-- Booking status is not COMPLETED
-- User is not the borrower
-- Booking has already been rated
-
-
-GET /api/ratings/user/{userId}/received
-----------------------------------------
-Get ratings received by a user
-
-Headers:
-- Authorization: Bearer <token>
-
-Query Parameters:
-- page: integer (default: 0)
-- size: integer (default: 10)
-- ratingType: string (optional filter)
-
-Response (200):
-{
-  "data": [
-    {
-      "id": "string",
-      "rater_name": "string",
-      "rating_value": 5,
-      "comment": "string",
-      "rating_type": "BORROWER_TO_OWNER",
-      "created_at": "timestamp"
-    }
-  ],
-  "pageable": {...},
-  "totalElements": 10
-}
-
-
-GET /api/ratings/user/{userId}/given
--------------------------------------
-Get ratings given by a user
-
-Headers:
-- Authorization: Bearer <token>
-
-Response (200): Similar structure to received ratings
-
-
-GET /api/ratings/item/{itemId}
--------------------------------
-Get all ratings for an item
-
-Headers:
-- Authorization: Bearer <token>
-
-Response (200): Array of rating objects
-
-
-GET /api/ratings/user/{userId}/statistics
-------------------------------------------
-Get rating statistics for a user
-
-Headers:
-- Authorization: Bearer <token>
-
-Response (200):
-{
-  "data": {
-    "user_id": "string",
-    "total_ratings_received": 5,
-    "average_rating": 4.6,
-    "trust_score": 4.8,
-    "ratings_by_type": {
-      "BORROWER_TO_OWNER": {
-        "count": 3,
-        "average": 4.7
-      },
-      "OWNER_TO_BORROWER": {
-        "count": 2,
-        "average": 4.5
-      }
-    },
-    "rating_distribution": {
-      "5": 3,
-      "4": 1,
-      "3": 1
-    },
-    "recent_ratings": [...]
-  }
-}
-
-
-GET /api/ratings/{ratingId}
-----------------------------
-Get single rating details
-
-Headers:
-- Authorization: Bearer <token>
-
-Response (200): Returns rating object
-
-
-================================================================================
-4. DATA MODELS & DTOs
-================================================================================
-
-4.1 USER MODEL
---------------
-{
-  "id": "string",
-  "username": "string (unique)",
-  "name": "string",
-  "email": "string (unique)",
-  "phoneNumber": "string",
-  "profileImageUrl": "string",
-  "role": "USER|ADMIN",
-  "isActive": boolean,
-  "trustScore": number (0-5),
-  "location": {
-    "type": "Point",
-    "coordinates": [longitude, latitude]
-  },
-  "address": {
-    "street": "string",
-    "city": "string",
-    "state": "string",
-    "zipCode": "string",
-    "country": "string"
-  },
-  "createdDate": "timestamp",
-  "lastLogin": "timestamp",
-  "totalRatingsReceived": number,
-  "ratingCountAsBorrower": number,
-  "ratingCountAsLender": number,
-  "averageRatingAsBorrower": number,
-  "averageRatingAsLender": number
-}
-
-
-4.2 ITEM MODEL
---------------
-{
-  "id": "string",
-  "name": "string",
-  "description": "string",
-  "condition": "NEW|EXCELLENT|GOOD|FAIR|POOR",
-  "status": "AVAILABLE|UNAVAILABLE|BORROWED",
-  "deposit": number,
-  "images": ["url1", "url2"],
-  "averageRating": number,
-  "ownerId": "string",
-  "ownerName": "string",
-  "categoryId": "string",
-  "categoryName": "string",
-  "canBeBorrowed": boolean,
-  "createdAt": "timestamp",
-  "updatedAt": "timestamp"
-}
-
-
-4.3 BOOKING MODEL
------------------
-{
-  "id": "string",
-  "itemId": "string",
-  "itemName": "string",
-  "itemImageUrl": "string",
-  "borrowerId": "string",
-  "borrowerName": "string",
-  "ownerId": "string",
-  "ownerName": "string",
-  "status": "PENDING|CONFIRMED|ACTIVE|COMPLETED|REJECTED|CANCELLED",
-  "startDate": "timestamp",
-  "endDate": "timestamp",
-  "actualStartDate": "timestamp",
-  "actualEndDate": "timestamp",
-  "bookingNotes": "string",
-  "ownerNotes": "string",
-  "depositAmount": number,
-  "depositPaid": boolean,
-  "createdDate": "timestamp",
-  "updatedDate": "timestamp",
-  "confirmedDate": "timestamp",
-  "cancelledDate": "timestamp",
-  "cancellationReason": "string",
-  "isRated": boolean,
-  "durationDays": number,
-  "statusDescription": "string",
-  "timeAgo": "string",
-  "daysUntilStart": number,
-  "daysUntilEnd": number,
-  "canBeCancelled": boolean,
-  "canBeConfirmed": boolean,
-  "canBeActivated": boolean,
-  "canBeCompleted": boolean,
-  "isOverdue": boolean,
-  "requiresDeposit": boolean
-}
-
-
-4.4 RATING MODEL
-----------------
-{
-  "id": "string",
-  "raterId": "string",
-  "raterName": "string",
-  "rateeId": "string",
-  "rateeName": "string",
-  "ratingType": "USER_TO_USER|USER_TO_ITEM|BORROWER_TO_OWNER|OWNER_TO_BORROWER",
-  "ratingValue": number (1-5),
-  "comment": "string",
-  "bookingId": "string",
-  "itemId": "string",
-  "isAnonymous": boolean,
-  "createdAt": "timestamp"
-}
-
-
-4.5 CATEGORY MODEL
-------------------
-{
-  "id": "string",
-  "name": "string",
-  "description": "string",
-  "parentCategoryId": "string",
-  "parentCategoryName": "string",
-  "isActive": boolean,
-  "itemCount": number,
-  "hasSubcategories": boolean,
-  "createdAt": "timestamp",
-  "updatedAt": "timestamp"
-}
-
-
-================================================================================
-5. FRONTEND PAGES/VIEWS REQUIRED
-================================================================================
-
-5.1 AUTHENTICATION PAGES
--------------------------
-- /register - User Registration Page
-  • Form: username, name, email, password, phone number
-  • Validation: Real-time field validation
-  • Auto-login after successful registration
-  
-- /login - User Login Page
-  • Form: username/email, password
-  • Store JWT token in localStorage/sessionStorage
-  • Redirect to dashboard after login
-
-
-5.2 PUBLIC PAGES
-----------------
-- / (Home) - Landing Page
-  • Hero section with platform overview
-  • Featured/recent items
-  • Category browse
-  • Search bar
-  
-- /items - Browse All Items
-  • Grid/list view of all items
-  • Filters: category, condition, availability
-  • Pagination
-  • Search functionality
-  
-- /items/{itemId} - Item Detail Page
-  • Full item details with image gallery
-  • Owner information
-  • Average rating and reviews
-  • "Request to Borrow" button (if authenticated)
-  • Calendar showing availability
-  
-- /categories - Browse Categories
-  • Category grid with item counts
-  • Click to filter items by category
-  
-- /users/{userId} - Public User Profile
-  • User name, trust score, member since
-  • Items shared by user
-  • Public ratings/reviews
-
-
-5.3 AUTHENTICATED USER PAGES
------------------------------
-- /dashboard - User Dashboard
-  • Overview of user's items
-  • Active bookings (as borrower and owner)
-  • Pending approvals
-  • Recent activity
-  • Trust score display
-  
-- /my-items - Manage My Items
-  • List of all user's items
-  • Add new item button
-  • Edit/delete item actions
-  • Item status toggle (available/unavailable)
-  
-- /my-items/new - Add New Item
-  • Form: name, description, category, condition, deposit, images
-  • Image upload functionality
-  • Category selector
-  
-- /my-items/{itemId}/edit - Edit Item
-  • Pre-filled form with existing item data
-  • Update item details
-  
-- /my-bookings - My Bookings (as Borrower)
-  • List of all bookings where user is borrower
-  • Filter by status (pending, active, completed)
-  • Actions: cancel, start, complete
-  • Rate after completion
-  
-- /bookings-received - Bookings Received (as Owner)
-  • List of bookings for user's items
-  • Pending approvals highlighted
-  • Actions: approve, reject
-  
-- /bookings/{bookingId} - Booking Detail Page
-  • Full booking information
-  • Timeline/status tracker
-  • Chat/messaging (future feature)
-  • Actions based on role and status
-  
-- /profile - User Profile Settings
-  • Edit profile information
-  • Change password
-  • Upload profile picture
-  • Location/address settings
-  
-- /profile/ratings - My Ratings
-  • Tabs: Received, Given
-  • Rating statistics
-  • Filter by rating type
-
-
-5.4 BOOKING FLOW PAGES
------------------------
-- /items/{itemId}/book - Request Booking
-  • Date picker for start/end dates
-  • Duration calculator
-  • Deposit amount display
-  • Booking notes textarea
-  • Terms and conditions checkbox
-  • "Submit Booking Request" button
-  
-- /bookings/{bookingId}/rate - Rate User/Item
-  • Star rating selector (1-5)
-  • Comment textarea
-  • Anonymous option checkbox
-  • Pre-check if booking can be rated (use can-rate endpoint)
-
-
-5.5 ADDITIONAL UI COMPONENTS
------------------------------
-- Navigation Bar
-  • Logo/Home link
-  • Search bar
-  • Categories dropdown
-  • User menu (if authenticated)
-    - Dashboard
-    - My Items
-    - My Bookings
-    - Profile
-    - Logout
-  • Login/Register buttons (if not authenticated)
-  
-- Footer
-  • About, Terms, Privacy links
-  • Social media links
-  • Contact information
-  
-- Search Component
-  • Auto-complete suggestions
-  • Filter options
-  • Recent searches
-  
-- Notification System
-  • Toast/snackbar for success/error messages
-  • Notification bell for:
-    - New booking requests
-    - Booking approvals/rejections
-    - Upcoming booking dates
-    - Rating reminders
-  
-- Trust Score Badge
-  • Visual representation (stars/number)
-  • Tooltip with breakdown
-  
-- Status Badges
-  • Color-coded status indicators
-  • PENDING: Yellow
-  • CONFIRMED: Blue
-  • ACTIVE: Green
-  • COMPLETED: Gray
-  • REJECTED/CANCELLED: Red
-
-
-================================================================================
-6. COMMON WORKFLOWS
-================================================================================
-
-6.1 USER REGISTRATION & LOGIN
-------------------------------
-1. User fills registration form
-2. POST /api/auth/register with user details
-3. Store returned user data and auto-login
-4. Redirect to dashboard
-
-For login:
-1. User enters credentials
-2. POST /api/auth/login
-3. Store JWT token in localStorage
-4. Store user data in app state
-5. Redirect to dashboard
-
-
-6.2 BROWSING & SEARCHING ITEMS
--------------------------------
-1. GET /api/items with pagination/filters
-2. Display items in grid/list view
-3. For search: GET /api/items/search?query={term}
-4. Click item → Navigate to /items/{itemId}
-5. GET /api/items/{itemId} for full details
-
-
-6.3 CREATING AN ITEM LISTING
------------------------------
-1. Navigate to /my-items/new
-2. Fill item details form
-3. Upload images (store URLs)
-4. POST /api/items with Authorization and X-User-Id headers
-5. On success, redirect to /my-items
-6. Show success notification
-
-
-6.4 BOOKING REQUEST FLOW (Complete Lifecycle)
-----------------------------------------------
-BORROWER SIDE:
-1. Browse items, click "Request to Borrow"
-2. Fill booking form (dates, notes)
-3. POST /api/bookings → Status: PENDING
-4. Wait for owner approval
-5. When approved (CONFIRMED), receive notification
-6. When ready to pick up, click "Start Booking"
-7. PATCH /api/bookings/{id}/start → Status: ACTIVE
-8. Use item during booking period
-9. When returning, click "Complete Booking"
-10. PATCH /api/bookings/{id}/complete → Status: COMPLETED
-11. System prompts to rate owner
-12. Check if can rate: GET /api/ratings/can-rate/{bookingId}
-13. If can_rate: true, show rating form
-14. POST /api/ratings with booking details
-15. Booking marked as rated (isRated: true)
-
-OWNER SIDE:
-1. Receive notification of new booking request
-2. View pending bookings in dashboard
-3. GET /api/bookings/pending-approvals
-4. Click booking to view details
-5. Review borrower profile, trust score
-6. Decide to approve or reject
-7. PATCH /api/bookings/{id}/approve → Status: CONFIRMED
-   OR
-   PATCH /api/bookings/{id}/reject → Status: REJECTED
-8. Track booking status through lifecycle
-9. After completion, optionally rate borrower
-
-
-6.5 RATING AFTER BOOKING
--------------------------
-1. Booking completed
-2. Call GET /api/ratings/can-rate/{bookingId}
-3. If response.can_rate === true:
-   - Show rating button/form
-   - User selects rating (1-5 stars)
-   - User writes optional comment
-   - POST /api/ratings with:
-     • rateeId: owner's user ID
-     • ratingType: BORROWER_TO_OWNER
-     • ratingValue: 1-5
-     • comment: optional text
-     • bookingId: booking ID
-4. On success:
-   - Show success message
-   - Update booking UI (show "Rated" badge)
-   - Refresh user's trust score
-5. If response.can_rate === false:
-   - Hide rating button
-   - Show "Already Rated" badge
-
-
-6.6 UPDATING ITEM STATUS
--------------------------
-1. Navigate to /my-items
-2. Toggle item availability switch
-3. PATCH /api/items/{itemId}/status
-4. Headers: Authorization + X-User-Id
-5. Body: { "status": "AVAILABLE" | "UNAVAILABLE" }
-6. Update UI to reflect new status
-
-
-================================================================================
-7. ERROR HANDLING
-================================================================================
-
-7.1 HTTP STATUS CODES
-----------------------
-- 200 OK: Successful GET/PUT/PATCH
-- 201 Created: Successful POST
-- 204 No Content: Successful DELETE
-- 400 Bad Request: Validation errors, invalid data
-- 401 Unauthorized: Missing or invalid JWT token
-- 403 Forbidden: Insufficient permissions
-- 404 Not Found: Resource doesn't exist
-- 409 Conflict: Duplicate resource (username/email exists)
-- 500 Internal Server Error: Server-side error
-
-
-7.2 ERROR RESPONSE FORMAT
---------------------------
-{
-  "status": 400,
-  "message": "Validation failed",
-  "timestamp": "2025-11-08T10:00:00",
-  "details": "Username already exists",
-  "error_code": "VALIDATION_ERROR"
-}
-
-
-7.3 COMMON ERROR SCENARIOS & HANDLING
---------------------------------------
-401 Unauthorized:
-- JWT token expired or invalid
-- Action: Redirect to login, clear stored token
-- Show message: "Session expired, please login again"
-
-403 Forbidden:
-- User trying to modify someone else's resource
-- Action: Show error message, don't allow action
-- Example: Trying to delete another user's item
-
-400 Bad Request (Booking):
-- "Cannot transition from CONFIRMED to COMPLETED"
-- Action: Show current status, available actions
-- Guide user through correct status flow
-
-400 Bad Request (Rating):
-- "Required request header 'X-User-Id' is not present"
-- Action: Ensure X-User-Id header is included in request
-
-409 Conflict:
-- "Username already exists"
-- Action: Highlight field, suggest alternatives
-- Real-time validation during registration
-
-Issue #26 Specific Errors:
-- "Booking must be COMPLETED to rate"
-  → Show booking status, explain rating requirements
-- "Only borrower can rate this booking"
-  → Hide rating button if user is not borrower
-- "Booking has already been rated"
-  → Show "Already Rated" badge, hide rating form
-
-
-7.4 FRONTEND ERROR HANDLING BEST PRACTICES
--------------------------------------------
-1. Always wrap API calls in try-catch blocks
-2. Check response status before parsing JSON
-3. Display user-friendly error messages
-4. Log errors for debugging (console.error)
-5. Provide actionable guidance (e.g., "Check your internet connection")
-6. Use loading states during API calls
-7. Implement retry logic for transient failures
-8. Validate forms client-side before API calls
-
-
-================================================================================
-8. BEST PRACTICES
-================================================================================
-
-8.1 AUTHENTICATION & SECURITY
-------------------------------
-✓ Store JWT token securely (httpOnly cookies preferred, or localStorage)
-✓ Include Authorization header in ALL authenticated requests
-✓ Clear token on logout
-✓ Redirect to login on 401 Unauthorized
-✓ Don't store sensitive data (passwords) in frontend
-✓ Implement token refresh mechanism if token has expiration
-✓ Validate user input before sending to backend
-
-
-8.2 API CALLS
--------------
-✓ Use environment variables for API base URL
-✓ Create reusable API service/utility functions
-✓ Implement request interceptors for adding auth headers
-✓ Implement response interceptors for error handling
-✓ Show loading indicators during API calls
-✓ Debounce search inputs (300-500ms delay)
-✓ Cache frequently accessed data (categories, user profile)
-✓ Use pagination for large data sets
-
-
-8.3 STATE MANAGEMENT
---------------------
-✓ Store authenticated user data in global state
-✓ Update local state optimistically for better UX
-✓ Sync state after API responses
-✓ Invalidate cached data after mutations
-✓ Use React Query, SWR, or similar for data fetching
-
-
-8.4 UI/UX CONSIDERATIONS
-------------------------
-✓ Show clear status indicators for bookings
-✓ Use color coding for different statuses
-✓ Provide real-time feedback (success/error messages)
-✓ Implement skeleton loaders for better perceived performance
-✓ Make trust scores prominent to build confidence
-✓ Show confirmation dialogs for destructive actions
-✓ Use form validation with clear error messages
-✓ Implement responsive design (mobile-first)
-✓ Add empty states ("No items yet" with CTA)
-✓ Show item availability calendars
-
-
-8.5 RATING SYSTEM (Issue #26)
-------------------------------
-✓ Always call can-rate endpoint before showing rating form
-✓ Disable rating button if can_rate is false
-✓ Show clear messages:
-  - "Complete the booking to rate"
-  - "You've already rated this booking"
-  - "Only borrowers can rate"
-✓ Display "Rated" badge on completed rated bookings
-✓ Prevent duplicate rating attempts on frontend
-✓ Show trust score updates immediately after rating
-✓ Allow users to see their rating history
-
-
-8.6 IMAGE HANDLING
-------------------
-✓ Implement image upload functionality
-✓ Compress images before upload
-✓ Support multiple image formats (JPG, PNG, WebP)
-✓ Show image previews before upload
-✓ Implement image gallery/carousel for item details
-✓ Use placeholder images for items without photos
-✓ Lazy load images for better performance
-
-
-8.7 SEARCH & FILTERING
------------------------
-✓ Implement auto-complete for search
-✓ Show recent searches
-✓ Persist search query in URL for shareability
-✓ Allow multiple filter combinations
-✓ Show filter count ("Showing 12 of 45 items")
-✓ Clear filters button
-✓ Sort options (newest, popular, nearest)
-
-
-8.8 NOTIFICATIONS
------------------
-✓ Show success messages after actions
-✓ Display error messages clearly
-✓ Implement in-app notification center
-✓ Badge count for unread notifications
-✓ Types of notifications:
-  - New booking request received
-  - Booking approved/rejected
-  - Booking starting soon
-  - Booking completed - reminder to rate
-  - New rating received
-✓ Push notifications (future enhancement)
-
-
-8.9 PERFORMANCE OPTIMIZATION
------------------------------
-✓ Lazy load routes/pages
-✓ Implement infinite scroll for item lists
-✓ Cache API responses
-✓ Minimize bundle size
-✓ Use CDN for static assets
-✓ Implement service workers for offline support
-✓ Optimize images (WebP, responsive sizes)
-
-
-8.10 TESTING
-------------
-✓ Test authentication flow end-to-end
-✓ Test booking lifecycle thoroughly
-✓ Test rating system with various scenarios
-✓ Test error handling and edge cases
-✓ Test on different devices and browsers
-✓ Test with slow network (throttling)
-✓ Verify security (XSS, CSRF protection)
-
-
-================================================================================
-APPENDIX A: EXAMPLE API CALL SNIPPETS
-================================================================================
-
-A.1 JAVASCRIPT FETCH EXAMPLES
-------------------------------
-
-// Login
-async function login(usernameOrEmail, password) {
-  const response = await fetch('http://localhost:8080/api/auth/login', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ usernameOrEmail, password })
-  });
-  const data = await response.json();
-  localStorage.setItem('token', data.token);
-  return data;
-}
-
-// Get items with auth
-async function getItems(page = 0, size = 10) {
-  const token = localStorage.getItem('token');
-  const response = await fetch(
-    `http://localhost:8080/api/items?page=${page}&size=${size}`,
-    {
-      headers: { 'Authorization': `Bearer ${token}` }
-    }
-  );
-  return response.json();
-}
-
-// Create item
-async function createItem(itemData, userId) {
-  const token = localStorage.getItem('token');
-  const response = await fetch('http://localhost:8080/api/items', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`,
-      'X-User-Id': userId
-    },
-    body: JSON.stringify(itemData)
-  });
-  return response.json();
-}
-
-// Check if can rate booking (Issue #26)
-async function canRateBooking(bookingId) {
-  const token = localStorage.getItem('token');
-  const response = await fetch(
-    `http://localhost:8080/api/ratings/can-rate/${bookingId}`,
-    {
-      headers: { 'Authorization': `Bearer ${token}` }
-    }
-  );
-  const data = await response.json();
-  return data.can_rate;
-}
-
-// Create rating
-async function createRating(ratingData) {
-  const token = localStorage.getItem('token');
-  const response = await fetch('http://localhost:8080/api/ratings', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
-    },
-    body: JSON.stringify(ratingData)
-  });
-  return response.json();
-}
-
-
-A.2 AXIOS EXAMPLES
-------------------
-
-import axios from 'axios';
-
-// Configure axios instance
-const api = axios.create({
-  baseURL: 'http://localhost:8080',
-  headers: { 'Content-Type': 'application/json' }
-});
-
-// Request interceptor to add auth token
-api.interceptors.request.use(config => {
-  const token = localStorage.getItem('token');
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-// Response interceptor for error handling
-api.interceptors.response.use(
-  response => response,
-  error => {
-    if (error.response?.status === 401) {
-      localStorage.removeItem('token');
-      window.location.href = '/login';
-    }
-    return Promise.reject(error);
-  }
-);
-
-// Usage examples
-const login = (usernameOrEmail, password) =>
-  api.post('/api/auth/login', { usernameOrEmail, password });
-
-const getItems = (params) =>
-  api.get('/api/items', { params });
-
-const createItem = (itemData, userId) =>
-  api.post('/api/items', itemData, {
-    headers: { 'X-User-Id': userId }
-  });
-
-const canRateBooking = (bookingId) =>
-  api.get(`/api/ratings/can-rate/${bookingId}`);
-
-const createRating = (ratingData) =>
-  api.post('/api/ratings', ratingData);
-
-const approveBooking = (bookingId, ownerId) =>
-  api.patch(`/api/bookings/${bookingId}/approve`, null, {
-    headers: { 'X-User-Id': ownerId }
-  });
-
-
-================================================================================
-APPENDIX B: SAMPLE FORM VALIDATION RULES
-================================================================================
-
-Registration Form:
-- username: 3-50 chars, alphanumeric, unique
-- name: 2-100 chars, required
-- email: valid email format, unique
-- password: min 8 chars, required
-- phoneNumber: optional, valid phone format
-
-Item Form:
-- name: required, max 200 chars
-- description: required, max 2000 chars
-- categoryId: required, must exist
-- deposit: number, min 0, max 10000
-- condition: one of [NEW, EXCELLENT, GOOD, FAIR, POOR]
-- images: array of valid URLs
-
-Booking Form:
-- itemId: required, must exist and be available
-- startDate: required, must be future date
-- endDate: required, must be after startDate
-- bookingNotes: max 500 chars
-- depositAmount: number, min 0
-- acceptTerms: must be true
-
-Rating Form:
-- rateeId: required, valid user ID
-- ratingType: required, valid enum
-- ratingValue: required, integer 1-5
-- comment: max 1000 chars
-- bookingId: required for user ratings
-- itemId: required for item ratings
-
-
-================================================================================
-APPENDIX C: WEBSOCKET/REAL-TIME FEATURES (Future Enhancement)
-================================================================================
-
-For future implementation, consider adding WebSocket support for:
-- Real-time notifications
-- Chat between borrowers and owners
-- Live booking status updates
-- Real-time availability updates
-
-Endpoint: ws://localhost:8080/ws
-Authentication: Send JWT token in connection handshake
-
-
-================================================================================
-APPENDIX D: MOBILE APP CONSIDERATIONS
-================================================================================
-
-This backend is fully compatible with mobile app development (React Native, 
-Flutter, etc.). Same API endpoints, authentication flow, and data models apply.
-
-Additional considerations for mobile:
-- Implement token refresh for longer sessions
-- Use secure storage for JWT tokens (KeyChain, KeyStore)
-- Handle offline mode gracefully
-- Optimize image uploads for mobile networks
-- Implement push notifications
-- Add location-based features (nearby items)
-- Use biometric authentication
-
-
-================================================================================
-END OF GUIDE
-================================================================================
-
-For questions or issues, refer to:
-- Backend source code: /src/main/java/com/locallend/locallend/
-- API documentation: Swagger UI at http://localhost:8080/swagger-ui.html (if enabled)
-- Backend logs: docker logs locallend-backend
-
-Last Updated: November 8, 2025
-Version: 1.0

frontend/FRONTEND_INTEGRATION_GUIDE_MARK2.md

@@ -1,945 +0,0 @@
-# 🚀 LocalLend Frontend Integration Guide - Mark 2
-## Comprehensive Backend API Documentation & Integration Manual
-
-**Version**: 2.0  
-**Date**: November 12, 2025  
-**Backend Base URL**: `http://localhost:8080`  
-**Frontend Base URL**: `http://localhost:5173`
-
----
-
-## 📋 Table of Contents
-
-1. [🔐 Authentication System](#authentication-system)
-2. [🏗️ API Architecture](#api-architecture)
-3. [📊 Data Models & Enums](#data-models--enums)
-4. [🛠️ API Endpoints](#api-endpoints)
-5. [🔄 Authentication Workflows](#authentication-workflows)
-6. [⚠️ Error Handling](#error-handling)
-7. [🧪 Testing Guide](#testing-guide)
-8. [🐛 Common Issues & Solutions](#common-issues--solutions)
-
----
-
-## 🔐 Authentication System
-
-### **JWT Token Configuration**
-```properties
-# Backend Configuration (application.properties)
-app.jwt.secret=change-this-secret-in-production-with-a-very-long-secure-random-string-at-least-256-bits
-app.jwt.expiration-ms=86400000  # 24 hours
-```
-
-### **Authentication Headers Required**
-```http
-# For authenticated endpoints
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-Content-Type: application/json
-```
-
-### **Public Endpoints (No Authentication Required)**
-- `POST /api/auth/register`
-- `POST /api/auth/login`
-- `GET /api/categories/**`
-- `GET /api/items/**` (browsing only)
-- `GET /api/users/*/public`
-- `GET /api/users/search`
-
-### **Protected Endpoints (Authentication Required)**
-- All other endpoints require valid JWT token
-- X-User-Id header must match the token's user
-
----
-
-## 🏗️ API Architecture
-
-### **Base URL Structure**
-```
-Backend API: http://localhost:8080/api
-├── /auth           # Authentication
-├── /users          # User management
-├── /items          # Item management
-├── /categories     # Category management
-├── /bookings       # Booking system
-└── /ratings        # Rating system
-```
-
-### **Security Configuration**
-- **CORS**: Enabled for `http://localhost:*`
-- **Methods**: GET, POST, PUT, PATCH, DELETE
-- **Headers**: All headers allowed including Authorization and X-User-Id
-- **Session**: Stateless (JWT-based)
-- **CSRF**: Disabled for API
-
----
-
-## 📊 Data Models & Enums
-
-### **ItemStatus Enum**
-```java
-public enum ItemStatus {
-    AVAILABLE,      // Item is available for booking
-    BOOKED,         // Item has been booked
-    BORROWED,       // Item is currently borrowed
-    MAINTENANCE,    // Item is under maintenance
-    UNAVAILABLE     // Owner has marked it unavailable
-}
-```
-
-### **ItemCondition Enum**
-```java
-public enum ItemCondition {
-    NEW,
-    EXCELLENT,
-    GOOD,
-    FAIR,
-    POOR
-}
-```
-
-### **BookingStatus Enum**
-```java
-public enum BookingStatus {
-    PENDING,        // Waiting for owner approval
-    CONFIRMED,      // Owner has approved
-    ACTIVE,         // Booking is currently active
-    COMPLETED,      // Booking completed successfully
-    CANCELLED,      // Cancelled by borrower
-    REJECTED        // Rejected by owner
-}
-```
-
-### **RatingType Enum**
-```java
-public enum RatingType {
-    USER_TO_ITEM,       // Rating an item
-    USER_TO_USER,       // General user rating
-    OWNER_TO_BORROWER,  // Owner rating borrower
-    BORROWER_TO_OWNER   // Borrower rating owner
-}
-```
-
----
-
-## 🛠️ API Endpoints
-
-### **🔐 Authentication Endpoints**
-
-#### **Register User**
-```http
-POST /api/auth/register
-Content-Type: application/json
-
-{
-  "username": "johndoe",           # Required, 3-50 chars
-  "name": "John Doe",              # Required, 2-100 chars
-  "email": "john@example.com",     # Required, valid email
-  "password": "password123",       # Required, min 8 chars
-  "phoneNumber": "+1234567890"     # Optional
-}
-```
-
-**Response (201 Created):**
-```json
-{
-  "id": "user_id",
-  "username": "johndoe",
-  "name": "John Doe",
-  "email": "john@example.com",
-  "phoneNumber": "+1234567890",
-  "profileImageUrl": null,
-  "isActive": true,
-  "createdAt": "2025-11-12T10:00:00Z"
-}
-```
-
-#### **Login User**
-```http
-POST /api/auth/login
-Content-Type: application/json
-
-{
-  "usernameOrEmail": "johndoe",    # Username or email
-  "password": "password123"
-}
-```
-
-**Response (200 OK):**
-```json
-{
-  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "tokenType": "Bearer",
-  "user": {
-    "id": "user_id",
-    "username": "johndoe",
-    "name": "John Doe",
-    "email": "john@example.com",
-    "phoneNumber": "+1234567890",
-    "profileImageUrl": null,
-    "isActive": true,
-    "createdAt": "2025-11-12T10:00:00Z"
-  }
-}
-```
-
----
-
-### **👤 User Management Endpoints**
-
-#### **Get Current User Profile**
-```http
-GET /api/users/profile
-Authorization: Bearer {jwt_token}
-```
-
-#### **Update Current User Profile**
-```http
-PUT /api/users/profile
-Authorization: Bearer {jwt_token}
-Content-Type: application/json
-
-{
-  "name": "John Smith",           # Optional
-  "phoneNumber": "+1987654321",   # Optional
-  "profileImageUrl": "https://..." # Optional
-}
-```
-
-#### **Get User Public Info**
-```http
-GET /api/users/{userId}/public
-# No authentication required
-```
-
-#### **Search Users**
-```http
-GET /api/users/search?term=john&page=0&size=10
-# No authentication required
-```
-
----
-
-### **📦 Item Management Endpoints**
-
-#### **Create Item**
-```http
-POST /api/items
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-Content-Type: application/json
-
-{
-  "name": "Laptop",                    # Required, 3-100 chars
-  "description": "Gaming laptop",      # Optional, max 500 chars
-  "categoryId": "category_id",         # Required
-  "deposit": 100.0,                    # Optional, default 0.0
-  "images": ["url1", "url2"],          # Optional
-  "condition": "EXCELLENT"             # Optional, default GOOD
-}
-```
-
-#### **Get All Available Items**
-```http
-GET /api/items?page=0&size=10&sortBy=name&sortDir=asc
-# No authentication required
-```
-
-#### **Get Item by ID**
-```http
-GET /api/items/{itemId}
-# No authentication required
-```
-
-#### **Search Items**
-```http
-GET /api/items/search?q=laptop&page=0&size=10
-# No authentication required
-```
-
-#### **Get Items by Category**
-```http
-GET /api/items/category/{categoryId}?page=0&size=10
-# No authentication required
-```
-
-#### **Get Items by Owner**
-```http
-GET /api/items/owner/{ownerId}?page=0&size=10
-# No authentication required
-```
-
-#### **Get Current User's Items**
-```http
-GET /api/items/my-items?page=0&size=10
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-```
-
-#### **Update Item**
-```http
-PUT /api/items/{itemId}
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-Content-Type: application/json
-
-{
-  "name": "Updated Laptop",        # Optional
-  "description": "New description", # Optional
-  "condition": "GOOD",             # Optional
-  "deposit": 150.0,                # Optional
-  "images": ["new_url"],           # Optional
-  "isAvailable": true              # Optional
-}
-```
-
-#### **⚠️ MISSING ENDPOINT - Item Status Update**
-**❌ Frontend expects but backend doesn't have:**
-```http
-PATCH /api/items/{itemId}/status
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-Content-Type: application/json
-
-{
-  "status": "UNAVAILABLE"  # AVAILABLE, UNAVAILABLE, MAINTENANCE
-}
-```
-
-**✅ Available alternatives:**
-```http
-# Toggle availability (switches between AVAILABLE/UNAVAILABLE)
-PATCH /api/items/{itemId}/toggle-availability
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-
-# Set specific availability
-PATCH /api/items/{itemId}/availability
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-Content-Type: application/json
-
-{
-  "isAvailable": false  # true = AVAILABLE, false = UNAVAILABLE
-}
-```
-
-#### **Delete Item**
-```http
-DELETE /api/items/{itemId}
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-```
-
----
-
-### **📂 Category Management Endpoints**
-
-#### **Create Category**
-```http
-POST /api/categories
-Authorization: Bearer {jwt_token}
-Content-Type: application/json
-
-{
-  "name": "Electronics",           # Required
-  "description": "Electronic items", # Optional
-  "parentId": "parent_category_id"  # Optional (for subcategories)
-}
-```
-
-#### **Get All Categories**
-```http
-GET /api/categories?sort=name
-# No authentication required
-```
-
-#### **Get Category by ID**
-```http
-GET /api/categories/{categoryId}
-# No authentication required
-```
-
-#### **Get Root Categories**
-```http
-GET /api/categories/root?sort=name
-# No authentication required
-```
-
----
-
-### **📅 Booking Management Endpoints**
-
-#### **Create Booking**
-```http
-POST /api/bookings
-Authorization: Bearer {jwt_token}
-X-User-Id: {borrower_id}
-Content-Type: application/json
-
-{
-  "itemId": "item_id",
-  "startDate": "2025-11-15",
-  "endDate": "2025-11-20",
-  "notes": "I need this for a project"  # Optional
-}
-```
-
-#### **Get Booking by ID**
-```http
-GET /api/bookings/{bookingId}
-Authorization: Bearer {jwt_token}
-```
-
-#### **Get User's Bookings (as Borrower)**
-```http
-GET /api/bookings/my-bookings
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-
-# Alternative endpoint:
-GET /api/bookings/my
-Authorization: Bearer {jwt_token}
-X-User-Id: {user_id}
-```
-
-#### **Get Pending Approvals (as Owner)**
-```http
-GET /api/bookings/pending-approvals
-Authorization: Bearer {jwt_token}
-X-User-Id: {owner_id}
-```
-
-#### **Get Owner's Bookings**
-```http
-GET /api/bookings/my-owned
-Authorization: Bearer {jwt_token}
-X-User-Id: {owner_id}
-```
-
-#### **Approve/Confirm Booking**
-```http
-# New naming (Issue #15)
-PATCH /api/bookings/{bookingId}/approve
-Authorization: Bearer {jwt_token}
-X-User-Id: {owner_id}
-Content-Type: application/json
-
-{
-  "ownerNotes": "Please take care of it"  # Optional
-}
-
-# Original endpoint (still works)
-PATCH /api/bookings/{bookingId}/confirm
-Authorization: Bearer {jwt_token}
-X-User-Id: {owner_id}
-Content-Type: application/json
-
-{
-  "ownerNotes": "Please take care of it"  # Optional
-}
-```
-
-#### **Start/Activate Booking**
-```http
-# New naming (Issue #15)
-PATCH /api/bookings/{bookingId}/start
-Authorization: Bearer {jwt_token}
-X-User-Id: {borrower_id}
-
-# Original endpoint (still works)
-PATCH /api/bookings/{bookingId}/activate
-Authorization: Bearer {jwt_token}
-X-User-Id: {borrower_id}
-```
-
-#### **Complete Booking**
-```http
-PATCH /api/bookings/{bookingId}/complete
-Authorization: Bearer {jwt_token}
-X-User-Id: {borrower_id}
-```
-
-#### **Cancel Booking**
-```http
-PATCH /api/bookings/{bookingId}/cancel
-Authorization: Bearer {jwt_token}
-X-User-Id: {borrower_id}
-Content-Type: application/json
-
-{
-  "reason": "Plans changed"  # Optional
-}
-```
-
-#### **Reject Booking**
-```http
-PATCH /api/bookings/{bookingId}/reject
-Authorization: Bearer {jwt_token}
-X-User-Id: {owner_id}
-Content-Type: application/json
-
-{
-  "reason": "Item not available"  # Optional
-}
-```
-
----
-
-### **⭐ Rating System Endpoints**
-
-#### **Create Rating**
-```http
-POST /api/ratings
-Authorization: Bearer {jwt_token}
-Content-Type: application/json
-
-# Rating an item
-{
-  "ratingType": "USER_TO_ITEM",
-  "itemId": "item_id",
-  "ratingValue": 5,                    # 1-5
-  "comment": "Great item!",            # Optional
-  "isAnonymous": false                 # Optional, default false
-}
-
-# Rating a user
-{
-  "ratingType": "BORROWER_TO_OWNER",   # or OWNER_TO_BORROWER, USER_TO_USER
-  "rateeId": "user_id",
-  "bookingId": "booking_id",           # Optional
-  "ratingValue": 4,                    # 1-5
-  "comment": "Great communication!"    # Optional
-}
-```
-
-#### **Get User Ratings**
-```http
-GET /api/ratings/user/{userId}
-# No authentication required
-```
-
-#### **Get Item Ratings**
-```http
-GET /api/ratings/item/{itemId}
-# No authentication required
-```
-
-#### **Get Rating Statistics**
-```http
-GET /api/ratings/user/{userId}/stats
-# No authentication required
-
-GET /api/ratings/item/{itemId}/stats  
-# No authentication required
-```
-
----
-
-## 🔄 Authentication Workflows
-
-### **Registration Flow**
-```mermaid
-sequenceDiagram
-    participant F as Frontend
-    participant B as Backend
-    participant DB as Database
-
-    F->>B: POST /api/auth/register
-    B->>B: Validate input
-    B->>B: Hash password
-    B->>DB: Save user
-    B->>F: Return user data (201)
-    Note over F: Redirect to login
-```
-
-### **Login Flow**
-```mermaid
-sequenceDiagram
-    participant F as Frontend
-    participant B as Backend
-    participant DB as Database
-
-    F->>B: POST /api/auth/login
-    B->>DB: Verify credentials
-    B->>B: Generate JWT token
-    B->>F: Return token + user data
-    F->>F: Store token in localStorage
-    F->>F: Set Authorization header
-```
-
-### **Authenticated Request Flow**
-```mermaid
-sequenceDiagram
-    participant F as Frontend
-    participant B as Backend
-    participant DB as Database
-
-    F->>B: Request with Authorization header
-    B->>B: Validate JWT token
-    B->>B: Extract user from token
-    B->>B: Check X-User-Id matches token
-    B->>DB: Process request
-    B->>F: Return response
-```
-
-### **Token Storage & Management**
-```javascript
-// Frontend token management
-class AuthService {
-  login(credentials) {
-    return api.post('/api/auth/login', credentials)
-      .then(response => {
-        const { token, user } = response.data;
-        localStorage.setItem('token', token);
-        localStorage.setItem('user', JSON.stringify(user));
-        this.setAuthHeader(token);
-        return { token, user };
-      });
-  }
-
-  setAuthHeader(token) {
-    api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-  }
-
-  logout() {
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    delete api.defaults.headers.common['Authorization'];
-  }
-
-  getCurrentUser() {
-    return JSON.parse(localStorage.getItem('user'));
-  }
-
-  getToken() {
-    return localStorage.getItem('token');
-  }
-
-  isAuthenticated() {
-    const token = this.getToken();
-    if (!token) return false;
-    
-    // Check if token is expired
-    try {
-      const payload = JSON.parse(atob(token.split('.')[1]));
-      return payload.exp * 1000 > Date.now();
-    } catch {
-      return false;
-    }
-  }
-}
-```
-
----
-
-## ⚠️ Error Handling
-
-### **Standard Error Response Format**
-```json
-{
-  "success": false,
-  "message": "Error description",
-  "error_code": "ERROR_TYPE",
-  "timestamp": "2025-11-12T10:00:00Z"
-}
-```
-
-### **HTTP Status Codes**
-- **200** - Success
-- **201** - Created
-- **400** - Bad Request (validation errors)
-- **401** - Unauthorized (invalid/missing token)
-- **403** - Forbidden (no permission)
-- **404** - Not Found
-- **409** - Conflict (duplicate data)
-- **500** - Internal Server Error
-
-### **Common Error Scenarios**
-
-#### **Authentication Errors**
-```json
-// 401 - Invalid token
-{
-  "success": false,
-  "message": "Invalid or expired token",
-  "error_code": "INVALID_TOKEN"
-}
-
-// 403 - Insufficient permissions
-{
-  "success": false,
-  "message": "You don't own this item",
-  "error_code": "ACCESS_DENIED"
-}
-```
-
-#### **Validation Errors**
-```json
-// 400 - Missing required fields
-{
-  "success": false,
-  "message": "Name is required",
-  "error_code": "VALIDATION_ERROR"
-}
-```
-
-#### **Business Logic Errors**
-```json
-// 409 - Booking conflict
-{
-  "success": false,
-  "message": "Item is already booked for this period",
-  "error_code": "BOOKING_CONFLICT"
-}
-```
-
----
-
-## 🧪 Testing Guide
-
-### **Basic API Health Check**
-```bash
-# Test if backend is running
-curl -I http://localhost:8080/api/categories
-# Expected: HTTP/1.1 200 OK
-
-# Test authentication endpoint  
-curl -X POST http://localhost:8080/api/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"usernameOrEmail":"test","password":"test"}'
-# Expected: 401 or valid response (not 404/500)
-```
-
-### **Authentication Testing**
-```bash
-# 1. Register a test user
-curl -X POST http://localhost:8080/api/auth/register \
-  -H "Content-Type: application/json" \
-  -d '{
-    "username": "testuser",
-    "name": "Test User", 
-    "email": "test@example.com",
-    "password": "password123"
-  }'
-
-# 2. Login to get token
-curl -X POST http://localhost:8080/api/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{
-    "usernameOrEmail": "testuser",
-    "password": "password123"
-  }'
-
-# 3. Test authenticated endpoint
-curl -X GET http://localhost:8080/api/users/profile \
-  -H "Authorization: Bearer YOUR_TOKEN_HERE"
-```
-
-### **Item Management Testing**
-```bash
-# Test item availability endpoints (the missing one)
-curl -X PATCH http://localhost:8080/api/items/ITEM_ID/status \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer TOKEN" \
-  -H "X-User-Id: USER_ID" \
-  -d '{"status":"UNAVAILABLE"}'
-# Expected: 404 (endpoint doesn't exist)
-
-# Test working availability endpoint
-curl -X PATCH http://localhost:8080/api/items/ITEM_ID/availability \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer TOKEN" \
-  -H "X-User-Id: USER_ID" \
-  -d '{"isAvailable":false}'
-# Expected: 200 with updated item
-```
-
----
-
-## 🐛 Common Issues & Solutions
-
-### **Issue 1: "Make Unavailable" Button Not Working**
-
-**Problem**: Frontend calls `PATCH /api/items/{id}/status` but backend doesn't have this endpoint.
-
-**Root Cause**: Mismatch between frontend expectations and backend implementation.
-
-**Solutions**:
-
-**Option A: Update Frontend (Recommended)**
-```javascript
-// Change in itemService.ts
-updateItemStatus: async (itemId: string, status: ItemStatus, userId: string): Promise<Item> => {
-  // Instead of:
-  // const response = await api.patch(`/api/items/${itemId}/status`, { status }, {
-  
-  // Use:
-  const isAvailable = status === 'AVAILABLE';
-  const response = await api.patch(`/api/items/${itemId}/availability`, { isAvailable }, {
-    headers: addUserIdHeader(userId)
-  });
-  return response;
-}
-```
-
-**Option B: Add Missing Backend Endpoint**
-```java
-// Add to ItemController.java
-@PatchMapping("/{id}/status")
-public ResponseEntity<?> updateItemStatus(
-        @PathVariable String id,
-        @RequestBody Map<String, String> request,
-        @RequestHeader(value = "X-User-Id", required = true) String userId) {
-    
-    try {
-        String status = request.get("status");
-        if (status == null) {
-            return ResponseEntity.badRequest()
-                .body(Map.of("error", "Status is required"));
-        }
-        
-        // Convert status to availability
-        boolean isAvailable = "AVAILABLE".equals(status.toUpperCase());
-        ItemDTO updatedItem = itemService.setAvailability(id, isAvailable, userId);
-        return ResponseEntity.ok(updatedItem);
-    } catch (Exception e) {
-        return ResponseEntity.status(HttpStatus.BAD_REQUEST)
-            .body(Map.of("error", e.getMessage()));
-    }
-}
-```
-
-### **Issue 2: CORS Errors**
-
-**Problem**: Frontend can't reach backend due to CORS policy.
-
-**Solution**: Backend already has CORS configured correctly:
-```java
-@CrossOrigin(origins = "*", maxAge = 3600)  // On controllers
-```
-
-### **Issue 3: Authentication Failures**
-
-**Common Problems**:
-1. **Missing X-User-Id header**
-2. **Token format issues** (missing "Bearer " prefix)
-3. **Expired tokens** (24-hour expiration)
-
-**Frontend Fix**:
-```javascript
-// Ensure proper headers
-const addUserIdHeader = (userId) => ({
-  'X-User-Id': userId,
-  'Authorization': `Bearer ${localStorage.getItem('token')}`
-});
-```
-
-### **Issue 4: Static Resource Errors**
-
-**Problem**: Getting "No static resource" instead of API responses.
-
-**Causes**:
-1. Backend not running on port 8080
-2. Wrong URL (missing `/api` prefix)
-3. Spring Boot serving static files instead of API
-
-**Solutions**:
-1. Verify backend is running: `curl http://localhost:8080/api/categories`
-2. Check application.properties for conflicting static mappings
-3. Ensure controllers are properly registered
-
----
-
-## 📝 Frontend Implementation Checklist
-
-### **Authentication Integration**
-- [ ] Implement login/register forms
-- [ ] Store JWT token in localStorage
-- [ ] Set Authorization header on all authenticated requests
-- [ ] Include X-User-Id header where required
-- [ ] Handle token expiration (401 responses)
-- [ ] Implement logout functionality
-
-### **Item Management Integration**
-- [ ] ⚠️ **Fix item status update** (use `/availability` endpoint)
-- [ ] Implement item creation form
-- [ ] Add item browsing/search functionality
-- [ ] Handle image uploads properly
-- [ ] Implement owner-only actions (edit/delete)
-
-### **Booking System Integration**
-- [ ] Create booking request form
-- [ ] Implement booking approval workflow
-- [ ] Add booking status tracking
-- [ ] Handle booking state transitions
-- [ ] Display pending approvals for owners
-
-### **Rating System Integration**
-- [ ] Add rating creation forms
-- [ ] Display ratings on items/users
-- [ ] Implement rating statistics
-- [ ] Handle different rating types
-
-### **Error Handling**
-- [ ] Implement global error interceptor
-- [ ] Handle authentication errors
-- [ ] Display user-friendly error messages
-- [ ] Add loading states
-
----
-
-## 🎯 Quick Start Checklist
-
-1. **Start Backend**: `mvn spring-boot:run` (port 8080)
-2. **Start Frontend**: `npm run dev` (port 5173)  
-3. **Test Registration**: Create a test user
-4. **Test Login**: Get JWT token
-5. **Test Authenticated Endpoint**: Use token to access protected routes
-6. **Fix Item Status Issue**: Update frontend to use `/availability` endpoint
-
----
-
-## 📞 Support & Troubleshooting
-
-### **Backend Logs**
-```bash
-# Check Spring Boot logs for errors
-mvn spring-boot:run
-
-# Look for:
-✅ "Started Application in X seconds"
-✅ "Mapping servlet: 'dispatcherServlet' to [/]"
-❌ Authentication/authorization errors
-❌ Database connection issues
-```
-
-### **Frontend Debugging**
-```javascript
-// Add to browser console for debugging
-console.log('Token:', localStorage.getItem('token'));
-console.log('User:', localStorage.getItem('user'));
-
-// Check API calls in Network tab
-// Verify Authorization headers are set
-// Check response status codes
-```
-
-### **Common Commands**
-```bash
-# Backend health check
-curl http://localhost:8080/api/categories
-
-# Test authentication
-curl -X POST http://localhost:8080/api/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"usernameOrEmail":"test","password":"test"}'
-
-# Test protected endpoint
-curl -X GET http://localhost:8080/api/users/profile \
-  -H "Authorization: Bearer YOUR_TOKEN"
-```
-
----
-
-**This guide should provide everything needed for successful frontend-backend integration. The key issue identified is the missing `/status` endpoint - fix this first for the "Make Unavailable" button to work!**

frontend/JSON_FIX_SUMMARY.md

@@ -1,79 +0,0 @@
-# FIXED: JSON Parse Error - Boolean vs String Issue
-
-## 🎯 **Root Cause**
-
-**Backend Error:** `Cannot deserialize value of type java.lang.Boolean from String "UNAVAILABLE"`
-
-**Issue:** The `/api/items/{id}/availability` endpoint expects a **boolean** field, not a string status.
-
----
-
-## 🔧 **Fix Applied**
-
-### **BEFORE (Wrong JSON):**
-```json
-{
-  "status": "UNAVAILABLE"  // ❌ String value
-}
-```
-
-### **AFTER (Correct JSON):**
-```json
-{
-  "available": false  // ✅ Boolean value
-}
-```
-
-### **Mapping Logic:**
-- **"AVAILABLE" status** → `{"available": true}`
-- **"UNAVAILABLE" status** → `{"available": false}`
-
----
-
-## 📁 **Files Updated:**
-
-### **1. itemService.ts**
-```typescript
-// OLD (wrong format)
-{ status }  // Sends: {"status": "UNAVAILABLE"}
-
-// NEW (correct format)  
-const isAvailable = status === 'AVAILABLE';
-{ available: isAvailable }  // Sends: {"available": false}
-```
-
-### **2. DashboardPage.tsx**
-```typescript
-// OLD (wrong format)
-body: JSON.stringify({ status: newStatus })
-
-// NEW (correct format)
-const isAvailable = newStatus === 'AVAILABLE';
-body: JSON.stringify({ available: isAvailable })
-```
-
----
-
-## 🎯 **What Happens Now:**
-
-### **When clicking "Make Unavailable":**
-1. Frontend calculates: `isAvailable = false` (since newStatus !== 'AVAILABLE')
-2. Sends: `{"available": false}` to `/api/items/{id}/availability`
-3. Backend receives boolean and processes correctly
-4. Item becomes unavailable ✅
-
-### **When clicking "Make Available":**
-1. Frontend calculates: `isAvailable = true` (since newStatus === 'AVAILABLE')  
-2. Sends: `{"available": true}` to `/api/items/{id}/availability`
-3. Backend receives boolean and processes correctly
-4. Item becomes available ✅
-
----
-
-## ✅ **Expected Result:**
-
-- **No more JSON parse errors** - Backend gets boolean values it expects
-- **Status toggle works correctly** - Available/Unavailable as intended
-- **Proper button behavior** - "Make Available" vs "Make Unavailable"
-
-The malformed JSON error should be gone and the status toggle should work properly!

frontend/README-LOCALLEND.md

@@ -1,323 +0,0 @@
-# LocalLend Frontend
-
-A React + TypeScript + Vite application for the LocalLend peer-to-peer item sharing platform.
-
-## 📋 Project Overview
-
-LocalLend is a community platform where users can:
-- List items they own for others to borrow
-- Browse and search items available in their community  
-- Request to borrow items from other users
-- Manage bookings (approve, track, complete)
-- Rate users and items after completed transactions
-- Build trust scores through positive interactions
-
-## 🛠 Technology Stack
-
-- **Frontend Framework:** React 19+ with TypeScript
-- **Build Tool:** Vite 7+
-- **UI Framework:** Material-UI (MUI) v6
-- **Routing:** React Router DOM v6
-- **HTTP Client:** Axios (currently using fetch as fallback)
-- **Form Handling:** React Hook Form with Yup validation
-- **Date Handling:** Day.js
-- **State Management:** React Context API
-- **Authentication:** JWT tokens with localStorage
-
-## 📁 Project Structure
-
-```
-src/
-├── components/          # Reusable UI components
-├── pages/              # Page-level components
-├── services/           # API service layer
-├── context/            # React context providers
-├── hooks/              # Custom React hooks
-├── utils/              # Helper functions and constants
-├── types/              # TypeScript type definitions
-└── assets/             # Static assets
-```
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-- Node.js 18+ and npm/yarn
-- Backend API running on http://localhost:8080
-
-### Installation
-
-1. **Install Dependencies** (if npm install fails due to esbuild issues):
-   ```bash
-   # Remove problematic node_modules if they exist
-   rm -rf node_modules package-lock.json
-   
-   # Install dependencies
-   npm install
-   
-   # If still failing, try with force flag
-   npm install --force
-   ```
-
-2. **Environment Setup**
-   ```bash
-   # Create .env file in root directory
-   echo "VITE_API_BASE_URL=http://localhost:8080" > .env
-   ```
-
-3. **Start Development Server**
-   ```bash
-   npm run dev
-   ```
-
-## 📦 Dependencies Status
-
-The project dependencies are configured in package.json but may need to be installed:
-
-### Core Dependencies (Added to package.json)
-- `react` & `react-dom` - React framework
-- `react-router-dom` - Client-side routing
-- `axios` - HTTP client for API calls
-- `@mui/material` - Material-UI component library
-- `@emotion/react` & `@emotion/styled` - CSS-in-JS for MUI
-- `@mui/icons-material` - Material Design icons
-
-### Form & Validation
-- `react-hook-form` - Form state management
-- `@hookform/resolvers` - Form validation resolvers
-- `yup` - Schema validation
-
-### Date Handling
-- `dayjs` - Date manipulation library
-- `@mui/x-date-pickers` - MUI date picker components
-
-### Notifications
-- `react-hot-toast` - Toast notifications
-
-## 🏗 API Integration
-
-The frontend integrates with the LocalLend backend API following these patterns:
-
-### Authentication
-- JWT tokens stored in localStorage
-- Automatic token refresh on API calls
-- Redirect to login on 401 responses
-
-### API Services (Implemented)
-- `authService` - User authentication
-- `itemService` - Item CRUD operations
-- `bookingService` - Booking lifecycle management
-- `categoryService` - Category management
-- `ratingService` - User and item ratings
-- `userService` - User profile operations
-
-### Required Headers
-```javascript
-// For authenticated requests
-Authorization: Bearer <jwt_token>
-
-// For owner/borrower specific operations
-X-User-Id: <user_id>
-```
-
-## 📱 Key Features (Designed)
-
-### Authentication Flow
-1. User registration/login
-2. JWT token storage
-3. Protected route navigation
-4. Automatic session management
-
-### Item Management
-1. Browse items with pagination/filters
-2. Create/edit item listings
-3. Upload item images
-4. Category-based organization
-
-### Booking System
-1. Request to borrow items
-2. Owner approval workflow
-3. Booking status tracking
-4. Start/complete booking actions
-
-### Rating System
-1. Rate users after completed bookings
-2. Rate items based on experience
-3. Trust score calculation
-4. Community feedback display
-
-## 🎨 UI Components Structure (Planned)
-
-### Pages (Major Views)
-- `HomePage` - Item browsing and search
-- `LoginPage` - User authentication ✅ (Structure created)
-- `RegisterPage` - Account creation ✅ (Structure created)
-- `DashboardPage` - User dashboard
-- `ItemDetailPage` - Individual item view
-- `BookingPage` - Booking management
-- `ProfilePage` - User profile settings
-
-### Components (Reusable)
-- `Navbar` - Navigation with search
-- `ItemCard` - Item display component
-- `BookingCard` - Booking status display
-- `RatingForm` - Rating submission
-- `LoadingSpinner` - Loading states
-- `ErrorBoundary` - Error handling
-
-## 🔧 Development Commands
-
-```bash
-# Development server
-npm run dev
-
-# Production build
-npm run build
-
-# Preview production build
-npm run preview
-
-# Lint code
-npm run lint
-```
-
-## 🌐 API Endpoints Integration
-
-The frontend connects to these key backend endpoints:
-
-### Authentication
-- `POST /api/auth/register` - User registration
-- `POST /api/auth/login` - User login
-
-### Items
-- `GET /api/items` - Browse items (public)
-- `POST /api/items` - Create item (authenticated)
-- `GET /api/items/{id}` - Item details
-- `PUT /api/items/{id}` - Update item
-- `PATCH /api/items/{id}/status` - Update status
-
-### Bookings
-- `POST /api/bookings` - Create booking request
-- `GET /api/bookings` - My bookings
-- `PATCH /api/bookings/{id}/approve` - Approve booking
-- `PATCH /api/bookings/{id}/start` - Start booking
-- `PATCH /api/bookings/{id}/complete` - Complete booking
-
-### Ratings
-- `GET /api/ratings/can-rate/{bookingId}` - Check if can rate
-- `POST /api/ratings` - Submit rating
-
-## 🚨 Current Status
-
-✅ **Completed:**
-- Project scaffolding and structure
-- TypeScript type definitions (complete API coverage)
-- API service layer with fetch-based client
-- Authentication context setup
-- Basic component structure (placeholder)
-- Form validation utilities
-- Constants and helper functions
-- Project documentation
-
-⏳ **Pending (requires dependency installation):**
-- Material-UI component integration
-- React Router implementation
-- Form handling with React Hook Form
-- Complete page implementations
-- Image upload functionality
-- Real-time notifications
-- Error boundary implementation
-
-## 🛠 Implementation Roadmap
-
-### Phase 1: Dependencies & Core Setup
-1. Resolve npm installation issues
-2. Install all required dependencies
-3. Set up Material-UI theme provider
-4. Implement React Router with protected routes
-
-### Phase 2: Authentication & Navigation
-1. Complete Login/Register pages with MUI components
-2. Implement navigation bar with search
-3. Set up authentication guards
-4. Add toast notification system
-
-### Phase 3: Core Features
-1. Home page with item listings
-2. Item detail and creation pages
-3. User dashboard and profile pages
-4. Booking request and management system
-
-### Phase 4: Advanced Features
-1. Rating and review system
-2. Real-time notifications
-3. Image upload handling
-4. Search and filter functionality
-
-### Phase 5: Polish & Optimization
-1. Loading states and error handling
-2. Responsive design improvements
-3. Performance optimizations
-4. Testing implementation
-
-## 🔗 Backend Integration
-
-This frontend is designed to work with the LocalLend backend API. Ensure the backend is running on `http://localhost:8080` before starting the frontend development server.
-
-### Backend Requirements
-- Spring Boot 3.5.6 application
-- MongoDB database
-- JWT authentication enabled
-- CORS configured for `http://localhost:5173` (Vite dev server)
-
-## 📚 Documentation Reference
-
-- [Frontend Integration Guide](../FRONTEND_INTEGRATION_GUIDE.txt) - Complete API reference
-- [React Documentation](https://react.dev/)
-- [Material-UI Documentation](https://mui.com/)
-- [Vite Documentation](https://vitejs.dev/)
-
-## 🤝 Contributing
-
-1. Follow the existing code structure and patterns
-2. Implement proper TypeScript typing
-3. Add proper error handling for all API calls
-4. Follow the authentication patterns established
-5. Test with the backend API endpoints
-
-## ⚠️ Known Issues
-
-1. **NPM Installation**: There are currently issues with installing dependencies due to esbuild conflicts
-2. **React Types**: JSX types are not available until React dependencies are properly installed
-3. **Import Meta**: Environment variables access needs proper Vite typing
-
-## 🔧 Troubleshooting
-
-### NPM Installation Issues
-If you encounter esbuild-related errors during `npm install`:
-
-```bash
-# Method 1: Clean install
-rm -rf node_modules package-lock.json
-npm cache clean --force
-npm install
-
-# Method 2: Force install
-npm install --force
-
-# Method 3: Use different package manager
-yarn install
-# or
-pnpm install
-```
-
-### Development Server Issues
-If the dev server fails to start:
-
-1. Ensure you're in the correct directory (`locallend-frontend/`)
-2. Verify package.json exists in the current directory
-3. Try running with verbose output: `npm run dev --verbose`
-
----
-
-**Note:** This project is currently in development phase with complete architectural planning done. All core functionality is designed and ready for implementation once dependency installation is resolved.

frontend/README.md

@@ -1,73 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

frontend/SETUP.md

@@ -1,166 +0,0 @@
-# LocalLend Frontend - Installation & Setup Guide
-
-## 🚀 Quick Start
-
-This guide will help you set up the LocalLend frontend application.
-
-### Prerequisites
-
-1. **Node.js 18+** - Download from [nodejs.org](https://nodejs.org/)
-2. **Backend API** - Ensure the LocalLend backend is running on `http://localhost:8080`
-3. **Git** (optional) - For version control
-
-### Step 1: Clone or Navigate to Project
-
-```bash
-# If you're working with the existing project
-cd "d:\Bits\OOAD\Project OOAD\locallend_front\locallend-frontend"
-```
-
-### Step 2: Install Dependencies
-
-The project may have npm installation issues due to esbuild conflicts. Try these approaches:
-
-#### Method 1: Clean Install
-```bash
-# Remove existing node_modules if present
-rm -rf node_modules package-lock.json
-
-# Clear npm cache
-npm cache clean --force
-
-# Install dependencies
-npm install
-```
-
-#### Method 2: Force Install (if Method 1 fails)
-```bash
-npm install --force
-```
-
-#### Method 3: Alternative Package Manager
-```bash
-# Using Yarn (install yarn first: npm install -g yarn)
-yarn install
-
-# Or using pnpm (install pnpm first: npm install -g pnpm)
-pnpm install
-```
-
-### Step 3: Environment Configuration
-
-```bash
-# Copy environment template
-cp .env.example .env
-
-# Edit .env file with your settings (optional, defaults should work)
-# VITE_API_BASE_URL=http://localhost:8080
-```
-
-### Step 4: Start Development Server
-
-```bash
-npm run dev
-```
-
-The application should open at `http://localhost:5173`
-
-## 🛠 Troubleshooting
-
-### Common Issues
-
-#### 1. NPM Install Fails with esbuild Error
-```
-Error: EBUSY: resource busy or locked, rmdir 'node_modules\esbuild'
-```
-
-**Solution:**
-- Close VS Code and any other processes that might be using the files
-- Delete `node_modules` folder manually
-- Try `npm install --force`
-
-#### 2. Development Server Won't Start
-```
-npm error code ENOENT
-npm error syscall open
-npm error path package.json
-```
-
-**Solution:**
-- Ensure you're in the correct directory (`locallend-frontend/`)
-- Verify `package.json` exists
-- Use `pwd` (PowerShell) to check current directory
-
-#### 3. TypeScript/JSX Errors
-```
-JSX element implicitly has type 'any'
-Cannot find module 'react'
-```
-
-**Solution:**
-- These errors are expected until React dependencies are properly installed
-- Complete the installation process first, then restart the dev server
-
-#### 4. API Connection Issues
-```
-Network Error / CORS Error
-```
-
-**Solution:**
-- Ensure backend API is running on `http://localhost:8080`
-- Check backend CORS configuration allows `http://localhost:5173`
-- Verify API endpoints are accessible via browser
-
-### Development Notes
-
-1. **Current Status:** The project structure is complete with all TypeScript types, services, and component structures ready
-2. **Dependencies:** Some dependencies may need to be installed/resolved
-3. **Components:** Most components are created as placeholders and will render properly once React is loaded
-4. **API Integration:** All API services are implemented and ready to connect to the backend
-
-## 📦 Project Structure Overview
-
-```
-locallend-frontend/
-├── src/
-│   ├── components/        # UI components (Navbar, etc.)
-│   ├── pages/            # Page components (Home, Login, etc.) 
-│   ├── services/         # API service layer
-│   ├── context/          # React contexts (Auth)
-│   ├── utils/            # Helper functions
-│   ├── types/            # TypeScript definitions
-│   └── assets/           # Static files
-├── public/               # Public assets
-├── package.json          # Dependencies and scripts
-├── vite.config.ts       # Vite configuration
-├── tsconfig.json        # TypeScript configuration
-└── README-LOCALLEND.md  # Detailed documentation
-```
-
-## 🔗 Next Steps After Installation
-
-1. **Verify Backend Connection:** Open browser dev tools and check for successful API calls
-2. **Test Authentication:** Try to register/login a user
-3. **Browse Items:** Navigate through the item listing functionality  
-4. **Create Test Data:** Use the backend to create some test categories and items
-5. **UI Development:** Continue implementing the Material-UI components
-
-## 📚 Documentation
-
-- **Complete API Guide:** `../FRONTEND_INTEGRATION_GUIDE.txt`
-- **Project Documentation:** `README-LOCALLEND.md`
-- **Backend Setup:** Refer to backend documentation for API setup
-
-## 🆘 Support
-
-If you encounter issues:
-
-1. Check this troubleshooting guide first
-2. Review the error messages carefully
-3. Ensure backend API is running and accessible
-4. Check network/CORS configuration
-5. Try alternative installation methods above
-
----
-
-**Note:** This project follows the exact specifications from the Frontend Integration Guide to ensure seamless backend compatibility.

frontend/STATUS_TOGGLE_DEBUG.md

@@ -1,238 +0,0 @@
-# Item Status Toggle - Debugging Guide
-
-## 🔍 Issue Analysis
-
-The "Make Unavailable" button is not working. Based on the Integration Guide, here are potential causes and debugging steps:
-
-## 📋 Integration Guide Requirements
-
-### **PATCH /api/items/{itemId}/status**
-```
-Headers:
-- Authorization: Bearer <jwt_token>
-- X-User-Id: <user_id>
-- Content-Type: application/json
-
-Request Body:
-{
-  "status": "AVAILABLE" // AVAILABLE|UNAVAILABLE|BORROWED
-}
-
-Response (200): Returns updated item object
-```
-
-## 🐛 Potential Issues & Debugging
-
-### 1. **Backend Connectivity**
-**Added**: Health check to verify backend is reachable
-```javascript
-const healthCheck = await fetch('http://localhost:8080/api/items');
-```
-
-### 2. **Authentication Issues**
-**Added**: Token validation and preview
-```javascript
-console.log('🔐 Token exists:', !!token);
-console.log('🔐 Token preview:', token.substring(0, 20) + '...');
-```
-
-### 3. **Request Format Issues**
-**Added**: Detailed request logging
-```javascript
-console.log('📝 Request body:', JSON.stringify({ status: newStatus }));
-console.log('📝 Request headers:', headers);
-```
-
-### 4. **Status Validation Issues**
-**Added**: Client-side validation
-```javascript
-// Validate current status
-if (!['AVAILABLE', 'UNAVAILABLE', 'BORROWED'].includes(currentStatus)) {
-  alert('Invalid current item status');
-  return;
-}
-
-// Prevent changing borrowed items
-if (currentStatus === 'BORROWED') {
-  alert('Cannot change status of borrowed items');
-  return;
-}
-```
-
-### 5. **Backend Response Issues**
-**Added**: Detailed error parsing
-```javascript
-// Parse different error types
-if (directResponse.status === 400) {
-  errorMessage = 'Bad Request: Invalid status value or request format';
-} else if (directResponse.status === 403) {
-  errorMessage = 'Forbidden: You are not the owner of this item';
-} else if (directResponse.status === 404) {
-  errorMessage = 'Not Found: Item not found or endpoint not available';
-}
-```
-
-## 🧪 Enhanced Debugging Steps
-
-### **Step 1: Check Browser Console**
-1. Open Developer Tools → Console
-2. Click "Make Unavailable" button
-3. Look for these logs:
-   - `🏥 Backend health check for items endpoint: 200`
-   - `🔐 Token exists: true`
-   - `📝 Status change: AVAILABLE → UNAVAILABLE`
-   - `📡 Direct response status: 200`
-
-### **Step 2: Check Network Tab**
-1. Open Developer Tools → Network tab
-2. Filter by "Fetch/XHR"
-3. Click the status toggle button
-4. Look for PATCH request to `/api/items/{itemId}/status`
-5. Check:
-   - Request headers (Authorization, X-User-Id)
-   - Request body: `{"status":"UNAVAILABLE"}`
-   - Response status and body
-
-### **Step 3: Test Backend Directly**
-Test the backend endpoint directly:
-```bash
-# Replace with actual values
-curl -X PATCH http://localhost:8080/api/items/{ITEM_ID}/status \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer {JWT_TOKEN}" \
-  -H "X-User-Id: {USER_ID}" \
-  -d '{"status":"UNAVAILABLE"}'
-```
-
-## 🔧 Common Error Scenarios
-
-### **400 Bad Request**
-**Possible Causes:**
-- Invalid status value (not AVAILABLE/UNAVAILABLE/BORROWED)
-- Missing Content-Type header
-- Malformed JSON body
-- Invalid item ID format
-
-**Debug**: Check request body format and headers
-
-### **401 Unauthorized**
-**Possible Causes:**
-- Missing Authorization header
-- Invalid/expired JWT token
-- Token format incorrect
-
-**Debug**: Check token existence and format
-
-### **403 Forbidden**
-**Possible Causes:**
-- User is not the owner of the item
-- Missing X-User-Id header
-- X-User-Id doesn't match token user
-
-**Debug**: Verify user ownership and header presence
-
-### **404 Not Found**
-**Possible Causes:**
-- Item doesn't exist
-- Invalid item ID
-- Backend endpoint not available
-- Wrong API URL
-
-**Debug**: Verify item exists and API URL is correct
-
-## 🎯 Alternative Implementation
-
-If the direct approach fails, try using the service layer properly:
-
-```typescript
-// Alternative: Use service layer with better error handling
-const handleToggleStatusAlternative = async (itemId: string, currentStatus: string) => {
-  try {
-    const newStatus = currentStatus === 'AVAILABLE' ? 'UNAVAILABLE' : 'AVAILABLE';
-    
-    // Use the item service
-    const updatedItem = await itemService.updateItemStatus(itemId, newStatus, user.id);
-    
-    // Update local state
-    setMyItems(prevItems => 
-      prevItems.map(item => 
-        item.id === itemId ? { ...item, status: updatedItem.status } : item
-      )
-    );
-    
-    alert(`✅ Item status changed to ${updatedItem.status}`);
-  } catch (error: any) {
-    console.error('Service layer error:', error);
-    
-    // Extract detailed error information
-    let errorMessage = 'Failed to update item status';
-    if (error?.response?.status === 400) {
-      errorMessage = 'Invalid request: Check item status and permissions';
-    } else if (error?.response?.status === 403) {
-      errorMessage = 'You are not authorized to modify this item';
-    } else if (error?.response?.data?.message) {
-      errorMessage = error.response.data.message;
-    }
-    
-    alert(`❌ ${errorMessage}`);
-  }
-};
-```
-
-## 🔍 Backend Validation Checklist
-
-### **Item Requirements:**
-- ✅ Item must exist
-- ✅ Item must be owned by current user
-- ✅ Item must not be currently borrowed (status !== 'BORROWED')
-
-### **Request Requirements:**
-- ✅ Valid JWT token in Authorization header
-- ✅ Correct X-User-Id header
-- ✅ Valid status value (AVAILABLE/UNAVAILABLE)
-- ✅ Proper JSON format
-
-### **Permission Requirements:**
-- ✅ User must be authenticated
-- ✅ User must own the item
-- ✅ No active bookings preventing status change
-
-## 📱 Testing Instructions
-
-### **Test Valid Status Change:**
-1. Find an item with status "AVAILABLE"
-2. Click "⏸️ Make Unavailable"
-3. Should see success message
-4. Item status should change to "UNAVAILABLE"
-5. Button should change to "▶️ Make Available"
-
-### **Test Error Scenarios:**
-1. Try changing status of borrowed item
-2. Try with network disconnected
-3. Try with invalid authentication
-
-### **Verify UI Updates:**
-1. Status badge color should change
-2. Button text should update
-3. Local state should reflect change immediately
-
-## 🎯 Expected Behavior
-
-### **Success Flow:**
-1. User clicks status toggle button
-2. Confirmation (optional)
-3. API call with proper headers
-4. Backend validates ownership and status
-5. Backend updates item status
-6. Frontend receives updated item
-7. UI updates immediately
-8. Success message shown
-
-### **Error Flow:**
-1. User clicks status toggle button
-2. API call fails with specific error
-3. Detailed error message shown
-4. UI remains in original state
-5. User can retry or fix issue
-
-The enhanced debugging should now pinpoint exactly where the status toggle is failing!

frontend/TOGGLE_FIX_SUMMARY.md

@@ -1,96 +0,0 @@
-# TOGGLE FIX: Prioritize Specific Status Setting
-
-## 🎯 **Issue Fixed**
-
-**Problem:** Clicking "Make Unavailable" was using the toggle endpoint first, which just flips the status regardless of intent.
-
-**Result:** Item that was already UNAVAILABLE would become AVAILABLE when clicking "Make Unavailable" (opposite of expected behavior).
-
----
-
-## 🔧 **Solution Applied**
-
-### **Changed Endpoint Priority Order:**
-
-**BEFORE (Wrong):**
-1. Try `/api/items/{id}/toggle-availability` (just flips status)
-2. Fallback to `/api/items/{id}/availability` (sets specific status)
-
-**AFTER (Fixed):**
-1. Try `/api/items/{id}/availability` (sets specific status) ✅ **PREFERRED**
-2. Fallback to `/api/items/{id}/toggle-availability` (just flips status)
-
-### **Why This Fixes It:**
-
-- **`/availability` endpoint:** Lets us set EXACTLY the status we want (AVAILABLE or UNAVAILABLE)
-- **`/toggle-availability` endpoint:** Just flips whatever the current status is
-
-By using `/availability` first, we ensure:
-- ✅ "Make Unavailable" → Always sets to UNAVAILABLE
-- ✅ "Make Available" → Always sets to AVAILABLE
-- ✅ No unwanted toggling behavior
-
----
-
-## 📁 **Files Updated:**
-
-### **1. DashboardPage.tsx**
-```typescript
-// Now tries /availability first (with specific status)
-endpointUsed = `/api/items/${itemId}/availability`;
-directResponse = await fetch(url, {
-  method: 'PATCH',
-  body: JSON.stringify({ status: newStatus })  // Specific status!
-});
-
-// Only uses toggle as fallback if availability doesn't exist
-if (directResponse.status === 404) {
-  endpointUsed = `/api/items/${itemId}/toggle-availability`;
-  // ...
-}
-```
-
-### **2. itemService.ts**
-```typescript
-updateItemStatus: async (itemId: string, status: ItemStatus, userId: string) => {
-  // Try availability endpoint first (specific status setting)
-  try {
-    return await api.patch(`/api/items/${itemId}/availability`, { status });
-  } catch (error) {
-    // Fallback to toggle only if availability doesn't exist
-    if (error?.response?.status === 404) {
-      return await api.patch(`/api/items/${itemId}/toggle-availability`);
-    }
-    throw error;
-  }
-}
-```
-
----
-
-## 🎯 **Expected Behavior Now:**
-
-### **When clicking "Make Unavailable":**
-1. Frontend sends: `PATCH /api/items/{id}/availability` with `{"status":"UNAVAILABLE"}`
-2. Backend sets item status to UNAVAILABLE (regardless of current status)
-3. Button changes to "Make Available"
-4. Status badge shows red/unavailable
-
-### **When clicking "Make Available":**
-1. Frontend sends: `PATCH /api/items/{id}/availability` with `{"status":"AVAILABLE"}`  
-2. Backend sets item status to AVAILABLE (regardless of current status)
-3. Button changes to "Make Unavailable"
-4. Status badge shows green/available
-
----
-
-## 🧪 **Test It:**
-
-1. **Find an item that shows "AVAILABLE"**
-2. **Click "Make Unavailable"** 
-   - Should change to UNAVAILABLE and button becomes "Make Available"
-3. **Click "Make Available"** 
-   - Should change to AVAILABLE and button becomes "Make Unavailable"  
-4. **Repeat several times** - should work predictably every time
-
-**No more unwanted toggling!** The button will now do exactly what it says.

frontend/TOGGLE_SIMPLIFIED.md

@@ -1,95 +0,0 @@
-# SIMPLIFIED: Using Toggle Endpoint Only
-
-## 🎯 **Simplification Applied**
-
-**Removed:** Complex endpoint fallback logic with `/availability` endpoint
-**Using:** Only the `/api/items/{id}/toggle-availability` endpoint
-
----
-
-## 🔧 **What Changed**
-
-### **BEFORE (Complex with fallbacks):**
-```typescript
-// Try /availability endpoint first with { isAvailable: boolean }
-// Fallback to /toggle-availability if 404
-// Handle different request body formats
-// Complex error handling
-```
-
-### **AFTER (Simple toggle only):**
-```typescript
-// Just call /toggle-availability 
-// No request body needed
-// Let backend handle the toggle logic
-// Much simpler!
-```
-
----
-
-## 📁 **Files Updated:**
-
-### **1. itemService.ts**
-```typescript
-// BEFORE: Complex dual-endpoint logic
-updateItemStatus: async (itemId: string, status: ItemStatus, userId: string) => {
-  // Try availability endpoint...
-  // Fallback to toggle...
-}
-
-// AFTER: Simple toggle only
-updateItemStatus: async (itemId: string, _status: ItemStatus, userId: string) => {
-  return await api.patch(`/api/items/${itemId}/toggle-availability`, null, {
-    headers: addUserIdHeader(userId)
-  });
-}
-```
-
-### **2. DashboardPage.tsx**
-```typescript
-// BEFORE: Try availability, then toggle
-endpointUsed = `/api/items/${itemId}/availability`;
-// ... complex fallback logic
-
-// AFTER: Just toggle
-endpointUsed = `/api/items/${itemId}/toggle-availability`;
-// No body needed, just PATCH request
-```
-
----
-
-## 🎯 **How It Works Now:**
-
-### **When clicking "Make Unavailable":**
-1. Frontend calls: `PATCH /api/items/{id}/toggle-availability`
-2. Backend looks at current status and flips it
-3. If currently AVAILABLE → becomes UNAVAILABLE  
-4. Returns updated item with new status
-5. Frontend updates UI
-
-### **When clicking "Make Available":**
-1. Frontend calls: `PATCH /api/items/{id}/toggle-availability`
-2. Backend looks at current status and flips it  
-3. If currently UNAVAILABLE → becomes AVAILABLE
-4. Returns updated item with new status
-5. Frontend updates UI
-
----
-
-## ✅ **Benefits:**
-
-- **✅ Simpler code** - No complex endpoint fallback logic
-- **✅ Less error prone** - One endpoint, one request format
-- **✅ Backend handles logic** - Let the backend decide what "toggle" means
-- **✅ No field name issues** - No request body means no JSON parsing errors
-
----
-
-## 🧪 **Test It:**
-
-1. Go to Dashboard → My Items
-2. Click any status toggle button
-3. Should work smoothly with just the toggle endpoint
-4. Button text and status should update correctly
-
-**Much simpler and should work reliably now!**

frontend/VALIDATION_FIXES.md

@@ -1,112 +0,0 @@
-# Registration Validation Fixes
-
-## Issues Found and Fixed
-
-### 1. Frontend Validation Mismatches
-**FIXED** - The following validation rules were corrected to match backend requirements:
-
-#### Username Field ✅ 
-- **Requirement**: 3-50 characters, alphanumeric
-- **Status**: Already correct in frontend
-
-#### Full Name Field ❌➡️✅ 
-- **Backend Requirement**: 2-100 characters, required
-- **Frontend Before**: No length validation
-- **Frontend After**: Added `minLength={2}` and `maxLength={100}`
-
-#### Email Field ✅
-- **Requirement**: Valid email format, required
-- **Status**: Already correct with `type="email"`
-
-#### Password Field ❌➡️✅
-- **Backend Requirement**: Minimum 8 characters
-- **Frontend Before**: `minLength={6}`
-- **Frontend After**: Changed to `minLength={8}` + updated label
-
-#### Phone Number Field ❌➡️✅
-- **Backend Requirement**: Optional field
-- **Frontend Before**: `required` attribute set
-- **Frontend After**: Removed `required`, updated label to "(Optional)"
-
-#### Confirm Password Field ❌➡️✅
-- **Frontend Before**: `minLength={6}`
-- **Frontend After**: Changed to `minLength={8}` to match password field
-
-### 2. Client-Side Validation Enhancement
-**ADDED** - Comprehensive validation in `handleSubmit` function:
-
-```typescript
-// Client-side validation to match backend requirements
-const validationErrors: string[] = [];
-
-if (formData.username.length < 3 || formData.username.length > 50) {
-  validationErrors.push('Username must be between 3 and 50 characters');
-}
-
-if (formData.name.length < 2 || formData.name.length > 100) {
-  validationErrors.push('Full name must be between 2 and 100 characters');
-}
-
-if (formData.password.length < 8) {
-  validationErrors.push('Password must be at least 8 characters long');
-}
-
-if (formData.password !== formData.confirmPassword) {
-  validationErrors.push('Passwords do not match');
-}
-
-const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-if (!emailRegex.test(formData.email)) {
-  validationErrors.push('Please enter a valid email address');
-}
-```
-
-### 3. Backend Connectivity Issue
-**IDENTIFIED** - Backend is not running:
-- The `docker-compose.yml` has the backend service commented out
-- This means when you try to register, the API call fails with network errors
-
-## Testing the Registration
-
-### Method 1: Test with Name "user" (Should Work Now)
-1. Username: `testuser` (3+ characters)
-2. Full Name: `user` (2+ characters - now valid!)
-3. Email: `test@example.com`
-4. Password: `password123` (8+ characters)
-5. Phone: Leave empty (now optional)
-
-### Method 2: Start Backend First
-To actually register and connect to backend:
-
-1. **Option A: Start Backend via Docker**
-   ```bash
-   # If you have backend docker image
-   docker run -p 8080:8080 locallend/backend:latest
-   ```
-
-2. **Option B: Enable Backend in docker-compose**
-   - Uncomment the backend service in `docker-compose.yml`
-   - Run: `docker-compose up`
-
-3. **Option C: Check if Backend is Running**
-   - Use the "Test Backend Connection" button in the registration page
-   - Try alternative ports (8081, 8082, etc.) using the port test buttons
-
-## Validation Rules Summary (Now Aligned)
-
-| Field | Frontend | Backend | Status |
-|-------|----------|---------|---------|
-| Username | 3-50 chars, required | 3-50 chars, alphanumeric, unique | ✅ Aligned |
-| Name | 2-100 chars, required | 2-100 chars, required | ✅ Fixed |
-| Email | Valid email, required | Valid email, unique | ✅ Aligned |
-| Password | 8+ chars, required | Min 8 chars, required | ✅ Fixed |
-| Phone | Optional | Optional | ✅ Fixed |
-
-## Next Steps
-
-1. **Test the registration form** with name "user" - it should now work on the frontend
-2. **Start the backend** to test full registration flow
-3. **Check browser console** for detailed API call logs
-4. **Use the connection test buttons** to verify backend connectivity
-
-The frontend validation now matches the backend requirements from the integration guide!

frontend/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

frontend/healthcheck.sh

@@ -1,11 +0,0 @@
-#!/bin/sh
-# Health check script for LocalLend Frontend container
-
-# Check if Nginx is running and serving content
-if wget --quiet --tries=1 --spider http://localhost:80/; then
-    echo "Health check passed: Frontend is responding"
-    exit 0
-else
-    echo "Health check failed: Frontend is not responding"
-    exit 1
-fi

frontend/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>locallend-frontend</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/nginx.conf

@@ -1,52 +0,0 @@
-server {
-    listen 0.0.0.0:7860;
-    server_name _;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Handle client-side routing (for React Router)
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Proxy API requests to Spring Boot backend running on port 8080
-    location /api/ {
-        proxy_pass http://localhost:8080/;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-
-        # WebSocket support (if needed)
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-
-        # Timeout settings
-        proxy_connect_timeout 60s;
-        proxy_send_timeout 60s;
-        proxy_read_timeout 60s;
-    }
-
-    # Health check endpoint for HF Spaces
-    location /health {
-        access_log off;
-        return 200 "healthy\n";
-        add_header Content-Type text/plain;
-    }
-
-    # Cache static assets
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-    }
-
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-
-    # Gzip compression
-    gzip on;
-    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-}

frontend/package-lock.json

@@ -1,3289 +0,0 @@
-{
-  "name": "locallend-frontend",
-  "version": "0.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "locallend-frontend",
-      "version": "0.0.0",
-      "dependencies": {
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
-        "@hookform/resolvers": "^3.9.1",
-        "@mui/icons-material": "^6.1.7",
-        "@mui/material": "^6.1.7",
-        "@mui/x-date-pickers": "^7.20.0",
-        "axios": "^1.7.7",
-        "dayjs": "^1.11.13",
-        "react": "^19.1.1",
-        "react-dom": "^19.1.1",
-        "react-hook-form": "^7.53.2",
-        "react-hot-toast": "^2.4.1",
-        "react-router-dom": "^6.27.0",
-        "yup": "^1.4.0"
-      },
-      "devDependencies": {
-        "@eslint/js": "^9.36.0",
-        "@types/node": "^24.6.0",
-        "@types/react": "^19.1.16",
-        "@types/react-dom": "^19.1.9",
-        "@vitejs/plugin-react": "^5.0.4",
-        "eslint": "^9.36.0",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "eslint-plugin-react-refresh": "^0.4.22",
-        "globals": "^16.4.0",
-        "typescript": "~5.9.3",
-        "typescript-eslint": "^8.45.0",
-        "vite": "^7.1.7"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.28.5",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.28.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.28.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.5"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.27.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.27.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.14.0",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.4.0",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.14.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.3.3",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.4.0",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/styled": {
-      "version": "11.14.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.10.0",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.4.2",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "license": "MIT"
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.9.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/object-schema": "^2.1.7",
-        "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/config-helpers": {
-      "version": "0.4.2",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/core": "^0.17.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/core": {
-      "version": "0.17.0",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/json-schema": "^7.0.15"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "3.3.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^10.0.1",
-        "globals": "^14.0.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "14.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@eslint/js": {
-      "version": "9.39.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://eslint.org/donate"
-      }
-    },
-    "node_modules/@eslint/object-schema": {
-      "version": "2.1.7",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/plugin-kit": {
-      "version": "0.4.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/core": "^0.17.0",
-        "levn": "^0.4.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@hookform/resolvers": {
-      "version": "3.10.0",
-      "license": "MIT",
-      "peerDependencies": {
-        "react-hook-form": "^7.0.0"
-      }
-    },
-    "node_modules/@humanfs/core": {
-      "version": "0.19.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18.0"
-      }
-    },
-    "node_modules/@humanfs/node": {
-      "version": "0.16.7",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@humanfs/core": "^0.19.1",
-        "@humanwhocodes/retry": "^0.4.0"
-      },
-      "engines": {
-        "node": ">=18.18.0"
-      }
-    },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.3",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.5.0",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/icons-material": {
-      "version": "6.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^6.5.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "6.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.5.0",
-        "@mui/system": "^6.5.0",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.9",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.0.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.5.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@mui/material-pigment-css": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "6.4.9",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.4.9",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "6.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.5",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "6.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.4.9",
-        "@mui/styled-engine": "^6.5.0",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.9",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "7.2.24",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "6.4.9",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/types": "~7.2.24",
-        "@types/prop-types": "^15.7.14",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.0.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-date-pickers": {
-      "version": "7.29.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0",
-        "@mui/x-internals": "7.29.0",
-        "@types/react-transition-group": "^4.4.11",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
-        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
-        "dayjs": "^1.10.7",
-        "luxon": "^3.0.2",
-        "moment": "^2.29.4",
-        "moment-hijri": "^2.1.2 || ^3.0.0",
-        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "date-fns": {
-          "optional": true
-        },
-        "date-fns-jalali": {
-          "optional": true
-        },
-        "dayjs": {
-          "optional": true
-        },
-        "luxon": {
-          "optional": true
-        },
-        "moment": {
-          "optional": true
-        },
-        "moment-hijri": {
-          "optional": true
-        },
-        "moment-jalaali": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-internals": {
-      "version": "7.29.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.47",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.53.2",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/node": {
-      "version": "24.10.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.16.0"
-      }
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "license": "MIT"
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "license": "MIT"
-    },
-    "node_modules/@types/react": {
-      "version": "19.2.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.2.3",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.2.0"
-      }
-    },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/type-utils": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^7.0.0",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.46.4",
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
-      "version": "7.0.5",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/project-service": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.46.4",
-        "@typescript-eslint/types": "^8.46.4",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/project-service": "8.46.4",
-        "@typescript-eslint/tsconfig-utils": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.1.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.7.3",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
-        "eslint-visitor-keys": "^4.2.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "5.1.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.28.5",
-        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.47",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.18.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.15.0",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "license": "MIT"
-    },
-    "node_modules/axios": {
-      "version": "1.13.2",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.8.28",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.28.0",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.8.25",
-        "caniuse-lite": "^1.0.30001754",
-        "electron-to-chromium": "^1.5.249",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.1.4"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001754",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "license": "MIT"
-    },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "license": "MIT"
-    },
-    "node_modules/dayjs": {
-      "version": "1.11.19",
-      "license": "MIT"
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.250",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/error-ex": {
-      "version": "1.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.25.12",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint": {
-      "version": "9.39.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.8.0",
-        "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.1",
-        "@eslint/config-helpers": "^0.4.2",
-        "@eslint/core": "^0.17.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.1",
-        "@eslint/plugin-kit": "^0.4.1",
-        "@humanfs/node": "^0.16.6",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.2",
-        "@types/estree": "^1.0.6",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.6",
-        "debug": "^4.3.2",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.4.0",
-        "eslint-visitor-keys": "^4.2.1",
-        "espree": "^10.4.0",
-        "esquery": "^1.5.0",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^8.0.0",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://eslint.org/donate"
-      },
-      "peerDependencies": {
-        "jiti": "*"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.2.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "eslint": ">=8.40"
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "8.4.0",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/espree": {
-      "version": "10.4.0",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "acorn": "^8.15.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.6.0",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fastq": {
-      "version": "1.19.1",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/fdir": {
-      "version": "6.5.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "8.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "flat-cache": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "license": "MIT"
-    },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "4.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.4"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.3.3",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.4",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/globals": {
-      "version": "16.5.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/goober": {
-      "version": "2.1.18",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
-    "node_modules/ignore": {
-      "version": "5.3.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "license": "MIT"
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "license": "MIT"
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "license": "MIT"
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "license": "MIT"
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "license": "MIT"
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.11",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.27",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/optionator": {
-      "version": "0.9.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "license": "MIT"
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.5.6",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
-    "node_modules/property-expr": {
-      "version": "2.0.6",
-      "license": "MIT"
-    },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "license": "MIT"
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/react": {
-      "version": "19.2.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "19.2.0",
-      "license": "MIT",
-      "dependencies": {
-        "scheduler": "^0.27.0"
-      },
-      "peerDependencies": {
-        "react": "^19.2.0"
-      }
-    },
-    "node_modules/react-hook-form": {
-      "version": "7.66.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-hook-form"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18 || ^19"
-      }
-    },
-    "node_modules/react-hot-toast": {
-      "version": "2.6.0",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.1.3",
-        "goober": "^2.1.16"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "19.2.0",
-      "license": "MIT"
-    },
-    "node_modules/react-refresh": {
-      "version": "0.18.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "6.30.2",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.30.2",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.1",
-        "react-router": "6.30.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.11",
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.53.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.8"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.53.2",
-        "@rollup/rollup-android-arm64": "4.53.2",
-        "@rollup/rollup-darwin-arm64": "4.53.2",
-        "@rollup/rollup-darwin-x64": "4.53.2",
-        "@rollup/rollup-freebsd-arm64": "4.53.2",
-        "@rollup/rollup-freebsd-x64": "4.53.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.53.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.53.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.53.2",
-        "@rollup/rollup-linux-arm64-musl": "4.53.2",
-        "@rollup/rollup-linux-loong64-gnu": "4.53.2",
-        "@rollup/rollup-linux-ppc64-gnu": "4.53.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.53.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.53.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.53.2",
-        "@rollup/rollup-linux-x64-gnu": "4.53.2",
-        "@rollup/rollup-linux-x64-musl": "4.53.2",
-        "@rollup/rollup-openharmony-arm64": "4.53.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.53.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.53.2",
-        "@rollup/rollup-win32-x64-gnu": "4.53.2",
-        "@rollup/rollup-win32-x64-msvc": "4.53.2",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.27.0",
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "6.3.1",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "license": "MIT"
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/tiny-case": {
-      "version": "1.0.3",
-      "license": "MIT"
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/toposort": {
-      "version": "2.0.2",
-      "license": "MIT"
-    },
-    "node_modules/ts-api-utils": {
-      "version": "2.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.12"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4"
-      }
-    },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "2.19.0",
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.9.3",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/typescript-eslint": {
-      "version": "8.46.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.46.4",
-        "@typescript-eslint/parser": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "7.16.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/vite": {
-      "version": "7.2.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "esbuild": "^0.25.0",
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3",
-        "postcss": "^8.5.6",
-        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.15"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
-        "lightningcss": "^1.21.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/word-wrap": {
-      "version": "1.2.5",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/yup": {
-      "version": "1.7.1",
-      "license": "MIT",
-      "dependencies": {
-        "property-expr": "^2.0.5",
-        "tiny-case": "^1.0.3",
-        "toposort": "^2.0.2",
-        "type-fest": "^2.19.0"
-      }
-    }
-  }
-}

frontend/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "locallend-frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "docker:build": "docker build -t locallend-frontend .",
-    "docker:run": "docker run -p 3000:80 locallend-frontend",
-    "docker:compose": "docker-compose up -d",
-    "docker:compose:build": "docker-compose up --build -d",
-    "docker:stop": "docker-compose down",
-    "docker:dev": "docker-compose -f docker-compose.dev.yml up --build -d",
-    "docker:dev:stop": "docker-compose -f docker-compose.dev.yml down",
-    "docker:dev:logs": "docker-compose -f docker-compose.dev.yml logs -f"
-  },
-  "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^6.27.0",
-    "axios": "^1.7.7",
-    "@mui/material": "^6.1.7",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.7",
-    "@mui/x-date-pickers": "^7.20.0",
-    "dayjs": "^1.11.13",
-    "react-hook-form": "^7.53.2",
-    "@hookform/resolvers": "^3.9.1",
-    "yup": "^1.4.0",
-    "react-hot-toast": "^2.4.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
-  }
-}

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.tsx

@@ -1,232 +0,0 @@
-// App.tsx - Main application component for LocalLend
-
-import React, { useState, useEffect } from 'react';
-import { useAuth } from './context/AuthContext';
-import { LoginPage } from './pages/LoginPage';
-import { RegisterPage } from './pages/RegisterPage';
-import { BrowsePage } from './pages/BrowsePage';
-import { DashboardPage } from './pages/DashboardPage';
-import { MyItemsPage } from './pages/MyItemsPage';
-import { MyBookingsPage } from './pages/MyBookingsPage';
-import { AddItemPage } from './pages/AddItemPage';
-import { SearchResultsPage } from './pages/SearchResultsPage';
-import { BookItemPage } from './pages/BookItemPage';
-import { categoryService } from './services/categoryService';
-import type { Category } from './types';
-
-type Page = 'home' | 'login' | 'register' | 'browse' | 'search' | 'dashboard' | 'my-items' | 'my-bookings' | 'add-item' | 'book-item';
-
-const App = () => {
-  const { user, isAuthenticated, logout } = useAuth();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState<Page>('home');
-  const [categories, setCategories] = useState<Category[]>([]);
-
-  // Restore last page from localStorage (simple persistence)
-  useEffect(() => {
-    const saved = localStorage.getItem('currentPage') as Page | null;
-    if (saved) {
-      // If page requires auth and user not logged in, fallback to home
-      const authPages: Page[] = ['dashboard', 'my-items', 'my-bookings', 'add-item', 'book-item'];
-      if (authPages.includes(saved) && !user) {
-        setCurrentPage('home');
-      } else {
-        setCurrentPage(saved);
-        // Restore selected item for book-item page
-        if (saved === 'book-item') {
-          const savedItem = localStorage.getItem('selectedItem');
-          if (savedItem) {
-            try {
-              setSelectedItem(JSON.parse(savedItem));
-            } catch {}
-          }
-        }
-      }
-    }
-  }, [user]);
-
-  // Persist page on change
-  useEffect(() => {
-    localStorage.setItem('currentPage', currentPage);
-    if (currentPage !== 'book-item') {
-      localStorage.removeItem('selectedItem');
-    }
-  }, [currentPage]);
-
-  // Fetch categories for dropdown
-  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await categoryService.getCategories();
-        if (response && response.data) {
-          setCategories(response.data);
-        }
-      } catch (error) {
-        console.error('Failed to fetch categories:', error);
-      }
-    };
-    fetchCategories();
-  }, []);
-
-  const [selectedItem, setSelectedItem] = useState<any>(null);
-
-  // Auto-route to dashboard after successful login
-  useEffect(() => {
-    if (isAuthenticated && user && currentPage === 'login') {
-      setCurrentPage('dashboard');
-    }
-  }, [isAuthenticated, user, currentPage]);
-
-  const handleLogin = () => setCurrentPage('login');
-
-  const handleRegister = () => setCurrentPage('register');
-
-  const handleBrowse = () => setCurrentPage('browse');
-
-  const handleDashboard = () => setCurrentPage('dashboard');
-
-  const _handleMyItems = () => setCurrentPage('my-items');
-
-  const _handleMyBookings = () => setCurrentPage('my-bookings');
-
-  const handleAddItem = () => setCurrentPage('add-item');
-
-    const handleBookItem = (item: any) => {
-    if (!user) {
-      alert('Please log in to book items');
-      return;
-    }
-      // Prevent booking own item
-      if (item?.ownerId === user.id || item?.owner?.id === user.id) {
-        alert("You can't book your own item.");
-        return;
-      }
-    
-      setSelectedItem(item);
-      try { localStorage.setItem('selectedItem', JSON.stringify(item)); } catch {}
-    setCurrentPage('book-item');
-  };
-
-  const handleLogout = () => {
-    logout();
-    setCurrentPage('home');
-  };
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      setCurrentPage('search');
-    }
-  };
-
-  const navigateToHome = () => {
-    setCurrentPage('home');
-  };
-
-  // Render different pages based on current page state
-  if (currentPage === 'login') {
-    return <LoginPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'register') {
-    return <RegisterPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'browse') {
-    return <BrowsePage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'search') {
-    return <SearchResultsPage onBack={navigateToHome} searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} onBookItem={handleBookItem} />;
-  }
-
-  if (currentPage === 'dashboard') {
-    return <DashboardPage onBack={navigateToHome} onAddItem={handleAddItem} />;
-  }
-
-  if (currentPage === 'my-items') {
-    return <MyItemsPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'my-bookings') {
-    return <MyBookingsPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'add-item') {
-    return <AddItemPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'book-item') {
-    return <BookItemPage onBack={() => setCurrentPage('search')} item={selectedItem} />;
-  }
-
-  return (
-    <div style={{ fontFamily: 'Roboto, Arial, sans-serif', margin: '0', padding: '0', backgroundColor: '#ffffff', color: '#213547', minHeight: '100vh' }}>
-      <nav style={{ backgroundColor: '#1976d2', color: 'white', padding: '12px 0', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', marginBottom: '0' }}>
-        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '20px' }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button onClick={navigateToHome} style={{ color: 'white', textDecoration: 'none', background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.5rem', fontWeight: 'bold' }}>LocalLend</button>
-          </div>
-
-          <form onSubmit={handleSearch} style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 1, maxWidth: '500px' }}>
-            <input type="search" placeholder="Search items..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} style={{ flex: 1, padding: '8px 12px', border: 'none', borderRadius: '4px', fontSize: '14px' }} />
-            <select style={{ padding: '8px', border: 'none', borderRadius: '4px', fontSize: '14px' }}>
-              <option value="">All Categories</option>
-              {categories.map((category) => (
-                <option key={category.id} value={category.id}>{category.name}</option>
-              ))}
-            </select>
-            <button type="submit" style={{ padding: '8px 16px', backgroundColor: '#1565c0', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' }}>Search</button>
-          </form>
-
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            {isAuthenticated && user ? (
-              <>
-                <span style={{ color: 'white', fontSize: '14px', padding: '8px 12px', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '4px' }}>Welcome, {user.name}!</span>
-                <button onClick={handleDashboard} style={{ color: 'white', textDecoration: 'none', padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer' }}>Dashboard</button>
-                <button onClick={handleLogout} style={{ padding: '8px 16px', backgroundColor: '#d32f2f', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' }}>Logout</button>
-              </>
-            ) : (
-              <>
-                <button onClick={handleBrowse} style={{ color: 'white', textDecoration: 'none', padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer' }}>Browse Items</button>
-                <button onClick={handleLogin} style={{ padding: '8px 16px', backgroundColor: 'transparent', color: 'white', border: '1px solid white', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' }}>Login</button>
-                <button onClick={handleRegister} style={{ padding: '8px 16px', backgroundColor: '#4caf50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' }}>Register</button>
-              </>
-            )}
-          </div>
-        </div>
-      </nav>
-
-      <div style={{ padding: '20px' }}>
-        <header style={{ backgroundColor: '#1976d2', color: 'white', padding: '30px', borderRadius: '12px', marginBottom: '30px', textAlign: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
-          <h1 style={{ margin: '0 0 10px 0', fontSize: '2.5rem' }}>LocalLend - Peer-to-Peer Item Sharing</h1>
-          <p style={{ margin: '0', fontSize: '1.2rem', opacity: '0.9' }}>A community platform for borrowing and lending items</p>
-        </header>
-
-        <main style={{ maxWidth: '1200px', margin: '0 auto' }}>
-          <section style={{ marginBottom: '40px', backgroundColor: '#ffffff', padding: '30px', borderRadius: '12px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-            <h2 style={{ color: '#1976d2', marginBottom: '20px' }}>Welcome to LocalLend</h2>
-            <p style={{ fontSize: '1.1rem', lineHeight: '1.6', color: '#424242' }}>LocalLend is a peer-to-peer item sharing platform where users can:</p>
-            <ul style={{ fontSize: '1rem', lineHeight: '1.8', color: '#424242' }}>
-              <li>List items they own for others to borrow</li>
-              <li>Browse and search items available in their community</li>
-              <li>Request to borrow items from other users</li>
-              <li>Manage bookings (approve, track, complete)</li>
-              <li>Rate users and items after completed transactions</li>
-              <li>Build trust scores through positive interactions</li>
-            </ul>
-          </section>
-
-        </main>
-
-        <footer style={{ marginTop: '50px', textAlign: 'center', color: '#666', borderTop: '2px solid #e9ecef', paddingTop: '30px', backgroundColor: '#f8f9fa', marginLeft: '-20px', marginRight: '-20px', padding: '30px 20px' }}>
-          <p style={{ margin: '10px 0', fontSize: '1rem' }}>LocalLend Frontend - Built with React + TypeScript + Vite</p>
-          <p style={{ margin: '10px 0', fontSize: '0.9rem' }}>Backend API: http://localhost:8080</p>
-          <p style={{ margin: '10px 0', fontSize: '0.9rem' }}>Frontend: http://localhost:5173</p>
-        </footer>
-      </div>
-    </div>
-  );
-};
-
-export default App;

frontend/src/App.tsx.backup

@@ -1,2048 +0,0 @@
-// App.tsx - Main application component for LocalLend
-import React, { useState } from 'react';
-import { useAuth } from './context/AuthContext';
-import { LoginPage } from './pages/LoginPage';
-import { RegisterPage } from './pages/RegisterPage';
-import { BrowsePage } from './pages/BrowsePage';
-import { DashboardPage } from './pages/DashboardPage';
-import { MyItemsPage } from './pages/MyItemsPage';
-import { MyBookingsPage } from './pages/MyBookingsPage';
-import { AddItemPage } from './pages/AddItemPage';
-import { SearchResultsPage } from './pages/SearchResultsPage';
-import { BookItemPage } from './pages/BookItemPage';
-
-type Page = 'home' | 'login' | 'register' | 'browse' | 'search' | 'dashboard' | 'my-items' | 'my-bookings' | 'add-item' | 'book-item';
-
-const App = () => {
-  const { user } = useAuth();
-  const [myItems, setMyItems] = React.useState<any[]>([]);
-  const [myBookings, setMyBookings] = React.useState<any[]>([]);
-  const [receivedBookings, setReceivedBookings] = React.useState<any[]>([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-
-  React.useEffect(() => {
-    const loadDashboardData = async () => {
-      try {
-        setIsLoading(true);
-        console.log('=== DASHBOARD DATA LOADING START ===');
-        console.log('Current user:', user);
-        console.log('Current user ID:', user?.id, 'Type:', typeof user?.id);
-        console.log('JWT Token exists:', !!localStorage.getItem('token'));
-        
-        // Load items I'm lending (owned by me)
-        const itemsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items?ownerId=${user?.id}`, {
-          headers: { 
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-            'X-User-Id': user?.id?.toString() || ''
-          }
-        });
-        if (itemsResponse.ok) {
-          const itemsData = await itemsResponse.json();
-          console.log('Items API response:', itemsData);
-          // Backend returns paginated data with 'content' array, not 'data' array
-          const allItems = itemsData.content || itemsData.data || [];
-          console.log('All items from API:', allItems);
-          console.log('Query URL was:', `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items?ownerId=${user?.id}`);
-          
-          // Filter items to only show items owned by current user (frontend filtering as backup)
-          const myOwnedItems = allItems.filter((item: any) => {
-            console.log(`Comparing item.ownerId (${item.ownerId}) === user.id (${user?.id}):`, item.ownerId === user?.id);
-            return item.ownerId === user?.id || item.owner_id === user?.id;
-          });
-          console.log('Filtered myItems to:', myOwnedItems);
-          setMyItems(myOwnedItems);
-        } else {
-          console.log('Items API failed:', itemsResponse.status);
-        }
-
-        // Try to load my bookings (items I've borrowed) - gracefully handle server errors
-        try {
-          console.log('Fetching my bookings for user:', user?.id);
-          
-          // Try multiple possible endpoints for my bookings
-          let bookingsResponse;
-          let endpointUsed = '';
-          
-          // Try endpoint 1: /api/bookings/my-bookings (confirmed working by backend)
-          try {
-            endpointUsed = '/api/bookings/my-bookings';
-            bookingsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/my-bookings`, {
-              headers: { 
-                'Content-Type': 'application/json',
-                'X-User-Id': user?.id?.toString() || ''
-              }
-            });
-            
-            if (!bookingsResponse.ok && bookingsResponse.status === 404) {
-              // Try endpoint 2: /api/bookings/user/{userId} (alternative pattern)
-              endpointUsed = `/api/bookings/user/${user?.id}`;
-              bookingsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/user/${user?.id}`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-            }
-            
-            if (!bookingsResponse.ok && bookingsResponse.status === 404) {
-              // Try endpoint 3: /api/bookings (with query param)
-              endpointUsed = `/api/bookings?borrowerId=${user?.id}`;
-              bookingsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings?borrowerId=${user?.id}`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-            }
-          } catch (fetchError) {
-            console.log('Error trying booking endpoints:', fetchError);
-            setMyBookings([]);
-            return;
-          }
-          
-          console.log('Bookings response status:', bookingsResponse.status, 'from endpoint:', endpointUsed);
-          
-          if (bookingsResponse.ok) {
-            const bookingsData = await bookingsResponse.json();
-            console.log('✅ BOOKINGS SUCCESS - API response:', bookingsData);
-            console.log('Bookings response type:', typeof bookingsData, 'is array:', Array.isArray(bookingsData));
-            // Handle both paginated (content) and direct array responses
-            const bookings = bookingsData.content || bookingsData.data || bookingsData || [];
-            console.log('Final bookings array:', bookings, 'length:', bookings.length);
-            
-            // Let's also try to fetch ALL bookings to see what exists in the system
-            try {
-              const allBookingsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-              if (allBookingsResponse.ok) {
-                const allBookingsData = await allBookingsResponse.json();
-                console.log('🔍 ALL BOOKINGS in system:', allBookingsData);
-              }
-            } catch (e) {
-              console.log('Could not fetch all bookings for debugging');
-            }
-            
-            setMyBookings(bookings);
-          } else {
-            const errorText = await bookingsResponse.text();
-            console.log('All booking endpoints failed. Last error:', bookingsResponse.status, 'response:', errorText);
-            setMyBookings([]);
-          }
-        } catch (error) {
-          console.log('Bookings endpoint failed:', error);
-          setMyBookings([]);
-        }
-
-        // Try to load bookings received (people wanting to borrow my items) - gracefully handle server errors
-        try {
-          console.log('Fetching received bookings for owner:', user?.id);
-          
-          // Try multiple possible endpoints for received bookings
-          let receivedResponse;
-          let ownerEndpointUsed = '';
-          
-          // Try endpoint 1: /api/bookings/my-owned (confirmed working by backend)
-          try {
-            ownerEndpointUsed = '/api/bookings/my-owned';
-            receivedResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/my-owned`, {
-              headers: { 
-                'Content-Type': 'application/json',
-                'X-User-Id': user?.id?.toString() || ''
-              }
-            });
-            
-            if (!receivedResponse.ok && receivedResponse.status === 404) {
-              // Try endpoint 2: /api/bookings/my-owned (alternative from earlier conversation)
-              ownerEndpointUsed = '/api/bookings/my-owned';
-              receivedResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/my-owned`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-            }
-            
-            if (!receivedResponse.ok && receivedResponse.status === 404) {
-              // Try endpoint 3: /api/bookings/owner/{userId}
-              ownerEndpointUsed = `/api/bookings/owner/${user?.id}`;
-              receivedResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/owner/${user?.id}`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-            }
-            
-            if (!receivedResponse.ok && receivedResponse.status === 404) {
-              // Try endpoint 4: /api/bookings (with query param)
-              ownerEndpointUsed = `/api/bookings?ownerId=${user?.id}`;
-              receivedResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings?ownerId=${user?.id}`, {
-                headers: { 
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                  'X-User-Id': user?.id?.toString() || ''
-                }
-              });
-            }
-          } catch (fetchError) {
-            console.log('Error trying owner booking endpoints:', fetchError);
-            setReceivedBookings([]);
-            return;
-          }
-          
-          console.log('Received bookings response status:', receivedResponse.status, 'from endpoint:', ownerEndpointUsed);
-          
-          if (receivedResponse.ok) {
-            const receivedData = await receivedResponse.json();
-            console.log('Received bookings API response:', receivedData);
-            console.log('Received bookings response type:', typeof receivedData, 'is array:', Array.isArray(receivedData));
-            // Handle both paginated (content) and direct array responses
-            const bookings = receivedData.content || receivedData.data || receivedData || [];
-            console.log('Setting receivedBookings to:', bookings, 'length:', bookings.length);
-            setReceivedBookings(bookings);
-          } else {
-            const errorText = await receivedResponse.text();
-            console.log('All owner booking endpoints failed. Last error:', receivedResponse.status, 'response:', errorText);
-            setReceivedBookings([]);
-          }
-        } catch (error) {
-          console.log('Received bookings endpoint failed:', error);
-          setReceivedBookings([]);
-        }
-      } catch (error) {
-        console.error('Error loading dashboard data:', error);
-        // Set empty arrays if there's a general error
-        setMyItems([]);
-        setMyBookings([]);
-        setReceivedBookings([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    if (user) {
-      loadDashboardData();
-    }
-  }, [user]);
-
-  // Debug: Log current state values
-  console.log('Dashboard render - myItems:', myItems, 'myBookings:', myBookings, 'receivedBookings:', receivedBookings);
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-          
-          <span style={{ 
-            color: 'white', 
-            fontSize: '14px',
-            padding: '8px 12px',
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            borderRadius: '4px'
-          }}>
-            Welcome, {user?.name}!
-          </span>
-        </div>
-      </nav>
-
-      {/* Dashboard Content */}
-      <div style={{ padding: '0 20px', maxWidth: '1200px', margin: '0 auto' }}>
-        <h1 style={{ marginBottom: '30px', color: '#1976d2' }}>Dashboard</h1>
-        
-        {isLoading ? (
-          <div style={{ textAlign: 'center', padding: '40px' }}>
-            <p>Loading your dashboard...</p>
-          </div>
-        ) : (
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '20px' }}>
-            
-            {/* My Items Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-            }}>
-              <h2 style={{ color: '#1976d2', marginBottom: '15px' }}>My Items ({myItems.length})</h2>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>Items you're lending to others</p>
-              
-              {myItems.length === 0 ? (
-                <p style={{ color: '#888', fontStyle: 'italic' }}>No items listed yet. Start lending!</p>
-              ) : (
-                <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                  {myItems.map((item) => (
-                    <div key={item.id} style={{ 
-                      border: '1px solid #e0e0e0', 
-                      borderRadius: '4px', 
-                      padding: '12px', 
-                      marginBottom: '10px',
-                      backgroundColor: '#fafafa'
-                    }}>
-                      <h4 style={{ margin: '0 0 5px 0', color: '#333' }}>{item.name || item.title}</h4>
-                      <p style={{ margin: '0 0 8px 0', color: '#666', fontSize: '14px' }}>{item.description}</p>
-                      <div style={{ display: 'flex', gap: '10px', fontSize: '12px' }}>
-                        <span style={{ 
-                          padding: '2px 8px', 
-                          borderRadius: '12px', 
-                          backgroundColor: item.status === 'AVAILABLE' ? '#4caf50' : '#ff9800',
-                          color: 'white'
-                        }}>
-                          {item.status}
-                        </span>
-                        <span style={{ 
-                          padding: '2px 8px', 
-                          borderRadius: '12px', 
-                          backgroundColor: '#2196f3',
-                          color: 'white'
-                        }}>
-                          {item.condition}
-                        </span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* My Bookings Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-            }}>
-              <h2 style={{ color: '#1976d2', marginBottom: '15px' }}>My Bookings ({myBookings.length})</h2>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>Items you've borrowed from others</p>
-              
-              {myBookings.length === 0 ? (
-                <p style={{ color: '#888', fontStyle: 'italic' }}>No active bookings. Browse items to borrow!</p>
-              ) : (
-                <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                  {myBookings.map((booking) => (
-                    <div key={booking.id} style={{ 
-                      border: '1px solid #e0e0e0', 
-                      borderRadius: '4px', 
-                      padding: '12px', 
-                      marginBottom: '10px',
-                      backgroundColor: '#fafafa'
-                    }}>
-                      <h4 style={{ margin: '0 0 5px 0', color: '#333' }}>{booking.itemTitle}</h4>
-                      <p style={{ margin: '0 0 8px 0', color: '#666', fontSize: '14px' }}>
-                        {booking.startDate} to {booking.endDate}
-                      </p>
-                      <span style={{ 
-                        padding: '2px 8px', 
-                        borderRadius: '12px', 
-                        backgroundColor: booking.status === 'APPROVED' ? '#4caf50' : '#ff9800',
-                        color: 'white',
-                        fontSize: '12px'
-                      }}>
-                        {booking.status}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Booking Requests Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              gridColumn: 'span 2'
-            }}>
-              <h2 style={{ color: '#1976d2', marginBottom: '15px' }}>Booking Requests ({receivedBookings.length})</h2>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>People wanting to borrow your items</p>
-              
-              {receivedBookings.length === 0 ? (
-                <p style={{ color: '#888', fontStyle: 'italic' }}>No pending booking requests.</p>
-              ) : (
-                <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                  {receivedBookings.map((booking) => (
-                    <div key={booking.id} style={{ 
-                      border: '1px solid #e0e0e0', 
-                      borderRadius: '4px', 
-                      padding: '15px', 
-                      marginBottom: '10px',
-                      backgroundColor: '#fafafa',
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center'
-                    }}>
-                      <div>
-                        <h4 style={{ margin: '0 0 5px 0', color: '#333' }}>{booking.itemTitle}</h4>
-                        <p style={{ margin: '0 0 5px 0', color: '#666', fontSize: '14px' }}>
-                          Requested by: {booking.borrowerName}
-                        </p>
-                        <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>
-                          From: {booking.startDate}
-                        </p>
-                      </div>
-                      <div style={{ display: 'flex', gap: '10px' }}>
-                        <button style={{
-                          padding: '6px 12px',
-                          backgroundColor: '#4caf50',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer',
-                          fontSize: '14px'
-                        }}>
-                          Approve
-                        </button>
-                        <button style={{
-                          padding: '6px 12px',
-                          backgroundColor: '#f44336',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer',
-                          fontSize: '14px'
-                        }}>
-                          Decline
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-          </div>
-        )}
-        
-        {/* Quick Actions */}
-        <div style={{ 
-          marginTop: '30px',
-          display: 'flex',
-          gap: '15px',
-          flexWrap: 'wrap'
-        }}>
-          <button 
-            onClick={onAddItem}
-            style={{
-            padding: '12px 24px',
-            backgroundColor: '#4caf50',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px',
-            fontWeight: 'bold'
-          }}>
-            + Add New Item
-          </button>
-          
-          <button style={{
-            padding: '12px 24px',
-            backgroundColor: '#2196f3',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Browse Items
-          </button>
-          
-          <button onClick={onBack} style={{
-            padding: '12px 24px',
-            backgroundColor: '#757575',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Back to Home
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const MyItemsPage: React.FC<PageProps> = ({ onBack }) => (
-  <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-    <h1>My Items</h1>
-    <p>Here you can manage the items you're lending out to others.</p>
-    <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-      Back to Home
-    </button>
-  </div>
-);
-
-const MyBookingsPage: React.FC<PageProps> = ({ onBack }) => (
-  <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-    <h1>My Bookings</h1>
-    <p>Here you can see all the items you've booked from other users.</p>
-    <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-      Back to Home
-    </button>
-  </div>
-);
-
-const AddItemPage: React.FC<PageProps> = ({ onBack }) => {
-  const { user } = useAuth();
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [categories, setCategories] = React.useState<any[]>([]);
-  const [formData, setFormData] = React.useState({
-    title: '',
-    description: '',
-    category: '',
-    condition: 'GOOD',
-    pricePerDay: '',
-    availableFrom: '',
-    availableTo: '',
-    pickupLocation: '',
-    specialInstructions: ''
-  });
-
-  // Load categories from backend on component mount
-  React.useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/categories`);
-        if (response.ok) {
-          const categoryResponse = await response.json();
-          console.log('Categories loaded:', categoryResponse);
-          // Extract the data array from the response
-          const categoryData = categoryResponse.data || categoryResponse;
-          setCategories(categoryData);
-        } else {
-          console.error('Failed to load categories');
-          // Fallback categories if API fails
-          setCategories([
-            { id: '1', name: 'Electronics' },
-            { id: '2', name: 'Tools' },
-            { id: '3', name: 'Sports' },
-            { id: '4', name: 'Books' },
-            { id: '5', name: 'Furniture' },
-            { id: '6', name: 'Vehicles' },
-            { id: '7', name: 'Appliances' },
-            { id: '8', name: 'Other' }
-          ]);
-        }
-      } catch (error) {
-        console.error('Error fetching categories:', error);
-        // Fallback categories if API fails
-        setCategories([
-          { id: '1', name: 'Electronics' },
-          { id: '2', name: 'Tools' },
-          { id: '3', name: 'Sports' },
-          { id: '4', name: 'Books' },
-          { id: '5', name: 'Furniture' },
-          { id: '6', name: 'Vehicles' },
-          { id: '7', name: 'Appliances' },
-          { id: '8', name: 'Other' }
-        ]);
-      }
-    };
-
-    fetchCategories();
-  }, []);
-
-  const conditions = [
-    { value: 'EXCELLENT', label: 'Excellent - Like new' },
-    { value: 'GOOD', label: 'Good - Minor wear' },
-    { value: 'FAIR', label: 'Fair - Noticeable wear' },
-    { value: 'POOR', label: 'Poor - Significant wear' }
-  ];
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!user) {
-      alert('You must be logged in to add items');
-      return;
-    }
-
-    // Client-side validation
-    if (formData.title.length < 3 || formData.title.length > 100) {
-      alert('Item title must be between 3 and 100 characters long');
-      return;
-    }
-
-    if (formData.description.length < 10 || formData.description.length > 500) {
-      alert('Item description must be between 10 and 500 characters long');
-      return;
-    }
-
-    if (!formData.category) {
-      alert('Please select a category');
-      return;
-    }
-
-    if (formData.pricePerDay && parseFloat(formData.pricePerDay) < 0) {
-      alert('Price per day must be a positive number');
-      return;
-    }
-
-    setIsLoading(true);
-    
-    try {
-      // Prepare item data matching the backend CreateItemRequest interface
-      const itemData = {
-        name: formData.title, // Backend expects 'name', not 'title'
-        description: formData.description,
-        categoryId: formData.category, // This is now the actual category ID from the backend
-        condition: formData.condition,
-        deposit: formData.pricePerDay ? parseFloat(formData.pricePerDay) : undefined,
-        images: [] // No image upload implemented yet
-      };
-
-      console.log('Submitting item data:', itemData);
-
-      // Use the itemService to create the item (it handles auth headers properly)
-      const newItem = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`,
-          'X-User-Id': user.id.toString()
-        },
-        body: JSON.stringify(itemData)
-      });
-
-      if (newItem.ok) {
-        const createdItem = await newItem.json();
-        console.log('Item created successfully:', createdItem);
-        alert(`Item "${createdItem.name || formData.title}" added successfully!`);
-        
-        // Reset form
-        setFormData({
-          title: '',
-          description: '',
-          category: '',
-          condition: 'GOOD',
-          pricePerDay: '',
-          availableFrom: '',
-          availableTo: '',
-          pickupLocation: '',
-          specialInstructions: ''
-        });
-        
-        onBack(); // Go back to dashboard/home
-      } else {
-        const errorResponse = await newItem.text();
-        console.error('Server error response:', errorResponse);
-        
-        let errorMessage = 'Failed to add item';
-        try {
-          const errorData = JSON.parse(errorResponse);
-          errorMessage = errorData.message || errorData.error || errorMessage;
-        } catch (e) {
-          errorMessage = errorResponse || errorMessage;
-        }
-        
-        throw new Error(`Server error (${newItem.status}): ${errorMessage}`);
-      }
-    } catch (error: any) {
-      console.error('Error adding item:', error);
-      
-      if (error.name === 'TypeError' && error.message.includes('fetch')) {
-        alert('Network error: Cannot connect to backend server. Please ensure the backend is running on http://localhost:8080');
-      } else {
-        alert(`Error adding item: ${error.message}`);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-          
-          <span style={{ 
-            color: 'white', 
-            fontSize: '14px',
-            padding: '8px 12px',
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            borderRadius: '4px'
-          }}>
-            Welcome, {user?.name}!
-          </span>
-        </div>
-      </nav>
-
-      {/* Add Item Form */}
-      <div style={{ padding: '0 20px', maxWidth: '800px', margin: '0 auto' }}>
-        <h1 style={{ marginBottom: '10px', color: '#1976d2' }}>Add New Item</h1>
-        <p style={{ color: '#666', marginBottom: '30px' }}>
-          List an item you'd like to lend to others in your community.
-        </p>
-
-        <div style={{ 
-          backgroundColor: 'white', 
-          padding: '30px', 
-          borderRadius: '8px', 
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-        }}>
-          <form onSubmit={handleSubmit}>
-            {/* Title */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Item Title * (3-100 characters)
-              </label>
-              <input
-                type="text"
-                name="title"
-                value={formData.title}
-                onChange={handleChange}
-                required
-                minLength={3}
-                maxLength={100}
-                placeholder="e.g., Canon DSLR Camera, Mountain Bike, Power Drill"
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box'
-                }}
-              />
-              {formData.title.length > 0 && formData.title.length < 3 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Title must be at least 3 characters long
-                </div>
-              )}
-              {formData.title.length > 100 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Title must be no more than 100 characters long
-                </div>
-              )}
-            </div>
-
-            {/* Description */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Description * (10-500 characters)
-              </label>
-              <textarea
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                required
-                minLength={10}
-                maxLength={500}
-                rows={4}
-                placeholder="Describe your item in detail - condition, features, what's included..."
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box',
-                  resize: 'vertical'
-                }}
-              />
-              <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
-                {formData.description.length}/500 characters
-              </div>
-              {formData.description.length > 0 && formData.description.length < 10 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Description must be at least 10 characters long
-                </div>
-              )}
-            </div>
-
-            {/* Category and Condition Row */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Category *
-                </label>
-                <select
-                  name="category"
-                  value={formData.category}
-                  onChange={handleChange}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                >
-                  <option value="">Select a category</option>
-                  {categories.map(cat => (
-                    <option key={cat.id} value={cat.id}>{cat.name}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Condition *
-                </label>
-                <select
-                  name="condition"
-                  value={formData.condition}
-                  onChange={handleChange}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                >
-                  {conditions.map(condition => (
-                    <option key={condition.value} value={condition.value}>
-                      {condition.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            {/* Price */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Price per Day ($) *
-              </label>
-              <input
-                type="number"
-                name="pricePerDay"
-                value={formData.pricePerDay}
-                onChange={handleChange}
-                required
-                min="0"
-                step="0.01"
-                placeholder="25.00"
-                style={{
-                  width: '200px',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box'
-                }}
-              />
-            </div>
-
-            {/* Availability Dates */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Available From
-                </label>
-                <input
-                  type="date"
-                  name="availableFrom"
-                  value={formData.availableFrom}
-                  onChange={handleChange}
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                />
-              </div>
-
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Available Until
-                </label>
-                <input
-                  type="date"
-                  name="availableTo"
-                  value={formData.availableTo}
-                  onChange={handleChange}
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                />
-              </div>
-            </div>
-
-            {/* Pickup Location */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Pickup Location
-              </label>
-              <input
-                type="text"
-                name="pickupLocation"
-                value={formData.pickupLocation}
-                onChange={handleChange}
-                placeholder="e.g., Downtown area, My office, Near Metro Station"
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box'
-                }}
-              />
-            </div>
-
-            {/* Special Instructions */}
-            <div style={{ marginBottom: '30px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Special Instructions
-              </label>
-              <textarea
-                name="specialInstructions"
-                value={formData.specialInstructions}
-                onChange={handleChange}
-                rows={3}
-                placeholder="Any special care instructions, usage notes, or requirements..."
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box',
-                  resize: 'vertical'
-                }}
-              />
-            </div>
-
-            {/* Submit Buttons */}
-            <div style={{ display: 'flex', gap: '15px' }}>
-              <button
-                type="submit"
-                disabled={isLoading}
-                style={{
-                  padding: '12px 30px',
-                  backgroundColor: isLoading ? '#ccc' : '#4caf50',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: isLoading ? 'not-allowed' : 'pointer',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
-                }}
-              >
-                {isLoading ? 'Adding Item...' : 'Add Item'}
-              </button>
-              
-              <button
-                type="button"
-                onClick={onBack}
-                disabled={isLoading}
-                style={{
-                  padding: '12px 30px',
-                  backgroundColor: '#757575',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: isLoading ? 'not-allowed' : 'pointer',
-                  fontSize: '16px'
-                }}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const SearchResultsPage: React.FC<PageProps & { searchQuery: string; onSearchQueryChange: (query: string) => void; onBookItem: (itemId: string, itemTitle: string) => void }> = ({ onBack, searchQuery, onSearchQueryChange, onBookItem }) => {
-  console.log('🔍🔍🔍 SearchResultsPage rendered with onBookItem:', onBookItem);
-  console.log('🔍🔍🔍 SearchResultsPage component loaded successfully');
-  
-  React.useEffect(() => {
-    console.log('🔍🔍🔍 SearchResultsPage useEffect - this should show when page loads');
-  }, []);
-  const { user } = useAuth();
-  const [searchResults, setSearchResults] = React.useState<any[]>([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [selectedCategory, setSelectedCategory] = React.useState('');
-
-  React.useEffect(() => {
-    const performSearch = async () => {
-      try {
-        setIsLoading(true);
-        
-        // Search using the backend API
-        const queryParams = new URLSearchParams();
-        if (searchQuery) queryParams.append('name', searchQuery); // Backend expects 'name' parameter for search
-        if (selectedCategory) queryParams.append('categoryId', selectedCategory);
-        queryParams.append('page', '0');
-        queryParams.append('size', '20'); // Get more results for search
-        
-        console.log('Performing search with query:', searchQuery, 'category:', selectedCategory);
-        
-        const searchResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items?${queryParams.toString()}`, {
-          headers: { 
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-            'X-User-Id': user?.id?.toString() || ''
-          }
-        });
-        
-        if (searchResponse.ok) {
-          const searchData = await searchResponse.json();
-          console.log('Search API response:', searchData);
-          // Handle paginated response structure
-          const results = searchData.content || searchData.data || [];
-          console.log('Setting search results to:', results);
-          setSearchResults(results);
-        } else {
-          console.log('Search API failed:', searchResponse.status);
-          setSearchResults([]);
-        }
-      } catch (error) {
-        console.error('Search error:', error);
-        // Set empty results on error
-        setSearchResults([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    performSearch();
-  }, [searchQuery, selectedCategory]);
-
-  const handleNewSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Search will be triggered by useEffect when searchQuery changes
-  };
-
-
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: '20px'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-
-          {/* Search Bar */}
-          <form onSubmit={handleNewSearch} style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            flex: 1,
-            maxWidth: '500px'
-          }}>
-            <input
-              type="search"
-              placeholder="Search items..."
-              value={searchQuery}
-              onChange={(e) => onSearchQueryChange(e.target.value)}
-              style={{
-                flex: 1,
-                padding: '8px 12px',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-            />
-            <select 
-              value={selectedCategory}
-              onChange={(e) => setSelectedCategory(e.target.value)}
-              style={{
-                padding: '8px',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-            >
-              <option value="">All Categories</option>
-              <option value="electronics">Electronics</option>
-              <option value="tools">Tools</option>
-              <option value="sports">Sports</option>
-              <option value="books">Books</option>
-            </select>
-            <button type="submit" style={{
-              padding: '8px 16px',
-              backgroundColor: '#1565c0',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '14px'
-            }}>
-              Search
-            </button>
-          </form>
-          
-          {user && (
-            <span style={{ 
-              color: 'white', 
-              fontSize: '14px',
-              padding: '8px 12px',
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
-              borderRadius: '4px'
-            }}>
-              Welcome, {user.name}!
-            </span>
-          )}
-        </div>
-      </nav>
-
-      {/* Search Results Content */}
-      <div style={{ padding: '0 20px', maxWidth: '1200px', margin: '0 auto' }}>
-        <div style={{ marginBottom: '20px' }}>
-          <h1 style={{ color: '#1976d2', marginBottom: '10px' }}>
-            Search Results {searchQuery && `for "${searchQuery}"`}
-          </h1>
-          {selectedCategory && (
-            <p style={{ color: '#666', margin: '0' }}>
-              Category: {selectedCategory}
-            </p>
-          )}
-        </div>
-        
-        {isLoading ? (
-          <div style={{ textAlign: 'center', padding: '40px' }}>
-            <p>Searching for items...</p>
-          </div>
-        ) : (
-          <>
-            <div style={{ marginBottom: '20px', color: '#666' }}>
-              Found {searchResults.length} item{searchResults.length !== 1 ? 's' : ''}
-            </div>
-            
-            {searchResults.length === 0 ? (
-              <div style={{ 
-                backgroundColor: 'white', 
-                padding: '40px', 
-                borderRadius: '8px', 
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                textAlign: 'center'
-              }}>
-                <h3 style={{ color: '#666', marginBottom: '10px' }}>No items found</h3>
-                <p style={{ color: '#888' }}>
-                  Try adjusting your search terms or browse all available items.
-                </p>
-                <button 
-                  onClick={() => onSearchQueryChange('')}
-                  style={{
-                    padding: '10px 20px',
-                    backgroundColor: '#1976d2',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    marginTop: '15px'
-                  }}
-                >
-                  Clear Search
-                </button>
-              </div>
-            ) : (
-              <div style={{ 
-                display: 'grid', 
-                gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', 
-                gap: '20px' 
-              }}>
-                {searchResults.map((item) => (
-                  <div key={item.id} style={{ 
-                    backgroundColor: 'white', 
-                    padding: '20px', 
-                    borderRadius: '8px', 
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 'fit-content'
-                  }}>
-                    {/* Item Image Placeholder */}
-                    <div style={{
-                      width: '100%',
-                      height: '200px',
-                      backgroundColor: '#e0e0e0',
-                      borderRadius: '4px',
-                      marginBottom: '15px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#666'
-                    }}>
-                      {item.imageUrl || item.images?.[0] ? (
-                        <img src={item.imageUrl || item.images?.[0]} alt={item.name || item.title} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '4px' }} />
-                      ) : (
-                        <span>No Image</span>
-                      )}
-                    </div>
-                    
-                    <h3 style={{ margin: '0 0 8px 0', color: '#333' }}>{item.name || item.title}</h3>
-                    <p style={{ margin: '0 0 10px 0', color: '#666', fontSize: '14px', flexGrow: 1 }}>{item.description}</p>
-                    
-                    <div style={{ marginBottom: '10px', fontSize: '14px' }}>
-                      <span style={{ color: '#666' }}>Owner: </span>
-                      <span style={{ color: '#333', fontWeight: 'bold' }}>{item.owner?.name || item.ownerName || 'Unknown'}</span>
-                    </div>
-                    
-                    <div style={{ display: 'flex', gap: '8px', marginBottom: '15px', fontSize: '12px' }}>
-                      <span style={{ 
-                        padding: '2px 8px', 
-                        borderRadius: '12px', 
-                        backgroundColor: '#4caf50',
-                        color: 'white'
-                      }}>
-                        ${item.pricePerDay}/day
-                      </span>
-                      <span style={{ 
-                        padding: '2px 8px', 
-                        borderRadius: '12px', 
-                        backgroundColor: '#2196f3',
-                        color: 'white'
-                      }}>
-                        {item.condition}
-                      </span>
-                      <span style={{ 
-                        padding: '2px 8px', 
-                        borderRadius: '12px', 
-                        backgroundColor: '#ff9800',
-                        color: 'white'
-                      }}>
-                        {item.category}
-                      </span>
-                    </div>
-                    
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        console.log('🔥🔥🔥 BUTTON CLICKED! Item:', item);
-                        console.log('🔥🔥🔥 onBookItem function:', onBookItem);
-                        console.log('🔥🔥🔥 item.id:', item.id, 'item.name:', item.name);
-                        try {
-                          onBookItem(item.id, item.name || item.title);
-                        } catch (error) {
-                          console.error('🔥🔥🔥 Error calling onBookItem:', error);
-                        }
-                      }}
-                      style={{
-                        width: '100%',
-                        padding: '10px',
-                        backgroundColor: '#1976d2',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '14px',
-                        fontWeight: 'bold'
-                      }}
-                    >
-                      Book This Item
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </>
-        )}
-        
-        <div style={{ marginTop: '30px', textAlign: 'center' }}>
-          <button onClick={onBack} style={{
-            padding: '12px 24px',
-            backgroundColor: '#757575',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Back to Home
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-type Page = 'home' | 'login' | 'register' | 'browse' | 'search' | 'dashboard' | 'my-items' | 'my-bookings' | 'add-item' | 'book-item';
-
-const BookItemPage: React.FC<PageProps & { item: any }> = ({ onBack, item }) => {
-  const { user } = useAuth();
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [formData, setFormData] = React.useState({
-    startDate: '',
-    endDate: '',
-    bookingNotes: '',
-    depositAmount: 0,
-    acceptTerms: false
-  });
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value, type } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
-    }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!formData.acceptTerms) {
-      alert('Please accept the terms and conditions');
-      return;
-    }
-
-    if (new Date(formData.startDate) <= new Date()) {
-      alert('Start date must be in the future');
-      return;
-    }
-
-    if (new Date(formData.endDate) <= new Date(formData.startDate)) {
-      alert('End date must be after start date');
-      return;
-    }
-
-    setIsLoading(true);
-
-    try {
-      console.log('🚀 Creating booking for item:', item.id, 'user:', user?.id);
-      
-      const startDateTime = new Date(formData.startDate + 'T10:00:00');
-      const endDateTime = new Date(formData.endDate + 'T18:00:00');
-      
-      const bookingData = {
-        itemId: item.id,
-        startDate: startDateTime.toISOString(),
-        endDate: endDateTime.toISOString(),
-        bookingNotes: formData.bookingNotes || '',
-        depositAmount: parseFloat(formData.depositAmount.toString()) || 0,
-        requestedDurationDays: Math.ceil((endDateTime.getTime() - startDateTime.getTime()) / (1000 * 60 * 60 * 24)),
-        acceptTerms: formData.acceptTerms
-      };
-      
-      console.log('📝 Booking data to send:', bookingData);
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': user?.id?.toString() || ''
-        },
-        body: JSON.stringify(bookingData)
-      });
-      
-      console.log('📡 Booking response status:', response.status);
-      
-      if (response.ok) {
-        const bookingResponse = await response.json();
-        console.log('✅ Booking created successfully:', bookingResponse);
-        alert(`✅ Booking request sent for "${item.name}"! You can track it in your dashboard.`);
-        onBack(); // Navigate back to previous page
-      } else {
-        const errorText = await response.text();
-        console.error('❌ Booking failed:', response.status, errorText);
-        
-        let errorMessage;
-        switch (response.status) {
-          case 400:
-            errorMessage = 'Invalid booking data. Please check your information and try again.';
-            break;
-          case 401:
-            errorMessage = 'Not authenticated. Please log in again.';
-            break;
-          case 403:
-            errorMessage = 'Not authorized to create booking.';
-            break;
-          case 404:
-            errorMessage = 'Booking endpoint not found. Backend may not be running properly.';
-            break;
-          case 500:
-            errorMessage = 'Server error. Please try again later.';
-            break;
-          default:
-            errorMessage = `Server returned ${response.status}: ${errorText}`;
-        }
-        
-        alert(`❌ Failed to create booking: ${errorMessage}`);
-      }
-    } catch (error) {
-      console.error('💥 Error creating booking:', error);
-      alert(`❌ Network error creating booking: ${error}`);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (!item) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <h2>Item not found</h2>
-        <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-          Back
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
-      <div style={{ marginBottom: '20px' }}>
-        <button onClick={onBack} style={{ padding: '8px 16px', backgroundColor: '#666', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-          ← Back
-        </button>
-      </div>
-
-      <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', marginBottom: '20px' }}>
-        <h2 style={{ color: '#1976d2', marginBottom: '10px' }}>Request to Book Item</h2>
-        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
-          {item.images?.[0] && (
-            <img src={item.images[0]} alt={item.name} style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '4px', marginRight: '15px' }} />
-          )}
-          <div>
-            <h3 style={{ margin: '0 0 5px 0', color: '#333' }}>{item.name}</h3>
-            <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>{item.description}</p>
-            <p style={{ margin: '5px 0 0 0', color: '#1976d2', fontSize: '14px', fontWeight: 'bold' }}>Owner: {item.ownerName}</p>
-          </div>
-        </div>
-      </div>
-
-      <form onSubmit={handleSubmit} style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Start Date *
-          </label>
-          <input
-            type="date"
-            name="startDate"
-            value={formData.startDate}
-            onChange={handleChange}
-            required
-            min={new Date().toISOString().split('T')[0]}
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            End Date *
-          </label>
-          <input
-            type="date"
-            name="endDate"
-            value={formData.endDate}
-            onChange={handleChange}
-            required
-            min={formData.startDate || new Date().toISOString().split('T')[0]}
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Deposit Amount (Optional)
-          </label>
-          <input
-            type="number"
-            name="depositAmount"
-            value={formData.depositAmount}
-            onChange={handleChange}
-            min="0"
-            step="0.01"
-            placeholder="0.00"
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Notes to Owner (Optional)
-          </label>
-          <textarea
-            name="bookingNotes"
-            value={formData.bookingNotes}
-            onChange={handleChange}
-            rows={4}
-            placeholder="Any special requests or information for the owner..."
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px', resize: 'vertical' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-            <input
-              type="checkbox"
-              name="acceptTerms"
-              checked={formData.acceptTerms}
-              onChange={handleChange}
-              required
-              style={{ marginRight: '8px' }}
-            />
-            <span style={{ color: '#333' }}>I accept the terms and conditions for booking this item *</span>
-          </label>
-        </div>
-
-        <div style={{ display: 'flex', gap: '10px' }}>
-          <button
-            type="button"
-            onClick={onBack}
-            style={{ 
-              flex: 1,
-              padding: '12px',
-              backgroundColor: '#666',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '16px'
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={isLoading || !formData.acceptTerms}
-            style={{
-              flex: 2,
-              padding: '12px',
-              backgroundColor: isLoading || !formData.acceptTerms ? '#ccc' : '#1976d2',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: isLoading || !formData.acceptTerms ? 'not-allowed' : 'pointer',
-              fontSize: '16px',
-              fontWeight: 'bold'
-            }}
-          >
-            {isLoading ? 'Creating Booking...' : 'Send Booking Request'}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-const App = () => {
-  const { user, isAuthenticated, logout } = useAuth();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState<Page>('home');
-  const [selectedItem, setSelectedItem] = useState<any>(null);
-
-  const handleLogin = () => {
-    setCurrentPage('login');
-  };
-
-  const handleRegister = () => {
-    setCurrentPage('register');
-  };
-
-  const handleBrowse = () => {
-    setCurrentPage('browse');
-  };
-
-  const handleDashboard = () => {
-    setCurrentPage('dashboard');
-  };
-
-  const handleMyItems = () => {
-    setCurrentPage('my-items');
-  };
-
-  const handleMyBookings = () => {
-    setCurrentPage('my-bookings');
-  };
-
-  const handleAddItem = () => {
-    setCurrentPage('add-item');
-  };
-
-  const handleBookItem = (itemId: string, itemTitle: string) => {
-    console.log('🎯🎯🎯 NEW HANDLE BOOK ITEM CALLED - Item ID:', itemId, 'Item Title:', itemTitle);
-    console.log('🎯🎯🎯 User:', user);
-    
-    if (!user) {
-      console.log('🎯🎯🎯 No user - showing login alert');
-      alert('Please log in to book items');
-      return;
-    }
-    
-    console.log('🎯🎯🎯 Setting selected item and navigating to book-item page');
-    // Find the full item object from search results or fetch it
-    setSelectedItem({ id: itemId, name: itemTitle });
-    setCurrentPage('book-item');
-  };
-
-  const handleLogout = () => {
-    logout();
-    setCurrentPage('home');
-    console.log('User logged out');
-  };
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      setCurrentPage('search');
-    }
-  };
-
-  const navigateToHome = () => {
-    setCurrentPage('home');
-  };
-
-  // Render different pages based on current page state
-  if (currentPage === 'login') {
-    return <LoginPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'register') {
-    return <RegisterPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'browse') {
-    return <BrowsePage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'search') {
-    return <SearchResultsPage onBack={navigateToHome} searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} onBookItem={handleBookItem} />;
-  }
-
-  if (currentPage === 'dashboard') {
-    return <DashboardPage onBack={navigateToHome} onAddItem={handleAddItem} />;
-  }
-
-  if (currentPage === 'my-items') {
-    return <MyItemsPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'my-bookings') {
-    return <MyBookingsPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'add-item') {
-    return <AddItemPage onBack={navigateToHome} />;
-  }
-
-  if (currentPage === 'book-item') {
-    return <BookItemPage onBack={() => setCurrentPage('search')} item={selectedItem} />;
-  }
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#ffffff',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '0'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: '20px'
-        }}>
-          {/* Brand Logo */}
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={navigateToHome}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-
-          {/* Search Bar */}
-          <form onSubmit={handleSearch} style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            flex: 1,
-            maxWidth: '500px'
-          }}>
-            <input
-              type="search"
-              placeholder="Search items..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              style={{
-                flex: 1,
-                padding: '8px 12px',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-            />
-            <select style={{
-              padding: '8px',
-              border: 'none',
-              borderRadius: '4px',
-              fontSize: '14px'
-            }}>
-              <option value="">All Categories</option>
-              <option value="electronics">Electronics</option>
-              <option value="tools">Tools</option>
-              <option value="sports">Sports</option>
-              <option value="books">Books</option>
-            </select>
-            <button type="submit" style={{
-              padding: '8px 16px',
-              backgroundColor: '#1565c0',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '14px'
-            }}>
-              Search
-            </button>
-          </form>
-
-          {/* Navigation Menu */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            {isAuthenticated && user ? (
-              <>
-                <span style={{ 
-                  color: 'white', 
-                  fontSize: '14px',
-                  padding: '8px 12px',
-                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                  borderRadius: '4px'
-                }}>
-                  Welcome, {user.name}!
-                </span>
-                <button onClick={handleDashboard} style={{ color: 'white', textDecoration: 'none', padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer' }}>
-                  Dashboard
-                </button>
-                <button onClick={handleMyItems} style={{ color: 'white', textDecoration: 'none', padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer' }}>
-                  My Items
-                </button>
-                <button onClick={handleMyBookings} style={{ color: 'white', textDecoration: 'none', padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer' }}>
-                  Bookings
-                </button>
-                <button
-                  onClick={handleLogout}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: '#d32f2f',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '14px'
-                  }}
-                >
-                  Logout
-                </button>
-              </>
-            ) : (
-              <>
-                <button 
-                  onClick={handleBrowse}
-                  style={{ 
-                    color: 'white', 
-                    textDecoration: 'none', 
-                    padding: '8px 12px',
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer'
-                  }}
-                >
-                  Browse Items
-                </button>
-                <button
-                  onClick={handleLogin}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                    border: '1px solid white',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '14px'
-                  }}
-                >
-                  Login
-                </button>
-                <button
-                  onClick={handleRegister}
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: '#4caf50',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '14px'
-                  }}
-                >
-                  Register
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      </nav>
-
-      {/* Main Content */}
-      <div style={{ padding: '20px' }}>
-      <header style={{ 
-        backgroundColor: '#1976d2', 
-        color: 'white', 
-        padding: '30px',
-        borderRadius: '12px',
-        marginBottom: '30px',
-        textAlign: 'center',
-        boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
-      }}>
-        <h1 style={{ margin: '0 0 10px 0', fontSize: '2.5rem' }}>LocalLend - Peer-to-Peer Item Sharing</h1>
-        <p style={{ margin: '0', fontSize: '1.2rem', opacity: '0.9' }}>A community platform for borrowing and lending items</p>
-      </header>
-
-      <main style={{ maxWidth: '1200px', margin: '0 auto' }}>
-        <section style={{ 
-          marginBottom: '40px', 
-          backgroundColor: '#ffffff',
-          padding: '30px',
-          borderRadius: '12px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-        }}>
-          <h2 style={{ color: '#1976d2', marginBottom: '20px' }}>Welcome to LocalLend</h2>
-          <p style={{ fontSize: '1.1rem', lineHeight: '1.6', color: '#424242' }}>
-            LocalLend is a peer-to-peer item sharing platform where users can:
-          </p>
-          <ul style={{ fontSize: '1rem', lineHeight: '1.8', color: '#424242' }}>
-            <li>List items they own for others to borrow</li>
-            <li>Browse and search items available in their community</li>
-            <li>Request to borrow items from other users</li>
-            <li>Manage bookings (approve, track, complete)</li>
-            <li>Rate users and items after completed transactions</li>
-            <li>Build trust scores through positive interactions</li>
-          </ul>
-        </section>
-
-        <section style={{ 
-          backgroundColor: '#f8f9fa', 
-          padding: '30px', 
-          borderRadius: '12px',
-          marginBottom: '30px',
-          border: '1px solid #e9ecef'
-        }}>
-          <h3 style={{ color: '#1976d2', marginBottom: '25px' }}>Application Features (In Development)</h3>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              border: '1px solid #e9ecef'
-            }}>
-              <h4 style={{ color: '#333', marginBottom: '10px' }}>🔐 Authentication</h4>
-              <p style={{ color: '#666', margin: '0' }}>User registration, login, JWT token management</p>
-            </div>
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              border: '1px solid #e9ecef'
-            }}>
-              <h4 style={{ color: '#333', marginBottom: '10px' }}>📱 Item Management</h4>
-              <p style={{ color: '#666', margin: '0' }}>Create, edit, browse items with categories and conditions</p>
-            </div>
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              border: '1px solid #e9ecef'
-            }}>
-              <h4 style={{ color: '#333', marginBottom: '10px' }}>📅 Booking System</h4>
-              <p style={{ color: '#666', margin: '0' }}>Request, approve, track borrowing periods</p>
-            </div>
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              border: '1px solid #e9ecef'
-            }}>
-              <h4 style={{ color: '#333', marginBottom: '10px' }}>⭐ Rating System</h4>
-              <p style={{ color: '#666', margin: '0' }}>Rate users and items to build community trust</p>
-            </div>
-          </div>
-        </section>
-      </main>
-
-        <footer style={{ 
-          marginTop: '50px', 
-          textAlign: 'center', 
-          color: '#666',
-          borderTop: '2px solid #e9ecef',
-          paddingTop: '30px',
-          backgroundColor: '#f8f9fa',
-          marginLeft: '-20px',
-          marginRight: '-20px',
-          padding: '30px 20px'
-        }}>
-          <p style={{ margin: '10px 0', fontSize: '1rem' }}>LocalLend Frontend - Built with React + TypeScript + Vite</p>
-          <p style={{ margin: '10px 0', fontSize: '0.9rem' }}>Backend API: http://localhost:8080</p>
-          <p style={{ margin: '10px 0', fontSize: '0.9rem' }}>Frontend: http://localhost:5173</p>
-        </footer>
-      </div>
-    </div>
-  );
-};
-
-export default App;

frontend/src/components/Navbar.tsx

@@ -1,217 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  Button,
-  IconButton,
-  Menu,
-  MenuItem,
-  TextField,
-  InputAdornment,
-  Box,
-  Avatar,
-  Badge,
-  Select,
-  FormControl,
-  InputLabel
-} from '@mui/material';
-import {
-  Search as SearchIcon,
-  Notifications as NotificationsIcon,
-  ExitToApp as LogoutIcon
-} from '@mui/icons-material';
-import { useNavigate, useLocation, Link } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-import { categoryService } from '../services/categoryService';
-import type { Category } from '../types';
-
-export const Navbar: React.FC = () => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState('');
-  const [categories, setCategories] = useState<Category[]>([]);
-
-  const { user, isAuthenticated, logout } = useAuth();
-  const navigate = useNavigate();
-  const _location = useLocation();
-
-  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await categoryService.getCategories();
-        console.log('Categories API response:', response);
-        
-        // The API returns { data: Category[], success: true, count: number, message: string }
-        if (response && response.data) {
-          console.log('Categories from response.data:', response.data);
-          console.log('Number of categories:', response.data.length);
-          setCategories(response.data);
-        } else {
-          console.warn('No categories data in response:', response);
-          setCategories([]);
-        }
-      } catch (error) {
-        console.error('Failed to fetch categories:', error);
-      }
-    };
-    
-    fetchCategories();
-  }, []);
-
-  const handleUserMenuClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleUserMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleLogout = () => {
-    logout();
-    handleUserMenuClose();
-    navigate('/');
-  };
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      const searchParams = new URLSearchParams();
-      searchParams.set('query', searchQuery);
-      if (selectedCategory) {
-        searchParams.set('categoryId', selectedCategory);
-      }
-      navigate(`/?${searchParams.toString()}`);
-    }
-  };
-
-  const isOpen = Boolean(anchorEl);
-
-  return (
-    <AppBar position="static">
-      <Toolbar>
-        <Typography
-          variant="h6"
-          component={Link}
-          to="/"
-          sx={{
-            flexGrow: 0,
-            mr: 4,
-            textDecoration: 'none',
-            color: 'inherit',
-            fontWeight: 'bold'
-          }}
-        >
-          LocalLend
-        </Typography>
-
-        <Box component="form" onSubmit={handleSearch} sx={{ display: 'flex', alignItems: 'center', flexGrow: 1, maxWidth: 600 }}>
-          <TextField
-            size="small"
-            placeholder="Search items..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-            sx={{ flexGrow: 1, mr: 1, bgcolor: 'background.paper', borderRadius: 1 }}
-          />
-          
-          <FormControl size="small" sx={{ minWidth: 120, mr: 1 }}>
-            <InputLabel>Category</InputLabel>
-            <Select
-              value={selectedCategory}
-              onChange={(e) => setSelectedCategory(e.target.value)}
-              label="Category"
-              sx={{ bgcolor: 'background.paper' }}
-            >
-              <MenuItem value="">All Categories</MenuItem>
-              {categories.map((category) => (
-                <MenuItem key={category.id} value={category.id}>
-                  {category.name}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          
-          <Button
-            type="submit"
-            variant="contained"
-            color="secondary"
-            startIcon={<SearchIcon />}
-          >
-            Search
-          </Button>
-        </Box>
-
-        <Box sx={{ display: 'flex', alignItems: 'center', ml: 2 }}>
-          {isAuthenticated ? (
-            <>
-              <IconButton color="inherit" sx={{ mr: 1 }}>
-                <Badge badgeContent={0} color="error">
-                  <NotificationsIcon />
-                </Badge>
-              </IconButton>
-              
-              <IconButton
-                color="inherit"
-                onClick={handleUserMenuClick}
-                sx={{ p: 0 }}
-              >
-                <Avatar alt={user?.name} src={user?.profileImageUrl}>
-                  {user?.name?.[0]?.toUpperCase()}
-                </Avatar>
-              </IconButton>
-              
-              <Menu
-                anchorEl={anchorEl}
-                open={isOpen}
-                onClose={handleUserMenuClose}
-                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-              >
-                <MenuItem onClick={handleUserMenuClose}>
-                  <Link to="/dashboard" style={{ textDecoration: 'none', color: 'inherit' }}>
-                    Dashboard
-                  </Link>
-                </MenuItem>
-                <MenuItem onClick={handleUserMenuClose}>
-                  <Link to="/profile" style={{ textDecoration: 'none', color: 'inherit' }}>
-                    Profile
-                  </Link>
-                </MenuItem>
-                <MenuItem onClick={handleLogout}>
-                  <LogoutIcon sx={{ mr: 1 }} />
-                  Logout
-                </MenuItem>
-              </Menu>
-            </>
-          ) : (
-            <>
-              <Button
-                color="inherit"
-                component={Link}
-                to="/login"
-                sx={{ mr: 1 }}
-              >
-                Login
-              </Button>
-              <Button
-                variant="outlined"
-                color="inherit"
-                component={Link}
-                to="/register"
-              >
-                Register
-              </Button>
-            </>
-          )}
-        </Box>
-      </Toolbar>
-    </AppBar>
-  );
-};

frontend/src/context/AuthContext.tsx

@@ -1,103 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import type { ReactNode } from 'react';
-import { authService } from '../services/authService';
-import type { User, LoginRequest, RegisterRequest } from '../types';
-
-interface AuthContextType {
-  user: User | null;
-  isAuthenticated: boolean;
-  isLoading: boolean;
-  login: (credentials: LoginRequest) => Promise<void>;
-  register: (userData: RegisterRequest) => Promise<void>;
-  logout: () => void;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-export const useAuth = (): AuthContextType => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
-
-interface AuthProviderProps {
-  children: ReactNode;
-}
-
-export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Check for existing authentication on component mount
-  useEffect(() => {
-    const checkAuth = () => {
-      try {
-        const currentUser = authService.getCurrentUser();
-        const isAuth = authService.isAuthenticated();
-        
-        if (isAuth && currentUser) {
-          setUser(currentUser);
-        }
-      } catch (error) {
-        console.error('Error checking authentication:', error);
-        // Clear invalid token/user data
-        authService.logout();
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    checkAuth();
-  }, []);
-
-  const login = async (credentials: LoginRequest): Promise<void> => {
-    setIsLoading(true);
-    try {
-      const response = await authService.login(credentials);
-      setUser(response.user);
-    } catch (error) {
-      throw error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const register = async (userData: RegisterRequest): Promise<void> => {
-    setIsLoading(true);
-    try {
-      await authService.register(userData);
-      // After successful registration, auto-login the user
-      const loginResponse = await authService.login({
-        usernameOrEmail: userData.username,
-        password: userData.password
-      });
-      setUser(loginResponse.user);
-    } catch (error) {
-      throw error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const logout = (): void => {
-    authService.logout();
-    setUser(null);
-  };
-
-  const value: AuthContextType = {
-    user,
-    isAuthenticated: !!user,
-    isLoading,
-    login,
-    register,
-    logout
-  };
-
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
-};

frontend/src/index.css

@@ -1,74 +0,0 @@
-:root {
-  font-family: 'Roboto', system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: #213547;
-  background-color: #ffffff;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #ffffff;
-  color: #213547;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #f9f9f9;
-  color: #213547;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-  }
-  body {
-    background-color: #242424;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #1a1a1a;
-    color: rgba(255, 255, 255, 0.87);
-  }
-}

frontend/src/main.tsx

@@ -1,13 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-import { AuthProvider } from './context/AuthContext'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <AuthProvider>
-      <App />
-    </AuthProvider>
-  </StrictMode>,
-)

frontend/src/pages/AddItemPage.tsx

@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../context/AuthContext';
-
-interface AddItemPageProps {
-  onBack: () => void;
-}
-
-export const AddItemPage: React.FC<AddItemPageProps> = ({ onBack }) => {
-  const { user } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
-  const [categories, setCategories] = useState<any[]>([]);
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    category: '',
-    condition: 'GOOD',
-    deposit: ''
-  });
-  
-  // Image upload states
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
-  const [uploadedImageUrls, setUploadedImageUrls] = useState<string[]>([]);
-  const [isUploadingImages, setIsUploadingImages] = useState(false);
-
-  // Load categories from backend on component mount
-  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/categories`);
-        if (response.ok) {
-          const categoryResponse = await response.json();
-          console.log('Categories loaded:', categoryResponse);
-          // Extract the data array from the response
-          const categoryData = categoryResponse.data || categoryResponse;
-          setCategories(categoryData);
-        } else {
-          console.error('Failed to load categories');
-          // Fallback categories if API fails
-          setCategories([
-            { id: '1', name: 'Electronics' },
-            { id: '2', name: 'Tools' },
-            { id: '3', name: 'Sports' },
-            { id: '4', name: 'Books' },
-            { id: '5', name: 'Furniture' },
-            { id: '6', name: 'Vehicles' },
-            { id: '7', name: 'Appliances' },
-            { id: '8', name: 'Other' }
-          ]);
-        }
-      } catch (error) {
-        console.error('Error fetching categories:', error);
-        // Fallback categories if API fails
-        setCategories([
-          { id: '1', name: 'Electronics' },
-          { id: '2', name: 'Tools' },
-          { id: '3', name: 'Sports' },
-          { id: '4', name: 'Books' },
-          { id: '5', name: 'Furniture' },
-          { id: '6', name: 'Vehicles' },
-          { id: '7', name: 'Appliances' },
-          { id: '8', name: 'Other' }
-        ]);
-      }
-    };
-
-    fetchCategories();
-  }, []);
-
-  const conditions = [
-    { value: 'NEW', label: 'New' },
-    { value: 'EXCELLENT', label: 'Excellent - Like new' },
-    { value: 'GOOD', label: 'Good - Minor wear' },
-    { value: 'FAIR', label: 'Fair - Noticeable wear' },
-    { value: 'POOR', label: 'Poor - Significant wear' }
-  ];
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  // Handle image file selection
-  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files) return;
-
-    const fileArray = Array.from(files);
-    
-    // Validate file count
-    if (fileArray.length + selectedFiles.length > 5) {
-      alert('Maximum 5 images allowed per item');
-      return;
-    }
-
-    // Validate file types and sizes
-    const validFiles: File[] = [];
-    for (const file of fileArray) {
-      if (!file.type.startsWith('image/')) {
-        alert(`${file.name} is not an image file`);
-        continue;
-      }
-      if (file.size > 10 * 1024 * 1024) {
-        alert(`${file.name} exceeds 10MB size limit`);
-        continue;
-      }
-      validFiles.push(file);
-    }
-
-    if (validFiles.length === 0) return;
-
-    // Update selected files
-    setSelectedFiles(prev => [...prev, ...validFiles]);
-
-    // Generate previews
-    validFiles.forEach(file => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setImagePreviews(prev => [...prev, reader.result as string]);
-      };
-      reader.readAsDataURL(file);
-    });
-  };
-
-  // Remove an image from selection
-  const handleRemoveImage = (index: number) => {
-    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
-    setImagePreviews(prev => prev.filter((_, i) => i !== index));
-    setUploadedImageUrls(prev => prev.filter((_, i) => i !== index));
-  };
-
-  // Upload images to backend
-  const uploadImages = async (): Promise<string[]> => {
-    if (selectedFiles.length === 0) return [];
-
-    setIsUploadingImages(true);
-    const uploadedUrls: string[] = [];
-
-    try {
-      // Upload images one by one (or use upload-multiple endpoint)
-      for (const file of selectedFiles) {
-        const formData = new FormData();
-        formData.append('file', file);
-        formData.append('folder', 'locallend/items');
-
-        const response = await fetch(
-          `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/images/upload`,
-          {
-            method: 'POST',
-            headers: {
-              'Authorization': `Bearer ${localStorage.getItem('token')}`
-            },
-            body: formData
-          }
-        );
-
-        if (response.ok) {
-          const result = await response.json();
-          uploadedUrls.push(result.url);
-        } else {
-          console.error('Failed to upload image:', file.name);
-          throw new Error(`Failed to upload ${file.name}`);
-        }
-      }
-
-      setUploadedImageUrls(uploadedUrls);
-      return uploadedUrls;
-    } catch (error: any) {
-      console.error('Image upload error:', error);
-      throw new Error('Failed to upload images: ' + error.message);
-    } finally {
-      setIsUploadingImages(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!user) {
-      alert('You must be logged in to add items');
-      return;
-    }
-
-    // Client-side validation
-    if (formData.title.length < 3 || formData.title.length > 100) {
-      alert('Item title must be between 3 and 100 characters long');
-      return;
-    }
-
-    if (formData.description.length < 10 || formData.description.length > 500) {
-      alert('Item description must be between 10 and 500 characters long');
-      return;
-    }
-
-    if (!formData.category) {
-      alert('Please select a category');
-      return;
-    }
-
-    if (formData.deposit === '' || isNaN(Number(formData.deposit)) || Number(formData.deposit) < 0) {
-      alert('Deposit must be a non-negative number');
-      return;
-    }
-
-    setIsLoading(true);
-    
-    try {
-      // Upload images first (if any selected)
-      let imageUrls: string[] = [];
-      if (selectedFiles.length > 0) {
-        try {
-          imageUrls = await uploadImages();
-          console.log('Images uploaded successfully:', imageUrls);
-        } catch (uploadError: any) {
-          alert('Failed to upload images. Please try again.');
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      // Prepare item data matching the backend CreateItemRequest interface
-      const itemData = {
-        name: formData.title, // Backend expects 'name', not 'title'
-        description: formData.description,
-        categoryId: formData.category, // Backend expects categoryId
-        condition: formData.condition,
-        deposit: Number(formData.deposit) || 0,
-        images: imageUrls // Include uploaded image URLs
-      };
-
-      console.log('Submitting item data:', itemData);
-
-      // Use the itemService to create the item (it handles auth headers properly)
-      const newItem = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`,
-          'X-User-Id': user.id.toString()
-        },
-        body: JSON.stringify(itemData)
-      });
-
-      if (newItem.ok) {
-        const createdItem = await newItem.json();
-        console.log('Item created successfully:', createdItem);
-        alert(`Item "${createdItem.name || formData.title}" added successfully!`);
-        
-        // Reset form
-        setFormData({
-          title: '',
-          description: '',
-          category: '',
-          condition: 'GOOD',
-          deposit: ''
-        });
-        setSelectedFiles([]);
-        setImagePreviews([]);
-        setUploadedImageUrls([]);
-        
-        onBack(); // Go back to dashboard/home
-      } else {
-        const errorResponse = await newItem.text();
-        console.error('Server error response:', errorResponse);
-        
-        let errorMessage = 'Failed to add item';
-        try {
-          const errorData = JSON.parse(errorResponse);
-          errorMessage = errorData.message || errorData.error || errorMessage;
-        } catch (e) {
-          errorMessage = errorResponse || errorMessage;
-        }
-        
-        throw new Error(`Server error (${newItem.status}): ${errorMessage}`);
-      }
-    } catch (error: any) {
-      console.error('Error adding item:', error);
-      
-      if (error.name === 'TypeError' && error.message.includes('fetch')) {
-        alert('Network error: Cannot connect to backend server. Please ensure the backend is running on http://localhost:8080');
-      } else {
-        alert(`Error adding item: ${error.message}`);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-          
-          <span style={{ 
-            color: 'white', 
-            fontSize: '14px',
-            padding: '8px 12px',
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            borderRadius: '4px'
-          }}>
-            Welcome, {user?.name}!
-          </span>
-        </div>
-      </nav>
-
-      {/* Add Item Form */}
-      <div style={{ padding: '0 20px', maxWidth: '800px', margin: '0 auto' }}>
-        <h1 style={{ marginBottom: '10px', color: '#1976d2' }}>Add New Item</h1>
-        <p style={{ color: '#666', marginBottom: '30px' }}>
-          List an item you'd like to lend to others in your community.
-        </p>
-
-        <div style={{ 
-          backgroundColor: 'white', 
-          padding: '30px', 
-          borderRadius: '8px', 
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-        }}>
-          <form onSubmit={handleSubmit}>
-            {/* Title */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Item Title * (3-100 characters)
-              </label>
-              <input
-                type="text"
-                name="title"
-                value={formData.title}
-                onChange={handleChange}
-                required
-                minLength={3}
-                maxLength={100}
-                placeholder="e.g., Canon DSLR Camera, Mountain Bike, Power Drill"
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box'
-                }}
-              />
-              {formData.title.length > 0 && formData.title.length < 3 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Title must be at least 3 characters long
-                </div>
-              )}
-              {formData.title.length > 100 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Title must be no more than 100 characters long
-                </div>
-              )}
-            </div>
-
-            {/* Description */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Description * (10-500 characters)
-              </label>
-              <textarea
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                required
-                minLength={10}
-                maxLength={500}
-                rows={4}
-                placeholder="Describe your item in detail - condition, features, what's included..."
-                style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box',
-                  resize: 'vertical'
-                }}
-              />
-              <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
-                {formData.description.length}/500 characters
-              </div>
-              {formData.description.length > 0 && formData.description.length < 10 && (
-                <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
-                  Description must be at least 10 characters long
-                </div>
-              )}
-            </div>
-
-            {/* Category and Condition Row */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Category *
-                </label>
-                <select
-                  name="category"
-                  value={formData.category}
-                  onChange={handleChange}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                >
-                  <option value="">Select a category</option>
-                  {categories.map(cat => (
-                    <option key={cat.id} value={cat.id}>{cat.name}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div>
-                <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                  Condition *
-                </label>
-                <select
-                  name="condition"
-                  value={formData.condition}
-                  onChange={handleChange}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '12px',
-                    border: '1px solid #ddd',
-                    borderRadius: '4px',
-                    fontSize: '16px',
-                    boxSizing: 'border-box'
-                  }}
-                >
-                  {conditions.map(condition => (
-                    <option key={condition.value} value={condition.value}>
-                      {condition.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            {/* Deposit */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Deposit (₹) *
-              </label>
-              <input
-                type="number"
-                name="deposit"
-                value={formData.deposit}
-                onChange={handleChange}
-                required
-                min="0"
-                step="0.01"
-                placeholder="25.00"
-                style={{
-                  width: '200px',
-                  padding: '12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px',
-                  boxSizing: 'border-box'
-                }}
-              />
-            </div>
-
-            {/* Image Upload Section */}
-            <div style={{ marginBottom: '20px' }}>
-              <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-                Item Images (Optional, max 5)
-              </label>
-              <p style={{ fontSize: '12px', color: '#666', marginBottom: '10px' }}>
-                Upload clear photos of your item. Supported formats: JPG, PNG, GIF, WebP (max 10MB each)
-              </p>
-              
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={handleImageSelect}
-                disabled={isUploadingImages || selectedFiles.length >= 5}
-                style={{
-                  display: 'block',
-                  marginBottom: '15px',
-                  padding: '10px',
-                  border: '2px dashed #ddd',
-                  borderRadius: '4px',
-                  width: '100%',
-                  boxSizing: 'border-box',
-                  cursor: selectedFiles.length >= 5 ? 'not-allowed' : 'pointer'
-                }}
-              />
-
-              {/* Image Previews */}
-              {imagePreviews.length > 0 && (
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '10px' }}>
-                  {imagePreviews.map((preview, index) => (
-                    <div key={index} style={{ position: 'relative', borderRadius: '8px', overflow: 'hidden', border: '2px solid #ddd' }}>
-                      <img 
-                        src={preview} 
-                        alt={`Preview ${index + 1}`} 
-                        style={{ 
-                          width: '100%', 
-                          height: '120px', 
-                          objectFit: 'cover',
-                          display: 'block'
-                        }} 
-                      />
-                      <button
-                        type="button"
-                        onClick={() => handleRemoveImage(index)}
-                        disabled={isUploadingImages}
-                        style={{
-                          position: 'absolute',
-                          top: '5px',
-                          right: '5px',
-                          backgroundColor: 'rgba(244, 67, 54, 0.9)',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '50%',
-                          width: '24px',
-                          height: '24px',
-                          cursor: 'pointer',
-                          fontSize: '16px',
-                          lineHeight: '24px',
-                          padding: '0',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center'
-                        }}
-                        title="Remove image"
-                      >
-                        ×
-                      </button>
-                      {uploadedImageUrls[index] && (
-                        <div style={{
-                          position: 'absolute',
-                          bottom: '5px',
-                          left: '5px',
-                          backgroundColor: 'rgba(76, 175, 80, 0.9)',
-                          color: 'white',
-                          padding: '2px 6px',
-                          borderRadius: '3px',
-                          fontSize: '10px',
-                          fontWeight: 'bold'
-                        }}>
-                          ✓ Uploaded
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {isUploadingImages && (
-                <div style={{ 
-                  marginTop: '10px', 
-                  padding: '10px', 
-                  backgroundColor: '#e3f2fd', 
-                  borderRadius: '4px',
-                  color: '#1976d2',
-                  fontSize: '14px'
-                }}>
-                  📤 Uploading images...
-                </div>
-              )}
-            </div>
-
-            {/* Submit Buttons */}
-            <div style={{ display: 'flex', gap: '15px' }}>
-              <button
-                type="submit"
-                disabled={isLoading}
-                style={{
-                  padding: '12px 30px',
-                  backgroundColor: isLoading ? '#ccc' : '#4caf50',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: isLoading ? 'not-allowed' : 'pointer',
-                  fontSize: '16px',
-                  fontWeight: 'bold'
-                }}
-              >
-                {isLoading ? 'Adding Item...' : 'Add Item'}
-              </button>
-              
-              <button
-                type="button"
-                onClick={onBack}
-                disabled={isLoading}
-                style={{
-                  padding: '12px 30px',
-                  backgroundColor: '#757575',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: isLoading ? 'not-allowed' : 'pointer',
-                  fontSize: '16px'
-                }}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/BookItemPage.tsx

@@ -1,348 +0,0 @@
-import React, { useState } from 'react';
-import { useAuth } from '../context/AuthContext';
-// import { bookingService } from '../services/bookingService';
-// import type { CreateBookingRequest } from '../types';
-
-interface BookItemPageProps {
-  onBack: () => void;
-  item: any;
-}
-
-export const BookItemPage: React.FC<BookItemPageProps> = ({ onBack, item }) => {
-  const { user } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    startDate: '',
-    endDate: '',
-    bookingNotes: '',
-    depositAmount: 0,
-    acceptTerms: false
-  });
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value, type } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
-    }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!formData.acceptTerms) {
-      alert('Please accept the terms and conditions');
-      return;
-    }
-
-    // More robust date validation
-    const now = new Date();
-    const startDate = new Date(formData.startDate);
-    const endDate = new Date(formData.endDate);
-    
-    // Start date must be at least tomorrow
-    const tomorrow = new Date(now);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-    tomorrow.setHours(0, 0, 0, 0);
-    
-    if (startDate < tomorrow) {
-      alert('Start date must be at least tomorrow');
-      return;
-    }
-
-    if (endDate <= startDate) {
-      alert('End date must be after start date');
-      return;
-    }
-    
-    // Additional validation checks
-    if (!formData.acceptTerms) {
-      alert('You must accept the terms and conditions');
-      return;
-    }
-    
-    if (!item?.id) {
-      alert('Invalid item selected');
-      return;
-    }
-
-    setIsLoading(true);
-
-    try {
-      console.log('🚀 Creating booking for item:', item.id, 'user:', user?.id);
-      
-      // Create date objects with proper time
-      const startDateTime = new Date(formData.startDate + 'T10:00:00');
-      const endDateTime = new Date(formData.endDate + 'T18:00:00');
-      
-      // Calculate duration in days
-      const durationDays = Math.max(1, Math.ceil((endDateTime.getTime() - startDateTime.getTime()) / (1000 * 60 * 60 * 24)));
-      
-      // Format according to integration guide requirements
-      // The guide shows format: "2025-11-10T10:00:00" (without Z and milliseconds)
-      const formatDateTime = (date: Date) => {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        const seconds = String(date.getSeconds()).padStart(2, '0');
-        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
-      };
-
-      const bookingData = {
-        itemId: item.id,
-        startDate: formatDateTime(startDateTime),  // "2025-11-10T10:00:00"
-        endDate: formatDateTime(endDateTime),      // "2025-11-13T18:00:00"
-        bookingNotes: (formData.bookingNotes || '').slice(0, 500),
-        depositAmount: Number(formData.depositAmount) || 0,
-        requestedDurationDays: durationDays,
-        acceptTerms: formData.acceptTerms
-      };
-      
-      console.log('📝 Booking data to send:', bookingData);
-      console.log('🆔 User ID for X-User-Id header:', user?.id);
-      
-      if (!user?.id) {
-        alert('❌ User not found. Please log in again.');
-        return;
-      }
-      
-      // Test backend connectivity first
-      try {
-        const healthCheck = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/categories`, {
-          method: 'GET'
-        });
-        console.log('🏥 Backend health check:', healthCheck.status);
-        if (!healthCheck.ok) {
-          alert(`❌ Backend connectivity issue: ${healthCheck.status}. Please check if backend is running on port 8080.`);
-          return;
-        }
-      } catch (connectError) {
-        console.error('🏥 Backend connection failed:', connectError);
-        alert('❌ Cannot connect to backend. Please ensure backend is running on port 8080.');
-        return;
-      }
-      
-      try {
-        // First try direct fetch to see exact error
-        const token = localStorage.getItem('token');
-        console.log('🔐 Using token:', token ? token.substring(0, 20) + '...' : 'NO TOKEN');
-        
-        const directResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-            'X-User-Id': user.id
-          },
-          body: JSON.stringify(bookingData)
-        });
-        
-        console.log('📡 Direct response status:', directResponse.status);
-        console.log('📡 Direct response headers:', Object.fromEntries(directResponse.headers.entries()));
-        
-        if (!directResponse.ok) {
-          const errorText = await directResponse.text();
-          console.error('📡 Direct response error body:', errorText);
-          
-          let errorJson = null;
-          try {
-            errorJson = JSON.parse(errorText);
-          } catch (e) {
-            // Error text is not JSON
-          }
-          
-          throw new Error(`HTTP ${directResponse.status}: ${errorJson?.message || errorText || 'Unknown error'}`);
-        }
-        
-        const bookingResponse = await directResponse.json();
-        console.log('✅ Direct booking created successfully:', bookingResponse);
-        
-        // Also test the service layer for comparison
-        // const bookingResponse = await bookingService.createBooking(bookingData, user.id);
-        console.log('✅ Booking created successfully:', bookingResponse);
-        alert(`✅ Booking request sent for "${item.name}"! You can track it in your dashboard.`);
-        onBack();
-      } catch (serviceError: any) {
-        console.error('❌ Booking service failed:', serviceError);
-        console.error('Full error object:', JSON.stringify(serviceError, null, 2));
-        
-        // Try to extract detailed error information
-        let detailedError = 'Unknown error occurred';
-        if (serviceError?.response) {
-          const { status, data } = serviceError.response;
-          console.error(`HTTP ${status}:`, data);
-          
-          if (status === 400) {
-            detailedError = `Bad Request (400): ${data?.message || data?.details || JSON.stringify(data)}`;
-          } else if (status === 401) {
-            detailedError = 'Unauthorized (401): Please log in again';
-          } else if (status === 403) {
-            detailedError = 'Forbidden (403): Not authorized to create booking';
-          } else if (status === 404) {
-            detailedError = 'Not Found (404): Booking endpoint not available';
-          } else {
-            detailedError = `HTTP ${status}: ${data?.message || 'Server error'}`;
-          }
-        } else if (serviceError?.message) {
-          detailedError = serviceError.message;
-        }
-        
-        alert(`❌ Failed to create booking:\n${detailedError}\n\nCheck browser console for detailed logs.`);
-      }
-    } catch (error) {
-      console.error('💥 Error creating booking:', error);
-      alert(`❌ Network error creating booking: ${error}`);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (!item) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <h2>Item not found</h2>
-        <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-          Back
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
-      <div style={{ marginBottom: '20px' }}>
-        <button onClick={onBack} style={{ padding: '8px 16px', backgroundColor: '#666', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-          ← Back
-        </button>
-      </div>
-
-      <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', marginBottom: '20px' }}>
-        <h2 style={{ color: '#1976d2', marginBottom: '10px' }}>Request to Book Item</h2>
-        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
-          {item.images?.[0] && (
-            <img src={item.images[0]} alt={item.name} style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '4px', marginRight: '15px' }} />
-          )}
-          <div>
-            <h3 style={{ margin: '0 0 5px 0', color: '#333' }}>{item.name}</h3>
-            <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>{item.description}</p>
-            <p style={{ margin: '5px 0 0 0', color: '#1976d2', fontSize: '14px', fontWeight: 'bold' }}>Owner: {item.ownerName}</p>
-          </div>
-        </div>
-      </div>
-
-      <form onSubmit={handleSubmit} style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Start Date *
-          </label>
-          <input
-            type="date"
-            name="startDate"
-            value={formData.startDate}
-            onChange={handleChange}
-            required
-            min={new Date().toISOString().split('T')[0]}
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            End Date *
-          </label>
-          <input
-            type="date"
-            name="endDate"
-            value={formData.endDate}
-            onChange={handleChange}
-            required
-            min={formData.startDate || new Date().toISOString().split('T')[0]}
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Deposit Amount in ₹ (Optional)
-          </label>
-          <input
-            type="number"
-            name="depositAmount"
-            value={formData.depositAmount}
-            onChange={handleChange}
-            min="0"
-            step="0.01"
-            placeholder="0.00"
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }}>
-            Notes to Owner (Optional)
-          </label>
-          <textarea
-            name="bookingNotes"
-            value={formData.bookingNotes}
-            onChange={handleChange}
-            rows={4}
-            placeholder="Any special requests or information for the owner..."
-            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px', resize: 'vertical' }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-            <input
-              type="checkbox"
-              name="acceptTerms"
-              checked={formData.acceptTerms}
-              onChange={handleChange}
-              required
-              style={{ marginRight: '8px' }}
-            />
-            <span style={{ color: '#333' }}>I accept the terms and conditions for booking this item *</span>
-          </label>
-        </div>
-
-        <div style={{ display: 'flex', gap: '10px' }}>
-          <button
-            type="button"
-            onClick={onBack}
-            style={{ 
-              flex: 1,
-              padding: '12px',
-              backgroundColor: '#666',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '16px'
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={isLoading || !formData.acceptTerms}
-            style={{
-              flex: 2,
-              padding: '12px',
-              backgroundColor: isLoading || !formData.acceptTerms ? '#ccc' : '#1976d2',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: isLoading || !formData.acceptTerms ? 'not-allowed' : 'pointer',
-              fontSize: '16px',
-              fontWeight: 'bold'
-            }}
-          >
-            {isLoading ? 'Creating Booking...' : 'Send Booking Request'}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};

frontend/src/pages/BrowsePage.tsx

@@ -1,238 +0,0 @@
-// Browse Items Page Component
-import React, { useState } from 'react';
-
-export interface BrowsePageProps {
-  onBack?: () => void;
-}
-
-export const BrowsePage: React.FC<BrowsePageProps> = ({ onBack }) => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState('');
-
-  // Mock data for items
-  const mockItems = [
-    {
-      id: 1,
-      title: 'Electric Drill',
-      category: 'Tools',
-      description: 'Professional grade electric drill, perfect for home projects',
-      owner: 'John Smith',
-      pricePerDay: 15,
-      location: 'Downtown',
-      image: '🔧'
-    },
-    {
-      id: 2,
-      title: 'Canon Camera',
-      category: 'Electronics',
-      description: 'DSLR camera with multiple lenses for photography enthusiasts',
-      owner: 'Sarah Johnson',
-      pricePerDay: 25,
-      location: 'Uptown',
-      image: '📷'
-    },
-    {
-      id: 3,
-      title: 'Mountain Bike',
-      category: 'Sports',
-      description: 'High-quality mountain bike for trail adventures',
-      owner: 'Mike Wilson',
-      pricePerDay: 20,
-      location: 'Suburbs',
-      image: '🚵‍♂️'
-    },
-    {
-      id: 4,
-      title: 'Programming Books Set',
-      category: 'Books',
-      description: 'Complete set of modern programming language books',
-      owner: 'Lisa Chen',
-      pricePerDay: 5,
-      location: 'University Area',
-      image: '📚'
-    }
-  ];
-
-  const filteredItems = mockItems.filter(item => {
-    const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         item.description.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesCategory = selectedCategory === '' || item.category === selectedCategory;
-    return matchesSearch && matchesCategory;
-  });
-
-  return (
-    <div style={{
-      minHeight: '100vh',
-      backgroundColor: '#f5f5f5',
-      padding: '20px'
-    }}>
-      <div style={{
-        maxWidth: '1200px',
-        margin: '0 auto'
-      }}>
-        {/* Header */}
-        <div style={{
-          backgroundColor: 'white',
-          padding: '30px',
-          borderRadius: '8px',
-          marginBottom: '30px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-        }}>
-          <h1 style={{ color: '#1976d2', marginBottom: '20px' }}>
-            Browse Available Items
-          </h1>
-          
-          {/* Search and Filter */}
-          <div style={{
-            display: 'flex',
-            gap: '15px',
-            marginBottom: '20px',
-            flexWrap: 'wrap'
-          }}>
-            <input
-              type="search"
-              placeholder="Search items..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              style={{
-                flex: 1,
-                minWidth: '250px',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-            />
-            <select
-              value={selectedCategory}
-              onChange={(e) => setSelectedCategory(e.target.value)}
-              style={{
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                minWidth: '150px'
-              }}
-            >
-              <option value="">All Categories</option>
-              <option value="Tools">Tools</option>
-              <option value="Electronics">Electronics</option>
-              <option value="Sports">Sports</option>
-              <option value="Books">Books</option>
-            </select>
-          </div>
-          
-          {onBack && (
-            <button 
-              onClick={onBack}
-              style={{
-                padding: '8px 16px',
-                backgroundColor: '#666',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer'
-              }}
-            >
-              ← Back to Home
-            </button>
-          )}
-        </div>
-
-        {/* Items Grid */}
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-          gap: '20px'
-        }}>
-          {filteredItems.map(item => (
-            <div
-              key={item.id}
-              style={{
-                backgroundColor: 'white',
-                borderRadius: '8px',
-                padding: '20px',
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                transition: 'transform 0.2s',
-                cursor: 'pointer'
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
-              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
-            >
-              <div style={{ fontSize: '3rem', textAlign: 'center', marginBottom: '15px' }}>
-                {item.image}
-              </div>
-              
-              <h3 style={{ color: '#1976d2', marginBottom: '10px' }}>
-                {item.title}
-              </h3>
-              
-              <div style={{
-                display: 'inline-block',
-                backgroundColor: '#e3f2fd',
-                color: '#1976d2',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                marginBottom: '10px'
-              }}>
-                {item.category}
-              </div>
-              
-              <p style={{ color: '#666', marginBottom: '15px', lineHeight: '1.5' }}>
-                {item.description}
-              </p>
-              
-              <div style={{ marginBottom: '15px' }}>
-                <div style={{ fontSize: '14px', color: '#666' }}>
-                  Owner: {item.owner}
-                </div>
-                <div style={{ fontSize: '14px', color: '#666' }}>
-                  Location: {item.location}
-                </div>
-              </div>
-              
-              <div style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center'
-              }}>
-                <div style={{ fontWeight: 'bold', color: '#4caf50', fontSize: '18px' }}>
-                  ₹${item.pricePerDay}/day
-                </div>
-                <button
-                  style={{
-                    padding: '8px 16px',
-                    backgroundColor: '#1976d2',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '14px'
-                  }}
-                  onClick={() => alert(`Request to borrow "${item.title}" - Feature coming soon!`)}
-                >
-                  Request to Borrow
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {filteredItems.length === 0 && (
-          <div style={{
-            backgroundColor: 'white',
-            padding: '40px',
-            borderRadius: '8px',
-            textAlign: 'center',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-          }}>
-            <p style={{ color: '#666', fontSize: '18px' }}>
-              No items found matching your search criteria.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

frontend/src/pages/DashboardPage.tsx

@@ -1,1685 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../context/AuthContext';
-import { itemService } from '../services/itemService';
-
-interface DashboardPageProps {
-  onBack: () => void;
-  onAddItem?: () => void;
-}
-
-export const DashboardPage: React.FC<DashboardPageProps> = ({ onBack, onAddItem }) => {
-  const { user } = useAuth();
-  const [myItems, setMyItems] = useState<any[]>([]);
-  const [myBookings, setMyBookings] = useState<any[]>([]);
-  const [receivedBookings, setReceivedBookings] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [deletingItemId, setDeletingItemId] = useState<string | null>(null);
-
-  // Function to delete an item
-  const handleDeleteItem = async (itemId: string, itemName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const confirmDelete = window.confirm(
-      `Are you sure you want to delete "${itemName}"?\n\nThis action cannot be undone. The item will be permanently removed from your listings.`
-    );
-
-    if (!confirmDelete) {
-      return;
-    }
-
-    setDeletingItemId(itemId);
-    try {
-      console.log('🗑️ Deleting item:', itemId, 'with userId:', user.id);
-      console.log('🗑️ DELETE request URL:', `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items/${itemId}`);
-      
-      const deleteResult = await itemService.deleteItem(itemId, user.id);
-      console.log('🗑️ Delete API response:', deleteResult);
-      
-      // Remove the item from the local state immediately
-      setMyItems(prevItems => prevItems.filter(item => item.id !== itemId));
-      
-      alert(`✅ "${itemName}" has been successfully deleted.`);
-      console.log('✅ Item deleted successfully');
-    } catch (error: any) {
-      console.error('❌ Delete item failed:', error);
-      
-      let errorMessage = 'Failed to delete item. Please try again.';
-      if (error?.response?.status === 400) {
-        errorMessage = 'Cannot delete item: It may have active bookings or be in use.';
-      } else if (error?.response?.status === 403) {
-        errorMessage = 'You are not authorized to delete this item.';
-      } else if (error?.response?.status === 404) {
-        errorMessage = 'Item not found. It may have already been deleted.';
-      } else if (error?.response?.data?.message) {
-        errorMessage = error.response.data.message;
-      }
-      
-      alert(`❌ ${errorMessage}`);
-    } finally {
-      setDeletingItemId(null);
-    }
-  };
-
-  // Function to toggle item status
-  const handleToggleStatus = async (itemId: string, currentStatus: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    // Validate current status and determine new status
-    if (!currentStatus || !['AVAILABLE', 'UNAVAILABLE', 'BORROWED'].includes(currentStatus)) {
-      alert('❌ Invalid current item status. Please refresh the page and try again.');
-      return;
-    }
-    
-    // Don't allow changing status if item is borrowed
-    if (currentStatus === 'BORROWED') {
-      alert('❌ Cannot change status of borrowed items. Wait for the item to be returned.');
-      return;
-    }
-    
-    const newStatus = currentStatus === 'AVAILABLE' ? 'UNAVAILABLE' : 'AVAILABLE';
-    console.log('📝 Status change:', `${currentStatus} → ${newStatus}`);
-    
-    try {
-      console.log('🔄 Updating item status:', {
-        itemId,
-        currentStatus,
-        newStatus,
-        userId: user.id
-      });
-      
-      // First test backend connectivity and API routing
-      try {
-        const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
-        console.log('🔍 Testing backend at:', baseUrl);
-        
-        // Test 1: Basic connectivity
-        const healthCheck = await fetch(`${baseUrl}/api/items`, {
-          method: 'GET'
-        });
-        console.log('🏥 Backend health check for /api/items:', healthCheck.status);
-        
-        // Test 2: Check if we're getting static resource errors
-        if (healthCheck.status === 500) {
-          const errorText = await healthCheck.text();
-          if (errorText.includes('No static resource')) {
-            alert(`❌ Backend API Routing Issue Detected!
-
-The backend is treating API calls as static file requests.
-
-This means:
-1. The backend API server is not running properly
-2. You may be connecting to a frontend/static server instead of the API server
-3. The backend routes are not configured correctly
-
-Current URL: ${baseUrl}
-Expected: Spring Boot API server with /api/* endpoints
-
-Please:
-1. Check if your backend API server is running on port 8080
-2. Verify you're not connecting to a frontend server
-3. Check backend logs for proper API startup`);
-            return;
-          }
-        }
-        
-        // Test 3: Try a different endpoint to confirm API availability
-        if (!healthCheck.ok && healthCheck.status !== 401 && healthCheck.status !== 403) {
-          // Try categories endpoint (public)
-          const categoriesTest = await fetch(`${baseUrl}/api/categories`);
-          console.log('🏥 Categories endpoint test:', categoriesTest.status);
-          
-          if (categoriesTest.status === 500) {
-            const catErrorText = await categoriesTest.text();
-            if (catErrorText.includes('No static resource')) {
-              alert('❌ Backend API server is not running. Static resource errors detected on multiple endpoints.');
-              return;
-            }
-          }
-        }
-        
-      } catch (connectError) {
-        console.error('🏥 Backend connection failed:', connectError);
-        alert(`❌ Cannot connect to backend at ${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}.
-
-Please ensure:
-1. Backend is running
-2. Correct port (8080)
-3. No firewall blocking
-4. CORS is configured
-
-Error: ${(connectError as any)?.message || connectError}`);
-        return;
-      }
-      
-      // Test direct API call first to see exact error
-      const token = localStorage.getItem('token');
-      console.log('🔐 Token exists:', !!token);
-      console.log('🔐 Token preview:', token ? token.substring(0, 20) + '...' : 'NO TOKEN');
-      
-      // Use toggle endpoint only (simpler and works)
-      let directResponse;
-      let endpointUsed = `/api/items/${itemId}/toggle-availability`;
-      
-      try {
-        directResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}${endpointUsed}`, {
-          method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-            'X-User-Id': user.id
-          }
-          // No body needed - toggle endpoint just flips current status
-        });
-      } catch (error) {
-        throw new Error(`Failed to call toggle endpoint: ${error}`);
-      }
-      
-      console.log('📡 Used endpoint:', endpointUsed);
-      
-      console.log('📡 Direct response status:', directResponse.status);
-      console.log('📡 Direct response headers:', Object.fromEntries(directResponse.headers.entries()));
-      
-      if (!directResponse.ok) {
-        const errorText = await directResponse.text();
-        console.error('📡 Direct response error body:', errorText);
-        
-        let errorJson = null;
-        try {
-          errorJson = JSON.parse(errorText);
-        } catch (e) {
-          // Error text is not JSON
-        }
-        
-        let errorMessage = 'Failed to update item status';
-        
-        // Special handling for static resource error (backend routing issue)
-        if (directResponse.status === 500 && errorText.includes('No static resource')) {
-          errorMessage = `❌ Backend API Error: The backend is treating API calls as static resources.
-          
-This indicates:
-1. Backend API server is not properly running
-2. Wrong backend URL or port
-3. API endpoints not properly configured
-4. Request being routed to static file server instead of API
-
-Current backend URL: ${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}
-
-Please check:
-- Is the backend API server running on port 8080?
-- Are you connecting to the right backend service?
-- Is the backend properly configured for API routes?`;
-
-        } else if (directResponse.status === 400) {
-          errorMessage = 'Bad Request: ' + (errorJson?.message || errorText || 'Invalid status value or request format');
-        } else if (directResponse.status === 401) {
-          errorMessage = 'Unauthorized: Please log in again';
-        } else if (directResponse.status === 403) {
-          errorMessage = 'Forbidden: You are not the owner of this item';
-        } else if (directResponse.status === 404) {
-          errorMessage = 'Not Found: Item not found or endpoint not available';
-        } else {
-          errorMessage = `HTTP ${directResponse.status}: ${errorJson?.message || errorText || 'Server error'}`;
-        }
-        
-        throw new Error(errorMessage);
-      }
-      
-      const updatedItem = await directResponse.json();
-      console.log('✅ Direct API success, updated item:', updatedItem);
-      
-      // Update the item in the local state
-      setMyItems(prevItems => 
-        prevItems.map(item => 
-          item.id === itemId ? { ...item, status: updatedItem.status || newStatus } : item
-        )
-      );
-      
-      console.log('✅ Item status updated successfully to:', updatedItem.status || newStatus);
-      alert(`✅ Item status changed to ${updatedItem.status || newStatus}`);
-      
-    } catch (error: any) {
-      console.error('❌ Update status failed:', error);
-      console.error('Full error object:', JSON.stringify(error, null, 2));
-      
-      let userFriendlyMessage = 'Failed to update item status. Please try again.';
-      if (error.message) {
-        userFriendlyMessage = error.message;
-      }
-      
-      alert(`❌ ${userFriendlyMessage}\n\nCheck browser console for detailed logs.`);
-    }
-  };
-
-  // Function to cancel a booking
-  const handleCancelBooking = async (bookingId: string, itemName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const confirmCancel = window.confirm(
-      `Are you sure you want to cancel your booking for "${itemName}"?\n\nThis action cannot be undone.`
-    );
-    
-    if (!confirmCancel) return;
-
-    try {
-      const token = localStorage.getItem('token');
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/${bookingId}/cancel`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-          'X-User-Id': user.id
-        },
-        body: JSON.stringify({
-          reason: 'Cancelled by borrower'
-        })
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('Cancel booking error:', errorText);
-        
-        let errorMessage = 'Failed to cancel booking';
-        if (response.status === 403) {
-          errorMessage = 'You are not authorized to cancel this booking';
-        } else if (response.status === 404) {
-          errorMessage = 'Booking not found';
-        } else if (response.status === 400) {
-          errorMessage = 'Cannot cancel booking (may already be active or completed)';
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Refresh bookings data
-      await response.json();
-      setMyBookings(prevBookings =>
-        prevBookings.map(booking =>
-          booking.id === bookingId ? { ...booking, status: 'CANCELLED' } : booking
-        )
-      );
-      
-      alert(`✅ Booking for "${itemName}" has been cancelled successfully`);
-      
-    } catch (error: any) {
-      console.error('❌ Cancel booking failed:', error);
-      alert(`❌ ${error.message || 'Failed to cancel booking. Please try again.'}`);
-    }
-  };
-
-  // Function to view booking details
-  const handleViewBookingDetails = (booking: any) => {
-    const formatDate = (dateString: string) => {
-      if (!dateString) return 'Not specified';
-      try {
-        return new Date(dateString).toLocaleDateString('en-US', {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        });
-      } catch {
-        return dateString;
-      }
-    };
-
-    const details = `
-📦 BOOKING DETAILS
-
-🏷️ Item: ${booking.itemName || booking.itemTitle || 'Unknown Item'}
-👤 Owner: ${booking.ownerName || 'Unknown Owner'}
-📋 Status: ${booking.status || 'Unknown'}
-
-📅 RENTAL PERIOD
-Start: ${formatDate(booking.startDate)}
-End: ${formatDate(booking.endDate)}
-
-💰 FINANCIAL
-Deposit: ₹${booking.deposit || booking.itemDeposit || '0'}
-
-📝 TIMELINE
-Requested: ${formatDate(booking.createdAt)}
-Booking ID: ${booking.id}
-
-💬 NOTES
-${booking.notes ? `Your Notes: "${booking.notes}"` : 'No notes from you'}
-${booking.ownerNotes ? `Owner Notes: "${booking.ownerNotes}"` : 'No notes from owner'}
-
-${booking.borrowerEmail ? `📧 Owner Contact: ${booking.ownerEmail || 'Not available'}` : ''}
-    `.trim();
-
-    alert(details);
-  };
-
-  // Function to start a booking
-  const handleStartBooking = async (bookingId: string, itemName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const confirmStart = window.confirm(
-      `Start your booking for "${itemName}"?\n\nThis will mark the item as actively borrowed.`
-    );
-    
-    if (!confirmStart) return;
-
-    try {
-      const token = localStorage.getItem('token');
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/${bookingId}/start`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-          'X-User-Id': user.id
-        }
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('Start booking error:', errorText);
-        
-        let errorMessage = 'Failed to start booking';
-        if (response.status === 403) {
-          errorMessage = 'You are not authorized to start this booking';
-        } else if (response.status === 404) {
-          errorMessage = 'Booking not found';
-        } else if (response.status === 400) {
-          errorMessage = 'Cannot start booking (may not be confirmed yet)';
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Update booking status
-      await response.json();
-      setMyBookings(prevBookings =>
-        prevBookings.map(booking =>
-          booking.id === bookingId ? { ...booking, status: 'ACTIVE' } : booking
-        )
-      );
-      
-      alert(`✅ Booking for "${itemName}" is now active. Enjoy your rental!`);
-      
-    } catch (error: any) {
-      console.error('❌ Start booking failed:', error);
-      alert(`❌ ${error.message || 'Failed to start booking. Please try again.'}`);
-    }
-  };
-
-  // Function to complete a booking
-  const handleCompleteBooking = async (bookingId: string, itemName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const confirmComplete = window.confirm(
-      `Mark your booking for "${itemName}" as completed?\n\nThis indicates you have returned the item to the owner.`
-    );
-    
-    if (!confirmComplete) return;
-
-    try {
-      const token = localStorage.getItem('token');
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/${bookingId}/complete`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-          'X-User-Id': user.id
-        }
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('Complete booking error:', errorText);
-        
-        let errorMessage = 'Failed to complete booking';
-        if (response.status === 403) {
-          errorMessage = 'You are not authorized to complete this booking';
-        } else if (response.status === 404) {
-          errorMessage = 'Booking not found';
-        } else if (response.status === 400) {
-          errorMessage = 'Cannot complete booking (may not be active)';
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Update booking status
-      await response.json();
-      setMyBookings(prevBookings =>
-        prevBookings.map(booking =>
-          booking.id === bookingId ? { ...booking, status: 'COMPLETED' } : booking
-        )
-      );
-      
-      alert(`✅ Booking for "${itemName}" has been marked as completed. Thank you for using LocalLend!`);
-      
-    } catch (error: any) {
-      console.error('❌ Complete booking failed:', error);
-      alert(`❌ ${error.message || 'Failed to complete booking. Please try again.'}`);
-    }
-  };
-
-  // Function to approve a booking request
-  const handleApproveBookingRequest = async (bookingId: string, itemName: string, borrowerName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const ownerNotes = prompt(
-      `Approve booking request for "${itemName}" by ${borrowerName}?\n\nAdd any notes for the borrower (optional):`,
-      "Please take good care of the item. Contact me if you have any questions."
-    );
-    
-    if (ownerNotes === null) return; // User cancelled
-
-    try {
-      const token = localStorage.getItem('token');
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/${bookingId}/approve`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-          'X-User-Id': user.id
-        },
-        body: JSON.stringify({
-          ownerNotes: ownerNotes.trim() || undefined
-        })
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('Approve booking error:', errorText);
-        
-        let errorMessage = 'Failed to approve booking request';
-        if (response.status === 403) {
-          errorMessage = 'You are not authorized to approve this booking';
-        } else if (response.status === 404) {
-          errorMessage = 'Booking request not found';
-        } else if (response.status === 400) {
-          errorMessage = 'Cannot approve this booking (may already be processed)';
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Update booking status in received bookings
-      await response.json();
-      setReceivedBookings(prevBookings =>
-        prevBookings.map(booking =>
-          booking.id === bookingId ? { ...booking, status: 'CONFIRMED', ownerNotes: ownerNotes.trim() } : booking
-        )
-      );
-      
-      alert(`✅ Booking request for "${itemName}" by ${borrowerName} has been approved!`);
-      
-    } catch (error: any) {
-      console.error('❌ Approve booking failed:', error);
-      alert(`❌ ${error.message || 'Failed to approve booking request. Please try again.'}`);
-    }
-  };
-
-  // Function to decline a booking request
-  const handleDeclineBookingRequest = async (bookingId: string, itemName: string, borrowerName: string) => {
-    if (!user?.id) {
-      alert('❌ User not found. Please log in again.');
-      return;
-    }
-
-    const reason = prompt(
-      `Decline booking request for "${itemName}" by ${borrowerName}?\n\nReason for declining (optional):`,
-      "Sorry, the item is not available for the requested dates."
-    );
-    
-    if (reason === null) return; // User cancelled
-
-    const confirmDecline = window.confirm(
-      `Are you sure you want to decline the booking request for "${itemName}" by ${borrowerName}?\n\nThis action cannot be undone.`
-    );
-    
-    if (!confirmDecline) return;
-
-    try {
-      const token = localStorage.getItem('token');
-      
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/${bookingId}/reject`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-          'X-User-Id': user.id
-        },
-        body: JSON.stringify({
-          reason: reason?.trim() || undefined
-        })
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('Decline booking error:', errorText);
-        
-        let errorMessage = 'Failed to decline booking request';
-        if (response.status === 403) {
-          errorMessage = 'You are not authorized to decline this booking';
-        } else if (response.status === 404) {
-          errorMessage = 'Booking request not found';
-        } else if (response.status === 400) {
-          errorMessage = 'Cannot decline this booking (may already be processed)';
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Update booking status in received bookings
-      await response.json();
-      setReceivedBookings(prevBookings =>
-        prevBookings.map(booking =>
-          booking.id === bookingId ? { ...booking, status: 'REJECTED', rejectionReason: reason?.trim() } : booking
-        )
-      );
-      
-      alert(`✅ Booking request for "${itemName}" by ${borrowerName} has been declined.`);
-      
-    } catch (error: any) {
-      console.error('❌ Decline booking failed:', error);
-      alert(`❌ ${error.message || 'Failed to decline booking request. Please try again.'}`);
-    }
-  };
-
-  // Function to view full booking request details
-  const handleViewBookingRequestDetails = (booking: any) => {
-    const formatDate = (dateString: string) => {
-      if (!dateString) return 'Not specified';
-      try {
-        return new Date(dateString).toLocaleDateString('en-US', {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        });
-      } catch {
-        return dateString;
-      }
-    };
-
-    const calculateDuration = () => {
-      if (!booking.startDate || !booking.endDate) return 'Unknown duration';
-      try {
-        const start = new Date(booking.startDate);
-        const end = new Date(booking.endDate);
-        const diffTime = Math.abs(end.getTime() - start.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-        return `${diffDays} day${diffDays !== 1 ? 's' : ''}`;
-      } catch {
-        return 'Unknown duration';
-      }
-    };
-
-    const details = `
-📦 BOOKING REQUEST DETAILS
-
-🏷️ Item: ${booking.itemName || booking.itemTitle || 'Unknown Item'}
-👤 Borrower: ${booking.borrowerName || 'Unknown Borrower'}
-📧 Contact: ${booking.borrowerEmail || 'Not provided'}
-📋 Status: ${booking.status || 'Unknown'}
-
-📅 RENTAL PERIOD
-Start: ${formatDate(booking.startDate)}
-End: ${formatDate(booking.endDate)}
-Duration: ${calculateDuration()}
-
-💰 FINANCIAL DETAILS
-Deposit Required: ₹${booking.deposit || booking.itemDeposit || '0'}
-${booking.itemValue ? `Item Value: $${booking.itemValue}` : ''}
-
-📝 TIMELINE
-Request Date: ${formatDate(booking.createdAt)}
-Booking ID: ${booking.id}
-
-⭐ BORROWER INFORMATION
-${booking.borrowerRating ? `Rating: ${booking.borrowerRating.toFixed(1)}/5 stars` : 'Rating: Not available'}
-${booking.borrowerCompletedBookings ? `Completed Bookings: ${booking.borrowerCompletedBookings}` : ''}
-
-💬 BORROWER'S MESSAGE
-${booking.notes || booking.borrowerNotes || 'No message provided'}
-
-${booking.ownerNotes ? `📋 YOUR NOTES\n"${booking.ownerNotes}"` : ''}
-${booking.rejectionReason ? `❌ REJECTION REASON\n"${booking.rejectionReason}"` : ''}
-    `.trim();
-
-    alert(details);
-  };
-
-  // Function to contact borrower
-  const handleContactBorrower = (booking: any) => {
-    if (!booking.borrowerEmail) {
-      alert('❌ No contact information available for this borrower.');
-      return;
-    }
-
-    const subject = encodeURIComponent(`LocalLend: Regarding your booking for ${booking.itemName || booking.itemTitle || 'item'}`);
-    const body = encodeURIComponent(`Hi ${booking.borrowerName || 'there'},
-
-I'm contacting you regarding your booking request for "${booking.itemName || booking.itemTitle || 'item'}".
-
-Booking Details:
-- Start Date: ${booking.startDate}
-- End Date: ${booking.endDate}
-- Status: ${booking.status}
-
-Best regards,
-${user?.name || 'Item Owner'}
-
----
-This message was sent through LocalLend platform.`);
-
-    window.open(`mailto:${booking.borrowerEmail}?subject=${subject}&body=${body}`);
-  };
-
-  // Function to send message to borrower
-  const handleSendMessage = (booking: any) => {
-    if (!booking.borrowerEmail) {
-      alert('❌ No contact information available for this borrower.');
-      return;
-    }
-
-    const message = prompt(
-      `Send a message to ${booking.borrowerName || 'borrower'} about "${booking.itemName || booking.itemTitle}":\n\n(This will open your email client)`,
-      `Hi ${booking.borrowerName || 'there'},\n\nRegarding your booking for "${booking.itemName || booking.itemTitle}"...\n\nBest regards,\n${user?.name || 'Item Owner'}`
-    );
-
-    if (message === null) return; // User cancelled
-
-    const subject = encodeURIComponent(`LocalLend: ${booking.itemName || booking.itemTitle || 'Booking'}`);
-    const body = encodeURIComponent(message);
-
-    window.open(`mailto:${booking.borrowerEmail}?subject=${subject}&body=${body}`);
-  };
-
-  useEffect(() => {
-    const loadDashboardData = async () => {
-      try {
-        setIsLoading(true);
-        console.log('=== DASHBOARD DATA LOADING START ===');
-        console.log('Current user:', user);
-        console.log('Current user ID:', user?.id, 'Type:', typeof user?.id);
-        console.log('JWT Token exists:', !!localStorage.getItem('token'));
-        
-        // Load items I'm lending (owned by me)
-        const itemsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items?ownerId=${user?.id}`, {
-          headers: { 
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`,
-            'X-User-Id': user?.id?.toString() || ''
-          }
-        });
-        if (itemsResponse.ok) {
-          const itemsData = await itemsResponse.json();
-          console.log('Items API response:', itemsData);
-          // Backend returns paginated data with 'content' array, not 'data' array
-          const allItems = itemsData.content || itemsData.data || [];
-          console.log('All items from API:', allItems);
-          console.log('Query URL was:', `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/items?ownerId=${user?.id}`);
-          
-          // Filter items to only show items owned by current user (frontend filtering as backup)
-          const myOwnedItems = allItems.filter((item: any) => {
-            console.log(`Comparing item.ownerId (${item.ownerId}) === user.id (${user?.id}):`, item.ownerId === user?.id);
-            return item.ownerId === user?.id || item.owner_id === user?.id;
-          });
-          console.log('Filtered myItems to:', myOwnedItems);
-          setMyItems(myOwnedItems);
-        } else {
-          console.log('Items API failed:', itemsResponse.status);
-        }
-
-        // Try to load my bookings (items I've borrowed) - gracefully handle server errors
-        try {
-          console.log('Fetching my bookings for user:', user?.id);
-          
-          // Use only confirmed working endpoint from integration guide
-          let bookingsResponse;
-          let endpointUsed = '/api/bookings/my-bookings';
-          
-          try {
-            bookingsResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/my-bookings`, {
-              headers: { 
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                'X-User-Id': user?.id?.toString() || ''
-              }
-            });
-          } catch (fetchError) {
-            console.log('Error trying booking endpoints:', fetchError);
-            setMyBookings([]);
-            return;
-          }
-          
-          console.log('Bookings response status:', bookingsResponse.status, 'from endpoint:', endpointUsed);
-          
-          if (bookingsResponse.ok) {
-            const bookingsData = await bookingsResponse.json();
-            console.log('✅ BOOKINGS SUCCESS - API response:', bookingsData);
-            console.log('Bookings response type:', typeof bookingsData, 'is array:', Array.isArray(bookingsData));
-            // Handle both paginated (content) and direct array responses
-            const bookings = bookingsData.content || bookingsData.data || bookingsData || [];
-            console.log('Final bookings array:', bookings, 'length:', bookings.length);
-            
-            // Note: Removed debugging call to /api/bookings (405 Method Not Allowed)
-            // The /api/bookings endpoint only supports POST for creating bookings, not GET
-            console.log('� Successfully loaded user bookings:', bookings.length, 'items');
-            
-            setMyBookings(bookings);
-          } else {
-            const errorText = await bookingsResponse.text();
-            console.log('All booking endpoints failed. Last error:', bookingsResponse.status, 'response:', errorText);
-            setMyBookings([]);
-          }
-        } catch (error) {
-          console.log('Bookings endpoint failed:', error);
-          setMyBookings([]);
-        }
-
-        // Try to load bookings received (people wanting to borrow my items) - gracefully handle server errors
-        try {
-          console.log('Fetching received bookings for owner:', user?.id);
-          
-          // Use only confirmed working endpoint from integration guide
-          let receivedResponse;
-          let ownerEndpointUsed = '/api/bookings/my-owned';
-          
-          try {
-            receivedResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'}/api/bookings/my-owned`, {
-              headers: { 
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                'X-User-Id': user?.id?.toString() || ''
-              }
-            });
-          } catch (fetchError) {
-            console.log('Error trying owner booking endpoints:', fetchError);
-            setReceivedBookings([]);
-            return;
-          }
-          
-          console.log('Received bookings response status:', receivedResponse.status, 'from endpoint:', ownerEndpointUsed);
-          
-          if (receivedResponse.ok) {
-            const receivedData = await receivedResponse.json();
-            console.log('Received bookings API response:', receivedData);
-            console.log('Received bookings response type:', typeof receivedData, 'is array:', Array.isArray(receivedData));
-            // Handle both paginated (content) and direct array responses
-            const bookings = receivedData.content || receivedData.data || receivedData || [];
-            console.log('Setting receivedBookings to:', bookings, 'length:', bookings.length);
-            setReceivedBookings(bookings);
-          } else {
-            const errorText = await receivedResponse.text();
-            console.log('All owner booking endpoints failed. Last error:', receivedResponse.status, 'response:', errorText);
-            setReceivedBookings([]);
-          }
-        } catch (error) {
-          console.log('Received bookings endpoint failed:', error);
-          setReceivedBookings([]);
-        }
-      } catch (error) {
-        console.error('Error loading dashboard data:', error);
-        // Set empty arrays if there's a general error
-        setMyItems([]);
-        setMyBookings([]);
-        setReceivedBookings([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    if (user) {
-      loadDashboardData();
-    }
-  }, [user]);
-
-  // Debug: Log current state values
-  console.log('Dashboard render - myItems:', myItems, 'myBookings:', myBookings, 'receivedBookings:', receivedBookings);
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif', 
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-          
-          <span style={{ 
-            color: 'white', 
-            fontSize: '14px',
-            padding: '8px 12px',
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            borderRadius: '4px'
-          }}>
-            Welcome, {user?.name}!
-          </span>
-        </div>
-      </nav>
-
-      {/* Dashboard Content */}
-      <div style={{ padding: '0 20px', maxWidth: '1200px', margin: '0 auto' }}>
-        <h1 style={{ marginBottom: '30px', color: '#1976d2' }}>Dashboard</h1>
-        
-        {isLoading ? (
-          <div style={{ textAlign: 'center', padding: '40px' }}>
-            <p>Loading your dashboard...</p>
-          </div>
-        ) : (
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '20px' }}>
-            
-            {/* My Items Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-            }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
-                <h2 style={{ color: '#1976d2', margin: 0 }}>My Items ({myItems.length})</h2>
-                {onAddItem && (
-                  <button
-                    onClick={onAddItem}
-                    style={{
-                      padding: '8px 16px',
-                      backgroundColor: '#1976d2',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '14px',
-                      fontWeight: 'bold'
-                    }}
-                  >
-                    + Add Item
-                  </button>
-                )}
-              </div>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>Items you're lending to others</p>
-              
-              {myItems.length === 0 ? (
-                <div style={{ textAlign: 'center', padding: '40px 20px' }}>
-                  <p style={{ color: '#888', fontStyle: 'italic', marginBottom: '15px' }}>No items listed yet. Start lending!</p>
-                  {onAddItem && (
-                    <button
-                      onClick={onAddItem}
-                      style={{
-                        padding: '12px 24px',
-                        backgroundColor: '#1976d2',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '6px',
-                        cursor: 'pointer',
-                        fontSize: '16px',
-                        fontWeight: 'bold'
-                      }}
-                    >
-                      List Your First Item
-                    </button>
-                  )}
-                </div>
-              ) : (
-                <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
-                  {myItems.map((item) => (
-                    <div key={item.id} style={{ 
-                      border: '1px solid #e0e0e0', 
-                      borderRadius: '8px', 
-                      padding: '16px', 
-                      marginBottom: '12px',
-                      backgroundColor: '#fafafa',
-                      position: 'relative'
-                    }}>
-                      <div style={{ display: 'flex', gap: '12px' }}>
-                        {/* Item Image */}
-                        {item.images && item.images[0] && (
-                          <img
-                            src={item.images[0]}
-                            alt={item.name}
-                            style={{
-                              width: '80px',
-                              height: '80px',
-                              objectFit: 'cover',
-                              borderRadius: '6px',
-                              flexShrink: 0
-                            }}
-                          />
-                        )}
-                        
-                        {/* Item Details */}
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <h4 style={{ margin: '0 0 6px 0', color: '#333', fontSize: '16px', fontWeight: 'bold' }}>
-                            {item.name || item.title}
-                          </h4>
-                          
-                          <p style={{ 
-                            margin: '0 0 8px 0', 
-                            color: '#666', 
-                            fontSize: '14px', 
-                            lineHeight: '1.4',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            display: '-webkit-box',
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: 'vertical'
-                          }}>
-                            {item.description}
-                          </p>
-                          
-                          {/* Item Metadata */}
-                          <div style={{ marginBottom: '10px' }}>
-                            {item.categoryName && (
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
-                                📂 Category: <strong>{item.categoryName}</strong>
-                              </div>
-                            )}
-                            
-                            {item.deposit > 0 && (
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
-                                💰 Deposit: <strong>₹${item.deposit}</strong>
-                              </div>
-                            )}
-                            
-                            {item.averageRating > 0 && (
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
-                                ⭐ Rating: <strong>{item.averageRating.toFixed(1)}/5</strong>
-                              </div>
-                            )}
-                            
-                            {item.createdAt && (
-                              <div style={{ fontSize: '12px', color: '#888' }}>
-                                📅 Listed: <strong>{new Date(item.createdAt).toLocaleDateString()}</strong>
-                              </div>
-                            )}
-                          </div>
-                          
-                          {/* Status and Condition Badges */}
-                          <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
-                            <span style={{ 
-                              padding: '4px 10px', 
-                              borderRadius: '12px', 
-                              fontSize: '12px',
-                              fontWeight: 'bold',
-                              backgroundColor: item.status === 'AVAILABLE' ? '#4caf50' : item.status === 'BORROWED' ? '#ff5722' : '#ff9800',
-                              color: 'white'
-                            }}>
-                              {item.status || 'UNKNOWN'}
-                            </span>
-                            <span style={{ 
-                              padding: '4px 10px', 
-                              borderRadius: '12px', 
-                              fontSize: '12px',
-                              fontWeight: 'bold',
-                              backgroundColor: '#2196f3',
-                              color: 'white'
-                            }}>
-                              {item.condition || 'N/A'}
-                            </span>
-                            {item.canBeBorrowed === false && (
-                              <span style={{ 
-                                padding: '4px 10px', 
-                                borderRadius: '12px', 
-                                fontSize: '12px',
-                                fontWeight: 'bold',
-                                backgroundColor: '#9e9e9e',
-                                color: 'white'
-                              }}>
-                                Not Borrowable
-                              </span>
-                            )}
-                          </div>
-                          
-                          {/* Action Buttons */}
-                          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                            <button
-                              onClick={() => handleToggleStatus(item.id, item.status)}
-                              style={{
-                                padding: '6px 12px',
-                                fontSize: '12px',
-                                border: '1px solid #1976d2',
-                                backgroundColor: 'transparent',
-                                color: '#1976d2',
-                                borderRadius: '4px',
-                                cursor: 'pointer',
-                                fontWeight: 'bold'
-                              }}
-                              title={`Change status to ${item.status === 'AVAILABLE' ? 'UNAVAILABLE' : 'AVAILABLE'}`}
-                            >
-                              {item.status === 'AVAILABLE' ? '⏸️ Make Unavailable' : '▶️ Make Available'}
-                            </button>
-                            
-                            <button
-                              onClick={() => handleDeleteItem(item.id, item.name)}
-                              disabled={deletingItemId === item.id}
-                              style={{
-                                padding: '6px 12px',
-                                fontSize: '12px',
-                                border: '1px solid #f44336',
-                                backgroundColor: deletingItemId === item.id ? '#ffcdd2' : 'transparent',
-                                color: deletingItemId === item.id ? '#666' : '#f44336',
-                                borderRadius: '4px',
-                                cursor: deletingItemId === item.id ? 'not-allowed' : 'pointer',
-                                fontWeight: 'bold'
-                              }}
-                              title="Delete this item permanently"
-                            >
-                              {deletingItemId === item.id ? '🗑️ Deleting...' : '🗑️ Delete'}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* My Bookings Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)' 
-            }}>
-              <h2 style={{ color: '#1976d2', marginBottom: '15px' }}>My Bookings ({myBookings.length})</h2>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>Items you've borrowed or are borrowing from others</p>
-              
-              {myBookings.length === 0 ? (
-                <div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
-                  <p style={{ fontSize: '48px', margin: '0 0 10px 0' }}>📋</p>
-                  <p style={{ fontStyle: 'italic', fontSize: '16px' }}>No bookings yet</p>
-                  <p style={{ fontSize: '14px', margin: '10px 0 0 0' }}>Browse items to make your first booking!</p>
-                </div>
-              ) : (
-                <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
-                  {myBookings.map((booking) => {
-                    const getStatusColor = (status: string) => {
-                      switch(status?.toUpperCase()) {
-                        case 'PENDING': return '#ff9800';
-                        case 'CONFIRMED': case 'APPROVED': return '#4caf50';
-                        case 'ACTIVE': return '#2196f3';
-                        case 'COMPLETED': return '#9c27b0';
-                        case 'CANCELLED': case 'REJECTED': return '#f44336';
-                        default: return '#757575';
-                      }
-                    };
-
-                    const getStatusIcon = (status: string) => {
-                      switch(status?.toUpperCase()) {
-                        case 'PENDING': return '⏳';
-                        case 'CONFIRMED': case 'APPROVED': return '✅';
-                        case 'ACTIVE': return '📦';
-                        case 'COMPLETED': return '✨';
-                        case 'CANCELLED': case 'REJECTED': return '❌';
-                        default: return '📋';
-                      }
-                    };
-
-                    return (
-                      <div key={booking.id} style={{ 
-                        border: '1px solid #e0e0e0', 
-                        borderRadius: '8px', 
-                        padding: '16px', 
-                        marginBottom: '12px',
-                        backgroundColor: '#fafafa',
-                        position: 'relative'
-                      }}>
-                        {/* Header with Item and Status */}
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
-                          <div style={{ flex: 1 }}>
-                            <h4 style={{ margin: '0 0 6px 0', color: '#333', fontSize: '16px', fontWeight: 'bold' }}>
-                              {booking.itemName || booking.itemTitle || 'Unknown Item'}
-                            </h4>
-                            <div style={{ fontSize: '13px', color: '#666', marginBottom: '4px' }}>
-                              👤 Owner: <strong>{booking.ownerName || 'Unknown Owner'}</strong>
-                            </div>
-                          </div>
-                          <span style={{ 
-                            padding: '6px 12px', 
-                            borderRadius: '16px', 
-                            backgroundColor: getStatusColor(booking.status),
-                            color: 'white',
-                            fontSize: '12px',
-                            fontWeight: 'bold',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '4px'
-                          }}>
-                            {getStatusIcon(booking.status)} {booking.status || 'UNKNOWN'}
-                          </span>
-                        </div>
-
-                        {/* Booking Details */}
-                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px', marginBottom: '12px' }}>
-                          {/* Dates */}
-                          <div>
-                            <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>📅 Booking Period</div>
-                            <div style={{ fontSize: '14px', color: '#333', fontWeight: '500' }}>
-                              {booking.startDate && booking.endDate ? (
-                                <>
-                                  <div>From: {new Date(booking.startDate).toLocaleDateString()}</div>
-                                  <div>To: {new Date(booking.endDate).toLocaleDateString()}</div>
-                                </>
-                              ) : (
-                                <div>{booking.startDate} - {booking.endDate}</div>
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Deposit Info */}
-                          {(booking.deposit || booking.itemDeposit) && (
-                            <div>
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>💰 Deposit</div>
-                              <div style={{ fontSize: '14px', color: '#333', fontWeight: '500' }}>
-                                ₹${booking.deposit || booking.itemDeposit || 0}
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Booking Date */}
-                          {booking.createdAt && (
-                            <div>
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>📝 Requested</div>
-                              <div style={{ fontSize: '14px', color: '#333', fontWeight: '500' }}>
-                                {new Date(booking.createdAt).toLocaleDateString()}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-
-                        {/* Notes */}
-                        {(booking.notes || booking.borrowerNotes || booking.ownerNotes) && (
-                          <div style={{ marginBottom: '12px' }}>
-                            {booking.notes && (
-                              <div style={{ marginBottom: '6px' }}>
-                                <div style={{ fontSize: '12px', color: '#888', marginBottom: '2px' }}>💬 Your Notes</div>
-                                <div style={{ 
-                                  fontSize: '13px', 
-                                  color: '#555', 
-                                  backgroundColor: '#f0f7ff', 
-                                  padding: '8px', 
-                                  borderRadius: '6px',
-                                  border: '1px solid #e3f2fd'
-                                }}>
-                                  "{booking.notes}"
-                                </div>
-                              </div>
-                            )}
-                            {booking.ownerNotes && (
-                              <div>
-                                <div style={{ fontSize: '12px', color: '#888', marginBottom: '2px' }}>📋 Owner Notes</div>
-                                <div style={{ 
-                                  fontSize: '13px', 
-                                  color: '#555', 
-                                  backgroundColor: '#fff3e0', 
-                                  padding: '8px', 
-                                  borderRadius: '6px',
-                                  border: '1px solid #ffe0b2'
-                                }}>
-                                  "{booking.ownerNotes}"
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        )}
-
-                        {/* Action Buttons Based on Status */}
-                        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                          {booking.status === 'CONFIRMED' && (
-                            <button 
-                              onClick={() => handleStartBooking(booking.id, booking.itemName || booking.itemTitle || 'Unknown Item')}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: '#2196f3',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '6px',
-                                cursor: 'pointer',
-                                fontSize: '13px',
-                                fontWeight: '500'
-                              }}>
-                              🚀 Start Booking
-                            </button>
-                          )}
-                          {booking.status === 'ACTIVE' && (
-                            <button 
-                              onClick={() => handleCompleteBooking(booking.id, booking.itemName || booking.itemTitle || 'Unknown Item')}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: '#9c27b0',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '6px',
-                                cursor: 'pointer',
-                                fontSize: '13px',
-                                fontWeight: '500'
-                              }}>
-                              ✅ Complete Booking
-                            </button>
-                          )}
-                          {(booking.status === 'PENDING' || booking.status === 'CONFIRMED') && (
-                            <button 
-                              onClick={() => handleCancelBooking(booking.id, booking.itemName || booking.itemTitle || 'Unknown Item')}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: '#f44336',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '6px',
-                                cursor: 'pointer',
-                                fontSize: '13px',
-                                fontWeight: '500'
-                              }}>
-                              ❌ Cancel
-                            </button>
-                          )}
-                          <button 
-                            onClick={() => handleViewBookingDetails(booking)}
-                            style={{
-                              padding: '8px 16px',
-                              backgroundColor: 'white',
-                              color: '#1976d2',
-                              border: '1px solid #1976d2',
-                              borderRadius: '6px',
-                              cursor: 'pointer',
-                              fontSize: '13px',
-                              fontWeight: '500'
-                            }}>
-                            📄 View Details
-                          </button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-
-            {/* Received Booking Requests Section */}
-            <div style={{ 
-              backgroundColor: 'white', 
-              padding: '20px', 
-              borderRadius: '8px', 
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              gridColumn: 'span 2'
-            }}>
-              <h2 style={{ color: '#1976d2', marginBottom: '15px' }}>Booking Requests ({receivedBookings.length})</h2>
-              <p style={{ color: '#666', marginBottom: '15px', fontSize: '14px' }}>People wanting to borrow your items - Manage approvals and track rentals</p>
-              
-              {receivedBookings.length === 0 ? (
-                <div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
-                  <p style={{ fontSize: '48px', margin: '0 0 10px 0' }}>📬</p>
-                  <p style={{ fontStyle: 'italic', fontSize: '16px' }}>No booking requests yet</p>
-                  <p style={{ fontSize: '14px', margin: '10px 0 0 0' }}>Your items will appear here when people want to borrow them!</p>
-                </div>
-              ) : (
-                <div style={{ maxHeight: '500px', overflowY: 'auto' }}>
-                  {receivedBookings.map((booking) => {
-                    const getStatusColor = (status: any) => {
-                      switch(status?.toUpperCase()) {
-                        case 'PENDING': return '#ff9800';
-                        case 'CONFIRMED': case 'APPROVED': return '#4caf50';
-                        case 'ACTIVE': return '#2196f3';
-                        case 'COMPLETED': return '#9c27b0';
-                        case 'CANCELLED': case 'REJECTED': return '#f44336';
-                        default: return '#757575';
-                      }
-                    };
-
-                    const getStatusIcon = (status: any) => {
-                      switch(status?.toUpperCase()) {
-                        case 'PENDING': return '⏳';
-                        case 'CONFIRMED': case 'APPROVED': return '✅';
-                        case 'ACTIVE': return '📦';
-                        case 'COMPLETED': return '✨';
-                        case 'CANCELLED': case 'REJECTED': return '❌';
-                        default: return '📋';
-                      }
-                    };
-
-                    const isPending = booking.status?.toUpperCase() === 'PENDING';
-                    const isActive = booking.status?.toUpperCase() === 'ACTIVE';
-
-                    return (
-                      <div key={booking.id} style={{ 
-                        border: isPending ? '2px solid #ff9800' : '1px solid #e0e0e0', 
-                        borderRadius: '12px', 
-                        padding: '20px', 
-                        marginBottom: '16px',
-                        backgroundColor: isPending ? '#fff8e1' : '#fafafa',
-                        position: 'relative'
-                      }}>
-                        {/* Urgent Indicator for Pending */}
-                        {isPending && (
-                          <div style={{
-                            position: 'absolute',
-                            top: '12px',
-                            right: '12px',
-                            backgroundColor: '#ff9800',
-                            color: 'white',
-                            padding: '4px 8px',
-                            borderRadius: '12px',
-                            fontSize: '11px',
-                            fontWeight: 'bold'
-                          }}>
-                            🚨 NEEDS APPROVAL
-                          </div>
-                        )}
-
-                        {/* Header with Item and Borrower */}
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
-                          <div style={{ flex: 1, paddingRight: isPending ? '120px' : '0' }}>
-                            <h4 style={{ margin: '0 0 8px 0', color: '#333', fontSize: '18px', fontWeight: 'bold' }}>
-                              📦 {booking.itemName || booking.itemTitle || 'Unknown Item'}
-                            </h4>
-                            <div style={{ fontSize: '14px', color: '#666', marginBottom: '6px' }}>
-                              👤 Requested by: <strong style={{ color: '#333' }}>{booking.borrowerName || 'Unknown Borrower'}</strong>
-                            </div>
-                            {booking.borrowerEmail && (
-                              <div style={{ fontSize: '13px', color: '#666', marginBottom: '6px' }}>
-                                ✉️ Contact: <span style={{ color: '#1976d2' }}>{booking.borrowerEmail}</span>
-                              </div>
-                            )}
-                          </div>
-                          <span style={{ 
-                            padding: '8px 14px', 
-                            borderRadius: '20px', 
-                            backgroundColor: getStatusColor(booking.status),
-                            color: 'white',
-                            fontSize: '13px',
-                            fontWeight: 'bold',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '6px'
-                          }}>
-                            {getStatusIcon(booking.status)} {booking.status || 'UNKNOWN'}
-                          </span>
-                        </div>
-
-                        {/* Booking Details Grid */}
-                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '16px', marginBottom: '16px' }}>
-                          {/* Rental Period */}
-                          <div>
-                            <div style={{ fontSize: '12px', color: '#888', marginBottom: '6px', fontWeight: '600' }}>📅 RENTAL PERIOD</div>
-                            <div style={{ fontSize: '14px', color: '#333' }}>
-                              {booking.startDate && booking.endDate ? (
-                                <>
-                                  <div style={{ fontWeight: '500' }}>Start: {new Date(booking.startDate).toLocaleDateString()}</div>
-                                  <div style={{ fontWeight: '500' }}>End: {new Date(booking.endDate).toLocaleDateString()}</div>
-                                  <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
-                                    ({Math.ceil((new Date(booking.endDate).getTime() - new Date(booking.startDate).getTime()) / (1000 * 3600 * 24))} days)
-                                  </div>
-                                </>
-                              ) : (
-                                <div>{booking.startDate} - {booking.endDate}</div>
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Deposit & Financial */}
-                          <div>
-                            <div style={{ fontSize: '12px', color: '#888', marginBottom: '6px', fontWeight: '600' }}>💰 FINANCIAL</div>
-                            <div style={{ fontSize: '14px', color: '#333' }}>
-                              {(booking.deposit || booking.itemDeposit) ? (
-                                <div style={{ fontWeight: '500', color: '#4caf50' }}>Deposit: ₹${booking.deposit || booking.itemDeposit}</div>
-                              ) : (
-                                <div style={{ color: '#666' }}>No deposit required</div>
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Request Date */}
-                          <div>
-                            <div style={{ fontSize: '12px', color: '#888', marginBottom: '6px', fontWeight: '600' }}>📝 REQUESTED</div>
-                            <div style={{ fontSize: '14px', color: '#333', fontWeight: '500' }}>
-                              {booking.createdAt ? new Date(booking.createdAt).toLocaleDateString() : 'Unknown'}
-                            </div>
-                          </div>
-
-                          {/* Borrower Rating */}
-                          {booking.borrowerRating && (
-                            <div>
-                              <div style={{ fontSize: '12px', color: '#888', marginBottom: '6px', fontWeight: '600' }}>⭐ BORROWER RATING</div>
-                              <div style={{ fontSize: '14px', color: '#333', fontWeight: '500' }}>
-                                {booking.borrowerRating.toFixed(1)}/5 ⭐
-                              </div>
-                            </div>
-                          )}
-                        </div>
-
-                        {/* Notes Section */}
-                        {(booking.notes || booking.borrowerNotes) && (
-                          <div style={{ marginBottom: '16px' }}>
-                            <div style={{ fontSize: '12px', color: '#888', marginBottom: '6px', fontWeight: '600' }}>💬 BORROWER'S MESSAGE</div>
-                            <div style={{ 
-                              fontSize: '14px', 
-                              color: '#555', 
-                              backgroundColor: 'white', 
-                              padding: '12px', 
-                              borderRadius: '8px',
-                              border: '1px solid #e0e0e0',
-                              fontStyle: 'italic'
-                            }}>
-                              "{booking.notes || booking.borrowerNotes || 'No message provided.'}"
-                            </div>
-                          </div>
-                        )}
-
-                        {/* Action Buttons */}
-                        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-                          {isPending && (
-                            <>
-                              <button 
-                                onClick={() => handleApproveBookingRequest(
-                                  booking.id, 
-                                  booking.itemName || booking.itemTitle || 'Unknown Item',
-                                  booking.borrowerName || 'Unknown Borrower'
-                                )}
-                                style={{
-                                  padding: '10px 20px',
-                                  backgroundColor: '#4caf50',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '8px',
-                                  cursor: 'pointer',
-                                  fontSize: '14px',
-                                  fontWeight: '600',
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  gap: '6px'
-                                }}>
-                                ✅ Approve Request
-                              </button>
-                              <button 
-                                onClick={() => handleDeclineBookingRequest(
-                                  booking.id,
-                                  booking.itemName || booking.itemTitle || 'Unknown Item',
-                                  booking.borrowerName || 'Unknown Borrower'
-                                )}
-                                style={{
-                                  padding: '10px 20px',
-                                  backgroundColor: '#f44336',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '8px',
-                                  cursor: 'pointer',
-                                  fontSize: '14px',
-                                  fontWeight: '600',
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  gap: '6px'
-                                }}>
-                                ❌ Decline Request
-                              </button>
-                            </>
-                          )}
-                          
-                          {isActive && (
-                            <button 
-                              onClick={() => handleContactBorrower(booking)}
-                              style={{
-                                padding: '10px 20px',
-                                backgroundColor: '#2196f3',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '8px',
-                                cursor: 'pointer',
-                                fontSize: '14px',
-                                fontWeight: '600',
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '6px'
-                              }}>
-                              📞 Contact Borrower
-                            </button>
-                          )}
-
-                          <button 
-                            onClick={() => handleViewBookingRequestDetails(booking)}
-                            style={{
-                              padding: '10px 20px',
-                              backgroundColor: 'white',
-                              color: '#1976d2',
-                              border: '2px solid #1976d2',
-                              borderRadius: '8px',
-                              cursor: 'pointer',
-                              fontSize: '14px',
-                              fontWeight: '600',
-                              display: 'flex',
-                              alignItems: 'center',
-                              gap: '6px'
-                            }}>
-                            📄 View Full Details
-                          </button>
-
-                          {booking.borrowerEmail && (
-                            <button 
-                              onClick={() => handleSendMessage(booking)}
-                              style={{
-                                padding: '10px 20px',
-                                backgroundColor: '#ff9800',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '8px',
-                                cursor: 'pointer',
-                                fontSize: '14px',
-                                fontWeight: '600',
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '6px'
-                              }}>
-                              💬 Send Message
-                            </button>
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-
-          </div>
-        )}
-        
-        {/* Quick Actions */}
-        <div style={{ 
-          marginTop: '30px',
-          display: 'flex',
-          gap: '15px',
-          flexWrap: 'wrap'
-        }}>
-          <button 
-            onClick={onAddItem}
-            style={{
-            padding: '12px 24px',
-            backgroundColor: '#4caf50',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px',
-            fontWeight: 'bold'
-          }}>
-            + Add New Item
-          </button>
-          
-          <button style={{
-            padding: '12px 24px',
-            backgroundColor: '#2196f3',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Browse Items
-          </button>
-          
-          <button onClick={onBack} style={{
-            padding: '12px 24px',
-            backgroundColor: '#757575',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Back to Home
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/HomePage.tsx

@@ -1,297 +0,0 @@
-// Home/Dashboard Page Component
-// This displays items available for borrowing with search and filter functionality
-
-import React, { useState, useEffect } from 'react';
-import {
-  Container,
-  Grid,
-  Card,
-  CardMedia,
-  CardContent,
-  Typography,
-  Box,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  Pagination,
-  CircularProgress,
-  Alert,
-  Chip,
-  Rating
-} from '@mui/material';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { itemService } from '../services/itemService';
-import { categoryService } from '../services/categoryService';
-import { handleApiError } from '../services/api';
-import { formatCurrency } from '../utils/helpers';
-import { ITEM_CONDITIONS, DEFAULT_PAGE_SIZE } from '../utils/constants';
-import type { Item, Category, ItemCondition } from '../types';
-
-export const HomePage: React.FC = () => {
-  const [items, setItems] = useState<Item[]>([]);
-  const [categories, setCategories] = useState<Category[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalItems, setTotalItems] = useState(0);
-  
-  const [searchParams, setSearchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  // Get current filters from URL
-  const currentPage = parseInt(searchParams.get('page') || '1');
-  const categoryId = searchParams.get('categoryId') || '';
-  const condition = searchParams.get('condition') || '';
-  const sort = searchParams.get('sort') || 'createdAt,desc';
-  const query = searchParams.get('query') || '';
-
-  useEffect(() => {
-    fetchCategories();
-  }, []);
-
-  useEffect(() => {
-    fetchItems();
-  }, [searchParams]);
-
-  const fetchCategories = async () => {
-    try {
-      const response = await categoryService.getCategories();
-      setCategories(response.data || []);
-    } catch (error) {
-      console.error('Failed to fetch categories:', error);
-    }
-  };
-
-  const fetchItems = async () => {
-    setLoading(true);
-    setError('');
-
-    try {
-      const params = {
-        page: currentPage - 1, // Backend uses 0-based pagination
-        size: DEFAULT_PAGE_SIZE,
-        sort,
-        ...(categoryId && { categoryId }),
-        ...(condition && { condition: condition as ItemCondition }),
-        ...(query && { query })
-      };
-
-      let response;
-      if (query) {
-        response = await itemService.searchItems(query, categoryId, condition as ItemCondition);
-      } else {
-        response = await itemService.getItems(params);
-      }
-
-      setItems(response.content || response.data || []);
-      setTotalPages(response.totalPages || 1);
-      setTotalItems(response.totalElements || response.count || 0);
-    } catch (err) {
-      setError(handleApiError(err));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleFilterChange = (filterName: string, value: string) => {
-    const newParams = new URLSearchParams(searchParams);
-    
-    if (value) {
-      newParams.set(filterName, value);
-    } else {
-      newParams.delete(filterName);
-    }
-    
-    // Reset to page 1 when filters change
-    newParams.set('page', '1');
-    
-    setSearchParams(newParams);
-  };
-
-  const handlePageChange = (_event: React.ChangeEvent<unknown>, page: number) => {
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set('page', page.toString());
-    setSearchParams(newParams);
-  };
-
-  const handleItemClick = (itemId: string) => {
-    navigate(`/items/${itemId}`);
-  };
-
-  if (loading && items.length === 0) {
-    return (
-      <Container>
-        <Box display="flex" justifyContent="center" mt={4}>
-          <CircularProgress />
-        </Box>
-      </Container>
-    );
-  }
-
-  return (
-    <Container maxWidth="lg" sx={{ py: 4 }}>
-      {/* Hero Section */}
-      <Box textAlign="center" mb={6}>
-        <Typography variant="h3" component="h1" gutterBottom>
-          Find Items to Borrow in Your Community
-        </Typography>
-        <Typography variant="h6" color="text.secondary">
-          LocalLend connects neighbors to share items and build community trust.
-        </Typography>
-      </Box>
-
-      {/* Filters */}
-      <Box mb={4}>
-        <Grid container spacing={2} alignItems="center">
-          <Grid item xs={12} sm={3}>
-            <FormControl fullWidth>
-              <InputLabel>Category</InputLabel>
-              <Select
-                value={categoryId}
-                onChange={(e) => handleFilterChange('categoryId', e.target.value)}
-                label="Category"
-              >
-                <MenuItem value="">All Categories</MenuItem>
-                {categories.map((category) => (
-                  <MenuItem key={category.id} value={category.id}>
-                    {category.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid>
-          
-          <Grid item xs={12} sm={3}>
-            <FormControl fullWidth>
-              <InputLabel>Condition</InputLabel>
-              <Select
-                value={condition}
-                onChange={(e) => handleFilterChange('condition', e.target.value)}
-                label="Condition"
-              >
-                <MenuItem value="">All Conditions</MenuItem>
-                {Object.values(ITEM_CONDITIONS).map((cond) => (
-                  <MenuItem key={cond} value={cond}>
-                    {cond}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid>
-          
-          <Grid item xs={12} sm={3}>
-            <FormControl fullWidth>
-              <InputLabel>Sort By</InputLabel>
-              <Select
-                value={sort}
-                onChange={(e) => handleFilterChange('sort', e.target.value)}
-                label="Sort By"
-              >
-                <MenuItem value="createdAt,desc">Newest First</MenuItem>
-                <MenuItem value="name,asc">Name A-Z</MenuItem>
-                <MenuItem value="averageRating,desc">Highest Rated</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-          
-          <Grid item xs={12} sm={3}>
-            <Typography variant="body2" color="text.secondary">
-              {totalItems} items found
-            </Typography>
-          </Grid>
-        </Grid>
-      </Box>
-
-      {error && (
-        <Alert severity="error" sx={{ mb: 3 }}>
-          {error}
-        </Alert>
-      )}
-
-      {/* Items Grid */}
-      <Grid container spacing={3}>
-        {items.map((item) => (
-          <Grid item xs={12} sm={6} md={4} lg={3} key={item.id}>
-            <Card 
-              sx={{ 
-                height: '100%', 
-                cursor: 'pointer',
-                '&:hover': { transform: 'translateY(-4px)' },
-                transition: 'transform 0.2s'
-              }}
-              onClick={() => handleItemClick(item.id)}
-            >
-              <CardMedia
-                component="img"
-                height="200"
-                image={item.images?.[0] || '/placeholder-image.jpg'}
-                alt={item.name}
-              />
-              <CardContent>
-                <Typography gutterBottom variant="h6" component="h3" noWrap>
-                  {item.name}
-                </Typography>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                  by {item.ownerName}
-                </Typography>
-                <Typography variant="body2" sx={{ mb: 2, height: 40, overflow: 'hidden' }}>
-                  {item.description}
-                </Typography>
-                
-                <Box display="flex" flexDirection="column" gap={1}>
-                  <Box display="flex" justifyContent="space-between" alignItems="center">
-                    <Chip 
-                      label={item.condition} 
-                      size="small" 
-                      color={item.condition === 'NEW' ? 'success' : 'default'}
-                    />
-                    <Box display="flex" alignItems="center" gap={0.5}>
-                      <Rating value={item.averageRating} readOnly size="small" precision={0.1} />
-                      <Typography variant="caption">
-                        ({item.averageRating?.toFixed(1)})
-                      </Typography>
-                    </Box>
-                  </Box>
-                  
-                  <Typography variant="h6" color="primary">
-                    {item.deposit > 0 ? `${formatCurrency(item.deposit)} deposit` : 'No deposit'}
-                  </Typography>
-                </Box>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-
-      {items.length === 0 && !loading && (
-        <Box textAlign="center" py={8}>
-          <Typography variant="h6" color="text.secondary">
-            No items found matching your criteria.
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-            Try adjusting your filters or search terms.
-          </Typography>
-        </Box>
-      )}
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <Box display="flex" justifyContent="center" mt={4}>
-          <Pagination
-            count={totalPages}
-            page={currentPage}
-            onChange={handlePageChange}
-            color="primary"
-          />
-        </Box>
-      )}
-
-      {loading && items.length > 0 && (
-        <Box display="flex" justifyContent="center" mt={2}>
-          <CircularProgress size={24} />
-        </Box>
-      )}
-    </Container>
-  );
-};

frontend/src/pages/LoginPage.tsx

@@ -1,254 +0,0 @@
-// Login Page Component
-import React, { useState } from 'react';
-import { useAuth } from '../context/AuthContext';
-import type { LoginRequest } from '../types';
-
-export interface LoginPageProps {
-  onBack?: () => void;
-}
-
-export const LoginPage: React.FC<LoginPageProps> = ({ onBack }) => {
-  const { login } = useAuth();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    setIsLoading(true);
-    try {
-      const loginData: LoginRequest = {
-        usernameOrEmail: email, // Backend expects usernameOrEmail, so we pass email
-        password: password
-      };
-
-      console.log('Login attempt:', loginData);
-      await login(loginData);
-      
-      alert(`Login successful! Welcome back!`);
-      // Navigation is handled centrally in App via auth state; no manual redirect needed here
-    } catch (error: any) {
-      console.error('Login failed:', error);
-      
-      // Check for network/CORS errors
-      if (error.message === 'Failed to fetch') {
-        alert('Network error: Cannot connect to backend at http://localhost:8080. Please check:\n1. Backend is running on port 8080\n2. CORS is properly configured\n3. No firewall blocking the connection');
-      } else if (error.message === 'Unauthorized') {
-        alert('Invalid username/email or password');
-      } else {
-        // Extract error message from various response formats
-        const errorMessage = error?.response?.data?.message || 
-                            error?.response?.data?.error || 
-                            error?.data?.message || 
-                            error?.message || 
-                            'Login failed. Please check your credentials.';
-        alert(`Login failed: ${errorMessage}`);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      minHeight: '100vh', 
-      display: 'flex', 
-      alignItems: 'center', 
-      justifyContent: 'center',
-      backgroundColor: '#f5f5f5'
-    }}>
-      <div style={{
-        backgroundColor: 'white',
-        padding: '40px',
-        borderRadius: '8px',
-        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-        width: '100%',
-        maxWidth: '400px'
-      }}>
-        <h1 style={{ textAlign: 'center', marginBottom: '30px', color: '#1976d2' }}>
-          Login to LocalLend
-        </h1>
-        
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '5px', 
-              fontWeight: 'bold', 
-              color: '#000',
-              fontSize: '14px',
-              fontFamily: 'Arial, sans-serif'
-            }}>
-              Email
-            </label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '30px' }}>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '5px', 
-              fontWeight: 'bold', 
-              color: '#000',
-              fontSize: '14px',
-              fontFamily: 'Arial, sans-serif'
-            }}>
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <button
-            type="submit"
-            disabled={isLoading}
-            style={{
-              width: '100%',
-              padding: '12px',
-              backgroundColor: isLoading ? '#ccc' : '#1976d2',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              fontSize: '16px',
-              cursor: isLoading ? 'not-allowed' : 'pointer',
-              marginBottom: '20px'
-            }}
-          >
-            {isLoading ? 'Logging In...' : 'Login'}
-          </button>
-        </form>
-        
-        <div style={{ textAlign: 'center' }}>
-          <p style={{ margin: '10px 0' }}>
-            Don't have an account?{' '}
-            <button 
-              style={{ color: '#1976d2', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }}
-              onClick={() => console.log('Navigate to register')}
-            >
-              Register here
-            </button>
-          </p>
-          {onBack && (
-            <button 
-              onClick={onBack}
-              style={{ color: '#666', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }}
-            >
-              ← Back to Home
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// When React is properly installed, this will become:
-/*
-import React, { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-import { handleApiError } from '../services/api';
-
-export const LoginPage: React.FC = () => {
-  const [formData, setFormData] = useState({
-    usernameOrEmail: '',
-    password: ''
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  
-  const { login } = useAuth();
-  const navigate = useNavigate();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError('');
-    
-    try {
-      await login(formData);
-      navigate('/dashboard');
-    } catch (err) {
-      setError(handleApiError(err));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Container maxWidth="sm">
-      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <Typography component="h1" variant="h4">
-          Login to LocalLend
-        </Typography>
-        
-        {error && (
-          <Alert severity="error" sx={{ mt: 2, width: '100%' }}>
-            {error}
-          </Alert>
-        )}
-        
-        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1, width: '100%' }}>
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            label="Username or Email"
-            value={formData.usernameOrEmail}
-            onChange={(e) => setFormData(prev => ({ ...prev, usernameOrEmail: e.target.value }))}
-          />
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            label="Password"
-            type="password"
-            value={formData.password}
-            onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
-          />
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            disabled={isLoading}
-            sx={{ mt: 3, mb: 2 }}
-          >
-            {isLoading ? 'Logging in...' : 'Login'}
-          </Button>
-          <Box textAlign="center">
-            <Link to="/register">
-              Don't have an account? Register here
-            </Link>
-          </Box>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-*/

frontend/src/pages/MyBookingsPage.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface MyBookingsPageProps {
-  onBack: () => void;
-}
-
-export const MyBookingsPage: React.FC<MyBookingsPageProps> = ({ onBack }) => (
-  <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-    <h1>My Bookings</h1>
-    <p>Here you can see all the items you've booked from other users.</p>
-    <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-      Back to Home
-    </button>
-  </div>
-);

frontend/src/pages/MyItemsPage.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface MyItemsPageProps {
-  onBack: () => void;
-}
-
-export const MyItemsPage: React.FC<MyItemsPageProps> = ({ onBack }) => (
-  <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-    <h1>My Items</h1>
-    <p>Here you can manage the items you're lending out to others.</p>
-    <button onClick={onBack} style={{ padding: '10px 20px', backgroundColor: '#1976d2', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
-      Back to Home
-    </button>
-  </div>
-);

frontend/src/pages/RegisterPage.tsx

@@ -1,419 +0,0 @@
-// Register Page Component
-import React, { useState } from 'react';
-import { useAuth } from '../context/AuthContext';
-import type { RegisterRequest } from '../types';
-
-export interface RegisterPageProps {
-  onBack?: () => void;
-}
-
-export const RegisterPage: React.FC<RegisterPageProps> = ({ onBack }) => {
-  const { register } = useAuth();
-  const [formData, setFormData] = useState({
-    username: '',
-    name: '',
-    email: '',
-    phoneNumber: '',
-    password: '',
-    confirmPassword: ''
-  });
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Test backend connectivity
-  const testBackendConnection = async () => {
-    const backendUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
-    console.log('🔍 Testing connection to:', backendUrl);
-    
-    try {
-      // Test multiple endpoints to find what works
-      const testEndpoints = [
-        '/api/categories',
-        '/api/auth/login', // This should exist according to the guide
-        '/actuator/health', // Common Spring Boot health endpoint
-        '/', // Basic root endpoint
-      ];
-      
-      let successFound = false;
-      let results = [];
-      
-      for (const endpoint of testEndpoints) {
-        try {
-          console.log(`Testing ${backendUrl}${endpoint}`);
-          const response = await fetch(`${backendUrl}${endpoint}`, {
-            method: 'GET',
-            mode: 'cors',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          });
-          
-          console.log(`Response for ${endpoint}:`, response.status, response.statusText);
-          const responseText = await response.text();
-          console.log(`Response body:`, responseText);
-          
-          results.push(`${endpoint}: ${response.status} ${response.statusText} - ${responseText.substring(0, 100)}`);
-          
-          if (response.ok) {
-            successFound = true;
-            alert(`✅ Backend connection successful!\nURL: ${backendUrl}${endpoint}\nStatus: ${response.status}\nResponse: ${responseText.substring(0, 200)}...\n\nBackend is reachable!`);
-            break;
-          }
-        } catch (err: any) {
-          console.error(`Error testing ${endpoint}:`, err);
-          results.push(`${endpoint}: ${err.message}`);
-        }
-      }
-      
-      if (!successFound) {
-        alert(`❌ Cannot connect to backend:\nURL: ${backendUrl}\n\nTest Results:\n${results.join('\n')}\n\nPossible issues:\n1. Backend not running on port 8080\n2. Backend running on different port\n3. CORS not configured\n4. Backend bound to localhost only`);
-      }
-      
-    } catch (error: any) {
-      console.error('Connection test failed:', error);
-      alert(`❌ Network error:\nURL: ${backendUrl}\nError: ${error.message}\n\nCheck:\n1. Is backend running?\n2. What port is it on?\n3. Is Docker networking working?`);
-    }
-  };
-
-  // Test alternative ports
-  const testAlternativePort = async (port: number) => {
-    const testUrl = `http://localhost:${port}`;
-    console.log(`🔍 Testing alternative port: ${testUrl}`);
-    
-    try {
-      const response = await fetch(`${testUrl}/api/categories`, {
-        method: 'GET',
-        mode: 'cors',
-      });
-      
-      if (response.ok) {
-        alert(`✅ Found backend on port ${port}!\nURL: ${testUrl}\nUpdate your .env file:\nVITE_API_BASE_URL=http://localhost:${port}`);
-      } else {
-        alert(`⚠️ Port ${port} responded with: ${response.status} ${response.statusText}`);
-      }
-    } catch (error: any) {
-      console.log(`Port ${port}: ${error.message}`);
-      alert(`❌ Port ${port}: ${error.message}`);
-    }
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    });
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    // Client-side validation to match backend requirements
-    const validationErrors: string[] = [];
-    
-    if (formData.username.length < 3 || formData.username.length > 50) {
-      validationErrors.push('Username must be between 3 and 50 characters');
-    }
-    
-    if (formData.name.length < 2 || formData.name.length > 100) {
-      validationErrors.push('Full name must be between 2 and 100 characters');
-    }
-    
-    if (formData.password.length < 8) {
-      validationErrors.push('Password must be at least 8 characters long');
-    }
-    
-    if (formData.password !== formData.confirmPassword) {
-      validationErrors.push('Passwords do not match');
-    }
-    
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(formData.email)) {
-      validationErrors.push('Please enter a valid email address');
-    }
-    
-    if (validationErrors.length > 0) {
-      alert('Validation errors:\n' + validationErrors.join('\n'));
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      // Prepare data for backend (excluding confirmPassword)
-      const registerData: RegisterRequest = {
-        username: formData.username,
-        name: formData.name,
-        email: formData.email,
-        password: formData.password,
-        phoneNumber: formData.phoneNumber || undefined
-      };
-
-      console.log('Registration attempt:', registerData);
-      console.log('Attempting to connect to backend at:', import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080');
-      
-      await register(registerData);
-      
-      alert(`Registration successful! Welcome ${formData.name}!`);
-      
-      // Redirect back to home after successful registration
-      if (onBack) {
-        onBack();
-      }
-    } catch (error: any) {
-      console.error('Registration failed:', error);
-      
-      // Check for network/CORS errors
-      if (error.message === 'Failed to fetch') {
-        alert('Network error: Cannot connect to backend at ' + (import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080') + '. Please check:\n1. Backend is running on port 8080\n2. CORS is properly configured\n3. Backend container is accessible from browser');
-      } else if (error.message === 'Unauthorized') {
-        alert('Authentication error: Please check your credentials');
-      } else {
-        // Extract error message from various response formats
-        const errorMessage = error?.response?.data?.message || 
-                            error?.response?.data?.error || 
-                            error?.data?.message || 
-                            error?.message || 
-                            'Registration failed. Please try again.';
-        alert(`Registration failed: ${errorMessage}`);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      minHeight: '100vh', 
-      display: 'flex', 
-      alignItems: 'center', 
-      justifyContent: 'center',
-      backgroundColor: '#f5f5f5',
-      padding: '20px'
-    }}>
-      <div style={{
-        backgroundColor: 'white',
-        padding: '40px',
-        borderRadius: '8px',
-        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-        width: '100%',
-        maxWidth: '500px'
-      }}>
-        <h1 style={{ textAlign: 'center', marginBottom: '30px', color: '#1976d2' }}>
-          Join LocalLend
-        </h1>
-        
-        {/* Backend Connection Test Buttons */}
-        <div style={{ marginBottom: '20px' }}>
-          <button
-            type="button"
-            onClick={testBackendConnection}
-            style={{
-              width: '100%',
-              padding: '8px',
-              backgroundColor: '#f0f0f0',
-              color: '#666',
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              fontSize: '14px',
-              cursor: 'pointer',
-              marginBottom: '8px'
-            }}
-          >
-            🔍 Test Backend Connection (Port 8080)
-          </button>
-          
-          <div style={{ display: 'flex', gap: '5px' }}>
-            {[8081, 8082, 9090, 3000].map(port => (
-              <button
-                key={port}
-                type="button"
-                onClick={() => testAlternativePort(port)}
-                style={{
-                  flex: 1,
-                  padding: '6px',
-                  backgroundColor: '#e8f4fd',
-                  color: '#1976d2',
-                  border: '1px solid #1976d2',
-                  borderRadius: '3px',
-                  fontSize: '12px',
-                  cursor: 'pointer'
-                }}
-              >
-                :{port}
-              </button>
-            ))}
-          </div>
-        </div>
-        
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Username
-            </label>
-            <input
-              type="text"
-              name="username"
-              value={formData.username}
-              onChange={handleChange}
-              required
-              minLength={3}
-              maxLength={50}
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Full Name
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              minLength={2}
-              maxLength={100}
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Email
-            </label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Phone Number (Optional)
-            </label>
-            <input
-              type="tel"
-              name="phoneNumber"
-              value={formData.phoneNumber}
-              onChange={handleChange}
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '20px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Password (Minimum 8 characters)
-            </label>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              required
-              minLength={8}
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <div style={{ marginBottom: '30px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#000' }}>
-              Confirm Password
-            </label>
-            <input
-              type="password"
-              name="confirmPassword"
-              value={formData.confirmPassword}
-              onChange={handleChange}
-              required
-              minLength={8}
-              style={{
-                width: '100%',
-                padding: '12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                boxSizing: 'border-box'
-              }}
-            />
-          </div>
-          
-          <button
-            type="submit"
-            disabled={isLoading}
-            style={{
-              width: '100%',
-              padding: '12px',
-              backgroundColor: isLoading ? '#ccc' : '#1976d2',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              fontSize: '16px',
-              fontWeight: 'bold',
-              cursor: isLoading ? 'not-allowed' : 'pointer',
-              marginBottom: '10px'
-            }}
-          >
-            {isLoading ? 'Signing Up...' : 'Sign Up'}
-          </button>
-          
-          {onBack && (
-            <button
-              type="button"
-              onClick={onBack}
-              style={{
-                width: '100%',
-                padding: '12px',
-                backgroundColor: '#f5f5f5',
-                color: '#333',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                cursor: 'pointer'
-              }}
-            >
-              Back to Home
-            </button>
-          )}
-        </form>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/SearchResultsPage.tsx

@@ -1,445 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../context/AuthContext';
-
-interface SearchResultsPageProps {
-  onBack: () => void;
-  searchQuery: string;
-  onSearchQueryChange: (query: string) => void;
-    onBookItem: (item: any) => void;
-}
-
-export const SearchResultsPage: React.FC<SearchResultsPageProps> = ({ onBack, searchQuery, onSearchQueryChange, onBookItem }) => {
-  console.log('🔍🔍🔍 SearchResultsPage rendered with onBookItem:', onBookItem);
-  console.log('🔍🔍🔍 SearchResultsPage component loaded successfully');
-  
-  useEffect(() => {
-    console.log('🔍🔍🔍 SearchResultsPage useEffect - this should show when page loads');
-  }, []);
-  
-  const { user } = useAuth();
-  const [searchResults, setSearchResults] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [selectedCategory, setSelectedCategory] = useState('');
-
-  // Helpers for richer display
-  const formatCurrency = (amount: any) => {
-    const n = Number(amount ?? 0);
-    if (!isFinite(n)) return '₹0.00';
-    return n.toLocaleString('en-IN', { style: 'currency', currency: 'INR' });
-  };
-
-  const formatDate = (dateLike: any) => {
-    if (!dateLike) return '—';
-    try {
-      const d = new Date(dateLike);
-      return d.toLocaleDateString();
-    } catch {
-      return '—';
-    }
-  };
-
-  const getStatusStyle = (status?: string) => {
-    const s = (status || 'AVAILABLE').toUpperCase();
-    if (s === 'AVAILABLE') return { bg: '#4caf50', label: 'Available' };
-    if (s === 'BORROWED') return { bg: '#ff9800', label: 'Borrowed' };
-    return { bg: '#9e9e9e', label: 'Unavailable' };
-  };
-
-  const renderStars = (rating?: number) => {
-    const r = Math.round(Number(rating || 0));
-    const stars = Array.from({ length: 5 }, (_, i) => (i < r ? '★' : '☆')).join('');
-    return <span aria-label={`Rating ${r} of 5`} title={`Rating ${r}/5`} style={{ color: '#fbc02d' }}>{stars}</span>;
-  };
-
-  useEffect(() => {
-    const performSearch = async () => {
-      try {
-        setIsLoading(true);
-        const term = (searchQuery || '').trim();
-        const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
-        const headers: Record<string, string> = {
-          'Content-Type': 'application/json',
-        };
-        const token = localStorage.getItem('token');
-        if (token) headers['Authorization'] = `Bearer ${token}`;
-        if (user?.id) headers['X-User-Id'] = user.id.toString();
-
-        let results: any[] = [];
-
-        // 1) If user typed a term, try the dedicated search endpoint
-        if (term) {
-          const qp = new URLSearchParams();
-          qp.append('q', term);  // Backend expects 'q' not 'query'
-          // Only pass categoryId if it looks like a real id (not display name)
-          if (selectedCategory && selectedCategory.length > 12) {
-            qp.append('categoryId', selectedCategory);
-          }
-          const url = `${baseUrl}/api/items/search?${qp.toString()}`;
-          console.log('[Search] Fetching:', url);
-          const res = await fetch(url, { headers });
-          if (res.ok) {
-            const data = await res.json();
-            results = Array.isArray(data) ? data : (data.content || data.data || []);
-            console.log('[Search] /api/items/search returned:', results.length, 'items');
-          } else {
-            console.warn('[Search] /api/items/search failed with status:', res.status);
-          }
-        }
-
-        // 2) Fallback: fetch general items and optionally client-filter
-        if (!term || results.length === 0) {
-          const qp = new URLSearchParams();
-          qp.append('page', '0');
-          qp.append('size', '50');
-          if (selectedCategory && selectedCategory.length > 12) {
-            qp.append('categoryId', selectedCategory);
-          }
-          const url = `${baseUrl}/api/items?${qp.toString()}`;
-          console.log('[Search] Fallback fetching:', url);
-          const res = await fetch(url, { headers });
-          if (res.ok) {
-            const data = await res.json();
-            const all = data.content || data.data || [];
-            console.log('[Search] /api/items returned:', all.length, 'items');
-            results = term
-              ? all.filter((it: any) => {
-                  const name = (it.name || it.title || '').toString().toLowerCase();
-                  const desc = (it.description || '').toString().toLowerCase();
-                  const categoryName = (it.categoryName || it.category || '').toString().toLowerCase();
-                  const q = term.toLowerCase();
-                  return name.includes(q) || desc.includes(q) || categoryName.includes(q);
-                })
-              : all;
-            console.log('[Search] After client filter:', results.length, 'items');
-          } else {
-            console.warn('[Search] /api/items fallback failed with status:', res.status);
-          }
-        }
-
-        // Exclude current user's items
-        const filtered = results.filter((it: any) => {
-          const ownerId = it.ownerId || it.owner?.id || it.owner_id;
-          return !user?.id || ownerId !== user.id;
-        });
-        console.log('[Search] After excluding own items:', filtered.length, 'items');
-        setSearchResults(filtered);
-      } catch (error) {
-        console.error('Search error:', error);
-        setSearchResults([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    performSearch();
-  }, [searchQuery, selectedCategory, user?.id]);
-
-  const handleNewSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Search will be triggered by useEffect when searchQuery changes
-  };
-
-  return (
-    <div style={{ 
-      fontFamily: 'Roboto, Arial, sans-serif',
-      margin: '0',
-      padding: '0',
-      backgroundColor: '#f5f5f5',
-      color: '#213547',
-      minHeight: '100vh'
-    }}>
-      {/* Navigation Bar */}
-      <nav style={{
-        backgroundColor: '#1976d2',
-        color: 'white',
-        padding: '12px 0',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        marginBottom: '20px'
-      }}>
-        <div style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: '20px'
-        }}>
-          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
-            <button
-              onClick={onBack}
-              style={{ 
-                color: 'white', 
-                textDecoration: 'none', 
-                background: 'none', 
-                border: 'none', 
-                cursor: 'pointer',
-                fontSize: '1.5rem',
-                fontWeight: 'bold'
-              }}
-            >
-              LocalLend
-            </button>
-          </div>
-
-          {/* Search Bar */}
-          <form onSubmit={handleNewSearch} style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            flex: 1,
-            maxWidth: '500px'
-          }}>
-            <input
-              type="search"
-              placeholder="Search items..."
-              value={searchQuery}
-              onChange={(e) => onSearchQueryChange(e.target.value)}
-              style={{
-                flex: 1,
-                padding: '8px 12px',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-            />
-            <select 
-              value={selectedCategory}
-              onChange={(e) => setSelectedCategory(e.target.value)}
-              style={{
-                padding: '8px',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-            >
-              <option value="">All Categories</option>
-              <option value="electronics">Electronics</option>
-              <option value="tools">Tools</option>
-              <option value="sports">Sports</option>
-              <option value="books">Books</option>
-            </select>
-            <button type="submit" style={{
-              padding: '8px 16px',
-              backgroundColor: '#1565c0',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '14px'
-            }}>
-              Search
-            </button>
-          </form>
-          
-          {user && (
-            <span style={{ 
-              color: 'white', 
-              fontSize: '14px',
-              padding: '8px 12px',
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
-              borderRadius: '4px'
-            }}>
-              Welcome, {user.name}!
-            </span>
-          )}
-        </div>
-      </nav>
-
-      {/* Search Results Content */}
-      <div style={{ padding: '0 20px', maxWidth: '1200px', margin: '0 auto' }}>
-        <div style={{ marginBottom: '20px' }}>
-          <h1 style={{ color: '#1976d2', marginBottom: '10px' }}>
-            Search Results {searchQuery && `for "${searchQuery}"`}
-          </h1>
-          {selectedCategory && (
-            <p style={{ color: '#666', margin: '0' }}>
-              Category: {selectedCategory}
-            </p>
-          )}
-        </div>
-        
-        {isLoading ? (
-          <div style={{ textAlign: 'center', padding: '40px' }}>
-            <p>Searching for items...</p>
-          </div>
-        ) : (
-          <>
-            <div style={{ marginBottom: '20px', color: '#666' }}>
-              Found {searchResults.length} item{searchResults.length !== 1 ? 's' : ''}
-            </div>
-            
-            {searchResults.length === 0 ? (
-              <div style={{ 
-                backgroundColor: 'white', 
-                padding: '40px', 
-                borderRadius: '8px', 
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                textAlign: 'center'
-              }}>
-                <h3 style={{ color: '#666', marginBottom: '10px' }}>No items found</h3>
-                <p style={{ color: '#888' }}>
-                  Try adjusting your search terms or browse all available items.
-                </p>
-                <button 
-                  onClick={() => onSearchQueryChange('')}
-                  style={{
-                    padding: '10px 20px',
-                    backgroundColor: '#1976d2',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    marginTop: '15px'
-                  }}
-                >
-                  Clear Search
-                </button>
-              </div>
-            ) : (
-              <div style={{ 
-                display: 'grid', 
-                gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', 
-                gap: '20px' 
-              }}>
-                {searchResults.map((item) => {
-                  const isOwn = !!user && (item.ownerId === user.id || item.owner?.id === user.id);
-                  const name = item.name || item.title || 'Untitled';
-                  const description = item.description || '';
-                  const ownerName = item.ownerName || item.owner?.name || 'Unknown';
-                  const categoryName = item.categoryName || item.category || 'General';
-                  const imageSrc = item.imageUrl || item.images?.[0] || '';
-                  const deposit = item.deposit ?? 0;
-                  const avgRating = item.averageRating ?? item.rating ?? 0;
-                  const statusInfo = getStatusStyle(item.status);
-                  const createdAt = formatDate(item.createdAt);
-                  const canBorrow = item.canBeBorrowed !== false;
-
-                  return (
-                  <div key={item.id} style={{ 
-                    backgroundColor: 'white', 
-                    padding: '20px', 
-                    borderRadius: '8px', 
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 'fit-content'
-                  }}>
-                    {/* Item Image */}
-                    <div style={{
-                      width: '100%',
-                      height: '200px',
-                      backgroundColor: '#e0e0e0',
-                      borderRadius: '4px',
-                      marginBottom: '15px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: '#666'
-                    }}>
-                      {imageSrc ? (
-                        <img src={imageSrc} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '4px' }} />
-                      ) : (
-                        <span>No Image</span>
-                      )}
-                    </div>
-
-                    {/* Title and status */}
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
-                      <h3 style={{ margin: '0 0 8px 0', color: '#333' }}>{name}</h3>
-                      <span style={{ padding: '2px 8px', borderRadius: 12, backgroundColor: statusInfo.bg, color: 'white', fontSize: 12 }}>
-                        {statusInfo.label}
-                      </span>
-                    </div>
-                    <p style={{ margin: '0 0 10px 0', color: '#666', fontSize: '14px', flexGrow: 1 }}>{description}</p>
-
-                    {/* Owner */}
-                    <div style={{ marginBottom: '10px', fontSize: '14px' }}>
-                      <span style={{ color: '#666' }}>Owner: </span>
-                      <span style={{ color: '#333', fontWeight: 'bold' }}>{ownerName}</span>
-                    </div>
-
-                    {/* Chips: deposit, condition, category, borrowable */}
-                    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '15px', fontSize: '12px' }}>
-                      <span style={{ padding: '2px 8px', borderRadius: '12px', backgroundColor: '#4caf50', color: 'white' }}>
-                        Deposit {formatCurrency(deposit)}
-                      </span>
-                      {item.condition && (
-                        <span style={{ padding: '2px 8px', borderRadius: '12px', backgroundColor: '#2196f3', color: 'white' }}>
-                          {item.condition}
-                        </span>
-                      )}
-                      <span style={{ padding: '2px 8px', borderRadius: '12px', backgroundColor: '#ff9800', color: 'white' }}>
-                        {categoryName}
-                      </span>
-                      <span style={{ padding: '2px 8px', borderRadius: '12px', backgroundColor: canBorrow ? '#7cb342' : '#9e9e9e', color: 'white' }}>
-                        {canBorrow ? 'Borrowable' : 'Not Borrowable'}
-                      </span>
-                    </div>
-
-                    {/* Rating & Created */}
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
-                      <div>
-                        {renderStars(avgRating)}
-                        <span style={{ marginLeft: 8, color: '#666', fontSize: 12 }}>{Number(avgRating || 0).toFixed(1)}</span>
-                      </div>
-                      <div style={{ color: '#666', fontSize: 12 }}>
-                        Added: {createdAt}
-                      </div>
-                    </div>
-
-                    {/* Book button */}
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        console.log('🔥 Book click for item:', item);
-                        try {
-                          if (isOwn) {
-                            alert('You cannot book your own item.');
-                            return;
-                          }
-                          onBookItem(item);
-                        } catch (error) {
-                          console.error('🔥🔥🔥 Error calling onBookItem:', error);
-                        }
-                      }}
-                      style={{
-                        width: '100%',
-                        padding: '10px',
-                        backgroundColor: isOwn ? '#bdbdbd' : '#1976d2',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: isOwn ? 'not-allowed' : 'pointer',
-                        fontSize: '14px',
-                        fontWeight: 'bold'
-                      }}
-                      disabled={isOwn}
-                    >
-                      {isOwn ? 'Cannot Book Own Item' : 'Book This Item'}
-                    </button>
-                  </div>
-                );})}
-              </div>
-            )}
-          </>
-        )}
-        
-        <div style={{ marginTop: '30px', textAlign: 'center' }}>
-          <button onClick={onBack} style={{
-            padding: '12px 24px',
-            backgroundColor: '#757575',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}>
-            Back to Home
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/services/api.ts

@@ -1,121 +0,0 @@
-// API Configuration
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
-
-// Mock API interface for development (will be replaced with axios)
-export interface ApiClient {
-  get: (url: string, config?: any) => Promise<any>;
-  post: (url: string, data?: any, config?: any) => Promise<any>;
-  put: (url: string, data?: any, config?: any) => Promise<any>;
-  patch: (url: string, data?: any, config?: any) => Promise<any>;
-  delete: (url: string, config?: any) => Promise<any>;
-}
-
-// Fetch-based API client (temporary until axios is installed)
-const createFetchClient = (): ApiClient => {
-  const makeRequest = async (url: string, options: RequestInit = {}) => {
-    const token = localStorage.getItem('token');
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-      ...(options.headers as Record<string, string>),
-    };
-    
-    if (token) {
-      headers.Authorization = `Bearer ${token}`;
-    }
-
-    const fullUrl = `${API_BASE_URL}${url}`;
-    console.log(`🌐 API Request: ${options.method || 'GET'} ${fullUrl}`);
-    console.log('📤 Request headers:', headers);
-    if (options.body) {
-      console.log('📦 Request body:', options.body);
-    }
-
-    let response: Response;
-    try {
-      response = await fetch(fullUrl, {
-        ...options,
-        headers,
-        mode: 'cors', // Explicitly set CORS mode
-      });
-      
-      console.log(`📨 Response: ${response.status} ${response.statusText}`);
-    
-    // Log response headers for debugging
-    console.log('📥 Response headers:', Object.fromEntries(response.headers.entries()));
-    } catch (error: any) {
-      console.error('❌ Network Error:', error);
-      // Handle network errors (CORS, connection refused, etc.)
-      if (error.name === 'TypeError' || error.message === 'Failed to fetch') {
-        throw new Error('Failed to fetch');
-      }
-      throw error;
-    }
-
-    if (response.status === 401) {
-      localStorage.removeItem('token');
-      localStorage.removeItem('user');
-      window.location.href = '/login';
-      throw new Error('Unauthorized');
-    }
-
-    if (!response.ok) {
-      let errorData: any = {};
-      try {
-        errorData = await response.json();
-      } catch (e) {
-        // If response is not JSON, create error based on status
-        errorData = { 
-          message: `HTTP ${response.status}: ${response.statusText}` 
-        };
-      }
-      
-      const error = new Error(errorData.message || errorData.error || `Request failed with status ${response.status}`);
-      (error as any).response = { 
-        status: response.status, 
-        data: errorData 
-      };
-      throw error;
-    }
-
-    // Handle 204 No Content responses (like DELETE operations)
-    if (response.status === 204) {
-      return null;
-    }
-
-    // Check if response has content before parsing JSON
-    const contentType = response.headers.get('content-type');
-    if (contentType && contentType.includes('application/json')) {
-      return response.json();
-    } else {
-      return null;
-    }
-  };
-
-  return {
-    get: (url: string, config?: any) => makeRequest(url, { method: 'GET', ...config }),
-    post: (url: string, data?: any, config?: any) => 
-      makeRequest(url, { method: 'POST', body: JSON.stringify(data), ...config }),
-    put: (url: string, data?: any, config?: any) => 
-      makeRequest(url, { method: 'PUT', body: JSON.stringify(data), ...config }),
-    patch: (url: string, data?: any, config?: any) => 
-      makeRequest(url, { method: 'PATCH', body: JSON.stringify(data), ...config }),
-    delete: (url: string, config?: any) => makeRequest(url, { method: 'DELETE', ...config }),
-  };
-};
-
-const api = createFetchClient();
-
-// Helper function to handle API errors
-export const handleApiError = (error: any): string => {
-  if (error.message) {
-    return error.message;
-  }
-  return 'An unexpected error occurred';
-};
-
-// Helper function to add X-User-Id header when needed
-export const addUserIdHeader = (userId: string) => {
-  return { 'X-User-Id': userId };
-};
-
-export default api;

frontend/src/services/authService.ts

@@ -1,48 +0,0 @@
-import api from './api';
-import type { 
-  LoginRequest, 
-  RegisterRequest, 
-  AuthResponse,
-  User 
-} from '../types';
-
-export const authService = {
-  // Register a new user
-  register: async (userData: RegisterRequest): Promise<User> => {
-    const response = await api.post('/api/auth/register', userData);
-    return response;
-  },
-
-  // Login user
-  login: async (credentials: LoginRequest): Promise<AuthResponse> => {
-    const response = await api.post('/api/auth/login', credentials);
-    // Store token and user data
-    if (response.token) {
-      localStorage.setItem('token', response.token);
-      localStorage.setItem('user', JSON.stringify(response.user));
-    }
-    return response;
-  },
-
-  // Logout user
-  logout: () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-  },
-
-  // Get current user from localStorage
-  getCurrentUser: (): User | null => {
-    const userStr = localStorage.getItem('user');
-    return userStr ? JSON.parse(userStr) : null;
-  },
-
-  // Check if user is authenticated
-  isAuthenticated: (): boolean => {
-    return !!localStorage.getItem('token');
-  },
-
-  // Get auth token
-  getToken: (): string | null => {
-    return localStorage.getItem('token');
-  }
-};

frontend/src/services/bookingService.ts

@@ -1,82 +0,0 @@
-import api, { addUserIdHeader } from './api';
-import type { 
-  Booking, 
-  CreateBookingRequest, 
-  ApiResponse, 
-  BookingStatus 
-} from '../types';
-
-export const bookingService = {
-  // Create new booking request
-  createBooking: async (bookingData: CreateBookingRequest, borrowerId: string): Promise<Booking> => {
-    const response = await api.post('/api/bookings', bookingData, {
-      headers: addUserIdHeader(borrowerId)
-    });
-    return response;
-  },
-
-  // Get all bookings (as borrower)
-  getMyBookings: async (status?: BookingStatus): Promise<ApiResponse<Booking[]>> => {
-    const url = status ? `/api/bookings?status=${status}` : '/api/bookings';
-    const response = await api.get(url);
-    return response;
-  },
-
-  // Get bookings for items I own (as owner)
-  getBookingsReceived: async (): Promise<ApiResponse<Booking[]>> => {
-    const response = await api.get('/api/bookings/received');
-    return response;
-  },
-
-  // Get pending approvals (for owners)
-  getPendingApprovals: async (): Promise<ApiResponse<Booking[]>> => {
-    const response = await api.get('/api/bookings/pending-approvals');
-    return response;
-  },
-
-  // Get single booking details
-  getBooking: async (bookingId: string): Promise<Booking> => {
-    const response = await api.get(`/api/bookings/${bookingId}`);
-    return response;
-  },
-
-  // Approve booking (owner)
-  approveBooking: async (bookingId: string, ownerId: string): Promise<Booking> => {
-    const response = await api.patch(`/api/bookings/${bookingId}/approve`, null, {
-      headers: addUserIdHeader(ownerId)
-    });
-    return response;
-  },
-
-  // Reject booking (owner)
-  rejectBooking: async (bookingId: string, reason: string, ownerId: string): Promise<Booking> => {
-    const response = await api.patch(`/api/bookings/${bookingId}/reject`, { reason }, {
-      headers: addUserIdHeader(ownerId)
-    });
-    return response;
-  },
-
-  // Start booking (borrower)
-  startBooking: async (bookingId: string, borrowerId: string): Promise<Booking> => {
-    const response = await api.patch(`/api/bookings/${bookingId}/start`, null, {
-      headers: addUserIdHeader(borrowerId)
-    });
-    return response;
-  },
-
-  // Complete booking (borrower or owner)
-  completeBooking: async (bookingId: string, userId: string): Promise<Booking> => {
-    const response = await api.patch(`/api/bookings/${bookingId}/complete`, null, {
-      headers: addUserIdHeader(userId)
-    });
-    return response;
-  },
-
-  // Cancel booking
-  cancelBooking: async (bookingId: string, reason: string, userId: string): Promise<Booking> => {
-    const response = await api.patch(`/api/bookings/${bookingId}/cancel`, { reason }, {
-      headers: addUserIdHeader(userId)
-    });
-    return response;
-  }
-};