Planification grille : retrait de l'axe de temps + la bande n'intercepte plus le clic/drag de la cellule

- Axe de temps (hdr-ruler 0..24) retiré des en-têtes de jour (inutile dans la grille ; encombrant).
- La bande d'occupation `.tl` ne stoppe plus la propagation (plus de @mousedown.stop/@click.stop) → le
  clic/drag sur la cellule remonte à `<td>` → onCellClick (menu d'horaire) + onDown/onEnter (sélection) refonctionnent.
- L'éditeur de journée s'ouvre désormais en cliquant un BLOC de job (.tl-blk, @click.stop) — pas toute la
  bande. Donc : clic sur un bloc coloré = éditer la tournée ; clic ailleurs dans la cellule = modifier l'horaire.
  Le tooltip d'occupation (survol) reste actif. Curseur/hover sur les blocs cliquables.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.env

@@ -1,3 +0,0 @@
-VITE_SUPABASE_PROJECT_ID="rddrjzptzhypltuzmere"
-VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJkZHJqenB0emh5cGx0dXptZXJlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzA4MTY4NTYsImV4cCI6MjA4NjM5Mjg1Nn0.EluFlKBze8BYM6AFx88G7kt21EvR18EI3uw1zgCXVzs"
-VITE_SUPABASE_URL="https://rddrjzptzhypltuzmere.supabase.co"

.gitignore

@@ -1,25 +1,53 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Environment files (may contain secrets)
 .env
+.env.local
+.env.*.local
+apps/**/.env
+apps/**/.env.local
+
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+docker/
+
+# Quasar dev cache
+apps/**/.quasar/
+
+# Claude workspace (local only)
+.claude/
+
+# Data exports (may contain PII)
+exports/
+
+# OS
+.DS_Store
+**/.DS_Store
+Thumbs.db
+
+# Generated invoice/quote previews (output of setup_invoice_print_format.py
+# + test_jinja_render.py). Keep sources (*.jinja) and final references
+# (docs/assets/*.pdf when added intentionally), never ephemeral output.
+invoice_preview*.pdf
+scripts/migration/invoice_preview*.pdf
+scripts/migration/invoice_preview*.html
+scripts/migration/rendered_jinja_invoice*
+scripts/migration/SINV-*.pdf
+scripts/migration/ref_invoice.pdf
+
+# IDE
+.vscode/
+.idea/
+
+# Playwright snapshots
+.playwright-mcp/
+
+# Auto-generated backups from scripts/convert-html-to-unlayer.js
+services/targo-hub/templates/*.bak-*.json
+services/targo-hub/templates/*.bak-*.html
+
+# Legacy refresh creds (prod-only, never commit)
+.refresh.env
+**/.refresh.env

README.md

@@ -1,73 +1,155 @@
-# Welcome to your Lovable project
+# Gigafibre FSM
 
-## Project info
+Gigafibre FSM is the operations platform for **Gigafibre** (consumer brand of TARGO Internet), a fiber ISP in Quebec. It replaces a legacy PHP/MariaDB billing system with ERPNext v16 + Vue 3/Quasar apps for ops, dispatch, field service, and customer self-service.
 
-**URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
+## Repository Structure
 
-## How can I edit this code?
-
-There are several ways of editing your application.
-
-**Use Lovable**
-
-Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
-
-Changes made via Lovable will be committed automatically to this repo.
-
-**Use your preferred IDE**
-
-If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
-
-The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
-
-Follow these steps:
-
-```sh
-# Step 1: Clone the repository using the project's Git URL.
-git clone <YOUR_GIT_URL>
-
-# Step 2: Navigate to the project directory.
-cd <YOUR_PROJECT_NAME>
-
-# Step 3: Install the necessary dependencies.
-npm i
-
-# Step 4: Start the development server with auto-reloading and an instant preview.
-npm run dev
+```
+gigafibre-fsm/
+  apps/
+    ops/           Targo Ops -- main operations PWA (Vue 3 / Quasar v2)
+    field/         Targo Field -- mobile app for technicians
+    client/        Gigafibre Portal -- customer self-service
+    website/       www.gigafibre.ca -- marketing site (React / Vite / Tailwind)
+    portal/        Customer portal deploy configs
+  services/
+    targo-hub/     Node.js API gateway (ERPNext, GenieACS, Twilio, Traccar)
+    modem-bridge/  SNMP/TR-069 bridge for CPE diagnostics
+    legacy-db/     Legacy MariaDB read-only access
+    docuseal/      Document signing service
+  erpnext/         Custom doctype setup scripts (setup_fsm_doctypes.py)
+  scripts/
+    migration/     51 Python scripts for legacy-to-ERPNext data migration
+    bulk_submit.py, fix_ple_*.py/sh -- PostgreSQL patches, bulk ops
+  docs/            Architecture, infrastructure, migration, strategy docs
+  docker/          Docker compose fragments
+  patches/         ERPNext patches
 ```
 
-**Edit a file directly in GitHub**
+## Architecture
 
-- Navigate to the desired file(s).
-- Click the "Edit" button (pencil icon) at the top right of the file view.
-- Make your changes and commit the changes.
+```
+           Internet
+              |
+    96.125.196.67 (Proxmox VM, Ubuntu 24.04, Docker)
+              |
+        Traefik v2.11 (TLS via Let's Encrypt)
+              |
+   +----------+----------+----------+----------+----------+
+   |          |          |          |          |          |
+ERPNext    Ops PWA   Authentik    n8n     Website    DocuSeal
+erp.       erp.      auth.       n8n.    www.       docs.
+gigafibre  gigafibre  targo.ca    giga    giga       gigafibre
+.ca        .ca/ops/   id.giga     fibre   fibre      .ca
+                      fibre.ca    .ca     .ca
+              |
+         targo-hub (API gateway, msg.gigafibre.ca)
+              |
+   +----------+----------+----------+----------+
+   |          |          |          |          |
+GenieACS   Twilio     Mailjet   Stripe   Traccar
+(TR-069)   (SMS)      (email)   ($)      (GPS)
+              |
+       modem-bridge (SNMP / TR-069 deep-dive for TP-Link)
+```
 
-**Use GitHub Codespaces**
+## Services & Dependencies
 
-- Navigate to the main page of your repository.
-- Click on the "Code" button (green button) near the top right.
-- Select the "Codespaces" tab.
-- Click on "New codespace" to launch a new Codespace environment.
-- Edit files directly within the Codespace and commit and push your changes once you're done.
+| Service | URL | Stack | Purpose |
+|---------|-----|-------|---------|
+| ERPNext | erp.gigafibre.ca | Frappe v16, PostgreSQL | ERP / billing / ticketing — Source of Truth |
+| Ops SPA | erp.gigafibre.ca/ops/ | Vue 3, Quasar v2, Pinia | Internal operations app (dispatch, clients, settings) |
+| targo-hub | msg.gigafibre.ca | Node.js 20, Express | API gateway: SMS, SSE, AI, OAuth admin, Stripe webhooks, Traccar proxy |
+| modem-bridge | internal | Node.js, Playwright | TR-181 deep-dive for TP-Link XX230v / Deco mesh |
+| Authentik (staff) | auth.targo.ca | Python, PostgreSQL | SSO for ops + n8n + Gitea + ERPNext OAuth provider |
+| Authentik (clients) | id.gigafibre.ca | Python, PostgreSQL | SSO for customer-facing portals |
+| n8n | n8n.gigafibre.ca | Node.js | Workflow automation (campaigns, SMS, email) |
+| Traefik | — | Go | Reverse proxy, TLS, forwardAuth middleware |
+| Website | www.gigafibre.ca | React, Vite, Tailwind | Marketing site + address API |
+| DocuSeal | sign.gigafibre.ca | Ruby on Rails | Contract e-signature |
+| GenieACS | (external) | Node.js, MongoDB | TR-069 ACS for ONT/router fleet |
+| Traccar | (external) | Java | GPS tracking for techs |
 
-## What technologies are used for this project?
+## ERPNext Custom Doctypes
 
-This project is built with:
+| Doctype | ID Pattern | Purpose |
+|---------|-----------|---------|
+| Service Location | LOC-##### | Customer premises (address, GPS, OLT port, network config) |
+| Service Equipment | EQP-##### | Deployed hardware (ONT, router, TV box -- serial, MAC, IP) |
+| Service Subscription | SUB-##### | Active service plans (speed, price, billing, RADIUS) |
+| Dispatch Job | DJ-##### | Work orders with equipment, materials, checklist, photos, signature |
+| Dispatch Technician | DT-##### | Tech profiles with GPS (Traccar), skills, color coding |
+| Dispatch Tag | -- | Skill/service/region tags with levels (Fibre, TV, Telephonie, etc.) |
 
-- Vite
-- TypeScript
-- React
-- shadcn-ui
-- Tailwind CSS
+## Key Custom Fields
 
-## How can I deploy this project?
+| Doctype | Custom Fields |
+|---------|---------------|
+| Customer | `legacy_account_id`, `legacy_customer_id`, `ppa_enabled`, `stripe_id` |
+| Item | `legacy_product_id`, `download_speed`, `upload_speed`, `olt_profile` |
+| Subscription | `radius_user`, `radius_pwd`, `legacy_service_id` |
+| Issue | `legacy_ticket_id`, `assigned_staff`, `issue_type`, `is_important`, `service_location` |
 
-Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
+## Tech Stack
 
-## Can I connect a custom domain to my Lovable project?
+**Frontend:** Vue 3, Quasar v2, Pinia, Vite, Mapbox GL JS
+**Backend:** ERPNext v16 / Frappe (Python), PostgreSQL, Node.js (targo-hub)
+**Infra:** Docker, Traefik v2.11, Authentik SSO, Proxmox
+**Integrations:** Twilio (SMS), Mailjet (email), Stripe (payments), Traccar (GPS), GenieACS (TR-069), Gemini 2.5 Flash via targo-hub (vision/OCR — see [docs/features/vision-ocr.md](docs/features/vision-ocr.md))
 
-Yes, you can!
+## Data Volumes (migrated from legacy)
 
-To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
+| Entity | Volume |
+|--------|--------|
+| Customers | 6,667 (active + terminated) |
+| Subscriptions | 21,876 (with RADIUS credentials) |
+| Sales Invoices | 115,000+ |
+| Payments | 99,000+ (with invoice references) |
+| Tickets (Issues) | 242,000+ (parent/child hierarchy) |
+| Ticket Messages | 784,000+ |
+| Devices | 7,600+ (ONT, router, TV box) |
+| Service Locations | ~17,000 |
 
-Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
+## Development
+
+```bash
+# Ops app
+cd apps/ops && npm install && npx quasar dev
+
+# Website
+cd apps/website && npm install && npm run dev
+
+# targo-hub
+cd services/targo-hub && npm install && npm run dev
+
+# Deploy ops to production
+cd apps/ops && bash deploy.sh
+```
+
+## Auth Pattern
+
+Two parallel Authentik instances — **not** a migration in progress:
+- **`auth.targo.ca`** — staff-facing. Protects `/ops/`, n8n, Gitea, the hub admin endpoints. Also acts as the OAuth provider for ERPNext sign-in. Lives on the prod box at `/opt/authentik` (managed by Targo's IT team).
+- **`id.gigafibre.ca`** — customer-facing. Protects the client portal. Lives at `/opt/authentik-client` on the prod box.
+
+Staff apps go through Traefik `forwardAuth` → Authentik outpost → cookie. The ops SPA reads `X-Authentik-Email` from the proxied header to identify the user, then maps Authentik groups to the in-app capability set (`useUserGroups.js`). All ERPNext API calls from targo-hub use `Authorization: token <ERP_SERVICE_TOKEN>` (Bearer from `.env`).
+
+New users are added via **ops Settings → Utilisateurs → "Inviter"** which hits `POST /auth/users` on the hub. The hub creates the Authentik user, sets a temporary password, emails it via Mailjet, and creates the matching ERPNext System User in one round-trip. See [docs/SETUP.md](docs/SETUP.md) §6.
+
+## Documentation
+
+Start at **[docs/README.md](docs/README.md)** — it indexes every doc with a
+"I want to…" intent table. Quick map:
+
+| Area | Entry point |
+|---|---|
+| Plan & live module URLs | [docs/roadmap.md](docs/roadmap.md) |
+| System architecture (services, Docker, SSO) | [docs/architecture/overview.md](docs/architecture/overview.md) |
+| ERPNext data model + customer flows | [docs/architecture/data-model.md](docs/architecture/data-model.md) |
+| Frontend patterns (Vue/Quasar/Pinia) | [docs/architecture/app-design.md](docs/architecture/app-design.md) |
+| Billing, Stripe, invoices | [docs/features/billing-payments.md](docs/features/billing-payments.md) |
+| CPE / modems / ONTs / TR-069 | [docs/features/cpe-management.md](docs/features/cpe-management.md) |
+| Scanner / OCR / Gemini pipeline | [docs/features/vision-ocr.md](docs/features/vision-ocr.md) |
+| Agent flows (Flow Template) | [docs/features/flow-editor.md](docs/features/flow-editor.md) |
+| Wizard SKU vs legacy audit | [docs/reference/erpnext-item-diff.md](docs/reference/erpnext-item-diff.md) |
+| Historical snapshots & migration logs | [docs/archive/](docs/archive/) |

apps/client/deploy.sh

@@ -0,0 +1,75 @@
+#!/bin/bash
+# ─────────────────────────────────────────────────────────────────────────────
+# deploy.sh — Build Gigafibre Customer Portal and ship to portal.gigafibre.ca
+#
+# Topology (2026-04-22):
+#   portal.gigafibre.ca  → standalone nginx:alpine container `client-portal`
+#                          serving /opt/client-app/ on erp.gigafibre.ca.
+#   client.gigafibre.ca  → Traefik 302 → portal.gigafibre.ca (legacy alias).
+#
+# We build the PWA with base=/ (the portal host serves from root, not from
+# /assets/client-app/ like the old ERPNext-embedded deployment) and rsync
+# the dist/pwa/ output into /opt/client-app/ on the server. The nginx
+# container bind-mounts /opt/client-app/ read-only, so files appear live
+# with no container restart.
+#
+# Usage:
+#   ./deploy.sh          # build + ship to production (portal.gigafibre.ca)
+#   ./deploy.sh local    # build only (dist/pwa/) — no deploy
+# ─────────────────────────────────────────────────────────────────────────────
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+SERVER="root@96.125.196.67"
+SSH_KEY="$HOME/.ssh/proxmox_vm"
+DEST="/opt/client-app"
+
+echo "==> Installing dependencies..."
+npm ci --silent
+
+echo "==> Building PWA (base=/ for portal.gigafibre.ca)..."
+# VITE_ERP_TOKEN is still needed by a few API calls that hit ERPNext
+# directly (catalog, invoice PDFs). TODO: migrate these behind the hub.
+VITE_ERP_TOKEN="b273a666c86d2d0:06120709db5e414" DEPLOY_BASE=/ npx quasar build -m pwa
+
+if [ "${1:-}" = "local" ]; then
+  echo ""
+  echo "Local build done. Output: dist/pwa/"
+  exit 0
+fi
+
+echo "==> Packaging..."
+tar czf /tmp/client-pwa.tar.gz -C dist/pwa .
+
+echo "==> Shipping to $SERVER:$DEST ..."
+# We deploy to a staging dir and flip atomically — this avoids serving
+# a half-written index.html referencing new hashed assets that haven't
+# finished uploading (would 404 the SPA for a second or two).
+cat /tmp/client-pwa.tar.gz | ssh -i "$SSH_KEY" "$SERVER" "bash -s" <<'REMOTE'
+set -euo pipefail
+cat > /tmp/client.tar.gz
+STAGE=$(mktemp -d /opt/client-app.new.XXXXXX)
+tar xzf /tmp/client.tar.gz -C "$STAGE"
+# Preserve docker-compose.yml + nginx.conf from live dir (they live alongside the SPA)
+cp /opt/client-app/docker-compose.yml "$STAGE/" 2>/dev/null || true
+cp /opt/client-app/nginx.conf "$STAGE/" 2>/dev/null || true
+# Atomic flip
+BACKUP=/opt/client-app.bak.$(date +%s)
+mv /opt/client-app "$BACKUP"
+mv "$STAGE" /opt/client-app
+# Keep last 3 backups, prune the rest
+ls -dt /opt/client-app.bak.* 2>/dev/null | tail -n +4 | xargs -r rm -rf
+rm -f /tmp/client.tar.gz
+# nginx bind-mount follows the original inode, so the `mv` swap above
+# leaves the container pointed at the backup dir. Restart to re-bind.
+docker restart client-portal >/dev/null
+echo "  Deployed. Backup: $BACKUP"
+REMOTE
+
+rm -f /tmp/client-pwa.tar.gz
+
+echo ""
+echo "Done! Customer Portal: https://portal.gigafibre.ca/"
+echo "Legacy alias (302):    https://client.gigafibre.ca/"

apps/client/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Gigafibre</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Portail client Gigafibre">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

apps/client/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "gigafibre-client",
+  "version": "1.0.0",
+  "description": "Gigafibre Customer Portal",
+  "productName": "Gigafibre",
+  "private": true,
+  "scripts": {
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "lint": "eslint --ext .js,.vue ./src"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.16.12",
+    "pinia": "^2.1.7",
+    "quasar": "^2.16.10",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^1.10.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "sass": "^1.72.0",
+    "workbox-build": "7.0.x",
+    "workbox-cacheable-response": "7.0.x",
+    "workbox-core": "7.0.x",
+    "workbox-expiration": "7.0.x",
+    "workbox-precaching": "7.0.x",
+    "workbox-routing": "7.0.x",
+    "workbox-strategies": "7.0.x"
+  },
+  "engines": {
+    "node": "^20 || ^18",
+    "npm": ">= 6.13.4"
+  }
+}

apps/client/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [],
+}

apps/client/public/chat.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Gigafibre</title>
+  <link rel="icon" type="image/png" href="/icons/favicon-128x128.png">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8fafc; color: #1e293b; -webkit-font-smoothing: antialiased; }
+    .chat-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 600px; margin: 0 auto; background: #f8fafc; position: relative; }
+    .chat-loading, .chat-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; gap: 12px; }
+    .chat-error-icon { font-size: 48px; }
+    .spinner { width: 36px; height: 36px; border: 3px solid #e2e8f0; border-top-color: #4f46e5; border-radius: 50%; animation: spin 0.8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; }
+    .chat-logo { width: 36px; height: 36px; border-radius: 8px; background: #4f46e5; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
+    .chat-title { font-weight: 600; font-size: 1rem; }
+    .chat-sub { font-size: 0.8rem; color: #94a3b8; }
+
+    .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
+    .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; }
+
+    .chat-msg { display: flex; }
+    .chat-msg-customer { justify-content: flex-end; }
+    .chat-msg-agent { justify-content: flex-start; }
+    .chat-msg-system { justify-content: center; }
+
+    .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.4; word-break: break-word; }
+    .chat-msg-customer .chat-bubble { background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; }
+    .chat-msg-agent .chat-bubble { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
+    .chat-msg-system .chat-bubble { background: transparent; color: #94a3b8; font-size: 0.8rem; padding: 4px 8px; }
+
+    .chat-meta { font-size: 0.7rem; opacity: 0.6; margin-top: 4px; text-align: right; }
+    .chat-via { background: rgba(255,255,255,0.2); padding: 1px 4px; border-radius: 3px; font-size: 0.65rem; margin-right: 4px; }
+    .chat-msg-agent .chat-via { background: #f1f5f9; }
+
+    .chat-input-bar { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #e2e8f0; }
+    .chat-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 20px; padding: 10px 16px; font-size: 0.92rem; outline: none; resize: none; font-family: inherit; min-height: 42px; max-height: 120px; }
+    .chat-input:focus { border-color: #4f46e5; }
+    .chat-send { width: 42px; height: 42px; border-radius: 50%; background: #4f46e5; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
+    .chat-send:hover { background: #4338ca; }
+    .chat-send:disabled { background: #cbd5e1; cursor: default; }
+    .chat-send svg { width: 20px; height: 20px; }
+
+    .chat-closed { padding: 16px; text-align: center; color: #94a3b8; font-size: 0.9rem; border-top: 1px solid #e2e8f0; }
+
+    .chat-push-banner { position: absolute; bottom: 70px; left: 12px; right: 12px; background: #4f46e5; color: #fff; padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; font-size: 0.85rem; cursor: pointer; box-shadow: 0 4px 12px rgba(79,70,229,0.3); gap: 8px; }
+    .chat-push-banner .close { margin-left: auto; background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; padding: 0 4px; }
+  </style>
+</head>
+<body>
+  <div id="app" class="chat-page">
+    <div class="chat-loading">
+      <div class="spinner"></div>
+      <div>Chargement...</div>
+    </div>
+  </div>
+
+  <script>
+    const HUB_URL = 'https://msg.gigafibre.ca'
+    const token = window.location.pathname.split('/c/')[1]?.split('/')[0]?.split('?')[0]
+
+    const app = document.getElementById('app')
+    let conv = null
+    let eventSource = null
+
+    if (!token) {
+      showError('Lien invalide')
+    } else {
+      loadConversation()
+    }
+
+    async function loadConversation () {
+      try {
+        const res = await fetch(`${HUB_URL}/conversations/${token}`)
+        if (!res.ok) { showError('Conversation introuvable'); return }
+        conv = await res.json()
+        render()
+        connectSSE()
+        checkPush()
+      } catch {
+        showError('Erreur de connexion')
+      }
+    }
+
+    function showError (msg) {
+      app.innerHTML = `<div class="chat-error"><div class="chat-error-icon">⚠</div><div style="font-size:1.1rem;font-weight:600">${msg}</div><div style="font-size:0.85rem">Ce lien a peut-être expiré ou est invalide.</div></div>`
+    }
+
+    function render () {
+      const msgs = conv.messages.map(m => `
+        <div class="chat-msg chat-msg-${m.from}">
+          <div class="chat-bubble">
+            <div>${escapeHtml(m.text)}</div>
+            <div class="chat-meta">${m.via === 'sms' ? '<span class="chat-via">SMS</span>' : ''}${formatTime(m.ts)}</div>
+          </div>
+        </div>
+      `).join('')
+
+      const inputBar = conv.status === 'active'
+        ? `<div class="chat-input-bar">
+            <textarea id="msgInput" class="chat-input" placeholder="Tapez votre message..." rows="1"></textarea>
+            <button id="sendBtn" class="chat-send" disabled>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>
+            </button>
+          </div>`
+        : '<div class="chat-closed">✓ Cette conversation est terminée.</div>'
+
+      app.innerHTML = `
+        <div class="chat-header">
+          <div class="chat-logo">G</div>
+          <div>
+            <div class="chat-title">${escapeHtml(conv.subject || 'Gigafibre')}</div>
+            <div class="chat-sub">${escapeHtml(conv.customerName || '')}</div>
+          </div>
+        </div>
+        <div id="messages" class="chat-messages">
+          ${msgs || '<div class="chat-empty"><div style="font-size:32px;color:#cbd5e1">💬</div><div>Commencez la conversation</div></div>'}
+        </div>
+        ${inputBar}
+      `
+
+      scrollToBottom()
+
+      // Bind events
+      const input = document.getElementById('msgInput')
+      const btn = document.getElementById('sendBtn')
+      if (input && btn) {
+        input.addEventListener('input', () => {
+          btn.disabled = !input.value.trim()
+          input.style.height = 'auto'
+          input.style.height = Math.min(input.scrollHeight, 120) + 'px'
+        })
+        input.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage() }
+        })
+        btn.addEventListener('click', sendMessage)
+      }
+    }
+
+    async function sendMessage () {
+      const input = document.getElementById('msgInput')
+      const text = input?.value?.trim()
+      if (!text) return
+
+      input.value = ''
+      input.style.height = 'auto'
+      document.getElementById('sendBtn').disabled = true
+
+      try {
+        const res = await fetch(`${HUB_URL}/conversations/${token}/messages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text }),
+        })
+        const data = await res.json()
+        if (data.message && !conv.messages.find(m => m.id === data.message.id)) {
+          conv.messages.push(data.message)
+          appendMessage(data.message)
+        }
+      } catch (e) {
+        console.error('Send error:', e)
+      }
+    }
+
+    function appendMessage (msg) {
+      const container = document.getElementById('messages')
+      if (!container) return
+      // Remove empty state
+      const empty = container.querySelector('.chat-empty')
+      if (empty) empty.remove()
+
+      const div = document.createElement('div')
+      div.className = `chat-msg chat-msg-${msg.from}`
+      div.innerHTML = `
+        <div class="chat-bubble">
+          <div>${escapeHtml(msg.text)}</div>
+          <div class="chat-meta">${msg.via === 'sms' ? '<span class="chat-via">SMS</span>' : ''}${formatTime(msg.ts)}</div>
+        </div>
+      `
+      container.appendChild(div)
+      scrollToBottom()
+    }
+
+    function connectSSE () {
+      eventSource = new EventSource(`${HUB_URL}/conversations/${token}/sse`)
+      eventSource.addEventListener('conv-message', (e) => {
+        try {
+          const data = JSON.parse(e.data)
+          const msg = data.message
+          if (!conv.messages.find(m => m.id === msg.id)) {
+            conv.messages.push(msg)
+            appendMessage(msg)
+          }
+        } catch {}
+      })
+    }
+
+    function checkPush () {
+      if (!('serviceWorker' in navigator) || !('PushManager' in window) || !conv.vapidPublicKey) return
+      if (Notification.permission === 'granted') { registerPush(); return }
+      if (Notification.permission === 'default') {
+        // Show banner after a short delay
+        setTimeout(() => {
+          const banner = document.createElement('div')
+          banner.className = 'chat-push-banner'
+          banner.innerHTML = '🔔 Activer les notifications pour ne pas manquer de réponse <button class="close">✕</button>'
+          banner.addEventListener('click', async (e) => {
+            if (e.target.classList.contains('close')) { banner.remove(); return }
+            const perm = await Notification.requestPermission()
+            banner.remove()
+            if (perm === 'granted') registerPush()
+          })
+          app.appendChild(banner)
+        }, 2000)
+      }
+    }
+
+    async function registerPush () {
+      try {
+        const reg = await navigator.serviceWorker.ready
+        const sub = await reg.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: urlBase64ToUint8Array(conv.vapidPublicKey),
+        })
+        await fetch(`${HUB_URL}/conversations/${token}/push`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(sub.toJSON()),
+        })
+      } catch (e) { console.error('Push registration failed:', e) }
+    }
+
+    function urlBase64ToUint8Array (base64) {
+      const padding = '='.repeat((4 - base64.length % 4) % 4)
+      const b64 = (base64 + padding).replace(/-/g, '+').replace(/_/g, '/')
+      const raw = atob(b64)
+      return Uint8Array.from([...raw].map(c => c.charCodeAt(0)))
+    }
+
+    function scrollToBottom () {
+      const el = document.getElementById('messages')
+      if (el) el.scrollTop = el.scrollHeight
+    }
+
+    function escapeHtml (str) {
+      if (!str) return ''
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+    }
+
+    function formatTime (ts) {
+      if (!ts) return ''
+      const d = new Date(ts)
+      const now = new Date()
+      const time = d.toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })
+      if (d.toDateString() === now.toDateString()) return time
+      return d.toLocaleDateString('fr-CA', { month: 'short', day: 'numeric' }) + ' ' + time
+    }
+  </script>
+</body>
+</html>

apps/client/quasar.config.js

