@spaceinvoices/react-ui 0.4.0 → 0.4.2

package/src/components/recurring-invoices/list/locales/es.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nombre",
+  Frequency: "Frecuencia",
+  Status: "Estado",
+  "Next Run": "Próxima ejecución",
+  Generated: "Generadas",
+  Created: "Creado",
+  Every: "Cada",
+  Actions: "Acciones",
+  "Open menu": "Abrir menú",
+  "View source invoice": "Ver factura de origen",
+  Pause: "Pausar",
+  Resume: "Reanudar",
+  "Processing...": "Procesando...",
+  "Delete schedule": "Eliminar programa",
+  "Deleting...": "Eliminando...",
+  "frequency.daily": "Diario",
+  "frequency.weekly": "Semanal",
+  "frequency.monthly": "Mensual",
+  "frequency.yearly": "Anual",
+  "status.active": "Activo",
+  "status.paused": "Pausado",
+  "status.completed": "Completado",
+  "Your list is empty": "Su lista de facturas recurrentes está vacía",
+  "Get started by creating your first entry": "Comience creando su primer programa recurrente",
+  "No results found": "No se encontraron facturas recurrentes",
+} as const;

package/src/components/recurring-invoices/list/locales/fr.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nom",
+  Frequency: "Fréquence",
+  Status: "Statut",
+  "Next Run": "Prochaine exécution",
+  Generated: "Générées",
+  Created: "Créé",
+  Every: "Tous les",
+  Actions: "Actions",
+  "Open menu": "Ouvrir le menu",
+  "View source invoice": "Voir la facture source",
+  Pause: "Mettre en pause",
+  Resume: "Reprendre",
+  "Processing...": "Traitement...",
+  "Delete schedule": "Supprimer le programme",
+  "Deleting...": "Suppression...",
+  "frequency.daily": "Quotidien",
+  "frequency.weekly": "Hebdomadaire",
+  "frequency.monthly": "Mensuel",
+  "frequency.yearly": "Annuel",
+  "status.active": "Actif",
+  "status.paused": "En pause",
+  "status.completed": "Terminé",
+  "Your list is empty": "Votre liste de factures récurrentes est vide",
+  "Get started by creating your first entry": "Commencez par créer votre premier programme récurrent",
+  "No results found": "Aucune facture récurrente trouvée",
+} as const;

package/src/components/recurring-invoices/list/locales/hr.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Naziv",
+  Frequency: "Učestalost",
+  Status: "Status",
+  "Next Run": "Sljedeće pokretanje",
+  Generated: "Generirano",
+  Created: "Kreirano",
+  Every: "Svaki",
+  Actions: "Akcije",
+  "Open menu": "Otvori izbornik",
+  "View source invoice": "Prikaži izvorni račun",
+  Pause: "Pauziraj",
+  Resume: "Nastavi",
+  "Processing...": "Obrađujem...",
+  "Delete schedule": "Obriši raspored",
+  "Deleting...": "Brišem...",
+  "frequency.daily": "Dnevno",
+  "frequency.weekly": "Tjedno",
+  "frequency.monthly": "Mjesečno",
+  "frequency.yearly": "Godišnje",
+  "status.active": "Aktivan",
+  "status.paused": "Pauziran",
+  "status.completed": "Završen",
+  "Your list is empty": "Vaš popis ponavljajućih računa je prazan",
+  "Get started by creating your first entry": "Počnite kreiranjem prvog ponavljajućeg rasporeda",
+  "No results found": "Nisu pronađeni ponavljajući računi",
+} as const;

package/src/components/recurring-invoices/list/locales/it.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nome",
+  Frequency: "Frequenza",
+  Status: "Stato",
+  "Next Run": "Prossima esecuzione",
+  Generated: "Generate",
+  Created: "Creato",
+  Every: "Ogni",
+  Actions: "Azioni",
+  "Open menu": "Apri menu",
+  "View source invoice": "Visualizza fattura originale",
+  Pause: "Pausa",
+  Resume: "Riprendi",
+  "Processing...": "Elaborazione...",
+  "Delete schedule": "Elimina programma",
+  "Deleting...": "Eliminazione...",
+  "frequency.daily": "Giornaliero",
+  "frequency.weekly": "Settimanale",
+  "frequency.monthly": "Mensile",
+  "frequency.yearly": "Annuale",
+  "status.active": "Attivo",
+  "status.paused": "In pausa",
+  "status.completed": "Completato",
+  "Your list is empty": "La lista delle fatture ricorrenti è vuota",
+  "Get started by creating your first entry": "Inizia creando il tuo primo programma ricorrente",
+  "No results found": "Nessuna fattura ricorrente trovata",
+} as const;

