Merge pull request #37 from dat515-2025/36-add-mock-databases-or-services-to-fetch-mocked-transactions

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,50 @@ 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;
+      }
+    }
+
+    setIsGenerating(false);
+    alert(`${newTransactions.length} mock transactions were successfully generated!`);
+
+    await loadAll();
+  }
+
   useEffect(() => { loadAll(); }, [startDate, endDate]);
 
   const filtered = useMemo(() => {
@@ -178,10 +225,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>
-                <p className="muted">Connect your CSAS (George) account.</p>
+                  <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 +320,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 +329,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 +373,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,100 @@
+// 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 parsedCount = parseInt(count, 10);
+    const parsedMinAmount = parseFloat(minAmount);
+    const parsedMaxAmount = parseFloat(maxAmount);
+    const parsedStartDate = new Date(startDate);
+    const parsedEndDate = new Date(endDate);
+
+    // Validation
+    if (
+      isNaN(parsedCount) || parsedCount <= 0 ||
+      isNaN(parsedMinAmount) || isNaN(parsedMaxAmount) ||
+      parsedMaxAmount < parsedMinAmount ||
+      isNaN(parsedStartDate.getTime()) || isNaN(parsedEndDate.getTime()) ||
+      parsedEndDate < parsedStartDate
+    ) {
+      alert(
+        "Please ensure:\n" +
+        "- Count is a positive number\n" +
+        "- Min and Max Amount are valid numbers, and Max >= Min\n" +
+        "- Start and End Date are valid, and End Date >= Start Date"
+      );
+      return;
+    }
+
+    const options: MockGenerationOptions = {
+      count: parsedCount,
+      minAmount: parsedMinAmount,
+      maxAmount: parsedMaxAmount,
+      startDate,
+      endDate,
+      categoryIds: selectedCategoryIds.map(Number),
+    };
+
+    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;
+}

7project/meetings/2025-10-16-meeting.md

@@ -8,7 +8,7 @@ Just copy the template below for each weekly meeting and fill in the details.
 
 ## Administrative Info
 
-- Date: 2025-10-08
+- Date: 2025-10-16
 - Attendees: Dejan Ribarovski, Lukas Trkan
 - Notetaker: Dejan Ribarovski
 

7project/meetings/2025-10-23-meeting.md

@@ -0,0 +1,54 @@
+# Weekly Meeting Notes
+
+- Group 8 - Personal finance tracker
+- Mentor: Jaychander
+
+Keep all meeting notes in the `meetings.md` file in your project folder.
+Just copy the template below for each weekly meeting and fill in the details.
+
+## Administrative Info
+
+- Date: 2025-10-23
+- Attendees: Dejan
+- Notetaker: Dejan
+
+## Progress Update (Before Meeting)
+
+Last 3 minutes of the meeting, summarize action items.
+
+- [x] OAuth (BankID)
+- [x] CI/CD fix
+- [X] Database local (multiple bank accounts)
+- [X] Add tests and set up github pipeline
+- [X] Frontend imporvment - user experience
+- [ ] make the report more clear - partly
+
+Summary of what has been accomplished since the last meeting in the following categories.
+
+### Coding
+Improved Frontend, added Mock Bank, fixed deployment, fixed OAuth(BankID) on production, added basic tests
+
+### Documentation
+Not much - just updated the work done
+
+## Questions and Topics for Discussion (Before Meeting)
+
+This was not prepared, I planned to do it right before meeting, but Jaychander needed to go somewhere earlier.
+
+1. Question 1
+2. Question 2
+3. Question 3
+
+## Discussion Notes (During Meeting)
+The tracker should not store the transactions in the database - security vulnerability.
+
+## Action Items for Next Week (During Meeting)
+
+Last 3 minutes of the meeting, summarize action items.
+
+- [ ] Dont store data in database (security) - Load it on login (from CSAS API and local database), load automatically with email
+- [ ] Go through the checklist
+- [ ] Look for possible APIs (like stocks or financial details whatever)
+- [ ] Report
+
+---