-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/dashboard/loans/page.tsx b/src/app/dashboard/loans/page.tsx
new file mode 100644
index 00000000..1be8c104
--- /dev/null
+++ b/src/app/dashboard/loans/page.tsx
@@ -0,0 +1,5 @@
+import MyEscrows from "@/components/modules/escrow/ui/pages/MyEscrows";
+
+export default function Page() {
+ return
+
+ );
+}
diff --git a/src/app/dashboard/offer/page.tsx b/src/app/dashboard/offer/page.tsx
new file mode 100644
index 00000000..9aab9a60
--- /dev/null
+++ b/src/app/dashboard/offer/page.tsx
@@ -0,0 +1,9 @@
+import CreateLoanOffer from "@/components/modules/dashboard/offer/ui/pages/OfferLoanPage";
+
+export default function Page() {
+ return (
+
+
+ );
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 00000000..b4860960
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,9 @@
+import { DashboardOverview } from "@/components/modules/dashboard/ui/pages/DashboardPage";
+
+export default function Page() {
+ return (
+
+
+ );
+}
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
new file mode 100644
index 00000000..c7567909
--- /dev/null
+++ b/src/app/dashboard/settings/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import Settings from "@/components/modules/setting/Settings";
+
+export default function Page() {
+ return (
+
+
+ );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index dc98be74..fdeb4647 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,6 +6,8 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
+ --custom-blue: #0078ff;
+ --custom-celeste: #7fc4ff;
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
@@ -45,8 +47,6 @@
:root {
--radius: 0.625rem;
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
@@ -76,6 +76,10 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --custom-blue: #0078ff;
+ --custom-celeste: #7fc4ff;
}
.dark {
@@ -110,6 +114,8 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
+ --custom-blue: #0078ff;
+ --custom-celeste: #7fc4ff;
}
@layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87eb..90e82cd2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "TrustBridge",
+ description:
+ "TrustBridge is a decentralized platform designed to facilitate P2P microloans securely, transparently, and efficiently",
};
export default function RootLayout({
@@ -23,7 +24,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e68abe6b..b6d08d2e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,26 @@
-import Image from "next/image";
+"use client";
-export default function Home() {
- return (
-
-
-
-
-
+ useEffect(() => {
+ if (address) {
+ router.push("/dashboard");
+ }
+ }, [address, router]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ 
+ {!collapsed && (
+
+
+ {!collapsed && (
+
+
+ TrustBridge
+
+
+ Decentralized Microloans
+
+
+ )}
+
+
+
+
+
+ U
+
+
+ {!collapsed && (
+
+
+
+ User
+
+ {formattedAddress}
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+
+ {[...Array(6)].map((_, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/modules/auth/server/authentication.firebase.ts b/src/components/modules/auth/server/authentication.firebase.ts
new file mode 100644
index 00000000..1f8b0520
--- /dev/null
+++ b/src/components/modules/auth/server/authentication.firebase.ts
@@ -0,0 +1,236 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { User, UserPayload } from "@/@types/user.entity";
+import { db } from "@/core/config/firebase/firebase";
+import {
+ doc,
+ setDoc,
+ getDoc,
+ collection,
+ updateDoc,
+ serverTimestamp,
+ getDocs,
+} from "firebase/firestore";
+
+interface addUserProps {
+ address: string;
+ profileImage?: string;
+}
+
+const addUser = async ({
+ address,
+ profileImage = "",
+}: addUserProps): Promise<{
+ success: boolean;
+ message: string;
+ data?: any;
+}> => {
+ const collectionRef = collection(db, "users");
+
+ try {
+ const userDoc = doc(collectionRef, address);
+ const userSnapshot = await getDoc(userDoc);
+
+ if (!userSnapshot.exists()) {
+ await setDoc(userDoc, {
+ address,
+ profileImage,
+ createdAt: new Date(),
+ saveEscrow: true,
+ });
+
+ return {
+ success: true,
+ message: `User ${address} registered successfully`,
+ data: {
+ id: userDoc.id,
+ address,
+ profileImage,
+ saveEscrow: true,
+ },
+ };
+ } else {
+ return {
+ success: false,
+ message: "User already exists.",
+ data: userSnapshot.data(),
+ };
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response && error.response.data
+ ? error.response.data.message
+ : "An error occurred";
+
+ return { success: false, message: errorMessage };
+ }
+};
+
+interface getUserProps {
+ address: string;
+}
+
+const getUser = async ({
+ address,
+}: getUserProps): Promise<{
+ success: boolean;
+ message: string;
+ data?: any;
+}> => {
+ try {
+ const userDoc = doc(db, "users", address);
+ const userSnapshot = await getDoc(userDoc);
+
+ if (userSnapshot.exists()) {
+ return {
+ success: true,
+ message: `User ${address} found successfully`,
+ data: userSnapshot.data(),
+ };
+ } else {
+ return {
+ success: false,
+ message: `User ${address} not found`,
+ };
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response && error.response.data
+ ? error.response.data.message
+ : "An error occurred";
+
+ return { success: false, message: errorMessage };
+ }
+};
+interface updateUserProps {
+ address: string;
+ payload: UserPayload;
+}
+
+const updateUser = async ({
+ address,
+ payload,
+}: updateUserProps): Promise<{
+ success: boolean;
+ message: string;
+ data?: any;
+}> => {
+ try {
+ const userDoc = doc(db, "users", address);
+ const userSnapshot = await getDoc(userDoc);
+
+ if (userSnapshot.exists()) {
+ await updateDoc(userDoc, { ...payload, updatedAt: serverTimestamp() });
+
+ return {
+ success: true,
+ message: `User ${address} updated successfully`,
+ data: { id: userDoc.id, address, ...payload },
+ };
+ } else {
+ await setDoc(userDoc, {
+ ...payload,
+ address,
+ createdAt: serverTimestamp(),
+ });
+
+ return {
+ success: true,
+ message: `User ${address} registered and updated successfully`,
+ data: { id: userDoc.id, address, ...payload },
+ };
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response && error.response.data
+ ? error.response.data.message
+ : "An error occurred";
+
+ return { success: false, message: errorMessage };
+ }
+};
+
+const getAllUsers = async (): Promise<{
+ success: boolean;
+ message: string;
+ data?: any[];
+}> => {
+ const collectionRef = collection(db, "users");
+
+ try {
+ const querySnapshot = await getDocs(collectionRef);
+
+ if (querySnapshot.empty) {
+ return {
+ success: false,
+ message: "No users found",
+ };
+ }
+
+ const users = querySnapshot.docs
+ .map((doc) => {
+ const userData = doc.data();
+ if (!userData.firstName || userData.firstName.trim() === "") {
+ return null;
+ }
+
+ return {
+ id: doc.id,
+ ...userData,
+ };
+ })
+ .filter((user) => user !== null);
+
+ return {
+ success: true,
+ message: "Users retrieved successfully",
+ data: users,
+ };
+ } catch (error: any) {
+ const errorMessage =
+ error.response && error.response.data
+ ? error.response.data.message
+ : "An error occurred";
+
+ return { success: false, message: errorMessage };
+ }
+};
+
+interface getUserByWalletProps {
+ address: string;
+}
+
+const getUserByWallet = async ({
+ address,
+}: getUserByWalletProps): Promise<{
+ success: boolean;
+ message: string;
+ data?: User;
+}> => {
+ try {
+ const userDoc = doc(db, "users", address);
+ const userSnapshot = await getDoc(userDoc);
+
+ if (userSnapshot.exists()) {
+ return {
+ success: true,
+ message: `User with wallet ${address} found successfully`,
+ data: userSnapshot.data() as User,
+ };
+ } else {
+ return {
+ success: false,
+ message: `User with wallet ${address} not found`,
+ };
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response && error.response.data
+ ? error.response.data.message
+ : "An error occurred";
+
+ return { success: false, message: errorMessage };
+ }
+};
+
+export { addUser, getUser, updateUser, getAllUsers, getUserByWallet };
diff --git a/src/components/modules/auth/ui/pages/Home.tsx b/src/components/modules/auth/ui/pages/Home.tsx
new file mode 100644
index 00000000..1ec571fe
--- /dev/null
+++ b/src/components/modules/auth/ui/pages/Home.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { ArrowRight, Wallet, BadgeCheck } from "lucide-react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { useGlobalAuthenticationStore } from "@/core/store/data";
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+import { useWallet } from "../../wallet/hooks/wallet.hook";
+import { useEffect } from "react";
+
+export default function HomePage() {
+ const { handleConnect, handleDisconnect } = useWallet();
+ const { address } = useGlobalAuthenticationStore();
+
+ useEffect(() => {
+ document.body.style.overflow = "hidden";
+
+ return () => {
+ document.body.style.overflow = "auto";
+ };
+ }, []);
+
+ return (
+
+
+
+ {loanOffers.length === 0 && (
+
+
+
+ Loan Offer Requests
++ These loan offers are pending approval. Review and approve them to + publish in the marketplace. +
+
+
+ No pending offers
++ There are currently no loan offers pending approval. When lenders + submit new offers, they will appear here. +
+
+ {loanOffers.map((offer) => (
+ openRequestDetails(offer)}
+ >
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ + {offer.title} +
+ +
+
+
+ {formatAddress(offer.lenderWallet)}
+
+
+
+
+
+
+
+ Loan Amount
+${offer.maxAmount}
+
+ {offer.milestones?.length > 0 && (
+
+
+
+ )}
+ {offer.platformFee && (
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/modules/auth/wallet/constants/wallet-kit.constant.ts b/src/components/modules/auth/wallet/constants/wallet-kit.constant.ts
new file mode 100644
index 00000000..f7035202
--- /dev/null
+++ b/src/components/modules/auth/wallet/constants/wallet-kit.constant.ts
@@ -0,0 +1,12 @@
+import {
+ StellarWalletsKit,
+ WalletNetwork,
+ allowAllModules,
+ FREIGHTER_ID,
+} from "@creit.tech/stellar-wallets-kit";
+
+export const kit: StellarWalletsKit = new StellarWalletsKit({
+ network: WalletNetwork.TESTNET,
+ selectedWalletId: FREIGHTER_ID,
+ modules: allowAllModules(),
+});
diff --git a/src/components/modules/auth/wallet/hooks/wallet.hook.ts b/src/components/modules/auth/wallet/hooks/wallet.hook.ts
new file mode 100644
index 00000000..d70db350
--- /dev/null
+++ b/src/components/modules/auth/wallet/hooks/wallet.hook.ts
@@ -0,0 +1,52 @@
+import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
+import { kit } from "../constants/wallet-kit.constant";
+import { useGlobalAuthenticationStore } from "@/core/store/data";
+
+export const useWallet = () => {
+ const { connectWalletStore, disconnectWalletStore } =
+ useGlobalAuthenticationStore();
+
+ const connectWallet = async () => {
+ await kit.openModal({
+ modalTitle: "Connect to your favorite wallet",
+ onWalletSelected: async (option: ISupportedWallet) => {
+ kit.setWallet(option.id);
+
+ const { address } = await kit.getAddress();
+ const { name } = option;
+
+ connectWalletStore(address, name);
+ },
+ });
+ };
+
+ const disconnectWallet = async () => {
+ await kit.disconnect();
+ disconnectWalletStore();
+ };
+
+ const handleConnect = async () => {
+ try {
+ await connectWallet();
+ } catch (error) {
+ console.error("Error connecting wallet:", error);
+ }
+ };
+
+ const handleDisconnect = async () => {
+ try {
+ if (disconnectWallet) {
+ await disconnectWallet();
+ }
+ } catch (error) {
+ console.error("Error disconnecting wallet:", error);
+ }
+ };
+
+ return {
+ connectWallet,
+ disconnectWallet,
+ handleConnect,
+ handleDisconnect,
+ };
+};
diff --git a/src/components/modules/dashboard/hooks/useDashboard.hook.ts b/src/components/modules/dashboard/hooks/useDashboard.hook.ts
new file mode 100644
index 00000000..f8e975c0
--- /dev/null
+++ b/src/components/modules/dashboard/hooks/useDashboard.hook.ts
@@ -0,0 +1,214 @@
+import { useState, useEffect } from "react";
+import { useGlobalAuthenticationStore } from "@/core/store/data";
+
+interface DashboardStats {
+ totalLoans: number;
+ activeLoans: number;
+ totalAmount: number;
+ availableBalance: number;
+ pendingApprovals: number;
+ completedLoans: number;
+}
+
+interface RecentActivity {
+ id: string;
+ type:
+ | "loan_created"
+ | "loan_approved"
+ | "milestone_completed"
+ | "payment_received"
+ | "loan_completed";
+ title: string;
+ description: string;
+ amount?: number;
+ date: Date;
+ status?: "pending" | "completed" | "rejected";
+}
+
+interface LoanData {
+ month: string;
+ amount: number;
+}
+
+interface UpcomingMilestone {
+ id: string;
+ loanTitle: string;
+ description: string;
+ dueDate: Date;
+ amount: number;
+}
+
+export function useDashboard() {
+ const { address } = useGlobalAuthenticationStore();
+ const [loading, setLoading] = useState
+
+
+
+
+
+
+
+
+ Powered by Stellar Blockchain
+
+
+ + + TrustBridge + + Decentralized Microloans +
++ Connecting lenders and borrowers through secure, transparent, + and efficient blockchain technology. Build trust, create + opportunity. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Total Loan Volume +
+$1.2M+
+
+
+ )}
+
+ );
+};
+
+export default ExploreMarketplace;
diff --git a/src/components/modules/dashboard/marketplace/ui/pages/MarketplaceOffersList.tsx b/src/components/modules/dashboard/marketplace/ui/pages/MarketplaceOffersList.tsx
new file mode 100644
index 00000000..2a7e844f
--- /dev/null
+++ b/src/components/modules/dashboard/marketplace/ui/pages/MarketplaceOffersList.tsx
@@ -0,0 +1,421 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { format } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+ DollarSign,
+ User,
+ Search,
+ X,
+ Filter,
+ ArrowUpDown,
+ Calendar,
+ Milestone,
+ ChevronRight,
+ Sparkles,
+} from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getApprovedLoanOffers } from "../../server/marketplace.firebase";
+import MarketplaceLoanDetailDialog from "../dialogs/MarketplaceLoanDetailDialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function MarketplaceOffersList() {
+ const [loanOffers, setLoanOffers] = useStateMarketplace
++ Explore loan offers available in the marketplace and choose the one + that suits your needs. +
+
+
+ );
+ }
+
+ return (
+
+ {[...Array(6)].map((_, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ )}
+
+ {viewMode === "grid" ? (
+
+ );
+}
diff --git a/src/components/modules/dashboard/offer/hooks/offer-loan.hook.ts b/src/components/modules/dashboard/offer/hooks/offer-loan.hook.ts
new file mode 100644
index 00000000..c261cb8c
--- /dev/null
+++ b/src/components/modules/dashboard/offer/hooks/offer-loan.hook.ts
@@ -0,0 +1,72 @@
+"use client";
+
+import { useForm, useFieldArray } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ OfferLoanSchema,
+ OfferLoanSchemaType,
+} from "../schema/apply-loan.schema";
+import { useGlobalAuthenticationStore } from "@/core/store/data";
+import { useGlobalUIBoundedStore } from "@/core/store/ui";
+import { addLoanOffer } from "../server/offer.firebase";
+import { toast } from "sonner";
+
+export function useOfferLoanForm() {
+ const { address, loggedUser } = useGlobalAuthenticationStore();
+ const setIsLoading = useGlobalUIBoundedStore((state) => state.setIsLoading);
+
+ const form = useForm
+
+
+
+
+
+
+
+
+
+
+ {filteredOffers.length === 0 && (
+
+
+
+
+ setViewMode(v as "grid" | "list")}
+ className="hidden md:block"
+ >
+
+
+
+
+
+
+
+
+
+ {[...Array(9)].map((_, i) => (
+
+ ))}
+
+ Grid
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+ List
+
+
+
+
+
+
+
+
+ {isFiltering && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No offers available
++ No loan offers match your criteria. Try adjusting your filters. +
+ {isFiltering && ( + + )} +
+ {filteredOffers.map((offer) => (
+ {
+ setSelectedLoan(offer);
+ setIsDialogOpen(true);
+ }}
+ >
+
+
+
+
+
+ ))}
+
+ ) : (
+
+
+
+
+
+
+
+ + {offer.title} +
+ +
+
+
+ + {formatAddress(offer.lenderWallet)} +
+
+
+
+ {offer.milestones?.length > 0 && (
+
+
+
+
+ Loan Amount
+${offer.maxAmount}
+
+
+ )}
+
+
+
+
+ {filteredOffers.map((offer) => (
+ {
+ setSelectedLoan(offer);
+ setIsDialogOpen(true);
+ }}
+ >
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+ Approved
+
+
+ + {offer.title} +
+
+
+ + {formatAddress(offer.lenderWallet)} +
+ โข +
+
+
+
+
+
+
+
+
+
+ Amount
+${offer.maxAmount}
+
+
+
+
+
+
+ Define the terms and conditions for your loan offer
+
+
+ Create Loan Offer
+
+ {Array.from({ length: totalSteps }).map((_, i) => (
+
+ ))}
+
+
+
+ )}
+
+ );
+};
+
+export default CreateLoanOffer;
diff --git a/src/components/modules/dashboard/ui/pages/DashboardPage.tsx b/src/components/modules/dashboard/ui/pages/DashboardPage.tsx
new file mode 100644
index 00000000..6c69b6af
--- /dev/null
+++ b/src/components/modules/dashboard/ui/pages/DashboardPage.tsx
@@ -0,0 +1,567 @@
+"use client";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+import {
+ TrendingUp,
+ DollarSign,
+ CreditCard,
+ Clock,
+ CheckCircle2,
+ ArrowRight,
+ Calendar,
+ Wallet,
+ PiggyBank,
+ Activity,
+ Landmark,
+ FileText,
+ Milestone,
+ BarChart4,
+ CircleDollarSign,
+ BadgeCheck,
+ ShieldCheck,
+ ShoppingBag,
+} from "lucide-react";
+import { useDashboard } from "../../hooks/useDashboard.hook";
+
+export function DashboardOverview() {
+ const {
+ loading,
+ stats,
+ recentActivity,
+ loanTrends,
+ upcomingMilestones,
+ formatCurrency,
+ formatDate,
+ formatDueDate,
+ } = useDashboard();
+
+ const getActivityIcon = (type: string) => {
+ switch (type) {
+ case "loan_created":
+ return
+
+ );
+ }
+
+ return (
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/components/modules/dashboard/ui/pages/background/GradientBackground.tsx b/src/components/modules/dashboard/ui/pages/background/GradientBackground.tsx
new file mode 100644
index 00000000..da114169
--- /dev/null
+++ b/src/components/modules/dashboard/ui/pages/background/GradientBackground.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface GradientBackgroundProps {
+ children: ReactNode;
+ className?: string;
+ opacity?: number;
+ primaryColor?: string;
+ secondaryColor?: string;
+ primaryPosition?: string;
+ secondaryPosition?: string;
+ primarySize?: string;
+ secondarySize?: string;
+ primaryBlur?: string;
+ secondaryBlur?: string;
+}
+
+export function GradientBackground({
+ children,
+ className,
+ opacity = 30,
+ primaryColor = "bg-emerald-200",
+ secondaryColor = "bg-teal-200",
+ primaryPosition = "-top-40 -right-40",
+ secondaryPosition = "top-1/2 -left-40",
+ primarySize = "w-80 h-80",
+ secondarySize = "w-80 h-80",
+ primaryBlur = "blur-3xl",
+ secondaryBlur = "blur-3xl",
+}: GradientBackgroundProps) {
+ return (
+
+
+
+
+
+
+ Dashboard
++ Welcome back! Here's an overview of your loan activity and financial + status. +
+
+
+
+
+ Total Loan Volume
+
+ {formatCurrency(stats.totalAmount)}
+
+
+
+
+
+
+
+
+
+ Active Loans
+ {stats.activeLoans}
+
+
+
+
+
+
+
+
+ Available Balance
+
+ {formatCurrency(stats.availableBalance)}
+
+
+
+
+
+
+
+
+
+ Pending Approvals
+ {stats.pendingApprovals}
+
+
+
+
+
+
+
+
+
+
+
+ {stats.totalLoans} loans
+
+
+
+
+
+ In progress
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loan Distribution
+
+
+
+
+
+
+
+ Earnings Overview
+
+
+
+
+
+
+
+
+
+
+
+ Overview
+
+
+ Loans
+
+
+ Earnings
+
+
+
+
+
+
+ Financial Overview
+
+
+
+
+ Loans
+
+
+
+ Repayments
+
+
+
+ {loanTrends.map((data, i) => (
+
+
+
+ ))}
+
+
+
+
+
+ {data.month}
+
+
+
+
+
+
+
+
+
+ Active Loans
+
+
+ {stats.activeLoans} (
+ {((stats.activeLoans / stats.totalLoans) * 100).toFixed(
+ 0,
+ )}
+ %)
+
+
+
+
+
+
+
+
+
+ Pending Loans
+
+
+ {stats.pendingApprovals} (
+ {(
+ (stats.pendingApprovals / stats.totalLoans) *
+ 100
+ ).toFixed(0)}
+ %)
+
+
+
+
+
+
+
+
+
+ Completed Loans
+
+
+ {stats.completedLoans} (
+ {(
+ (stats.completedLoans / stats.totalLoans) *
+ 100
+ ).toFixed(0)}
+ %)
+
+
+
+
+
+
+
+
+
+ Total Loans
+
+
+ {stats.totalLoans}
+
+
+ Avg. Amount
+
+
+ + {formatCurrency(stats.totalAmount / stats.totalLoans)} +
+
+
+ Success Rate
+
+
+ + 94% +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Total Earnings +
++ {formatCurrency(stats.totalAmount * 0.12)} +
+
+
+
+
+
+
+ + Interest Earned +
++ {formatCurrency(stats.totalAmount * 0.08)} +
+
+
+
+
+ Earnings Breakdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recent Activity
+
+
+ {recentActivity.slice(0, 4).map((activity) => (
+
+
+
+
+
+
+
+
+ ))}
+
+ {getActivityIcon(activity.type)}
+
+
+
+
+
+ {activity.title}
+ {getStatusBadge(activity.status)} ++ {activity.description} +
+
+
+ {formatDate(activity.date)}
+
+ {activity.amount && (
+
+ {formatCurrency(activity.amount)}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/modules/escrow/constants/status-options.constant.ts b/src/components/modules/escrow/constants/status-options.constant.ts
new file mode 100644
index 00000000..665e68de
--- /dev/null
+++ b/src/components/modules/escrow/constants/status-options.constant.ts
@@ -0,0 +1,9 @@
+export const statusOptions = [
+ { value: "completed", label: "Completed" },
+ { value: "pending", label: "Pending" },
+];
+
+export const statusMap: Record
+
+
+
+
+ {/* Content */}
+ {children}
+
+
+ ) : (
+
+
+
+ {currentData.map((escrow, index) => {
+ // todo: use these constants in zusntand
+ const completedMilestones = escrow.milestones.filter(
+ (milestone) => milestone.status === "completed",
+ ).length;
+
+ const approvedMilestones = escrow.milestones.filter(
+ (milestone) => milestone.flag === true,
+ ).length;
+
+ const totalMilestones = escrow.milestones.length;
+
+ const progressPercentageCompleted =
+ totalMilestones > 0
+ ? (completedMilestones / totalMilestones) * 100
+ : 0;
+
+ const progressPercentageApproved =
+ totalMilestones > 0
+ ? (approvedMilestones / totalMilestones) * 100
+ : 0;
+
+ // Check if both are 100% and releaseFlag is false
+ const pendingRelease =
+ progressPercentageCompleted === 100 &&
+ progressPercentageApproved === 100 &&
+ !escrow.releaseFlag;
+
+ return (
+ {
+ e.stopPropagation();
+ setIsDialogOpen(true);
+ setSelectedEscrow(escrow);
+ }}
+ >
+
+
+
+ );
+ })}
+
+
+
+
+ + {escrow.title || "No title"} +
+ +
+ {!escrow.disputeFlag &&
+ !escrow.releaseFlag &&
+ !escrow.resolvedFlag &&
+ !pendingRelease && (
+ <>
+
+ Working
++ In Dispute +
++ Pending Release +
++ Released +
++ Resolved +
+
+
+ + {formatDollar(escrow?.balance) || "N/A"} of{" "} + {formatDollar(escrow.amount) || "N/A"} +
++ {formatAddress(escrow.approver)} +
+ ++ Created:{" "} + {formatDateFromFirebase( + escrow.createdAt.seconds, + escrow.createdAt.nanoseconds, + )} +
+
+
+
+ Items per page:
+ setItemsPerPage(Number(e.target.value))}
+ className="w-16"
+ />
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
+
+ {type === "Trustless Work" ? (
+
+ {user?.firstName?.[0] || "?"}
+ {user?.lastName?.[0] || "?"}
+
+ )}
+
+
+
+ );
+};
+
+export default EntityCard;
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/change-flag-escrow-dialog.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/change-flag-escrow-dialog.hook.ts
new file mode 100644
index 00000000..d6404e65
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/hooks/change-flag-escrow-dialog.hook.ts
@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+"use client";
+
+import {
+ useGlobalAuthenticationStore,
+ useGlobalBoundedStore,
+} from "@/core/store/data";
+import { useEscrowBoundedStore } from "../../../store/ui";
+import { Escrow, EscrowPayload, Milestone } from "@/@types/escrow.entity";
+import { changeMilestoneFlag } from "../../../services/change-mileston-flag.service";
+import { toast } from "@/hooks/toast.hook";
+
+const useChangeFlagEscrowDialog = () => {
+ const { address } = useGlobalAuthenticationStore();
+ const setIsChangingStatus = useEscrowBoundedStore(
+ (state) => state.setIsChangingStatus,
+ );
+ const setIsDialogOpen = useEscrowBoundedStore(
+ (state) => state.setIsDialogOpen,
+ );
+ const setSelectedEscrow = useGlobalBoundedStore(
+ (state) => state.setSelectedEscrow,
+ );
+ const updateEscrow = useGlobalBoundedStore((state) => state.updateEscrow);
+
+ const changeMilestoneFlagSubmit = async (
+ selectedEscrow: Escrow,
+ milestone: Milestone,
+ index: number,
+ ) => {
+ setIsChangingStatus(true);
+
+ try {
+ await changeMilestoneFlag({
+ contractId: selectedEscrow?.contractId,
+ milestoneIndex: index.toString(),
+ newFlag: true,
+ approver: address,
+ });
+
+ const updatedMilestonesFlag = selectedEscrow.milestones.map(
+ (m, i): Milestone =>
+ i === index
+ ? {
+ ...m,
+ flag: true,
+ }
+ : m,
+ );
+
+ const updatedPayloadFlag: EscrowPayload = {
+ ...selectedEscrow,
+ milestones: updatedMilestonesFlag,
+ };
+
+ const responseFlag = await updateEscrow({
+ escrowId: selectedEscrow.id,
+ payload: updatedPayloadFlag,
+ });
+
+ setIsChangingStatus(false);
+
+ if (responseFlag) {
+ setIsDialogOpen(false);
+ setSelectedEscrow(undefined);
+
+ toast({
+ title: "Success",
+ description: `The Milestone ${milestone.description} has been approved.`,
+ });
+ }
+ } catch (error: any) {
+ setIsChangingStatus(false);
+
+ toast({
+ title: "Error",
+ description: error.message,
+ variant: "destructive",
+ });
+ }
+ };
+
+ return { changeMilestoneFlagSubmit };
+};
+
+export default useChangeFlagEscrowDialog;
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/change-status-escrow-dialog.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/change-status-escrow-dialog.hook.ts
new file mode 100644
index 00000000..ef608a27
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/hooks/change-status-escrow-dialog.hook.ts
@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+"use client";
+
+import {
+ useGlobalAuthenticationStore,
+ useGlobalBoundedStore,
+} from "@/core/store/data";
+import { useEscrowBoundedStore } from "../../../store/ui";
+import {
+ Escrow,
+ EscrowPayload,
+ Milestone,
+ MilestoneStatus,
+} from "@/@types/escrow.entity";
+import { changeMilestoneStatus } from "../../../services/change-milestone-status.service";
+import { toast } from "@/hooks/toast.hook";
+
+const useChangeStatusEscrowDialog = () => {
+ const { address } = useGlobalAuthenticationStore();
+ const setIsChangingStatus = useEscrowBoundedStore(
+ (state) => state.setIsChangingStatus,
+ );
+ const setIsDialogOpen = useEscrowBoundedStore(
+ (state) => state.setIsDialogOpen,
+ );
+ const setSelectedEscrow = useGlobalBoundedStore(
+ (state) => state.setSelectedEscrow,
+ );
+ const updateEscrow = useGlobalBoundedStore((state) => state.updateEscrow);
+
+ const changeMilestoneStatusSubmit = async (
+ selectedEscrow: Escrow,
+ milestone: Milestone,
+ index: number,
+ ) => {
+ setIsChangingStatus(true);
+
+ try {
+ await changeMilestoneStatus({
+ contractId: selectedEscrow?.contractId,
+ milestoneIndex: index.toString(),
+ newStatus: "completed",
+ serviceProvider: address,
+ });
+
+ const updatedMilestonesStatus = selectedEscrow.milestones.map(
+ (m, i): Milestone =>
+ i === index
+ ? {
+ ...m,
+ status: "completed" as MilestoneStatus,
+ }
+ : m,
+ );
+
+ const updatedPayloadStatus: EscrowPayload = {
+ ...selectedEscrow,
+ milestones: updatedMilestonesStatus,
+ };
+
+ const responseStatus = await updateEscrow({
+ escrowId: selectedEscrow.id,
+ payload: updatedPayloadStatus,
+ });
+
+ setIsChangingStatus(false);
+
+ if (responseStatus) {
+ setIsDialogOpen(false);
+ setSelectedEscrow(undefined);
+
+ toast({
+ title: "Success",
+ description: `The Milestone ${milestone.description} has been completed.`,
+ });
+ }
+ } catch (error: any) {
+ setIsChangingStatus(false);
+
+ toast({
+ title: "Error",
+ description: error.message,
+ variant: "destructive",
+ });
+ }
+ };
+
+ return { changeMilestoneStatusSubmit };
+};
+
+export default useChangeStatusEscrowDialog;
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/distribute-earnings-escrow-dialog.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/distribute-earnings-escrow-dialog.hook.ts
new file mode 100644
index 00000000..9b51955d
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/hooks/distribute-earnings-escrow-dialog.hook.ts
@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+"use client";
+
+import {
+ useGlobalAuthenticationStore,
+ useGlobalBoundedStore,
+} from "@/core/store/data";
+import { useEscrowBoundedStore } from "../../../store/ui";
+import { distributeEscrowEarnings } from "../../../services/distribute-escrow-earnings.service";
+import { toast } from "@/hooks/toast.hook";
+import { EscrowPayload } from "@/@types/escrow.entity";
+
+const useDistributeEarningsEscrowDialog = () => {
+ const { address } = useGlobalAuthenticationStore();
+ const setIsChangingStatus = useEscrowBoundedStore(
+ (state) => state.setIsChangingStatus,
+ );
+ const selectedEscrow = useGlobalBoundedStore((state) => state.selectedEscrow);
+ const setIsDialogOpen = useEscrowBoundedStore(
+ (state) => state.setIsDialogOpen,
+ );
+ const setIsSuccessReleaseDialogOpen = useEscrowBoundedStore(
+ (state) => state.setIsSuccessReleaseDialogOpen,
+ );
+ const setRecentEscrow = useGlobalBoundedStore(
+ (state) => state.setRecentEscrow,
+ );
+ const updateEscrow = useGlobalBoundedStore((state) => state.updateEscrow);
+ const fetchAllEscrows = useGlobalBoundedStore(
+ (state) => state.fetchAllEscrows,
+ );
+ const activeTab = useEscrowBoundedStore((state) => state.activeTab);
+
+ const distributeEscrowEarningsSubmit = async () => {
+ setIsChangingStatus(true);
+ setIsSuccessReleaseDialogOpen(false);
+
+ if (!selectedEscrow) return;
+
+ try {
+ const data = await distributeEscrowEarnings({
+ contractId: selectedEscrow?.contractId,
+ signer: address,
+ serviceProvider: selectedEscrow?.serviceProvider,
+ releaseSigner: selectedEscrow?.releaseSigner,
+ });
+
+ const updatedPayload: EscrowPayload = {
+ ...selectedEscrow,
+ releaseFlag: true,
+ };
+
+ const responseFlag = await updateEscrow({
+ escrowId: selectedEscrow.id,
+ payload: updatedPayload,
+ });
+
+ if ((data.status === "SUCCESS" || data.status === 201) && responseFlag) {
+ setIsSuccessReleaseDialogOpen(true);
+ fetchAllEscrows({ address, type: activeTab || "approver" });
+ setIsDialogOpen(false);
+ setIsChangingStatus(false);
+ if (selectedEscrow) {
+ setRecentEscrow(selectedEscrow);
+ }
+
+ toast({
+ title: "Success",
+ description: `You have released the payment in ${selectedEscrow.title}.`,
+ });
+ }
+ } catch (error: any) {
+ setIsChangingStatus(false);
+
+ toast({
+ title: "Error",
+ description: error.message,
+ variant: "destructive",
+ });
+ }
+ };
+
+ return { distributeEscrowEarningsSubmit };
+};
+
+export default useDistributeEarningsEscrowDialog;
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/edit-milestones-dialog.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/edit-milestones-dialog.hook.ts
new file mode 100644
index 00000000..115c70bd
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/hooks/edit-milestones-dialog.hook.ts
@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+ useGlobalAuthenticationStore,
+ useGlobalBoundedStore,
+} from "@/core/store/data";
+import { formSchema } from "../../../schema/edit-milestone.schema";
+import { EscrowPayload, Milestone } from "@/@types/escrow.entity";
+import { useEscrowBoundedStore } from "../../../store/ui";
+import { toast } from "@/hooks/toast.hook";
+import { editMilestones } from "../../../services/edit-milestones.service";
+
+interface useEditMilestonesDialogProps {
+ setIsEditMilestoneDialogOpen: (value: boolean) => void;
+}
+
+const useEditMilestonesDialog = ({
+ setIsEditMilestoneDialogOpen,
+}: useEditMilestonesDialogProps) => {
+ const { address } = useGlobalAuthenticationStore();
+ const selectedEscrow = useGlobalBoundedStore((state) => state.selectedEscrow);
+ const setIsEditingMilestones = useEscrowBoundedStore(
+ (state) => state.setIsEditingMilestones,
+ );
+ const updateEscrow = useGlobalBoundedStore((state) => state.updateEscrow);
+ const fetchAllEscrows = useGlobalBoundedStore(
+ (state) => state.fetchAllEscrows,
+ );
+ const activeTab = useEscrowBoundedStore((state) => state.activeTab);
+ const setIsDialogOpen = useEscrowBoundedStore(
+ (state) => state.setIsDialogOpen,
+ );
+
+ const form = useForm
+
+ {type}
+
+
+
+ {hasPercentage && (
+
+
+
+ )}
+ {hasAmount && (
+ Fee:
+ {percentage}% +
+
+ )}
+ Amount:
+ {formatDollar(amount)} +
+ {type === "Trustless Work" ? (
+ <>
+
+ Trustless Work
+
+ Private
+
+ ) : (
+ <>
+
+ {user && (user.firstName || user.lastName)
+ ? `${user.firstName} ${user.lastName}`
+ : "Unknown"}
+
+
+ {formatAddress(entity)}
+
+ )}
+
+
+
+ );
+};
+
+export default ProgressEscrow;
diff --git a/src/components/modules/escrow/ui/dialogs/utils/SkeletonEditMilestones.tsx b/src/components/modules/escrow/ui/dialogs/utils/SkeletonEditMilestones.tsx
new file mode 100644
index 00000000..c167b31b
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/utils/SkeletonEditMilestones.tsx
@@ -0,0 +1,36 @@
+import { DialogFooter } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SkeletonEditMilestones = () => {
+ return (
+
+ {shouldHideProgress ? (
+
+ ) : (
+ <>
+
+ {!shouldHideProgress && (
+ Completed
+Approved
+ + )} +
+
+ {progressPercentageCompleted.toFixed(0)}%
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default SkeletonEditMilestones;
diff --git a/src/components/modules/escrow/ui/dialogs/utils/SkeletonFundEscrow.tsx b/src/components/modules/escrow/ui/dialogs/utils/SkeletonFundEscrow.tsx
new file mode 100644
index 00000000..1edd6ef0
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/utils/SkeletonFundEscrow.tsx
@@ -0,0 +1,16 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SkeletonFundEscrow = () => {
+ return (
+
+
+
+
+
+
+
+
+ {[...Array(3)].map((_, index) => (
+
+
+ ))}
+
+
+ {index === 2 && (
+
+
+ );
+};
+
+export default SkeletonFundEscrow;
diff --git a/src/components/modules/escrow/ui/dialogs/utils/SkeletonMilestones.tsx b/src/components/modules/escrow/ui/dialogs/utils/SkeletonMilestones.tsx
new file mode 100644
index 00000000..4e664c4d
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/utils/SkeletonMilestones.tsx
@@ -0,0 +1,38 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { useGlobalBoundedStore } from "@/core/store/data";
+
+const SkeletonMilestones = () => {
+ const selectedEscrow = useGlobalBoundedStore((state) => state.selectedEscrow);
+ const milestones = selectedEscrow?.milestones || [];
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkeletonMilestones;
diff --git a/src/components/modules/escrow/ui/dialogs/utils/SkeletonResolveDispute.tsx b/src/components/modules/escrow/ui/dialogs/utils/SkeletonResolveDispute.tsx
new file mode 100644
index 00000000..16d18caf
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/utils/SkeletonResolveDispute.tsx
@@ -0,0 +1,34 @@
+import { DialogFooter } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SkeletonResolveDispute = () => {
+ return (
+
+
+ {milestones.map((_, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SkeletonResolveDispute;
diff --git a/src/components/modules/escrow/ui/filters/MyEscrowsFilter.tsx b/src/components/modules/escrow/ui/filters/MyEscrowsFilter.tsx
new file mode 100644
index 00000000..f8f9e988
--- /dev/null
+++ b/src/components/modules/escrow/ui/filters/MyEscrowsFilter.tsx
@@ -0,0 +1,67 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+} from "@/components/ui/select";
+import CreateButton from "@/components/utils/ui/Create";
+import Divider from "@/components/utils/ui/Divider";
+import { Search, Trash2 } from "lucide-react";
+
+const MyEscrowsFilter = () => {
+ return (
+
+ );
+};
+
+export default MyEscrowsFilter;
diff --git a/src/components/modules/escrow/ui/forms/InitializeEscrowForm.tsx b/src/components/modules/escrow/ui/forms/InitializeEscrowForm.tsx
new file mode 100644
index 00000000..dc9b17a2
--- /dev/null
+++ b/src/components/modules/escrow/ui/forms/InitializeEscrowForm.tsx
@@ -0,0 +1,614 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useInitializeEscrow } from "@/components/modules/escrow/hooks/initialize-escrow.hook";
+import TooltipInfo from "@/components/utils/ui/Tooltip";
+import SelectField from "@/components/utils/ui/SelectSearch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+ DollarSign,
+ Trash2,
+ Plus,
+ FileText,
+ Briefcase,
+ User,
+ Shield,
+ Gavel,
+ Wallet,
+ Percent,
+ Milestone,
+ ArrowRight,
+ CheckCircle2,
+} from "lucide-react";
+import { useMarketplaceStore } from "@/components/modules/dashboard/marketplace/store/marketplace";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const InitializeEscrowForm = () => {
+ const {
+ form,
+ milestones,
+ onSubmit,
+ handleAddMilestone,
+ handleRemoveMilestone,
+ handleFieldChange,
+ userOptions,
+ trustlineOptions,
+ showSelect,
+ toggleField,
+ isAnyMilestoneEmpty,
+ } = useInitializeEscrow();
+
+ const { selectedLoan, clearSelectedLoan } = useMarketplaceStore();
+ const [currentStep, setCurrentStep] = useState(1);
+ const totalSteps = 3;
+
+ useEffect(() => {
+ if (selectedLoan) {
+ form.setValue("amount", selectedLoan.maxAmount?.toString() || "");
+ form.setValue("platformFee", selectedLoan.platformFee?.toString() || "");
+ form.setValue("platformAddress", selectedLoan.platformAddress || "");
+ form.setValue("approver", selectedLoan.approver || "");
+ form.setValue("releaseSigner", selectedLoan.releaseSigner || "");
+ form.setValue("disputeResolver", selectedLoan.disputeResolver || "");
+ form.setValue("milestones", selectedLoan.milestones || []);
+ }
+
+ return () => {
+ clearSelectedLoan();
+ };
+ }, [selectedLoan, form, clearSelectedLoan]);
+
+ const handleNextStep = () => {
+ if (currentStep < totalSteps) {
+ setCurrentStep((prev) => prev + 1);
+ // Scroll to top of form
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ }
+ };
+
+ const handlePrevStep = () => {
+ if (currentStep > 1) {
+ setCurrentStep((prev) => prev - 1);
+ // Scroll to top of form
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Complete the form below to request a microloan with secure,
+ transparent terms.
+
+
+ Request a New Loan
+
+ {Array.from({ length: totalSteps }).map((_, i) => (
+
+ ))}
+
+