Spaces:

admin08077
/

AIBANKINGUNIVERSITY

Running

File size: 14,131 Bytes

<!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) {
      try {
        const res = await fetch('https://virtserver.swaggerhub.com/JOCALL3_1/jamesburvel/1.0', {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (!res.ok) throw new Error('Fetch failed');
        return await res.json();
      } catch (e) {
        console.warn("Using fallback data");
        // 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 (
        <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}
        authorizationParams={{ redirect_uri: window.location.origin }}
      >
        <App />
      </Auth0Provider>
    );
  </script>
</body>
</html>