@@ -0,0 +1,66 @@
+/* eslint-env node */
+const { configure } = require('quasar/wrappers')
+
+module.exports = configure(function () {
+  return {
+    boot: ['pinia'],
+
+    css: ['app.scss'],
+
+    extras: ['roboto-font', 'material-icons'],
+
+    build: {
+      target: {
+        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        node: 'node20',
+      },
+      vueRouterMode: 'hash',
+      extendViteConf (viteConf) {
+        viteConf.base = process.env.DEPLOY_BASE || '/assets/client-app/'
+      },
+    },
+
+    devServer: {
+      open: false,
+      host: '0.0.0.0',
+      port: 9002,
+      proxy: {
+        '/api': {
+          target: 'https://erp.gigafibre.ca',
+          changeOrigin: true,
+        },
+      },
+    },
+
+    framework: {
+      config: {},
+      plugins: ['Notify', 'Loading', 'Dialog'],
+    },
+
+    animations: [],
+
+    pwa: {
+      workboxMode: 'generateSW',
+      injectPwaMetaTags: true,
+      swFilename: 'sw.js',
+      manifestFilename: 'manifest.json',
+      useCredentialForManifestTag: false,
+      workboxOptions: {
+        skipWaiting: true,
+        clientsClaim: true,
+        cleanupOutdatedCaches: true,
+        navigateFallback: 'index.html',
+        navigateFallbackDenylist: [/^\/api\//],
+      },
+      extendManifestJson (json) {
+        json.name = 'Gigafibre'
+        json.short_name = 'Gigafibre'
+        json.description = 'Portail client Gigafibre'
+        json.display = 'standalone'
+        json.background_color = '#ffffff'
+        json.theme_color = '#0ea5e9'
+        json.start_url = '.'
+      },
+    },
+  }
+})

apps/client/src-pwa/custom-service-worker.js

@@ -0,0 +1,30 @@
+/* eslint-env serviceworker */
+
+/*
+ * This file (which will be your service worker)
+ * is picked up by the build system ONLY if
+ * quasar.config.js > pwa > workboxMode is set to "injectManifest"
+ */
+
+import { clientsClaim } from 'workbox-core'
+import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
+import { registerRoute, NavigationRoute } from 'workbox-routing'
+
+self.skipWaiting()
+clientsClaim()
+
+// Use with precache injection
+precacheAndRoute(self.__WB_MANIFEST)
+
+cleanupOutdatedCaches()
+
+// Non-SSR fallback to index.html
+// Production SSR fallback to offline.html (except for dev)
+if (process.env.MODE !== 'ssr' || process.env.PROD) {
+  registerRoute(
+    new NavigationRoute(
+      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
+      { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
+    )
+  )
+}

apps/client/src-pwa/manifest.json

@@ -0,0 +1,32 @@
+{
+  "orientation": "portrait",
+  "background_color": "#ffffff",
+  "theme_color": "#027be3",
+  "icons": [
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

apps/client/src-pwa/pwa-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}

apps/client/src-pwa/register-service-worker.js

@@ -0,0 +1,41 @@
+import { register } from 'register-service-worker'
+
+// The ready(), registered(), cached(), updatefound() and updated()
+// events passes a ServiceWorkerRegistration instance in their arguments.
+// ServiceWorkerRegistration: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+
+register(process.env.SERVICE_WORKER_FILE, {
+  // The registrationOptions object will be passed as the second argument
+  // to ServiceWorkerContainer.register()
+  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter
+
+  // registrationOptions: { scope: './' },
+
+  ready (/* registration */) {
+    // console.log('Service worker is active.')
+  },
+
+  registered (/* registration */) {
+    // console.log('Service worker has been registered.')
+  },
+
+  cached (/* registration */) {
+    // console.log('Content has been cached for offline use.')
+  },
+
+  updatefound (/* registration */) {
+    // console.log('New content is downloading.')
+  },
+
+  updated (/* registration */) {
+    // console.log('New content is available; please refresh.')
+  },
+
+  offline () {
+    // console.log('No internet connection found. App is running in offline mode.')
+  },
+
+  error (/* err */) {
+    // console.error('Error during service worker registration:', err)
+  }
+})

apps/client/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useCustomerStore } from 'src/stores/customer'
+
+const store = useCustomerStore()
+onMounted(() => {
+  store.init().catch(() => {
+    // Auth not available (standalone portal mode) — continue as guest
+    console.info('[Portal] Auth unavailable — running in guest mode')
+  })
+})
+</script>

apps/client/src/api/auth-portal.js

@@ -0,0 +1,32 @@
+/**
+ * Portal passwordless auth — talks to targo-hub /portal/*.
+ *
+ * Flow:
+ *   1. Customer lands on /#/login (no token, no session).
+ *   2. Types email or phone, hits "Recevoir mon lien".
+ *   3. requestPortalLink() POSTs the identifier to the hub.
+ *   4. Hub looks up the Customer, mints a 24h JWT, sends via SMS + email.
+ *   5. Customer clicks the link in their inbox → portal.gigafibre.ca/#/?token=JWT.
+ *   6. useMagicToken() decodes it on page load, hydrates the customer store.
+ *
+ * The hub always returns 200 OK (anti-enumeration), so the only
+ * non-success response the UI should handle is 429 (rate limit).
+ */
+const HUB = location.hostname === 'localhost' ? 'http://localhost:3300' : 'https://msg.gigafibre.ca'
+
+export async function requestPortalLink (identifier) {
+  const r = await fetch(HUB + '/portal/request-link', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ identifier }),
+  })
+  const data = await r.json().catch(() => ({}))
+  if (r.status === 429) {
+    const err = new Error(data.message || 'Trop de tentatives. Réessayez plus tard.')
+    err.code = 'rate_limit'
+    err.retryAfterSec = data.retry_after_sec || 900
+    throw err
+  }
+  if (!r.ok) throw new Error(data.error || `Hub ${r.status}`)
+  return data
+}

apps/client/src/api/auth.js

@@ -0,0 +1,63 @@
+import { BASE_URL } from 'src/config/erpnext'
+
+/**
+ * Auth shim for the customer portal.
+ *
+ * Before 2026-04-22 this wrapped a staff Authentik session. Customers no
+ * longer authenticate via Authentik — they arrive with a magic-link JWT
+ * and the customer store is hydrated directly from it. See stores/customer.js.
+ *
+ * We still read an ERP service token so ERPNext's REST resources (Sales
+ * Invoice, Issue, …) accept our server-side calls. That token is a fixed
+ * API key, not a session — it's injected at build time via VITE_ERP_TOKEN
+ * or at runtime via window.__ERP_TOKEN__.
+ */
+
+const SERVICE_TOKEN = import.meta.env.VITE_ERP_TOKEN || window.__ERP_TOKEN__ || ''
+
+export function authFetch (url, opts = {}) {
+  opts.headers = {
+    ...opts.headers,
+    Authorization: 'token ' + SERVICE_TOKEN,
+  }
+  opts.redirect = 'manual'
+  if (opts.method && opts.method !== 'GET') {
+    opts.credentials = 'omit'
+  }
+  return fetch(url, opts).then(res => {
+    // 401 from ERPNext means the service token is broken — fail loud in console,
+    // but don't nuke the user's tab. Their magic-link session is independent.
+    if (res.status === 401) {
+      console.warn('[portal] ERPNext returned 401 — check VITE_ERP_TOKEN')
+    }
+    return res
+  })
+}
+
+export async function getLoggedUser () {
+  try {
+    const res = await fetch(BASE_URL + '/api/method/frappe.auth.get_logged_user', {
+      headers: { Authorization: 'token ' + SERVICE_TOKEN },
+    })
+    if (res.ok) {
+      const data = await res.json()
+      return data.message || 'authenticated'
+    }
+  } catch {}
+  return 'authenticated'
+}
+
+/**
+ * Customer logout — clear the store and bounce to /login. No Authentik
+ * involvement. The magic-link JWT, once minted, is stateless on the server
+ * and expires on its own; clearing the client store is sufficient.
+ */
+export async function logout () {
+  try {
+    const { useCustomerStore } = await import('src/stores/customer')
+    useCustomerStore().clear()
+  } catch { /* ignore — fall through to hard redirect */ }
+  window.location.hash = '#/login'
+  // Force a reload so every module drops any cached customer data.
+  window.location.reload()
+}

apps/client/src/api/catalog.js

@@ -0,0 +1,11 @@
+const HUB = location.hostname === 'localhost' ? 'http://localhost:3300' : 'https://msg.gigafibre.ca'
+
+const get = async (path) => { const r = await fetch(HUB + path); if (!r.ok) throw new Error(`Hub ${r.status}`); return r.json() }
+const post = async (path, body) => { const r = await fetch(HUB + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); if (!r.ok) throw new Error(`Hub ${r.status}`); return r.json() }
+
+export const fetchCatalog = () => get('/api/catalog')
+export const submitOrder = (payload) => post('/api/checkout', payload)
+export const getOrderStatus = (id) => get(`/api/order/${encodeURIComponent(id)}`)
+export const searchAddresses = async (q, limit = 8) => (await post('/api/address-search', { q, limit })).results || []
+export const sendOTP = (identifier) => post('/api/otp/send', { identifier })
+export const verifyOTP = (identifier, code) => post('/api/otp/verify', { identifier, code })

apps/client/src/api/payments.js

@@ -0,0 +1,49 @@
+/**
+ * Payment API — talks to targo-hub /payments/* endpoints
+ */
+const HUB = location.hostname === 'localhost' ? 'http://localhost:3300' : 'https://msg.gigafibre.ca'
+
+async function hubGet (path) {
+  const r = await fetch(HUB + path)
+  if (!r.ok) {
+    const data = await r.json().catch(() => ({}))
+    throw new Error(data.error || `Hub ${r.status}`)
+  }
+  return r.json()
+}
+
+async function hubPost (path, body) {
+  const r = await fetch(HUB + path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await r.json().catch(() => ({}))
+  if (!r.ok) throw new Error(data.error || `Hub ${r.status}`)
+  return data
+}
+
+/** Get customer balance + unpaid invoices */
+export const getBalance = (customer) => hubGet(`/payments/balance/${encodeURIComponent(customer)}`)
+
+/** Get saved payment methods for customer */
+export const getPaymentMethods = (customer) => hubGet(`/payments/methods/${encodeURIComponent(customer)}`)
+
+/** Get invoice payment info */
+export const getInvoicePaymentInfo = (invoice) => hubGet(`/payments/invoice/${encodeURIComponent(invoice)}`)
+
+/** Create checkout session for full balance */
+export const checkoutBalance = (customer) => hubPost('/payments/checkout', { customer })
+
+/** Create checkout session for specific invoice */
+export const checkoutInvoice = (customer, invoice, { save_card = true, payment_method = 'card' } = {}) =>
+  hubPost('/payments/checkout-invoice', { customer, invoice, save_card, payment_method })
+
+/** Save card (setup mode) */
+export const setupCard = (customer) => hubPost('/payments/setup', { customer })
+
+/** Open Stripe billing portal */
+export const openBillingPortal = (customer) => hubPost('/payments/portal', { customer })
+
+/** Toggle auto-pay (PPA) */
+export const togglePPA = (customer, enabled) => hubPost('/payments/toggle-ppa', { customer, enabled })

apps/client/src/api/portal.js

@@ -0,0 +1,309 @@
+import { authFetch } from './auth'
+import { BASE_URL } from 'src/config/erpnext'
+
+async function apiGet (path) {
+  const res = await authFetch(BASE_URL + path)
+  if (!res.ok) throw new Error(`API ${res.status}: ${path}`)
+  const ct = (res.headers.get('content-type') || '')
+  if (!ct.includes('application/json')) throw new Error('Not JSON response for: ' + path)
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data
+}
+
+/**
+ * Get current portal user info from Authentik headers.
+ * Returns { email, customer_id, customer_name }
+ */
+export async function getPortalUser () {
+  const data = await apiGet('/api/method/client_portal_get_user_info')
+  return data.message
+}
+
+/**
+ * Fetch paginated Sales Invoices for a customer.
+ */
+export async function fetchInvoices (customer, { page = 1, pageSize = 20 } = {}) {
+  const start = (page - 1) * pageSize
+  const filters = JSON.stringify([
+    ['customer', '=', customer],
+    ['docstatus', '=', 1],
+  ])
+  const fields = JSON.stringify([
+    'name', 'posting_date', 'due_date', 'grand_total',
+    'outstanding_amount', 'status', 'currency',
+  ])
+  const path = `/api/resource/Sales Invoice?filters=${encodeURIComponent(filters)}&fields=${encodeURIComponent(fields)}&order_by=posting_date desc&limit_page_length=${pageSize}&limit_start=${start}`
+  const data = await apiGet(path)
+  return data.data || []
+}
+
+/**
+ * Count total invoices for pagination.
+ */
+export async function countInvoices (customer) {
+  const filters = JSON.stringify([
+    ['customer', '=', customer],
+    ['docstatus', '=', 1],
+  ])
+  const data = await apiGet(`/api/method/frappe.client.get_count?doctype=Sales Invoice&filters=${encodeURIComponent(filters)}`)
+  return data.message || 0
+}
+
+/**
+ * Download invoice PDF.
+ */
+export async function fetchInvoicePDF (invoiceName, format = 'Facture TARGO') {
+  const url = `${BASE_URL}/api/method/frappe.utils.print_format.download_pdf?doctype=Sales%20Invoice&name=${encodeURIComponent(invoiceName)}&format=${encodeURIComponent(format)}`
+  const res = await authFetch(url)
+  if (!res.ok) throw new Error('PDF download failed')
+  return res.blob()
+}
+
+/**
+ * Fetch customer's Issues/Tickets.
+ */
+export async function fetchTickets (customer) {
+  const filters = JSON.stringify([['customer', '=', customer]])
+  const fields = JSON.stringify([
+    'name', 'subject', 'status', 'priority', 'creation',
+    'issue_type', 'sla_resolution_date',
+  ])
+  const path = `/api/resource/Issue?filters=${encodeURIComponent(filters)}&fields=${encodeURIComponent(fields)}&order_by=creation desc&limit_page_length=50`
+  const data = await apiGet(path)
+  return data.data || []
+}
+
+/**
+ * Create a new support ticket.
+ */
+export async function createTicket (customer, subject, description) {
+  const res = await authFetch(BASE_URL + '/api/resource/Issue', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      customer,
+      subject,
+      description,
+      issue_type: 'Support',
+      priority: 'Medium',
+    }),
+  })
+  if (!res.ok) throw new Error('Failed to create ticket')
+  const data = await res.json()
+  return data.data
+}
+
+/**
+ * Fetch customer profile with addresses.
+ */
+export async function fetchProfile (customer) {
+  const data = await apiGet(`/api/resource/Customer/${encodeURIComponent(customer)}`)
+  return data.data
+}
+
+/**
+ * Fetch addresses linked to customer.
+ */
+export async function fetchAddresses (customer) {
+  const filters = JSON.stringify([
+    ['Dynamic Link', 'link_doctype', '=', 'Customer'],
+    ['Dynamic Link', 'link_name', '=', customer],
+  ])
+  const fields = JSON.stringify([
+    'name', 'address_title', 'address_line1', 'address_line2',
+    'city', 'state', 'pincode', 'country', 'is_primary_address',
+  ])
+  const path = `/api/resource/Address?filters=${encodeURIComponent(filters)}&fields=${encodeURIComponent(fields)}`
+  const data = await apiGet(path)
+  return data.data || []
+}
+
+/**
+ * Fetch Service Locations with their active Service Subscriptions.
+ * Returns locations grouped with subscriptions and monthly totals.
+ */
+export async function fetchServiceLocations (customer) {
+  // Fetch locations
+  const locFields = JSON.stringify([
+    'name', 'location_name', 'address_line', 'city', 'postal_code',
+    'province', 'status', 'connection_type',
+  ])
+  const locFilters = JSON.stringify([['customer', '=', customer]])
+  const locPath = `/api/resource/Service Location?filters=${encodeURIComponent(locFilters)}&fields=${encodeURIComponent(locFields)}&order_by=creation asc&limit_page_length=50`
+  const locData = await apiGet(locPath)
+  const locations = locData.data || []
+
+  // Fetch subscriptions
+  const subFields = JSON.stringify([
+    'name', 'service_location', 'status', 'service_category',
+    'plan_name', 'monthly_price', 'speed_down', 'speed_up',
+    'billing_cycle', 'start_date', 'end_date', 'promo_end',
+  ])
+  const subFilters = JSON.stringify([
+    ['customer', '=', customer],
+    ['status', '=', 'Actif'],
+  ])
+  const subPath = `/api/resource/Service Subscription?filters=${encodeURIComponent(subFilters)}&fields=${encodeURIComponent(subFields)}&order_by=service_category asc, monthly_price desc&limit_page_length=200`
+  const subData = await apiGet(subPath)
+  const subscriptions = subData.data || []
+
+  // Group subscriptions by location
+  const subsByLoc = {}
+  for (const sub of subscriptions) {
+    const loc = sub.service_location || '_unassigned'
+    if (!subsByLoc[loc]) subsByLoc[loc] = []
+    subsByLoc[loc].push(sub)
+  }
+
+  // Attach subscriptions to locations and compute totals
+  for (const loc of locations) {
+    loc.subscriptions = subsByLoc[loc.name] || []
+    loc.monthly_total = loc.subscriptions.reduce((sum, s) => sum + (s.monthly_price || 0), 0)
+  }
+
+  // Grand total across all locations
+  const grandTotal = locations.reduce((sum, loc) => sum + loc.monthly_total, 0)
+
+  return { locations, grandTotal, subscriptionCount: subscriptions.length }
+}
+
+/**
+ * Fetch a single Sales Invoice with line items.
+ */
+export async function fetchInvoice (invoiceName) {
+  const data = await apiGet(`/api/resource/Sales Invoice/${encodeURIComponent(invoiceName)}`)
+  return data.data
+}
+
+/**
+ * Fetch invoice HTML print preview (Jinja rendered).
+ */
+export async function fetchInvoiceHTML (invoiceName, format = 'Facture TARGO') {
+  const url = `${BASE_URL}/api/method/frappe.www.printview.get_html_and_style?doc=Sales Invoice&name=${encodeURIComponent(invoiceName)}&print_format=${encodeURIComponent(format)}&no_letterhead=0`
+  const res = await authFetch(url)
+  if (!res.ok) throw new Error('Print preview failed')
+  const data = await res.json()
+  return data.message || {}
+}
+
+/**
+ * Fetch a single Issue with full details.
+ */
+export async function fetchTicket (ticketName) {
+  const data = await apiGet(`/api/resource/Issue/${encodeURIComponent(ticketName)}`)
+  return data.data
+}
+
+/**
+ * Fetch Communications linked to a reference (Issue or Customer).
+ */
+export async function fetchCommunications (refDoctype, refName, limit = 100) {
+  const filters = JSON.stringify([
+    ['reference_doctype', '=', refDoctype],
+    ['reference_name', '=', refName],
+  ])
+  const fields = JSON.stringify([
+    'name', 'communication_medium', 'communication_type',
+    'sent_or_received', 'sender', 'sender_full_name', 'phone_no',
+    'subject', 'content', 'creation', 'status',
+    'reference_doctype', 'reference_name',
+  ])
+  const path = `/api/resource/Communication?filters=${encodeURIComponent(filters)}&fields=${encodeURIComponent(fields)}&order_by=creation asc&limit_page_length=${limit}`
+  const data = await apiGet(path)
+  return data.data || []
+}
+
+/**
+ * Fetch all Communications for a customer (across all references + direct).
+ * Returns Communications where reference is Customer or Issue belonging to customer.
+ */
+export async function fetchAllCommunications (customer, limit = 200) {
+  // Direct communications on customer
+  const directFilters = JSON.stringify([
+    ['reference_doctype', '=', 'Customer'],
+    ['reference_name', '=', customer],
+  ])
+  const fields = JSON.stringify([
+    'name', 'communication_medium', 'communication_type',
+    'sent_or_received', 'sender', 'sender_full_name', 'phone_no',
+    'subject', 'content', 'creation', 'status',
+    'reference_doctype', 'reference_name',
+  ])
+  const directPath = `/api/resource/Communication?filters=${encodeURIComponent(directFilters)}&fields=${encodeURIComponent(fields)}&order_by=creation desc&limit_page_length=${limit}`
+  const directData = await apiGet(directPath)
+
+  // Communications on customer's Issues
+  const issueFilters = JSON.stringify([
+    ['reference_doctype', '=', 'Issue'],
+    ['reference_name', 'in', []],  // will be filled after ticket fetch
+  ])
+  // First get the customer's ticket names
+  const ticketFilters = JSON.stringify([['customer', '=', customer]])
+  const ticketFields = JSON.stringify(['name'])
+  const ticketPath = `/api/resource/Issue?filters=${encodeURIComponent(ticketFilters)}&fields=${encodeURIComponent(ticketFields)}&limit_page_length=200`
+  const ticketData = await apiGet(ticketPath)
+  const ticketNames = (ticketData.data || []).map(t => t.name)
+
+  let issueComs = []
+  if (ticketNames.length) {
+    const issueComsFilters = JSON.stringify([
+      ['reference_doctype', '=', 'Issue'],
+      ['reference_name', 'in', ticketNames],
+    ])
+    const issueComsPath = `/api/resource/Communication?filters=${encodeURIComponent(issueComsFilters)}&fields=${encodeURIComponent(fields)}&order_by=creation desc&limit_page_length=${limit}`
+    const issueComsData = await apiGet(issueComsPath)
+    issueComs = issueComsData.data || []
+  }
+
+  // Merge, deduplicate, sort desc
+  const all = [...(directData.data || []), ...issueComs]
+  const seen = new Set()
+  const unique = all.filter(c => {
+    if (seen.has(c.name)) return false
+    seen.add(c.name)
+    return true
+  })
+  unique.sort((a, b) => new Date(b.creation) - new Date(a.creation))
+  return unique
+}
+
+/**
+ * Post a reply on a ticket (creates a Communication).
+ */
+export async function replyToTicket (ticketName, message) {
+  const res = await authFetch(BASE_URL + '/api/resource/Communication', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      communication_type: 'Communication',
+      communication_medium: 'Other',
+      sent_or_received: 'Sent',
+      sender: 'portal@gigafibre.ca',
+      content: message,
+      reference_doctype: 'Issue',
+      reference_name: ticketName,
+      status: 'Linked',
+    }),
+  })
+  if (!res.ok) throw new Error('Failed to send reply')
+  const data = await res.json()
+  return data.data
+}
+
+/**
+ * Fetch Comments linked to a document (visible to portal users).
+ */
+export async function fetchComments (refDoctype, refName) {
+  const filters = JSON.stringify([
+    ['reference_doctype', '=', refDoctype],
+    ['reference_name', '=', refName],
+    ['comment_type', '=', 'Comment'],
+  ])
+  const fields = JSON.stringify([
+    'name', 'comment_by', 'content', 'creation',
+  ])
+  const path = `/api/resource/Comment?filters=${encodeURIComponent(filters)}&fields=${encodeURIComponent(fields)}&order_by=creation asc&limit_page_length=100`
+  const data = await apiGet(path)
+  return data.data || []
+}

apps/client/src/boot/pinia.js

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+export default boot(({ app }) => {
+  app.use(createPinia())
+})

apps/client/src/composables/useAddressSearch.js

@@ -0,0 +1,49 @@
+import { ref, onUnmounted } from 'vue'
+import { searchAddresses } from 'src/api/catalog'
+
+export function useAddressSearch (form) {
+  const query = ref('')
+  const results = ref([])
+  const searching = ref(false)
+  const selected = ref(false)
+  let debounce = null
+
+  function onInput (val) {
+    selected.value = false
+    Object.assign(form, { address: '', city: '', postalCode: '', latitude: null, longitude: null })
+    if (debounce) clearTimeout(debounce)
+    if (!val || val.length < 3) { results.value = []; return }
+    debounce = setTimeout(async () => {
+      searching.value = true
+      try { results.value = await searchAddresses(val) }
+      catch { results.value = [] }
+      finally { searching.value = false }
+    }, 300)
+  }
+
+  function selectResult (a) {
+    Object.assign(form, {
+      address: a.adresse_formatee || '', city: a.nom_municipalite || '',
+      postalCode: a.code_postal || '', latitude: a.latitude || null,
+      longitude: a.longitude || null, province: 'QC',
+    })
+    query.value = a.adresse_formatee || ''
+    results.value = []
+    selected.value = true
+  }
+
+  function selectCustomerAddr (addr) {
+    Object.assign(form, {
+      address: addr.address || '', city: addr.city || '',
+      postalCode: addr.postal_code || '', latitude: addr.latitude || null,
+      longitude: addr.longitude || null, province: 'QC',
+    })
+    query.value = addr.address || ''
+    selected.value = true
+    results.value = []
+  }
+
+  onUnmounted(() => { if (debounce) clearTimeout(debounce) })
+
+  return { query, results, searching, selected, onInput, selectResult, selectCustomerAddr }
+}

apps/client/src/composables/useFormatters.js

@@ -0,0 +1,24 @@
+export function useFormatters () {
+  function formatDate (d) {
+    if (!d) return ''
+    return new Date(d).toLocaleDateString('fr-CA', {
+      year: 'numeric', month: 'long', day: 'numeric',
+    })
+  }
+
+  function formatShortDate (d) {
+    if (!d) return ''
+    return new Date(d).toLocaleDateString('fr-CA', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+    })
+  }
+
+  function formatMoney (v) {
+    if (v == null) return ''
+    return Number(v).toLocaleString('fr-CA', {
+      style: 'currency', currency: 'CAD',
+    })
+  }
+
+  return { formatDate, formatShortDate, formatMoney }
+}

apps/client/src/composables/useMagicToken.js

@@ -0,0 +1,31 @@
+/**
+ * Magic link helper for payment-return pages.
+ *
+ * The customer store now owns all token decoding (see stores/customer.js:
+ * `hydrateFromToken`). This composable is a thin read-through so the
+ * payment pages can render `v-if="auth.authenticated"` without caring
+ * about where the session came from (magic-link URL vs. existing nav).
+ *
+ * The router guard already calls `store.hydrateFromToken()` before these
+ * pages mount, so by the time this runs the store is either hydrated or
+ * still empty — no extra decoding needed here.
+ */
+import { useRoute } from 'vue-router'
+import { useCustomerStore } from 'src/stores/customer'
+
+export function useMagicToken () {
+  const route = useRoute()
+  const store = useCustomerStore()
+
+  // `expired` is a hint for the UI: "you arrived here with a token but we
+  // couldn't use it". Approximated by: URL had a token (route.query or the
+  // raw hash) but the store is still empty.
+  const urlHadToken =
+    !!route.query.token ||
+    (typeof window !== 'undefined' && window.location.hash.includes('token='))
+
+  const authenticated = !!store.customerId
+  const expired = urlHadToken && !authenticated
+
+  return { authenticated, expired, customerId: store.customerId }
+}

apps/client/src/composables/useOTP.js

@@ -0,0 +1,72 @@
+import { ref, nextTick } from 'vue'
+import { sendOTP as apiSendOTP, verifyOTP as apiVerifyOTP } from 'src/api/catalog'
+import { normalizePhone } from 'src/utils/format'
+
+export function useOTP (form, { onVerified } = {}) {
+  const inputRef = ref(null)
+  const identifier = ref('')
+  const step = ref('idle') // idle | verify
+  const code = ref('')
+  const sending = ref(false)
+  const verifying = ref(false)
+  const verified = ref(false)
+  const channel = ref('')
+  const error = ref('')
+  const addresses = ref([])
+
+  async function send () {
+    sending.value = true
+    error.value = ''
+    try {
+      const result = await apiSendOTP(identifier.value)
+      if (!result.found) {
+        error.value = 'Aucun compte trouvé avec cet identifiant.'
+        return false
+      }
+      step.value = 'verify'
+      channel.value = result.channel
+      nextTick(() => inputRef.value?.focus())
+      return true
+    } catch (e) {
+      error.value = e.message || 'Erreur'
+      return false
+    } finally { sending.value = false }
+  }
+
+  async function verify () {
+    verifying.value = true
+    error.value = ''
+    try {
+      const result = await apiVerifyOTP(identifier.value, code.value)
+      if (!result.valid) {
+        error.value = result.reason === 'expired' ? 'Code expiré. Renvoyez un nouveau code.'
+          : result.reason === 'wrong_code' ? 'Code invalide. Vérifiez et réessayez.'
+          : 'Vérification échouée.'
+        return false
+      }
+      verified.value = true
+      form.customer_id = result.customer_id
+      form.name = result.customer_name || form.name
+      if (result.phone) form.phone = normalizePhone(result.phone)
+      if (result.email) form.email = result.email
+      else if (identifier.value.includes('@')) form.email = identifier.value
+      if (result.addresses?.length) addresses.value = result.addresses
+      onVerified?.(result)
+      return true
+    } catch (e) {
+      error.value = e.message || 'Erreur'
+      return false
+    } finally { verifying.value = false }
+  }
+
+  function reset () {
+    step.value = 'idle'
+    code.value = ''
+    verified.value = false
+    error.value = ''
+    addresses.value = []
+    form.customer_id = null
+  }
+
+  return { inputRef, identifier, step, code, sending, verifying, verified, channel, error, addresses, send, verify, reset }
+}

