@spaceinvoices/react-ui 0.4.3 → 0.4.4

package/src/components/documents/view/document-sidebar.tsx

@@ -0,0 +1,151 @@
+import type {
+  AdvanceInvoice,
+  CreditNote,
+  DeliveryNote,
+  DocumentRelation,
+  Estimate,
+  Invoice,
+  Payment,
+} from "@spaceinvoices/js-sdk";
+import { Card, CardContent } from "@/ui/components/ui/card";
+import { Separator } from "@/ui/components/ui/separator";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { FiscalizationStatusCard } from "../../invoices/view/fiscalization-status-card";
+import { DocumentActivitiesList } from "./document-activities-list";
+import { DocumentDetailsCard } from "./document-details-card";
+import { DocumentPaymentsList } from "./document-payments-list";
+import { DocumentRelationsList } from "./document-relations-list";
+
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
+
+interface DocumentSidebarProps extends ComponentTranslationProps {
+  document: Document;
+  documentType: DocumentType;
+  entityId: string;
+  locale?: string;
+  currentUserId?: string;
+  /** Show payments section */
+  showPayments?: boolean;
+  onAddPayment?: () => void;
+  onEditPayment?: (payment: Payment) => void;
+  onPaymentDeleteSuccess?: () => void;
+  onPaymentDeleteError?: (error: string) => void;
+  /** Navigate to a related document */
+  onNavigateRelation?: (documentId: string) => void;
+  /** FURS fiscalization */
+  showFurs?: boolean;
+  fursFiscalizationData?: any;
+  /** FINA fiscalization */
+  showFina?: boolean;
+  finaFiscalizationData?: any;
+  onRetryFiscalization?: () => void;
+  isRetryingFiscalization?: boolean;
+}
+
+export function DocumentSidebar({
+  document,
+  documentType,
+  entityId,
+  locale = "en",
+  currentUserId,
+  showPayments,
+  onAddPayment,
+  onEditPayment,
+  onPaymentDeleteSuccess,
+  onPaymentDeleteError,
+  onNavigateRelation,
+  showFurs,
+  fursFiscalizationData,
+  showFina,
+  finaFiscalizationData,
+  onRetryFiscalization,
+  isRetryingFiscalization,
+  ...i18nProps
+}: DocumentSidebarProps) {
+  const documentRelations = (document as unknown as { document_relations?: DocumentRelation[] }).document_relations;
+  const hasRelations = documentRelations && documentRelations.length > 0;
+
+  return (
+    <Card size="sm">
+      <CardContent className="space-y-5">
+        <DocumentDetailsCard
+          variant="inline"
+          document={document}
+          documentType={documentType}
+          locale={locale}
+          {...i18nProps}
+        />
+
+        {showPayments && (
+          <>
+            <Separator />
+            <DocumentPaymentsList
+              variant="inline"
+              documentId={document.id}
+              documentType={documentType as "invoice" | "credit_note" | "advance_invoice"}
+              entityId={entityId}
+              currencyCode={document.currency_code}
+              locale={locale}
+              onAddPayment={onAddPayment}
+              onEditPayment={onEditPayment}
+              onDeleteSuccess={onPaymentDeleteSuccess}
+              onDeleteError={onPaymentDeleteError}
+              {...i18nProps}
+            />
+          </>
+        )}
+
+        {hasRelations && (
+          <>
+            <Separator />
+            <DocumentRelationsList
+              variant="inline"
+              documentId={document.id}
+              documentRelations={documentRelations}
+              locale={locale}
+              onNavigate={onNavigateRelation}
+              {...i18nProps}
+            />
+          </>
+        )}
+
+        <Separator />
+        <DocumentActivitiesList
+          variant="inline"
+          documentId={document.id}
+          entityId={entityId}
+          currentUserId={currentUserId}
+          locale={locale}
+          {...i18nProps}
+        />
+
+        {(showFurs || showFina) && (
+          <>
+            <Separator />
+            {showFurs && (
+              <FiscalizationStatusCard
+                variant="inline"
+                fiscalizationType="furs"
+                fiscalizationData={fursFiscalizationData}
+                onRetry={onRetryFiscalization}
+                isRetrying={isRetryingFiscalization}
+                locale={locale}
+              />
+            )}
+            {showFina && (
+              <FiscalizationStatusCard
+                variant="inline"
+                fiscalizationType="fina"
+                fiscalizationData={finaFiscalizationData}
+                onRetry={onRetryFiscalization}
+                isRetrying={isRetryingFiscalization}
+                locale={locale}
+              />
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -2,4 +2,6 @@ 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 { DocumentRelationsList } from "./document-relations-list";
+export { DocumentSidebar } from "./document-sidebar";
 export { useDocumentDownload } from "./use-document-download";

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

@@ -20,10 +20,12 @@ export default {
   "Duplicate estimate": "Angebot duplizieren",
   "Duplicate credit_note": "Gutschrift duplizieren",
   "Duplicate advance_invoice": "Anzahlungsrechnung duplizieren",
+  "Duplicate delivery_note": "Lieferschein duplizieren",
   "Create invoice": "Rechnung erstellen",
   "Create estimate": "Angebot erstellen",
   "Create credit_note": "Gutschrift erstellen",
   "Create advance_invoice": "Anzahlungsrechnung erstellen",
+  "Create delivery_note": "Lieferschein erstellen",
 
   // Details card
   Details: "Details",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Duplicar presupuesto",
   "Duplicate credit_note": "Duplicar nota de crédito",
   "Duplicate advance_invoice": "Duplicar factura anticipada",
+  "Duplicate delivery_note": "Duplicar albarán",
   "Create invoice": "Crear factura",
   "Create estimate": "Crear presupuesto",
   "Create credit_note": "Crear nota de crédito",
   "Create advance_invoice": "Crear factura anticipada",
+  "Create delivery_note": "Crear albarán",
 
   // Details card
   Details: "Detalles",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Dupliquer le devis",
   "Duplicate credit_note": "Dupliquer l'avoir",
   "Duplicate advance_invoice": "Dupliquer la facture d'acompte",
+  "Duplicate delivery_note": "Dupliquer le bon de livraison",
   "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",
+  "Create delivery_note": "Créer un bon de livraison",
 
   // Details card
   Details: "Détails",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Dupliciraj ponudu",
   "Duplicate credit_note": "Dupliciraj knjižno odobrenje",
   "Duplicate advance_invoice": "Dupliciraj avansni račun",
+  "Duplicate delivery_note": "Dupliciraj otpremnicu",
   "Create invoice": "Stvori račun",
   "Create estimate": "Stvori ponudu",
   "Create credit_note": "Stvori knjižno odobrenje",
   "Create advance_invoice": "Stvori avansni račun",
+  "Create delivery_note": "Stvori otpremnicu",
 
   // Details card
   Details: "Pojedinosti",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Duplica preventivo",
   "Duplicate credit_note": "Duplica nota di credito",
   "Duplicate advance_invoice": "Duplica fattura di acconto",
+  "Duplicate delivery_note": "Duplica bolla di consegna",
   "Create invoice": "Crea fattura",
   "Create estimate": "Crea preventivo",
   "Create credit_note": "Crea nota di credito",
   "Create advance_invoice": "Crea fattura di acconto",
+  "Create delivery_note": "Crea bolla di consegna",
 
   // Details card
   Details: "Dettagli",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Offerte dupliceren",
   "Duplicate credit_note": "Creditnota dupliceren",
   "Duplicate advance_invoice": "Voorschotfactuur dupliceren",
+  "Duplicate delivery_note": "Afleverbon dupliceren",
   "Create invoice": "Factuur aanmaken",
   "Create estimate": "Offerte aanmaken",
   "Create credit_note": "Creditnota aanmaken",
   "Create advance_invoice": "Voorschotfactuur aanmaken",
+  "Create delivery_note": "Afleverbon aanmaken",
 
   // Details card
   Details: "Details",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Duplikuj kosztorys",
   "Duplicate credit_note": "Duplikuj notę kredytową",
   "Duplicate advance_invoice": "Duplikuj fakturę zaliczkową",
+  "Duplicate delivery_note": "Duplikuj dowód dostawy",
   "Create invoice": "Utwórz fakturę",
   "Create estimate": "Utwórz kosztorys",
   "Create credit_note": "Utwórz notę kredytową",
   "Create advance_invoice": "Utwórz fakturę zaliczkową",
+  "Create delivery_note": "Utwórz dowód dostawy",
 
   // Details card
   Details: "Szczegóły",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Duplicar orçamento",
   "Duplicate credit_note": "Duplicar nota de crédito",
   "Duplicate advance_invoice": "Duplicar fatura antecipada",
+  "Duplicate delivery_note": "Duplicar guia de remessa",
   "Create invoice": "Criar fatura",
   "Create estimate": "Criar orçamento",
   "Create credit_note": "Criar nota de crédito",
   "Create advance_invoice": "Criar fatura antecipada",
+  "Create delivery_note": "Criar guia de remessa",
 
   // Details card
   Details: "Detalhes",

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

@@ -19,10 +19,12 @@ export default {
   "Duplicate estimate": "Podvoji predračun",
   "Duplicate credit_note": "Podvoji dobropis",
   "Duplicate advance_invoice": "Podvoji avansni račun",
+  "Duplicate delivery_note": "Podvoji dobavnico",
   "Create invoice": "Ustvari račun",
   "Create estimate": "Ustvari predračun",
   "Create credit_note": "Ustvari dobropis",
   "Create advance_invoice": "Ustvari avansni račun",
+  "Create delivery_note": "Ustvari dobavnico",
 
   // Details card
   Details: "Podrobnosti",

package/src/components/documents/view/use-document-download.ts

@@ -38,7 +38,7 @@ export function useDocumentDownload({
   /**
    * Download PDF in specified locale
    */
-  const downloadPdf = async (document: Document, documentType: DocumentType, _locale: string) => {
+  const downloadPdf = async (document: Document, documentType: DocumentType, locale: string) => {
     if (!sdk || !activeEntity?.id) {
       onDownloadError?.("Download failed");
       return;
@@ -51,7 +51,8 @@ export function useDocumentDownload({
       // SDK signature: renderPdf(id, params?, SDKMethodOptions?)
       // entity_id goes in SDKMethodOptions (last arg), not params
       // Note: renderPdf is on invoices module but works with any document ID via /documents/{id}/pdf
-      const blob = await sdk.invoices.renderPdf(document.id, {}, { entity_id: activeEntity.id });
+      const params = locale ? { locale } : {};
+      const blob = await sdk.invoices.renderPdf(document.id, params, { entity_id: activeEntity.id });
       const downloadUrl = window.URL.createObjectURL(blob);
       const link = window.document.createElement("a");
       link.href = downloadUrl;

package/src/components/entities/create-entity-form.tsx

@@ -1,10 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { CreateEntityRequest, Entity } from "@spaceinvoices/js-sdk";
+import type { CompanyRegistryResult, CreateEntityRequest, Entity } from "@spaceinvoices/js-sdk";
+import { useEffect, useRef, useState } from "react";
 import type { Resolver } from "react-hook-form";
 import { useForm } from "react-hook-form";
+import { Autocomplete } from "@/ui/common/autocomplete";
+import { useCompanyRegistrySearch, useIsCountrySupported } from "@/ui/components/company-registry";
 import { FormInput } from "@/ui/components/form";
 import { Button } from "@/ui/components/ui/button";
-import { Form } from "@/ui/components/ui/form";
+import { Checkbox } from "@/ui/components/ui/checkbox";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
 import { type CreateEntitySchema, createEntitySchema } from "@/ui/generated/schemas";
 
 import ButtonLoader from "../button-loader";
@@ -16,6 +20,8 @@ export type CreateEntityFormProps = {
   accountId?: string;
   environment?: string;
   defaultName?: string;
+  countryCode?: string;
+  locale?: string;
   defaultValues?: Partial<CreateEntitySchema>;
   onSuccess?: (data: Entity) => void;
   onError?: (error: unknown) => void;
@@ -29,12 +35,44 @@ export function CreateEntityForm({
   accountId,
   environment,
   defaultName,
+  countryCode,
+  locale = "en",
   defaultValues: extraDefaults,
   onSuccess,
   onError,
 }: CreateEntityFormProps) {
   const translate = (key: string) => t(namespace ? `${namespace}.${key}` : key);
 
+  const countryName = countryCode ? new Intl.DisplayNames([locale], { type: "region" }).of(countryCode) : undefined;
+
+  // Track whether the country code is still valid (cleared when user edits country name)
+  const [activeCountryCode, setActiveCountryCode] = useState<string | undefined>(countryCode);
+  const autoFilledCountryRef = useRef(countryName);
+
+  // Company registry autocomplete state
+  const [nameSearch, setNameSearch] = useState("");
+  const { isSupported: isRegistrySupported } = useIsCountrySupported(activeCountryCode || "");
+  const { data: searchData, isLoading: isSearching } = useCompanyRegistrySearch(activeCountryCode || "", nameSearch);
+  const companies = searchData?.data || [];
+
+  const showAutocomplete = !!activeCountryCode && isRegistrySupported;
+
+  const nameOptions = companies.map((company) => {
+    const addressParts = [company.address, company.city].filter(Boolean);
+    const address = addressParts.join(", ");
+    return {
+      value: company.id,
+      label: (
+        <div className="flex flex-col overflow-hidden py-1">
+          <span className="truncate font-medium">{company.name}</span>
+          {address && <span className="truncate text-muted-foreground text-xs">{address}</span>}
+          {company.tax_number && <span className="truncate text-muted-foreground text-xs">{company.tax_number}</span>}
+        </div>
+      ),
+      company,
+    };
+  });
+
   const form = useForm<CreateEntitySchema>({
     resolver: zodResolver(createEntitySchema) as Resolver<CreateEntitySchema>,
     defaultValues: {
@@ -44,9 +82,11 @@ export function CreateEntityForm({
       post_code: "",
       city: "",
       state: "",
-      country: "",
+      country: countryName || "",
+      country_code: countryCode || "",
       tax_number: "",
       company_number: "",
+      is_tax_subject: true,
       environment: environment as "live" | "sandbox" | undefined,
       ...extraDefaults,
       // defaultName takes priority over extraDefaults.name if provided
@@ -54,6 +94,26 @@ export function CreateEntityForm({
     },
   });
 
+  // Watch country field — clear activeCountryCode when user edits away from auto-filled value
+  const countryValue = form.watch("country");
+  useEffect(() => {
+    if (countryValue !== autoFilledCountryRef.current) {
+      setActiveCountryCode(undefined);
+    } else {
+      setActiveCountryCode(countryCode);
+    }
+  }, [countryValue, countryCode]);
+
+  const handleCompanySelect = (company: CompanyRegistryResult) => {
+    form.setValue("name", company.name);
+    if (company.address) form.setValue("address", company.address);
+    if (company.post_code) form.setValue("post_code", company.post_code);
+    if (company.city) form.setValue("city", company.city);
+    if (company.tax_number) form.setValue("tax_number", company.tax_number);
+    if (company.registration_number) form.setValue("company_number", company.registration_number);
+    setNameSearch("");
+  };
+
   // Wrap onSuccess to reset form only after successful mutation
   const handleSuccess = (data: Entity) => {
     form.reset();
@@ -84,30 +144,122 @@ export function CreateEntityForm({
     }
   };
 
+  const nameValue = form.watch("name");
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit as any)} className="space-y-4">
-        <FormInput control={form.control} name="name" label={translate("Name")} placeholder="Name" required />
+        {showAutocomplete ? (
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {translate("name")}
+                  <span className="ml-1 text-red-500">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Autocomplete
+                    searchValue={nameSearch}
+                    onSearch={(v) => {
+                      setNameSearch(v);
+                      field.onChange(v || undefined);
+                    }}
+                    displayValue={nameValue || ""}
+                    options={nameOptions}
+                    onValueChange={(selectedId) => {
+                      const option = nameOptions.find((o) => o.value === selectedId);
+                      if (option?.company) {
+                        handleCompanySelect(option.company);
+                      }
+                    }}
+                    onBlur={() => {
+                      setNameSearch("");
+                    }}
+                    placeholder={translate("name")}
+                    loading={isSearching}
+                    emptyText={nameSearch.length < 2 ? translate("search-hint") : translate("no-results")}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ) : (
+          <FormInput
+            control={form.control}
+            name="name"
+            label={translate("name")}
+            placeholder={translate("name")}
+            required
+          />
+        )}
 
-        <FormInput control={form.control} name="country" label="Country" placeholder="Country" required />
+        <FormInput
+          control={form.control}
+          name="country"
+          label={translate("country")}
+          placeholder={translate("country")}
+          required
+        />
 
-        <FormInput control={form.control} name="address" label="Address" placeholder="Address" />
+        <FormInput
+          control={form.control}
+          name="address"
+          label={translate("address")}
+          placeholder={translate("address")}
+        />
 
-        <FormInput control={form.control} name="address_2" label="Address 2" placeholder="Address 2" />
+        <FormInput
+          control={form.control}
+          name="address_2"
+          label={translate("address-2")}
+          placeholder={translate("address-2")}
+        />
 
         <div className="grid grid-cols-2 gap-4">
-          <FormInput control={form.control} name="post_code" label="Post code" placeholder="Post code" />
-          <FormInput control={form.control} name="city" label="City" placeholder="City" />
+          <FormInput
+            control={form.control}
+            name="post_code"
+            label={translate("post-code")}
+            placeholder={translate("post-code")}
+          />
+          <FormInput control={form.control} name="city" label={translate("city")} placeholder={translate("city")} />
         </div>
 
-        <FormInput control={form.control} name="state" label="State" placeholder="State" />
+        <FormInput control={form.control} name="state" label={translate("state")} placeholder={translate("state")} />
 
-        <FormInput control={form.control} name="tax_number" label="Tax number" placeholder="Tax number" />
+        <div className="grid grid-cols-[1fr_auto] items-end gap-4">
+          <FormInput
+            control={form.control}
+            name="tax_number"
+            label={translate("tax-number")}
+            placeholder={translate("tax-number")}
+          />
+          <FormField
+            control={form.control}
+            name="is_tax_subject"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center space-x-2 space-y-0 pb-2">
+                <FormControl>
+                  <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+                <FormLabel className="font-normal">{translate("is-tax-subject")}</FormLabel>
+              </FormItem>
+            )}
+          />
+        </div>
 
-        <FormInput control={form.control} name="company_number" label="Company number" placeholder="Company number" />
+        <FormInput
+          control={form.control}
+          name="company_number"
+          label={translate("company-number")}
+          placeholder={translate("company-number")}
+        />
 
         <Button type="submit" className="w-full cursor-pointer" disabled={isPending} aria-busy={isPending}>
-          {isPending ? <ButtonLoader /> : "Create"}
+          {isPending ? <ButtonLoader /> : translate("submit")}
         </Button>
       </form>
     </Form>