@spaceinvoices/react-ui 0.1.1

package/src/components/table/types.ts

@@ -0,0 +1,136 @@
+import type { ReactNode } from "react";
+
+/**
+ * Column definition for table headers and cells
+ */
+export type Column<T> = {
+  /** Unique identifier for the column */
+  id: string;
+  /** Header label or component */
+  header: ReactNode;
+  /** Cell renderer function - returns content for each row */
+  cell: (item: T) => ReactNode;
+  /** Field name for sorting (if different from id) */
+  sortField?: string;
+  /** Whether this column is sortable */
+  sortable?: boolean;
+  /** Text alignment */
+  align?: "left" | "center" | "right";
+  /** Optional CSS class for the column */
+  className?: string;
+};
+
+/**
+ * Query parameters for table data fetching
+ */
+export type TableQueryParams = {
+  order_by?: string;
+  search?: string;
+  prev_cursor?: string;
+  next_cursor?: string;
+  entity_id?: string;
+  limit?: number;
+  query?: string; // JSON string for API query filters (built from filter_* params)
+  // URL-friendly filter params (used for URL state, converted to query for API)
+  filter_date_field?: string;
+  filter_date_from?: string; // YYYY-MM-DD
+  filter_date_to?: string; // YYYY-MM-DD
+  filter_status?: string; // comma-separated: "paid,unpaid,overdue,voided"
+  // HTTP-specific filter params (for request logs)
+  filter_method?: string; // GET, POST, PATCH, PUT, DELETE
+  filter_http_status?: string; // 2xx, 4xx, 5xx
+};
+
+/**
+ * Date range for filtering
+ */
+export type DateRange = {
+  from?: Date;
+  to?: Date;
+};
+
+/**
+ * Date filter state
+ */
+export type DateFilter = {
+  field: string;
+  range: DateRange;
+};
+
+/**
+ * Status filter options (invoice status)
+ */
+export type StatusFilter = "paid" | "unpaid" | "overdue" | "voided";
+
+/**
+ * HTTP method filter options
+ */
+export type HttpMethodFilter = "GET" | "POST" | "PATCH" | "PUT" | "DELETE";
+
+/**
+ * HTTP status code filter options (prefix patterns like 2xx, 4xx, 5xx)
+ */
+export type HttpStatusCodeFilter = "2xx" | "4xx" | "5xx";
+
+/**
+ * Filterable date field definition
+ */
+export type FilterableDateField = {
+  id: string;
+  label: string;
+};
+
+/**
+ * Filter configuration for tables
+ */
+export type FilterConfig = {
+  dateFields?: FilterableDateField[];
+  statusFilter?: boolean;
+  /** Enable HTTP method filter (for request logs) */
+  httpMethodFilter?: boolean;
+  /** Enable HTTP status code filter (for request logs) */
+  httpStatusCodeFilter?: boolean;
+};
+
+/**
+ * Current filter state
+ */
+export type FilterState = {
+  dateFilter?: DateFilter;
+  statusFilters?: StatusFilter[];
+  /** Selected HTTP method (for request logs) */
+  httpMethod?: HttpMethodFilter;
+  /** Selected HTTP status code pattern (for request logs) */
+  httpStatusCode?: HttpStatusCodeFilter;
+};
+
+/**
+ * Pagination metadata structure
+ */
+export type PaginationMetadata = {
+  total: number;
+  next_cursor: string | null;
+  prev_cursor: string | null;
+  has_more: boolean;
+};
+
+/**
+ * Response structure from table data fetch
+ */
+export type TableQueryResponse<T> = {
+  data: T[];
+  pagination: PaginationMetadata;
+};
+
+/**
+ * Props for list table components
+ */
+export type ListTableProps<T> = {
+  createNewTrigger?: ReactNode;
+  queryParams?: TableQueryParams;
+  onChangeParams?: (params: TableQueryParams) => void;
+  /** When true, disables URL sync entirely (for embedded tables like dashboard) */
+  disableUrlSync?: boolean;
+  onRowClick?: (item: T) => void;
+  entityId?: string;
+};

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

@@ -0,0 +1 @@
+export { KirExportForm } from "./kir-export-form";

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

