simplified create item. Restructured profile. Simplified availability

backend/routes/items.js

@@ -1,34 +1,36 @@
-const express = require('express');
+const express = require("express");
-const { Op } = require('sequelize');
+const { Op } = require("sequelize");
-const { Item, User, Rental } = require('../models'); // Import from models/index.js to get models with associations
+const { Item, User, Rental } = require("../models"); // Import from models/index.js to get models with associations
-const { authenticateToken } = require('../middleware/auth');
+const { authenticateToken } = require("../middleware/auth");
 const router = express.Router();
 
-router.get('/', async (req, res) => {
+router.get("/", async (req, res) => {
   try {
     const {
-      isPortable,
       minPrice,
       maxPrice,
       location,
+      city,
+      zipCode,
       search,
       page = 1,
-      limit = 20
+      limit = 20,
     } = req.query;
 
     const where = {};
-    
+
-    if (isPortable !== undefined) where.isPortable = isPortable === 'true';
     if (minPrice || maxPrice) {
       where.pricePerDay = {};
       if (minPrice) where.pricePerDay[Op.gte] = minPrice;
       if (maxPrice) where.pricePerDay[Op.lte] = maxPrice;
     }
     if (location) where.location = { [Op.iLike]: `%${location}%` };
+    if (city) where.city = { [Op.iLike]: `%${city}%` };
+    if (zipCode) where.zipCode = { [Op.iLike]: `%${zipCode}%` };
     if (search) {
       where[Op.or] = [
         { name: { [Op.iLike]: `%${search}%` } },
-        { description: { [Op.iLike]: `%${search}%` } }
+        { description: { [Op.iLike]: `%${search}%` } },
       ];
     }
 
@@ -36,37 +38,43 @@ router.get('/', async (req, res) => {
 
     const { count, rows } = await Item.findAndCountAll({
       where,
-      include: [{ model: User, as: 'owner', attributes: ['id', 'username', 'firstName', 'lastName'] }],
+      include: [
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+      ],
       limit: parseInt(limit),
       offset: parseInt(offset),
-      order: [['createdAt', 'DESC']]
+      order: [["createdAt", "DESC"]],
     });
 
     res.json({
       items: rows,
       totalPages: Math.ceil(count / limit),
       currentPage: parseInt(page),
-      totalItems: count
+      totalItems: count,
     });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-router.get('/recommendations', authenticateToken, async (req, res) => {
+router.get("/recommendations", authenticateToken, async (req, res) => {
   try {
     const userRentals = await Rental.findAll({
       where: { renterId: req.user.id },
-      include: [{ model: Item, as: 'item' }]
+      include: [{ model: Item, as: "item" }],
     });
 
     // For now, just return random available items as recommendations
     const recommendations = await Item.findAll({
       where: {
-        availability: true
+        availability: true,
       },
       limit: 10,
-      order: [['createdAt', 'DESC']]
+      order: [["createdAt", "DESC"]],
     });
 
     res.json(recommendations);
@@ -75,14 +83,20 @@ router.get('/recommendations', authenticateToken, async (req, res) => {
   }
 });
 
-router.get('/:id', async (req, res) => {
+router.get("/:id", async (req, res) => {
   try {
     const item = await Item.findByPk(req.params.id, {
-      include: [{ model: User, as: 'owner', attributes: ['id', 'username', 'firstName', 'lastName'] }]
+      include: [
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+      ],
     });
 
     if (!item) {
-      return res.status(404).json({ error: 'Item not found' });
+      return res.status(404).json({ error: "Item not found" });
     }
 
     res.json(item);
@@ -91,15 +105,21 @@ router.get('/:id', async (req, res) => {
   }
 });
 
-router.post('/', authenticateToken, async (req, res) => {
+router.post("/", authenticateToken, async (req, res) => {
   try {
     const item = await Item.create({
       ...req.body,
-      ownerId: req.user.id
+      ownerId: req.user.id,
     });
 
     const itemWithOwner = await Item.findByPk(item.id, {
-      include: [{ model: User, as: 'owner', attributes: ['id', 'username', 'firstName', 'lastName'] }]
+      include: [
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+      ],
     });
 
     res.status(201).json(itemWithOwner);
@@ -108,22 +128,28 @@ router.post('/', authenticateToken, async (req, res) => {
   }
 });
 
-router.put('/:id', authenticateToken, async (req, res) => {
+router.put("/:id", authenticateToken, async (req, res) => {
   try {
     const item = await Item.findByPk(req.params.id);
 
     if (!item) {
-      return res.status(404).json({ error: 'Item not found' });
+      return res.status(404).json({ error: "Item not found" });
     }
 
     if (item.ownerId !== req.user.id) {
-      return res.status(403).json({ error: 'Unauthorized' });
+      return res.status(403).json({ error: "Unauthorized" });
     }
 
     await item.update(req.body);
 
     const updatedItem = await Item.findByPk(item.id, {
-      include: [{ model: User, as: 'owner', attributes: ['id', 'username', 'firstName', 'lastName'] }]
+      include: [
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+      ],
     });
 
     res.json(updatedItem);
@@ -132,16 +158,16 @@ router.put('/:id', authenticateToken, async (req, res) => {
   }
 });
 
-router.delete('/:id', authenticateToken, async (req, res) => {
+router.delete("/:id", authenticateToken, async (req, res) => {
   try {
     const item = await Item.findByPk(req.params.id);
 
     if (!item) {
-      return res.status(404).json({ error: 'Item not found' });
+      return res.status(404).json({ error: "Item not found" });
     }
 
     if (item.ownerId !== req.user.id) {
-      return res.status(403).json({ error: 'Unauthorized' });
+      return res.status(403).json({ error: "Unauthorized" });
     }
 
     await item.destroy();
@@ -151,4 +177,4 @@ router.delete('/:id', authenticateToken, async (req, res) => {
   }
 });
 
-module.exports = router;
+module.exports = router;

frontend/src/App.css

@@ -12,13 +12,6 @@ main {
   font-size: 1.5rem;
 }
 
-.card {
-  transition: transform 0.2s;
-}
-
-.card:hover {
-  transform: translateY(-5px);
-}
 
 .dropdown-toggle::after {
   display: none;

frontend/src/components/AvailabilitySettings.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+
+interface AvailabilityData {
+  generalAvailableAfter: string;
+  generalAvailableBefore: string;
+  specifyTimesPerDay: boolean;
+  weeklyTimes: {
+    sunday: { availableAfter: string; availableBefore: string };
+    monday: { availableAfter: string; availableBefore: string };
+    tuesday: { availableAfter: string; availableBefore: string };
+    wednesday: { availableAfter: string; availableBefore: string };
+    thursday: { availableAfter: string; availableBefore: string };
+    friday: { availableAfter: string; availableBefore: string };
+    saturday: { availableAfter: string; availableBefore: string };
+  };
+}
+
+interface AvailabilitySettingsProps {
+  data: AvailabilityData;
+  onChange: (field: string, value: string | boolean) => void;
+  onWeeklyTimeChange: (day: string, field: 'availableAfter' | 'availableBefore', value: string) => void;
+  showTitle?: boolean;
+}
+
+const AvailabilitySettings: React.FC<AvailabilitySettingsProps> = ({
+  data,
+  onChange,
+  onWeeklyTimeChange,
+  showTitle = true
+}) => {
+  const generateTimeOptions = () => {
+    const options = [];
+    for (let hour = 0; hour < 24; hour++) {
+      const time24 = `${hour.toString().padStart(2, '0')}:00`;
+      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      const period = hour < 12 ? 'AM' : 'PM';
+      const time12 = `${hour12}:00 ${period}`;
+      options.push({ value: time24, label: time12 });
+    }
+    return options;
+  };
+
+  const handleGeneralChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
+    const { name, value, type } = e.target;
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      onChange(name, checked);
+    } else {
+      onChange(name, value);
+    }
+  };
+
+  return (
+    <div>
+      {showTitle && <h5 className="card-title">Availability</h5>}
+
+      {/* General Times */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <label htmlFor="generalAvailableAfter" className="form-label">
+            Available After *
+          </label>
+          <select
+            className="form-select"
+            id="generalAvailableAfter"
+            name="generalAvailableAfter"
+            value={data.generalAvailableAfter}
+            onChange={handleGeneralChange}
+            disabled={data.specifyTimesPerDay}
+            required
+          >
+            {generateTimeOptions().map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-md-6">
+          <label htmlFor="generalAvailableBefore" className="form-label">
+            Available Before *
+          </label>
+          <select
+            className="form-select"
+            id="generalAvailableBefore"
+            name="generalAvailableBefore"
+            value={data.generalAvailableBefore}
+            onChange={handleGeneralChange}
+            disabled={data.specifyTimesPerDay}
+            required
+          >
+            {generateTimeOptions().map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Checkbox for day-specific times */}
+      <div className="form-check mb-3">
+        <input
+          type="checkbox"
+          className="form-check-input"
+          id="specifyTimesPerDay"
+          name="specifyTimesPerDay"
+          checked={data.specifyTimesPerDay}
+          onChange={handleGeneralChange}
+        />
+        <label className="form-check-label" htmlFor="specifyTimesPerDay">
+          Specify times for each day of the week
+        </label>
+      </div>
+
+      {/* Weekly Times */}
+      {data.specifyTimesPerDay && (
+        <div className="mt-4">
+          <h6>Weekly Schedule</h6>
+          {Object.entries(data.weeklyTimes).map(([day, times]) => (
+            <div key={day} className="row mb-2">
+              <div className="col-md-2">
+                <label className="form-label">
+                  {day.charAt(0).toUpperCase() + day.slice(1)}
+                </label>
+              </div>
+              <div className="col-md-5">
+                <select
+                  className="form-select form-select-sm"
+                  value={times.availableAfter}
+                  onChange={(e) =>
+                    onWeeklyTimeChange(day, 'availableAfter', e.target.value)
+                  }
+                >
+                  {generateTimeOptions().map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-5">
+                <select
+                  className="form-select form-select-sm"
+                  value={times.availableBefore}
+                  onChange={(e) =>
+                    onWeeklyTimeChange(day, 'availableBefore', e.target.value)
+                  }
+                >
+                  {generateTimeOptions().map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AvailabilitySettings;

frontend/src/components/Navbar.tsx

@@ -1,138 +1,211 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from "../contexts/AuthContext";
-import AuthModal from './AuthModal';
+import AuthModal from "./AuthModal";
 
 const Navbar: React.FC = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const [showAuthModal, setShowAuthModal] = useState(false);
-  const [authModalMode, setAuthModalMode] = useState<'login' | 'signup'>('login');
+  const [authModalMode, setAuthModalMode] = useState<"login" | "signup">(
+    "login"
+  );
+  const [searchFilters, setSearchFilters] = useState({
+    search: "",
+    location: "",
+  });
 
   const handleLogout = () => {
     logout();
-    navigate('/');
+    navigate("/");
   };
 
-  const openAuthModal = (mode: 'login' | 'signup') => {
+  const openAuthModal = (mode: "login" | "signup") => {
     setAuthModalMode(mode);
     setShowAuthModal(true);
   };
 
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const params = new URLSearchParams();
+
+    if (searchFilters.search.trim()) {
+      params.append("search", searchFilters.search.trim());
+    }
+    if (searchFilters.location.trim()) {
+      // Check if location looks like a zip code (5 digits) or city name
+      const location = searchFilters.location.trim();
+      if (/^\d{5}(-\d{4})?$/.test(location)) {
+        params.append("zipCode", location);
+      } else {
+        params.append("city", location);
+      }
+    }
+
+    const queryString = params.toString();
+    navigate(`/items${queryString ? `?${queryString}` : ""}`);
+
+    // Clear search after navigating
+    setSearchFilters({ search: "", location: "" });
+  };
+
+  const handleSearchInputChange = (
+    field: "search" | "location",
+    value: string
+  ) => {
+    setSearchFilters((prev) => ({ ...prev, [field]: value }));
+  };
+
   return (
     <>
-    <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
+      <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
-      <div className="container-fluid" style={{ maxWidth: '1800px' }}>
+        <div className="container-fluid" style={{ maxWidth: "1800px" }}>
-        <Link className="navbar-brand fw-bold" to="/">
+          <Link className="navbar-brand fw-bold" to="/">
-          <i className="bi bi-box-seam me-2"></i>
+            <i className="bi bi-box-seam me-2"></i>
-          CommunityRentals.App
+            CommunityRentals.App
-        </Link>
+          </Link>
-        <button
+          <button
-          className="navbar-toggler"
+            className="navbar-toggler"
-          type="button"
+            type="button"
-          data-bs-toggle="collapse"
+            data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
+            data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
+            aria-controls="navbarNav"
-          aria-expanded="false"
+            aria-expanded="false"
-          aria-label="Toggle navigation"
+            aria-label="Toggle navigation"
-        >
+          >
-          <span className="navbar-toggler-icon"></span>
+            <span className="navbar-toggler-icon"></span>
-        </button>
+          </button>
-        <div className="collapse navbar-collapse" id="navbarNav">
+          <div className="collapse navbar-collapse" id="navbarNav">
-          <div className="d-flex align-items-center w-100">
+            <div className="d-flex align-items-center w-100">
-            <div className="position-absolute start-50 translate-middle-x">
+              <div className="position-absolute start-50 translate-middle-x">
-              <div className="input-group" style={{ width: '400px' }}>
+                <form onSubmit={handleSearch}>
-                <input
+                  <div className="input-group" style={{ width: "520px" }}>
-                  type="text"
+                    <input
-                  className="form-control"
+                      type="text"
-                  placeholder="Search for items to rent..."
+                      className="form-control"
-                  aria-label="Search"
+                      placeholder="Search items..."
-                />
+                      value={searchFilters.search}
-                <button className="btn btn-outline-secondary" type="button">
+                      onChange={(e) =>
-                  <i className="bi bi-search"></i>
+                        handleSearchInputChange("search", e.target.value)
-                </button>
+                      }
-              </div>
+                    />
-            </div>
+                    <span
-            <div className="ms-auto d-flex align-items-center">
+                      className="input-group-text bg-white text-muted"
-              <Link className="btn btn-outline-primary btn-sm me-3 text-nowrap" to="/create-item">
+                      style={{
-                Start Earning
+                        borderLeft: "0",
-              </Link>
+                        borderRight: "1px solid #dee2e6",
-              <ul className="navbar-nav flex-row">
+                      }}
-                {user ? (
-                  <>
-                    <li className="nav-item dropdown">
-                      <a
-                        className="nav-link dropdown-toggle"
-                        href="#"
-                        id="navbarDropdown"
-                        role="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        <i className="bi bi-person-circle me-1"></i>
-                        {user.firstName}
-                      </a>
-                      <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
-                        <li>
-                          <Link className="dropdown-item" to="/profile">
-                            <i className="bi bi-person me-2"></i>Profile
-                          </Link>
-                        </li>
-                        <li>
-                          <Link className="dropdown-item" to="/my-rentals">
-                            <i className="bi bi-calendar-check me-2"></i>My Rentals
-                          </Link>
-                        </li>
-                        <li>
-                          <Link className="dropdown-item" to="/my-listings">
-                            <i className="bi bi-list-ul me-2"></i>My Listings
-                          </Link>
-                        </li>
-                        <li>
-                          <Link className="dropdown-item" to="/my-requests">
-                            <i className="bi bi-clipboard-check me-2"></i>My Requests
-                          </Link>
-                        </li>
-                        <li>
-                          <Link className="dropdown-item" to="/messages">
-                            <i className="bi bi-envelope me-2"></i>Messages
-                          </Link>
-                        </li>
-                        <li>
-                          <hr className="dropdown-divider" />
-                        </li>
-                        <li>
-                          <button className="dropdown-item" onClick={handleLogout}>
-                            <i className="bi bi-box-arrow-right me-2"></i>Logout
-                          </button>
-                        </li>
-                      </ul>
-                    </li>
-                  </>
-                ) : (
-                  <li className="nav-item">
-                    <button 
-                      className="btn btn-primary btn-sm text-nowrap" 
-                      onClick={() => openAuthModal('login')}
                     >
-                      Login or Sign Up
+                      in
+                    </span>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="City or ZIP"
+                      value={searchFilters.location}
+                      onChange={(e) =>
+                        handleSearchInputChange("location", e.target.value)
+                      }
+                      style={{ borderLeft: "0" }}
+                    />
+                    <button className="btn btn-outline-secondary" type="submit">
+                      <i className="bi bi-search"></i>
                     </button>
-                  </li>
+                  </div>
-                )}
+                </form>
-              </ul>
+              </div>
+              <div className="ms-auto d-flex align-items-center">
+                <Link
+                  className="btn btn-outline-primary btn-sm me-3 text-nowrap"
+                  to="/create-item"
+                >
+                  Start Earning
+                </Link>
+                <ul className="navbar-nav flex-row">
+                  {user ? (
+                    <>
+                      <li className="nav-item dropdown">
+                        <a
+                          className="nav-link dropdown-toggle"
+                          href="#"
+                          id="navbarDropdown"
+                          role="button"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i className="bi bi-person-circle me-1"></i>
+                          {user.firstName}
+                        </a>
+                        <ul
+                          className="dropdown-menu"
+                          aria-labelledby="navbarDropdown"
+                        >
+                          <li>
+                            <Link className="dropdown-item" to="/profile">
+                              <i className="bi bi-person me-2"></i>Profile
+                            </Link>
+                          </li>
+                          <li>
+                            <Link className="dropdown-item" to="/my-rentals">
+                              <i className="bi bi-calendar-check me-2"></i>
+                              Rentals
+                            </Link>
+                          </li>
+                          <li>
+                            <Link className="dropdown-item" to="/my-listings">
+                              <i className="bi bi-list-ul me-2"></i>Listings
+                            </Link>
+                          </li>
+                          <li>
+                            <Link className="dropdown-item" to="/my-requests">
+                              <i className="bi bi-clipboard-check me-2"></i>
+                              Requests
+                            </Link>
+                          </li>
+                          <li>
+                            <Link className="dropdown-item" to="/messages">
+                              <i className="bi bi-envelope me-2"></i>Messages
+                            </Link>
+                          </li>
+                          <li>
+                            <hr className="dropdown-divider" />
+                          </li>
+                          <li>
+                            <button
+                              className="dropdown-item"
+                              onClick={handleLogout}
+                            >
+                              <i className="bi bi-box-arrow-right me-2"></i>
+                              Logout
+                            </button>
+                          </li>
+                        </ul>
+                      </li>
+                    </>
+                  ) : (
+                    <li className="nav-item">
+                      <button
+                        className="btn btn-primary btn-sm text-nowrap"
+                        onClick={() => openAuthModal("login")}
+                      >
+                        Login or Sign Up
+                      </button>
+                    </li>
+                  )}
+                </ul>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </nav>
-    </nav>
+
-    
+      <AuthModal
-    <AuthModal 
+        show={showAuthModal}
-      show={showAuthModal} 
+        onHide={() => setShowAuthModal(false)}
-      onHide={() => setShowAuthModal(false)}
+        initialMode={authModalMode}
-      initialMode={authModalMode}
+      />
-    />
+    </>
-  </>
   );
 };
 
-export default Navbar;
+export default Navbar;

frontend/src/pages/CreateItem.tsx

@@ -2,15 +2,12 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import api from "../services/api";
-import AvailabilityCalendar from "../components/AvailabilityCalendar";
+import AvailabilitySettings from "../components/AvailabilitySettings";
 
 interface ItemFormData {
   name: string;
   description: string;
   pickUpAvailable: boolean;
-  localDeliveryAvailable: boolean;
-  localDeliveryRadius?: number;
-  shippingAvailable: boolean;
   inPlaceUseAvailable: boolean;
   pricePerHour?: number;
   pricePerDay?: number;
@@ -27,13 +24,18 @@ interface ItemFormData {
   rules?: string;
   minimumRentalDays: number;
   needsTraining: boolean;
-  unavailablePeriods?: Array<{
+  generalAvailableAfter: string;
-    id: string;
+  generalAvailableBefore: string;
-    startDate: Date;
+  specifyTimesPerDay: boolean;
-    endDate: Date;
+  weeklyTimes: {
-    startTime?: string;
+    sunday: { availableAfter: string; availableBefore: string };
-    endTime?: string;
+    monday: { availableAfter: string; availableBefore: string };
-  }>;
+    tuesday: { availableAfter: string; availableBefore: string };
+    wednesday: { availableAfter: string; availableBefore: string };
+    thursday: { availableAfter: string; availableBefore: string };
+    friday: { availableAfter: string; availableBefore: string };
+    saturday: { availableAfter: string; availableBefore: string };
+  };
 }
 
 const CreateItem: React.FC = () => {
@@ -45,9 +47,6 @@ const CreateItem: React.FC = () => {
     name: "",
     description: "",
     pickUpAvailable: false,
-    localDeliveryAvailable: false,
-    localDeliveryRadius: 25,
-    shippingAvailable: false,
     inPlaceUseAvailable: false,
     pricePerDay: undefined,
     replacementCost: 0,
@@ -57,10 +56,21 @@ const CreateItem: React.FC = () => {
     city: "",
     state: "",
     zipCode: "",
-    country: "",
+    country: "US",
     minimumRentalDays: 1,
     needsTraining: false,
-    unavailablePeriods: [],
+    generalAvailableAfter: "09:00",
+    generalAvailableBefore: "17:00",
+    specifyTimesPerDay: false,
+    weeklyTimes: {
+      sunday: { availableAfter: "09:00", availableBefore: "17:00" },
+      monday: { availableAfter: "09:00", availableBefore: "17:00" },
+      tuesday: { availableAfter: "09:00", availableBefore: "17:00" },
+      wednesday: { availableAfter: "09:00", availableBefore: "17:00" },
+      thursday: { availableAfter: "09:00", availableBefore: "17:00" },
+      friday: { availableAfter: "09:00", availableBefore: "17:00" },
+      saturday: { availableAfter: "09:00", availableBefore: "17:00" },
+    },
   });
   const [imageFiles, setImageFiles] = useState<File[]>([]);
   const [imagePreviews, setImagePreviews] = useState<string[]>([]);
@@ -126,6 +136,24 @@ const CreateItem: React.FC = () => {
     }
   };
 
+  const handleWeeklyTimeChange = (
+    day: string,
+    field: "availableAfter" | "availableBefore",
+    value: string
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      weeklyTimes: {
+        ...prev.weeklyTimes,
+        [day]: {
+          ...prev.weeklyTimes[day as keyof typeof prev.weeklyTimes],
+          [field]: value,
+        },
+      },
+    }));
+  };
+
+
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
 
@@ -170,7 +198,12 @@ const CreateItem: React.FC = () => {
             <div className="card mb-4">
               <div className="card-body">
                 <div className="mb-3">
-                  <label className="form-label">Upload Images (Max 5)</label>
+                  <label className="form-label mb-0">
+                    Upload Images (Max 5)
+                  </label>
+                  <div className="form-text mb-2">
+                    Have pictures of everything that's included
+                  </div>
                   <input
                     type="file"
                     className="form-control"
@@ -179,9 +212,6 @@ const CreateItem: React.FC = () => {
                     multiple
                     disabled={imageFiles.length >= 5}
                   />
-                  <div className="form-text">
-                    Upload up to 5 images of your item
-                  </div>
                 </div>
 
                 {imagePreviews.length > 0 && (
@@ -252,6 +282,13 @@ const CreateItem: React.FC = () => {
             {/* Location Card */}
             <div className="card mb-4">
               <div className="card-body">
+                <div className="mb-3">
+                  <small className="text-muted">
+                    <i className="bi bi-info-circle me-2"></i>
+                    Your address is private. This will only be used to show
+                    renters a general area.
+                  </small>
+                </div>
                 <div className="row mb-3">
                   <div className="col-md-6">
                     <label htmlFor="address1" className="form-label">
@@ -365,70 +402,12 @@ const CreateItem: React.FC = () => {
                     onChange={handleChange}
                   />
                   <label className="form-check-label" htmlFor="pickUpAvailable">
-                    Pick-Up
+                    Pick-Up/Drop-off
                     <div className="small text-muted">
-                      They pick-up the item from your location and they return
+                      You and the renter coordinate pick-up and drop-off
-                      the item to your location
                     </div>
                   </label>
                 </div>
-                <div className="form-check">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="localDeliveryAvailable"
-                    name="localDeliveryAvailable"
-                    checked={formData.localDeliveryAvailable}
-                    onChange={handleChange}
-                  />
-                  <label
-                    className="form-check-label d-flex align-items-center"
-                    htmlFor="localDeliveryAvailable"
-                  >
-                    <div>
-                      Local Delivery
-                      {formData.localDeliveryAvailable && (
-                        <span className="ms-2">
-                          (Delivery Radius:
-                          <input
-                            type="number"
-                            className="form-control form-control-sm d-inline-block mx-1"
-                            id="localDeliveryRadius"
-                            name="localDeliveryRadius"
-                            value={formData.localDeliveryRadius || ""}
-                            onChange={handleChange}
-                            onClick={(e) => e.stopPropagation()}
-                            placeholder="25"
-                            min="1"
-                            max="100"
-                            style={{ width: "60px" }}
-                          />
-                          miles)
-                        </span>
-                      )}
-                      <div className="small text-muted">
-                        You deliver and then pick-up the item when the rental
-                        period ends
-                      </div>
-                    </div>
-                  </label>
-                </div>
-                <div className="form-check">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="shippingAvailable"
-                    name="shippingAvailable"
-                    checked={formData.shippingAvailable}
-                    onChange={handleChange}
-                  />
-                  <label
-                    className="form-check-label"
-                    htmlFor="shippingAvailable"
-                  >
-                    Shipping
-                  </label>
-                </div>
                 <div className="form-check">
                   <input
                     type="checkbox"
@@ -451,6 +430,24 @@ const CreateItem: React.FC = () => {
               </div>
             </div>
 
+            {/* Availability Card */}
+            <div className="card mb-4">
+              <div className="card-body">
+                <AvailabilitySettings
+                  data={{
+                    generalAvailableAfter: formData.generalAvailableAfter,
+                    generalAvailableBefore: formData.generalAvailableBefore,
+                    specifyTimesPerDay: formData.specifyTimesPerDay,
+                    weeklyTimes: formData.weeklyTimes
+                  }}
+                  onChange={(field, value) => {
+                    setFormData(prev => ({ ...prev, [field]: value }));
+                  }}
+                  onWeeklyTimeChange={handleWeeklyTimeChange}
+                />
+              </div>
+            </div>
+
             {/* Pricing Card */}
             <div className="card mb-4">
               <div className="card-body">
@@ -518,9 +515,12 @@ const CreateItem: React.FC = () => {
                 </div>
 
                 <div className="mb-3">
-                  <label htmlFor="replacementCost" className="form-label">
+                  <label htmlFor="replacementCost" className="form-label mb-0">
                     Replacement Cost *
                   </label>
+                  <div className="form-text mb-2">
+                    The cost to replace the item if lost
+                  </div>
                   <div className="input-group">
                     <span className="input-group-text">$</span>
                     <input
@@ -535,32 +535,10 @@ const CreateItem: React.FC = () => {
                       required
                     />
                   </div>
-                  <div className="form-text">
-                    The cost to replace the item if damaged or lost
-                  </div>
                 </div>
               </div>
             </div>
 
-            {/* Availability Schedule Card */}
-            <div className="card mb-4">
-              <div className="card-body">
-                <p className="text-muted">
-                  Select dates when the item is NOT available for rent
-                </p>
-                <AvailabilityCalendar
-                  unavailablePeriods={formData.unavailablePeriods || []}
-                  onPeriodsChange={(periods) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      unavailablePeriods: periods,
-                    }))
-                  }
-                  mode="owner"
-                />
-              </div>
-            </div>
-
             {/* Rules & Guidelines Card */}
             <div className="card mb-4">
               <div className="card-body">
@@ -578,7 +556,7 @@ const CreateItem: React.FC = () => {
                   </label>
                 </div>
                 <label htmlFor="rules" className="form-label">
-                  Additional Rules or Guidelines
+                  Additional Rules
                 </label>
                 <textarea
                   className="form-control"
@@ -587,12 +565,12 @@ const CreateItem: React.FC = () => {
                   rows={3}
                   value={formData.rules || ""}
                   onChange={handleChange}
-                  placeholder="Any specific rules or guidelines for renting this item"
+                  placeholder="Any specific rules for renting this item"
                 />
               </div>
             </div>
 
-            <div className="d-grid gap-2">
+            <div className="d-grid gap-2 mb-5">
               <button
                 type="submit"
                 className="btn btn-primary"

frontend/src/pages/EditItem.tsx

@@ -164,7 +164,6 @@ const EditItem: React.FC = () => {
       await itemAPI.updateItem(id!, {
         ...formData,
         images: imageUrls,
-        isPortable: formData.pickUpAvailable || formData.shippingAvailable,
       });
 
       setSuccess(true);
@@ -257,7 +256,7 @@ const EditItem: React.FC = () => {
                     disabled={imagePreviews.length >= 5}
                   />
                   <div className="form-text">
-                    Upload up to 5 images of your item
+                    Have pictures of everything that's included
                   </div>
                 </div>
 
@@ -368,10 +367,9 @@ const EditItem: React.FC = () => {
                     onChange={handleChange}
                   />
                   <label className="form-check-label" htmlFor="pickUpAvailable">
-                    Pick-Up
+                    Pick-Up/Drop-off
                     <div className="small text-muted">
-                      They pick-up the item from your location and they return
+                      You and the renter coordinate pick-up and drop-off
-                      the item to your location
                     </div>
                   </label>
                 </div>
@@ -539,7 +537,7 @@ const EditItem: React.FC = () => {
                     />
                   </div>
                   <div className="form-text">
-                    The cost to replace the item if damaged or lost
+                    The cost to replace the item if lost
                   </div>
                 </div>
               </div>
@@ -608,7 +606,7 @@ const EditItem: React.FC = () => {
                   </label>
                 </div>
                 <label htmlFor="rules" className="form-label">
-                  Additional Rules or Guidelines
+                  Additional Rules
                 </label>
                 <textarea
                   className="form-control"
@@ -617,7 +615,7 @@ const EditItem: React.FC = () => {
                   rows={3}
                   value={formData.rules || ""}
                   onChange={handleChange}
-                  placeholder="Any specific rules or guidelines for renting this item"
+                  placeholder="Any specific rules for renting this item"
                 />
               </div>
             </div>

frontend/src/pages/ItemList.tsx

@@ -1,21 +1,46 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { Item } from '../types';
 import { itemAPI } from '../services/api';
 
 const ItemList: React.FC = () => {
+  const [searchParams] = useSearchParams();
   const [items, setItems] = useState<Item[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [filters, setFilters] = useState({
+    search: searchParams.get('search') || '',
+    city: searchParams.get('city') || '',
+    zipCode: searchParams.get('zipCode') || ''
+  });
 
   useEffect(() => {
     fetchItems();
-  }, []);
+  }, [filters]);
+
+  // Update filters when URL params change (e.g., from navbar search)
+  useEffect(() => {
+    setFilters({
+      search: searchParams.get('search') || '',
+      city: searchParams.get('city') || '',
+      zipCode: searchParams.get('zipCode') || ''
+    });
+  }, [searchParams]);
 
   const fetchItems = async () => {
     try {
-      const response = await itemAPI.getItems();
+      setLoading(true);
+      const params = {
+        ...filters
+      };
+      // Remove empty filters
+      Object.keys(params).forEach(key => {
+        if (!params[key as keyof typeof params]) {
+          delete params[key as keyof typeof params];
+        }
+      });
+      
+      const response = await itemAPI.getItems(params);
       console.log('API Response:', response);
       // Access the items array from response.data.items
       const allItems = response.data.items || response.data || [];
@@ -32,14 +57,6 @@ const ItemList: React.FC = () => {
   };
 
 
-  // Filter items based on search term
-  const filteredItems = items.filter(item => {
-    const matchesSearch = searchTerm === '' || 
-      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      item.description.toLowerCase().includes(searchTerm.toLowerCase());
-    
-    return matchesSearch;
-  });
 
   if (loading) {
     return (
@@ -67,26 +84,15 @@ const ItemList: React.FC = () => {
     <div className="container mt-4">
       <h1>Browse Items</h1>
       
-      <div className="row mb-4">
+      <div className="mb-4">
-        <div className="col-md-6">
+        <span className="text-muted">{items.length} items found</span>
-          <input
-            type="text"
-            className="form-control"
-            placeholder="Search items..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
-        <div className="col-md-2">
-          <span className="text-muted">{filteredItems.length} items found</span>
-        </div>
       </div>
 
-      {filteredItems.length === 0 ? (
+      {items.length === 0 ? (
         <p className="text-center text-muted">No items available for rent.</p>
       ) : (
         <div className="row">
-          {filteredItems.map((item) => (
+          {items.map((item) => (
             <div key={item.id} className="col-md-6 col-lg-4 mb-4">
               <Link 
                 to={`/items/${item.id}`} 

frontend/src/pages/MyListings.tsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from "../contexts/AuthContext";
-import api from '../services/api';
+import api from "../services/api";
-import { Item, Rental } from '../types';
+import { Item, Rental } from "../types";
-import { rentalAPI } from '../services/api';
+import { rentalAPI } from "../services/api";
 
 const MyListings: React.FC = () => {
   const { user } = useAuth();
   const [listings, setListings] = useState<Item[]>([]);
   const [rentals, setRentals] = useState<Rental[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   useEffect(() => {
     fetchMyListings();
@@ -22,17 +22,19 @@ const MyListings: React.FC = () => {
 
     try {
       setLoading(true);
-      setError(''); // Clear any previous errors
+      setError(""); // Clear any previous errors
-      const response = await api.get('/items');
+      const response = await api.get("/items");
-      
+
       // Filter items to only show ones owned by current user
-      const myItems = response.data.items.filter((item: Item) => item.ownerId === user.id);
+      const myItems = response.data.items.filter(
+        (item: Item) => item.ownerId === user.id
+      );
       setListings(myItems);
     } catch (err: any) {
-      console.error('Error fetching listings:', err);
+      console.error("Error fetching listings:", err);
       // Only show error for actual API failures
       if (err.response && err.response.status >= 500) {
-        setError('Failed to get your listings. Please try again later.');
+        setError("Failed to get your listings. Please try again later.");
       }
     } finally {
       setLoading(false);
@@ -40,13 +42,14 @@ const MyListings: React.FC = () => {
   };
 
   const handleDelete = async (itemId: string) => {
-    if (!window.confirm('Are you sure you want to delete this listing?')) return;
+    if (!window.confirm("Are you sure you want to delete this listing?"))
+      return;
 
     try {
       await api.delete(`/items/${itemId}`);
-      setListings(listings.filter(item => item.id !== itemId));
+      setListings(listings.filter((item) => item.id !== itemId));
     } catch (err: any) {
-      alert('Failed to delete listing');
+      alert("Failed to delete listing");
     }
   };
 
@@ -54,13 +57,15 @@ const MyListings: React.FC = () => {
     try {
       await api.put(`/items/${item.id}`, {
         ...item,
-        availability: !item.availability
+        availability: !item.availability,
       });
-      setListings(listings.map(i => 
+      setListings(
-        i.id === item.id ? { ...i, availability: !i.availability } : i
+        listings.map((i) =>
-      ));
+          i.id === item.id ? { ...i, availability: !i.availability } : i
+        )
+      );
     } catch (err: any) {
-      alert('Failed to update availability');
+      alert("Failed to update availability");
     }
   };
 
@@ -71,30 +76,30 @@ const MyListings: React.FC = () => {
       const response = await rentalAPI.getMyListings();
       setRentals(response.data);
     } catch (err) {
-      console.error('Error fetching rental requests:', err);
+      console.error("Error fetching rental requests:", err);
     }
   };
 
   const handleAcceptRental = async (rentalId: string) => {
     try {
-      await rentalAPI.updateRentalStatus(rentalId, 'confirmed');
+      await rentalAPI.updateRentalStatus(rentalId, "confirmed");
       // Refresh the rentals list
       fetchRentalRequests();
     } catch (err) {
-      console.error('Failed to accept rental request:', err);
+      console.error("Failed to accept rental request:", err);
     }
   };
 
   const handleRejectRental = async (rentalId: string) => {
     try {
-      await api.put(`/rentals/${rentalId}/status`, { 
+      await api.put(`/rentals/${rentalId}/status`, {
-        status: 'cancelled',
+        status: "cancelled",
-        rejectionReason: 'Request declined by owner'
+        rejectionReason: "Request declined by owner",
       });
       // Refresh the rentals list
       fetchRentalRequests();
     } catch (err) {
-      console.error('Failed to reject rental request:', err);
+      console.error("Failed to reject rental request:", err);
     }
   };
 
@@ -126,13 +131,19 @@ const MyListings: React.FC = () => {
       )}
 
       {(() => {
-        const pendingCount = rentals.filter(r => r.status === 'pending').length;
+        const pendingCount = rentals.filter(
-        
+          (r) => r.status === "pending"
+        ).length;
+
         if (pendingCount > 0) {
           return (
-            <div className="alert alert-info d-flex align-items-center" role="alert">
+            <div
+              className="alert alert-info d-flex align-items-center"
+              role="alert"
+            >
               <i className="bi bi-bell-fill me-2"></i>
-              You have {pendingCount} pending rental request{pendingCount > 1 ? 's' : ''} to review.
+              You have {pendingCount} pending rental request
+              {pendingCount > 1 ? "s" : ""} to review.
             </div>
           );
         }
@@ -150,137 +161,197 @@ const MyListings: React.FC = () => {
         <div className="row">
           {listings.map((item) => (
             <div key={item.id} className="col-md-6 col-lg-4 mb-4">
-              <Link 
+              <Link
-                to={`/items/${item.id}/edit`} 
+                to={`/items/${item.id}/edit`}
                 className="text-decoration-none"
                 onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                   const target = e.target as HTMLElement;
-                  if (target.closest('button') || target.closest('.rental-requests')) {
+                  if (
+                    target.closest("button") ||
+                    target.closest(".rental-requests")
+                  ) {
                     e.preventDefault();
                   }
                 }}
               >
-                <div className="card h-100" style={{ cursor: 'pointer' }}>
+                <div className="card h-100" style={{ cursor: "pointer" }}>
                   {item.images && item.images[0] && (
                     <img
                       src={item.images[0]}
                       className="card-img-top"
                       alt={item.name}
-                      style={{ height: '200px', objectFit: 'cover' }}
+                      style={{ height: "200px", objectFit: "cover" }}
                     />
                   )}
                   <div className="card-body">
-                    <h5 className="card-title text-dark">
+                    <h5 className="card-title text-dark">{item.name}</h5>
-                      {item.name}
+                    <p className="card-text text-truncate text-dark">
-                    </h5>
+                      {item.description}
-                    <p className="card-text text-truncate text-dark">{item.description}</p>
+                    </p>
-                  
-                  <div className="mb-2">
-                    <span className={`badge ${item.availability ? 'bg-success' : 'bg-secondary'}`}>
-                      {item.availability ? 'Available' : 'Not Available'}
-                    </span>
-                  </div>
 
-                  <div className="mb-3">
+                    <div className="mb-2">
-                    {item.pricePerDay && (
+                      <span
-                      <div className="text-muted small">
+                        className={`badge ${
-                        ${item.pricePerDay}/day
+                          item.availability ? "bg-success" : "bg-secondary"
-                      </div>
+                        }`}
-                    )}
+                      >
-                    {item.pricePerHour && (
+                        {item.availability ? "Available" : "Not Available"}
-                      <div className="text-muted small">
+                      </span>
-                        ${item.pricePerHour}/hour
+                    </div>
-                      </div>
-                    )}
-                  </div>
 
-                  <div className="d-flex gap-2">
+                    <div className="mb-3">
-                    <button
+                      {item.pricePerDay && (
-                      onClick={() => toggleAvailability(item)}
+                        <div className="text-muted small">
-                      className="btn btn-sm btn-outline-info"
+                          ${item.pricePerDay}/day
-                    >
-                      {item.availability ? 'Mark Unavailable' : 'Mark Available'}
-                    </button>
-                    <button
-                      onClick={() => handleDelete(item.id)}
-                      className="btn btn-sm btn-outline-danger"
-                    >
-                      Delete
-                    </button>
-                  </div>
-
-                  {(() => {
-                    const pendingRentals = rentals.filter(r => 
-                      r.itemId === item.id && r.status === 'pending'
-                    );
-                    const acceptedRentals = rentals.filter(r => 
-                      r.itemId === item.id && ['confirmed', 'active'].includes(r.status)
-                    );
-                    
-                    if (pendingRentals.length > 0 || acceptedRentals.length > 0) {
-                      return (
-                        <div className="mt-3 border-top pt-3 rental-requests">
-                          {pendingRentals.length > 0 && (
-                            <>
-                              <h6 className="text-primary mb-2">
-                                <i className="bi bi-bell-fill"></i> Pending Requests ({pendingRentals.length})
-                              </h6>
-                              {pendingRentals.map(rental => (
-                                <div key={rental.id} className="border rounded p-2 mb-2 bg-light">
-                                  <div className="d-flex justify-content-between align-items-start">
-                                    <div className="small">
-                                      <strong>{rental.renter?.firstName} {rental.renter?.lastName}</strong><br/>
-                                      {new Date(rental.startDate).toLocaleDateString()} - {new Date(rental.endDate).toLocaleDateString()}<br/>
-                                      <span className="text-muted">${rental.totalAmount}</span>
-                                    </div>
-                                    <div className="d-flex gap-1">
-                                      <button
-                                        className="btn btn-success btn-sm"
-                                        onClick={() => handleAcceptRental(rental.id)}
-                                      >
-                                        Accept
-                                      </button>
-                                      <button
-                                        className="btn btn-danger btn-sm"
-                                        onClick={() => handleRejectRental(rental.id)}
-                                      >
-                                        Reject
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              ))}
-                            </>
-                          )}
-                          
-                          {acceptedRentals.length > 0 && (
-                            <>
-                              <h6 className="text-success mb-2 mt-3">
-                                <i className="bi bi-check-circle-fill"></i> Accepted Rentals ({acceptedRentals.length})
-                              </h6>
-                              {acceptedRentals.map(rental => (
-                                <div key={rental.id} className="border rounded p-2 mb-2 bg-light">
-                                  <div className="small">
-                                    <div className="d-flex justify-content-between align-items-start">
-                                      <div>
-                                        <strong>{rental.renter?.firstName} {rental.renter?.lastName}</strong><br/>
-                                        {new Date(rental.startDate).toLocaleDateString()} - {new Date(rental.endDate).toLocaleDateString()}<br/>
-                                        <span className="text-muted">${rental.totalAmount}</span>
-                                      </div>
-                                      <span className={`badge ${rental.status === 'active' ? 'bg-success' : 'bg-info'}`}>
-                                        {rental.status === 'active' ? 'Active' : 'Confirmed'}
-                                      </span>
-                                    </div>
-                                  </div>
-                                </div>
-                              ))}
-                            </>
-                          )}
                         </div>
+                      )}
+                      {item.pricePerHour && (
+                        <div className="text-muted small">
+                          ${item.pricePerHour}/hour
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="d-flex gap-2">
+                      <button
+                        onClick={() => toggleAvailability(item)}
+                        className="btn btn-sm btn-outline-info"
+                      >
+                        {item.availability
+                          ? "Mark Unavailable"
+                          : "Mark Available"}
+                      </button>
+                      <button
+                        onClick={() => handleDelete(item.id)}
+                        className="btn btn-sm btn-outline-danger"
+                      >
+                        Delete
+                      </button>
+                    </div>
+
+                    {(() => {
+                      const pendingRentals = rentals.filter(
+                        (r) => r.itemId === item.id && r.status === "pending"
                       );
-                    }
+                      const acceptedRentals = rentals.filter(
-                    return null;
+                        (r) =>
-                  })()}
+                          r.itemId === item.id &&
+                          ["confirmed", "active"].includes(r.status)
+                      );
+
+                      if (
+                        pendingRentals.length > 0 ||
+                        acceptedRentals.length > 0
+                      ) {
+                        return (
+                          <div className="mt-3 border-top pt-3 rental-requests">
+                            {pendingRentals.length > 0 && (
+                              <>
+                                <h6 className="text-primary mb-2">
+                                  <i className="bi bi-bell-fill"></i> Pending
+                                  Requests ({pendingRentals.length})
+                                </h6>
+                                {pendingRentals.map((rental) => (
+                                  <div
+                                    key={rental.id}
+                                    className="border rounded p-2 mb-2 bg-light"
+                                  >
+                                    <div className="d-flex justify-content-between align-items-start">
+                                      <div className="small">
+                                        <strong>
+                                          {rental.renter?.firstName}{" "}
+                                          {rental.renter?.lastName}
+                                        </strong>
+                                        <br />
+                                        {new Date(
+                                          rental.startDate
+                                        ).toLocaleDateString()}{" "}
+                                        -{" "}
+                                        {new Date(
+                                          rental.endDate
+                                        ).toLocaleDateString()}
+                                        <br />
+                                        <span className="text-muted">
+                                          ${rental.totalAmount}
+                                        </span>
+                                      </div>
+                                      <div className="d-flex gap-1">
+                                        <button
+                                          className="btn btn-success btn-sm"
+                                          onClick={() =>
+                                            handleAcceptRental(rental.id)
+                                          }
+                                        >
+                                          Accept
+                                        </button>
+                                        <button
+                                          className="btn btn-danger btn-sm"
+                                          onClick={() =>
+                                            handleRejectRental(rental.id)
+                                          }
+                                        >
+                                          Reject
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                ))}
+                              </>
+                            )}
+
+                            {acceptedRentals.length > 0 && (
+                              <>
+                                <h6 className="text-success mb-2 mt-3">
+                                  <i className="bi bi-check-circle-fill"></i>{" "}
+                                  Accepted Rentals ({acceptedRentals.length})
+                                </h6>
+                                {acceptedRentals.map((rental) => (
+                                  <div
+                                    key={rental.id}
+                                    className="border rounded p-2 mb-2 bg-light"
+                                  >
+                                    <div className="small">
+                                      <div className="d-flex justify-content-between align-items-start">
+                                        <div>
+                                          <strong>
+                                            {rental.renter?.firstName}{" "}
+                                            {rental.renter?.lastName}
+                                          </strong>
+                                          <br />
+                                          {new Date(
+                                            rental.startDate
+                                          ).toLocaleDateString()}{" "}
+                                          -{" "}
+                                          {new Date(
+                                            rental.endDate
+                                          ).toLocaleDateString()}
+                                          <br />
+                                          <span className="text-muted">
+                                            ${rental.totalAmount}
+                                          </span>
+                                        </div>
+                                        <span
+                                          className={`badge ${
+                                            rental.status === "active"
+                                              ? "bg-success"
+                                              : "bg-info"
+                                          }`}
+                                        >
+                                          {rental.status === "active"
+                                            ? "Active"
+                                            : "Confirmed"}
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                ))}
+                              </>
+                            )}
+                          </div>
+                        );
+                      }
+                      return null;
+                    })()}
                   </div>
                 </div>
               </Link>
@@ -292,4 +363,4 @@ const MyListings: React.FC = () => {
   );
 };
 
-export default MyListings;
+export default MyListings;

frontend/src/pages/MyRentals.tsx

@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from "../contexts/AuthContext";
-import { rentalAPI } from '../services/api';
+import { rentalAPI } from "../services/api";
-import { Rental } from '../types';
+import { Rental } from "../types";
-import ReviewModal from '../components/ReviewModal';
+import ReviewModal from "../components/ReviewModal";
-import ConfirmationModal from '../components/ConfirmationModal';
+import ConfirmationModal from "../components/ConfirmationModal";
 
 const MyRentals: React.FC = () => {
   const { user } = useAuth();
   const [rentals, setRentals] = useState<Rental[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<'active' | 'past'>('active');
+  const [activeTab, setActiveTab] = useState<"active" | "past">("active");
   const [showReviewModal, setShowReviewModal] = useState(false);
   const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
   const [showCancelModal, setShowCancelModal] = useState(false);
@@ -27,7 +27,7 @@ const MyRentals: React.FC = () => {
       const response = await rentalAPI.getMyRentals();
       setRentals(response.data);
     } catch (err: any) {
-      setError(err.response?.data?.message || 'Failed to fetch rentals');
+      setError(err.response?.data?.message || "Failed to fetch rentals");
     } finally {
       setLoading(false);
     }
@@ -40,15 +40,15 @@ const MyRentals: React.FC = () => {
 
   const confirmCancelRental = async () => {
     if (!rentalToCancel) return;
-    
+
     setCancelling(true);
     try {
-      await rentalAPI.updateRentalStatus(rentalToCancel, 'cancelled');
+      await rentalAPI.updateRentalStatus(rentalToCancel, "cancelled");
       fetchRentals(); // Refresh the list
       setShowCancelModal(false);
       setRentalToCancel(null);
     } catch (err: any) {
-      alert('Failed to cancel rental');
+      alert("Failed to cancel rental");
     } finally {
       setCancelling(false);
     }
@@ -61,18 +61,18 @@ const MyRentals: React.FC = () => {
 
   const handleReviewSuccess = () => {
     fetchRentals(); // Refresh to show the review has been added
-    alert('Thank you for your review!');
+    alert("Thank you for your review!");
   };
 
   // Filter rentals based on status
-  const activeRentals = rentals.filter(r => 
+  const activeRentals = rentals.filter((r) =>
-    ['pending', 'confirmed', 'active'].includes(r.status)
+    ["pending", "confirmed", "active"].includes(r.status)
   );
-  const pastRentals = rentals.filter(r => 
+  const pastRentals = rentals.filter((r) =>
-    ['completed', 'cancelled'].includes(r.status)
+    ["completed", "cancelled"].includes(r.status)
   );
 
-  const displayedRentals = activeTab === 'active' ? activeRentals : pastRentals;
+  const displayedRentals = activeTab === "active" ? activeRentals : pastRentals;
 
   if (loading) {
     return (
@@ -99,20 +99,20 @@ const MyRentals: React.FC = () => {
   return (
     <div className="container mt-4">
       <h1>My Rentals</h1>
-      
+
       <ul className="nav nav-tabs mb-4">
         <li className="nav-item">
           <button
-            className={`nav-link ${activeTab === 'active' ? 'active' : ''}`}
+            className={`nav-link ${activeTab === "active" ? "active" : ""}`}
-            onClick={() => setActiveTab('active')}
+            onClick={() => setActiveTab("active")}
           >
             Active Rentals ({activeRentals.length})
           </button>
         </li>
         <li className="nav-item">
           <button
-            className={`nav-link ${activeTab === 'past' ? 'active' : ''}`}
+            className={`nav-link ${activeTab === "past" ? "active" : ""}`}
-            onClick={() => setActiveTab('past')}
+            onClick={() => setActiveTab("past")}
           >
             Past Rentals ({pastRentals.length})
           </button>
@@ -122,8 +122,8 @@ const MyRentals: React.FC = () => {
       {displayedRentals.length === 0 ? (
         <div className="text-center py-5">
           <p className="text-muted">
-            {activeTab === 'active' 
+            {activeTab === "active"
-              ? "You don't have any active rentals." 
+              ? "You don't have any active rentals."
               : "You don't have any past rentals."}
           </p>
           <Link to="/items" className="btn btn-primary mt-3">
@@ -134,98 +134,116 @@ const MyRentals: React.FC = () => {
         <div className="row">
           {displayedRentals.map((rental) => (
             <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
-              <Link 
+              <Link
-                to={rental.item ? `/items/${rental.item.id}` : '#'} 
+                to={rental.item ? `/items/${rental.item.id}` : "#"}
                 className="text-decoration-none"
                 onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                   const target = e.target as HTMLElement;
-                  if (!rental.item || target.closest('button')) {
+                  if (!rental.item || target.closest("button")) {
                     e.preventDefault();
                   }
                 }}
               >
-                <div className="card h-100" style={{ cursor: rental.item ? 'pointer' : 'default' }}>
+                <div
+                  className="card h-100"
+                  style={{ cursor: rental.item ? "pointer" : "default" }}
+                >
                   {rental.item?.images && rental.item.images[0] && (
                     <img
                       src={rental.item.images[0]}
                       className="card-img-top"
                       alt={rental.item.name}
-                      style={{ height: '200px', objectFit: 'cover' }}
+                      style={{ height: "200px", objectFit: "cover" }}
                     />
                   )}
                   <div className="card-body">
                     <h5 className="card-title text-dark">
-                      {rental.item ? rental.item.name : 'Item Unavailable'}
+                      {rental.item ? rental.item.name : "Item Unavailable"}
                     </h5>
-                  
-                  <div className="mb-2">
-                    <span className={`badge ${
-                      rental.status === 'active' ? 'bg-success' :
-                      rental.status === 'pending' ? 'bg-warning' :
-                      rental.status === 'confirmed' ? 'bg-info' :
-                      rental.status === 'completed' ? 'bg-secondary' :
-                      'bg-danger'
-                    }`}>
-                      {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
-                    </span>
-                    {rental.paymentStatus === 'paid' && (
-                      <span className="badge bg-success ms-2">Paid</span>
-                    )}
-                  </div>
 
-                  <p className="mb-1 text-dark">
+                    <div className="mb-2">
-                    <strong>Rental Period:</strong><br />
+                      <span
-                    {new Date(rental.startDate).toLocaleDateString()} - {new Date(rental.endDate).toLocaleDateString()}
+                        className={`badge ${
-                  </p>
+                          rental.status === "active"
-
+                            ? "bg-success"
-                  <p className="mb-1 text-dark">
+                            : rental.status === "pending"
-                    <strong>Total:</strong> ${rental.totalAmount}
+                            ? "bg-warning"
-                  </p>
+                            : rental.status === "confirmed"
-
+                            ? "bg-info"
-                  <p className="mb-1 text-dark">
+                            : rental.status === "completed"
-                    <strong>Delivery:</strong> {rental.deliveryMethod === 'pickup' ? 'Pick-up' : 'Delivery'}
+                            ? "bg-secondary"
-                  </p>
+                            : "bg-danger"
-
+                        }`}
-                  {rental.owner && (
+                      >
-                    <p className="mb-1 text-dark">
+                        {rental.status.charAt(0).toUpperCase() +
-                      <strong>Owner:</strong> {rental.owner.firstName} {rental.owner.lastName}
+                          rental.status.slice(1)}
-                    </p>
+                      </span>
-                  )}
+                      {rental.paymentStatus === "paid" && (
-
+                        <span className="badge bg-success ms-2">Paid</span>
-                  {rental.status === 'cancelled' && rental.rejectionReason && (
+                      )}
-                    <div className="alert alert-warning mt-2 mb-1 p-2 small">
-                      <strong>Rejection reason:</strong> {rental.rejectionReason}
                     </div>
-                  )}
 
-                  <div className="d-flex gap-2 mt-3">
+                    <p className="mb-1 text-dark">
-                    {rental.status === 'pending' && (
+                      <strong>Rental Period:</strong>
-                      <button
+                      <br />
-                        className="btn btn-sm btn-danger"
+                      {new Date(rental.startDate).toLocaleDateString()} -{" "}
-                        onClick={() => handleCancelClick(rental.id)}
+                      {new Date(rental.endDate).toLocaleDateString()}
-                      >
+                    </p>
-                        Cancel
+
-                      </button>
+                    <p className="mb-1 text-dark">
-                    )}
+                      <strong>Total:</strong> ${rental.totalAmount}
-                    {rental.status === 'completed' && !rental.rating && (
+                    </p>
-                      <button 
+
-                        className="btn btn-sm btn-primary"
+                    <p className="mb-1 text-dark">
-                        onClick={() => handleReviewClick(rental)}
+                      <strong>Delivery:</strong>{" "}
-                      >
+                      {rental.deliveryMethod === "pickup"
-                        Leave Review
+                        ? "Pick-up"
-                      </button>
+                        : "Delivery"}
-                    )}
+                    </p>
-                    {rental.status === 'completed' && rental.rating && (
+
-                      <div className="text-success small">
+                    {rental.owner && (
-                        <i className="bi bi-check-circle-fill me-1"></i>
+                      <p className="mb-1 text-dark">
-                        Reviewed ({rental.rating}/5)
+                        <strong>Owner:</strong> {rental.owner.firstName}{" "}
-                      </div>
+                        {rental.owner.lastName}
+                      </p>
                     )}
+
+                    {rental.status === "cancelled" &&
+                      rental.rejectionReason && (
+                        <div className="alert alert-warning mt-2 mb-1 p-2 small">
+                          <strong>Rejection reason:</strong>{" "}
+                          {rental.rejectionReason}
+                        </div>
+                      )}
+
+                    <div className="d-flex gap-2 mt-3">
+                      {rental.status === "pending" && (
+                        <button
+                          className="btn btn-sm btn-danger"
+                          onClick={() => handleCancelClick(rental.id)}
+                        >
+                          Cancel
+                        </button>
+                      )}
+                      {rental.status === "completed" && !rental.rating && (
+                        <button
+                          className="btn btn-sm btn-primary"
+                          onClick={() => handleReviewClick(rental)}
+                        >
+                          Leave Review
+                        </button>
+                      )}
+                      {rental.status === "completed" && rental.rating && (
+                        <div className="text-success small">
+                          <i className="bi bi-check-circle-fill me-1"></i>
+                          Reviewed ({rental.rating}/5)
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
+              </Link>
-            </Link>
+            </div>
-          </div>
           ))}
         </div>
       )}
@@ -260,4 +278,4 @@ const MyRentals: React.FC = () => {
   );
 };
 
-export default MyRentals;
+export default MyRentals;

frontend/src/pages/Profile.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from "../contexts/AuthContext";
-import { userAPI, itemAPI, rentalAPI } from '../services/api';
+import { userAPI, itemAPI, rentalAPI } from "../services/api";
-import { User, Item, Rental } from '../types';
+import { User, Item, Rental } from "../types";
-import { getImageUrl } from '../utils/imageUrl';
+import { getImageUrl } from "../utils/imageUrl";
+import AvailabilitySettings from "../components/AvailabilitySettings";
 
 const Profile: React.FC = () => {
   const { user, updateUser, logout } = useAuth();
@@ -10,26 +11,41 @@ const Profile: React.FC = () => {
   const [editing, setEditing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
+  const [activeSection, setActiveSection] = useState<string>('overview');
   const [profileData, setProfileData] = useState<User | null>(null);
   const [formData, setFormData] = useState({
-    firstName: '',
+    firstName: "",
-    lastName: '',
+    lastName: "",
-    email: '',
+    email: "",
-    phone: '',
+    phone: "",
-    address1: '',
+    address1: "",
-    address2: '',
+    address2: "",
-    city: '',
+    city: "",
-    state: '',
+    state: "",
-    zipCode: '',
+    zipCode: "",
-    country: '',
+    country: "",
-    profileImage: ''
+    profileImage: "",
   });
   const [imageFile, setImageFile] = useState<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const [stats, setStats] = useState({
     itemsListed: 0,
     acceptedRentals: 0,
-    totalRentals: 0
+    totalRentals: 0,
+  });
+  const [availabilityData, setAvailabilityData] = useState({
+    generalAvailableAfter: "09:00",
+    generalAvailableBefore: "17:00",
+    specifyTimesPerDay: false,
+    weeklyTimes: {
+      sunday: { availableAfter: "09:00", availableBefore: "17:00" },
+      monday: { availableAfter: "09:00", availableBefore: "17:00" },
+      tuesday: { availableAfter: "09:00", availableBefore: "17:00" },
+      wednesday: { availableAfter: "09:00", availableBefore: "17:00" },
+      thursday: { availableAfter: "09:00", availableBefore: "17:00" },
+      friday: { availableAfter: "09:00", availableBefore: "17:00" },
+      saturday: { availableAfter: "09:00", availableBefore: "17:00" },
+    },
   });
 
   useEffect(() => {
@@ -42,23 +58,23 @@ const Profile: React.FC = () => {
       const response = await userAPI.getProfile();
       setProfileData(response.data);
       setFormData({
-        firstName: response.data.firstName || '',
+        firstName: response.data.firstName || "",
-        lastName: response.data.lastName || '',
+        lastName: response.data.lastName || "",
-        email: response.data.email || '',
+        email: response.data.email || "",
-        phone: response.data.phone || '',
+        phone: response.data.phone || "",
-        address1: response.data.address1 || '',
+        address1: response.data.address1 || "",
-        address2: response.data.address2 || '',
+        address2: response.data.address2 || "",
-        city: response.data.city || '',
+        city: response.data.city || "",
-        state: response.data.state || '',
+        state: response.data.state || "",
-        zipCode: response.data.zipCode || '',
+        zipCode: response.data.zipCode || "",
-        country: response.data.country || '',
+        country: response.data.country || "",
-        profileImage: response.data.profileImage || ''
+        profileImage: response.data.profileImage || "",
       });
       if (response.data.profileImage) {
         setImagePreview(getImageUrl(response.data.profileImage));
       }
     } catch (err: any) {
-      setError(err.response?.data?.message || 'Failed to fetch profile');
+      setError(err.response?.data?.message || "Failed to fetch profile");
     } finally {
       setLoading(false);
     }
@@ -69,64 +85,71 @@ const Profile: React.FC = () => {
       // Fetch user's items
       const itemsResponse = await itemAPI.getItems();
       const allItems = itemsResponse.data.items || itemsResponse.data || [];
-      const myItems = allItems.filter((item: Item) => item.ownerId === user?.id);
+      const myItems = allItems.filter(
-      
+        (item: Item) => item.ownerId === user?.id
+      );
+
       // Fetch rentals where user is the owner (rentals on user's items)
       const ownerRentalsResponse = await rentalAPI.getMyListings();
       const ownerRentals: Rental[] = ownerRentalsResponse.data;
-      
+
-      const acceptedRentals = ownerRentals.filter(r => ['confirmed', 'active'].includes(r.status));
+      const acceptedRentals = ownerRentals.filter((r) =>
-      
+        ["confirmed", "active"].includes(r.status)
+      );
+
       setStats({
         itemsListed: myItems.length,
         acceptedRentals: acceptedRentals.length,
-        totalRentals: ownerRentals.length
+        totalRentals: ownerRentals.length,
       });
     } catch (err) {
-      console.error('Failed to fetch stats:', err);
+      console.error("Failed to fetch stats:", err);
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
   const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       setImageFile(file);
-      
+
       // Show preview
       const reader = new FileReader();
       reader.onloadend = () => {
         setImagePreview(reader.result as string);
       };
       reader.readAsDataURL(file);
-      
+
       // Upload image immediately
       try {
         const formData = new FormData();
-        formData.append('profileImage', file);
+        formData.append("profileImage", file);
-        
+
         const response = await userAPI.uploadProfileImage(formData);
-        
+
         // Update the profileImage in formData with the new filename
-        setFormData(prev => ({ 
+        setFormData((prev) => ({
-          ...prev, 
+          ...prev,
-          profileImage: response.data.filename 
+          profileImage: response.data.filename,
         }));
-        
+
         // Update preview to use the uploaded image URL
         setImagePreview(getImageUrl(response.data.imageUrl));
       } catch (err: any) {
-        console.error('Image upload error:', err);
+        console.error("Image upload error:", err);
-        setError(err.response?.data?.error || 'Failed to upload image');
+        setError(err.response?.data?.error || "Failed to upload image");
         // Reset on error
         setImageFile(null);
-        setImagePreview(profileData?.profileImage ? 
+        setImagePreview(
-          getImageUrl(profileData.profileImage) : 
+          profileData?.profileImage
-          null
+            ? getImageUrl(profileData.profileImage)
+            : null
         );
       }
     }
@@ -146,12 +169,17 @@ const Profile: React.FC = () => {
       updateUser(response.data); // Update the auth context
       setEditing(false);
     } catch (err: any) {
-      console.error('Profile update error:', err.response?.data);
+      console.error("Profile update error:", err.response?.data);
-      const errorMessage = err.response?.data?.error || err.response?.data?.message || 'Failed to update profile';
+      const errorMessage =
+        err.response?.data?.error ||
+        err.response?.data?.message ||
+        "Failed to update profile";
       const errorDetails = err.response?.data?.details;
-      
+
       if (errorDetails && Array.isArray(errorDetails)) {
-        const detailMessages = errorDetails.map((d: any) => `${d.field}: ${d.message}`).join(', ');
+        const detailMessages = errorDetails
+          .map((d: any) => `${d.field}: ${d.message}`)
+          .join(", ");
         setError(`${errorMessage} - ${detailMessages}`);
       } else {
         setError(errorMessage);
@@ -166,25 +194,41 @@ const Profile: React.FC = () => {
     // Reset form to original data
     if (profileData) {
       setFormData({
-        firstName: profileData.firstName || '',
+        firstName: profileData.firstName || "",
-        lastName: profileData.lastName || '',
+        lastName: profileData.lastName || "",
-        email: profileData.email || '',
+        email: profileData.email || "",
-        phone: profileData.phone || '',
+        phone: profileData.phone || "",
-        address1: profileData.address1 || '',
+        address1: profileData.address1 || "",
-        address2: profileData.address2 || '',
+        address2: profileData.address2 || "",
-        city: profileData.city || '',
+        city: profileData.city || "",
-        state: profileData.state || '',
+        state: profileData.state || "",
-        zipCode: profileData.zipCode || '',
+        zipCode: profileData.zipCode || "",
-        country: profileData.country || '',
+        country: profileData.country || "",
-        profileImage: profileData.profileImage || ''
+        profileImage: profileData.profileImage || "",
       });
-      setImagePreview(profileData.profileImage ? 
+      setImagePreview(
-        getImageUrl(profileData.profileImage) : 
+        profileData.profileImage ? getImageUrl(profileData.profileImage) : null
-        null
       );
     }
   };
 
+  const handleAvailabilityChange = (field: string, value: string | boolean) => {
+    setAvailabilityData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleWeeklyTimeChange = (day: string, field: 'availableAfter' | 'availableBefore', value: string) => {
+    setAvailabilityData(prev => ({
+      ...prev,
+      weeklyTimes: {
+        ...prev.weeklyTimes,
+        [day]: {
+          ...prev.weeklyTimes[day as keyof typeof prev.weeklyTimes],
+          [field]: value
+        }
+      }
+    }));
+  };
+
   if (loading) {
     return (
       <div className="container mt-5">
@@ -199,292 +243,366 @@ const Profile: React.FC = () => {
 
   return (
     <div className="container mt-4">
-      <div className="row justify-content-center">
+      <h1 className="mb-4">Profile</h1>
-        <div className="col-md-8">
+      
-          <h1 className="mb-4">My Profile</h1>
+      {error && (
+        <div className="alert alert-danger" role="alert">
+          {error}
+        </div>
+      )}
 
-          {error && (
+      {success && (
-            <div className="alert alert-danger" role="alert">
+        <div className="alert alert-success" role="alert">
-              {error}
+          {success}
-            </div>
+        </div>
-          )}
+      )}
-
-          {success && (
-            <div className="alert alert-success" role="alert">
-              {success}
-            </div>
-          )}
 
+      <div className="row">
+        {/* Left Sidebar Menu */}
+        <div className="col-md-3">
           <div className="card">
-            <div className="card-body">
+            <div className="list-group list-group-flush">
-              <form onSubmit={handleSubmit}>
+              <button
-                <div className="text-center mb-4">
+                className={`list-group-item list-group-item-action ${activeSection === 'overview' ? 'active' : ''}`}
-                  <div className="position-relative d-inline-block">
+                onClick={() => setActiveSection('overview')}
-                    {imagePreview ? (
+              >
-                      <img
+                <i className="bi bi-person-circle me-2"></i>
-                        src={imagePreview}
+                Overview
-                        alt="Profile"
+              </button>
-                        className="rounded-circle"
+              <button
-                        style={{ width: '150px', height: '150px', objectFit: 'cover' }}
+                className={`list-group-item list-group-item-action ${activeSection === 'owner-settings' ? 'active' : ''}`}
-                      />
+                onClick={() => setActiveSection('owner-settings')}
-                    ) : (
+              >
-                      <div 
+                <i className="bi bi-gear me-2"></i>
-                        className="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
+                Owner Settings
-                        style={{ width: '150px', height: '150px' }}
+              </button>
-                      >
+              <button
-                        <i className="bi bi-person-fill text-white" style={{ fontSize: '3rem' }}></i>
+                className={`list-group-item list-group-item-action ${activeSection === 'personal-info' ? 'active' : ''}`}
+                onClick={() => setActiveSection('personal-info')}
+              >
+                <i className="bi bi-person me-2"></i>
+                Personal Information
+              </button>
+              <button
+                className={`list-group-item list-group-item-action ${activeSection === 'notifications' ? 'active' : ''}`}
+                onClick={() => setActiveSection('notifications')}
+              >
+                <i className="bi bi-bell me-2"></i>
+                Notification Settings
+              </button>
+              <button
+                className={`list-group-item list-group-item-action ${activeSection === 'privacy' ? 'active' : ''}`}
+                onClick={() => setActiveSection('privacy')}
+              >
+                <i className="bi bi-shield-lock me-2"></i>
+                Privacy & Security
+              </button>
+              <button
+                className={`list-group-item list-group-item-action ${activeSection === 'payment' ? 'active' : ''}`}
+                onClick={() => setActiveSection('payment')}
+              >
+                <i className="bi bi-credit-card me-2"></i>
+                Payment Methods
+              </button>
+              <button
+                className="list-group-item list-group-item-action text-danger"
+                onClick={logout}
+              >
+                <i className="bi bi-box-arrow-right me-2"></i>
+                Log Out
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Content Area */}
+        <div className="col-md-9">
+          {/* Overview Section */}
+          {activeSection === 'overview' && (
+            <div>
+              <h4 className="mb-4">Overview</h4>
+                  
+                  {/* Profile Card */}
+                  <div className="card mb-4">
+                    <div className="card-body">
+                      <form onSubmit={handleSubmit}>
+                        <div className="text-center">
+                          <div className="position-relative d-inline-block mb-3">
+                            {imagePreview ? (
+                              <img
+                                src={imagePreview}
+                                alt="Profile"
+                                className="rounded-circle"
+                                style={{
+                                  width: "120px",
+                                  height: "120px",
+                                  objectFit: "cover",
+                                }}
+                              />
+                            ) : (
+                              <div
+                                className="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
+                                style={{ width: "120px", height: "120px" }}
+                              >
+                                <i
+                                  className="bi bi-person-fill text-white"
+                                  style={{ fontSize: "2.5rem" }}
+                                ></i>
+                              </div>
+                            )}
+                            {editing && (
+                              <label
+                                htmlFor="profileImageOverview"
+                                className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
+                                style={{ width: "35px", height: "35px", padding: "0" }}
+                              >
+                                <i className="bi bi-camera-fill"></i>
+                                <input
+                                  type="file"
+                                  id="profileImageOverview"
+                                  accept="image/*"
+                                  onChange={handleImageChange}
+                                  className="d-none"
+                                />
+                              </label>
+                            )}
+                          </div>
+                          
+                          {editing ? (
+                            <div>
+                              <div className="row justify-content-center mb-3">
+                                <div className="col-md-6">
+                                  <input
+                                    type="text"
+                                    className="form-control mb-2"
+                                    name="firstName"
+                                    value={formData.firstName}
+                                    onChange={handleChange}
+                                    placeholder="First Name"
+                                    required
+                                  />
+                                </div>
+                                <div className="col-md-6">
+                                  <input
+                                    type="text"
+                                    className="form-control mb-2"
+                                    name="lastName"
+                                    value={formData.lastName}
+                                    onChange={handleChange}
+                                    placeholder="Last Name"
+                                    required
+                                  />
+                                </div>
+                              </div>
+                              <div className="d-flex gap-2 justify-content-center">
+                                <button type="submit" className="btn btn-primary">
+                                  Save Changes
+                                </button>
+                                <button
+                                  type="button"
+                                  className="btn btn-secondary"
+                                  onClick={handleCancel}
+                                >
+                                  Cancel
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <div>
+                              <h5>
+                                {profileData?.firstName} {profileData?.lastName}
+                              </h5>
+                              <p className="text-muted">@{profileData?.username}</p>
+                              {profileData?.isVerified && (
+                                <span className="badge bg-success mb-3">
+                                  <i className="bi bi-check-circle-fill"></i> Verified
+                                </span>
+                              )}
+                              <div>
+                                <button
+                                  type="button"
+                                  className="btn btn-outline-primary"
+                                  onClick={() => setEditing(true)}
+                                >
+                                  <i className="bi bi-pencil me-2"></i>
+                                  Edit Profile
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                  
+                  {/* Stats Card */}
+                  <div className="card">
+                    <div className="card-body">
+                      <h5 className="card-title">Account Statistics</h5>
+                      <div className="row text-center">
+                        <div className="col-md-4">
+                          <div className="p-3">
+                            <h4 className="text-primary mb-1">{stats.itemsListed}</h4>
+                            <h6 className="text-muted">Items Listed</h6>
+                          </div>
+                        </div>
+                        <div className="col-md-4">
+                          <div className="p-3">
+                            <h4 className="text-success mb-1">{stats.acceptedRentals}</h4>
+                            <h6 className="text-muted">Active Rentals</h6>
+                          </div>
+                        </div>
+                        <div className="col-md-4">
+                          <div className="p-3">
+                            <h4 className="text-info mb-1">{stats.totalRentals}</h4>
+                            <h6 className="text-muted">Total Rentals</h6>
+                          </div>
+                        </div>
                       </div>
-                    )}
+                    </div>
-                    {editing && (
+                  </div>
-                      <label 
+            </div>
-                        htmlFor="profileImage"
+          )}
-                        className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
+
-                        style={{ width: '40px', height: '40px', padding: '0' }}
+          {/* Personal Information Section */}
-                      >
+          {activeSection === 'personal-info' && (
-                        <i className="bi bi-camera-fill"></i>
+            <div>
-                        <input
+              <h4 className="mb-4">Personal Information</h4>
-                          type="file"
+              <div className="card">
-                          id="profileImage"
+                <div className="card-body">
-                          accept="image/*"
+                  <form onSubmit={handleSubmit}>
-                          onChange={handleImageChange}
+                    <div className="mb-3">
-                          className="d-none"
+                      <label htmlFor="email" className="form-label">
-                        />
+                        Email
                       </label>
+                      <input
+                        type="email"
+                        className="form-control"
+                        id="email"
+                        name="email"
+                        value={formData.email}
+                        onChange={handleChange}
+                        disabled={!editing}
+                      />
+                    </div>
+
+                    <div className="mb-3">
+                      <label htmlFor="phone" className="form-label">
+                        Phone Number
+                      </label>
+                      <input
+                        type="tel"
+                        className="form-control"
+                        id="phone"
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleChange}
+                        placeholder="+1 (555) 123-4567"
+                        disabled={!editing}
+                      />
+                    </div>
+
+                    {editing ? (
+                      <div className="d-flex gap-2">
+                        <button type="submit" className="btn btn-primary">
+                          Save Changes
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          onClick={handleCancel}
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        type="button"
+                        className="btn btn-primary"
+                        onClick={() => setEditing(true)}
+                      >
+                        Edit Information
+                      </button>
                     )}
-                  </div>
+                  </form>
-                  <h5 className="mt-3">{profileData?.firstName} {profileData?.lastName}</h5>
-                  <p className="text-muted">@{profileData?.username}</p>
-                  {profileData?.isVerified && (
-                    <span className="badge bg-success">
-                      <i className="bi bi-check-circle-fill"></i> Verified
-                    </span>
-                  )}
-                </div>
-
-                <div className="row mb-3">
-                  <div className="col-md-6">
-                    <label htmlFor="firstName" className="form-label">First Name</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="firstName"
-                      name="firstName"
-                      value={formData.firstName}
-                      onChange={handleChange}
-                      disabled={!editing}
-                      required
-                    />
-                  </div>
-                  <div className="col-md-6">
-                    <label htmlFor="lastName" className="form-label">Last Name</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="lastName"
-                      name="lastName"
-                      value={formData.lastName}
-                      onChange={handleChange}
-                      disabled={!editing}
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="mb-3">
-                  <label htmlFor="email" className="form-label">Email</label>
-                  <input
-                    type="email"
-                    className="form-control"
-                    id="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    disabled={!editing}
-                  />
-                </div>
-
-                <div className="mb-3">
-                  <label htmlFor="phone" className="form-label">Phone Number</label>
-                  <input
-                    type="tel"
-                    className="form-control"
-                    id="phone"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleChange}
-                    placeholder="+1 (555) 123-4567"
-                    disabled={!editing}
-                  />
-                </div>
-
-                <div className="row mb-3">
-                  <div className="col-md-6">
-                    <label htmlFor="address1" className="form-label">Address Line 1</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="address1"
-                      name="address1"
-                      value={formData.address1}
-                      onChange={handleChange}
-                      placeholder="123 Main Street"
-                      disabled={!editing}
-                    />
-                  </div>
-                  <div className="col-md-6">
-                    <label htmlFor="address2" className="form-label">Address Line 2</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="address2"
-                      name="address2"
-                      value={formData.address2}
-                      onChange={handleChange}
-                      placeholder="Apt, Suite, Unit, etc."
-                      disabled={!editing}
-                    />
-                  </div>
-                </div>
-
-                <div className="row mb-3">
-                  <div className="col-md-6">
-                    <label htmlFor="city" className="form-label">City</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="city"
-                      name="city"
-                      value={formData.city}
-                      onChange={handleChange}
-                      disabled={!editing}
-                    />
-                  </div>
-                  <div className="col-md-3">
-                    <label htmlFor="state" className="form-label">State</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="state"
-                      name="state"
-                      value={formData.state}
-                      onChange={handleChange}
-                      placeholder="CA"
-                      disabled={!editing}
-                    />
-                  </div>
-                  <div className="col-md-3">
-                    <label htmlFor="zipCode" className="form-label">ZIP Code</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="zipCode"
-                      name="zipCode"
-                      value={formData.zipCode}
-                      onChange={handleChange}
-                      placeholder="12345"
-                      disabled={!editing}
-                    />
-                  </div>
-                </div>
-
-                <div className="mb-4">
-                  <label htmlFor="country" className="form-label">Country</label>
-                  <input
-                    type="text"
-                    className="form-control"
-                    id="country"
-                    name="country"
-                    value={formData.country}
-                    onChange={handleChange}
-                    placeholder="United States"
-                    disabled={!editing}
-                  />
-                </div>
-
-                {editing ? (
-                  <div className="d-flex gap-2">
-                    <button type="submit" className="btn btn-primary">
-                      Save Changes
-                    </button>
-                    <button type="button" className="btn btn-secondary" onClick={handleCancel}>
-                      Cancel
-                    </button>
-                  </div>
-                ) : (
-                  <button 
-                    type="button" 
-                    className="btn btn-primary"
-                    onClick={() => setEditing(true)}
-                  >
-                    Edit Profile
-                  </button>
-                )}
-              </form>
-            </div>
-          </div>
-
-          <div className="card mt-4">
-            <div className="card-body">
-              <h5 className="card-title">Account Statistics</h5>
-              <div className="row text-center">
-                <div className="col-md-4">
-                  <h3 className="text-primary">{stats.itemsListed}</h3>
-                  <p className="text-muted">Items Listed</p>
-                </div>
-                <div className="col-md-4">
-                  <h3 className="text-success">{stats.acceptedRentals}</h3>
-                  <p className="text-muted">Accepted Rentals</p>
-                </div>
-                <div className="col-md-4">
-                  <h3 className="text-info">{stats.totalRentals}</h3>
-                  <p className="text-muted">Total Rentals</p>
                 </div>
               </div>
             </div>
-          </div>
+          )}
 
-          <div className="card mt-4">
+          {/* Owner Settings Section */}
-            <div className="card-body">
+          {activeSection === 'owner-settings' && (
-              <h5 className="card-title">Account Settings</h5>
+            <div>
-              <div className="list-group list-group-flush">
+              <h4 className="mb-4">Owner Settings</h4>
-                <a href="#" className="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+              <div className="card">
-                  <div>
+                <div className="card-body">
-                    <i className="bi bi-bell me-2"></i>
+                  {/* Addresses Section */}
-                    Notification Settings
+                  <div className="mb-5">
+                    <h5 className="mb-3">Saved Addresses</h5>
+                    <p className="text-muted small mb-3">Manage addresses for your rental locations</p>
+                    <button className="btn btn-outline-primary">
+                      <i className="bi bi-plus-circle me-2"></i>
+                      Add New Address
+                    </button>
                   </div>
-                  <i className="bi bi-chevron-right"></i>
+                  
-                </a>
+                  {/* Availability Section */}
-                <a href="#" className="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                   <div>
-                    <i className="bi bi-shield-lock me-2"></i>
+                    <h5 className="mb-3">Default Availability</h5>
-                    Privacy & Security
+                    <p className="text-muted small mb-3">Set your general availability for all items</p>
+                    <AvailabilitySettings
+                      data={availabilityData}
+                      onChange={handleAvailabilityChange}
+                      onWeeklyTimeChange={handleWeeklyTimeChange}
+                      showTitle={false}
+                    />
+                    <button className="btn btn-outline-success mt-3">
+                      <i className="bi bi-check2 me-2"></i>
+                      Save Availability
+                    </button>
                   </div>
-                  <i className="bi bi-chevron-right"></i>
+                </div>
-                </a>
-                <a href="#" className="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
-                  <div>
-                    <i className="bi bi-credit-card me-2"></i>
-                    Payment Methods
-                  </div>
-                  <i className="bi bi-chevron-right"></i>
-                </a>
-                <button 
-                  onClick={logout}
-                  className="list-group-item list-group-item-action d-flex justify-content-between align-items-center text-danger border-0 w-100 text-start"
-                >
-                  <div>
-                    <i className="bi bi-box-arrow-right me-2"></i>
-                    Log Out
-                  </div>
-                  <i className="bi bi-chevron-right"></i>
-                </button>
               </div>
             </div>
-          </div>
+          )}
+
+          {/* Placeholder sections for other menu items */}
+          {activeSection === 'notifications' && (
+            <div>
+              <h4 className="mb-4">Notification Settings</h4>
+              <div className="card">
+                <div className="card-body">
+                  <p className="text-muted">Notification preferences coming soon...</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeSection === 'privacy' && (
+            <div>
+              <h4 className="mb-4">Privacy & Security</h4>
+              <div className="card">
+                <div className="card-body">
+                  <p className="text-muted">Privacy and security settings coming soon...</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeSection === 'payment' && (
+            <div>
+              <h4 className="mb-4">Payment Methods</h4>
+              <div className="card">
+                <div className="card-body">
+                  <p className="text-muted">Payment method management coming soon...</p>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
   );
 };
 
-export default Profile;
+export default Profile;

frontend/src/types/index.ts

@@ -34,7 +34,6 @@ export interface Item {
   id: string;
   name: string;
   description: string;
-  isPortable: boolean;
   pickUpAvailable?: boolean;
   localDeliveryAvailable?: boolean;
   localDeliveryRadius?: number;