wad-lab 1.2.2 → 1.2.4

package/templates/vue-banking-app/src/stores/bankStore.js

@@ -7,14 +7,14 @@ export const useBankStore = defineStore('bank', {
     accountType: 'Savings Account',
     balance: 5000,
     transactions: [
-      { id: 1, type: 'DEPOSIT', amount: 5000, balanceAfter: 5000, date: new Date().toLocaleDateString() }
+      { id: 1, type: 'DEPOSIT', amount: 5000, balanceAfter: 5000, note: 'Initial deposit', date: new Date().toLocaleDateString() }
     ]
   }),
   getters: {
     transactionCount: (state) => state.transactions.length
   },
   actions: {
-    deposit(amount) {
+    deposit(amount, note = '') {
       const val = parseFloat(amount)
       if (isNaN(val) || val <= 0) return { success: false, message: 'Invalid deposit amount' }
 
@@ -24,12 +24,13 @@ export const useBankStore = defineStore('bank', {
         type: 'DEPOSIT',
         amount: val,
         balanceAfter: this.balance,
+        note: note || 'Deposit',
         date: new Date().toLocaleDateString()
       })
       return { success: true, message: 'Deposit successful!' }
     },
 
-    withdraw(amount) {
+    withdraw(amount, note = '') {
       const val = parseFloat(amount)
       if (isNaN(val) || val <= 0) return { success: false, message: 'Invalid withdrawal amount' }
       if (val > this.balance) return { success: false, message: 'Insufficient balance!' }
@@ -40,9 +41,21 @@ export const useBankStore = defineStore('bank', {
         type: 'WITHDRAWAL',
         amount: val,
         balanceAfter: this.balance,
+        note: note || 'Withdrawal',
         date: new Date().toLocaleDateString()
       })
       return { success: true, message: 'Withdrawal successful!' }
+    },
+
+    patchTransaction(id, partial) {
+      const item = this.transactions.find(t => t.id === id)
+      if (item) {
+        Object.assign(item, partial)
+      }
+    },
+
+    deleteTransaction(id) {
+      this.transactions = this.transactions.filter(t => t.id !== id)
     }
   }
 })

package/templates/vue-banking-app/src/views/DashboardView.vue

@@ -1,88 +1,40 @@
 <script setup>
 import { useBankStore } from '../stores/bankStore'
+import AccountOverview from '../components/AccountOverview.vue'
+import TransactionTable from '../components/TransactionTable.vue'
 
 const bank = useBankStore()
 </script>
 
 <template>
