fix: Resolve shared component styling and Vite module deduplication

- Add dedupe option for vue, vue-router, pinia, primevue in both Vite configs
  to prevent duplicate module issues when using shared components
- Add optimizeDeps and commonjsOptions for better shared module handling
- Fix CompanySelector and PeriodSelector header variants to support both
  light headers (using CSS variables) and gradient headers (white text)
- Make hamburger button always display:flex for consistent mobile layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

data-entry-app/frontend/vite.config.js

@@ -10,7 +10,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@shared': fileURLToPath(new URL('../../shared', import.meta.url))
-    }
+    },
+    dedupe: ['vue', 'vue-router', 'pinia', 'primevue']
   },
   server: {
     port: 3010,

reports-app/frontend/src/assets/css/layout/navigation.css

@@ -41,7 +41,7 @@
 
 /* Hamburger Menu */
 .hamburger-btn {
-  display: none;
+  display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 24px;
@@ -254,10 +254,6 @@
 
 /* Mobile Navigation */
 @media (max-width: 768px) {
-  .hamburger-btn {
-    display: flex;
-  }
-
   .header-actions {
     gap: var(--space-sm);
   }

reports-app/frontend/vite.config.js

@@ -20,7 +20,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@shared': fileURLToPath(new URL('../../shared', import.meta.url))
-    }
+    },
+    dedupe: ['vue', 'vue-router', 'pinia', 'primevue']
   },
   server: {
     port: 3000,
@@ -52,9 +53,15 @@ export default defineConfig({
       }
     }
   },
+  optimizeDeps: {
+    include: ['vue', 'vue-router', 'pinia']
+  },
   build: {
     outDir: 'dist',
     sourcemap: true,
+    commonjsOptions: {
+      include: [/node_modules/, /shared/]
+    },
     // Cache busting - generează hash-uri noi la fiecare build
     assetsInlineLimit: 0, // Nu inline asset-uri mici, folosește fișiere separate cu hash
     rollupOptions: {

shared/frontend/components/CompanySelector.vue

@@ -528,26 +528,48 @@ export default {
   }
 }
 
-/* Header variant - transparent background, white text for dark headers */
+/* Header variant - transparent background for header integration */
 .company-selector--header .company-trigger {
   background: transparent;
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--color-border, rgba(0, 0, 0, 0.2));
 }
 
 .company-selector--header .company-trigger:hover {
+  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
+  border-color: var(--color-primary, #2563eb);
+}
+
+.company-selector--header .company-name {
+  color: var(--color-text, #111827);
+}
+
+.company-selector--header .company-code {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.company-selector--header .pi-chevron-down {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+/* Gradient header variant - white text for dark/gradient headers */
+.header-container--gradient .company-selector--header .company-trigger {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.header-container--gradient .company-selector--header .company-trigger:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.5);
 }
 
-.company-selector--header .company-name {
+.header-container--gradient .company-selector--header .company-name {
   color: white;
 }
 
-.company-selector--header .company-code {
+.header-container--gradient .company-selector--header .company-code {
   color: rgba(255, 255, 255, 0.8);
 }
 
-.company-selector--header .pi-chevron-down {
+.header-container--gradient .company-selector--header .pi-chevron-down {
   color: rgba(255, 255, 255, 0.8);
 }
 

shared/frontend/components/PeriodSelector.vue

@@ -410,30 +410,56 @@ export default {
   }
 }
 
-/* Header variant - transparent background, white text for dark headers */
+/* Header variant - transparent background for header integration */
 .period-selector--header .period-trigger {
   background: transparent;
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--color-border, rgba(0, 0, 0, 0.2));
 }
 
 .period-selector--header .period-trigger:hover:not(:disabled) {
+  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
+  border-color: var(--color-primary, #2563eb);
+}
+
+.period-selector--header .period-trigger:disabled {
+  border-color: var(--color-border, rgba(0, 0, 0, 0.1));
+}
+
+.period-selector--header .period-label {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.period-selector--header .period-name {
+  color: var(--color-text, #111827);
+}
+
+.period-selector--header .pi-chevron-down {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+/* Gradient header variant - white text for dark/gradient headers */
+.header-container--gradient .period-selector--header .period-trigger {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.header-container--gradient .period-selector--header .period-trigger:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.5);
 }
 
-.period-selector--header .period-trigger:disabled {
+.header-container--gradient .period-selector--header .period-trigger:disabled {
   border-color: rgba(255, 255, 255, 0.15);
 }
 
-.period-selector--header .period-label {
+.header-container--gradient .period-selector--header .period-label {
   color: rgba(255, 255, 255, 0.7);
 }
 
-.period-selector--header .period-name {
+.header-container--gradient .period-selector--header .period-name {
   color: white;
 }
 
-.period-selector--header .pi-chevron-down {
+.header-container--gradient .period-selector--header .pi-chevron-down {
   color: rgba(255, 255, 255, 0.8);
 }