Spaces:

admin08077
/

AIBANKINGUNIVERSITY

Running

App Files Files Community

admin08077 commited on 27 days ago

Commit

a6336c7

verified ·

1 Parent(s): 708c432

Update index.html

Browse files

Files changed (1) hide show

index.html +156 -0

index.html CHANGED Viewed

@@ -119,3 +119,159 @@
     <div id="root"></div>
   </body>
 </html>

     <div id="root"></div>
   </body>
 </html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sovereign AI Banking Nexus</title>
+  <!-- TailwindCSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Font Awesome -->
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
+  <!-- Plaid Link -->
+  <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
+  <!-- Importmap for React + libraries -->
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://aistudiocdn.com/react@^19.1.1",
+      "react-dom": "https://aistudiocdn.com/react-dom@^19.1.1/",
+      "@auth0/auth0-react": "https://aistudiocdn.com/@auth0/auth0-react@^2.2.4",
+      "recharts": "https://aistudiocdn.com/recharts@^3.2.0"
+    }
+  }
+  </script>
+  <style>
+    body { margin: 0; font-family: system-ui, sans-serif; background-color: #111827; color: #f9fafb; }
+    #root { display: flex; justify-content: center; align-items: flex-start; padding: 2rem; min-height: 100vh; }
+    .card { background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.5); width: 100%; max-width: 600px; }
+    button { background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; border: none; margin-top: 0.5rem; }
+    button:hover { background-color: #2563eb; }
+    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
+    th, td { border: 1px solid #374151; padding: 0.5rem; text-align: left; }
+    th { background-color: #111827; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module">
+    import React from 'react';
+    import ReactDOM from 'react-dom/client';
+    import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";
+    import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
+    // Failsafe fetch for transactions
+    async function fetchTransactions(token) {
+      try {
+        const res = await fetch('https://ce47fe80-dabc-4ad0-b0e7-cf285695b8b8.mock.pstmn.io/transactions', {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        if (!res.ok) throw new Error('Fetch failed');
+        return await res.json();
+      } catch (e) {
+        // fallback transactions
+        return {
+          data: [
+            { id: 'txn_001', amount: 125.5, description: 'Fallback Coffee', status: 'posted', date: '2025-12-01' },
+            { id: 'txn_002', amount: 2200, description: 'Fallback Payroll', status: 'pending', date: '2025-12-03' }
+          ]
+        };
+      }
+    }
+    function TransactionsTable({ transactions }) {
+      return (
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Description</th>
+              <th>Amount</th>
+              <th>Status</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.map(txn => (
+              <tr key={txn.id}>
+                <td>{txn.id}</td>
+                <td>{txn.description}</td>
+                <td>${txn.amount}</td>
+                <td>{txn.status}</td>
+                <td>{txn.date || '-'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      );
+    }
+    function TransactionsChart({ transactions }) {
+      const chartData = transactions.map(txn => ({ date: txn.date || txn.id, amount: txn.amount }));
+      return (
+        <LineChart width={550} height={250} data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+          <XAxis dataKey="date" stroke="#f9fafb" />
+          <YAxis stroke="#f9fafb" />
+          <Tooltip />
+          <CartesianGrid stroke="#374151" strokeDasharray="5 5" />
+          <Line type="monotone" dataKey="amount" stroke="#3b82f6" />
+        </LineChart>
+      );
+    }
+    function App() {
+      const { loginWithRedirect, logout, isAuthenticated, getAccessTokenSilently } = useAuth0();
+      const [transactions, setTransactions] = React.useState([]);
+      React.useEffect(() => {
+        if (isAuthenticated) {
+          getAccessTokenSilently()
+            .then(token => fetchTransactions(token))
+            .then(data => setTransactions(data.data || []));
+        }
+      }, [isAuthenticated]);
+      return (
+        <div className="card">
+          <h1 className="text-2xl mb-4">Sovereign AI Banking Nexus</h1>
+          {!isAuthenticated ? (
+            <button onClick={() => loginWithRedirect()}>Login</button>
+          ) : (
+            <>
+              <button onClick={() => logout({ returnTo: window.location.origin })}>Logout</button>
+              <h2 className="text-xl mt-4 mb-2">Transactions:</h2>
+              <TransactionsTable transactions={transactions} />
+              <h2 className="text-xl mt-4 mb-2">Transaction Chart:</h2>
+              <TransactionsChart transactions={transactions} />
+              <button onClick={() => alert('Plaid Link would open here')}>Connect Bank (Plaid)</button>
+            </>
+          )}
+        </div>
+      );
+    }
+    const domain = "citibankdemobusinessinc.us.auth0.com";
+    const clientId = "rsBLCcuq5MVA9Dj84NEVdDqpOFePLsjI";
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      <Auth0Provider
+        domain={domain}
+        clientId={clientId}
+        authorizationParams={{ redirect_uri: window.location.origin }}
+      >
+        <App />
+      </Auth0Provider>
+    );
+  </script>
+</body>
+</html>