@sincpro/mobile 0.1.0

package/dist/ui/components/molecules/ProcessToast.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useCommon } from "../../../entrypoints/ui/common_provider";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Feedback } from "@sincpro/mobile-ui/Feedback";
+import { theme } from "@sincpro/mobile-ui/theme";
+import { cn } from "@sincpro/mobile-ui/theme/tw";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { useEffect, useState } from "react";
+import { Animated, Platform, TouchableOpacity, View } from "react-native";
+const Icon = Display.Icon;
+const Spinner = Feedback.Spinner;
+const Text = Typography.Text;
+function ProcessToast({ position = "top" }) {
+    const { currentActivity, lastError, isProcessing, dismiss } = useCommon();
+    const [slideAnim] = useState(new Animated.Value(-100));
+    const [showError, setShowError] = useState(false);
+    useEffect(() => {
+        if (lastError)
+            setShowError(true);
+    }, [lastError]);
+    useEffect(() => {
+        Animated.spring(slideAnim, {
+            toValue: isProcessing ? 0 : position === "top" ? -100 : 100,
+            tension: 300,
+            friction: 25,
+            useNativeDriver: true,
+        }).start();
+    }, [isProcessing, slideAnim, position]);
+    function renderToast() {
+        if (!isProcessing) {
+            return null;
+        }
+        const hasError = !!lastError;
+        const activity = lastError || currentActivity;
+        const label = activity?.label || "Sincronizando...";
+        function handleDismiss() {
+            setShowError(false);
+            dismiss();
+        }
+        return (_jsx(Animated.View, { className: "absolute left-4 right-4 z-50 self-center", style: [
+                position === "top"
+                    ? { top: Platform.OS === "ios" ? 100 : 60 }
+                    : { bottom: Platform.OS === "ios" ? 100 : 80 },
+                { transform: [{ translateY: slideAnim }] },
+            ], children: _jsxs(View, { className: cn("bg-white/[0.98] rounded-xl px-3.5 py-3 border-l-[3px] border-emerald-500 shadow-md", hasError && "bg-red-50/[0.98] border-red-500"), children: [_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(View, { className: "w-5 h-5 justify-center items-center", children: hasError ? (_jsx(Icon, { color: theme.danger, name: "alert-circle", size: 16 })) : (_jsx(Spinner, { size: "small" })) }), _jsx(View, { className: "flex-1", children: _jsx(Text, { className: "text-gray-900 text-[13px] font-medium leading-4", variant: "captionSmall", children: hasError ? `Error: ${label}` : label }) }), _jsx(TouchableOpacity, { accessibilityLabel: "Cerrar notificación", className: "w-6 h-6 justify-center items-center rounded-full bg-gray-100", onPress: handleDismiss, children: _jsx(Icon, { color: theme.text.secondary, name: "close", size: 14 }) })] }), showError && lastError?.error && (_jsx(View, { className: "mt-2 pt-2 border-t border-gray-100", children: _jsx(Text, { className: "text-red-500 text-[11px] leading-[15px] font-mono", variant: "captionSmall", children: lastError.error.length > 150
+                                ? `${lastError.error.substring(0, 150)}...`
+                                : lastError.error }) }))] }) }));
+    }
+    return renderToast();
+}
+export default ProcessToast;

package/dist/ui/components/molecules/ProcessToastProvider.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function ProcessToastProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/molecules/ProcessToastProvider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ProcessToast from "./ProcessToast";
+export function ProcessToastProvider({ children }) {
+    return (_jsxs(_Fragment, { children: [children, _jsx(ProcessToast, { position: "top" })] }));
+}

package/dist/ui/components/molecules/index.d.ts

@@ -0,0 +1,5 @@
+export { BluetoothDeviceSelectorModal } from "./BluetoothDeviceSelectorModal";
+export { default as DeadLetterErrorBlock } from "./DeadLetterErrorBlock";
+export { default as EventTimelineItem } from "./EventTimelineItem";
+export { default as ProcessToast } from "./ProcessToast";
+export { ProcessToastProvider } from "./ProcessToastProvider";

