From ac1c73e47f17c2b28dd3e586309c100ac11423c4 Mon Sep 17 00:00:00 2001 From: Arjin Albay Date: Tue, 7 Apr 2026 16:17:45 +0300 Subject: [PATCH 01/14] feat: add donation and product needs page with filtering and progress tracking --- pages/bagis.js | 456 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 456 insertions(+) create mode 100644 pages/bagis.js diff --git a/pages/bagis.js b/pages/bagis.js new file mode 100644 index 000000000..76c9d0523 --- /dev/null +++ b/pages/bagis.js @@ -0,0 +1,456 @@ +import { useState, useMemo } from 'react' +import { + Box, + Button, + Container, + Heading, + Text, + Grid, + Badge, + Card, + Flex, + Label, + Checkbox +} from 'theme-ui' +import Head from 'next/head' +import Meta from '@happyhackingspace/meta' +import Nav from '../components/nav' +import BGImg from '../components/background-image' +import ForceTheme from '../components/force-theme' +import Footer from '../components/footer' +import Image from 'next/image' + +// General Support Card Component +const DonationCard = ({ title, description, payment_link, contact_required }) => ( + + + {title} + + + {description} + + + {payment_link && ( + + )} + {contact_required && ( + + )} + + +) + +// Product Need Card Component +const ProductCard = ({ image, title, category, description, current_qty, max_qty, link, urgency, is_completed }) => { + const progress = Math.min(100, (current_qty / max_qty) * 100) + + return ( + + {urgency === 'Acil' && !is_completed && ( + + Urgent + + )} + + {image && ( + {title} + )} + {is_completed && ( + + + Completed + + + )} + + + + {category} + + + {title} + + + {description} + + + + + Progress + {current_qty} / {max_qty} + + + + + + + + + ) +} + +// Helper Component: Tab Button +const TabButton = ({ active, children, onClick }) => ( + +) + +export default function BagisPage({ supportNeeds = [], productNeeds = [] }) { + const [activeTab, setActiveTab] = useState('products') + const [selectedCategory, setSelectedCategory] = useState('All') + const [showOnlyUrgent, setShowOnlyUrgent] = useState(false) + + // Dynamically extract categories from product list + const categories = useMemo(() => { + const cats = productNeeds.map(p => p.category).filter(Boolean) + return ['All', ...[...new Set(cats)].sort()] + }, [productNeeds]) + + // Filtered product list + const filteredProducts = useMemo(() => { + return productNeeds.filter(p => { + const categoryMatch = selectedCategory === 'All' || p.category === selectedCategory + const urgencyMatch = !showOnlyUrgent || p.urgency === 'Acil' || p.urgency === 'Urgent' + return categoryMatch && urgencyMatch + }) + }, [productNeeds, selectedCategory, showOnlyUrgent]) + + return ( + <> + + +