Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): Massive frontend modernization including customer table redesign, new map features, and consistent styling

Browse Source
This commit is contained in:
Edwin Eames
2026-02-06 20:31:16 -05:00
parent 421ba896a0
commit 6c28c0c2d2
68 changed files with 7472 additions and 1253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/employee/home.vue
View File

@@ -9,23 +9,40 @@
<li>Employees</li>
</ul>
</div>
<h1 class="text-3xl font-bold mt-4">Employees</h1>
<!-- Page Header with Stats -->
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
<div>
<h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-primary-content">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
Employees
</h1>
<p class="text-base-content/60 mt-1 ml-13">Manage staff members and roles</p>
</div>
<!-- Main Content Card -->
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
<!-- Header: Count and Add Button -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
<div class="badge badge-ghost">{{ recordsLength }} employees found</div>
<router-link :to="{ name: 'employeeCreate' }" class="btn btn-primary btn-sm">
<!-- Quick Stats -->
<div class="flex flex-wrap gap-3 items-center">
<div class="stat-pill">
<span class="stat-pill-value">{{ recordsLength }}</span>
<span class="stat-pill-label">Total Staff</span>
</div>
<router-link :to="{ name: 'employeeCreate' }" class="btn btn-primary btn-sm ml-2">
Create New Employee
</router-link>
</div>
</div>
<!-- Main Content Card -->
<div class="modern-table-card">
<div class="divider"></div>
<!-- DESKTOP VIEW: Table -->
<div class="overflow-x-auto hidden xl:block">
<table class="table w-full">
<table class="modern-table">
<thead>
<tr>
<th>Employee ID</th>
@@ -37,7 +54,7 @@
</tr>
</thead>
<tbody>
<tr v-for="person in employees" :key="person.id" class="hover:bg-blue-600 hover:text-white">
<tr v-for="person in employees" :key="person.id" class="table-row-hover">
<td>{{ person.id }}</td>
<td>{{ person.employee_first_name }} {{ person.employee_last_name }}</td>
<td><span class="badge badge-ghost badge-sm">{{ getEmployeeTypeName(person.employee_type) }}</span></td>
@@ -45,10 +62,10 @@
<td>{{ person.employee_phone_number }}</td>
<td class="text-right">
<div class="flex items-center justify-end gap-2">
<router-link :to="{ name: 'employeeEdit', params: { id: person.user_id || 0 } }" class="btn btn-sm btn-secondary">Edit</router-link>
<router-link :to="{ name: 'employeeEdit', params: { id: person.user_id || 0 } }" class="btn btn-sm btn-secondary">Edit</router-link>
<router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
<router-link v-if="user && user.user_admin === 0" :to="{ name: 'employeeChangePassword', params: { id: person.id } }" class="btn btn-sm btn-warning">Change Password</router-link>
<router-link v-if="person.user_id" :to="{ name: 'employeeEdit', params: { id: person.user_id } }" class="btn btn-sm btn-secondary">Edit</router-link>
<button v-else class="btn btn-sm btn-disabled">No User</button>
<router-link v-if="person.id" :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
<router-link v-if="user && user.user_admin === 0 && person.id" :to="{ name: 'employeeChangePassword', params: { id: person.id } }" class="btn btn-sm btn-warning">Change Password</router-link>
</div>
</td>
</tr>
@@ -57,26 +74,32 @@
</div>
<!-- MOBILE VIEW: Cards -->
<div class="xl:hidden space-y-4">
<div v-for="person in employees" :key="person.id" class="card bg-base-100 shadow-md">
<div class="card-body p-4">
<div class="xl:hidden space-y-4 px-4 pb-4">
<div v-for="person in employees" :key="person.id" class="mobile-card">
<div class="p-3">
<div class="flex justify-between items-start">
<div>
<h2 class="card-title text-base">{{ person.employee_first_name }} {{ person.employee_last_name }}</h2>
<p class="text-xs text-gray-400">ID: #{{ person.id }}</p>
<h2 class="text-base font-bold">{{ person.employee_first_name }} {{ person.employee_last_name }}</h2>
<p class="text-xs text-base-content/60">ID: #{{ person.id }}</p>
</div>
<div class="badge badge-ghost">
<div class="badge badge-ghost badge-sm">
{{ getEmployeeTypeName(person.employee_type) }}
</div>
</div>
<div class="text-sm mt-2">
<p>{{ person.employee_town }}</p>
<p>{{ person.employee_phone_number }}</p>
<div class="text-sm mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
<div>
<p class="text-xs text-base-content/50">Town</p>
<p>{{ person.employee_town }}</p>
</div>
<div>
<p class="text-xs text-base-content/50">Phone</p>
<p>{{ person.employee_phone_number }}</p>
</div>
</div>
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
<router-link :to="{ name: 'employeeEdit', params: { id: person.user_id || 0 } }" class="btn btn-sm btn-secondary">Edit</router-link>
<router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
<router-link v-if="user && user.user_admin === 0" :to="{ name: 'employeeChangePassword', params: { id: person.id } }" class="btn btn-sm btn-warning">Change Password</router-link>
<div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
<router-link v-if="person.user_id" :to="{ name: 'employeeEdit', params: { id: person.user_id } }" class="btn btn-sm btn-secondary flex-1">Edit</router-link>
<router-link v-if="person.id" :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost flex-1">View</router-link>
<router-link v-if="user && user.user_admin === 0 && person.id" :to="{ name: 'employeeChangePassword', params: { id: person.id } }" class="btn btn-sm btn-warning flex-1">Change Password</router-link>
</div>
</div>
</div>
@@ -146,14 +169,17 @@ export default defineComponent({
axios.get(path, { headers: authHeader() })
.then((response: any) => {
// --- FIX 1: Assign the response data directly, as it's an array ---
this.employees = response.data;
// Fix: Access the .employees property from the response object
// The API returns { ok: true, employees: [...] }
if (response.data.employees) {
this.employees = response.data.employees;
} else {
// Fallback or empty
this.employees = [];
}
// --- FIX 2: Set the recordsLength from the array length ---
// NOTE: For full pagination, your API will eventually need to send the *total* count.
// For now, this will show the count of items on the current page.
// If you update your API to send { data: [], total_records: X }, this is the only line you'd change.
this.recordsLength = response.data.length;
// Fix: Set recordsLength based on the array length
this.recordsLength = this.employees.length;
})
.catch((error: any) => {
console.error("Failed to fetch employees:", error);