package/dist/ui/components/molecules/index.js

@@ -0,0 +1,5 @@
+export { BluetoothDeviceSelectorModal } from "./BluetoothDeviceSelectorModal";
+export { default as DeadLetterErrorBlock } from "./DeadLetterErrorBlock";
+export { default as EventTimelineItem } from "./EventTimelineItem";
+export { default as ProcessToast } from "./ProcessToast";
+export { ProcessToastProvider } from "./ProcessToastProvider";

package/dist/ui/components/organisms/BluetoothPrinterSelector.d.ts

@@ -0,0 +1,7 @@
+import { ISelectedPrinter } from "../../../domain/print";
+interface BluetoothPrinterSelectorProps {
+    onPrinterSelected?: (printer: ISelectedPrinter) => void;
+    onConnectionChange?: (isConnected: boolean) => void;
+}
+declare function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, }: BluetoothPrinterSelectorProps): import("react/jsx-runtime").JSX.Element;
+export { BluetoothPrinterSelector };

package/dist/ui/components/organisms/BluetoothPrinterSelector.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { bluetoothService } from "../../../services/bluetooth.service";
+import { printerService } from "../../../services/printer.service";
+import { BluetoothDeviceSelectorModal } from "../../../ui/components/molecules/BluetoothDeviceSelectorModal";
+import { Display, Form } from "@sincpro/mobile-ui";
+import PrinterIcon from "@sincpro/mobile-ui/icons/PrinterIcon";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { useCallback, useEffect, useState } from "react";
+import { View } from "react-native";
+import { tv } from "tailwind-variants";
+const statusTextVariants = tv({
+    variants: {
+        granted: {
+            true: "text-green-600",
+            false: "text-red-500",
+        },
+    },
+});
+function PermissionRequired({ loading, onRequestPermission, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: false }), children: "Permiso de Bluetooth requerido" }), _jsx(Form.Button, { loading: loading, onPress: onRequestPermission, size: "small", title: "Solicitar Permiso" })] }));
+}
+function PrinterInfo({ printer, isConnected, loading, onConnect, onTestPrint, onChangePrinter, }) {
+    return (_jsxs(View, { className: "mt-2 bg-white rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-gray-700", semibold: true, children: printer.name }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: printer.address }), _jsxs(View, { className: "flex-row gap-2 mt-2", children: [!isConnected ? (_jsx(Form.Button, { loading: loading, onPress: onConnect, size: "small", title: "Conectar", variant: "primary" })) : (_jsx(Form.Button, { loading: loading, onPress: onTestPrint, size: "small", title: "Imprimir Prueba", variant: "secondary" })), _jsx(Form.Button, { onPress: onChangePrinter, size: "small", title: "Cambiar", variant: "outline" })] }), isConnected && (_jsxs(View, { className: "flex-row items-center mt-2", children: [_jsx(View, { className: "w-2 h-2 rounded-full bg-green-500 mr-2" }), _jsx(Typography.Text, { className: "text-green-600 text-xs", children: "Conectado" })] }))] }));
+}
+function NoPrinterSelected({ loading, onSelectPrinter, }) {
+    return (_jsx(Form.Button, { loading: loading, onPress: onSelectPrinter, size: "small", title: "Seleccionar Impresora" }));
+}
+function BluetoothPrinterSelector({ onPrinterSelected, onConnectionChange, }) {
+    const [hasPermission, setHasPermission] = useState(null);
+    const [selectedPrinter, setSelectedPrinter] = useState(null);
+    const [isConnected, setIsConnected] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [selectorVisible, setSelectorVisible] = useState(false);
+    const checkStatus = useCallback(async () => {
+        const permissions = await bluetoothService.checkPermissions();
+        setHasPermission(permissions.isGranted);
+        const printer = await printerService.getSelectedPrinter();
+        setSelectedPrinter(printer);
+        const connected = printerService.isConnected();
+        setIsConnected(connected);
+    }, []);
+    useEffect(() => {
+        checkStatus();
+    }, [checkStatus]);
+    useEffect(() => {
+        onConnectionChange?.(isConnected);
+    }, [isConnected, onConnectionChange]);
+    async function handleRequestPermission() {
+        setLoading(true);
+        try {
+            const permissions = await bluetoothService.requestPermissions();
+            setHasPermission(permissions.isGranted);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function handleConnect() {
+        if (!selectedPrinter)
+            return;
+        setLoading(true);
+        try {
+            const connected = await printerService.connect(selectedPrinter.address, selectedPrinter.name);
+            setIsConnected(connected);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function handleTestPrint() {
+        setLoading(true);
+        try {
+            await printerService.printTestPage();
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    function handleDeviceSelected(device) {
+        checkStatus();
+        setSelectorVisible(false);
+        const printer = {
+            name: device.name || "Impresora",
+            address: device.address,
+            selectedAt: new Date().toISOString(),
+        };
+        onPrinterSelected?.(printer);
+    }
+    const granted = hasPermission === true;
+    return (_jsxs(View, { className: "bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm", children: [_jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? "#22c55e" : "#ef4444", customIcon: PrinterIcon, size: 35, type: "custom" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: "Impresora Bluetooth" }), hasPermission === null ? (_jsx(Typography.Text, { className: "text-gray-500", children: "Verificando permisos..." })) : !granted ? (_jsx(PermissionRequired, { loading: loading, onRequestPermission: handleRequestPermission })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: statusTextVariants({ granted: true }), children: "Bluetooth habilitado" }), selectedPrinter ? (_jsx(PrinterInfo, { isConnected: isConnected, loading: loading, onChangePrinter: () => setSelectorVisible(true), onConnect: handleConnect, onTestPrint: handleTestPrint, printer: selectedPrinter })) : (_jsx(NoPrinterSelected, { loading: loading, onSelectPrinter: () => setSelectorVisible(true) }))] }))] })] }), _jsx(BluetoothDeviceSelectorModal, { onClose: () => setSelectorVisible(false), onSelect: handleDeviceSelected, visible: selectorVisible })] }));
+}
+export { BluetoothPrinterSelector };

