[{"_1":2,"_132":-5,"_133":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":58,"_59":41,"_60":61,"_62":58,"_63":41,"_64":41,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_94":-5,"_95":17,"_96":97,"_128":31,"_129":130,"_131":17},"id","bbd88486be414fb9cef7","isMyApp",false,"name","agrichain","description","Connect farmers and buyers in a secure blockchain marketplace where agricultural goods flow from field to table with verified quality and transparent transactions. Smart contracts hold funds in escrow while AI-powered verification ensures you're getting exactly what you paid for, all wrapped in a sleek, user-friendly interface.","brief","Farm-to-table blockchain marketplace where crops meet crypto and trust is verified, not just promised.","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/bbd88486be414fb9cef7/77404_e033edd6.webp","cdnUrl","https://cdn.dev.fun/app/bbd88486be414fb9cef7/77404","createdAt",["D",1749453750092],"updatedAt",["D",1749490677217],"lastCommitId",["B","77404"],"tier",1,"credits",-8,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"19ccdf70-6245-4125-b8cb-53dcc46b008c","uniqueId","maK5LeokkvBjsSTp3YERfKDEd5rjP44VR7eWVF9ga4L","username","solanaWallet","displayName","maK...a4L","bio","avatar","/avatar.svg","commitCount",5,"forkCount",0,"likeCount","runsCount",32,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import { useState, createContext, useContext, useEffect } from 'react';\nimport { useWallet } from '@solana/wallet-adapter-react';\nimport { WalletMultiButton } from '@solana/wallet-adapter-react-ui';\nimport { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';\nimport { WalletModalProvider } from '@solana/wallet-adapter-react-ui';\nimport '@solana/wallet-adapter-react-ui/styles.css';\nimport { Menu, X, ShoppingCart, Home, User, MessageCircle, Package, Tractor, Search, LogOut, Plus, Send, ArrowLeft, Clock, Tag, DollarSign, MapPin, Wallet, Check, AlertTriangle } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nconst AppContext = createContext();\nconst CustomWalletButton = () => {\n const [isMobile, setIsMobile] = useState(window.innerWidth < 768);\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth < 768);\n };\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n return

\n {isMobile ? } /> : }\n

;\n};\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/bbd88486be414fb9cef7';\n return \n \n \n \n \n \n ;\n};\nfunction App() {\n const [currentPage, setCurrentPage] = useState('login');\n const [userType, setUserType] = useState(null);\n const [cart, setCart] = useState([]);\n const [searchQuery, setSearchQuery] = useState('');\n const [activeChatUser, setActiveChatUser] = useState(null);\n const [pageHistory, setPageHistory] = useState(['login']);\n const [selectedCategory, setSelectedCategory] = useState('all');\n const [isNavOpen, setIsNavOpen] = useState(false);\n const [checkoutStep, setCheckoutStep] = useState(1);\n const [shippingInfo, setShippingInfo] = useState({\n email: '',\n phone: '',\n address: '',\n city: '',\n state: '',\n zipCode: ''\n });\n const [paymentStatus, setPaymentStatus] = useState(null);\n const {\n publicKey\n } = useWallet();\n const [products, setProducts] = useState([{\n id: 1,\n name: 'Premium Wheat (Bulk)',\n description: 'High-quality wheat grain grown using organic farming techniques. Harvested at peak ripeness for maximum nutritional value.',\n price: 450,\n unit: 'per ton',\n category: 'grains',\n farmName: 'Golden Fields Farm',\n farmerName: 'John Smith',\n location: 'Iowa, USA',\n harvestDate: '2025-05-15',\n quantity: 25,\n image: 'https://images.unsplash.com/photo-1631221631381-1dc4df26e9fb?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 2,\n name: 'Organic Tomatoes (Wholesale)',\n description: 'Juicy, pesticide-free tomatoes grown in nutrient-rich soil. Ideal for restaurants and grocery stores.',\n price: 3.5,\n unit: 'per kg',\n category: 'vegetables',\n farmName: 'Sunshine Organics',\n farmerName: 'Maria Garcia',\n location: 'California, USA',\n harvestDate: '2025-06-01',\n quantity: 500,\n image: 'https://images.unsplash.com/photo-1592924357228-91a4daadcfea?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 3,\n name: 'Fresh Apples (Crate)',\n description: 'Crisp and sweet apples picked at peak ripeness. Sold in bulk crates for wholesale buyers.',\n price: 2.8,\n unit: 'per kg',\n category: 'fruits',\n farmName: 'Apple Valley Orchards',\n farmerName: 'David Wilson',\n location: 'Washington, USA',\n harvestDate: '2025-05-20',\n quantity: 750,\n image: 'https://images.unsplash.com/photo-1606757389667-45c2b7a5b311?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 4,\n name: 'Organic Kale (Bulk)',\n description: 'Nutrient-dense kale grown without synthetic pesticides. Freshly harvested and ready for distribution.',\n price: 4.2,\n unit: 'per kg',\n category: 'organic',\n farmName: 'Green Leaf Farms',\n farmerName: 'Sarah Johnson',\n location: 'Oregon, USA',\n harvestDate: '2025-06-05',\n quantity: 300,\n image: 'https://images.unsplash.com/photo-1618685550230-5edb21300bd8?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 5,\n name: 'Premium Rice (Wholesale)',\n description: 'Aromatic long-grain rice grown in optimal conditions. Direct from our paddies to your business.',\n price: 380,\n unit: 'per ton',\n category: 'grains',\n farmName: 'Delta Rice Plantation',\n farmerName: 'Michael Chen',\n location: 'Arkansas, USA',\n harvestDate: '2025-05-10',\n quantity: 30,\n image: 'https://images.unsplash.com/photo-1586201375761-83865001e8ac?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 6,\n name: 'Fresh Carrots (Bulk)',\n description: 'Sweet and crunchy carrots harvested daily. Sold in large quantities for wholesale buyers.',\n price: 2.2,\n unit: 'per kg',\n category: 'vegetables',\n farmName: 'Rainbow Valley Farm',\n farmerName: 'Lisa Peterson',\n location: 'Idaho, USA',\n harvestDate: '2025-06-02',\n quantity: 650,\n image: 'https://images.unsplash.com/photo-1633380110125-f9810a5c7d89?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 7,\n name: 'Organic Strawberries (Crate)',\n description: 'Sweet, juicy strawberries grown without synthetic chemicals. Fresh from our fields in bulk quantities.',\n price: 6.5,\n unit: 'per kg',\n category: 'organic',\n farmName: 'Berry Good Farms',\n farmerName: 'Jessica Williams',\n location: 'Florida, USA',\n harvestDate: '2025-05-25',\n quantity: 200,\n image: 'https://images.unsplash.com/photo-1601004890684-d8cbf643f5f2?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 8,\n name: 'Free-Range Chicken (Bulk)',\n description: 'Ethically raised free-range chickens. Hormone and antibiotic-free. Sold by weight for wholesale.',\n price: 7.8,\n unit: 'per kg',\n category: 'poultry',\n farmName: 'Happy Hen Farm',\n farmerName: 'Robert Johnson',\n location: 'Georgia, USA',\n harvestDate: '2025-06-10',\n quantity: 150,\n image: 'https://images.unsplash.com/photo-1548550023-2bdb3c5beed7?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 9,\n name: 'Grass-Fed Beef (Wholesale)',\n description: 'Premium grass-fed beef from free-ranging cattle. Ethically raised with no hormones or antibiotics.',\n price: 12.5,\n unit: 'per kg',\n category: 'livestock',\n farmName: 'Green Pastures Ranch',\n farmerName: 'Thomas Wilson',\n location: 'Texas, USA',\n harvestDate: '2025-06-05',\n quantity: 200,\n image: 'https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 10,\n name: 'Fresh Farm Milk (Bulk)',\n description: 'Creamy, nutritious milk from grass-fed cows. Available in bulk quantities for dairies and food processors.',\n price: 1.8,\n unit: 'per liter',\n category: 'dairy',\n farmName: 'Meadow Creek Dairy',\n farmerName: 'Emma Davis',\n location: 'Wisconsin, USA',\n harvestDate: '2025-06-08',\n quantity: 500,\n image: 'https://images.unsplash.com/photo-1563636619-e9143da7973b?q=80&w=2070&auto=format&fit=crop'\n }, {\n id: 11,\n name: 'Heritage Breed Pork (Wholesale)',\n description: 'Naturally raised heritage breed pork. Ethically sourced from pigs with outdoor access and natural diets.',\n price: 9.2,\n unit: 'per kg',\n category: 'livestock',\n farmName: 'Old World Farm',\n farmerName: 'James Miller',\n location: 'Iowa, USA',\n harvestDate: '2025-06-07',\n quantity: 180,\n image: 'https://images.unsplash.com/photo-1572715655204-47e297aa9fc2?q=80&w=2070&auto=format&fit=crop'\n }]);\n const [users,,] = useState([{\n id: 1,\n name: 'John Smith',\n type: 'farmer',\n email: 'farmer@example.com',\n password: 'password'\n }, {\n id: 2,\n name: 'Maria Garcia',\n type: 'farmer',\n email: 'maria@example.com',\n password: 'password'\n }, {\n id: 3,\n name: 'Alex Buyer',\n type: 'buyer',\n email: 'buyer@example.com',\n password: 'password'\n }, {\n id: 4,\n name: 'Sarah Johnson',\n type: 'farmer',\n email: 'sarah@example.com',\n password: 'password'\n }, {\n id: 5,\n name: 'Michael Chen',\n type: 'buyer',\n email: 'michael@example.com',\n password: 'password'\n }]);\n const [conversations, setConversations] = useState([{\n id: 1,\n participants: [1, 3],\n messages: [{\n id: 1,\n sender: 1,\n text: 'Hi, are you interested in my Premium Wheat?',\n timestamp: '2025-06-08T10:30:00'\n }, {\n id: 2,\n sender: 3,\n text: 'Yes, I would like to order 5 tons. When can you deliver?',\n timestamp: '2025-06-08T10:35:00'\n }, {\n id: 3,\n sender: 1,\n text: 'Great! I can deliver by June 15th. Does that work for you?',\n timestamp: '2025-06-08T10:40:00'\n }]\n }, {\n id: 2,\n participants: [2, 3],\n messages: [{\n id: 1,\n sender: 3,\n text: 'Hello, do you have organic tomatoes available?',\n timestamp: '2025-06-07T14:20:00'\n }, {\n id: 2,\n sender: 2,\n text: 'Yes, we have fresh organic tomatoes ready for delivery!',\n timestamp: '2025-06-07T14:25:00'\n }, {\n id: 3,\n sender: 3,\n text: 'Great! I need about 100kg for my restaurant.',\n timestamp: '2025-06-07T14:30:00'\n }]\n }]);\n const [productRequests, setProductRequests] = useState([{\n id: 1,\n buyerId: 3,\n buyerName: 'Alex Buyer',\n productName: 'Organic Potatoes',\n description: 'Looking for certified organic potatoes for a restaurant',\n quantity: '200kg',\n requestDate: '2025-06-05',\n status: 'open'\n }, {\n id: 2,\n buyerId: 5,\n buyerName: 'Michael Chen',\n productName: 'Fresh Corn',\n description: 'Need fresh sweet corn for upcoming food festival',\n quantity: '500kg',\n requestDate: '2025-06-04',\n status: 'open'\n }]);\n const [loggedInUser, setLoggedInUser] = useState(null);\n const navigateTo = page => {\n setPageHistory([...pageHistory, page]);\n setCurrentPage(page);\n };\n const goBack = () => {\n if (pageHistory.length > 1) {\n const newHistory = [...pageHistory];\n newHistory.pop();\n setPageHistory(newHistory);\n setCurrentPage(newHistory[newHistory.length - 1]);\n }\n };\n const handleLogin = (email, password) => {\n const user = users.find(u => u.email === email && u.password === password);\n if (user) {\n setLoggedInUser(user);\n setUserType(user.type);\n navigateTo(user.type === 'farmer' ? 'farmerDashboard' : 'marketplace');\n } else {\n alert('Invalid credentials!');\n }\n };\n const handleLogout = () => {\n setLoggedInUser(null);\n setUserType(null);\n setPageHistory(['login']);\n setCurrentPage('login');\n };\n const addToCart = product => {\n const existingItem = cart.find(item => item.id === product.id);\n if (existingItem) {\n setCart(cart.map(item => item.id === product.id ? {\n ...item,\n quantity: item.quantity + 1\n } : item));\n } else {\n setCart([...cart, {\n ...product,\n quantity: 1\n }]);\n }\n };\n const removeFromCart = productId => {\n setCart(cart.filter(item => item.id !== productId));\n };\n const updateCartItemQuantity = (productId, quantity) => {\n setCart(cart.map(item => item.id === productId ? {\n ...item,\n quantity\n } : item));\n };\n const addProduct = product => {\n const newProduct = {\n ...product,\n id: products.length + 1,\n farmerName: loggedInUser.name,\n farmerId: loggedInUser.id\n };\n setProducts([...products, newProduct]);\n };\n const sendMessage = (conversationId, text) => {\n const updatedConversations = conversations.map(conv => {\n if (conv.id === conversationId) {\n return {\n ...conv,\n messages: [...conv.messages, {\n id: conv.messages.length + 1,\n sender: loggedInUser.id,\n text,\n timestamp: new Date().toISOString()\n }]\n };\n }\n return conv;\n });\n setConversations(updatedConversations);\n };\n const startConversation = userId => {\n const existingConv = conversations.find(conv => conv.participants.includes(loggedInUser.id) && conv.participants.includes(userId));\n if (existingConv) {\n setActiveChatUser(userId);\n navigateTo('chat');\n return existingConv.id;\n }\n const newConv = {\n id: conversations.length + 1,\n participants: [loggedInUser.id, userId],\n messages: []\n };\n setConversations([...conversations, newConv]);\n setActiveChatUser(userId);\n navigateTo('chat');\n return newConv.id;\n };\n const addProductRequest = request => {\n const newRequest = {\n ...request,\n id: productRequests.length + 1,\n buyerId: loggedInUser.id,\n buyerName: loggedInUser.name,\n requestDate: new Date().toISOString().split('T')[0],\n status: 'open'\n };\n setProductRequests([...productRequests, newRequest]);\n };\n const filteredProducts = products.filter(product => {\n const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;\n const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || product.description.toLowerCase().includes(searchQuery.toLowerCase()) || product.farmName.toLowerCase().includes(searchQuery.toLowerCase());\n return matchesCategory && matchesSearch;\n });\n const handleCheckout = () => {\n if (!publicKey) {\n alert('Please connect your Solana wallet to continue with the purchase.');\n return;\n }\n navigateTo('checkoutInfo');\n };\n const processPayment = (paymentMethod = 'solana') => {\n setCurrentPage('processingPayment');\n let successRate;\n switch (paymentMethod) {\n case 'solana':\n successRate = 0.8;\n break;\n case 'paystack':\n successRate = 0.9;\n break;\n case 'remital':\n successRate = 0.85;\n break;\n default:\n successRate = 0.8;\n }\n setTimeout(() => {\n const isSuccess = Math.random() < successRate;\n setPaymentStatus(isSuccess ? 'success' : 'failed');\n setCurrentPage(isSuccess ? 'paymentSuccess' : 'paymentFailed');\n if (isSuccess) {\n setCart([]);\n }\n }, 3000);\n };\n const contextValue = {\n currentPage,\n navigateTo,\n goBack,\n loggedInUser,\n handleLogin,\n handleLogout,\n products: filteredProducts,\n addProduct,\n cart,\n addToCart,\n removeFromCart,\n updateCartItemQuantity,\n searchQuery,\n setSearchQuery,\n selectedCategory,\n setSelectedCategory,\n conversations,\n sendMessage,\n startConversation,\n activeChatUser,\n setActiveChatUser,\n productRequests,\n addProductRequest,\n handleCheckout,\n users,\n isNavOpen,\n setIsNavOpen,\n checkoutStep,\n setCheckoutStep,\n shippingInfo,\n setShippingInfo,\n processPayment,\n paymentStatus\n };\n const LoginPage = () => {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const {\n handleLogin\n } = useContext(AppContext);\n const handleSubmit = e => {\n e.preventDefault();\n handleLogin(email, password);\n };\n return

