wad-lab 1.0.8 → 1.1.0

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

@@ -0,0 +1,315 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useHospitalStore } from '../stores/hospitalStore'
+
+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>
+  </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;
+}
+</style>

package/templates/vue-hospital-portal/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-library-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>Vue Library System</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,20 @@
+{
+  "name": "vue-library-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",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-library-system/src/App.vue

@@ -0,0 +1,91 @@
+<script setup>
+</script>
+
+<template>
+  <div class="app-layout">
+    <header class="app-header">
+      <div class="brand">
+        <h1 class="brand-title">Library Management System</h1>
+      </div>
+      <nav class="nav-links">
+        <router-link to="/">Catalog</router-link>
+        <router-link to="/members">Members</router-link>
+        <router-link to="/loans">Issue/Return Loans</router-link>
+      </nav>
+    </header>
+
+    <main class="content-container">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: #1e293b;
+  background-color: #f1f5f9;
+}
+</style>
+
+<style scoped>
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  background-color: #0f172a;
+  color: white;
+  padding: 16px 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #1e293b;
+}
+
+.brand-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.nav-links {
+  display: flex;
+  gap: 12px;
+}
+
+.nav-links a {
+  color: #94a3b8;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 14px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.nav-links a:hover {
+  color: #f8fafc;
+  background-color: #1e293b;
+}
+
+.nav-links a.router-link-active {
+  color: white;
+  background-color: #2563eb;
+}
+
+.content-container {
+  max-width: 1000px;
+  width: 100%;
+  margin: 28px auto;
+  padding: 0 20px;
+}
+</style>

package/templates/vue-library-system/src/main.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

package/templates/vue-library-system/src/router/index.js

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import BookCatalogView from '../views/BookCatalogView.vue'
+import MembershipView from '../views/MembershipView.vue'
+import LoanManagerView from '../views/LoanManagerView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Catalog',
+    component: BookCatalogView
+  },
+  {
+    path: '/members',
+    name: 'Members',
+    component: MembershipView
+  },
+  {
+    path: '/loans',
+    name: 'Loans',
+    component: LoanManagerView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-library-system/src/stores/libraryStore.js

@@ -0,0 +1,87 @@
+import { defineStore } from 'pinia'
+
+export const useLibraryStore = defineStore('library', {
+  state: () => ({
+    books: [
+      { id: 1, title: 'Clean Code', author: 'Robert C. Martin', isbn: '978-0132350884', copies: 3, category: 'Computer Science' },
+      { id: 2, title: 'JavaScript: The Good Parts', author: 'Douglas Crockford', isbn: '978-0596517748', copies: 2, category: 'Web Dev' },
+      { id: 3, title: 'Introduction to Algorithms', author: 'CLRS', isbn: '978-0262033848', copies: 1, category: 'Algorithms' }
+    ],
+    members: [
+      { id: 'MEM-101', name: 'David Miller', email: 'david@example.com', membershipType: 'Premium', borrowedBooks: [] }
+    ],
+    borrowedRecords: [
+      { id: 1, memberId: 'MEM-101', bookTitle: 'Clean Code', issueDate: '2026-10-01', returnDue: '2026-10-15', fine: 0, returned: false }
+    ]
+  }),
+  getters: {
+    availableBooks: (state) => state.books.filter((b) => b.copies > 0),
+    activeLoansCount: (state) => state.borrowedRecords.filter((r) => !r.returned).length,
+    totalFines: (state) => state.borrowedRecords.reduce((sum, r) => sum + (r.fine || 0), 0)
+  },
+  actions: {
+    registerMember(member) {
+      const newMember = {
+        id: member.id || `MEM-${100 + this.members.length + 1}`,
+        name: member.name,
+        email: member.email,
+        membershipType: member.membershipType || 'Standard',
+        borrowedBooks: []
+      }
+      this.members.push(newMember)
+      return newMember
+    },
+    issueBook(bookId, memberId) {
+      const book = this.books.find((b) => b.id === Number(bookId))
+      const member = this.members.find((m) => m.id === memberId)
+      if (!book || book.copies <= 0 || !member) {
+        return false
+      }
+      book.copies--
+      const today = new Date()
+      const issueDate = today.toISOString().split('T')[0]
+      const due = new Date(today)
+      due.setDate(due.getDate() + 14)
+      const returnDue = due.toISOString().split('T')[0]
+
+      const record = {
+        id: Date.now(),
+        memberId: member.id,
+        bookTitle: book.title,
+        issueDate,
+        returnDue,
+        fine: 0,
+        returned: false
+      }
+      this.borrowedRecords.push(record)
+      if (!member.borrowedBooks) {
+        member.borrowedBooks = []
+      }
+      member.borrowedBooks.push(book.title)
+      return true
+    },
+    returnBook(recordId, daysLate = 0) {
+      const record = this.borrowedRecords.find((r) => r.id === Number(recordId))
+      if (!record || record.returned) {
+        return false
+      }
+      const late = Math.max(0, Number(daysLate) || 0)
+      record.fine = late * 2
+      record.returned = true
+
+      const book = this.books.find((b) => b.title === record.bookTitle)
+      if (book) {
+        book.copies++
+      }
+
+      const member = this.members.find((m) => m.id === record.memberId)
+      if (member && Array.isArray(member.borrowedBooks)) {
+        const index = member.borrowedBooks.indexOf(record.bookTitle)
+        if (index !== -1) {
+          member.borrowedBooks.splice(index, 1)
+        }
+      }
+      return true
+    }
+  }
+})