defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:defuj/eis

Browse Source
This commit is contained in:
kur0nek-o
2023-10-24 13:57:35 +07:00
parent 43b8bd5bb1 1885f28d62
commit 9f1e91c253
42 changed files with 1569 additions and 1812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/components/Aside/Aside.vue
View File

@ -1,255 +0,0 @@
<script setup lang="ts">
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { RouterLink } from 'vue-router'
import { ref } from 'vue'
import {
Dialog,
DialogPanel,
Disclosure,
DisclosureButton,
DisclosurePanel,
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import { useMenuStore } from '@/stores/menu'
import { IconApp } from '@/utils/icons'
import AsideMenuSingle from './AsideMenuSingle.vue'
import type { MenuItemModel } from '@/utils/interfaces'
const menu = useMenuStore()
const route = useRoute()
const navigation = ref<MenuItemModel[]>(menu.navigation)
const menuSelected = ref(route.fullPath)
watch(route, (to, _) => {
menuSelected.value = to.fullPath
closeSideBar()
})
const isMenu = (name: string) => {
return menuSelected.value === name
}
const closeSideBar = () => menu.toggleSidebar()
</script>
<template>
<TransitionRoot as="template" :show="menu.sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
enter-from="-translate-x-full" enter-to="translate-x-0"
leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
leave-to="-translate-x-full">
<DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
leave-to="opacity-0">
<div class="absolute top-0 right-0 pt-2 -mr-12">
<button type="button"
class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@click="closeSideBar">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="flex items-center flex-shrink-0 px-4">
<RouterLink to="/">
<img class="w-auto h-16" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<div class="flex-1 h-0 mt-5 overflow-y-auto">
<nav class="px-2 space-y-1">
<template v-for="item in navigation" :key="item.name">
<div v-if="!item.children || item.children.length === 0">
<AsideMenuSingle :item="item" :is-menu-selected="isMenu(item.href)" />
<!-- Single-level item -->
<!-- <RouterLink :to="item.href"
:class="[isMenu(item.href) ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
<component :is="item.icon"
:class="[isMenu(item.href) ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']"
aria-hidden="true" />
{{ item.name }}
</RouterLink> -->
</div>
<Disclosure v-else
v-bind:default-open="item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? true : false">
<!-- Nested item with children -->
<template v-slot="{ open }">
<DisclosureButton
:class="[item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500']">
<embed :data="item.icon"
:class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
<svg :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none"
aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
:fill="item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? '#14A2BA' : '#647375'" />
</svg>
</DisclosureButton>
<DisclosurePanel class="space-y-1">
<!-- Nested children -->
<template v-for="subItem in item.children" :key="subItem.name">
<div v-if="subItem.children.length === 0">
<!-- Single-level child -->
<!-- <RouterLink :to="subItem.href"
:class="[isMenu(subItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-11/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
{{ subItem.name }}
</RouterLink> -->
<AsideMenuSingle :item="subItem"
:is-menu-selected="isMenu(subItem.href)" :is-children="true" />
</div>
<Disclosure v-else
:default-open="subItem.children.find((d: any) => d.href === menuSelected) ? true : false">
<!-- Nested child with children -->
<template v-slot="{ open }">
<DisclosureButton
:class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-11/12 flex items-center px-2 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500 ml-auto']">
<span class="flex-1">{{ subItem.name }}</span>
<svg :class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none"
aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
:fill="subItem.children.find((d: any) => d.href === menuSelected) ? '#14A2BA' : '#647375'" />
</svg>
</DisclosureButton>
<DisclosurePanel class="space-y-1 pl-11">
<!-- Nested children of nested child -->
<!-- <RouterLink v-for="nestedSubItem in subItem.children"
:key="nestedSubItem.name" :to="nestedSubItem.href"
:class="[isMenu(nestedSubItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-12/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
{{ nestedSubItem.name }}
</RouterLink> -->
<AsideMenuSingle v-for="nestedSubItem in subItem.children"
:key="nestedSubItem.name" :item="nestedSubItem"
:is-menu-selected="isMenu(nestedSubItem.href)"
:is-children="true" />
</DisclosurePanel>
</template>
</Disclosure>
</template>
</DisclosurePanel>
</template>
</Disclosure>
</template>
</nav>
</div>
</DialogPanel>
</TransitionChild>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="z-10 hidden bg-primary-50 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex items-center flex-shrink-0 h-16 px-5">
<RouterLink to="/">
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<div class="flex flex-col flex-grow hover:overflow-y-auto">
<div class="flex flex-col flex-grow mt-5">
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in navigation" :key="item.name">
<div v-if="item.children.length === 0">
<!-- Single-level item -->
<AsideMenuSingle :item="item" :is-menu-selected="isMenu(item.href)" />
</div>
<Disclosure v-slot="{ open }" v-else
v-bind:default-open="item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? true : false">
<!-- Nested item with children -->
<DisclosureButton
:class="[item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500']">
<embed :src="item.icon"
:class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
<svg :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
:fill="item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? '#14A2BA' : '#647375'" />
</svg>
</DisclosureButton>
<transition enter-active-class="overflow-hidden transition-all duration-300"
enter-from-class="transform scale-95 opacity-0 max-h-0"
enter-to-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0">
<DisclosurePanel class="space-y-1">
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<div v-if="!subItem.children || subItem.children.length === 0">
<!-- Single-level child -->
<AsideMenuSingle :item="subItem" :is-children="true"
:is-menu-selected="isMenu(subItem.href)" />
</div>
<Disclosure :key="subItem.href + index" v-slot="{ open }" v-else
:default-open="subItem.children.find((d: any) => d.href === menuSelected) ? true : false">
<!-- Nested child with children -->
<DisclosureButton
:class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-11/12 flex items-center px-2 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500 ml-auto']">
<span class="flex-1">{{ subItem.name }}</span>
<svg :class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none"
aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
:fill="subItem.children.find((d: any) => d.href === menuSelected) ? '#14A2BA' : '#647375'" />
</svg>
</DisclosureButton>
<transition enter-active-class="overflow-hidden transition-all duration-300"
enter-from-class="transform scale-95 opacity-0 max-h-0"
enter-to-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0">
<DisclosurePanel class="space-y-1 pl-11">
<!-- Nested children of nested child -->
<AsideMenuSingle v-for="nestedSubItem in subItem.children"
:item="nestedSubItem" :is-children="true"
:is-menu-selected="isMenu(subItem.href)" />
</DisclosurePanel>
</transition>
</Disclosure>
</template>
</DisclosurePanel>
</transition>
</Disclosure>
</template>
</nav>
</div>
</div>
</div>
</template>

29
src/components/Aside/AsideMenuSingle.vue
View File

@ -1,29 +0,0 @@
<script setup lang="ts">
import { defineProps } from 'vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { DotOutline } from '@/utils/icons';
defineProps({
item: {
type: Object as () => MenuItemModel,
required: true
},
isMenuSelected: {
type: Boolean,
required: true
},
isChildren: {
type: Boolean,
default: false
}
})
</script>
<template>
<RouterLink :to="item.href"
:class="[isMenuSelected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
<embed :src="isChildren ? DotOutline : item.icon" type="image/svg+xml"
:class="[isMenuSelected ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']">
{{ item.name }}
</RouterLink>
</template>

18
src/components/Aside/AsideMenuSingleMultiple.vue
View File

@ -1,18 +0,0 @@
<script setup lang="ts">
import { defineProps } from 'vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
defineProps({
item: {
type: Object as () => MenuItemModel,
required: true
},
isMenuSelected: {
type: Boolean,
required: true
}
})
</script>
<template></template>

0
src/components/ButtonDropdown.vue → src/components/Buttons/ButtonDropdown.vue
View File

0
src/components/ButtonPrimary.vue → src/components/Buttons/ButtonPrimary.vue
View File

2
src/components/CommandPalettes.vue
View File

@ -176,7 +176,7 @@ function readRecentMenu() {
function openMenu(menu: typeof menus[0]) {
addMenuToRecent(menu)
route.push(menu.href)
route.push(menu.path)
onClose()
}

148
src/components/Dialogs/ChangePasswordDialog.vue
View File

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

170
src/components/Header.vue
View File

@ -1,170 +0,0 @@
<script setup lang="ts">
import CommandPalettes from '@/components/CommandPalettes.vue'
import MessageBox from '@/components/MessageBox.vue'
import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
import { useMessageStore } from '@/stores/message'
import { useMenuStore } from '@/stores/menu'
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
} from '@headlessui/vue'
import {
BookOpenIcon,
ChatBubbleOvalLeftEllipsisIcon,
QuestionMarkCircleIcon,
Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import { onMounted, onUnmounted, ref } from 'vue'
import PictureInitial from './PictureInitial.vue'
import Icon from '@/assets/images/pln-with-text.png'
import { useDialogStore } from '@/stores/dialog'
const authStore = useAuthStore()
const userStore = useUserStore()
const messageStore = useMessageStore()
const commandStore = useCommandPalattesStore()
const menu = useMenuStore()
const dialog = useDialogStore()
const openSideBar = () => menu.toggleSidebar()
const dialogChangePassword = ref(false)
const handleOnDismissDialogChangePassword = () => {
dialogChangePassword.value = false
}
const showDialogChangePassword = () => {
dialogChangePassword.value = true
}
const showDialogLogout = () => {
dialog.type = 'error'
dialog.title = 'Logout dari akun?'
dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
dialog.cancelText = 'Batalkan'
dialog.confirmText = 'Ya, logout'
dialog.showCancelButton = true
dialog.onConfirm = () => {
window.location.href = '/login'
}
dialog.open = true
}
</script>
<template>
<div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
<button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
<span class="sr-only">Open sidebar</span>
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
</button>
<div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
<img class="w-auto h-11" :src="Icon" alt="PLN" />
</div>
<div class="flex justify-end w-full px-4">
<!-- <div class="flex flex-1">
<div class="flex w-full md:ml-0">
<button @click="commandStore.showCommandPalettes"
class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
<span class="hidden ml-2 sm:text-sm md:block">Cari menu...</span>
</div>
</button>
<img :src="Icon" alt="pln" class="md:hidden">
</div>
</div> -->
<div class="flex items-center ml-4 md:ml-6">
<!-- <button type="button"
class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">FAQ</span>
<QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
</button>
<button type="button"
class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Manual Book</span>
<BookOpenIcon class="w-6 h-6" aria-hidden="true" />
</button>
<button type="button" @click="messageStore.showDialogMessageBox"
class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Message</span>
<ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
</button> -->
<button @click="commandStore.showCommandPalettes" type="button"
class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Search</span>
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
<span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
</button>
<!-- Profile dropdown -->
<Menu as="div" class="relative ml-1">
<div>
<MenuButton
class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
<span class="sr-only">Open user menu</span>
<PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
font-class="text-xs font-bold text-primary-500" :name="userStore.user_name" />
<span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
{{ userStore.user_name }}
</span>
</MenuButton>
</div>
<transition enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
<MenuItems
class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
<div class="flex items-center">
<div>
<!-- <img class="inline-block rounded-full h-9 w-9" :src="userStore.user_image" alt="" /> -->
<PictureInitial class-name="nline-block" size-class="w-9 h-9"
background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
:name="userStore.user_name" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
{{ userStore.user_name }}
</p>
<p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
{{ userStore.user_access }}
</p>
</div>
</div>
</div>
<MenuItem v-slot="{ active }">
<button @click="showDialogChangePassword"
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
Ubah Password
</button>
</MenuItem>
<MenuItem v-slot="{ active }">
<button @click="showDialogLogout"
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
Log out
</button>
</MenuItem>
</MenuItems>
</transition>
</Menu>
</div>
</div>
</div>
<ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
<CommandPalettes :open="commandStore.open" @onClose="commandStore.handleOnDismissCommandPalettes" />
<MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
</template>

17
src/components/HomeEmpty.vue
View File

@ -1,17 +0,0 @@
<template>
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
<DocumentArrowUpIcon class="w-12 h-12 mx-auto text-gray-400" aria-hidden="true" />
<h3 class="mt-2 font-bold text-gray-900 whitespace-pre-wrap text-md">
Cari menu? Ctrl + F
</h3>
<p class="mt-1 text-sm text-gray-600 whitespace-pre-wrap ">
Gunakan kombinasi tombol Ctrl + F untuk mencari menu yang kamu inginkan.
</p>
</div>
</template>
<script setup lang="ts">
import { DocumentArrowUpIcon } from '@heroicons/vue/24/outline';
</script>

15
src/components/Menus/MenuSample.vue
View File

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

177
src/components/MessageBox.vue
View File

@ -1,177 +0,0 @@
<template>
<TransitionRoot as="template" :show="open">
<Dialog as="div" class="relative z-10" @close="close">
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur-sm" />
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden ">
<div class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none lg:pl-10">
<TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700"
enter-from="translate-x-full" enter-to="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0"
leave-to="translate-x-full">
<DialogPanel class="w-screen max-w-sm pointer-events-auto">
<div class="flex flex-col h-full bg-white shadow-xl">
<div class="flex flex-col flex-1 min-h-0 ">
<div class="flex items-center w-full h-16 px-4 bg-white sm:px-6 drop-shadow-sm">
<div class="flex items-start justify-between w-full">
<DialogTitle v-if="peopleIndexSelected !== null"
class="text-sm font-medium text-gray-900">
<PictureInitial class-name="mr-2" background-class="bg-primary-400"
font-class="font-medium text-white text-md"
:name="people[peopleIndexSelected].name" />
{{ people[peopleIndexSelected].name }}
</DialogTitle>
<DialogTitle v-else class="font-medium text-gray-900 text-md">
Team
</DialogTitle>
<div class="flex items-center ml-3 h-7 ">
<button type="button"
class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:ring-0 "
@click="peopleIndexSelected === null ? close() : selectPeople(null)">
<span class="sr-only">Close panel</span>
<XMarkIcon class="w-6 h-6" aria-hidden="true" />
</button>
</div>
</div>
</div>
<div class="flex-1 overflow-y-auto bg-layout">
<div v-if="peopleIndexSelected !== null"
class="flex flex-col items-center justify-center h-full px-4 sm:px-6"
aria-hidden="true">
<ChatBubbleLeftRightIcon class="w-12 h-12 mx-auto text-gray-400"
aria-hidden="true" />
<h3
class="mt-2 font-bold text-center text-gray-900 whitespace-pre-wrap text-md">
Tidak ada percakapan
</h3>
<p class="mt-1 text-sm text-center text-gray-600 whitespace-pre-wrap ">
Mulai percakapan dengan <b>{{ people[peopleIndexSelected].name }}</b>
untuk melihat percakapan disini.
</p>
</div>
<div v-else class="h-full bg-white" aria-hidden="true">
<ul role="list" class="flex-1 overflow-y-auto divide-y divide-gray-50">
<li v-for="(person, index) in people" :key="person.id"
class="cursor-pointer" @click="selectPeople(index)">
<div class="relative flex items-center px-5 py-3 group">
<div class="flex-1 block p-1 -m-1">
<div class="absolute inset-0 group-hover:bg-primary-100"
aria-hidden="true" />
<div class="relative flex items-center flex-1 min-w-0">
<span class="relative flex-shrink-0 inline-block">
<PictureInitial size-class="w-10 h-10"
background-class="bg-primary-400"
font-class="font-medium text-white text-md"
:name="person.name" />
<span
:class="[person.online ? 'bg-green-400' : 'bg-gray-300', 'absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white']"
aria-hidden="true" />
</span>
<div class="ml-4 truncate">
<p
class="text-sm font-medium text-gray-900 truncate">
{{ person.name }}</p>
<p class="text-sm text-gray-500 truncate">
@User</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full px-4 py-4 shadow" v-if="peopleIndexSelected !== null">
<form @submit.prevent="messageStore.send"
class="flex items-center justify-between flex-shrink-0">
<InputText class-name="w-full mr-4 py-2 px-4" placeholder="Tulis pesan di sini"
:value="messageStore.message"
@update:value="messageStore.message = $event" />
<button type="submit" :disabled="messageStore.isSending"
class="text-sm font-bold text-white bg-transparent border-transparent rounded-full w-7 h-7 focus:outline-0 focus:ring-0">
<PaperAirplaneIcon class="pointer-events-none w-7 h-7 text-primary-500"
aria-hidden="true" />
</button>
</form>
</div>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import { useMessageStore } from '@/stores/message';
import { ChatBubbleLeftRightIcon, DocumentArrowUpIcon, PaperAirplaneIcon } from '@heroicons/vue/24/solid';
import InputText from '@/components/InputText.vue'
import PictureInitial from '@/components/PictureInitial.vue'
const messageStore = useMessageStore()
const props = defineProps({ open: Boolean })
const emit = defineEmits(['onClose'])
const open = ref(props.open)
const peopleIndexSelected = ref(null)
const people = [
{
id: 1,
name: 'Ajeng Sindia',
image: 'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
{
id: 2,
name: 'Jamaludin',
image: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
{
id: 3,
name: 'Kumara',
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
{
id: 4,
name: 'Bellayanti',
image: 'https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
{
id: 5,
name: 'Jefri',
image: 'https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
{
id: 6,
name: 'Kinanti',
image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
online: false
},
]
function selectPeople(value: any) {
peopleIndexSelected.value = value
}
function close() {
open.value = false
emit('onClose')
}
watch(() => props.open, (value) => {
open.value = value;
});
</script>

9
src/components/Navigation.vue
View File

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

133
src/components/Navigation/Aside/Aside.vue Normal file
View File

@ -0,0 +1,133 @@
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRoute, RouterLink, useRouter } from 'vue-router'
import {
Dialog,
DialogPanel,
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import { useMenuStore } from '@/stores/menu'
import { IconApp } from '@/utils/icons'
import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
import { splitRoutePath } from '@/utils/texts'
const menu = useMenuStore()
const route = useRoute()
const router = useRouter()
watch(route, (to, _) => {
menu.menuSelected = to.fullPath
closeSideBar()
})
onMounted(() => {
menu.menuSelected = router.currentRoute.value.fullPath
if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
const result = splitRoutePath(menu.menuSelected)
for (const route of result) {
if (route !== '/home') {
menu.toggleSidebarMenu(route, true)
}
}
}
})
const isMenu = (name: string) => {
return menu.menuSelected === name
}
const closeSideBar = () => menu.toggleSidebar()
</script>
<template>
<TransitionRoot as="template" :show="menu.sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
enter-from="-translate-x-full" enter-to="translate-x-0"
leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
leave-to="-translate-x-full">
<DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
leave-to="opacity-0">
<div class="absolute top-0 right-0 pt-2 -mr-12">
<button type="button"
class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@click="closeSideBar">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="flex items-center flex-shrink-0 px-4">
<RouterLink to="/">
<img class="w-auto h-16" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<div class="flex-1 h-0 mt-5 overflow-y-auto">
<nav class="px-2 space-y-1">
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item"
:selected="isMenu(item.path)" />
<!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template>
</nav>
</div>
</DialogPanel>
</TransitionChild>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-row items-center flex-shrink-0 h-16 px-2 bg-primary-50">
<button type="button"
class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 focus:outline-none focus:ring-0"
@click="menu.toggleSidebarDesktop()">
<span class="sr-only">Open sidebar</span>
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
</button>
<RouterLink to="/">
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<span v-if="menu.sidebarShowed" class="px-4 mt-4 text-sm font-semibold text-primary-800">
Menu
</span>
<div :class="[menu.sidebarShowed ? 'flex flex-col flex-grow overflow-y-auto' : 'hidden', '']">
<div class="flex flex-col flex-grow mt-3">
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />
<!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template>
</nav>
</div>
</div>
</div>
</template>
@/utils/text@/utils/texts

74
src/components/Navigation/Aside/AsideMenuMultiple.vue Normal file
View File

@ -0,0 +1,74 @@
<script setup lang="ts">
import { computed } from 'vue'
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/Navigation/Aside/AsideMenuSingle.vue'
const menu = useMenuStore()
const props = defineProps({
item: {
type: Object as () => MenuItemModel,
required: true
},
selected: {
type: Boolean,
required: true
},
isChildren: {
type: Boolean,
default: false
}
})
const isMenu = (name: string) => {
return menu.menuSelected === name
}
const isMenuSelected = computed(() => {
return props.item.children.find((d) => d.path === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.path === menu.menuSelected))
})
</script>
<template>
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children -->
<DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<embed :src="isChildren ? DotOutline : item.icon"
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
<svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
:fill="isMenuSelected ? '#14A2BA' : '#647375'" />
</svg>
</DisclosureButton>
<transition enter-active-class="overflow-hidden transition-all duration-300"
enter-from-class="transform scale-95 max-h-0" enter-to-class="transform scale-100 max-h-[1000px]"
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-100 max-h-[1000px]" leave-to-class="transform scale-95 max-h-0">
<div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.path">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.path)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.path === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>
</div>
</transition>
</Disclosure>
</div>
</template>

44
src/components/Navigation/Aside/AsideMenuSingle.vue Normal file
View File

@ -0,0 +1,44 @@
<script setup lang="ts">
import type { MenuItemModel } from '@/utils/interfaces'
defineProps({
item: {
type: Object as () => MenuItemModel,
required: true
},
selected: {
type: Boolean,
required: true
},
isChildren: {
type: Boolean,
default: false
}
})
</script>
<template>
<div class="group">
<RouterLink :to="item.path"
:class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
<svg v-if="isChildren"
:class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g id="DotOutline">
<path id="Vector" opacity="0.2"
d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"
fill="#4B5563" />
<path id="Vector_2"
d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z"
fill="#4B5563" />
</g>
</svg>
<embed v-else :src="item.icon" type="image/svg+xml"
:class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']">
{{ item.name }}
</RouterLink>
</div>
</template>

111
src/components/Navigation/Header.vue Normal file
View File

@ -0,0 +1,111 @@
<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
import { useMenuStore } from '@/stores/menu'
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
} from '@headlessui/vue'
import {
Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import PictureInitial from '@/components/PictureInitial.vue'
import { useDialogStore } from '@/stores/dialog'
import { IconApp } from '@/utils/icons'
const auth = useAuthStore()
const user = useUserStore()
const command = useCommandPalattesStore()
const menu = useMenuStore()
const dialog = useDialogStore()
const openSideBar = () => menu.toggleSidebar()
const showDialogLogout = () => {
dialog.type = 'error'
dialog.title = 'Logout dari akun?'
dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
dialog.cancelText = 'Batalkan'
dialog.confirmText = 'Ya, logout'
dialog.showCancelButton = true
dialog.onConfirm = () => {
auth.logout()
window.location.href = '/login'
}
dialog.open = true
}
</script>
<template>
<div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
<button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
<span class="sr-only">Open sidebar</span>
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
</button>
<div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
</div>
<div class="flex justify-end w-full px-4">
<div class="flex items-center ml-4 md:ml-6">
<button @click="command.showCommandPalettes" type="button"
class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Search</span>
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
<span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
</button>
<!-- Profile dropdown -->
<Menu as="div" class="relative ml-1">
<div>
<MenuButton
class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
<span class="sr-only">Open user menu</span>
<PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
<span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
{{ user.user_name }}
</span>
</MenuButton>
</div>
<transition enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
<MenuItems class="container-menu-item">
<div class="container-menu-profile group">
<div class="flex items-center">
<div>
<PictureInitial class-name="inline-block" size-class="w-9 h-9"
background-class="bg-secondary-100"
font-class="text-xs font-normal font-semibold text-primary-500"
:name="user.user_name" />
</div>
<div class="ml-3 space-y-1">
<p class="text-sm font-medium text-primary-50 ">
{{ user.user_name }}
</p>
<p class="text-xs font-normal text-primary-50">
{{ user.user_access }}
</p>
</div>
</div>
</div>
<MenuItem v-slot="{ active }">
<button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
Log out
</button>
</MenuItem>
</MenuItems>
</transition>
</Menu>
</div>
</div>
</div>
</template>

9
src/components/Navigation/Navigation.vue Normal file
View File

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

4
src/components/Menus/DaftarTransaksi/AktifIndividual.vue → src/components/Pages/DaftarTransaksi/AktifIndividual.vue
View File

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

17
src/components/Pages/HomeEmpty.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
<!-- <HomeIcon class="w-12 h-12 mx-auto text-gray-400" aria-hidden="true" /> -->
<h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
Selamat datang di aplikasi
</h3>
<h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
{{ appName }}
</h1>
</div>
</template>
<script setup lang="ts">
import { HomeIcon } from '@heroicons/vue/20/solid'
const appName = import.meta.env.VITE_APP_NAME
</script>

0
src/components/Menus/MenuProvider.vue → src/components/Pages/MenuProvider.vue
View File

203
src/components/Pages/TestPage.vue Normal file
View File

@ -0,0 +1,203 @@
<template>
<div>
<DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
:show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
:hover-state-enabled="true" @selection-changed="onSelectionChanged">
<DxSelection mode="single" />
<DxColumn :width="80" data-field="Prefix" caption="Title" />
<DxColumn data-field="FirstName" />
<DxColumn data-field="LastName" />
<DxColumn data-field="City" />
<DxColumn data-field="State" />
<DxColumn :width="130" data-field="Position" />
<DxColumn :width="100" data-field="BirthDate" data-type="date" />
<DxColumn :width="100" data-field="HireDate" data-type="date" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
import { ref } from 'vue';
const showColumnLines = ref(false);
const showRowLines = ref(false);
const showBorders = ref(false);
const rowAlternationEnabled = ref(true);
interface Employee {
ID: number;
FirstName: string;
LastName: string;
Prefix: string;
Position: string;
Picture: string;
BirthDate: string;
HireDate: string;
Notes: string;
Address: string;
State: string;
City: string;
}
const employees: Employee[] = [{
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Prefix: 'Mr.',
Position: 'CEO',
Picture: 'images/employees/01.png',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
Address: '351 S Hill St.',
State: 'California',
City: 'Los Angeles',
}, {
ID: 2,
FirstName: 'Olivia',
LastName: 'Peyton',
Prefix: 'Mrs.',
Position: 'Sales Assistant',
Picture: 'images/employees/09.png',
BirthDate: '1981/06/03',
HireDate: '2012/05/14',
Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
Address: '807 W Paseo Del Mar',
State: 'California',
City: 'Los Angeles',
}, {
ID: 3,
FirstName: 'Robert',
LastName: 'Reagan',
Prefix: 'Mr.',
Position: 'CMO',
Picture: 'images/employees/03.png',
BirthDate: '1974/09/07',
HireDate: '2002/11/08',
Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
Address: '4 Westmoreland Pl.',
State: 'Arkansas',
City: 'Bentonville',
}, {
ID: 4,
FirstName: 'Greta',
LastName: 'Sims',
Prefix: 'Ms.',
Position: 'HR Manager',
Picture: 'images/employees/04.png',
BirthDate: '1977/11/22',
HireDate: '1998/04/23',
Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
Address: '1700 S Grandview Dr.',
State: 'Georgia',
City: 'Atlanta',
}, {
ID: 5,
FirstName: 'Brett',
LastName: 'Wade',
Prefix: 'Mr.',
Position: 'IT Manager',
Picture: 'images/employees/05.png',
BirthDate: '1968/12/01',
HireDate: '2009/03/06',
Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
Address: '1120 Old Mill Rd.',
State: 'Idaho',
City: 'Boise',
}, {
ID: 6,
FirstName: 'Sandra',
LastName: 'Johnson',
Prefix: 'Mrs.',
Position: 'Controller',
Picture: 'images/employees/06.png',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
Address: '4600 N Virginia Rd.',
State: 'Utah',
City: 'Beaver',
}, {
ID: 7,
FirstName: 'Kevin',
LastName: 'Carter',
Prefix: 'Mr.',
Position: 'Shipping Manager',
Picture: 'images/employees/07.png',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
Address: '424 N Main St.',
State: 'California',
City: 'San Diego',
}, {
ID: 8,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Prefix: 'Ms.',
Position: 'HR Assistant',
Picture: 'images/employees/08.png',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
Address: '2211 Bonita Dr.',
State: 'Arkansas',
City: 'Little Rock',
}, {
ID: 9,
FirstName: 'Kent',
LastName: 'Samuelson',
Prefix: 'Dr.',
Position: 'Ombudsman',
Picture: 'images/employees/02.png',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.',
Address: '12100 Mora Dr',
State: 'Missouri',
City: 'St. Louis',
}, {
ID: 10,
FirstName: 'Taylor',
LastName: 'Riley',
Prefix: 'Mr.',
Position: 'Network Admin',
Picture: '',
BirthDate: '1982/08/14',
HireDate: '2012/04/14',
Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
Address: '7776 Torreyson Dr',
State: 'California',
City: 'San Jose',
}];
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0];
console.log(data);
};
</script>
<style scoped>
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
width: 24%;
display: inline-block;
margin-top: 10px;
}
.options-container {
display: flex;
align-items: center;
}
</style>