AgriChain

Farm to Table, Secured by Blockchain

\n \n \n \n

\n For demo: Use farmer@example.com or buyer@example.com with password: password\n

\n \n

\n Secure blockchain transactions powered by Solana\n

;\n };\n const Navigation = () => {\n const {\n currentPage,\n navigateTo,\n isNavOpen,\n setIsNavOpen,\n handleLogout,\n loggedInUser,\n cart\n } = useContext(AppContext);\n return

\n {}\n

\n \n

AgriChain

\n \n

\n {userType === 'buyer' && }\n \n {loggedInUser &&

\n \n \n

}\n

\n \n {}\n \n {isNavOpen && \n

\n \n

AgriChain

Blockchain Agricultural Marketplace

\n \n

\n {userType === 'buyer' && <>\n } label=\"Marketplace\" onClick={() => navigateTo('marketplace')} active={currentPage === 'marketplace'} />\n } label=\"Dashboard\" onClick={() => navigateTo('buyerDashboard')} active={currentPage === 'buyerDashboard'} />\n } label=\"Messages\" onClick={() => navigateTo('messages')} active={currentPage === 'messages'} />\n } label=\"Cart\" onClick={() => navigateTo('cart')} active={currentPage === 'cart'} />\n }\n \n {userType === 'farmer' && <>\n } label=\"Dashboard\" onClick={() => navigateTo('farmerDashboard')} active={currentPage === 'farmerDashboard'} />\n } label=\"My Products\" onClick={() => navigateTo('farmerProducts')} active={currentPage === 'farmerProducts'} />\n } label=\"Messages\" onClick={() => navigateTo('messages')} active={currentPage === 'messages'} />\n } label=\"Add Product\" onClick={() => navigateTo('addProduct')} active={currentPage === 'addProduct'} />\n }\n

\n \n

\n }\n \n

;\n };\n const NavItem = ({\n icon,\n label,\n onClick,\n active\n }) => ;\n const Marketplace = () => {\n const {\n products,\n addToCart,\n navigateTo,\n searchQuery,\n setSearchQuery,\n selectedCategory,\n setSelectedCategory\n } = useContext(AppContext);\n const categories = [{\n id: 'all',\n name: 'All Products'\n }, {\n id: 'vegetables',\n name: 'Vegetables'\n }, {\n id: 'fruits',\n name: 'Fruits'\n }, {\n id: 'grains',\n name: 'Grains'\n }, {\n id: 'livestock',\n name: 'Livestock'\n }, {\n id: 'poultry',\n name: 'Poultry'\n }, {\n id: 'dairy',\n name: 'Dairy'\n }, {\n id: 'organic',\n name: 'Organic'\n }];\n return

Agricultural Marketplace

\n \n

\n setSearchQuery(e.target.value)} placeholder=\"Search products...\" className=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" />\n \n

