@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,171 @@
+import type { Estimate } from "@spaceinvoices/js-sdk";
+import { useMemo } 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 type {
+  Column,
+  FilterConfig,
+  ListTableProps,
+  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";
+
+import EstimateListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type EstimateListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onDuplicate?: (estimate: Estimate) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ListTableProps<Estimate>;
+
+export default function EstimateListTable({
+  queryParams,
+  onRowClick,
+  onDuplicate,
+  onChangeParams,
+  entityId,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: EstimateListTableProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { sdk } = useSDK();
+
+  const handleFetch = useTableFetch(async (params: TableQueryParams) => {
+    if (!sdk) throw new Error("SDK not initialized");
+    if (!params.entity_id) throw new Error("Entity ID required");
+
+    const response = await sdk.estimates.list({
+      entity_id: params.entity_id,
+      limit: params.limit,
+      next_cursor: params.next_cursor,
+      prev_cursor: params.prev_cursor,
+      order_by: params.order_by,
+      search: params.search,
+      query: params.query,
+    });
+    return response as unknown as TableQueryResponse<Estimate>;
+  }, entityId);
+
+  const filterConfig: FilterConfig = useMemo(
+    () => ({
+      dateFields: [
+        { id: "date", label: t("Date") },
+        { id: "date_valid_till", label: t("Valid Until") },
+        { id: "created_at", label: t("Created At") },
+      ],
+      statusFilter: false, // Estimates don't have payment status
+    }),
+    [t],
+  );
+
+  const columns: Column<Estimate>[] = useMemo(
+    () => [
+      {
+        id: "number",
+        header: t("Number"),
+        sortable: true,
+        cell: (estimate) => (
+          <div className="flex items-center gap-2">
+            <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(estimate)}>
+              {estimate.number}
+            </Button>
+            {(estimate 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>
+        ),
+      },
+      {
+        id: "customer",
+        header: t("Customer"),
+        cell: (estimate) => estimate.customer?.name ?? "-",
+      },
+      {
+        id: "date",
+        header: t("Date"),
+        sortable: true,
+        cell: (estimate) => <FormattedDate date={estimate.date} />,
+      },
+      {
+        id: "date_valid_till",
+        header: t("Valid Until"),
+        sortable: true,
+        cell: (estimate) => <FormattedDate date={estimate.date_valid_till} />,
+      },
+      {
+        id: "total",
+        header: t("Total"),
+        sortable: true,
+        align: "right",
+        cell: (estimate) => estimate.total,
+      },
+      {
+        id: "total_with_tax",
+        header: t("Total with Tax"),
+        sortable: true,
+        align: "right",
+        cell: (estimate) => estimate.total_with_tax,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (estimate) => (
+          <EstimateListRowActions
+            estimate={estimate}
+            onDuplicate={onDuplicate}
+            onDownloadStart={onDownloadStart}
+            onDownloadSuccess={onDownloadSuccess}
+            onDownloadError={onDownloadError}
+            {...i18nProps}
+          />
+        ),
+      },
+    ],
+    [t, onRowClick, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      onChangeParams={onChangeParams}
+      onFetch={handleFetch}
+      cacheKey="estimates"
+      resourceName="estimate"
+      createNewLink="/app/documents/add/estimate"
+      entityId={entityId}
+      filterConfig={filterConfig}
+      t={t}
+      locale={i18nProps.locale}
+    />
+  );
+}

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

@@ -0,0 +1,26 @@
+export default {
+  Draft: "Entwurf",
+  Number: "Nummer",
+  Customer: "Kunde",
+  Date: "Datum",
+  "Valid Until": "Gültig bis",
+  Total: "Gesamt",
+  "Total with Tax": "Gesamt mit MwSt.",
+  Actions: "Aktionen",
+  "Open menu": "Menü öffnen",
+  "Copy estimate ID": "Angebots-ID kopieren",
+  "View estimate": "Angebot ansehen",
+  "Download PDF": "PDF herunterladen",
+  "Downloading...": "Wird heruntergeladen...",
+  Duplicate: "Duplizieren",
+  Estimate: "Angebot",
+  "Failed to download PDF": "PDF-Download fehlgeschlagen",
+  // Filter translations
+  "Search...": "Suchen...",
+  Filters: "Filter",
+  "Date Range": "Datumsbereich",
+  From: "Von",
+  To: "Bis",
+  "Clear filters": "Filter löschen",
+  "Created At": "Erstellt am",
+} as const;

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

@@ -0,0 +1,26 @@
+export default {
+  Draft: "Osnutek",
+  Number: "Številka",
+  Customer: "Stranka",
+  Date: "Datum",
+  "Valid Until": "Veljavno do",
+  Total: "Skupaj",
+  "Total with Tax": "Skupaj z DDV",
+  Actions: "Dejanja",
+  "Open menu": "Odpri meni",
+  "Copy estimate ID": "Kopiraj ID predračuna",
+  "View estimate": "Poglej predračun",
+  "Download PDF": "Prenesi PDF",
+  "Downloading...": "Prenašanje...",
+  Duplicate: "Podvoji",
+  Estimate: "Predračun",
+  "Failed to download PDF": "Prenos PDF ni uspel",
+  // Filter translations
+  "Search...": "Iskanje...",
+  Filters: "Filtri",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Počisti filtre",
+  "Created At": "Ustvarjeno",
+} as const;

package/src/components/estimates/list/use-estimate-download.ts

@@ -0,0 +1,63 @@
+import type { Estimate } from "@spaceinvoices/js-sdk";
+import { useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+type UseEstimateDownloadProps = {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export function useEstimateDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: UseEstimateDownloadProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const t = createTranslation(i18nProps);
+
+  const downloadPDF = async (estimate: Estimate) => {
+    if (!activeEntity?.id || !sdk) {
+      console.error("Missing SDK or active entity for PDF download");
+      onDownloadError?.(t("Failed to download PDF"));
+      return;
+    }
+
+    setIsDownloading(true);
+    onDownloadStart?.();
+
+    try {
+      // 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
+      const blob = await sdk.invoices.renderPdf(estimate.id, {}, { entity_id: activeEntity.id });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      const fileName = `${t("Estimate")} ${estimate.number}.pdf`;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+
+      onDownloadSuccess?.(fileName);
+    } catch (error) {
+      console.error("Error downloading PDF:", error);
+      onDownloadError?.(t("Failed to download PDF"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return {
+    isDownloading,
+    downloadPDF,
+  };
+}

package/src/components/export/document-export-form.tsx

@@ -0,0 +1,288 @@
+type TFunction = (key: string, options?: Record<string, unknown>) => string;
+
+import { Calendar, Download, Loader2 } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+export type DocumentType = "invoice" | "estimate" | "credit_note";
+export type ExportFormat = "xlsx" | "csv" | "pdf_zip";
+
+// Maximum date range for export (1 year in milliseconds)
+const MAX_DATE_RANGE_MS = 365 * 24 * 60 * 60 * 1000;
+
+function formatDateLocal(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function getPreviousMonthRange(): { from: string; to: string } {
+  const now = new Date();
+  const firstDayPrevMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const lastDayPrevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
+  return {
+    from: formatDateLocal(firstDayPrevMonth),
+    to: formatDateLocal(lastDayPrevMonth),
+  };
+}
+
+function isDateRangeValid(dateFrom: string, dateTo: string): boolean {
+  if (!dateFrom || !dateTo) return true;
+  const from = new Date(dateFrom);
+  const to = new Date(dateTo);
+  return to.getTime() - from.getTime() <= MAX_DATE_RANGE_MS;
+}
+
+export type DocumentExportFormProps = {
+  entityId: string;
+  token: string;
+  language: string;
+  t: TFunction;
+  onSuccess?: (fileName: string) => void;
+  onError?: (error: Error) => void;
+  onPdfExportStarted?: () => void;
+  onLoadingChange?: (isLoading: boolean, toastId: string | number | null) => void;
+};
+
+export function DocumentExportForm({
+  entityId,
+  token,
+  language,
+  t,
+  onSuccess,
+  onError,
+  onPdfExportStarted,
+  onLoadingChange,
+}: DocumentExportFormProps) {
+  const defaultDates = getPreviousMonthRange();
+  const [documentType, setDocumentType] = useState<DocumentType>("invoice");
+  const [exportFormat, setExportFormat] = useState<ExportFormat>("xlsx");
+  const [dateFrom, setDateFrom] = useState(defaultDates.from);
+  const [dateTo, setDateTo] = useState(defaultDates.to);
+  const [isExporting, setIsExporting] = useState(false);
+  const [dateRangeError, setDateRangeError] = useState(false);
+
+  const toastIdRef = useRef<string | number | null>(null);
+
+  const validateDateRange = (from: string, to: string) => {
+    const isValid = isDateRangeValid(from, to);
+    setDateRangeError(!isValid);
+    return isValid;
+  };
+
+  const handleExport = async () => {
+    if (!validateDateRange(dateFrom, dateTo)) {
+      onError?.(new Error(t("export-page.error.date-range-exceeded")));
+      return;
+    }
+
+    setIsExporting(true);
+    onLoadingChange?.(true, null);
+
+    // PDF export is async - different flow
+    if (exportFormat === "pdf_zip") {
+      try {
+        const response = await fetch("/documents/export/pdf", {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "x-entity-id": entityId,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            type: documentType,
+            date_from: dateFrom || undefined,
+            date_to: dateTo || undefined,
+          }),
+        });
+
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || `Export failed: ${response.statusText}`);
+        }
+
+        onPdfExportStarted?.();
+      } catch (error) {
+        console.error("PDF export error:", error);
+        onError?.(error instanceof Error ? error : new Error("Unknown error"));
+      } finally {
+        setIsExporting(false);
+        onLoadingChange?.(false, toastIdRef.current);
+        toastIdRef.current = null;
+      }
+      return;
+    }
+
+    // XLSX/CSV export - synchronous download
+    try {
+      const exportLanguage = language === "sl" ? "sl" : "en";
+      const queryParams: Record<string, string> = {
+        type: documentType,
+        format: exportFormat,
+        language: exportLanguage,
+      };
+      if (dateFrom) {
+        queryParams.date_from = dateFrom;
+      }
+      if (dateTo) {
+        queryParams.date_to = dateTo;
+      }
+
+      const response = await fetch(`/documents/export?${new URLSearchParams(queryParams).toString()}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "x-entity-id": entityId,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Export failed: ${response.statusText}`);
+      }
+
+      const contentDisposition = response.headers.get("content-disposition");
+      let fileName = `${documentType}s_export.${exportFormat}`;
+      if (contentDisposition) {
+        const match = contentDisposition.match(/filename="?([^";\n]+)"?/);
+        if (match) {
+          fileName = match[1];
+        }
+      }
+
+      const blob = await response.blob();
+      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("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-6">
+      <p className="text-muted-foreground">{t("export-page.description")}</p>
+
+      {/* Document Type */}
+      <div className="space-y-2">
+        <Label htmlFor="document-type">{t("export-page.document-type")}</Label>
+        <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
+          <SelectTrigger id="document-type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="invoice">{t("export-page.types.invoice")}</SelectItem>
+            <SelectItem value="estimate">{t("export-page.types.estimate")}</SelectItem>
+            <SelectItem value="credit_note">{t("export-page.types.credit_note")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Export Format */}
+      <div className="space-y-2">
+        <Label htmlFor="export-format">{t("export-page.format")}</Label>
+        <Select value={exportFormat} onValueChange={(v) => setExportFormat(v as ExportFormat)}>
+          <SelectTrigger id="export-format">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="xlsx">{t("export-page.formats.xlsx")}</SelectItem>
+            <SelectItem value="csv">{t("export-page.formats.csv")}</SelectItem>
+            <SelectItem value="pdf_zip">{t("export-page.formats.pdf_zip")}</SelectItem>
+          </SelectContent>
+        </Select>
+        {exportFormat === "pdf_zip" && (
+          <p className="text-muted-foreground text-sm">{t("export-page.pdf-export-info")}</p>
+        )}
+      </div>
+
+      {/* Date Range */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="date-from">{t("export-page.date-from")}</Label>
+          <div className="relative">
+            <Input
+              id="date-from"
+              type="date"
+              value={dateFrom}
+              onChange={(e) => {
+                setDateFrom(e.target.value);
+                validateDateRange(e.target.value, dateTo);
+              }}
+              onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
+              className="cursor-pointer pr-9 [&::-webkit-calendar-picker-indicator]:hidden"
+            />
+            <Calendar className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="date-to">{t("export-page.date-to")}</Label>
+          <div className="relative">
+            <Input
+              id="date-to"
+              type="date"
+              value={dateTo}
+              onChange={(e) => {
+                setDateTo(e.target.value);
+                validateDateRange(dateFrom, e.target.value);
+              }}
+              onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
+              className={`cursor-pointer pr-9 [&::-webkit-calendar-picker-indicator]:hidden ${dateRangeError ? "border-destructive" : ""}`}
+            />
+            <Calendar className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        </div>
+      </div>
+
+      {/* Date range error message */}
+      {dateRangeError && <p className="text-destructive text-sm">{t("export-page.error.date-range-exceeded")}</p>}
+
+      {/* Clear dates button */}
+      {(dateFrom || dateTo) && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            setDateFrom("");
+            setDateTo("");
+            setDateRangeError(false);
+          }}
+        >
+          {t("export-page.clear-dates")}
+        </Button>
+      )}
+
+      {/* Export Button */}
+      <Button onClick={handleExport} disabled={isExporting || dateRangeError} className="w-full" size="lg">
+        {isExporting ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t("export-page.exporting")}
+          </>
+        ) : (
+          <>
+            <Download className="mr-2 h-4 w-4" />
+            {t("export-page.export-button")}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/components/export/index.ts

@@ -0,0 +1,2 @@
+export type { DocumentExportFormProps, DocumentType, ExportFormat } from "./document-export-form";
+export { DocumentExportForm } from "./document-export-form";

package/src/components/form/form-input.tsx

@@ -0,0 +1,89 @@
+import { forwardRef } from "react";
+import type { FieldPath, FieldValues } from "react-hook-form";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+
+type FormInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  control: any;
+  name: TName;
+  label: string;
+  placeholder?: string;
+  type?: "text" | "number" | "email" | "password" | "tel" | "url";
+  disabled?: boolean;
+  autoComplete?: string;
+  onChange?: (value: any) => void;
+  className?: string;
+  required?: boolean;
+};
+
+const FormInputComponent = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  {
+    control,
+    name,
+    label,
+    placeholder,
+    type = "text",
+    disabled,
+    autoComplete,
+    onChange,
+    className,
+    required = false,
+  }: FormInputProps<TFieldValues, TName>,
+  ref: React.Ref<HTMLInputElement>,
+) => {
+  const handleFieldChange = (field: any, e: React.ChangeEvent<HTMLInputElement>) => {
+    if (type === "number") {
+      const value = Number(e.target.value);
+      field.onChange(value);
+      onChange?.(value);
+    } else {
+      // Convert empty strings to undefined to prevent sending empty strings to API
+      const value = e.target.value === "" ? undefined : e.target.value;
+      field.onChange(value);
+      onChange?.(value);
+    }
+  };
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className={className}>
+          {label && (
+            <FormLabel>
+              {label}
+              {required && <span className="ml-1 text-red-500">*</span>}
+            </FormLabel>
+          )}
+          <FormControl>
+            <Input
+              type={type}
+              placeholder={placeholder}
+              disabled={disabled}
+              autoComplete={autoComplete}
+              {...field}
+              ref={ref}
+              value={field.value ?? ""}
+              onChange={(e) => handleFieldChange(field, e)}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const FormInput = forwardRef(FormInputComponent) as <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  props: FormInputProps<TFieldValues, TName> & { ref?: React.Ref<HTMLInputElement> },
+) => ReturnType<typeof FormInputComponent>;

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export { FormInput } from "./form-input";