add walcome page
This commit is contained in:
Dede Fuji Abdul
parent
a87a29fb39
commit
52ce48604d
@ -1098,6 +1098,10 @@ select {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@ -1198,6 +1202,10 @@ select {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.h-\[66px\] {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.max-h-0 {
|
||||
max-height: 0px;
|
||||
}
|
||||
@ -1526,6 +1534,12 @@ select {
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
@ -1829,10 +1843,19 @@ select {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.fill-gray-600 {
|
||||
fill: #4b5563;
|
||||
}
|
||||
|
||||
.stroke-white {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@ -2281,6 +2304,11 @@ select {
|
||||
color: rgb(153 153 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-opacity-100 {
|
||||
--tw-text-opacity: 1;
|
||||
}
|
||||
@ -2315,6 +2343,10 @@ select {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.opacity-40 {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
@ -2717,6 +2749,28 @@ select {
|
||||
background-color: rgb(53 124 141 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-gray-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-primary-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-opacity-5 {
|
||||
--tw-bg-opacity: 0.05;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-opacity-80 {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:fill-gray-500 {
|
||||
fill: #6b7280;
|
||||
}
|
||||
@ -2735,6 +2789,15 @@ select {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-gray-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
@ -3109,6 +3172,10 @@ select {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
@ -3133,6 +3200,10 @@ select {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.md\:w-\[440px\] {
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
.md\:max-w-\[220px\] {
|
||||
max-width: 220px;
|
||||
}
|
||||
@ -3163,6 +3234,16 @@ select {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.md\:px-0 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.md\:py-0 {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
@ -3203,6 +3284,10 @@ select {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.lg\:mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -33,13 +33,35 @@
|
||||
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
|
||||
:key="menu.path" v-slot="{ active }">
|
||||
<li @click="openMenu(menu)"
|
||||
:class="['flex cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
|
||||
<DocumentTextIcon
|
||||
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
|
||||
<img v-if="menu.path.includes('/gangguan/')" :src="navigationIcon[0]"
|
||||
alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<img v-else-if="menu.path.includes('/keluhan/')" :src="navigationIcon[1]"
|
||||
alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<img v-else-if="menu.path.includes('/monalisa/')" :src="navigationIcon[2]"
|
||||
alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<img v-else-if="menu.path.includes('/check-in-out/')"
|
||||
:src="navigationIcon[3]" alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<img v-else-if="menu.path.includes('/anomali-pengaduan/')"
|
||||
:src="navigationIcon[4]" alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<img v-else :src="navigationIcon[5]" alt="icon"
|
||||
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
||||
<!-- <DocumentTextIcon
|
||||
:class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
|
||||
aria-hidden="true" />
|
||||
<span class="flex-auto ml-3 truncate">
|
||||
{{ menu.name }}
|
||||
</span>
|
||||
aria-hidden="true" /> -->
|
||||
<div class="flex flex-col flex-auto ml-3 space-y-1">
|
||||
<span class="text-sm font-medium text-gray-800 truncate">
|
||||
{{ menu.name }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500 ">
|
||||
{{ menu.path.replace('/home/', '') }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="active" class="flex-none ml-3 text-gray-500">
|
||||
Buka
|
||||
</span>
|
||||
@ -84,6 +106,7 @@ import {
|
||||
import { useRouter, type RouteRecordRaw } from 'vue-router'
|
||||
import { routes, extractLeafRoutes } from '@/router'
|
||||
import { useCommandPalattesStore } from '@/stores/command'
|
||||
import { navigationIcon } from '@/utils/route'
|
||||
|
||||
const command = useCommandPalattesStore()
|
||||
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
|
||||
|
||||
@ -106,7 +106,14 @@ const closeSideBar = () => menu.toggleSidebar()
|
||||
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" />
|
||||
<!-- <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" /> -->
|
||||
<svg class="w-6 h-6" width="32" height="32" viewBox="0 0 32 32" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z"
|
||||
fill="#343330" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<RouterLink to="/">
|
||||
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
|
||||
@ -2,40 +2,61 @@
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn alignment="center" caption="Dispatching Time">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
@ -43,7 +64,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -116,7 +137,7 @@ const createDummy = () => {
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<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>
|
||||
|
||||
151
src/components/Pages/Welcome.vue
Normal file
151
src/components/Pages/Welcome.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
|
||||
<div class="w-full md:w-[440px] px-4 py-4 md:px-0 md:py-0 flex flex-col items-center">
|
||||
<img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
|
||||
<button @click="command.showCommandPalettes" type="button"
|
||||
class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 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>
|
||||
|
||||
<div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
|
||||
<div class="flex flex-col items-start w-full p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
|
||||
<h2 v-if="query === '' && recent.length > 0" class="mb-2 text-xs font-semibold text-gray-900 ">
|
||||
Terakhir Dikunjungi
|
||||
</h2>
|
||||
<div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
|
||||
:key="menu.path">
|
||||
<div @click="openMenu(menu)" class="group">
|
||||
<div
|
||||
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
|
||||
|
||||
<svg v-if="menu.path.includes('/gangguan/')"
|
||||
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="32" height="32"
|
||||
viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.2" d="M12 30L14 20L6 17L20 2L18 12L26 15L12 30Z" />
|
||||
<path
|
||||
d="M6.73976 4.32749C6.65194 4.2285 6.54535 4.14792 6.42616 4.09043C6.30697 4.03294 6.17756 3.99967 6.04542 3.99256C5.91328 3.98545 5.78104 4.00464 5.65637 4.04902C5.53171 4.09339 5.41708 4.16207 5.31915 4.25106C5.22122 4.34006 5.14193 4.44761 5.08587 4.56748C5.02981 4.68735 4.99809 4.81716 4.99257 4.94937C4.98705 5.08159 5.00782 5.21359 5.05369 5.33771C5.09955 5.46184 5.1696 5.57563 5.25976 5.67249L10.166 11.07L5.26851 16.32C5.15481 16.4398 5.07255 16.5859 5.02909 16.7453C4.98563 16.9046 4.98233 17.0723 5.01947 17.2332C5.05661 17.3942 5.13305 17.5434 5.24194 17.6676C5.35084 17.7918 5.4888 17.8871 5.64351 17.945L12.8473 20.6462L11.0198 29.8037C10.9783 30.0167 11.0072 30.2374 11.1021 30.4325C11.197 30.6276 11.3529 30.7866 11.546 30.8853C11.7392 30.9841 11.9593 31.0174 12.1731 30.9801C12.3868 30.9429 12.5827 30.8371 12.731 30.6787L20.4635 22.3937L25.2598 27.6687C25.3476 27.7677 25.4542 27.8483 25.5734 27.9058C25.6926 27.9633 25.822 27.9966 25.9541 28.0037C26.0862 28.0108 26.2185 27.9916 26.3432 27.9472C26.4678 27.9028 26.5824 27.8342 26.6804 27.7452C26.7783 27.6562 26.8576 27.5486 26.9137 27.4287C26.9697 27.3089 27.0014 27.1791 27.007 27.0469C27.0125 26.9146 26.9917 26.7826 26.9458 26.6585C26.9 26.5344 26.8299 26.4206 26.7398 26.3237L6.73976 4.32749ZM13.671 26.75L14.9798 20.2025C15.0266 19.9703 14.9895 19.729 14.875 19.5216C14.7606 19.3142 14.5762 19.1541 14.3548 19.07L7.74976 16.5887L11.5148 12.555L19.1123 20.9125L13.671 26.75ZM13.5823 8.87499C13.4862 8.78538 13.4087 8.67772 13.3543 8.55817C13.2999 8.43861 13.2695 8.3095 13.265 8.17822C13.2605 8.04693 13.2818 7.91603 13.3279 7.79301C13.374 7.66999 13.4439 7.55725 13.5335 7.46124L19.2685 1.31624C19.4169 1.15791 19.6127 1.05213 19.8265 1.01486C20.0402 0.977594 20.2603 1.01086 20.4535 1.10964C20.6467 1.20842 20.8025 1.36736 20.8974 1.56247C20.9924 1.75758 21.0213 1.97827 20.9798 2.19124L19.1473 11.3625L26.351 14.0637C26.5046 14.122 26.6414 14.2172 26.7495 14.3409C26.8575 14.4646 26.9334 14.613 26.9705 14.773C27.0076 14.9331 27.0047 15.0997 26.962 15.2583C26.9194 15.417 26.8383 15.5626 26.726 15.6825L23.9385 18.6687C23.7564 18.8572 23.5075 18.9666 23.2454 18.9734C22.9834 18.9803 22.7292 18.8839 22.5375 18.7052C22.3458 18.5264 22.2319 18.2795 22.2204 18.0176C22.2089 17.7558 22.3007 17.4999 22.476 17.305L24.2498 15.4112L17.6498 12.9362C17.4283 12.8521 17.244 12.6921 17.1295 12.4847C17.015 12.2773 16.9779 12.036 17.0248 11.8037L18.3335 5.25624L14.9998 8.82749C14.91 8.92402 14.8021 9.00186 14.6821 9.05652C14.5622 9.11119 14.4326 9.1416 14.3009 9.14602C14.1692 9.15043 14.0378 9.12876 13.9145 9.08224C13.7912 9.03573 13.6783 8.9653 13.5823 8.87499Z" />
|
||||
</svg>
|
||||
<svg v-else-if="menu.path.includes('/keluhan/')"
|
||||
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SmileySad">
|
||||
<path id="Vector" opacity="0.2"
|
||||
d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" />
|
||||
<path id="Vector_2"
|
||||
d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-else-if="menu.path.includes('/monalisa/')"
|
||||
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Monitor">
|
||||
<path id="Vector" opacity="0.2"
|
||||
d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" />
|
||||
<path id="Vector_2"
|
||||
d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-else-if="menu.path.includes('/check-in-out/')"
|
||||
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Swap">
|
||||
<path id="Vector" opacity="0.2"
|
||||
d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" />
|
||||
<path id="Vector_2"
|
||||
d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-else-if="menu.path.includes('/anomali-pengaduan/')"
|
||||
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Plugs">
|
||||
<path id="Vector" opacity="0.2"
|
||||
d="M7.12508 11.625L12.3751 16.875L9.65633 19.5937C9.23438 20.0157 8.66211 20.2527 8.06539 20.2527C7.46868 20.2527 6.89641 20.0157 6.47446 19.5937L4.40633 17.5228C3.98527 17.101 3.74878 16.5293 3.74878 15.9333C3.74878 15.3373 3.98527 14.7656 4.40633 14.3437L7.12508 11.625ZM19.5938 6.47718L17.5229 4.40625C17.1011 3.98518 16.5294 3.7487 15.9334 3.7487C15.3373 3.7487 14.7657 3.98518 14.3438 4.40625L11.6251 7.125L16.8751 12.375L19.5938 9.65625C20.0149 9.23441 20.2514 8.66274 20.2514 8.06672C20.2514 7.47069 20.0149 6.89902 19.5938 6.47718Z" />
|
||||
<path id="Vector_2"
|
||||
d="M14.0306 12.9694C13.9609 12.8996 13.8782 12.8443 13.7871 12.8066C13.6961 12.7688 13.5985 12.7494 13.4999 12.7494C13.4014 12.7494 13.3038 12.7688 13.2127 12.8066C13.1217 12.8443 13.039 12.8996 12.9693 12.9694L11.2499 14.6897L9.31024 12.75L11.0306 11.0306C11.1713 10.8899 11.2503 10.699 11.2503 10.5C11.2503 10.301 11.1713 10.1101 11.0306 9.96938C10.8898 9.82865 10.699 9.74959 10.4999 9.74959C10.3009 9.74959 10.11 9.82865 9.9693 9.96938L8.24993 11.6897L6.53055 9.96938C6.38982 9.82865 6.19895 9.74959 5.99993 9.74959C5.80091 9.74959 5.61003 9.82865 5.4693 9.96938C5.32857 10.1101 5.24951 10.301 5.24951 10.5C5.24951 10.699 5.32857 10.8899 5.4693 11.0306L6.06462 11.625L3.87837 13.8103C3.59972 14.0889 3.37868 14.4196 3.22787 14.7837C3.07706 15.1477 2.99944 15.5379 2.99944 15.9319C2.99944 16.3259 3.07706 16.7161 3.22787 17.0801C3.37868 17.4441 3.59972 17.7749 3.87837 18.0534L4.38274 18.5569L1.7193 21.2194C1.64962 21.2891 1.59435 21.3718 1.55663 21.4628C1.51892 21.5539 1.49951 21.6515 1.49951 21.75C1.49951 21.8485 1.51892 21.9461 1.55663 22.0372C1.59435 22.1282 1.64962 22.2109 1.7193 22.2806C1.86003 22.4214 2.05091 22.5004 2.24993 22.5004C2.34847 22.5004 2.44606 22.481 2.5371 22.4433C2.62815 22.4056 2.71087 22.3503 2.78055 22.2806L5.44305 19.6172L5.94649 20.1216C6.22508 20.4002 6.55582 20.6213 6.91984 20.7721C7.28387 20.9229 7.67403 21.0005 8.06805 21.0005C8.46208 21.0005 8.85224 20.9229 9.21626 20.7721C9.58028 20.6213 9.91103 20.4002 10.1896 20.1216L12.3749 17.9353L12.9693 18.5306C13.039 18.6003 13.1217 18.6556 13.2128 18.6933C13.3038 18.731 13.4014 18.7504 13.4999 18.7504C13.5985 18.7504 13.6961 18.731 13.7871 18.6933C13.8781 18.6556 13.9609 18.6003 14.0306 18.5306C14.1002 18.4609 14.1555 18.3782 14.1932 18.2872C14.2309 18.1961 14.2503 18.0985 14.2503 18C14.2503 17.9015 14.2309 17.8039 14.1932 17.7128C14.1555 17.6218 14.1002 17.5391 14.0306 17.4694L12.3102 15.75L14.0306 14.0306C14.1003 13.961 14.1556 13.8783 14.1933 13.7872C14.2311 13.6962 14.2505 13.5986 14.2505 13.5C14.2505 13.4014 14.2311 13.3038 14.1933 13.2128C14.1556 13.1217 14.1003 13.039 14.0306 12.9694ZM9.12837 19.0631C8.84709 19.3442 8.46571 19.5021 8.06805 19.5021C7.6704 19.5021 7.28902 19.3442 7.00774 19.0631L4.93962 16.9922C4.65852 16.7109 4.50062 16.3295 4.50062 15.9319C4.50062 15.5342 4.65852 15.1528 4.93962 14.8716L7.12493 12.6853L11.3146 16.875L9.12837 19.0631ZM22.2806 1.71938C22.2109 1.64965 22.1282 1.59433 22.0371 1.55658C21.9461 1.51884 21.8485 1.49941 21.7499 1.49941C21.6514 1.49941 21.5538 1.51884 21.4627 1.55658C21.3717 1.59433 21.289 1.64965 21.2193 1.71938L18.5568 4.38282L18.0534 3.87844C17.4901 3.31683 16.7272 3.00146 15.9318 3.00146C15.1364 3.00146 14.3735 3.31683 13.8102 3.87844L11.6249 6.06469L11.0306 5.46938C10.8898 5.32865 10.699 5.24959 10.4999 5.24959C10.3009 5.24959 10.11 5.32865 9.9693 5.46938C9.82857 5.61011 9.74951 5.80098 9.74951 6C9.74951 6.19903 9.82857 6.3899 9.9693 6.53063L17.4693 14.0306C17.539 14.1003 17.6217 14.1556 17.7128 14.1933C17.8038 14.231 17.9014 14.2504 17.9999 14.2504C18.0985 14.2504 18.1961 14.231 18.2871 14.1933C18.3781 14.1556 18.4609 14.1003 18.5306 14.0306C18.6002 13.9609 18.6555 13.8782 18.6932 13.7872C18.7309 13.6961 18.7503 13.5985 18.7503 13.5C18.7503 13.4015 18.7309 13.3039 18.6932 13.2128C18.6555 13.1218 18.6002 13.0391 18.5306 12.9694L17.9352 12.375L20.1215 10.1897C20.4001 9.91111 20.6212 9.58036 20.772 9.21634C20.9228 8.85231 21.0004 8.46215 21.0004 8.06813C21.0004 7.6741 20.9228 7.28394 20.772 6.91992C20.6212 6.5559 20.4001 6.22515 20.1215 5.94657L19.6171 5.44313L22.2806 2.78063C22.3503 2.71097 22.4056 2.62826 22.4433 2.53721C22.4811 2.44616 22.5005 2.34856 22.5005 2.25C22.5005 2.15144 22.4811 2.05385 22.4433 1.9628C22.4056 1.87175 22.3503 1.78903 22.2806 1.71938ZM19.0602 9.12563L16.8749 11.3147L12.6852 7.125L14.8715 4.93969C15.1528 4.6586 15.5342 4.5007 15.9318 4.5007C16.3295 4.5007 16.7108 4.6586 16.9921 4.93969L19.0602 7.00219C19.2003 7.14157 19.3114 7.30723 19.3872 7.48968C19.463 7.67212 19.5021 7.86774 19.5021 8.06532C19.5021 8.26289 19.463 8.45851 19.3872 8.64095C19.3114 8.8234 19.2003 8.98906 19.0602 9.12844V9.12563Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-else :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Gauge">
|
||||
<path id="Vector" opacity="0.2"
|
||||
d="M21.75 15V17.25C21.75 17.4489 21.671 17.6397 21.5303 17.7803C21.3897 17.921 21.1989 18 21 18H3C2.80109 18 2.61032 17.921 2.46967 17.7803C2.32902 17.6397 2.25 17.4489 2.25 17.25V15.1059C2.25 9.71719 6.57656 5.26875 11.9653 5.25C13.2486 5.24544 14.5202 5.49426 15.7071 5.9822C16.8941 6.47013 17.973 7.18759 18.882 8.09342C19.7911 8.99924 20.5124 10.0756 21.0045 11.2608C21.4967 12.446 21.75 13.7167 21.75 15Z" />
|
||||
<path id="Vector_2"
|
||||
d="M19.4119 7.56282C18.4397 6.58843 17.2842 5.81613 16.0121 5.29046C14.74 4.76478 13.3764 4.49614 12 4.5H11.9625C6.19406 4.51969 1.5 9.28125 1.5 15.1059V17.25C1.5 17.6478 1.65804 18.0294 1.93934 18.3107C2.22064 18.592 2.60218 18.75 3 18.75H21C21.3978 18.75 21.7794 18.592 22.0607 18.3107C22.342 18.0294 22.5 17.6478 22.5 17.25V15C22.5039 13.6175 22.2328 12.2481 21.7027 10.9713C21.1725 9.69457 20.3938 8.53594 19.4119 7.56282ZM21 17.25H11.2228L16.3566 10.1906C16.4737 10.0298 16.5221 9.82895 16.4911 9.63239C16.4602 9.43583 16.3524 9.25961 16.1916 9.1425C16.0307 9.02539 15.8299 8.97699 15.6333 9.00793C15.4368 9.03887 15.2605 9.14663 15.1434 9.3075L9.3675 17.25H3V15.1059C3 14.8172 3.01406 14.5322 3.04031 14.25H5.25C5.44891 14.25 5.63968 14.171 5.78033 14.0303C5.92098 13.8897 6 13.6989 6 13.5C6 13.3011 5.92098 13.1103 5.78033 12.9697C5.63968 12.829 5.44891 12.75 5.25 12.75H3.30656C4.27406 9.10688 7.43156 6.3525 11.25 6.03188V8.25C11.25 8.44892 11.329 8.63968 11.4697 8.78033C11.6103 8.92099 11.8011 9 12 9C12.1989 9 12.3897 8.92099 12.5303 8.78033C12.671 8.63968 12.75 8.44892 12.75 8.25V6.03094C14.6106 6.18752 16.3767 6.9181 17.8042 8.12172C19.2316 9.32534 20.2501 10.9426 20.7188 12.75H18.75C18.5511 12.75 18.3603 12.829 18.2197 12.9697C18.079 13.1103 18 13.3011 18 13.5C18 13.6989 18.079 13.8897 18.2197 14.0303C18.3603 14.171 18.5511 14.25 18.75 14.25H20.9691C20.9888 14.4984 21 14.7478 21 15V17.25Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-start flex-1 ml-3 space-y-1">
|
||||
<span class="text-sm font-medium text-gray-800 truncate group-hover:text-white">
|
||||
{{ menu.name }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500 group-hover:text-white">
|
||||
{{ menu.path.replace('/home/', '') }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="flex-none hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
|
||||
Buka
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { readData, writeData } from '@/utils/storage'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useCommandPalattesStore } from '@/stores/command'
|
||||
import { IconApp } from '@/utils/icons'
|
||||
import { useRouter, type RouteRecordRaw } from 'vue-router'
|
||||
import { routes, extractLeafRoutes } from '@/router'
|
||||
import { navigationIcon } from '@/utils/route';
|
||||
|
||||
const command = useCommandPalattesStore()
|
||||
const route = useRouter()
|
||||
const recent = computed(() => query.value === '' ? command.readRecent() : [])
|
||||
const query = ref('')
|
||||
|
||||
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
|
||||
const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
|
||||
return matchingRoutes
|
||||
}
|
||||
|
||||
const filteredMenus = computed(() =>
|
||||
query.value === ''
|
||||
? []
|
||||
: searchRoutesByName(routes, query.value)
|
||||
)
|
||||
const onClose = () => command.open = false
|
||||
|
||||
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
const onQueryChange = (value: string) => {
|
||||
if (debounceTimeout) {
|
||||
clearTimeout(debounceTimeout);
|
||||
}
|
||||
debounceTimeout = setTimeout(() => {
|
||||
// check if value is empty or only spaces
|
||||
if (value.trim() === '') {
|
||||
query.value = ''
|
||||
return
|
||||
}
|
||||
query.value = value
|
||||
}, 300);
|
||||
}
|
||||
|
||||
const openMenu = (menu: RouteRecordRaw) => {
|
||||
command.addRecent(menu)
|
||||
route.push(menu.path)
|
||||
onClose()
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -4,7 +4,7 @@ import { useAuthStore } from '@/stores/auth'
|
||||
import HomeView from '@/views/HomeView.vue'
|
||||
import LoginView from '@/views/LoginView.vue'
|
||||
import NotFoundView from '@/views/NotFoundView.vue'
|
||||
import EmptyPage from '@/components/Pages/HomeEmpty.vue'
|
||||
import WelcomePage from '@/components/Pages/Welcome.vue'
|
||||
import TestPage from '@/components/Pages/TestPage.vue'
|
||||
import qs from 'qs'
|
||||
import {
|
||||
@ -25,7 +25,7 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home Page',
|
||||
component: EmptyPage,
|
||||
component: WelcomePage,
|
||||
},
|
||||
{
|
||||
path: 'gangguan',
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
Swap
|
||||
} from '@/utils/icons'
|
||||
|
||||
const navigationIcon = [
|
||||
export const navigationIcon = [
|
||||
LightningSlash,
|
||||
SmileySad,
|
||||
Monitor,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user