@spaceinvoices/react-ui 0.1.1

package/src/app.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent } from "@/ui/components/ui/card";
+
+import "./index.css";
+
+export function App() {
+  return (
+    <div className="container relative z-10 mx-auto p-8 text-center">
+      <div className="mb-8 flex items-center justify-center gap-8">{/* Logo */}</div>
+
+      <Card className="border-muted bg-card/50 backdrop-blur-sm">
+        <CardContent>
+          <h1 className="mb-4 font-bold text-5xl leading-tight">Space Invoices React UI kit</h1>
+
+          <p>
+            This is a simple UI kit for React. It is a work in progress and will be updated as we add more components.
+          </p>
+
+          {/* Place components here for preview */}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default App;

package/src/common/autocomplete.tsx

@@ -0,0 +1,135 @@
+import { Popover } from "@base-ui/react/popover";
+import * as React from "react";
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@/ui/components/ui/command";
+import { Input } from "@/ui/components/ui/input";
+import { cn } from "@/ui/lib/utils";
+
+export type AutocompleteOption = {
+  value: string;
+  label: string | React.ReactNode;
+};
+
+type AutocompleteProps = {
+  options: AutocompleteOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void; // Added onBlur prop
+  placeholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  onSearch?: (value: string) => void;
+  searchValue?: string;
+  displayValue?: string;
+};
+
+export function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  onBlur: onBlurProp, // Destructure the new onBlur prop
+  placeholder = "Type to search...",
+  emptyText = "No results found.",
+  className,
+  disabled,
+  loading,
+  onSearch,
+  searchValue: externalSearchValue,
+  displayValue,
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const searchValue = externalSearchValue ?? internalSearchValue;
+  // Show displayValue when not typing, otherwise show what user is typing
+  const inputValue = searchValue || displayValue;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInternalSearchValue(value);
+    onSearch?.(value);
+
+    // Open popover when user starts typing
+    if (!open) {
+      setOpen(true);
+    }
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    onValueChange?.(selectedValue);
+    setOpen(false);
+  };
+
+  const handleInputFocus = () => {
+    // Only open popover on focus if there's no displayValue (no customer selected)
+    if (!displayValue && options.length > 0) {
+      setOpen(true);
+    }
+  };
+
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Don't close if clicking inside the popover
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    if (relatedTarget?.closest('[role="dialog"]')) {
+      return;
+    }
+    // Close after a short delay to allow click events to fire
+    setTimeout(() => setOpen(false), 200);
+
+    onBlurProp?.(e); // Call the passed onBlur prop after internal logic
+  };
+
+  // Handle popover open/close - prevent closing when input is focused
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen && document.activeElement === inputRef.current) {
+      // Don't close if the input still has focus (user clicked on input)
+      return;
+    }
+    setOpen(newOpen);
+  };
+
+  return (
+    <Popover.Root open={open} onOpenChange={handleOpenChange}>
+      <Input
+        ref={inputRef}
+        value={inputValue}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
+        placeholder={placeholder}
+        className={className}
+        disabled={disabled}
+        autoComplete="off"
+      />
+      <Popover.Portal>
+        <Popover.Positioner anchor={inputRef} align="start" sideOffset={4} className="isolate z-50">
+          <Popover.Popup
+            initialFocus={false}
+            className="flex flex-col rounded-md bg-popover p-0 text-popover-foreground shadow-md outline-hidden ring-1 ring-foreground/10"
+            style={{ width: inputRef.current?.offsetWidth }}
+          >
+            <Command shouldFilter={false}>
+              <CommandList>
+                <CommandEmpty>{loading ? "Loading..." : emptyText}</CommandEmpty>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={() => handleSelect(option.value)}
+                      className={cn(value === option.value && "font-bold")}
+                    >
+                      {option.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/activities/activity-timeline.tsx

@@ -0,0 +1,160 @@
+import type { Activity } from "@spaceinvoices/js-sdk";
+import { CheckCircle2, Circle, Clock, Mail, Pencil, Receipt, RefreshCw, Trash2, XCircle } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = { de, sl } as const;
+
+// Re-export for convenience
+export type { Activity };
+
+interface ActivityTimelineProps extends ComponentTranslationProps {
+  activities: Activity[];
+  isLoading?: boolean;
+}
+
+/**
+ * Get icon and color for activity action type
+ */
+function getActivityIcon(action: string) {
+  const iconMap: Record<string, { icon: typeof Circle; color: string }> = {
+    created: { icon: CheckCircle2, color: "text-green-500" },
+    updated: { icon: Pencil, color: "text-blue-500" },
+    deleted: { icon: Trash2, color: "text-red-500" },
+    voided: { icon: XCircle, color: "text-gray-500" },
+    sent: { icon: Mail, color: "text-purple-500" },
+    exported: { icon: Receipt, color: "text-orange-500" },
+    synced: { icon: RefreshCw, color: "text-cyan-500" },
+    fiscalized: { icon: CheckCircle2, color: "text-emerald-500" },
+  };
+  return iconMap[action] || { icon: Circle, color: "text-gray-400" };
+}
+
+/**
+ * Format relative time
+ */
+function formatRelativeTime(date: Date | string, t: (key: string) => string): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return t("just now");
+  if (diffMins < 60) return `${diffMins} ${t("minutes ago")}`;
+  if (diffHours < 24) return `${diffHours} ${t("hours ago")}`;
+  return `${diffDays} ${t("days ago")}`;
+}
+
+/**
+ * Get display label for actor
+ */
+function getActorLabel(activity: Activity, t: (key: string) => string): string {
+  if (activity.actor_label) return activity.actor_label;
+  if (activity.actor_type === "user") return t("user");
+  if (activity.actor_type === "system") return t("system");
+  if (activity.actor_type === "cron") return t("cron");
+  if (activity.actor_type === "webhook") return t("webhook");
+  return activity.actor_type;
+}
+
+/**
+ * Activity Timeline Component
+ *
+ * Displays a chronological list of activities for a resource.
+ * Shows icon, action, actor, and relative timestamp.
+ */
+export function ActivityTimeline({ activities, isLoading, ...i18nProps }: ActivityTimelineProps) {
+  const t = createTranslation({ translations, ...i18nProps });
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg">{t("Activity")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex animate-pulse items-start gap-3">
+                <div className="mt-0.5 h-5 w-5 rounded-full bg-muted" />
+                <div className="flex-1 space-y-2">
+                  <div className="h-4 w-24 rounded bg-muted" />
+                  <div className="h-3 w-16 rounded bg-muted" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!activities.length) {
+    return (
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg">{t("Activity")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <Clock className="h-4 w-4" />
+            <span>{t("No activities yet for this resource")}</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">{t("Activity")}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="relative">
+          {/* Timeline line */}
+          <div className="absolute top-3 bottom-3 left-2.5 w-px bg-border" />
+
+          {/* Activity items */}
+          <div className="space-y-4">
+            {activities.map((activity) => {
+              const { icon: Icon, color } = getActivityIcon(activity.action);
+              return (
+                <div key={activity.id} className="relative flex items-start gap-3 pl-0">
+                  {/* Icon */}
+                  <div className={`relative z-10 bg-background ${color}`}>
+                    <Icon className="h-5 w-5" />
+                  </div>
+
+                  {/* Content */}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-sm">{t(activity.action)}</span>
+                      <span className="text-muted-foreground text-xs">{getActorLabel(activity, t)}</span>
+                    </div>
+                    <div className="mt-0.5 text-muted-foreground text-xs">
+                      {formatRelativeTime(activity.created_at, t)}
+                    </div>
+                    {/* Details if available */}
+                    {activity.details && Object.keys(activity.details).length > 0 && (
+                      <div className="mt-1 text-muted-foreground text-xs">
+                        {activity.action === "sent" && (activity.details as { to?: string }).to && (
+                          <span>to {(activity.details as { to: string }).to}</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/activities/index.ts

@@ -0,0 +1 @@
+export { type Activity, ActivityTimeline } from "./activity-timeline";

package/src/components/activities/locales/de.ts

@@ -0,0 +1,30 @@
+export default {
+  // Header
+  Activity: "Aktivitaet",
+
+  // Actions
+  created: "Erstellt",
+  updated: "Aktualisiert",
+  deleted: "Geloescht",
+  voided: "Storniert",
+  sent: "Gesendet",
+  exported: "Exportiert",
+  synced: "Synchronisiert",
+  fiscalized: "Fiskalisiert",
+
+  // Actor types
+  user: "Benutzer",
+  system: "System",
+  cron: "Geplante Aufgabe",
+  webhook: "Webhook",
+
+  // Empty state
+  "No activities": "Keine Aktivitaeten",
+  "No activities yet for this resource": "Noch keine Aktivitaeten fuer diese Ressource",
+
+  // Time
+  "just now": "gerade eben",
+  "minutes ago": "Minuten her",
+  "hours ago": "Stunden her",
+  "days ago": "Tage her",
+} as const;

package/src/components/activities/locales/sl.ts

@@ -0,0 +1,30 @@
+export default {
+  // Header
+  Activity: "Aktivnost",
+
+  // Actions
+  created: "Ustvarjeno",
+  updated: "Posodobljeno",
+  deleted: "Izbrisano",
+  voided: "Stornirano",
+  sent: "Poslano",
+  exported: "Izvozeno",
+  synced: "Sinhronizirano",
+  fiscalized: "Davčno potrjeno",
+
+  // Actor types
+  user: "Uporabnik",
+  system: "Sistem",
+  cron: "Načrtovano opravilo",
+  webhook: "Webhook",
+
+  // Empty state
+  "No activities": "Ni aktivnosti",
+  "No activities yet for this resource": "Za ta vir še ni aktivnosti",
+
+  // Time
+  "just now": "pravkar",
+  "minutes ago": "minut nazaj",
+  "hours ago": "ur nazaj",
+  "days ago": "dni nazaj",
+} as const;

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

@@ -0,0 +1,75 @@
+import type { CreateAdvanceInvoice201, CreateAdvanceInvoiceBody } from "@spaceinvoices/js-sdk";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { NEXT_DOCUMENT_NUMBER_CACHE_KEY } from "@/ui/hooks/use-next-document-number";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+// Define constants for cache keys
+export const ADVANCE_INVOICES_CACHE_KEY = "advance-invoices";
+
+// ============================================================================
+// Create Advance Invoice Hook
+// ============================================================================
+
+type UseCreateAdvanceInvoiceOptions = {
+  entityId: string;
+  onSuccess?: (data: CreateAdvanceInvoice201) => void;
+  onError?: (error: unknown) => void;
+};
+
+export function useCreateAdvanceInvoice({ entityId, onSuccess, onError }: UseCreateAdvanceInvoiceOptions) {
+  const { sdk } = useSDK();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: CreateAdvanceInvoiceBody) => {
+      return sdk.advanceInvoices.create(data, { entity_id: entityId });
+    },
+    onSuccess: (data) => {
+      // Invalidate advance invoices list cache
+      queryClient.invalidateQueries({ queryKey: [ADVANCE_INVOICES_CACHE_KEY] });
+      // Invalidate next number cache (shared cache key)
+      queryClient.invalidateQueries({ queryKey: [NEXT_DOCUMENT_NUMBER_CACHE_KEY] });
+      onSuccess?.(data);
+    },
+    onError,
+  });
+}
+
+// ============================================================================
+// FURS Last-Used Combo (localStorage) - Reuse from invoices
+// ============================================================================
+
+const FURS_ADV_LAST_USED_KEY = "si:furs:adv:last-used";
+
+export type FursCombo = {
+  business_premise_name: string;
+  electronic_device_name: string;
+};
+
+/**
+ * Get last-used FURS premise/device combo from localStorage for advance invoices
+ * @param entityId - Entity ID (combos are stored per-entity)
+ */
+export function getLastUsedFursCombo(entityId: string): FursCombo | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(`${FURS_ADV_LAST_USED_KEY}:${entityId}`);
+    return stored ? JSON.parse(stored) : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save last-used FURS premise/device combo to localStorage for advance invoices
+ * @param entityId - Entity ID
+ * @param combo - FURS premise/device combo
+ */
+export function setLastUsedFursCombo(entityId: string, combo: FursCombo): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(`${FURS_ADV_LAST_USED_KEY}:${entityId}`, JSON.stringify(combo));
+  } catch {
+    // Ignore localStorage errors (quota exceeded, etc.)
+  }
+}