package/src/components/recurring-invoices/list/locales/nl.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Naam",
+  Frequency: "Frequentie",
+  Status: "Status",
+  "Next Run": "Volgende uitvoering",
+  Generated: "Gegenereerd",
+  Created: "Aangemaakt",
+  Every: "Elke",
+  Actions: "Acties",
+  "Open menu": "Menu openen",
+  "View source invoice": "Bronfactuur bekijken",
+  Pause: "Pauzeren",
+  Resume: "Hervatten",
+  "Processing...": "Verwerking...",
+  "Delete schedule": "Schema verwijderen",
+  "Deleting...": "Verwijderen...",
+  "frequency.daily": "Dagelijks",
+  "frequency.weekly": "Wekelijks",
+  "frequency.monthly": "Maandelijks",
+  "frequency.yearly": "Jaarlijks",
+  "status.active": "Actief",
+  "status.paused": "Gepauzeerd",
+  "status.completed": "Voltooid",
+  "Your list is empty": "Uw lijst met terugkerende facturen is leeg",
+  "Get started by creating your first entry": "Begin met het maken van uw eerste terugkerend schema",
+  "No results found": "Geen terugkerende facturen gevonden",
+} as const;

package/src/components/recurring-invoices/list/locales/pl.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nazwa",
+  Frequency: "Częstotliwość",
+  Status: "Status",
+  "Next Run": "Następne uruchomienie",
+  Generated: "Wygenerowane",
+  Created: "Utworzono",
+  Every: "Co",
+  Actions: "Akcje",
+  "Open menu": "Otwórz menu",
+  "View source invoice": "Zobacz fakturę źródłową",
+  Pause: "Wstrzymaj",
+  Resume: "Wznów",
+  "Processing...": "Przetwarzanie...",
+  "Delete schedule": "Usuń harmonogram",
+  "Deleting...": "Usuwanie...",
+  "frequency.daily": "Codziennie",
+  "frequency.weekly": "Tygodniowo",
+  "frequency.monthly": "Miesięcznie",
+  "frequency.yearly": "Rocznie",
+  "status.active": "Aktywny",
+  "status.paused": "Wstrzymany",
+  "status.completed": "Zakończony",
+  "Your list is empty": "Twoja lista faktur cyklicznych jest pusta",
+  "Get started by creating your first entry": "Zacznij od utworzenia pierwszego harmonogramu cyklicznego",
+  "No results found": "Nie znaleziono faktur cyklicznych",
+} as const;

package/src/components/recurring-invoices/list/locales/pt.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nome",
+  Frequency: "Frequência",
+  Status: "Estado",
+  "Next Run": "Próxima execução",
+  Generated: "Geradas",
+  Created: "Criado",
+  Every: "A cada",
+  Actions: "Ações",
+  "Open menu": "Abrir menu",
+  "View source invoice": "Ver fatura de origem",
+  Pause: "Pausar",
+  Resume: "Retomar",
+  "Processing...": "Processando...",
+  "Delete schedule": "Eliminar agendamento",
+  "Deleting...": "Eliminando...",
+  "frequency.daily": "Diário",
+  "frequency.weekly": "Semanal",
+  "frequency.monthly": "Mensal",
+  "frequency.yearly": "Anual",
+  "status.active": "Ativo",
+  "status.paused": "Pausado",
+  "status.completed": "Concluído",
+  "Your list is empty": "A sua lista de faturas recorrentes está vazia",
+  "Get started by creating your first entry": "Comece criando o seu primeiro agendamento recorrente",
+  "No results found": "Nenhuma fatura recorrente encontrada",
+} as const;

