Fine Clean

IoT Dispenser Management System

A cutting-edge, enterprise-grade web application for real-time monitoring and management of IoT-enabled dispensers across multiple facilities. Built with Laravel 12, featuring role-based access control, real-time analytics, and a modern responsive interface.

Laravel 12
PHP 8.2
SQLite
JavaScript
Chart.js
TailwindCSS

Project Overview

A comprehensive SaaS platform designed to revolutionize facility management through IoT technology

3 User Roles
15+ Core Features
6 Dashboard Views
100% Responsive Design

Role-Based Access

Three-tier authentication system with Super Admin, Admin, and Client roles. Each role has specific permissions and access levels tailored to their responsibilities.

Real-Time IoT Monitoring

Live tracking of dispenser metrics including fill levels, battery status, usage patterns, and device health with instant synchronization.

Advanced Analytics

Comprehensive data visualization with interactive charts, trend analysis, usage statistics, and predictive maintenance insights.

Smart Alert System

Intelligent notification system with critical, warning, and maintenance alerts categorized by priority and urgency.

Multi-Facility Support

Hierarchical structure supporting multiple buildings, floors, and rooms with detailed location tracking and organization.

3D Visual Builder

Interactive drag-and-drop interface for creating and managing facility layouts, room configurations, and dispenser placements.

Admin Dashboard

Powerful management tools for system administrators

Admin Analytics Dashboard
Real-time system overview with comprehensive metrics
User Management
Client Companies
3D Builder Interface
Admin Panel
Full System Control
  • Analytics Dashboard: Real-time system metrics, dispenser statistics, and comprehensive data visualization
  • User Management: Create, edit, and manage user accounts with role assignment
  • Client Management: Complete CRUD operations for client companies and their facilities
  • 3D Dispenser Builder: Interactive drag-and-drop interface for building layouts and dispenser placement
  • Dispenser Management: Add, edit, assign, and configure IoT devices
  • Building Management: Create and organize buildings, floors, and rooms hierarchically
  • Maintenance Scheduling: Record refills and schedule maintenance tasks
  • Device Assignment: Assign dispensers to specific locations and rooms
  • System Reports: Generate detailed reports on usage, performance, and alerts
  • Activity Monitoring: Track recent activities, new installations, and system changes

Client Monitoring Portal

Professional read-only monitoring interface for clients

Client Monitoring Dashboard
Real-time dispenser monitoring and analytics
Dispensers View
Alert Center
Usage Reports
Client Portal
Monitoring & Analytics
  • Monitoring Dashboard: Real-time overview of all dispensers with key metrics and statistics
  • Dispenser List View: Complete inventory with filtering, sorting, and search capabilities
  • Alert Center: Categorized alerts (Critical, Warning, Maintenance) with priority indicators
  • Buildings Overview: Hierarchical view of all facilities, floors, and rooms
  • Usage Reports: Detailed analytics on dispenser usage patterns and performance
  • Interactive Charts: Fill level distribution, battery status, and usage trends visualization
  • Profile Management: View account and company information
  • Real-time Updates: Live status indicators and automatic data refresh
  • Export Capabilities: Print and download reports for record-keeping
  • Mobile Responsive: Full functionality across all devices and screen sizes

Authentication & Security

Enterprise-grade security with elegant user experience

Secure Login Portal
Modern authentication with role-based redirection

Role-Based Access

Automatic routing to appropriate dashboard based on user role (Super Admin, Admin, or Client)

Password Recovery

Secure password reset functionality with email verification and token-based authentication

Session Management

Secure session handling with automatic logout and remember me functionality

Technology Stack

Built with modern, industry-leading technologies

Laravel 12

Latest PHP framework with Eloquent ORM, Blade templating, and built-in authentication

PHP 8.2

Modern PHP with enhanced performance, type safety, and latest language features

SQLite Database

Lightweight, serverless database with full SQL capabilities and easy deployment

TailwindCSS

Utility-first CSS framework for rapid UI development and consistent styling

JavaScript ES6+

Modern JavaScript for interactive features, real-time updates, and dynamic content

Chart.js

Powerful data visualization library for creating interactive, responsive charts

Vite

Next-generation frontend build tool for fast development and optimized production builds

Git Version Control

Source code management and collaboration with version history tracking

Development Phases

What we've accomplished in this project

Phase 1: Foundation & Architecture

Completed: Database design with 9 core models (User, Role, Client, Building, Floor, Room, Dispenser, DispenserAssignment, CanvasLabel). Implemented authentication system with role-based middleware and established project structure with Laravel 12.

Phase 1

Phase 2: Admin Dashboard Development

Completed: Built comprehensive admin panel with analytics dashboard, user management CRUD, client company management, and dispenser management. Implemented premium UI with glassmorphism effects and gradient designs.

Phase 2

Phase 3: 3D Visual Builder

Completed: Created interactive drag-and-drop dispenser builder with real-time positioning, building/floor/room creation, visual customization options, and canvas label support for facility layout design.

Phase 3

Phase 4: Client Monitoring Portal

Completed: Developed professional client dashboard with real-time monitoring, advanced filtering and search, alert center with priority categorization, buildings hierarchy view, usage reports with charts, and fully responsive design.

Phase 4

Phase 5: Analytics & Reporting

Completed: Implemented comprehensive analytics engine with Chart.js integration, fill level and battery distribution analysis, usage trend tracking, top performers identification, and exportable reports.

Phase 5

Phase 6: UI/UX Enhancement

Completed: Refined design system with premium card styles, gradient backgrounds, smooth animations and transitions, responsive layouts for all devices, and modern glassmorphism effects throughout the application.

Phase 6

Project Metrics

Development scale and technical specifications

30+ Views

Blade templates including dashboards, management interfaces, monitoring screens, and authentication pages

15+ Controllers

MVC architecture with dedicated controllers for authentication, admin operations, and client monitoring

9 Core Models

Eloquent ORM models with relationships, scopes, and accessor methods for data management

40+ Routes

RESTful API endpoints with middleware protection and role-based access control

12 Migrations

Database schema definitions with foreign keys, indexes, and soft delete support

Custom CSS Framework

Premium design system with glassmorphism, gradients, animations, and responsive utilities

Fine Clean

Revolutionizing facility management through intelligent IoT dispenser monitoring.

© 2025 Fine Clean. All rights reserved.