@spaceinvoices/react-ui 0.1.1 → 0.4.0

package/src/components/customers/create-customer-form/locales/it.ts

@@ -0,0 +1,21 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Inserisci il nome del cliente",
+  Address: "Indirizzo",
+  "Enter address": "Inserisci l'indirizzo",
+  "Post Code": "CAP",
+  "Enter post code": "Inserisci il CAP",
+  City: "Citta",
+  "Enter city": "Inserisci la citta",
+  State: "Regione",
+  "Enter state": "Inserisci la regione",
+  Country: "Paese",
+  "Enter country": "Inserisci il paese",
+  "Tax Number": "Partita IVA",
+  "Company Number": "Numero di registrazione",
+  "Enter tax number": "Inserisci la partita IVA",
+  "Create Customer": "Crea cliente",
+  Cancel: "Annulla",
+  "Search by company name or tax number": "Cerca per nome azienda o partita IVA",
+  "There was an error creating the customer": "Si e verificato un errore durante la creazione del cliente",
+} as const;

package/src/components/customers/create-customer-form/locales/nl.ts

@@ -0,0 +1,21 @@
+export default {
+  Name: "Naam",
+  "Enter name": "Voer de naam van de klant in",
+  Address: "Adres",
+  "Enter address": "Voer het adres in",
+  "Post Code": "Postcode",
+  "Enter post code": "Voer de postcode in",
+  City: "Stad",
+  "Enter city": "Voer de stad in",
+  State: "Provincie",
+  "Enter state": "Voer de provincie in",
+  Country: "Land",
+  "Enter country": "Voer het land in",
+  "Tax Number": "Btw-nummer",
+  "Company Number": "KvK-nummer",
+  "Enter tax number": "Voer het btw-nummer in",
+  "Create Customer": "Klant aanmaken",
+  Cancel: "Annuleren",
+  "Search by company name or tax number": "Zoek op bedrijfsnaam of btw-nummer",
+  "There was an error creating the customer": "Er is een fout opgetreden bij het aanmaken van de klant",
+} as const;

package/src/components/customers/create-customer-form/locales/pl.ts

@@ -0,0 +1,21 @@
+export default {
+  Name: "Nazwa",
+  "Enter name": "Wprowadz nazwe klienta",
+  Address: "Adres",
+  "Enter address": "Wprowadz adres",
+  "Post Code": "Kod pocztowy",
+  "Enter post code": "Wprowadz kod pocztowy",
+  City: "Miasto",
+  "Enter city": "Wprowadz miasto",
+  State: "Wojewodztwo",
+  "Enter state": "Wprowadz wojewodztwo",
+  Country: "Kraj",
+  "Enter country": "Wprowadz kraj",
+  "Tax Number": "Numer podatkowy",
+  "Company Number": "Numer firmy",
+  "Enter tax number": "Wprowadz numer podatkowy",
+  "Create Customer": "Utworz klienta",
+  Cancel: "Anuluj",
+  "Search by company name or tax number": "Szukaj po nazwie firmy lub numerze podatkowym",
+  "There was an error creating the customer": "Wystapil blad podczas tworzenia klienta",
+} as const;

package/src/components/customers/create-customer-form/locales/pt.ts

@@ -0,0 +1,21 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Introduza o nome do cliente",
+  Address: "Morada",
+  "Enter address": "Introduza a morada",
+  "Post Code": "Codigo postal",
+  "Enter post code": "Introduza o codigo postal",
+  City: "Cidade",
+  "Enter city": "Introduza a cidade",
+  State: "Distrito",
+  "Enter state": "Introduza o distrito",
+  Country: "Pais",
+  "Enter country": "Introduza o pais",
+  "Tax Number": "Numero de contribuinte",
+  "Company Number": "Numero da empresa",
+  "Enter tax number": "Introduza o numero de contribuinte",
+  "Create Customer": "Criar cliente",
+  Cancel: "Cancelar",
+  "Search by company name or tax number": "Pesquisar por nome da empresa ou numero de contribuinte",
+  "There was an error creating the customer": "Ocorreu um erro ao criar o cliente",
+} as const;

package/src/components/customers/create-customer-form/locales/sl.ts