package/src/components/recurring-invoices/list/locales/sl.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Ime",
+  Frequency: "Pogostost",
+  Status: "Status",
+  "Next Run": "Naslednje izvajanje",
+  Generated: "Ustvarjeno",
+  Created: "Ustvarjeno",
+  Every: "Vsak",
+  Actions: "Akcije",
+  "Open menu": "Odpri meni",
+  "View source invoice": "Prikaži izvorni račun",
+  Pause: "Zaustavi",
+  Resume: "Nadaljuj",
+  "Processing...": "Obdelujem...",
+  "Delete schedule": "Izbriši urnik",
+  "Deleting...": "Brišem...",
+  "frequency.daily": "Dnevno",
+  "frequency.weekly": "Tedensko",
+  "frequency.monthly": "Mesečno",
+  "frequency.yearly": "Letno",
+  "status.active": "Aktiven",
+  "status.paused": "Zaustavljen",
+  "status.completed": "Zaključen",
+  "Your list is empty": "Vaš seznam ponavljajočih računov je prazen",
+  "Get started by creating your first entry": "Začnite z ustvarjanjem prvega ponavljajočega urnika",
+  "No results found": "Ni najdenih ponavljajočih računov",
+} as const;

package/src/components/recurring-invoices/recurring-invoices.hooks.ts

@@ -0,0 +1,28 @@
+import type { CreateRecurringInvoiceBody, RecurringInvoice } from "@spaceinvoices/js-sdk";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+
+export const RECURRING_INVOICES_CACHE_KEY = "recurring-invoices";
+
+const {
+  useCreateResource: useCreateRecurringInvoice,
+  useUpdateResource: useUpdateRecurringInvoice,
+  useDeleteResource: useDeleteRecurringInvoice,
+  useRestoreResource: useRestoreRecurringInvoice,
+  usePermanentDeleteResource: usePermanentDeleteRecurringInvoice,
+} = createResourceHooks<RecurringInvoice, CreateRecurringInvoiceBody>(
+  "recurringInvoices",
+  RECURRING_INVOICES_CACHE_KEY,
+  {
+    restoreMethodName: "restoreRecurringInvoice",
+    permanentDeleteMethodName: "permanentDeleteRecurringInvoice",
+  },
+);
+
+export {
+  useCreateRecurringInvoice,
+  useUpdateRecurringInvoice,
+  useDeleteRecurringInvoice,
+  useRestoreRecurringInvoice,
+  usePermanentDeleteRecurringInvoice,
+};

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

@@ -1,6 +1,7 @@
 import type { JSX, ReactNode } from "react";
-import { Fragment, memo, useState } from "react";
+import { Fragment, memo, useCallback, useMemo, useState } from "react";
 
+import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
 import { FilterBar } from "./filter-bar";
 import { useTableQuery } from "./hooks/use-table-query";
