@spaceinvoices/react-ui 0.3.0 → 0.4.1

package/src/components/entities/furs-settings-form/sections/general-settings-section.tsx

@@ -1,7 +1,9 @@
 import type { Entity } from "@spaceinvoices/js-sdk";
-import { ChevronRight, Settings, User } from "lucide-react";
+import { AlertTriangle, Building2, ChevronRight, Settings, User } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
+import { useUpdateEntity } from "@/ui/components/entities/entities.hooks";
+import { Alert, AlertDescription } from "@/ui/components/ui/alert";
 import { Button } from "@/ui/components/ui/button";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
 import { Input } from "@/ui/components/ui/input";
@@ -30,6 +32,37 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
   const wrap = (section: SectionType, content: ReactNode) => (wrapSection ? wrapSection(section, content) : content);
   const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
 
+  // Entity info (local state for form)
+  const [entityTaxNumber, setEntityTaxNumber] = useState("");
+  const [entityAddress, setEntityAddress] = useState("");
+  const [entityCity, setEntityCity] = useState("");
+  const [entityPostCode, setEntityPostCode] = useState("");
+
+  // Initialize entity fields from entity prop
+  useEffect(() => {
+    setEntityTaxNumber(entity.tax_number || "");
+    setEntityAddress(entity.address || "");
+    setEntityCity(entity.city || "");
+    setEntityPostCode(entity.post_code || "");
+  }, [entity.tax_number, entity.address, entity.city, entity.post_code]);
+
+  const { mutate: updateEntity, isPending: isEntityUpdatePending } = useUpdateEntity({
+    onSuccess: () => onSuccess?.(),
+    onError: (error) => onError?.(error),
+  });
+
+  const handleSaveEntityInfo = () => {
+    updateEntity({
+      id: entity.id,
+      data: {
+        tax_number: entityTaxNumber || null,
+        address: entityAddress || null,
+        city: entityCity || null,
+        post_code: entityPostCode || null,
+      },
+    });
+  };
+
   // User operator settings (local state for form)
   const { data: userFursSettings, isLoading: userSettingsLoading } = useUserFursSettings(entity.id);
   const [operatorTaxNumber, setOperatorTaxNumber] = useState("");
@@ -58,6 +91,92 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
     });
   };
 
