replaced client/s with customer/s

pages/customers.vue

@@ -0,0 +1,103 @@
+<template>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+    </div>
+    <div id="content-body">
+      <CustomerTable v-if="onCustomerlist"/>
+      <Customer v-if="onCustomer"/>
+      <CustomerQuickAccess v-if="onCustomer"/>
+      <CustomerEmployeeList v-if="onEmployeelist"/>
+      <CustomerEmployee v-if="onEmployee"/>
+      <CustomerDepartmentList v-if="onDepartmentlist"/>
+      <CustomerDepartment v-if="onDepartment"/>
+      <CustomerDepartmentEmployeeList v-if="onDepartment"/>
+    </div>
+  </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+import CustomerTable from "../components/server/CustomerTable.vue";
+import Customer from "../components/server/Customer.vue";
+import CustomerQuickAccess from "../components/server/CustomerQuickAccess.vue";
+import CustomerEmployeeList from "../components/server/CustomerEmployeeList.vue";
+import CustomerEmployee from "../components/server/CustomerEmployee.vue";
+import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
+import CustomerDepartment from '~/components/server/CustomerDepartment.vue';
+import CustomerDepartmentEmployeeList from '~/components/server/CustomerDepartmentEmployeeList.vue';
+
+definePageMeta({
+  layout: 'default',
+  title: 'Customers'
+})
+
+const darkMode = ref(true)
+
+// to render the right components
+const onCustomerlist = ref(true)
+const onCustomer = ref(true)
+const onEmployeelist = ref(true)
+const onEmployee = ref(true)
+const onDepartmentlist = ref(true)
+const onDepartment = ref(true)
+</script>
+
+<script>
+export default {
+  name: "CustomersPage",
+}
+</script>
+  
+    
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
+
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
+
+#page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+}
+
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+</style>