From 21fc2789ac8471ac7b4fadae9fdadd2919a3bffd Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 19 Oct 2023 09:32:47 +0700
Subject: [PATCH] update component structure

---
 src/assets/css/style.css                      | 132 ----------------
 .../{ => Buttons}/ButtonDropdown.vue          |   0
 .../{ => Buttons}/ButtonPrimary.vue           |   0
 .../Dialogs/ChangePasswordDialog.vue          | 148 ------------------
 src/components/Menus/MenuSample.vue           |  15 --
 src/components/Navigation.vue                 |   9 --
 .../{ => Navigation}/Aside/Aside.vue          |   4 +-
 .../Aside/AsideMenuMultiple.vue               |   2 +-
 .../Aside/AsideMenuSingle.vue                 |   0
 src/components/{ => Navigation}/Header.vue    |   2 +-
 src/components/Navigation/Navigation.vue      |   9 ++
 .../DaftarTransaksi/AktifIndividual.vue       |   4 +-
 src/components/{ => Pages}/HomeEmpty.vue      |   0
 .../{Menus => Pages}/MenuProvider.vue         |   0
 src/router/index.ts                           |  93 ++++++-----
 src/views/HomeView.vue                        |   4 +-
 src/views/LoginView.vue                       |   2 +-
 17 files changed, 64 insertions(+), 360 deletions(-)
 rename src/components/{ => Buttons}/ButtonDropdown.vue (100%)
 rename src/components/{ => Buttons}/ButtonPrimary.vue (100%)
 delete mode 100644 src/components/Dialogs/ChangePasswordDialog.vue
 delete mode 100644 src/components/Menus/MenuSample.vue
 delete mode 100644 src/components/Navigation.vue
 rename src/components/{ => Navigation}/Aside/Aside.vue (97%)
 rename src/components/{ => Navigation}/Aside/AsideMenuMultiple.vue (97%)
 rename src/components/{ => Navigation}/Aside/AsideMenuSingle.vue (100%)
 rename src/components/{ => Navigation}/Header.vue (99%)
 create mode 100644 src/components/Navigation/Navigation.vue
 rename src/components/{Menus => Pages}/DaftarTransaksi/AktifIndividual.vue (99%)
 rename src/components/{ => Pages}/HomeEmpty.vue (100%)
 rename src/components/{Menus => Pages}/MenuProvider.vue (100%)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 4266447..46bee00 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1027,10 +1027,6 @@ select {
   height: 0.5rem;
 }
 
