Create a complete, production-ready PRIVATE web application called "Gulf Community Barju (GCB)". TECH STACK: - Frontend: Flutter Web (preferred) OR React.js (if better for web) - Backend: Firebase (FREE Spark Plan only) - Firebase Authentication - Cloud Firestore - Firebase Storage - Firebase Hosting IMPORTANT RULES: - This is NOT a payment system - No online transactions - This is a PRIVATE internal system - Only Admin can input data - Members have view-only access - All data is manually entered by admin ------------------------------------- π AUTHENTICATION SYSTEM - No public signup - Admin creates users - Login using Email & Password - Role-based access: - Super Admin - Admin - Member ------------------------------------- π₯ MEMBER MANAGEMENT Admin can: - Add, Edit, Soft Delete members Fields: - Full Name - Country (Qatar, Saudi, UAE, Kuwait, Malaysia, Oman, Nepal) - Phone Number - Profile Photo - Member ID - Family Group (optional) - isDeleted flag ------------------------------------- π° DONATION SYSTEM (RECORD ONLY) Admin manually records donations. Fields: - Member ID / Name - Country - Amount (Original) - Currency (QAR, AED, KWD, SAR, OMR, MYR, NPR) - Conversion Rate (manual input) - Final Amount (NPR) - Date - Receipt ID (auto-generated) - Proof Image (optional) - Entered By Rules: - No automatic currency conversion - Store both original and NPR values ------------------------------------- πΈ EXPENSE MANAGEMENT Admin can: - Add expenses - Link expenses to projects Fields: - Amount (NPR) - Category - Description - Date - File uploads ------------------------------------- π PROJECT MANAGEMENT Admin can: - Create projects - Set budget - Track progress Fields: - Project Name - Budget - Used Amount - Progress % - Linked expenses - Files ------------------------------------- π DASHBOARD Show: - Total Donations (NPR) - Total Expenses - Remaining Balance Include charts: - Monthly donations (line chart) - Expense breakdown (pie chart) ------------------------------------- π TRANSPARENCY SYSTEM Members can view: - All donation records - Donor name - Amount (original + NPR) - Date Include: - Search by name - Filter by country/date ------------------------------------- π AUDIT LOG SYSTEM Track all actions: - Add/Edit/Delete - Currency updates - Login activity Fields: - action - user - old value - new value - timestamp ------------------------------------- π SOFT DELETE SYSTEM Use: - isDeleted = true - deletedAt - deletedBy ------------------------------------- π NOTIFICATIONS - Simple announcement system - Display inside dashboard ------------------------------------- π REPORTS Generate: - Member report - Monthly report - Expense report Export: - PDF - Excel (basic) ------------------------------------- π¨ UI DESIGN - Clean, simple, village-friendly UI - Sidebar dashboard layout - Mobile responsive Colors: - Primary: #0F9D58 - Secondary: #1A237E - Background: #F5F7FA UI Features: - Card-based dashboard - Tables with search & filter - Forms with validation - Large readable text ------------------------------------- π± REQUIRED PAGES - Login Page - Dashboard - Members Page - Donations Page - Projects Page - Expenses Page - Reports Page - Notifications Page - Profile Page - Admin Panel - Audit Logs Page ------------------------------------- π FIRESTORE DATABASE STRUCTURE Collections: - users - members - donations - expenses - projects - currency_rates - audit_logs - announcements ------------------------------------- π SECURITY RULES - Only authenticated users can read - Only admin can write - Role-based access control ------------------------------------- π DEPLOYMENT - Build for web - Deploy using Firebase Hosting (FREE) ------------------------------------- β‘ EXTRA REQUIREMENTS - Clean and modular code - Proper folder structure - Error handling - Input validation - Easy for beginners to understand ------------------------------------- FINAL OUTPUT: - Complete working website code - Firebase setup instructions - Step-by-step deployment guide - Ready to run project
Sign in to leave a comment
No page designs yet.
The Design Agent will generate JSX pages automatically after user flows are created.
No comments yet. Be the first!