feat(unified-mobile-material-design): Complete US-106 - Dashboard Mobile cu Swipeable KPI Cards

Implemented by Ralph autonomous loop.
Iteration: 10

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

src/modules/reports/views/DashboardView.vue

@@ -10,8 +10,64 @@
 
       <!-- Secțiune Carduri Noi - Adăugare -->
       <div class="metrics-cards-section" v-if="!isLoading">
-        <!-- Rând 1: Metrici principale -->
-        <div class="metrics-row">
+        <!-- Mobile: Swipeable KPI Cards Carousel -->
+        <SwipeableCards v-if="isMobile" :totalCards="4" class="mobile-kpi-carousel">
+          <template #card-0>
+            <TreasuryDualCard
+              :casaTotal="treasuryData?.breakdown?.casa?.total || 0"
+              :bancaTotal="treasuryData?.breakdown?.banca?.total || 0"
+              :casaItems="treasuryData?.breakdown?.casa?.items || []"
+              :bancaItems="treasuryData?.breakdown?.banca?.items || []"
+              :casaTrend="casaTrend"
+              :bancaTrend="bancaTrend"
+              :casaSparklineData="casaSparkline"
+              :bancaSparklineData="bancaSparkline"
+              :casaPreviousSparklineData="casaPreviousSparkline"
+              :bancaPreviousSparklineData="bancaPreviousSparkline"
+              :sparklineLabels="sparklineLabels"
+              :previousSparklineLabels="previousSparklineLabels"
+            />
+          </template>
+          <template #card-1>
+            <CashFlowMetricCard
+              :inflowsValue="monthlyInflows"
+              :outflowsValue="monthlyOutflows"
+              :inflowsTrend="inflowsTrend"
+              :outflowsTrend="outflowsTrend"
+              :inflowsSparkline="inflowsSparkline"
+              :outflowsSparkline="outflowsSparkline"
+              :inflowsPreviousSparkline="inflowsPreviousSparkline"
+              :outflowsPreviousSparkline="outflowsPreviousSparkline"
+              :sparklineLabels="sparklineLabels"
+              :previousSparklineLabels="previousSparklineLabels"
+            />
+          </template>
+          <template #card-2>
+            <ClientiBalanceCard
+              :total="netBalanceData?.clienti_total || 0"
+              :trend="clientiTrend"
+              :sparklineData="clientiSparkline"
+              :previousSparklineData="clientiPreviousSparkline"
+              :sparklineLabels="sparklineLabels"
+              :previousSparklineLabels="previousSparklineLabels"
+              :breakdown="netBalanceData?.breakdown?.clienti"
+            />
+          </template>
+          <template #card-3>
+            <FurnizoriBalanceCard
+              :total="netBalanceData?.furnizori_total || 0"
+              :trend="furnizoriTrend"
+              :sparklineData="furnizoriSparkline"
+              :previousSparklineData="furnizoriPreviousSparkline"
+              :sparklineLabels="sparklineLabels"
+              :previousSparklineLabels="previousSparklineLabels"
+              :breakdown="netBalanceData?.breakdown?.furnizori"
+            />
+          </template>
+        </SwipeableCards>
+
+        <!-- Desktop: Grid layout -->
+        <div v-else class="metrics-row">
           <TreasuryDualCard
             :casaTotal="treasuryData?.breakdown?.casa?.total || 0"
             :bancaTotal="treasuryData?.breakdown?.banca?.total || 0"
@@ -82,7 +138,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useToast } from "primevue/usetoast";
 // Import componente noi
 import MetricCard from "@reports/components/dashboard/cards/MetricCard.vue";
@@ -91,6 +147,8 @@ import MaturityAndDetailsCard from "@reports/components/dashboard/cards/Maturity
 import ClientiBalanceCard from "@reports/components/dashboard/cards/ClientiBalanceCard.vue";
 import FurnizoriBalanceCard from "@reports/components/dashboard/cards/FurnizoriBalanceCard.vue";
 import TreasuryDualCard from "@reports/components/dashboard/cards/TreasuryDualCard.vue";
+// Mobile carousel component
+import SwipeableCards from "@shared/components/mobile/SwipeableCards.vue";
 import { useCompanyStore } from "@reports/stores/sharedStores";
 import { useDashboardStore } from "@reports/stores/dashboard";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
@@ -419,8 +477,14 @@ const bancaPreviousSparkline = computed(() => {
   return previousSparklineData.map((v) => v * bancaProportion);
 });
 
-// Detectare mobile
-const isMobile = computed(() => window.innerWidth < 768);
+// Detectare mobile - reactive with resize listener
+const windowWidth = ref(window.innerWidth);
+const isMobile = computed(() => windowWidth.value < 768);
+
+// Handle window resize for mobile detection
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+};
 
 // Computed property pentru luna curentă - folosește perioada din period selector
 const currentMonthLabel = computed(() => {
@@ -849,6 +913,9 @@ watch(
 
 // Lifecycle
 onMounted(async () => {
+  // Add resize listener for mobile detection
+  window.addEventListener('resize', handleResize);
+
   // Load companies first
   if (!companyStore.hasCompanies) {
     await companyStore.loadCompanies();
@@ -871,6 +938,11 @@ onMounted(async () => {
     }
   }
 });
+
+// Cleanup resize listener
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <style scoped>
@@ -1206,4 +1278,9 @@ onMounted(async () => {
     margin-bottom: 1rem;
   }
 }
+
+/* Mobile KPI Carousel Styles */
+.mobile-kpi-carousel {
+  margin-bottom: var(--space-lg);
+}
 </style>