feat(frontend): Added Mock Bank connection

7project/frontend/src/pages/Dashboard.tsx

@@ -4,6 +4,7 @@ import AccountPage from './AccountPage';
 import AppearancePage from './AppearancePage';
 import BalanceChart from './BalanceChart';
 import CategoryPieChart from './CategoryPieChart';
+import MockBankModal, { type MockGenerationOptions } from './MockBankModal';
 import { BACKEND_URL } from '../config';
 
 function formatAmount(n: number) {
@@ -16,6 +17,8 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
   const [categories, setCategories] = useState<Category[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isMockModalOpen, setMockModalOpen] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
 
   // Start CSAS (George) OAuth after login
   async function startOauthCsas() {
@@ -92,6 +95,51 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
     }
   }
 
+  async function handleGenerateMockTransactions(options: MockGenerationOptions) {
+    setIsGenerating(true);
+    setMockModalOpen(false);
+
+    const { count, minAmount, maxAmount, startDate, endDate, categoryIds } = options;
+    const newTransactions: Transaction[] = [];
+
+    const startDateTime = new Date(startDate).getTime();
+    const endDateTime = new Date(endDate).getTime();
+
+    for (let i = 0; i < count; i++) {
+      // Generate random data based on user input
+      const amount = parseFloat((Math.random() * (maxAmount - minAmount) + minAmount).toFixed(2));
+
+      const randomTime = Math.random() * (endDateTime - startDateTime) + startDateTime;
+      const date = new Date(randomTime);
+      const dateString = date.toISOString().split('T')[0];
+
+      const randomCategory = categoryIds.length > 0
+        ? [categoryIds[Math.floor(Math.random() * categoryIds.length)]]
+        : [];
+
+      const payload = {
+        amount,
+        date: dateString,
+        category_ids: randomCategory,
+      };
+
+      try {
+        const created = await createTransaction(payload);
+        newTransactions.push(created);
+      } catch (err) {
+        console.error("Failed to create mock transaction:", err);
+        alert('An error occurred while generating transactions. Check the console.');
+        break;
+      }
+    }
+
+    setTransactions(prev => [...newTransactions, ...prev].sort((a, b) => new Date(b.date || 0).getTime() - new Date(a.date || 0).getTime()));
+    setIsGenerating(false);
+    alert(`${newTransactions.length} mock transactions were successfully generated!`);
+
+    await loadAll();
+  }
+
   useEffect(() => { loadAll(); }, [startDate, endDate]);
 
   const filtered = useMemo(() => {
@@ -178,10 +226,16 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
         <main className="page space-y">
           {current === 'home' && (
             <>
-              <section className="card">
-                <h3>Bank connections</h3>
-                <p className="muted">Connect your CSAS (George) account.</p>
-                <button className="btn primary" onClick={startOauthCsas}>Connect CSAS (George)</button>
+              <section className="card space-y">
+                  <h3>Bank connections</h3>
+                  <div className="connection-row">
+                    <p className="muted" style={{ margin: 0 }}>Connect your CSAS (George) account.</p>
+                    <button className="btn primary" onClick={startOauthCsas}>Connect CSAS (George)</button>
+                  </div>
+                  <div className="connection-row">
+                    <p className="muted" style={{ margin: 0 }}>Generate data from a mock bank.</p>
+                    <button className="btn primary" onClick={() => setMockModalOpen(true)}>Connect Mock Bank</button>
+                  </div>
               </section>
 
               <section className="card">
@@ -267,7 +321,6 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                     <table className="table">
                       <thead>
                         <tr>
-                          <th>ID</th>
                           <th>Date</th>
                           <th style={{ textAlign: 'right' }}>Amount</th>
                           <th>Description</th>
@@ -277,7 +330,6 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                       <tbody>
                         {visible.map(t => (
                           <tr key={t.id}>
-                            <td>{t.id}</td>
                             <td>{t.date || ''}</td>
                             <td className="amount">{formatAmount(t.amount)}</td>
                             <td>{t.description || ''}</td>
@@ -322,6 +374,13 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
           )}
         </main>
       </div>
+        <MockBankModal
+          isOpen={isMockModalOpen}
+          isGenerating={isGenerating}
+          categories={categories}
+          onClose={() => setMockModalOpen(false)}
+          onGenerate={handleGenerateMockTransactions}
+        />
     </div>
   );
 }