gmoonc 0.0.9 → 0.0.11

package/README.md

@@ -48,6 +48,11 @@ The dashboard code is in `src/gmoonc/` and is independent. You can remove `gmoon
 
 ## Changelog
 
+### 0.0.10
+- Fix: ensure BrowserRouter import when patched into App.tsx (definitive fix)
+- Fix: prevent re-installation if src/gmoonc or marker file exists
+- Fix: create marker file (.gmoonc-installed.json) after successful installation
+
 ### 0.0.9
 - Fix: ensure BrowserRouter import when patched into App.tsx
 

package/dist/index.cjs

@@ -5,6 +5,7 @@
 var import_commander = require("commander");
 var import_process = require("process");
 var import_path6 = require("path");
+var import_fs9 = require("fs");
 
 // src/cli/lib/detect.ts
 var import_fs = require("fs");
@@ -504,6 +505,78 @@ ${routeElements.join(",\n")}
   logSuccess("Generated src/gmoonc/router/AppRoutes.tsx");
   return { success: true };
 }
+function ensureBrowserRouterImport(content) {
+  if (!content.includes("<BrowserRouter")) {
+    return content;
+  }
+  const lines = content.split("\n");
+  let hasBrowserRouterImport = false;
+  let reactRouterImportIndex = -1;
+  let reactRouterImportLine = null;
+  let quoteStyle = '"';
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    if (trimmed.startsWith("import ") && (trimmed.includes("'") || trimmed.includes('"'))) {
+      if (trimmed.includes("'")) quoteStyle = "'";
+      else if (trimmed.includes('"')) quoteStyle = '"';
+    }
+    if (trimmed.includes("from") && trimmed.includes("react-router-dom")) {
+      reactRouterImportIndex = i;
+      reactRouterImportLine = line;
+      const browserRouterPattern = /\bBrowserRouter\b/;
+      if (browserRouterPattern.test(trimmed)) {
+        hasBrowserRouterImport = true;
+      }
+    }
+  }
+  if (hasBrowserRouterImport) {
+    return content;
+  }
+  if (reactRouterImportIndex >= 0 && reactRouterImportLine) {
+    const existingLine = reactRouterImportLine;
+    const indent = existingLine.match(/^(\s*)/)?.[1] || "";
+    const namedMatch = existingLine.match(/^(\s*)import\s+\{([^}]+)\}\s+from\s+(["'])react-router-dom\2/);
+    if (namedMatch) {
+      const importListStr = namedMatch[2];
+      const quote = namedMatch[3];
+      const importItems = importListStr.split(",").map((s) => s.trim()).filter(Boolean);
+      const hasBrowserRouter = importItems.some(
+        (item) => item === "BrowserRouter" || item === "type BrowserRouter" || item.includes("BrowserRouter")
+      );
+      if (!hasBrowserRouter) {
+        const typeImports = importItems.filter((item) => item.startsWith("type "));
+        const regularImports = importItems.filter((item) => !item.startsWith("type "));
+        regularImports.push("BrowserRouter");
+        const sortedImports = [...regularImports, ...typeImports];
+        const separator = importListStr.includes(",\n") ? ",\n" : ", ";
+        const formatted = sortedImports.join(separator);
+        const updatedLine = `${indent}import { ${formatted} } from ${quote}react-router-dom${quote};`;
+        lines[reactRouterImportIndex] = updatedLine;
+      }
+    } else {
+      const newImportLine = `${indent}import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
+      lines.splice(reactRouterImportIndex + 1, 0, newImportLine);
+    }
+  } else {
+    const importLine = `import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith("import ") || line.startsWith("import{") || line.startsWith("import	")) {
+        lastImportIndex = i;
+      } else if (line && lastImportIndex >= 0 && !line.startsWith("//") && !line.startsWith("/*")) {
+        break;
+      }
+    }
+    if (lastImportIndex >= 0) {
+      lines.splice(lastImportIndex + 1, 0, importLine);
+    } else {
+      lines.unshift(importLine);
+    }
+  }
+  return lines.join("\n");
+}
 function patchBrowserRouter(consumerDir, basePath, dryRun) {
   const appCandidates = ["src/App.tsx", "src/App.jsx", "src/App.ts", "src/App.js"];
   let appPath = null;
@@ -562,68 +635,6 @@ function patchBrowserRouter(consumerDir, basePath, dryRun) {
   generateAppRoutes(consumerDir, basePath, routes, appPath, false);
   const backupPath = writeFileSafe(appPath, "");
   const lines = appContent.split("\n");
-  let hasBrowserRouterImport = false;
-  let reactRouterImportIndex = -1;
-  let reactRouterImportLine = null;
-  let quoteStyle = '"';
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const trimmed = line.trim();
-    if (trimmed.startsWith("import ") && (trimmed.includes("'") || trimmed.includes('"'))) {
-      if (trimmed.includes("'")) quoteStyle = "'";
-      else if (trimmed.includes('"')) quoteStyle = '"';
-    }
-    if (trimmed.includes("from") && trimmed.includes("react-router-dom")) {
-      reactRouterImportIndex = i;
-      reactRouterImportLine = line;
-      const browserRouterPattern = /\bBrowserRouter\b/;
-      if (browserRouterPattern.test(trimmed)) {
-        hasBrowserRouterImport = true;
-      }
-    }
-  }
-  if (!hasBrowserRouterImport) {
-    if (reactRouterImportIndex >= 0 && reactRouterImportLine) {
-      const existingLine = reactRouterImportLine;
-      const indent2 = existingLine.match(/^(\s*)/)?.[1] || "";
-      const namedMatch = existingLine.match(/^(\s*)import\s+\{([^}]+)\}\s+from\s+(["'])react-router-dom\2/);
-      if (namedMatch) {
-        const importListStr = namedMatch[2];
-        const quote = namedMatch[3];
-        const importItems = importListStr.split(",").map((s) => s.trim()).filter(Boolean);
-        const hasBrowserRouter = importItems.some(
-          (item) => item === "BrowserRouter" || item === "type BrowserRouter" || item.includes("BrowserRouter")
-        );
-        if (!hasBrowserRouter) {
-          importItems.push("BrowserRouter");
-          const hasTrailingComma = importListStr.trim().endsWith(",");
-          const separator = importListStr.includes(",\n") ? ",\n" : ", ";
-          const formatted = importItems.join(separator) + (hasTrailingComma ? "," : "");
-          const updatedLine = `${indent2}import { ${formatted} } from ${quote}react-router-dom${quote};`;
-          lines[reactRouterImportIndex] = updatedLine;
-        }
-      } else {
-        const newImportLine = `${indent2}import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
-        lines.splice(reactRouterImportIndex + 1, 0, newImportLine);
-      }
-    } else {
-      const importLine2 = `import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
-      let lastImportIndex2 = -1;
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
-        if (line.startsWith("import ") || line.startsWith("import{") || line.startsWith("import	")) {
-          lastImportIndex2 = i;
-        } else if (line && lastImportIndex2 >= 0 && !line.startsWith("//") && !line.startsWith("/*")) {
-          break;
-        }
-      }
-      if (lastImportIndex2 >= 0) {
-        lines.splice(lastImportIndex2 + 1, 0, importLine2);
-      } else {
-        lines.unshift(importLine2);
-      }
-    }
-  }
   const importLine = `import { GMooncAppRoutes } from "./gmoonc/router/AppRoutes";`;
   let lastImportIndex = -1;
   for (let i = 0; i < lines.length; i++) {
@@ -682,6 +693,7 @@ function patchBrowserRouter(consumerDir, basePath, dryRun) {
     newContent = newContent.replace(/import\s+{[^}]*Routes[^}]*}\s+from\s+["']react-router-dom["'];?\n?/g, "");
     newContent = newContent.replace(/import\s+{[^}]*Route[^}]*}\s+from\s+["']react-router-dom["'];?\n?/g, "");
   }
+  newContent = ensureBrowserRouterImport(newContent);
   writeFileSafe(appPath, newContent);
   logSuccess(`Patched ${appPath} (backup: ${backupPath})`);
   return { success: true, backupPath };
@@ -689,7 +701,7 @@ function patchBrowserRouter(consumerDir, basePath, dryRun) {
 
 // src/cli/index.ts
 var program = new import_commander.Command();
-program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete dashboard into your React project").version("0.0.9").option("--base <path>", "Base path for dashboard routes", "/app").option("--skip-router-patch", "Skip automatic router integration (only copy files and inject CSS)").option("--dry-run", "Show what would be done without making changes").action(async (options) => {
+program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete dashboard into your React project").version("0.0.11").option("--base <path>", "Base path for dashboard routes", "/app").option("--skip-router-patch", "Skip automatic router integration (only copy files and inject CSS)").option("--dry-run", "Show what would be done without making changes").action(async (options) => {
   try {
     logInfo("\u{1F680} Starting gmoonc installer...");
     logInfo("\u{1F4E6} Installing complete dashboard into your React project\n");
@@ -697,6 +709,13 @@ program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete das
     const basePath = options.base || "/app";
     const dryRun = options.dryRun || false;
     const skipRouterPatch = options.skipRouterPatch || false;
+    const gmooncDir = (0, import_path6.join)(projectDir, "src/gmoonc");
+    const markerFile = (0, import_path6.join)(gmooncDir, ".gmoonc-installed.json");
+    if ((0, import_fs9.existsSync)(gmooncDir) || (0, import_fs9.existsSync)(markerFile)) {
+      logError("gmoonc already installed (src/gmoonc exists or marker file found).");
+      logError("Remove src/gmoonc and restore backups to reinstall.");
+      process.exit(1);
+    }
     const safeBasePath = basePath === "/" ? "/app" : basePath;
     logInfo("\u{1F50D} Detecting React project...");
     const project = detectProject(projectDir);
@@ -753,6 +772,26 @@ program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete das
     } else {
       logInfo("\n\u23ED\uFE0F  Skipping router patch (router not detected)");
     }
+    if (!dryRun) {
+      ensureDirectoryExists(markerFile);
+      const packageJsonPath = (0, import_path6.join)(projectDir, "package.json");
+      let version = "0.0.10";
+      try {
+        if ((0, import_fs9.existsSync)(packageJsonPath)) {
+          const packageJson = JSON.parse((0, import_fs9.readFileSync)(packageJsonPath, "utf-8"));
+          const gmooncVersion = packageJson.dependencies?.gmoonc || packageJson.devDependencies?.gmoonc;
+          if (gmooncVersion) {
+            version = gmooncVersion.replace(/^[\^~]/, "");
+          }
+        }
+      } catch {
+      }
+      const markerContent = JSON.stringify({
+        version,
+        installedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }, null, 2);
+      (0, import_fs9.writeFileSync)(markerFile, markerContent, "utf-8");
+    }
     logSuccess("\n\u2705 Installation complete!");
     logInfo("\nYour dashboard is now available at:");
     logInfo(`  - Home: ${safeBasePath}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gmoonc",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Goalmoon Ctrl (gmoonc): Complete dashboard installer for React projects",
   "license": "MIT",
   "homepage": "https://gmoonc.com",

package/scripts/test-browserrouter-import.mjs

@@ -0,0 +1,259 @@
+#!/usr/bin/env node
+/**
+ * Regression test for BrowserRouter import patch
+ * Tests ensureBrowserRouterImport function with various fixtures
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Import the ensureBrowserRouterImport function
+// Since it's not exported, we'll test it indirectly through patchBrowserRouter
+// For now, we'll create a test version of the function
+
+function ensureBrowserRouterImport(content) {
+  // Check if <BrowserRouter> is used in the content
+  if (!content.includes('<BrowserRouter')) {
+    return content; // No BrowserRouter used, no need to add import
+  }
+
+  const lines = content.split('\n');
+  let hasBrowserRouterImport = false;
+  let reactRouterImportIndex = -1;
+  let reactRouterImportLine = null;
+  let quoteStyle = '"'; // Default to double quotes
+  
+  // First pass: detect existing imports and quote style
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    
+    // Detect quote style from existing imports
+    if (trimmed.startsWith('import ') && (trimmed.includes("'") || trimmed.includes('"'))) {
+      if (trimmed.includes("'")) quoteStyle = "'";
+      else if (trimmed.includes('"')) quoteStyle = '"';
+    }
+    
+    // Check for react-router-dom imports
+    if (trimmed.includes('from') && trimmed.includes('react-router-dom')) {
+      reactRouterImportIndex = i;
+      reactRouterImportLine = line;
+      
+      // Check if BrowserRouter is already imported
+      const browserRouterPattern = /\bBrowserRouter\b/;
+      if (browserRouterPattern.test(trimmed)) {
+        hasBrowserRouterImport = true;
+      }
+    }
+  }
+  
+  // If BrowserRouter is already imported, return content as-is
+  if (hasBrowserRouterImport) {
+    return content;
+  }
+  
+  // Add or update BrowserRouter import
+  if (reactRouterImportIndex >= 0 && reactRouterImportLine) {
+    // Update existing react-router-dom import to include BrowserRouter
+    const existingLine = reactRouterImportLine;
+    const indent = existingLine.match(/^(\s*)/)?.[1] || '';
+    
+    // Match: import { X, Y } from "react-router-dom" or import { type X } from "react-router-dom"
+    const namedMatch = existingLine.match(/^(\s*)import\s+\{([^}]+)\}\s+from\s+(["'])react-router-dom\2/);
+    if (namedMatch) {
+      const importListStr = namedMatch[2];
+      const quote = namedMatch[3];
+      
+      // Parse imports, handling "type" keywords
+      const importItems = importListStr.split(',').map(s => s.trim()).filter(Boolean);
+      const hasBrowserRouter = importItems.some(item => 
+        item === 'BrowserRouter' || 
+        item === 'type BrowserRouter' || 
+        item.includes('BrowserRouter')
+      );
+      
+      if (!hasBrowserRouter) {
+        // Add BrowserRouter to the list (before type imports if any)
+        const typeImports = importItems.filter(item => item.startsWith('type '));
+        const regularImports = importItems.filter(item => !item.startsWith('type '));
+        
+        regularImports.push('BrowserRouter');
+        const sortedImports = [...regularImports, ...typeImports];
+        
+        // Preserve original formatting
+        const separator = importListStr.includes(',\n') ? ',\n' : ', ';
+        const formatted = sortedImports.join(separator);
+        const updatedLine = `${indent}import { ${formatted} } from ${quote}react-router-dom${quote};`;
+        lines[reactRouterImportIndex] = updatedLine;
+      }
+    } else {
+      // Namespace import or default import
+      // Add separate named import for BrowserRouter
+      const newImportLine = `${indent}import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
+      lines.splice(reactRouterImportIndex + 1, 0, newImportLine);
+    }
+  } else {
+    // No react-router-dom import exists, add it
+    const importLine = `import { BrowserRouter } from ${quoteStyle}react-router-dom${quoteStyle};`;
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith('import ') || line.startsWith('import{') || line.startsWith('import\t')) {
+        lastImportIndex = i;
+      } else if (line && lastImportIndex >= 0 && !line.startsWith('//') && !line.startsWith('/*')) {
+        break;
+      }
+    }
+    if (lastImportIndex >= 0) {
+      lines.splice(lastImportIndex + 1, 0, importLine);
+    } else {
+      lines.unshift(importLine);
+    }
+  }
+  
+  return lines.join('\n');
+}
+
+// Test fixtures
+const fixtures = [
+  {
+    name: 'Fixture 1: No react-router-dom import',
+    input: `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'sonner';
+import Index from './pages/Index';
+
+function App() {
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <Toaster />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;`,
+    expected: (output) => {
+      return output.includes('import { BrowserRouter }') && 
+             output.includes('react-router-dom') &&
+             output.includes('<BrowserRouter>');
+    }
+  },
+  {
+    name: 'Fixture 2: Existing Routes, Route import',
+    input: `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Routes, Route } from "react-router-dom";
+import Index from './pages/Index';
+
+function App() {
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;`,
+    expected: (output) => {
+      return output.includes('import { BrowserRouter, Routes, Route }') ||
+             (output.includes('import { BrowserRouter }') && output.includes('import { Routes, Route }'));
+    }
+  },
+  {
+    name: 'Fixture 3: Type import only',
+    input: `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type RouteObject } from "react-router-dom";
+import Index from './pages/Index';
+
+function App() {
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;`,
+    expected: (output) => {
+      return output.includes('BrowserRouter') && 
+             output.includes('type RouteObject') &&
+             output.includes('react-router-dom');
+    }
+  },
+  {
+    name: 'Fixture 4: Namespace import',
+    input: `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import * as ReactRouterDOM from "react-router-dom";
+import Index from './pages/Index';
+
+function App() {
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;`,
+    expected: (output) => {
+      // Should have both namespace import and named BrowserRouter import
+      const hasNamespace = output.includes('import * as ReactRouterDOM');
+      const hasNamed = output.includes('import { BrowserRouter }');
+      return hasNamespace && hasNamed;
+    }
+  }
+];
+
+let passed = 0;
+let failed = 0;
+
+console.log('🧪 Running BrowserRouter import regression tests...\n');
+
+for (const fixture of fixtures) {
+  try {
+    const output = ensureBrowserRouterImport(fixture.input);
+    const result = fixture.expected(output);
+    
+    if (result) {
+      console.log(`✅ ${fixture.name}`);
+      passed++;
+    } else {
+      console.error(`❌ ${fixture.name}`);
+      console.error('   Output:', output.split('\n').slice(0, 5).join('\n'));
+      failed++;
+    }
+  } catch (error) {
+    console.error(`❌ ${fixture.name}`);
+    console.error(`   Error: ${error.message}`);
+    failed++;
+  }
+}
+
+console.log(`\n📊 Results: ${passed} passed, ${failed} failed`);
+
+if (failed > 0) {
+  console.error('\n❌ Some tests failed!');
+  process.exit(1);
+} else {
+  console.log('\n✅ All tests passed!');
+  process.exit(0);
+}

package/src/templates/shared/src/gmoonc/app/menu/defaultMenu.ts

@@ -1,10 +1,15 @@
 import { type MenuItem as CoreMenuItem } from '../../core/types';
+import { Home, Users, Shield, MessageSquare, Settings, ChevronRight, ChevronDown } from 'lucide-react';
+import type React from 'react';
 
 /**
  * Extended MenuItem interface with submenu support
  */
 export interface MenuItemWithSubmenu extends CoreMenuItem {
   submenu?: MenuItemWithSubmenu[];
+  icon?: React.ReactNode;
+  expandIcon?: React.ReactNode;
+  collapseIcon?: React.ReactNode;
 }
 
 /**
@@ -25,37 +30,45 @@ export function createDefaultMenu(basePath: string = '/app'): MenuItemWithSubmen
       id: 'home',
       label: 'Home',
       path: basePath,
-      roles: []
+      roles: [],
+      icon: <Home size={18} strokeWidth={2.5} />
     },
     {
       id: 'admin',
       label: 'Admin',
       path: `${basePath}/admin`,
       roles: ['admin'],
+      icon: <Shield size={18} strokeWidth={2.5} />,
+      expandIcon: <ChevronRight size={16} strokeWidth={2.5} />,
+      collapseIcon: <ChevronDown size={16} strokeWidth={2.5} />,
       submenu: [
         {
           id: 'admin-users',
           label: 'Users',
           path: `${basePath}/admin/users`,
-          roles: ['admin']
+          roles: ['admin'],
+          icon: <Users size={16} strokeWidth={2.5} />
         },
         {
           id: 'admin-permissions',
           label: 'Permissions',
           path: `${basePath}/admin/permissions`,
-          roles: ['admin']
+          roles: ['admin'],
+          icon: <Shield size={16} strokeWidth={2.5} />
         },
         {
           id: 'admin-authorizations',
           label: 'Authorization Management',
           path: `${basePath}/admin/authorizations`,
-          roles: ['admin']
+          roles: ['admin'],
+          icon: <Settings size={16} strokeWidth={2.5} />
         },
         {
           id: 'admin-notifications',
           label: 'Notification Management',
           path: `${basePath}/admin/notifications`,
-          roles: ['admin']
+          roles: ['admin'],
+          icon: <MessageSquare size={16} strokeWidth={2.5} />
         }
       ]
     },
@@ -64,12 +77,16 @@ export function createDefaultMenu(basePath: string = '/app'): MenuItemWithSubmen
       label: 'Technical',
       path: `${basePath}/technical`,
       roles: [],
+      icon: <Settings size={18} strokeWidth={2.5} />,
+      expandIcon: <ChevronRight size={16} strokeWidth={2.5} />,
+      collapseIcon: <ChevronDown size={16} strokeWidth={2.5} />,
       submenu: [
         {
           id: 'technical-messages',
           label: 'Messages',
           path: `${basePath}/technical/messages`,
-          roles: []
+          roles: [],
+          icon: <MessageSquare size={16} strokeWidth={2.5} />
         }
       ]
     },
@@ -78,12 +95,16 @@ export function createDefaultMenu(basePath: string = '/app'): MenuItemWithSubmen
       label: 'Customer',
       path: `${basePath}/customer`,
       roles: [],
+      icon: <Users size={18} strokeWidth={2.5} />,
+      expandIcon: <ChevronRight size={16} strokeWidth={2.5} />,
+      collapseIcon: <ChevronDown size={16} strokeWidth={2.5} />,
       submenu: [
         {
           id: 'customer-messages',
           label: 'Messages',
           path: `${basePath}/customer/messages`,
-          roles: []
+          roles: [],
+          icon: <MessageSquare size={16} strokeWidth={2.5} />
         }
       ]
     }

package/src/templates/shared/src/gmoonc/styles/gmoonc.css

@@ -1,3 +1,6 @@
+/* Import Montserrat font from Google Fonts (ported from sicoop-app) */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+
 /* App-specific styles (ported from legacy sicoop-app) */
 
 /* Auth pages */
@@ -25,15 +28,15 @@
 }
 
 .gmoonc-auth-header h1 {
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   font-size: 28px;
   font-weight: bold;
   margin: 0 0 10px 0;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .gmoonc-auth-header p {
-  color: #6c757d;
+  color: var(--gmoonc-color-text-secondary);
   font-size: 16px;
   margin: 0;
 }
@@ -70,10 +73,10 @@
 
 .gmoonc-form-group label {
   display: block;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   font-weight: 600;
   margin-bottom: 8px;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .gmoonc-form-group input,
@@ -84,28 +87,28 @@
   border-radius: 8px;
   font-size: 16px;
   transition: border-color 0.3s ease;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
   background-color: white;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   box-sizing: border-box;
 }
 
 .gmoonc-form-group input::placeholder {
-  color: #879FED;
+  color: var(--gmoonc-color-primary);
   opacity: 0.7;
 }
 
 .gmoonc-form-group input:focus,
 .gmoonc-form-group select:focus {
   outline: none;
-  border-color: #6374AD;
+  border-color: var(--gmoonc-color-primary-2);
   background-color: white;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
 }
 
 .gmoonc-form-group input:hover,
 .gmoonc-form-group select:hover {
-  border-color: #879FED;
+  border-color: var(--gmoonc-color-primary);
   background-color: #f8f9fa;
 }
 
@@ -113,7 +116,7 @@
 .gmoonc-form-group select:disabled {
   background-color: #f8f9fa;
   cursor: not-allowed;
-  color: #6c757d;
+  color: var(--gmoonc-color-text-secondary);
   border-color: #dee2e6;
 }
 
@@ -128,7 +131,7 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
   margin-bottom: 20px;
 }
 