apps/client/src/composables/usePolling.js

@@ -0,0 +1,62 @@
+import { ref, onUnmounted } from 'vue'
+
+/**
+ * Smart incremental polling composable.
+ * Calls `fetchFn()` at `interval` ms. Compares result count/IDs
+ * with previous to detect new items and trigger `onNew` callback.
+ *
+ * @param {Function} fetchFn - async function that returns array of items
+ * @param {Object} opts
+ * @param {number} opts.interval - poll interval in ms (default 10000)
+ * @param {Function} opts.getId - function to get unique ID from item (default: item => item.name)
+ * @param {Function} opts.onNew - callback when new items detected, receives array of new items
+ */
+export function usePolling (fetchFn, opts = {}) {
+  const interval = opts.interval || 10000
+  const getId = opts.getId || (item => item.name)
+  const onNew = opts.onNew || (() => {})
+
+  const knownIds = ref(new Set())
+  let timer = null
+  let running = false
+
+  function seedKnownIds (items) {
+    knownIds.value = new Set(items.map(getId))
+  }
+
+  async function poll () {
+    if (running) return
+    running = true
+    try {
+      const items = await fetchFn()
+      const newItems = items.filter(item => !knownIds.value.has(getId(item)))
+      if (newItems.length) {
+        for (const item of items) {
+          knownIds.value.add(getId(item))
+        }
+        onNew(newItems, items)
+      }
+    } catch {
+      // Silent fail on poll
+    } finally {
+      running = false
+    }
+  }
+
+  function start () {
+    stop()
+    timer = setInterval(poll, interval)
+  }
+
+  function stop () {
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+
+  // Auto-cleanup on component unmount
+  onUnmounted(stop)
+
+  return { start, stop, poll, seedKnownIds }
+}

apps/client/src/composables/useSSE.js

@@ -0,0 +1,65 @@
+import { ref, onUnmounted } from 'vue'
+
+const HUB_URL = 'https://msg.gigafibre.ca'
+
+/**
+ * SSE composable for real-time Communication events from targo-hub.
+ */
+export function useSSE (opts = {}) {
+  const connected = ref(false)
+  let es = null
+  let reconnectTimer = null
+  let reconnectDelay = 1000
+
+  function connect (topics) {
+    disconnect()
+    if (!topics || !topics.length) return
+
+    const url = `${HUB_URL}/sse?topics=${encodeURIComponent(topics.join(','))}`
+    es = new EventSource(url)
+
+    es.onopen = () => {
+      connected.value = true
+      reconnectDelay = 1000
+    }
+
+    es.addEventListener('message', (e) => {
+      try {
+        const data = JSON.parse(e.data)
+        if (opts.onMessage) opts.onMessage(data)
+      } catch {}
+    })
+
+    es.addEventListener('sms-incoming', (e) => {
+      try {
+        const data = JSON.parse(e.data)
+        if (opts.onSmsIncoming) opts.onSmsIncoming(data)
+      } catch {}
+    })
+
+    es.onerror = () => {
+      connected.value = false
+      if (es && es.readyState === EventSource.CLOSED) {
+        scheduleReconnect(topics)
+      }
+    }
+  }
+
+  function scheduleReconnect (topics) {
+    if (reconnectTimer) clearTimeout(reconnectTimer)
+    reconnectTimer = setTimeout(() => {
+      reconnectDelay = Math.min(reconnectDelay * 2, 30000)
+      connect(topics)
+    }, reconnectDelay)
+  }
+
+  function disconnect () {
+    if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null }
+    if (es) { es.close(); es = null }
+    connected.value = false
+  }
+
+  onUnmounted(disconnect)
+
+  return { connect, disconnect, connected }
+}

apps/client/src/config/erpnext.js

@@ -0,0 +1 @@
+export const BASE_URL = ''

apps/client/src/css/app.scss

@@ -0,0 +1,103 @@
+// Gigafibre Client Portal — Consumer branding
+
+:root {
+  --gf-primary: #0ea5e9;     // sky-500
+  --gf-primary-dark: #0284c7; // sky-600
+  --gf-accent: #06b6d4;      // cyan-500
+  --gf-bg: #f8fafc;          // slate-50
+  --gf-surface: #ffffff;
+  --gf-text: #1e293b;        // slate-800
+  --gf-text-secondary: #64748b; // slate-500
+  --gf-border: #e2e8f0;      // slate-200
+  --gf-success: #22c55e;
+  --gf-warning: #f59e0b;
+  --gf-danger: #ef4444;
+}
+
+body {
+  background: var(--gf-bg);
+  color: var(--gf-text);
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.q-drawer {
+  background: var(--gf-surface) !important;
+  border-right: 1px solid var(--gf-border) !important;
+}
+
+.portal-card {
+  background: var(--gf-surface);
+  border: 1px solid var(--gf-border);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.portal-header {
+  background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
+}
+
+// Status chips
+.status-paid, .status-closed, .status-resolved {
+  color: var(--gf-success);
+  font-weight: 600;
+}
+.status-unpaid, .status-overdue {
+  color: var(--gf-danger);
+  font-weight: 600;
+}
+.status-open {
+  color: var(--gf-primary);
+  font-weight: 600;
+}
+
+// Summary card number
+.summary-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--gf-primary);
+}
+
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--gf-text);
+  margin-bottom: 16px;
+}
+
+// Monthly total banner (service locations)
+.monthly-total-banner {
+  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  border: 1px solid #bae6fd;
+  border-radius: 10px;
+  padding: 14px 18px;
+}
+
+// Location cards
+.location-card {
+  background: var(--gf-bg);
+  border: 1px solid var(--gf-border);
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.subscription-row {
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--gf-border);
+  &:last-child { border-bottom: none; }
+}
+
+.location-subtotal {
+  padding-top: 6px;
+  border-top: 1px solid var(--gf-border);
+}
+
+// Clickable table rows
+.clickable-table {
+  .q-table tbody tr {
+    cursor: pointer;
+    transition: background 0.15s;
+    &:hover {
+      background: rgba(14, 165, 233, 0.05);
+    }
+  }
+}

apps/client/src/data/catalog.js

@@ -0,0 +1,22 @@
+// ISP product catalog — extracted from CatalogPage to reduce component size
+export const CATALOG = [
+  { item_code: 'INT-100', item_name: 'Internet 100 Mbps', rate: 49.99, billing_type: 'Mensuel', service_category: 'Internet', requires_visit: true, project_template_id: 'fiber_install', description: 'Parfait pour le web et streaming HD', speed_down: 100, speed_up: 30 },
+  { item_code: 'INT-300', item_name: 'Internet 300 Mbps', rate: 69.99, billing_type: 'Mensuel', service_category: 'Internet', requires_visit: true, project_template_id: 'fiber_install', description: 'Idéal pour familles et télétravail', speed_down: 300, speed_up: 100, popular: true },
+  { item_code: 'INT-500', item_name: 'Internet 500 Mbps', rate: 89.99, billing_type: 'Mensuel', service_category: 'Internet', requires_visit: true, project_template_id: 'fiber_install', description: 'Pour les gros téléchargements et le gaming', speed_down: 500, speed_up: 200 },
+  { item_code: 'INT-1000', item_name: 'Internet 1 Gbps', rate: 109.99, billing_type: 'Mensuel', service_category: 'Internet', requires_visit: true, project_template_id: 'fiber_install', description: 'La vitesse maximale pour les professionnels', speed_down: 1000, speed_up: 500 },
+  { item_code: 'TEL-BASE', item_name: 'Téléphonie résidentielle', rate: 19.99, billing_type: 'Mensuel', service_category: 'Téléphonie', requires_visit: false, description: 'Appels illimités au Canada + afficheur' },
+  { item_code: 'TEL-INTL', item_name: 'Téléphonie internationale', rate: 29.99, billing_type: 'Mensuel', service_category: 'Téléphonie', requires_visit: false, description: 'Appels illimités Canada + 60 destinations internationales' },
+  { item_code: 'BDL-300-TEL', item_name: 'Bundle Internet 300 + Téléphonie', rate: 79.99, billing_type: 'Mensuel', service_category: 'Bundle', requires_visit: true, project_template_id: 'fiber_install', description: 'Internet rapide et téléphonie à prix réduit', speed_down: 300, speed_up: 100, bundle_includes: ['Internet 300 Mbps', 'Téléphonie résidentielle'] },
+  { item_code: 'BDL-500-TEL-IPTV', item_name: 'Bundle Internet 500 + Téléphonie + IPTV', rate: 109.99, billing_type: 'Mensuel', service_category: 'Bundle', requires_visit: true, project_template_id: 'fiber_install', description: 'Le forfait complet pour toute la famille', speed_down: 500, speed_up: 200, popular: true, bundle_includes: ['Internet 500 Mbps', 'Téléphonie résidentielle', 'IPTV 120+ chaînes'] },
+  { item_code: 'EQ-ROUTER-WIFI6', item_name: 'Routeur Wi-Fi 6', rate: 149.99, billing_type: 'Unique', service_category: 'Équipement', requires_visit: false, description: 'Routeur haute performance, couverture optimale' },
+  { item_code: 'EQ-MESH-NODE', item_name: 'Noeud Wi-Fi Mesh', rate: 99.99, billing_type: 'Unique', service_category: 'Équipement', requires_visit: false, description: 'Étend la couverture Wi-Fi dans les grandes maisons' },
+  { item_code: 'EQ-ONT', item_name: 'Terminal fibre optique (ONT)', rate: 0, billing_type: 'Unique', service_category: 'Équipement', requires_visit: true, project_template_id: 'fiber_install', description: 'Inclus avec tout abonnement Internet fibre' },
+  { item_code: 'SVC-TEST', item_name: 'Frais de test', rate: 1, billing_type: 'Unique', service_category: 'Équipement', requires_visit: false, description: 'Produit de test — 1$ frais unique' },
+]
+
+export const CATEGORY_COLORS = { Internet: 'indigo', 'Téléphonie': 'teal', Bundle: 'purple', 'Équipement': 'blue-grey' }
+
+export const TIME_SLOTS = [
+  { label: 'Matin (8h - 12h)', value: 'AM' },
+  { label: 'Après-midi (12h - 17h)', value: 'PM' },
+]

apps/client/src/layouts/PortalLayout.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header class="portal-header" elevated>
+      <q-toolbar>
+        <q-btn flat dense round icon="menu" @click="drawer = !drawer" class="lt-md" />
+        <q-toolbar-title class="text-weight-bold">
+          Gigafibre
+        </q-toolbar-title>
+        <q-space />
+        <span v-if="store.customerName" class="text-body2 q-mr-md gt-sm">
+          {{ store.customerName }}
+        </span>
+        <q-btn flat round icon="shopping_cart" @click="$router.push('/panier')" title="Panier" class="q-mr-xs">
+          <q-badge v-if="cartStore.itemCount > 0" floating color="orange" :label="cartStore.itemCount" />
+        </q-btn>
+        <q-btn flat round icon="logout" @click="doLogout" title="Déconnexion" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="drawer" :width="240" :breakpoint="1024" bordered>
+      <q-list padding>
+        <q-item-label header class="text-weight-bold q-pb-sm">
+          Mon portail
+        </q-item-label>
+
+        <q-item v-for="link in navLinks" :key="link.to"
+          clickable v-ripple :to="link.to" active-class="text-primary bg-blue-1">
+          <q-item-section avatar>
+            <q-icon :name="link.icon" />
+          </q-item-section>
+          <q-item-section>{{ link.label }}</q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <!-- Loading state (only block if we expect auth to succeed) -->
+      <div v-if="store.loading && !guestMode" class="flex flex-center" style="min-height: 60vh">
+        <q-spinner-dots size="48px" color="primary" />
+      </div>
+
+      <!-- Error state — only block for auth-required pages, let catalog/cart through -->
+      <div v-else-if="store.error && requiresAuth" class="flex flex-center" style="min-height: 60vh">
+        <div class="text-center">
+          <q-icon name="error_outline" size="64px" color="negative" />
+          <div class="text-h6 q-mt-md">{{ store.error }}</div>
+          <q-btn class="q-mt-lg" color="primary" label="Réessayer" @click="store.init()" />
+        </div>
+      </div>
+
+      <!-- Content -->
+      <router-view v-else />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useCustomerStore } from 'src/stores/customer'
+import { useCartStore } from 'src/stores/cart'
+import { logout } from 'src/api/auth'
+
+const route = useRoute()
+const store = useCustomerStore()
+const cartStore = useCartStore()
+const drawer = ref(true)
+
+// Pages that work without authentication
+const publicRoutes = ['catalog', 'cart', 'order-success', 'payment-success', 'payment-cancel', 'payment-card-added']
+const guestMode = computed(() => store.error && !store.customerId)
+const requiresAuth = computed(() => !publicRoutes.includes(route.name))
+
+const navLinks = [
+  { to: '/', icon: 'dashboard', label: 'Tableau de bord' },
+  { to: '/invoices', icon: 'receipt_long', label: 'Factures' },
+  { to: '/tickets', icon: 'support_agent', label: 'Support' },
+  { to: '/messages', icon: 'chat', label: 'Messages' },
+  { to: '/me', icon: 'person', label: 'Mon compte' },
+  { to: '/catalogue', icon: 'storefront', label: 'Catalogue' },
+]
+
+function doLogout () {
+  logout()
+}
+</script>

apps/client/src/pages/AccountPage.vue

@@ -0,0 +1,305 @@
+<template>
+  <q-page padding>
+    <div class="page-title">Mon compte</div>
+
+    <div class="row q-col-gutter-md">
+      <!-- Customer info -->
+      <div class="col-12 col-md-6">
+        <div class="portal-card">
+          <div class="text-subtitle1 text-weight-medium q-mb-md">Informations</div>
+          <div class="q-gutter-sm">
+            <div><strong>Nom:</strong> {{ store.customerName }}</div>
+            <div><strong>Courriel:</strong> {{ store.email }}</div>
+            <div><strong>No. client:</strong> {{ store.customerId }}</div>
+            <div v-if="profile"><strong>Langue:</strong> {{ profile.language || 'fr' }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Services & Locations -->
+      <div class="col-12 col-md-6">
+        <div class="portal-card">
+          <div class="text-subtitle1 text-weight-medium q-mb-md">Adresses de service</div>
+
+          <!-- Monthly total banner (shown when multiple locations) -->
+          <div v-if="serviceLocations.length > 1 && grandMonthlyTotal !== null" class="monthly-total-banner q-mb-md">
+            <div class="row items-center justify-between">
+              <div>
+                <div class="text-caption text-grey-7">Total mensuel estimé</div>
+                <div class="text-h5 text-weight-bold" :class="grandMonthlyTotal >= 0 ? 'text-primary' : 'text-positive'">
+                  {{ formatMoney(grandMonthlyTotal) }}<span class="text-caption text-grey-6"> /mois</span>
+                </div>
+              </div>
+              <div class="text-caption text-grey-6">
+                {{ serviceLocations.length }} adresses · {{ subscriptionCount }} services
+              </div>
+            </div>
+          </div>
+
+          <div v-if="loadingServices" class="q-pa-md text-center">
+            <q-spinner-dots size="28px" color="primary" />
+          </div>
+          <div v-else-if="!serviceLocations.length" class="text-grey-6">Aucune adresse enregistrée</div>
+
+          <!-- Location cards -->
+          <div v-else class="q-gutter-sm">
+            <div v-for="loc in serviceLocations" :key="loc.name" class="location-card">
+              <!-- Location header -->
+              <div class="row items-center q-mb-xs">
+                <q-icon name="place" size="18px" color="primary" class="q-mr-xs" />
+                <div class="text-weight-medium">{{ loc.location_name || loc.address_line }}</div>
+                <q-space />
+                <q-badge v-if="loc.connection_type" outline color="grey-7" :label="loc.connection_type" class="q-mr-xs" />
+                <q-badge :color="loc.status === 'Active' ? 'positive' : 'grey'" :label="loc.status" />
+              </div>
+              <div class="text-caption text-grey-6 q-ml-md q-mb-sm">
+                {{ loc.address_line }}, {{ loc.city }} {{ loc.postal_code }}
+              </div>
+
+              <!-- Subscriptions for this location -->
+              <div v-if="loc.subscriptions.length" class="q-ml-md">
+                <div v-for="sub in loc.subscriptions" :key="sub.name" class="subscription-row">
+                  <div class="row items-center no-wrap">
+                    <q-icon :name="categoryIcon(sub.service_category)" size="16px" :color="categoryColor(sub.service_category)" class="q-mr-sm" />
+                    <div class="col">
+                      <div class="text-body2">{{ sub.plan_name }}</div>
+                      <div v-if="sub.speed_down" class="text-caption text-grey-6">
+                        {{ sub.speed_down }} / {{ sub.speed_up }} Mbps
+                      </div>
+                    </div>
+                    <div class="text-right">
+                      <div class="text-body2 text-weight-medium" :class="sub.monthly_price < 0 ? 'text-positive' : ''">
+                        {{ formatMoney(sub.monthly_price) }}
+                      </div>
+                      <div class="text-caption text-grey-6">/mois</div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Location subtotal -->
+                <div class="location-subtotal q-mt-xs">
+                  <div class="row items-center justify-end">
+                    <span class="text-caption text-grey-7 q-mr-sm">Sous-total:</span>
+                    <span class="text-body2 text-weight-bold">{{ formatMoney(loc.monthly_total) }}/mois</span>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="text-caption text-grey-5 q-ml-md">Aucun service actif</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Payment methods -->
+      <div class="col-12">
+        <div class="portal-card">
+          <div class="row items-center q-mb-md">
+            <q-icon name="credit_card" size="24px" color="indigo" class="q-mr-sm" />
+            <div class="text-subtitle1 text-weight-medium">Paiement</div>
+            <q-space />
+            <q-btn outline color="indigo" label="Ajouter une carte" icon="add_card" no-caps size="sm"
+              :loading="addingCard" @click="addCard" />
+            <q-btn v-if="hasStripeCards" flat color="grey-7" label="Gerer les cartes" icon="settings" no-caps size="sm"
+              class="q-ml-sm" :loading="openingPortal" @click="openPortal" />
+          </div>
+
+          <!-- Balance -->
+          <div v-if="balance !== null" class="q-mb-md">
+            <div class="row items-center q-gutter-sm">
+              <span class="text-body2">Solde a payer:</span>
+              <span class="text-h6 text-weight-bold" :class="balance > 0 ? 'text-negative' : 'text-positive'">
+                {{ formatMoney(balance) }}
+              </span>
+              <q-btn v-if="balance > 0" color="indigo" unelevated label="Payer le solde" icon="payment"
+                no-caps size="sm" :loading="payingBalance" @click="payBalance" class="q-ml-md" />
+            </div>
+          </div>
+
+          <!-- Saved cards -->
+          <div v-if="loadingPayment" class="q-pa-sm">
+            <q-spinner-dots size="24px" color="indigo" />
+          </div>
+          <div v-else-if="cards.length" class="q-mb-md">
+            <div class="text-caption text-weight-bold text-grey-7 q-mb-xs">Cartes enregistrees</div>
+            <q-list bordered separator class="rounded-borders">
+              <q-item v-for="card in cards" :key="card.id">
+                <q-item-section avatar>
+                  <q-icon :name="cardIcon(card.brand)" size="28px" :color="card.is_default ? 'indigo' : 'grey-6'" />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ cardBrandLabel(card.brand) }} **** {{ card.last4 }}</q-item-label>
+                  <q-item-label caption>Exp. {{ card.exp_month }}/{{ card.exp_year }}</q-item-label>
+                </q-item-section>
+                <q-item-section side v-if="card.is_default">
+                  <q-badge color="indigo" label="Par defaut" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+          <div v-else class="text-grey-6 text-body2 q-mb-md">
+            Aucune carte enregistree. Ajoutez une carte pour activer le paiement automatique.
+          </div>
+
+          <!-- PPA toggle -->
+          <div class="q-pa-sm rounded-borders" style="background: #f8f9fc;">
+            <div class="row items-center">
+              <div class="col">
+                <div class="text-weight-medium">Paiement automatique (PPA)</div>
+                <div class="text-caption text-grey-7">
+                  Vos factures seront payees automatiquement avec votre carte par defaut.
+                </div>
+              </div>
+              <div class="col-auto">
+                <q-toggle v-model="ppaEnabled" color="indigo" :disable="!hasStripeCards || togglingPPA"
+                  @update:model-value="onTogglePPA" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchProfile, fetchServiceLocations } from 'src/api/portal'
+import { getBalance, getPaymentMethods, checkoutBalance, setupCard, openBillingPortal, togglePPA } from 'src/api/payments'
+import { useFormatters } from 'src/composables/useFormatters'
+
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatMoney } = useFormatters()
+
+const profile = ref(null)
+const serviceLocations = ref([])
+const grandMonthlyTotal = ref(null)
+const subscriptionCount = ref(0)
+const loadingServices = ref(true)
+const balance = ref(null)
+const cards = ref([])
+const ppaEnabled = ref(false)
+const loadingPayment = ref(true)
+const addingCard = ref(false)
+const openingPortal = ref(false)
+const payingBalance = ref(false)
+const togglingPPA = ref(false)
+
+const hasStripeCards = computed(() => cards.value.length > 0)
+
+function cardIcon (brand) {
+  const icons = { visa: 'credit_card', mastercard: 'credit_card', amex: 'credit_card' }
+  return icons[brand] || 'credit_card'
+}
+
+function cardBrandLabel (brand) {
+  const labels = { visa: 'Visa', mastercard: 'Mastercard', amex: 'Amex', discover: 'Discover' }
+  return labels[brand] || (brand || 'Carte').charAt(0).toUpperCase() + (brand || 'carte').slice(1)
+}
+
+async function loadPaymentInfo () {
+  if (!store.customerId) return
+  loadingPayment.value = true
+  try {
+    const [balRes, methRes] = await Promise.all([
+      getBalance(store.customerId),
+      getPaymentMethods(store.customerId),
+    ])
+    balance.value = balRes.balance || 0
+
+    // Extract cards from Stripe methods
+    const methods = methRes.methods || []
+    const stripeMethod = methods.find(m => m.provider === 'Stripe')
+    cards.value = stripeMethod?.stripe_cards || []
+    ppaEnabled.value = !!(stripeMethod?.is_auto_ppa)
+  } catch (e) {
+    console.error('Payment info load error:', e)
+  } finally {
+    loadingPayment.value = false
+  }
+}
+
+async function addCard () {
+  addingCard.value = true
+  try {
+    const result = await setupCard(store.customerId)
+    if (result.url) window.location.href = result.url
+  } catch (e) {
+    $q.notify({ message: 'Erreur: ' + e.message, color: 'negative' })
+  } finally {
+    addingCard.value = false
+  }
+}
+
+async function openPortal () {
+  openingPortal.value = true
+  try {
+    const result = await openBillingPortal(store.customerId)
+    if (result.url) window.location.href = result.url
+  } catch (e) {
+    $q.notify({ message: 'Erreur: ' + e.message, color: 'negative' })
+  } finally {
+    openingPortal.value = false
+  }
+}
+
+async function payBalance () {
+  payingBalance.value = true
+  try {
+    const result = await checkoutBalance(store.customerId)
+    if (result.url) window.location.href = result.url
+  } catch (e) {
+    $q.notify({ message: 'Erreur: ' + e.message, color: 'negative' })
+  } finally {
+    payingBalance.value = false
+  }
+}
+
+async function onTogglePPA (val) {
+  togglingPPA.value = true
+  try {
+    await togglePPA(store.customerId, val)
+    $q.notify({
+      message: val ? 'Paiement automatique active' : 'Paiement automatique desactive',
+      color: 'positive', icon: val ? 'check_circle' : 'info',
+    })
+  } catch (e) {
+    ppaEnabled.value = !val // revert
+    $q.notify({ message: 'Erreur: ' + e.message, color: 'negative' })
+  } finally {
+    togglingPPA.value = false
+  }
+}
+
+function categoryIcon (cat) {
+  const icons = {
+    Internet: 'wifi', IPTV: 'tv', VoIP: 'phone', Bundle: 'inventory_2',
+    'Hébergement': 'dns', Autre: 'category',
+  }
+  return icons[cat] || 'category'
+}
+
+function categoryColor (cat) {
+  const colors = {
+    Internet: 'blue', IPTV: 'purple', VoIP: 'green', Bundle: 'orange',
+    'Hébergement': 'cyan', Autre: 'grey',
+  }
+  return colors[cat] || 'grey'
+}
+
+onMounted(async () => {
+  if (!store.customerId) return
+  const [p, svcResult] = await Promise.all([
+    fetchProfile(store.customerId),
+    fetchServiceLocations(store.customerId).catch(() => ({ locations: [], grandTotal: 0, subscriptionCount: 0 })),
+  ])
+  profile.value = p
+  serviceLocations.value = svcResult.locations
+  grandMonthlyTotal.value = svcResult.grandTotal
+  subscriptionCount.value = svcResult.subscriptionCount
+  loadingServices.value = false
+  loadPaymentInfo()
+})
+</script>

apps/client/src/pages/CartPage.vue

