Added logout button

src/pages/customer/list.vue

@@ -0,0 +1,113 @@
+<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.first_name }}</td>
+          <td>{{ customer.last_name }}</td>
+          <td>{{ customer.address }}</td>
+          <td>{{ customer.town }}</td>
+          <td>{{ customer.phone_number }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <button onclick="window.print()" class="print-button">Print</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import axios from 'axios';
+import authHeader from '../../services/auth.header';
+
+interface Customer {
+  account_number: string;
+  first_name: string;
+  last_name: string;
+  address: string;
+  town: string;
+  phone_number: string;
+}
+
+export default defineComponent({
+  name: 'CustomerList',
+  data() {
+    return {
+      customers: [] as Customer[]
+    };
+  },
+  created() {
+    this.fetchCustomers();
+  },
+  methods: {
+    fetchCustomers() {
+      let path = import.meta.env.VITE_BASE_URL + '/report/customers/list';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.customers = response.data.customers;
+          }
+        })
+        .catch((error: unknown) => {
+          console.error('Error fetching customer data:', error);
+        });
+    }
+  }
+});
+</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>

src/pages/customer/routes.ts

@@ -34,6 +34,11 @@ const customerRoutes = [
         name: 'TankEdit',
         component: TankEdit,
     },
+    {
+        path: '/customer/list/all',
+        name: 'customerList',
+        component: () => import('./list.vue'),
+    },
 ]
 
 export default customerRoutes