wad-lab 1.2.2 → 1.2.3

package/templates/vue-2model-crud-patch/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vue-2model-crud-patch",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "pinia": "^2.3.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.7"
+  }
+}

package/templates/vue-2model-crud-patch/src/App.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="app-wrapper">
+    <!-- Modular Navigation Header -->
+    <NavBar :current-tab="currentTab" @tab-change="handleTabChange" />
+
+    <!-- Main Content Area -->
+    <main class="main-container">
+      <router-view v-if="hasRouter" />
+      <template v-else>
+        <DepartmentsView v-if="currentTab === 'departments'" />
+        <EmployeesView v-else-if="currentTab === 'employees'" />
+        <AnalyticsView v-else-if="currentTab === 'analytics'" />
+      </template>
+    </main>
+  </div>
+</template>
+
+<script>
+import NavBar from './components/NavBar.vue'
+import DepartmentsView from './views/DepartmentsView.vue'
+import EmployeesView from './views/EmployeesView.vue'
+import AnalyticsView from './views/AnalyticsView.vue'
+
+export default {
+  name: 'App',
+  components: {
+    NavBar,
+    DepartmentsView,
+    EmployeesView,
+    AnalyticsView
+  },
+  data() {
+    return {
+      currentTab: 'departments'
+    }
+  },
+  computed: {
+    hasRouter() {
+      return !!this.$route
+    }
+  },
+  watch: {
+    '$route.path': {
+      immediate: true,
+      handler(path) {
+        if (!path) return
+        if (path.includes('employees')) {
+          this.currentTab = 'employees'
+        } else if (path.includes('analytics')) {
+          this.currentTab = 'analytics'
+        } else {
+          this.currentTab = 'departments'
+        }
+      }
+    }
+  },
+  methods: {
+    handleTabChange(tab) {
+      this.currentTab = tab
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/components/AnalyticsBoard.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="analytics-board">
+    <!-- Top Bar -->
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <h2 class="card-title">Analytics and Aggregation Board</h2>
+          <p class="card-subtitle">
+            MongoDB-style $lookup joined records and $group departmental statistical aggregations
+          </p>
+        </div>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          @click="$emit('refresh')"
+        >
+          Refresh Data
+        </button>
+      </div>
+
+      <!-- Top KPI Cards -->
+      <div class="metric-grid">
+        <div class="metric-card">
+          <div class="metric-card-label">Total Headcount</div>
+          <div class="metric-card-value">{{ totalEmployees }}</div>
+          <div class="metric-card-hint">Active personnel across all departments</div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-card-label">Total Departments</div>
+          <div class="metric-card-value">{{ totalDepartments }}</div>
+          <div class="metric-card-hint">Registered functional units</div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-card-label">Total Payroll ($group sum)</div>
+          <div class="metric-card-value">{{ formatCurrency(totalPayroll) }}</div>
+          <div class="metric-card-hint">Combined annual salary expenditure</div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-card-label">Average Salary ($group avg)</div>
+          <div class="metric-card-value">{{ formatCurrency(averageSalary) }}</div>
+          <div class="metric-card-hint">Mean compensation per employee</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 1: $group Aggregation Table -->
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <h3 class="card-title">Department Aggregations ($group Stage)</h3>
+          <p class="card-subtitle">
+            Aggregated by departmentId: headcount, total payroll, average salary, and budget variance
+          </p>
+        </div>
+        <span class="badge badge-primary">MongoDB Aggregation Pipeline</span>
+      </div>
+
+      <div v-if="departmentStats.length === 0" class="alert alert-info">
+        No department statistics available. Ensure departments and employees are created.
+      </div>
+
+      <div v-else class="table-responsive">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Department</th>
+              <th>Location</th>
+              <th>Headcount</th>
+              <th>Total Payroll</th>
+              <th>Avg Salary</th>
+              <th>Allocated Budget</th>
+              <th>Budget Variance</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="stat in departmentStats" :key="stat.departmentId || stat.departmentName">
+              <td>
+                <strong>{{ stat.departmentName }}</strong>
+              </td>
+              <td>{{ stat.location || 'N/A' }}</td>
+              <td>
+                <span class="badge badge-secondary">
+                  {{ stat.headcount }} Member{{ stat.headcount === 1 ? '' : 's' }}
+                </span>
+              </td>
+              <td>
+                <strong>{{ formatCurrency(stat.totalPayroll) }}</strong>
+              </td>
+              <td>{{ formatCurrency(stat.avgSalary) }}</td>
+              <td>{{ formatCurrency(stat.budget) }}</td>
+              <td>
+                <span
+                  class="badge"
+                  :class="stat.budgetVariance >= 0 ? 'badge-success' : 'badge-danger'"
+                >
+                  {{ stat.budgetVariance >= 0 ? '+' : '' }}{{ formatCurrency(stat.budgetVariance) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Section 2: $lookup Joined Data Table -->
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <h3 class="card-title">Joined Employee and Department Records ($lookup Stage)</h3>
+          <p class="card-subtitle">
+            Relational join between Employee document and foreign Department document
+          </p>
+        </div>
+        <div class="search-bar" style="margin-bottom: 0;">
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Search joined records..."
+            v-model="joinedSearch"
+            style="width: 240px;"
+          />
+        </div>
+      </div>
+
+      <div v-if="filteredJoinedData.length === 0" class="alert alert-info">
+        No joined records found.
+      </div>
+
+      <div v-else class="table-responsive">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Employee ID</th>
+              <th>Employee Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Salary</th>
+              <th>Department ($lookup)</th>
+              <th>Dept Location</th>
+              <th>Dept Budget</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in filteredJoinedData" :key="item.id">
+              <td>
+                <code>{{ item.id }}</code>
+              </td>
+              <td>
+                <strong>{{ item.name }}</strong>
+              </td>
+              <td>{{ item.email }}</td>
+              <td>
+                <span class="badge badge-primary">{{ item.role || 'Staff' }}</span>
+              </td>
+              <td>{{ formatCurrency(item.salary) }}</td>
+              <td>
+                <span class="badge badge-secondary">
+                  {{ item.departmentName }}
+                </span>
+              </td>
+              <td>{{ item.departmentLocation }}</td>
+              <td>{{ formatCurrency(item.departmentBudget) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AnalyticsBoard',
+  props: {
+    stats: {
+      type: Array,
+      default: () => []
+    },
+    joinedData: {
+      type: Array,
+      default: () => []
+    },
+    employees: {
+      type: Array,
+      default: () => []
+    },
+    departments: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['refresh'],
+  data() {
+    return {
+      joinedSearch: ''
+    }
+  },
+  computed: {
+    totalEmployees() {
+      return this.employees.length
+    },
+    totalDepartments() {
+      return this.departments.length
+    },
+    totalPayroll() {
+      return this.employees.reduce((sum, e) => sum + (Number(e.salary) || 0), 0)
+    },
+    averageSalary() {
+      if (this.totalEmployees === 0) return 0
+      return Math.round(this.totalPayroll / this.totalEmployees)
+    },
+    departmentStats() {
+      if (this.stats && this.stats.length > 0) {
+        return this.stats
+      }
+      // Compute aggregation dynamically if not pre-provided
+      return this.departments.map((dept) => {
+        const deptEmps = this.employees.filter(
+          (e) => e.departmentId === dept.id || e.departmentId === dept.name
+        )
+        const headcount = deptEmps.length
+        const totalPayroll = deptEmps.reduce(
+          (sum, e) => sum + (Number(e.salary) || 0),
+          0
+        )
+        const avgSalary = headcount > 0 ? Math.round(totalPayroll / headcount) : 0
+        const budget = Number(dept.budget) || 0
+        return {
+          departmentId: dept.id,
+          departmentName: dept.name,
+          location: dept.location,
+          budget,
+          headcount,
+          totalPayroll,
+          avgSalary,
+          budgetVariance: budget - totalPayroll
+        }
+      })
+    },
+    effectiveJoinedData() {
+      if (this.joinedData && this.joinedData.length > 0) {
+        return this.joinedData
+      }
+      return this.employees.map((emp) => {
+        const dept = this.departments.find(
+          (d) => d.id === emp.departmentId || d.name === emp.departmentId
+        )
+        return {
+          id: emp.id,
+          name: emp.name,
+          email: emp.email,
+          role: emp.role,
+          salary: emp.salary,
+          departmentId: emp.departmentId,
+          departmentName: dept ? dept.name : 'Unassigned',
+          departmentLocation: dept ? dept.location : 'N/A',
+          departmentBudget: dept ? dept.budget : 0
+        }
+      })
+    },
+    filteredJoinedData() {
+      if (!this.joinedSearch.trim()) {
+        return this.effectiveJoinedData
+      }
+      const term = this.joinedSearch.toLowerCase()
+      return this.effectiveJoinedData.filter((item) => {
+        const name = (item.name || '').toLowerCase()
+        const email = (item.email || '').toLowerCase()
+        const role = (item.role || '').toLowerCase()
+        const dept = (item.departmentName || '').toLowerCase()
+        return (
+          name.includes(term) ||
+          email.includes(term) ||
+          role.includes(term) ||
+          dept.includes(term)
+        )
+      })
+    }
+  },
+  methods: {
+    formatCurrency(val) {
+      const num = Number(val)
+      if (isNaN(num)) return '$0'
+      return '$' + num.toLocaleString()
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/components/DepartmentFormModal.vue

@@ -0,0 +1,138 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-container">
+      <div class="modal-header">
+        <h3 class="modal-title">
+          {{ isEdit ? 'Edit Department (PUT)' : 'Create Department (POST)' }}
+        </h3>
+        <button type="button" class="modal-close-btn" @click="$emit('close')">&times;</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit">
+        <div class="modal-body">
+          <div v-if="isEdit" class="form-group">
+            <label class="form-label">Department ID</label>
+            <input
+              type="text"
+              class="form-control"
+              :value="formData.id"
+              disabled
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Department Name</label>
+            <input
+              type="text"
+              class="form-control"
+              v-model="formData.name"
+              placeholder="e.g. Engineering"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Location</label>
+            <input
+              type="text"
+              class="form-control"
+              v-model="formData.location"
+              placeholder="e.g. Building A, Floor 3"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Annual Budget (USD)</label>
+            <input
+              type="number"
+              class="form-control"
+              v-model.number="formData.budget"
+              placeholder="e.g. 500000"
+              min="0"
+              step="1000"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">
+            Cancel
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="submitting">
+            {{ submitting ? 'Saving...' : (isEdit ? 'Save Changes (PUT)' : 'Create Department (POST)') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DepartmentFormModal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    department: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['close', 'save'],
+  data() {
+    return {
+      formData: {
+        id: '',
+        name: '',
+        location: '',
+        budget: 0
+      },
+      submitting: false
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!(this.department && this.department.id)
+    }
+  },
+  watch: {
+    department: {
+      immediate: true,
+      handler(val) {
+        if (val && val.id) {
+          this.formData = {
+            id: val.id,
+            name: val.name || '',
+            location: val.location || '',
+            budget: val.budget !== undefined ? Number(val.budget) : 0
+          }
+        } else {
+          this.formData = {
+            id: '',
+            name: '',
+            location: '',
+            budget: 100000
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      this.submitting = true
+      try {
+        await this.$emit('save', {
+          data: { ...this.formData },
+          isEdit: this.isEdit
+        })
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>