@@ -0,0 +1,301 @@
+<template>
+  <q-page class="cart-page q-pa-md">
+    <div style="max-width:900px;margin:0 auto">
+
+      <div v-if="cart.items.length === 0" class="text-center q-pa-xl">
+        <q-icon name="shopping_cart" size="80px" color="grey-4" />
+        <div class="text-h5 text-grey-6 q-mt-lg">Votre panier est vide</div>
+        <q-btn color="primary" unelevated label="Voir le catalogue" class="q-mt-lg" @click="$router.push('/catalogue')" />
+      </div>
+
+      <template v-else>
+        <div class="row items-center q-mb-lg">
+          <q-btn flat round icon="arrow_back" @click="$router.push('/catalogue')" />
+          <div class="text-h5 text-weight-bold q-ml-sm">Mon panier</div>
+          <q-space />
+          <q-btn flat color="negative" label="Vider le panier" icon="delete_sweep" @click="confirmClear" />
+        </div>
+
+        <div class="row q-col-gutter-lg">
+          <div class="col-12 col-md-7">
+
+            <!-- Cart items -->
+            <q-card flat bordered class="q-mb-md rounded-card">
+              <q-list separator>
+                <q-item v-for="(item, idx) in cart.items" :key="item.item_code" class="q-pa-md">
+                  <q-item-section>
+                    <q-item-label class="text-weight-bold">{{ item.item_name }}</q-item-label>
+                    <q-item-label caption>{{ item.billing_type === 'Mensuel' ? 'Mensuel' : 'Achat unique' }}</q-item-label>
+                    <q-item-label caption v-if="item.description" class="q-mt-xs">{{ item.description }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side class="row items-center q-gutter-sm" style="flex-direction:row">
+                    <q-btn flat dense round icon="remove" size="sm" @click="cart.updateQty(idx, item.qty - 1)" />
+                    <span class="text-weight-medium q-mx-xs">{{ item.qty }}</span>
+                    <q-btn flat dense round icon="add" size="sm" @click="cart.updateQty(idx, item.qty + 1)" />
+                    <span class="text-weight-bold q-ml-md" style="min-width:80px;text-align:right">{{ formatPrice(item.rate * item.qty) }}</span>
+                    <q-btn flat dense round icon="close" color="negative" size="sm" class="q-ml-sm" @click="cart.removeItem(idx)" />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <!-- Installation scheduling -->
+            <q-card v-if="cart.requiresVisit" flat bordered class="q-mb-md rounded-card">
+              <q-card-section>
+                <div class="text-subtitle1 text-weight-bold q-mb-sm">
+                  <q-icon name="calendar_month" class="q-mr-xs" /> Installation requise
+                </div>
+                <div class="text-body2 text-grey-7 q-mb-md">Certains articles nécessitent une visite d'installation.</div>
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-sm-6">
+                    <q-input v-model="form.preferredDate" type="date" label="Date préférée" outlined dense :min="minDate" :rules="[v => !!v || 'Requis']" />
+                  </div>
+                  <div class="col-12 col-sm-6">
+                    <q-select v-model="form.preferredSlot" :options="TIME_SLOTS" label="Plage horaire" outlined dense emit-value map-options />
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+
+            <!-- OTP existing customer -->
+            <q-card flat bordered class="q-mb-md rounded-card">
+              <q-card-section>
+                <div class="row items-center q-mb-sm">
+                  <q-icon name="person_search" size="22px" color="primary" class="q-mr-sm" />
+                  <div class="text-subtitle1 text-weight-bold">Vous êtes déjà client?</div>
+                </div>
+                <div class="text-body2 text-grey-7 q-mb-md">Entrez votre courriel ou téléphone pour associer cette commande à votre compte.</div>
+
+                <div v-if="!otp.verified.value">
+                  <div v-if="otp.step.value === 'verify'" class="text-caption text-grey-7 q-mb-xs">
+                    Code envoyé par {{ otp.channel.value === 'email' ? 'courriel' : 'SMS' }} au <strong>{{ otp.identifier.value }}</strong>
+                    · <a class="cursor-pointer text-primary" style="text-decoration:none" @click="otp.reset()">Modifier</a>
+                  </div>
+                  <div class="row q-col-gutter-sm items-center">
+                    <div class="col">
+                      <q-input v-if="otp.step.value === 'idle'" v-model="otp.identifier.value" label="Courriel ou téléphone" outlined dense placeholder="ex: 514-555-1234 ou nom@exemple.com" @keyup.enter="otp.identifier.value.length >= 5 && otp.send()">
+                        <template v-slot:prepend><q-icon name="person_search" size="20px" /></template>
+                      </q-input>
+                      <q-input v-else ref="otpInputRef" v-model="otp.code.value" label="Code de vérification" outlined dense type="tel" maxlength="6" placeholder="000000" input-class="text-weight-bold text-center" input-style="font-size:1.3rem;letter-spacing:8px" @keyup.enter="otp.code.value.length === 6 && otp.verify()">
+                        <template v-slot:prepend><q-icon name="lock" size="20px" /></template>
+                      </q-input>
+                    </div>
+                    <div class="col-auto">
+                      <q-btn color="primary" unelevated
+                        :label="otp.step.value === 'idle' ? 'Envoyer' : 'Valider'"
+                        :icon="otp.step.value === 'idle' ? 'send' : 'check'"
+                        :loading="otp.step.value === 'idle' ? otp.sending.value : otp.verifying.value"
+                        :disable="otp.step.value === 'idle' ? (!otp.identifier.value || otp.identifier.value.length < 5) : otp.code.value.length !== 6"
+                        @click="otp.step.value === 'idle' ? otp.send() : otp.verify()" />
+                    </div>
+                  </div>
+                  <div v-if="otp.step.value === 'verify'" class="q-mt-xs">
+                    <q-btn flat dense size="sm" color="grey-7" label="Renvoyer le code" icon="refresh" @click="otp.send()" :loading="otp.sending.value" no-caps />
+                  </div>
+                  <div v-if="otp.error.value" class="text-negative text-caption q-mt-xs">
+                    <q-icon name="error" size="14px" /> {{ otp.error.value }}
+                  </div>
+                </div>
+
+                <!-- Verified state -->
+                <div v-if="otp.verified.value" class="q-mt-sm">
+                  <q-banner dense rounded class="bg-green-1 text-positive">
+                    <template v-slot:avatar><q-icon name="verified_user" color="positive" /></template>
+                    <strong>{{ form.name }}</strong> — compte vérifié
+                    <template v-slot:action><q-btn flat dense label="Changer" @click="otp.reset()" /></template>
+                  </q-banner>
+
+                  <div v-if="otp.addresses.value.length" class="q-mt-md">
+                    <div class="text-caption text-weight-bold q-mb-xs">Vos adresses :</div>
+                    <q-list bordered separator class="rounded-borders">
+                      <q-item v-for="(addr, i) in otp.addresses.value" :key="i" clickable v-ripple
+                        @click="addr$.selectCustomerAddr(addr)"
+                        :class="form.address === addr.address ? 'bg-blue-1' : ''">
+                        <q-item-section avatar>
+                          <q-icon :name="form.address === addr.address ? 'radio_button_checked' : 'radio_button_unchecked'" :color="form.address === addr.address ? 'primary' : 'grey-5'" />
+                        </q-item-section>
+                        <q-item-section>
+                          <q-item-label>{{ addr.address }}</q-item-label>
+                          <q-item-label caption>{{ addr.city }}{{ addr.postal_code ? ' — ' + addr.postal_code : '' }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                    <div class="text-caption text-grey-6 q-mt-xs">Ou recherchez une nouvelle adresse ci-dessous</div>
+                  </div>
+                </div>
+
+                <div v-if="otp.step.value === 'idle' && !otp.verified.value" class="text-caption text-grey-6 q-mt-sm">
+                  Pas encore client? Continuez comme nouveau client ci-dessous.
+                </div>
+              </q-card-section>
+            </q-card>
+
+            <!-- Customer info -->
+            <q-card flat bordered class="q-mb-md rounded-card">
+              <q-card-section>
+                <div class="text-subtitle1 text-weight-bold q-mb-md"><q-icon name="person" class="q-mr-xs" /> Vos coordonnées</div>
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-sm-6">
+                    <q-input v-model="form.name" label="Nom complet" outlined dense :rules="[v => !!v || 'Requis']" />
+                  </div>
+                  <div class="col-12 col-sm-6">
+                    <q-input v-model="form.phone" label="Téléphone" outlined dense mask="(###) ###-####" :rules="[v => !!v || 'Requis']" />
+                  </div>
+                  <div class="col-12">
+                    <q-input v-model="form.email" label="Courriel" outlined dense type="email" :rules="[v => !!v || 'Requis', v => /.+@.+\..+/.test(v) || 'Courriel invalide']" />
+                  </div>
+                  <div class="col-12">
+                    <q-input v-model="addr$.query.value" label="Adresse d'installation / livraison" outlined dense :loading="addr$.searching.value" @update:model-value="addr$.onInput" :rules="[() => !!form.address || 'Sélectionnez une adresse']">
+                      <template v-slot:prepend><q-icon name="place" /></template>
+                      <template v-slot:append><q-icon v-if="form.address" name="check_circle" color="positive" /></template>
+                    </q-input>
+                    <q-list v-if="addr$.results.value.length && !addr$.selected.value" bordered separator class="addr-dropdown">
+                      <q-item v-for="(a, i) in addr$.results.value" :key="i" clickable v-ripple @click="addr$.selectResult(a)">
+                        <q-item-section avatar><q-icon name="location_on" :color="a.fiber_available ? 'positive' : 'grey-5'" /></q-item-section>
+                        <q-item-section>
+                          <q-item-label>{{ a.adresse_formatee }}</q-item-label>
+                          <q-item-label caption>{{ a.nom_municipalite }}{{ a.code_postal ? ' — ' + a.code_postal : '' }} <q-badge v-if="a.fiber_available" color="positive" label="Fibre" class="q-ml-xs" /></q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                    <div v-if="addr$.selected.value && form.address" class="text-caption text-grey-7 q-mt-xs q-ml-sm">
+                      <q-icon name="check" color="positive" size="14px" /> {{ form.address }}{{ form.city ? ', ' + form.city : '' }}{{ form.postalCode ? ' ' + form.postalCode : '' }}
+                    </div>
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+
+          <!-- Order summary -->
+          <div class="col-12 col-md-5">
+            <q-card flat bordered class="summary-card rounded-card" style="position:sticky;top:80px">
+              <q-card-section>
+                <div class="text-subtitle1 text-weight-bold q-mb-md">Sommaire de commande</div>
+                <div v-for="item in cart.items" :key="item.item_code" class="row justify-between q-mb-xs text-body2">
+                  <span>{{ item.item_name }} x{{ item.qty }}</span>
+                  <span>{{ formatPrice(item.rate * item.qty) }}</span>
+                </div>
+                <q-separator class="q-my-md" />
+                <div v-if="cart.recurringTotal > 0" class="row justify-between q-mb-xs">
+                  <span class="text-body2">Mensuel</span>
+                  <span class="text-body2 text-weight-medium">{{ formatPrice(cart.recurringTotal) }}/mois</span>
+                </div>
+                <div v-if="cart.onetimeTotal > 0" class="row justify-between q-mb-xs">
+                  <span class="text-body2">Achat unique</span>
+                  <span class="text-body2 text-weight-medium">{{ formatPrice(cart.onetimeTotal) }}</span>
+                </div>
+                <div class="row justify-between q-mb-xs">
+                  <span class="text-body2">Sous-total</span>
+                  <span class="text-body2 text-weight-medium">{{ formatPrice(cart.subtotal) }}</span>
+                </div>
+                <div class="row justify-between q-mb-xs">
+                  <span class="text-body2 text-grey-6">TPS + TVQ (14,975%)</span>
+                  <span class="text-body2 text-grey-6">{{ formatPrice(cart.taxAmount) }}</span>
+                </div>
+                <q-separator class="q-my-md" />
+                <div class="row justify-between">
+                  <span class="text-subtitle1 text-weight-bold">Total</span>
+                  <span class="text-subtitle1 text-weight-bold text-primary">{{ formatPrice(cart.grandTotal) }}</span>
+                </div>
+              </q-card-section>
+
+              <q-separator />
+
+              <q-card-section>
+                <q-checkbox v-model="form.acceptTerms" dense class="q-mb-md">
+                  <template #default>
+                    <span class="text-body2">
+                      J'accepte les <a href="#" class="text-primary" @click.prevent>conditions d'utilisation</a>
+                      et la <a href="#" class="text-primary" @click.prevent>politique de confidentialité</a>
+                    </span>
+                  </template>
+                </q-checkbox>
+                <div class="text-caption text-grey-6 q-mb-md">Aucun paiement requis maintenant. Vous recevrez votre première facture après l'activation du service.</div>
+                <q-btn color="primary" unelevated class="full-width" size="lg" label="Commander" icon="check_circle" :loading="submitting" :disable="!canSubmit" @click="handleSubmit" />
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </template>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCartStore } from 'src/stores/cart'
+import { useCustomerStore } from 'src/stores/customer'
+import { submitOrder } from 'src/api/catalog'
+import { useOTP } from 'src/composables/useOTP'
+import { useAddressSearch } from 'src/composables/useAddressSearch'
+import { formatPrice, minBookingDate } from 'src/utils/format'
+import { TIME_SLOTS } from 'src/data/catalog'
+
+const $q = useQuasar()
+const router = useRouter()
+const cart = useCartStore()
+const customer = useCustomerStore()
+const submitting = ref(false)
+const minDate = computed(() => minBookingDate())
+
+const form = reactive({
+  name: '', phone: '', email: '', address: '', city: '', province: 'QC',
+  postalCode: '', latitude: null, longitude: null,
+  preferredDate: minBookingDate(), preferredSlot: 'AM',
+  acceptTerms: false, customer_id: null,
+})
+
+const addr$ = useAddressSearch(form)
+const otp = useOTP(form, {
+  onVerified (result) {
+    if (result.addresses?.length) addr$.selectCustomerAddr(result.addresses[0])
+    $q.notify({ message: 'Compte vérifié!', color: 'positive', icon: 'verified_user' })
+  },
+})
+
+onMounted(() => {
+  if (customer.customerName) form.name = customer.customerName
+  if (customer.email) form.email = customer.email
+})
+
+const canSubmit = computed(() => {
+  const base = form.name && form.phone && form.email && form.address && form.acceptTerms
+  return cart.requiresVisit ? base && form.preferredDate : base
+})
+
+function confirmClear () {
+  $q.dialog({
+    title: 'Vider le panier', message: 'Voulez-vous vraiment retirer tous les articles?',
+    cancel: { label: 'Annuler', flat: true }, ok: { label: 'Vider', color: 'negative' },
+  }).onOk(() => cart.clearCart())
+}
+
+async function handleSubmit () {
+  submitting.value = true
+  try {
+    const payload = {
+      customer_id: form.customer_id || customer.customerId || null,
+      items: cart.items.map(({ item_code, item_name, qty, rate, billing_type, requires_visit, project_template_id }) =>
+        ({ item_code, item_name, qty, rate, billing_type, requires_visit, project_template_id })),
+      contact: { name: form.name, phone: form.phone, email: form.email, address: form.address, city: form.city, province: form.province, postal_code: form.postalCode, latitude: form.latitude, longitude: form.longitude },
+      installation: cart.requiresVisit ? { preferred_date: form.preferredDate, preferred_slot: form.preferredSlot } : null,
+      totals: { subtotal: cart.subtotal, tax: cart.taxAmount, grand_total: cart.grandTotal, recurring_monthly: cart.recurringTotal, onetime: cart.onetimeTotal },
+    }
+    const result = await submitOrder(payload)
+    router.push({ name: 'order-success', query: { order: result.order_id }, state: { orderData: JSON.stringify({ ...payload, order_id: result.order_id }) } })
+    cart.clearCart()
+  } catch (e) {
+    $q.notify({ message: 'Erreur : ' + (e.message || 'Veuillez réessayer'), color: 'negative', icon: 'error' })
+  } finally { submitting.value = false }
+}
+</script>
+
+<style lang="scss" scoped>
+.cart-page { padding-bottom: 32px }
+.rounded-card { border-radius: 12px }
+.summary-card { background: #fafbff }
+.addr-dropdown { position: relative; z-index: 10; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.1); max-height: 280px; overflow-y: auto; border-radius: 0 0 8px 8px; margin-top: -8px }
+</style>

apps/client/src/pages/CatalogPage.vue

@@ -0,0 +1,109 @@
+<template>
+  <q-page class="catalog-page">
+    <div class="catalog-hero q-pa-lg text-center text-white">
+      <div class="text-h4 text-weight-bold q-mb-sm">Nos forfaits et services</div>
+      <div class="text-subtitle1" style="opacity:.85">Internet fibre ultra-rapide, téléphonie et plus</div>
+    </div>
+
+    <div class="q-px-md q-pt-md" style="max-width:1200px;margin:0 auto">
+      <q-tabs v-model="activeTab" dense active-color="primary" indicator-color="primary" align="left" narrow-indicator class="text-grey-7">
+        <q-tab name="all" label="Tous" />
+        <q-tab name="Internet" label="Internet" />
+        <q-tab name="Téléphonie" label="Téléphonie" />
+        <q-tab name="Bundle" label="Bundles" />
+        <q-tab name="Équipement" label="Équipement" />
+      </q-tabs>
+    </div>
+
+    <div class="q-pa-md" style="max-width:1200px;margin:0 auto">
+      <div class="row q-col-gutter-md">
+        <div v-for="p in filteredProducts" :key="p.item_code" class="col-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card class="product-card full-height" flat bordered>
+            <q-badge v-if="p.popular" color="orange" floating label="Populaire" class="text-weight-bold" style="top:12px;right:12px;font-size:.75rem" />
+            <q-card-section>
+              <q-chip :color="CATEGORY_COLORS[p.service_category] || 'grey'" text-color="white" size="sm" dense class="q-mb-sm">{{ p.service_category }}</q-chip>
+              <div class="text-h6 text-weight-bold q-mb-xs">{{ p.item_name }}</div>
+              <div v-if="p.speed_down" class="speed-bar q-mb-sm">
+                <div class="row items-center q-gutter-xs">
+                  <q-icon name="speed" color="primary" size="20px" />
+                  <span class="text-weight-medium text-primary">{{ p.speed_down }} / {{ p.speed_up }} Mbps</span>
+                </div>
+                <q-linear-progress :value="p.speed_down / 1000" color="primary" class="q-mt-xs" rounded size="6px" />
+              </div>
+              <div class="text-body2 text-grey-7 q-mb-md" style="min-height:40px">{{ p.description }}</div>
+              <div v-if="p.bundle_includes?.length" class="q-mb-md">
+                <div class="text-caption text-weight-medium text-grey-8 q-mb-xs">Inclus :</div>
+                <div v-for="inc in p.bundle_includes" :key="inc" class="row items-center q-gutter-xs q-mb-xs">
+                  <q-icon name="check_circle" color="positive" size="16px" />
+                  <span class="text-body2">{{ inc }}</span>
+                </div>
+              </div>
+              <div class="row items-end q-mb-sm">
+                <span class="text-h5 text-weight-bold text-primary">{{ formatPrice(p.rate) }}</span>
+                <span class="text-body2 text-grey-6 q-ml-xs q-mb-xs">{{ p.billing_type === 'Mensuel' ? '/mois' : 'unique' }}</span>
+              </div>
+              <div v-if="p.requires_visit" class="text-caption text-grey-6 q-mb-sm">
+                <q-icon name="build" size="14px" class="q-mr-xs" /> Installation requise
+              </div>
+            </q-card-section>
+            <q-separator />
+            <q-card-actions class="q-pa-md">
+              <q-btn color="primary" unelevated class="full-width" :label="isInCart(p.item_code) ? 'Ajouté ✓' : 'Ajouter au panier'" :outline="isInCart(p.item_code)" @click="addToCart(p)" />
+            </q-card-actions>
+          </q-card>
+        </div>
+      </div>
+      <div v-if="!filteredProducts.length" class="text-center q-pa-xl text-grey-5">
+        <q-icon name="inventory_2" size="64px" />
+        <div class="text-h6 q-mt-md">Aucun produit dans cette catégorie</div>
+      </div>
+    </div>
+
+    <transition name="slide-up">
+      <div v-if="cart.itemCount > 0" class="cart-bar">
+        <div class="cart-bar-inner row items-center justify-between q-px-md">
+          <div class="row items-center q-gutter-sm">
+            <q-icon name="shopping_cart" size="24px" color="white" />
+            <span class="text-white text-weight-medium">{{ cart.itemCount }} article{{ cart.itemCount > 1 ? 's' : '' }}</span>
+            <q-separator vertical dark class="q-mx-sm" />
+            <span v-if="cart.recurringTotal > 0" class="text-white">{{ formatPrice(cart.recurringTotal) }}/mois</span>
+            <span v-if="cart.onetimeTotal > 0" class="text-white q-ml-sm">+ {{ formatPrice(cart.onetimeTotal) }} unique</span>
+          </div>
+          <q-btn color="white" text-color="primary" unelevated label="Voir le panier" icon-right="arrow_forward" @click="$router.push('/panier')" class="text-weight-bold" />
+        </div>
+      </div>
+    </transition>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useCartStore } from 'src/stores/cart'
+import { useQuasar } from 'quasar'
+import { CATALOG, CATEGORY_COLORS } from 'src/data/catalog'
+import { formatPrice } from 'src/utils/format'
+
+const $q = useQuasar()
+const cart = useCartStore()
+const activeTab = ref('all')
+
+const filteredProducts = computed(() =>
+  activeTab.value === 'all' ? CATALOG : CATALOG.filter(p => p.service_category === activeTab.value)
+)
+
+const isInCart = (code) => cart.items.some(i => i.item_code === code)
+
+function addToCart (product) {
+  cart.addItem(product)
+  $q.notify({ message: `${product.item_name} ajouté au panier`, color: 'positive', icon: 'check_circle', position: 'bottom', timeout: 1500 })
+}
+</script>
+
+<style lang="scss" scoped>
+.catalog-hero { background: linear-gradient(135deg, #3949ab 0%, #1a237e 100%); margin: -16px -16px 0 -16px; padding: 40px 16px 32px }
+.product-card { border-radius: 12px; transition: box-shadow 0.2s, transform 0.2s; &:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); transform: translateY(-2px) } }
+.cart-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: linear-gradient(135deg, #3949ab 0%, #1a237e 100%); box-shadow: 0 -4px 20px rgba(0,0,0,.2) }
+.cart-bar-inner { max-width: 1200px; margin: 0 auto; min-height: 56px }
+.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s ease }
+.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%) }
+</style>

apps/client/src/pages/DashboardPage.vue

@@ -0,0 +1,116 @@
+<template>
+  <q-page padding>
+    <div class="page-title">Bonjour, {{ store.customerName }}</div>
+
+    <div class="row q-col-gutter-md">
+      <!-- Unpaid invoices -->
+      <div class="col-12 col-sm-6 col-md-4">
+        <div class="portal-card">
+          <div class="text-caption text-grey-7">Factures impayees</div>
+          <div class="summary-value">{{ unpaidCount }}</div>
+          <div v-if="unpaidTotal > 0" class="text-body2 text-grey-7">
+            {{ formatMoney(unpaidTotal) }} a payer
+          </div>
+          <div class="row q-gutter-sm q-mt-sm">
+            <q-btn flat color="primary" label="Voir les factures" to="/invoices" no-caps />
+            <q-btn v-if="unpaidTotal > 0" unelevated color="indigo" label="Payer" icon="payment"
+              no-caps size="sm" :loading="payLoading" @click="payBalance" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Open tickets -->
+      <div class="col-12 col-sm-6 col-md-4">
+        <div class="portal-card">
+          <div class="text-caption text-grey-7">Tickets ouverts</div>
+          <div class="summary-value">{{ openTickets }}</div>
+          <q-btn flat color="primary" label="Voir le support" to="/tickets" class="q-mt-sm" no-caps />
+        </div>
+      </div>
+
+      <!-- Quick action -->
+      <div class="col-12 col-sm-6 col-md-4">
+        <div class="portal-card">
+          <div class="text-caption text-grey-7">Besoin d'aide?</div>
+          <div class="text-h6 q-mt-xs">Contactez-nous</div>
+          <q-btn flat color="primary" label="Nouveau ticket" to="/tickets" class="q-mt-sm" no-caps icon="add" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Recent invoices -->
+    <div v-if="recentInvoices.length" class="q-mt-lg">
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">Dernières factures</div>
+      <q-list bordered separator class="rounded-borders bg-white">
+        <q-item v-for="inv in recentInvoices" :key="inv.name" clickable @click="$router.push('/invoices/' + inv.name)">
+          <q-item-section>
+            <q-item-label>{{ inv.name }}</q-item-label>
+            <q-item-label caption>{{ formatDate(inv.posting_date) }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label>{{ formatMoney(inv.grand_total) }}</q-item-label>
+            <q-item-label caption :class="statusClass(inv.status)">
+              {{ inv.status }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchInvoices, fetchTickets } from 'src/api/portal'
+import { checkoutBalance } from 'src/api/payments'
+import { useFormatters } from 'src/composables/useFormatters'
+
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatDate, formatMoney } = useFormatters()
+
+const recentInvoices = ref([])
+const allTickets = ref([])
+const payLoading = ref(false)
+
+const unpaidCount = computed(() =>
+  recentInvoices.value.filter(i => i.outstanding_amount > 0).length,
+)
+const unpaidTotal = computed(() =>
+  recentInvoices.value.filter(i => i.outstanding_amount > 0)
+    .reduce((sum, i) => sum + i.outstanding_amount, 0),
+)
+const openTickets = computed(() =>
+  allTickets.value.filter(t => t.status === 'Open').length,
+)
+
+function statusClass (status) {
+  if (status === 'Paid') return 'status-paid'
+  if (status === 'Unpaid' || status === 'Overdue') return 'status-unpaid'
+  return ''
+}
+
+async function payBalance () {
+  payLoading.value = true
+  try {
+    const result = await checkoutBalance(store.customerId)
+    if (result.url) window.location.href = result.url
+  } catch (e) {
+    $q.notify({ message: 'Erreur: ' + (e.message || 'Paiement impossible'), color: 'negative' })
+  } finally {
+    payLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!store.customerId) return
+  const [invoices, tickets] = await Promise.all([
+    fetchInvoices(store.customerId, { pageSize: 5 }),
+    fetchTickets(store.customerId),
+  ])
+  recentInvoices.value = invoices
+  allTickets.value = tickets
+})
+</script>

apps/client/src/pages/InvoiceDetailPage.vue

