The Lucia Project Frontend

The frontend of the Lucia project, a process mining platform for analyzing, discovering, and comparing business process workflows.

Built with Vue 3, Vite, Pinia, and Tailwind CSS.

Features

• Files -- Upload, browse, and manage event log files (CSV).
• Discover -- Visualize process maps (Cytoscape.js), analyze performance metrics (Chart.js), and run conformance checking against user-defined rules.
• Compare -- Side-by-side comparison of process maps and dashboards.
• Account Management -- User account CRUD with role-based access control.

Tech Stack

Category	Technologies
Framework	Vue 3.5, Vue Router 5, Pinia 3
Build	Vite 7, TypeScript 5, Tailwind CSS 4
UI	PrimeVue 4, PrimeIcons, SweetAlert2
Visualization	Cytoscape.js (process maps), Chart.js (charts)
HTTP	Axios with JWT refresh token handling
Testing	Vitest 4 (unit/component), Cypress 15 (E2E)
Linting	ESLint, Prettier

Prerequisites

• Node.js (v18 or later)
• npm

Getting Started

Install dependencies

npm ci

Configure environment

Copy .env to .env.local and set the backend API URL:

cp .env .env.local

# .env.local
VUE_APP_API_URL = "http://localhost:8000"

The dev server proxies /api requests to this URL.

Start development server

npm run dev

The app will be available at http://localhost:58249.

Testing

Run unit and component tests

npx vitest run

Run E2E tests

Build first, then run Cypress against the preview server:

npm run build
npm run test:e2e

For interactive E2E development with the Vite dev server:

npm run test:e2e:dev

Build for Production

npm run build

Output is in the dist/ directory. Preview locally with:

npm run preview

Project Structure

src/
├── api/            # Axios client with JWT interceptors
├── assets/         # CSS (Tailwind), static assets
├── components/     # Reusable Vue components
│   ├── Discover/   #   Map, Conformance, Performance
│   ├── Compare/    #   Comparison sidebar
│   └── File/       #   Upload modal
├── module/         # Business logic (alerts, charts, sorting)
├── router/         # Vue Router configuration
├── stores/         # Pinia stores (state management)
├── utils/          # Utility functions (emitter, escaping)
└── views/          # Page-level route components
    ├── Discover/   #   Map, Performance, Conformance
    ├── Compare/    #   Dashboard, MapCompare
    ├── Files/      #   File browser
    ├── Upload/     #   File upload
    └── Login/      #   Authentication

Copyright

Copyright 2022-2026 DSP, inc. All rights reserved.

This software is proprietary. You may obtain, use, copy, edit or update this software with written agreements from DSP, inc.

Authors

• Chia-Yin Kuo (chiayin.kuo@dsp.im)
• imacat (imacat.yang@dsp.im)

Acknowledgments

Code quality improvements assisted by Claude Code.