wad-lab 1.0.7 → 1.0.8

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

@@ -0,0 +1,88 @@
+<script setup>
+import { useBankStore } from '../stores/bankStore'
+
+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>
+  </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 {
+  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;
+}
+
+.btn-secondary {
+  background-color: #7f8c8d;
+  color: white;
+}
+</style>

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

@@ -0,0 +1,171 @@
+<script setup>
+import { computed } from 'vue'
+import { useBankStore } from '../stores/bankStore'
+
+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>
+</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;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useBankStore } from '../stores/bankStore'
+
+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 }
+
+  let res
+  if (txType.value === 'DEPOSIT') {
+    res = bank.deposit(amount.value)
+  } 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 }
+  }
+}
+</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>
+</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;
+}
+
+.btn-submit {
+  background-color: #27ae60;
+  color: white;
+}
+
+.btn-back {
+  background-color: #95a5a6;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/templates/vue-banking-app/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-employee-system/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Employee Management System</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-employee-system/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-employee-system",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}