Prime-HR/ghboy1-ECG-Billing-APP-Ghana
Domain:
digital infrastructureRecord type:
software
Creator:
Pri
Host:
# ECG Billing System - Professional React App
A scalable, role-based electricity billing system for Ghana. Refactored for production with component modularization, custom hooks, Zustand state management, error boundaries, and comprehensive backend integration guide.
## Features
✅ **Multi-role system** (Field Collector, Municipal Office, Regional, HQ)
✅ **Meter reading capture** with camera photo upload (mobile-optimized)
✅ **Automatic bill calculation** with validation
✅ **Mobile money payments** (MTN, Vodafone) + cash
✅ **Reports & analytics** (revenue, collection rate by town, top customers)
✅ **Data persistence** with localStorage (survives refresh)
✅ **Error boundaries** for graceful error handling
✅ **Responsive design** (mobile, tablet, desktop)
✅ **Zustand state management** with devtools support
✅ **Backend-ready** with API integration guide
## Tech Stack
- **React 18.2** - UI framework
- **Vite 5** - Build tool (fast HMR)
- **Zustand** - State management
- **Lucide React** - Icons
- **Plain CSS** - No build overhead
## Project Structure
```
src/
├── components/ # Presentational components
│ ├── Sidebar.jsx
│ ├── Dashboard.jsx
│ ├── CaptureReading.jsx
│ ├── ReadingsList.jsx
│ ├── Reports.jsx
│ ├── CameraModal.jsx
│ ├── PaymentModal.jsx
│ ├── ErrorBoundary.jsx
│ └── ...
├── hooks/ # Custom React hooks
│ ├── useCamera.js # Camera capture logic
│ ├── useBilling.js # Billing calculations
│ └── usePayments.js # Payment processing
├── store/ # Zustand state
│ └── useAppStore.js # Global app state
├── App.jsx # App composition
├── main.jsx # Entry point
├── styles.css # Global styles
└── types.d.ts # TypeScript hints (future migration)
```
## Getting Started
### Prerequisites
- Node.js 16+
- npm or yarn
### Installation
```bash
cd "C:/Users/Admin/Desktop/GHANA B-D/E …