@dasidev/dasi-ui 1.0.0

package/src/main.ts

@@ -0,0 +1,74 @@
+import './tw.scss'
+import './main.scss'
+import './docs.scss'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createVfm } from 'vue-final-modal'
+
+import App from './App.vue'
+import router from './router'
+import Vueform from '@vueform/vueform'
+import vueformConfig from './vueform.config.js'
+import "vue3-openlayers/styles.css";
+import OpenLayersMap from "vue3-openlayers";
+import InfiniteLoading from "v3-infinite-loading";
+import "v3-infinite-loading/lib/style.css";
+import {LoadingPlugin} from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/css/index.css';
+import "vue3-openlayers/styles.css";
+import VueApexCharts from "vue3-apexcharts";
+
+// Import configuration system
+import { useAppConfig } from '@/composables/useAppConfig'
+import { useAuthStore } from '@/stores/auth'
+import { myAppConfig } from '@/config/my-app.config'
+
+// Import configuration test (development only)
+if (import.meta.env.DEV) {
+  import('@/config/test-config')
+}
+
+const vfm = createVfm();
+const app = createApp(App)
+
+// Initialize the application with configuration
+async function initializeApp() {
+  try {
+    // Setup plugins first (Pinia must be initialized before using stores)
+    app.use(vfm)
+    app.use(LoadingPlugin);
+    app.use(OpenLayersMap)
+    app.component("infinite-loading", InfiniteLoading)
+    app.use(createPinia())
+    app.use(router)
+    app.component('apexchart', VueApexCharts)
+    app.use(Vueform, vueformConfig)
+    
+    // Initialize configuration system with custom config
+    const { initializeConfig } = useAppConfig()
+    await initializeConfig(myAppConfig)
+    
+    // Initialize auth store from localStorage (now Pinia is available)
+    const authStore = useAuthStore()
+    authStore.initializeFromStorage()
+    
+    // Mount the app
+    app.mount('#app')
+  } catch (error) {
+    console.error('Failed to initialize application:', error)
+    // Fallback: mount app without configuration
+    app.use(vfm)
+    app.use(LoadingPlugin)
+    app.use(OpenLayersMap)
+    app.component("infinite-loading", InfiniteLoading)
+    app.use(createPinia())
+    app.use(router)
+    app.component('apexchart', VueApexCharts)
+    app.use(Vueform, vueformConfig)
+    app.mount('#app')
+  }
+}
+
+// Start the application
+initializeApp()

package/src/menu.ts

@@ -0,0 +1,78 @@
+// Legacy menu schema - kept for backward compatibility
+// New projects should use the configuration-based menu system
+
+export type OrgLevel = "manager" | "admin" | "superadmin" | "user";
+
+export interface Submenu {
+  name: string;
+  url?: string;
+  connectApi?: boolean;
+  hasData?: boolean;
+  finished?: boolean;
+  ok?: boolean;
+  type?: "header" | "menu";
+  submenu?: Submenu[];
+  checked?: boolean;
+  visible?: boolean;
+  icon?: string;
+  iconSize?: number;
+  iconType?: "svg" | "lucide";
+  orgLevels: OrgLevel[];
+  keyword?: string;
+  version?: string;
+}
+
+export interface Menu {
+  id: string;
+  name: string;
+  url?: string;
+  icon?: string;
+  iconSize?: number;
+  iconType?: "svg" | "lucide";
+  hasData?: boolean;
+  connectApi?: boolean;
+  checked?: boolean;
+  finished?: boolean;
+  submenu: Submenu[];
+  visible?: boolean;
+  keyword?: string;
+}
+
+// Default menu schema for backward compatibility
+const menuSchema: Menu[] = [
+  {
+    id: "dashboard",
+    name: "Dashboard",
+    icon: "LayoutDashboard",
+    submenu: [
+      {
+        name: "Dashboard",
+        url: "/",
+        ok: true,
+        orgLevels: ["manager", "admin", "superadmin", "user"]
+      },
+    ]
+  },
+  {
+    id: "master",
+    name: "Master",
+    icon: `Database`,
+    iconSize: 23,
+    submenu: [
+      {
+        name: "Master Gudang",
+        url: "/master/informasi-gudang",
+        ok: true,
+        orgLevels: ["manager", "admin", "superadmin", "user"]
+      },
+      {
+        name: "Test Schema",
+        url: "/examples/test-schema",
+        ok: true,
+        orgLevels: ["manager", "admin", "superadmin", "user"]
+      },
+    ]
+  },
+];
+
+export default menuSchema;

