wad-lab 1.2.2 → 1.2.4

package/templates/vue-hospital-portal/src/views/PatientListView.vue

@@ -1,315 +1,25 @@
 <script setup>
-import { ref, computed } from 'vue'
 import { useHospitalStore } from '../stores/hospitalStore'
+import PatientTable from '../components/PatientTable.vue'
 
 const hospital = useHospitalStore()
-const filterBed = ref('ALL')
-const searchQuery = ref('')
-const notice = ref('')
-
-const filteredPatients = computed(() => {
-  return hospital.patients.filter((p) => {
-    const matchesBed = filterBed.value === 'ALL' || p.bedType === filterBed.value
-    const matchesSearch = p.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      p.doctor.toLowerCase().includes(searchQuery.value.toLowerCase())
-    return matchesBed && matchesSearch
-  })
-})
-
-function handleDischarge(id, name) {
-  hospital.dischargePatient(id)
-  notice.value = `Patient ${name} has been discharged.`
-  setTimeout(() => {
-    notice.value = ''
-  }, 3000)
-}
 </script>
 
 <template>
   <div class="patient-list-page">
-    <div class="header-row">
-      <div>
-        <h2>Admitted Patients Directory</h2>
-        <p class="subtitle">Currently admitted: {{ hospital.totalPatients }} patient(s)</p>
-      </div>
-      <router-link to="/" class="btn-admit-link">+ Admit New Patient</router-link>
-    </div>
-
-    <div v-if="notice" class="alert alert-info">
-      {{ notice }}
-    </div>
-
-    <div class="filter-bar">
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="Search patient or doctor..."
-        class="search-input"
-      />
-      <div class="filter-tabs">
-        <button
-          :class="['tab-btn', filterBed === 'ALL' ? 'tab-active' : '']"
-          @click="filterBed = 'ALL'"
-        >
-          All ({{ hospital.patients.length }})
-        </button>
-        <button
-          :class="['tab-btn', filterBed === 'General Ward' ? 'tab-active' : '']"
-          @click="filterBed = 'General Ward'"
-        >
-          General Ward
-        </button>
-        <button
-          :class="['tab-btn', filterBed === 'ICU' ? 'tab-active' : '']"
-          @click="filterBed = 'ICU'"
-        >
-          ICU
-        </button>
-      </div>
-    </div>
-
-    <div v-if="filteredPatients.length === 0" class="empty-state">
-      <p>No admitted patients found matching current criteria.</p>
-    </div>
-
-    <div v-else class="table-container">
-      <table class="patient-table">
-        <thead>
-          <tr>
-            <th>Patient</th>
-            <th>Age</th>
-            <th>Bed Type</th>
-            <th>Doctor</th>
-            <th>Vitals (BP / HR / Temp)</th>
-            <th>Risk Level</th>
-            <th>Bill ($)</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="patient in filteredPatients" :key="patient.id">
-            <td class="font-bold">{{ patient.name }}</td>
-            <td>{{ patient.age }} yrs</td>
-            <td>
-              <span :class="['bed-badge', patient.bedType === 'ICU' ? 'bed-icu' : 'bed-general']">
-                {{ patient.bedType }}
-              </span>
-            </td>
-            <td>{{ patient.doctor }}</td>
-            <td>
-              <div class="vitals-chip">
-                <span>BP: {{ patient.vitals.bp }}</span>
-                <span>HR: {{ patient.vitals.hr }} bpm</span>
-                <span>{{ patient.vitals.temp }}°F</span>
-              </div>
-            </td>
-            <td>
-              <span :class="['risk-badge', 'risk-' + (patient.risk ? patient.risk.toLowerCase() : 'normal')]">
-                {{ patient.risk || 'Normal' }}
-              </span>
-            </td>
-            <td class="bill-cell">${{ patient.bill }}</td>
-            <td>
-              <button
-                class="btn-discharge"
-                @click="handleDischarge(patient.id, patient.name)"
-              >
-                Discharge
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <h2>Admitted Patients Directory</h2>
+    <PatientTable
+      :patients="hospital.patients"
+      @patch="({ id, vitals }) => hospital.patchPatient(id, { vitals })"
+      @settle="(id) => hospital.settlePayment(id)"
+      @discharge="(id) => hospital.dischargePatient(id)"
+    />
   </div>
 </template>
 
 <style scoped>
