easc-cli 1.1.30 → 1.1.33

package/charity-website/README.md

@@ -0,0 +1,252 @@
+# CharityHub - A Modern Charity Donation Platform
+
+A comprehensive charity website built with vanilla HTML, CSS, JavaScript, and Supabase for the backend. This platform enables users to discover charities, make donations, and provides administrators with tools to manage the platform.
+
+## Features
+
+### For Users
+
+- 🏠 **Responsive Home Page** with hero section and live statistics
+- 🔍 **Charity Discovery** with search, filtering, and categorization
+- 💝 **Secure Donation System** with multiple payment options
+- 📊 **Progress Tracking** for each charity's fundraising goals
+- 📱 **Mobile-First Design** that works on all devices
+- ⭐ **Featured Charities** highlighting important causes
+
+### For Administrators
+
+- 📈 **Dashboard Analytics** with real-time statistics and charts
+- 🏢 **Charity Management** (add, edit, delete charities)
+- 💸 **Donation Tracking** and management
+- 🏷️ **Category Management** for organizing causes
+- ⚙️ **Settings Configuration** for platform customization
+- 📊 **Data Export** capabilities
+
+## Technology Stack
+
+- **Frontend**: HTML5, CSS3, Vanilla JavaScript
+- **Backend**: Supabase (PostgreSQL + Real-time APIs)
+- **Database**: PostgreSQL with Row Level Security (RLS)
+- **Charts**: Chart.js for data visualization
+- **Icons**: Font Awesome
+- **Styling**: Custom CSS with CSS Grid and Flexbox
+
+## Project Structure
+
+```
+charity-website/
+├── public/
+│   └── index.html              # Main website
+├── admin/
+│   └── index.html              # Admin dashboard
+├── src/
+│   ├── css/
+│   │   ├── style.css           # Main website styles
+│   │   └── admin.css           # Admin dashboard styles
+│   └── js/
+│       ├── app.js              # Main website JavaScript
+│       └── admin.js            # Admin dashboard JavaScript
+├── data/                       # Static data (if needed)
+└── README.md                   # This file
+```
+
+## Database Schema
+
+### Tables
+
+- **charities**: Information about charitable organizations
+- **donations**: Donation records and transactions
+- **categories**: Charity categories for organization
+
+### Key Features
+
+- Row Level Security (RLS) for data protection
+- Real-time updates using Supabase subscriptions
+- Automatic timestamp tracking
+- Foreign key relationships for data integrity
+
+## Getting Started
+
+### Prerequisites
+
+- A Supabase account and project
+- Modern web browser
+- Local web server (optional, for development)
+
+### Setup Instructions
+
+1. **Clone or download the project files**
+
+2. **Set up Supabase Database**
+
+   ```sql
+   -- Run the provided migration scripts in your Supabase project
+   -- The schema includes charities, donations, and categories tables
+   ```
+
+3. **Configure Supabase Connection**
+   - Update the SUPABASE_URL and SUPABASE_ANON_KEY in both JavaScript files
+   - These can be found in your Supabase project settings
+
+4. **Run the Website**
+   - Option 1: Open `public/index.html` directly in your browser
+   - Option 2: Use a local web server like `live-server` or Python's HTTP server
+
+5. **Access Admin Dashboard**
+   - Navigate to `admin/index.html`
+   - Use the admin interface to manage charities and donations
+
+## Configuration
+
+### Supabase Setup
+
+1. Create a new Supabase project
+2. Run the provided SQL migrations
+3. Enable Row Level Security (RLS)
+4. Configure authentication settings if needed
+5. Get your project URL and anon key
+6. Update the JavaScript files with your credentials
+
+### Environment Variables
+
+For production deployment, consider using environment variables:
+
+```javascript
+const SUPABASE_URL = process.env.SUPABASE_URL || "your-url"
+const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY || "your-key"
+```
+
+## Features in Detail
+
+### Charity Management
+
+- Add/edit/delete charities
+- Upload images and set goals
+- Track fundraising progress
+- Categorize by cause type
+- Activate/deactivate charities
+
+### Donation System
+
+- Secure donation processing
+- Multiple amount options
+- Anonymous donation support
+- Donor messages and recognition
+- Real-time progress updates
+
+### Search & Discovery
+
+- Full-text search across charities
+- Filter by category and progress
+- Sort by various criteria
+- Responsive grid layout
+- Load more functionality
+
+### Admin Dashboard
+
+- Real-time statistics
+- Interactive charts
+- Recent activity feed
+- Data management tools
+- Export functionality
+
+## Security Features
+
+- Row Level Security (RLS) on all tables
+- Input validation and sanitization
+- XSS protection
+- Secure API endpoints
+- Anonymous donation options
+- Data encryption in transit
+
+## Performance Optimizations
+
+- Lazy loading for images
+- Debounced search functionality
+- Efficient database queries
+- Minimal external dependencies
+- Optimized CSS and JavaScript
+- Responsive image handling
+
+## Browser Support
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## Customization
+
+### Adding New Features
+
+1. Update the database schema if needed
+2. Modify the frontend components
+3. Update the admin dashboard
+4. Test thoroughly
+
+### Styling
+
+- All styles are in `src/css/`
+- Uses CSS custom properties for theming
+- Responsive design with mobile-first approach
+- Easy to customize colors and layouts
+
+### Database Extensions
+
+- Add new tables as needed
+- Update RLS policies
+- Modify the JavaScript API calls
+- Update admin interface
+
+## Deployment Options
+
+### Static Hosting
+
+- Netlify
+- Vercel
+- GitHub Pages
+- AWS S3 + CloudFront
+
+### Server Options
+
+- Any static web server
+- CDN for better performance
+- Domain and SSL configuration
+
+## Contributing
+
+1. Fork the project
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## Support
+
+For questions or support:
+
+- Check the documentation
+- Review the code comments
+- Test with the provided sample data
+- Ensure Supabase is properly configured
+
+## License
+
+This project is open source and available under the MIT License.
+
+## Future Enhancements
+
+- [ ] Payment gateway integration (Stripe, PayPal)
+- [ ] Email notifications for donors
+- [ ] Social sharing features
+- [ ] Advanced analytics and reporting
+- [ ] Multi-language support
+- [ ] Recurring donations
+- [ ] Charity verification system
+- [ ] Mobile app development
+- [ ] API for third-party integrations
+
+---
+
+**Built with ❤️ for making the world a better place**

