wad-lab 1.2.2 → 1.2.4

package/templates/vue-hospital-portal/src/components/PatientTable.vue

@@ -0,0 +1,123 @@
+<script setup>
+defineProps({
+  patients: { type: Array, required: true }
+})
+
+const emit = defineEmits(['patch', 'discharge', 'settle'])
+
+function handlePatchVitals(p) {
+  const newBp = prompt('Enter new BP (e.g. 120/80):', p.vitals?.bp || '120/80')
+  if (newBp !== null) {
+    emit('patch', { id: p.id, vitals: { ...p.vitals, bp: newBp } })
+  }
+}
+</script>
+
+<template>
+  <div class="table-container">
+    <table class="patient-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Age</th>
+          <th>Doctor</th>
+          <th>Bed</th>
+          <th>Risk</th>
+          <th>Bill</th>
+          <th>Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="patients.length === 0">
+          <td colspan="9" class="empty">No patient records.</td>
+        </tr>
+        <tr v-for="p in patients" :key="p.id">
+          <td>{{ p.id }}</td>
+          <td><strong>{{ p.name }}</strong></td>
+          <td>{{ p.age }}</td>
+          <td>{{ p.doctor }}</td>
+          <td>{{ p.bedType }}</td>
+          <td>
+            <span :class="['badge', p.risk === 'High' ? 'badge-red' : p.risk === 'Moderate' ? 'badge-yellow' : 'badge-green']">
+              {{ p.risk }}
+            </span>
+          </td>
+          <td>${{ p.bill }}</td>
+          <td>
+            <span :class="['badge', p.paymentStatus === 'Paid' ? 'badge-green' : 'badge-yellow']">
+              {{ p.paymentStatus }}
+            </span>
+          </td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-patch" @click="handlePatchVitals(p)">Patch</button>
+            <button v-if="p.paymentStatus !== 'Paid'" type="button" class="btn btn-settle" @click="emit('settle', p.id)">Pay</button>
+            <button type="button" class="btn btn-discharge" @click="emit('discharge', p.id)">Discharge</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;
+}
+
+.patient-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px 8px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.badge {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-red { background: #fee2e2; color: #991b1b; }
+.badge-yellow { background: #fef9c3; color: #854d0e; }
+.badge-green { background: #dcfce7; color: #166534; }
+
+.action-cell {
+  display: flex;
+  gap: 4px;
+}
+
+.btn {
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-patch { background: #8250df; color: #fff; }
+.btn-settle { background: #16a34a; color: #fff; }
+.btn-discharge { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>

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

@@ -70,6 +70,15 @@ export const useHospitalStore = defineStore('hospital', {
       this.patients.unshift(newPatient)
       return newPatient
     },
+    patchPatient(id, partial) {
+      const p = this.patients.find(item => item.id === id)
+      if (p) {
+        Object.assign(p, partial)
+        if (partial.vitals) {
+          p.risk = this.calculateRisk(p.vitals)
+        }
+      }
+    },
     dischargePatient(id) {
       this.patients = this.patients.filter((p) => p.id !== id)
     },
@@ -77,7 +86,7 @@ export const useHospitalStore = defineStore('hospital', {
       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: true, message: 'Appointment confirmed with ' + doc.name }
       }
       return { success: false, message: 'No appointment slots available for this doctor' }
     },

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

@@ -1,453 +1,77 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useHospitalStore } from '../stores/hospitalStore'
+import DoctorCard from '../components/DoctorCard.vue'
+import AppointmentForm from '../components/AppointmentForm.vue'
 
 const hospital = useHospitalStore()
 const router = useRouter()
+const message = ref('')
 
-const opdMessage = ref('')
-const admissionMessage = ref('')
-
-const form = ref({
-  name: '',
-  age: '',
-  doctor: hospital.doctors[0]?.name || 'Dr. Sarah Connor',
-  bedType: 'General Ward',
-  vitals: {
-    bp: '120/80',
-    hr: 75,
-    temp: 98.6
-  },
-  bill: 350
-})
-
-function updateBedType(type) {
-  form.value.bedType = type
-  if (type === 'ICU') {
-    form.value.bill = 1200
-  } else {
-    form.value.bill = 350
-  }
+function handleBookDoctor(doctorId) {
+  const res = hospital.bookAppointment(doctorId)
+  message.value = res.message
 }
 
-const predictedRisk = computed(() => {
-  return hospital.calculateRisk(form.value.vitals)
-})
-
-function handleBookOpd(doctorId) {
-  const result = hospital.bookAppointment(doctorId)
-  opdMessage.value = result.message
-  setTimeout(() => {
-    opdMessage.value = ''
-  }, 3500)
-}
-
-function handleAdmitPatient() {
-  if (!form.value.name.trim() || !form.value.age) {
-    return
-  }
-  hospital.admitPatient({
-    name: form.value.name,
-    age: form.value.age,
-    doctor: form.value.doctor,
-    bedType: form.value.bedType,
-    vitals: {
-      bp: form.value.vitals.bp,
-      hr: form.value.vitals.hr,
-      temp: form.value.vitals.temp
-    },
-    bill: form.value.bill,
-    paymentStatus: 'Pending'
-  })
-
-  admissionMessage.value = `Patient ${form.value.name} successfully admitted to ${form.value.bedType}!`
-  form.value.name = ''
-  form.value.age = ''
-  form.value.vitals = { bp: '120/80', hr: 75, temp: 98.6 }
-  form.value.bedType = 'General Ward'
-  form.value.bill = 350
-
-  setTimeout(() => {
-    admissionMessage.value = ''
-    router.push('/patients')
-  }, 1200)
+function handleAdmit(patientData) {
+  hospital.admitPatient(patientData)
+  router.push('/patients')
 }
 </script>
 
 <template>
-  <div class="registration-page">
-    <section class="card opd-section">
-      <h2>OPD Doctor Appointments</h2>
-      <div v-if="opdMessage" class="alert alert-info">
-        {{ opdMessage }}
-      </div>
-      <div class="doctor-grid">
-        <div v-for="doc in hospital.doctors" :key="doc.id" class="doctor-card">
-          <div class="doctor-header">
-            <h3>{{ doc.name }}</h3>
-            <span class="specialty-badge">{{ doc.specialty }}</span>
-          </div>
-          <p class="fee-text">Consultation Fee: <strong>${{ doc.fee }}</strong></p>
-          <p class="slot-text">
-            Available Slots:
-            <span :class="['slot-count', doc.availableSlots > 0 ? 'slot-open' : 'slot-full']">
-              {{ doc.availableSlots }}
-            </span>
-          </p>
-          <button
-            class="btn btn-opd"
-            :disabled="doc.availableSlots === 0"
-            @click="handleBookOpd(doc.id)"
-          >
-            {{ doc.availableSlots > 0 ? 'Book Appointment' : 'Fully Booked' }}
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <section class="card admission-section">
-      <h2>Patient Bed & ICU Admission Form</h2>
-      <div v-if="admissionMessage" class="alert alert-success">
-        {{ admissionMessage }}
-      </div>
-      <form @submit.prevent="handleAdmitPatient" class="admission-form">
-        <div class="form-row">
-          <div class="form-group flex-1">
-            <label for="pName">Patient Name</label>
-            <input id="pName" v-model="form.name" type="text" placeholder="e.g. Eleanor Vance" required />
-          </div>
-          <div class="form-group width-small">
-            <label for="pAge">Age</label>
-            <input id="pAge" v-model="form.age" type="number" min="1" max="130" placeholder="e.g. 34" required />
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group flex-1">
-            <label for="pDoc">Assigned Doctor</label>
-            <select id="pDoc" v-model="form.doctor">
-              <option v-for="doc in hospital.doctors" :key="doc.id" :value="doc.name">
-                {{ doc.name }} ({{ doc.specialty }})
-              </option>
-            </select>
-          </div>
-          <div class="form-group flex-1">
-            <label>Bed Allocation</label>
-            <div class="bed-options">
-              <button
-                type="button"
-                :class="['bed-btn', form.bedType === 'General Ward' ? 'bed-btn-active' : '']"
-                @click="updateBedType('General Ward')"
-              >
-                General Ward ($350)
-              </button>
-              <button
-                type="button"
-                :class="['bed-btn', form.bedType === 'ICU' ? 'bed-btn-active bed-btn-icu' : '']"
-                @click="updateBedType('ICU')"
-              >
-                ICU ($1,200)
-              </button>
-            </div>
-          </div>
-        </div>
+  <div class="opd-page">
+    <h2>OPD Registration & Doctor Appointments</h2>
 
-        <fieldset class="vitals-fieldset">
-          <legend>Patient Vitals</legend>
-          <div class="vitals-row">
-            <div class="form-group flex-1">
-              <label for="vBp">Blood Pressure (mmHg)</label>
-              <input id="vBp" v-model="form.vitals.bp" type="text" placeholder="120/80" required />
-            </div>
-            <div class="form-group flex-1">
-              <label for="vHr">Heart Rate (bpm)</label>
-              <input id="vHr" v-model.number="form.vitals.hr" type="number" min="30" max="250" required />
-            </div>
-            <div class="form-group flex-1">
-              <label for="vTemp">Temperature (°F)</label>
-              <input id="vTemp" v-model.number="form.vitals.temp" type="number" step="0.1" min="90" max="110" required />
-            </div>
-          </div>
+    <div v-if="message" class="info-banner">{{ message }}</div>
 
-          <div class="risk-preview">
-            <span>Evaluated Risk Level: </span>
-            <span :class="['risk-tag', 'risk-' + predictedRisk.toLowerCase()]">
-              {{ predictedRisk }} Risk
-            </span>
-          </div>
-        </fieldset>
-
-        <div class="form-row">
-          <div class="form-group flex-1">
-            <label for="pBill">Estimated Billing ($)</label>
-            <input id="pBill" v-model.number="form.bill" type="number" min="0" required />
-          </div>
-        </div>
+    <div class="doctors-section">
+      <h3>Available Doctors</h3>
+      <div class="doctor-grid">
+        <DoctorCard
+          v-for="d in hospital.doctors"
+          :key="d.id"
+          :doctor="d"
+          @book="handleBookDoctor"
+        />
+      </div>
+    </div>
 
-        <button type="submit" class="btn btn-submit">
-          Admit Patient & Allocate Bed
-        </button>
-      </form>
-    </section>
+    <AppointmentForm
+      :doctors="hospital.doctors"
+      @submit-patient="handleAdmit"
+    />
   </div>
 </template>
 
 <style scoped>
-.registration-page {
+.opd-page {
   display: flex;
   flex-direction: column;
-  gap: 25px;
+  gap: 20px;
 }
 
-.card {
-  background-color: #ffffff;
-  border: 1px solid #e1e8ed;
-  border-radius: 8px;
-  padding: 20px 24px;
+.opd-page h2 {
+  font-size: 22px;
 }
 
-h2 {
-  margin-top: 0;
-  margin-bottom: 16px;
-  font-size: 19px;
-  color: #1a202c;
-  border-bottom: 2px solid #edf2f7;
-  padding-bottom: 8px;
-}
-
-.alert {
+.info-banner {
+  background: #f0fdf4;
+  color: #166534;
+  border: 1px solid #bbf7d0;
   padding: 10px 14px;
-  border-radius: 4px;
-  margin-bottom: 16px;
-  font-size: 14px;
-}
-
-.alert-info {
-  background-color: #ebf8ff;
-  color: #2b6cb0;
-  border: 1px solid #bee3f8;
+  border-radius: 6px;
 }
 
-.alert-success {
-  background-color: #f0fff4;
-  color: #276749;
-  border: 1px solid #c6f6d5;
+.doctors-section h3 {
+  font-size: 16px;
+  margin-bottom: 12px;
 }
 
 .doctor-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 15px;
-}
-
-.doctor-card {
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 14px;
-  background-color: #fafbfc;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.doctor-header h3 {
-  margin: 0 0 6px 0;
-  font-size: 16px;
-  color: #2d3748;
-}
-
-.specialty-badge {
-  display: inline-block;
-  background-color: #e2e8f0;
-  color: #4a5568;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 12px;
-}
-
-.fee-text,
-.slot-text {
-  margin: 8px 0;
-  font-size: 14px;
-  color: #4a5568;
-}
-
-.slot-count {
-  font-weight: bold;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.slot-open {
-  background-color: #c6f6d5;
-  color: #22543d;
-}
-
-.slot-full {
-  background-color: #fed7d7;
-  color: #742a2a;
-}
-
-.admission-form {
-  display: flex;
-  flex-direction: column;
   gap: 16px;
 }
-
-.form-row {
-  display: flex;
-  gap: 15px;
-  flex-wrap: wrap;
-}
-
-.flex-1 {
-  flex: 1;
-  min-width: 200px;
-}
-
-.width-small {
-  width: 110px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #4a5568;
-}
-
-input,
-select {
-  padding: 8px 10px;
-  border: 1px solid #cbd5e0;
-  border-radius: 5px;
-  font-size: 14px;
-  background-color: #ffffff;
-}
-
-input:focus,
-select:focus {
-  outline: none;
-  border-color: #3182ce;
-}
-
-.bed-options {
-  display: flex;
-  gap: 10px;
-}
-
-.bed-btn {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #cbd5e0;
-  background-color: #f7fafc;
-  color: #4a5568;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.bed-btn-active {
-  background-color: #3182ce;
-  color: #ffffff;
-  border-color: #3182ce;
-}
-
-.bed-btn-active.bed-btn-icu {
-  background-color: #dd6b20;
-  border-color: #dd6b20;
-}
-
-.vitals-fieldset {
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 12px 16px;
-  background-color: #f7fafc;
-}
-
-legend {
-  font-size: 13px;
-  font-weight: bold;
-  color: #2b6cb0;
-  padding: 0 6px;
-}
-
-.vitals-row {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.risk-preview {
-  margin-top: 10px;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.risk-tag {
-  font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 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;
-}
-
-.btn {
-  padding: 9px 16px;
-  border: none;
-  border-radius: 5px;
-  font-weight: 600;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.btn-opd {
-  background-color: #2b6cb0;
-  color: #ffffff;
-  margin-top: 8px;
-}
-
-.btn-opd:hover:not(:disabled) {
-  background-color: #2c5282;
-}
-
-.btn-opd:disabled {
-  background-color: #cbd5e0;
-  cursor: not-allowed;
-  color: #718096;
-}
-
-.btn-submit {
-  background-color: #2f855a;
-  color: #ffffff;
-  padding: 12px;
-}
-
-.btn-submit:hover {
-  background-color: #276749;
-}
 </style>