wad-lab 1.1.2 → 1.1.3

package/templates/vue-axios-router/src/views/HomeDashboardView.vue

@@ -0,0 +1,263 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import api from '../services/api'
+
+const departments = ref([])
+const employees = ref([])
+const loading = ref(false)
+const errorMessage = ref('')
+
+const totalDepartments = computed(() => departments.value.length)
+const totalEmployees = computed(() => employees.value.length)
+
+const totalPayroll = computed(() => {
+  return employees.value.reduce((sum, emp) => sum + (Number(emp.salary) || 0), 0)
+})
+
+const averageSalary = computed(() => {
+  if (employees.value.length === 0) return 0
+  return Math.round(totalPayroll.value / employees.value.length)
+})
+
+async function fetchDashboardData() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const [deptRes, empRes] = await Promise.all([
+      api.get('/departments'),
+      api.get('/employees')
+    ])
+    departments.value = deptRes.data
+    employees.value = empRes.data
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to load dashboard data'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDashboardData()
+})
+</script>
+
+<template>
+  <div class="dashboard-view">
+    <h2>Dashboard Overview</h2>
+
+    <div v-if="loading" class="state-msg">Loading dashboard stats...</div>
+    <div v-if="errorMessage" class="state-msg error">{{ errorMessage }}</div>
+
+    <div class="stats-grid">
+      <div class="stat-card">
+        <h3>Departments</h3>
+        <p class="stat-value">{{ totalDepartments }}</p>
+        <router-link to="/departments" class="stat-link">View all departments &rarr;</router-link>
+      </div>
+
+      <div class="stat-card">
+        <h3>Employees</h3>
+        <p class="stat-value">{{ totalEmployees }}</p>
+        <router-link to="/employees" class="stat-link">View all employees &rarr;</router-link>
+      </div>
+
+      <div class="stat-card">
+        <h3>Total Payroll</h3>
+        <p class="stat-value">${{ totalPayroll.toLocaleString() }}</p>
+        <span class="stat-sub">Monthly expenditure</span>
+      </div>
+
+      <div class="stat-card">
+        <h3>Average Salary</h3>
+        <p class="stat-value">${{ averageSalary.toLocaleString() }}</p>
+        <span class="stat-sub">Per employee</span>
+      </div>
+    </div>
+
+    <div class="dashboard-sections">
+      <div class="section-card">
+        <div class="section-header">
+          <h3>Departments Overview</h3>
+          <router-link to="/departments" class="action-btn">Manage</router-link>
+        </div>
+        <ul v-if="departments.length > 0" class="item-list">
+          <li v-for="dept in departments" :key="dept.id" class="list-row">
+            <strong>{{ dept.name }}</strong>
+            <span class="badge">{{ dept.code }}</span>
+          </li>
+        </ul>
+        <p v-else class="empty-text">No departments recorded.</p>
+      </div>
+
+      <div class="section-card">
+        <div class="section-header">
+          <h3>Recent Employees</h3>
+          <router-link to="/add-employee" class="action-btn">+ Add New</router-link>
+        </div>
+        <ul v-if="employees.length > 0" class="item-list">
+          <li v-for="emp in employees.slice(-5)" :key="emp.id" class="list-row">
+            <div>
+              <strong>{{ emp.name }}</strong>
+              <small class="muted-text">({{ emp.email }})</small>
+            </div>
+            <span class="salary-text">${{ Number(emp.salary || 0).toLocaleString() }}</span>
+          </li>
+        </ul>
+        <p v-else class="empty-text">No employees recorded.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dashboard-view {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.state-msg {
+  padding: 10px;
+  background-color: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.state-msg.error {
+  background-color: #fde8e8;
+  color: #c0392b;
+  border-color: #f5c6cb;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.stat-card h3 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #666;
+  text-transform: uppercase;
+}
+
+.stat-value {
+  margin: 0 0 10px 0;
+  font-size: 28px;
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.stat-link {
+  font-size: 13px;
+  color: #3498db;
+  text-decoration: none;
+}
+
+.stat-link:hover {
+  text-decoration: underline;
+}
+
+.stat-sub {
+  font-size: 13px;
+  color: #888;
+}
+
+.dashboard-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.section-card {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #2c3e50;
+}
+
+.action-btn {
+  font-size: 12px;
+  padding: 4px 8px;
+  background: #2c3e50;
+  color: #ffffff;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.action-btn:hover {
+  background: #34495e;
+}
+
+.item-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.list-row:last-child {
+  border-bottom: none;
+}
+
+.badge {
+  background: #ecf0f1;
+  color: #2c3e50;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.muted-text {
+  margin-left: 6px;
+  color: #7f8c8d;
+  font-size: 12px;
+}
+
+.salary-text {
+  font-weight: bold;
+  color: #27ae60;
+}
+
+.empty-text {
+  color: #7f8c8d;
+  font-size: 14px;
+  margin: 8px 0;
+}
+</style>

package/templates/vue-axios-router/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-axios-router-children/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 Axios Router Children</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vue-axios-router-children/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-axios-router-children",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-axios-router-children/src/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: #333333;
+  background-color: #f1f5f9;
+}
+</style>

package/templates/vue-axios-router-children/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')

package/templates/vue-axios-router-children/src/router/index.js

@@ -0,0 +1,42 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import CompanyLayout from '../views/CompanyLayout.vue'
+import CompanyOverview from '../views/CompanyOverview.vue'
+import DepartmentListView from '../views/DepartmentListView.vue'
+import EmployeeListView from '../views/EmployeeListView.vue'
+import EmployeeDetailView from '../views/EmployeeDetailView.vue'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/company'
+  },
+  {
+    path: '/company',
+    component: CompanyLayout,
+    children: [
+      {
+        path: '',
+        component: CompanyOverview
+      },
+      {
+        path: 'departments',
+        component: DepartmentListView
+      },
+      {
+        path: 'employees',
+        component: EmployeeListView
+      },
+      {
+        path: 'employees/:id',
+        component: EmployeeDetailView
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-axios-router-children/src/services/api.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: 'http://localhost:8080/api'
+})
+
+export default api

package/templates/vue-axios-router-children/src/views/CompanyLayout.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="layout-container">
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <h2>Company Portal</h2>
+      </div>
+      <nav class="nav-links">
+        <router-link to="/company" class="nav-item" exact-active-class="active">Overview</router-link>
+        <router-link to="/company/departments" class="nav-item" active-class="active">Departments</router-link>
+        <router-link to="/company/employees" class="nav-item" active-class="active">Employees</router-link>
+      </nav>
+    </aside>
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.layout-container {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  width: 240px;
+  background-color: #2c3e50;
+  color: #fff;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.sidebar-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #ecf0f1;
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-item {
+  color: #bdc3c7;
+  text-decoration: none;
+  padding: 10px 14px;
+  border-radius: 6px;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.nav-item:hover {
+  background-color: #34495e;
+  color: #ffffff;
+}
+
+.nav-item.active {
+  background-color: #3498db;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.main-content {
+  flex: 1;
+  padding: 32px;
+  background-color: #f8fafc;
+  overflow-y: auto;
+}
+</style>

package/templates/vue-axios-router-children/src/views/CompanyOverview.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="overview">
+    <header class="page-header">
+      <h1>Company Overview</h1>
+      <p>Welcome to the central company dashboard.</p>
+    </header>
+
+    <div class="stats-grid">
+      <div class="stat-card">
+        <h3>Total Departments</h3>
+        <p class="stat-value">{{ departmentCount }}</p>
+        <router-link to="/company/departments" class="stat-link">View Departments &rarr;</router-link>
+      </div>
+
+      <div class="stat-card">
+        <h3>Total Employees</h3>
+        <p class="stat-value">{{ employeeCount }}</p>
+        <router-link to="/company/employees" class="stat-link">View Employees &rarr;</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../services/api'
+
+const departmentCount = ref(0)
+const employeeCount = ref(0)
+
+const fetchStats = async () => {
+  try {
+    const deptRes = await api.get('/departments')
+    departmentCount.value = Array.isArray(deptRes.data) ? deptRes.data.length : 0
+  } catch (err) {
+    departmentCount.value = 0
+  }
+
+  try {
+    const empRes = await api.get('/employees')
+    employeeCount.value = Array.isArray(empRes.data) ? empRes.data.length : 0
+  } catch (err) {
+    employeeCount.value = 0
+  }
+}
+
+onMounted(() => {
+  fetchStats()
+})
+</script>
+
+<style scoped>
+.overview {
+  max-width: 900px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  font-size: 1.75rem;
+  margin-bottom: 6px;
+  color: #1e293b;
+}
+
+.page-header p {
+  color: #64748b;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-card h3 {
+  font-size: 1rem;
+  color: #475569;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: #2563eb;
+}
+
+.stat-link {
+  color: #2563eb;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.stat-link:hover {
+  text-decoration: underline;
+}
+</style>