@@ -47,6 +48,14 @@ export type DataTableProps<T> = {
   t?: (key: string) => string;
   /** Locale for date formatting */
   locale?: string;
+  /** Enable row selection with checkboxes */
+  selectable?: boolean;
+  /** Currently selected IDs (controlled) */
+  selectedIds?: Set<string>;
+  /** Callback when selection changes */
+  onSelectionChange?: (selectedIds: Set<string>) => void;
+  /** Content to render in selection toolbar (shown when items selected) */
+  selectionToolbar?: (selectedCount: number) => ReactNode;
 };
 
 /**
@@ -70,6 +79,10 @@ export function DataTable<T extends { id: string }>({
   filterConfig,
   t = (key) => key,
   locale,
+  selectable,
+  selectedIds,
+  onSelectionChange,
+  selectionToolbar,
 }: DataTableProps<T>) {
   // Filter panel open state - starts open if filters are active in URL
   const hasInitialFilters = Boolean(
@@ -108,6 +121,43 @@ export function DataTable<T extends { id: string }>({
       params.filter_http_status,
   );
 
+  // Selection helpers
+  const pageIds = useMemo(() => data.map((item) => item.id), [data]);
+  const selectedCount = selectedIds?.size ?? 0;
+  const allPageSelected = selectable && pageIds.length > 0 && pageIds.every((id) => selectedIds?.has(id));
+  const somePageSelected = selectable && pageIds.some((id) => selectedIds?.has(id));
+
+  const handleToggleAll = useCallback(() => {
+    if (!onSelectionChange || !selectedIds) return;
+    const next = new Set(selectedIds);
+    if (allPageSelected) {
+      // Deselect all on current page
+      for (const id of pageIds) {
+        next.delete(id);
+      }
+    } else {
+      // Select all on current page
+      for (const id of pageIds) {
+        next.add(id);
+      }
+    }
+    onSelectionChange(next);
+  }, [onSelectionChange, selectedIds, allPageSelected, pageIds]);
+
+  const handleToggleRow = useCallback(
+    (id: string) => {
+      if (!onSelectionChange || !selectedIds) return;
+      const next = new Set(selectedIds);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      onSelectionChange(next);
+    },
+    [onSelectionChange, selectedIds],
+  );
+
   // Show skeleton during initial load (with filter bar for consistency)
   if (isFetching && !queryResult) {
     return (
@@ -123,7 +173,7 @@ export function DataTable<T extends { id: string }>({
           isOpen={filterPanelOpen}
           onToggle={setFilterPanelOpen}
         />
-        <TableSkeleton columns={columns.length} rows={10} />
+        <TableSkeleton columns={columns.length + (selectable ? 1 : 0)} rows={10} />
       </div>
     );
   }
@@ -155,12 +205,26 @@ export function DataTable<T extends { id: string }>({
         onToggle={setFilterPanelOpen}
       />
 
+      {selectable && selectedCount > 0 && selectionToolbar && (
+        <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
+          {selectionToolbar(selectedCount)}
+        </div>
+      )}
+
       <div className="rounded-lg border">
         <Table>
           {renderHeader ? (
             renderHeader({ orderBy: params.order_by, onSort: handleSort })
           ) : (
-            <DefaultTableHeader columns={columns} orderBy={params.order_by} onSort={handleSort} />
+            <DefaultTableHeader
+              columns={columns}
+              orderBy={params.order_by}
+              onSort={handleSort}
+              selectable={selectable}
+              allPageSelected={allPageSelected}
+              somePageSelected={somePageSelected}
+              onToggleAll={handleToggleAll}
+            />
           )}
 
           <TableBody>
@@ -172,7 +236,17 @@ export function DataTable<T extends { id: string }>({
                 }
 
                 // Default row renderer
-                return <DefaultTableRow key={item.id} item={item} columns={columns} onRowClick={onRowClick} />;
+                return (
+                  <DefaultTableRow
+                    key={item.id}
+                    item={item}
+                    columns={columns}
+                    onRowClick={onRowClick}
+                    selectable={selectable}
+                    isSelected={selectedIds?.has(item.id)}
+                    onToggleSelect={handleToggleRow}
+                  />
+                );
               })
             ) : (
               <TableNoResults resource={resourceName} search={handleSearch} t={t} />
@@ -199,14 +273,31 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   columns,
   orderBy,
   onSort,
+  selectable,
+  allPageSelected,
+  somePageSelected,
+  onToggleAll,
 }: {
   columns: Column<T>[];
   orderBy?: string;
   onSort?: (order: string | null) => void;
+  selectable?: boolean;
+  allPageSelected?: boolean;
+  somePageSelected?: boolean;
+  onToggleAll?: () => void;
 }) {
   return (
     <TableHeader>
       <TableRow>
+        {selectable && (
+          <TableHead className="w-[40px]">
+            <Checkbox
+              checked={allPageSelected || false}
+              indeterminate={!allPageSelected && somePageSelected}
+              onCheckedChange={onToggleAll}
+            />
+          </TableHead>
+        )}
         {columns.map((column) => (
           <TableHead key={column.id} className={column.className} style={{ textAlign: column.align }}>
             {column.sortable ? (
@@ -226,7 +317,15 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
       </TableRow>
     </TableHeader>
   );
-}) as <T>(props: { columns: Column<T>[]; orderBy?: string; onSort?: (order: string | null) => void }) => JSX.Element;
+}) as <T>(props: {
+  columns: Column<T>[];
+  orderBy?: string;
+  onSort?: (order: string | null) => void;
+  selectable?: boolean;
+  allPageSelected?: boolean;
+  somePageSelected?: boolean;
+  onToggleAll?: () => void;
+}) => JSX.Element;
 
 /**
  * Default row renderer using column definitions
@@ -235,13 +334,28 @@ const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>(
   item,
   columns,
   onRowClick,
+  selectable,
+  isSelected,
+  onToggleSelect,
 }: {
   item: T;
   columns: Column<T>[];
   onRowClick?: (item: T) => void;
+  selectable?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }) {
   return (
     <TableRow className={onRowClick ? "cursor-pointer" : undefined} onClick={() => onRowClick?.(item)}>
+      {selectable && (
+        <TableCell className="w-[40px]">
+          <Checkbox
+            checked={isSelected || false}
+            onCheckedChange={() => onToggleSelect?.(item.id)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </TableCell>
+      )}
       {columns.map((column) => (
         <TableCell key={column.id} className={column.className} style={{ textAlign: column.align }}>
           {column.cell?.(item)}
@@ -253,4 +367,7 @@ const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>(
   item: T;
   columns: Column<T>[];
   onRowClick?: (item: T) => void;
+  selectable?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }) => JSX.Element;

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

@@ -0,0 +1,36 @@
+import { FileDown, X } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+
+type SelectionToolbarProps = {
+  selectedCount: number;
+  onExportPdfs?: () => void;
+  onDeselectAll?: () => void;
+  t?: (key: string) => string;
+};
+
+export function SelectionToolbar({
+  selectedCount,
+  onExportPdfs,
+  onDeselectAll,
+  t = (key) => key,
+}: SelectionToolbarProps) {
+  return (
+    <>
+      <span className="font-medium text-sm">
+        {selectedCount} {t("selected")}
+      </span>
+      {onExportPdfs && (
+        <Button variant="outline" size="sm" onClick={onExportPdfs}>
+          <FileDown className="mr-1.5 size-4" />
+          {t("Export PDFs")}
+        </Button>
+      )}
+      {onDeselectAll && (
+        <Button variant="ghost" size="sm" onClick={onDeselectAll}>
+          <X className="mr-1.5 size-4" />
+          {t("Deselect all")}
+        </Button>
+      )}
+    </>
+  );
+}

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

@@ -84,76 +84,96 @@ export function KirExportForm({ sdk, entityId, t, onSuccess, onError, onLoadingC
     }
   };
 
+  const fileName = `KIR_${year}_${periodType === "month" ? `M${month}` : `Q${quarter}`}.zip`;
+
   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" ? (
+      {/* Year + Period Type + Month/Quarter */}
+      <div className="grid grid-cols-3 gap-4">
         <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">
