Smartcool Monitoring

Smartcool Monitoring is a web-based IoT operations platform built to help internal teams and customers manage connected AC assets across multiple clients, sites, rooms, and devices.

The platform provides role-based dashboards for monitoring live device conditions, tracking anomalies, reviewing disconnected devices, managing trouble tickets, and converting field issues into structured work orders. It supports the full service operation lifecycle, from device placement and activation to technician assignment, service execution, review, completion, and historical tracking.

Beyond monitoring and service operations, the system also supports administrative, commercial, and reporting workflows such as client and site management, user access control, timer and holiday automation, remote AC controls, firmware handling, inventory visibility, booking management, voucher management, quote processing, delivery orders, quality control, cash advances, and petty cash.

Built with React, TypeScript, Tailwind CSS, TanStack React Query, Axios, React Hook Form, Zod, Zustand, ApexCharts, PDF generation, Docker, and Nginx, the application is designed to handle data-heavy operational workflows with clear navigation, role-aware access, reusable UI patterns, and export-ready reporting.

Key Features

Role-based dashboards for internal teams, customers, technicians, supervisors, and manufacturing users.

Live IoT monitoring for ACSM, MCPM, fuel meter, and access-door devices with periodic data refresh.

Device condition tracking for anomalies, disconnected devices, AC status, and sensor errors.

Trouble ticket management with issue creation, threaded discussion, status tracking, and work order conversion.

Work order lifecycle management covering planning, assignment, execution, review, completion, and service reports.

Asset hierarchy management for clients, sites, rooms, AC units, devices, placements, and activation status.

Remote AC operation tools including timer templates, holiday schedules, auto-on settings, lock controls, and command management.

Administrative workflows for users, site access, technicians, firmware, quality control, and operational configuration.

Commercial and field operation modules for bookings, vouchers, quotes, delivery orders, shipments, and service coordination.

Financial operation tools for cash advances, petty cash, summaries, and Excel export.

Operational reports for assets, energy usage, monthly AC condition, monitoring results, PDF generation, and data export.

Technical Concepts

Role-based access control with route-level guards and dashboard personalization.

Data-heavy admin dashboard design with filtering, pagination, search, tabbed views, and exportable reports.

IoT monitoring visualization using periodic polling, device status mapping, and condition-based UI feedback.

Service operation workflow from issue detection to ticket handling, work order execution, and final reporting.

API-driven frontend architecture with domain-separated modules and reusable service layers.

Server state management using TanStack React Query for caching, refetching, loading states, and data synchronization.

Form validation and structured input handling using React Hook Form and Zod.

Global UI state management with Zustand for shared application behavior.

Role-aware user experience for different operational responsibilities across customer, technician, supervisor, and internal teams.

PDF and Excel-ready reporting workflows for operational visibility and business documentation.

Frontend deployment workflow using Docker and Nginx for production-ready web delivery.

Cross-functional platform design combining IoT monitoring, service operations, commercial workflows, finance, and reporting.

Tech Stack

React

TypeScript

Tailwind CSS

Docker

Nginx

Libraries

Packages, SDKs, and integrations used in this project.

React RouterTanStack React QueryAxiosReact Hook FormZodZustandApexChartsSweetAlert2React PDFhtml2canvas

Impressed by this project?

Let's Work Together

Back to All Projects