(null);
+
+ useEffect(() => {
+ fetchCampaigns()
+ .then((data) => setCampaigns(data as Campaign[]))
+ .catch(() =>
+ setError("No se pudieron cargar las campañas."),
+ )
+ .finally(() => setLoading(false));
+ }, []);
+
+ if (!walletAddress) {
+ return (
+
+
+ Conecta tu wallet para continuar
+
+
+ );
+ }
+
+ const inProgress = campaigns.filter((c) =>
+ IN_PROGRESS_STATUSES.includes(c.status),
+ );
+ const inactive = campaigns.filter((c) =>
+ INACTIVE_STATUSES.includes(c.status),
+ );
+
+ return (
+
+
+
+
Campañas
+
+
+
+ {loading && (
+
+
+ Cargando campañas...
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {!loading && !error && (
+
+
+ All
+
+ In Progress
+
+ Inactive
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ #{String(index + 1).padStart(3, "0")}
+
+
+ {campaign.name}
+
+
+ {campaign.description && (
+
+ {campaign.description}
+
+ )}
+
+
+
+
+ {STATUS_LABELS[campaign.status] ?? campaign.status}
+
+ {campaign.escrowId && (
+
+ )}
+
+
+
+
+
+ {campaign.escrowId
+ ? truncate(campaign.escrowId)
+ : "Sin escrow"}
+
+
+
+
+ No hay campañas en esta categoría.
+
+ );
+ }
+
+ return (
+
+ {campaigns.map((c, i) => (
+
+ ))}
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/flow-testing/components/EscrowHeader.tsx b/apps/backoffice-tokenization/src/features/flow-testing/components/EscrowHeader.tsx
new file mode 100644
index 0000000..656c9bb
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/flow-testing/components/EscrowHeader.tsx
@@ -0,0 +1,31 @@
+import { Button } from "@tokenization/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+interface EscrowHeaderProps {
+ title: string;
+ contractId: string;
+ onBack: () => void;
+}
+
+export function EscrowHeader({ title, contractId, onBack }: EscrowHeaderProps) {
+ return (
+ <>
+
+
+
+ {title} — {contractId}
+
+
+
+
+ Gestionar Prestamos
+
+
+ Balance: USDC {escrowBalance}
+
+
+
+
+
+
+
+
+
+
+ {description}
+
+ {formatAddress(receiver)}
+
+ {status && (
+
+ Estado: {status}
+
+ )}
+
+
USDC {amount}
+
+ {/* Change Milestone Status */}
+
+
+ {/* Approve Milestone */}
+
+
+ {/* Release Funds - only visible when approved */}
+ {isApproved && (
+
+ )}
+
+
+ No hay prestamos todavia
+
+ );
+ }
+
+ return (
+
+ {milestones.map((milestone, index) => {
+ const isApproved = milestone.flags?.approved === true;
+ const isReleased = milestone.flags?.released === true;
+ const milestoneAmount = Number(milestone.amount || 0);
+ const insufficientFunds = escrowBalance < milestoneAmount;
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/flow-testing/components/PhaseStatusRow.tsx b/apps/backoffice-tokenization/src/features/flow-testing/components/PhaseStatusRow.tsx
new file mode 100644
index 0000000..a401bb8
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/flow-testing/components/PhaseStatusRow.tsx
@@ -0,0 +1,52 @@
+import {
+ Loader2,
+ CheckCircle2,
+ XCircle,
+ Circle,
+} from "lucide-react";
+import type { PhaseStatus } from "../types";
+
+interface PhaseStatusRowProps {
+ label: string;
+ status: PhaseStatus;
+ error?: string;
+}
+
+export function PhaseStatusRow({
+ label,
+ status,
+ error,
+}: PhaseStatusRowProps) {
+ return (
+
+
+ {status === "loading" && (
+
+ )}
+ {status === "success" && (
+
+ )}
+ {status === "error" && (
+
+ )}
+ {status === "idle" && (
+
+ )}
+
+
+
+ {label}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ Inicializando escrow...
+
+
+
+
+ Error al inicializar escrow
+
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+
+
+
+ Escrow inicializado exitosamente
+
+ {contractId && (
+
+
+ Contract ID:
+
+
+ {contractId}
+
+
+ )}
+ {onNext && (
+
+ )}
+
+
+ Tokenizando campaña
+
+
+ {phases.map((phase, index) => (
+
+ ))}
+
+ {failedAt !== null && (
+
+ )}
+