\n \n

\n {categories.map(category => )}\n

\n \n \n \n

\n {products.map(product =>

\n \n

{product.name}

${product.price} {product.unit}

\n \n {product.category}\n \n

\n \n

{product.description}

\n \n

Farm: {product.farmName}

Available: {product.quantity} {product.unit.split(' ')[1]}

\n \n

\n \n \n \n

)}\n

;\n };\n const ProductDetail = () => {\n const {\n products,\n addToCart,\n goBack,\n startConversation,\n users\n } = useContext(AppContext);\n const productId = parseInt(currentPage.split('/')[1]);\n const product = products.find(p => p.id === productId);\n if (!product) return

Product not found

;\n const farmer = users.find(u => u.name === product.farmerName);\n return

\n \n \n

\n \n

{product.name}

\n \n {product.category}\n \n

\n \n

${product.price} {product.unit}

{product.description}

\n \n

\n \n Farm: {product.farmName}\n

\n \n Farmer: {product.farmerName}\n

\n \n Harvest Date: {product.harvestDate}\n

\n \n Available Quantity: {product.quantity} {product.unit.split(' ')[1]}\n

\n \n

\n \n \n {farmer && }\n

;\n };\n const Cart = () => {\n const {\n cart,\n removeFromCart,\n updateCartItemQuantity,\n handleCheckout\n } = useContext(AppContext);\n const calculateTotal = () => {\n return cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);\n };\n return

Your Cart

\n \n {cart.length === 0 ?

\n \n

Your cart is empty

Add some products from the marketplace

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n {cart.map(item => \n \n \n \n \n \n )}\n \n

Product	Price	Quantity	Total	Actions
\n \n \n \n {item.name} \n {item.farmName} \n \n \n	${item.price}	\n \n \n {item.quantity}\n \n \n	${(item.price * item.quantity).toFixed(2)}	\n \n

\n \n

\n Shipping and taxes will be calculated at checkout\n

\n \n

\n Total: ${calculateTotal()}\n

\n \n

}\n

