+ {/* Step indicator */}
+
+ {STEPS.map(({ number, label }, index) => (
+
+
number
+ ? "bg-accent text-foreground"
+ : "text-text-muted"
+ )}
+ >
+ number
+ ? "bg-foreground/10"
+ : "bg-border"
+ )}
+ >
+ {number}
+
+ {label}
+
+ {index < STEPS.length - 1 && (
+
number ? "bg-primary" : "bg-border"
+ )}
+ />
+ )}
+
+ ))}
+
+
+ {/* Step content */}
+
+ {step === 1 && }
+ {step === 2 && (
+
+ )}
+ {step === 3 && }
+
+
+ {/* Error */}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Navigation */}
+
+
+
+ {step < totalSteps ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/campaigns/components/create/step-campaign-basics.tsx b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-campaign-basics.tsx
new file mode 100644
index 0000000..9b59654
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-campaign-basics.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@tokenization/ui/form";
+import { Input } from "@tokenization/ui/input";
+import { Textarea } from "@tokenization/ui/textarea";
+import type { CreateCampaignFormValues } from "@/features/campaigns/types/campaign.types";
+import { numericInputKeyDown, parseNumericInput } from "@/lib/numeric-input";
+
+interface Props {
+ form: UseFormReturn
;
+}
+
+export function StepCampaignBasics({ form }: Props) {
+ return (
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/campaigns/components/create/step-create-token.tsx b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-create-token.tsx
new file mode 100644
index 0000000..e76326b
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-create-token.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@tokenization/ui/form";
+import { Input } from "@tokenization/ui/input";
+import { numericInputKeyDown, parseNumericInput } from "@/lib/numeric-input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@tokenization/ui/select";
+import type { CreateCampaignFormValues } from "@/features/campaigns/types/campaign.types";
+
+interface Props {
+ form: UseFormReturn;
+}
+
+export function StepCreateToken({ form }: Props) {
+ const tokenAsset = form.watch("tokenAsset");
+
+ return (
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/campaigns/components/create/step-escrow-config.tsx b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-escrow-config.tsx
new file mode 100644
index 0000000..7b2db03
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/campaigns/components/create/step-escrow-config.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@tokenization/ui/form";
+import { Input } from "@tokenization/ui/input";
+import type { CreateCampaignFormValues } from "@/features/campaigns/types/campaign.types";
+import { numericInputKeyDown, parseNumericInput } from "@/lib/numeric-input";
+import { formatCurrency } from "@/lib/utils";
+
+interface Props {
+ form: UseFormReturn;
+ totalCommitment: number;
+}
+
+export function StepEscrowConfig({ form, totalCommitment }: Props) {
+ const targetAmount = form.watch("targetAmount");
+ const durationDays = form.watch("durationDays");
+
+ return (
+
+ );
+}
diff --git a/apps/backoffice-tokenization/src/features/campaigns/components/loans/manage-loans-view.tsx b/apps/backoffice-tokenization/src/features/campaigns/components/loans/manage-loans-view.tsx
new file mode 100644
index 0000000..fa5a88b
--- /dev/null
+++ b/apps/backoffice-tokenization/src/features/campaigns/components/loans/manage-loans-view.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@tokenization/ui/form";
+import { Input } from "@tokenization/ui/input";
+import { Textarea } from "@tokenization/ui/textarea";
+import { Button } from "@tokenization/ui/button";
+import { CheckCircle2, Pencil, Wallet, X, Check } from "lucide-react";
+import { useManageLoans } from "@/features/campaigns/hooks/use-manage-loans";
+import { numericInputKeyDown, parseNumericInput } from "@/lib/numeric-input";
+import { formatCurrency } from "@/lib/utils";
+
+export function ManageLoansView() {
+ const {
+ form,
+ milestones,
+ walletAddress,
+ editingId,
+ editValues,
+ setEditValues,
+ completeMilestone,
+ startEdit,
+ cancelEdit,
+ saveEdit,
+ onSubmit,
+ } = useManageLoans();
+
+ const shortAddress = walletAddress
+ ? `${walletAddress.slice(0, 8)}…${walletAddress.slice(-6)}`
+ : null;
+
+ return (
+
+ {/* Milestones list */}
+
+
+ Beneficiarios
+
+
+ {milestones.length === 0 ? (
+
No hay hitos registrados.
+ ) : (
+ milestones.map((milestone) => {
+ const isCompleted = milestone.status === "completed";
+ const isEditing = editingId === milestone.id;
+
+ if (isEditing) {
+ return (
+
+
+
+
+ setEditValues((v) => ({ ...v, description: e.target.value }))
+ }
+ autoFocus
+ />
+
+
+
+
+
+ setEditValues((prev) => ({ ...prev, amount: parseNumericInput(e.target.value) }))}
+ />
+
+ USDC
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {milestone.description}
+
+
+ USDC {formatCurrency(milestone.amount)}
+
+
+
+ {isCompleted ? (
+
+
+ Completado
+
+ ) : (
+
+
+
+
+ )}
+
+ );
+ })
+ )}
+
+
+ {/* Add new milestone */}
+
+
+ Agregar Nuevo Beneficiario
+
+
+
+
+
+
+
+
+
+ Nombre del Proyecto
+
+
+ Progreso de Préstamos
+
+
+ Invertido
+
+
+ Estado
+
+
+ Acciones
+
+
+
+
+
+ {campaigns.map((campaign) => {
+ const progress = mapCampaignProgress(campaign);
+ const statusCfg = CAMPAIGN_STATUS_CONFIG[campaign.status];
+
+ return (
+
+ {/* Name */}
+
+
+
+ #{campaign.id.slice(0, 3).toUpperCase()} {campaign.title}
+
+
+ {campaign.description}
+
+
+
+
+ {/* Progress */}
+
+
+
+
+ {/* Invested */}
+
+
+ ${formatCurrency(campaign.raisedAmount)}
+
+
+
+ {/* Status */}
+
+
+ {statusCfg.label}
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ {/* Campaigns table section */}
+
+
+
+ Campaña de ROI Activas
+
+
+
+
+
+
+ {/* Financial summary */}
+
+
+ Resumen Financiero
+
+
+ {SUMMARY_STATS.map((stat) => (
+
+
+
+ ))}
+
+
+
+ {/* Dialogs */}
+
+
+
diff --git a/apps/backoffice-tokenization/src/lib/numeric-input.ts b/apps/backoffice-tokenization/src/lib/numeric-input.ts
new file mode 100644
index 0000000..138d929
--- /dev/null
+++ b/apps/backoffice-tokenization/src/lib/numeric-input.ts
@@ -0,0 +1,20 @@
+import type { KeyboardEvent } from "react";
+
+const ALLOWED_KEYS = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"];
+
+export function numericInputKeyDown(e: KeyboardEvent) {
+ if (
+ !/[0-9.,]/.test(e.key) &&
+ !ALLOWED_KEYS.includes(e.key) &&
+ !e.ctrlKey &&
+ !e.metaKey
+ ) {
+ e.preventDefault();
+ }
+}
+
+export function parseNumericInput(value: string, max?: number): number {
+ const num = Number(value.replace(/[^0-9.,]/g, "").replace(",", "."));
+ const safe = isNaN(num) ? 0 : num;
+ return max !== undefined ? Math.min(safe, max) : safe;
+}
diff --git a/apps/backoffice-tokenization/src/lib/utils.ts b/apps/backoffice-tokenization/src/lib/utils.ts
index c66271b..16cc214 100644
--- a/apps/backoffice-tokenization/src/lib/utils.ts
+++ b/apps/backoffice-tokenization/src/lib/utils.ts
@@ -1 +1,8 @@
export { cn } from "@tokenization/shared/lib/utils";
+
+export function formatCurrency(amount: number, decimals = 0): string {
+ return amount.toLocaleString("es-CO", {
+ minimumFractionDigits: decimals,
+ maximumFractionDigits: decimals,
+ });
+}