@spaceinvoices/react-ui 0.4.1 → 0.4.3

package/src/components/invoices/list/list-table.tsx

@@ -1,8 +1,9 @@
 import type { Invoice } from "@spaceinvoices/js-sdk";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { DataTable } from "@/ui/components/table/data-table";
 import { FormattedDate } from "@/ui/components/table/date-cell";
 import { useTableFetch } from "@/ui/components/table/hooks/use-table-fetch";
+import { SelectionToolbar } from "@/ui/components/table/selection-toolbar";
 import type {
   Column,
   FilterConfig,
@@ -10,6 +11,7 @@ import type {
   TableQueryParams,
   TableQueryResponse,
 } from "@/ui/components/table/types";
+import { Badge } from "@/ui/components/ui/badge";
 import { Button } from "@/ui/components/ui/button";
 import { createTranslation } from "@/ui/lib/translation";
 import { useSDK } from "@/ui/providers/sdk-provider";
@@ -44,16 +46,21 @@ type InvoiceListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onView?: (invoice: Invoice) => void;
   onAddPayment?: (invoice: Invoice) => void;
   onDuplicate?: (invoice: Invoice) => void;
   onDownloadStart?: () => void;
   onDownloadSuccess?: (fileName: string) => void;
   onDownloadError?: (error: string) => void;
+  onExportSelected?: (documentIds: string[]) => void;
+  onVoid?: (invoice: Invoice) => void;
+  isVoiding?: boolean;
 } & ListTableProps<Invoice>;
 
 export default function InvoiceListTable({
   queryParams,
   onRowClick,
+  onView,
   onAddPayment,
   onDuplicate,
   onChangeParams,
@@ -62,6 +69,9 @@ export default function InvoiceListTable({
   onDownloadStart,
   onDownloadSuccess,
   onDownloadError,
+  onExportSelected,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: InvoiceListTableProps) {
   const t = createTranslation({
@@ -70,6 +80,7 @@ export default function InvoiceListTable({
   });
 
   const { sdk } = useSDK();
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
   const handleFetch = useTableFetch(async (params: TableQueryParams) => {
     if (!sdk) throw new Error("SDK not initialized");
@@ -99,6 +110,28 @@ export default function InvoiceListTable({
     [t],
   );
 
+  const handleExportPdfs = useCallback(() => {
+    if (selectedIds.size > 0 && onExportSelected) {
+      onExportSelected(Array.from(selectedIds));
+    }
+  }, [selectedIds, onExportSelected]);
+
+  const handleDeselectAll = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  const selectionToolbar = useCallback(
+    (count: number) => (
+      <SelectionToolbar
+        selectedCount={count}
+        onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
+        onDeselectAll={handleDeselectAll}
+        t={t}
+      />
+    ),
+    [handleExportPdfs, handleDeselectAll, onExportSelected, t],
+  );
+
   const columns: Column<Invoice>[] = useMemo(
     () => [
       {
@@ -106,9 +139,19 @@ export default function InvoiceListTable({
         header: t("Number"),
         sortable: true,
         cell: (invoice) => (
-          <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(invoice)}>
-            {(invoice as any).is_draft ? t("Draft") : invoice.number}
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(invoice)}>
+              {invoice.number}
+            </Button>
+            {(invoice as any).is_draft && (
+              <Badge
+                variant="outline"
+                className="border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400"
+              >
+                {t("Draft")}
+              </Badge>
+            )}
+          </div>
         ),
       },
       {
@@ -142,6 +185,11 @@ export default function InvoiceListTable({
         align: "right",
         cell: (invoice) => invoice.total_with_tax,
       },
+      {
+        id: "status",
+        header: t("Status"),
+        cell: (invoice) => <InvoiceStatusBadge invoice={invoice} t={t} />,
+      },
       {
         id: "actions",
         header: "",
@@ -149,18 +197,33 @@ export default function InvoiceListTable({
         cell: (invoice) => (
           <InvoiceListRowActions
             invoice={invoice}
+            onView={onView}
             onAddPayment={onAddPayment}
             onDuplicate={onDuplicate}
             onDownloadStart={onDownloadStart}
             onDownloadSuccess={onDownloadSuccess}
             onDownloadError={onDownloadError}
+            onVoid={onVoid}
+            isVoiding={isVoiding}
             t={t}
             locale={i18nProps.locale}
           />
         ),
       },
     ],
-    [t, onRowClick, onAddPayment, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps.locale],
+    [
+      t,
+      onRowClick,
+      onView,
+      onAddPayment,
+      onDuplicate,
+      onDownloadStart,
+      onDownloadSuccess,
+      onDownloadError,
+      onVoid,
+      isVoiding,
+      i18nProps.locale,
+    ],
   );
 
   return (
@@ -177,6 +240,59 @@ export default function InvoiceListTable({
       filterConfig={filterConfig}
       t={t}
       locale={i18nProps.locale}
+      selectable={!!onExportSelected}
+      selectedIds={selectedIds}
+      onSelectionChange={setSelectedIds}
+      selectionToolbar={selectionToolbar}
     />
   );
 }
+
+/** Status badge for invoices */
+function InvoiceStatusBadge({ invoice, t }: { invoice: Invoice; t: (key: string) => string }) {
+  if ((invoice as any).voided_at) {
+    return (
+      <Badge variant="outline" className="border-red-500 bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400">
+        {t("Voided")}
+      </Badge>
+    );
+  }
+  if ((invoice as any).is_draft) {
+    return null;
+  }
+  if (invoice.paid_in_full) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-green-500 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-400"
+      >
+        {t("Paid")}
+      </Badge>
+    );
+  }
+  if (invoice.date_due && new Date(invoice.date_due) < new Date()) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-orange-500 bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-400"
+      >
+        {t("Overdue")}
+      </Badge>
+    );
+  }
+  if (invoice.total_paid > 0) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-yellow-500 bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400"
+      >
+        {t("Partially Paid")}
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="border-gray-500 bg-gray-50 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+      {t("Unpaid")}
+    </Badge>
+  );
+}

package/src/components/invoices/list/locales/de.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Keine Rechnungen gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  selected: "ausgewählt",
+  "Export PDFs": "PDFs exportieren",
+  "Deselect all": "Auswahl aufheben",
+  Void: "Stornieren",
+  "Partially Paid": "Teilweise bezahlt",
 } as const;

package/src/components/invoices/list/locales/en.ts

@@ -5,4 +5,9 @@ export default {
   "Create new": "Create invoice",
   // No results translations
   "No results found": "No invoices found",
+  selected: "selected",
+  "Export PDFs": "Export PDFs",
+  "Deselect all": "Deselect all",
+  Void: "Void",
+  "Partially Paid": "Partially Paid",
 } as const;

package/src/components/invoices/list/locales/es.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "No se encontraron facturas",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  selected: "seleccionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Deseleccionar todo",
+  Void: "Anular",
+  "Partially Paid": "Parcialmente pagado",
 } as const;

package/src/components/invoices/list/locales/fr.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Aucune facture trouvée",
   "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  selected: "sélectionnés",
+  "Export PDFs": "Exporter les PDF",
+  "Deselect all": "Tout désélectionner",
+  Void: "Annuler",
+  "Partially Paid": "Partiellement payé",
 } as const;

package/src/components/invoices/list/locales/hr.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Nisu pronađeni računi",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
   "Clear search": "Očisti pretragu",
+  selected: "odabranih",
+  "Export PDFs": "Izvezi PDF-ove",
+  "Deselect all": "Poništi odabir",
+  Void: "Storniraj",
+  "Partially Paid": "Djelomično plaćeno",
 } as const;

package/src/components/invoices/list/locales/it.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Nessuna fattura trovata",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  selected: "selezionati",
+  "Export PDFs": "Esporta PDF",
+  "Deselect all": "Deseleziona tutto",
+  Void: "Annulla",
+  "Partially Paid": "Parzialmente pagato",
 } as const;

package/src/components/invoices/list/locales/nl.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Geen facturen gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  selected: "geselecteerd",
+  "Export PDFs": "PDFs exporteren",
+  "Deselect all": "Alles deselecteren",
+  Void: "Nietig verklaren",
+  "Partially Paid": "Gedeeltelijk betaald",
 } as const;

package/src/components/invoices/list/locales/pl.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Nie znaleziono faktur",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  selected: "wybranych",
+  "Export PDFs": "Eksportuj PDF-y",
+  "Deselect all": "Odznacz wszystko",
+  Void: "Anuluj",
+  "Partially Paid": "Częściowo opłacona",
 } as const;

package/src/components/invoices/list/locales/pt.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Nenhuma fatura encontrada",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  selected: "selecionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Desselecionar tudo",
+  Void: "Anular",
+  "Partially Paid": "Parcialmente pago",
 } as const;

package/src/components/invoices/list/locales/sl.ts

@@ -39,4 +39,9 @@ export default {
   "No results found": "Ni najdenih računov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  selected: "izbranih",
+  "Export PDFs": "Izvozi PDF-je",
+  "Deselect all": "Počisti izbiro",
+  Void: "Storniraj",
+  "Partially Paid": "Delno plačano",
 } as const;

package/src/components/invoices/view/fiscalization-status-card.tsx

@@ -18,7 +18,10 @@ import sl from "../../documents/view/locales/sl";
 
 const translations = { de, es, fr, hr, it, nl, pl, pt, sl } as const;
 
-type FiscalizationData = FursFiscalizationResponse | FinaFiscalizationResponse;
+type FiscalizationStatus = "pending" | "success" | "failed" | "skipped";
+type FiscalizationData = (Exclude<FursFiscalizationResponse, null> | Exclude<FinaFiscalizationResponse, null>) & {
+  status: FiscalizationStatus;
+};
 
 interface FiscalizationStatusCardProps extends ComponentTranslationProps {
   fiscalizationType: "furs" | "fina";

package/src/components/items/item-list-table/item-list-row-actions.tsx

@@ -1,6 +1,7 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 
 import { MoreHorizontal } from "lucide-react";
+import { memo } from "react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -15,9 +16,10 @@ import { createTranslation } from "@/ui/lib/translation";
 
 type ItemListRowActionsProps = {
   item: Item;
+  onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRowActions({ item, ...i18nProps }: ItemListRowActionsProps) {
+export default memo(function ItemListRowActions({ item, onView, ...i18nProps }: ItemListRowActionsProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -34,15 +36,10 @@ export default function ItemListRowActions({ item, ...i18nProps }: ItemListRowAc
           {t("Copy item ID")}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => {
-            window.location.href = `/app/items/${item.id}`;
-          }}
-        >
+        <DropdownMenuItem className="cursor-pointer" onClick={() => onView?.(item)}>
           {t("View item")}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+});

package/src/components/items/item-list-table/item-list-row.tsx

@@ -1,5 +1,6 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 import { Package } from "lucide-react";
+import { memo } from "react";
 import { TableCell, TableRow } from "@/ui/components/ui/table";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
@@ -9,9 +10,10 @@ import ItemListRowActions from "./item-list-row-actions";
 type ItemListRowProps = {
   item: Item;
   onRowClick?: (item: Item) => void;
+  onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRow({ item, onRowClick, ...i18nProps }: ItemListRowProps) {
+export default memo(function ItemListRow({ item, onRowClick, onView, ...i18nProps }: ItemListRowProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -25,8 +27,8 @@ export default function ItemListRow({ item, onRowClick, ...i18nProps }: ItemList
       <TableCell>{item.description}</TableCell>
       <TableCell className="text-right">{item.price}</TableCell>
       <TableCell className="text-right">
-        <ItemListRowActions item={item} t={t} />
+        <ItemListRowActions item={item} onView={onView} t={t} />
       </TableCell>
     </TableRow>
   );
-}
+});

package/src/components/items/item-list-table/item-list-table.tsx

@@ -37,12 +37,14 @@ type ItemListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onView?: (item: Item) => void;
 } & ListTableProps<Item>;
 
 export default function ItemListTable({
   queryParams,
   createNewTrigger,
   onRowClick,
+  onView,
   onChangeParams,
   entityId,
   ...i18nProps
@@ -67,7 +69,9 @@ export default function ItemListTable({
         { id: "price", header: t("Price"), align: "right" },
         { id: "actions", header: "", align: "right" },
       ]}
-      renderRow={(item) => <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} t={t} />}
+      renderRow={(item) => (
+        <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} onView={onView} t={t} />
+      )}
       renderHeader={(headerProps) => <ItemListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
       queryParams={queryParams}
       resourceName="item"