;\n };\n const AddProduct = () => {\n const {\n addProduct,\n navigateTo\n } = useContext(AppContext);\n const [formData, setFormData] = useState({\n name: '',\n description: '',\n price: '',\n unit: 'per kg',\n category: 'vegetables',\n farmName: '',\n location: '',\n harvestDate: '',\n quantity: '',\n image: ''\n });\n const [imageUrl, setImageUrl] = useState('');\n const [isUploading, setIsUploading] = useState(false);\n const handleChange = e => {\n const {\n name,\n value\n } = e.target;\n setFormData({\n ...formData,\n [name]: name === 'price' || name === 'quantity' ? parseFloat(value) || '' : value\n });\n };\n const handleImageChange = e => {\n setImageUrl(e.target.value);\n setFormData({\n ...formData,\n image: e.target.value\n });\n };\n const simulateImageUpload = () => {\n setIsUploading(true);\n setTimeout(() => {\n const farmImageUrls = ['https://images.unsplash.com/photo-1500937386664-56d1dfef3854?q=80&w=2070&auto=format&fit=crop', 'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?q=80&w=2070&auto=format&fit=crop', 'https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?q=80&w=2070&auto=format&fit=crop', 'https://images.unsplash.com/photo-1585182539364-bd7f3101be33?q=80&w=2070&auto=format&fit=crop'];\n const randomUrl = farmImageUrls[Math.floor(Math.random() * farmImageUrls.length)];\n setImageUrl(randomUrl);\n setFormData({\n ...formData,\n image: randomUrl\n });\n setIsUploading(false);\n }, 1500);\n };\n const handleSubmit = e => {\n e.preventDefault();\n if (!formData.image) {\n alert('Please add an image for your product');\n return;\n }\n addProduct(formData);\n alert('Product added successfully!');\n navigateTo('farmerProducts');\n };\n return

Add New Product

\n \n

\n \n Product Name\n \n \n

\n \n

\n \n Category\n \n \n

\n \n

\n \n Price\n \n

\n \n $\n \n \n \n

\n \n

\n \n Quantity Available\n \n \n

\n \n

\n \n Farm Name\n \n \n

\n \n

\n \n Location\n \n \n

\n \n

\n \n Harvest Date\n \n \n

\n \n

\n \n Description\n \n

\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Product Image\n              </label>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center space-x-4\">\n                  <input type=\"text\" placeholder=\"Enter image URL\" value={imageUrl} onChange={handleImageChange} className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" />\n                  <button type=\"button\" onClick={simulateImageUpload} className=\"px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center\" disabled={isUploading}>\n                    {isUploading ? <div className=\"flex items-center\">\n                        <div className=\"animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full mr-2\"></div>\n                        Uploading...\n                      </div> : 'Upload Image'}\n                  </button>\n                </div>\n                \n                {imageUrl && <div className=\"mt-2\">\n                    <div className=\"relative w-full h-48 bg-gray-100 rounded-lg overflow-hidden\">\n                      <img src={imageUrl} alt=\"Product preview\" className=\"w-full h-full object-cover\" />\n                    </div>\n                    <p className=\"text-xs text-gray-500 mt-1\">Preview of your product image</p>\n                  </div>}\n              </div>\n            </div>\n            \n            <div className=\"flex justify-end\">\n              <button type=\"button\" onClick={() => navigateTo('farmerProducts')} className=\"mr-4 px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition\">\n                Cancel\n              </button>\n              <button type=\"submit\" className=\"px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition\">\n                Add Product\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>;\n  };\n  const FarmerProducts = () => {\n    const {\n      products,\n      loggedInUser,\n      navigateTo\n    } = useContext(AppContext);\n    const farmerProducts = products.filter(p => p.farmerName === loggedInUser.name);\n    return <div className=\"container mx-auto p-4 max-w-7xl\">\n        <div className=\"flex justify-between items-center mb-6\">\n          <h1 className=\"text-3xl font-bold text-gray-800\">My Products</h1>\n          <button onClick={() => navigateTo('addProduct')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition flex items-center\">\n            <Plus size={18} className=\"mr-2\" />\n            Add New Product\n          </button>\n        </div>\n        \n        {farmerProducts.length === 0 ? <div className=\"bg-white rounded-xl shadow-md p-6 text-center\">\n            <Package size={64} className=\"mx-auto text-gray-300 mb-4\" />\n            <h2 className=\"text-xl font-semibold text-gray-700 mb-2\">You haven't added any products yet</h2>\n            <p className=\"text-gray-500 mb-4\">Start selling by adding your agricultural products</p>\n            <button onClick={() => navigateTo('addProduct')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition\">\n              Add Your First Product\n            </button>\n          </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            {farmerProducts.map(product => <div key={product.id} className=\"bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition\">\n                <div className=\"h-48 bg-cover bg-center\" style={{\n            backgroundImage: `url(${product.image})`\n          }} />\n                \n                <div className=\"p-4\">\n                  <div className=\"flex justify-between items-start\">\n                    <div>\n                      <h3 className=\"font-bold text-xl text-gray-800\">{product.name}</h3>\n                      <p className=\"text-green-600 font-semibold\">${product.price} {product.unit}</p>\n                    </div>\n                    <span className=\"px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full\">\n                      {product.category}\n                    </span>\n                  </div>\n                  \n                  <p className=\"text-gray-600 mt-2 text-sm line-clamp-2\">{product.description}</p>\n                  \n                  <div className=\"mt-3 text-sm text-gray-500\">\n                    <p>Available: {product.quantity} {product.unit.split(' ')[1]}</p>\n                    <p>Listed on: {product.harvestDate}</p>\n                  </div>\n                  \n                  <div className=\"mt-4 flex justify-end\">\n                    <button onClick={() => navigateTo(`product/${product.id}`)} className=\"text-blue-600 hover:text-blue-800 font-medium\">\n                      View Details\n                    </button>\n                  </div>\n                </div>\n              </div>)}\n          </div>}\n      </div>;\n  };\n  const Messages = () => {\n    const {\n      conversations,\n      loggedInUser,\n      navigateTo,\n      users\n    } = useContext(AppContext);\n    const userConversations = conversations.filter(conv => conv.participants.includes(loggedInUser.id));\n    const getOtherParticipantId = conversation => {\n      return conversation.participants.find(id => id !== loggedInUser.id);\n    };\n    const getOtherParticipantName = conversation => {\n      const participantId = getOtherParticipantId(conversation);\n      const user = users.find(u => u.id === participantId);\n      return user ? user.name : 'Unknown User';\n    };\n    const getLastMessage = conversation => {\n      if (conversation.messages.length === 0) return 'No messages yet';\n      return conversation.messages[conversation.messages.length - 1].text;\n    };\n    const getLastMessageTime = conversation => {\n      if (conversation.messages.length === 0) return '';\n      const timestamp = new Date(conversation.messages[conversation.messages.length - 1].timestamp);\n      return timestamp.toLocaleTimeString([], {\n        hour: '2-digit',\n        minute: '2-digit'\n      });\n    };\n    return <div className=\"container mx-auto p-4 max-w-4xl\">\n        <h1 className=\"text-3xl font-bold text-gray-800 mb-6\">Messages</h1>\n        \n        {userConversations.length === 0 ? <div className=\"bg-white rounded-xl shadow-md p-6 text-center\">\n            <MessageCircle size={64} className=\"mx-auto text-gray-300 mb-4\" />\n            <h2 className=\"text-xl font-semibold text-gray-700 mb-2\">No conversations yet</h2>\n            <p className=\"text-gray-500 mb-4\">\n              {userType === 'farmer' ? 'Start chatting with buyers interested in your products' : 'Message farmers to inquire about their products'}\n            </p>\n            <button onClick={() => navigateTo(userType === 'farmer' ? 'farmerDashboard' : 'marketplace')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition\">\n              {userType === 'farmer' ? 'Go to Dashboard' : 'Browse Marketplace'}\n            </button>\n          </div> : <div className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n            {userConversations.map(conversation => <div key={conversation.id} onClick={() => {\n          setActiveChatUser(getOtherParticipantId(conversation));\n          navigateTo('chat');\n        }} className=\"p-4 border-b hover:bg-gray-50 cursor-pointer transition\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center\">\n                    <div className=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold\">\n                      {getOtherParticipantName(conversation).charAt(0)}\n                    </div>\n                    <div className=\"ml-4\">\n                      <h3 className=\"font-semibold text-gray-800\">{getOtherParticipantName(conversation)}</h3>\n                      <p className=\"text-gray-500 text-sm line-clamp-1\">{getLastMessage(conversation)}</p>\n                    </div>\n                  </div>\n                  <div className=\"text-xs text-gray-400\">\n                    {getLastMessageTime(conversation)}\n                  </div>\n                </div>\n              </div>)}\n          </div>}\n      </div>;\n  };\n  const Chat = () => {\n    const {\n      conversations,\n      loggedInUser,\n      activeChatUser,\n      sendMessage,\n      users,\n      goBack\n    } = useContext(AppContext);\n    const [newMessage, setNewMessage] = useState('');\n    const conversation = conversations.find(conv => conv.participants.includes(loggedInUser.id) && conv.participants.includes(activeChatUser));\n    const otherUser = users.find(u => u.id === activeChatUser);\n    const handleSend = e => {\n      e.preventDefault();\n      if (newMessage.trim() === '') return;\n      sendMessage(conversation.id, newMessage);\n      setNewMessage('');\n    };\n    if (!conversation || !otherUser) return <div>Conversation not found</div>;\n    return <div className=\"container mx-auto p-4 max-w-4xl\">\n        <div className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n          <div className=\"bg-green-600 text-white p-4 flex items-center\">\n            <button onClick={goBack} className=\"mr-3\">\n              <ArrowLeft size={20} />\n            </button>\n            <div className=\"w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-600 font-bold\">\n              {otherUser.name.charAt(0)}\n            </div>\n            <div className=\"ml-3\">\n              <h2 className=\"font-semibold\">{otherUser.name}</h2>\n              <p className=\"text-xs text-green-100\">{otherUser.type === 'farmer' ? 'Farmer' : 'Buyer'}</p>\n            </div>\n          </div>\n          \n          <div className=\"h-96 overflow-y-auto p-4\">\n            {conversation.messages.length === 0 ? <div className=\"text-center text-gray-500 mt-10\">\n                <MessageCircle size={48} className=\"mx-auto text-gray-300 mb-3\" />\n                <p>No messages yet. Start the conversation!</p>\n              </div> : conversation.messages.map(message => {\n            const isMe = message.sender === loggedInUser.id;\n            return <div key={message.id} className={`mb-4 flex ${isMe ? 'justify-end' : 'justify-start'}`}>\n                    <div className={`max-w-xs md:max-w-md rounded-lg p-3 ${isMe ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                      <p>{message.text}</p>\n                      <p className={`text-xs mt-1 ${isMe ? 'text-green-200' : 'text-gray-500'}`}>\n                        {new Date(message.timestamp).toLocaleTimeString([], {\n                    hour: '2-digit',\n                    minute: '2-digit'\n                  })}\n                      </p>\n                    </div>\n                  </div>;\n          })}\n          </div>\n          \n          <form onSubmit={handleSend} className=\"border-t p-4 flex\">\n            <input type=\"text\" value={newMessage} onChange={e => setNewMessage(e.target.value)} placeholder=\"Type a message...\" className=\"flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-green-500 focus:border-green-500\" />\n            <button type=\"submit\" className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-r-lg transition\">\n              <Send size={18} />\n            </button>\n          </form>\n        </div>\n      </div>;\n  };\n  const ProductRequest = () => {\n    const {\n      addProductRequest,\n      navigateTo\n    } = useContext(AppContext);\n    const [formData, setFormData] = useState({\n      productName: '',\n      description: '',\n      quantity: ''\n    });\n    const handleChange = e => {\n      const {\n        name,\n        value\n      } = e.target;\n      setFormData({\n        ...formData,\n        [name]: value\n      });\n    };\n    const handleSubmit = e => {\n      e.preventDefault();\n      addProductRequest(formData);\n      alert('Product request submitted successfully!');\n      navigateTo('buyerDashboard');\n    };\n    return <div className=\"container mx-auto p-4 max-w-3xl\">\n        <div className=\"flex items-center mb-6\">\n          <button onClick={goBack} className=\"mr-3 text-blue-600\">\n            <ArrowLeft size={20} />\n          </button>\n          <h1 className=\"text-3xl font-bold text-gray-800\">Request a Product</h1>\n        </div>\n        \n        <div className=\"bg-white rounded-xl shadow-md p-6\">\n          <p className=\"text-gray-600 mb-6\">\n            Can't find what you're looking for? Submit a request and farmers in our network will be notified of your needs.\n          </p>\n          \n          <form onSubmit={handleSubmit} className=\"space-y-6\">\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Product Name\n              </label>\n              <input type=\"text\" name=\"productName\" value={formData.productName} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" placeholder=\"e.g., Organic Sweet Potatoes\" required />\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Quantity Needed\n              </label>\n              <input type=\"text\" name=\"quantity\" value={formData.quantity} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" placeholder=\"e.g., 500kg, 10 crates, 2 tons\" required />\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Description & Requirements\n              </label>\n              <textarea name=\"description\" value={formData.description} onChange={handleChange} rows=\"4\" className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" placeholder=\"Describe your requirements, quality standards, delivery timeframe, etc.\" required />\n            </div>\n            \n            <div className=\"flex justify-end\">\n              <button type=\"button\" onClick={() => navigateTo('marketplace')} className=\"mr-4 px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition\">\n                Cancel\n              </button>\n              <button type=\"submit\" className=\"px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition\">\n                Submit Request\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>;\n  };\n  const BuyerDashboard = () => {\n    const {\n      navigateTo,\n      cart,\n      productRequests\n    } = useContext(AppContext);\n    return <div className=\"container mx-auto p-4 max-w-7xl\">\n        <h1 className=\"text-3xl font-bold text-gray-800 mb-6\">Buyer Dashboard</h1>\n        \n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n              <ShoppingCart size={24} className=\"mr-2 text-green-600\" />\n              Shopping Cart\n            </h2>\n            \n            {cart.length === 0 ? <p className=\"text-gray-500\">Your cart is empty</p> : <>\n                <p className=\"text-gray-600 mb-4\">You have {cart.length} item(s) in your cart</p>\n                <button onClick={() => navigateTo('cart')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n                  View Cart\n                </button>\n              </>}\n          </div>\n          \n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n              <MessageCircle size={24} className=\"mr-2 text-green-600\" />\n              Messages\n            </h2>\n            \n            <button onClick={() => navigateTo('messages')} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n              View Messages\n            </button>\n          </div>\n        </div>\n        \n        <div className=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <h2 className=\"text-xl font-semibold text-gray-800 flex items-center\">\n              <Package size={24} className=\"mr-2 text-green-600\" />\n              My Product Requests\n            </h2>\n            \n            <button onClick={() => navigateTo('productRequest')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n              New Request\n            </button>\n          </div>\n          \n          {productRequests.length === 0 ? <p className=\"text-gray-500\">You haven't made any product requests yet</p> : <div className=\"overflow-x-auto\">\n              <table className=\"w-full\">\n                <thead>\n                  <tr className=\"border-b\">\n                    <th className=\"text-left pb-4\">Product</th>\n                    <th className=\"text-left pb-4\">Quantity</th>\n                    <th className=\"text-left pb-4\">Date</th>\n                    <th className=\"text-left pb-4\">Status</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {productRequests.map(request => <tr key={request.id} className=\"border-b\">\n                      <td className=\"py-4\">\n                        <div>\n                          <h3 className=\"font-semibold text-gray-800\">{request.productName}</h3>\n                          <p className=\"text-sm text-gray-500 line-clamp-1\">{request.description}</p>\n                        </div>\n                      </td>\n                      <td>{request.quantity}</td>\n                      <td>{request.requestDate}</td>\n                      <td>\n                        <span className=\"px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs\">\n                          {request.status}\n                        </span>\n                      </td>\n                    </tr>)}\n                </tbody>\n              </table>\n            </div>}\n        </div>\n        \n        <div className=\"bg-white rounded-xl shadow-md p-6\">\n          <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n            <ShoppingCart size={24} className=\"mr-2 text-green-600\" />\n            Featured Products\n          </h2>\n          \n          <button onClick={() => navigateTo('marketplace')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n            Browse Marketplace\n          </button>\n        </div>\n      </div>;\n  };\n  const FarmerDashboard = () => {\n    const {\n      navigateTo,\n      products,\n      loggedInUser,\n      productRequests\n    } = useContext(AppContext);\n    const farmerProducts = products.filter(p => p.farmerName === loggedInUser.name);\n    return <div className=\"container mx-auto p-4 max-w-7xl\">\n        <h1 className=\"text-3xl font-bold text-gray-800 mb-6\">Farmer Dashboard</h1>\n        \n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n              <Package size={24} className=\"mr-2 text-green-600\" />\n              My Products\n            </h2>\n            \n            <p className=\"text-gray-600 mb-4\">You have {farmerProducts.length} product(s) listed</p>\n            <div className=\"flex space-x-4\">\n              <button onClick={() => navigateTo('farmerProducts')} className=\"bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n                View Products\n              </button>\n              <button onClick={() => navigateTo('addProduct')} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n                Add Product\n              </button>\n            </div>\n          </div>\n          \n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n              <MessageCircle size={24} className=\"mr-2 text-green-600\" />\n              Messages\n            </h2>\n            \n            <button onClick={() => navigateTo('messages')} className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-sm\">\n              View Messages\n            </button>\n          </div>\n        </div>\n        \n        <div className=\"bg-white rounded-xl shadow-md p-6\">\n          <h2 className=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\n            <Package size={24} className=\"mr-2 text-green-600\" />\n            Buyer Requests\n          </h2>\n          \n          {productRequests.length === 0 ? <p className=\"text-gray-500\">No product requests at the moment</p> : <div className=\"overflow-x-auto\">\n              <table className=\"w-full\">\n                <thead>\n                  <tr className=\"border-b\">\n                    <th className=\"text-left pb-4\">Product</th>\n                    <th className=\"text-left pb-4\">Buyer</th>\n                    <th className=\"text-left pb-4\">Quantity</th>\n                    <th className=\"text-left pb-4\">Date</th>\n                    <th className=\"text-left pb-4\">Action</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {productRequests.map(request => <tr key={request.id} className=\"border-b\">\n                      <td className=\"py-4\">\n                        <div>\n                          <h3 className=\"font-semibold text-gray-800\">{request.productName}</h3>\n                          <p className=\"text-sm text-gray-500 line-clamp-1\">{request.description}</p>\n                        </div>\n                      </td>\n                      <td>{request.buyerName}</td>\n                      <td>{request.quantity}</td>\n                      <td>{request.requestDate}</td>\n                      <td>\n                        <button onClick={() => startConversation(request.buyerId)} className=\"px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs hover:bg-green-200 transition\">\n                          Contact Buyer\n                        </button>\n                      </td>\n                    </tr>)}\n                </tbody>\n              </table>\n            </div>}\n        </div>\n      </div>;\n  };\n  const CheckoutInfoPage = () => {\n    const {\n      shippingInfo,\n      setShippingInfo,\n      navigateTo\n    } = useContext(AppContext);\n    const [mapValidated, setMapValidated] = useState(false);\n    const [suggestedAddress, setSuggestedAddress] = useState(null);\n    const handleChange = e => {\n      const {\n        name,\n        value\n      } = e.target;\n      setShippingInfo({\n        ...shippingInfo,\n        [name]: value\n      });\n    };\n    const validateAddress = () => {\n      setTimeout(() => {\n        const isValidOnMap = Math.random() > 0.3;\n        if (isValidOnMap) {\n          setMapValidated(true);\n          setSuggestedAddress(null);\n        } else {\n          const suggestion = {\n            address: shippingInfo.address.replace(/\\d+/, match => parseInt(match) + 2),\n            city: shippingInfo.city,\n            state: shippingInfo.state,\n            zipCode: shippingInfo.zipCode\n          };\n          setSuggestedAddress(suggestion);\n        }\n      }, 1500);\n    };\n    const handleSubmit = e => {\n      e.preventDefault();\n      if (!mapValidated) {\n        validateAddress();\n        return;\n      }\n      navigateTo('checkoutPayment');\n    };\n    const useSuggested = () => {\n      setShippingInfo({\n        ...shippingInfo,\n        address: suggestedAddress.address\n      });\n      setMapValidated(true);\n      setSuggestedAddress(null);\n    };\n    return <div className=\"container mx-auto p-4 max-w-3xl\">\n        <h1 className=\"text-3xl font-bold text-gray-800 mb-6\">Shipping Information</h1>\n        \n        <div className=\"bg-white rounded-xl shadow-md p-6\">\n          <form onSubmit={handleSubmit} className=\"space-y-6\">\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Email Address\n                </label>\n                <input type=\"email\" name=\"email\" value={shippingInfo.email} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n              </div>\n              \n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Phone Number\n                </label>\n                <input type=\"tel\" name=\"phone\" value={shippingInfo.phone} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n              </div>\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Street Address\n              </label>\n              <input type=\"text\" name=\"address\" value={shippingInfo.address} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n            </div>\n            \n            <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  City\n                </label>\n                <input type=\"text\" name=\"city\" value={shippingInfo.city} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n              </div>\n              \n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  State\n                </label>\n                <input type=\"text\" name=\"state\" value={shippingInfo.state} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n              </div>\n              \n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Zip Code\n                </label>\n                <input type=\"text\" name=\"zipCode\" value={shippingInfo.zipCode} onChange={handleChange} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" required />\n              </div>\n            </div>\n            \n            {suggestedAddress && <div className=\"p-4 bg-yellow-50 border border-yellow-200 rounded-lg\">\n                <div className=\"flex items-start\">\n                  <MapPin className=\"text-yellow-600 mt-1 mr-2\" size={20} />\n                  <div>\n                    <h3 className=\"text-sm font-medium text-yellow-800\">Address not found exactly as entered</h3>\n                    <p className=\"text-sm text-yellow-600 mt-1\">We found a similar address:</p>\n                    <p className=\"text-sm font-medium mt-1\">\n                      {suggestedAddress.address}, {suggestedAddress.city}, {suggestedAddress.state} {suggestedAddress.zipCode}\n                    </p>\n                    <button type=\"button\" onClick={useSuggested} className=\"mt-2 text-sm bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-1 rounded\">\n                      Use this address\n                    </button>\n                  </div>\n                </div>\n              </div>}\n            \n            {mapValidated && <div className=\"p-4 bg-green-50 border border-green-200 rounded-lg\">\n                <div className=\"flex items-center\">\n                  <Check className=\"text-green-600 mr-2\" size={20} />\n                  <p className=\"text-sm text-green-800\">Address validated successfully</p>\n                </div>\n              </div>}\n            \n            <div className=\"flex justify-between\">\n              <button type=\"button\" onClick={() => navigateTo('cart')} className=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition\">\n                Back to Cart\n              </button>\n              \n              <button type=\"submit\" className=\"px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition flex items-center\">\n                {!mapValidated ? <>Validate Address <MapPin size={18} className=\"ml-2\" /></> : <>Continue to Payment <ArrowLeft size={18} className=\"ml-2 rotate-180\" /></>}\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>;\n  };\n  const CheckoutPaymentPage = () => {\n    const {\n      cart,\n      shippingInfo,\n      processPayment,\n      navigateTo\n    } = useContext(AppContext);\n    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('solana');\n    const calculateTotal = () => {\n      return cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);\n    };\n    const handlePaymentMethodChange = method => {\n      setSelectedPaymentMethod(method);\n    };\n    return <div className=\"container mx-auto p-4 max-w-3xl\">\n        <h1 className=\"text-3xl font-bold text-gray-800 mb-6\">Review & Payment</h1>\n        \n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4\">Order Summary</h2>\n            \n            <div className=\"space-y-4\">\n              {cart.map(item => <div key={item.id} className=\"flex items-center space-x-4\">\n                  <div className=\"w-16 h-16 rounded-md bg-cover bg-center\" style={{\n                backgroundImage: `url(${item.image})`\n              }} />\n                  <div className=\"flex-1\">\n                    <h3 className=\"font-semibold text-gray-800\">{item.name}</h3>\n                    <p className=\"text-sm text-gray-500\">Qty: {item.quantity} × ${item.price}</p>\n                  </div>\n                  <div className=\"font-medium text-gray-800\">\n                    ${(item.price * item.quantity).toFixed(2)}\n                  </div>\n                </div>)}\n            </div>\n            \n            <div className=\"mt-6 pt-4 border-t\">\n              <div className=\"flex justify-between font-semibold text-lg\">\n                <span>Total</span>\n                <span className=\"text-green-600\">${calculateTotal()}</span>\n              </div>\n            </div>\n          </div>\n          \n          <div className=\"bg-white rounded-xl shadow-md p-6\">\n            <h2 className=\"text-xl font-semibold text-gray-800 mb-4\">Shipping Address</h2>\n            \n            <address className=\"not-italic text-gray-700 space-y-2\">\n              <p>{shippingInfo.email}</p>\n              <p>{shippingInfo.phone}</p>\n              <p>{shippingInfo.address}</p>\n              <p>{shippingInfo.city}, {shippingInfo.state} {shippingInfo.zipCode}</p>\n            </address>\n            \n            <div className=\"mt-8\">\n              <h2 className=\"text-xl font-semibold text-gray-800 mb-4\">Payment Method</h2>\n              \n              <div className=\"grid grid-cols-1 md:grid-cols-3 gap-3\">\n                <div onClick={() => handlePaymentMethodChange('solana')} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedPaymentMethod === 'solana' ? 'border-green-500 bg-green-50 shadow-md' : 'border-gray-200 bg-gray-50 hover:border-green-300'}`}>\n                  <div className=\"flex items-center space-x-3\">\n                    <Wallet size={20} className={selectedPaymentMethod === 'solana' ? 'text-green-600' : 'text-gray-500'} />\n                    <div>\n                      <p className=\"font-medium text-gray-800\">Solana Wallet</p>\n                      <p className=\"text-xs text-gray-500\">\n                        {publicKey ? publicKey.toString().slice(0, 6) + '...' + publicKey.toString().slice(-4) : 'Connect wallet'}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n                \n                <div onClick={() => handlePaymentMethodChange('paystack')} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedPaymentMethod === 'paystack' ? 'border-green-500 bg-green-50 shadow-md' : 'border-gray-200 bg-gray-50 hover:border-green-300'}`}>\n                  <div className=\"flex items-center space-x-3\">\n                    <DollarSign size={20} className={selectedPaymentMethod === 'paystack' ? 'text-green-600' : 'text-gray-500'} />\n                    <div>\n                      <p className=\"font-medium text-gray-800\">Paystack</p>\n                      <p className=\"text-xs text-gray-500\">Credit/Debit card</p>\n                    </div>\n                  </div>\n                </div>\n                \n                <div onClick={() => handlePaymentMethodChange('remital')} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedPaymentMethod === 'remital' ? 'border-green-500 bg-green-50 shadow-md' : 'border-gray-200 bg-gray-50 hover:border-green-300'}`}>\n                  <div className=\"flex items-center space-x-3\">\n                    <MapPin size={20} className={selectedPaymentMethod === 'remital' ? 'text-green-600' : 'text-gray-500'} />\n                    <div>\n                      <p className=\"font-medium text-gray-800\">Remital</p>\n                      <p className=\"text-xs text-gray-500\">Local bank transfer</p>\n                    </div>\n                  </div>\n                </div>\n                \n                <div onClick={() => handlePaymentMethodChange('rrr')} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedPaymentMethod === 'rrr' ? 'border-green-500 bg-green-50 shadow-md' : 'border-gray-200 bg-gray-50 hover:border-green-300'}`}>\n                  <div className=\"flex items-center space-x-3\">\n                    <DollarSign size={20} className={selectedPaymentMethod === 'rrr' ? 'text-green-600' : 'text-gray-500'} />\n                    <div>\n                      <p className=\"font-medium text-gray-800\">RRR Payment</p>\n                      <p className=\"text-xs text-gray-500\">Remita Retrieval Reference</p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              {selectedPaymentMethod === 'paystack' && <div className=\"mt-4 p-4 bg-white border border-gray-200 rounded-lg\">\n                  <h3 className=\"text-sm font-medium text-gray-700 mb-3\">Card Details</h3>\n                  <div className=\"space-y-3\">\n                    <input type=\"text\" placeholder=\"Card Number\" className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" />\n                    <div className=\"grid grid-cols-2 gap-3\">\n                      <input type=\"text\" placeholder=\"MM/YY\" className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" />\n                      <input type=\"text\" placeholder=\"CVV\" className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500\" />\n                    </div>\n                  </div>\n                </div>}\n              \n              {selectedPaymentMethod === 'remital' && <div className=\"mt-4 p-4 bg-white border border-gray-200 rounded-lg\">\n                  <h3 className=\"text-sm font-medium text-gray-700 mb-2\">Bank Transfer Details</h3>\n                  <p className=\"text-sm text-gray-600\">Transfer the exact amount to:</p>\n                  <div className=\"mt-2 p-3 bg-gray-50 rounded border border-gray-200\">\n                    <p className=\"font-medium\">AgriChain Markets Ltd</p>\n                    <p className=\"text-sm\">Account: 0123456789</p>\n                    <p className=\"text-sm\">Bank: Remital Bank</p>\n                    <p className=\"text-sm mt-2\">Amount: ${calculateTotal()}</p>\n                    <p className=\"text-xs text-gray-500 mt-2\">Please use your order number as reference</p>\n                  </div>\n                </div>}\n                \n              {selectedPaymentMethod === 'rrr' && <div className=\"mt-4 p-4 bg-white border border-gray-200 rounded-lg\">\n                  <h3 className=\"text-sm font-medium text-gray-700 mb-2\">RRR Payment Details</h3>\n                  <div className=\"mt-2 p-3 bg-gray-50 rounded border border-gray-200\">\n                    <p className=\"font-medium text-center\">Your RRR Number</p>\n                    <p className=\"text-xl font-bold text-center my-2\">2825630284</p>\n                    <div className=\"flex justify-center my-3\">\n                      <div className=\"h-24 w-24 bg-gray-200 flex items-center justify-center\">\n                        <span className=\"text-gray-500 text-xs\">QR Code</span>\n                      </div>\n                    </div>\n                    <p className=\"text-sm text-center\">Amount: ${calculateTotal()}</p>\n                    <p className=\"text-xs text-gray-500 mt-2 text-center\">Pay with this RRR at any bank or through your banking app</p>\n                  </div>\n                </div>}\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"mt-8 flex justify-between\">\n          <button onClick={() => navigateTo('checkoutInfo')} className=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition\">\n            Back\n          </button>\n          \n          <button onClick={() => processPayment(selectedPaymentMethod)} className=\"px-8 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition flex items-center\">\n            {selectedPaymentMethod === 'solana' ? 'Pay with Solana' : selectedPaymentMethod === 'paystack' ? 'Pay with Card' : selectedPaymentMethod === 'rrr' ? 'Verify RRR Payment' : 'Complete Bank Transfer'}\n          </button>\n        </div>\n      </div>;\n  };\n  const ProcessingPaymentPage = () => {\n    return <div className=\"min-h-screen flex items-center justify-center bg-white\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-20 w-20 border-b-2 border-green-600 mx-auto mb-8\"></div>\n          <h1 className=\"text-2xl font-bold text-gray-800 mb-2\">Processing Your Payment</h1>\n          <p className=\"text-gray-600\">Please wait while we securely process your transaction...</p>\n        </div>\n      </div>;\n  };\n  const PaymentSuccessPage = () => {\n    const {\n      navigateTo\n    } = useContext(AppContext);\n    return <div className=\"min-h-screen flex items-center justify-center bg-white\">\n        <div className=\"text-center max-w-md p-6\">\n          <div className=\"w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-8\">\n            <Check size={40} className=\"text-green-600\" />\n          </div>\n          <h1 className=\"text-2xl font-bold text-gray-800 mb-2\">Payment Successful!</h1>\n          <p className=\"text-gray-600 mb-8\">Your order has been placed and will be processed shortly. We've sent a confirmation to your email.</p>\n          \n          <button onClick={() => navigateTo('buyerDashboard')} className=\"px-8 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition\">\n            Go to Dashboard\n          </button>\n        </div>\n      </div>;\n  };\n  const PaymentFailedPage = () => {\n    const {\n      navigateTo\n    } = useContext(AppContext);\n    return <div className=\"min-h-screen flex items-center justify-center bg-white\">\n        <div className=\"text-center max-w-md p-6\">\n          <div className=\"w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-8\">\n            <AlertTriangle size={40} className=\"text-red-600\" />\n          </div>\n          <h1 className=\"text-2xl font-bold text-gray-800 mb-2\">Payment Failed</h1>\n          <p className=\"text-gray-600 mb-8\">There was an issue processing your payment. Please try again or use a different payment method.</p>\n          \n          <div className=\"flex flex-col sm:flex-row justify-center gap-4\">\n            <button onClick={() => navigateTo('checkoutPayment')} className=\"px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold transition\">\n              Try Again\n            </button>\n            \n            <button onClick={() => navigateTo('cart')} className=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition\">\n              Back to Cart\n            </button>\n          </div>\n        </div>\n      </div>;\n  };\n  const renderPage = () => {\n    if (currentPage === 'login') return <LoginPage />;\n    const pages = {\n      marketplace: <Marketplace />,\n      cart: <Cart />,\n      messages: <Messages />,\n      chat: <Chat />,\n      addProduct: <AddProduct />,\n      farmerProducts: <FarmerProducts />,\n      productRequest: <ProductRequest />,\n      buyerDashboard: <BuyerDashboard />,\n      farmerDashboard: <FarmerDashboard />,\n      checkoutInfo: <CheckoutInfoPage />,\n      checkoutPayment: <CheckoutPaymentPage />,\n      processingPayment: <ProcessingPaymentPage />,\n      paymentSuccess: <PaymentSuccessPage />,\n      paymentFailed: <PaymentFailedPage />\n    };\n    if (currentPage.startsWith('product/')) {\n      return <ProductDetail />;\n    }\n    return pages[currentPage] || <div>Page not found</div>;\n  };\n  return <AppContext.Provider value={contextValue}>\n      <div className=\"min-h-screen bg-gray-50\">\n        {currentPage !== 'login' && <Navigation />}\n        <div className={currentPage !== 'login' ? 'pt-16' : ''}>\n          {renderPage()}\n        </div>\n      </div>\n    </AppContext.Provider>;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"react-router-dom\":\"6.18.0\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_18":80,"_81":80,"_82":83,"_84":85,"_86":87,"_88":-5,"_89":-5,"_90":91,"_92":93,"_70":71},"buidl","symbol","price",0.002912,"marketcap",1550577,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",321,"appCount",2184,"upstreamApp","isLordOfDev","analytics",[98,102,104,106,108,110,112,114,116,118,120,122,124,126],{"_99":100,"_101":58},"day","2025-07-12","runCount",{"_99":103,"_101":58},"2025-07-13",{"_99":105,"_101":58},"2025-07-14",{"_99":107,"_101":58},"2025-07-15",{"_99":109,"_101":58},"2025-07-16",{"_99":111,"_101":58},"2025-07-17",{"_99":113,"_101":58},"2025-07-18",{"_99":115,"_101":58},"2025-07-19",{"_99":117,"_101":58},"2025-07-20",{"_99":119,"_101":58},"2025-07-21",{"_99":121,"_101":58},"2025-07-22",{"_99":123,"_101":58},"2025-07-23",{"_99":125,"_101":58},"2025-07-24",{"_99":127,"_101":58},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/bbd88486be414fb9cef7/0a31134a.webp","isDevbase","actionData","errors"]
</article></body></html>

say something