feat: UI Customer Detail

src/pages/03_customer-management/MainPage.vue

@@ -20,7 +20,7 @@ import OtherInformation from 'src/components/03_customer-management/OtherInforma
 import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
-
+import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import useCustomerStore from 'src/stores/customer';
 
@@ -71,6 +71,7 @@ const profileFile = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
+const isMainPage = ref<boolean>(true);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -214,7 +215,7 @@ function undo() {
 </script>
 
 <template>
-  <div class="column q-pb-lg">
+  <div v-if="isMainPage" class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('customerManagement') }}
     </div>
@@ -309,7 +310,7 @@ function undo() {
               },
             ],
           }"
-          @enter-card="console.log('enter')"
+          @enter-card="isMainPage = false"
           @view-card="openDialogInputForm"
         />
         <UsersDetailCardComponent
@@ -337,6 +338,9 @@ function undo() {
       </div>
     </AppBox>
   </div>
+  <div v-else>
+    <CustomerInfoComponent @back="isMainPage = true" />
+  </div>
 
   <FormDialog
     v-model:modal="dialogCustomerType"
@@ -565,8 +569,6 @@ function undo() {
         </template>
 
         <template #address>
-          <!-- <FormCustomerBranch separator dense outlined /> -->
-
           <div class="col-3 app-text-muted">
             • {{ $t('formDialogCustomerBranch') }}
           </div>