Edwin Eames
61f93ec4e8
Major Changes: - Migrate components from Options API to Composition API with <script setup> - Add centralized service layer (serviceService, deliveryService, adminService) - Implement new reusable components (EnhancedButton, EnhancedModal, StatCard, etc.) - Add theme store for consistent theming across application - Improve ServiceCalendar with federal holidays and better styling - Refactor customer profile and tank estimation components - Update all delivery and payment pages to use centralized services - Add utility functions for formatting and validation - Update Dockerfiles for better environment configuration - Enhance Tailwind config with custom design tokens UI Improvements: - Modern, premium design with glassmorphism effects - Improved form layouts with FloatingInput components - Better loading states and empty states - Enhanced modals and tables with consistent styling - Responsive design improvements across all pages Technical Improvements: - Strict TypeScript types throughout - Better error handling and validation - Removed deprecated api.js in favor of TypeScript services - Improved code organization and maintainability
96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<!-- src/pages/customer/list.vue -->
|
|
<template>
|
|
<div class="print-container">
|
|
<h1>Customer List</h1>
|
|
<table class="print-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Account Number</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Address</th>
|
|
<th>Town</th>
|
|
<th>Phone Number</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="customer in customers" :key="customer.account_number">
|
|
<td>{{ customer.account_number }}</td>
|
|
<td>{{ customer.customer_first_name }}</td>
|
|
<td>{{ customer.customer_last_name }}</td>
|
|
<td>{{ customer.customer_address }}</td>
|
|
<td>{{ customer.customer_town }}</td>
|
|
<td>{{ customer.customer_phone_number }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button onclick="window.print()" class="print-button">Print</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { adminService } from '../../services/adminService'
|
|
import { Customer } from '../../types/models'
|
|
|
|
// Reactive data
|
|
const customers = ref<Customer[]>([])
|
|
|
|
// Functions
|
|
const fetchCustomers = () => {
|
|
adminService.money.customerListReport()
|
|
.then((response) => {
|
|
if (response.data.ok) {
|
|
customers.value = response.data.customers;
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching customer data:', error);
|
|
});
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchCustomers();
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.print-container {
|
|
padding: 20px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.print-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.print-table th, .print-table td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.print-table th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.print-button {
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media print {
|
|
.print-button {
|
|
display: none;
|
|
}
|
|
.print-container {
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|