package/dist/ui/components/organisms/DatabaseInfoRow.d.ts

@@ -0,0 +1,11 @@
+export interface DatabaseInfoRowData {
+    name: string;
+    description?: string;
+    tableName?: string;
+}
+interface DatabaseInfoRowProps {
+    item: DatabaseInfoRowData;
+    onPress?: () => void;
+}
+declare function DatabaseInfoRow({ item, onPress }: DatabaseInfoRowProps): import("react/jsx-runtime").JSX.Element;
+export default DatabaseInfoRow;

package/dist/ui/components/organisms/DatabaseInfoRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
+import { View } from "react-native";
+function DatabaseInfoRow({ item, onPress }) {
+    return (_jsxs(ListViewV2.Content.Row, { onPress: onPress, children: [_jsx(ListViewV2.Content.Row.Avatar, { children: _jsx(View, { className: "justify-center items-center p-2 rounded-lg bg-gray-100", children: _jsx(Display.Icon, { name: "database", size: 32, type: "antdesign" }) }) }), _jsxs(ListViewV2.Content.Row.Content, { children: [_jsx(ListViewV2.Content.Row.Title, { numberOfLines: 2, children: item.name }), _jsx(ListViewV2.Content.Row.Subtitle, { children: item.description || "N/A" })] })] }));
+}
+export default DatabaseInfoRow;

package/dist/ui/components/organisms/DeadLetterQueueRow.d.ts

