- {Array.from({ length: 5 }).map((_, i) => (
-
- ))}
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
);
@@ -246,58 +408,69 @@ export default function MarketplacePage() {
Invoice Marketplace
-
-
- {isFetching && !isLoading && (
-
-
- Refreshing…
-
- )}
-
-
-
-
+ {/* Collapsible Filter Panel on the left */}
+
-
- {filtered.length === 0 ? (
-
- No invoices match your filters.
-
- ) : (
- filtered.map((invoice) => (
-
- ))
- )}
- {isFetchingNextPage &&
- Array.from({ length: 3 }).map((_, i) => (
-
- ))}
- {hasNextPage &&
}
- {!hasNextPage && filtered.length > 0 && (
-
- No more invoices
-
- )}
+
+
+
+ {isFetching && !isLoading && (
+
+
+ Refreshing…
+
+ )}
+
+
+
+
+
+
+
+ {filtered.length === 0 ? (
+
+ No invoices match your filters.
+
+ ) : (
+ filtered.map((invoice) => (
+
+ ))
+ )}
+ {isFetchingNextPage &&
+ Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+ {hasNextPage &&
}
+ {!hasNextPage && filtered.length > 0 && (
+
+ No more invoices
+
+ )}
+
+
);
diff --git a/components/admin/AdminInvoicesReview.tsx b/components/admin/AdminInvoicesReview.tsx
new file mode 100644
index 0000000..08b03d0
--- /dev/null
+++ b/components/admin/AdminInvoicesReview.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+ fetchAdminInvoices,
+ approveAdminInvoice,
+ rejectAdminInvoice,
+ AdminInvoiceRow,
+} from "@/lib/api";
+import { usePageTitle } from "@/hooks/usePageTitle";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DocumentPreview } from "@/components/invoices/DocumentPreview";
+import { toast } from "sonner";
+import { FileText, CheckCircle, XCircle } from "lucide-react";
+
+export function AdminInvoicesReview() {
+ usePageTitle("Admin Invoice Review");
+ const { jwt } = useAuth();
+ const queryClient = useQueryClient();
+
+ const [selectedDocUrl, setSelectedDocUrl] = useState
(null);
+ const [rejectingInvoiceId, setRejectingInvoiceId] = useState(null);
+ const [rejectionReason, setRejectionReason] = useState("");
+
+ const {
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isLoading,
+ isError,
+ } = useInfiniteQuery({
+ queryKey: ["admin-invoices-pending", jwt],
+ queryFn: ({ pageParam }) =>
+ fetchAdminInvoices("pending", pageParam as string | undefined, jwt ?? undefined),
+ initialPageParam: undefined as string | undefined,
+ getNextPageParam: (lastPage) =>
+ lastPage.has_more ? lastPage.next_cursor ?? undefined : undefined,
+ enabled: !!jwt,
+ });
+
+ const approveMutation = useMutation({
+ mutationFn: (invoiceId: string) => approveAdminInvoice(invoiceId, jwt ?? undefined),
+ onSuccess: (_, invoiceId) => {
+ toast.success("Invoice approved successfully");
+ queryClient.setQueryData(["admin-invoices-pending", jwt], (oldData: any) => {
+ if (!oldData) return oldData;
+ return {
+ ...oldData,
+ pages: oldData.pages.map((page: any) => ({
+ ...page,
+ invoices: page.invoices.filter((inv: AdminInvoiceRow) => inv.invoiceId !== invoiceId),
+ })),
+ };
+ });
+ },
+ onError: (err: any) => {
+ toast.error(err?.message || "Failed to approve invoice");
+ },
+ });
+
+ const rejectMutation = useMutation({
+ mutationFn: ({ invoiceId, reason }: { invoiceId: string; reason: string }) =>
+ rejectAdminInvoice(invoiceId, reason, jwt ?? undefined),
+ onSuccess: (_, variables) => {
+ toast.success("Invoice rejected successfully");
+ setRejectingInvoiceId(null);
+ setRejectionReason("");
+ queryClient.setQueryData(["admin-invoices-pending", jwt], (oldData: any) => {
+ if (!oldData) return oldData;
+ return {
+ ...oldData,
+ pages: oldData.pages.map((page: any) => ({
+ ...page,
+ invoices: page.invoices.filter(
+ (inv: AdminInvoiceRow) => inv.invoiceId !== variables.invoiceId
+ ),
+ })),
+ };
+ });
+ },
+ onError: (err: any) => {
+ toast.error(err?.message || "Failed to reject invoice");
+ },
+ });
+
+ const allInvoices = data?.pages.flatMap((p) => p.invoices) ?? [];
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ );
+ }
+
+ if (isError) {
+ return (
+
+ Error loading pending invoices. Please try again.
+
+ );
+ }
+
+ return (
+
+
+
+ Pending Invoice Submissions
+
+
+ {allInvoices.length === 0 ? (
+
+ No pending invoices to review.
+
+ ) : (
+
+ )}
+
+ {hasNextPage && (
+
+
+
+ )}
+
+
+
+ {/* Document Modal */}
+ {selectedDocUrl && (
+
+
+
+
Document Preview
+
+
+
+
+
+ )}
+
-
Active Positions
- {positions.length === 0 ? (
-
-
- No active investments yet — browse the marketplace to get started
-
-
-
- ) : (
- positions.map((position) => (
-
- ))
- )}
+
+
+
+
+ {activeTab === "positions" ? (
+
+
Active Positions
+ {positions.length === 0 ? (
+
+
+ No active investments yet — browse the marketplace to get started
+
+
+
+ ) : (
+ positions.map((position) => (
+
+ ))
+ )}
+
+ ) : (
+
+ )}
+ {step1Complete ? (
+
+ ) : (
+
+ )}
+
+ Complete Identity Verification (KYC)
+
+
+
+
+ {step2Complete ? (
+
+ ) : (
+
+ )}
+
+ Set your Display Name
+
+
+
+
+ {step3Complete ? (
+
+ ) : (
+
+ )}
+
+ Create your first invoice
+
+
+
+
+ );
+}
diff --git a/components/dashboard/PayoutHistoryTable.tsx b/components/dashboard/PayoutHistoryTable.tsx
new file mode 100644
index 0000000..4489fda
--- /dev/null
+++ b/components/dashboard/PayoutHistoryTable.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { fetchInvestorPayouts, PayoutRecord } from "@/lib/api";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function PayoutHistoryTable() {
+ const {
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isLoading,
+ isError,
+ } = useInfiniteQuery({
+ queryKey: ["investor-payouts"],
+ queryFn: ({ pageParam }) => fetchInvestorPayouts(pageParam as string | undefined),
+ initialPageParam: undefined as string | undefined,
+ getNextPageParam: (lastPage) =>
+ lastPage.has_more ? lastPage.next_cursor ?? undefined : undefined,
+ });
+
+ const allPayouts = data?.pages.flatMap((p) => p.payouts) ?? [];
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (isError) {
+ return (
+
+ Failed to load payout history.
+
+ );
+ }
+
+ if (allPayouts.length === 0) {
+ return (
+
+ No payouts yet
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ | Invoice ID |
+ Seller Name |
+ Amount Invested |
+ Amount Received |
+ Yield |
+ Settled At |
+
+
+
+ {allPayouts.map((row, idx) => {
+ const isShortfall = row.amountReceived < row.amountInvested;
+ return (
+
+ | {row.invoiceId} |
+ {row.sellerName} |
+ {row.amountInvested.toLocaleString()} XLM |
+ {row.amountReceived.toLocaleString()} XLM |
+ {row.yield}% |
+
+ {new Date(row.settledAt).toLocaleDateString()}
+ |
+
+ );
+ })}
+
+
+
+
+ {hasNextPage && (
+
+
+
+ )}
+
+
+
+
+ {activeCount > 0 && (
+
+ )}
+
+
+ {isOpen && (
+
+ {/* Funding Status Multi-select */}
+
+
+
+ {STATUS_OPTIONS.map((opt) => {
+ const checked = filters.statuses.includes(opt.value);
+ return (
+
+ );
+ })}
+
+
+
+ {/* Minimum Yield Slider */}
+
+
+
+ {filters.minYield}%
+
+
+ onFilterChange({ ...filters, minYield: Number(e.target.value) })
+ }
+ className="w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
+ data-testid="min-yield-slider"
+ />
+
+ 0%
+ 30%
+
+
+
+ {/* Due Date Range Picker */}
+
+
+ )}
+