Operations Management System

Course: CS3014 Applied Human Computer Interaction

Instructor: Sir Ghulam Murtaza

Overview

A full‑stack event operations platform designed for organizers, vendors, staff, and attendees. It streamlines the entire event lifecycle from planning and vendor coordination to task management and post‑event feedback, while demonstrating core Human‑Computer Interaction (HCI) principles in every interaction.

Features

Role	Capabilities
Organizer	Create/publish events, manage venues, approve/reject vendor proposals, assign tasks to staff, view live dashboards
Vendor	Submit service proposals for events, upload documents, track approval status
Staff	View assigned tasks, update task status (pending → in progress → completed), report on‑site issues
Attendee	Register for events, see upcoming schedules, submit post‑event feedback (rating + comment)

Common

• Secure authentication (JWT + HTTP‑only cookies)
• Role‑specific dashboards with personalised interfaces
• Real‑time toast notifications for every action (create, update, delete, approve)
• Keyboard shortcuts (Ctrl+K search, Ctrl+S submit, Esc cancel, ? help)
• Role‑based colour themes (blue/organizer, green/vendor, orange/staff, purple/attendee)
• Auto‑save drafts for event creation
• Undo support for critical actions (proposal submission, approval/rejection, task status changes)
• Breadcrumb navigation + global command palette (Ctrl+K)
• Fully responsive (mobile, tablet, desktop)

HCI Principles Implemented

Only principles that are fully and strictly implemented across the interface are listed below.

Principle	Implementation
Usability – Efficiency	One‑click approve/reject on vendor proposals; keyboard shortcuts (Ctrl+S, Ctrl+N, Ctrl+K, ?); global search
Usability – Learnability	Consistent layouts (sidebar → content), identical button styles, step‑by‑step event wizard, tooltips on icons
Usability – Satisfaction	Role‑based colour schemes, glowing hover effects, smooth animations, dark theme with backdrop blur
Feedback	Toast notifications for every user action; loading spinners during API calls; inline form validation; success/error colour cues
Consistency	Same button variants (default, outline, destructive, success) across all modules; uniform card design; identical modal behaviour
Error Prevention	Confirmation dialogs before deleting events/venues/tasks; form validation with Zod; auto‑save drafts for event creation
Recoverability	Undo button appears after proposal submission, approval/rejection, or task status change (10‑second window)
Observability	Breadcrumbs show current location; role‑specific dashboards display only relevant actions; progress indicators in multi‑step forms
Accessibility	Keyboard‑navigable (Tab, Enter, Esc); focus rings on interactive elements; high contrast (white/dark); ARIA labels on dialogs
Pointer Design	Hover states on all clickable elements; cards lift on hover; buttons scale and glow; cursor changes to pointer
Task Conformance	Event creation wizard covers all needed steps; vendor proposal workflow (submit → approve/reject → comment) matches real‑world process

Tech Stack

Frontend

• Next.js 16 (App Router, Turbopack)
• React 19
• Tailwind CSS 4 (utility‑first styling, dark theme)
• TypeScript (type safety)
• Lucide React (icons)
• Sonner (toast notifications)
• React Hook Form + Zod (form handling + validation)
• Radix UI (accessible dialogs, tooltips, dropdowns)
• cmdk (command palette / global search)
• react‑hotkeys‑hook (keyboard shortcuts)

Backend & Database

• Node.js 22 (runtime)
• Next.js API Routes (backend endpoints)
• Oracle Database 21c XE (relational DB)
• node‑oracledb (Oracle driver)
• bcrypt (password hashing)
• jsonwebtoken (JWT authentication)

Dev Tools

• ESLint (linting)
• Prettier (code formatting)
• Tailwind Merge + clsx (conditional class names)

Database Schema (Oracle)

Key tables:

• users (authentication, roles)
• events, venues
• vendor_registrations (proposals)
• tasks, issues
• attendee_registrations, feedback

All foreign keys enforce referential integrity. The schema uses GENERATED BY DEFAULT AS IDENTITY for primary keys.

Installation & Setup

Prerequisites

• Node.js 22+
• Oracle Database 21c XE (installed locally)
• Git

Steps

# 1. Clone the repository
git clone https://github.com/yourusername/eventops.git
cd eventops

# 2. Install dependencies
npm install

