import { useState, useEffect } from 'react'; import Link from 'next/link'; import Head from 'next/head'; interface Offer { id: string; listingId: string; amount: number; message?: string; status: string; createdAt: string; listing?: { id: string; title: string; price: number; sellerId: string; sellerName?: string; }; } interface OfferStats { totalOffers: number; pendingOffers: number; acceptedOffers: number; rejectedOffers: number; } const statusColors: Record = { pending: 'bg-yellow-100 text-yellow-800', accepted: 'bg-green-100 text-green-800', rejected: 'bg-red-100 text-red-800', withdrawn: 'bg-gray-100 text-gray-800', expired: 'bg-gray-100 text-gray-800', }; export default function MyOffersPage() { const [offers, setOffers] = useState([]); const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [role, setRole] = useState<'buyer' | 'seller'>('buyer'); const [statusFilter, setStatusFilter] = useState(''); useEffect(() => { fetchOffers(); }, [role, statusFilter]); const fetchOffers = async () => { setLoading(true); try { let url = `/api/marketplace/my-offers?role=${role}`; if (statusFilter) { url += `&status=${statusFilter}`; } const response = await fetch(url, { headers: { 'x-user-id': role === 'buyer' ? 'demo-buyer' : 'demo-user', }, }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Failed to fetch offers'); } setOffers(data.offers || []); setStats(data.stats || null); } catch (error) { console.error('Error fetching offers:', error); } finally { setLoading(false); } }; const handleOfferAction = async (offerId: string, action: string) => { if (action === 'withdraw' && !confirm('Are you sure you want to withdraw this offer?')) return; try { const response = await fetch(`/api/marketplace/offers/${offerId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'x-user-id': role === 'buyer' ? 'demo-buyer' : 'demo-user', }, body: JSON.stringify({ action }), }); if (response.ok) { fetchOffers(); } else { const data = await response.json(); alert(data.error || 'Failed to update offer'); } } catch (error) { console.error('Error updating offer:', error); } }; return (
My Offers - LocalGreenChain Marketplace {/* Header */}
{/* Main Content */}

My Offers

{/* Role Toggle */}
View as:
{/* Stats Cards */} {stats && (
{stats.totalOffers}
Total Offers
{stats.pendingOffers}
Pending
{stats.acceptedOffers}
Accepted
{stats.rejectedOffers}
Rejected
)} {/* Status Filter */}
{/* Offers List */} {loading ? (

Loading offers...

) : offers.length === 0 ? (
📨

No Offers Yet

{role === 'buyer' ? 'Browse the marketplace and make offers on items you like.' : 'When buyers make offers on your listings, they will appear here.'}

Browse Marketplace
) : (
{offers.map((offer) => (
{offer.listing && ( {offer.listing.title} )}
Listing price: ${offer.listing?.price.toFixed(2)} | {new Date(offer.createdAt).toLocaleDateString()}
{offer.message && (

"{offer.message}"

)}
${offer.amount.toFixed(2)}
{offer.status}
{/* Actions */} {offer.status === 'pending' && (
{role === 'buyer' ? ( ) : ( <> )}
)}
))}
)}
); }