Dashboard

@siteping/dashboard vous donne une interface de tri complète : filtrer, rechercher, changer les statuts, supprimer, annuler — pensée pour le clavier, stylée pour se fondre dans votre app.

npm i @siteping/dashboard

import { SitepingInbox } from "@siteping/dashboard";

export function Triage() {
  return (
    <SitepingInbox
      projects="mon-projet"
      endpoint="https://mon-site.com/api/siteping"
      apiKey={process.env.NEXT_PUBLIC_SITEPING_KEY}
      theme="auto"
    />
  );
}

Compatible React 18 et 19, livré en ESM et CJS, sans aucune dépendance en dehors de React. Donnez-lui un conteneur avec une hauteur — l'inbox remplit son parent (minimum 480 px).

Props

SitepingInbox accepte toutes les options de useSitepingInbox plus ces props de présentation :

Clavier

Donnez le focus à la liste une fois, puis :

Les raccourcis exigent le focus à l'intérieur du composant (ils sont liés à lui, pas à document) et ne se déclenchent jamais pendant que vous tapez dans un champ — sauf Échap.

Statuts et actions

Quatre statuts : open, in_progress, resolved, wont_fix. Le dashboard peut les définir tous (les actions du widget, elles, restent binaires : résoudre/rouvrir). Clore un feedback (resolved ou wont_fix) horodate resolvedAt ; le rouvrir l'efface. Les changements de statut sont optimistes avec annulation ; la suppression est définitive — elle passe par une confirmation en ligne et n'a pas d'annulation.

Fils de discussion

Le tiroir montre le fil du feedback ouvert — les réponses du relecteur depuis le widget, celles de votre équipe depuis ici. Passez author pour répondre et supprimer depuis l'inbox :

<SitepingInbox projects="my-project" endpoint="/api/siteping" apiKey={KEY} author={{ name: "Alex" }} />

Sans author, les fils sont en lecture seule. Les réponses demandent le rôle team, que votre serveur n'accorde qu'aux appelants de confiance — les détails sont dans Fils de discussion.

Lecture seule et permissions

readOnly masque les changements de statut et les suppressions, des feedbacks comme des réponses — pour une personne qui suit l'inbox, et répond quand author est défini :

<SitepingInbox projects="my-project" endpoint="/api/siteping" readOnly />

L'inbox suit aussi ce que le serveur permet à chaque appelant sur chaque feedback — ses permissions. Le tiroir affiche le statut en texte quand il ne peut pas changer et retire la suppression quand le feedback ne peut pas être supprimé, e / p / x passent un tel feedback, et les aides retirent les touches de statut quand aucun feedback listé ne permet de changement. Elle ne fait que masquer : c'est le serveur qui décide de ce qu'il accepte.

Langues

Les mêmes locales intégrées que le widget (en, fr, de, es, it, pt, ru, ja, ko), l'anglais embarqué, le reste chargé à la demande, les étiquettes BCP-47 normalisées (fr-CA → fr), tout comme celles au format backend (fr_FR → fr).

Le dashboard accepte aussi des locales personnalisées à l'exécution :

import { registerLocale } from "@siteping/dashboard";

registerLocale("nl", { "status.open": "Open", "status.resolved": "Opgelost" });
// plus tard : <SitepingInbox locale="nl" ... />

Les dictionnaires partiels sont acceptés — toute clé omise retombe d'elle-même sur l'anglais, donc corriger un seul libellé n'oblige pas à maintenir tout le catalogue. Deux règles que l'implémentation impose : enregistrez sous le code de langue de base ("nl", pas "nl-BE" — les recherches se normalisent vers la base), et appelez registerLocale avant le montage de l'inbox. Le registerLocale du widget fonctionne de la même façon sur son propre jeu de clés.