update component structure

src/components/Dialogs/ChangePasswordDialog.vue

@@ -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>

src/components/Menus/MenuSample.vue

@@ -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>

src/components/Navigation.vue

@@ -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>

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()

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({

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'
 

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>

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'