@spaceinvoices/react-ui 0.1.1 → 0.4.0

package/src/components/documents/view/document-activities-list.tsx

@@ -0,0 +1,166 @@
+import type { GetActivities200DataItem } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { Skeleton } from "@/ui/components/ui/skeleton";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+
+const PAGE_SIZE = 5;
+
+interface DocumentActivitiesListProps extends ComponentTranslationProps {
+  documentId: string;
+  entityId: string;
+  currentUserId?: string;
+  locale?: string;
+}
+
+function formatActivityDate(date: string, locale: string): string {
+  const d = new Date(date);
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(d);
+}
+
+function getActionLabel(action: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    created: t("Created"),
+    updated: t("Updated"),
+    voided: t("Voided"),
+    sent: t("Sent"),
+    deleted: t("Deleted"),
+  };
+  return labels[action] || action;
+}
+
+function getActorLabel(activity: GetActivities200DataItem, t: (key: string) => string, currentUserId?: string): string {
+  if (currentUserId && activity.actor_id === currentUserId) return t("me");
+  if (activity.actor_label) return activity.actor_label;
+  const typeLabels: Record<string, string> = {
+    system: t("System"),
+    api_key: "API",
+    cron: t("Scheduled"),
+    webhook: "Webhook",
+  };
+  return typeLabels[activity.actor_type] || activity.actor_type;
+}
+
+export function DocumentActivitiesList({
+  documentId,
+  entityId,
+  currentUserId,
+  locale = "en",
+  ...i18nProps
+}: DocumentActivitiesListProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+  const { sdk } = useSDK();
+
+  const [cursors, setCursors] = useState<string[]>([]);
+  const currentCursor = cursors.length > 0 ? cursors[cursors.length - 1] : undefined;
+
+  const { data: activitiesData, isLoading } = useQuery({
+    queryKey: ["activities", documentId, entityId, currentCursor],
+    queryFn: async () => {
+      if (!sdk) throw new Error("SDK not initialized");
+
+      return sdk.activities.list({
+        entity_id: entityId,
+        resource_id: documentId,
+        order_by: "-created_at",
+        limit: PAGE_SIZE,
+        next_cursor: currentCursor,
+      });
+    },
+    enabled: !!sdk && !!entityId && !!documentId,
+  });
+
+  const activities = activitiesData?.data || [];
+  const pagination = activitiesData?.pagination;
+
+  const handleNextPage = () => {
+    if (pagination?.next_cursor) {
+      setCursors((prev) => [...prev, pagination.next_cursor!]);
+    }
+  };
+
+  const handlePrevPage = () => {
+    setCursors((prev) => prev.slice(0, -1));
+  };
+
+  const hasPrev = cursors.length > 0;
+  const hasNext = !!pagination?.has_more;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-3">
+        <CardTitle className="text-lg">
+          {t("Activity")} {pagination && pagination.total > 0 && `(${pagination.total})`}
+        </CardTitle>
+        {(hasPrev || hasNext) && (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handlePrevPage}
+              disabled={!hasPrev}
+              className="h-8 w-8 cursor-pointer p-0"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleNextPage}
+              disabled={!hasNext}
+              className="h-8 w-8 cursor-pointer p-0"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : activities.length === 0 ? (
+          <p className="py-4 text-center text-muted-foreground text-sm">{t("No activity")}</p>
+        ) : (
+          <div className="space-y-2">
+            {activities.map((activity) => (
+              <div key={activity.id} className="flex items-start justify-between rounded-md border p-3">
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-medium text-sm">{getActionLabel(activity.action, t)}</span>
+                  <span className="text-muted-foreground text-xs">
+                    {t("by")} {getActorLabel(activity, t, currentUserId)}
+                  </span>
+                </div>
+                <span className="text-muted-foreground text-xs">{formatActivityDate(activity.created_at, locale)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/documents/view/document-details-card.tsx

@@ -5,9 +5,16 @@ import { Separator } from "@/ui/components/ui/separator";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = { de, sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 // Document type union
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
@@ -105,15 +112,15 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
         {/* Document info */}
         <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
           <div className="text-muted-foreground">{t("Number")}</div>
-          <div className="font-medium">{document.number}</div>
+          <div className="text-right font-medium">{document.number}</div>
 
           <div className="text-muted-foreground">{t("Date")}</div>
-          <div>{fmtDate(document.date)}</div>
+          <div className="text-right">{fmtDate(document.date)}</div>
 
           {isInvoiceOrAdvance && (
             <>
               <div className="text-muted-foreground">{t("Due date")}</div>
-              <div>{fmtDate(invoiceDoc.date_due)}</div>
+              <div className="text-right">{fmtDate(invoiceDoc.date_due)}</div>
             </>
           )}
 
@@ -122,7 +129,7 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
               <div className="text-muted-foreground">
                 {(invoiceDoc as any).date_service_to ? t("Service period") : t("Service date")}
               </div>
-              <div>
+              <div className="text-right">
                 {(invoiceDoc as any).date_service_to
                   ? `${fmtDate((invoiceDoc as any).date_service)} - ${fmtDate((invoiceDoc as any).date_service_to)}`
                   : fmtDate((invoiceDoc as any).date_service)}
@@ -133,12 +140,12 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
           {isEstimate && estimateDoc.date_valid_till && (
             <>
               <div className="text-muted-foreground">{t("Valid until")}</div>
-              <div>{fmtDate(estimateDoc.date_valid_till)}</div>
+              <div className="text-right">{fmtDate(estimateDoc.date_valid_till)}</div>
             </>
           )}
 
           <div className="text-muted-foreground">{t("Customer")}</div>
-          <div>{customerName}</div>
+          <div className="text-right">{customerName}</div>
         </div>
 
         <Separator />

package/src/components/documents/view/document-payments-list.tsx

@@ -23,9 +23,16 @@ import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { useSDK } from "@/ui/providers/sdk-provider";
 import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = { de, sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type DocumentType = "invoice" | "credit_note" | "advance_invoice";
 

package/src/components/documents/view/index.ts

@@ -1,4 +1,5 @@
 export { DocumentActionsBar } from "./document-actions-bar";
+export { DocumentActivitiesList } from "./document-activities-list";
 export { DocumentDetailsCard } from "./document-details-card";
 export { DocumentPaymentsList } from "./document-payments-list";
 export { useDocumentDownload } from "./use-document-download";

package/src/components/documents/view/locales/de.ts

@@ -82,4 +82,36 @@ export default {
   "Draft deleted": "Entwurf wurde gelöscht",
   "Delete draft failed": "Entwurf löschen fehlgeschlagen",
   Draft: "Entwurf",
+
+  // Activity list
+  Activity: "Aktivität",
+  "No activity": "Keine Aktivität",
+  Created: "Erstellt",
+  Updated: "Aktualisiert",
+  Sent: "Gesendet",
+  Deleted: "Gelöscht",
+  by: "von",
+  me: "mir",
+  System: "System",
+  Scheduled: "Geplant",
+
+  // Fiscalization
+  Fiscalization: "Fiskalisierung",
+  Fiscalized: "Fiskalisiert",
+  Pending: "Ausstehend",
+  Failed: "Fehlgeschlagen",
+  Skipped: "Übersprungen",
+  "Retry fiscalization": "Fiskalisierung wiederholen",
+
+  // PDF language names
+  English: "Englisch",
+  German: "Deutsch",
+  Slovenian: "Slowenisch",
+  Italian: "Italienisch",
+  French: "Französisch",
+  Spanish: "Spanisch",
+  Portuguese: "Portugiesisch",
+  Dutch: "Niederländisch",
+  Polish: "Polnisch",
+  Croatian: "Kroatisch",
 } as const;

package/src/components/documents/view/locales/es.ts

@@ -0,0 +1,115 @@
+export default {
+  // Actions
+  PDF: "PDF",
+  Send: "Enviar",
+  Payment: "Pago",
+  Share: "Compartir",
+  Unshare: "Dejar de compartir",
+  Copied: "Copiado",
+  "Copy shareable link": "Copiar enlace para compartir",
+  "Unshare document": "Dejar de compartir documento",
+  "Unshare document confirmation": "¿Está seguro de que desea eliminar el acceso público a este documento?",
+  "Document unshared": "Documento ya no compartido",
+  "Unshare failed": "Error al dejar de compartir",
+  "Download failed": "Error en la descarga",
+  "e-SLOG download failed": "Error en la descarga e-SLOG",
+  Duplicate: "Duplicar",
+  "Duplicate invoice": "Duplicar factura",
+  "Duplicate estimate": "Duplicar presupuesto",
+  "Duplicate credit_note": "Duplicar nota de crédito",
+  "Duplicate advance_invoice": "Duplicar factura anticipada",
+  "Create invoice": "Crear factura",
+  "Create estimate": "Crear presupuesto",
+  "Create credit_note": "Crear nota de crédito",
+  "Create advance_invoice": "Crear factura anticipada",
+
+  // Details card
+  Details: "Detalles",
+  Number: "Número",
+  Date: "Fecha",
+  "Due date": "Fecha de vencimiento",
+  "Service date": "Fecha de servicio",
+  "Service period": "Período de servicio",
+  "Valid until": "Válido hasta",
+  Customer: "Cliente",
+  Subtotal: "Subtotal",
+  Tax: "Impuesto",
+  Total: "Total",
+  Paid: "Pagado",
+  Due: "Pendiente",
+  Status: "Estado",
+
+  // Payment status
+  "Paid in full": "Pagado en su totalidad",
+  "Partially paid": "Parcialmente pagado",
+  Unpaid: "No pagado",
+  Voided: "Anulado",
+
+  // Payments list
+  Payments: "Pagos",
+  "No payments": "Sin pagos",
+  "Add payment": "Añadir pago",
+  Edit: "Editar",
+  Delete: "Eliminar",
+  "Delete payment": "Eliminar pago",
+  "Delete payment confirmation": "¿Está seguro de que desea eliminar este pago?",
+  Cancel: "Cancelar",
+
+  // Payment types
+  cash: "Efectivo",
+  bank_transfer: "Transferencia bancaria",
+  card: "Tarjeta",
+  check: "Cheque",
+  credit_note: "Nota de crédito",
+  other: "Otro",
+  advance_invoice: "Factura anticipada",
+
+  // Errors
+  "Delete failed": "Error en la eliminación",
+
+  // Draft actions
+  Finalize: "Finalizar",
+  "Delete Draft": "Eliminar borrador",
+  "Finalize document": "Finalizar documento",
+  "Finalize document confirmation":
+    "Esto asignará un número definitivo al documento. Después de la finalización, el documento no se puede eliminar. ¿Desea continuar?",
+  "Delete draft document": "Eliminar borrador del documento",
+  "Delete draft confirmation": "¿Está seguro de que desea eliminar este borrador? Esta acción no se puede deshacer.",
+  "Document finalized": "Documento finalizado",
+  "Finalize failed": "Error en la finalización",
+  "Draft deleted": "Borrador eliminado",
+  "Delete draft failed": "Error al eliminar el borrador",
+  Draft: "Borrador",
+
+  // Activity list
+  Activity: "Actividad",
+  "No activity": "Sin actividad",
+  Created: "Creado",
+  Updated: "Actualizado",
+  Sent: "Enviado",
+  Deleted: "Eliminado",
+  by: "por",
+  me: "mí",
+  System: "Sistema",
+  Scheduled: "Programado",
+
+  // Fiscalization
+  Fiscalization: "Fiscalización",
+  Fiscalized: "Fiscalizado",
+  Pending: "Pendiente",
+  Failed: "Fallido",
+  Skipped: "Omitido",
+  "Retry fiscalization": "Reintentar fiscalización",
+
+  // PDF language names
+  English: "Inglés",
+  German: "Alemán",
+  Slovenian: "Esloveno",
+  Italian: "Italiano",
+  French: "Francés",
+  Spanish: "Español",
+  Portuguese: "Portugués",
+  Dutch: "Neerlandés",
+  Polish: "Polaco",
+  Croatian: "Croata",
+} as const;

package/src/components/documents/view/locales/fr.ts

@@ -0,0 +1,115 @@
+export default {
+  // Actions
+  PDF: "PDF",
+  Send: "Envoyer",
+  Payment: "Paiement",
+  Share: "Partager",
+  Unshare: "Annuler le partage",
+  Copied: "Copié",
+  "Copy shareable link": "Copier le lien de partage",
+  "Unshare document": "Annuler le partage du document",
+  "Unshare document confirmation": "Êtes-vous sûr de vouloir supprimer l'accès public à ce document ?",
+  "Document unshared": "Document non partagé",
+  "Unshare failed": "Échec de l'annulation du partage",
+  "Download failed": "Échec du téléchargement",
+  "e-SLOG download failed": "Échec du téléchargement e-SLOG",
+  Duplicate: "Dupliquer",
+  "Duplicate invoice": "Dupliquer la facture",
+  "Duplicate estimate": "Dupliquer le devis",
+  "Duplicate credit_note": "Dupliquer l'avoir",
+  "Duplicate advance_invoice": "Dupliquer la facture d'acompte",
+  "Create invoice": "Créer une facture",
+  "Create estimate": "Créer un devis",
+  "Create credit_note": "Créer un avoir",
+  "Create advance_invoice": "Créer une facture d'acompte",
+
+  // Details card
+  Details: "Détails",
+  Number: "Numéro",
+  Date: "Date",
+  "Due date": "Date d'échéance",
+  "Service date": "Date de service",
+  "Service period": "Période de service",
+  "Valid until": "Valable jusqu'au",
+  Customer: "Client",
+  Subtotal: "Sous-total",
+  Tax: "Taxe",
+  Total: "Total",
+  Paid: "Payé",
+  Due: "Dû",
+  Status: "Statut",
+
+  // Payment status
+  "Paid in full": "Payé en totalité",
+  "Partially paid": "Partiellement payé",
+  Unpaid: "Impayé",
+  Voided: "Annulé",
+
+  // Payments list
+  Payments: "Paiements",
+  "No payments": "Aucun paiement",
+  "Add payment": "Ajouter un paiement",
+  Edit: "Modifier",
+  Delete: "Supprimer",
+  "Delete payment": "Supprimer le paiement",
+  "Delete payment confirmation": "Êtes-vous sûr de vouloir supprimer ce paiement ?",
+  Cancel: "Annuler",
+
+  // Payment types
+  cash: "Espèces",
+  bank_transfer: "Virement bancaire",
+  card: "Carte",
+  check: "Chèque",
+  credit_note: "Avoir",
+  other: "Autre",
+  advance_invoice: "Facture d'acompte",
+
+  // Errors
+  "Delete failed": "Échec de la suppression",
+
+  // Draft actions
+  Finalize: "Finaliser",
+  "Delete Draft": "Supprimer le brouillon",
+  "Finalize document": "Finaliser le document",
+  "Finalize document confirmation":
+    "Cela attribuera un numéro définitif au document. Après la finalisation, le document ne peut plus être supprimé. Voulez-vous continuer ?",
+  "Delete draft document": "Supprimer le brouillon du document",
+  "Delete draft confirmation": "Êtes-vous sûr de vouloir supprimer ce brouillon ? Cette action est irréversible.",
+  "Document finalized": "Document finalisé",
+  "Finalize failed": "Échec de la finalisation",
+  "Draft deleted": "Brouillon supprimé",
+  "Delete draft failed": "Échec de la suppression du brouillon",
+  Draft: "Brouillon",
+
+  // Activity list
+  Activity: "Activité",
+  "No activity": "Aucune activité",
+  Created: "Créé",
+  Updated: "Mis à jour",
+  Sent: "Envoyé",
+  Deleted: "Supprimé",
+  by: "par",
+  me: "moi",
+  System: "Système",
+  Scheduled: "Planifié",
+
+  // Fiscalization
+  Fiscalization: "Fiscalisation",
+  Fiscalized: "Fiscalisé",
+  Pending: "En attente",
+  Failed: "Échoué",
+  Skipped: "Ignoré",
+  "Retry fiscalization": "Réessayer la fiscalisation",
+
+  // PDF language names
+  English: "Anglais",
+  German: "Allemand",
+  Slovenian: "Slovène",
+  Italian: "Italien",
+  French: "Français",
+  Spanish: "Espagnol",
+  Portuguese: "Portugais",
+  Dutch: "Néerlandais",
+  Polish: "Polonais",
+  Croatian: "Croate",
+} as const;

package/src/components/documents/view/locales/hr.ts

@@ -0,0 +1,115 @@
+export default {
+  // Actions
+  PDF: "PDF",
+  Send: "Pošalji",
+  Payment: "Plaćanje",
+  Share: "Podijeli",
+  Unshare: "Ukloni dijeljenje",
+  Copied: "Kopirano",
+  "Copy shareable link": "Kopiraj poveznicu za dijeljenje",
+  "Unshare document": "Ukloni dijeljenje dokumenta",
+  "Unshare document confirmation": "Jeste li sigurni da želite ukloniti javni pristup ovom dokumentu?",
+  "Document unshared": "Dokument više nije dijeljen",
+  "Unshare failed": "Uklanjanje dijeljenja nije uspjelo",
+  "Download failed": "Preuzimanje nije uspjelo",
+  "e-SLOG download failed": "Preuzimanje e-SLOG nije uspjelo",
+  Duplicate: "Dupliciraj",
+  "Duplicate invoice": "Dupliciraj račun",
+  "Duplicate estimate": "Dupliciraj ponudu",
+  "Duplicate credit_note": "Dupliciraj knjižno odobrenje",
+  "Duplicate advance_invoice": "Dupliciraj avansni račun",
+  "Create invoice": "Stvori račun",
+  "Create estimate": "Stvori ponudu",
+  "Create credit_note": "Stvori knjižno odobrenje",
+  "Create advance_invoice": "Stvori avansni račun",
+
+  // Details card
+  Details: "Pojedinosti",
+  Number: "Broj",
+  Date: "Datum",
+  "Due date": "Datum dospijeća",
+  "Service date": "Datum usluge",
+  "Service period": "Razdoblje usluge",
+  "Valid until": "Vrijedi do",
+  Customer: "Kupac",
+  Subtotal: "Međuzbroj",
+  Tax: "Porez",
+  Total: "Ukupno",
+  Paid: "Plaćeno",
+  Due: "Za plaćanje",
+  Status: "Status",
+
+  // Payment status
+  "Paid in full": "Plaćeno u cijelosti",
+  "Partially paid": "Djelomično plaćeno",
+  Unpaid: "Neplaćeno",
+  Voided: "Stornirano",
+
+  // Payments list
+  Payments: "Plaćanja",
+  "No payments": "Nema plaćanja",
+  "Add payment": "Dodaj plaćanje",
+  Edit: "Uredi",
+  Delete: "Obriši",
+  "Delete payment": "Obriši plaćanje",
+  "Delete payment confirmation": "Jeste li sigurni da želite obrisati ovo plaćanje?",
+  Cancel: "Odustani",
+
+  // Payment types
+  cash: "Gotovina",
+  bank_transfer: "Bankovni prijenos",
+  card: "Kartica",
+  check: "Ček",
+  credit_note: "Knjižno odobrenje",
+  other: "Ostalo",
+  advance_invoice: "Avansni račun",
+
+  // Errors
+  "Delete failed": "Brisanje nije uspjelo",
+
+  // Draft actions
+  Finalize: "Potvrdi",
+  "Delete Draft": "Obriši nacrt",
+  "Finalize document": "Potvrdi dokument",
+  "Finalize document confirmation":
+    "Ovo će dokumentu dodijeliti konačan broj. Nakon potvrde dokument se ne može obrisati. Želite li nastaviti?",
+  "Delete draft document": "Obriši nacrt dokumenta",
+  "Delete draft confirmation": "Jeste li sigurni da želite obrisati ovaj nacrt? Ova radnja se ne može poništiti.",
+  "Document finalized": "Dokument potvrđen",
+  "Finalize failed": "Potvrda nije uspjela",
+  "Draft deleted": "Nacrt obrisan",
+  "Delete draft failed": "Brisanje nacrta nije uspjelo",
+  Draft: "Nacrt",
+
+  // Activity list
+  Activity: "Aktivnost",
+  "No activity": "Nema aktivnosti",
+  Created: "Stvoreno",
+  Updated: "Ažurirano",
+  Sent: "Poslano",
+  Deleted: "Obrisano",
+  by: "od",
+  me: "ja",
+  System: "Sustav",
+  Scheduled: "Zakazano",
+
+  // Fiscalization
+  Fiscalization: "Fiskalizacija",
+  Fiscalized: "Fiskalizirano",
+  Pending: "Na čekanju",
+  Failed: "Neuspjelo",
+  Skipped: "Preskočeno",
+  "Retry fiscalization": "Ponovi fiskalizaciju",
+
+  // PDF language names
+  English: "Engleski",
+  German: "Njemački",
+  Slovenian: "Slovenski",
+  Italian: "Talijanski",
+  French: "Francuski",
+  Spanish: "Španjolski",
+  Portuguese: "Portugalski",
+  Dutch: "Nizozemski",
+  Polish: "Poljski",
+  Croatian: "Hrvatski",
+} as const;