@cosider.construction/eapp-maker 1.0.0

package/src/stubs/layouts/ModuleLayout.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { inject } from 'vue';
+import AppMenuH from '@/components/AppMenuH.vue';
+import AppMenuV from '@/components/AppMenuV.vue';
+import moduleMenu from '@/menus/MODULE_NAME.menu.json';
+
+// Views inside this layout can inject 'hMenuConfig' to add a sub hMenu
+// Layout owns the main hMenu and vMenu from the module's menu.json
+const subHMenu = inject('hMenuConfig', null);
+
+const hMenuConfig = moduleMenu.hMenu || { style: 'classic', items: [] };
+const vMenuConfig = moduleMenu.vMenu || { items: [] };
+</script>
+
+<template>
+  <div class="module-layout">
+    <!-- Module hMenu -->
+    <AppMenuH :config="hMenuConfig" />
+
+    <!-- Optional sub hMenu injected by the view -->
+    <AppMenuH v-if="subHMenu" :config="subHMenu" sub />
+
+    <div class="module-layout__body">
+      <!-- Module vMenu -->
+      <AppMenuV :config="vMenuConfig" />
+
+      <main class="module-layout__main">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.module-layout       { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+.module-layout__body { display: flex; flex: 1; overflow: hidden; }
+.module-layout__main { flex: 1; overflow: auto; padding: 1.5rem; background: #1e1e2e; }
+</style>

package/src/stubs/loaders/loader.ipc.js

@@ -0,0 +1,94 @@
+import { ipcMain } from 'electron';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { checkPermission } from '../engine/auth.js';
+
+const __dirname  = path.dirname(fileURLToPath(import.meta.url));
+const BACKEND    = path.resolve(__dirname, '..');
+
+/**
+ * loader.ipc.js
+ * Scans all ipc.json files under shared/ and modules/,
+ * registers each declared method as an Electron IPC handler.
+ *
+ * Channel pattern: <route>:<method>
+ * e.g. modules.RH.EMPLOYEE:getAll
+ */
+export async function loadIpc() {
+  const dirs = [
+    path.join(BACKEND, 'shared'),
+    path.join(BACKEND, 'modules'),
+  ];
+
+  for (const dir of dirs) {
+    if (!fs.existsSync(dir)) continue;
+    for (const ipcPath of walkIpc(dir)) {
+      await registerIpc(ipcPath);
+    }
+  }
+}
+
+function walkIpc(root, out = []) {
+  for (const e of fs.readdirSync(root, { withFileTypes: true })) {
+    const full = path.join(root, e.name);
+    if (e.isDirectory()) walkIpc(full, out);
+    else if (e.name === 'ipc.json') out.push(full);
+  }
+  return out;
+}
+
+async function registerIpc(ipcJsonPath) {
+  let config;
+  try {
+    config = JSON.parse(fs.readFileSync(ipcJsonPath, 'utf8'));
+  } catch (e) {
+    console.warn('[loader.ipc] Failed to parse:', ipcJsonPath);
+    return;
+  }
+
+  const { route, methods = {} } = config;
+  const entityDir = path.dirname(ipcJsonPath);
+
+  let ctrl;
+  try {
+    ctrl = await import(path.join(entityDir, 'controller.js'));
+  } catch (e) {
+    console.warn('[loader.ipc] No controller at:', entityDir);
+    return;
+  }
+
+  for (const [methodName, def] of Object.entries(methods)) {
+    const handler    = typeof def === 'string' ? def : def.handler;
+    const permission = typeof def === 'object'  ? def.permission : null;
+    const channel    = `${route}:${methodName}`;
+
+    if (typeof ctrl[handler] !== 'function') {
+      console.warn(`[loader.ipc] "${handler}" not found in ${entityDir}`);
+      continue;
+    }
+
+    ipcMain.handle(channel, async (_, payload) => {
+      // Permission check
+      if (permission) {
+        const userId = payload?.__userId;
+        const ok     = await checkPermission(userId, permission);
+        if (!ok) return { error: 'FORBIDDEN', message: `Missing permission: ${permission}` };
+      }
+
+      try {
+        const { id, data } = payload || {};
+        if (methodName === 'getById') return await ctrl[handler](id);
+        if (methodName === 'update')  return await ctrl[handler](id, data);
+        if (methodName === 'delete')  return await ctrl[handler](id);
+        if (methodName === 'add')     return await ctrl[handler](data);
+        return await ctrl[handler](payload);
+      } catch (err) {
+        console.error(`[loader.ipc] Error in ${channel}:`, err.message);
+        return { error: 'INTERNAL_ERROR', message: err.message };
+      }
+    });
+
+    console.log('[loader.ipc] registered:', channel);
+  }
+}

package/src/stubs/loaders/loader.menu.js

@@ -0,0 +1,123 @@
+/**
+ * loader.menu.js
+ *
+ * Scans all *.menu.json files in src/frontend/menus/.
+ * Builds two structures:
+ *   - vMenuTree  : full sidebar navigation (merged from all modules)
+ *   - hMenuMap   : keyed by route path, returns hMenu config for that route
+ *
+ * Layout usage:
+ *   import { useMenuLoader } from '@/loaders/loader.menu.js'
+ *   const { vMenuTree, hMenuFor } = useMenuLoader()
+ *   const subHMenu = computed(() => hMenuFor(route.path))
+ *
+ * Menu file types:
+ *   main.menu.json          → app-level
+ *   rh.menu.json            → module-level hMenu + vMenu
+ *   rh.employee.menu.json   → view-level sub hMenu (ribbon or classic)
+ */
+
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAuthStore } from '@/stores/auth.js';
+
+// Vite glob — eager load all menu files
+const allMenuFiles = import.meta.glob('@/menus/*.menu.json', { eager: true });
+
+function getMenu(file) {
+  return file?.default ?? file ?? {};
+}
+
+// ─── Build structures ─────────────────────────────────────────────────────────
+
+let _vMenuTree = null;
+let _hMenuMap  = null;
+
+function build(auth) {
+  const vMenuTree = [];
+  const hMenuMap  = {};
+
+  for (const [filePath, raw] of Object.entries(allMenuFiles)) {
+    const menu     = getMenu(raw);
+    const fileName = filePath.split('/').pop().replace('.menu.json', '');
+    const parts    = fileName.split('.');
+
+    if (parts.length === 1 || (parts.length === 2 && parts[0] !== 'main')) {
+      // Module-level or main: contribute to vMenuTree
+      if (menu.vMenu?.items) {
+        const filtered = filterItems(menu.vMenu.items, auth);
+        if (filtered.length) vMenuTree.push(...filtered);
+      }
+
+      // Module hMenu keyed by module root route
+      if (menu.hMenu && menu.module) {
+        hMenuMap[`/${menu.module}`] = menu.hMenu;
+      }
+    }
+
+    if (parts.length >= 2) {
+      // View-level: rh.employee → keyed by /rh/employee
+      const route = '/' + parts.join('/');
+      if (menu.hMenu) {
+        hMenuMap[route] = menu.hMenu;
+      }
+    }
+  }
+
+  return { vMenuTree, hMenuMap };
+}
+
+// ─── Filter by permission ─────────────────────────────────────────────────────
+
+function filterItems(items, auth) {
+  return items
+    .filter(item => !item.permission || auth.hasPermission(item.permission))
+    .map(item => ({
+      ...item,
+      children: item.children ? filterItems(item.children, auth) : undefined,
+    }));
+}
+
+// ─── Composable ───────────────────────────────────────────────────────────────
+
+export function useMenuLoader() {
+  const auth  = useAuthStore();
+  const route = useRoute();
+
+  const { vMenuTree, hMenuMap } = build(auth);
+
+  /**
+   * Returns the hMenu config for a given route path.
+   * Checks exact match first, then parent path.
+   */
+  function hMenuFor(routePath) {
+    if (hMenuMap[routePath]) return hMenuMap[routePath];
+    // Try parent path (e.g. /rh/employee/1 → /rh/employee → /rh)
+    const parts = routePath.split('/').filter(Boolean);
+    while (parts.length > 0) {
+      parts.pop();
+      const parent = '/' + parts.join('/');
+      if (hMenuMap[parent]) return hMenuMap[parent];
+    }
+    return null;
+  }
+
+  const currentHMenu = computed(() => hMenuFor(route.path));
+  const currentSubHMenu = computed(() => {
+    // Sub hMenu = view-level menu (2-part key like rh.employee)
+    const parts = route.path.split('/').filter(Boolean);
+    if (parts.length >= 2) {
+      const key = '/' + parts.slice(0, 2).join('/');
+      return hMenuMap[key] || null;
+    }
+    return null;
+  });
+
+  return {
+    vMenuTree,
+    hMenuMap,
+    hMenuFor,
+    currentHMenu,
+    currentSubHMenu,
+  };
+}

package/src/stubs/loaders/loader.routes.js

@@ -0,0 +1,137 @@
+/**
+ * loader.routes.js
+ *
+ * Discovers all view components under src/frontend/views/
+ * and builds Vue Router route entries automatically.
+ *
+ * Convention:
+ *   views/AppHome.vue                          → /
+ *   views/modules/rh/RhHome.vue               → /rh
+ *   views/modules/rh/employee/EmployeeIndex.vue → /rh/employee
+ *   views/shared/client/ClientIndex.vue        → /shared/client
+ *
+ * Layout mapping:
+ *   views/modules/<mod>/...  → tries to import <Mod>Layout, falls back to DefaultLayout
+ *   views/shared/...         → DefaultLayout
+ *
+ * Meta:
+ *   Each route gets meta.permission from the module/entity name
+ *   e.g. /rh/employee → 'rh.employee.view'
+ */
+
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { useAuthStore } from '@/stores/auth.js';
+
+// Vite globs — discover all Index and Home views
+const indexViews = import.meta.glob('@/views/modules/*/*/Index.vue');   // not matching — see below
+const moduleViews = import.meta.glob([
+  '@/views/modules/**/*Index.vue',
+  '@/views/modules/**/*Home.vue',
+  '@/views/shared/**/*Index.vue',
+  '@/views/AppHome.vue',
+  '@/views/LoginView.vue',
+  '@/views/AccessDeniedView.vue',
+]);
+
+// Layout map — tries PascalCase module layout, falls back to Default
+const layouts = import.meta.glob('@/layouts/*Layout.vue');
+
+async function resolveLayout(moduleName) {
+  if (!moduleName) return () => import('@/layouts/DefaultLayout.vue');
+  const key = `/src/frontend/layouts/${moduleName.charAt(0).toUpperCase() + moduleName.slice(1)}Layout.vue`;
+  return layouts[key] || (() => import('@/layouts/DefaultLayout.vue'));
+}
+
+// ─── Build routes ─────────────────────────────────────────────────────────────
+
+function pathFromFile(filePath) {
+  // e.g. /src/frontend/views/modules/rh/employee/EmployeeIndex.vue → /rh/employee
+  const match = filePath.match(/views\/modules\/([^/]+)\/([^/]+)\/\w+Index\.vue$/);
+  if (match) return `/${match[1]}/${match[2]}`;
+
+  const homeMatch = filePath.match(/views\/modules\/([^/]+)\/\w+Home\.vue$/);
+  if (homeMatch) return `/${homeMatch[1]}`;
+
+  const sharedMatch = filePath.match(/views\/shared\/([^/]+)\/\w+Index\.vue$/);
+  if (sharedMatch) return `/shared/${sharedMatch[1]}`;
+
+  if (filePath.includes('AppHome.vue'))          return '/';
+  if (filePath.includes('LoginView.vue'))         return '/login';
+  if (filePath.includes('AccessDeniedView.vue'))  return '/access-denied';
+
+  return null;
+}
+
+function moduleFromPath(routePath) {
+  const parts = routePath.split('/').filter(Boolean);
+  return parts[0] || null;
+}
+
+function permissionFromPath(routePath) {
+  const parts = routePath.split('/').filter(Boolean);
+  if (parts.length >= 2) return `${parts[0]}.${parts[1]}.view`;
+  if (parts.length === 1) return `${parts[0]}.view`;
+  return null;
+}
+
+const routes = [
+  // Static auth routes always present
+  {
+    path: '/login',
+    component: () => import('@/views/LoginView.vue'),
+    meta: { public: true },
+  },
+  {
+    path: '/access-denied',
+    component: () => import('@/views/AccessDeniedView.vue'),
+    meta: { public: true },
+  },
+];
+
+// Dynamically discovered routes
+for (const [filePath, component] of Object.entries(moduleViews)) {
+  if (filePath.includes('LoginView') || filePath.includes('AccessDeniedView')) continue;
+
+  const routePath = pathFromFile(filePath);
+  if (!routePath) continue;
+
+  const mod        = moduleFromPath(routePath);
+  const permission = permissionFromPath(routePath);
+
+  routes.push({
+    path: routePath,
+    component,
+    meta: {
+      permission,
+      module: mod,
+      layout: mod,
+    },
+  });
+}
+
+// ─── Create router ────────────────────────────────────────────────────────────
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+// ─── Navigation guard ─────────────────────────────────────────────────────────
+
+router.beforeEach((to, _, next) => {
+  if (to.meta?.public) return next();
+
+  const auth = useAuthStore();
+
+  if (!auth.isAuthenticated) {
+    return next({ path: '/login', query: { redirect: to.fullPath } });
+  }
+
+  if (to.meta?.permission && !auth.canAccess(to)) {
+    return next('/access-denied');
+  }
+
+  next();
+});
+
+export default router;

package/src/stubs/views/AppHome.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+// Widget grid config — edit this to rearrange widgets
+// Each widget: { id, col, row, colSpan, rowSpan, type, title, config }
+const gridConfig = ref([
+  { id: 'w1', col: 1, row: 1, colSpan: 2, rowSpan: 1, type: 'placeholder', title: 'Widget 1' },
+  { id: 'w2', col: 3, row: 1, colSpan: 1, rowSpan: 1, type: 'placeholder', title: 'Widget 2' },
+  { id: 'w3', col: 1, row: 2, colSpan: 1, rowSpan: 1, type: 'placeholder', title: 'Widget 3' },
+  { id: 'w4', col: 2, row: 2, colSpan: 2, rowSpan: 1, type: 'placeholder', title: 'Widget 4' },
+]);
+
+const COLS = 3; // grid columns
+
+function gridStyle(widget) {
+  return {
+    gridColumn: `${widget.col} / span ${widget.colSpan}`,
+    gridRow:    `${widget.row} / span ${widget.rowSpan}`,
+  };
+}
+</script>
+
+<template>
+  <div class="app-home">
+    <div class="app-home__header">
+      <h1 class="app-home__title">Dashboard</h1>
+      <p class="app-home__sub">Welcome back</p>
+    </div>
+
+    <div class="widget-grid" :style="{ '--grid-cols': COLS }">
+      <div
+        v-for="widget in gridConfig"
+        :key="widget.id"
+        class="widget"
+        :style="gridStyle(widget)"
+      >
+        <div class="widget__header">
+          <span class="widget__title">{{ widget.title }}</span>
+        </div>
+        <div class="widget__body">
+          <!-- placeholder — replace with real widget components -->
+          <div class="widget__placeholder">
+            <span>{{ widget.type }}</span>
+            <small>Configure in gridConfig</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-home           { padding: 1.5rem; color: #cdd6f4; }
+.app-home__header   { margin-bottom: 1.5rem; }
+.app-home__title    { font-size: 1.5rem; font-weight: 700; margin: 0; }
+.app-home__sub      { color: #6c7086; margin: .25rem 0 0; font-size: .875rem; }
+
+.widget-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
+  gap: 1rem;
+}
+
+.widget {
+  background: #313244;
+  border: 1px solid #45475a;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 180px;
+}
+.widget__header {
+  padding: .75rem 1rem;
+  border-bottom: 1px solid #45475a;
+  display: flex; align-items: center; justify-content: space-between;
+}
+.widget__title  { font-weight: 600; font-size: .875rem; color: #cdd6f4; }
+.widget__body   { flex: 1; padding: 1rem; }
+.widget__placeholder {
+  height: 100%; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: .35rem;
+  color: #585b70; font-size: .8rem;
+}
+</style>

package/src/stubs/views/ModuleHome.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { ref } from 'vue';
+
+// MODULE_NAME home page
+// Customise gridConfig to add widgets for this module
+
+const gridConfig = ref([
+  { id: 'w1', col: 1, row: 1, colSpan: 2, rowSpan: 1, type: 'placeholder', title: 'MODULE_NAME Overview' },
+  { id: 'w2', col: 3, row: 1, colSpan: 1, rowSpan: 1, type: 'placeholder', title: 'Quick Stats' },
+  { id: 'w3', col: 1, row: 2, colSpan: 3, rowSpan: 1, type: 'placeholder', title: 'Recent Activity' },
+]);
+
+const COLS = 3;
+
+function gridStyle(w) {
+  return {
+    gridColumn: `${w.col} / span ${w.colSpan}`,
+    gridRow:    `${w.row} / span ${w.rowSpan}`,
+  };
+}
+</script>
+
+<template>
+  <div class="module-home">
+    <div class="module-home__header">
+      <h1 class="module-home__title">MODULE_LABEL</h1>
+      <p class="module-home__sub">Module overview</p>
+    </div>
+
+    <div class="widget-grid" :style="{ '--grid-cols': COLS }">
+      <div
+        v-for="widget in gridConfig"
+        :key="widget.id"
+        class="widget"
+        :style="gridStyle(widget)"
+      >
+        <div class="widget__header">
+          <span class="widget__title">{{ widget.title }}</span>
+        </div>
+        <div class="widget__body">
+          <div class="widget__placeholder">
+            <span>{{ widget.type }}</span>
+            <small>Configure in gridConfig</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.module-home          { padding: 1.5rem; color: #cdd6f4; }
+.module-home__header  { margin-bottom: 1.5rem; }
+.module-home__title   { font-size: 1.4rem; font-weight: 700; margin: 0; }
+.module-home__sub     { color: #6c7086; margin: .25rem 0 0; font-size: .875rem; }
+.widget-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
+  gap: 1rem;
+}
+.widget {
+  background: #313244; border: 1px solid #45475a;
+  border-radius: 10px; overflow: hidden;
+  display: flex; flex-direction: column; min-height: 160px;
+}
+.widget__header {
+  padding: .75rem 1rem; border-bottom: 1px solid #45475a;
+  display: flex; align-items: center;
+}
+.widget__title  { font-weight: 600; font-size: .875rem; color: #cdd6f4; }
+.widget__body   { flex: 1; padding: 1rem; }
+.widget__placeholder {
+  height: 100%; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: .35rem;
+  color: #585b70; font-size: .8rem;
+}
+</style>