@@ -0,0 +1,232 @@
+<template>
+  <q-page padding>
+    <!-- Header -->
+    <div class="flex items-center q-mb-md">
+      <q-btn flat round icon="arrow_back" @click="$router.push('/invoices')" />
+      <div class="page-title q-mb-none q-ml-sm">{{ invoiceName }}</div>
+      <q-space />
+      <q-btn outline color="primary" icon="picture_as_pdf" label="PDF"
+        :loading="downloadingPDF" @click="downloadPDF" no-caps class="q-mr-sm" size="sm" />
+    </div>
+
+    <!-- Payment CTA for unpaid invoices -->
+    <q-banner v-if="invoice && canPay" rounded class="bg-indigo-1 q-mb-md">
+      <template #avatar><q-icon name="payment" color="indigo" /></template>
+      <div class="row items-center">
+        <div class="col">
+          <div class="text-weight-medium">Solde a payer: <strong class="text-negative">{{ formatMoney(invoice.outstanding_amount) }}</strong></div>
+          <div class="text-caption text-grey-7">Echeance: {{ formatDate(invoice.due_date) }}</div>
+        </div>
+        <div class="col-auto q-gutter-sm">
+          <q-btn color="indigo" unelevated label="Payer maintenant" icon="credit_card"
+            :loading="payLoading" @click="payInvoice('card')" no-caps />
+          <q-btn outline color="pink-7" label="Payer avec Klarna" icon="account_balance"
+            :loading="payKlarnaLoading" @click="payInvoice('klarna')" no-caps size="sm" />
+        </div>
+      </div>
+      <div class="q-mt-xs">
+        <q-checkbox v-model="saveCard" dense size="sm">
+          <span class="text-caption">Sauvegarder ma carte pour les prochains paiements automatiques</span>
+        </q-checkbox>
+      </div>
+    </q-banner>
+
+    <!-- Summary bar -->
+    <div v-if="invoice" class="row q-col-gutter-sm q-mb-md">
+      <div class="col-6 col-sm-3">
+        <div class="portal-card text-center">
+          <div class="text-caption text-grey-7">Total</div>
+          <div class="text-h6">{{ formatMoney(invoice.grand_total) }}</div>
+        </div>
+      </div>
+      <div class="col-6 col-sm-3">
+        <div class="portal-card text-center">
+          <div class="text-caption text-grey-7">Solde</div>
+          <div class="text-h6" :class="invoice.outstanding_amount > 0 ? 'text-negative' : 'text-positive'">
+            {{ formatMoney(invoice.outstanding_amount) }}
+          </div>
+        </div>
+      </div>
+      <div class="col-6 col-sm-3">
+        <div class="portal-card text-center">
+          <div class="text-caption text-grey-7">Date</div>
+          <div class="text-body1">{{ formatDate(invoice.posting_date) }}</div>
+        </div>
+      </div>
+      <div class="col-6 col-sm-3">
+        <div class="portal-card text-center">
+          <div class="text-caption text-grey-7">Statut</div>
+          <q-badge :color="statusColor(invoice.status)" :label="statusLabel(invoice.status)" class="q-mt-xs" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Line items table -->
+    <div v-if="invoice && invoice.items" class="q-mb-md">
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">Details</div>
+      <q-table
+        :rows="invoice.items"
+        :columns="itemColumns"
+        row-key="name"
+        flat bordered
+        class="bg-white"
+        hide-pagination
+        :pagination="{ rowsPerPage: 0 }"
+      >
+        <template #body-cell-rate="props">
+          <q-td :props="props" class="text-right">{{ formatMoney(props.value) }}</q-td>
+        </template>
+        <template #body-cell-amount="props">
+          <q-td :props="props" class="text-right text-weight-medium">{{ formatMoney(props.value) }}</q-td>
+        </template>
+      </q-table>
+
+      <!-- Totals -->
+      <div class="bg-white q-pa-md rounded-borders" style="border: 1px solid #e0e0e0; border-top: none;">
+        <div class="row justify-end q-gutter-sm">
+          <div v-if="invoice.total_taxes_and_charges" class="text-right">
+            <span class="text-grey-7">Taxes: </span>
+            <span class="text-weight-medium">{{ formatMoney(invoice.total_taxes_and_charges) }}</span>
+          </div>
+          <div class="text-right q-ml-lg">
+            <span class="text-grey-7">Grand total: </span>
+            <span class="text-h6 text-weight-bold">{{ formatMoney(invoice.grand_total) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Jinja rendered preview -->
+    <div v-if="printHTML" class="q-mb-md">
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">Apercu de la facture</div>
+      <div class="bg-white q-pa-md rounded-borders invoice-preview" style="border: 1px solid #e0e0e0;">
+        <div v-html="printHTML" />
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex flex-center q-pa-xl">
+      <q-spinner-dots size="48px" color="primary" />
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchInvoice, fetchInvoiceHTML, fetchInvoicePDF } from 'src/api/portal'
+import { checkoutInvoice } from 'src/api/payments'
+import { useFormatters } from 'src/composables/useFormatters'
+
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatDate, formatMoney } = useFormatters()
+
+const invoiceName = route.params.name
+const invoice = ref(null)
+const printHTML = ref('')
+const loading = ref(true)
+const downloadingPDF = ref(false)
+const payLoading = ref(false)
+const payKlarnaLoading = ref(false)
+const saveCard = ref(true)
+
+const canPay = computed(() => {
+  if (!invoice.value) return false
+  return invoice.value.docstatus === 1 && invoice.value.outstanding_amount > 0
+})
+
+const itemColumns = [
+  { name: 'item_name', label: 'Description', field: 'item_name', align: 'left' },
+  { name: 'qty', label: 'Qte', field: 'qty', align: 'center' },
+  { name: 'rate', label: 'Prix unitaire', field: 'rate', align: 'right' },
+  { name: 'amount', label: 'Montant', field: 'amount', align: 'right' },
+]
+
+function statusColor (s) {
+  if (s === 'Paid') return 'positive'
+  if (s === 'Overdue') return 'negative'
+  if (s === 'Unpaid') return 'warning'
+  return 'grey'
+}
+
+function statusLabel (s) {
+  const map = { Paid: 'Payee', Unpaid: 'Impayee', Overdue: 'En retard', 'Partly Paid': 'Partielle' }
+  return map[s] || s
+}
+
+async function payInvoice (method) {
+  const loadRef = method === 'klarna' ? payKlarnaLoading : payLoading
+  loadRef.value = true
+  try {
+    const result = await checkoutInvoice(store.customerId, invoiceName, {
+      save_card: saveCard.value,
+      payment_method: method,
+    })
+    if (result.url) {
+      // Redirect to Stripe Checkout
+      window.location.href = result.url
+    }
+  } catch (e) {
+    $q.notify({ message: 'Erreur: ' + (e.message || 'Paiement impossible'), color: 'negative', icon: 'error' })
+  } finally {
+    loadRef.value = false
+  }
+}
+
+async function downloadPDF () {
+  downloadingPDF.value = true
+  try {
+    const blob = await fetchInvoicePDF(invoiceName)
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${invoiceName}.pdf`
+    a.click()
+    URL.revokeObjectURL(url)
+  } finally {
+    downloadingPDF.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!store.customerId) return
+  try {
+    const [inv, html] = await Promise.allSettled([
+      fetchInvoice(invoiceName),
+      fetchInvoiceHTML(invoiceName),
+    ])
+    if (inv.status === 'fulfilled') {
+      // Security: verify this invoice belongs to the logged-in customer
+      if (inv.value.customer !== store.customerId) {
+        router.replace('/invoices')
+        return
+      }
+      invoice.value = inv.value
+    }
+    if (html.status === 'fulfilled' && html.value.html) {
+      printHTML.value = html.value.html
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.invoice-preview {
+  overflow-x: auto;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.invoice-preview :deep(table) {
+  width: 100%;
+}
+.invoice-preview :deep(img) {
+  max-width: 100%;
+}
+</style>

apps/client/src/pages/InvoicesPage.vue

@@ -0,0 +1,135 @@
+<template>
+  <q-page padding>
+    <div class="page-title">Factures</div>
+
+    <q-table
+      :rows="invoices"
+      :columns="columns"
+      row-key="name"
+      :loading="loading"
+      :pagination="pagination"
+      @request="onRequest"
+      @row-click="(evt, row) => router.push('/invoices/' + row.name)"
+      flat bordered
+      class="bg-white clickable-table"
+      no-data-label="Aucune facture"
+    >
+      <template #body-cell-posting_date="props">
+        <q-td :props="props">{{ formatShortDate(props.value) }}</q-td>
+      </template>
+
+      <template #body-cell-grand_total="props">
+        <q-td :props="props" class="text-right">{{ formatMoney(props.value) }}</q-td>
+      </template>
+
+      <template #body-cell-outstanding_amount="props">
+        <q-td :props="props" class="text-right">
+          <span :class="props.value > 0 ? 'status-unpaid' : 'status-paid'">
+            {{ formatMoney(props.value) }}
+          </span>
+        </q-td>
+      </template>
+
+      <template #body-cell-status="props">
+        <q-td :props="props">
+          <q-badge :color="statusColor(props.value)" :label="statusLabel(props.value)" />
+        </q-td>
+      </template>
+
+      <template #body-cell-actions="props">
+        <q-td :props="props">
+          <q-btn flat dense round icon="picture_as_pdf" color="primary"
+            @click="downloadPDF(props.row.name)" :loading="downloading === props.row.name" />
+        </q-td>
+      </template>
+    </q-table>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchInvoices, countInvoices, fetchInvoicePDF } from 'src/api/portal'
+import { useFormatters } from 'src/composables/useFormatters'
+
+const router = useRouter()
+const store = useCustomerStore()
+const { formatShortDate, formatMoney } = useFormatters()
+
+const invoices = ref([])
+const loading = ref(false)
+const downloading = ref(null)
+const totalCount = ref(0)
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 20,
+  rowsNumber: 0,
+  sortBy: 'posting_date',
+  descending: true,
+})
+
+const columns = [
+  { name: 'name', label: 'No.', field: 'name', align: 'left', sortable: true },
+  { name: 'posting_date', label: 'Date', field: 'posting_date', align: 'left', sortable: true },
+  { name: 'grand_total', label: 'Total', field: 'grand_total', align: 'right', sortable: true },
+  { name: 'outstanding_amount', label: 'Solde', field: 'outstanding_amount', align: 'right', sortable: true },
+  { name: 'status', label: 'Statut', field: 'status', align: 'center' },
+  { name: 'actions', label: '', field: 'actions', align: 'center' },
+]
+
+function statusColor (s) {
+  if (s === 'Paid') return 'positive'
+  if (s === 'Overdue') return 'negative'
+  if (s === 'Unpaid') return 'warning'
+  return 'grey'
+}
+
+function statusLabel (s) {
+  const map = { Paid: 'Payée', Unpaid: 'Impayée', Overdue: 'En retard', 'Partly Paid': 'Partielle' }
+  return map[s] || s
+}
+
+async function loadPage (page, pageSize) {
+  loading.value = true
+  try {
+    const data = await fetchInvoices(store.customerId, { page, pageSize })
+    invoices.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onRequest (props) {
+  const { page, rowsPerPage } = props.pagination
+  await loadPage(page, rowsPerPage)
+  pagination.value.page = page
+  pagination.value.rowsPerPage = rowsPerPage
+  pagination.value.rowsNumber = totalCount.value
+}
+
+async function downloadPDF (name) {
+  downloading.value = name
+  try {
+    const blob = await fetchInvoicePDF(name)
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${name}.pdf`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    console.error('PDF download failed:', e)
+  } finally {
+    downloading.value = null
+  }
+}
+
+onMounted(async () => {
+  if (!store.customerId) return
+  totalCount.value = await countInvoices(store.customerId)
+  pagination.value.rowsNumber = totalCount.value
+  await loadPage(1, 20)
+})
+</script>

apps/client/src/pages/LoginPage.vue

