PaymentCenter
LEYECO Monitor
A real-time payment collection & monitoring system built for Leyte Electric Cooperative (LEYECO) tellers. Handles daily collection tracking, GCash exchange flows, remittance computation, shift management, and multi-teller dashboards | all in a single, fast web interface that replaced manual spreadsheet reconciliation.
Tellers were reconciling shifts by hand.
LEYECO payment centers processed hundreds of transactions per day | electric bills, GCash exchange, and RTW sales | across multiple tellers and windows. End-of-day reconciliation meant counting receipts manually, matching them against ledgers, and reporting totals up to supervisors in separate spreadsheets.
Errors were common. Shifts ran long. Discrepancies took days to trace. They needed a single live monitor that every teller and supervisor could trust the moment they opened their browser.
One dashboard. Everything live.
- ₱ Real-time collection totals | total collected, service fees, and LEYECO remittance computed automatically on every transaction.
- 👤 Per-teller activity tracking | see exactly how much each window collected and how many transactions they processed today.
- 📊 30-day collections trend chart | spot slow days, peak periods, and anomalies at a glance without touching a spreadsheet.
- 📱 GCash exchange module | dedicated flows for GCash top-ups, cashouts, history, and reports separate from bill payments.
- 🔒 Role-based access | teller view vs. admin view with shift locking, so cashiers can't edit closed shifts.
- 🖨 Biller lookup & receipt generation | search any LEYECO account number and issue an official payment receipt in one click.
Every view,
every module.
Below is every major screen of the PaymentCenter system. More screenshots will be added as new modules ship.
Main Dashboard
The command center. Total collected, service fee income, LEYECO remittance, and transaction count update live. Below: a 30-day bar chart and a teller-by-teller activity panel with per-shift totals.
Live Data Admin + Teller
New Payment
Teller flow for posting a new LEYECO bill payment. Account number lookup, amount entry, receipt generation, and auto-update of the teller's shift total.
Teller Flow.png)
All Transactions
Paginated transaction log with search, date filtering, teller filter, and status badges. Reference numbers link to individual receipt views.
Searchable Log
Biller Lookup
Search any LEYECO account number to view account details, outstanding balance, and payment history before posting a payment.
Account Search
My Shifts
Teller's personal shift history | start/end times, total collected per shift, and a locked summary once the supervisor closes the shift.
Shift Summary
GCash Dashboard
Overview of all GCash exchange transactions | total load sold, cashouts processed, and running float balance for the day.
GCash Flow
New GCash Transaction
Quick form for posting a GCash load or cashout: mobile number, transaction type, amount, and auto-computed service fee.
Teller Flow
GCash History
Full log of GCash exchange transactions with date range filter, type breakdown (load vs. cashout), and running totals per period.
Transaction Log
RTW Sales Dashboard
Ready-to-wear sales module integrated into the payment center | daily sales totals, item-level breakdown, and remittance to the RTW supervisor. Keeps all revenue streams in a single monitor.
Sales Module Multi-revenue
Tech stack &
architecture.
React + Vite
Component-based UI with fast hot-reload during development. Each module (Transactions, GCash, RTW) is a self-contained route.
PostgreSQL
All transactions, shifts, and GCash flows stored in a relational DB. Views handle remittance computation so the frontend stays simple.
REST API
Node/Express backend with role-based JWT auth. Teller routes are scoped to their own shift; admin routes expose cross-teller data.
Built with Claude
Architecture, data models, API routes, and dashboard components pair-programmed with Claude. Reduced build time by more than half.
