Targo Timesheet PWA — modernized UI fork
528c860a32
Design: - Switch to material-icons-outlined globally - White header with green Targo logo - Sidebar: outlined icons, active state with green fill + glow - Dashboard: Material icons replace broken PNG images - Shift types: outlined icons (light_mode, dark_mode, warning_amber, etc.) - Modern scrollbar, card borders, font smoothing Timesheet: - Day-by-day mini bars in weekly overview (S1/S2 with D L M M J V S headers) - Clickable bars scroll to corresponding day card with flash animation - Double-click empty card to add shift - Weekend cards: gray background + left border, text stays readable - Whole page scrolls naturally (removed internal q-scroll-area) - Week column headers (Heures Semaine 1/2) - Monday separator line - Today: green glow + CSS circle indicator - more_time icon replaces add_circle Overview cards: - PTO: table format, no duplicate "vacances" header, aligned values - Hours: weekly chips side by side - Expenses: total badge next to button, aligned under hours card Mobile: - Modernized day cards with date header (number + weekday + month) - Delete button moved to bottom of shift card - Outlined icons unified with desktop - Weekly overview: compact "Sem. 1/2" with day-dot bars Auth: - Dev bypass: oidcLogin tries getProfile first before OIDC popup - Fixed floating-promises lint errors Bug fixes: - Removed console.log in shift-list-day - Fixed broken asset paths (src/assets → public/img) - circle.png replaced with CSS-only today indicator Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .gitea/workflows | ||
| public | ||
| src | ||
| .env.production | ||
| .gitignore | ||
| .npmrc | ||
| docker-compose.yaml | ||
| Dockerfile | ||
| env.sh | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| quasar.config.ts | ||
| README.md | ||
| tsconfig.json | ||
🌐 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 and Quasar Framework.
🚀 Tech Stack
| Layer | Technology |
|---|---|
| UI Framework | Quasar (Vue 3) |
| 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
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
npm install
# or
pnpm install
2. Start the Dev Server
quasar dev
3. Build for Production
quasar build
🥪 Testing (Planned)
# Unit tests (Vitest)
npm run test:unit
# E2E tests (Cypress)
npm run test:e2e
📦 Recommended Quasar Extensions
quasar ext add @quasar/pwa # PWA mode
quasar ext add @quasar/testing # Testing utils
🧹 Linting & Formatting
npm run lint
npm run format
Pre-commit hooks are managed with:
🧠 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].