package/charity-website/admin/index.html

@@ -0,0 +1,299 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Dashboard - CharityHub</title>
+    <link rel="stylesheet" href="../src/css/admin.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="admin-container">
+      <!-- Sidebar -->
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <i class="fas fa-heart"></i>
+          <span>CharityHub Admin</span>
+        </div>
+        <nav class="sidebar-nav">
+          <ul>
+            <li>
+              <a href="#dashboard" class="nav-link active" data-section="dashboard"
+                ><i class="fas fa-tachometer-alt"></i> Dashboard</a
+              >
+            </li>
+            <li>
+              <a href="#charities" class="nav-link" data-section="charities"
+                ><i class="fas fa-building"></i> Charities</a
+              >
+            </li>
+            <li>
+              <a href="#donations" class="nav-link" data-section="donations"
+                ><i class="fas fa-hand-holding-usd"></i> Donations</a
+              >
+            </li>
+            <li>
+              <a href="#categories" class="nav-link" data-section="categories"
+                ><i class="fas fa-tags"></i> Categories</a
+              >
+            </li>
+            <li>
+              <a href="#settings" class="nav-link" data-section="settings"><i class="fas fa-cog"></i> Settings</a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="main-content">
+        <header class="content-header">
+          <h1 id="pageTitle">Dashboard</h1>
+          <div class="header-actions">
+            <button class="btn btn-primary" onclick="exportData()"><i class="fas fa-download"></i> Export Data</button>
+            <button class="btn btn-secondary" onclick="refreshData()"><i class="fas fa-sync"></i> Refresh</button>
+          </div>
+        </header>
+
+        <!-- Dashboard Section -->
+        <section id="dashboard" class="content-section active">
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="fas fa-building"></i>
+              </div>
+              <div class="stat-info">
+                <h3 id="totalCharitiesStat">0</h3>
+                <p>Total Charities</p>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="fas fa-hand-holding-usd"></i>
+              </div>
+              <div class="stat-info">
+                <h3 id="totalDonationsStat">$0</h3>
+                <p>Total Donations</p>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="fas fa-users"></i>
+              </div>
+              <div class="stat-info">
+                <h3 id="totalDonorsStat">0</h3>
+                <p>Total Donors</p>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="fas fa-chart-line"></i>
+              </div>
+              <div class="stat-info">
+                <h3 id="avgDonationStat">$0</h3>
+                <p>Average Donation</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="dashboard-charts">
+            <div class="chart-container">
+              <h3>Recent Donations</h3>
+              <div class="chart-placeholder">
+                <canvas id="donationsChart"></canvas>
+              </div>
+            </div>
+            <div class="chart-container">
+              <h3>Top Charities</h3>
+              <div class="top-charities" id="topCharities">
+                <!-- Will be populated dynamically -->
+              </div>
+            </div>
+          </div>
+
+          <div class="recent-activity">
+            <h3>Recent Activity</h3>
+            <div class="activity-list" id="recentActivity">
+              <!-- Will be populated dynamically -->
+            </div>
+          </div>
+        </section>
+
+        <!-- Charities Section -->
+        <section id="charities" class="content-section">
+          <div class="section-actions">
+            <button class="btn btn-primary" onclick="openCharityModal()">
+              <i class="fas fa-plus"></i> Add Charity
+            </button>
+          </div>
+          <div class="table-container">
+            <table class="data-table" id="charitiesTable">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Category</th>
+                  <th>Goal</th>
+                  <th>Raised</th>
+                  <th>Progress</th>
+                  <th>Status</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Will be populated dynamically -->
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <!-- Donations Section -->
+        <section id="donations" class="content-section">
+          <div class="filters">
+            <select id="donationStatusFilter" class="filter-select">
+              <option value="">All Status</option>
+              <option value="pending">Pending</option>
+              <option value="completed">Completed</option>
+              <option value="failed">Failed</option>
+            </select>
+            <input type="date" id="donationDateFilter" class="filter-input" />
+          </div>
+          <div class="table-container">
+            <table class="data-table" id="donationsTable">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Charity</th>
+                  <th>Donor</th>
+                  <th>Amount</th>
+                  <th>Status</th>
+                  <th>Date</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Will be populated dynamically -->
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <!-- Categories Section -->
+        <section id="categories" class="content-section">
+          <div class="section-actions">
+            <button class="btn btn-primary" onclick="openCategoryModal()">
+              <i class="fas fa-plus"></i> Add Category
+            </button>
+          </div>
+          <div class="categories-grid" id="categoriesGrid">
+            <!-- Will be populated dynamically -->
+          </div>
+        </section>
+
+        <!-- Settings Section -->
+        <section id="settings" class="content-section">
+          <div class="settings-form">
+            <h3>General Settings</h3>
+            <form id="settingsForm">
+              <div class="form-group">
+                <label for="siteName">Site Name</label>
+                <input type="text" id="siteName" value="CharityHub" />
+              </div>
+              <div class="form-group">
+                <label for="siteEmail">Contact Email</label>
+                <input type="email" id="siteEmail" value="support@charityhub.org" />
+              </div>
+              <div class="form-group">
+                <label for="donationMinimum">Minimum Donation ($)</label>
+                <input type="number" id="donationMinimum" value="1" min="1" />
+              </div>
+              <div class="form-group">
+                <label>
+                  <input type="checkbox" id="enableNotifications" checked />
+                  Enable email notifications
+                </label>
+              </div>
+              <button type="submit" class="btn btn-primary">Save Settings</button>
+            </form>
+          </div>
+        </section>
+      </main>
+    </div>
+
+    <!-- Charity Modal -->
+    <div class="modal" id="charityModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 id="charityModalTitle">Add Charity</h3>
+          <button class="modal-close" onclick="closeCharityModal()">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form id="charityForm">
+            <div class="form-group">
+              <label for="charityName">Name *</label>
+              <input type="text" id="charityName" required />
+            </div>
+            <div class="form-group">
+              <label for="charityDescription">Description *</label>
+              <textarea id="charityDescription" rows="3" required></textarea>
+            </div>
+            <div class="form-group">
+              <label for="charityCategory">Category *</label>
+              <select id="charityCategory" required>
+                <option value="">Select Category</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="charityGoal">Goal Amount ($) *</label>
+              <input type="number" id="charityGoal" min="1" step="0.01" required />
+            </div>
+            <div class="form-group">
+              <label for="charityImage">Image URL</label>
+              <input type="url" id="charityImage" />
+            </div>
+            <div class="form-group">
+              <label for="charityWebsite">Website URL</label>
+              <input type="url" id="charityWebsite" />
+            </div>
+            <div class="form-group">
+              <label>
+                <input type="checkbox" id="charityActive" checked />
+                Active
+              </label>
+            </div>
+            <button type="submit" class="btn btn-primary">Save Charity</button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- Category Modal -->
+    <div class="modal" id="categoryModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 id="categoryModalTitle">Add Category</h3>
+          <button class="modal-close" onclick="closeCategoryModal()">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form id="categoryForm">
+            <div class="form-group">
+              <label for="categoryName">Name *</label>
+              <input type="text" id="categoryName" required />
+            </div>
+            <div class="form-group">
+              <label for="categoryDescription">Description</label>
+              <textarea id="categoryDescription" rows="3"></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Save Category</button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="../src/js/admin.js"></script>
+  </body>
+</html>

package/charity-website/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "charity-hub",
+  "version": "1.0.0",
+  "description": "A modern charity donation platform built with HTML, CSS, JavaScript, and Supabase",
+  "main": "public/index.html",
+  "scripts": {
+    "start": "live-server public --port=3000",
+    "dev": "live-server public --port=3000 --watch=.",
+    "admin": "live-server admin --port=3001",
+    "build": "echo 'Build complete - static files ready for deployment'",
+    "deploy": "echo 'Deploy to your preferred static hosting service'"
+  },
+  "keywords": [
+    "charity",
+    "donations",
+    "nonprofit",
+    "fundraising",
+    "supabase",
+    "javascript",
+    "html",
+    "css"
+  ],
+  "author": "CharityHub Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/charity-hub.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/charity-hub/issues"
+  },
+  "homepage": "https://github.com/your-username/charity-hub#readme",
+  "devDependencies": {
+    "live-server": "^1.2.2"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}