@@ -149,7 +152,7 @@
 }
 
 .gmoonc-auth-link {
-  color: #6374AD;
+  color: var(--gmoonc-link);
   text-decoration: none;
   font-size: 14px;
   transition: color 0.3s ease;
@@ -158,7 +161,7 @@
 }
 
 .gmoonc-auth-link:hover {
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   text-decoration: underline;
 }
 
@@ -179,10 +182,10 @@
 
 .gmoonc-content-header h2 {
   margin: 0;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   font-size: 24px;
   font-weight: 600;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .gmoonc-content-body {
@@ -198,15 +201,15 @@
 }
 
 .gmoonc-welcome-content h2 {
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   font-size: 32px;
   margin-bottom: 20px;
   font-weight: bold;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .gmoonc-welcome-content p {
-  color: #6c757d;
+  color: var(--gmoonc-color-text-secondary);
   font-size: 18px;
   margin-bottom: 30px;
   line-height: 1.6;
@@ -332,24 +335,24 @@
 .user-name {
   font-size: 16px;
   font-weight: 600;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary);
   margin-bottom: 4px;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .user-email {
   font-size: 14px;
   color: #6c757d;
   margin-bottom: 4px;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .user-role {
   font-size: 12px;
-  color: #879FED;
+  color: var(--gmoonc-color-primary);
   text-transform: capitalize;
   font-weight: 500;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .dropdown-divider {
@@ -373,9 +376,9 @@
   align-items: center;
   gap: 12px;
   font-size: 14px;
-  color: #374161;
+  color: var(--gmoonc-color-text-primary, #374161);
   transition: background-color 0.2s ease;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family);
 }
 
 .dropdown-option:hover {

package/src/templates/shared/src/gmoonc/styles/theme.css

@@ -28,6 +28,14 @@
   --gmoonc-color-text-muted: #dbe2ea;
   --gmoonc-color-text-white: #ffffff;
   
+  /* Colors - Text (Menu & Header specific) */
+  --gmoonc-sidebar-text: #ffffff;
+  --gmoonc-sidebar-text-active: #293047;
+  --gmoonc-sidebar-muted: #ffffff;
+  --gmoonc-header-text: #ffffff;
+  --gmoonc-surface-text: #374161;
+  --gmoonc-link: #6374AD;
+  
   /* Colors - Primary */
   --gmoonc-color-primary: #879FED;
   --gmoonc-color-primary-2: #6374AD;

package/src/templates/shared/src/gmoonc/ui/styles.css

@@ -1,8 +1,11 @@
+/* Import Montserrat font from Google Fonts (ported from sicoop-app) */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+
 /* Gmoonc Menu Styles - Base for all devices */
 .gmoonc-menu {
   width: 250px;
   background-color: #eaf0f5;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family, 'Montserrat', Arial, Helvetica, sans-serif);
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(55, 65, 97, 0.1);
   overflow: hidden;
@@ -73,7 +76,7 @@
   height: 3.375rem;
   padding: 0 1.25rem;
   background-color: #3F4A6E;
-  color: #ffffff;
+  color: var(--gmoonc-sidebar-text, #ffffff);
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 500;
@@ -82,20 +85,37 @@
   border: none;
   width: 100%;
   text-align: left;
-  font-family: inherit;
+  font-family: var(--gmoonc-font-family, 'Montserrat', Arial, Helvetica, sans-serif);
+  gap: 0.75rem;
+}
+
+.gmoonc-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: inherit;
 }
 
 .gmoonc-menu-link:hover {
   background-color: #6374AD;
   transform: translateX(5px);
+  color: var(--gmoonc-sidebar-text, #ffffff);
 }
 
 .gmoonc-menu-link.active {
   background-color: #879FED;
-  color: #293047;
+  color: var(--gmoonc-sidebar-text-active, #293047);
   font-weight: 600;
 }
 
+.gmoonc-menu-label {
+  flex: 1;
+  color: inherit;
+}
+
 .gmoonc-menu-link.has-submenu {
   position: relative;
 }
@@ -125,7 +145,7 @@
   width: 100%;
   min-height: 44px;
   padding: 0.8rem 1.25rem 0.8rem 2.5rem;
-  color: #374161;
+  color: var(--gmoonc-surface-text, #374161);
   text-decoration: none;
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   font-size: 0.9rem;
@@ -134,13 +154,24 @@
   border-radius: 0 10px 10px 0;
   border: none;
   cursor: pointer;
-  font-family: inherit;
+  font-family: var(--gmoonc-font-family, 'Montserrat', Arial, Helvetica, sans-serif);
   text-align: left;
+  gap: 0.75rem;
+}
+
+.gmoonc-submenu-link .gmoonc-menu-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .gmoonc-submenu-link:hover {
   background-color: rgba(219, 226, 234, 0.5);
-  color: #374161;
+  color: var(--gmoonc-surface-text, #374161);
+}
+
+.gmoonc-submenu-link span:not(.gmoonc-menu-icon) {
+  flex: 1;
+  color: inherit;
 }
 
 .gmoonc-submenu-link:focus-visible {
@@ -151,9 +182,9 @@
 
 .gmoonc-submenu-link.active {
   background-color: #dbe2ea;
-  color: #374161;
+  color: var(--gmoonc-surface-text, #374161);
   font-weight: 600;
-  border-left-color: #374161;
+  border-left-color: var(--gmoonc-color-text-primary, #374161);
   box-shadow: inset 0 0 0 1px rgba(55, 65, 97, 0.12);
 }
 
@@ -173,7 +204,7 @@
   align-items: center;
   padding: 20px 30px;
   background: linear-gradient(135deg, #374161, #3F4A6E);
-  color: white;
+  color: var(--gmoonc-header-text, #ffffff);
   box-shadow: 0 4px 20px rgba(55, 65, 97, 0.3);
   position: fixed;
   top: 0;
@@ -187,7 +218,8 @@
   margin: 0;
   font-size: 28px;
   font-weight: bold;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: var(--gmoonc-font-family, 'Montserrat', Arial, Helvetica, sans-serif);
+  color: var(--gmoonc-header-text, #ffffff);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -203,6 +235,13 @@
   margin-left: auto;
 }
 
+/* Ensure profile is on the right side on all breakpoints */
+@media (max-width: 1366px) {
+  .gmoonc-header-right {
+    margin-left: auto;
+  }
+}
+
 .gmoonc-content {
   display: flex;
   min-height: calc(100vh - 80px);
@@ -340,6 +379,7 @@
     text-align: center;
     margin: 0;
     white-space: nowrap;
+    color: var(--gmoonc-header-text, #ffffff);
   }
 
   .gmoonc-sidebar {