DA
Dev Aucontech

Gas Station Monitor - Copy this React, Tailwind Component to your project

Create a React component for monitoring gas distribution stations that displays the station title (e.g., ‘Sarawak’) with the current date and time, an indicator (e.g., ‘FC-1001’), and a combined ‘Parameters’ section. This section should include Input Pressure (in BarA), Output Pressure (in BarG), Temperature (in °C), Standard Volume Flow (in Sm³/h), Standard Volume Accumulated (in Sm³), Standard Volume for Today (in Sm³), and Standard Volume for Yesterday (in Sm³). Each parameter should have a blinking dot to indicate real-time updates, a trend arrow to show the direction of change compared to the previous value, and a question mark icon that, when hovered over, displays the full name or explanation of the parameter. Ensure the UI is clean, responsive, and easy to read, with appropriate labels and units for each parameter. Add functionality for real-time updates, historical data analysis, and alert notifications for any abnormal readings.

Prompt
Component Preview

About

GasStationMonitor - Track gas stations with real-time updates, pressure, temperature, and volume metrics. Built with React and Tailwin. Get instant access!

Share

Last updated 1 month ago