@@ -0,0 +1,156 @@
+<!--
+  LoginPage — passwordless portal login via magic link.
+
+  The only entry point for customers who don't have a ?token= in their URL.
+  Takes an email or phone, asks the hub to send a 24h magic link via SMS +
+  email, then shows a success state with redacted destinations so the user
+  knows where to look.
+
+  Failure modes surfaced to the user:
+  - Empty input → inline field error
+  - Rate limit (429) → banner with retry countdown
+  - Network error → toast
+  - No match → still shown as success (anti-enumeration). If sent array is
+    empty, we say "Lien envoyé" but no destinations — matches the hub's
+    behaviour. This is intentional; legitimate users who typo their address
+    will see "no channels" and retry with the right one.
+
+  See docs/features/billing-payments.md for the full Stripe + magic-link
+  flow this page plugs into.
+-->
+<template>
+  <q-page class="flex flex-center" padding>
+    <div class="login-card">
+      <div class="text-center q-mb-lg">
+        <img src="https://store.targo.ca/clients/images/logo_trans_noir.png"
+          alt="Gigafibre" style="max-width: 180px" />
+        <div class="text-h5 text-weight-bold q-mt-md">Portail client</div>
+        <div class="text-body2 text-grey-7 q-mt-xs">
+          Entrez votre courriel ou téléphone pour recevoir un lien d'accès
+        </div>
+      </div>
+
+      <!-- Before send -->
+      <div v-if="!sent">
+        <q-input
+          v-model="identifier"
+          outlined
+          label="Courriel ou téléphone"
+          autofocus
+          :error="!!errorMsg"
+          :error-message="errorMsg"
+          :disable="loading"
+          @keyup.enter="submit"
+        >
+          <template #prepend>
+            <q-icon :name="isEmail ? 'email' : 'phone'" />
+          </template>
+        </q-input>
+
+        <q-btn
+          class="full-width q-mt-md"
+          color="primary"
+          unelevated
+          size="lg"
+          label="Recevoir mon lien"
+          icon="send"
+          :loading="loading"
+          :disable="!identifier.trim()"
+          @click="submit"
+        />
+
+        <div class="text-caption text-grey-6 q-mt-md text-center">
+          Lien valide 24&nbsp;h. Pas de mot de passe requis.
+        </div>
+      </div>
+
+      <!-- After send -->
+      <div v-else class="text-center">
+        <q-icon name="mark_email_read" color="positive" size="64px" />
+        <div class="text-h6 q-mt-md">Lien envoyé&nbsp;!</div>
+        <div v-if="redacted.length" class="text-body2 text-grey-7 q-mt-sm">
+          Vérifiez&nbsp;:
+          <div class="q-mt-xs">
+            <span v-for="(r, i) in redacted" :key="i" class="q-mr-sm">
+              <q-chip dense outline color="grey-7" :label="r" />
+            </span>
+          </div>
+        </div>
+        <div v-else class="text-body2 text-grey-7 q-mt-sm">
+          Si votre compte existe, un lien vous a été envoyé.
+          Vérifiez vos SMS et courriels.
+        </div>
+        <q-btn
+          flat color="primary" class="q-mt-lg" label="Envoyer à nouveau"
+          icon="replay" @click="sent = false" no-caps
+        />
+      </div>
+
+      <!-- Rate-limit banner -->
+      <q-banner v-if="rateLimited" rounded dense class="bg-orange-1 q-mt-md">
+        <template #avatar>
+          <q-icon name="schedule" color="warning" />
+        </template>
+        <div class="text-body2">{{ rateLimitMsg }}</div>
+      </q-banner>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import { requestPortalLink } from 'src/api/auth-portal'
+
+const $q = useQuasar()
+
+const identifier = ref('')
+const loading = ref(false)
+const sent = ref(false)
+const redacted = ref([])
+const errorMsg = ref('')
+const rateLimited = ref(false)
+const rateLimitMsg = ref('')
+
+const isEmail = computed(() => identifier.value.includes('@'))
+
+async function submit () {
+  const raw = identifier.value.trim()
+  if (!raw) {
+    errorMsg.value = 'Entrez un courriel ou un numéro de téléphone'
+    return
+  }
+  errorMsg.value = ''
+  rateLimited.value = false
+  loading.value = true
+  try {
+    const r = await requestPortalLink(raw)
+    redacted.value = r.redacted || []
+    sent.value = true
+  } catch (e) {
+    if (e.code === 'rate_limit') {
+      rateLimited.value = true
+      rateLimitMsg.value = e.message
+    } else {
+      $q.notify({
+        type: 'negative',
+        message: 'Erreur réseau. Réessayez dans un moment.',
+        timeout: 4000,
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px;
+  max-width: 440px;
+  width: 100%;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+</style>

apps/client/src/pages/MessagesPage.vue

@@ -0,0 +1,228 @@
+<template>
+  <q-page padding>
+    <div class="page-title">Messages</div>
+
+    <!-- Filter tabs -->
+    <q-tabs v-model="activeTab" dense align="left" class="q-mb-md bg-white rounded-borders"
+      active-color="primary" indicator-color="primary" narrow-indicator>
+      <q-tab name="all" label="Tous" no-caps />
+      <q-tab name="SMS" label="SMS" no-caps icon="sms" />
+      <q-tab name="Email" label="Courriel" no-caps icon="email" />
+      <q-tab name="Phone" label="Appels" no-caps icon="phone" />
+    </q-tabs>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex flex-center q-pa-xl">
+      <q-spinner-dots size="48px" color="primary" />
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="!filteredMessages.length" class="text-center text-grey-6 q-pa-xl">
+      <q-icon name="chat_bubble_outline" size="64px" class="q-mb-md" />
+      <div class="text-h6">Aucun message</div>
+    </div>
+
+    <!-- Grouped messages -->
+    <div v-else>
+      <div v-for="group in groupedMessages" :key="group.key" class="q-mb-lg">
+        <!-- Group header -->
+        <div class="flex items-center q-mb-sm">
+          <q-icon :name="groupIcon(group)" size="20px" color="grey-7" class="q-mr-sm" />
+          <div class="text-subtitle2 text-weight-medium">
+            {{ group.label }}
+          </div>
+          <q-badge v-if="group.ticketStatus" :color="ticketStatusColor(group.ticketStatus)"
+            :label="group.ticketStatus" class="q-ml-sm" />
+          <q-space />
+          <span class="text-caption text-grey-6">{{ group.dateRange }}</span>
+        </div>
+
+        <!-- Messages in group -->
+        <q-list bordered separator class="rounded-borders bg-white">
+          <q-item v-for="msg in group.messages" :key="msg.name" class="q-pa-sm">
+            <q-item-section avatar>
+              <q-icon :name="mediumIcon(msg.communication_medium)"
+                :color="msg.sent_or_received === 'Sent' ? 'primary' : 'grey-7'" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="flex items-center">
+                <q-icon v-if="msg.sent_or_received === 'Sent'" name="arrow_upward" size="14px" color="primary" class="q-mr-xs" />
+                <q-icon v-else name="arrow_downward" size="14px" color="positive" class="q-mr-xs" />
+                <span class="text-caption text-grey-7">
+                  {{ msg.sent_or_received === 'Sent' ? 'Envoyé' : 'Reçu' }}
+                  &middot; {{ formatDateTime(msg.creation) }}
+                </span>
+              </q-item-label>
+              <q-item-label class="q-mt-xs message-content" v-html="truncateHTML(msg.content, 200)" />
+              <q-item-label v-if="msg.phone_no" caption>
+                <q-icon name="phone" size="12px" /> {{ msg.phone_no }}
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side v-if="msg.reference_doctype === 'Issue'">
+              <q-btn flat dense size="sm" color="primary" no-caps
+                :label="msg.reference_name"
+                @click="$router.push('/tickets/' + msg.reference_name)" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchAllCommunications } from 'src/api/portal'
+import { useFormatters } from 'src/composables/useFormatters'
+import { useSSE } from 'src/composables/useSSE'
+
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatDate } = useFormatters()
+
+const messages = ref([])
+const loading = ref(true)
+const activeTab = ref('all')
+
+// SSE for real-time updates
+const { connect: sseConnect } = useSSE({
+  onMessage: async (data) => {
+    if (data.customer === store.customerId) {
+      // Reload full list on any new message
+      messages.value = await fetchAllCommunications(store.customerId)
+      if (data.direction === 'in') {
+        $q.notify({
+          type: 'info',
+          icon: 'chat',
+          message: `Nouveau message de ${data.customer_name || data.phone || 'Client'}`,
+          timeout: 3000,
+          position: 'top-right',
+        })
+      }
+    }
+  },
+})
+
+function mediumIcon (m) {
+  if (m === 'SMS') return 'sms'
+  if (m === 'Phone') return 'phone'
+  if (m === 'Email') return 'email'
+  return 'chat_bubble_outline'
+}
+
+function groupIcon (group) {
+  if (group.type === 'ticket') return 'confirmation_number'
+  if (group.medium === 'SMS') return 'sms'
+  if (group.medium === 'Email') return 'email'
+  if (group.medium === 'Phone') return 'phone'
+  return 'chat_bubble_outline'
+}
+
+function ticketStatusColor (s) {
+  if (s === 'Open') return 'primary'
+  if (s === 'Closed' || s === 'Resolved') return 'positive'
+  return 'grey'
+}
+
+function formatDateTime (d) {
+  if (!d) return ''
+  return new Date(d).toLocaleString('fr-CA', {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+function truncateHTML (html, maxLen) {
+  if (!html) return ''
+  // Strip HTML tags for length check, but return original if short enough
+  const text = html.replace(/<[^>]+>/g, '')
+  if (text.length <= maxLen) return html
+  return text.substring(0, maxLen) + '...'
+}
+
+const filteredMessages = computed(() => {
+  if (activeTab.value === 'all') return messages.value
+  return messages.value.filter(m => m.communication_medium === activeTab.value)
+})
+
+const groupedMessages = computed(() => {
+  const groups = new Map()
+
+  for (const msg of filteredMessages.value) {
+    let key, label, type, medium
+    if (msg.reference_doctype === 'Issue' && msg.reference_name) {
+      // Group by ticket
+      key = 'ticket:' + msg.reference_name
+      label = msg.reference_name + (msg.subject ? ' - ' + msg.subject : '')
+      type = 'ticket'
+    } else if (msg.communication_medium === 'SMS' && msg.phone_no) {
+      // Group SMS by phone number + date
+      const d = new Date(msg.creation).toISOString().slice(0, 10)
+      key = 'sms:' + msg.phone_no + ':' + d
+      label = 'SMS - ' + msg.phone_no
+      type = 'sms'
+      medium = 'SMS'
+    } else if (msg.communication_medium === 'Email' && msg.subject) {
+      // Group email by subject (strip Re: / Fwd: prefixes)
+      const cleanSubject = (msg.subject || '').replace(/^(Re|Fwd|TR|RE):\s*/gi, '').trim()
+      key = 'email:' + cleanSubject
+      label = msg.subject
+      type = 'email'
+      medium = 'Email'
+    } else {
+      // Group by date
+      const d = new Date(msg.creation).toISOString().slice(0, 10)
+      key = 'other:' + d
+      label = formatDate(msg.creation)
+      type = 'other'
+      medium = msg.communication_medium
+    }
+
+    if (!groups.has(key)) {
+      groups.set(key, { key, label, type, medium, messages: [], ticketStatus: null })
+    }
+    groups.get(key).messages.push(msg)
+  }
+
+  // Sort groups by latest message, compute dateRange
+  const result = Array.from(groups.values())
+  for (const g of result) {
+    g.messages.sort((a, b) => new Date(a.creation) - new Date(b.creation))
+    const first = g.messages[0].creation
+    const last = g.messages[g.messages.length - 1].creation
+    if (first === last) {
+      g.dateRange = formatDateTime(first)
+    } else {
+      g.dateRange = formatDateTime(first) + ' - ' + formatDateTime(last)
+    }
+  }
+  // Sort groups: most recent message first
+  result.sort((a, b) => {
+    const aLast = new Date(a.messages[a.messages.length - 1].creation)
+    const bLast = new Date(b.messages[b.messages.length - 1].creation)
+    return bLast - aLast
+  })
+  return result
+})
+
+onMounted(async () => {
+  if (!store.customerId) return
+  try {
+    messages.value = await fetchAllCommunications(store.customerId)
+    sseConnect(['customer:' + store.customerId])
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.message-content {
+  word-break: break-word;
+}
+.message-content :deep(p) {
+  margin: 0;
+}
+</style>

apps/client/src/pages/OrderSuccessPage.vue

@@ -0,0 +1,171 @@
+<template>
+  <q-page class="flex flex-center q-pa-md">
+    <div style="max-width:600px;width:100%">
+      <q-card flat bordered style="border-radius:16px" class="text-center q-pa-lg">
+        <!-- Success icon -->
+        <div class="q-mb-lg">
+          <div class="success-circle q-mx-auto">
+            <q-icon name="check" size="48px" color="white" />
+          </div>
+        </div>
+
+        <div class="text-h4 text-weight-bold q-mb-sm">Commande confirmée!</div>
+        <div class="text-subtitle1 text-grey-7 q-mb-lg">
+          Merci pour votre commande. Voici votre confirmation.
+        </div>
+
+        <!-- Order number -->
+        <q-card flat bordered class="q-pa-md q-mb-lg" style="border-radius:12px;background:#f5f7ff">
+          <div class="text-caption text-grey-6">Numéro de commande</div>
+          <div class="text-h5 text-weight-bold text-primary">{{ orderId }}</div>
+        </q-card>
+
+        <!-- Order summary -->
+        <div v-if="orderData" class="text-left q-mb-lg">
+          <div class="text-subtitle2 text-weight-bold q-mb-sm">Articles commandés</div>
+          <q-list dense separator>
+            <q-item v-for="item in orderData.items" :key="item.item_code">
+              <q-item-section>
+                <q-item-label>{{ item.item_name }}</q-item-label>
+                <q-item-label caption>
+                  {{ item.billing_type === 'Mensuel' ? 'Mensuel' : 'Achat unique' }}
+                  <span v-if="item.qty > 1"> x{{ item.qty }}</span>
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <span class="text-weight-medium">{{ formatPrice(item.rate * item.qty) }}</span>
+              </q-item-section>
+            </q-item>
+          </q-list>
+
+          <q-separator class="q-my-sm" />
+          <div class="row justify-between q-px-md">
+            <span class="text-weight-bold">Total</span>
+            <span class="text-weight-bold text-primary">
+              {{ formatPrice(orderData.totals.grand_total) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Installation notice -->
+        <q-banner
+          v-if="orderData && orderData.installation"
+          class="q-mb-lg text-left"
+          rounded
+          style="background:#e8f5e9"
+        >
+          <template #avatar>
+            <q-icon name="engineering" color="positive" />
+          </template>
+          <div class="text-weight-medium">Installation prévue</div>
+          <div class="text-body2 text-grey-8">
+            Date souhaitée : {{ formatDate(orderData.installation.preferred_date) }}
+            ({{ orderData.installation.preferred_slot === 'AM' ? 'Matin' : 'Après-midi' }})
+          </div>
+          <div class="text-body2 text-grey-7 q-mt-xs">
+            Nous vous contacterons pour confirmer le rendez-vous d'installation.
+          </div>
+        </q-banner>
+
+        <!-- No installation -->
+        <q-banner
+          v-else
+          class="q-mb-lg text-left"
+          rounded
+          style="background:#e3f2fd"
+        >
+          <template #avatar>
+            <q-icon name="local_shipping" color="primary" />
+          </template>
+          <div class="text-body2">
+            Votre service sera activé dans les prochaines 24 heures. Vous recevrez un courriel de confirmation.
+          </div>
+        </q-banner>
+
+        <!-- Contact info -->
+        <q-card flat bordered class="q-pa-md q-mb-lg text-left" style="border-radius:12px">
+          <div class="text-subtitle2 text-weight-bold q-mb-sm">Besoin d'aide?</div>
+          <div class="text-body2 q-mb-xs">
+            <q-icon name="email" class="q-mr-xs" size="16px" />
+            support@gigafibre.ca
+          </div>
+          <div class="text-body2 q-mb-xs">
+            <q-icon name="phone" class="q-mr-xs" size="16px" />
+            1-888-GIGAFIBRE
+          </div>
+          <div class="text-body2">
+            <q-icon name="schedule" class="q-mr-xs" size="16px" />
+            Lundi - Vendredi, 8h - 20h
+          </div>
+        </q-card>
+
+        <!-- Actions -->
+        <div class="row q-gutter-sm justify-center">
+          <q-btn
+            color="primary"
+            unelevated
+            label="Retour au portail"
+            icon="home"
+            @click="$router.push('/')"
+          />
+          <q-btn
+            outline
+            color="primary"
+            label="Voir le catalogue"
+            icon="storefront"
+            @click="$router.push('/catalogue')"
+          />
+        </div>
+      </q-card>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const orderId = ref(route.query.order || 'N/A')
+const orderData = ref(null)
+
+onMounted(() => {
+  // Try to recover order data from navigation state or sessionStorage
+  try {
+    const stateRaw = window.history.state?.orderData
+    if (stateRaw) {
+      orderData.value = JSON.parse(stateRaw)
+    }
+  } catch {
+    // Order data not available — show minimal confirmation
+  }
+})
+
+function formatPrice (val) {
+  return (val || 0).toFixed(2) + ' $'
+}
+
+function formatDate (dateStr) {
+  if (!dateStr) return ''
+  const d = new Date(dateStr + 'T00:00:00')
+  return d.toLocaleDateString('fr-CA', { year: 'numeric', month: 'long', day: 'numeric' })
+}
+</script>
+
+<style lang="scss" scoped>
+.success-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #43a047, #2e7d32);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes pop-in {
+  0% { transform: scale(0); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+</style>

apps/client/src/pages/PaymentCancelPage.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-page padding class="flex flex-center">
+    <div style="max-width:520px;text-align:center">
+      <q-icon name="cancel" color="warning" size="80px" />
+      <div class="text-h5 text-weight-bold q-mt-lg">Paiement annule</div>
+      <div class="text-body1 text-grey-7 q-mt-sm">
+        Votre paiement n'a pas ete complete. Aucun montant n'a ete debite.
+      </div>
+      <div v-if="invoiceName" class="text-body2 text-grey-6 q-mt-sm">
+        Facture: <strong>{{ invoiceName }}</strong>
+      </div>
+
+      <!-- Authenticated -->
+      <div v-if="auth.authenticated" class="q-mt-xl q-gutter-sm">
+        <q-btn v-if="invoiceName" color="primary" unelevated label="Reessayer" icon="refresh"
+          @click="$router.push(`/invoices/${invoiceName}`)" />
+        <q-btn outline color="primary" label="Mes factures" icon="list" @click="$router.push('/invoices')" />
+        <q-btn flat color="grey-7" label="Accueil" icon="home" @click="$router.push('/')" />
+      </div>
+
+      <!-- Not authenticated -->
+      <div v-else class="q-mt-xl">
+        <q-banner rounded class="bg-blue-1 q-mb-md">
+          <template #avatar><q-icon name="info" color="primary" /></template>
+          <div class="text-body2">
+            Connectez-vous pour reessayer le paiement ou voir vos factures.
+          </div>
+        </q-banner>
+        <q-btn color="primary" unelevated label="Se connecter" icon="login" @click="goToLogin" />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+import { useMagicToken } from 'src/composables/useMagicToken'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useMagicToken()
+const invoiceName = route.query.invoice || ''
+
+function goToLogin () {
+  router.push({ name: 'login' })
+}
+</script>

apps/client/src/pages/PaymentCardAddedPage.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-page padding class="flex flex-center">
+    <div style="max-width:520px;text-align:center">
+      <q-icon name="credit_card" color="positive" size="80px" />
+      <div class="text-h5 text-weight-bold q-mt-lg">Carte ajoutee!</div>
+      <div class="text-body1 text-grey-7 q-mt-sm">
+        Votre carte de paiement a ete enregistree avec succes.
+        Vous pouvez maintenant activer le paiement automatique.
+      </div>
+
+      <!-- Authenticated -->
+      <div v-if="auth.authenticated" class="q-mt-xl q-gutter-sm">
+        <q-btn color="primary" unelevated label="Mon compte" icon="person" @click="$router.push('/me')" />
+        <q-btn flat color="grey-7" label="Accueil" icon="home" @click="$router.push('/')" />
+      </div>
+
+      <!-- Not authenticated -->
+      <div v-else class="q-mt-xl">
+        <q-banner rounded class="bg-blue-1 q-mb-md">
+          <template #avatar><q-icon name="info" color="primary" /></template>
+          <div class="text-body2">
+            Connectez-vous pour gerer vos cartes et activer le paiement automatique.
+          </div>
+        </q-banner>
+        <q-btn color="primary" unelevated label="Se connecter" icon="login" @click="goToLogin" />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { useMagicToken } from 'src/composables/useMagicToken'
+
+const auth = useMagicToken()
+const router = useRouter()
+
+function goToLogin () {
+  router.push({ name: 'login' })
+}
+</script>

apps/client/src/pages/PaymentSuccessPage.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-page padding class="flex flex-center">
+    <div style="max-width:520px;text-align:center">
+      <q-icon name="check_circle" color="positive" size="80px" />
+      <div class="text-h5 text-weight-bold q-mt-lg">Paiement recu!</div>
+      <div class="text-body1 text-grey-7 q-mt-sm">
+        Merci pour votre paiement. Votre facture sera mise a jour sous peu.
+      </div>
+      <div v-if="invoiceName" class="text-body2 text-grey-6 q-mt-sm">
+        Facture: <strong>{{ invoiceName }}</strong>
+      </div>
+
+      <!-- Authenticated: show full navigation -->
+      <div v-if="auth.authenticated" class="q-mt-xl q-gutter-sm">
+        <q-btn v-if="invoiceName" color="primary" unelevated label="Voir la facture" icon="receipt"
+          @click="$router.push(`/invoices/${invoiceName}`)" />
+        <q-btn outline color="primary" label="Mes factures" icon="list" @click="$router.push('/invoices')" />
+        <q-btn flat color="grey-7" label="Accueil" icon="home" @click="$router.push('/')" />
+      </div>
+
+      <!-- Expired token or no auth: show login prompt -->
+      <div v-else class="q-mt-xl">
+        <q-banner rounded class="bg-blue-1 q-mb-md">
+          <template #avatar><q-icon name="info" color="primary" /></template>
+          <div class="text-body2">
+            Pour acceder a votre compte et voir vos factures, connectez-vous ou demandez un lien d'acces.
+          </div>
+        </q-banner>
+        <div class="q-gutter-sm">
+          <q-btn color="primary" unelevated label="Recevoir mon lien d'acces" icon="login"
+            @click="goToLogin" />
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+import { useMagicToken } from 'src/composables/useMagicToken'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useMagicToken()
+const invoiceName = route.query.invoice || ''
+
+function goToLogin () {
+  router.push({ name: 'login' })
+}
+</script>

apps/client/src/pages/TicketDetailPage.vue

@@ -0,0 +1,304 @@
+<template>
+  <q-page padding>
+    <!-- Header -->
+    <div class="flex items-center q-mb-md">
+      <q-btn flat round icon="arrow_back" @click="$router.push('/tickets')" />
+      <div class="q-ml-sm">
+        <div class="page-title q-mb-none">{{ ticket?.subject || ticketName }}</div>
+        <div v-if="ticket" class="text-caption text-grey-7">
+          {{ ticketName }} &middot; Créé le {{ formatDate(ticket.creation) }}
+        </div>
+      </div>
+      <q-space />
+      <q-badge v-if="ticket" :color="statusColor(ticket.status)" :label="statusLabel(ticket.status)" class="text-body2 q-pa-sm" />
+    </div>
+
+    <!-- Ticket info -->
+    <div v-if="ticket" class="row q-col-gutter-md q-mb-md">
+      <div class="col-12 col-md-8">
+        <!-- Description -->
+        <div class="portal-card">
+          <div class="text-subtitle2 text-weight-medium q-mb-sm">Description</div>
+          <div class="ticket-description" v-html="ticket.description || '<em>Aucune description</em>'" />
+        </div>
+
+        <!-- Conversation thread -->
+        <div class="portal-card q-mt-md">
+          <div class="text-subtitle2 text-weight-medium q-mb-md">Conversation</div>
+
+          <!-- Empty state -->
+          <div v-if="!thread.length && !loading" class="text-grey-6 text-center q-pa-lg">
+            Aucun message pour le moment
+          </div>
+
+          <!-- Thread entries -->
+          <div v-for="(group, gi) in groupedThread" :key="gi" class="q-mb-md">
+            <div class="text-center q-mb-sm">
+              <q-chip size="sm" color="grey-3" text-color="grey-7" dense>
+                {{ group.date }}
+              </q-chip>
+            </div>
+
+            <div v-for="entry in group.items" :key="entry.name" class="thread-entry q-mb-sm"
+              :class="entry.sent_or_received === 'Sent' && entry.sender === 'portal@gigafibre.ca' ? 'thread-mine' : 'thread-theirs'">
+              <div class="thread-bubble">
+                <div class="flex items-center q-mb-xs">
+                  <q-icon :name="mediumIcon(entry.communication_medium)" size="16px" class="q-mr-xs" />
+                  <span class="text-caption text-weight-medium">
+                    {{ entry.sender_full_name || entry.sender || 'Système' }}
+                  </span>
+                  <q-space />
+                  <span class="text-caption text-grey-6">{{ formatTime(entry.creation) }}</span>
+                </div>
+                <div class="thread-content" v-html="entry.content" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Reply box -->
+          <div class="q-mt-md">
+            <q-input v-model="replyText" outlined placeholder="Répondre..." type="textarea" rows="3"
+              :disable="sending" autogrow />
+            <div class="flex justify-end q-mt-sm">
+              <q-btn color="primary" label="Envoyer" icon="send" no-caps
+                :loading="sending" :disable="!replyText.trim()"
+                @click="sendReply" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sidebar -->
+      <div class="col-12 col-md-4">
+        <div class="portal-card">
+          <div class="text-subtitle2 text-weight-medium q-mb-sm">Détails</div>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label caption>Statut</q-item-label>
+                <q-item-label>
+                  <q-badge :color="statusColor(ticket.status)" :label="statusLabel(ticket.status)" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label caption>Priorité</q-item-label>
+                <q-item-label>
+                  <q-badge :color="priorityColor(ticket.priority)" :label="ticket.priority || 'Medium'" outline />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item v-if="ticket.issue_type">
+              <q-item-section>
+                <q-item-label caption>Type</q-item-label>
+                <q-item-label>{{ ticket.issue_type }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label caption>Créé le</q-item-label>
+                <q-item-label>{{ formatDate(ticket.creation) }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item v-if="ticket.resolution_date">
+              <q-item-section>
+                <q-item-label caption>Résolu le</q-item-label>
+                <q-item-label>{{ formatDate(ticket.resolution_date) }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex flex-center q-pa-xl">
+      <q-spinner-dots size="48px" color="primary" />
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchTicket, fetchCommunications, fetchComments, replyToTicket } from 'src/api/portal'
+import { useFormatters } from 'src/composables/useFormatters'
+import { useSSE } from 'src/composables/useSSE'
+
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatDate } = useFormatters()
+
+const ticketName = route.params.name
+const ticket = ref(null)
+const thread = ref([])
+const loading = ref(true)
+const replyText = ref('')
+const sending = ref(false)
+
+// SSE for real-time updates
+const { connect: sseConnect } = useSSE({
+  onMessage: async (data) => {
+    if (data.customer === store.customerId) {
+      await loadThread()
+      if (data.direction === 'in') {
+        $q.notify({
+          type: 'info',
+          icon: 'chat',
+          message: `Nouvelle réponse sur ${ticketName}`,
+          timeout: 3000,
+          position: 'top-right',
+        })
+      }
+    }
+  },
+})
+
+function statusColor (s) {
+  if (s === 'Open') return 'primary'
+  if (s === 'Closed' || s === 'Resolved') return 'positive'
+  if (s === 'Replied') return 'info'
+  return 'grey'
+}
+
+function statusLabel (s) {
+  const map = { Open: 'Ouvert', Closed: 'Fermé', Resolved: 'Résolu', Replied: 'Répondu' }
+  return map[s] || s
+}
+
+function priorityColor (p) {
+  if (p === 'High' || p === 'Urgent') return 'negative'
+  if (p === 'Medium') return 'warning'
+  return 'grey'
+}
+
+function mediumIcon (m) {
+  if (m === 'SMS') return 'sms'
+  if (m === 'Phone') return 'phone'
+  if (m === 'Email') return 'email'
+  return 'chat_bubble_outline'
+}
+
+function formatTime (d) {
+  if (!d) return ''
+  return new Date(d).toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })
+}
+
+const groupedThread = computed(() => {
+  const groups = []
+  let currentDate = null
+  let currentGroup = null
+  for (const entry of thread.value) {
+    const d = new Date(entry.creation).toLocaleDateString('fr-CA', {
+      year: 'numeric', month: 'long', day: 'numeric',
+    })
+    if (d !== currentDate) {
+      currentDate = d
+      currentGroup = { date: d, items: [] }
+      groups.push(currentGroup)
+    }
+    currentGroup.items.push(entry)
+  }
+  return groups
+})
+
+async function loadThread () {
+  const [coms, comments] = await Promise.all([
+    fetchCommunications('Issue', ticketName),
+    fetchComments('Issue', ticketName),
+  ])
+  // Merge communications and comments into unified thread sorted by creation
+  const merged = [
+    ...coms.map(c => ({ ...c, _type: 'communication' })),
+    ...comments.map(c => ({
+      name: c.name,
+      communication_medium: 'Other',
+      sent_or_received: 'Received',
+      sender: c.comment_by,
+      sender_full_name: c.comment_by,
+      content: c.content,
+      creation: c.creation,
+      _type: 'comment',
+    })),
+  ]
+  merged.sort((a, b) => new Date(a.creation) - new Date(b.creation))
+  thread.value = merged
+}
+
+async function sendReply () {
+  if (!replyText.value.trim()) return
+  sending.value = true
+  try {
+    await replyToTicket(ticketName, replyText.value.trim())
+    replyText.value = ''
+    $q.notify({ type: 'positive', message: 'Message envoyé' })
+    await loadThread()
+  } catch (e) {
+    $q.notify({ type: 'negative', message: 'Erreur: ' + e.message })
+  } finally {
+    sending.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!store.customerId) return
+  try {
+    const t = await fetchTicket(ticketName)
+    // Security: verify ticket belongs to customer
+    if (t.customer !== store.customerId) {
+      router.replace('/tickets')
+      return
+    }
+    ticket.value = t
+    await loadThread()
+    // Connect SSE for real-time updates on this customer
+    sseConnect(['customer:' + store.customerId])
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.ticket-description {
+  line-height: 1.6;
+  word-break: break-word;
+}
+.ticket-description :deep(img) {
+  max-width: 100%;
+}
+.thread-entry {
+  display: flex;
+}
+.thread-mine {
+  justify-content: flex-end;
+}
+.thread-theirs {
+  justify-content: flex-start;
+}
+.thread-bubble {
+  max-width: 80%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+.thread-mine .thread-bubble {
+  background: #e3f2fd;
+  border-bottom-right-radius: 4px;
+}
+.thread-theirs .thread-bubble {
+  background: #f5f5f5;
+  border-bottom-left-radius: 4px;
+}
+.thread-content {
+  word-break: break-word;
+}
+.thread-content :deep(p) {
+  margin: 0;
+}
+</style>

apps/client/src/pages/TicketsPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <q-page padding>
+    <div class="flex items-center justify-between q-mb-md">
+      <div class="page-title q-mb-none">Support</div>
+      <q-btn color="primary" icon="add" label="Nouveau ticket" no-caps @click="showCreate = true" />
+    </div>
+
+    <q-table
+      :rows="tickets"
+      :columns="columns"
+      row-key="name"
+      :loading="loading"
+      @row-click="(evt, row) => router.push('/tickets/' + row.name)"
+      flat bordered
+      class="bg-white clickable-table"
+      no-data-label="Aucun ticket"
+      :pagination="{ rowsPerPage: 50 }"
+    >
+      <template #body-cell-creation="props">
+        <q-td :props="props">{{ formatShortDate(props.value) }}</q-td>
+      </template>
+
+      <template #body-cell-status="props">
+        <q-td :props="props">
+          <q-badge :color="statusColor(props.value)" :label="statusLabel(props.value)" />
+        </q-td>
+      </template>
+
+      <template #body-cell-priority="props">
+        <q-td :props="props">
+          <q-badge :color="priorityColor(props.value)" :label="props.value" outline />
+        </q-td>
+      </template>
+    </q-table>
+
+    <!-- New ticket dialog -->
+    <q-dialog v-model="showCreate" persistent>
+      <q-card style="min-width: 400px; max-width: 600px">
+        <q-card-section>
+          <div class="text-h6">Nouveau ticket de support</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input v-model="newTicket.subject" label="Sujet" outlined class="q-mb-md"
+            :rules="[v => !!v || 'Le sujet est requis']" />
+          <q-input v-model="newTicket.description" label="Description" outlined type="textarea"
+            rows="4" :rules="[v => !!v || 'La description est requise']" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Annuler" @click="showCreate = false" />
+          <q-btn color="primary" label="Envoyer" :loading="creating"
+            @click="submitTicket" :disable="!newTicket.subject || !newTicket.description" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCustomerStore } from 'src/stores/customer'
+import { fetchTickets, createTicket } from 'src/api/portal'
+import { useFormatters } from 'src/composables/useFormatters'
+
+const router = useRouter()
+const $q = useQuasar()
+const store = useCustomerStore()
+const { formatShortDate } = useFormatters()
+
+const tickets = ref([])
+const loading = ref(false)
+const showCreate = ref(false)
+const creating = ref(false)
+const newTicket = ref({ subject: '', description: '' })
+
+const columns = [
+  { name: 'name', label: 'No.', field: 'name', align: 'left' },
+  { name: 'subject', label: 'Sujet', field: 'subject', align: 'left' },
+  { name: 'status', label: 'Statut', field: 'status', align: 'center' },
+  { name: 'priority', label: 'Priorité', field: 'priority', align: 'center' },
+  { name: 'creation', label: 'Créé le', field: 'creation', align: 'left' },
+]
+
+function statusColor (s) {
+  if (s === 'Open') return 'primary'
+  if (s === 'Closed' || s === 'Resolved') return 'positive'
+  if (s === 'Replied') return 'info'
+  return 'grey'
+}
+
+function statusLabel (s) {
+  const map = { Open: 'Ouvert', Closed: 'Fermé', Resolved: 'Résolu', Replied: 'Répondu' }
+  return map[s] || s
+}
+
+function priorityColor (p) {
+  if (p === 'High' || p === 'Urgent') return 'negative'
+  if (p === 'Medium') return 'warning'
+  return 'grey'
+}
+
+async function loadTickets () {
+  loading.value = true
+  try {
+    tickets.value = await fetchTickets(store.customerId)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function submitTicket () {
+  creating.value = true
+  try {
+    await createTicket(store.customerId, newTicket.value.subject, newTicket.value.description)
+    showCreate.value = false
+    newTicket.value = { subject: '', description: '' }
+    $q.notify({ type: 'positive', message: 'Ticket créé avec succès' })
+    await loadTickets()
+  } catch (e) {
+    $q.notify({ type: 'negative', message: 'Erreur: ' + e.message })
+  } finally {
+    creating.value = false
+  }
+}
+
+onMounted(() => {
+  if (store.customerId) loadTickets()
+})
+</script>

apps/client/src/router/index.js

@@ -0,0 +1,84 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { useCustomerStore } from 'src/stores/customer'
+
+/**
+ * Portal router.
+ *
+ * Two route trees:
+ *   /login            → standalone (no drawer, no header) — LoginPage.vue
+ *   /*                → PortalLayout.vue (drawer + header + nav)
+ *
+ * Navigation guard: customers without a valid session get bounced to /login.
+ * A valid session is one of:
+ *   - URL carries ?token=JWT (handled by useMagicToken on page mount)
+ *   - customerStore.customerId is already set (previously authenticated)
+ *
+ * Routes marked in PUBLIC_ROUTES skip the guard — these are payment-return
+ * landings where we want to show a success/cancel message even if the token
+ * expired, plus the catalog which is intentionally browsable unauthenticated.
+ */
+
+// Routes that work without a customer session — payment returns and public
+// catalog. Must match the `name` value on the route, not the path.
+const PUBLIC_ROUTES = new Set([
+  'login',
+  'catalog',
+  'cart',
+  'order-success',
+  'payment-success',
+  'payment-cancel',
+  'payment-card-added',
+])
+
+const routes = [
+  // Standalone — no layout wrapper
+  { path: '/login', name: 'login', component: () => import('pages/LoginPage.vue') },
+
+  // Main portal — wrapped in drawer + header layout
+  {
+    path: '/',
+    component: () => import('layouts/PortalLayout.vue'),
+    children: [
+      { path: '', name: 'dashboard', component: () => import('pages/DashboardPage.vue') },
+      { path: 'invoices', name: 'invoices', component: () => import('pages/InvoicesPage.vue') },
+      { path: 'invoices/:name', name: 'invoice-detail', component: () => import('pages/InvoiceDetailPage.vue') },
+      { path: 'tickets', name: 'tickets', component: () => import('pages/TicketsPage.vue') },
+      { path: 'tickets/:name', name: 'ticket-detail', component: () => import('pages/TicketDetailPage.vue') },
+      { path: 'messages', name: 'messages', component: () => import('pages/MessagesPage.vue') },
+      { path: 'me', name: 'account', component: () => import('pages/AccountPage.vue') },
+      { path: 'catalogue', name: 'catalog', component: () => import('pages/CatalogPage.vue') },
+      { path: 'panier', name: 'cart', component: () => import('pages/CartPage.vue') },
+      { path: 'commande/confirmation', name: 'order-success', component: () => import('pages/OrderSuccessPage.vue') },
+      { path: 'paiement/merci', name: 'payment-success', component: () => import('pages/PaymentSuccessPage.vue') },
+      { path: 'paiement/annule', name: 'payment-cancel', component: () => import('pages/PaymentCancelPage.vue') },
+      { path: 'paiement/carte-ajoutee', name: 'payment-card-added', component: () => import('pages/PaymentCardAddedPage.vue') },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(process.env.VUE_ROUTER_BASE),
+  routes,
+})
+
+// Navigation guard: push unauthenticated users to /login (unless the route
+// is public OR the URL carries a fresh ?token=).
+router.beforeEach((to, from, next) => {
+  if (PUBLIC_ROUTES.has(to.name)) return next()
+
+  const store = useCustomerStore()
+
+  // Already authenticated from a previous nav in this session.
+  if (store.customerId) return next()
+
+  // URL carries a token? Hydrate synchronously (URL parse + base64 decode,
+  // no network). Covers magic-link clicks landing on any page and avoids
+  // the race between App.vue's async init() and the first navigation.
+  if (to.query.token || (typeof window !== 'undefined' && window.location.hash.includes('token='))) {
+    if (store.hydrateFromToken()) return next()
+  }
+
+  next({ name: 'login' })
+})
+
+export default router

apps/client/src/stores/cart.js

@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia'
+import { ref, computed, watch } from 'vue'
+
+const STORAGE_KEY = 'gigafibre_cart'
+
+function loadFromStorage () {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch { return [] }
+}
+
+export const useCartStore = defineStore('cart', () => {
+  const items = ref(loadFromStorage())
+  const taxRate = 0.14975 // TPS 5% + TVQ 9.975%
+
+  // Persist to localStorage on every change
+  watch(items, (val) => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(val))
+  }, { deep: true })
+
+  function addItem (product) {
+    const existing = items.value.find(i => i.item_code === product.item_code)
+    if (existing) {
+      existing.qty += 1
+    } else {
+      items.value.push({
+        item_code: product.item_code,
+        item_name: product.item_name,
+        rate: product.rate,
+        qty: 1,
+        billing_type: product.billing_type,
+        service_category: product.service_category,
+        requires_visit: product.requires_visit || false,
+        project_template_id: product.project_template_id || null,
+        description: product.description || '',
+      })
+    }
+  }
+
+  function removeItem (index) {
+    items.value.splice(index, 1)
+  }
+
+  function updateQty (index, qty) {
+    if (qty < 1) {
+      removeItem(index)
+      return
+    }
+    items.value[index].qty = qty
+  }
+
+  function clearCart () {
+    items.value = []
+  }
+
+  const itemCount = computed(() =>
+    items.value.reduce((sum, i) => sum + i.qty, 0),
+  )
+
+  const onetimeTotal = computed(() =>
+    items.value
+      .filter(i => i.billing_type !== 'Mensuel')
+      .reduce((sum, i) => sum + i.rate * i.qty, 0),
+  )
+
+  const recurringTotal = computed(() =>
+    items.value
+      .filter(i => i.billing_type === 'Mensuel')
+      .reduce((sum, i) => sum + i.rate * i.qty, 0),
+  )
+
+  const subtotal = computed(() => onetimeTotal.value + recurringTotal.value)
+
+  const taxAmount = computed(() => subtotal.value * taxRate)
+
+  const grandTotal = computed(() => subtotal.value + taxAmount.value)
+
+  const requiresVisit = computed(() =>
+    items.value.some(i => i.requires_visit),
+  )
+
+  return {
+    items,
+    taxRate,
+    addItem,
+    removeItem,
+    updateQty,
+    clearCart,
+    itemCount,
+    onetimeTotal,
+    recurringTotal,
+    subtotal,
+    taxAmount,
+    grandTotal,
+    requiresVisit,
+  }
+})

apps/client/src/stores/customer.js

@@ -0,0 +1,109 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { getPortalUser } from 'src/api/portal'
+
+/**
+ * Customer session store.
+ *
+ * Two hydration paths:
+ *   1. Magic-link JWT in the URL (`?token=JWT`). Decoded client-side — the
+ *      hub already signed it and the user received it through their own
+ *      verified channel (SMS/email), so trust is established. No network
+ *      call needed.
+ *   2. ERPNext session (legacy / staff impersonation). Only tried when
+ *      there's no token AND no existing store state. Failure is silent —
+ *      the router guard will bounce the user to /login.
+ *
+ * For the token path we also strip `?token=` from the URL so a page refresh
+ * or bookmark doesn't replay the token forever. The store state carries us
+ * for the rest of the session; if the user refreshes without a token, the
+ * guard sees `customerId` still set and lets them through.
+ */
+
+function readTokenFromLocation () {
+  if (typeof window === 'undefined') return ''
+  const hash = window.location.hash || ''
+  // Hash form: #/paiement/merci?token=xxx OR #/?token=xxx
+  const qIdx = hash.indexOf('?')
+  if (qIdx === -1) return ''
+  const qs = new URLSearchParams(hash.slice(qIdx + 1))
+  return qs.get('token') || ''
+}
+
+function decodeJwtPayload (token) {
+  try {
+    const parts = token.split('.')
+    if (parts.length !== 3) return null
+    const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')))
+    if (payload.exp && Date.now() / 1000 > payload.exp) return null
+    return payload
+  } catch {
+    return null
+  }
+}
+
+function stripTokenFromUrl () {
+  if (typeof window === 'undefined') return
+  const hash = window.location.hash || ''
+  const qIdx = hash.indexOf('?')
+  if (qIdx === -1) return
+  const before = hash.slice(0, qIdx)
+  const params = new URLSearchParams(hash.slice(qIdx + 1))
+  params.delete('token')
+  const rest = params.toString()
+  const newHash = rest ? `${before}?${rest}` : before
+  // Use replaceState so the token doesn't stay in browser history
+  window.history.replaceState(null, '', window.location.pathname + window.location.search + newHash)
+}
+
+export const useCustomerStore = defineStore('customer', () => {
+  const email = ref('')
+  const customerId = ref('')
+  const customerName = ref('')
+  const loading = ref(true)
+  const error = ref(null)
+
+  function hydrateFromToken () {
+    const token = readTokenFromLocation()
+    if (!token) return false
+    const payload = decodeJwtPayload(token)
+    if (!payload || payload.scope !== 'customer') return false
+    customerId.value = payload.sub
+    customerName.value = payload.name || payload.sub
+    email.value = payload.email || ''
+    stripTokenFromUrl()
+    return true
+  }
+
+  async function init () {
+    loading.value = true
+    error.value = null
+    try {
+      // Path 1: magic-link token in URL
+      if (hydrateFromToken()) return
+
+      // Already authenticated in this tab? (e.g. subsequent nav)
+      if (customerId.value) return
+
+      // Path 2: fall back to ERPNext session (staff impersonation / legacy)
+      const user = await getPortalUser()
+      email.value = user.email
+      customerId.value = user.customer_id
+      customerName.value = user.customer_name
+    } catch (e) {
+      // Silent — router guard will push to /login when customerId is empty
+      error.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function clear () {
+    email.value = ''
+    customerId.value = ''
+    customerName.value = ''
+    error.value = null
+  }
+
+  return { email, customerId, customerName, loading, error, init, hydrateFromToken, clear }
+})

apps/client/src/utils/format.js

@@ -0,0 +1,15 @@
+export const formatPrice = (val) => val.toFixed(2) + ' $'
+
+// Strip +1/1 prefix from E.164 phone → 10-digit local format for mask
+export function normalizePhone (raw) {
+  if (!raw) return ''
+  const digits = raw.replace(/\D/g, '')
+  return digits.length === 11 && digits.startsWith('1') ? digits.slice(1) : digits
+}
+
+// Minimum booking date (J+3)
+export function minBookingDate () {
+  const d = new Date()
+  d.setDate(d.getDate() + 3)
+  return d.toISOString().slice(0, 10)
+}

apps/ops/.env.example

@@ -0,0 +1,17 @@
+# ─────────────────────────────────────────────────────────────────────────
+# apps/ops — Vite/Quasar dev environment
+# Copy to `apps/ops/.env`, fill in the values, then `npx quasar dev`.
+# Vite only exposes vars prefixed with VITE_ to the browser bundle.
+# ─────────────────────────────────────────────────────────────────────────
+
+# ERPNext API token used by the SPA when calling /api/resource/*.
+# Format: <api_key>:<api_secret>. Mint one in ERPNext Desk under
+# User → API Access. Needs roles for the doctypes the page touches
+# (Customer, Sales Invoice, Dispatch Job, Service Subscription, etc.).
+VITE_ERP_TOKEN=changeme_apikey:changeme_apisecret
+
+# Public URL of the targo-hub (Node/Express). The SPA hits this for
+# dispatch routes, traccar passthrough, conversations, voice agent,
+# /auth/users, etc. Must be HTTPS in production.
+# Local dev: http://localhost:3300
+VITE_HUB_URL=https://msg.gigafibre.ca

apps/ops/.quasar/app.js

@@ -0,0 +1,56 @@
+/* eslint-disable */
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * DO NOT EDIT.
+ *
+ * You are probably looking on adding startup/initialization code.
+ * Use "quasar new boot <name>" and add it there.
+ * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
+ * boot: ['file', ...] // do not add ".js" extension to it.
+ *
+ * Boot files are your "main.js"
+ **/
+
+
+
+import { Quasar } from 'quasar'
+import { markRaw } from 'vue'
+import RootComponent from 'app/src/App.vue'
+
+
+import createRouter from 'app/src/router/index'
+
+
+
+
+
+export default async function (createAppFn, quasarUserOptions) {
+  // Create the app instance.
+  // Here we inject into it the Quasar UI, the router & possibly the store.
+  const app = createAppFn(RootComponent)
+
+  
+
+  app.use(Quasar, quasarUserOptions)
+
+  
+
+  
+
+  const router = markRaw(
+    typeof createRouter === 'function'
+      ? await createRouter({})
+      : createRouter
+  )
+
+  
+
+  // Expose the app, the router and the store.
+  // Note that we are not mounting the app here, since bootstrapping will be
+  // different depending on whether we are in a browser or on the server.
+  return {
+    app,
+    
+    router
+  }
+}

apps/ops/.quasar/artifacts.json

@@ -0,0 +1 @@
+{"folders":["/Users/louispaul/Documents/testap/gigafibre-fsm/apps/ops/dist/spa","/Users/louispaul/Documents/testap/gigafibre-fsm/apps/ops/dist/pwa"]}

apps/ops/.quasar/client-entry.js

@@ -0,0 +1,160 @@
+/* eslint-disable */
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * DO NOT EDIT.
+ *
+ * You are probably looking on adding startup/initialization code.
+ * Use "quasar new boot <name>" and add it there.
+ * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
+ * boot: ['file', ...] // do not add ".js" extension to it.
+ *
+ * Boot files are your "main.js"
+ **/
+
+
+import { createApp } from 'vue'
+
+
+
+
+
+
+
+import '@quasar/extras/material-icons/material-icons.css'
+
+
+
+
+// We load Quasar stylesheet file
+import 'quasar/dist/quasar.css'
+
+
+
+
+import 'src/css/app.scss'
+
+import 'src/css/tech.scss'
+
+
+import createQuasarApp from './app.js'
+import quasarUserOptions from './quasar-user-options.js'
+
+
+
+
+
+
+
+const publicPath = `/`
+
+async function start ({
+  app,
+  router
+  
+}, bootFiles) {
+  
+
+  
+  let hasRedirected = false
+  const getRedirectUrl = url => {
+    try { return router.resolve(url).href }
+    catch (err) {}
+
+    return Object(url) === url
+      ? null
+      : url
+  }
+  const redirect = url => {
+    hasRedirected = true
+
+    if (typeof url === 'string' && /^https?:\/\//.test(url)) {
+      window.location.href = url
+      return
+    }
+
+    const href = getRedirectUrl(url)
+
+    // continue if we didn't fail to resolve the url
+    if (href !== null) {
+      window.location.href = href
+      window.location.reload()
+    }
+  }
+
+  const urlPath = window.location.href.replace(window.location.origin, '')
+
+  for (let i = 0; hasRedirected === false && i < bootFiles.length; i++) {
+    try {
+      await bootFiles[i]({
+        app,
+        router,
+        
+        ssrContext: null,
+        redirect,
+        urlPath,
+        publicPath
+      })
+    }
+    catch (err) {
+      if (err && err.url) {
+        redirect(err.url)
+        return
+      }
+
+      console.error('[Quasar] boot error:', err)
+      return
+    }
+  }
+
+  if (hasRedirected === true) {
+    return
+  }
+  
+
+  app.use(router)
+  
+
+  
+
+    
+
+    
+      app.mount('#q-app')
+    
+
+    
+
+  
+
+}
+
+createQuasarApp(createApp, quasarUserOptions)
+
+  .then(app => {
+    // eventually remove this when Cordova/Capacitor/Electron support becomes old
+    const [ method, mapFn ] = Promise.allSettled !== void 0
+      ? [
+        'allSettled',
+        bootFiles => bootFiles.map(result => {
+          if (result.status === 'rejected') {
+            console.error('[Quasar] boot error:', result.reason)
+            return
+          }
+          return result.value.default
+        })
+      ]
+      : [
+        'all',
+        bootFiles => bootFiles.map(entry => entry.default)
+      ]
+
+    return Promise[ method ]([
+      
+      import('boot/pinia')
+      
+    ]).then(bootFiles => {
+      const boot = mapFn(bootFiles).filter(entry => typeof entry === 'function')
+      start(app, boot)
+    })
+  })
+

apps/ops/.quasar/client-prefetch.js

@@ -0,0 +1,116 @@
+/* eslint-disable */
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * DO NOT EDIT.
+ *
+ * You are probably looking on adding startup/initialization code.
+ * Use "quasar new boot <name>" and add it there.
+ * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
+ * boot: ['file', ...] // do not add ".js" extension to it.
+ *
+ * Boot files are your "main.js"
+ **/
+
+
+
+import App from 'app/src/App.vue'
+let appPrefetch = typeof App.preFetch === 'function'
+  ? App.preFetch
+  : (
+    // Class components return the component options (and the preFetch hook) inside __c property
+    App.__c !== void 0 && typeof App.__c.preFetch === 'function'
+      ? App.__c.preFetch
+      : false
+    )
+
+
+function getMatchedComponents (to, router) {
+  const route = to
+    ? (to.matched ? to : router.resolve(to).route)
+    : router.currentRoute.value
+
+  if (!route) { return [] }
+
+  const matched = route.matched.filter(m => m.components !== void 0)
+
+  if (matched.length === 0) { return [] }
+
+  return Array.prototype.concat.apply([], matched.map(m => {
+    return Object.keys(m.components).map(key => {
+      const comp = m.components[key]
+      return {
+        path: m.path,
+        c: comp
+      }
+    })
+  }))
+}
+
+export function addPreFetchHooks ({ router, publicPath }) {
+  // Add router hook for handling preFetch.
+  // Doing it after initial route is resolved so that we don't double-fetch
+  // the data that we already have. Using router.beforeResolve() so that all
+  // async components are resolved.
+  router.beforeResolve((to, from, next) => {
+    const
+      urlPath = window.location.href.replace(window.location.origin, ''),
+      matched = getMatchedComponents(to, router),
+      prevMatched = getMatchedComponents(from, router)
+
+    let diffed = false
+    const preFetchList = matched
+      .filter((m, i) => {
+        return diffed || (diffed = (
+          !prevMatched[i] ||
+          prevMatched[i].c !== m.c ||
+          m.path.indexOf('/:') > -1 // does it has params?
+        ))
+      })
+      .filter(m => m.c !== void 0 && (
+        typeof m.c.preFetch === 'function'
+        // Class components return the component options (and the preFetch hook) inside __c property
+        || (m.c.__c !== void 0 && typeof m.c.__c.preFetch === 'function')
+      ))
+      .map(m => m.c.__c !== void 0 ? m.c.__c.preFetch : m.c.preFetch)
+
+    
+    if (appPrefetch !== false) {
+      preFetchList.unshift(appPrefetch)
+      appPrefetch = false
+    }
+    
+
+    if (preFetchList.length === 0) {
+      return next()
+    }
+
+    let hasRedirected = false
+    const redirect = url => {
+      hasRedirected = true
+      next(url)
+    }
+    const proceed = () => {
+      
+      if (hasRedirected === false) { next() }
+    }
+
+    
+
+    preFetchList.reduce(
+      (promise, preFetch) => promise.then(() => hasRedirected === false && preFetch({
+        
+        currentRoute: to,
+        previousRoute: from,
+        redirect,
+        urlPath,
+        publicPath
+      })),
+      Promise.resolve()
+    )
+    .then(proceed)
+    .catch(e => {
+      console.error(e)
+      proceed()
+    })
+  })
+}

apps/ops/.quasar/quasar-user-options.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * DO NOT EDIT.
+ *
+ * You are probably looking on adding startup/initialization code.
+ * Use "quasar new boot <name>" and add it there.
+ * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
+ * boot: ['file', ...] // do not add ".js" extension to it.
+ *
+ * Boot files are your "main.js"
+ **/
+
+
+
+import {Notify,Loading,LocalStorage,Dialog} from 'quasar'
+
+
+
+export default { config: {},plugins: {Notify,Loading,LocalStorage,Dialog} }
+

apps/ops/deploy.sh

@@ -0,0 +1,67 @@
+#!/bin/bash
+# ─────────────────────────────────────────────────────────────────────────────
+# deploy.sh — Build Targo Ops PWA and deploy to ops-frontend nginx container
+#
+# The ops app is served by a standalone nginx container (ops-frontend) at
+# erp.gigafibre.ca/ops/. Traefik strips /ops prefix before proxying to nginx.
+# Authentik protection is handled via Traefik forwardAuth middleware.
+#
+# Static files go to /opt/ops-app/ on the host, mounted into the container.
+#
+# Usage:
+#   ./deploy.sh          # deploy to remote server (SPA mode, no service worker cache)
+#   ./deploy.sh local    # deploy to local Docker (development)
+#   ./deploy.sh pwa      # deploy to remote server (PWA mode, for production)
+#
+# Prerequisites (remote):
+#   - SSH key ~/.ssh/proxmox_vm for root@96.125.196.67
+#   - ops-frontend container running (see infra/docker-compose.yaml)
+# ─────────────────────────────────────────────────────────────────────────────
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+SERVER="root@96.125.196.67"
+SSH_KEY="$HOME/.ssh/proxmox_vm"
+DEST="/opt/ops-app"
+
+# Default to SPA mode (no service worker = no cache headaches during dev)
+BUILD_MODE="spa"
+DIST_DIR="dist/spa"
+if [ "$1" = "pwa" ]; then
+  BUILD_MODE="pwa"
+  DIST_DIR="dist/pwa"
+  shift
+fi
+
+echo "==> Installing dependencies..."
+npm ci --silent
+
+echo "==> Building $BUILD_MODE (base=/ops/)..."
+DEPLOY_BASE=/ops/ npx quasar build -m "$BUILD_MODE"
+
+if [ "$1" = "local" ]; then
+  # ── Local deploy ──
+  echo "==> Deploying to local $DEST..."
+  rm -rf "$DEST"/*
+  cp -r "$DIST_DIR"/* "$DEST/"
+  echo ""
+  echo "Done! Targo Ops: http://localhost/ops/"
+else
+  # ── Remote deploy ──
+  echo "==> Packaging..."
+  tar czf /tmp/ops-build.tar.gz -C "$DIST_DIR" .
+
+  echo "==> Deploying to $SERVER..."
+  cat /tmp/ops-build.tar.gz | ssh -i "$SSH_KEY" "$SERVER" \
+    "cat > /tmp/ops.tar.gz && \
+     rm -rf $DEST/*.js $DEST/*.html $DEST/*.json $DEST/assets $DEST/icons $DEST/sw.js $DEST/workbox-*.js && \
+     cd $DEST && tar xzf /tmp/ops.tar.gz && \
+     rm -f /tmp/ops.tar.gz"
+
+  rm -f /tmp/ops-build.tar.gz
+
+  echo ""
+  echo "Done! Targo Ops ($BUILD_MODE): https://erp.gigafibre.ca/ops/"
+fi

apps/ops/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Targo Ops</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Targo Operations Platform">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

apps/ops/infra/docker-compose.yaml

@@ -0,0 +1,47 @@
+# Targo Ops — nginx container served at erp.gigafibre.ca/ops/
+# Deploy: docker compose -f docker-compose.yaml up -d
+#
+# Requires:
+#   - Traefik proxy network
+#   - Authentik forwardAuth middleware in Traefik
+#
+# Routing:
+#   erp.gigafibre.ca/ops/*  → Traefik → StripPrefix /ops → nginx (static SPA)
+#   erp.gigafibre.ca/api/*  → ERPNext directly (same domain, no proxy needed)
+
+services:
+  ops-frontend:
+    image: nginx:alpine
+    container_name: ops-frontend
+    restart: unless-stopped
+    volumes:
+      - /opt/ops-app:/usr/share/nginx/html:ro
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    networks:
+      - proxy
+    labels:
+      - "traefik.enable=true"
+      # Main router: erp.gigafibre.ca/ops/* with Authentik + StripPrefix
+      - "traefik.http.routers.ops.rule=Host(`erp.gigafibre.ca`) && PathPrefix(`/ops`)"
+      - "traefik.http.routers.ops.entrypoints=web,websecure"
+      - "traefik.http.routers.ops.middlewares=authentik-client@file,ops-strip@docker"
+      - "traefik.http.routers.ops.service=ops"
+      - "traefik.http.routers.ops.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.ops.priority=200"
+      # StripPrefix middleware (removes /ops before sending to nginx)
+      - "traefik.http.middlewares.ops-strip.stripprefix.prefixes=/ops"
+      - "traefik.http.middlewares.ops-strip.stripprefix.forceSlash=false"
+      # Authentik outpost callback (required for login redirect)
+      - "traefik.http.routers.ops-ak.rule=Host(`erp.gigafibre.ca`) && PathPrefix(`/outpost.goauthentik.io/`)"
+      - "traefik.http.routers.ops-ak.entrypoints=web,websecure"
+      - "traefik.http.routers.ops-ak.middlewares=authentik-client@file"
+      - "traefik.http.routers.ops-ak.service=ops"
+      - "traefik.http.routers.ops-ak.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.ops-ak.priority=250"
+      # Service
+      - "traefik.http.services.ops.loadbalancer.server.port=80"
+      - "traefik.docker.network=proxy"
+
+networks:
+  proxy:
+    external: true

apps/ops/infra/migrate-to-erpnext.sh

@@ -0,0 +1,102 @@
+#!/bin/bash
+# ─────────────────────────────────────────────────────────────────────────────
+# migrate-to-erpnext.sh — One-time migration: serve Ops from ERPNext container
+#
+# Run on the server (96.125.196.67) as root.
+# This script:
+#   1. Stops and removes the standalone ops-frontend container
+#   2. Patches ERPNext docker-compose to add Authentik Traefik labels
+#   3. Recreates ERPNext frontend with new labels
+#
+# After running this, use deploy.sh to push new builds.
+# ─────────────────────────────────────────────────────────────────────────────
+set -e
+
+# Find ERPNext compose file
+ERP_COMPOSE=""
+for p in /opt/erpnext/docker-compose.yml /opt/frappe_docker/docker-compose.yml; do
+  [ -f "$p" ] && ERP_COMPOSE="$p" && break
+done
+[ -z "$ERP_COMPOSE" ] && echo "ERROR: ERPNext docker-compose not found" && exit 1
+ERP_DIR="$(dirname "$ERP_COMPOSE")"
+
+echo "=== Targo Ops Infrastructure Simplification ==="
+echo "Using: $ERP_COMPOSE"
+echo ""
+
+# ── Step 1: Stop ops-frontend container ──
+echo "==> Step 1: Stopping ops-frontend container..."
+if docker ps -a --format '{{.Names}}' | grep -q 'ops-frontend'; then
+  (cd /opt/ops-app/infra 2>/dev/null && docker compose down 2>/dev/null) || \
+    (docker stop ops-frontend 2>/dev/null; docker rm ops-frontend 2>/dev/null) || true
+  echo "    Done."
+else
+  echo "    Already removed."
+fi
+
+# ── Step 2: Patch docker-compose.yml ──
+echo ""
+echo "==> Step 2: Adding Authentik labels to ERPNext frontend..."
+
+if grep -q 'routers.ops-app' "$ERP_COMPOSE"; then
+  echo "    Already present. Skipping."
+else
+  cp "$ERP_COMPOSE" "${ERP_COMPOSE}.bak"
+  python3 <<PYEOF
+import re
+
+compose_path = "$ERP_COMPOSE"
+
+with open(compose_path) as f:
+    content = f.read()
+
+# Labels to inject
+ops_labels = '''      # ── Ops SPA (Authentik-protected) ──
+      - "traefik.http.routers.ops-app.rule=Host(\`erp.gigafibre.ca\`) && PathPrefix(\`/assets/ops-app\`)"
+      - "traefik.http.routers.ops-app.entrypoints=web,websecure"
+      - "traefik.http.routers.ops-app.middlewares=authentik@file"
+      - "traefik.http.routers.ops-app.service=erp"
+      - "traefik.http.routers.ops-app.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.ops-app.priority=200"
+      # ── Authentik outpost callback ──
+      - "traefik.http.routers.ops-ak.rule=Host(\`erp.gigafibre.ca\`) && PathPrefix(\`/outpost.goauthentik.io/\`)"
+      - "traefik.http.routers.ops-ak.entrypoints=web,websecure"
+      - "traefik.http.routers.ops-ak.middlewares=authentik@file"
+      - "traefik.http.routers.ops-ak.service=erp"
+      - "traefik.http.routers.ops-ak.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.ops-ak.priority=250"'''
+
+# Find the last traefik label line and insert after it
+lines = content.split('\\n')
+last_traefik_idx = -1
+for i, line in enumerate(lines):
+    if 'traefik.' in line and line.strip().startswith('-'):
+        last_traefik_idx = i
+
+if last_traefik_idx == -1:
+    print("ERROR: No traefik labels found in compose file")
+    exit(1)
+
+lines.insert(last_traefik_idx + 1, ops_labels)
+
+with open(compose_path, 'w') as f:
+    f.write('\\n'.join(lines))
+
+print(f"    Injected after line {last_traefik_idx + 1}. Backup: {compose_path}.bak")
+PYEOF
+fi
+
+# ── Step 3: Recreate ERPNext frontend ──
+echo ""
+echo "==> Step 3: Recreating ERPNext frontend..."
+cd "$ERP_DIR"
+docker compose up -d frontend
+echo "    Done."
+
+echo ""
+echo "=== Migration complete ==="
+echo ""
+echo "Deploy ops build:  ./deploy.sh"
+echo "Access:            https://erp.gigafibre.ca/assets/ops-app/"
+echo "Cleanup:           rm -rf /opt/ops-app"
+echo ""

apps/ops/infra/nginx.conf

@@ -0,0 +1,45 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    resolver 127.0.0.11 valid=30s;
+
+    # ERPNext API proxy — token injected server-side (never in JS bundle)
+    # To rotate: edit this file + docker restart ops-frontend
+    location /api/ {
+        proxy_pass https://erp.gigafibre.ca;
+        proxy_ssl_verify off;
+        proxy_set_header Host erp.gigafibre.ca;
+        proxy_set_header Authorization "token b273a666c86d2d0:06120709db5e414";
+        proxy_set_header X-Authentik-Email $http_x_authentik_email;
+        proxy_set_header X-Authentik-Username $http_x_authentik_username;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto https;
+    }
+
+    # NOTE: Ollama Vision proxy removed 2026-04-22 — invoice OCR and all
+    # barcode/equipment scans now go directly to targo-hub (Gemini 2.5 Flash).
+    # See docs/features/vision-ocr.md. The hub handles CORS + rate-limit, so no
+    # nginx pass-through is needed here.
+
+    # SPA fallback — all routes serve index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # No cache for index.html and service worker
+    location = /index.html {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+    location = /sw.js {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+
+    # Cache static assets (30 days, immutable)
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+}

apps/ops/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "ops-app",
+  "version": "0.1.0",
+  "description": "Targo Ops — Unified ISP operations platform",
+  "productName": "Targo Ops",
+  "private": true,
+  "scripts": {
+    "dev": "quasar dev",
+    "build": "quasar build -m pwa",
+    "lint": "eslint --ext .js,.vue ./src"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.16.12",
+    "@twilio/voice-sdk": "^2.18.1",
+    "chart.js": "^4.5.1",
+    "cytoscape": "^3.33.2",
+    "grapesjs": "^0.22.16",
+    "grapesjs-mjml": "^1.0.8",
+    "grapesjs-preset-newsletter": "^1.0.2",
+    "idb-keyval": "^6.2.1",
+    "lucide-vue-next": "^1.0.0",
+    "pinia": "^2.1.7",
+    "quasar": "^2.16.10",
+    "sip.js": "^0.21.2",
+    "vue": "^3.4.21",
+    "vue-chartjs": "^5.3.3",
+    "vue-email-editor": "^2.2.0",
+    "vue-router": "^4.3.0",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^1.10.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "sass": "^1.72.0",
+    "workbox-build": "7.0.x",
+    "workbox-cacheable-response": "7.0.x",
+    "workbox-core": "7.0.x",
+    "workbox-expiration": "7.0.x",
+    "workbox-precaching": "7.0.x",
+    "workbox-routing": "7.0.x",
+    "workbox-strategies": "7.0.x"
+  },
+  "engines": {
+    "node": "^18 || ^20",
+    "npm": ">= 6.13.4"
+  }
+}

apps/ops/quasar.config.js

@@ -0,0 +1,71 @@
+/* eslint-env node */
+const { configure } = require('quasar/wrappers')
+
+module.exports = configure(function () {
+  return {
+    boot: ['pinia'],
+
+    css: ['app.scss', 'tech.scss'],
+
+    extras: ['material-icons'],
+
+    build: {
+      target: {
+        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        node: 'node20',
+      },
+      vueRouterMode: 'hash',
+      extendViteConf (viteConf) {
+        viteConf.base = process.env.DEPLOY_BASE || '/ops/'
+      },
+    },
+
+    devServer: {
+      open: false,
+      host: '0.0.0.0',
+      port: 9001,
+      proxy: {
+        '/ops/api': {
+          target: 'https://erp.gigafibre.ca',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/ops/, ''),
+        },
+        '/api': {
+          target: 'https://erp.gigafibre.ca',
+          changeOrigin: true,
+        },
+      },
+    },
+
+    framework: {
+      config: {},
+      plugins: ['Notify', 'Loading', 'LocalStorage', 'Dialog'],
+    },
+
+    animations: [],
+
+    pwa: {
+      workboxMode: 'generateSW',
+      injectPwaMetaTags: true,
+      swFilename: 'sw.js',
+      manifestFilename: 'manifest.json',
+      useCredentialForManifestTag: false,
+      workboxOptions: {
+        skipWaiting: true,
+        clientsClaim: true,
+        cleanupOutdatedCaches: true,
+        navigateFallback: 'index.html',
+        navigateFallbackDenylist: [/^\/api\//],
+      },
+      extendManifestJson (json) {
+        json.name = 'Targo Ops'
+        json.short_name = 'Ops'
+        json.description = 'Targo Operations Platform'
+        json.display = 'standalone'
+        json.background_color = '#ffffff'
+        json.theme_color = '#1e293b'
+        json.start_url = '.'
+      },
+    },
+  }
+})

apps/ops/src-pwa/custom-service-worker.js

@@ -0,0 +1,26 @@
+/* eslint-env serviceworker */
+import { clientsClaim } from 'workbox-core'
+import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
+import { registerRoute, NavigationRoute } from 'workbox-routing'
+
+self.skipWaiting()
+clientsClaim()
+
+// Listen for skip waiting message from register-service-worker
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
+  }
+})
+
+precacheAndRoute(self.__WB_MANIFEST)
+cleanupOutdatedCaches()
+
+if (process.env.MODE !== 'ssr' || process.env.PROD) {
+  registerRoute(
+    new NavigationRoute(
+      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
+      { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
+    )
+  )
+}

apps/ops/src-pwa/manifest.json

@@ -0,0 +1,32 @@
+{
+  "orientation": "portrait",
+  "background_color": "#ffffff",
+  "theme_color": "#1e293b",
+  "icons": [
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

apps/ops/src-pwa/pwa-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}

apps/ops/src-pwa/register-service-worker.js

@@ -0,0 +1,19 @@
+import { register } from 'register-service-worker'
+
+register(process.env.SERVICE_WORKER_FILE, {
+  ready () {},
+  registered (reg) {
+    // Check for updates every 5 minutes
+    setInterval(() => { reg.update() }, 5 * 60 * 1000)
+  },
+  cached () {},
+  updatefound () {},
+  updated (reg) {
+    // New service worker available — activate it silently (no reload)
+    if (reg && reg.waiting) {
+      reg.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }
+  },
+  offline () {},
+  error () {}
+})

apps/ops/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useAuthStore } from 'src/stores/auth'
+
+const auth = useAuthStore()
+onMounted(() => auth.checkSession())
+</script>

apps/ops/src/api/address.js

@@ -0,0 +1,29 @@
+/**
+ * API Conformité des adresses — appelle targo-hub /address/conformity/*.
+ * Source de vérité : Service Location (lien AQ local rqa_addresses). Voir services/targo-hub/lib/address-conformity.js.
+ */
+import { HUB_URL as HUB } from 'src/config/hub'
+
+async function jget (path) {
+  const r = await fetch(HUB + path)
+  if (!r.ok) throw new Error('Address API ' + r.status)
+  return r.json()
+}
+async function jpost (path, body) {
+  const r = await fetch(HUB + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body || {}) })
+  if (!r.ok) throw new Error('Address API ' + r.status)
+  return r.json()
+}
+
+export const conformityStats = () => jget('/address/conformity/stats')
+export const conformityList = (p) => jget('/address/conformity/list?' + new URLSearchParams(p).toString())
+export const conformityCandidates = (q) => jget('/address/conformity/candidates?q=' + encodeURIComponent(q))
+// action: approve | correct | gps | reject (+ aq_address_id/linked_address/latitude/longitude selon l'action)
+export const conformityResolve = (body) => jpost('/address/conformity/resolve', body)
+
+// ── Registre des campings (géoloc de remplacement fixe par camping) ──
+export const campingsList = () => jget('/address/conformity/campings')
+export const campingsUpsert = (body) => jpost('/address/conformity/campings', body) // {keyword,name,address,latitude,longitude}
+export const campingsApply = () => jpost('/address/conformity/campings/apply', {})
+// Dernier repli : placer les unmatched restants au centre du code postal (sinon ville) → statut 'area'
+export const conformityApplyArea = () => jpost('/address/conformity/apply-area', {})

apps/ops/src/api/auth.js

@@ -0,0 +1,68 @@
+import { BASE_URL } from 'src/config/erpnext'
+
+// Token is optional — in production, nginx injects it server-side.
+// Only needed for local dev (VITE_ERP_TOKEN in .env).
+const SERVICE_TOKEN = import.meta.env.VITE_ERP_TOKEN || ''
+
+// Reconnexion auto sur session Authentik expirée, anti-boucle (1 reload / 20 s max).
+let _lastReload = 0
+function _reauth (status) {
+  const now = Date.now()
+  if (now - _lastReload > 20000) {
+    _lastReload = now
+    window.location.reload()
+  }
+  return new Response('{}', { status: status || 401 })
+}
+
+export async function authFetch (url, opts = {}) {
+  opts.headers = SERVICE_TOKEN
+    ? { ...opts.headers, Authorization: 'token ' + SERVICE_TOKEN }
+    : { ...opts.headers }
+
+  let res
+  try {
+    res = await fetch(url, opts)
+  } catch (e) {
+    // Coupure réseau transitoire (ex: backend qui redémarre) → 1 retry court avant d'abandonner
+    await new Promise(r => setTimeout(r, 800))
+    res = await fetch(url, opts)
+  }
+
+  // Détection « session Authentik expirée » (la cause du "il faut recharger") :
+  //  - 401/403 explicites
+  //  - réponse redirigée vers l'IdP (auth.targo.ca / /if/flow/)
+  //  - page HTML de login renvoyée à la place du JSON attendu sur un /api/
+  const ct = (res.headers && res.headers.get && res.headers.get('content-type')) || ''
+  const redirectedToIdp = res.redirected && /auth\.targo\.ca|\/if\/flow\//.test(res.url || '')
+  const htmlForApi = res.status === 200 && ct.includes('text/html') && /\/api\//.test(String(url))
+  if (res.status === 401 || res.status === 403 || redirectedToIdp || htmlForApi) {
+    return _reauth(res.status)
+  }
+  return res
+}
+
+export async function getLoggedUser () {
+  // First try nginx whoami endpoint (returns Authentik email header)
+  try {
+    const res = await fetch(BASE_URL + '/auth/whoami')
+    if (res.ok) {
+      const data = await res.json()
+      if (data.email && data.email !== '') return data.email
+    }
+  } catch {}
+  // Fallback: ask ERPNext (returns API token owner, usually "Administrator")
+  try {
+    const headers = SERVICE_TOKEN ? { Authorization: 'token ' + SERVICE_TOKEN } : {}
+    const res = await fetch(BASE_URL + '/api/method/frappe.auth.get_logged_user', { headers })
+    if (res.ok) {
+      const data = await res.json()
+      return data.message || 'authenticated'
+    }
+  } catch {}
+  return 'authenticated'
+}
+
+export async function logout () {
+  window.location.href = 'https://auth.targo.ca/if/flow/default-invalidation-flow/'
+}

apps/ops/src/api/campaigns.js

@@ -0,0 +1,211 @@
+/**
+ * api/campaigns.js — Client for Hub /campaigns endpoints.
+ *
+ * Mirrors services/targo-hub/lib/campaigns.js. All gift-campaign requests
+ * go through the Hub which handles ERPNext auth + Mailjet send + SSE
+ * progress broadcast.
+ *
+ * Functions:
+ *   parseCsvs({ map_csv, giftbit_csv, multi })   → preview matched send list
+ *   createCampaign({ name, params, recipients }) → save + return id
+ *   listCampaigns()                              → summaries
+ *   getCampaign(id)                              → full detail
+ *   updateCampaign(id, patch)                    → edit recipients/params
+ *   sendCampaign(id)                             → fire background worker
+ *   campaignSseUrl(id)                           → SSE URL for live updates
+ */
+
+import { HUB_URL } from 'src/config/hub'
+
+async function hubFetch (path, { method = 'GET', body } = {}) {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } }
+  if (body) opts.body = JSON.stringify(body)
+  const res = await fetch(`${HUB_URL}${path}`, opts)
+  const text = await res.text()
+  let data
+  try { data = text ? JSON.parse(text) : {} }
+  catch { throw new Error(`Invalid JSON from ${path}: ${text.slice(0, 200)}`) }
+  if (!res.ok) {
+    const msg = data.error || `HTTP ${res.status}`
+    const err = new Error(msg)
+    err.status = res.status
+    throw err
+  }
+  return data
+}
+
+export function parseCsvs ({ map_csv, giftbit_csv, multi = 'first' }) {
+  return hubFetch('/campaigns/parse', {
+    method: 'POST',
+    body: { map_csv, giftbit_csv, multi },
+  })
+}
+
+export function createCampaign ({ name, params, recipients }) {
+  return hubFetch('/campaigns', {
+    method: 'POST',
+    body: { name, params, recipients },
+  })
+}
+
+export function listCampaigns () {
+  return hubFetch('/campaigns').then(r => r.campaigns || [])
+}
+
+export function getCampaign (id) {
+  return hubFetch(`/campaigns/${encodeURIComponent(id)}`)
+}
+
+export function updateCampaign (id, patch) {
+  return hubFetch(`/campaigns/${encodeURIComponent(id)}`, {
+    method: 'PATCH',
+    body: patch,
+  })
+}
+
+export function sendCampaign (id) {
+  return hubFetch(`/campaigns/${encodeURIComponent(id)}/send`, {
+    method: 'POST',
+  })
+}
+
+// Permanent deletion — removes the JSON on the hub. Used for clearing
+// test campaigns from the list. Giftbit shortlinks are unaffected.
+export function deleteCampaign (id) {
+  return hubFetch(`/campaigns/${encodeURIComponent(id)}`, {
+    method: 'DELETE',
+  })
+}
+
+// Inventory of every wrapper token across all campaigns, with status
+// (active / expired / revoked / redeemed / pending). Used by the
+// gifts inventory page to surface reassignable Giftbit shortlinks.
+export function listGifts () {
+  return hubFetch('/campaigns/gifts').then(r => r.gifts || [])
+}
+
+// Kill switch — manually expire a single recipient's wrapper token so
+// the underlying Giftbit URL becomes reassignable before the natural
+// expiry date.
+export function revokeGift (campaignId, rowIndex) {
+  return hubFetch(
+    `/campaigns/${encodeURIComponent(campaignId)}/recipients/${rowIndex}/revoke`,
+    { method: 'POST' },
+  )
+}
+
+// Re-attempt a single failed recipient — resets status pending and
+// fires the worker. Used for one-off failures the auto-retry didn't
+// recover (rare transient Mailjet socket closes, etc.).
+export function retryRecipient (campaignId, rowIndex) {
+  return hubFetch(
+    `/campaigns/${encodeURIComponent(campaignId)}/recipients/${rowIndex}/retry`,
+    { method: 'POST' },
+  )
+}
+
+// Create a brand-new draft campaign targeted at the parent's non-clicked
+// recipients. Uses gift-email-reminder-* templates + an urgency subject.
+// The new campaign is returned but NOT auto-sent — the operator reviews
+// and clicks Lancer l'envoi when ready.
+export function createReminderCampaign (parentCampaignId) {
+  return hubFetch(
+    `/campaigns/${encodeURIComponent(parentCampaignId)}/reminder`,
+    { method: 'POST' },
+  )
+}
+
+// Build the URL the browser hits to download the per-recipient CSV report
+// (giftbit shortlink ↔ email ↔ name ↔ status). The hub serves it with the
+// proper Content-Disposition so an <a download> click triggers a save.
+export function campaignReportCsvUrl (id) {
+  return `${HUB_URL}/campaigns/${encodeURIComponent(id)}/report.csv`
+}
+
+// ── Image assets (self-hosted on the hub, for GrapesJS asset manager) ───────
+
+export function listAssets () {
+  return hubFetch('/campaigns/assets').then(r => r.assets || [])
+}
+
+// Upload a File / Blob from the browser via base64-encoded JSON. Bypasses
+// multipart parsing on the hub side (zero new deps) at the cost of ~33%
+// payload overhead. Acceptable for the ≤5 MB images we permit.
+export async function uploadAsset (file) {
+  const dataUrl = await new Promise((resolve, reject) => {
+    const r = new FileReader()
+    r.onload = () => resolve(r.result)
+    r.onerror = () => reject(new Error('FileReader failed'))
+    r.readAsDataURL(file)
+  })
+  return hubFetch('/campaigns/assets/upload', {
+    method: 'POST',
+    body: { name: file.name, data: dataUrl },
+  })
+}
+
+export function deleteAsset (filename) {
+  return hubFetch(`/campaigns/assets/${encodeURIComponent(filename)}`, {
+    method: 'DELETE',
+  })
+}
+
+// ── Template editing (used by the GrapesJS editor page) ─────────────────────
+
+export function listTemplates () {
+  return hubFetch('/campaigns/templates').then(r => r.templates || [])
+}
+
+export function getTemplate (name) {
+  return hubFetch(`/campaigns/templates/${encodeURIComponent(name)}`)
+}
+
+// saveTemplate(name, content, opts) — content is HTML by default.
+// Optional opts.design = Unlayer design JSON (persisted alongside HTML so the
+// editor can re-load the visual state on next open).
+// Legacy opts.format = 'mjml' still supported for older callers (sends mjml).
+export function saveTemplate (name, content, { format = 'html', design = null } = {}) {
+  const body = format === 'mjml' ? { mjml: content } : { html: content }
+  if (design) body.design = design
+  return hubFetch(`/campaigns/templates/${encodeURIComponent(name)}`, {
+    method: 'PUT',
+    body,
+  })
+}
+
+export function previewTemplate (name, { html, vars } = {}) {
+  return hubFetch(`/campaigns/templates/${encodeURIComponent(name)}/preview`, {
+    method: 'POST',
+    body: { html, vars },
+  })
+}
+
+// Translate the source template to a target language via Gemini.
+// targetName must match the source's prefix (e.g. gift-email-fr → gift-email-en).
+// override=true required if the target already exists.
+export function translateTemplate (srcName, targetName, { override = false } = {}) {
+  return hubFetch(
+    `/campaigns/templates/${encodeURIComponent(srcName)}/translate-to/${encodeURIComponent(targetName)}`,
+    { method: 'POST', body: { override } },
+  )
+}
+
+// Send ONE rendered email to a specific address for visual QA.
+// Pass { to, vars, from?, subject? } — defaults filled in server-side.
+export function testSendTemplate (name, { to, vars, from, subject } = {}) {
+  return hubFetch(`/campaigns/templates/${encodeURIComponent(name)}/test-send`, {
+    method: 'POST',
+    body: { to, vars, from, subject },
+  })
+}
+
+/**
+ * Returns the URL for the SSE channel of one campaign. The Hub broadcasts on
+ * topic `campaign:<id>` so we subscribe to that single topic. Use with:
+ *   const es = new EventSource(campaignSseUrl(id))
+ *   es.addEventListener('recipient-update', ev => { ... })
+ *   es.addEventListener('campaign-done',    ev => { ... })
+ */
+export function campaignSseUrl (id) {
+  return `${HUB_URL}/sse?topics=campaign:${encodeURIComponent(id)}`
+}

apps/ops/src/api/dispatch.js

@@ -0,0 +1,171 @@
+// ── ERPNext Dispatch resource calls ─────────────────────────────────────────
+// All ERPNext fetch() calls live here.
+// Swap BASE_URL in config/erpnext.js to change the target server.
+// ─────────────────────────────────────────────────────────────────────────────
+import { BASE_URL } from 'src/config/erpnext'
+import { authFetch } from './auth'
+
+async function apiGet (path) {
+  const res = await authFetch(BASE_URL + path)
+  const data = await res.json()
+  if (data.exc) {
+    console.error('[apiGet] ERPNext error:', path.slice(0, 120), data.exc.slice ? data.exc.slice(0, 200) : data.exc)
+    throw new Error(data.exc)
+  }
+  return data
+}
+
+async function apiPut (doctype, name, body) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/${encodeURIComponent(doctype)}/${encodeURIComponent(name)}`,
+    {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    },
+  )
+  const text = await res.text()
+  if (!res.ok) console.error(`[API] PUT ${doctype}/${name} failed:`, res.status, text)
+  let data
+  try { data = JSON.parse(text) } catch { throw new Error(`PUT ${doctype}/${name}: invalid JSON — ${text.slice(0, 200)}`) }
+  if (data.exc) throw new Error(data.exc)
+  return data
+}
+
+// Single-call fetch with all fields + child tables
+async function listDocs (doctype, fields = '["*"]', filters = null, limit = 200) {
+  let url = `/api/resource/${encodeURIComponent(doctype)}?fields=${fields}&limit_page_length=${limit}`
+  if (filters) url += '&filters=' + encodeURIComponent(JSON.stringify(filters))
+  const data = await apiGet(url)
+  return data.data || []
+}
+
+// Fetch single doc (needed for child tables not returned by list)
+async function fetchDoc (doctype, name) {
+  return (await apiGet(`/api/resource/${encodeURIComponent(doctype)}/${encodeURIComponent(name)}`)).data
+}
+
+export async function fetchTechnicians () {
+  // Fast: single list call (no child tables = no tags)
+  const techs = await listDocs('Dispatch Technician', '["*"]', null, 100)
+  return techs  // tags loaded lazily via loadTechTags()
+}
+
+// Background: fetch individual docs to get child tables (tags)
+export async function loadTechTags (techNames) {
+  const results = await Promise.all(techNames.map(n => fetchDoc('Dispatch Technician', n).catch(() => null)))
+  return results.filter(Boolean)
+}
+
+// Fast: single list call, no child tables (assistants/tags come empty)
+export async function fetchJobsFast (filters = null) {
+  return listDocs('Dispatch Job', '["*"]', filters, 500)
+}
+
+// Full: adds child tables (assistants, tags) — use only for jobs that need them
+export async function fetchJobFull (name) {
+  return fetchDoc('Dispatch Job', name)
+}
+
+// Legacy: fetches all with child tables (slow — avoid)
+export async function fetchJobs (filters = null) {
+  return fetchJobsFast(filters)
+}
+
+export async function updateJob (name, payload) {
+  return apiPut('Dispatch Job', name, payload)
+}
+
+export async function createJob (payload) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Job`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function publishJobs (jobNames) {
+  const results = await Promise.allSettled(
+    jobNames.map(name => apiPut('Dispatch Job', name, { published: 1 }))
+  )
+  const failed = results.filter(r => r.status === 'rejected')
+  if (failed.length) console.warn(`[publishJobs] ${failed.length}/${jobNames.length} failed`)
+  return { published: jobNames.length - failed.length, failed: failed.length }
+}
+
+export async function updateTech (name, payload) {
+  return apiPut('Dispatch Technician', name, payload)
+}
+
+export async function createTech (payload) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Technician`,
+    { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function deleteTech (name) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Technician/${encodeURIComponent(name)}`,
+    { method: 'DELETE' },
+  )
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    const msg = data._server_messages ? JSON.parse(JSON.parse(data._server_messages)[0]).message : data.exception || 'Delete failed'
+    throw new Error(msg)
+  }
+}
+
+export async function fetchTags () {
+  const data = await apiGet('/api/resource/Dispatch%20Tag?fields=["name","label","color","category"]&limit=200')
+  return data.data || []
+}
+
+export async function createTag (label, category = 'Custom', color = '#6b7280') {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Tag`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ label, category, color }),
+    },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function updateTag (name, payload) {
+  return apiPut('Dispatch Tag', name, payload)
+}
+
+export async function renameTag (oldName, newName) {
+  const res = await authFetch(
+    `${BASE_URL}/api/method/frappe.client.rename_doc`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ doctype: 'Dispatch Tag', old_name: oldName, new_name: newName }),
+    },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.message // returns new name
+}
+
+export async function deleteTag (name) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Tag/${encodeURIComponent(name)}`,
+    { method: 'DELETE' },
+  )
+  if (!res.ok) throw new Error('Delete tag failed')
+}

apps/ops/src/api/emailQueue.js

@@ -0,0 +1,28 @@
+/**
+ * Email Queue admin API — calls targo-hub /email-queue/* (proxies ERPNext).
+ * Lets ops see + delete outbound emails sitting in ERPNext's queue.
+ */
+import { HUB_URL as HUB } from 'src/config/hub'
+
+export async function listEmailQueue (status = '') {
+  const qs = status ? `?status=${encodeURIComponent(status)}` : ''
+  const r = await fetch(HUB + '/email-queue' + qs)
+  if (!r.ok) throw new Error('Email queue API: ' + r.status)
+  return r.json()
+}
+
+export async function deleteEmailQueueItem (name) {
+  const r = await fetch(HUB + '/email-queue/' + encodeURIComponent(name), { method: 'DELETE' })
+  if (!r.ok) throw new Error('Suppression échouée: ' + r.status)
+  return r.json()
+}
+
+export async function purgeEmailQueue (status = 'Not Sent') {
+  const r = await fetch(HUB + '/email-queue/purge', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ status }),
+  })
+  if (!r.ok) throw new Error('Purge échouée: ' + r.status)
+  return r.json()
+}

apps/ops/src/api/erp.js

@@ -0,0 +1,97 @@
+// Unified ERPNext API helper for all modules
+import { BASE_URL } from 'src/config/erpnext'
+import { authFetch } from './auth'
+
+// List documents with filters, fields, pagination
+export async function listDocs (doctype, { filters = {}, or_filters, fields = ['name'], limit = 20, offset = 0, orderBy = 'creation desc' } = {}) {
+  const params = new URLSearchParams({
+    fields: JSON.stringify(fields),
+    filters: JSON.stringify(filters),
+    limit_page_length: limit,
+    limit_start: offset,
+    order_by: orderBy,
+  })
+  if (or_filters) params.set('or_filters', JSON.stringify(or_filters))
+  const res = await authFetch(BASE_URL + '/api/resource/' + encodeURIComponent(doctype) + '?' + params)
+  if (!res.ok) throw new Error('API error: ' + res.status)
+  const data = await res.json()
+  return data.data || []
+}
+
+// Get single document
+export async function getDoc (doctype, name) {
+  const res = await authFetch(BASE_URL + '/api/resource/' + encodeURIComponent(doctype) + '/' + encodeURIComponent(name))
+  if (!res.ok) throw new Error('Not found: ' + name)
+  const data = await res.json()
+  return data.data
+}
+
+// Search (for autocomplete / search bars)
+export async function searchDocs (doctype, text, { filters = {}, fields = ['name'], limit = 20 } = {}) {
+  const params = new URLSearchParams({
+    doctype,
+    txt: text,
+    filters: JSON.stringify(filters),
+    limit_page_length: limit,
+  })
+  const res = await authFetch(BASE_URL + '/api/method/frappe.client.get_list?' + params)
+  if (!res.ok) return []
+  const data = await res.json()
+  return data.message || []
+}
+
+// Create a new document
+export async function createDoc (doctype, data) {
+  const res = await authFetch(BASE_URL + '/api/resource/' + encodeURIComponent(doctype), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+  const json = await res.json()
+  if (!res.ok) {
+    const msg = json?.exception?.split('\n')[0] || json?.message || ('Create failed: ' + res.status)
+    throw new Error(msg)
+  }
+  return json.data
+}
+
+// Update a document (partial update)
+export async function updateDoc (doctype, name, data) {
+  const url = BASE_URL + '/api/resource/' + encodeURIComponent(doctype) + '/' + encodeURIComponent(name)
+  const res = await authFetch(url, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+  if (!res.ok) throw new Error('Update failed: ' + res.status)
+  const json = await res.json()
+  return json.data
+}
+
+// Delete a document
+export async function deleteDoc (doctype, name) {
+  const url = BASE_URL + '/api/resource/' + encodeURIComponent(doctype) + '/' + encodeURIComponent(name)
+  const res = await authFetch(url, { method: 'DELETE' })
+  if (!res.ok) {
+    let msg = 'Delete failed: ' + res.status
+    try {
+      const json = await res.json()
+      msg = json?.exception?.split('\n')[0] || json?._server_messages || json?.message || msg
+    } catch (_) {}
+    throw new Error(msg)
+  }
+  return true
+}
+
+// Count documents
+export async function countDocs (doctype, filters = {}, or_filters) {
+  const params = new URLSearchParams({
+    doctype,
+    filters: JSON.stringify(filters),
+  })
+  if (or_filters) params.set('or_filters', JSON.stringify(or_filters))
+  const res = await authFetch(BASE_URL + '/api/method/frappe.client.get_count?' + params)
+  if (!res.ok) return 0
+  const data = await res.json()
+  return data.message || 0
+}

apps/ops/src/api/flow-templates.js

@@ -0,0 +1,104 @@
+/**
+ * api/flow-templates.js — Client for the Hub /flow/templates CRUD endpoints.
+ *
+ * Mirrors services/targo-hub/lib/flow-templates.js. All requests go through
+ * the Hub (which handles ERPNext auth server-side).
+ *
+ * Functions:
+ *   listFlowTemplates({ category?, applies_to?, trigger_event?, is_active?, q? })
+ *   getFlowTemplate(name)
+ *   createFlowTemplate(body)
+ *   updateFlowTemplate(name, patch)
+ *   deleteFlowTemplate(name)
+ *   duplicateFlowTemplate(name, newName?)
+ *
+ * All functions return the parsed JSON body or throw on network / 4xx / 5xx.
+ */
+
+import { HUB_URL } from 'src/config/hub'
+
+/** Fetch helper with error normalization. */
+async function hubFetch (path, { method = 'GET', body } = {}) {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } }
+  if (body) opts.body = JSON.stringify(body)
+  const res = await fetch(`${HUB_URL}${path}`, opts)
+  const text = await res.text()
+  let data
+  try { data = text ? JSON.parse(text) : {} }
+  catch { throw new Error(`Invalid JSON from ${path}: ${text.slice(0, 200)}`) }
+  if (!res.ok) {
+    const msg = data.error || `HTTP ${res.status}`
+    const err = new Error(msg)
+    err.status = res.status
+    err.detail = data.detail
+    throw err
+  }
+  return data
+}
+
+/**
+ * List flow templates with optional filters.
+ * @param {Object} filters { category, applies_to, trigger_event, is_active, q, limit }
+ * @returns {Promise<Array>} list of templates (without flow_definition body)
+ */
+export async function listFlowTemplates (filters = {}) {
+  const qs = new URLSearchParams()
+  for (const [k, v] of Object.entries(filters)) {
+    if (v !== undefined && v !== null && v !== '') qs.set(k, String(v))
+  }
+  const path = `/flow/templates${qs.toString() ? '?' + qs.toString() : ''}`
+  const data = await hubFetch(path)
+  return data.templates || []
+}
+
+/**
+ * Fetch a single template with its parsed flow_definition.
+ * @param {string} name  FT-00001 etc.
+ */
+export async function getFlowTemplate (name) {
+  const data = await hubFetch(`/flow/templates/${encodeURIComponent(name)}`)
+  return data.template
+}
+
+/**
+ * Create a new (user) template. is_system is forced to 0 by the API.
+ * @param {Object} body  { template_name, category, applies_to, flow_definition, ... }
+ */
+export async function createFlowTemplate (body) {
+  const data = await hubFetch('/flow/templates', { method: 'POST', body })
+  return data.template
+}
+
+/**
+ * Patch an existing template. Version is auto-bumped by the API.
+ * @param {string} name
+ * @param {Object} patch  subset of fields
+ */
+export async function updateFlowTemplate (name, patch) {
+  const data = await hubFetch(`/flow/templates/${encodeURIComponent(name)}`, {
+    method: 'PUT', body: patch,
+  })
+  return data.template
+}
+
+/**
+ * Delete a template. Blocked server-side if is_system=1.
+ * @param {string} name
+ */
+export async function deleteFlowTemplate (name) {
+  await hubFetch(`/flow/templates/${encodeURIComponent(name)}`, { method: 'DELETE' })
+}
+
+/**
+ * Duplicate a template (e.g. to customize a system template).
+ * Creates an inactive copy (is_active=0) for user to review before enabling.
+ * @param {string} name
+ * @param {string} [newName]  optional override (defaults to "<name> (copie)")
+ */
+export async function duplicateFlowTemplate (name, newName) {
+  const body = newName ? { template_name: newName } : {}
+  const data = await hubFetch(`/flow/templates/${encodeURIComponent(name)}/duplicate`, {
+    method: 'POST', body,
+  })
+  return data.template
+}

apps/ops/src/api/ocr.js

@@ -0,0 +1,104 @@
+/**
+ * OCR / Vision client — all calls go through targo-hub, which runs Gemini
+ * 2.5 Flash. We deliberately do NOT call Ollama from the ops SPA because the
+ * ops/ERPNext VM has no GPU; invoice OCR used to hit a local Ollama vision
+ * model (llama3.2-vision), but that's now centralized in the hub so every
+ * app (ops, field-as-ops `/j`, future client portal) gets the same model,
+ * same prompt, same normalization.
+ *
+ * Endpoints used:
+ *   POST {HUB_URL}/vision/barcodes   → { barcodes: string[] }
+ *   POST {HUB_URL}/vision/equipment  → { brand, model, serial_number, mac_address, gpon_sn, hw_version, equipment_type, barcodes }
+ *   POST {HUB_URL}/vision/invoice    → { vendor, vendor_address, invoice_number, date, due_date, subtotal, tax_gst, tax_qst, total, currency, items[], notes }
+ *
+ * All three are public (no Authentik header) — the hub rate-limits and logs.
+ */
+
+import { HUB_URL } from 'src/config/hub'
+
+const VISION_BARCODES = `${HUB_URL}/vision/barcodes`
+const VISION_EQUIPMENT = `${HUB_URL}/vision/equipment`
+const VISION_INVOICE = `${HUB_URL}/vision/invoice`
+
+/** Strip any `data:image/...;base64,` prefix — hub accepts either form but
+ *  we normalize here so error messages + logs stay consistent. */
+function stripDataUri (base64Image) {
+  return String(base64Image || '').replace(/^data:image\/[^;]+;base64,/, '')
+}
+
+/**
+ * Send a photo to Gemini (via hub) for bill/invoice OCR.
+ * @param {string} base64Image — base64 or data URI
+ * @returns {Promise<object>} Parsed invoice data (schema in targo-hub/lib/vision.js)
+ * @throws {Error} on network/API failure — caller decides whether to retry
+ */
+export async function ocrBill (base64Image) {
+  const res = await fetch(VISION_INVOICE, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ image: stripDataUri(base64Image) }),
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error('Invoice OCR failed: ' + (text || res.status))
+  }
+  return res.json()
+}
+
+/**
+ * Send a photo to Gemini (via hub) for generic barcode / serial extraction.
+ * @param {string} base64Image — base64 or data URI
+ * @returns {Promise<{ barcodes: string[] }>}
+ * @throws {Error} on network/API failure — `useScanner` uses this signature
+ *   to decide whether to queue the photo for retry (see isRetryable()).
+ */
+export async function scanBarcodes (base64Image) {
+  const res = await fetch(VISION_BARCODES, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ image: base64Image }),
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error('Vision scan failed: ' + (text || res.status))
+  }
+  const data = await res.json()
+  return { barcodes: data.barcodes || [] }
+}
+
+/**
+ * Structured equipment label scan — richer schema than scanBarcodes for
+ * ONT/ONU/router labels. Unique to ops (was not in the old field client).
+ * @param {string} base64Image — base64 or data URI
+ * @returns {Promise<object>} See EQUIP_SCHEMA in targo-hub/lib/vision.js
+ */
+export async function scanEquipmentLabel (base64Image) {
+  const res = await fetch(VISION_EQUIPMENT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ image: base64Image }),
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error('Equipment scan failed: ' + (text || res.status))
+  }
+  return res.json()
+}
+
+/**
+ * Vision service health probe.
+ *
+ * Historically this pinged `/ollama/api/tags` to confirm the local vision
+ * model was warm. Now that everything is on Gemini via the hub, we just
+ * check the hub is reachable — the hub itself validates AI_API_KEY on
+ * startup, so if it's up, Gemini works.
+ */
+export async function checkOllamaStatus () {
+  try {
+    const res = await fetch(`${HUB_URL}/health`, { method: 'GET' })
+    if (!res.ok) return { online: false, error: 'HTTP ' + res.status }
+    return { online: true, models: ['gemini-2.5-flash'], hasVision: true }
+  } catch (e) {
+    return { online: false, error: e.message }
+  }
+}

