116 lines
3.0 KiB
Markdown
116 lines
3.0 KiB
Markdown
# 🌐 Targo 2.0 Frontend
|
|
|
|
> A modern, scalable frontend for managing employees, timesheets, and time-off requests in a rural ISP environment — built with [Vue 3](https://vuejs.org/) and [Quasar Framework](https://quasar.dev/).
|
|
|
|
---
|
|
|
|
## 🚀 Tech Stack
|
|
|
|
| Layer | Technology |
|
|
| ------------ | ------------------------------------- |
|
|
| UI Framework | [Quasar (Vue 3)](https://quasar.dev/) |
|
|
| Router | Vue Router 4 |
|
|
| State | Pinia |
|
|
| HTTP | Axios |
|
|
| Auth | OAuth2/OIDC (popup-based) via backend |
|
|
| i18n | Vue I18n |
|
|
| Build Tools | Vite (default) |
|
|
| Testing | (Planned) Vitest, Cypress |
|
|
|
|
---
|
|
|
|
## 📁 Project Structure
|
|
|
|
```bash
|
|
src/
|
|
├── boot/ # Initialization scripts (e.g. axios, auth)
|
|
├── modules/ # Feature modules
|
|
│ ├── dashboard/ # Role-based dashboards (admin, technician, etc.)
|
|
│ ├── auth/ # Login popup, logout flow
|
|
│ ├── users/ # User management
|
|
│ ├── shared/ # Common components, services, etc.
|
|
│ ├── time-sheet/ # Create, validate, export timesheets and expenses
|
|
│ ├── router/ # Vue Router config
|
|
│ ├── validations/ # ??????
|
|
│ ├── i18n/ # Internationalization references
|
|
│ ├── pages/ # Route-level pages (fallbacks, misc)
|
|
│ ├── stores/ # Pinia stores
|
|
│ ├── layouts/ # App shell (toolbar, drawer)
|
|
│ ├── css/ # Stylesheets
|
|
│ ├── assets/ # Images, styles, icons
|
|
└── App.vue # Root component
|
|
```
|
|
|
|
---
|
|
|
|
## ⚙️ Setup Instructions
|
|
|
|
### 1. Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
# or
|
|
pnpm install
|
|
```
|
|
|
|
### 2. Start the Dev Server
|
|
|
|
```bash
|
|
quasar dev
|
|
```
|
|
|
|
### 3. Build for Production
|
|
|
|
```bash
|
|
quasar build
|
|
```
|
|
|
|
---
|
|
|
|
## 🥪 Testing (Planned)
|
|
|
|
```bash
|
|
# Unit tests (Vitest)
|
|
npm run test:unit
|
|
|
|
# E2E tests (Cypress)
|
|
npm run test:e2e
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Recommended Quasar Extensions
|
|
|
|
```bash
|
|
quasar ext add @quasar/pwa # PWA mode
|
|
quasar ext add @quasar/testing # Testing utils
|
|
```
|
|
|
|
---
|
|
|
|
## 🧹 Linting & Formatting
|
|
|
|
```bash
|
|
npm run lint
|
|
npm run format
|
|
```
|
|
|
|
Pre-commit hooks are managed with:
|
|
|
|
* [husky](https://github.com/typicode/husky)
|
|
* [lint-staged](https://github.com/okonet/lint-staged)
|
|
|
|
---
|
|
|
|
## 🧠 Notes
|
|
|
|
* All routes are prefixed for internal navigation.
|
|
* Common services and components live in `modules/shared/`.
|
|
* Avoid placing OIDC or sensitive logic in the frontend — everything auth-related is delegated to the backend.
|
|
|
|
---
|
|
|
|
## 📄 License
|
|
|
|
This project is proprietary and internal to **\[Targo Communication]**.
|