+          <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>
-              {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
-                <SelectItem key={m} value={m.toString()}>
-                  {t(`kir-export.months.${m}`)}
+              {yearOptions.map((y) => (
+                <SelectItem key={y} value={y.toString()}>
+                  {y}
                 </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>
+          <Label>{t("kir-export.period-type")}</Label>
+          <div className="flex rounded-md border">
+            <button
+              type="button"
+              onClick={() => setPeriodType("month")}
+              className={`flex-1 rounded-l-md px-3 py-2 font-medium text-sm transition-colors ${
+                periodType === "month" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+              }`}
+            >
+              {t("kir-export.period-types.month")}
+            </button>
+            <button
+              type="button"
+              onClick={() => setPeriodType("quarter")}
+              className={`flex-1 rounded-r-md border-l px-3 py-2 font-medium text-sm transition-colors ${
+                periodType === "quarter" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+              }`}
+            >
+              {t("kir-export.period-types.quarter")}
+            </button>
+          </div>
         </div>
-      )}
+
+        {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>
+        )}
+      </div>
+
+      {/* File Preview */}
+      <div className="rounded-md border border-dashed p-3">
+        <p className="text-muted-foreground text-sm">
+          {t("kir-export.file-preview")}: <span className="font-medium font-mono text-foreground">{fileName}</span>
+        </p>
+      </div>
 
       {/* Export Button */}
-      <Button onClick={handleExport} disabled={isExporting} className="w-full">
+      <Button onClick={handleExport} disabled={isExporting} className="w-full" size="lg">
         {isExporting ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />