feat(mobile-navigation-improvements): Complete US-204 - Creare Pagină Analiză Scadențe

Implemented by Ralph autonomous loop.
Iteration: 5

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

scripts/ralph/prd.json

@@ -107,8 +107,8 @@
         "MobileBottomNav activ",
         "npm run build passes"
       ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 5"
     },
     {
       "id": "US-205",

scripts/ralph/progress.txt

@@ -28,3 +28,9 @@ User Stories: 14 (US-201 to US-214)
 [2026-01-12 12:09:59] Working on story: US-206
 [2026-01-12 12:09:59] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-206.log)
 [2026-01-12 12:12:24] SUCCESS: Story US-206 passed!
+[2026-01-12 12:12:24] Changes committed
+[2026-01-12 12:12:24] Progress: 4/14 stories completed
+[2026-01-12 12:12:26] === Iteration 5/100 ===
+[2026-01-12 12:12:26] Working on story: US-204
+[2026-01-12 12:12:26] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_5_US-204.log)
+[2026-01-12 12:14:24] SUCCESS: Story US-204 passed!

src/modules/reports/views/MaturityAnalysisView.vue

@@ -12,14 +12,30 @@
       <!-- Page Header - only on desktop -->
       <div v-if="!isMobile" class="page-header">
         <h1 class="page-title">Analiză Scadențe</h1>
+        <p class="page-subtitle">Analiza scadențelor clienți și furnizori</p>
       </div>
 
-      <!-- Placeholder content - to be implemented in US-204 -->
-      <div class="placeholder-content">
-        <i class="pi pi-calendar placeholder-icon"></i>
-        <h2>Analiză Scadențe</h2>
-        <p>Această pagină va conține analiza scadențelor clienți/furnizori.</p>
-        <p class="placeholder-note">Implementare completă în US-204</p>
+      <!-- Loading state when no company selected -->
+      <div v-if="!companyStore.selectedCompany" class="empty-state">
+        <i class="pi pi-building empty-icon"></i>
+        <h2 class="empty-title">Selectați o companie</h2>
+        <p class="empty-description">
+          Pentru a vizualiza analiza scadențelor, vă rugăm să selectați o companie din Dashboard.
+        </p>
+        <Button
+          label="Mergi la Dashboard"
+          icon="pi pi-arrow-left"
+          @click="goBack"
+          class="empty-action"
+        />
+      </div>
+
+      <!-- Main content - MaturityAndDetailsCard -->
+      <div v-else class="maturity-container">
+        <MaturityAndDetailsCard
+          :companyId="companyStore.selectedCompany?.id_firma"
+          @periodChanged="handlePeriodChange"
+        />
       </div>
     </div>
   </main>
@@ -31,10 +47,14 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import Button from 'primevue/button'
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
 import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+import MaturityAndDetailsCard from '@reports/components/dashboard/cards/MaturityAndDetailsCard.vue'
+import { useCompanyStore } from '@reports/stores/sharedStores'
 
 const router = useRouter()
+const companyStore = useCompanyStore()
 
 // Detectare mobile - reactive with resize listener
 const windowWidth = ref(window.innerWidth)
@@ -50,6 +70,11 @@ const goBack = () => {
   router.push('/reports/dashboard')
 }
 
+// Handle period change from MaturityAndDetailsCard
+const handlePeriodChange = (period) => {
+  console.log('Maturity period changed:', period)
+}
+
 // Mobile navigation items
 const mobileNavItems = computed(() => [
   { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
@@ -75,43 +100,80 @@ onUnmounted(() => {
   padding-bottom: 56px;
 }
 
-/* Placeholder content styles */
-.placeholder-content {
+/* App container */
+.app-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--space-lg);
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    padding: var(--space-md);
+  }
+}
+
+/* Page Header - Desktop only */
+.page-header {
+  margin-bottom: var(--space-xl);
+}
+
+.page-title {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  color: var(--text-color);
+  margin: 0 0 var(--space-xs) 0;
+}
+
+.page-subtitle {
+  font-size: var(--text-base);
+  color: var(--text-color-secondary);
+  margin: 0;
+}
+
+/* Maturity container */
+.maturity-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+/* Empty state styles */
+.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  min-height: 400px;
   text-align: center;
   padding: var(--space-xl);
   background: var(--surface-card);
   border-radius: var(--radius-lg);
-  border: 1px dashed var(--surface-border);
-  margin: var(--space-lg);
+  border: 1px solid var(--surface-border);
 }
 
-.placeholder-icon {
-  font-size: 48px;
-  color: var(--primary-color);
+.empty-icon {
+  font-size: 64px;
+  color: var(--text-color-secondary);
   margin-bottom: var(--space-lg);
+  opacity: 0.5;
 }
 
-.placeholder-content h2 {
+.empty-title {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-color);
-  margin: 0 0 var(--space-md) 0;
-}
-
-.placeholder-content p {
-  font-size: var(--text-base);
-  color: var(--text-color-secondary);
   margin: 0 0 var(--space-sm) 0;
 }
 
-.placeholder-note {
-  font-size: var(--text-sm);
+.empty-description {
+  font-size: var(--text-base);
   color: var(--text-color-secondary);
-  font-style: italic;
+  margin: 0 0 var(--space-lg) 0;
+  max-width: 400px;
+}
+
+.empty-action {
+  margin-top: var(--space-md);
 }
 </style>