Spaces:

admin08077
/

AIBANKINGUNIVERSITY

Running

App Files Files Community

admin08077 commited on 11 days ago

Commit

855fcf3

verified ·

1 Parent(s): db56d99

Update indedx.html

Browse files

Files changed (1) hide show

indedx.html +187 -194

indedx.html CHANGED Viewed

@@ -1,181 +1,129 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Demo Bank</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
-  <link rel="stylesheet" href="/index.css">
-    <script type="importmap">
-{
-  "imports": {
-    "react": "https://aistudiocdn.com/react@^19.1.1",
-    "modern-treasury": "https://aistudiocdn.com/modern-treasury@^3.3.0",
-    "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
-    "react/": "https://aistudiocdn.com/react@^19.1.1/",
-    "recharts": "https://aistudiocdn.com/recharts@^3.2.0",
-    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.19.0",
-    "recharts/": "https://aistudiocdn.com/recharts@^3.3.0/",
-    "chart.js": "https://aistudiocdn.com/chart.js@^4.5.1",
-    "react-chartjs-2": "https://aistudiocdn.com/react-chartjs-2@^5.3.1",
-    "@tanstack/react-query": "https://aistudiocdn.com/@tanstack/react-query@^5.90.10",
-    "uuid": "https://aistudiocdn.com/uuid@^13.0.0",
-    "react-icons/": "https://aistudiocdn.com/react-icons@^5.5.0/",
-    "vite": "https://aistudiocdn.com/vite@^7.2.4",
-    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
-    "path": "https://aistudiocdn.com/path@^0.12.7",
-    "plaid": "https://aistudiocdn.com/plaid@^20.0.0",
-    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
-    "@mui/x-data-grid": "https://aistudiocdn.com/@mui/x-data-grid@^8.20.0",
-    "@mui/material": "https://aistudiocdn.com/@mui/material@^7.3.6",
-    "@google/generative-ai": "https://aistudiocdn.com/@google/generative-ai@^0.24.1",
-    "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.10.0",
-    "@mui/material/": "https://aistudiocdn.com/@mui/material@^7.3.6/",
-    "@chakra-ui/react": "https://aistudiocdn.com/@chakra-ui/react@^3.30.0",
-    "@chakra-ui/icons": "https://aistudiocdn.com/@chakra-ui/icons@^2.2.4",
-    "class-variance-authority": "https://aistudiocdn.com/class-variance-authority@^0.7.1",
-    "@hello-pangea/dnd": "https://aistudiocdn.com/@hello-pangea/dnd@18.0.1",
-    "tailwind-merge": "https://aistudiocdn.com/tailwind-merge@^3.4.0",
-    "clsx": "https://aistudiocdn.com/clsx@^2.1.1",
-    "@nestjs/common": "https://aistudiocdn.com/@nestjs/common@^11.1.9",
-    "xml2js": "https://aistudiocdn.com/xml2js@^0.6.2",
-    "axios": "https://aistudiocdn.com/axios@^1.13.2",
-    "@mui/icons-material": "https://aistudiocdn.com/@mui/icons-material@^7.3.6",
-    "primereact/": "https://aistudiocdn.com/primereact@^10.9.7/",
-    "zustand": "https://aistudiocdn.com/zustand@^5.0.9",
-    "@mui/icons-material/": "https://aistudiocdn.com/@mui/icons-material@^7.3.6/",
-    "react-hook-form": "https://aistudiocdn.com/react-hook-form@^7.67.0",
-    "inversify": "https://aistudiocdn.com/inversify@^7.10.5",
-    "react-bootstrap": "https://aistudiocdn.com/react-bootstrap@^2.10.10",
-    "@tanstack/react-table": "https://aistudiocdn.com/@tanstack/react-table@^8.21.3",
-    "@stripe/stripe-js": "https://aistudiocdn.com/@stripe/stripe-js@^8.5.3",
-    "zustand/": "https://aistudiocdn.com/zustand@^5.0.9/",
-    "dotenv": "https://aistudiocdn.com/dotenv@^17.2.3",
-    "zod": "https://aistudiocdn.com/zod@^4.1.13",
-    "fs": "https://aistudiocdn.com/fs@^0.0.1-security",
-    "framer-motion": "https://aistudiocdn.com/framer-motion@^12.23.25",
-    "notistack": "https://aistudiocdn.com/notistack@^3.0.2",
-    "date-fns": "https://aistudiocdn.com/date-fns@^4.1.0",
-    "fast-xml-parser": "https://aistudiocdn.com/fast-xml-parser@^5.3.2",
-    "react-plaid-link": "https://aistudiocdn.com/react-plaid-link@^4.1.1",
-    "js-yaml": "https://aistudiocdn.com/js-yaml@^4.1.1",
-    "styled-components": "https://aistudiocdn.com/styled-components@^6.1.19",
-    "antd": "https://aistudiocdn.com/antd@^6.0.1",
-    "@ant-design/icons": "https://aistudiocdn.com/@ant-design/icons@^6.1.0",
-    "@radix-ui/react-progress": "https://aistudiocdn.com/@radix-ui/react-progress@^1.1.8",
-    "cmdk": "https://aistudiocdn.com/cmdk@^1.1.1",
-    "@radix-ui/react-separator": "https://aistudiocdn.com/@radix-ui/react-separator@^1.1.8",
-    "@radix-ui/react-label": "https://aistudiocdn.com/@radix-ui/react-label@^2.1.8",
-    "jspdf-autotable": "https://aistudiocdn.com/jspdf-autotable@^5.0.2",
-    "jspdf": "https://aistudiocdn.com/jspdf@^3.0.4",
-    "@heroicons/react/": "https://aistudiocdn.com/@heroicons/react@^2.2.0/",
-    "express": "https://aistudiocdn.com/express@^5.2.1",
-    "url": "https://aistudiocdn.com/url@^0.11.4",
-    "reactflow/": "https://aistudiocdn.com/reactflow@^11.11.4/",
-    "reactflow": "https://aistudiocdn.com/reactflow@^11.11.4",
-    "@hookform/resolvers/": "https://aistudiocdn.com/@hookform/resolvers@^5.2.2/",
-    "sonner": "https://aistudiocdn.com/sonner@^2.0.7",
-    "@radix-ui/react-select": "https://aistudiocdn.com/@radix-ui/react-select@^2.2.6",
-    "@radix-ui/react-slot": "https://aistudiocdn.com/@radix-ui/react-slot@^1.2.4",
-    "@radix-ui/react-dialog": "https://aistudiocdn.com/@radix-ui/react-dialog@^1.1.15",
-    "stripe": "https://aistudiocdn.com/stripe@^20.0.0",
-    "antd/": "https://aistudiocdn.com/antd@^6.0.1/",
-    "react-dropzone": "https://aistudiocdn.com/react-dropzone@^14.3.8",
-    "react-circular-progressbar/": "https://aistudiocdn.com/react-circular-progressbar@^2.2.0/",
-    "react-circular-progressbar": "https://aistudiocdn.com/react-circular-progressbar@^2.2.0",
-    "chartjs-adapter-date-fns": "https://aistudiocdn.com/chartjs-adapter-date-fns@^3.0.0",
-    "react-select": "https://aistudiocdn.com/react-select@^5.10.2",
-    "@rjsf/core": "https://aistudiocdn.com/@rjsf/core@^6.1.2",
-    "@stripe/react-stripe-js": "https://aistudiocdn.com/@stripe/react-stripe-js@^5.4.1",
-    "json-schema": "https://aistudiocdn.com/json-schema@^0.4.0",
-    "@radix-ui/react-popover": "https://aistudiocdn.com/@radix-ui/react-popover@^1.1.15",
-    "@rjsf/validator-ajv8": "https://aistudiocdn.com/@rjsf/validator-ajv8@^6.1.2"
-  }
-}
-</script>
-  <script type="module" crossorigin src="./assets/index-DiduAcFU.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-B-SB0IAk.css">
-</head>
-  <body class="bg-gray-900">
-    <div id="root"></div>
-    <!-- No API key, nothing injected, nothing global -->
-  </body>
-</html>
-aa
-3.61 MB
-Rename assets/index-BoHSF06O.js to assets/aa
-about 3 hours ago
-html2canvas.esm-QH1iLAAe.js
-202 kB
-Rename assets/html2canvas.esm-QH1iLAAe (1).js to assets/html2canvas.esm-QH1iLAAe.js
-15 days ago
-index-B-SB0IAk.css
-23.8 kB
-Upload 5 files
-15 days ago
-index-BoHSF06O.js
-6.08 MB
-Upload index-BoHSF06O.js
-about 2 hours ago
-index-DiduAcFU.js
-6.52 MB<!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) {
@@ -186,6 +134,7 @@ index-DiduAcFU.js
         if (!res.ok) throw new Error('Fetch failed');
         return await res.json();
       } catch (e) {
         // fallback transactions
         return {
           data: [
@@ -198,80 +147,124 @@ index-DiduAcFU.js
     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}
@@ -282,4 +275,4 @@ index-DiduAcFU.js
     );
   </script>
 </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>
+  <!-- 1. TailwindCSS -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- 2. Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
+  <!-- 3. Babel Standalone (REQUIRED for static React/JSX execution) -->
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <!-- 4. Plaid Link -->
   <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
+  <!-- 5. User's Existing CSS Assets (Kept as requested) -->
+  <link rel="stylesheet" href="/index.css">
+  <link rel="stylesheet" crossorigin href="./assets/index-B-SB0IAk.css">
+  <!-- 6. THE MASSIVE IMPORT MAP (Preserved & Auth0 Added) -->
   <script type="importmap">
   {
     "imports": {
+      "@auth0/auth0-react": "https://esm.sh/@auth0/auth0-react@2.2.4?external=react,react-dom",
       "react": "https://aistudiocdn.com/react@^19.1.1",
+      "modern-treasury": "https://aistudiocdn.com/modern-treasury@^3.3.0",
+      "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
+      "react-dom/client": "https://aistudiocdn.com/react-dom@^19.1.1/client",
+      "recharts": "https://aistudiocdn.com/recharts@^3.2.0",
+      "@google/genai": "https://aistudiocdn.com/@google/genai@^1.19.0",
+      "recharts/": "https://aistudiocdn.com/recharts@^3.3.0/",
+      "chart.js": "https://aistudiocdn.com/chart.js@^4.5.1",
+      "react-chartjs-2": "https://aistudiocdn.com/react-chartjs-2@^5.3.1",
+      "@tanstack/react-query": "https://aistudiocdn.com/@tanstack/react-query@^5.90.10",
+      "uuid": "https://aistudiocdn.com/uuid@^13.0.0",
+      "react-icons/": "https://aistudiocdn.com/react-icons@^5.5.0/",
+      "vite": "https://aistudiocdn.com/vite@^7.2.4",
+      "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
+      "path": "https://aistudiocdn.com/path@^0.12.7",
+      "plaid": "https://aistudiocdn.com/plaid@^20.0.0",
+      "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
+      "@mui/x-data-grid": "https://aistudiocdn.com/@mui/x-data-grid@^8.20.0",
+      "@mui/material": "https://aistudiocdn.com/@mui/material@^7.3.6",
+      "@google/generative-ai": "https://aistudiocdn.com/@google/generative-ai@^0.24.1",
+      "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.10.0",
+      "@mui/material/": "https://aistudiocdn.com/@mui/material@^7.3.6/",
+      "@chakra-ui/react": "https://aistudiocdn.com/@chakra-ui/react@^3.30.0",
+      "@chakra-ui/icons": "https://aistudiocdn.com/@chakra-ui/icons@^2.2.4",
+      "class-variance-authority": "https://aistudiocdn.com/class-variance-authority@^0.7.1",
+      "@hello-pangea/dnd": "https://aistudiocdn.com/@hello-pangea/dnd@18.0.1",
+      "tailwind-merge": "https://aistudiocdn.com/tailwind-merge@^3.4.0",
+      "clsx": "https://aistudiocdn.com/clsx@^2.1.1",
+      "@nestjs/common": "https://aistudiocdn.com/@nestjs/common@^11.1.9",
+      "xml2js": "https://aistudiocdn.com/xml2js@^0.6.2",
+      "axios": "https://aistudiocdn.com/axios@^1.13.2",
+      "@mui/icons-material": "https://aistudiocdn.com/@mui/icons-material@^7.3.6",
+      "primereact/": "https://aistudiocdn.com/primereact@^10.9.7/",
+      "zustand": "https://aistudiocdn.com/zustand@^5.0.9",
+      "@mui/icons-material/": "https://aistudiocdn.com/@mui/icons-material@^7.3.6/",
+      "react-hook-form": "https://aistudiocdn.com/react-hook-form@^7.67.0",
+      "inversify": "https://aistudiocdn.com/inversify@^7.10.5",
+      "react-bootstrap": "https://aistudiocdn.com/react-bootstrap@^2.10.10",
+      "@tanstack/react-table": "https://aistudiocdn.com/@tanstack/react-table@^8.21.3",
+      "@stripe/stripe-js": "https://aistudiocdn.com/@stripe/stripe-js@^8.5.3",
+      "zustand/": "https://aistudiocdn.com/zustand@^5.0.9/",
+      "dotenv": "https://aistudiocdn.com/dotenv@^17.2.3",
+      "zod": "https://aistudiocdn.com/zod@^4.1.13",
+      "fs": "https://aistudiocdn.com/fs@^0.0.1-security",
+      "framer-motion": "https://aistudiocdn.com/framer-motion@^12.23.25",
+      "notistack": "https://aistudiocdn.com/notistack@^3.0.2",
+      "date-fns": "https://aistudiocdn.com/date-fns@^4.1.0",
+      "fast-xml-parser": "https://aistudiocdn.com/fast-xml-parser@^5.3.2",
+      "react-plaid-link": "https://aistudiocdn.com/react-plaid-link@^4.1.1",
+      "js-yaml": "https://aistudiocdn.com/js-yaml@^4.1.1",
+      "styled-components": "https://aistudiocdn.com/styled-components@^6.1.19",
+      "antd": "https://aistudiocdn.com/antd@^6.0.1",
+      "@ant-design/icons": "https://aistudiocdn.com/@ant-design/icons@^6.1.0",
+      "@radix-ui/react-progress": "https://aistudiocdn.com/@radix-ui/react-progress@^1.1.8",
+      "cmdk": "https://aistudiocdn.com/cmdk@^1.1.1",
+      "@radix-ui/react-separator": "https://aistudiocdn.com/@radix-ui/react-separator@^1.1.8",
+      "@radix-ui/react-label": "https://aistudiocdn.com/@radix-ui/react-label@^2.1.8",
+      "jspdf-autotable": "https://aistudiocdn.com/jspdf-autotable@^5.0.2",
+      "jspdf": "https://aistudiocdn.com/jspdf@^3.0.4",
+      "@heroicons/react/": "https://aistudiocdn.com/@heroicons/react@^2.2.0/",
+      "express": "https://aistudiocdn.com/express@^5.2.1",
+      "url": "https://aistudiocdn.com/url@^0.11.4",
+      "reactflow/": "https://aistudiocdn.com/reactflow@^11.11.4/",
+      "reactflow": "https://aistudiocdn.com/reactflow@^11.11.4",
+      "@hookform/resolvers/": "https://aistudiocdn.com/@hookform/resolvers@^5.2.2/",
+      "sonner": "https://aistudiocdn.com/sonner@^2.0.7",
+      "@radix-ui/react-select": "https://aistudiocdn.com/@radix-ui/react-select@^2.2.6",
+      "@radix-ui/react-slot": "https://aistudiocdn.com/@radix-ui/react-slot@^1.2.4",
+      "@radix-ui/react-dialog": "https://aistudiocdn.com/@radix-ui/react-dialog@^1.1.15",
+      "stripe": "https://aistudiocdn.com/stripe@^20.0.0",
+      "antd/": "https://aistudiocdn.com/antd@^6.0.1/",
+      "react-dropzone": "https://aistudiocdn.com/react-dropzone@^14.3.8",
+      "react-circular-progressbar/": "https://aistudiocdn.com/react-circular-progressbar@^2.2.0/",
+      "react-circular-progressbar": "https://aistudiocdn.com/react-circular-progressbar@^2.2.0",
+      "chartjs-adapter-date-fns": "https://aistudiocdn.com/chartjs-adapter-date-fns@^3.0.0",
+      "react-select": "https://aistudiocdn.com/react-select@^5.10.2",
+      "@rjsf/core": "https://aistudiocdn.com/@rjsf/core@^6.1.2",
+      "@stripe/react-stripe-js": "https://aistudiocdn.com/@stripe/react-stripe-js@^5.4.1",
+      "json-schema": "https://aistudiocdn.com/json-schema@^0.4.0",
+      "@radix-ui/react-popover": "https://aistudiocdn.com/@radix-ui/react-popover@^1.1.15",
+      "@rjsf/validator-ajv8": "https://aistudiocdn.com/@rjsf/validator-ajv8@^6.1.2"
     }
   }
   </script>
+  <!-- 7. User's JS asset script (Kept as requested) -->
+  <script type="module" crossorigin src="./assets/index-DiduAcFU.js"></script>
 </head>
+<body class="bg-gray-900 text-white">
   <div id="root"></div>
+  <!-- 8. THE STATIC RUNNING APPLICATION LOGIC -->
+  <script type="text/babel" data-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, ResponsiveContainer } from 'recharts';
     // Failsafe fetch for transactions
     async function fetchTransactions(token) {
         if (!res.ok) throw new Error('Fetch failed');
         return await res.json();
       } catch (e) {
+        console.warn("Using fallback data");
         // fallback transactions
         return {
           data: [
     function TransactionsTable({ transactions }) {
       return (
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-left border-collapse mt-4">
+            <thead>
+              <tr className="bg-gray-800 border-b border-gray-700">
+                <th className="p-3 border-r border-gray-700">ID</th>
+                <th className="p-3 border-r border-gray-700">Description</th>
+                <th className="p-3 border-r border-gray-700">Amount</th>
+                <th className="p-3 border-r border-gray-700">Status</th>
+                <th className="p-3">Date</th>
               </tr>
+            </thead>
+            <tbody>
+              {transactions.map((txn, idx) => (
+                <tr key={txn.id || idx} className="border-b border-gray-700 hover:bg-gray-800">
+                  <td className="p-3 border-r border-gray-700">{txn.id}</td>
+                  <td className="p-3 border-r border-gray-700">{txn.description}</td>
+                  <td className="p-3 border-r border-gray-700 text-green-400">${txn.amount}</td>
+                  <td className="p-3 border-r border-gray-700">{txn.status}</td>
+                  <td className="p-3">{txn.date || '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       );
     }
     function TransactionsChart({ transactions }) {
       const chartData = transactions.map(txn => ({ date: txn.date || txn.id, amount: txn.amount }));
       return (
+        <div style={{ width: '100%', height: 300, marginTop: '20px' }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={chartData}>
+              <XAxis dataKey="date" stroke="#f9fafb" />
+              <YAxis stroke="#f9fafb" />
+              <Tooltip
+                contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151' }}
+                itemStyle={{ color: '#fff' }}
+              />
+              <CartesianGrid stroke="#374151" strokeDasharray="5 5" />
+              <Line type="monotone" dataKey="amount" stroke="#3b82f6" strokeWidth={2} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
       );
     }
     function App() {
+      const { loginWithRedirect, logout, isAuthenticated, getAccessTokenSilently, user, isLoading } = useAuth0();
       const [transactions, setTransactions] = React.useState([]);
       React.useEffect(() => {
         if (isAuthenticated) {
           getAccessTokenSilently()
             .then(token => fetchTransactions(token))
+            .then(data => setTransactions(data.data || []))
+            .catch(err => {
+              // Fallback if silent token fails
+              fetchTransactions("mock_token").then(data => setTransactions(data.data || []));
+            });
         }
       }, [isAuthenticated]);
+      if (isLoading) return <div className="text-white text-center mt-20 text-2xl animate-pulse">Initializing Sovereign Banking...</div>;
+      return (
+        <div className="card w-full max-w-4xl mx-auto p-6 bg-gray-800 rounded-lg shadow-2xl mt-10">
+          <h1 className="text-3xl font-bold mb-4 text-blue-400 border-b border-gray-700 pb-2">
+            <i className="fas fa-university mr-2"></i> Sovereign AI Banking Nexus
+          </h1>
           {!isAuthenticated ? (
+            <div className="text-center py-10">
+              <p className="mb-6 text-gray-300 text-lg">Secure identity federation required for financial data access.</p>
+              <button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded transition duration-200" onClick={() => loginWithRedirect()}>
+                <i className="fas fa-fingerprint mr-2"></i> Authenticate Identity
+              </button>
+            </div>
           ) : (
             <>
+              <div className="flex justify-between items-center mb-6 bg-gray-700 p-4 rounded">
+                <div className="flex items-center">
+                  {user.picture && <img src={user.picture} alt="Profile" className="w-10 h-10 rounded-full mr-3 border border-blue-400" />}
+                  <span className="text-gray-200 font-semibold">{user.name}</span>
+                </div>
+                <button className="bg-red-600 hover:bg-red-700 text-white py-1 px-4 rounded text-sm transition" onClick={() => logout({ returnTo: window.location.origin })}>
+                  Logout
+                </button>
+              </div>
+              <div className="bg-gray-900 p-4 rounded mb-6 border border-gray-700">
+                <h2 className="text-xl font-semibold mb-2 text-blue-300">Portfolio Analytics</h2>
+                <TransactionsChart transactions={transactions} />
+              </div>
+              <div className="bg-gray-900 p-4 rounded border border-gray-700">
+                <h2 className="text-xl font-semibold mb-2 text-blue-300">Recent Transactions</h2>
+                <TransactionsTable transactions={transactions} />
+              </div>
+              <div className="mt-6 pt-4 border-t border-gray-700">
+                 <button className="bg-green-600 hover:bg-green-700 text-white w-full py-3 rounded font-bold transition flex items-center justify-center" onClick={() => alert('Plaid Link initialized')}>
+                   <i className="fas fa-link mr-2"></i> Link External Accounts (Plaid)
+                 </button>
+              </div>
             </>
           )}
         </div>
       );
     }
+    // Auth0 Configuration
     const domain = "citibankdemobusinessinc.us.auth0.com";
     const clientId = "rsBLCcuq5MVA9Dj84NEVdDqpOFePLsjI";
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(
       <Auth0Provider
         domain={domain}
         clientId={clientId}
     );
   </script>
 </body>
+</html>