@@ -12,6 +12,7 @@ export default {
   Country: "Država",
   "Enter country": "Vnesite državo",
   "Tax Number": "Davčna številka",
+  "Company Number": "Matična številka",
   "Enter tax number": "Vnesite davčno številko",
   "Create Customer": "Ustvari stranko",
   Cancel: "Prekliči",

package/src/components/customers/customer-list-table/customer-list-row-actions.tsx

@@ -1,10 +1,10 @@
 import type { Customer } from "@spaceinvoices/js-sdk";
-
-import { MoreHorizontal } from "lucide-react";
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -13,35 +13,91 @@ import {
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 
+import { useDeleteCustomer } from "../customers.hooks";
+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;
+
 type CustomerListRowActionsProps = {
   customer: Customer;
+  entityId?: string;
+  onEditCustomer?: (customer: Customer) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
 } & ComponentTranslationProps;
 
-export default function CustomerListRowActions({ customer, ...i18nProps }: CustomerListRowActionsProps) {
-  const t = createTranslation(i18nProps);
+export default function CustomerListRowActions({
+  customer,
+  entityId,
+  onEditCustomer,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: CustomerListRowActionsProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { mutate: deleteCustomer, isPending: isDeleting } = useDeleteCustomer({
+    entityId,
+    onSuccess: () => {
+      onDeleteSuccess?.();
+    },
+    onError: (error: Error) => {
+      onDeleteError?.(error.message);
+    },
+  });
+
+  const handleDelete = () => {
+    deleteCustomer({ id: customer.id });
+  };
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0" id="action-menu-trigger">
+        <Button variant="ghost" className="h-8 w-8 cursor-pointer p-0" id="action-menu-trigger">
           <span className="sr-only">{t("Open menu")}</span>
           <MoreHorizontal className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuLabel>{t("Actions")}</DropdownMenuLabel>
-        <DropdownMenuItem className="cursor-pointer" onClick={() => navigator.clipboard.writeText(customer.id)}>
-          {t("Copy customer ID")}
-        </DropdownMenuItem>
+        <DropdownMenuGroup>
+          <DropdownMenuItem className="cursor-pointer" onClick={() => onEditCustomer?.(customer)}>
+            <Pencil className="h-4 w-4" />
+            {t("Edit customer")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => {
-            window.location.href = `/app/customers/${customer.id}`;
-          }}
-        >
-          {t("View customer")}
-        </DropdownMenuItem>
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer text-destructive focus:text-destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            <Trash2 className="h-4 w-4" />
+            {isDeleting ? t("Deleting...") : t("Delete customer")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/customers/customer-list-table/customer-list-table.tsx

@@ -10,11 +10,27 @@ import type { Column, ListTableProps, TableQueryParams, TableQueryResponse } fro
 import { CUSTOMERS_CACHE_KEY } from "../customers.hooks";
 import CustomerListRowActions from "./customer-list-row-actions";
 import de from "./locales/de";
+import en from "./locales/en";
+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 = {
+  en,
   sl,
   de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
 } as const;
 
 type CustomerListTableProps = {
@@ -22,6 +38,9 @@ type CustomerListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onEditCustomer?: (customer: Customer) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
 } & ListTableProps<Customer>;
 
 export default function CustomerListTable({
@@ -30,6 +49,9 @@ export default function CustomerListTable({
   onRowClick,
   onChangeParams,
   entityId,
+  onEditCustomer,
+  onDeleteSuccess,
+  onDeleteError,
   ...i18nProps
 }: CustomerListTableProps) {
   const t = createTranslation({
@@ -103,10 +125,19 @@ export default function CustomerListTable({
         id: "actions",
         header: "",
         align: "right",
-        cell: (customer) => <CustomerListRowActions customer={customer} t={t} />,
+        cell: (customer) => (
+          <CustomerListRowActions
+            customer={customer}
+            entityId={entityId}
+            onEditCustomer={onEditCustomer}
+            onDeleteSuccess={onDeleteSuccess}
+            onDeleteError={onDeleteError}
+            t={t}
+          />
+        ),
       },
     ],
-    [t, onRowClick],
+    [t, onRowClick, entityId, onEditCustomer, onDeleteSuccess, onDeleteError],
   );
 
   return (
@@ -119,6 +150,8 @@ export default function CustomerListTable({
       onFetch={handleFetch}
       onChangeParams={onChangeParams}
       entityId={entityId}
+      t={t}
+      locale={i18nProps.locale}
     />
   );
 }

package/src/components/customers/customer-list-table/locales/de.ts

@@ -12,5 +12,14 @@ export default {
   "Create new customer": "Neuen Kunden erstellen",
   "Copy customer ID": "Kunden-ID kopieren",
   "View customer": "Kunde anzeigen",
+  "Edit customer": "Kunde bearbeiten",
+  "Delete customer": "Kunde löschen",
+  "Deleting...": "Wird gelöscht...",
   "Open menu": "Menü öffnen",
+  // Empty state translations
+  "Your list is empty": "Ihre Kundenliste ist leer",
+  "Get started by creating your first entry": "Erstellen Sie Ihren ersten Kunden",
+  "No results found": "Keine Kunden gefunden",
+  "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
+  "Clear search": "Suche zurücksetzen",
 } as const;

package/src/components/customers/customer-list-table/locales/en.ts

@@ -0,0 +1,10 @@
+export default {
+  // Empty state translations
+  "Your list is empty": "Your customer list is empty",
+  "Get started by creating your first entry": "Get started by creating your first customer",
+  "Edit customer": "Edit customer",
+  "Delete customer": "Delete customer",
+  "Deleting...": "Deleting...",
+  // No results translations
+  "No results found": "No customers found",
+} as const;

package/src/components/customers/customer-list-table/locales/es.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Nombre",
+  Address: "Direccion",
+  "Post Code": "Codigo postal",
+  City: "Ciudad",
+  State: "Estado",
+  Country: "Pais",
+  "Tax number": "Numero fiscal",
+  Email: "Correo electronico",
+  "Created At": "Creado el",
+  Actions: "Acciones",
+  "Create new customer": "Crear nuevo cliente",
+  "Copy customer ID": "Copiar ID del cliente",
+  "View customer": "Ver cliente",
+  "Edit customer": "Editar cliente",
+  "Delete customer": "Eliminar cliente",
+  "Deleting...": "Eliminando...",
+  "Open menu": "Abrir menu",
+  // Empty state translations
+  "Your list is empty": "Su lista de clientes esta vacia",
+  "Get started by creating your first entry": "Comience creando su primer cliente",
+  "No results found": "No se encontraron clientes",
+  "Try adjusting your search criteria": "Intente ajustar sus criterios de busqueda",
+  "Clear search": "Limpiar busqueda",
+} as const;

package/src/components/customers/customer-list-table/locales/fr.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Nom",
+  Address: "Adresse",
+  "Post Code": "Code postal",
+  City: "Ville",
+  State: "Region",
+  Country: "Pays",
+  "Tax number": "Numero de TVA",
+  Email: "Email",
+  "Created At": "Cree le",
+  Actions: "Actions",
+  "Create new customer": "Creer un nouveau client",
+  "Copy customer ID": "Copier l'ID du client",
+  "View customer": "Voir le client",
+  "Edit customer": "Modifier le client",
+  "Delete customer": "Supprimer le client",
+  "Deleting...": "Suppression...",
+  "Open menu": "Ouvrir le menu",
+  // Empty state translations
+  "Your list is empty": "Votre liste de clients est vide",
+  "Get started by creating your first entry": "Commencez par creer votre premier client",
+  "No results found": "Aucun client trouve",
+  "Try adjusting your search criteria": "Essayez de modifier vos criteres de recherche",
+  "Clear search": "Effacer la recherche",
+} as const;

package/src/components/customers/customer-list-table/locales/hr.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Naziv",
+  Address: "Adresa",
+  "Post Code": "Postanski broj",
+  City: "Grad",
+  State: "Zupanija",
+  Country: "Drzava",
+  "Tax number": "OIB",
+  Email: "Email",
+  "Created At": "Kreirano",
+  Actions: "Akcije",
+  "Create new customer": "Kreiraj novog kupca",
+  "Copy customer ID": "Kopiraj ID kupca",
+  "View customer": "Prikazi kupca",
+  "Edit customer": "Uredi kupca",
+  "Delete customer": "Obrisi kupca",
+  "Deleting...": "Brisanje...",
+  "Open menu": "Otvori izbornik",
+  // Empty state translations
+  "Your list is empty": "Vasa lista kupaca je prazna",
+  "Get started by creating your first entry": "Pocnite kreiranjem prvog kupca",
+  "No results found": "Nije pronadjen nijedan kupac",
+  "Try adjusting your search criteria": "Pokusajte prilagoditi kriterije pretrazivanja",
+  "Clear search": "Ocisti pretragu",
+} as const;

package/src/components/customers/customer-list-table/locales/it.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Nome",
+  Address: "Indirizzo",
+  "Post Code": "CAP",
+  City: "Citta",
+  State: "Regione",
+  Country: "Paese",
+  "Tax number": "Partita IVA",
+  Email: "Email",
+  "Created At": "Creato il",
+  Actions: "Azioni",
+  "Create new customer": "Crea nuovo cliente",
+  "Copy customer ID": "Copia ID cliente",
+  "View customer": "Visualizza cliente",
+  "Edit customer": "Modifica cliente",
+  "Delete customer": "Elimina cliente",
+  "Deleting...": "Eliminazione...",
+  "Open menu": "Apri menu",
+  // Empty state translations
+  "Your list is empty": "La lista dei clienti e vuota",
+  "Get started by creating your first entry": "Inizia creando il tuo primo cliente",
+  "No results found": "Nessun cliente trovato",
+  "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
+  "Clear search": "Cancella ricerca",
+} as const;

package/src/components/customers/customer-list-table/locales/nl.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Naam",
+  Address: "Adres",
+  "Post Code": "Postcode",
+  City: "Stad",
+  State: "Provincie",
+  Country: "Land",
+  "Tax number": "Btw-nummer",
+  Email: "Email",
+  "Created At": "Aangemaakt op",
+  Actions: "Acties",
+  "Create new customer": "Nieuwe klant aanmaken",
+  "Copy customer ID": "Klant-ID kopieren",
+  "View customer": "Klant bekijken",
+  "Edit customer": "Klant bewerken",
+  "Delete customer": "Klant verwijderen",
+  "Deleting...": "Verwijderen...",
+  "Open menu": "Menu openen",
+  // Empty state translations
+  "Your list is empty": "Uw klantenlijst is leeg",
+  "Get started by creating your first entry": "Begin met het aanmaken van uw eerste klant",
+  "No results found": "Geen klanten gevonden",
+  "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
+  "Clear search": "Zoekopdracht wissen",
+} as const;

package/src/components/customers/customer-list-table/locales/pl.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Nazwa",
+  Address: "Adres",
+  "Post Code": "Kod pocztowy",
+  City: "Miasto",
+  State: "Wojewodztwo",
+  Country: "Kraj",
+  "Tax number": "Numer podatkowy",
+  Email: "Email",
+  "Created At": "Utworzono",
+  Actions: "Akcje",
+  "Create new customer": "Utworz nowego klienta",
+  "Copy customer ID": "Kopiuj ID klienta",
+  "View customer": "Pokaz klienta",
+  "Edit customer": "Edytuj klienta",
+  "Delete customer": "Usun klienta",
+  "Deleting...": "Usuwanie...",
+  "Open menu": "Otworz menu",
+  // Empty state translations
+  "Your list is empty": "Twoja lista klientow jest pusta",
+  "Get started by creating your first entry": "Zacznij od utworzenia pierwszego klienta",
+  "No results found": "Nie znaleziono klientow",
+  "Try adjusting your search criteria": "Sprobuj dostosowac kryteria wyszukiwania",
+  "Clear search": "Wyczysc wyszukiwanie",
+} as const;

package/src/components/customers/customer-list-table/locales/pt.ts

@@ -0,0 +1,25 @@
+export default {
+  Name: "Nome",
+  Address: "Morada",
+  "Post Code": "Codigo postal",
+  City: "Cidade",
+  State: "Distrito",
+  Country: "Pais",
+  "Tax number": "Numero de contribuinte",
+  Email: "Email",
+  "Created At": "Criado em",
+  Actions: "Acoes",
+  "Create new customer": "Criar novo cliente",
+  "Copy customer ID": "Copiar ID do cliente",
+  "View customer": "Ver cliente",
+  "Edit customer": "Editar cliente",
+  "Delete customer": "Eliminar cliente",
+  "Deleting...": "A eliminar...",
+  "Open menu": "Abrir menu",
+  // Empty state translations
+  "Your list is empty": "A sua lista de clientes esta vazia",
+  "Get started by creating your first entry": "Comece criando o seu primeiro cliente",
+  "No results found": "Nenhum cliente encontrado",
+  "Try adjusting your search criteria": "Tente ajustar os seus criterios de pesquisa",
+  "Clear search": "Limpar pesquisa",
+} as const;

package/src/components/customers/customer-list-table/locales/sl.ts

@@ -12,5 +12,14 @@ export default {
   "Create new customer": "Ustvari novo stranko",
   "Copy customer ID": "Kopiraj ID stranke",
   "View customer": "Prikaži stranko",
+  "Edit customer": "Uredi stranko",
+  "Delete customer": "Izbriši stranko",
+  "Deleting...": "Brišem...",
   "Open menu": "Odpri meni",
+  // Empty state translations
+  "Your list is empty": "Vaš seznam strank je prazen",
+  "Get started by creating your first entry": "Začnite z ustvarjanjem prve stranke",
+  "No results found": "Ni najdenih strank",
+  "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
+  "Clear search": "Počisti iskanje",
 } as const;

package/src/components/customers/customers.hooks.test.ts

@@ -21,7 +21,7 @@ describe("customers.hooks", () => {
         data: [
           { id: "customer-1", name: "John Doe", email: "john@example.com" },
           { id: "customer-2", name: "John Smith", email: "johnsmith@example.com" },
-        ],
+        ] as any,
         pagination: { total: 2 },
       });
 
@@ -88,7 +88,7 @@ describe("customers.hooks", () => {
           id: `customer-${i}`,
           name: `Test Customer ${i}`,
           email: `test${i}@example.com`,
-        })),
+        })) as any,
         pagination: { total: 10 },
       });
 