# 3. Create .env.local file
echo "ORACLE_USER=eventops
ORACLE_PASSWORD=abc123
ORACLE_CONNECTION_STRING=localhost:1521/XEPDB1
JWT_SECRET=your_secret_key" > .env.local

# 4. Run Oracle schema (connect as eventops user and execute the provided SQL script)

# 5. Start development server
npm run dev

The application will be available at http://localhost:3000.

Project Structure

D:\ahci-project\
│
├── .env.local                          # Environment variables (Oracle DB, JWT secret)
├── .gitignore
├── eslint.config.js
├── next.config.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
│
├── public/                             # Static assets
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
│
├── src/
│   │
│   ├── app/                            # Next.js App Router
│   │   ├── favicon.ico
│   │   ├── globals.css                 # Global styles + role-based themes
│   │   ├── layout.tsx                  # Root layout (RoleThemeProvider, Toaster, etc.)
│   │   ├── page.tsx                    # Landing page
│   │   │
│   │   ├── login/
│   │   │   └── page.tsx                # Login page (dark theme, validation)
│   │   │
│   │   ├── register/
│   │   │   └── page.tsx                # Registration page (role selection)
│   │   │
│   │   ├── dashboard/                  # Protected dashboard routes
│   │   │   ├── layout.tsx              # Dashboard layout (Sidebar + main content)
│   │   │   ├── page.tsx                # Redirects to role-specific dashboard
│   │   │   │
│   │   │   ├── organizer/              # Organizer module
│   │   │   │   ├── page.tsx            # Dashboard with stats & recent events
│   │   │   │   │
│   │   │   │   ├── events/
│   │   │   │   │   ├── page.tsx        # List all events (CRUD)
│   │   │   │   │   ├── create/
│   │   │   │   │   │   └── page.tsx    # Multi-step event wizard (auto-save)
│   │   │   │   │   └── [id]/
│   │   │   │   │       ├── page.tsx    # Event details view
│   │   │   │   │       └── edit/
│   │   │   │   │           └── page.tsx # Edit event form
│   │   │   │   │
│   │   │   │   ├── venues/
│   │   │   │   │   ├── page.tsx        # List venues (CRUD)
│   │   │   │   │   ├── new/
│   │   │   │   │   │   └── page.tsx    # Create venue form
│   │   │   │   │   └── [id]/
│   │   │   │   │       └── edit/
│   │   │   │   │           └── page.tsx # Edit venue form
│   │   │   │   │
│   │   │   │   ├── vendors/
│   │   │   │   │   └── page.tsx        # Vendor proposals (approve/reject with undo)
│   │   │   │   │
│   │   │   │   └── tasks/
│   │   │   │       ├── page.tsx        # List tasks (CRUD)
│   │   │   │       ├── new/
│   │   │   │       │   └── page.tsx    # Create task & assign to staff
│   │   │   │       └── [id]/
│   │   │   │           └── edit/
│   │   │   │               └── page.tsx # Edit task form
│   │   │   │
│   │   │   ├── vendor/                 # Vendor module
│   │   │   │   ├── page.tsx            # Vendor dashboard (stats)
│   │   │   │   └── proposals/
│   │   │   │       └── page.tsx        # Submit/undo proposals, view status
│   │   │   │
│   │   │   ├── staff/                  # Staff module
│   │   │   │   ├── page.tsx            # Staff dashboard (tasks stats)
│   │   │   │   ├── tasks/
│   │   │   │   │   └── page.tsx        # View assigned tasks, update status (undo)
│   │   │   │   └── issues/
│   │   │   │       └── page.tsx        # Report issues
│   │   │   │
│   │   │   └── attendee/               # Attendee module
│   │   │       ├── page.tsx            # Attendee dashboard (registered events)
│   │   │       ├── events/
│   │   │       │   └── page.tsx        # Browse & register for events
│   │   │       └── feedback/
│   │   │           └── page.tsx        # Submit feedback (rating + comment)
│   │   │
│   │   └── api/                        # Backend API routes
│   │       │
│   │       ├── test-db/
│   │       │   └── route.ts            # Test Oracle connection
│   │       │
│   │       ├── auth/
│   │       │   ├── login/route.ts      # JWT authentication
│   │       │   ├── logout/route.ts     # Clear cookie
│   │       │   └── register/route.ts   # Create user (bcrypt hash)
│   │       │
│   │       ├── users/
│   │       │   └── staff/route.ts      # List staff users for task assignment
│   │       │
│   │       ├── events/
│   │       │   ├── route.ts            # GET (list), POST (create)
│   │       │   ├── public/route.ts     # Published events (for vendors/attendees)
│   │       │   └── [id]/route.ts       # GET, PUT, DELETE single event
│   │       │
│   │       ├── venues/
│   │       │   ├── route.ts            # GET, POST venues
│   │       │   └── [id]/route.ts       # GET, PUT, DELETE single venue
│   │       │
│   │       ├── tasks/
│   │       │   ├── route.ts            # GET (organizer), POST tasks
│   │       │   └── [id]/route.ts       # GET, PUT, DELETE (organizer) + staff updates
│   │       │
│   │       ├── organizer/
│   │       │   ├── stats/route.ts      # Dashboard stats (events, vendors, tasks, attendees)
│   │       │   └── vendors/route.ts    # GET vendor proposals, PUT approve/reject
│   │       │
│   │       ├── vendor/
│   │       │   └── proposals/
│   │       │       ├── route.ts        # GET (vendor's proposals), POST (submit)
│   │       │       └── [id]/route.ts   # DELETE (undo after submission)
│   │       │
│   │       ├── staff/
│   │       │   ├── tasks/
│   │       │   │   ├── route.ts        # GET tasks assigned to staff
│   │       │   │   └── [id]/route.ts   # PUT update task status (with undo)
│   │       │   └── issues/
│   │       │       └── route.ts        # POST report issue, GET staff's issues
│   │       │
│   │       ├── attendee/
│   │       │   ├── events/
│   │       │   │   └── route.ts        # GET published events for attendee
│   │       │   ├── events-with-feedback/
│   │       │   │   └── route.ts        # GET registered events + existing feedback
│   │       │   └── register/
│   │       │       └── route.ts        # POST register for event
│   │       │
│   │       └── feedback/
│   │           └── route.ts            # POST submit feedback (rating + comment)
│   │
│   ├── components/                     # Reusable UI components
│   │   │   Breadcrumbs.tsx             # Location indicator (Home > Events > Create)
│   │   │   RoleThemeProvider.tsx       # Role-based body class (blue/green/orange/purple)
│   │   │   SearchPalette.tsx           # Global search (Ctrl+K)
│   │   │   ShortcutsHelp.tsx           # Keyboard shortcuts modal (?)
│   │   │   Sidebar.tsx                 # Role-specific navigation menu
│   │   │
│   │   └── ui/                         # Atomic UI components
│   │       ├── Button.tsx              # Themed button (default, outline, destructive, success)
│   │       ├── Card.tsx                # Card with hover effects
│   │       ├── ConfirmDialog.tsx       # Confirmation modal (delete etc.)
│   │       ├── Dialog.tsx              # Accessible modal (Radix UI)
│   │       ├── Spinner.tsx             # Loading spinner (Loader2 animation)
│   │       └── Tooltip.tsx             # Hover tooltips (Radix UI)
│   │
│   ├── lib/                            # Core utilities
│   │   ├── oracle.ts                   # Oracle DB connection pool
│   │   ├── auth.ts                     # JWT, bcrypt, user DB helpers
│   │   └── utils.ts                    # cn() for Tailwind class merging
│   │
│   ├── hooks/                          # Custom React hooks
│   │   └── useUndo.ts                  # Undo/redo state management
│   │
│   ├── types/                          # TypeScript interfaces (if any)
│   ├── assets/                         # Static assets (images, fonts)
│   ├── context/                        # React context (if needed)
│   ├── data/                           # Static data / constants
│   ├── pages/                          # Legacy pages (not used – App Router)
│   ├── redux/                          # Redux store (if used)
│   ├── services/                       # API service layer (if used)
│   └── utils/                          # Additional utility functions
│
└── node_modules/                       # Dependencies (auto‑generated)

---

Key Directories Explained

Directory	Purpose
src/app/dashboard/*	Role‑specific pages (Organizer, Vendor, Staff, Attendee) – all HCI features are implemented here.
src/app/api/*	Backend endpoints for CRUD operations, authentication, and real‑time updates.
src/components/ui/*	Reusable, accessible UI components (buttons, cards, modals, tooltips).
src/lib/*	Database connection (oracle.ts) and authentication logic (auth.ts).
src/hooks/	Custom hooks like useUndo for rollback functionality.
src/components/*	Global components (Sidebar, Breadcrumbs, SearchPalette, ShortcutsHelp).