import { useState, useEffect } from 'react'; import Link from 'next/link'; import Head from 'next/head'; interface Listing { id: string; title: string; description: string; price: number; currency: string; quantity: number; category: string; status: string; viewCount: number; createdAt: string; } interface SellerStats { totalListings: number; activeListings: number; soldListings: number; totalViews: number; averagePrice: number; } const categoryLabels: Record = { seeds: 'Seeds', seedlings: 'Seedlings', mature_plants: 'Mature Plants', cuttings: 'Cuttings', produce: 'Produce', supplies: 'Supplies', }; const statusColors: Record = { draft: 'bg-gray-100 text-gray-800', active: 'bg-green-100 text-green-800', sold: 'bg-blue-100 text-blue-800', expired: 'bg-yellow-100 text-yellow-800', cancelled: 'bg-red-100 text-red-800', }; export default function MyListingsPage() { const [listings, setListings] = useState([]); const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [statusFilter, setStatusFilter] = useState(''); useEffect(() => { fetchMyListings(); }, [statusFilter]); const fetchMyListings = async () => { setLoading(true); try { const url = statusFilter ? `/api/marketplace/my-listings?status=${statusFilter}` : '/api/marketplace/my-listings'; const response = await fetch(url, { headers: { 'x-user-id': 'demo-user', }, }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Failed to fetch listings'); } setListings(data.listings || []); setStats(data.stats || null); } catch (error) { console.error('Error fetching listings:', error); } finally { setLoading(false); } }; const handlePublish = async (listingId: string) => { try { const response = await fetch(`/api/marketplace/listings/${listingId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'x-user-id': 'demo-user', }, body: JSON.stringify({ status: 'active' }), }); if (response.ok) { fetchMyListings(); } } catch (error) { console.error('Error publishing listing:', error); } }; const handleCancel = async (listingId: string) => { if (!confirm('Are you sure you want to cancel this listing?')) return; try { const response = await fetch(`/api/marketplace/listings/${listingId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'x-user-id': 'demo-user', }, body: JSON.stringify({ status: 'cancelled' }), }); if (response.ok) { fetchMyListings(); } } catch (error) { console.error('Error cancelling listing:', error); } }; return (
My Listings - LocalGreenChain Marketplace {/* Header */}
{/* Main Content */}

My Listings

{/* Stats Cards */} {stats && (
{stats.totalListings}
Total Listings
{stats.activeListings}
Active
{stats.soldListings}
Sold
{stats.totalViews}
Total Views
${stats.averagePrice}
Avg. Price
)} {/* Filters */}
{/* Listings */} {loading ? (

Loading your listings...

) : listings.length === 0 ? (
📦

No Listings Yet

Create your first listing to start selling on the marketplace.

Create Listing
) : (
{listings.map((listing) => ( ))}
Listing Category Price Status Views Actions
{listing.title}
{new Date(listing.createdAt).toLocaleDateString()}
{categoryLabels[listing.category]} ${listing.price.toFixed(2)}
Qty: {listing.quantity}
 {listing.status} {listing.viewCount}
{listing.status === 'draft' && ( )} {listing.status === 'active' && ( )} View
)}
); }