Merge pull request #278 from Lakes41/lakes3

feat: add API integration layer with Next.js route handlers

Author: AlAfiz

.gitignore

@@ -22,6 +22,9 @@ tsconfig.tsbuildinfo
 # Agent
 AEGNTS.md
 
+# Agent
+AEGNTS.md
+
 # IDE
 .vscode
 .idea

src/app/page.tsx

@@ -236,56 +236,65 @@ export default function Page() {
                 </div>
               </div>
 
-              {/* Invoice Table */}
-              <div className="bg-tradeflow-secondary rounded-2xl border border-tradeflow-muted overflow-hidden mb-12">
-                <div className="p-6 border-b border-slate-700">
-                  <h2 className="text-xl font-semibold">Verified Asset Pipeline</h2>
-                </div>
-                <table className="w-full text-left">
-                  <thead className="bg-tradeflow-dark/50 text-tradeflow-muted text-sm uppercase">
-                    <tr>
-                      <th className="p-4">Invoice ID</th>
-                      <th className="p-4">Risk Score</th>
-                      <th className="p-4">Status</th>
-                      <th className="p-4">Amount</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {loading ? (
-                      // Show 5 skeleton rows while loading
-                      Array.from({ length: 5 }).map((_, index) => (
-                        <SkeletonRow key={`skeleton-${index}`} />
-                      ))
-                    ) : (
-                      invoices.map((inv: { id: string; riskScore: number; status: string; amount: number | string }) => (
-                        <tr
-                          key={inv.id}
-                          className="border-b border-tradeflow-muted/50 hover:bg-tradeflow-muted/20 transition"
-                        >
-                          <td className="p-4 font-mono text-sm text-blue-300">
-                            #{inv.id.slice(-6)}
-                          </td>
-                          <td className="p-4">
-                            <div className="w-full bg-tradeflow-muted h-2 rounded-full max-w-[100px]">
-                              <div
-                                className="bg-blue-500 h-2 rounded-full"
-                                style={{ width: `${inv.riskScore}%` }}
-                              ></div>
-                            </div>
-                          </td>
-                          <td className="p-4 text-sm font-medium">
-                            <span
-                              className={`px-3 py-1 rounded-full ${inv.status === "Approved" ? "bg-tradeflow-success/20 text-tradeflow-success" : "bg-tradeflow-warning/20 text-tradeflow-warning"}`}
-                            >
-                              {inv.status}
-                            </span>
-                          </td>
-                          <td className="p-4 font-bold text-lg">${inv.amount}</td>
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
+            {/* Invoice Table */}
+            <div className="bg-tradeflow-secondary rounded-2xl border border-tradeflow-muted overflow-hidden mb-12">
+              <div className="p-6 border-b border-slate-700">
+                <h2 className="text-xl font-semibold">Verified Asset Pipeline</h2>
+              </div>
+              <table className="w-full text-left">
+                <thead className="bg-tradeflow-dark/50 text-tradeflow-muted text-sm uppercase">
+                  <tr>
+                    <th className="p-4">Invoice ID</th>
+                    <th className="p-4">Risk Score</th>
+                    <th className="p-4">Status</th>
+                    <th className="p-4">Amount</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {loading ? (
+                    // Show 5 skeleton rows while loading
+                    Array.from({ length: 5 }).map((_, index) => (
+                      <SkeletonRow key={`skeleton-${index}`} />
+                    ))
+                  ) : (
+                    invoices.map((inv) => (
+                      <tr
+                        key={inv.id}
+                        className="border-b border-tradeflow-muted/50 hover:bg-tradeflow-muted/20 transition"
+                      >
+                        <td className="p-4 font-mono text-sm text-blue-300">
+                          #{inv.id.slice(-6)}
+                        </td>
+                        <td className="p-4">
+                          <div className="w-full bg-tradeflow-muted h-2 rounded-full max-w-[100px]">
+                            <div
+                              className="bg-blue-500 h-2 rounded-full"
+                              style={{ width: `${inv.riskScore}%` }}
+                            ></div>
+                          </div>
+                        </td>
+                        <td className="p-4 text-sm font-medium">
+                          <span
+                            className={`px-3 py-1 rounded-full ${inv.status === "Approved" ? "bg-tradeflow-success/20 text-tradeflow-success" : "bg-tradeflow-warning/20 text-tradeflow-warning"}`}
+                          >
+                            {inv.status}
+                          </span>
+                        </td>
+                        <td className="p-4 font-bold text-lg">${inv.amount}</td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Active Loans Table (Issue #6) */}
+            <div className="bg-tradeflow-secondary rounded-2xl border border-tradeflow-muted overflow-hidden">
+              <div className="p-6 border-b border-slate-700">
+                <h2 className="text-xl font-semibold">Active Loans Dashboard</h2>
+              </div>
+              <div className="p-6 bg-tradeflow-dark/50">
+                <LoanTable />
               </div>
 
               {/* Active Loans Table (Issue #6) */}