-.h-2\.5 {
-  height: 0.625rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
@@ -1047,10 +1043,6 @@ select {
   height: 1.5rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-8 {
   height: 2rem;
 }
@@ -1063,10 +1055,6 @@ select {
   height: 2.7rem;
 }
 
-.h-\[74vh\] {
-  height: 74vh;
-}
-
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1096,10 +1084,6 @@ select {
   max-height: 1000px;
 }
 
-.min-h-0 {
-  min-height: 0px;
-}
-
 .min-h-full {
   min-height: 100%;
 }
@@ -1132,10 +1116,6 @@ select {
   width: 0.5rem;
 }
 
-.w-2\.5 {
-  width: 0.625rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
@@ -1164,10 +1144,6 @@ select {
   width: 1.5rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1200,14 +1176,6 @@ select {
   width: 1px;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
-.min-w-0 {
-  min-width: 0px;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1216,10 +1184,6 @@ select {
   max-width: 80rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1284,11 +1248,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-full {
-  --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1321,22 +1280,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-0 {
-  --tw-scale-x: 0;
-  --tw-scale-y: 0;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-y-0 {
-  --tw-scale-y: 0;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-y-100 {
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1459,11 +1402,6 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-divide-opacity));
-}
-
 .divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-divide-opacity));
@@ -1538,10 +1476,6 @@ select {
   border-width: 0px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
@@ -1576,10 +1510,6 @@ select {
   border-style: solid;
 }
 
-.border-dashed {
-  border-style: dashed;
-}
-
 .border-black\/\[\.1\] {
   border-color: rgb(0 0 0 / .1);
 }
@@ -1589,11 +1519,6 @@ select {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1643,11 +1568,6 @@ select {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1846,11 +1766,6 @@ select {
   padding-right: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1958,10 +1873,6 @@ select {
   padding-top: 0.5rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -1984,11 +1895,6 @@ select {
   line-height: 2.25rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -2318,12 +2224,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .ring-inset {
   --tw-ring-inset: inset;
 }
@@ -2342,11 +2242,6 @@ select {
   --tw-ring-color: transparent;
 }
 
-.ring-white {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-}
-
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -2371,12 +2266,6 @@ select {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-blur-sm {
-  --tw-backdrop-blur: blur(4px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2413,14 +2302,6 @@ select {
   transition-delay: 300ms;
 }
 
-.delay-200 {
-  transition-delay: 200ms;
-}
-
-.delay-150 {
-  transition-delay: 150ms;
-}
-
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -2998,11 +2879,6 @@ select {
     padding-right: 1rem;
   }
 
-  .sm\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .sm\:py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
@@ -3048,10 +2924,6 @@ select {
     --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
-  .sm\:duration-700 {
-    transition-duration: 700ms;
-  }
 }
 
 @media (min-width: 768px) {
@@ -3226,10 +3098,6 @@ select {
     padding-right: 2rem;
   }
 
-  .lg\:pl-10 {
-    padding-left: 2.5rem;
-  }
-
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
diff --git a/src/components/ButtonDropdown.vue b/src/components/Buttons/ButtonDropdown.vue
similarity index 100%
rename from src/components/ButtonDropdown.vue
rename to src/components/Buttons/ButtonDropdown.vue
diff --git a/src/components/ButtonPrimary.vue b/src/components/Buttons/ButtonPrimary.vue
similarity index 100%
rename from src/components/ButtonPrimary.vue
rename to src/components/Buttons/ButtonPrimary.vue
diff --git a/src/components/Dialogs/ChangePasswordDialog.vue b/src/components/Dialogs/ChangePasswordDialog.vue
deleted file mode 100644
index 575e74c..0000000
--- a/src/components/Dialogs/ChangePasswordDialog.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
-import {
-    CheckIcon,
-    ExclamationTriangleIcon, InformationCircleIcon, QuestionMarkCircleIcon,
-} from '@heroicons/vue/24/outline'
-import { XMarkIcon } from '@heroicons/vue/24/solid';
-import { ref, watch } from 'vue';
-import InputText from '../InputText.vue';
-import ButtonPrimary from '../ButtonPrimary.vue';
-import { dispatchNotification } from '../Notification';
-
-const props = defineProps({ open: Boolean });
-const emits = defineEmits(['onClose']);
-const open = ref(props.open)
-const oldPassword = ref('');
-const password = ref('');
-const passwordConfirmation = ref('');
-const isLoading = ref(false);
-
-function close() {
-    open.value = false;
-    emits('onClose', false);
-}
-
-function showLoading() {
-    isLoading.value = true;
-}
-
-function hideLoading() {
-    isLoading.value = false;
-}
-
-function handleOnChangePassword() {
-    if (oldPassword.value == '') {
-        dispatchNotification({
-            title: 'Peringatan',
-            content: 'Password lama tidak boleh kosong',
-            type: 'error',
-        })
-    } else if (password.value == '') {
-        dispatchNotification({
-            title: 'Peringatan',
-            content: 'Password baru tidak boleh kosong',
-            type: 'error',
-        })
-    } else if (passwordConfirmation.value == '') {
-        dispatchNotification({
-            title: 'Peringatan',
-            content: 'Konfirmasi password tidak boleh kosong',
-            type: 'error',
-        })
-    } else if (password.value != passwordConfirmation.value) {
-        dispatchNotification({
-            title: 'Peringatan',
-            content: 'Password baru dan konfirmasi password tidak sama',
-            type: 'error',
-        })
-    } else if (oldPassword.value == password.value) {
-        dispatchNotification({
-            title: 'Peringatan',
-            content: 'Password baru tidak boleh sama dengan password lama',
-            type: 'error',
-        })
-    } else {
-        showLoading();
-        setTimeout(() => {
-            hideLoading();
-            close();
-        }, 15000);
-    }
-
-}
-
-watch(() => props.open, (value) => {
-    open.value = value;
-});
-
-</script>
-
-<template>
-    <!-- Log Out Dialog -->
-    <TransitionRoot as="template" :show="open">
-        <Dialog as="div" class="relative z-20" @close="close">
-            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
-            </TransitionChild>
-
-            <div class="fixed inset-0 z-10 overflow-y-auto">
-                <div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
-                    <TransitionChild as="template" enter="ease-out duration-300"
-                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-                        leave-from="opacity-100 translate-y-0 sm:scale-100"
-                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                        <DialogPanel
-                            class="relative p-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:max-w-sm sm:p-6 sm:my-8 sm:w-full">
-                            <form @submit.prevent="handleOnChangePassword" class="flex flex-col">
-                                <div class="absolute top-0 right-0 pt-4 pr-4 ">
-                                    <button type="button"
-                                        class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-0"
-                                        @click="close">
-                                        <span class="sr-only">Close</span>
-                                        <XMarkIcon class="w-6 h-6" aria-hidden="true" />
-                                    </button>
-                                </div>
-                                <div>
-                                    <DialogTitle as="h4" class="font-medium leading-6 text-gray-900 text-md">
-                                        Ubah Password
-                                    </DialogTitle>
-                                    <div class="flex flex-col mt-2">
-                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
-                                            Password Lama
-                                        </label>
-                                        <InputText type="password" class-name="mb-3 text-sm placeholder:text-sm"
-                                            placeholder="Masukan Password lama" :value="oldPassword"
-                                            @update:value="oldPassword = $event" />
-
-                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
-                                            Password Baru
-                                        </label>
-                                        <InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
-                                            placeholder="Masukan Password baru" :value="password"
-                                            @update:value="password = $event" />
-
-                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
-                                            Konfirmasi Password
-                                        </label>
-                                        <InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
-                                            placeholder="Konfirmasi Password" :value="passwordConfirmation"
-                                            @update:value="passwordConfirmation = $event" />
-                                    </div>
-                                </div>
-                                <!-- Footer Section -->
-                                <div class="mt-2">
-                                    <ButtonPrimary
-                                        class-name="inline-flex justify-center w-full px-4 py-2 font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm text-md focus:outline-none focus:ring-0 sm:text-sm"
-                                        type="submit" label="Ubah Password" :disabled="isLoading" :is-loading="isLoading" />
-                                </div>
-                            </form>
-                        </DialogPanel>
-                    </TransitionChild>
-                </div>
-            </div>
-        </Dialog>
-    </TransitionRoot>
-</template>
\ No newline at end of file
diff --git a/src/components/Menus/MenuSample.vue b/src/components/Menus/MenuSample.vue
deleted file mode 100644
index ae28745..0000000
--- a/src/components/Menus/MenuSample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div class="mx-auto max-w-7xl">
-        <div class="border-4 border-gray-200 border-dashed rounded-lg h-[74vh]">
-            <div class="flex items-center justify-center h-full">
-                <div class="text-center">
-                    <h1 class="text-4xl font-bold text-gray-900">Menu Sample</h1>
-                    <p class="mt-2 text-lg text-gray-600">This is a sample menu page.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
deleted file mode 100644
index 01908b9..0000000
--- a/src/components/Navigation.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import Aside from '@/components/Aside/Aside.vue'
-import Header from '@/components/Header.vue'
-</script>
-
-<template>
-    <Header />
-    <Aside />
-</template>
\ No newline at end of file
diff --git a/src/components/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
similarity index 97%
rename from src/components/Aside/Aside.vue
rename to src/components/Navigation/Aside/Aside.vue
index f75bfcb..3cc2573 100644
--- a/src/components/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -10,8 +10,8 @@ import {
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { useMenuStore } from '@/stores/menu'
 import { IconApp } from '@/utils/icons'
-import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
-import AsideMenuMultiple from '@/components/Aside/AsideMenuMultiple.vue'
+import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
+import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
 import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
 
 const menu = useMenuStore()
diff --git a/src/components/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
similarity index 97%
rename from src/components/Aside/AsideMenuMultiple.vue
rename to src/components/Navigation/Aside/AsideMenuMultiple.vue
index 2247da9..21e48ca 100644
--- a/src/components/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -4,7 +4,7 @@ import type { MenuItemModel } from '@/utils/interfaces'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
 import { DotOutline } from '@/utils/icons'
-import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
+import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 const menu = useMenuStore()
 
 const props = defineProps({
diff --git a/src/components/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
similarity index 100%
rename from src/components/Aside/AsideMenuSingle.vue
rename to src/components/Navigation/Aside/AsideMenuSingle.vue
diff --git a/src/components/Header.vue b/src/components/Navigation/Header.vue
similarity index 99%
rename from src/components/Header.vue
rename to src/components/Navigation/Header.vue
index 2719906..d9c5e84 100644
--- a/src/components/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -14,7 +14,7 @@ import {
     Bars3BottomLeftIcon
 } from '@heroicons/vue/24/outline'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
-import PictureInitial from './PictureInitial.vue'
+import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
 import { IconApp } from '@/utils/icons'
 
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
new file mode 100644
index 0000000..b0d0aa6
--- /dev/null
+++ b/src/components/Navigation/Navigation.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Aside from '@/components/Navigation/Aside/Aside.vue'
+import Header from '@/components/Navigation/Header.vue'
+</script>
+
+<template>
+    <Header />
+    <Aside />
+</template>
\ No newline at end of file
diff --git a/src/components/Menus/DaftarTransaksi/AktifIndividual.vue b/src/components/Pages/DaftarTransaksi/AktifIndividual.vue
similarity index 99%
rename from src/components/Menus/DaftarTransaksi/AktifIndividual.vue
rename to src/components/Pages/DaftarTransaksi/AktifIndividual.vue
index a6b7be5..c328b0b 100644
--- a/src/components/Menus/DaftarTransaksi/AktifIndividual.vue
+++ b/src/components/Pages/DaftarTransaksi/AktifIndividual.vue
@@ -202,8 +202,8 @@ import {
 } from 'devextreme-vue/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import 'devextreme/data/odata/store';
-import ButtonDropdown from '@/components/ButtonDropdown.vue';
-import ButtonPrimary from '@/components/ButtonPrimary.vue';
+import ButtonDropdown from '@/components/Buttons/ButtonDropdown.vue';
+import ButtonPrimary from '@/components/Buttons/ButtonPrimary.vue';
 import InputText from '@/components/InputText.vue';
 import { MagnifyingGlassIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
 import { XMarkIcon } from '@heroicons/vue/24/outline'
diff --git a/src/components/HomeEmpty.vue b/src/components/Pages/HomeEmpty.vue
similarity index 100%
rename from src/components/HomeEmpty.vue
rename to src/components/Pages/HomeEmpty.vue
diff --git a/src/components/Menus/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
similarity index 100%
rename from src/components/Menus/MenuProvider.vue
rename to src/components/Pages/MenuProvider.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index a20bc75..ea92b87 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,9 +3,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
-import MenuSample from '@/components/Menus/MenuSample.vue'
-import AktifIndividual from '@/components/Menus/DaftarTransaksi/AktifIndividual.vue'
-import HomeEmptyView from '@/components/HomeEmpty.vue'
+import AktifIndividual from '@/components/Pages/DaftarTransaksi/AktifIndividual.vue'
+import EmptyPage from '@/components/Pages/HomeEmpty.vue'
 import { useAuthStore } from '@/stores/auth'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,7 +19,7 @@ const router = createRouter({
         {
           path: '',
           name: 'Home Page',
-          component: HomeEmptyView,
+          component: EmptyPage,
         },
         {
           path: 'daftar-transaksi',
@@ -34,72 +33,72 @@ const router = createRouter({
             {
               path: 'aktif-pln-mobile',
               name: 'Transaksi Aktif PLN Mobile',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'periksa-return-order',
               name: 'Transaksi Aktif Periksa dan Return Order',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'aktif-tm',
               name: 'Transaksi Aktif TM',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'aktif-historis',
               name: 'Transaksi Aktif Historis',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-alih-unit',
               name: 'Monitoring Alih Unit',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-all',
               name: 'Monitoring All',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-tiket',
               name: 'Monitoring Tiket',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-history',
               name: 'Monitoring History',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-aktif',
               name: 'Monitoring Aktif',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-close-cc',
               name: 'Monitoring Close CC',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-log-autodispatch',
               name: 'Monitoring Log AutoDispatch',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-perlu-diperhatikan',
               name: 'Monitoring yang Perlu Diperhatikan',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-log-break-regu',
               name: 'Monitoring Log Break Regu',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'monitoring-log-alih-regu',
               name: 'Monitoring Log Alih Regu',
-              component: MenuSample,
+              component: EmptyPage,
             },
           ]
         },
@@ -114,17 +113,17 @@ const router = createRouter({
                 {
                   path: 'log-login',
                   name: 'Log Login',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'log-aktivity',
                   name: 'Log Aktivity',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'log-error',
                   name: 'Log Error',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
               ],
             },
@@ -135,42 +134,42 @@ const router = createRouter({
                 {
                   path: 'menu-management',
                   name: 'Menu Management',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'system-parameter',
                   name: 'System Parameter',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'ubah-profile-manager',
                   name: 'Ubah Profile Manager',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'security-projek',
                   name: 'Security Projek',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'user-role-manager',
                   name: 'User Role Manager',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'menu-authorization',
                   name: 'Menu Authorization',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'workflow-designer',
                   name: 'Workflow Designer',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'apkt-news',
                   name: 'APKT News',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
               ],
             },
@@ -181,12 +180,12 @@ const router = createRouter({
                 {
                   path: 'zone-borderless',
                   name: 'Zone Borderless',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
                 {
                   path: 'user-zone-borderless',
                   name: 'User Zone Borderless',
-                  component: MenuSample,
+                  component: EmptyPage,
                 },
               ],
             },
@@ -199,52 +198,52 @@ const router = createRouter({
             {
               path: 'unit',
               name: 'Unit',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'unit-jaringan',
               name: 'Unit Jaringan',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'unit-pelayanan',
               name: 'Unit Pelayanan',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'regu-yantek',
               name: 'Regu Yantek',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'gardu-induk',
               name: 'Gardu Induk',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'gardu-penyulang-tm',
               name: 'Gardu Penyulang TM',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'gardu-distribusi',
               name: 'Gardu Distribusi',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'group-gangguan',
               name: 'Group Gangguan',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'wilayah-yantek',
               name: 'Wilayah Yantek',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'material',
               name: 'Material',
-              component: MenuSample,
+              component: EmptyPage,
             },
           ]
         },
@@ -255,32 +254,32 @@ const router = createRouter({
             {
               path: 'gangguan-dan-keluhan',
               name: 'Gangguan dan Keluhan',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'gangguan-tegangan-menengah',
               name: 'Gangguan Tegangan Menengah',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'pemadaman-terencana',
               name: 'Pemadaman Terencana',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'aplikasi-off-line',
               name: 'Aplikasi Off-Line',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'penugasan-khusus',
               name: 'Penugasan Khusus',
-              component: MenuSample,
+              component: EmptyPage,
             },
             {
               path: 'mutasi-pengaduan',
               name: 'Mutasi Pengaduan',
-              component: MenuSample,
+              component: EmptyPage,
             },
           ]
         },
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c52a1a6..758292a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import MenuProvider from '@/components/Menus/MenuProvider.vue'
-import Navigation from '@/components/Navigation.vue'
+import MenuProvider from '@/components/Pages/MenuProvider.vue'
+import Navigation from '@/components/Navigation/Navigation.vue'
 import { useMenuStore } from '@/stores/menu'
 import { RouterView } from 'vue-router'
 const menu = useMenuStore()
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 95a430c..16f1669 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -2,7 +2,7 @@
 import { useAuthStore } from '@/stores/auth'
 import Icon from '@/assets/images/pln-with-text.png'
 import Hero from '@/assets/images/hero.png'
-import Button from '@/components/ButtonPrimary.vue'
+import Button from '@/components/Buttons/ButtonPrimary.vue'
 import InputText from '@/components/InputText.vue'
 import { onMounted } from 'vue'