Dev

src/layout/MainLayout.tsx

@@ -8,9 +8,14 @@ interface MainLayoutProps {
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
     return (
-        <div className="h-screen flex flex-col justify-between ">
-            {/* <MainHeader /> */}
-            <div className="h-full ">{children}</div>
+        <div className="h-screen flex flex-col overflow-hidden bg-white">
+
+            {/* Scrollable content with padding */}
+            <div className="flex-1 overflow-auto px-5 pt-4 pb-24">
+                {children}
+            </div>
+
+            {/* Fixed footer on the page*/}
             <MainFooter />
         </div>
     );

src/pages/ExplorePage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { MapContainer, TileLayer, Marker, Popup, Tooltip } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
-import { Input, Radio, Spin, Image } from "antd";
+import { Input, Radio, Spin, Image, Empty } from "antd";
 import { InventoryService } from "../services/InventoryService";
 import { useNavigate } from "react-router";
 import L from "leaflet";
@@ -24,6 +24,7 @@ export function ExplorePage() {
     const [position, setPosition] = useState<[number, number] | null>(null);
     const [menu, setMenu] = useState<string>("map");
     const [items, setItems] = useState<any[]>([]);
+    const [searchValue, setSearchValue] = useState<string>("");
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -55,6 +56,23 @@ export function ExplorePage() {
         }
     };
 
+    const searhItems = async (query:string) => {
+        setSearchValue(query);
+        if(!query || query.trim() === "") {
+            getItems();
+            return;
+        }
+        try {
+            const { data } = await InventoryService.serachAndGetItems(query);
+            setItems(data);
+            // setSearchValue("");
+            setMenu("list")
+        }
+        catch (error) {
+            alert(`Error searching items with input : ${query}. Error Message is ${error}`);
+        }
+    };
+
     if (!position)
         return (
             <div className="flex w-full h-full items-center justify-center">
@@ -68,7 +86,11 @@ export function ExplorePage() {
                 Explore
             </h4>
             <div className="px-4 py-2">
-                <Input.Search placeholder="Search item" className="h-full" />
+                <Input.Search placeholder="Search item, use name, description or location name to find ..." className="h-full"
+                    value={searchValue}
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    onSearch={(value) => searhItems(value)} 
+                />
             </div>
             <div className="px-4 mb-2">
                 <Radio.Group
@@ -78,7 +100,7 @@ export function ExplorePage() {
                         { label: "List", value: "list" },
                     ]}
                     onChange={(e) => setMenu(e.target.value)}
-                    defaultValue={menu}
+                    value={menu}
                     optionType="button"
                     buttonStyle="solid"
                 />
@@ -149,8 +171,8 @@ export function ExplorePage() {
                     })}
                 </MapContainer>
             ) : (
-                <div className="flex-1 overflow-auto flex flex-col gap-3 mb-4">
-                    {items.map((item, index) => (
+                <div className="flex-1 overflow-auto pt-4 flex flex-col gap-3 mb-4">
+                    {items.length === 0 ? <Empty /> : items.map((item, index) => (
                         <div
                             key={index}
                             className="flex justify-between gap-5 border border-gray-300 rounded p-4 cursor-pointer hover:shadow-md transition"

src/pages/InventoryPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider } from "antd";
+import { Button, Divider, Empty } from "antd";
 import { useState, useEffect } from "react";
 import { NavLink, useNavigate } from "react-router";
 import { InventoryService } from "../services/InventoryService";
@@ -20,7 +20,7 @@ export function InventoryPage() {
     }, []);
 
     return (
-        <div className="flex flex-col h-screen w-full p-8 gap-3 pb-24">
+        <div className="flex flex-col h-screen w-full p-8 gap-3 pab-24">
             {/* Header */}
             <div className="flex flex-col w-full items-center">
                 <div className="flex justify-between w-full items-center">
@@ -33,31 +33,35 @@ export function InventoryPage() {
 
             {/* Scrollable content */}
             <div className="flex-1 overflow-auto flex flex-col gap-3 mb-4">
-                {items.map((item, index) => (
-                    <div
-                        key={index}
-                        className="flex justify-between gap-5 border border-gray-300 rounded p-4 cursor-pointer hover:shadow-md transition"
-                        onClick={() => navigate(`/inventory/${item.id}`)}
-                    >
-                        <div>
-                            <Image
-                                alt="basic image"
-                                width={80}
-                                height={80}
-                                src={item.imageUrls.length > 0 ? item.imageUrls[0] : undefined}
-                                preview={false}
-                                fallback="https://plus.unsplash.com/premium_vector-1731660866636-d6ee4dcd6806?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                            />
+                {items.length === 0 ? (
+                    <Empty />
+                ) : (
+                    items.map((item, index) => (
+                        <div
+                            key={index}
+                            className="flex justify-between gap-5 border border-gray-300 rounded p-4 cursor-pointer hover:shadow-md transition"
+                            onClick={() => navigate(`/inventory/${item.id}`)}
+                        >
+                            <div>
+                                <Image
+                                    alt="basic image"
+                                    width={80}
+                                    height={80}
+                                    src={item.imageUrls.length > 0 ? item.imageUrls[0] : undefined}
+                                    preview={false}
+                                    fallback="https://plus.unsplash.com/premium_vector-1731660866636-d6ee4dcd6806?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                />
+                            </div>
+                            <div className="w-full">
+                                <h4 className="font-semibold text-lg">{item.name}</h4>
+                                <p className="text-sm text-gray-600 line-clamp-3">{item.description}</p>
+                            </div>
+                            <div className="flex items-center">{item.quantity}</div>
                         </div>
-                        <div className="w-full">
-                            <h4 className="font-semibold text-lg">{item.name}</h4>
-                            <p className="text-sm text-gray-600 line-clamp-3">{item.description}</p>
-                        </div>
-                        <div className="flex items-center">{item.quantity}</div>
-                    </div>
-                ))}
+                    ))
+                )}
             </div>
-            <div className="pb-auto" >
+            <div className="pb-auto">
                 <NavLink to="/inventory/new">
                     <Button type="primary" className="w-full mb-4">
                         Donate

src/pages/ProductFormPage.tsx

@@ -137,8 +137,8 @@ export function ProductFormPage() {
                         city: "Fairfield",
                         state: "IA",
                         country: "USA",
-                        latitude: 41.0174345,
-                        longitude: -91.9669905,
+                        latitude: 41.02032780633752,
+                        longitude: -91.96294473710384,
                     },
                     quantity: 1,
                     expiresAfterDays: 60,

src/pages/ProductShowPage.tsx

@@ -370,7 +370,7 @@ export const ProductShowPage: React.FC = () => {
                 <Space direction="vertical" size={8} style={{ width: "100%" }}>
                   {/* Claim button,  */}
                   {!isOwner && item.status !== "DONATED" && !myClaim && (
-                    <Button type="primary" size="middle" onClick={handleClaim} style={{ background: "#13c2c2", borderColor: "#13c2c2" }}>Claim Item</Button>
+                    <Button type="primary" size="middle" onClick={handleClaim} style={{ background: "#13c2c2", borderColor: "#13c2c2" }}>Request for claim item</Button>
                   )}
                   {/* Cancel claim button */}
                   {myClaim && (

src/services/InventoryService.ts

@@ -16,6 +16,13 @@ export const InventoryService = {
             method: "get",
         });
     },
+    serachAndGetItems: (query:string): Promise<AxiosResponse<any>> => {
+        return service({
+            url: "/api/v1/items/search",
+            params: {searchText: query},
+            method: "get",
+        });
+    },
     getMyItems: (): Promise<AxiosResponse<any>> => {
         return service({
             url: "/api/v1/items/my-items",