Project

General

Profile

Actions

Feature #1143

open
RA

Feature #1133: Implémenter une page de profil utilisateur avec gestion des crédits et des tiers d'abonnement

Frontend — Page de profil client (infos, jauge crédits, tier, upgrade)

Feature #1143: Frontend — Page de profil client (infos, jauge crédits, tier, upgrade)

Added by Redmine Admin about 2 months ago. Updated about 2 months ago.

Status:
QA
Priority:
Normal
Assignee:
-
Start date:
06/18/2026
Due date:
% Done:

0%

Estimated time:
spec_ref:

issue:1133 — spec in epic + ticket description

build_status:
build_number:
ci_run_url:
scan_status:
scan_report_url:
deploy_status:
preprod_url:
deployed_at:
branch:
feat/1143-profile-page
pr_url:
https://github.com/omdev-tech/PipeLiner-Client/pull/69
security_key:
severity:
paused:

Description

## Objectif
Construire la page de profil client Next.js (App Router) consommant les endpoints de lecture du backend (#1141) : infos personnelles, jauge de crédits, carte tier, bouton upgrade. Le changement de mot de passe est traité dans le ticket Fullstack dédié.

## Dépendances
Dépend des endpoints de lecture profil/crédits/tier (#1141).

## Portée
- Route App Router « Mon compte », accessible depuis le menu principal.
- Section infos personnelles (nom, email, entreprise) : email en lecture seule, autres champs modifiables (formulaire + TanStack Query mutation vers l'endpoint backend).
- Jauge de crédits (Atomic Design) à couleur adaptative : vert >50 %, orange <30 %, rouge <10 %.
- Carte du tier actuel : nom, avantages en liste à puces, couleur distinctive par niveau (Démarrage/Maintenance/Évolutions/Pilotage).
- Bouton « Demander une mise à niveau » (optionnel : mailto/redirection vers un formulaire).
- Option : historique des consommations de crédits (affichage si l'endpoint le fournit).
- i18n next-intl : ajouter les clés dans `src/i18n/messages/en.ts` ET `fr.ts` (mêmes clés/placeholders).

## Acceptance criteria
- [ ] La page « Mon compte » est accessible depuis le menu principal.
- [ ] Infos perso affichées; tous les champs modifiables sauf l'email.
- [ ] La jauge de crédits respecte les seuils de couleur (vert >50 %, orange <30 %, rouge <10 %).
- [ ] Le tier est affiché avec ses avantages (liste à puces) et une couleur distinctive.
- [ ] Le bouton « Demander une mise à niveau » est présent et fonctionnel.
- [ ] Clés i18n présentes et cohérentes dans `en.ts` et `fr.ts` (tsc vert).
- [ ] `npx vitest run && npx tsc --noEmit && npx eslint . && npm run build` verts.


Files

design-1143-before.png (168 KB) design-1143-before.png Redmine Admin, 06/18/2026 12:57 PM
design-1143-after.png (387 KB) design-1143-after.png Redmine Admin, 06/18/2026 12:57 PM
design-1143-mockup.html (13.7 KB) design-1143-mockup.html Redmine Admin, 06/18/2026 12:57 PM
design-1143-before.png
design-1143-after.png
Actions

Also available in: PDF Atom