Recolour Ticket System

A full-stack recolour request management application built with Vue 3 and Express.

Quick Start

# 1. Install dependencies
npm install
cd client && npm install && cd ..

# 2. Start the backend (port 3001)
npm run dev:server

# 3. In another terminal, start the Vue dev server (port 5173)
npm run dev:client

Open http://localhost:5173 for development (hot-reload via Vite).

Project Structure

recolour-ticket-system/
├── package.json                    # Root config & scripts
│
├── server/
│   ├── index.js                    # Express app entry point
│   ├── data/
│   │   └── store.js                # In-memory data store & seed data
│   ├── routes/
│   │   ├── tickets.js              # CRUD + workflow actions
│   │   ├── partners.js             # Partner listing with stats
│   │   ├── dashboard.js            # KPI statistics
│   │   ├── approved.js             # Approved photos library
│   │   ├── users.js                # User listing
│   │   └── images.js               # Ticket image serving
│   └── data/
│       └── Ticket 1–4/             # Mock ticket images
│
├── client/
│   ├── index.html                  # Vite entry HTML
│   ├── vite.config.js              # Vite + Vue plugin + API proxy
│   ├── package.json                # Vue 3, Vue Router, Pinia, Vite
│   └── src/
│       ├── main.js                 # App bootstrap (Pinia, Router)
│       ├── App.vue                 # Root component
│       ├── assets/
│       │   └── main.css            # Global styles & design system
│       ├── router/
│       │   └── index.js            # Vue Router routes
│       ├── stores/
│       │   ├── auth.js             # User & role management (Pinia)
│       │   ├── tickets.js          # Ticket & dashboard API (Pinia)
│       │   └── toast.js            # Toast notifications (Pinia)
│       ├── components/
│       │   ├── AppSidebar.vue      # Navigation + user switcher
│       │   ├── StatusBadge.vue     # Ticket status indicator
│       │   ├── PriorityBadge.vue   # Priority level indicator
│       │   ├── ToastContainer.vue  # Notification toasts
│       │   └── ImageLightbox.vue   # Full-screen image viewer
│       └── views/
│           ├── DashboardView.vue   # KPI cards + partner table + recent tickets
│           ├── TicketQueueView.vue  # Filterable ticket list
│           ├── TicketDetailView.vue # Full ticket detail + actions
│           ├── CreateTicketView.vue # New ticket form
│           ├── ApprovedView.vue    # Approved photos gallery
│           └── PartnersView.vue    # Partner workload overview

Features

Core (all implemented)

1. Ticket Creation — Form with photo ID, title, description, style, priority, partner, Pantone colours, AOP pattern
2. Ticket Queue — Sortable table with filter chips for all statuses (Pending, Sent, In Progress, Completed, Rejected, Approved)
3. Partner Integration — Send to partner, receive simulated confirmation with receipt code and ETA. Buttons to simulate partner progress through the full lifecycle
4. Approval & Storage — Managers approve completed tickets into the Approved Photos library, or reject with a reason
5. Navigation — Sidebar with Dashboard, Ticket Queue, New Ticket, Approved Photos, Partner Overview

Nice-to-haves (both implemented)

• Role-based views — User switcher in sidebar (Operator: create & send; Manager: approve & reject). Operators see a notice when they can't approve
• KPI Dashboard — Total tickets, pending, in-progress, completed, high-priority open, approved count, partner workload table, recent tickets

API Endpoints

Method	Endpoint	Description
GET	/api/dashboard	KPI statistics
GET	/api/tickets	List tickets (?status=, ?priority=, ?partnerId=)
GET	/api/tickets/:id	Ticket detail with partner & creator info
POST	/api/tickets	Create new ticket
PATCH	/api/tickets/:id	Update ticket fields
POST	/api/tickets/:id/send	Send to partner (simulated)
POST	/api/tickets/:id/simulate-progress	Simulate partner starting work
POST	/api/tickets/:id/simulate-complete	Simulate partner completing work
POST	/api/tickets/:id/approve	Approve ticket (manager)
POST	/api/tickets/:id/reject	Reject ticket with reason (manager)
GET	/api/approved	List approved photos
GET	/api/partners	Partners with workload stats
GET	/api/users	List users
GET	/api/images/:filename	Serve ticket images

Tech Stack

• Frontend: Vue 3 (Composition API + <script setup>), Vue Router 4, Pinia, Vite
• Backend: Express 4, Node.js
• Data: In-memory store seeded from mock ticket data
• Styling: Custom CSS design system (Inter font, indigo/purple accent, responsive)