@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,139 @@
+import type { GetFursSettings200Response } from "@spaceinvoices/js-sdk";
+import { AlertCircle, CheckCircle2, Power } from "lucide-react";
+import type { FC, ReactNode } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/ui/components/ui/form";
+import { Switch } from "@/ui/components/ui/switch";
+import type { FursSettingsFormSchema, SectionType } from "../furs-settings-form";
+
+// Extended premise type to include devices
+type ExtendedFursBusinessPremise = {
+  id: string;
+  business_premise_name: string;
+  is_active: boolean;
+  Devices?: Array<{ id: string; electronic_device_name?: string }>;
+};
+
+interface EnableFiscalizationSectionProps {
+  form: UseFormReturn<FursSettingsFormSchema>;
+  fursSettings?: GetFursSettings200Response;
+  premises?: ExtendedFursBusinessPremise[];
+  t: (key: string) => string;
+  wrapSection?: (section: SectionType, content: ReactNode) => ReactNode;
+}
+
+export const EnableFiscalizationSection: FC<EnableFiscalizationSectionProps> = ({
+  form,
+  fursSettings,
+  premises,
+  t,
+  wrapSection,
+}) => {
+  const wrap = (section: SectionType, content: ReactNode) => (wrapSection ? wrapSection(section, content) : content);
+  // Compute validation states
+  const certificateValid = fursSettings?.certificate_status === "valid";
+  const hasPremises = (premises?.length || 0) > 0;
+  const hasPremiseWithDevice = premises?.some((p) => p.Devices && p.Devices.length > 0);
+
+  const allPrerequisitesMet = certificateValid && hasPremises && hasPremiseWithDevice;
+  const isCurrentlyEnabled = fursSettings?.enabled || false;
+
+  const enableContent = (
+    <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-primary/10">
+          <Power className="h-5 w-5 text-primary" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg">{t("Enable Fiscalization")}</h3>
+          <p className="text-muted-foreground text-sm">{t("Turn on FURS fiscalization for invoices")}</p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {/* Setup Checklist */}
+        <div className="space-y-3">
+          <p className="font-medium text-sm">{t("Setup Checklist")}</p>
+          <ul className="space-y-2">
+            <li className="flex items-center gap-2">
+              {certificateValid ? (
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+              ) : (
+                <AlertCircle className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className={certificateValid ? "" : "text-muted-foreground"}>{t("Valid certificate uploaded")}</span>
+            </li>
+            <li className="flex items-center gap-2">
+              {hasPremises ? (
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+              ) : (
+                <AlertCircle className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className={hasPremises ? "" : "text-muted-foreground"}>
+                {t("At least one business premise registered")}
+              </span>
+            </li>
+            <li className="flex items-center gap-2">
+              {hasPremiseWithDevice ? (
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+              ) : (
+                <AlertCircle className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className={hasPremiseWithDevice ? "" : "text-muted-foreground"}>
+                {t("At least one electronic device registered")}
+              </span>
+            </li>
+          </ul>
+        </div>
+
+        {/* Warning when prerequisites not met */}
+        {!allPrerequisitesMet && !isCurrentlyEnabled && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{t("Cannot Enable Fiscalization")}</AlertTitle>
+            <AlertDescription>
+              {t("Complete all prerequisites above before enabling FURS fiscalization.")}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* Enable FURS Toggle */}
+        <FormField
+          control={form.control}
+          name="enabled"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="font-medium text-base">{t("Enable FURS Fiscalization")}</FormLabel>
+                <FormDescription className="text-xs">
+                  {t("Once enabled, all new invoices will be automatically fiscalized with FURS")}
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  disabled={!allPrerequisitesMet && !field.value}
+                  className="cursor-pointer"
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        {/* Warning about disabling */}
+        {isCurrentlyEnabled && (
+          <Alert>
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              {t("Warning: Disabling fiscalization will prevent new invoices from being fiscalized.")}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </div>
+  );
+
+  return <>{wrap("enable-toggle", enableContent)}</>;
+};

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

@@ -0,0 +1,252 @@
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { ChevronRight, Settings, User } from "lucide-react";
+import { type FC, type ReactNode, useEffect, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+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";
+import { RadioGroup, RadioGroupItem } from "@/ui/components/ui/radio-group";
+import { cn } from "@/ui/lib/utils";
+import { useUpdateUserFursSettings, useUserFursSettings } from "../furs-settings.hooks";
+import type { FursSettingsFormSchema, SectionType } from "../furs-settings-form";
+
+interface GeneralSettingsSectionProps {
+  form: UseFormReturn<FursSettingsFormSchema>;
+  entity: Entity;
+  t: (key: string) => string;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+  wrapSection?: (section: SectionType, content: ReactNode) => ReactNode;
+}
+
+export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
+  form,
+  entity,
+  t,
+  onSuccess,
+  onError,
+  wrapSection,
+}) => {
+  const wrap = (section: SectionType, content: ReactNode) => (wrapSection ? wrapSection(section, content) : content);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+
+  // User operator settings (local state for form)
+  const { data: userFursSettings, isLoading: userSettingsLoading } = useUserFursSettings(entity.id);
+  const [operatorTaxNumber, setOperatorTaxNumber] = useState("");
+  const [operatorLabel, setOperatorLabel] = useState("");
+
+  // Initialize from user settings when loaded
+  useEffect(() => {
+    if (userFursSettings) {
+      setOperatorTaxNumber(userFursSettings.operator_tax_number || "");
+      setOperatorLabel(userFursSettings.operator_label || "");
+    }
+  }, [userFursSettings]);
+
+  const { mutate: updateUserSettings, isPending: isUserSettingsPending } = useUpdateUserFursSettings({
+    onSuccess: () => onSuccess?.(),
+    onError: (error) => onError?.(error),
+  });
+
+  const handleSaveUserSettings = () => {
+    updateUserSettings({
+      entityId: entity.id,
+      data: {
+        operator_tax_number: operatorTaxNumber || undefined,
+        operator_label: operatorLabel || undefined,
+      },
+    });
+  };
+
+  // Operator Settings content
+  const operatorContent = (
+    <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-blue-500/10">
+          <User className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg">{t("Your Operator Settings")}</h3>
+          <p className="text-muted-foreground text-sm">{t("Your personal operator info for FURS invoices")}</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="operator-tax-number" className="font-medium text-sm">
+            {t("Operator Tax Number")}
+          </label>
+          <Input
+            id="operator-tax-number"
+            placeholder="12345678"
+            value={operatorTaxNumber}
+            onChange={(e) => setOperatorTaxNumber(e.target.value)}
+            className="mt-2 h-10"
+            disabled={userSettingsLoading}
+          />
+          <p className="mt-1 text-muted-foreground text-xs">{t("Your tax number for FURS fiscalization")}</p>
+        </div>
+
+        <div>
+          <label htmlFor="operator-label" className="font-medium text-sm">
+            {t("Operator Label")}
+          </label>
+          <Input
+            id="operator-label"
+            placeholder={t("Your Name")}
+            value={operatorLabel}
+            onChange={(e) => setOperatorLabel(e.target.value)}
+            className="mt-2 h-10"
+            disabled={userSettingsLoading}
+          />
+          <p className="mt-1 text-muted-foreground text-xs">{t("Your name or identifier for FURS invoices")}</p>
+        </div>
+
+        <Button
+          type="button"
+          onClick={handleSaveUserSettings}
+          disabled={isUserSettingsPending || userSettingsLoading}
+          className="cursor-pointer"
+        >
+          {isUserSettingsPending ? t("Saving...") : t("Save Operator Settings")}
+        </Button>
+      </div>
+    </div>
+  );
+
+  // Fiscalization Settings content
+  const fiscalizationContent = (
+    <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-primary/10">
+          <Settings className="h-5 w-5 text-primary" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg">{t("Fiscalization Settings")}</h3>
+          <p className="text-muted-foreground text-sm">{t("Configure FURS fiscalization behavior")}</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <FormField
+          control={form.control}
+          name="numbering_strategy"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel className="font-medium text-sm">{t("Numbering Strategy")}</FormLabel>
+              <FormDescription className="text-xs">
+                {t("Choose how invoice numbers are assigned across your business premises")}
+              </FormDescription>
+              <FormControl>
+                <RadioGroup onValueChange={field.onChange} value={field.value} className="grid gap-3 md:grid-cols-2">
+                  <label
+                    htmlFor="strategy-c"
+                    className={cn(
+                      "flex cursor-pointer flex-col gap-2 rounded-lg border p-4 transition-colors hover:bg-muted/50",
+                      field.value === "C" && "border-primary bg-primary/5 ring-1 ring-primary",
+                    )}
+                  >
+                    <div className="flex items-center gap-3">
+                      <RadioGroupItem value="C" id="strategy-c" />
+                      <span className="font-medium">{t("Centralized")}</span>
+                      <span className="rounded bg-primary/10 px-2 py-0.5 text-primary text-xs">{t("Recommended")}</span>
+                    </div>
+                    <p className="text-muted-foreground text-xs">
+                      {t("One sequence across all premises. Simpler to manage and track.")}
+                    </p>
+                  </label>
+                  <label
+                    htmlFor="strategy-b"
+                    className={cn(
+                      "flex cursor-pointer flex-col gap-2 rounded-lg border p-4 transition-colors hover:bg-muted/50",
+                      field.value === "B" && "border-primary bg-primary/5 ring-1 ring-primary",
+                    )}
+                  >
+                    <div className="flex items-center gap-3">
+                      <RadioGroupItem value="B" id="strategy-b" />
+                      <span className="font-medium">{t("Per Device")}</span>
+                    </div>
+                    <p className="text-muted-foreground text-xs">
+                      {t("Separate sequence per electronic device. For complex multi-location setups.")}
+                    </p>
+                  </label>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
+  );
+
+  // Advanced Settings content
+  const advancedContent = (
+    <div>
+      <button
+        type="button"
+        onClick={() => setIsAdvancedOpen(!isAdvancedOpen)}
+        className="flex w-full items-center gap-2 py-2 text-muted-foreground hover:text-foreground"
+      >
+        <ChevronRight className={cn("h-4 w-4 transition-transform", isAdvancedOpen && "rotate-90")} />
+        <span className="font-medium text-sm">{t("Advanced Settings")}</span>
+      </button>
+      {isAdvancedOpen && (
+        <div className="pt-4">
+          <div className="space-y-4 rounded-lg border p-4">
+            <div>
+              <h4 className="font-medium text-sm">{t("API Default Operator")}</h4>
+              <p className="text-muted-foreground text-xs">
+                {t("Default operator settings for API key usage (when no user context)")}
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="operator_tax_number"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm">{t("Operator Tax Number")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="12345678" {...field} className="h-10" />
+                    </FormControl>
+                    <FormDescription className="text-xs">
+                      {t("Tax number for API key usage (optional)")}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="operator_label"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm">{t("Operator Label")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="API Default" {...field} className="h-10" />
+                    </FormControl>
+                    <FormDescription className="text-xs">
+                      {t("Operator label for API key usage (optional)")}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      {wrap("operator", operatorContent)}
+      {wrap("fiscalization", fiscalizationContent)}
+      {wrap("advanced", advancedContent)}
+    </div>
+  );
+};