ERMS Design Reference | PCCOE Examination Cell

Overview

This repository serves as the official front-end prototype and UI/UX design reference for the upcoming Exam Remuneration Management System (ERMS), commissioned for the Examination Cell of Pimpri Chinchwad College of Engineering (PCCOE).

The primary objective of this reference architecture is to establish a professional visual hierarchy, modern component interactions, role-based navigation workflows, and a fully responsive layout scheme that will serve as the strict standard for the final production-ready billing system.

Access the live design reference here: https://erms-design.vercel.app/

Architecture & Tech Stack

This prototype is built utilizing a modern, high-performance web stack to ensure scalable and adaptable component architecture:

• Core Framework: Next.js 16 (App Router)
• UI Library: React 19
• Type Safety: TypeScript
• Styling Engine: Tailwind CSS v4
• Component Primitives: Radix UI / shadcn/ui
• Icons: Custom SVG implementation + Lucide React

Simulated Role-Based Workflows

The design strictly dictates layout rendering and access based on three simulated primary roles. Use the following mock credentials to explore the segregated interfaces:

1. Admin (HOD)

• Role Identity: System Administrator
• Capabilities: Faculty bonus management, global bill viewing, overarching query resolution, and system insights.
• Login: admin@billing.com / admin123

2. Accountant

• Role Identity: Finance / Accounting
• Capabilities: Bill generation, payment tracking, faculty bank details auditing, and institutional reporting.
• Login: accountant@billing.com / accountant123

3. Faculty

• Role Identity: Teaching & Non-Teaching Staff
• Capabilities: Personal bill generation, remuneration tracking, and query generation.
• Login: faculty@billing.com / faculty123

Project Structure Overview

app/
├── auth/                        # Secured authentication routing
├── dashboard/
│   ├── admin/                   # Admin-specific layouts and screens
│   ├── accountant/              # Accountant billing workflows
│   └── faculty/                 # Faculty submission interfaces
├── page.tsx                     # Global entry splash screen
└── layout.tsx                   # Root DOM structure

components/
├── auth/                        # Credential validation interfaces
├── icons/                       # Standardized SVG asset library
├── ui/                          # Standardized shadcn components
└── sidebar.tsx                  # Dynamic, role-based navigation

Local Development Initialization

To run this design reference locally for structural inspection or component extraction:

1. Install Dependencies

   npm install

2. Run Development Server

   npm run dev

3. Access the Application Navigate to http://localhost:3000

Design Guidelines & Compliance

• Color Palette: The system utilizes a strictly defined, highly professional deep-indigo UI color schema engineered for prolonged administrative use. Modifying variables must be done through app/globals.css.
• Security Mockups: Transition logic, conditional routing, and localStorage session spoofing are currently implemented purely to demonstrate UI restrictions. The production system will require robust middleware, JWT strategies, and backend infrastructure.