+  // Entity Information content
+  const entityInfoContent = (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-500/10">
+          <Building2 className="h-5 w-5 text-orange-600 dark:text-orange-400" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg">{t("Entity Information")}</h3>
+          <p className="text-muted-foreground text-sm">{t("Required company details for FURS fiscalization")}</p>
+        </div>
+      </div>
+
+      {!entity.tax_number && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{t("Tax number is required for FURS fiscalization")}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="entity-tax-number" className="font-medium text-sm">
+            {t("Entity Tax Number")}
+          </label>
+          <Input
+            id="entity-tax-number"
+            placeholder="12345678"
+            value={entityTaxNumber}
+            onChange={(e) => setEntityTaxNumber(e.target.value)}
+            className={cn("mt-2 h-10", !entity.tax_number && "border-destructive")}
+          />
+          <p className="mt-1 text-muted-foreground text-xs">
+            {t("Your company's tax number (must match FURS certificate)")}
+          </p>
+        </div>
+
+        <div>
+          <label htmlFor="entity-address" className="font-medium text-sm">
+            {t("Address")}
+          </label>
+          <Input
+            id="entity-address"
+            value={entityAddress}
+            onChange={(e) => setEntityAddress(e.target.value)}
+            className="mt-2 h-10"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="entity-post-code" className="font-medium text-sm">
+              {t("Post Code")}
+            </label>
+            <Input
+              id="entity-post-code"
+              value={entityPostCode}
+              onChange={(e) => setEntityPostCode(e.target.value)}
+              className="mt-2 h-10"
+            />
+          </div>
+          <div>
+            <label htmlFor="entity-city" className="font-medium text-sm">
+              {t("City")}
+            </label>
+            <Input
+              id="entity-city"
+              value={entityCity}
+              onChange={(e) => setEntityCity(e.target.value)}
+              className="mt-2 h-10"
+            />
+          </div>
+        </div>
+
+        <Button
+          type="button"
+          onClick={handleSaveEntityInfo}
+          disabled={isEntityUpdatePending}
+          className="cursor-pointer"
+        >
+          {isEntityUpdatePending ? t("Saving...") : t("Save Entity Info")}
+        </Button>
+      </div>
+    </div>
+  );
+
   // Operator Settings content
   const operatorContent = (
     <div className="space-y-4">
@@ -244,6 +363,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
 
   return (
     <div className="space-y-6">
+      {wrap("entity-info", entityInfoContent)}
       {wrap("operator", operatorContent)}
       {wrap("fiscalization", fiscalizationContent)}
       {wrap("advanced", advancedContent)}

package/src/components/entities/furs-settings-form/sections/premises-management-section.tsx

@@ -307,6 +307,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
           entity={entity}
           type={registerType}
           t={t}
+          existingPremiseNames={premises.map((p) => p.business_premise_name)}
           onSuccess={() => {
             setRegisterDialogOpen(false);
             onSuccess?.();

package/src/components/entities/furs-settings-form/sections/register-premise-dialog.tsx

@@ -41,6 +41,7 @@ interface RegisterPremiseDialogProps {
   entity: Entity;
   type: "real-estate" | "movable";
   t: (key: string) => string;
+  existingPremiseNames?: string[];
   onSuccess?: () => void;
   onError?: (error: unknown) => void;
 }
@@ -51,6 +52,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
   entity,
   type,
   t,
+  existingPremiseNames = [],
   onSuccess,
   onError,
 }) => {
@@ -63,8 +65,8 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
       business_premise_name: "",
       real_estate: {
         cadastral_number: "",
-        building_number: "",
-        building_section: "",
+        building_number: "0",
+        building_section: "0",
         community: "",
         city: "",
         street: "",
@@ -86,12 +88,21 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
     },
   });
 
+  const handleMutationError = (error: unknown, form: typeof realEstateForm | typeof movableForm) => {
+    const err = error as { status?: number; data?: { message?: string } };
+    if (err?.status === 409 && err?.data?.message) {
+      form.setError("business_premise_name", { message: err.data.message });
+    } else {
+      onError?.(error);
+    }
+  };
+
   const { mutate: registerRealEstate, isPending: isRealEstatePending } = useRegisterRealEstatePremise({
     onSuccess: () => {
       realEstateForm.reset();
       onSuccess?.();
     },
-    onError,
+    onError: (error) => handleMutationError(error, realEstateForm),
   });
 
   const { mutate: registerMovable, isPending: isMovablePending } = useRegisterMovablePremise({
@@ -99,10 +110,18 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
       movableForm.reset();
       onSuccess?.();
     },
-    onError,
+    onError: (error) => handleMutationError(error, movableForm),
   });
 
+  const isDuplicateName = (name: string) => existingPremiseNames.some((n) => n.toUpperCase() === name.toUpperCase());
+
   const handleRealEstateSubmit = (data: RealEstatePremiseForm) => {
+    if (isDuplicateName(data.business_premise_name)) {
+      realEstateForm.setError("business_premise_name", {
+        message: t("A premise with this name already exists"),
+      });
+      return;
+    }
     registerRealEstate({
       entityId: entity.id,
       data,
@@ -110,6 +129,12 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
   };
 
   const handleMovableSubmit = (data: MovablePremiseForm) => {
+    if (isDuplicateName(data.business_premise_name)) {
+      movableForm.setError("business_premise_name", {
+        message: t("A premise with this name already exists"),
+      });
+      return;
+    }
     registerMovable({
       entityId: entity.id,
       data,
@@ -172,18 +197,11 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   name="real_estate.building_number"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("Building Number")}</FormLabel>
+                      <FormLabel>{t("Building Number")} *</FormLabel>
                       <FormControl>
-                        <Input
-                          type="text"
-                          inputMode="numeric"
-                          pattern="[0-9]*"
-                          placeholder="456"
-                          {...field}
-                          value={field.value || ""}
-                        />
+                        <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="456" {...field} />
                       </FormControl>
-                      <FormDescription className="text-xs">{t("Must be numeric (optional)")}</FormDescription>
+                      <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -193,18 +211,11 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   name="real_estate.building_section"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("Building Section")}</FormLabel>
+                      <FormLabel>{t("Building Section")} *</FormLabel>
                       <FormControl>
-                        <Input
-                          type="text"
-                          inputMode="numeric"
-                          pattern="[0-9]*"
-                          placeholder="1"
-                          {...field}
-                          value={field.value || ""}
-                        />
+                        <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="1" {...field} />
                       </FormControl>
-                      <FormDescription className="text-xs">{t("Must be numeric (optional)")}</FormDescription>
+                      <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -233,9 +244,9 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 name="real_estate.street"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("Street")}</FormLabel>
+                    <FormLabel>{t("Street")} *</FormLabel>
                     <FormControl>
-                      <Input placeholder="Dunajska cesta" {...field} value={field.value || ""} />
+                      <Input placeholder="Dunajska cesta" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -248,9 +259,9 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   name="real_estate.house_number"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("House Number")}</FormLabel>
+                      <FormLabel>{t("House Number")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="22" {...field} value={field.value || ""} />
+                        <Input placeholder="22" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -277,9 +288,9 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   name="real_estate.city"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("City")}</FormLabel>
+                      <FormLabel>{t("City")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Ljubljana" {...field} value={field.value || ""} />
+                        <Input placeholder="Ljubljana" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -290,10 +301,11 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   name="real_estate.postal_code"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("Postal Code")}</FormLabel>
+                      <FormLabel>{t("Postal Code")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="1000" {...field} value={field.value || ""} />
+                        <Input placeholder="1000" {...field} />
                       </FormControl>
+                      <FormDescription className="text-xs">{t("Exactly 4 digits")}</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}

package/src/components/invoices/index.ts

@@ -5,5 +5,5 @@ export * from "./list";
 export { SendEmailDialog } from "./send-email-dialog";
 export * from "./shared";
 export { EslogInfoDisplay } from "./view/eslog-info-display";
-export { FursInfoDisplay } from "./view/furs-info-display";
+export { FiscalizationStatusCard } from "./view/fiscalization-status-card";
 // Note: InvoicePreviewDisplay is now DocumentPreviewDisplay in documents/shared

package/src/components/invoices/send-email-dialog/send-email-dialog.tsx

@@ -195,7 +195,7 @@ export function SendEmailDialog({
           </Button>
         </DialogTrigger>
       )}
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Send Invoice by Email")}</DialogTitle>
           <DialogDescription>
@@ -266,7 +266,7 @@ export function SendEmailDialog({
                       document={invoice}
                       disabled={isLoading}
                       multiline
-                      rows={4}
+                      rows={8}
                     />
                   </FormControl>
                   <FormDescription>{t("Leave empty to use default")}</FormDescription>

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

@@ -0,0 +1,121 @@
+import type { FinaFiscalizationResponse, FursFiscalizationResponse } from "@spaceinvoices/js-sdk";
+import { AlertCircle, CheckCircle2, Clock, Loader2, MinusCircle, RefreshCw, XCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/ui/components/ui/alert";
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
+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 "../../documents/view/locales/de";
+import es from "../../documents/view/locales/es";
+import fr from "../../documents/view/locales/fr";
+import hr from "../../documents/view/locales/hr";
+import it from "../../documents/view/locales/it";
+import nl from "../../documents/view/locales/nl";
+import pl from "../../documents/view/locales/pl";
+import pt from "../../documents/view/locales/pt";
+import sl from "../../documents/view/locales/sl";
+
+const translations = { de, es, fr, hr, it, nl, pl, pt, sl } as const;
+
+type FiscalizationData = FursFiscalizationResponse | FinaFiscalizationResponse;
+
+interface FiscalizationStatusCardProps extends ComponentTranslationProps {
+  fiscalizationType: "furs" | "fina";
+  fiscalizationData: FiscalizationData | null | undefined;
+  onRetry?: () => void;
+  isRetrying?: boolean;
+}
+
+export function FiscalizationStatusCard({
+  fiscalizationType,
+  fiscalizationData,
+  onRetry,
+  isRetrying,
+  t: translateFn,
+  namespace,
+  locale,
+}: FiscalizationStatusCardProps) {
+  const t = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations,
+  });
+
+  if (!fiscalizationData) {
+    return null;
+  }
+
+  const label = fiscalizationType === "furs" ? "FURS" : "FINA";
+
+  const getStatusBadge = () => {
+    switch (fiscalizationData.status) {
+      case "success":
+        return (
+          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+            <CheckCircle2 className="mr-1 h-3 w-3" />
+            {t("Fiscalized")}
+          </Badge>
+        );
+      case "pending":
+        return (
+          <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
+            <Clock className="mr-1 h-3 w-3" />
+            {t("Pending")}
+          </Badge>
+        );
+      case "failed":
+        return (
+          <Badge className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100">
+            <XCircle className="mr-1 h-3 w-3" />
+            {t("Failed")}
+          </Badge>
+        );
+      case "skipped":
+        return (
+          <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+            <MinusCircle className="mr-1 h-3 w-3" />
+            {t("Skipped")}
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center justify-between text-lg">
+          <span>{t("Fiscalization")}</span>
+          {getStatusBadge()}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="text-muted-foreground text-sm">
+          {label} &middot;{" "}
+          {fiscalizationData.fiscalized_at && new Date(fiscalizationData.fiscalized_at).toLocaleString(locale)}
+        </div>
+
+        {fiscalizationData.status === "failed" && fiscalizationData.error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription className="text-sm">{fiscalizationData.error}</AlertDescription>
+          </Alert>
+        )}
+
+        {fiscalizationData.status === "skipped" && (fiscalizationData as any).data?.reason && (
+          <div className="text-muted-foreground text-sm">{(fiscalizationData as any).data.reason}</div>
+        )}
+
+        {fiscalizationData.status === "failed" && onRetry && (
+          <Button variant="outline" size="sm" onClick={onRetry} disabled={isRetrying}>
+            {isRetrying ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
+            {t("Retry fiscalization")}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/generate-schemas.ts

@@ -86,7 +86,8 @@ async function main() {
         for (const ref of constRefs) {
           const cleanRef = ref.replace(/\.(optional|nullable)\(\)/, "");
           // Check if it's actually a schema definition in the file
-          if (fullContent.includes(`const ${cleanRef} = z.`)) {
+          // Handle both `const Foo = z.object(...)` and `const Foo = z\n  .object(...)`
+          if (fullContent.includes(`const ${cleanRef} = z.`) || fullContent.includes(`const ${cleanRef} = z\n`)) {
             dependencies.push(cleanRef);
           }
         }
@@ -244,6 +245,17 @@ ${exports}
     await fs.writeFile(path.join(SCHEMAS_DIR, `${groupName}.ts`), schemaContent);
   }
 
+  // Add manual re-exports that can't be auto-generated
+  // Credit note create uses the same body as invoice create
+  const creditNoteFile = path.join(SCHEMAS_DIR, "creditnote.ts");
+  const creditNoteContent = await fs.readFile(creditNoteFile, "utf-8");
+  if (!creditNoteContent.includes("createCreditNoteSchema")) {
+    await fs.appendFile(
+      creditNoteFile,
+      "\n// Re-export invoice create schema as credit note create schema (same body structure)\nexport { createInvoiceSchema as createCreditNoteSchema, type CreateInvoiceSchema as CreateCreditNoteSchema } from './invoice';\n",
+    );
+  }
+
   // Create index file
   const indexContent = `/**
  * This file was automatically generated using 'bun generate-schemas'.