@@ -110,7 +110,7 @@ describe("customers.hooks", () => {
       const entityId = "entity-123";
 
       sdk.customers.list.mockResolvedValue({
-        data: [{ id: "customer-1", name: "Test", email: "test@example.com" }],
+        data: [{ id: "customer-1", name: "Test", email: "test@example.com" }] as any,
         pagination: { total: 1 },
       });
 
@@ -162,13 +162,13 @@ describe("customers.hooks", () => {
       const { wrapper } = createTestSetup({ sdk });
       const entityId = "entity-123";
 
-      const mockCustomers = [
+      const mockCustomers: any[] = [
         { id: "customer-1", name: "Recent Customer 1", email: "recent1@example.com", created_at: "2024-01-15" },
         { id: "customer-2", name: "Recent Customer 2", email: "recent2@example.com", created_at: "2024-01-14" },
       ];
 
       sdk.customers.list.mockResolvedValueOnce({
-        data: mockCustomers,
+        data: mockCustomers as any,
         pagination: { total: 2 },
       });
 
@@ -198,7 +198,7 @@ describe("customers.hooks", () => {
           name: `Customer ${i}`,
           email: `customer${i}@example.com`,
           created_at: new Date(Date.now() - i * 1000).toISOString(),
-        })),
+        })) as any,
         pagination: { total: 5 },
       });
 
