@spaceinvoices/react-ui 0.4.1 → 0.4.2

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

@@ -37,12 +37,14 @@ type ItemListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onView?: (item: Item) => void;
 } & ListTableProps<Item>;
 
 export default function ItemListTable({
   queryParams,
   createNewTrigger,
   onRowClick,
+  onView,
   onChangeParams,
   entityId,
   ...i18nProps
@@ -67,7 +69,9 @@ export default function ItemListTable({
         { 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} />}
+      renderRow={(item) => (
+        <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} onView={onView} t={t} />
+      )}
       renderHeader={(headerProps) => <ItemListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
       queryParams={queryParams}
       resourceName="item"

package/src/components/recurring-invoices/create-recurring-invoice-form/create-recurring-invoice-form.tsx

@@ -0,0 +1,418 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateRecurringInvoiceBody, RecurringInvoice } from "@spaceinvoices/js-sdk";
+import { CalendarIcon } from "lucide-react";
+import { useForm, useWatch } from "react-hook-form";
+import { Button } from "@/ui/components/ui/button";
+import { Calendar } from "@/ui/components/ui/calendar";
+import { Checkbox } from "@/ui/components/ui/checkbox";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 type { CreateRecurringInvoiceSchema } from "@/ui/generated/schemas/recurringinvoice";
+import { createRecurringInvoiceSchema } from "@/ui/generated/schemas/recurringinvoice";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+
+import { useCreateRecurringInvoice } from "../recurring-invoices.hooks";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+} as const;
+
+const FREQUENCY_LABELS: Record<string, string> = {
+  daily: "Daily",
+  weekly: "Weekly",
+  monthly: "Monthly",
+  yearly: "Yearly",
+};
+
+const DAY_OF_WEEK_LABELS: Record<number, string> = {
+  0: "Sunday",
+  1: "Monday",
+  2: "Tuesday",
+  3: "Wednesday",
+  4: "Thursday",
+  5: "Friday",
+  6: "Saturday",
+};
+
+const MONTH_LABELS: Record<number, string> = {
+  1: "January",
+  2: "February",
+  3: "March",
+  4: "April",
+  5: "May",
+  6: "June",
+  7: "July",
+  8: "August",
+  9: "September",
+  10: "October",
+  11: "November",
+  12: "December",
+};
+
+function formatDateToYMD(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+type CreateRecurringInvoiceFormProps = {
+  entityId: string;
+  documentId: string;
+  onSuccess?: (recurringInvoice: RecurringInvoice) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function CreateRecurringInvoiceForm({
+  entityId,
+  documentId,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: CreateRecurringInvoiceFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  const form = useForm<CreateRecurringInvoiceSchema>({
+    resolver: zodResolver(createRecurringInvoiceSchema),
+    defaultValues: {
+      document_id: documentId,
+      name: "",
+      frequency: "monthly",
+      interval: 1,
+      day_of_week: null,
+      day_of_month: null,
+      month_of_year: null,
+      start_date: formatDateToYMD(new Date()),
+      end_date: undefined,
+      auto_send: false,
+      create_as_draft: false,
+    },
+  });
+
+  const frequency = useWatch({ control: form.control, name: "frequency" });
+
+  const { mutate: createRecurringInvoice, isPending } = useCreateRecurringInvoice({
+    entityId,
+    onSuccess: (recurringInvoice, _variables, _context) => {
+      onSuccess?.(recurringInvoice);
+      form.reset();
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the schedule"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreateRecurringInvoiceSchema) => {
+    createRecurringInvoice(values as CreateRecurringInvoiceBody);
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Name")}
+                <span className="ml-1 text-red-500">*</span>
+              </FormLabel>
+              <FormControl>
+                <Input placeholder={t("Enter schedule name")} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="frequency"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("Frequency")}
+                  <span className="ml-1 text-red-500">*</span>
+                </FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("Select frequency")}>
+                        {field.value && t(FREQUENCY_LABELS[field.value])}
+                      </SelectValue>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {Object.entries(FREQUENCY_LABELS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {t(label)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="interval"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("Interval")}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="365"
+                    placeholder="1"
+                    {...field}
+                    onChange={(e) => field.onChange(Number(e.target.value))}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        {frequency === "weekly" && (
+          <FormField
+            control={form.control}
+            name="day_of_week"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("Day of Week")}</FormLabel>
+                <Select
+                  onValueChange={(v) => field.onChange(Number(v))}
+                  value={field.value != null ? String(field.value) : undefined}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("Select day")}>
+                        {field.value != null && t(DAY_OF_WEEK_LABELS[field.value])}
+                      </SelectValue>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {Object.entries(DAY_OF_WEEK_LABELS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {t(label)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        {(frequency === "monthly" || frequency === "yearly") && (
+          <FormField
+            control={form.control}
+            name="day_of_month"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("Day of Month")}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="31"
+                    placeholder="1"
+                    {...field}
+                    value={field.value ?? ""}
+                    onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : null)}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        {frequency === "yearly" && (
+          <FormField
+            control={form.control}
+            name="month_of_year"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("Month")}</FormLabel>
+                <Select
+                  onValueChange={(v) => field.onChange(Number(v))}
+                  value={field.value != null ? String(field.value) : undefined}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("Select month")}>
+                        {field.value != null && t(MONTH_LABELS[field.value])}
+                      </SelectValue>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {Object.entries(MONTH_LABELS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {t(label)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        <FormField
+          control={form.control}
+          name="start_date"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("Start Date")}
+                <span className="ml-1 text-red-500">*</span>
+              </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 ? field.value : <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}T00:00:00`) : undefined}
+                    onSelect={(date) => field.onChange(date ? formatDateToYMD(date) : undefined)}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="end_date"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("End 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 ? field.value : <span>{t("No end 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}T00:00:00`) : undefined}
+                    onSelect={(date) => field.onChange(date ? formatDateToYMD(date) : undefined)}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="auto_send"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+              <FormControl>
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>{t("Auto-send")}</FormLabel>
+                <FormDescription>{t("Automatically email generated invoices")}</FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="create_as_draft"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+              <FormControl>
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>{t("Create as draft")}</FormLabel>
+                <FormDescription>{t("Generated invoices will be drafts for review")}</FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/de.ts

@@ -0,0 +1,45 @@
+export default {
+  Name: "Name",
+  "Enter schedule name": "Planname eingeben",
+  Frequency: "Häufigkeit",
+  "Select frequency": "Häufigkeit wählen",
+  Daily: "Täglich",
+  Weekly: "Wöchentlich",
+  Monthly: "Monatlich",
+  Yearly: "Jährlich",
+  Interval: "Intervall",
+  "Day of Week": "Wochentag",
+  "Select day": "Tag wählen",
+  Sunday: "Sonntag",
+  Monday: "Montag",
+  Tuesday: "Dienstag",
+  Wednesday: "Mittwoch",
+  Thursday: "Donnerstag",
+  Friday: "Freitag",
+  Saturday: "Samstag",
+  "Day of Month": "Tag im Monat",
+  Month: "Monat",
+  "Select month": "Monat wählen",
+  January: "Januar",
+  February: "Februar",
+  March: "März",
+  April: "April",
+  May: "Mai",
+  June: "Juni",
+  July: "Juli",
+  August: "August",
+  September: "September",
+  October: "Oktober",
+  November: "November",
+  December: "Dezember",
+  "Start Date": "Startdatum",
+  "End Date": "Enddatum",
+  "Pick a date": "Datum wählen",
+  "No end date": "Kein Enddatum",
+  "Auto-send": "Automatisch senden",
+  "Automatically email generated invoices": "Erstellte Rechnungen automatisch per E-Mail senden",
+  "Create as draft": "Als Entwurf erstellen",
+  "Generated invoices will be drafts for review":
+    "Erstellte Rechnungen werden als Entwürfe zur Überprüfung gespeichert",
+  "There was an error creating the schedule": "Beim Erstellen des Plans ist ein Fehler aufgetreten",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/es.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Nombre",
+  "Enter schedule name": "Ingrese nombre del programa",
+  Frequency: "Frecuencia",
+  "Select frequency": "Seleccionar frecuencia",
+  Daily: "Diario",
+  Weekly: "Semanal",
+  Monthly: "Mensual",
+  Yearly: "Anual",
+  Interval: "Intervalo",
+  "Day of Week": "Día de la semana",
+  "Select day": "Seleccionar día",
+  Sunday: "Domingo",
+  Monday: "Lunes",
+  Tuesday: "Martes",
+  Wednesday: "Miércoles",
+  Thursday: "Jueves",
+  Friday: "Viernes",
+  Saturday: "Sábado",
+  "Day of Month": "Día del mes",
+  Month: "Mes",
+  "Select month": "Seleccionar mes",
+  January: "Enero",
+  February: "Febrero",
+  March: "Marzo",
+  April: "Abril",
+  May: "Mayo",
+  June: "Junio",
+  July: "Julio",
+  August: "Agosto",
+  September: "Septiembre",
+  October: "Octubre",
+  November: "Noviembre",
+  December: "Diciembre",
+  "Start Date": "Fecha de inicio",
+  "End Date": "Fecha de fin",
+  "Pick a date": "Elegir fecha",
+  "No end date": "Sin fecha de fin",
+  "Auto-send": "Envío automático",
+  "Automatically email generated invoices": "Enviar automáticamente las facturas generadas por correo",
+  "Create as draft": "Crear como borrador",
+  "Generated invoices will be drafts for review": "Las facturas generadas serán borradores para revisión",
+  "There was an error creating the schedule": "Hubo un error al crear el programa",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/fr.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Nom",
+  "Enter schedule name": "Entrez le nom du programme",
+  Frequency: "Fréquence",
+  "Select frequency": "Sélectionner la fréquence",
+  Daily: "Quotidien",
+  Weekly: "Hebdomadaire",
+  Monthly: "Mensuel",
+  Yearly: "Annuel",
+  Interval: "Intervalle",
+  "Day of Week": "Jour de la semaine",
+  "Select day": "Sélectionner le jour",
+  Sunday: "Dimanche",
+  Monday: "Lundi",
+  Tuesday: "Mardi",
+  Wednesday: "Mercredi",
+  Thursday: "Jeudi",
+  Friday: "Vendredi",
+  Saturday: "Samedi",
+  "Day of Month": "Jour du mois",
+  Month: "Mois",
+  "Select month": "Sélectionner le mois",
+  January: "Janvier",
+  February: "Février",
+  March: "Mars",
+  April: "Avril",
+  May: "Mai",
+  June: "Juin",
+  July: "Juillet",
+  August: "Août",
+  September: "Septembre",
+  October: "Octobre",
+  November: "Novembre",
+  December: "Décembre",
+  "Start Date": "Date de début",
+  "End Date": "Date de fin",
+  "Pick a date": "Choisir une date",
+  "No end date": "Pas de date de fin",
+  "Auto-send": "Envoi automatique",
+  "Automatically email generated invoices": "Envoyer automatiquement les factures générées par e-mail",
+  "Create as draft": "Créer comme brouillon",
+  "Generated invoices will be drafts for review": "Les factures générées seront des brouillons à vérifier",
+  "There was an error creating the schedule": "Une erreur est survenue lors de la création du programme",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/hr.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Naziv",
+  "Enter schedule name": "Unesite naziv rasporeda",
+  Frequency: "Učestalost",
+  "Select frequency": "Odaberite učestalost",
+  Daily: "Dnevno",
+  Weekly: "Tjedno",
+  Monthly: "Mjesečno",
+  Yearly: "Godišnje",
+  Interval: "Interval",
+  "Day of Week": "Dan u tjednu",
+  "Select day": "Odaberite dan",
+  Sunday: "Nedjelja",
+  Monday: "Ponedjeljak",
+  Tuesday: "Utorak",
+  Wednesday: "Srijeda",
+  Thursday: "Četvrtak",
+  Friday: "Petak",
+  Saturday: "Subota",
+  "Day of Month": "Dan u mjesecu",
+  Month: "Mjesec",
+  "Select month": "Odaberite mjesec",
+  January: "Siječanj",
+  February: "Veljača",
+  March: "Ožujak",
+  April: "Travanj",
+  May: "Svibanj",
+  June: "Lipanj",
+  July: "Srpanj",
+  August: "Kolovoz",
+  September: "Rujan",
+  October: "Listopad",
+  November: "Studeni",
+  December: "Prosinac",
+  "Start Date": "Datum početka",
+  "End Date": "Datum završetka",
+  "Pick a date": "Odaberite datum",
+  "No end date": "Bez datuma završetka",
+  "Auto-send": "Automatsko slanje",
+  "Automatically email generated invoices": "Automatski pošalji generirane račune e-poštom",
+  "Create as draft": "Kreiraj kao nacrt",
+  "Generated invoices will be drafts for review": "Generirani računi će biti nacrti za pregled",
+  "There was an error creating the schedule": "Došlo je do pogreške pri kreiranju rasporeda",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/it.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Nome",
+  "Enter schedule name": "Inserisci nome programma",
+  Frequency: "Frequenza",
+  "Select frequency": "Seleziona frequenza",
+  Daily: "Giornaliero",
+  Weekly: "Settimanale",
+  Monthly: "Mensile",
+  Yearly: "Annuale",
+  Interval: "Intervallo",
+  "Day of Week": "Giorno della settimana",
+  "Select day": "Seleziona giorno",
+  Sunday: "Domenica",
+  Monday: "Lunedì",
+  Tuesday: "Martedì",
+  Wednesday: "Mercoledì",
+  Thursday: "Giovedì",
+  Friday: "Venerdì",
+  Saturday: "Sabato",
+  "Day of Month": "Giorno del mese",
+  Month: "Mese",
+  "Select month": "Seleziona mese",
+  January: "Gennaio",
+  February: "Febbraio",
+  March: "Marzo",
+  April: "Aprile",
+  May: "Maggio",
+  June: "Giugno",
+  July: "Luglio",
+  August: "Agosto",
+  September: "Settembre",
+  October: "Ottobre",
+  November: "Novembre",
+  December: "Dicembre",
+  "Start Date": "Data di inizio",
+  "End Date": "Data di fine",
+  "Pick a date": "Scegli una data",
+  "No end date": "Nessuna data di fine",
+  "Auto-send": "Invio automatico",
+  "Automatically email generated invoices": "Invia automaticamente le fatture generate via e-mail",
+  "Create as draft": "Crea come bozza",
+  "Generated invoices will be drafts for review": "Le fatture generate saranno bozze da verificare",
+  "There was an error creating the schedule": "Si è verificato un errore durante la creazione del programma",
+} as const;