@spaceinvoices/react-ui 0.4.0 → 0.4.2

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Aucune facture trouvée",
   "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  selected: "sélectionnés",
+  "Export PDFs": "Exporter les PDF",
+  "Deselect all": "Tout désélectionner",
+  Void: "Annuler",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Nisu pronađeni računi",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
   "Clear search": "Očisti pretragu",
+  selected: "odabranih",
+  "Export PDFs": "Izvezi PDF-ove",
+  "Deselect all": "Poništi odabir",
+  Void: "Storniraj",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Nessuna fattura trovata",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  selected: "selezionati",
+  "Export PDFs": "Esporta PDF",
+  "Deselect all": "Deseleziona tutto",
+  Void: "Annulla",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Geen facturen gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  selected: "geselecteerd",
+  "Export PDFs": "PDFs exporteren",
+  "Deselect all": "Alles deselecteren",
+  Void: "Nietig verklaren",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Nie znaleziono faktur",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  selected: "wybranych",
+  "Export PDFs": "Eksportuj PDF-y",
+  "Deselect all": "Odznacz wszystko",
+  Void: "Anuluj",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Nenhuma fatura encontrada",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  selected: "selecionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Desselecionar tudo",
+  Void: "Anular",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Ni najdenih računov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  selected: "izbranih",
+  "Export PDFs": "Izvozi PDF-je",
+  "Deselect all": "Počisti izbiro",
+  Void: "Storniraj",
 } as const;

package/src/components/invoices/view/fiscalization-status-card.tsx

@@ -18,7 +18,10 @@ import sl from "../../documents/view/locales/sl";
 
 const translations = { de, es, fr, hr, it, nl, pl, pt, sl } as const;
 
-type FiscalizationData = FursFiscalizationResponse | FinaFiscalizationResponse;
+type FiscalizationStatus = "pending" | "success" | "failed" | "skipped";
+type FiscalizationData = (Exclude<FursFiscalizationResponse, null> | Exclude<FinaFiscalizationResponse, null>) & {
+  status: FiscalizationStatus;
+};
 
 interface FiscalizationStatusCardProps extends ComponentTranslationProps {
   fiscalizationType: "furs" | "fina";

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

@@ -15,9 +15,10 @@ import { createTranslation } from "@/ui/lib/translation";
 
 type ItemListRowActionsProps = {
   item: Item;
+  onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRowActions({ item, ...i18nProps }: ItemListRowActionsProps) {
+export default function ItemListRowActions({ item, onView, ...i18nProps }: ItemListRowActionsProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -34,12 +35,7 @@ export default function ItemListRowActions({ item, ...i18nProps }: ItemListRowAc
           {t("Copy item ID")}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => {
-            window.location.href = `/app/items/${item.id}`;
-          }}
-        >
+        <DropdownMenuItem className="cursor-pointer" onClick={() => onView?.(item)}>
           {t("View item")}
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -9,9 +9,10 @@ import ItemListRowActions from "./item-list-row-actions";
 type ItemListRowProps = {
   item: Item;
   onRowClick?: (item: Item) => void;
+  onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRow({ item, onRowClick, ...i18nProps }: ItemListRowProps) {
+export default function ItemListRow({ item, onRowClick, onView, ...i18nProps }: ItemListRowProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -25,7 +26,7 @@ export default function ItemListRow({ item, onRowClick, ...i18nProps }: ItemList
       <TableCell>{item.description}</TableCell>
       <TableCell className="text-right">{item.price}</TableCell>
       <TableCell className="text-right">
-        <ItemListRowActions item={item} t={t} />
+        <ItemListRowActions item={item} onView={onView} t={t} />
       </TableCell>
     </TableRow>
   );

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;