admin08077 commited on
Commit
db56d99
·
verified ·
1 Parent(s): edb1059

Update indedx.html

Browse files
Files changed (1) hide show
  1. indedx.html +173 -0
indedx.html CHANGED
@@ -110,3 +110,176 @@
110
  <!-- No API key, nothing injected, nothing global -->
111
  </body>
112
  </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  <!-- No API key, nothing injected, nothing global -->
111
  </body>
112
  </html>
113
+ aa
114
+ 3.61 MB
115
+ Rename assets/index-BoHSF06O.js to assets/aa
116
+ about 3 hours ago
117
+ html2canvas.esm-QH1iLAAe.js
118
+ 202 kB
119
+ Rename assets/html2canvas.esm-QH1iLAAe (1).js to assets/html2canvas.esm-QH1iLAAe.js
120
+ 15 days ago
121
+ index-B-SB0IAk.css
122
+ 23.8 kB
123
+ Upload 5 files
124
+ 15 days ago
125
+ index-BoHSF06O.js
126
+ 6.08 MB
127
+ Upload index-BoHSF06O.js
128
+ about 2 hours ago
129
+ index-DiduAcFU.js
130
+ 6.52 MB<!DOCTYPE html>
131
+ <html lang="en">
132
+ <head>
133
+ <meta charset="UTF-8" />
134
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
135
+ <title>Sovereign AI Banking Nexus</title>
136
+
137
+ <!-- TailwindCSS -->
138
+ <script src="https://cdn.tailwindcss.com"></script>
139
+
140
+ <!-- Font Awesome -->
141
+ <link
142
+ rel="stylesheet"
143
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
144
+
145
+ <!-- Plaid Link -->
146
+ <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
147
+
148
+ <!-- Importmap for React + libraries -->
149
+ <script type="importmap">
150
+ {
151
+ "imports": {
152
+ "react": "https://aistudiocdn.com/react@^19.1.1",
153
+ "react-dom": "https://aistudiocdn.com/react-dom@^19.1.1/",
154
+ "@auth0/auth0-react": "https://aistudiocdn.com/@auth0/auth0-react@^2.2.4",
155
+ "recharts": "https://aistudiocdn.com/recharts@^3.2.0"
156
+ }
157
+ }
158
+ </script>
159
+
160
+ <style>
161
+ body { margin: 0; font-family: system-ui, sans-serif; background-color: #111827; color: #f9fafb; }
162
+ #root { display: flex; justify-content: center; align-items: flex-start; padding: 2rem; min-height: 100vh; }
163
+ .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; }
164
+ button { background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; border: none; margin-top: 0.5rem; }
165
+ button:hover { background-color: #2563eb; }
166
+ table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
167
+ th, td { border: 1px solid #374151; padding: 0.5rem; text-align: left; }
168
+ th { background-color: #111827; }
169
+ </style>
170
+ </head>
171
+ <body>
172
+ <div id="root"></div>
173
+
174
+ <script type="module">
175
+ import React from 'react';
176
+ import ReactDOM from 'react-dom/client';
177
+ import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";
178
+ import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
179
+
180
+ // Failsafe fetch for transactions
181
+ async function fetchTransactions(token) {
182
+ try {
183
+ const res = await fetch('https://virtserver.swaggerhub.com/JOCALL3_1/jamesburvel/1.0', {
184
+ headers: { Authorization: `Bearer ${token}` }
185
+ });
186
+ if (!res.ok) throw new Error('Fetch failed');
187
+ return await res.json();
188
+ } catch (e) {
189
+ // fallback transactions
190
+ return {
191
+ data: [
192
+ { id: 'txn_001', amount: 125.5, description: 'Fallback Coffee', status: 'posted', date: '2025-12-01' },
193
+ { id: 'txn_002', amount: 2200, description: 'Fallback Payroll', status: 'pending', date: '2025-12-03' }
194
+ ]
195
+ };
196
+ }
197
+ }
198
+
199
+ function TransactionsTable({ transactions }) {
200
+ return (
201
+ <table>
202
+ <thead>
203
+ <tr>
204
+ <th>ID</th>
205
+ <th>Description</th>
206
+ <th>Amount</th>
207
+ <th>Status</th>
208
+ <th>Date</th>
209
+ </tr>
210
+ </thead>
211
+ <tbody>
212
+ {transactions.map(txn => (
213
+ <tr key={txn.id}>
214
+ <td>{txn.id}</td>
215
+ <td>{txn.description}</td>
216
+ <td>${txn.amount}</td>
217
+ <td>{txn.status}</td>
218
+ <td>{txn.date || '-'}</td>
219
+ </tr>
220
+ ))}
221
+ </tbody>
222
+ </table>
223
+ );
224
+ }
225
+
226
+ function TransactionsChart({ transactions }) {
227
+ const chartData = transactions.map(txn => ({ date: txn.date || txn.id, amount: txn.amount }));
228
+ return (
229
+ <LineChart width={550} height={250} data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
230
+ <XAxis dataKey="date" stroke="#f9fafb" />
231
+ <YAxis stroke="#f9fafb" />
232
+ <Tooltip />
233
+ <CartesianGrid stroke="#374151" strokeDasharray="5 5" />
234
+ <Line type="monotone" dataKey="amount" stroke="#3b82f6" />
235
+ </LineChart>
236
+ );
237
+ }
238
+
239
+ function App() {
240
+ const { loginWithRedirect, logout, isAuthenticated, getAccessTokenSilently } = useAuth0();
241
+ const [transactions, setTransactions] = React.useState([]);
242
+
243
+ React.useEffect(() => {
244
+ if (isAuthenticated) {
245
+ getAccessTokenSilently()
246
+ .then(token => fetchTransactions(token))
247
+ .then(data => setTransactions(data.data || []));
248
+ }
249
+ }, [isAuthenticated]);
250
+
251
+ return (
252
+ <div className="card">
253
+ <h1 className="text-2xl mb-4">Sovereign AI Banking Nexus</h1>
254
+
255
+ {!isAuthenticated ? (
256
+ <button onClick={() => loginWithRedirect()}>Login</button>
257
+ ) : (
258
+ <>
259
+ <button onClick={() => logout({ returnTo: window.location.origin })}>Logout</button>
260
+ <h2 className="text-xl mt-4 mb-2">Transactions:</h2>
261
+ <TransactionsTable transactions={transactions} />
262
+ <h2 className="text-xl mt-4 mb-2">Transaction Chart:</h2>
263
+ <TransactionsChart transactions={transactions} />
264
+ <button onClick={() => alert('Plaid Link would open here')}>Connect Bank (Plaid)</button>
265
+ </>
266
+ )}
267
+ </div>
268
+ );
269
+ }
270
+
271
+ const domain = "citibankdemobusinessinc.us.auth0.com";
272
+ const clientId = "rsBLCcuq5MVA9Dj84NEVdDqpOFePLsjI";
273
+
274
+ ReactDOM.createRoot(document.getElementById('root')).render(
275
+ <Auth0Provider
276
+ domain={domain}
277
+ clientId={clientId}
278
+ authorizationParams={{ redirect_uri: window.location.origin }}
279
+ >
280
+ <App />
281
+ </Auth0Provider>
282
+ );
283
+ </script>
284
+ </body>
285
+ </html>