From 9bb692025684e98991601f126bdd8eeb31b721ef Mon Sep 17 00:00:00 2001
From: jhnavi25 <24cs10jh66@mitsgwl.ac.in>
Date: Sun, 14 Jun 2026 02:26:26 +0530
Subject: [PATCH] feat: add listings page with search, filter, and grid (closes
 #54)

---
 apps/web/package.json               |   2 +-
 apps/web/src/pages/ListingsPage.tsx | 127 ++++++++++++++++++++++---
 package-lock.json                   | 139 +++++++++++++++++-----------
 3 files changed, 201 insertions(+), 67 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 4f86bf7..979f6fe 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^24.12.3",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.5.0",
diff --git a/apps/web/src/pages/ListingsPage.tsx b/apps/web/src/pages/ListingsPage.tsx
index fc33c74..9c5a3b5 100644
--- a/apps/web/src/pages/ListingsPage.tsx
+++ b/apps/web/src/pages/ListingsPage.tsx
@@ -1,15 +1,120 @@
+import { useState, useEffect } from "react";
+
+interface Listing {
+  id: number;
+  title: string;
+  category: string;
+  price: number;
+  location: string;
+  image?: string;
+  available: boolean;
+}
+
+const MOCK_LISTINGS: Listing[] = [
+  { id: 1, title: "Mountain Bike", category: "Sports", price: 150, location: "Delhi", available: true },
+  { id: 2, title: "DSLR Camera", category: "Electronics", price: 500, location: "Mumbai", available: true },
+  { id: 3, title: "Camping Tent", category: "Outdoor", price: 200, location: "Bangalore", available: false },
+  { id: 4, title: "Power Drill", category: "Tools", price: 100, location: "Pune", available: true },
+  { id: 5, title: "Acoustic Guitar", category: "Music", price: 250, location: "Chennai", available: true },
+  { id: 6, title: "Projector", category: "Electronics", price: 800, location: "Hyderabad", available: false },
+];
+
+const CATEGORIES = ["All", "Electronics", "Sports", "Outdoor", "Tools", "Music"];
+
 export default function ListingsPage() {
+  const [listings, setListings] = useState<Listing[]>(MOCK_LISTINGS);
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState("All");
+
+  useEffect(() => {
+    let filtered = MOCK_LISTINGS;
+    if (category !== "All") filtered = filtered.filter((l) => l.category === category);
+    if (search) filtered = filtered.filter((l) =>
+      l.title.toLowerCase().includes(search.toLowerCase()) ||
+      l.location.toLowerCase().includes(search.toLowerCase())
+    );
+    setListings(filtered);
+  }, [search, category]);
+
   return (
-    <div className="min-h-screen bg-slate-950 flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-white">
-          Listings
-        </h1>
-
-        <p className="mt-4 text-slate-400">
-          Browse rental listings here.
-        </p>
+    <div className="min-h-screen bg-slate-950 px-4 py-8">
+      <div className="max-w-5xl mx-auto">
+
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white">Browse Listings</h1>
+          <p className="text-slate-400 mt-1">Rent items near you</p>
+        </div>
+
+        {/* Search + Filter */}
+        <div className="flex flex-col sm:flex-row gap-3 mb-6">
+          <input
+            type="text"
+            placeholder="Search by name or city..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="flex-1 p-3 rounded-lg bg-slate-800 text-white outline-none placeholder-slate-500"
+          />
+          <div className="flex gap-2 flex-wrap">
+            {CATEGORIES.map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setCategory(cat)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  category === cat
+                    ? "bg-blue-600 text-white"
+                    : "bg-slate-800 text-slate-400 hover:text-white"
+                }`}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Grid */}
+        {listings.length === 0 ? (
+          <div className="text-center py-20 text-slate-500">No listings found.</div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {listings.map((item) => (
+              <div key={item.id} className="bg-slate-900 rounded-xl p-5 flex flex-col gap-3 hover:ring-1 hover:ring-blue-600 transition">
+                {/* Placeholder image */}
+                <div className="w-full h-36 bg-slate-800 rounded-lg flex items-center justify-center text-4xl">
+                  {item.category === "Electronics" ? "??" :
+                   item.category === "Sports" ? "??" :
+                   item.category === "Outdoor" ? "?" :
+                   item.category === "Tools" ? "??" : "??"}
+                </div>
+
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h3 className="text-white font-semibold">{item.title}</h3>
+                    <p className="text-slate-400 text-sm">{item.location}</p>
+                  </div>
+                  <span className={`text-xs px-2 py-1 rounded-full ${item.available ? "bg-green-900 text-green-400" : "bg-red-900 text-red-400"}`}>
+                    {item.available ? "Available" : "Rented"}
+                  </span>
+                </div>
+
+                <div className="flex items-center justify-between mt-auto">
+                  <span className="text-blue-400 font-bold">?{item.price}<span className="text-slate-500 font-normal text-sm">/day</span></span>
+                  <button
+                    disabled={!item.available}
+                    className={`px-4 py-1.5 rounded-lg text-sm font-medium transition ${
+                      item.available
+                        ? "bg-blue-600 hover:bg-blue-700 text-white"
+                        : "bg-slate-700 text-slate-500 cursor-not-allowed"
+                    }`}
+                  >
+                    {item.available ? "Rent Now" : "Unavailable"}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 12aad86..624293b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,20 @@
         "typescript": "^5.7.2"
       }
     },
+    "apps/api/node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "apps/mobile": {
       "name": "@rent-mate/mobile",
       "version": "0.1.0",
@@ -501,6 +515,20 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "apps/mobile/node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "apps/web": {
       "version": "0.0.0",
       "dependencies": {
@@ -512,7 +540,7 @@
       "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@types/node": "^24.12.3",
-        "@types/react": "^19.2.14",
+        "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.1",
         "autoprefixer": "^10.5.0",
@@ -529,32 +557,23 @@
     },
     "apps/web/node_modules/@types/node": {
       "version": "24.13.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.2.tgz",
-      "integrity": "sha512-fRa09kZTgu8o71KFcDjUFuc7F+dEbZYZmkI0mg5YBTRs0yMKjYHsq/c0urDKeDb+D5qVgXOdFcuu+DZPKOITwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.18.0"
       }
     },
-    "apps/web/node_modules/typescript": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
-      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+    "apps/web/node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
       "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
+      "license": "MIT"
     },
     "node_modules/@0no-co/graphql.web": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.2.0.tgz",
-      "integrity": "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.3.2.tgz",
+      "integrity": "sha512-Q1+pRlLhE31GOY/2c9BAEnFTNxO7Awtc6fhhEDlxyCBQ2N0IhD32cPVvPChrK9mwBNSgRdW/sF1kd2e0ojHj1Q==",
       "license": "MIT",
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
@@ -6247,12 +6266,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/node/node_modules/undici-types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "license": "MIT"
-    },
     "node_modules/@types/passport": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.17.tgz",
@@ -6937,9 +6950,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -7256,16 +7269,16 @@
       }
     },
     "node_modules/axios/node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
       },
       "engines": {
         "node": ">= 6"
@@ -7620,9 +7633,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.35",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.35.tgz",
-      "integrity": "sha512-honAfLBde0HAFLdNyBEfuuENkF6zR+ozxqxa/2zJKHBe1qzLqyTSeRKpdPEHAP03rlDGyQOPnCSxnVpVqQo9Mg==",
+      "version": "2.10.37",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.37.tgz",
+      "integrity": "sha512-girxaJ7WZssDOFhzCGZTDKoTa1gk6A1TbflaYTpykLJ4UU9Fz9kx1aREM8JCuoVHbL8X8T/mJg7w2oYSq72Oig==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -9298,9 +9311,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.371",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.371.tgz",
-      "integrity": "sha512-e9htk9mAYL6AzmkEhSvVVw7IWGSBJ/Bqdn2eRyRLrj1g6sncN4WbFt5qnILYoCktktr45pyjIrOiRvBThQ808w==",
+      "version": "1.5.372",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.372.tgz",
+      "integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -9458,11 +9471,14 @@
       }
     },
     "node_modules/eslint": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.4.1.tgz",
-      "integrity": "sha512-AyIKhnOBuOAdueD7RB3xB+YeAWScb9jHsJBgH2Hcde8InP5JYhqrRR6iTMHyTEwgENK54Cp44e4v8BwNhsuHuw==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.5.0.tgz",
+      "integrity": "sha512-1y+7C+vi12bUK1IpZeaV3gsH9fHLBmPvYmPx42pvT/E9yG0IC8g3PUZZgp0+JLJl7ZDK0flc2gc+Aw9dpCvIsQ==",
       "dev": true,
       "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -10526,15 +10542,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz",
-      "integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.5.tgz",
+      "integrity": "sha512-j23EibVLnp4zNXGW7LjryXYa2X6U/M96yoOX+ybZxwkYajdxRNEqYY3zhh7y0i6kfISKS2jr+EJq1YTUDEv5+w==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
+        "hasown": "^2.0.4",
         "mime-types": "^2.1.35"
       },
       "engines": {
@@ -15819,9 +15835,9 @@
       "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.1.tgz",
-      "integrity": "sha512-dLsljMd9sqwRkby8zhO1gSg3PnJIBFid8f4CQj/sXx+7cKx+E7u0PKhZ+U4wmhx7EfmtvnA318oVaIkAB1lRJw==",
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.2.tgz",
+      "integrity": "sha512-NgRBy2Nx/bE+9F27nVHnqcN5HjyLmecqsqx2PJHu3/IEtADD4WuxuXIVExD5PoSDFVrl78dOonfcOe5O+5nbzQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "jsesc": "~3.1.0"
@@ -17592,9 +17608,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
@@ -17689,10 +17705,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
-      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
-      "dev": true,
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -18760,6 +18775,20 @@
       "devDependencies": {
         "typescript": "^5.7.2"
       }
+    },
+    "packages/shared/node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
     }
   }
 }