Automated Business Intelligence System

A robust React application for managing field installation reports, utilizing Google Ecosystem as a scalable, serverless backend.

ProblemFragmented field data collection and reliance on manual paperwork.

GoalCreate a digital, offline-capable reporting tool with signature capture and automated PDF generation.

ToolsReact, Google Apps Script, Drive API, Tailwind CSS

The Challenge

Operational Bottlenecks & The Solution

Field technicians for a major logistics provider needed to submit detailed installation reports from various locations. The existing process involved manual paperwork or disjointed digital tools, leading to data loss, lack of evidence (photos/videos), and delays in invoicing.

The client required a solution that could run on any device, handle media uploads, and generate formal PDFs without incurring high monthly infrastructure costs.

Before

Technicians filled out paper forms, took photos separately on their phones, and manually emailed them to a central office for consolidation.

The Solution

A unified Progressive Web App (PWA) where technicians log in via Provider ID, auto-load location data, capture signatures and media, and instantly generate/upload a standardized PDF to the corporate Google Drive.

System Architecture

Core Capabilities & Data Flow

Secure Provider Authentication

Technicians authenticate via a secure Provider ID. The system dynamically provisions access, fetching and filtering assigned locations from the central database in real-time.

Dynamic Data Collection & Validation

The application enforces strict business logic during data entry (e.g., mandatory justifications for incomplete tasks) and supports rich multimedia evidence capture (photos, videos, budget requests).

Digital Signature Capture

Integrated touchscreen capabilities allow for high-fidelity, legally binding digital signatures from both technicians and clients directly within the application interface.

Automated Document Generation

Upon submission, the system autonomously compiles all collected data, media, and signatures into a standardized, pixel-perfect PDF report, generated entirely on the client-side.

Intelligent Cloud Archiving

The generated report is securely transmitted and automatically archived into a structured, hierarchical cloud storage system (e.g., Year/Month/Provider) without manual intervention.

Real-Time Operational Dashboarding

The central database is instantly updated with report metadata, timestamps, and direct document links, providing the administration team with a live, comprehensive view of field operations.

Under the Hood

Technical Deep Dive

Zero-Cost Serverless Backend

Instead of a traditional Node.js/SQL backend, this project utilizes Google Apps Script (GAS) as an API Gateway. The script handles GET requests to fetch JSON data from Sheets and POST requests to handle multipart form data (images/videos) and PDF uploads to Drive. This architecture dramatically reduced hosting costs to zero while leveraging the security and uptime of Google Workspace.

Optimized Media Handling

To ensure performance on mobile networks, the application implements client-side logic to manage media. Images are converted to Base64 for preview and transmission. The system enforces strict size limits (50MB for video) and validation before attempting the upload to prevent timeout errors during the Apps Script execution.

Resilient State Management

Custom hooks (`useLocalStorage`) are employed to persist report data and provider sessions. This ensures that if a technician loses internet connection or accidentally closes the browser, their progress is saved locally and can be resumed seamlessly, a critical feature for field operations.

typescript

const handleSavePdfToDrive = async () => {
    // Render DOM to Canvas
    const canvas = await html2canvas(element, { scale: 2, useCORS: true });
    const imgData = canvas.toDataURL('image/png');
    
    // Generate PDF
    const pdf = new jsPDF({...});
    pdf.addImage(imgData, 'PNG', x, y, width, height);
    
    // Send to Google Apps Script
    const formData = new FormData();
    formData.append('action', 'savePdf');
    formData.append('pdfData', pdf.output('datauristring').split(',')[1]);
    
    await fetch(scriptUrl, { method: 'POST', body: formData });
};

The Impact

Quantifiable Results

100%Digitization of Reports

< 2sLocation Lookup Time

4 WeeksTime to Market

The system successfully replaced the manual workflow, providing the client with a centralized, searchable database of all installations.

By leveraging existing Google Workspace infrastructure, the project required no additional software licenses, providing high value with minimal operational overhead.

Live Demo

Live Beta Environment

Experience a beta version of the reporting system. This demo environment was created with Google Gemini Studio and deployed on Vercel.

View Live Beta