Project overview. Topcon SitePulse is a full-stack, mobile-friendly field production monitoring application developed for Topcon Air Conditioning Company (Pvt) Ltd, a Sri Lankan engineering company. It helps field teams record daily installations, calculate standardized production totals, and review work across multiple sites. The system combines structured data entry, reporting, staff and site administration, and a Progressive Web App (PWA) experience in one interface.
Real-world client — Topcon Air Conditioning Company
Topcon Air Conditioning Company (Pvt) Ltd is a Sri Lankan engineering business established in 2002, providing telecom infrastructure development, air-conditioning, refrigeration, installation, and maintenance services. SitePulse was developed to support practical field reporting requirements in a multi-site, team-based working environment.
This project connects software engineering with real business operations: collecting daily work details consistently, calculating comparable production values, maintaining historical records, and helping authorized team members review activity through a central application.
Client website: www.topconlk.com. The linked website introduces the company; SitePulse is a separate staff-facing application.
01 — The challenge
Construction and telecommunications field teams can face fragmented daily records, inconsistent productivity calculations, and limited visibility across sites and employees. A practical solution needs to be quick enough for field use, consistent when calculations are repeated, and structured enough for supervisors to review historical work.
The goal was to create a reliable reporting workflow with clear responsibility for each record, consistent production metrics, and administration tools suited to a team-based environment.
02 — The solution
I developed a responsive React application backed by Supabase and PostgreSQL. Authorized staff can submit field-production entries through a guided six-step workflow, while administrators can manage operational sites, staff accounts, and activity history. The same records power daily history, monthly reports, and CSV exports.
03 — Key application features
Guided daily work entry
- A six-step workflow: Date → Site → Cable → Splitters → Antennas → Result.
- Captures work dates, site assignments, installed cable lengths, splitter quantities, and antenna counts.
- Validates required fields and prevents future-dated entries and invalid or negative quantities.
- Identifies duplicate entries for the same staff member, date, and site, with a path to edit the existing record.
- Displays the calculated production result before saving and confirms successful submission.
Antenna-equivalent production (AEP)
SitePulse converts different types of field work into a comparable Antenna Equivalent Production (AEP) value. With the configured default conversion rates, the calculation is:
AEP = (Antennas ÷ 10) + (7/8-inch cable metres ÷ 40) + (1/2-inch cable metres ÷ 80) + (Splitters ÷ 3)
For consistency and integrity, the PostgreSQL database recalculates AEP when records are inserted or updated. Conversion factors are saved with each record so historical totals remain tied to the rates originally used, even if configuration changes later.
History, reports, and exports
- Review previous production records across the organization.
- Filter entries by month, work date, and operational site.
- View aggregated totals for cable installation, splitter and antenna counts, and calculated production.
- Download the currently filtered report as CSV for spreadsheet review.
- Use paginated data loading to avoid silently truncating larger monthly reports; failed loads disable exports instead of presenting incomplete information.
Administration and accountability
- Site management: add sites, activate or deactivate them, and restrict deletion when production history exists.
- Staff management: create administrator-provisioned accounts, manage access status, reset temporary passwords, and view last-seen activity.
- Account security: require a password change after temporary-password sign-in and provide an account settings screen.
- Activity history: review recorded production, site, and account changes through an administrator-only audit log interface.
- Role separation: distinguish the actions available to staff members and administrators.
Mobile and installable experience
The application uses a responsive interface, mobile-oriented navigation, a web app manifest, service worker, and install icons to support an installable PWA experience. It is designed for convenient access on phones and desktop browsers. Internet connectivity remains necessary for authenticated data submission and synchronization; offline submission is not claimed.
04 — Technical architecture
- Frontend: React 19, TypeScript, Vite, and custom responsive CSS.
- Backend platform: Supabase JavaScript client, Supabase Auth, and privileged Edge Functions for selected staff-account operations.
- Database: PostgreSQL tables for user profiles, sites, settings, daily production records, and activity logs.
- Access design: database Row Level Security (RLS), differentiated administrator/staff permissions, and backend validation rules.
- PWA and deployment: web app manifest, service worker assets, and a Vercel-hosted frontend.
05 — Engineering decisions
Calculate on the server, not only in the browser
The interface provides immediate AEP feedback, but a PostgreSQL trigger is responsible for computing the stored value. This avoids treating browser-supplied totals as authoritative.
Preserve historical reporting
Production records retain their own conversion factors. Site deactivation preserves historical records; deleting a site with existing production history is prohibited.
Separate staff and administrator privileges
Administrative capabilities are presented only to authorized roles. The source includes database access policies and a protected Edge Function for privileged account operations. These protections still require live configuration and role-based deployment verification.
Make exports trustworthy
Monthly reports use paginated retrieval with error handling so users do not unknowingly download partial results. CSV generation also escapes potentially unsafe spreadsheet cell prefixes.
06 — Challenges and learning
This project involved building an end-to-end business workflow, modeling operational data, implementing permission-aware user interfaces, coordinating browser and database validation, and packaging the application for mobile installation. It strengthened my practical experience with TypeScript, Supabase Auth, PostgreSQL, RLS, and production-oriented reporting.
07 — Project outcome
SitePulse delivers a structured digital workflow for daily field production, with a single place to enter work, review site activity, generate monthly reports, and manage authorized team access. Its key value is consistent data capture and traceable reporting rather than unverified claims about productivity gains or business metrics.
Technology stack: React, TypeScript, Supabase, PostgreSQL, and Vercel.