-  <div class="dashboard-card">
-    <h2>Account Overview</h2>
-    <div class="info-row">
-      <span>Account Holder:</span>
-      <strong>{{ bank.accountHolder }}</strong>
-    </div>
-    <div class="info-row">
-      <span>Account Number:</span>
-      <strong>{{ bank.accountNumber }}</strong>
-    </div>
-    <div class="info-row">
-      <span>Account Type:</span>
-      <strong>{{ bank.accountType }}</strong>
-    </div>
-    <div class="balance-box">
-      <span>Available Balance</span>
-      <h3 class="balance-val">${{ bank.balance.toFixed(2) }}</h3>
-    </div>
-
-    <div class="quick-actions">
-      <router-link to="/transaction" class="btn btn-primary">Deposit / Withdraw</router-link>
-      <router-link to="/statement" class="btn btn-secondary">View Statement ({{ bank.transactionCount }})</router-link>
+  <div class="dashboard-grid">
+    <AccountOverview
+      :account-holder="bank.accountHolder"
+      :account-number="bank.accountNumber"
+      :account-type="bank.accountType"
+      :balance="bank.balance"
+    />
+
+    <div class="recent-tx">
+      <h3>Recent Transactions</h3>
+      <TransactionTable
+        :transactions="bank.transactions.slice(0, 5)"
+        @patch="({ id, note }) => bank.patchTransaction(id, { note })"
+        @delete="(id) => bank.deleteTransaction(id)"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
-.dashboard-card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  background-color: #fafafa;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-}
-
-.balance-box {
-  margin: 20px 0;
-  padding: 15px;
-  background-color: #e8f8f5;
-  border: 1px solid #a3e4d7;
-  border-radius: 6px;
-  text-align: center;
-}
-
-.balance-val {
-  color: #16a085;
-  font-size: 28px;
-  margin: 5px 0 0 0;
-}
-
-.quick-actions {
+.dashboard-grid {
   display: flex;
-  gap: 10px;
-  margin-top: 15px;
-}
-
-.btn {
-  flex: 1;
-  text-align: center;
-  padding: 10px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.btn-primary {
-  background-color: #2980b9;
-  color: white;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.btn-secondary {
-  background-color: #7f8c8d;
-  color: white;
+.recent-tx h3 {
+  font-size: 16px;
+  margin-bottom: 10px;
 }
 </style>

package/templates/vue-banking-app/src/views/StatementView.vue

@@ -1,171 +1,24 @@
 <script setup>
-import { computed } from 'vue'
 import { useBankStore } from '../stores/bankStore'
+import TransactionTable from '../components/TransactionTable.vue'
 
 const bank = useBankStore()
-
-const totalDeposits = computed(() => {
-  return bank.transactions
-    .filter(tx => tx.type === 'DEPOSIT')
-    .reduce((sum, tx) => sum + tx.amount, 0)
-})
-
-const totalWithdrawals = computed(() => {
-  return bank.transactions
-    .filter(tx => tx.type === 'WITHDRAWAL')
-    .reduce((sum, tx) => sum + tx.amount, 0)
-})
 </script>
 
 <template>
-  <div class="statement-card">
-    <div class="header-row">
-      <h2>Account Statement</h2>
-      <router-link to="/" class="btn btn-back">Back to Dashboard</router-link>
-    </div>
-
-    <div class="summary-cards">
-      <div class="summary-box deposits">
-        <span>Total Deposits</span>
-        <strong>${{ totalDeposits.toFixed(2) }}</strong>
-      </div>
-      <div class="summary-box withdrawals">
-        <span>Total Withdrawals</span>
-        <strong>${{ totalWithdrawals.toFixed(2) }}</strong>
-      </div>
-      <div class="summary-box balance">
-        <span>Current Balance</span>
-        <strong>${{ bank.balance.toFixed(2) }}</strong>
-      </div>
-    </div>
-
-    <div class="table-container">
-      <table class="statement-table" v-if="bank.transactions.length">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Type</th>
-            <th>Amount</th>
-            <th>Balance After</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="tx in bank.transactions" :key="tx.id">
-            <td>{{ tx.date }}</td>
-            <td :class="tx.type === 'DEPOSIT' ? 'type-deposit' : 'type-withdrawal'">{{ tx.type }}</td>
-            <td>${{ tx.amount.toFixed(2) }}</td>
-            <td>${{ tx.balanceAfter.toFixed(2) }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else class="empty-state">No transactions recorded yet.</p>
-    </div>
+  <div class="statement-view">
+    <h2>Account Statement</h2>
+    <TransactionTable
+      :transactions="bank.transactions"
+      @patch="({ id, note }) => bank.patchTransaction(id, { note })"
+      @delete="(id) => bank.deleteTransaction(id)"
+    />
   </div>
 </template>
 
 <style scoped>
-.statement-card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  background-color: #fafafa;
-}
-
-.header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.summary-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.summary-box {
-  padding: 12px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.summary-box.deposits {
-  background-color: #e8f8f5;
-  border: 1px solid #a3e4d7;
-  color: #16a085;
-}
-
-.summary-box.withdrawals {
-  background-color: #fdebd0;
-  border: 1px solid #f8c471;
-  color: #d35400;
-}
-
-.summary-box.balance {
-  background-color: #ebf5fb;
-  border: 1px solid #aed6f1;
-  color: #2980b9;
-}
-
-.summary-box span {
-  font-size: 13px;
-  color: #555;
-}
-
-.summary-box strong {
-  font-size: 18px;
-}
-
-.table-container {
-  overflow-x: auto;
-}
-
-.statement-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.statement-table th,
-.statement-table td {
-  padding: 10px;
-  text-align: left;
-  border-bottom: 1px solid #eee;
-}
-
-.statement-table th {
-  background-color: #f2f2f2;
-}
-
-.type-deposit {
-  color: #27ae60;
-  font-weight: bold;
-}
-
-.type-withdrawal {
-  color: #c0392b;
-  font-weight: bold;
-}
-
-.btn {
-  padding: 8px 14px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.btn-back {
-  background-color: #7f8c8d;
-  color: white;
-}
-
-.empty-state {
-  text-align: center;
-  color: #777;
-  padding: 20px;
+.statement-view h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
 }
 </style>

package/templates/vue-banking-app/src/views/TransactionFormView.vue

@@ -1,144 +1,46 @@
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { useBankStore } from '../stores/bankStore'
+import TransactionForm from '../components/TransactionForm.vue'
 
 const bank = useBankStore()
-const router = useRouter()
-
-const txType = ref('DEPOSIT')
-const amount = ref('')
-const feedback = ref({ text: '', isError: false })
-
-function handleSubmit() {
-  feedback.value = { text: '', isError: false }
+const statusMessage = ref('')
 
+function handleTransaction({ type, amount, note }) {
   let res
-  if (txType.value === 'DEPOSIT') {
-    res = bank.deposit(amount.value)
+  if (type === 'DEPOSIT') {
+    res = bank.deposit(amount, note)
   } else {
-    res = bank.withdraw(amount.value)
-  }
-
-  if (res.success) {
-    feedback.value = { text: res.message, isError: false }
-    amount.value = ''
-    setTimeout(() => {
-      router.push('/statement')
-    }, 1000)
-  } else {
-    feedback.value = { text: res.message, isError: true }
+    res = bank.withdraw(amount, note)
   }
+  statusMessage.value = res.message
 }
 </script>
 
 <template>
-  <div class="tx-card">
-    <h2>Make a Transaction</h2>
-    <p>Current Balance: <strong>${{ bank.balance.toFixed(2) }}</strong></p>
-
-    <div v-if="feedback.text" :class="['alert', feedback.isError ? 'alert-danger' : 'alert-success']">
-      {{ feedback.text }}
-    </div>
-
-    <form @submit.prevent="handleSubmit" class="tx-form">
-      <div class="form-group">
-        <label>Transaction Type:</label>
-        <div class="radio-row">
-          <label>
-            <input type="radio" value="DEPOSIT" v-model="txType" /> Deposit
-          </label>
-          <label>
-            <input type="radio" value="WITHDRAWAL" v-model="txType" /> Withdrawal
-          </label>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="amt">Amount ($):</label>
-        <input id="amt" type="number" step="0.01" min="1" v-model="amount" placeholder="e.g. 250.00" required />
-      </div>
-
-      <div class="btn-row">
-        <button type="submit" class="btn btn-submit">Confirm {{ txType }}</button>
-        <router-link to="/" class="btn btn-back">Cancel</router-link>
-      </div>
-    </form>
+  <div class="tx-view">
+    <h2>Record New Transaction</h2>
+    <div v-if="statusMessage" class="status-box">{{ statusMessage }}</div>
+    <TransactionForm @submit-transaction="handleTransaction" />
   </div>
 </template>
 
 <style scoped>
-.tx-card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  background-color: #fafafa;
-}
-
-.alert {
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 15px;
-}
-
-.alert-success {
-  background-color: #d4edda;
-  color: #155724;
-}
-
-.alert-danger {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-.tx-form {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.radio-row {
-  display: flex;
-  gap: 20px;
-}
-
-input[type="number"] {
-  padding: 8px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.btn-row {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
-}
-
-.btn {
-  padding: 10px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  text-decoration: none;
-  font-weight: bold;
+.tx-view {
+  max-width: 480px;
 }
 
-.btn-submit {
-  background-color: #27ae60;
-  color: white;
+.tx-view h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
 }
 
-.btn-back {
-  background-color: #95a5a6;
-  color: white;
-  display: inline-flex;
-  align-items: center;
+.status-box {
+  padding: 10px 14px;
+  background: #f0fdf4;
+  color: #166534;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  border: 1px solid #bbf7d0;
 }
 </style>