wad-lab 1.0.8 → 1.1.0

package/templates/vue-library-system/src/views/BookCatalogView.vue

@@ -0,0 +1,432 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useLibraryStore } from '../stores/libraryStore'
+
+const libraryStore = useLibraryStore()
+
+const searchQuery = ref('')
+const selectedCategory = ref('')
+const selectedMemberId = ref({})
+const notification = ref('')
+
+const newBook = ref({
+  title: '',
+  author: '',
+  isbn: '',
+  category: 'Computer Science',
+  copies: 1
+})
+
+const categories = ['Computer Science', 'Web Dev', 'Algorithms', 'Fiction', 'Science']
+
+const filteredBooks = computed(() => {
+  return libraryStore.books.filter((book) => {
+    const matchesSearch =
+      book.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      book.author.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      book.isbn.includes(searchQuery.value)
+    const matchesCategory =
+      !selectedCategory.value || book.category === selectedCategory.value
+    return matchesSearch && matchesCategory
+  })
+})
+
+function handleIssueBook(bookId) {
+  const memberId = selectedMemberId.value[bookId]
+  if (!memberId) {
+    notification.value = 'Please select a member before issuing.'
+    return
+  }
+  const success = libraryStore.issueBook(bookId, memberId)
+  if (success) {
+    notification.value = 'Book successfully issued!'
+    selectedMemberId.value[bookId] = ''
+  } else {
+    notification.value = 'Unable to issue book. Check copy availability.'
+  }
+  setTimeout(() => {
+    notification.value = ''
+  }, 3000)
+}
+
+function handleAddBook() {
+  if (!newBook.value.title || !newBook.value.author || !newBook.value.isbn) {
+    return
+  }
+  libraryStore.books.push({
+    id: Date.now(),
+    title: newBook.value.title,
+    author: newBook.value.author,
+    isbn: newBook.value.isbn,
+    category: newBook.value.category,
+    copies: Number(newBook.value.copies) || 1
+  })
+  newBook.value = {
+    title: '',
+    author: '',
+    isbn: '',
+    category: 'Computer Science',
+    copies: 1
+  }
+  notification.value = 'New book added to catalog.'
+  setTimeout(() => {
+    notification.value = ''
+  }, 3000)
+}
+</script>
+
+<template>
+  <div class="catalog-page">
+    <div class="stats-bar">
+      <div class="stat-card">
+        <span class="stat-num">{{ libraryStore.books.length }}</span>
+        <span class="stat-label">Total Titles</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-num">{{ libraryStore.availableBooks.length }}</span>
+        <span class="stat-label">Available Titles</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-num">{{ libraryStore.activeLoansCount }}</span>
+        <span class="stat-label">Active Loans</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-num">${{ libraryStore.totalFines }}</span>
+        <span class="stat-label">Accrued Fines</span>
+      </div>
+    </div>
+
+    <div v-if="notification" class="alert-box">
+      {{ notification }}
+    </div>
+
+    <div class="controls-row">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search title, author, or ISBN..."
+        class="search-input"
+      />
+      <select v-model="selectedCategory" class="filter-select">
+        <option value="">All Categories</option>
+        <option v-for="cat in categories" :key="cat" :value="cat">
+          {{ cat }}
+        </option>
+      </select>
+    </div>
+
+    <div class="table-card">
+      <h2>Book Inventory</h2>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Author</th>
+            <th>ISBN</th>
+            <th>Category</th>
+            <th>Copies</th>
+            <th>Availability</th>
+            <th>Issue Book</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="book in filteredBooks" :key="book.id">
+            <td>#{{ book.id }}</td>
+            <td class="font-bold">{{ book.title }}</td>
+            <td>{{ book.author }}</td>
+            <td><code>{{ book.isbn }}</code></td>
+            <td><span class="tag">{{ book.category }}</span></td>
+            <td>
+              <span class="copies-count" :class="{ 'zero-copies': book.copies === 0 }">
+                {{ book.copies }}
+              </span>
+            </td>
+            <td>
+              <span :class="['status-badge', book.copies > 0 ? 'in-stock' : 'out-stock']">
+                {{ book.copies > 0 ? 'In Stock' : 'Out of Stock' }}
+              </span>
+            </td>
+            <td>
+              <div class="issue-controls">
+                <select v-model="selectedMemberId[book.id]" class="member-select" :disabled="book.copies === 0">
+                  <option value="" disabled selected>Select Member</option>
+                  <option v-for="member in libraryStore.members" :key="member.id" :value="member.id">
+                    {{ member.name }} ({{ member.id }})
+                  </option>
+                </select>
+                <button
+                  class="btn-issue"
+                  :disabled="book.copies === 0 || !selectedMemberId[book.id]"
+                  @click="handleIssueBook(book.id)"
+                >
+                  Issue
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="filteredBooks.length === 0">
+            <td colspan="8" class="text-center">No books match your criteria.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="form-card">
+      <h3>Add New Book to Inventory</h3>
+      <form class="add-form" @submit.prevent="handleAddBook">
+        <div class="form-group">
+          <label>Book Title</label>
+          <input v-model="newBook.title" type="text" required placeholder="e.g. Design Patterns" />
+        </div>
+        <div class="form-group">
+          <label>Author</label>
+          <input v-model="newBook.author" type="text" required placeholder="e.g. Gang of Four" />
+        </div>
+        <div class="form-group">
+          <label>ISBN</label>
+          <input v-model="newBook.isbn" type="text" required placeholder="e.g. 978-0201633610" />
+        </div>
+        <div class="form-group">
+          <label>Category</label>
+          <select v-model="newBook.category">
+            <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Copies</label>
+          <input v-model.number="newBook.copies" type="number" min="1" required />
+        </div>
+        <button type="submit" class="btn-submit">Add Book</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.catalog-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 15px;
+}
+
+.stat-card {
+  background: white;
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-num {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 4px;
+}
+
+.alert-box {
+  background-color: #e0f2fe;
+  color: #0369a1;
+  border: 1px solid #bae6fd;
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.controls-row {
+  display: flex;
+  gap: 12px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.filter-select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+}
+
+.table-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 20px;
+  overflow-x: auto;
+}
+
+.table-card h2 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  color: #1e293b;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  text-align: left;
+}
+
+.data-table th,
+.data-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.data-table th {
+  background-color: #f8fafc;
+  color: #475569;
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.tag {
+  background-color: #f1f5f9;
+  color: #475569;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.copies-count {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.copies-count.zero-copies {
+  color: #ef4444;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-badge.in-stock {
+  background-color: #dcfce7;
+  color: #166534;
+}
+
+.status-badge.out-stock {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.issue-controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.member-select {
+  padding: 6px 8px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 13px;
+  max-width: 150px;
+}
+
+.btn-issue {
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-issue:disabled {
+  background-color: #94a3b8;
+  cursor: not-allowed;
+}
+
+.text-center {
+  text-align: center;
+  color: #64748b;
+  padding: 20px 0;
+}
+
+.form-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 20px;
+}
+
+.form-card h3 {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  color: #1e293b;
+}
+
+.add-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn-submit {
+  background-color: #0f172a;
+  color: white;
+  border: none;
+  padding: 9px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-submit:hover {
+  background-color: #1e293b;
+}
+</style>

package/templates/vue-library-system/src/views/LoanManagerView.vue

@@ -0,0 +1,296 @@
+<script setup>
+import { ref } from 'vue'
+import { useLibraryStore } from '../stores/libraryStore'
+
+const libraryStore = useLibraryStore()
+
+const daysLateMap = ref({})
+const message = ref('')
+
+function handleReturn(recordId) {
+  const daysLate = daysLateMap.value[recordId] || 0
+  const success = libraryStore.returnBook(recordId, daysLate)
+  if (success) {
+    const fineCalculated = Math.max(0, Number(daysLate) || 0) * 2
+    if (fineCalculated > 0) {
+      message.value = `Book returned with ${daysLate} day(s) overdue. Fine assessed: $${fineCalculated}.`
+    } else {
+      message.value = 'Book returned on time. No fine assessed.'
+    }
+  }
+  setTimeout(() => {
+    message.value = ''
+  }, 4000)
+}
+</script>
+
+<template>
+  <div class="loans-page">
+    <div class="stats-bar">
+      <div class="stat-card">
+        <span class="stat-num">{{ libraryStore.activeLoansCount }}</span>
+        <span class="stat-label">Active Loans</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-num">{{ libraryStore.borrowedRecords.length }}</span>
+        <span class="stat-label">Total Loan Records</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-num fine-text">${{ libraryStore.totalFines }}</span>
+        <span class="stat-label">Total Fines Collected</span>
+      </div>
+    </div>
+
+    <div v-if="message" class="alert-box">
+      {{ message }}
+    </div>
+
+    <div class="table-card">
+      <div class="card-header">
+        <h2>Loan Records & Fine Calculation</h2>
+        <span class="rate-badge">Rate: $2.00 / day overdue</span>
+      </div>
+
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Loan ID</th>
+            <th>Member ID</th>
+            <th>Book Title</th>
+            <th>Issue Date</th>
+            <th>Due Date</th>
+            <th>Status</th>
+            <th>Fine Assessed</th>
+            <th>Days Late</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="record in libraryStore.borrowedRecords"
+            :key="record.id"
+            :class="{ 'row-returned': record.returned }"
+          >
+            <td>#{{ record.id }}</td>
+            <td><code>{{ record.memberId }}</code></td>
+            <td class="font-bold">{{ record.bookTitle }}</td>
+            <td>{{ record.issueDate }}</td>
+            <td>{{ record.returnDue }}</td>
+            <td>
+              <span :class="['status-badge', record.returned ? 'returned' : 'active']">
+                {{ record.returned ? 'Returned' : 'Active' }}
+              </span>
+            </td>
+            <td>
+              <span :class="['fine-badge', record.fine > 0 ? 'has-fine' : 'zero-fine']">
+                ${{ record.fine }}
+              </span>
+            </td>
+            <td>
+              <template v-if="!record.returned">
+                <input
+                  v-model.number="daysLateMap[record.id]"
+                  type="number"
+                  min="0"
+                  placeholder="0"
+                  class="days-input"
+                />
+              </template>
+              <template v-else>
+                <span class="text-muted">-</span>
+              </template>
+            </td>
+            <td>
+              <button
+                v-if="!record.returned"
+                class="btn-return"
+                @click="handleReturn(record.id)"
+              >
+                Return Book
+              </button>
+              <span v-else class="text-muted">Completed</span>
+            </td>
+          </tr>
+          <tr v-if="libraryStore.borrowedRecords.length === 0">
+            <td colspan="9" class="text-center">No loan records available.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loans-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 15px;
+}
+
+.stat-card {
+  background: white;
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-num {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.stat-num.fine-text {
+  color: #b91c1c;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 4px;
+}
+
+.alert-box {
+  background-color: #eff6ff;
+  color: #1e40af;
+  border: 1px solid #bfdbfe;
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.table-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 20px;
+  overflow-x: auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #1e293b;
+}
+
+.rate-badge {
+  background-color: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  text-align: left;
+}
+
+.data-table th,
+.data-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.data-table th {
+  background-color: #f8fafc;
+  color: #475569;
+  font-weight: 600;
+}
+
+.row-returned {
+  background-color: #fafafa;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-badge.active {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.status-badge.returned {
+  background-color: #e2e8f0;
+  color: #475569;
+}
+
+.fine-badge {
+  display: inline-block;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.fine-badge.has-fine {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+
+.fine-badge.zero-fine {
+  color: #64748b;
+}
+
+.days-input {
+  width: 60px;
+  padding: 4px 6px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.btn-return {
+  background-color: #10b981;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.btn-return:hover {
+  background-color: #059669;
+}
+
+.text-muted {
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.text-center {
+  text-align: center;
+  color: #64748b;
+  padding: 20px 0;
+}
+</style>