@spaceinvoices/react-ui 0.4.8 → 0.4.11

package/src/components/table/search-input.tsx

@@ -9,12 +9,21 @@ type SearchInputProps = {
   onSearch: (value: string | null) => void;
   placeholder?: string;
   debounceMs?: number;
+  ariaLabel?: string;
+  clearAriaLabel?: string;
 };
 
 /**
  * Search input with optional clear button and form submission
  */
-export function SearchInput({ initialValue = "", onSearch, placeholder = "Search...", debounceMs }: SearchInputProps) {
+export function SearchInput({
+  initialValue = "",
+  onSearch,
+  placeholder = "Search...",
+  debounceMs,
+  ariaLabel = "Search",
+  clearAriaLabel = "Clear search",
+}: SearchInputProps) {
   const [value, setValue] = useState(initialValue);
   const [isFocused, setIsFocused] = useState(false);
 
@@ -66,7 +75,7 @@ export function SearchInput({ initialValue = "", onSearch, placeholder = "Search
       <Input
         type="search"
         role="searchbox"
-        aria-label="Search"
+        aria-label={ariaLabel}
         placeholder={placeholder}
         value={value}
         onChange={handleChange}
@@ -92,7 +101,7 @@ export function SearchInput({ initialValue = "", onSearch, placeholder = "Search
           size="sm"
           onClick={handleClear}
           className="absolute top-1/2 right-1 z-10 h-6 w-6 -translate-y-1/2 p-0 hover:bg-transparent"
-          aria-label="Clear search"
+          aria-label={clearAriaLabel}
         >
           <X className="h-3 w-3 text-muted-foreground" />
         </Button>

package/src/components/table/selection-toolbar.tsx

@@ -6,6 +6,8 @@ type SelectionToolbarProps = {
   selectedCount: number;
   onExportPdfs?: () => void;
   onCopyToInvoice?: () => void;
+  copyToInvoiceDisabled?: boolean;
+  copyToInvoiceTooltip?: string;
   onRetryFiscalization?: () => void;
   retryFiscalizationDisabled?: boolean;
   retryFiscalizationTooltip?: string;
@@ -17,6 +19,8 @@ export function SelectionToolbar({
   selectedCount,
   onExportPdfs,
   onCopyToInvoice,
+  copyToInvoiceDisabled,
+  copyToInvoiceTooltip,
   onRetryFiscalization,
   retryFiscalizationDisabled,
   retryFiscalizationTooltip,
@@ -34,12 +38,25 @@ export function SelectionToolbar({
           {t("Export PDFs")}
         </Button>
       )}
-      {onCopyToInvoice && (
-        <Button variant="outline" size="sm" onClick={onCopyToInvoice}>
-          <FileText className="mr-1.5 size-4" />
-          {t("Copy to Invoice")}
-        </Button>
-      )}
+      {onCopyToInvoice &&
+        (copyToInvoiceDisabled && copyToInvoiceTooltip ? (
+          <Tooltip>
+            <TooltipTrigger>
+              <span>
+                <Button variant="outline" size="sm" disabled>
+                  <FileText className="mr-1.5 size-4" />
+                  {t("Copy to Invoice")}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{copyToInvoiceTooltip}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Button variant="outline" size="sm" onClick={onCopyToInvoice}>
+            <FileText className="mr-1.5 size-4" />
+            {t("Copy to Invoice")}
+          </Button>
+        ))}
       {onRetryFiscalization &&
         (retryFiscalizationDisabled && retryFiscalizationTooltip ? (
           <Tooltip>

package/src/components/table/table-empty-state.tsx

@@ -1,7 +1,44 @@
-import { Sprout } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import {
+  Building2,
+  CreditCard,
+  FileCheck,
+  FileMinus,
+  FileOutput,
+  FilePlus,
+  FileText,
+  Landmark,
+  Link2,
+  Package,
+  RefreshCw,
+  ShoppingCart,
+  Sprout,
+  Users,
+} from "lucide-react";
 
 import { Button } from "@/ui/components/ui/button";
 
+// Generic subtitle key — each list component's locale files override this
+// with a resource-specific translation (e.g. "Get started by creating your first invoice")
+const GENERIC_SUBTITLE = "Get started by creating your first entry";
+
+const RESOURCE_ICONS: Record<string, LucideIcon> = {
+  invoice: FileText,
+  estimate: FileCheck,
+  credit_note: FileMinus,
+  advance_invoice: FilePlus,
+  "delivery note": FileOutput,
+  delivery_note: FileOutput,
+  customer: Users,
+  item: Package,
+  tax: Landmark,
+  payment: CreditCard,
+  "recurring-invoice": RefreshCw,
+  order: ShoppingCart,
+  "order-integration": Link2,
+  entity: Building2,
+};
+
 type TableEmptyStateProps = {
   resource: string;
   createNewLink?: string;
@@ -21,6 +58,7 @@ const ROW_HEIGHT = 53;
  * Empty state shown when table has no data
  */
 export function TableEmptyState({
+  resource,
   createNewLink,
   createNewTrigger,
   onCreateNew,
@@ -30,13 +68,15 @@ export function TableEmptyState({
   // Calculate height based on row count (min 200px)
   const height = Math.max(rows * ROW_HEIGHT, 200);
 
+  const Icon = RESOURCE_ICONS[resource] ?? Sprout;
+
   return (
     <div className="flex flex-col items-center justify-center gap-3" style={{ height }}>
-      <Sprout size={70} strokeWidth={0.35} className="text-muted-foreground" />
+      <Icon size={70} strokeWidth={0.35} className="text-muted-foreground" />
       <div className="space-y-1 text-center">
         <p className="font-light text-lg text-muted-foreground">{t("Your list is empty")}</p>
         {(createNewLink || createNewTrigger || onCreateNew) && (
-          <p className="text-muted-foreground text-sm">{t("Get started by creating your first entry")}</p>
+          <p className="text-muted-foreground text-sm">{t(GENERIC_SUBTITLE)}</p>
         )}
       </div>
       {createNewLink && (

package/src/components/table/table-no-results.tsx

@@ -1,4 +1,4 @@
-import { FileX } from "lucide-react";
+import { SearchX } from "lucide-react";
 
 import { Button } from "@/ui/components/ui/button";
 import { TableCell, TableRow } from "@/ui/components/ui/table";
@@ -31,9 +31,9 @@ export function TableNoResults({ search, onClear, rows = 10, t = (key) => key }:
     <TableRow className="hover:bg-transparent">
       <TableCell colSpan={100} className="text-center align-middle" style={{ height }}>
         <div className="flex flex-col items-center gap-3">
-          <FileX size={32} strokeWidth={1.5} className="text-muted-foreground" />
+          <SearchX size={70} strokeWidth={0.35} className="text-muted-foreground" />
           <div className="space-y-1">
-            <p className="font-medium text-muted-foreground">{t("No results found")}</p>
+            <p className="font-light text-lg text-muted-foreground">{t("No results found")}</p>
             {handleClear && <p className="text-muted-foreground text-sm">{t("Try adjusting your search criteria")}</p>}
           </div>
           {handleClear && (

package/src/components/table/table-pagination.tsx

@@ -6,12 +6,13 @@ type PaginationProps = {
   prevCursor?: string | null;
   nextCursor?: string | null;
   onPageChange: (cursor: { prev?: string; next?: string }) => void;
+  t?: (key: string) => string;
 };
 
 /**
  * Cursor-based pagination controls
  */
-export function Pagination({ prevCursor, nextCursor, onPageChange }: PaginationProps) {
+export function Pagination({ prevCursor, nextCursor, onPageChange, t = (key) => key }: PaginationProps) {
   const hasPrevious = Boolean(prevCursor);
   const hasNext = Boolean(nextCursor);
 
@@ -23,7 +24,7 @@ export function Pagination({ prevCursor, nextCursor, onPageChange }: PaginationP
         className="h-8 w-8 cursor-pointer p-0"
         onClick={() => onPageChange({ prev: prevCursor ?? undefined })}
         disabled={!hasPrevious}
-        aria-label="Previous page"
+        aria-label={t("Previous page")}
       >
         <ChevronLeft className="h-4 w-4" />
       </Button>
@@ -33,7 +34,7 @@ export function Pagination({ prevCursor, nextCursor, onPageChange }: PaginationP
         className="h-8 w-8 cursor-pointer p-0"
         onClick={() => onPageChange({ next: nextCursor ?? undefined })}
         disabled={!hasNext}
-        aria-label="Next page"
+        aria-label={t("Next page")}
       >
         <ChevronRight className="h-4 w-4" />
       </Button>

package/src/components/table/types.ts

@@ -34,6 +34,7 @@ export type TableQueryParams = {
   // HTTP-specific filter params (for request logs)
   filter_method?: string; // GET, POST, PATCH, PUT, DELETE
   filter_http_status?: string; // 2xx, 4xx, 5xx
+  filter_client_name?: string;
 };
 
 /**

package/src/components/tax-reports/index.ts

@@ -1 +1,2 @@
 export { KirExportForm } from "./kir-export-form";
+export { SloveniaYearlyExportForm } from "./slovenia-yearly-export-form";

package/src/components/tax-reports/kir-export-form.tsx

@@ -1,9 +1,8 @@
-import type SDK from "@spaceinvoices/js-sdk";
-
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
 import { Download, Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
+import type SDK from "@spaceinvoices/js-sdk";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
@@ -25,13 +24,52 @@ function getPreviousMonth(): { year: number; month: number } {
 type KirExportFormProps = {
   sdk: SDK;
   entityId: string;
-  t: TFunction;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
   onLoadingChange?: (isLoading: boolean, toastId: string | number | null) => void;
-};
-
-export function KirExportForm({ sdk, entityId, t, onSuccess, onError, onLoadingChange }: KirExportFormProps) {
+} & ComponentTranslationProps;
+
+const translations = {
+  en: {
+    "kir-export.year": "Year",
+    "kir-export.period-type": "Period type",
+    "kir-export.period-types.month": "Month",
+    "kir-export.period-types.quarter": "Quarter",
+    "kir-export.month": "Month",
+    "kir-export.quarter": "Quarter",
+    "kir-export.months.1": "January",
+    "kir-export.months.2": "February",
+    "kir-export.months.3": "March",
+    "kir-export.months.4": "April",
+    "kir-export.months.5": "May",
+    "kir-export.months.6": "June",
+    "kir-export.months.7": "July",
+    "kir-export.months.8": "August",
+    "kir-export.months.9": "September",
+    "kir-export.months.10": "October",
+    "kir-export.months.11": "November",
+    "kir-export.months.12": "December",
+    "kir-export.quarters.1": "Q1",
+    "kir-export.quarters.2": "Q2",
+    "kir-export.quarters.3": "Q3",
+    "kir-export.quarters.4": "Q4",
+    "kir-export.file-preview": "File preview",
+    "kir-export.exporting": "Exporting...",
+    "kir-export.export-button": "Export KIR ZIP",
+  },
+} as const;
+
+export function KirExportForm({
+  sdk,
+  entityId,
+  t: translateFn,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+  onLoadingChange,
+}: KirExportFormProps) {
+  const t = createTranslation({ t: translateFn, namespace, locale, translations });
   const defaultPeriod = getPreviousMonth();
   const [year, setYear] = useState(defaultPeriod.year);
   const [periodType, setPeriodType] = useState<PeriodType>("month");

package/src/components/tax-reports/slovenia-tax-profile-step.tsx

@@ -0,0 +1,191 @@
+import { AlertCircle } from "lucide-react";
+import type { ChangeEvent } from "react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+export type SloveniaTaxProfileFormState = {
+  business_form: "sp" | "doo" | "dno" | "club" | "";
+  income_tax_regime: "normirani" | "dejanski" | "";
+  vat_profile: "standard" | "special_vat_identified" | "";
+  tax_residency: "resident" | "non_resident" | "";
+  activity_code: string;
+  registration_number: string;
+  normiranec_insurance_basis: "full_time_self_employed" | "other" | "";
+};
+
+type SloveniaTaxProfileStepProps = {
+  form: SloveniaTaxProfileFormState;
+  t: (key: string) => string;
+  onFieldChange: (field: keyof SloveniaTaxProfileFormState, value: string) => void;
+  unsupportedReason: string | null;
+  year: number;
+  onYearChange: (year: number) => void;
+  yearOptions: number[];
+};
+
+export function SloveniaTaxProfileStep({
+  form,
+  t,
+  onFieldChange,
+  unsupportedReason,
+  year,
+  onYearChange,
+  yearOptions,
+}: SloveniaTaxProfileStepProps) {
+  const businessFormLabel =
+    form.business_form ? t(`slovenia-yearly.profile.business-form.options.${form.business_form}`) : undefined;
+  const regimeLabel =
+    form.income_tax_regime ? t(`slovenia-yearly.profile.regime.options.${form.income_tax_regime}`) : undefined;
+  const residencyLabel =
+    form.tax_residency ? t(`slovenia-yearly.profile.residency.options.${form.tax_residency}`) : undefined;
+  const vatProfileLabel = form.vat_profile
+    ? t(`slovenia-yearly.profile.vat-profile.options.${form.vat_profile}`)
+    : undefined;
+  const insuranceBasisLabel = form.normiranec_insurance_basis
+    ? t(`slovenia-yearly.profile.insurance-basis.options.${form.normiranec_insurance_basis}`)
+    : undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-year">{t("slovenia-yearly.profile.year.label")}</Label>
+          <Select value={String(year)} onValueChange={(value) => onYearChange(Number(value))}>
+            <SelectTrigger id="si-yearly-year">
+              <SelectValue>{year}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {yearOptions.map((option) => (
+                <SelectItem key={option} value={String(option)}>
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-business-form">{t("slovenia-yearly.profile.business-form.label")}</Label>
+          <Select
+            value={form.business_form || undefined}
+            onValueChange={(value) => onFieldChange("business_form", value ?? "")}
+          >
+            <SelectTrigger id="si-yearly-business-form">
+              <SelectValue placeholder={t("slovenia-yearly.profile.business-form.placeholder")}>
+                {businessFormLabel}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="sp">{t("slovenia-yearly.profile.business-form.options.sp")}</SelectItem>
+              <SelectItem value="doo">{t("slovenia-yearly.profile.business-form.options.doo")}</SelectItem>
+              <SelectItem value="dno">{t("slovenia-yearly.profile.business-form.options.dno")}</SelectItem>
+              <SelectItem value="club">{t("slovenia-yearly.profile.business-form.options.club")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-regime">{t("slovenia-yearly.profile.regime.label")}</Label>
+          <Select
+            value={form.income_tax_regime || undefined}
+            onValueChange={(value) => onFieldChange("income_tax_regime", value ?? "")}
+          >
+            <SelectTrigger id="si-yearly-regime">
+              <SelectValue placeholder={t("slovenia-yearly.profile.regime.placeholder")}>{regimeLabel}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="normirani">{t("slovenia-yearly.profile.regime.options.normirani")}</SelectItem>
+              <SelectItem value="dejanski">{t("slovenia-yearly.profile.regime.options.dejanski")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-residency">{t("slovenia-yearly.profile.residency.label")}</Label>
+          <Select
+            value={form.tax_residency || undefined}
+            onValueChange={(value) => onFieldChange("tax_residency", value ?? "")}
+          >
+            <SelectTrigger id="si-yearly-residency">
+              <SelectValue placeholder={t("slovenia-yearly.profile.residency.placeholder")}>{residencyLabel}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="resident">{t("slovenia-yearly.profile.residency.options.resident")}</SelectItem>
+              <SelectItem value="non_resident">{t("slovenia-yearly.profile.residency.options.non_resident")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-vat-profile">{t("slovenia-yearly.profile.vat-profile.label")}</Label>
+          <Select
+            value={form.vat_profile || undefined}
+            onValueChange={(value) => onFieldChange("vat_profile", value ?? "")}
+          >
+            <SelectTrigger id="si-yearly-vat-profile">
+              <SelectValue placeholder={t("slovenia-yearly.profile.vat-profile.placeholder")}>
+                {vatProfileLabel}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="standard">{t("slovenia-yearly.profile.vat-profile.options.standard")}</SelectItem>
+              <SelectItem value="special_vat_identified">
+                {t("slovenia-yearly.profile.vat-profile.options.special_vat_identified")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-insurance-basis">{t("slovenia-yearly.profile.insurance-basis.label")}</Label>
+          <Select
+            value={form.normiranec_insurance_basis || undefined}
+            onValueChange={(value) => onFieldChange("normiranec_insurance_basis", value ?? "")}
+          >
+            <SelectTrigger id="si-yearly-insurance-basis">
+              <SelectValue placeholder={t("slovenia-yearly.profile.insurance-basis.placeholder")}>
+                {insuranceBasisLabel}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="full_time_self_employed">
+                {t("slovenia-yearly.profile.insurance-basis.options.full_time_self_employed")}
+              </SelectItem>
+              <SelectItem value="other">{t("slovenia-yearly.profile.insurance-basis.options.other")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-activity-code">{t("slovenia-yearly.profile.activity-code.label")}</Label>
+          <Input
+            id="si-yearly-activity-code"
+            value={form.activity_code}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => onFieldChange("activity_code", event.target.value)}
+            placeholder={t("slovenia-yearly.profile.activity-code.placeholder")}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="si-yearly-registration-number">{t("slovenia-yearly.profile.registration-number.label")}</Label>
+          <Input
+            id="si-yearly-registration-number"
+            value={form.registration_number}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => onFieldChange("registration_number", event.target.value)}
+            placeholder={t("slovenia-yearly.profile.registration-number.placeholder")}
+          />
+        </div>
+      </div>
+
+      {unsupportedReason && (
+        <Alert>
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>{t("slovenia-yearly.profile.unsupported.title")}</AlertTitle>
+          <AlertDescription>{unsupportedReason}</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}