Added logout button

Dockerfile.prod

@@ -2,7 +2,6 @@
 
 FROM node:20.11.1 AS builder
 
-ENV TZ="America/New_York"
 
 ENV VITE_BASE_URL="http://192.168.1.204:9510"
 ENV VITE_PRINT_URL="http://192.168.1.204:9512"

src/layouts/headers/headerauth.vue

@@ -21,10 +21,21 @@
         <button class="btn bg-blue-700 btn-sm">Create Customer</button>
       </router-link>
 
-      <div v-if="employee.id">
-        <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
-          <div class="">{{ user.user_name }}</div>
-        </router-link>
+      <div v-if="employee.id" class="relative ">
+        <button @click="toggleDropdown" class="flex items-center gap-2 ">
+          <div>{{ user.user_name }}</div>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <div v-if="isDropdownOpen" class="absolute right-0 mt-2 w-48 bg-gray-800 border border-gray-300 rounded shadow-lg z-10">
+          <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }" class="block px-4 py-2 text-white hover:bg-gray-700" @click="closeDropdown">
+            User Profile
+          </router-link>
+          <button @click="logout" class="block w-full text-left px-4 py-2 text-white hover:bg-gray-700">
+            Logout
+          </button>
+        </div>
       </div>
     </div>
 
@@ -62,6 +73,7 @@ export default defineComponent({
         user_name: '',
       },
       company_id: 0,
+      isDropdownOpen: false,
       company: {
         creation_date: "",
         account_prefix: "",
@@ -239,12 +251,21 @@ export default defineComponent({
         .then((response: any) => {
           this.company = response.data;
           this.company_id = import.meta.env.VITE_COMPANY_ID
-   
-
         })
     },
+    toggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    },
+    closeDropdown() {
+      this.isDropdownOpen = false;
+    },
+    logout() {
+      localStorage.removeItem('auth_user');
+            localStorage.removeItem('auth_token');
+      this.$router.push('/login');
+    },
   },
 });
 </script>
 
-<style scoped></style>
+<style scoped></style>

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