package/src/nestedlist_color.scss

@@ -0,0 +1,161 @@
+
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.0.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.1.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.2.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.3.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.4.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.5.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.6.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.7.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.8.colors-12"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-0"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-1"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-2"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-3"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-4"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-5"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-6"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-7"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-8"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-9"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-10"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-11"],
+// form div.grid.form-gap-y-gutter-lg[role="list"] div[role="listitem"] div[data-id="metadata.9.colors-12"]
+// {
+//   padding: 0 !important;
+//   border: none !important;
+//   background: none !important;
+//   border-radius: 0 !important;
+//   margin: 0 !important;
+// }
+
+
+
+div[data-id="colors-0"],
+div[data-id="colors-1"],
+div[data-id="colors-2"],
+div[data-id="colors-3"],
+div[data-id="colors-4"],
+div[data-id="colors-5"],
+div[data-id="colors-6"],
+div[data-id="colors-7"],
+div[data-id="colors-8"],
+div[data-id="colors-9"],
+div[data-id="colors-10"],
+div[data-id="colors-11"],
+div[data-id="colors-12"]{
+  // padding: 0 !important;
+  // border: none !important;
+  // background: none !important;
+  // border-radius: 0 !important;
+  // margin: 0 !important;
+  padding: 10px !important;
+}

package/src/router/index.ts

@@ -0,0 +1,92 @@
+import { createRouter, createWebHistory } from "vue-router";
+import DefaultLayout from "@/layouts/DefaultLayout.vue";
+import AuthLayout from "@/layouts/AuthLayout.vue";
+import SettingsLayout from "@/layouts/SettingsLayout.vue";
+import DocsLayout from "@/layouts/DocsLayout.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "Main",
+      component: DefaultLayout,
+      redirect: "/",
+      children: [
+        {
+          path: '/settings',
+          name: 'settings',
+          component: SettingsLayout,
+          redirect: '/settings',
+          children: [
+            {
+              path: '/settings',
+              name: 'mainSettingsView',
+              component: () => import('../views/settings/MainSettingsView.vue')
+            },
+            {
+              path: '/settings/profile',
+              name: 'profileSettingsView',
+              component: () => import('../views/settings/ProfileSettingsView.vue')
+            },
+            {
+              path: '/settings/account',
+              name: 'accountSettingsView',
+              component: () => import('../views/settings/AccountSettingsView.vue')
+            },
+            {
+              path: '/settings/device',
+              name: 'deviceSettingsView',
+              component: () => import('../views/settings/DeviceSettingsView.vue')
+            },
+            {
+              path: '/settings/audit-logs',
+              name: 'auditLogsSettingsView',
+              component: () => import('../views/settings/AuditLogsSettingsView.vue')
+            }
+          ]
+        },
+        {
+          path: "/",
+          name: "NewDashboardHome",
+          component: () => import("../views/dashboard/index.vue")
+        },
+        {
+          path: "/:page/:activity",
+          name: "pageActivity",
+          component: () => import("../views/PageActivity.vue")
+        },
+        {
+          path: "/examples/test-schema",
+          name: "TestSchemaExample",
+          component: () => import("../components/examples/TestSchemaExample.vue")
+        }
+      ]
+    },
+    {
+      path: "/login",
+      name: "Auth Page",
+      component: AuthLayout,
+      redirect: "/login",
+      children: [
+        {
+          path: "/login",
+          name: "login",
+          component: () => import("../views/auth/LoginView.vue")
+        },
+        {
+          path: "/oauth/callback",
+          name: "oauthCallback",
+          component: () => import("../views/auth/OauthCallback.vue")
+        }
+      ]
+    },
+    {
+      path: "/:pathMatch(.*)*",
+      name: "notFound",
+      component: () => import("../views/NotFound.vue")
+    }
+  ]
+});
+
+export default router;

