- added own provider for drive methods

- renamed middleware Role and Can to role_middleware and can_middleware - added some typing for inertia vue3 components - npm updates
2024-04-23 19:36:45 +02:00 · 2024-04-23 19:36:45 +02:00 · 296c8fd46e
commit 296c8fd46e
parent cb51a4136f
67 changed files with 2515 additions and 1913 deletions
--- a/resources/js/Components/Admin/Pagination.vue
+++ b/resources/js/Components/Admin/Pagination.vue
@ -1,6 +1,5 @@
-<script setup>
+<script lang="ts" setup>
 import { Link } from '@inertiajs/vue3';
-import { stardust } from '@eidellev/adonis-stardust/client';
 import { computed } from 'vue';

 const props = defineProps({
@ -29,17 +28,15 @@ const props = defineProps({
 // null
 // total:
 // 19
-const nextPageLink = computed(() => {
-    let url = new URL(document.location);
-    url.searchParams.set('page', props.data.currentPage + 1);
+const calculateNextPageLink = computed(() => {
+    let url = new URL(document.location.href);
+    url.searchParams.set('page', String(props.data.currentPage + 1));
    return url.href;
-    // return url + '&page=' + (Number(props.data.currentPage) + 1);
 });
-const prevPageLink = computed(() => {
-    let url = new URL(document.location);
-    url.searchParams.set('page', props.data.currentPage - 1);
+const calculatePrevPageLink = computed(() => {
+    let url = new URL(document.location.href);
+    url.searchParams.set('page', String(props.data.currentPage - 1));
    return url.href;
-    // return url + '&page=' + (props.data.currentPage - 1);
 });
 const toPage = computed(() => {
    let currentPage = props.data.currentPage;
@ -58,54 +55,26 @@ const fromPage = computed(() => {
 });
 </script>

-<!-- currentPage:
-1
-firstPage:
-1
-firstPageUrl:
-'/?page=1'
-lastPage:
-3
-lastPageUrl:
-'/?page=3'
-nextPageUrl:
-'/?page=2'
-perPage:
-5
-previousPageUrl:
-null
-total:
-15 -->
-
 <template>
    <!-- <nav v-if="data.links.length > 3" -->
-    <nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+    <nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation"
+        class="flex items-center justify-between">
        <div class="flex justify-between flex-1 sm:hidden">
-            <span
-                v-if="data.currentPage <= 1"
-                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
-            >
+            <span v-if="data.currentPage <= 1"
+                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                Previous
            </span>
-            <Link
-                v-else
-                :href="data.previousPageUrl"
-                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-                Previous
+            <Link v-else :href="data.previousPageUrl"
+                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+            Previous
            </Link>

-            <Link
-                v-if="data.currentPage < data.lastPage"
-                :href="data.nextPageUrl"
-                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-                Next
+            <Link v-if="data.currentPage < data.lastPage" :href="data.nextPageUrl"
+                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+            Next
            </Link>
-            <span
-                v-else
-                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
-            >
+            <span v-else
+                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                Next
            </span>
        </div>
@ -128,33 +97,24 @@ total:
                    <span v-if="props.data.currentPage <= 1" aria-disabled="true" aria-label="Previous">
                        <span
                            class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
-                            aria-hidden="true"
-                        >
+                            aria-hidden="true">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                <path
-                                    fill-rule="evenodd"
+                                <path fill-rule="evenodd"
                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                                    clip-rule="evenodd"
-                                />
+                                    clip-rule="evenodd" />
                            </svg>
                        </span>
                    </span>

                    <!-- <Link v-else :href="data.previousPageUrl" rel="prev" -->
-                    <Link
-                        v-else
-                        :href="prevPageLink"
-                        rel="prev"
+                    <Link v-else :href="calculatePrevPageLink" rel="prev"
                        class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
-                        aria-label="Previous"
-                    >
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                            <path
-                                fill-rule="evenodd"
-                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                                clip-rule="evenodd"
-                            />
-                        </svg>
+                        aria-label="Previous">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd"
+                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                    </svg>
                    </Link>

                    <!-- <template v-for="(link, key) in data.links">
@ -169,35 +129,26 @@ total:

                            <Link v-else :key="`link-${key}`" :href="link.url" v-html="link.label" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="`Go to page ${link.label}`" />
                        </template>
-                    </template> -->
+</template> -->

-                    <Link
-                        v-if="props.data.currentPage < props.data.lastPage"
-                        :href="nextPageLink"
-                        rel="next"
+                    <Link v-if="props.data.currentPage < props.data.lastPage" :href="calculateNextPageLink" rel="next"
                        class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
-                        aria-label="Next"
-                    >
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                            <path
-                                fill-rule="evenodd"
-                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                clip-rule="evenodd"
-                            />
-                        </svg>
+                        aria-label="Next">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd" />
+                    </svg>
                    </Link>
                    <!-- else disabled link -->
                    <span v-else aria-disabled="true" aria-label="Next">
                        <span
                            class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
-                            aria-hidden="true"
-                        >
+                            aria-hidden="true">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                <path
-                                    fill-rule="evenodd"
+                                <path fill-rule="evenodd"
                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                    clip-rule="evenodd"
-                                />
+                                    clip-rule="evenodd" />
                            </svg>
                        </span>
                    </span>
--- a/resources/js/Components/AsideMenuItem.vue
+++ b/resources/js/Components/AsideMenuItem.vue
@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ref, computed, ComputedRef } from 'vue';
+import { computed, ComputedRef } from 'vue';
 import { Link, usePage } from '@inertiajs/vue3';
 // import { Link } from '@inertiajs/inertia-vue3';

-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { mdiMinus, mdiPlus } from '@mdi/js';
 import { getButtonColor } from '@/colors.js';
 import BaseIcon from '@/Components/BaseIcon.vue';
--- a/resources/js/Components/AsideMenuLayer.vue
+++ b/resources/js/Components/AsideMenuLayer.vue
@ -5,7 +5,7 @@ import { stardust } from '@eidellev/adonis-stardust/client';
 import { mdiLogout, mdiClose } from '@mdi/js';
 import { computed } from 'vue';
 import { LayoutService } from '@/Stores/layout';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import AsideMenuList from '@/Components/AsideMenuList.vue';
 import AsideMenuItem from '@/Components/AsideMenuItem.vue';
 import BaseIcon from '@/Components/BaseIcon.vue';
--- a/resources/js/Components/FormValidationErrors.vue
+++ b/resources/js/Components/FormValidationErrors.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';

--- a/resources/js/Components/Header.vue
+++ b/resources/js/Components/Header.vue
@ -1,16 +1,16 @@
 <template>
    <div class="bg-slate-100 py-3 px-6 flex justify-between items-center mb-6">
        <div class="flex items-center space-x-6">
-            <h3 class="font-bold">AdonisJS InertiaJS Example</h3>
+            <h3 class="font-bold">TethysCloud Errors</h3>
            <nav class="flex items-center text-sm">
-                <Link href="/app">Home</Link>
+                <Link href="/apps/dashboard">Home</Link>
            </nav>
        </div>

-        <div class="flex items-center space-x-6 text-sm">
+        <!-- <div class="flex items-center space-x-6 text-sm">
            <Link href="/app/login">Login</Link>
            <Link href="/app/register">Register</Link>
-        </div>
+        </div> -->
    </div>
 </template>

--- a/resources/js/Components/Map/Control.ts
+++ b/resources/js/Components/Map/Control.ts
@ -1,6 +1,7 @@
 // import * as util from '../core/utilities';
 import { EventEmitter } from './EventEmitter.js';
-import type { Map } from 'leaflet/src/map/index';
+import type { Map } from 'leaflet/src/map/index.js';
+// import type { Map } from 'leaflet';

 export abstract class Control<T> extends EventEmitter<T> {
    // @section
@ -8,7 +9,7 @@ export abstract class Control<T> extends EventEmitter<T> {
    public options = {
        position: 'topright',
    };
-    protected _map;
+    protected _map: Map;
    protected _container;

    // constructor(defaults?) {
@ -28,7 +29,7 @@ export abstract class Control<T> extends EventEmitter<T> {
        return this._container;
    }

-    public abstract onRemove(map): void;
+    public abstract onRemove(map: Map): void;

    public abstract onAdd(map: any): HTMLElement;

@ -51,7 +52,7 @@ export abstract class Control<T> extends EventEmitter<T> {
        return this;
    }

-    public removeFrom(map) {
+    public removeFrom(map: Map) {
        let pos = this.getPosition();
        let corner = map._controlCorners[pos];

--- a/resources/js/Components/NavBar.vue
+++ b/resources/js/Components/NavBar.vue
@ -6,8 +6,7 @@ import { ComputedRef } from 'vue';

 import { computed, ref } from 'vue';
 import { containerMaxW } from '@/config.js';
-// import { MainService } from '@/Stores/main.js';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { LayoutService } from '@/Stores/layout';
 import {
    mdiForwardburger,
@ -15,14 +14,12 @@ import {
    mdiClose,
    mdiDotsVertical,
    mdiMenu,
-    // mdiClockOutline,
    mdiCloudDownloadOutline,
    mdiCloud,
    mdiCrop,
    mdiAccountCog,
    mdiFormatListGroup,
    mdiFormatListNumbered,
-    // mdiEmail,
    mdiLogout,
    mdiGithub,
    mdiThemeLightDark,
@ -46,9 +43,6 @@ import FirstrunWizard from '@/Components/FirstrunWizard/FirstrunWizard.vue'
 // import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
 // import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'

-// const mainStore = MainService();
-// const userName = computed(() =>mainStore.userName);
-
 const styleService = StyleService();
 const props = defineProps({
    showBurger: {
@ -205,4 +199,4 @@ const showAbout = async () => {
            </div>
        </div>
    </nav>
-</template>
+</template>
--- a/resources/js/Components/NavBarItem.vue
+++ b/resources/js/Components/NavBarItem.vue
@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 // import { Link } from '@inertiajs/vue3'
 import { Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
--- a/resources/js/Components/NavBarMenu.vue
+++ b/resources/js/Components/NavBarMenu.vue
@ -1,5 +1,5 @@
 <script setup>
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js';
 import NavBarItem from '@/Components/NavBarItem.vue';
@ -48,4 +48,4 @@ onBeforeUnmount(() => {
            <slot name="dropdown" />
        </div>
    </NavBarItem>
-</template>
+</template>
--- a/resources/js/Components/OverlayLayer.vue
+++ b/resources/js/Components/OverlayLayer.vue
@ -1,5 +1,5 @@
 <script setup>
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';

 defineProps({
    zIndex: {
@ -42,4 +42,4 @@ const styleStore = StyleService();
            <slot />
        </transition>
    </div>
-</template>
+</template>
--- a/resources/js/Components/SectionFullScreen.vue
+++ b/resources/js/Components/SectionFullScreen.vue
@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';

 const props = defineProps({
@ -35,4 +35,4 @@ const colorClass = computed(() => {
    <div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0" :class="colorClass">
        <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
    </div>
-</template>
+</template>
--- a/resources/js/Components/TableKeywords.vue
+++ b/resources/js/Components/TableKeywords.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 // import { MainService } from '@/Stores/main';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { mdiTrashCan } from '@mdi/js';
 // import CardBoxModal from '@/Components/CardBoxModal.vue';
 // import TableCheckboxCell from '@/Components/TableCheckboxCell.vue';
@ -204,4 +204,4 @@ const removeItem = (key) => {
 tr:nth-child(od) {    
    background: white;
 } */
-</style>
+</style>
--- a/resources/js/Components/TablePersons.vue
+++ b/resources/js/Components/TablePersons.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 // import { MainService } from '@/Stores/main';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { mdiTrashCan } from '@mdi/js';
 import { mdiDragVariant } from '@mdi/js';
 import BaseIcon from '@/Components/BaseIcon.vue';
@ -223,4 +223,4 @@ const removeAuthor = (key) => {
            <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
        </BaseLevel> -->
    </div>
-</template>
+</template>
--- a/resources/js/Components/TableSampleClients.vue
+++ b/resources/js/Components/TableSampleClients.vue
@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { MainService } from '@/Stores/main';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { mdiEye, mdiTrashCan } from '@mdi/js';
 import CardBoxModal from '@/Components/CardBoxModal.vue';
 import TableCheckboxCell from '@/Components/TableCheckboxCell.vue';
@ -143,4 +143,4 @@ const checked = (isChecked, client) => {
            <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
        </BaseLevel>
    </div>
-</template>
+</template>
--- a/resources/js/Layouts/LayoutAuthenticated.vue
+++ b/resources/js/Layouts/LayoutAuthenticated.vue
@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { LayoutService } from '@/Stores/layout';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import NavBar from '@/Components/NavBar.vue';
 import AsideMenu from '@/Components/AsideMenu.vue';
 import FooterBar from '@/Components/FooterBar.vue';
@ -42,4 +42,4 @@ const props = defineProps({
        </div>
    </div>
    <NotificationToast></NotificationToast>
-</template>
+</template>
--- a/resources/js/Layouts/LayoutGuest.vue
+++ b/resources/js/Layouts/LayoutGuest.vue
@ -1,5 +1,5 @@
 <script setup>
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 const styleService = StyleService();
 </script>

--- a/resources/js/Pages/Admin/Role/Create.vue
+++ b/resources/js/Pages/Admin/Role/Create.vue
@ -1,6 +1,6 @@
-<script setup>
-import { Head, Link, useForm, router } from '@inertiajs/vue3';
-import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiAccount, mdiNoteText, mdiFormTextarea } from '@mdi/js';
+<script lang="ts" setup>
+import { Head, useForm } from '@inertiajs/vue3';
+import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiFormTextarea } from '@mdi/js';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
--- a/resources/js/Pages/Admin/Settings.vue
+++ b/resources/js/Pages/Admin/Settings.vue
@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';

 import {
 	mdiContrastCircle,
--- a/resources/js/Pages/Errors/ServerError.vue
+++ b/resources/js/Pages/Errors/ServerError.vue
@ -0,0 +1,60 @@
+<template>
+    <div class="min-h-screen flex items-center justify-center bg-gray-100">
+        <div class="max-w-md w-full p-6 bg-white rounded-md shadow-md">
+            <h1 class="text-2xl font-bold text-red-500 mb-4">Error!</h1>
+            <p class="text-gray-700 mb-4">{{ error }}</p>
+
+            <SectionTitleLineWithButton :icon="mdiLightbulbAlert" :title="code" :main="true">
+                <BaseButton @click.prevent="handleAction" :icon="mdiArrowLeftBoldOutline" label="Dashboard"
+                    color="white" rounded-full small />
+            </SectionTitleLineWithButton>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator';
+import { Link, router } from '@inertiajs/vue3';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import { mdiLightbulbAlert, mdiArrowLeftBoldOutline } from '@mdi/js';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+@Component({
+    // options: {
+    //     layout: DefaultLayout,
+    // },
+    name: 'AppComponent',
+
+    components: {
+        Link,
+        BaseButton,
+        SectionTitleLineWithButton,
+    },
+})
+export default class AppComponent extends Vue {
+    // Component Property
+    @Prop({
+        type: String,
+        default: () => '',
+    })
+    error: string;
+
+    @Prop({
+        type: String,
+        default: () => '',
+    })
+    code: string;
+
+    // class properties
+    mdiLightbulbAlert = mdiLightbulbAlert;
+    mdiArrowLeftBoldOutline = mdiArrowLeftBoldOutline;
+
+    public async handleAction() {
+        // Add your logic here for handling the button action (e.g., logout or go back)
+        await router.get(stardust.route('dashboard'));
+    }
+
+}
+</script>
--- a/resources/js/Pages/Errors/not_found.vue
+++ b/resources/js/Pages/Errors/not_found.vue
@ -0,0 +1,7 @@
+<template>
+    <div class="container">
+      <div class="title">Page not found</div>
+  
+      <span>This page does not exist.</span>
+    </div>
+  </template>
--- a/resources/js/Stores/main.ts
+++ b/resources/js/Stores/main.ts
@ -167,7 +167,7 @@ export const MainService = defineStore('main', {
            this.totpState = state;
        },

-        async fetchChartData(year) {
+        async fetchChartData(year: string) {
            // sampleDataKey= authors or datasets
            axios
                .get(`/api/statistic/${year}`)
--- a/resources/js/Stores/map.service.ts
+++ b/resources/js/Stores/map.service.ts
@ -9,23 +9,23 @@ export const MapService = defineStore('map', {
    }),
    actions: {
        // payload = authenticated user
-        setUser(payload) {
-            if (payload.name) {
-                this.userName = payload.name;
-            }
-            if (payload.email) {
-                this.userEmail = payload.email;
-            }
-            if (payload.avatar) {
-                this.userAvatar = payload.avatar;
-            }
-        },
+        // setUser(payload: any) {
+        //     if (payload.name) {
+        //         this.userName = payload.name;
+        //     }
+        //     if (payload.email) {
+        //         this.userEmail = payload.email;
+        //     }
+        //     if (payload.avatar) {
+        //         this.userAvatar = payload.avatar;
+        //     }
+        // },

        getMap(id: string) {
            return this.mapService.get(id);
        },

-        setMap(id: string, map) {
+        setMap(id: string, map: any) {
            this.mapService.set(id, map);
        },

--- a/resources/js/Stores/style.service.ts
+++ b/resources/js/Stores/style.service.ts
@ -1,10 +1,27 @@
 import { defineStore } from 'pinia';
-import * as styles from '@/styles';
+import styles from '@/styles';
 import { darkModeKey, styleKey } from '@/config';

+
+interface StyleState {
+    [key: string]: string | boolean;
+    asideStyle: string;
+    asideScrollbarsStyle: string;
+    asideBrandStyle: string;
+    asideMenuItemStyle: string;
+    asideMenuItemActiveStyle: string;
+    asideMenuDropdownStyle: string;
+    navBarItemLabelStyle: string;
+    navBarItemLabelHoverStyle: string;
+    navBarItemLabelActiveColorStyle: string;
+    overlayStyle: string;
+    darkMode: boolean;
+}
+
+// Define StyleService store
 export const StyleService = defineStore('style', {
-    state: () => ({
-        /* Styles */
+    state: (): StyleState => ({
+        // Styles
        asideStyle: '',
        asideScrollbarsStyle: '',
        asideBrandStyle: '',
@ -15,41 +32,34 @@ export const StyleService = defineStore('style', {
        navBarItemLabelHoverStyle: '',
        navBarItemLabelActiveColorStyle: '',
        overlayStyle: '',
-
-        /* Dark mode default false */
+        // Dark mode default false
        darkMode: false,
    }),
-
    actions: {
-        // style payload = 'basic' or 'white' with blue font
-        setStyle(payload) {
+        // Set style based on payload value ('basic' or 'white')
+        setStyle(payload: 'basic' | 'white') {
            if (!styles[payload]) {
                return;
            }
-
            if (typeof localStorage !== 'undefined') {
                localStorage.setItem(styleKey, payload);
            }
-
-            const style = styles[payload];
-
+            const style = styles[payload] as Record<string, string>;
            for (const key in style) {
-                this[`${key}Style`] = style[key];
+                // let keyStyle: string  = `${key}Style`;//key as keyof typeof style;
+                this[`${key}Style` as keyof StyleState] = style[key];
            }
        },
-        // toggle dark mode
-        setDarkMode(payload = null) {
-            this.darkMode = payload !== null ? payload : !this.darkMode;
-
+        // Toggle dark mode
+        setDarkMode(payload?: boolean) {
+            this.darkMode = payload !== undefined ? payload : !this.darkMode;
            if (typeof localStorage !== 'undefined') {
                localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0');
            }
-
            if (typeof document !== 'undefined') {
                document.body.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars');
-
                document.documentElement.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars-compat');
            }
        },
    },
-});
+});
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@ -1,21 +1,28 @@
 import '../css/app.css';
-import { createApp, h } from 'vue';
+import { createApp, h, App, Plugin } from 'vue';
 import { Inertia } from '@inertiajs/inertia';

-import { createInertiaApp, Link, usePage } from '@inertiajs/vue3';
+import { createInertiaApp } from '@inertiajs/vue3';
 // import DefaultLayout from '@/Layouts/Default.vue';
-
 import { createPinia } from 'pinia';
-import { StyleService } from '@/Stores/style';
+import { StyleService } from '@/Stores/style.service';
 import { LayoutService } from '@/Stores/layout';
-import { MainService } from '@/Stores/main';
 import { darkModeKey, styleKey } from '@/config';
+// import type { DefineComponent } from 'vue';
+// import { resolvePageComponent } from '@adonisjs/inertia/helpers';
 const pinia = createPinia();
 import { EmitterPlugin } from '@/EmitterDirective';

 import { initRoutes } from '@eidellev/adonis-stardust/client/index.js';
 initRoutes();

+interface SetupOptions {
+    el: Element;
+    App: App;
+    props: Record<string, any>;
+    plugin: Plugin;
+}
+
 // import '@fontsource/archivo-black/index.css';
 // import '@fontsource/inter/index.css';

@ -23,7 +30,7 @@ createInertiaApp({
    progress: {
        // color: '#4B5563',
        color: '#22C55E',
-    },    
+    },
    // Webpack
    // resolve: (name) => require(`./Pages/${name}`),
    // resolve: (name) => require(`./Pages/${name}.vue`),
@ -35,7 +42,7 @@ createInertiaApp({
    //     // }
    //     return page;
    // },
-    resolve: async (name) => {
+    resolve: async (name: string) => {
        // Dynamically import the Vue component using import
        const { default: page } = await import(`./Pages/${name}.vue`);
        // const page = require(`./Pages/${name}.vue`).default;
@ -44,12 +51,14 @@ createInertiaApp({
        // }
        return page;
    },
-    // resolve: async (name) => {
-    //     const firstPath = `@/Pages/${name}.vue`;
-    //     const module = await import(firstPath);
-    //     return module.default || null;
-    // },
-    setup({ el, App, props, plugin }) {
+    // resolve: (name) => {
+    //     return resolvePageComponent(
+    //       `./Pages/${name}.vue`,
+    //       import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+    //     )
+    //   },
+
+    setup({ el, App, props, plugin} : SetupOptions) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(pinia)
@ -72,8 +81,9 @@ if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dar
    styleService.setDarkMode(true);
 }

+
 /* Collapse mobile aside menu on route change */
-Inertia.on('navigate', (event) => {
+Inertia.on('navigate', () => {
    layoutService.isAsideMobileExpanded = false;
    layoutService.isAsideLgActive = false;
 });
--- a/resources/js/styles.js
+++ b/resources/js/styles.js
@ -1,27 +1,30 @@
-export const basic = {
-    aside: 'bg-gray-800',
-    asideScrollbars: 'aside-scrollbars-gray',
-    asideBrand: 'bg-gray-900 text-white',
-    asideMenuItem: 'text-gray-300 hover:text-white',
-    asideMenuItemActive: 'font-bold text-cyan-300',
-    asideMenuDropdown: 'bg-gray-700/50',
-    navBarItemLabel: 'text-black',
-    // navBarItemLabelHover: 'hover:text-blue-500',
-    navBarItemLabelHover: 'hover:text-lime-dark',
-    // navBarItemLabelActiveColor: 'text-blue-600',
-    navBarItemLabelActiveColor: 'text-lime-dark',
-    overlay: 'from-gray-700 via-gray-900 to-gray-700',
-};
+const styles = {
+    basic: {
+        aside: 'bg-gray-800',
+        asideScrollbars: 'aside-scrollbars-gray',
+        asideBrand: 'bg-gray-900 text-white',
+        asideMenuItem: 'text-gray-300 hover:text-white',
+        asideMenuItemActive: 'font-bold text-cyan-300',
+        asideMenuDropdown: 'bg-gray-700/50',
+        navBarItemLabel: 'text-black',
+        // navBarItemLabelHover: 'hover:text-blue-500',
+        navBarItemLabelHover: 'hover:text-lime-dark',
+        // navBarItemLabelActiveColor: 'text-blue-600',
+        navBarItemLabelActiveColor: 'text-lime-dark',
+        overlay: 'from-gray-700 via-gray-900 to-gray-700',
+    },

-export const white = {
-    aside: 'bg-white',
-    asideScrollbars: 'aside-scrollbars-light',
-    asideBrand: '',
-    asideMenuItem: 'text-blue-600 hover:text-black dark:text-white',
-    asideMenuItemActive: 'font-bold text-black dark:text-white',
-    asideMenuDropdown: 'bg-gray-100/75',
-    navBarItemLabel: 'text-blue-600',
-    navBarItemLabelHover: 'hover:text-black',
-    navBarItemLabelActiveColor: 'text-black',
-    overlay: 'from-white via-gray-100 to-white',
+    white: {
+        aside: 'bg-white',
+        asideScrollbars: 'aside-scrollbars-light',
+        asideBrand: '',
+        asideMenuItem: 'text-blue-600 hover:text-black dark:text-white',
+        asideMenuItemActive: 'font-bold text-black dark:text-white',
+        asideMenuDropdown: 'bg-gray-100/75',
+        navBarItemLabel: 'text-blue-600',
+        navBarItemLabelHover: 'hover:text-black',
+        navBarItemLabelActiveColor: 'text-black',
+        overlay: 'from-white via-gray-100 to-white',
+    },
 };
+export default styles;
--- a/resources/js/tsconfig.vue.json
+++ b/resources/js/tsconfig.vue.json
@ -0,0 +1,26 @@
+{
+    // tsconfig.vue.json
+    "extends": "@vue/tsconfig/tsconfig.json",
+    // "include": ["./resources/js/**/*"],
+    "include": ["env.d.ts", "./**/*.ts", "./**/*.vue"],
+    "compilerOptions": {
+        // "module": "commonjs", //for tehys.api...alos nodenext
+        // Process & infer types from .js files.
+        "allowJs": true,
+        //javascript language version:  Target latest version 'esnext' of ECMAScript or minimal 'es6'.
+        "target": "ESNext", //neu
+        // //what module code is generated
+        "module": "ESNext", //neu
+        "experimentalDecorators": true, //neu
+        "strictPropertyInitialization": false //neu
+    },
+    // "paths": {
+    //     "App/*": ["./app/*"], // for App/modles/User
+    //     "@/*": ["./resources/js/*"]
+    // },
+    "paths": {
+        "@/*": ["./*"],
+        "~/*": ["../*"]
+      },
+    // "files": ["./index.d.ts"]
+}