Historique des factures

Présenter l'historique des factures sans posséder la récupération des facturesLien vers la section

InvoiceHistoryPanel présente les enregistrements de facture fournis par votre application dans une table lisible avec un état vide explicite. Votre backend de facturation reste responsable de la récupération des enregistrements, du formatage de la vérité monétaire et de l'autorisation de toute action de téléchargement ou de détail.

Identité canoniqueLien vers la section

• Catégorie : Commercelimace commerce.
• Bloquer : invoice-history, exportation InvoiceHistoryPanel.
• Source canonique : apps/marketing/content/blocks/commerce/invoice-history/.
• Compléter le point d'entrée: index.tsx.

Copier la sourceLien vers la section

Configurez le paquetage public de l'interface utilisateur et tokens, puis créer src/components/blocks/invoice-history/index.tsx dans votre application. Utilisez le bouton Copier de l'onglet Source lorsqu'il est disponible. Si l'accès au presse-papiers n'est pas disponible, sélectionnez le code manuellement.

L'onglet Aperçu rend le canonique réel InvoiceHistoryPanel avec des enregistrements fictifs et des contrôles locaux inertes. Il n'effectue aucune récupération de facture, téléchargement ou opération de réseau. L'onglet Source inclut le fichier canonique complet au moment de la construction, pas une implémentation dupliquée.

Votre application possède la source copiée et ne reçoit pas de mises à jour automatiques. Examinez délibérément les modifications futures et validez-les dans votre application avant leur adoption. Retour à l'accueil Blocage du catalogue Comparer un autre modèle.

Installer en copiant la sourceLien vers la section

1. Copier le texte complet invoice-history répertoire dans votre chemin Blocks appartenant à l'application.
2. Configurez le paquet public PyColors UI et les tokens via le Guide d'installation.
3. Fournissez des lignes de facture à partir de vos propres données de facturation et connectez toute action de ligne.
4. Exécutez lint, type-check, teste et build, puis passez en revue le débordement, les valeurs longues, les données vides, les thèmes et le comportement du clavier.

"use client";

import { InvoiceHistoryPanel } from "./blocks/invoice-history";

const invoices = [
  {
    id: "invoice-example-1",
    date: "September 1, 2026",
    amount: "$49.00",
    status: "Paid",
    action: <a href="/billing/invoices/example">View invoice</a>,
  },
] as const;

export function InvoiceHistory() {
  return (
    <InvoiceHistoryPanel
      title="Invoice history"
      description="Example records supplied by your application."
      invoices={invoices}
      emptyState="No invoices are available."
    />
  );
}

L'exemple de destination appartient à l'application. Connectez des fichiers de facture ou des enregistrements de fournisseur uniquement via un route qui revérifie l'autorisation sur le serveur.

Contrat de consommationLien vers la section

title et invoices sont nécessaires. Chaque facture a besoin d'une écurie id, affichage date et affichage amount; status et action sont facultatifs. Les étiquettes de colonne et l'état vide peuvent être remplacés par une copie spécifique au produit.

Le bloc affiche les valeurs fournies sans calculer les totaux, formater la devise, traduire les états du fournisseur ou décider si une action de facture est disponible. Gardez les ID de ligne stables et rendez les étiquettes d'action spécifiques à leur résultat.

Notes réactives et d'accessibilitéLien vers la section

Le panneau utilise une étiquette section et une table sémantique lorsque des enregistrements existent. Le tableau conserve une largeur minimale lisible à l'intérieur d'un conteneur de débordement horizontal afin que le contenu ne soit pas écrasé sur des écrans étroits. Testez la disposition contenant et assurez-vous que les utilisateurs de clavier peuvent atteindre chaque action de ligne interactive sans perdre le contexte.

Propriété et limitesLien vers la section

Votre application possède la récupération des factures, le formatage des devises, la vérité fiscale et de facturation, le stockage des documents, les URL signées, l'autorisation, l'intégration du fournisseur, les mutations et la gestion des erreurs. Le bloc n'inclut pas la génération de factures, les services de téléchargement, les API Stripe, le paiement, les webhooks, la persistance, l'authentification, l'analyse, le registre ou le comportement CLI.

Explorez le Blocage du catalogue, comparer Aperçu de la facturationou Comparer les Starters pour une fondation d'application complète.