wad-lab 1.0.9 → 1.1.1

package/templates/vue-game-whackamole/src/main.js

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

package/templates/vue-game-whackamole/src/stores/moleStore.js

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+
+export const useMoleStore = defineStore('mole', {
+  state: () => ({
+    score: 0,
+    timeLeft: 30,
+    isPlaying: false,
+    activeHoleIndex: -1,
+    timerInterval: null,
+    moleTimeout: null
+  }),
+  actions: {
+    startGame() {
+      if (this.isPlaying) return
+      this.stopGame()
+      this.score = 0
+      this.timeLeft = 30
+      this.isPlaying = true
+      this.peepMole()
+
+      this.timerInterval = setInterval(() => {
+        this.timeLeft--
+        if (this.timeLeft <= 0) {
+          this.stopGame()
+        }
+      }, 1000)
+    },
+    peepMole() {
+      if (!this.isPlaying) return
+
+      let nextHole
+      do {
+        nextHole = Math.floor(Math.random() * 9)
+      } while (nextHole === this.activeHoleIndex)
+
+      this.activeHoleIndex = nextHole
+      const stayTime = Math.floor(Math.random() * 400) + 700
+
+      clearTimeout(this.moleTimeout)
+      this.moleTimeout = setTimeout(() => {
+        if (!this.isPlaying) return
+        this.activeHoleIndex = -1
+        this.peepMole()
+      }, stayTime)
+    },
+    whackMole(index) {
+      if (this.isPlaying && index === this.activeHoleIndex) {
+        this.score++
+        this.activeHoleIndex = -1
+        clearTimeout(this.moleTimeout)
+        this.moleTimeout = setTimeout(() => {
+          if (this.isPlaying) {
+            this.peepMole()
+          }
+        }, 200)
+      }
+    },
+    stopGame() {
+      if (this.timerInterval) {
+        clearInterval(this.timerInterval)
+        this.timerInterval = null
+      }
+      if (this.moleTimeout) {
+        clearTimeout(this.moleTimeout)
+        this.moleTimeout = null
+      }
+      this.isPlaying = false
+      this.activeHoleIndex = -1
+    }
+  }
+})

package/templates/vue-game-whackamole/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-hospital-portal/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>Hospital Care Portal</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-hospital-portal/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-hospital-portal",
+  "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-hospital-portal/src/App.vue

