---
description: How to write TrackGo user docs in VitePress (apps/docs-dev)
globs: apps/docs-dev/**
alwaysApply: false
---

# User Documentation (VitePress)

Audience: customers and operators. Location: `apps/docs-dev/`.

## Scope

Document **features and usage** (menus, screens, workflows) for:

- Web — `apps/web`
- Mobile — sibling `trackgo_mobile`

Do **not** document tech stack, package internals, Electron IPC, or monorepo setup here. Technical docs belong in `trackgo-be/docs/` (MkDocs).

## Where to add pages

Prefer:

```text
apps/docs-dev/src/user/web/
apps/docs-dev/src/user/mobile/
```

Register new pages in `src/.vitepress/config.mts` sidebar/nav.

## Languages

User guides ship in **English** (root) and **Bahasa Indonesia** (`src/id/`). When you add or edit a user page, update both locales. Keep in-app labels from web `languages/id` JSON and mobile `app_localizations_id.dart`.

Do **not** add new pages under the legacy architecture sidebar paths (`/packages/*`, `/apps/desktop/*`, `/setup`, `/overview`). Those stay until a later migration; do not expand them.

Existing user how-tos (e.g. `src/apps/web/SALES_WORKFLOW.md`): keep user-facing; when editing, convert Mermaid to PlantUML and remove emoji.

## Topics (only if present in code)

**Web** (from menus / modules — verify in `apps/web`):

- Master data: company settings, branches, divisions, customers, products, employees
- Users and privileges
- Plans (one-time / recurring) and attached invoices / packing slips
- Live timeline / activity history
- Import of invoices / packing slips
- Sales flow: request → order → invoice → payment
- Logistics packing slips

**Mobile** (from `trackgo_mobile/lib/ui/features/` and `lib/config/router.dart`):

- Branch check-in before work
- Plans, customers / visits, invoice payment
- Home performance / history

Anything in a product brief that is not in the code → **Coming soon**.

## Style

- No emoji.
- Diagrams / sequences: PlantUML only (do not add Mermaid on new or edited pages).
- Icons: `lucide-vue-next` in markdown `<script setup>`, same Lucide names as web menus.

````markdown
```plantuml
@startuml
actor User
User -> Web: Create sales order
@enduml
```
````

```vue
<script setup>
import { ShoppingCart } from 'lucide-vue-next'
</script>
```

```text
# BAD — new architecture page in docs-dev
apps/docs-dev/src/packages/core-api/new-api.md

# BAD — Mermaid / emoji / React Lucide in VitePress
```mermaid
```
"📦 Sales"
import { ShoppingCart } from 'lucide-react'

# GOOD
apps/docs-dev/src/user/web/sales-workflow.md
apps/docs-dev/src/user/mobile/check-in.md
```