+ 
+ 
+ 
+
-
- {agent.numberOfProperties} Properties -
+
+ {currentAgents.map((agent) => (
+
+
+
+
+
-
-
-
- );
- })}
+
+
+
+
+ ))}
+ 
+
+ + {agent.numberOfProperties} Properties +
+
+
+ + {agent.name} +
+Email: {agent.email}
+Phone: {agent.phoneNumber}
+
+ {user &&
+ (user.data.accountType === "Agent" ||
+ user.data.accountType === "Landlord") && (
+ <>
+
+
+
+ )}
+
+
-
- {agent.listings}
-
- - {agent.name} -
-Email: {agent.email}
-Phone: {agent.phoneNumber}
-
-
- 
-
-
- {agent.listings}
-
+
+
+
+ {isFormOpen && (
+
+
+ )}
+
+ {showDeleteModal && (
+
+
+ + {currentAgent ? "Edit Agent" : "Create New Agent"} +
+ +
+
+ )}
);
-}
+};
+
+export const Home = () => (
+
+
+ Confirm Deletion
++ Are you sure you want to delete this agent? +
+
+
+
+
+
+
+);
+
+export default Agents;
diff --git a/src/pages/listing.jsx b/src/pages/listing.jsx
index c0fe844..762b06a 100644
--- a/src/pages/listing.jsx
+++ b/src/pages/listing.jsx
@@ -1,98 +1,98 @@
-import { Link } from "react-router-dom";
-import ListImage from "../assets/images/unsplash_t33SZJ_ZboQ.png";
-import AgentImage from "../assets/images/Frame 803.png";
-import VerifiedBadge from "../assets/images/verified.png";
-import AdvertImage from "../assets/images/advert2.png";
-import { FaMapMarkerAlt, FaPhone, FaWhatsapp, FaCamera } from "react-icons/fa";
-import ListingHero from '../components/Listing/ListingHero.jsx';
+
+
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { FaMapMarkerAlt, FaPhone, FaWhatsapp, FaCamera, FaEdit, FaTrash } from "react-icons/fa";
+import { useRecoilState } from "recoil";
+import ListingHero from "../components/Listing/ListingHero.jsx";
+import {userInfo} from "../components/atom/user";
const Listings = () => {
- const listings = [
- {
- id: 1,
- title: "2 Bedroom Terrace Duplex",
- description: "Studio Pentfloor / Flat / Apartment for shortlet",
- location: "Ikate, Lekki Ikate Lekki Lagos",
- price: "₦ 15,000,000 /year",
- bedrooms: 1,
- bathrooms: 1,
- features: ["CCTV CAMERAS", "FREE WIFI", "24 HOURS SECURITY"],
- agent: "Prince Ademola",
- updated: "Updated 17 Jul 2025, Added 07 Jul 2025",
- photos: 10,
- sponsored: true,
- },
- {
- id: 2,
- title: "3 Bedroom Duplex",
- description: "Modern duplex with parking space",
- location: "Victoria Island, Lagos",
- price: "₦ 25,000,000 /year",
- bedrooms: 3,
- bathrooms: 2,
- features: ["PARKING SPACE", "GYM", "SWIMMING POOL"],
- agent: "Sarah Johnson",
- updated: "Updated 16 Jul 2025, Added 05 Jul 2025",
- photos: 15,
- sponsored: true,
- },
- {
- id: 3,
- title: "4 Bedroom Detached House",
- description: "Spacious family home with garden",
- location: "Ikoyi, Lagos",
- price: "₦ 45,000,000 /year",
- bedrooms: 4,
- bathrooms: 3,
- features: ["GARDEN", "GARAGE", "SECURITY"],
- agent: "Mike Adebayo",
- updated: "Updated 15 Jul 2025, Added 03 Jul 2025",
- photos: 20,
- sponsored: true,
- },
- {
- id: 4,
- title: "1 Bedroom Studio Apartment",
- description: "Compact modern studio apartment",
- location: "Lekki Phase 1, Lagos",
- price: "₦ 8,000,000 /year",
- bedrooms: 1,
- bathrooms: 1,
- features: ["FURNISHED", "WIFI", "AC"],
- agent: "Grace Okonkwo",
- updated: "Updated 14 Jul 2025, Added 02 Jul 2025",
- photos: 8,
- sponsored: true,
- },
- {
- id: 5,
- title: "5 Bedroom Mansion",
- description: "Luxury mansion with modern amenities",
- location: "Banana Island, Lagos",
- price: "₦ 80,000,000 /year",
- bedrooms: 5,
- bathrooms: 4,
- features: ["POOL", "CINEMA", "CHEF KITCHEN"],
- agent: "David Okafor",
- updated: "Updated 13 Jul 2025, Added 01 Jul 2025",
- photos: 25,
- sponsored: true,
- },
- {
- id: 6,
- title: "2 Bedroom Apartment",
- description: "Beautiful apartment with sea view",
- location: "Ajah, Lagos",
- price: "₦ 12,000,000 /year",
- bedrooms: 2,
- bathrooms: 2,
- features: ["SEA VIEW", "BALCONY", "ELEVATOR"],
- agent: "Jennifer Eze",
- updated: "Updated 12 Jul 2025, Added 30 Jun 2025",
- photos: 12,
- sponsored: true,
- },
- ];
+ const [listings, setListings] = useState([]);
+ const [latestListings, setLatestListings] = useState([]);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [postsPerPage] = useState(4);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [user] = useRecoilState(userInfo);
+ const navigate = useNavigate();
+
+ // Fetch all properties (for local DB, we slice client-side)
+ useEffect(() => {
+ setLoading(true);
+ fetch("http://localhost:8080/properties")
+ .then((res) => res.json())
+ .then((data) => {
+ setListings(data);
+ setLoading(false);
+ })
+ .catch((err) => {
+ setError("Failed to load properties.");
+ setLoading(false);
+ console.error(err);
+ });
+ }, []);
+
+ // Fetch latest 3 listings for sidebar
+ useEffect(() => {
+ fetch("http://localhost:8080/properties")
+ .then((res) => res.json())
+ .then((data) => {
+ const latest = [...data].sort((a, b) => b.id.localeCompare(a.id)).slice(0, 3);
+ setLatestListings(latest);
+ })
+ .catch((err) => console.error(err));
+ }, []);
+
+ // Pagination calculations
+ const totalPages = Math.ceil(listings.length / postsPerPage);
+ const indexOfLastPost = currentPage * postsPerPage;
+ const indexOfFirstPost = indexOfLastPost - postsPerPage;
+ const currentListings = listings.slice(indexOfFirstPost, indexOfLastPost);
+
+ const visiblePages = 3;
+ let startPage = Math.max(1, currentPage - Math.floor(visiblePages / 2));
+ let endPage = startPage + visiblePages - 1;
+ if (endPage > totalPages) {
+ endPage = totalPages;
+ startPage = Math.max(1, endPage - visiblePages + 1);
+ }
+ const pageNumbers = [];
+ for (let i = startPage; i <= endPage; i++) pageNumbers.push(i);
+
+ const handlePageChange = (page) => setCurrentPage(page);
+
+ // Check if user can edit/delete (Landlord or Agent)
+ const canEditDelete = user.isLoggedIn && user.data &&
+ (user.data.accountType === 'Landlord' || user.data.accountType === 'Agent');
+
+ // Handle edit property
+ const handleEdit = (propertyId) => {
+ navigate(`/post-property?edit=${propertyId}`);
+ };
+
+ // Handle delete property
+ const handleDelete = async (propertyId) => {
+ if (window.confirm('Are you sure you want to delete this property?')) {
+ try {
+ const response = await fetch(`http://localhost:8080/properties/${propertyId}`, {
+ method: 'DELETE',
+ });
+ if (response.ok) {
+ setListings(listings.filter(listing => listing.id !== propertyId));
+ alert('Property deleted successfully!');
+ } else {
+ alert('Failed to delete property.');
+ }
+ } catch (error) {
+ console.error('Error deleting property:', error);
+ alert('Failed to delete property.');
+ }
+ }
+ };
+
+ if (loading) return + Welcome to the Agent Management App +
++ Navigate to the Agents page to see the list of agents. +
+ + Go to Agents + +Loading properties...
; + if (error) return{error}
; return (
@@ -103,28 +103,13 @@ const Listings = () => {