-.patient-list-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-h2 {
-  margin: 0;
-  font-size: 20px;
-  color: #1a202c;
-}
-
-.subtitle {
-  margin: 4px 0 0 0;
-  font-size: 13px;
-  color: #718096;
-}
-
-.btn-admit-link {
-  background-color: #2b6cb0;
-  color: white;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 8px 14px;
-  border-radius: 4px;
-}
-
-.alert-info {
-  background-color: #ebf8ff;
-  color: #2b6cb0;
-  border: 1px solid #bee3f8;
-  padding: 10px 14px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.filter-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 15px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.search-input {
-  flex: 1;
-  min-width: 200px;
-  padding: 8px 12px;
-  border: 1px solid #cbd5e0;
-  border-radius: 5px;
-  font-size: 14px;
-}
-
-.filter-tabs {
-  display: flex;
-  gap: 6px;
-}
-
-.tab-btn {
-  padding: 6px 12px;
-  border: 1px solid #cbd5e0;
-  background-color: #ffffff;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  color: #4a5568;
-}
-
-.tab-active {
-  background-color: #2b6cb0;
-  color: #ffffff;
-  border-color: #2b6cb0;
-}
-
-.empty-state {
-  background-color: #ffffff;
-  padding: 30px;
-  text-align: center;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  color: #718096;
-}
-
-.table-container {
-  overflow-x: auto;
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-}
-
-.patient-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  text-align: left;
-}
-
-.patient-table th {
-  background-color: #f7fafc;
-  color: #4a5568;
-  font-weight: 700;
-  padding: 12px 14px;
-  border-bottom: 2px solid #e2e8f0;
-}
-
-.patient-table td {
-  padding: 12px 14px;
-  border-bottom: 1px solid #edf2f7;
-  color: #2d3748;
-}
-
-.font-bold {
-  font-weight: 600;
-}
-
-.bed-badge {
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 8px;
-  border-radius: 12px;
-}
-
-.bed-general {
-  background-color: #e2e8f0;
-  color: #2d3748;
-}
-
-.bed-icu {
-  background-color: #feebc8;
-  color: #c05621;
-}
-
-.vitals-chip {
-  display: flex;
-  gap: 8px;
-  font-size: 12px;
-  color: #4a5568;
-}
-
-.risk-badge {
-  font-size: 11px;
-  font-weight: 700;
-  padding: 3px 8px;
-  border-radius: 12px;
-  text-transform: uppercase;
-}
-
-.risk-high {
-  background-color: #fed7d7;
-  color: #9b2c2c;
-}
-
-.risk-moderate {
-  background-color: #feebc8;
-  color: #c05621;
-}
-
-.risk-normal {
-  background-color: #c6f6d5;
-  color: #22543d;
-}
-
-.bill-cell {
-  font-weight: 600;
-}
-
-.btn-discharge {
-  background-color: #e53e3e;
-  color: #ffffff;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.btn-discharge:hover {
-  background-color: #c53030;
+.patient-list-page h2 {
+  font-size: 22px;
+  margin-bottom: 16px;
 }
 </style>

package/templates/vue-library-system/src/components/BookForm.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { reactive } from 'vue'
+
+const emit = defineEmits(['submit-book'])
+
+const form = reactive({
+  title: '',
+  author: '',
+  isbn: '',
+  category: 'Computer Science',
+  copies: 1
+})
+
+const categories = ['Computer Science', 'Web Dev', 'Algorithms', 'Fiction', 'Science']
+
+function handleSubmit() {
+  if (!form.title.trim() || !form.author.trim() || !form.isbn.trim()) return
+  emit('submit-book', {
+    title: form.title.trim(),
+    author: form.author.trim(),
+    isbn: form.isbn.trim(),
+    category: form.category,
+    copies: Number(form.copies) || 1
+  })
+  form.title = ''
+  form.author = ''
+  form.isbn = ''
+  form.copies = 1
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="book-form">
+    <h3>Add New Book</h3>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="bk-title">Book Title</label>
+        <input id="bk-title" v-model="form.title" required placeholder="Clean Architecture" />
+      </div>
+
+      <div class="form-group">
+        <label for="bk-author">Author</label>
+        <input id="bk-author" v-model="form.author" required placeholder="Robert C. Martin" />
+      </div>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="bk-isbn">ISBN</label>
+        <input id="bk-isbn" v-model="form.isbn" required placeholder="978-0134494166" />
+      </div>
+
+      <div class="form-group">
+        <label for="bk-cat">Category</label>
+        <select id="bk-cat" v-model="form.category">
+          <option v-for="c in categories" :key="c" :value="c">{{ c }}</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bk-copies">Copies</label>
+        <input id="bk-copies" v-model.number="form.copies" type="number" min="1" required />
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Add Book</button>
+  </form>
+</template>
+
+<style scoped>
+.book-form {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.book-form h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.form-group {
+  flex: 1;
+  min-width: 140px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.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: 6px;
+  font-size: 13px;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+</style>

package/templates/vue-library-system/src/components/BookTable.vue

@@ -0,0 +1,112 @@
+<script setup>
+defineProps({
+  books: { type: Array, required: true }
+})
+
+const emit = defineEmits(['borrow', 'patch', 'delete'])
+
+function handlePatchCopies(b) {
+  const newCopies = prompt('Enter new copy count for ' + b.title + ':', b.copies)
+  if (newCopies !== null && !isNaN(Number(newCopies))) {
+    emit('patch', { id: b.id, copies: Number(newCopies) })
+  }
+}
+</script>
+
+<template>
+  <div class="table-container">
+    <table class="book-table">
+      <thead>
+        <tr>
+          <th>ISBN</th>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Category</th>
+          <th>Copies</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="books.length === 0">
+          <td colspan="6" class="empty">No books available.</td>
+        </tr>
+        <tr v-for="b in books" :key="b.id">
+          <td><code>{{ b.isbn }}</code></td>
+          <td><strong>{{ b.title }}</strong></td>
+          <td>{{ b.author }}</td>
+          <td>{{ b.category }}</td>
+          <td>{{ b.copies }}</td>
+          <td class="action-cell">
+            <button
+              type="button"
+              class="btn btn-borrow"
+              :disabled="b.copies <= 0"
+              @click="emit('borrow', b)"
+            >
+              Borrow
+            </button>
+            <button type="button" class="btn btn-patch" @click="handlePatchCopies(b)">Patch</button>
+            <button type="button" class="btn btn-delete" @click="emit('delete', b.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.book-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+code {
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-borrow { background: #0284c7; color: #fff; }
+.btn-borrow:disabled { background: #cbd5e1; cursor: not-allowed; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-delete { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>

package/templates/vue-library-system/src/components/BorrowModal.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  book: { type: Object, default: null },
+  members: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['close', 'confirm'])
+const selectedMember = ref('')
+
+function handleConfirm() {
+  if (!selectedMember.value || !props.book) return
+  emit('confirm', { bookId: props.book.id, memberId: selectedMember.value })
+  selectedMember.value = ''
+}
+</script>
+
+<template>
+  <div v-if="show && book" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>Borrow Book: {{ book.title }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="borrow-member">Select Member</label>
+          <select id="borrow-member" v-model="selectedMember">
+            <option value="" disabled>Select a library member...</option>
+            <option v-for="m in members" :key="m.id" :value="m.id">
+              {{ m.name }} ({{ m.id }})
+            </option>
+          </select>
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="button" class="btn btn-primary" :disabled="!selectedMember" @click="handleConfirm">
+            Confirm Loan
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 15px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>