# 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][vue], [Vite][vite], [Pinia][pinia],
and [Tailwind CSS][tailwind].


## Features

- **Files** -- Upload, browse, and manage event log files (CSV).
- **Discover** -- Visualize process maps ([Cytoscape.js][cytoscape]),
  analyze performance metrics ([Chart.js][chartjs]), 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][nodejs] (v18 or later)
- npm


## Getting Started

### Install dependencies

```sh
npm ci
```

### Configure environment

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

```sh
cp .env .env.local
```

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

The dev server proxies `/api` requests to this URL.

### Start development server

```sh
npm run dev
```

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


## Testing

### Run unit and component tests

```sh
npx vitest run
```

### Run E2E tests

Build first, then run [Cypress][cypress] against the preview
server:

```sh
npm run build
npm run test:e2e
```

For interactive E2E development with the Vite dev server:

```sh
npm run test:e2e:dev
```


## Documentation

Generate API documentation with [TypeDoc][typedoc]:

```sh
npm run docs
```

Output is in the `docs/` directory. Open `docs/index.html` in a
browser to view.


## Build for Production

```sh
npm run build
```

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

```sh
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][claude-code].


[vue]: https://vuejs.org/
[vite]: https://vitejs.dev/
[pinia]: https://pinia.vuejs.org/
[tailwind]: https://tailwindcss.com/
[cytoscape]: https://js.cytoscape.org/
[chartjs]: https://www.chartjs.org/
[nodejs]: https://nodejs.org/
[cypress]: https://www.cypress.io/
[typedoc]: https://typedoc.org/
[claude-code]: https://claude.ai/claude-code