@@ -0,0 +1,172 @@
+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 { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+type PeriodType = "month" | "quarter";
+
+function getCurrentYear(): number {
+  return new Date().getFullYear();
+}
+
+function getPreviousMonth(): { year: number; month: number } {
+  const now = new Date();
+  const prevMonth = now.getMonth(); // 0-indexed, so this is already previous month
+  const year = prevMonth === 0 ? now.getFullYear() - 1 : now.getFullYear();
+  const month = prevMonth === 0 ? 12 : prevMonth;
+  return { year, month };
+}
+
+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) {
+  const defaultPeriod = getPreviousMonth();
+  const [year, setYear] = useState(defaultPeriod.year);
+  const [periodType, setPeriodType] = useState<PeriodType>("month");
+  const [month, setMonth] = useState(defaultPeriod.month);
+  const [quarter, setQuarter] = useState(Math.ceil(defaultPeriod.month / 3));
+  const [isExporting, setIsExporting] = useState(false);
+
+  const toastIdRef = useRef<string | number | null>(null);
+
+  // Generate year options (current year + 5 previous years)
+  const currentYear = getCurrentYear();
+  const yearOptions = Array.from({ length: 6 }, (_, i) => currentYear - i);
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    onLoadingChange?.(true, null);
+
+    try {
+      const blob = await sdk.taxReports.generateKirExport(
+        {
+          year: year.toString(),
+          month: periodType === "month" ? month.toString() : undefined,
+          quarter: periodType === "quarter" ? quarter.toString() : undefined,
+        },
+        { entity_id: entityId },
+      );
+
+      // Generate filename
+      const fileName = `KIR_${year}_${periodType === "month" ? `M${month}` : `Q${quarter}`}.zip`;
+
+      // Download the file
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(downloadUrl);
+      }, 1000);
+
+      onSuccess?.(fileName);
+    } catch (error) {
+      console.error("KIR export error:", error);
+      onError?.(error instanceof Error ? error : new Error("Unknown error"));
+    } finally {
+      setIsExporting(false);
+      onLoadingChange?.(false, toastIdRef.current);
+      toastIdRef.current = null;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Year Selection */}
+      <div className="space-y-2">
+        <Label htmlFor="kir-year">{t("kir-export.year")}</Label>
+        <Select value={year.toString()} onValueChange={(v) => setYear(Number(v))}>
+          <SelectTrigger id="kir-year">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {yearOptions.map((y) => (
+              <SelectItem key={y} value={y.toString()}>
+                {y}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Period Type Selection */}
+      <div className="space-y-2">
+        <Label htmlFor="kir-period-type">{t("kir-export.period-type")}</Label>
+        <Select value={periodType} onValueChange={(v) => setPeriodType(v as PeriodType)}>
+          <SelectTrigger id="kir-period-type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="month">{t("kir-export.period-types.month")}</SelectItem>
+            <SelectItem value="quarter">{t("kir-export.period-types.quarter")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Month/Quarter Selection */}
+      {periodType === "month" ? (
+        <div className="space-y-2">
+          <Label htmlFor="kir-month">{t("kir-export.month")}</Label>
+          <Select value={month.toString()} onValueChange={(v) => setMonth(Number(v))}>
+            <SelectTrigger id="kir-month">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
+                <SelectItem key={m} value={m.toString()}>
+                  {t(`kir-export.months.${m}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <Label htmlFor="kir-quarter">{t("kir-export.quarter")}</Label>
+          <Select value={quarter.toString()} onValueChange={(v) => setQuarter(Number(v))}>
+            <SelectTrigger id="kir-quarter">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[1, 2, 3, 4].map((q) => (
+                <SelectItem key={q} value={q.toString()}>
+                  {t(`kir-export.quarters.${q}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* Export Button */}
+      <Button onClick={handleExport} disabled={isExporting} className="w-full">
+        {isExporting ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t("kir-export.exporting")}
+          </>
+        ) : (
+          <>
+            <Download className="mr-2 h-4 w-4" />
+            {t("kir-export.export-button")}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/components/taxes/create-tax-form/create-tax-form.tsx

@@ -0,0 +1,112 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateTaxRequest, Tax } from "@spaceinvoices/js-sdk";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { FormInput } from "@/ui/components/form";
+import { Checkbox } from "@/ui/components/ui/checkbox";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "@/ui/components/ui/form";
+import { createTaxSchema as baseCreateTaxSchema } from "@/ui/generated/schemas";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+// Extend base schema with is_default field
+const createTaxSchema = baseCreateTaxSchema.extend({
+  is_default: z.boolean().optional(),
+});
+type CreateTaxSchema = z.infer<typeof createTaxSchema>;
+
+import { useCreateTax } from "../taxes.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type CreateTaxFormProps = {
+  entityId: string;
+  onSuccess?: (tax: Tax) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function CreateTaxForm({
+  entityId,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: CreateTaxFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  const form = useForm<CreateTaxSchema>({
+    resolver: zodResolver(createTaxSchema),
+    defaultValues: {
+      name: "",
+      tax_rates: [{ rate: undefined }],
+      is_default: false,
+    },
+  });
+
+  const { mutate: createTax, isPending } = useCreateTax({
+    entityId,
+    onSuccess: (tax, _variables, _context) => {
+      onSuccess?.(tax);
+      form.reset();
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the tax"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreateTaxSchema) => {
+    // SDK accepts both Date and string for date fields, no conversion needed
+    createTax(values as CreateTaxRequest);
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormInput control={form.control} name="name" label={t("Name")} placeholder={t("Enter name")} />
+
+        <FormInput
+          control={form.control}
+          name="tax_rates.0.rate"
+          label={t("Rate (%)")}
+          placeholder={t("Enter rate")}
+          type="number"
+        />
+
+        <FormField
+          control={form.control}
+          name="is_default"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+              <FormControl>
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+              <FormLabel className="font-normal">{t("Set as default tax")}</FormLabel>
+            </FormItem>
+          )}
+        />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}

package/src/components/taxes/create-tax-form/locales/de.ts

@@ -0,0 +1,8 @@
+export default {
+  Name: "Name",
+  "Enter name": "Name eingeben",
+  "Rate (%)": "Satz (%)",
+  "Enter rate": "Satz eingeben",
+  "Set as default tax": "Als Standardsteuer festlegen",
+  "There was an error creating the tax": "Beim Erstellen der Steuer ist ein Fehler aufgetreten",
+};

package/src/components/taxes/create-tax-form/locales/en.ts

@@ -0,0 +1,7 @@
+export default {
+  Name: "Name",
+  "Enter name": "Enter name",
+  "Rate (%)": "Rate (%)",
+  "Enter rate": "Enter rate",
+  "There was an error creating the tax": "There was an error creating the tax",
+};

package/src/components/taxes/create-tax-form/locales/sl.ts

@@ -0,0 +1,8 @@
+export default {
+  Name: "Ime",
+  "Enter name": "Vnesite ime",
+  "Rate (%)": "Stopnja (%)",
+  "Enter rate": "Vnesite stopnjo",
+  "Set as default tax": "Nastavi kot privzeti davek",
+  "There was an error creating the tax": "Pri ustvarjanju davka je prišlo do napake",
+};

package/src/components/taxes/tax-list-table/locales/de.ts

@@ -0,0 +1,11 @@
+export default {
+  Name: "Name",
+  "Tax Rates": "Steuersätze",
+  Created: "Erstellt",
+  Default: "Standard",
+  "Unnamed Tax": "Unbenannte Steuer",
+  "Open menu": "Menü öffnen",
+  Actions: "Aktionen",
+  "Copy tax ID": "Steuer-ID kopieren",
+  "View tax": "Steuer anzeigen",
+};

package/src/components/taxes/tax-list-table/locales/en.ts

@@ -0,0 +1,10 @@
+export default {
+  Name: "Name",
+  "Tax Rates": "Tax Rates",
+  Created: "Created",
+  "Unnamed Tax": "Unnamed Tax",
+  "Open menu": "Open menu",
+  Actions: "Actions",
+  "Copy tax ID": "Copy tax ID",
+  "View tax": "View tax",
+};

package/src/components/taxes/tax-list-table/locales/sl.ts

@@ -0,0 +1,11 @@
+export default {
+  Name: "Ime",
+  "Tax Rates": "Davčne stopnje",
+  Created: "Ustvarjeno",
+  Default: "Privzeto",
+  "Unnamed Tax": "Neimenovan davek",
+  "Open menu": "Odpri meni",
+  Actions: "Akcije",
+  "Copy tax ID": "Kopiraj ID davka",
+  "View tax": "Poglej davek",
+};

package/src/components/taxes/tax-list-table/tax-list-header.tsx

@@ -0,0 +1,29 @@
+import { TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+import { SortableHeader } from "../../table/sortable-header";
+
+type TaxListHeaderProps = {
+  orderBy?: string;
+  onSort?: (order: string | null) => void;
+  t: (key: string) => string;
+};
+
+export default function TaxListHeader({ orderBy, onSort, t }: TaxListHeaderProps) {
+  return (
+    <TableHeader>
+      <TableRow>
+        <TableHead>
+          <SortableHeader field="name" currentOrder={orderBy} onSort={onSort}>
+            {t("Name")}
+          </SortableHeader>
+        </TableHead>
+        <TableHead>{t("Tax Rates")}</TableHead>
+        <TableHead>
+          <SortableHeader field="created_at" currentOrder={orderBy} onSort={onSort}>
+            {t("Created")}
+          </SortableHeader>
+        </TableHead>
+        <TableHead className="text-right" />
+      </TableRow>
+    </TableHeader>
+  );
+}

package/src/components/taxes/tax-list-table/tax-list-row-actions.tsx

@@ -0,0 +1,43 @@
+import type { Tax } from "@spaceinvoices/js-sdk";
+import { MoreHorizontal } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+
+type TaxListRowActionsProps = {
+  tax: Tax;
+  t: (key: string) => string;
+};
+
+export default function TaxListRowActions({ tax, t }: TaxListRowActionsProps) {
+  const handleViewTax = () => {
+    window.location.href = `/app/taxes/${tax.id}`;
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 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(tax.id)}>
+          {t("Copy tax ID")}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer" onClick={handleViewTax}>
+          {t("View tax")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/taxes/tax-list-table/tax-list-row.tsx

@@ -0,0 +1,46 @@
+import type { Tax } from "@spaceinvoices/js-sdk";
+import { Percent } from "lucide-react";
+import { Badge } from "@/ui/components/ui/badge";
+import { TableCell, TableRow } from "@/ui/components/ui/table";
+import { Button } from "../../ui/button";
+import TaxListRowActions from "./tax-list-row-actions";
+
+type TaxListRowProps = {
+  tax: Tax;
+  onRowClick?: (tax: Tax) => void;
+  t: (key: string) => string;
+};
+
+export default function TaxListRow({ tax, onRowClick, t }: TaxListRowProps) {
+  const formatTaxRates = (taxRates: Tax["tax_rates"]) => {
+    if (!taxRates || taxRates.length === 0) return "-";
+    return taxRates.map((rate) => `${rate.rate}%`).join(", ");
+  };
+
+  const formatDate = (date: string | Date) => {
+    return new Date(date).toLocaleDateString();
+  };
+
+  return (
+    <TableRow>
+      <TableCell className="font-medium">
+        <div className="flex items-center gap-2">
+          <Button variant="link" className="py-0 underline" onClick={() => onRowClick?.(tax)}>
+            <Percent className="h-4 w-4 flex-shrink-0" />
+            {tax.name || t("Unnamed Tax")}
+          </Button>
+          {tax.is_default && (
+            <Badge variant="secondary" className="text-xs">
+              {t("Default")}
+            </Badge>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>{formatTaxRates(tax.tax_rates)}</TableCell>
+      <TableCell>{formatDate(tax.created_at)}</TableCell>
+      <TableCell className="text-right">
+        <TaxListRowActions tax={tax} t={t} />
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/taxes/tax-list-table/tax-list-table.tsx

@@ -0,0 +1,59 @@
+import type { Tax } from "@spaceinvoices/js-sdk";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import { DataTable } from "../../table/data-table";
+import { useTableFetch } from "../../table/hooks/use-table-fetch";
+import type { ListTableProps, TableQueryParams } from "../../table/types";
+import { TAXES_CACHE_KEY } from "../taxes.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+import TaxListHeader from "./tax-list-header";
+import TaxListRow from "./tax-list-row";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type TaxListTableProps = {
+  entityId?: string;
+} & ListTableProps<Tax> &
+  ComponentTranslationProps;
+
+export default function TaxListTable({
+  queryParams,
+  createNewTrigger,
+  onRowClick,
+  onChangeParams,
+  entityId,
+  ...i18nProps
+}: TaxListTableProps) {
+  const t = createTranslation({ translations, ...i18nProps });
+  const { sdk } = useSDK();
+
+  const handleFetch = useTableFetch((params: TableQueryParams) => {
+    if (!sdk) throw new Error("SDK not initialized");
+    return sdk.taxes.list(params as any);
+  }, entityId);
+
+  return (
+    <DataTable
+      columns={[
+        { id: "name", header: t("Name"), sortable: true },
+        { id: "tax_rates", header: t("Tax Rates") },
+        { id: "created_at", header: t("Created"), sortable: true },
+        { id: "actions", header: "", align: "right" },
+      ]}
+      renderRow={(tax) => <TaxListRow tax={tax} key={tax.id} onRowClick={(tax) => onRowClick?.(tax)} t={t} />}
+      renderHeader={(headerProps) => <TaxListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
+      queryParams={queryParams}
+      resourceName="tax"
+      cacheKey={TAXES_CACHE_KEY}
+      createNewTrigger={createNewTrigger}
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+    />
+  );
+}