Industrial SCADA System

A modern, web-based SCADA (Supervisory Control and Data Acquisition) system built with React, TypeScript, and Tailwind CSS. This application provides real-time monitoring, control, and management of industrial devices and processes.

🚀 Features

📊 Dashboard

Real-time device monitoring with live data updates
Interactive charts and graphs (temperature, pressure, flow rates)
KPI cards showing system status and metrics
Recent alarms and system activity feeds

🔧 Device Management

Comprehensive device inventory with detailed information
Real-time parameter monitoring with gauge visualizations
Device control capabilities (start, stop, reset, configure)
Support for multiple industrial protocols (Modbus, OPC, Ethernet/IP, Profinet)
Historical parameter trending and analysis

🚨 Alarm Management

Real-time alarm monitoring and notifications
Alarm acknowledgment and resolution workflow
Severity-based filtering (Critical, High, Medium, Low)
Comprehensive alarm history with export capabilities
Email and sound notification support

📈 Reports & Analytics

Detailed device performance reports
Customizable date range filtering
Multiple chart types (line, bar, pie charts)
Export functionality (PDF, CSV)
Uptime/downtime analysis
Error frequency tracking

👥 User Management

Role-based access control (Admin, Engineer, Operator)
User account management with status tracking
Secure authentication system
Activity logging and audit trails

🎨 Modern UI/UX

Dark/Light theme support
Responsive design for all screen sizes
Industrial-grade color scheme and iconography
Intuitive navigation and user experience

🛠️ Technology Stack

Frontend Framework: React 18 with TypeScript
Styling: Tailwind CSS
Icons: Lucide React
Charts: Recharts
Routing: React Router DOM
Build Tool: Vite
Code Quality: ESLint + TypeScript ESLint

📋 Prerequisites

Before running this application, make sure you have the following installed:

Node.js (version 16.0 or higher)
npm (version 7.0 or higher) or yarn

🚀 Getting Started

1. Clone the Repository

git clone <repository-url>
cd industrial-scada-system

2. Install Dependencies

npm install
# or
yarn install

3. Start Development Server

npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

4. Build for Production

npm run build
# or
yarn build

5. Preview Production Build

npm run preview
# or
yarn preview

🔐 Demo Accounts

The application includes several demo accounts for testing different user roles:

Username	Password	Role	Access Level
`admin`	`password`	Administrator	Full system access
`supervisor`	`password`	Supervisor	Device monitoring & control
`tech`	`password`	Technician	Read-only access

📁 Project Structure

src/
├── components/          # React components
│   ├── Dashboard.tsx    # Main dashboard view
│   ├── DeviceList.tsx   # Device inventory
│   ├── DeviceDetails.tsx # Individual device view
│   ├── AlarmManagement.tsx # Alarm system
│   ├── Reports.tsx      # Analytics and reports
│   ├── Users.tsx        # User management
│   ├── Settings.tsx     # System configuration
│   ├── Login.tsx        # Authentication
│   ├── Layout.tsx       # Main layout wrapper
│   ├── Header.tsx       # Top navigation
│   └── Sidebar.tsx      # Side navigation
├── contexts/            # React contexts
│   ├── AuthContext.tsx  # Authentication state
│   └── ThemeContext.tsx # Theme management
├── data/               # Mock data and utilities
│   └── mockData.ts     # Sample device and alarm data
├── types/              # TypeScript type definitions
│   └── index.ts        # Application interfaces
└── App.tsx             # Main application component

🔧 Configuration

Environment Variables

Create a .env file in the root directory for environment-specific configuration:

VITE_APP_TITLE=Industrial SCADA System
VITE_API_BASE_URL=http://localhost:3001/api
VITE_REFRESH_INTERVAL=5000

Theme Customization

The application supports both light and dark themes. Theme preferences are automatically saved to localStorage and respect system preferences.

🚀 Deployment

Build Optimization

The application is optimized for production with:

Code splitting and lazy loading
Asset optimization and compression
Tree shaking for minimal bundle size
Modern browser targeting

Deployment Options

Static Hosting: Deploy to Netlify, Vercel, or GitHub Pages
Docker: Containerized deployment with included Dockerfile
Traditional Hosting: Build and serve static files

🔌 Integration

Industrial Protocols

The system is designed to integrate with common industrial communication protocols:

Modbus TCP/RTU: For PLCs and industrial devices
OPC UA: For modern industrial automation
Ethernet/IP: For Allen-Bradley and Rockwell devices
Profinet: For Siemens and other European manufacturers

API Integration

The frontend is prepared for backend integration with RESTful APIs for:

Real-time device data
Historical data storage
User authentication
Alarm management
Report generation

🧪 Testing

Run the test suite:

npm run test
# or
yarn test

📊 Performance

The application is optimized for:

Fast Initial Load: Code splitting and lazy loading
Real-time Updates: Efficient data polling and state management
Responsive Design: Optimized for desktop and mobile devices
Memory Efficiency: Proper cleanup and resource management

🔒 Security Features

Role-based Access Control: Different permission levels
Session Management: Automatic timeout and secure storage
Input Validation: Protection against common vulnerabilities
Audit Logging: Track user actions and system events

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

Create an issue in the GitHub repository
Check the documentation in the /docs folder
Review the FAQ section below

❓ FAQ

Q: How do I add new device types? A: Extend the Device interface in src/types/index.ts and update the mock data generator.

Q: Can I customize the color scheme? A: Yes, modify the color palette in tailwind.config.js to match your brand.

Q: How do I integrate with real industrial devices? A: Replace the mock data functions with actual API calls to your backend services.

Q: Is this suitable for production use? A: This is a demo application. For production use, implement proper backend services, security measures, and testing.

🔄 Changelog

Version 1.0.0

Initial release with core SCADA functionality
Dashboard with real-time monitoring
Device management and control
Alarm system with notifications
User management and authentication
Reports and analytics
Dark/Light theme support

Built with ❤️ for Industrial Automation

Name		Name	Last commit message	Last commit date
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation