@spaceinvoices/react-ui 0.1.1

package/src/components/items/item-list-table/item-list-table.tsx

@@ -0,0 +1,76 @@
+import type { Item } from "@spaceinvoices/js-sdk";
+
+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 { ITEMS_CACHE_KEY } from "../items.hooks";
+import ItemListHeader from "./item-list-header";
+import ItemListRow from "./item-list-row";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type ItemListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+} & ListTableProps<Item>;
+
+export default function ItemListTable({
+  queryParams,
+  createNewTrigger,
+  onRowClick,
+  onChangeParams,
+  entityId,
+  ...i18nProps
+}: ItemListTableProps) {
+  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.items.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;
+  }, entityId);
+
+  return (
+    <DataTable
+      columns={[
+        { id: "name", header: t("Name"), sortable: true },
+        { id: "description", header: t("Description"), sortable: true },
+        { id: "unit", header: t("Unit") },
+        { id: "price", header: t("Price"), align: "right" },
+        { id: "actions", header: "", align: "right" },
+      ]}
+      renderRow={(item) => <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} t={t} />}
+      renderHeader={(headerProps) => <ItemListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
+      queryParams={queryParams}
+      resourceName="item"
+      cacheKey={ITEMS_CACHE_KEY}
+      createNewTrigger={createNewTrigger}
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+    />
+  );
+}

package/src/components/items/item-list-table/locales/de.ts

@@ -0,0 +1,10 @@
+export default {
+  Name: "Name",
+  Description: "Beschreibung",
+  Unit: "Einheit",
+  Price: "Preis",
+  "Open menu": "Menü öffnen",
+  Actions: "Aktionen",
+  "Copy item ID": "Artikel-ID kopieren",
+  "View item": "Artikel anzeigen",
+};

package/src/components/items/item-list-table/locales/en.ts

@@ -0,0 +1,10 @@
+export default {
+  Name: "Name",
+  Description: "Description",
+  Unit: "Unit",
+  Price: "Price",
+  "Open menu": "Open menu",
+  Actions: "Actions",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+};

package/src/components/items/item-list-table/locales/sl.ts

@@ -0,0 +1,10 @@
+export default {
+  Name: "Naziv",
+  Description: "Opis",
+  Unit: "Enota",
+  Price: "Cena",
+  "Open menu": "Odpri meni",
+  Actions: "Akcije",
+  "Copy item ID": "Kopiraj ID izdelka",
+  "View item": "Poglej izdelek",
+};

package/src/components/items/items.hooks.ts

@@ -0,0 +1,63 @@
+import type { CreateItemRequest, Item } from "@spaceinvoices/js-sdk";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+// Define a constant for the items cache key
+export const ITEMS_CACHE_KEY = "items";
+
+// Create item-specific hooks using the factory
+const {
+  useCreateResource: useCreateItem,
+  useUpdateResource: useUpdateItem,
+  useDeleteResource: useDeleteItem,
+} = createResourceHooks<Item, CreateItemRequest>("items", ITEMS_CACHE_KEY);
+
+export { useCreateItem, useDeleteItem, useUpdateItem };
+
+/**
+ * Hook to search items by name
+ */
+export const useItemSearch = (entityId: string, search: string) => {
+  const { sdk } = useSDK();
+
+  return useQuery({
+    queryKey: [ITEMS_CACHE_KEY, "search", entityId, search],
+    queryFn: async () => {
+      if (!search) return { data: [] };
+
+      const response = await sdk.items.list({
+        entity_id: entityId,
+        search,
+        limit: 10,
+      });
+
+      return response;
+    },
+    enabled: Boolean(entityId && search),
+  });
+};
+
+/**
+ * Hook to fetch recent items for an entity
+ */
+export const useRecentItems = (entityId: string) => {
+  const { sdk } = useSDK();
+
+  return useQuery({
+    queryKey: [ITEMS_CACHE_KEY, "recent", entityId],
+    queryFn: async () => {
+      const response = await sdk.items.list({
+        entity_id: entityId,
+        limit: 5,
+        order_by: "-created_at",
+      });
+
+      return response;
+    },
+    enabled: Boolean(entityId),
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes
+  });
+};

package/src/components/loading-spinner.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@/ui/lib/utils";
+
+type LoadingSpinnerProps = {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+} as const;
+
+export function LoadingSpinner({ size = "md", className }: LoadingSpinnerProps) {
+  return (
+    <div
+      className={cn(
+        "animate-spin rounded-full border-2 border-current border-t-transparent text-muted-foreground/20",
+        sizeClasses[size],
+        className,
+      )}
+    />
+  );
+}

package/src/components/payments/create-payment-form/create-payment-form.tsx

@@ -0,0 +1,222 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreatePaymentRequest, Payment } from "@spaceinvoices/js-sdk";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/ui/components/ui/button";
+import { Calendar } from "@/ui/components/ui/calendar";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
+import { Textarea } from "@/ui/components/ui/textarea";
+import type { CreatePaymentSchema } from "@/ui/generated/schemas/payment";
+import { createPaymentSchema } from "@/ui/generated/schemas/payment";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+
+import { useCreatePayment } from "../payments.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+// Labels for payment types (used for translations)
+const PAYMENT_TYPE_LABELS: Record<string, string> = {
+  cash: "Cash",
+  bank_transfer: "Bank Transfer",
+  card: "Card",
+  check: "Check",
+  credit_note: "Credit Note",
+  advance: "Advance",
+  other: "Other",
+};
+
+type CreatePaymentFormProps = {
+  entityId: string;
+  invoiceId: string;
+  invoiceTotal: number;
+  onSuccess?: (payment: Payment) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function CreatePaymentForm({
+  entityId,
+  invoiceId,
+  invoiceTotal,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: CreatePaymentFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  const form = useForm<CreatePaymentSchema>({
+    resolver: zodResolver(createPaymentSchema),
+    defaultValues: {
+      invoice_id: invoiceId,
+      amount: invoiceTotal,
+      type: "cash",
+      date: new Date().toISOString(),
+      reference: "",
+      note: "",
+    },
+  });
+
+  const { mutate: createPayment, isPending } = useCreatePayment({
+    entityId,
+    onSuccess: (payment, _variables, _context) => {
+      onSuccess?.(payment);
+      form.reset(); // Reset form after successful submission
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the payment"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreatePaymentSchema) => {
+    // SDK accepts both Date and string for date fields, no conversion needed
+    createPayment(values as CreatePaymentRequest);
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Amount")}
+                <span className="ml-1 text-red-500">*</span>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder={t("Enter amount")}
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Payment Type")}
+                <span className="ml-1 text-red-500">*</span>
+              </FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("Select payment type")}>
+                      {field.value && t(PAYMENT_TYPE_LABELS[field.value])}
+                    </SelectValue>
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.entries(PAYMENT_TYPE_LABELS).map(([value, label]) => (
+                    <SelectItem key={value} value={value}>
+                      {t(label)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Payment Date")}</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                    >
+                      {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value ? new Date(field.value) : undefined}
+                    onSelect={(date) => field.onChange(date?.toISOString())}
+                    disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="reference"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Reference")}</FormLabel>
+              <FormControl>
+                <Input placeholder={t("Enter reference number")} {...field} value={field.value ?? ""} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="note"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Note")}</FormLabel>
+              <FormControl>
+                <Textarea placeholder={t("Enter payment notes")} {...field} value={field.value ?? ""} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}

package/src/components/payments/create-payment-form/locales/de.ts

@@ -0,0 +1,20 @@
+export default {
+  Amount: "Betrag",
+  "Enter amount": "Betrag eingeben",
+  "Payment Type": "Zahlungsart",
+  "Select payment type": "Zahlungsart auswählen",
+  Cash: "Bargeld",
+  "Bank Transfer": "Banküberweisung",
+  Card: "Karte",
+  Check: "Scheck",
+  "Credit Note": "Gutschrift",
+  Advance: "Vorauszahlung",
+  Other: "Andere",
+  "Payment Date": "Zahlungsdatum",
+  "Pick a date": "Datum auswählen",
+  Reference: "Referenz",
+  "Enter reference number": "Referenznummer eingeben",
+  Note: "Notiz",
+  "Enter payment notes": "Zahlungsnotizen eingeben",
+  "There was an error creating the payment": "Beim Erstellen der Zahlung ist ein Fehler aufgetreten",
+} as const;

package/src/components/payments/create-payment-form/locales/sl.ts

@@ -0,0 +1,20 @@
+export default {
+  Amount: "Znesek",
+  "Enter amount": "Vnesite znesek",
+  "Payment Type": "Vrsta plačila",
+  "Select payment type": "Izberite vrsto plačila",
+  Cash: "Gotovina",
+  "Bank Transfer": "Bančno nakazilo",
+  Card: "Kartica",
+  Check: "Ček",
+  "Credit Note": "Dobropis",
+  Advance: "Avans",
+  Other: "Drugo",
+  "Payment Date": "Datum plačila",
+  "Pick a date": "Izberite datum",
+  Reference: "Referenca",
+  "Enter reference number": "Vnesite referenčno številko",
+  Note: "Opomba",
+  "Enter payment notes": "Vnesite opombe plačila",
+  "There was an error creating the payment": "Prišlo je do napake pri ustvarjanju plačila",
+} as const;

package/src/components/payments/edit-payment-form/edit-payment-form.tsx

@@ -0,0 +1,230 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Payment } from "@spaceinvoices/js-sdk";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/ui/components/ui/button";
+import { Calendar } from "@/ui/components/ui/calendar";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
+import { Textarea } from "@/ui/components/ui/textarea";
+import { type UpdatePaymentSchema, updatePaymentSchema } from "@/ui/generated/schemas/payment";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+
+import { useUpdatePayment } from "../payments.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+// Labels for payment types (used for translations)
+const PAYMENT_TYPE_LABELS: Record<string, string> = {
+  cash: "Cash",
+  bank_transfer: "Bank Transfer",
+  card: "Card",
+  check: "Check",
+  credit_note: "Credit Note",
+  advance: "Advance",
+  other: "Other",
+};
+
+// Form schema extends update schema with required fields for editing
+const editFormSchema = updatePaymentSchema.required({
+  amount: true,
+  type: true,
+  date: true,
+});
+type EditFormSchema = typeof editFormSchema._type;
+
+type EditPaymentFormProps = {
+  entityId: string;
+  payment: Payment;
+  onSuccess?: (payment: Payment) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function EditPaymentForm({
+  entityId,
+  payment,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: EditPaymentFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  // SDK converts date strings to Date objects, so we need to convert back to string
+  const dateString = payment.date instanceof Date ? payment.date.toISOString() : (payment.date as string);
+
+  const form = useForm<EditFormSchema>({
+    resolver: zodResolver(editFormSchema),
+    defaultValues: {
+      amount: payment.amount,
+      type: payment.type as UpdatePaymentSchema["type"],
+      date: dateString,
+      reference: payment.reference ?? "",
+      note: payment.note ?? "",
+    },
+  });
+
+  const { mutate: updatePayment, isPending } = useUpdatePayment({
+    entityId,
+    onSuccess: (updatedPayment, _variables, _context) => {
+      onSuccess?.(updatedPayment);
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error updating the payment"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: EditFormSchema) => {
+    updatePayment({
+      id: payment.id,
+      data: values,
+    });
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Amount")}
+                <span className="ml-1 text-red-500">*</span>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder={t("Enter amount")}
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Payment Type")}
+                <span className="ml-1 text-red-500">*</span>
+              </FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("Select payment type")}>
+                      {field.value && t(PAYMENT_TYPE_LABELS[field.value])}
+                    </SelectValue>
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.entries(PAYMENT_TYPE_LABELS).map(([value, label]) => (
+                    <SelectItem key={value} value={value}>
+                      {t(label)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Payment Date")}</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                    >
+                      {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value ? new Date(field.value) : undefined}
+                    onSelect={(date) => field.onChange(date?.toISOString())}
+                    disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="reference"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Reference")}</FormLabel>
+              <FormControl>
+                <Input placeholder={t("Enter reference number")} {...field} value={field.value ?? ""} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="note"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("Note")}</FormLabel>
+              <FormControl>
+                <Textarea placeholder={t("Enter payment notes")} {...field} value={field.value ?? ""} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}