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">
+              <section className="card space-y">
-                <h3>Bank connections</h3>
+                  <h3>Bank connections</h3>
-                <p className="muted">Connect your CSAS (George) account.</p>
+                  <div className="connection-row">
-                <button className="btn primary" onClick={startOauthCsas}>Connect CSAS (George)</button>
+                    <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>
   );
 }

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

@@ -0,0 +1,80 @@
+// src/MockBankModal.tsx
+import { useState } from 'react';
+import { type Category } from '../api';
+
+// Define the shape of the generation options
+export interface MockGenerationOptions {
+  count: number;
+  minAmount: number;
+  maxAmount: number;
+  startDate: string;
+  endDate: string;
+  categoryIds: number[];
+}
+
+interface MockBankModalProps {
+  isOpen: boolean;
+  isGenerating: boolean;
+  categories: Category[]; // Pass in available categories
+  onClose: () => void;
+  onGenerate: (options: MockGenerationOptions) => void;
+}
+
+export default function MockBankModal({ isOpen, isGenerating, categories, onClose, onGenerate }: MockBankModalProps) {
+  // State for all the new form fields
+  const [count, setCount] = useState('10');
+  const [minAmount, setMinAmount] = useState('-200');
+  const [maxAmount, setMaxAmount] = useState('200');
+  const [startDate, setStartDate] = useState(() => new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]); // Default to one year ago
+  const [endDate, setEndDate] = useState(() => new Date().toISOString().split('T')[0]); // Default to today
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState<string[]>([]);
+
+  if (!isOpen) return null;
+
+  function handleGenerateClick() {
+    const options: MockGenerationOptions = {
+      count: parseInt(count, 10),
+      minAmount: parseFloat(minAmount),
+      maxAmount: parseFloat(maxAmount),
+      startDate,
+      endDate,
+      categoryIds: selectedCategoryIds.map(Number),
+    };
+
+    // Basic validation
+    if (!isNaN(options.count) && options.count > 0) {
+      onGenerate(options);
+    }
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <h3>Generate Mock Transactions</h3>
+        <p className="muted">
+          Customize the random transactions you'd like to import.
+        </p>
+        <div className="space-y">
+          <input className="input" type="number" value={count} onChange={(e) => setCount(e.target.value)} placeholder="Number of transactions" />
+          <div className="form-row" style={{ gridTemplateColumns: '1fr 1fr' }}>
+            <input className="input" type="number" value={minAmount} onChange={(e) => setMinAmount(e.target.value)} placeholder="Min amount" />
+            <input className="input" type="number" value={maxAmount} onChange={(e) => setMaxAmount(e.target.value)} placeholder="Max amount" />
+          </div>
+          <div className="form-row" style={{ gridTemplateColumns: '1fr 1fr' }}>
+            <input className="input" type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} placeholder="Earliest date" />
+            <input className="input" type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} placeholder="Latest date" />
+          </div>
+          <select multiple className="input" style={{ height: '120px' }} value={selectedCategoryIds} onChange={(e) => setSelectedCategoryIds(Array.from(e.target.selectedOptions, option => option.value))}>
+            {categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
+          </select>
+        </div>
+        <div className="actions" style={{ justifyContent: 'flex-end', marginTop: '16px' }}>
+          <button className="btn" onClick={onClose} disabled={isGenerating}>Cancel</button>
+          <button className="btn primary" onClick={handleGenerateClick} disabled={isGenerating}>
+            {isGenerating ? 'Generating...' : `Generate Transactions`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

7project/frontend/src/ui.css

@@ -122,3 +122,32 @@ body.auth-page #root {
 /* Utility */
 .muted { color: var(--muted); }
 .space-y > * + * { margin-top: 12px; }
+
+/* Modal mock bank */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--panel);
+  padding: 24px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  width: 100%;
+  max-width: 400px;
+}
+
+.connection-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}