Retours & statut

Suivi de dossier

تتبع الملفDossier tracker

Bêtasrc/dsm/components/dossier-tracker.tsx
La carte de suivi d'une demande administrative : référence copiable, statut dans un vocabulaire commun (déposé, en instruction, action requise, accepté, refusé, prêt), progression dans les étapes, délai estimé et prochaine action pour l'usager.

Import

import { DossierTracker } from "@/dsm/components/dossier-tracker";

Exemples

En cours d'instruction

Le cas courant : quelques étapes franchies, un délai estimé.

LTR

Référence2026-114872

Renouvellement de passeport biométrique

En cours d'instruction
Déposé le
2 septembre 2026
Mis à jour le
9 septembre 2026
Délai estimé
sous 8 jours ouvrés

  1. Demande déposée — Terminée

    2 sept.

    Formulaire et pièces reçus par la préfecture de Rabat.

  2. Pièces vérifiées — Terminée

    4 sept.

  3. Instruction par la préfecture — En cours

    Vérification d'identité et de l'ancien titre.

  4. Fabrication du passeport — À venir

  5. Retrait au guichet — À venir

Une question ? Appelez le 05 37 00 00 00, du lundi au vendredi de 8h30 à 16h30.

Action requise

Une pièce manque : l'étape est bloquée et la prochaine action est mise en avant.

LTR

Référence2026-118204

Demande d'extrait d'acte de naissance

Action requise
Déposé le
11 septembre 2026
Mis à jour le
12 septembre 2026

  1. Demande déposée — Terminée

    11 sept.

  2. Pièces vérifiées — En cours

    La copie de la CNIE est illisible : le recto doit être entièrement visible.

  3. Signature électronique de l'officier d'état civil — À venir

  4. Extrait disponible — À venir

Prochaine étape pour vous

Ajoutez une photo nette du recto de votre CNIE (PDF, JPG ou PNG, 5 Mo max). Le dossier reprendra automatiquement.

Déposer une nouvelle copie

Prêt

Toutes les étapes sont franchies ; l'action est le retrait ou le téléchargement.

LTR

Référence2026-109331

Attestation de régularité fiscale

Prêt
Déposé le
1er septembre 2026
Mis à jour le
3 septembre 2026

  1. Demande déposée — Terminée

    1er sept.

  2. Situation fiscale vérifiée — Terminée

    2 sept.

  3. Attestation signée — Terminée

    3 sept.

    Document PDF signé électroniquement, valable 3 mois.

Usage

Quand l'utiliser

  • Utilisez le suivi de dossier dès qu'un usager a déposé une demande : page « Mes démarches », e-mail de confirmation, espace personnel.
  • Renseignez `action` chaque fois qu'un statut attend quelque chose de l'usager (pièce manquante, retrait, paiement) : c'est l'information la plus utile de la carte.
  • Gardez le vocabulaire des six statuts ; il est traduit dans les quatre locales et cohérent d'un service à l'autre.

Quand ne pas l'utiliser

  • N'utilisez pas ce composant pour une chronologie éditoriale ou un historique sans statut : préférez `Timeline`.
  • N'inventez pas de statut supplémentaire (« en attente de signature ») : exprimez-le dans la description de l'étape courante.

Accessibilité & langues

Accessibilité

  • Chaque étape annonce son état (terminée, en cours, à venir) dans un texte masqué pour les lecteurs d'écran ; l'état n'est jamais porté par la couleur seule.
  • La référence est copiable par un bouton dont le libellé passe de « Copier » à « Copié » ; la référence elle-même reste sélectionnable.
  • La prochaine action est un vrai bouton ou lien, jamais une simple mention.

RTL & multilingue

  • Le fil des étapes et les marqueurs utilisent des propriétés logiques ; la référence reste en `dir="ltr"` comme sur le récépissé.
  • Les libellés de statut et de métadonnées viennent du dictionnaire (fr, ar, zgh, en).

Propriétés

DossierTracker
PropriétéTypeDéfautDescription
reference*string—Référence du dossier, affichée en monospace avec un bouton de copie.
title*ReactNode—Intitulé de la demande.
status*"submitted" | "in-review" | "action-required" | "approved" | "rejected" | "ready"—Statut courant, traduit et coloré automatiquement.
steps*{ label, date?, description? }[]—Étapes ordonnées de la procédure.
currentStep*number—Index de l'étape en cours ; `steps.length` quand tout est terminé.
submittedAt / updatedAt / expectedByReactNode—Métadonnées affichées sous le titre (le délai est masqué une fois le dossier clos).
action{ label, href?, onClick?, description? }—Prochaine action pour l'usager, dans un encadré dont le ton suit le statut.
contactReactNode—Ligne d'aide affichée sous les étapes.

Composants liés