@@ -0,0 +1,7 @@
+import { DomainEvent } from "../../../domain/event_sourcing";
+import { IRowItemProps } from "@sincpro/mobile-ui/views/types/IListView";
+interface DeadLetterQueueRowProps extends IRowItemProps<DomainEvent> {
+    onRetry: (event: DomainEvent) => Promise<void> | void;
+}
+declare function DeadLetterQueueRow({ item, onRetry }: DeadLetterQueueRowProps): import("react/jsx-runtime").JSX.Element | null;
+export default DeadLetterQueueRow;

package/dist/ui/components/organisms/DeadLetterQueueRow.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import DeadLetterErrorBlock from "../../../ui/components/molecules/DeadLetterErrorBlock";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
+import * as Clipboard from "expo-clipboard";
+import { useState } from "react";
+import { View } from "react-native";
+function getAttemptsBadgeVariant(attempts) {
+    if (attempts < 3)
+        return "warning";
+    return "danger";
+}
+function DeadLetterQueueRow({ item, onRetry }) {
+    const [showPayload, setShowPayload] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [sending, setSending] = useState(false);
+    if (!item || typeof item !== "object") {
+        return null;
+    }
+    const event = item;
+    if (!event.name || !event.createdAt) {
+        return null;
+    }
+    const togglePayload = () => setShowPayload((v) => !v);
+    const handleRetry = async () => {
+        if (sending)
+            return;
+        setSending(true);
+        try {
+            await onRetry(event);
+            setTimeout(() => setSending(false), 5000);
+        }
+        catch {
+            setSending(false);
+        }
+    };
+    const friendlyName = event.label || event.name;
+    const attemptsBadgeVariant = getAttemptsBadgeVariant(event.attempts ?? 0);
+    function renderBadges() {
+        const badges = [];
+        badges.push(_jsx(Display.Badge, { className: "self-end", label: "FAILED", variant: "danger" }, "status"));
+        badges.push(_jsx(Display.Badge, { className: "self-end", label: `${event.attempts} intento${event.attempts !== 1 ? "s" : ""}`, variant: attemptsBadgeVariant }, "attempts"));
+        if (event.requiresNetwork) {
+            badges.push(_jsx(Display.Badge, { className: "self-end", label: "Internet", variant: "info" }, "network"));
+        }
+        if (typeof event.sequence === "number" && event.sequence > 0) {
+            badges.push(_jsx(Display.Badge, { className: "self-end", label: `#${event.sequence}`, variant: "infoDark" }, "seq"));
+        }
+        return _jsx(View, { className: "flex-col items-end gap-1.5", children: badges });
+    }
+    function renderHeader() {
+        return (_jsxs(View, { className: "flex-row items-start mb-2", children: [_jsxs(View, { className: "flex-1 pr-2", children: [_jsx(Typography.Text, { className: "mb-1", numberOfLines: 2, semibold: true, variant: "body", children: friendlyName }), _jsx(Display.CopyableText, { value: event.name })] }), _jsx(View, { className: "ml-2 self-start", children: renderBadges() })] }));
+    }
+    function renderMeta() {
+        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-gray-800", showTime: true, textVariant: "bodySmall", value: event.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: event.uuid })] }));
+    }
+    function renderPayload() {
+        if (!showPayload) {
+            return null;
+        }
+        return (_jsxs(View, { className: "bg-gray-50 rounded-lg p-2 border border-gray-200 mb-2.5", children: [_jsx(Typography.Text, { className: "text-gray-700 mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: event.asJSON(true) })] }));
+    }
+    function renderActions() {
+        return (_jsxs(View, { className: "mt-2 gap-2", children: [_jsx(Form.Button, { className: "w-full", onPress: () => setShowError((v) => !v), size: "small", title: showError ? "Ocultar error" : "Ver error", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: togglePayload, size: "small", title: showPayload ? "Ocultar payload" : "Ver payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: async () => {
+                        await Clipboard.setStringAsync(event.asJSON(true));
+                    }, size: "small", title: "Copiar payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", disabled: sending, loading: sending, onPress: handleRetry, size: "medium", title: sending ? "Reintentando…" : "Reintentar", variant: "primary" })] }));
+    }
+    return (_jsxs(View, { className: "bg-white border border-gray-200 rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [renderHeader(), renderMeta(), _jsx(DeadLetterErrorBlock, { errorMessage: event.errorMessage, expanded: showError, onToggle: () => setShowError((v) => !v) }), renderPayload(), renderActions()] }));
+}
+export default DeadLetterQueueRow;

package/dist/ui/components/organisms/EventRow.d.ts

@@ -0,0 +1,7 @@
+import { DomainEvent } from "../../../domain/event_sourcing";
+interface EventRowProps {
+    item: DomainEvent;
+    onRetry: (event: DomainEvent) => Promise<void> | void;
+}
+declare function EventRow({ item, onRetry }: EventRowProps): import("react/jsx-runtime").JSX.Element | null;
+export default EventRow;

package/dist/ui/components/organisms/EventRow.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { EEventStatus } from "../../../domain/event_sourcing";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
+import * as Clipboard from "expo-clipboard";
+import { useState } from "react";
+import { View } from "react-native";
+function EventRow({ item, onRetry }) {
+    const [showPayload, setShowPayload] = useState(false);
+    const [sending, setSending] = useState(false);
+    if (!item)
+        return null;
+    const payloadString = item.asJSON(true);
+    const friendlyName = item.label || item.name;
+    const statusBadge = (() => {
+        if (item.status === EEventStatus.FAILED) {
+            return {
+                backgroundClass: "bg-red-100 border-red-200",
+                textClass: "text-red-700",
+                label: "FAILED",
+            };
+        }
+        if (item.status === EEventStatus.ACKNOWLEDGED) {
+            return {
+                backgroundClass: "bg-green-100 border-green-200",
+                textClass: "text-green-700",
+                label: "ACKNOWLEDGED",
+            };
+        }
+        if (item.status === EEventStatus.PENDING || item.status === EEventStatus.PROCESSING) {
+            return {
+                backgroundClass: "bg-blue-100 border-blue-200",
+                textClass: "text-blue-700",
+                label: item.status,
+            };
+        }
+        return {
+            backgroundClass: "bg-gray-100 border-gray-200",
+            textClass: "text-gray-700",
+            label: item.status,
+        };
+    })();
+    const handleRetry = async () => {
+        if (sending)
+            return;
+        setSending(true);
+        try {
+            await onRetry(item);
+        }
+        finally {
+            setTimeout(() => setSending(false), 1200);
+        }
+    };
+    function renderMeta() {
+        return (_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Display.Date, { className: "text-gray-800", showTime: true, textVariant: "bodySmall", value: item.createdAt }), _jsx(Display.CopyableText, { label: "Copiar UUID", value: item.uuid })] }));
+    }
+    function renderBadges() {
+        const badges = [];
+        const statusVariantMap = {
+            "bg-red-100 border-red-200": "danger",
+            "bg-green-100 border-green-200": "successDark",
+            "bg-blue-100 border-blue-200": "infoDark",
+            "bg-gray-100 border-gray-200": "warning",
+        };
+        const variant = statusVariantMap[statusBadge.backgroundClass] || "info";
+        badges.push(_jsx(Display.Badge, { className: "self-end", label: statusBadge.label, variant: variant }, "status"));
+        if (item.requiresNetwork) {
+            badges.push(_jsx(Display.Badge, { className: "self-end", label: "Internet", variant: "info" }, "network"));
+        }
+        if (typeof item.sequence === "number" && item.sequence > 0) {
+            badges.push(_jsx(Display.Badge, { className: "self-end", label: `#${item.sequence}`, variant: "infoDark" }, "seq"));
+        }
+        return _jsx(View, { className: "flex-col items-end gap-1.5", children: badges });
+    }
+    function renderPayload() {
+        if (!showPayload) {
+            return null;
+        }
+        return (_jsxs(View, { className: "bg-gray-50 rounded-lg p-2 border border-gray-200 mb-2", children: [_jsx(Typography.Text, { className: "text-gray-700 mb-1", semibold: true, variant: "bodySmall", children: "Payload" }), _jsx(JsonPreview, { selectedJson: payloadString })] }));
+    }
+    function renderActions() {
+        return (_jsxs(View, { className: "mt-2 gap-2", children: [_jsx(Form.Button, { className: "w-full", onPress: () => setShowPayload((v) => !v), size: "small", title: showPayload ? "Ocultar payload" : "Ver payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", onPress: async () => {
+                        await Clipboard.setStringAsync(payloadString);
+                    }, size: "small", title: "Copiar payload", variant: "secondary" }), _jsx(Form.Button, { className: "w-full", disabled: sending, loading: sending, onPress: handleRetry, size: "medium", title: sending ? "Reenviando…" : "Re-disparar", variant: "primary" })] }));
+    }
+    return (_jsxs(View, { className: "bg-white border border-gray-200 rounded-2xl mx-4 p-3.5 mb-3 shadow-sm", children: [_jsxs(View, { className: "flex-row items-start mb-2", children: [_jsxs(View, { className: "flex-1 pr-2", children: [_jsx(Typography.Text, { className: "mb-1", numberOfLines: 2, semibold: true, variant: "body", children: friendlyName }), _jsx(Display.CopyableText, { value: item.name })] }), _jsx(View, { className: "ml-2 self-start", children: renderBadges() })] }), renderMeta(), renderPayload(), renderActions()] }));
+}
+export default EventRow;

package/dist/ui/components/organisms/InjectableWebView.d.ts

@@ -0,0 +1,35 @@
+import { IInjectedScript } from "../../../domain/webview";
+import { NativeSyntheticEvent } from "react-native";
+import { type WebViewMessageEvent, type WebViewNavigation } from "react-native-webview";
+import type { WebViewError } from "react-native-webview/lib/WebViewTypes";
+export type WebViewErrorEvent = NativeSyntheticEvent<WebViewError>;
+export interface InjectableWebViewProps {
+    url: string;
+    scripts?: IInjectedScript[];
+    injectedJavaScript?: string;
+    onMessage?: (event: WebViewMessageEvent) => void;
+    onNavigationChange?: (state: WebViewNavigation) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: WebViewErrorEvent) => void;
+    showControls?: boolean;
+    renderLoading?: () => React.ReactElement;
+    backgroundColor?: string;
+    reloadKey?: number | string;
+    hardRefreshKey?: number | string;
+    maxRetries?: number;
+    useDefaultCache?: boolean;
+}
+interface WebViewControlsProps {
+    canGoBack: boolean;
+    canGoForward: boolean;
+    onGoBack: () => void;
+    onGoForward: () => void;
+    onReload: () => void;
+}
+declare function WebViewControls({ canGoBack: _canGoBack, canGoForward: _canGoForward, onGoBack: _onGoBack, onGoForward: _onGoForward, onReload: _onReload, }: WebViewControlsProps): import("react/jsx-runtime").JSX.Element;
+declare function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavigationChange, onLoadStart, onLoadEnd, onError, renderLoading, backgroundColor, reloadKey, hardRefreshKey, maxRetries, useDefaultCache, }: InjectableWebViewProps): import("react/jsx-runtime").JSX.Element;
+declare namespace InjectableWebView {
+    var Controls: typeof WebViewControls;
+}
+export { InjectableWebView };

package/dist/ui/components/organisms/InjectableWebView.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { loggerUseCases } from "../../../infrastructure/logger";
+import { webViewService } from "../../../services/webview.service";
+import Spinner from "@sincpro/mobile-ui/Feedback/Feedback.Spinner";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BackHandler, StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Toast from "react-native-toast-message";
+import WebView from "react-native-webview";
+function WebViewControls({ canGoBack: _canGoBack, canGoForward: _canGoForward, onGoBack: _onGoBack, onGoForward: _onGoForward, onReload: _onReload, }) {
+    return _jsx(View, {});
+}
+function WebViewLoadingIndicator({ backgroundColor }) {
+    return (_jsx(View, { style: [StyleSheet.absoluteFillObject, styles.loading, { backgroundColor }], children: _jsx(Spinner, { size: "large", text: "Cargando p\u00E1gina..." }) }));
+}
+function useWebView() {
+    const webViewRef = useRef(null);
+    const [canGoBack, setCanGoBack] = useState(false);
+    const [retryCount, setRetryCount] = useState(0);
+    const errorTimeoutRef = useRef(null);
+    const loadingTimeoutRef = useRef(null);
+    const isLoadingRef = useRef(false);
+    const handleNavigationStateChange = useCallback((navState) => {
+        setCanGoBack(navState.canGoBack);
+    }, []);
+    const goBack = useCallback(() => {
+        if (webViewRef.current && canGoBack) {
+            webViewRef.current.goBack();
+        }
+    }, [canGoBack]);
+    const reload = useCallback(() => {
+        if (webViewRef.current) {
+            loggerUseCases.info("Reloading WebView");
+            webViewRef.current.reload();
+        }
+    }, []);
+    const hardRefresh = useCallback(() => {
+        if (webViewRef.current) {
+            loggerUseCases.info("Hard refresh: Clearing cache and reloading");
+            Toast.show({
+                type: "info",
+                text1: "Limpiando caché...",
+                text2: "Descargando cliente fresco",
+                visibilityTime: 2000,
+            });
+            if (webViewRef.current.clearCache) {
+                webViewRef.current.clearCache(true);
+            }
+            setTimeout(() => {
+                if (webViewRef.current) {
+                    webViewRef.current.reload();
+                }
+            }, 300);
+        }
+    }, []);
+    useEffect(() => {
+        const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+            if (canGoBack) {
+                goBack();
+                return true;
+            }
+            return false;
+        });
+        return () => backHandler.remove();
+    }, [canGoBack, goBack]);
+    useEffect(() => {
+        return () => {
+            if (errorTimeoutRef.current) {
+                clearTimeout(errorTimeoutRef.current);
+            }
+            if (loadingTimeoutRef.current) {
+                clearTimeout(loadingTimeoutRef.current);
+            }
+        };
+    }, []);
+    return {
+        webViewRef,
+        canGoBack,
+        handleNavigationStateChange,
+        retryCount,
+        setRetryCount,
+        reload,
+        hardRefresh,
+        errorTimeoutRef,
+        loadingTimeoutRef,
+        isLoadingRef,
+    };
+}
+function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavigationChange, onLoadStart, onLoadEnd, onError, renderLoading, backgroundColor = "#f8f8f8", reloadKey, hardRefreshKey, maxRetries = 2, useDefaultCache = true, }) {
+    const { webViewRef, handleNavigationStateChange, retryCount, setRetryCount, reload, hardRefresh, errorTimeoutRef, loadingTimeoutRef, isLoadingRef, } = useWebView();
+    const finalScript = webViewService.combineScripts(scripts, injectedJavaScript);
+    function handleMessage(event) {
+        onMessage?.(event);
+    }
+    function handleNavigationStateChangeInternal(navState) {
+        handleNavigationStateChange(navState);
+        onNavigationChange?.(navState);
+    }
+    function handleLoadStart() {
+        isLoadingRef.current = true;
+        if (loadingTimeoutRef.current) {
+            clearTimeout(loadingTimeoutRef.current);
+        }
+        loadingTimeoutRef.current = setTimeout(() => {
+            if (isLoadingRef.current && webViewRef.current) {
+                loggerUseCases.warn("WebView stuck loading for 15s, attempting reload");
+                webViewRef.current.reload();
+            }
+        }, 15000);
+        onLoadStart?.();
+    }
+    function handleLoadEnd() {
+        isLoadingRef.current = false;
+        if (loadingTimeoutRef.current) {
+            clearTimeout(loadingTimeoutRef.current);
+            loadingTimeoutRef.current = null;
+        }
+        setRetryCount(0);
+        onLoadEnd?.();
+    }
+    function handleError(error) {
+        const errorMsg = error.nativeEvent.description || "Error desconocido";
+        const errorCode = error.nativeEvent.code || -1;
+        loggerUseCases.warn(`WebView error (${errorCode}): ${errorMsg}`);
+        if (retryCount < maxRetries) {
+            const retryDelay = Math.min(1000 * Math.pow(2, retryCount), 5000);
+            loggerUseCases.info(`Reintentando carga en ${retryDelay}ms (intento ${retryCount + 1}/${maxRetries})`);
+            errorTimeoutRef.current = setTimeout(() => {
+                setRetryCount((prev) => prev + 1);
+                reload();
+            }, retryDelay);
+        }
+        else {
+            loggerUseCases.error(`WebView falló después de ${maxRetries} reintentos`);
+            onError?.(error);
+        }
+    }
+    const prevReloadKeyRef = useRef(reloadKey);
+    const prevHardRefreshKeyRef = useRef(hardRefreshKey);
+    useEffect(() => {
+        if (reloadKey === prevReloadKeyRef.current)
+            return;
+        prevReloadKeyRef.current = reloadKey;
+        if (webViewRef.current) {
+            loggerUseCases.info(`Reloading WebView due to key change: ${reloadKey}`);
+            reload();
+        }
+    }, [reloadKey, reload]);
+    useEffect(() => {
+        if (hardRefreshKey === prevHardRefreshKeyRef.current)
+            return;
+        prevHardRefreshKeyRef.current = hardRefreshKey;
+        if (webViewRef.current) {
+            loggerUseCases.info(`Hard refresh WebView due to key change: ${hardRefreshKey}`);
+            hardRefresh();
+        }
+    }, [hardRefreshKey, hardRefresh]);
+    const cacheMode = useDefaultCache ? "LOAD_DEFAULT" : "LOAD_NO_CACHE";
+    return (_jsx(SafeAreaView, { className: "flex-1", edges: ["top", "bottom"], style: { backgroundColor }, children: _jsx(WebView, { allowsBackForwardNavigationGestures: true, cacheEnabled: true, cacheMode: cacheMode, domStorageEnabled: true, injectedJavaScript: finalScript, javaScriptEnabled: true, mixedContentMode: "compatibility", onError: handleError, onLoadEnd: handleLoadEnd, onLoadStart: handleLoadStart, onMessage: handleMessage, onNavigationStateChange: handleNavigationStateChangeInternal, ref: webViewRef, renderLoading: renderLoading ||
+                (() => _jsx(WebViewLoadingIndicator, { backgroundColor: backgroundColor })), scalesPageToFit: true, sharedCookiesEnabled: true, source: { uri: url }, startInLoadingState: true, style: { flex: 1, backgroundColor } }) }));
+}
+const styles = StyleSheet.create({
+    loading: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+InjectableWebView.Controls = WebViewControls;
+export { InjectableWebView };

package/dist/ui/components/organisms/Receipt.d.ts

@@ -0,0 +1,11 @@
+import { FormatterMap, LabelMap } from "../../../domain/receipt";
+interface ReceiptProps {
+    data: Record<string, any>;
+    labels?: LabelMap;
+    order?: string[];
+    strictOrder?: boolean;
+    formatters?: FormatterMap;
+    emptyPlaceholder?: string;
+}
+declare function Receipt({ data, labels, order, strictOrder, formatters, emptyPlaceholder, }: ReceiptProps): import("react/jsx-runtime").JSX.Element;
+export default Receipt;