An enterprise-grade, real-time web application engineered to streamline field service operations, triage incoming tickets, and track team performance using Role-Based Access Control (RBAC) and Bi-Directional syncing.
- 🛡️ Role-Based Access Control (RBAC): Strict row-level security ensures Field Techs can only view and interact with their own team's active dispatches, while Dispatchers/Admins have a birds-eye view of all global operations.
- 🔄 Bi-Directional Google Sheets Sync: Data doesn't just flow one way. The app seamlessly pulls incoming data piped from Google Sheets via Apps Script, and pushes status updates back to the sheet, ensuring legacy spreadsheets remain fully updated automatically.
- 📈 Advanced Analytics Dashboard: A dynamic performance tab that auto-calculates team efficiency, area-specific completion rates, and visualizes daily/weekly operational throughput.
- ⚡ Real-Time Data Sync: Powered by Supabase WebSockets, dispatchers and field techs see updates, assignments, and ticket closures instantly without ever refreshing the page.
- 📥 Smart Triage Inbox: Admins can review, edit, assign, and bulk-approve incoming tickets before they hit the active field dispatch board.
- 📊 Spreadsheet-Style Bulk Dispatch: Paste multi-column data directly from Excel/Google Sheets into the app to generate dozens of rich tickets in seconds.
- 📍 Area & Barangay Granularity: Integrated sub-area (Barangay) classification and filtering, allowing dispatchers to triage operations with district-level precision.
Here is a look at the different modules within the Dispatch Manager:
| Light Theme Dashboard | Dark Theme Dashboard |
|---|---|
|
 |
| Advanced Analytics | Team Management |
|---|---|
 |
 |
| Manual Bulk Dispatch | Rich Manual Dispatch |
|---|---|
 |
 |
Secure Google OAuth Login:
- Frontend: HTML5, Vanilla JavaScript (ES6+), Tailwind CSS
- Backend (BaaS): Supabase (PostgreSQL, Realtime WebSockets, Authentication)
- Integrations: Google Apps Script (Bi-Directional Sync API)
- Testing: Cypress (E2E)
- Hosting: Netlify
- Icons: FontAwesome 6
To run this project locally:
- Clone the repository:
git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)
- Install dependencies (for Cypress testing):
npm install
- Set up Environment Variables:
Create a
cypress.env.jsonfile in the root directory for secure testing:{ "TEST_EMAIL": "your-test-email@example.com", "TEST_PASSWORD": "your-test-password" } - Open locally: Use Live Server (VS Code extension) or any local HTTP server to open
index.html
This application utilizes a decoupled Jamstack architecture. The UI is completely separated from the database. Security is not handled in the frontend client; instead, Row Level Security (RLS) is strictly enforced directly at the PostgreSQL database level. The database physically rejects queries for data that a specific authenticated user's role is not permitted to see.