@@ -0,0 +1,107 @@
+<script setup>
+</script>
+
+<template>
+  <div class="app-layout">
+    <header class="app-header">
+      <div class="brand">
+        <span class="cross-icon">+</span>
+        <h1 class="portal-title">Hospital Care Portal</h1>
+      </div>
+      <nav class="nav-links">
+        <router-link to="/">Book OPD / Admit</router-link>
+        <router-link to="/patients">Patients List</router-link>
+        <router-link to="/billing">Billing / Stats</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, Oxygen, Ubuntu, Cantarell, sans-serif;
+  color: #2d3748;
+  background-color: #f7fafc;
+}
+</style>
+
+<style scoped>
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  background-color: #1a365d;
+  color: #ffffff;
+  padding: 14px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cross-icon {
+  background-color: #e53e3e;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.portal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 12px;
+}
+
+.nav-links a {
+  color: #e2e8f0;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 14px;
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.nav-links a:hover,
+.nav-links a.router-link-active {
+  background-color: #2b6cb0;
+  color: #ffffff;
+}
+
+.content-container {
+  max-width: 960px;
+  width: 100%;
+  margin: 28px auto;
+  padding: 0 20px;
+}
+</style>

package/templates/vue-hospital-portal/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-hospital-portal/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import OPDRegistrationView from '../views/OPDRegistrationView.vue'
+import PatientListView from '../views/PatientListView.vue'
+import HospitalBillingView from '../views/HospitalBillingView.vue'
+
+const routes = [
+  { path: '/', name: 'OPDRegistration', component: OPDRegistrationView },
+  { path: '/patients', name: 'PatientList', component: PatientListView },
+  { path: '/billing', name: 'HospitalBilling', component: HospitalBillingView }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-hospital-portal/src/stores/hospitalStore.js

@@ -0,0 +1,91 @@
+import { defineStore } from 'pinia'
+
+export const useHospitalStore = defineStore('hospital', {
+  state: () => ({
+    doctors: [
+      { id: 1, name: 'Dr. Sarah Connor', specialty: 'Cardiology', fee: 150, availableSlots: 5 },
+      { id: 2, name: 'Dr. Gregory House', specialty: 'Diagnostics & ICU', fee: 250, availableSlots: 3 },
+      { id: 3, name: 'Dr. John Watson', specialty: 'General Medicine', fee: 90, availableSlots: 6 }
+    ],
+    patients: [
+      {
+        id: 1,
+        name: 'Robert Paulson',
+        age: 45,
+        vitals: { bp: '130/85', hr: 78, temp: 98.6 },
+        doctor: 'Dr. Sarah Connor',
+        bedType: 'General Ward',
+        bill: 350,
+        risk: 'Moderate',
+        paymentStatus: 'Pending'
+      }
+    ]
+  }),
+  getters: {
+    totalPatients: (state) => state.patients.length,
+    criticalCount: (state) => state.patients.filter((p) => p.risk === 'High' || p.bedType === 'ICU').length,
+    totalRevenue: (state) => state.patients.reduce((sum, p) => sum + (Number(p.bill) || 0), 0)
+  },
+  actions: {
+    calculateRisk(vitals) {
+      if (!vitals) return 'Normal'
+      const bpStr = vitals.bp || vitals.bloodPressure || '120/80'
+      const hrVal = Number(vitals.hr || vitals.heartRate || 75)
+      const tempVal = Number(vitals.temp || vitals.temperature || 98.6)
+
+      let systolic = 120
+      let diastolic = 80
+      if (typeof bpStr === 'string' && bpStr.includes('/')) {
+        const parts = bpStr.split('/').map((s) => parseInt(s.trim(), 10))
+        if (!isNaN(parts[0])) systolic = parts[0]
+        if (!isNaN(parts[1])) diastolic = parts[1]
+      }
+
+      if (systolic >= 140 || systolic < 90 || diastolic >= 90 || hrVal > 100 || hrVal < 50 || tempVal >= 102) {
+        return 'High'
+      }
+      if (systolic >= 125 || diastolic >= 83 || hrVal > 85 || hrVal < 60 || tempVal >= 100.4) {
+        return 'Moderate'
+      }
+      return 'Normal'
+    },
+    admitPatient(patientData) {
+      const risk = this.calculateRisk(patientData.vitals)
+      const autoBill = patientData.bedType === 'ICU' ? 1200 : 350
+      const newPatient = {
+        id: Date.now(),
+        name: patientData.name,
+        age: Number(patientData.age),
+        doctor: patientData.doctor || 'Dr. Sarah Connor',
+        bedType: patientData.bedType || 'General Ward',
+        bill: Number(patientData.bill) || autoBill,
+        vitals: {
+          bp: (patientData.vitals && (patientData.vitals.bp || patientData.vitals.bloodPressure)) || '120/80',
+          hr: Number(patientData.vitals && (patientData.vitals.hr || patientData.vitals.heartRate)) || 72,
+          temp: Number(patientData.vitals && (patientData.vitals.temp || patientData.vitals.temperature)) || 98.6
+        },
+        risk: risk,
+        paymentStatus: patientData.paymentStatus || 'Pending'
+      }
+      this.patients.unshift(newPatient)
+      return newPatient
+    },
+    dischargePatient(id) {
+      this.patients = this.patients.filter((p) => p.id !== id)
+    },
+    bookAppointment(doctorId) {
+      const doc = this.doctors.find((d) => d.id === doctorId)
+      if (doc && doc.availableSlots > 0) {
+        doc.availableSlots -= 1
+        return { success: true, message: `Appointment confirmed with ${doc.name}` }
+      }
+      return { success: false, message: 'No appointment slots available for this doctor' }
+    },
+    settlePayment(id) {
+      const p = this.patients.find((item) => item.id === id)
+      if (p) {
+        p.paymentStatus = 'Paid'
+      }
+    }
+  }
+})

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

@@ -0,0 +1,271 @@
+<script setup>
+import { computed } from 'vue'
+import { useHospitalStore } from '../stores/hospitalStore'
+
+const hospital = useHospitalStore()
+
+const paidTotal = computed(() => {
+  return hospital.patients
+    .filter((p) => p.paymentStatus === 'Paid')
+    .reduce((sum, p) => sum + (Number(p.bill) || 0), 0)
+})
+
+const pendingTotal = computed(() => {
+  return hospital.patients
+    .filter((p) => p.paymentStatus !== 'Paid')
+    .reduce((sum, p) => sum + (Number(p.bill) || 0), 0)
+})
+
+function handleSettle(id) {
+  hospital.settlePayment(id)
+}
+</script>
+
+<template>
+  <div class="billing-page">
+    <h2>Hospital Financial & Critical Care Overview</h2>
+
+    <div class="metrics-grid">
+      <div class="metric-card">
+        <span class="metric-label">Total Revenue</span>
+        <span class="metric-value font-blue">${{ hospital.totalRevenue }}</span>
+        <span class="metric-sub">Across all admissions</span>
+      </div>
+
+      <div class="metric-card">
+        <span class="metric-label">Paid Revenue</span>
+        <span class="metric-value font-green">${{ paidTotal }}</span>
+        <span class="metric-sub">Cleared payments</span>
+      </div>
+
+      <div class="metric-card">
+        <span class="metric-label">Pending Dues</span>
+        <span class="metric-value font-amber">${{ pendingTotal }}</span>
+        <span class="metric-sub">Awaiting settlement</span>
+      </div>
+
+      <div class="metric-card">
+        <span class="metric-label">Critical / ICU Cases</span>
+        <span class="metric-value font-red">{{ hospital.criticalCount }}</span>
+        <span class="metric-sub">Requiring priority monitoring</span>
+      </div>
+    </div>
+
+    <div class="table-card">
+      <h3>Patient Invoices & Payment Ledger</h3>
+      <div v-if="hospital.patients.length === 0" class="empty-state">
+        No active patient billing records.
+      </div>
+      <div v-else class="table-container">
+        <table class="billing-table">
+          <thead>
+            <tr>
+              <th>Patient</th>
+              <th>Assigned Doctor</th>
+              <th>Bed Type</th>
+              <th>Risk</th>
+              <th>Total Bill</th>
+              <th>Status</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="patient in hospital.patients" :key="patient.id">
+              <td class="font-bold">{{ patient.name }}</td>
+              <td>{{ patient.doctor }}</td>
+              <td>{{ patient.bedType }}</td>
+              <td>
+                <span :class="['badge-risk', 'badge-' + (patient.risk ? patient.risk.toLowerCase() : 'normal')]">
+                  {{ patient.risk || 'Normal' }}
+                </span>
+              </td>
+              <td class="font-bold">${{ patient.bill }}</td>
+              <td>
+                <span :class="['status-badge', patient.paymentStatus === 'Paid' ? 'status-paid' : 'status-pending']">
+                  {{ patient.paymentStatus || 'Pending' }}
+                </span>
+              </td>
+              <td>
+                <button
+                  v-if="patient.paymentStatus !== 'Paid'"
+                  class="btn-settle"
+                  @click="handleSettle(patient.id)"
+                >
+                  Mark Paid
+                </button>
+                <span v-else class="settled-text">Settled</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.billing-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #1a202c;
+}
+
+h3 {
+  margin: 0 0 14px 0;
+  font-size: 16px;
+  color: #2d3748;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.metric-card {
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.metric-label {
+  font-size: 13px;
+  color: #718096;
+  font-weight: 500;
+}
+
+.metric-value {
+  font-size: 26px;
+  font-weight: 700;
+}
+
+.metric-sub {
+  font-size: 11px;
+  color: #a0aec0;
+}
+
+.font-blue {
+  color: #2b6cb0;
+}
+
+.font-green {
+  color: #2f855a;
+}
+
+.font-amber {
+  color: #c05621;
+}
+
+.font-red {
+  color: #c53030;
+}
+
+.table-card {
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 18px;
+}
+
+.empty-state {
+  color: #718096;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.billing-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  text-align: left;
+}
+
+.billing-table th {
+  background-color: #f7fafc;
+  color: #4a5568;
+  padding: 10px 12px;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.billing-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.badge-risk {
+  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+.badge-high {
+  background-color: #fed7d7;
+  color: #9b2c2c;
+}
+
+.badge-moderate {
+  background-color: #feebc8;
+  color: #c05621;
+}
+
+.badge-normal {
+  background-color: #c6f6d5;
+  color: #22543d;
+}
+
+.status-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 12px;
+}
+
+.status-paid {
+  background-color: #c6f6d5;
+  color: #22543d;
+}
+
+.status-pending {
+  background-color: #feebc8;
+  color: #9c4221;
+}
+
+.btn-settle {
+  background-color: #3182ce;
+  color: #ffffff;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-settle:hover {
+  background-color: #2b6cb0;
+}
+
+.settled-text {
+  font-size: 12px;
+  color: #718096;
+}
+</style>