apps/ops/src/api/offers.js

@@ -0,0 +1,74 @@
+// ── Job Offer API — Uber-style offer/accept for dispatch jobs ────────────────
+// Offers are stored as "Dispatch Offer" docs in ERPNext.
+// Flow: dispatcher/customer creates offer → matching techs notified → tech accepts → job assigned
+// ─────────────────────────────────────────────────────────────────────────────
+import { BASE_URL } from 'src/config/erpnext'
+import { authFetch } from './auth'
+
+async function apiGet (path) {
+  const res = await authFetch(BASE_URL + path)
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data
+}
+
+async function apiPut (doctype, name, body) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/${encodeURIComponent(doctype)}/${encodeURIComponent(name)}`,
+    { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data
+}
+
+// ── CRUD ─────────────────────────────────────────────────────────────────────
+
+export async function fetchOffers (filters = null) {
+  let url = '/api/resource/Dispatch%20Offer?fields=["*"]&limit_page_length=200&order_by=creation+desc'
+  if (filters) url += '&filters=' + encodeURIComponent(JSON.stringify(filters))
+  const data = await apiGet(url)
+  return data.data || []
+}
+
+export async function fetchActiveOffers () {
+  return fetchOffers([['status', 'in', ['open', 'pending']]])
+}
+
+export async function createOffer (payload) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Offer`,
+    { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function updateOffer (name, payload) {
+  return apiPut('Dispatch Offer', name, payload)
+}
+
+// ── Offer actions ────────────────────────────────────────────────────────────
+
+export async function acceptOffer (offerName, techId) {
+  return updateOffer(offerName, { status: 'accepted', accepted_by: techId, accepted_at: new Date().toISOString() })
+}
+
+export async function declineOffer (offerName, techId, reason = '') {
+  // Record decline — we don't close the offer, just track who declined
+  return updateOffer(offerName, {
+    declined_techs: JSON.stringify([
+      ...JSON.parse((await apiGet(`/api/resource/Dispatch%20Offer/${offerName}`)).data?.declined_techs || '[]'),
+      { techId, reason, at: new Date().toISOString() },
+    ]),
+  })
+}
+
+export async function cancelOffer (offerName) {
+  return updateOffer(offerName, { status: 'cancelled' })
+}
+
+export async function expireOffer (offerName) {
+  return updateOffer(offerName, { status: 'expired' })
+}

apps/ops/src/api/presets.js

@@ -0,0 +1,46 @@
+// ── Dispatch Preset CRUD — shared resource group presets ─────────────────────
+import { BASE_URL } from 'src/config/erpnext'
+import { authFetch } from './auth'
+
+async function apiGet (path) {
+  const res = await authFetch(BASE_URL + path)
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data
+}
+
+export async function fetchPresets () {
+  const data = await apiGet('/api/resource/Dispatch%20Preset?fields=["*"]&limit_page_length=100&order_by=creation+asc')
+  return data.data || []
+}
+
+export async function createPreset (payload) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Preset`,
+    { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function updatePreset (name, payload) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Preset/${encodeURIComponent(name)}`,
+    { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) },
+  )
+  const data = await res.json()
+  if (data.exc) throw new Error(data.exc)
+  return data.data
+}
+
+export async function deletePreset (name) {
+  const res = await authFetch(
+    `${BASE_URL}/api/resource/Dispatch%20Preset/${encodeURIComponent(name)}`,
+    { method: 'DELETE' },
+  )
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw new Error(data.exception || 'Delete failed')
+  }
+}