package/src/stores/auth.ts

@@ -0,0 +1,117 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useAppConfig } from '@/composables/useAppConfig'
+
+export const useAuthStore = defineStore('auth', () => {
+  const authToken = ref<string | null>(null)
+  const user = ref<any>(null)
+  const organization = ref<any>(null)
+
+  // Get current config values
+  const { tokenKey, userKey, organizationKey, defaultOrgLevel } = useAppConfig()
+
+  // Computed properties for easy access
+  const isAuthenticated = computed(() => !!authToken.value)
+  const userInfo = computed(() => user.value)
+  const organizationInfo = computed(() => organization.value)
+  const userOrgLevel = computed(() => organization.value?.accessLevel?.code || defaultOrgLevel.value)
+
+  const setAuthToken = (token: string) => {
+    authToken.value = token
+    localStorage.setItem(tokenKey.value, token)
+  }
+
+  const clearAuthToken = () => {
+    authToken.value = null
+    localStorage.removeItem(tokenKey.value)
+  }
+
+  const getAuthToken = () => {
+    return authToken.value || localStorage.getItem(tokenKey.value)
+  }
+
+  const setUser = (userData: any) => {
+    user.value = userData
+    if (userData.name) {
+      localStorage.setItem(userKey.value, userData.name)
+    }
+    if (userData.defaultApp) {
+      localStorage.setItem('app.user.default_app', userData.defaultApp)
+    }
+  }
+
+  const setOrganization = (orgData: any) => {
+    organization.value = orgData
+    if (orgData.name) {
+      localStorage.setItem(organizationKey.value, orgData.name)
+    }
+    if (orgData.accessLevel?.code) {
+      localStorage.setItem('app.user.organization.level', orgData.accessLevel.code)
+    }
+  }
+
+  const clearUser = () => {
+    user.value = null
+    localStorage.removeItem(userKey.value)
+    localStorage.removeItem('app.user.default_app')
+  }
+
+  const clearOrganization = () => {
+    organization.value = null
+    localStorage.removeItem(organizationKey.value)
+    localStorage.removeItem('app.user.organization.level')
+  }
+
+  const logout = () => {
+    clearAuthToken()
+    clearUser()
+    clearOrganization()
+  }
+
+  const initializeFromStorage = () => {
+    const token = localStorage.getItem(tokenKey.value)
+    const userName = localStorage.getItem(userKey.value)
+    const orgName = localStorage.getItem(organizationKey.value)
+    const orgLevel = localStorage.getItem('app.user.organization.level')
+    const defaultApp = localStorage.getItem('app.user.default_app')
+
+    if (token) {
+      authToken.value = token
+    }
+
+    if (userName) {
+      user.value = { name: userName, defaultApp }
+    }
+
+    if (orgName && orgLevel) {
+      organization.value = { 
+        name: orgName, 
+        accessLevel: { code: orgLevel } 
+      }
+    }
+  }
+
+  return {
+    // State
+    authToken,
+    user,
+    organization,
+    
+    // Computed
+    isAuthenticated,
+    userInfo,
+    organizationInfo,
+    userOrgLevel,
+    
+    // Methods
+    setAuthToken,
+    clearAuthToken,
+    getAuthToken,
+    setUser,
+    setOrganization,
+    clearUser,
+    clearOrganization,
+    logout,
+    initializeFromStorage
+  }
+})

package/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})