@@ -255,7 +255,7 @@ describe("customers.hooks", () => {
       const entityId = "entity-123";
 
       sdk.customers.list.mockResolvedValue({
-        data: [{ id: "customer-1", name: "Test", email: "test@example.com", created_at: "" }],
+        data: [{ id: "customer-1", name: "Test", email: "test@example.com", created_at: "" }] as any,
         pagination: { total: 1 },
       });
 
@@ -281,7 +281,7 @@ describe("customers.hooks", () => {
       const { wrapper, queryClient } = createTestSetup({ sdk });
 
       sdk.customers.list.mockResolvedValue({
-        data: [{ id: "customer-1", name: "Test", email: "test@example.com", created_at: "" }],
+        data: [{ id: "customer-1", name: "Test", email: "test@example.com", created_at: "" }] as any,
         pagination: { total: 1 },
       });
 

package/src/components/customers/customers.hooks.ts

@@ -54,4 +54,9 @@ export const {
   useCreateResource: useCreateCustomer,
   useUpdateResource: useUpdateCustomer,
   useDeleteResource: useDeleteCustomer,
-} = createResourceHooks<Customer, CreateCustomerBody>("customers", CUSTOMERS_CACHE_KEY);
+  useRestoreResource: useRestoreCustomer,
+  usePermanentDeleteResource: usePermanentDeleteCustomer,
+} = createResourceHooks<Customer, CreateCustomerBody>("customers", CUSTOMERS_CACHE_KEY, {
+  restoreMethodName: "restoreCustomer",
+  permanentDeleteMethodName: "permanentDeleteCustomer",
+});