Quality Control Application

A production-style Industrial Quality Control application designed for laboratory and manufacturing environments. The application provides dynamic data entry forms, report generation, authentication, and a scalable configuration-driven architecture integrated with PI System concepts.

---

Features

• Config-driven QC forms
• Generic form engine
• Generic report engine
• Dynamic dropdown hierarchy
• Authentication and authorization
• Date/time based read and write workflows
• Reusable React hooks
• Modular frontend and backend architecture
• PI Web API integration structure
• Scalable configuration-driven design
• Clean industrial-style user interface

---

Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• React Hooks

Backend

• Node.js
• Express.js

Industrial Integration

• PI Web API
• AF Hierarchy
• WebId-based configuration

---

Architecture

Form Config
   ↓
Generic Form Engine
   ↓
Reusable Hook
   ↓
API Layer
   ↓
Express Backend
   ↓
PI Web API

This architecture allows new forms to be added through configuration rather than rewriting application logic.

---

Main Modules

Frontend

• GenericQcForm

  • Renders all quality control data entry forms

• GenericReportForm

  • Renders report screens and tables

• useQcParameterForm

  • Handles form state
  • Dropdown dependencies
  • Read/write operations
  • Highlight logic

• useQcReport

  • Handles report filtering
  • Data fetching
  • Report state management

• qc.api.js

  • Frontend API communication layer

Backend

• server.js

  • Express server
  • API endpoints
  • Authentication
  • PI communication

• qcForms.js

  • Form registry
  • Root configuration
  • Form definitions

---

Available Forms

Data Entry Forms

• Physics
• Chemistry
• Physical Strength
• Raw Material Data Entry
• Remarks Entry
• X-Ray Set Points
• Physics Set Points

Reports

• Burnability Report
• Input Materials Report
• Titr Moisture Report

---

Screenshots

Login Page

Chemistry Form

Physics Form

Reports

---

Getting Started

Backend Setup

cd backend
npm install
node server.js

Frontend Setup

cd frontend
npm install
npm run dev

---

Environment Variables

Sensitive values are intentionally excluded from the repository.

Use the provided .env.example file as a template.

Example:

PIWEBAPI_URL=https://your-pi-server/piwebapi
PIWEBAPI_USER=your_username
PIWEBAPI_PASS=your_password

CHEMISTRY_ELEMENT_WEBID=your_webid
PHYSICS_ELEMENT_WEBID=your_webid

AUTH_TOKEN_SECRET=your_secret

PORT=5000

---

PI Integration

To connect the application with a real PI System:

1. Create PI AF Elements and Attributes.
2. Configure root WebIds in the environment file.
3. Ensure parameter keys match AF Attribute names.
4. Start the backend and frontend services.
5. Read and write values through the configured hierarchy.

---

Project Highlights

• Configuration-driven architecture
• Reusable form engine
• Reusable report engine
• Dynamic dropdown dependencies
• Scalable form registration system
• Authentication workflow
• Industrial automation integration concepts
• Clean separation of concerns
• Production-oriented project structure

---

Project Purpose

This project demonstrates modern full-stack development practices while solving real-world industrial quality control workflows.

Key focuses include:

• Scalability
• Maintainability
• Reusability
• Clean architecture
• Modular design
• Long-term extensibility

---

Author

Abdullah Khan

MERN Developer
Industrial Automation & Quality Control Systems

GitHub: https://github.com/Rjprograms1999