From 701cabb8a4844b6869513f76cb7e5e17df662da1 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Mon, 12 Jan 2026 12:21:23 +0000
Subject: [PATCH] =?UTF-8?q?feat(mobile-navigation-improvements):=20Complet?=
 =?UTF-8?q?e=20US-205=20-=20Creare=20Pagin=C4=83=20Facturi=20Detaliate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented by Ralph autonomous loop.
Iteration: 6

Co-Authored-By: Claude <noreply@anthropic.com>
---
 scripts/ralph/prd.json                        |    4 +-
 scripts/ralph/progress.txt                    |    6 +
 .../reports/views/DetailedInvoicesView.vue    | 1244 ++++++++++++++++-
 3 files changed, 1222 insertions(+), 32 deletions(-)

diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json
index 4fc1a15..7bc5e4f 100644
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -124,8 +124,8 @@
         "Filtre în BottomSheet pe mobil",
         "npm run build passes"
       ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 6"
     },
     {
       "id": "US-203",
diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index 5acdfee..d3343e4 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -34,3 +34,9 @@ User Stories: 14 (US-201 to US-214)
 [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!
+[2026-01-12 12:14:24] Changes committed
+[2026-01-12 12:14:24] Progress: 5/14 stories completed
+[2026-01-12 12:14:26] === Iteration 6/100 ===
+[2026-01-12 12:14:26] Working on story: US-205
+[2026-01-12 12:14:26] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_6_US-205.log)
+[2026-01-12 12:21:23] SUCCESS: Story US-205 passed!
diff --git a/src/modules/reports/views/DetailedInvoicesView.vue b/src/modules/reports/views/DetailedInvoicesView.vue
index 57d2071..361d6b2 100644
--- a/src/modules/reports/views/DetailedInvoicesView.vue
+++ b/src/modules/reports/views/DetailedInvoicesView.vue
@@ -4,7 +4,9 @@
     v-if="isMobile"
     title="Facturi Detaliate"
     :show-back="true"
+    :actions="topBarActions"
     @back-click="goBack"
+    @action-click="handleTopBarAction"
   />
 
   <main class="main-content" :class="{ 'mobile-layout': isMobile }">
@@ -12,43 +14,473 @@
       <!-- Page Header - only on desktop -->
       <div v-if="!isMobile" class="page-header">
         <h1 class="page-title">Facturi Detaliate</h1>
+        <p class="page-subtitle">Vizualizare detaliată a facturilor clienți și furnizori</p>
       </div>
 
-      <!-- Placeholder content - to be implemented in US-205 -->
-      <div class="placeholder-content">
-        <i class="pi pi-file-edit placeholder-icon"></i>
-        <h2>Facturi Detaliate</h2>
-        <p>Această pagină va conține tabelul detaliat al facturilor.</p>
-        <p class="placeholder-note">Implementare completă în US-205</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 facturile detaliate, 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 -->
+      <div v-else class="invoices-container">
+        <!-- Desktop Filters Card -->
+        <div v-if="!isMobile" class="filters-card">
+          <div class="filters-row">
+            <div class="filter-group">
+              <label class="form-label">Tip</label>
+              <Dropdown
+                v-model="selectedType"
+                :options="typeOptions"
+                optionLabel="label"
+                optionValue="value"
+                placeholder="Selectați tipul"
+                class="w-full"
+                @change="loadDetailedData"
+              />
+            </div>
+            <div class="filter-group">
+              <label class="form-label">Căutare</label>
+              <InputText
+                v-model="searchTerm"
+                placeholder="Căutare..."
+                class="w-full"
+                @input="handleSearch"
+              />
+            </div>
+            <div class="filter-group">
+              <label class="form-label">Perioadă</label>
+              <Dropdown
+                v-model="selectedPeriod"
+                :options="periodOptions"
+                optionLabel="label"
+                optionValue="value"
+                placeholder="Selectați perioada"
+                class="w-full"
+                @change="loadDetailedData"
+              />
+            </div>
+          </div>
+          <div class="filters-actions">
+            <Button
+              icon="pi pi-filter-slash"
+              label="Resetează"
+              severity="secondary"
+              outlined
+              @click="resetFilters"
+            />
+            <Button
+              icon="pi pi-file-excel"
+              label="Export Excel"
+              severity="success"
+              outlined
+              @click="exportExcel"
+              :disabled="filteredData.length === 0"
+            />
+            <Button
+              icon="pi pi-file-pdf"
+              label="Export PDF"
+              severity="danger"
+              outlined
+              @click="exportPDF"
+              :disabled="filteredData.length === 0"
+            />
+            <Button
+              icon="pi pi-refresh"
+              label="Actualizează"
+              :loading="isLoading"
+              @click="loadDetailedData"
+            />
+          </div>
+        </div>
+
+        <!-- Mobile Filter Chips (compact summary) -->
+        <div v-if="isMobile" class="mobile-filter-summary">
+          <div class="filter-chip" @click="openFilters">
+            <i class="pi pi-list"></i>
+            <span>{{ getTypeLabel(selectedType) }}</span>
+          </div>
+          <div v-if="searchTerm" class="filter-chip active" @click="openFilters">
+            <i class="pi pi-search"></i>
+            <span>{{ searchTerm }}</span>
+            <i class="pi pi-times" @click.stop="clearSearch"></i>
+          </div>
+          <div class="filter-chip" @click="openFilters">
+            <i class="pi pi-calendar"></i>
+            <span>{{ getPeriodLabel(selectedPeriod) }}</span>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div v-if="isLoading" class="loading-state">
+          <div class="loading-spinner"></div>
+          <p>Se încarcă facturile...</p>
+        </div>
+
+        <!-- Error State -->
+        <div v-else-if="error" class="error-state">
+          <i class="pi pi-exclamation-circle"></i>
+          <p>{{ error }}</p>
+          <Button label="Încearcă din nou" icon="pi pi-refresh" @click="loadDetailedData" />
+        </div>
+
+        <!-- Data Table / Cards -->
+        <div v-else class="data-section">
+          <!-- Desktop Table -->
+          <div v-if="!isMobile" class="table-wrapper">
+            <DataTable
+              :value="selectedType === 'treasury' ? paginatedData : paginatedGroups"
+              :loading="isLoading"
+              stripedRows
+              class="p-datatable-sm"
+            >
+              <!-- Treasury columns -->
+              <template v-if="selectedType === 'treasury'">
+                <Column field="cont" header="Cont" sortable></Column>
+                <Column field="nume_cont" header="Nume Cont" sortable></Column>
+                <Column field="sold" header="Sold" sortable>
+                  <template #body="slotProps">
+                    <span class="font-mono">{{ formatCurrency(slotProps.data.sold) }}</span>
+                  </template>
+                </Column>
+                <Column field="valuta" header="Valută" sortable></Column>
+                <Column field="tip" header="Tip" sortable></Column>
+              </template>
+
+              <!-- Clients/Suppliers columns -->
+              <template v-else>
+                <Column :field="selectedType === 'clients' ? 'client' : 'furnizor'" :header="selectedType === 'clients' ? 'Client' : 'Furnizor'" sortable>
+                  <template #body="slotProps">
+                    <div class="name-cell">
+                      <strong>{{ slotProps.data.name }}</strong>
+                      <span v-if="slotProps.data.facturi?.length > 1" class="count-badge">
+                        ({{ slotProps.data.facturi.length }})
+                      </span>
+                    </div>
+                  </template>
+                </Column>
+                <Column field="numar_document" header="Nr. Document">
+                  <template #body="slotProps">
+                    {{ slotProps.data.facturi?.length === 1 ? slotProps.data.facturi[0].numar_document : '-' }}
+                  </template>
+                </Column>
+                <Column field="data_document" header="Data Document">
+                  <template #body="slotProps">
+                    {{ slotProps.data.facturi?.length === 1 ? formatDate(slotProps.data.facturi[0].data_document) : '-' }}
+                  </template>
+                </Column>
+                <Column field="data_scadenta" header="Data Scadență">
+                  <template #body="slotProps">
+                    {{ slotProps.data.facturi?.length === 1 ? formatDate(slotProps.data.facturi[0].data_scadenta) : '-' }}
+                  </template>
+                </Column>
+                <Column header="Facturat">
+                  <template #body="slotProps">
+                    <span class="font-mono">
+                      {{ slotProps.data.facturi?.length === 1 ? formatCurrency(slotProps.data.facturi[0].facturat) : '-' }}
+                    </span>
+                  </template>
+                </Column>
+                <Column :header="selectedType === 'clients' ? 'Încasat' : 'Achitat'">
+                  <template #body="slotProps">
+                    <span class="font-mono">
+                      {{ slotProps.data.facturi?.length === 1
+                        ? formatCurrency(slotProps.data.facturi[0][selectedType === 'clients' ? 'incasat' : 'achitat'])
+                        : '-' }}
+                    </span>
+                  </template>
+                </Column>
+                <Column field="totalSold" header="Sold" sortable>
+                  <template #body="slotProps">
+                    <span
+                      class="font-mono font-bold"
+                      :class="{ 'sold-restant': slotProps.data.hasRestant }"
+                    >
+                      {{ formatCurrency(slotProps.data.totalSold) }}
+                    </span>
+                  </template>
+                </Column>
+              </template>
+            </DataTable>
+          </div>
+
+          <!-- Mobile Cards -->
+          <div v-if="isMobile" class="mobile-cards">
+            <!-- Treasury Cards -->
+            <template v-if="selectedType === 'treasury'">
+              <div
+                v-for="row in paginatedData"
+                :key="row.id"
+                class="invoice-card"
+              >
+                <div class="card-header-row">
+                  <strong>{{ row.cont }}</strong>
+                  <span class="card-badge">{{ row.valuta }}</span>
+                </div>
+                <div class="card-body">
+                  <div class="card-field">
+                    <span class="field-label">Nume Cont</span>
+                    <span class="field-value">{{ row.nume_cont }}</span>
+                  </div>
+                  <div class="card-field highlight">
+                    <span class="field-label">Sold</span>
+                    <span class="field-value sold-value">{{ formatCurrency(row.sold) }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- Client/Supplier Cards -->
+            <template v-else>
+              <div
+                v-for="group in paginatedGroups"
+                :key="group.name"
+                class="invoice-card"
+                :class="{ 'has-multiple': group.facturi.length > 1 }"
+                @click="group.facturi.length > 1 && toggleGroup(group.name)"
+              >
+                <div class="card-header-row">
+                  <div class="header-left">
+                    <strong>{{ group.name }}</strong>
+                    <span v-if="group.facturi.length > 1" class="count-badge">
+                      ({{ group.facturi.length }})
+                    </span>
+                  </div>
+                  <div class="header-right">
+                    <span
+                      class="sold-value"
+                      :class="{ 'sold-restant': group.hasRestant }"
+                    >
+                      {{ formatCurrency(group.totalSold) }}
+                    </span>
+                    <i
+                      v-if="group.facturi.length > 1"
+                      :class="['pi', isGroupExpanded(group.name) ? 'pi-chevron-up' : 'pi-chevron-down']"
+                    ></i>
+                  </div>
+                </div>
+
+                <!-- Single invoice details -->
+                <div v-if="group.facturi.length === 1" class="card-body">
+                  <div class="card-field">
+                    <span class="field-label">Nr. Document</span>
+                    <span class="field-value">{{ group.facturi[0].numar_document }}</span>
+                  </div>
+                  <div class="card-row-inline">
+                    <div class="card-field">
+                      <span class="field-label">Data Doc.</span>
+                      <span class="field-value">{{ formatDate(group.facturi[0].data_document) }}</span>
+                    </div>
+                    <div class="card-field">
+                      <span class="field-label">Scadență</span>
+                      <span class="field-value">{{ formatDate(group.facturi[0].data_scadenta) }}</span>
+                    </div>
+                  </div>
+                  <div class="card-status" :class="getStatusClass(group.facturi[0].status)">
+                    {{ group.facturi[0].status }}
+                  </div>
+                </div>
+
+                <!-- Multiple invoices expanded -->
+                <div v-if="group.facturi.length > 1 && isGroupExpanded(group.name)" class="card-sub-items">
+                  <div
+                    v-for="(factura, idx) in group.facturi"
+                    :key="`${group.name}-${idx}`"
+                    class="sub-item"
+                  >
+                    <div class="sub-item-header">
+                      <span>{{ factura.numar_document }}</span>
+                      <span
+                        class="sub-item-sold"
+                        :class="{ 'sold-restant': factura.status === 'Restant' }"
+                      >
+                        {{ formatCurrency(factura.sold) }}
+                      </span>
+                    </div>
+                    <div class="sub-item-dates">
+                      <span>{{ formatDate(factura.data_scadenta) }}</span>
+                      <span :class="getStatusClass(factura.status)">{{ factura.status }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- Empty state -->
+            <div v-if="(selectedType === 'treasury' ? paginatedData : paginatedGroups).length === 0" class="empty-data">
+              <i class="pi pi-inbox"></i>
+              <p>Nu există facturi pentru criteriile selectate</p>
+            </div>
+          </div>
+
+          <!-- Pagination -->
+          <div class="pagination-wrapper">
+            <Paginator
+              v-model:rows="rowsPerPage"
+              :totalRecords="totalRecords"
+              v-model:first="firstRow"
+              :rowsPerPageOptions="[10, 25, 50, 100]"
+              @page="handlePageChange"
+            />
+          </div>
+
+          <!-- Totals Summary -->
+          <div v-if="filteredData.length > 0" class="totals-summary">
+            <div class="total-item">
+              <span class="total-label">Total Sold:</span>
+              <span class="total-value">{{ formatCurrency(calculateTotal('sold')) }}</span>
+            </div>
+            <div v-if="selectedType !== 'treasury'" class="total-item">
+              <span class="total-label">Total Facturat:</span>
+              <span class="total-value">{{ formatCurrency(calculateTotal('facturat')) }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </main>
 
   <!-- Mobile Bottom Nav -->
   <MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
+
+  <!-- Mobile Filters BottomSheet -->
+  <BottomSheet v-model="isFilterSheetOpen">
+    <div class="filter-sheet-content">
+      <h3 class="filter-sheet-title">Filtre</h3>
+
+      <div class="filter-sheet-group">
+        <label class="form-label">Tip</label>
+        <Dropdown
+          v-model="selectedType"
+          :options="typeOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="Selectați tipul"
+          class="w-full"
+        />
+      </div>
+
+      <div class="filter-sheet-group">
+        <label class="form-label">Căutare</label>
+        <InputText
+          v-model="searchTerm"
+          placeholder="Căutare client/furnizor..."
+          class="w-full"
+        />
+      </div>
+
+      <div class="filter-sheet-group">
+        <label class="form-label">Perioadă</label>
+        <Dropdown
+          v-model="selectedPeriod"
+          :options="periodOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="Selectați perioada"
+          class="w-full"
+        />
+      </div>
+
+      <div class="filter-sheet-actions">
+        <Button
+          label="Resetează"
+          icon="pi pi-filter-slash"
+          severity="secondary"
+          outlined
+          class="flex-1"
+          @click="resetFilters"
+        />
+        <Button
+          label="Aplică"
+          icon="pi pi-check"
+          class="flex-1"
+          @click="applyFilters"
+        />
+      </div>
+    </div>
+  </BottomSheet>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import Button from 'primevue/button'
+import Dropdown from 'primevue/dropdown'
+import InputText from 'primevue/inputtext'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Paginator from 'primevue/paginator'
+import { useToast } from 'primevue/usetoast'
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
 import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+import BottomSheet from '@shared/components/mobile/BottomSheet.vue'
+import { useDashboardStore } from '@reports/stores/dashboard'
+import { useCompanyStore, useAccountingPeriodStore } from '@reports/stores/sharedStores'
+import * as XLSX from 'xlsx'
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
 
 const router = useRouter()
+const toast = useToast()
+const dashboardStore = useDashboardStore()
+const companyStore = useCompanyStore()
+const periodStore = useAccountingPeriodStore()
 
-// Detectare mobile - reactive with resize listener
+// Mobile detection
 const windowWidth = ref(window.innerWidth)
 const isMobile = computed(() => windowWidth.value < 768)
 
-// Handle window resize for mobile detection
 const handleResize = () => {
   windowWidth.value = window.innerWidth
 }
 
-// Navigation
-const goBack = () => {
-  router.push('/reports/dashboard')
-}
+// State
+const isLoading = ref(false)
+const error = ref(null)
+const selectedType = ref('clients')
+const searchTerm = ref('')
+const selectedPeriod = ref('all')
+const detailedData = ref([])
+const firstRow = ref(0)
+const rowsPerPage = ref(25)
+const expandedGroups = ref(new Set())
+const isFilterSheetOpen = ref(false)
+
+// Options
+const typeOptions = [
+  { label: 'Clienți', value: 'clients' },
+  { label: 'Furnizori', value: 'suppliers' },
+  { label: 'Trezorerie', value: 'treasury' }
+]
+
+const periodOptions = [
+  { label: 'Toate', value: 'all' },
+  { label: '7 zile', value: '7d' },
+  { label: '1 lună', value: '1m' },
+  { label: '3 luni', value: '3m' },
+  { label: '6 luni', value: '6m' },
+  { label: '12 luni', value: '12m' }
+]
+
+// Top bar actions for mobile
+const topBarActions = computed(() => [
+  {
+    icon: 'pi pi-filter',
+    label: 'Filtre',
+    tooltip: 'Deschide filtre',
+    active: searchTerm.value || selectedPeriod.value !== 'all'
+  }
+])
 
 // Mobile navigation items
 const mobileNavItems = computed(() => [
@@ -58,9 +490,286 @@ const mobileNavItems = computed(() => [
   { to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
 ])
 
+// Currency formatter
+const formatCurrency = (value) => {
+  if (value === null || value === undefined) return '0 RON'
+  return new Intl.NumberFormat('ro-RO', {
+    style: 'currency',
+    currency: 'RON',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(Math.abs(value))
+}
+
+// Date formatter
+const formatDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (isNaN(date.getTime())) return value
+  return date.toLocaleDateString('ro-RO', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+// Computed - Filtered and grouped data
+const filteredData = computed(() => {
+  if (!searchTerm.value) return detailedData.value
+  return detailedData.value.filter((row) => {
+    return Object.values(row).some((val) =>
+      String(val).toLowerCase().includes(searchTerm.value.toLowerCase())
+    )
+  })
+})
+
+const groupedData = computed(() => {
+  if (selectedType.value === 'treasury') return []
+
+  const groups = {}
+  const nameField = selectedType.value === 'clients' ? 'client' : 'furnizor'
+
+  filteredData.value.forEach((row) => {
+    const name = row[nameField]
+    if (!name) return
+
+    if (!groups[name]) {
+      groups[name] = {
+        name: name,
+        facturi: [],
+        totalSold: 0,
+        hasRestant: false
+      }
+    }
+
+    groups[name].facturi.push(row)
+    groups[name].totalSold += row.sold || 0
+    if (row.status === 'Restant') {
+      groups[name].hasRestant = true
+    }
+  })
+
+  return Object.values(groups)
+})
+
+const paginatedGroups = computed(() => {
+  if (selectedType.value === 'treasury') return []
+  return groupedData.value
+})
+
+const paginatedData = computed(() => {
+  if (selectedType.value !== 'treasury') return []
+  return filteredData.value
+})
+
+const totalRecords = computed(() => {
+  return dashboardStore.detailedDataTotal || groupedData.value.length
+})
+
+// Helper functions
+const getTypeLabel = (type) => {
+  const option = typeOptions.find(o => o.value === type)
+  return option?.label || type
+}
+
+const getPeriodLabel = (period) => {
+  const option = periodOptions.find(o => o.value === period)
+  return option?.label || period
+}
+
+const getStatusClass = (status) => {
+  if (status === 'Restant') return 'status-restant'
+  return 'status-ok'
+}
+
+const toggleGroup = (groupName) => {
+  if (expandedGroups.value.has(groupName)) {
+    expandedGroups.value.delete(groupName)
+  } else {
+    expandedGroups.value.add(groupName)
+  }
+}
+
+const isGroupExpanded = (groupName) => {
+  return expandedGroups.value.has(groupName)
+}
+
+const calculateTotal = (field) => {
+  return filteredData.value.reduce((sum, row) => sum + (row[field] || 0), 0)
+}
+
+// Navigation
+const goBack = () => {
+  router.push('/reports/dashboard')
+}
+
+// Top bar action handler
+const handleTopBarAction = (action) => {
+  if (action.icon === 'pi pi-filter') {
+    openFilters()
+  }
+}
+
+// Filter functions
+const openFilters = () => {
+  isFilterSheetOpen.value = true
+}
+
+const clearSearch = () => {
+  searchTerm.value = ''
+  handleSearch()
+}
+
+const handleSearch = () => {
+  firstRow.value = 0
+  expandedGroups.value.clear()
+}
+
+const resetFilters = () => {
+  selectedType.value = 'clients'
+  searchTerm.value = ''
+  selectedPeriod.value = 'all'
+  firstRow.value = 0
+  expandedGroups.value.clear()
+  loadDetailedData()
+}
+
+const applyFilters = () => {
+  isFilterSheetOpen.value = false
+  firstRow.value = 0
+  expandedGroups.value.clear()
+  loadDetailedData()
+}
+
+const handlePageChange = () => {
+  loadDetailedData()
+}
+
+// Data loading
+const loadDetailedData = async () => {
+  if (!companyStore.selectedCompany) {
+    return
+  }
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const page = Math.floor(firstRow.value / rowsPerPage.value) + 1
+    const luna = periodStore.selectedPeriod?.luna || null
+    const an = periodStore.selectedPeriod?.an || null
+
+    const response = await dashboardStore.loadDetailedData(
+      selectedType.value,
+      companyStore.selectedCompany.id_firma,
+      page,
+      rowsPerPage.value,
+      searchTerm.value,
+      luna,
+      an
+    )
+
+    detailedData.value = response.data
+    expandedGroups.value.clear()
+  } catch (err) {
+    console.error('Failed to load detailed data:', err)
+    error.value = err.message || 'Nu s-au putut încărca datele'
+    toast.add({
+      severity: 'error',
+      summary: 'Eroare',
+      detail: 'Nu s-au putut încărca facturile detaliate',
+      life: 3000
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Export functions
+const exportExcel = () => {
+  const ws = XLSX.utils.json_to_sheet(filteredData.value)
+  const wb = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(wb, ws, selectedType.value)
+  XLSX.writeFile(wb, `facturi_${selectedType.value}_${new Date().toISOString().split('T')[0]}.xlsx`)
+
+  toast.add({
+    severity: 'success',
+    summary: 'Export reușit',
+    detail: `${filteredData.value.length} înregistrări exportate`,
+    life: 3000
+  })
+}
+
+const exportPDF = () => {
+  const doc = new jsPDF()
+
+  const columns = selectedType.value === 'treasury'
+    ? ['Cont', 'Nume Cont', 'Sold', 'Valută', 'Tip']
+    : selectedType.value === 'clients'
+      ? ['Client', 'Nr. Document', 'Data Doc.', 'Scadență', 'Facturat', 'Încasat', 'Sold']
+      : ['Furnizor', 'Nr. Document', 'Data Doc.', 'Scadență', 'Facturat', 'Achitat', 'Sold']
+
+  const rows = filteredData.value.map((row) => {
+    if (selectedType.value === 'treasury') {
+      return [row.cont, row.nume_cont, formatCurrency(row.sold), row.valuta, row.tip]
+    }
+    const nameField = selectedType.value === 'clients' ? 'client' : 'furnizor'
+    const paidField = selectedType.value === 'clients' ? 'incasat' : 'achitat'
+    return [
+      row[nameField],
+      row.numar_document,
+      formatDate(row.data_document),
+      formatDate(row.data_scadenta),
+      formatCurrency(row.facturat),
+      formatCurrency(row[paidField]),
+      formatCurrency(row.sold)
+    ]
+  })
+
+  doc.autoTable({
+    head: [columns],
+    body: rows,
+    theme: 'grid',
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [59, 130, 246] }
+  })
+
+  doc.save(`facturi_${selectedType.value}_${new Date().toISOString().split('T')[0]}.pdf`)
+
+  toast.add({
+    severity: 'success',
+    summary: 'Export reușit',
+    detail: `PDF generat cu ${filteredData.value.length} înregistrări`,
+    life: 3000
+  })
+}
+
+// Watchers
+watch(
+  () => companyStore.selectedCompany,
+  (newCompany) => {
+    if (newCompany) {
+      loadDetailedData()
+    }
+  }
+)
+
+watch(
+  () => periodStore.selectedPeriod,
+  (newPeriod, oldPeriod) => {
+    if (newPeriod && (newPeriod.luna !== oldPeriod?.luna || newPeriod.an !== oldPeriod?.an)) {
+      loadDetailedData()
+    }
+  },
+  { deep: true }
+)
+
 // Lifecycle
 onMounted(() => {
   window.addEventListener('resize', handleResize)
+  if (companyStore.selectedCompany) {
+    loadDetailedData()
+  }
 })
 
 onUnmounted(() => {
@@ -75,43 +784,518 @@ 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;
+}
+
+/* Invoices container */
+.invoices-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+/* Filters Card - Desktop */
+.filters-card {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+}
+
+.filters-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.form-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-color-secondary);
+}
+
+.filters-actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--surface-border);
+}
+
+/* Mobile Filter Summary */
+.mobile-filter-summary {
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+  padding: var(--space-sm) 0;
+}
+
+.filter-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--surface-hover);
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.filter-chip:active {
+  background: var(--surface-border);
+}
+
+.filter-chip.active {
+  background: var(--primary-100);
+  color: var(--color-primary);
+}
+
+.filter-chip .pi-times {
+  font-size: 0.75rem;
+  padding: 2px;
+}
+
+/* Loading State */
+.loading-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  padding: var(--space-2xl);
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--surface-border);
+  border-top: 3px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: var(--space-md);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Error State */
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2xl);
+  text-align: center;
+  gap: var(--space-md);
+}
+
+.error-state .pi {
+  font-size: 48px;
+  color: var(--color-error);
+}
+
+/* Empty state styles */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  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 {
+.empty-description {
+  font-size: var(--text-base);
+  color: var(--text-color-secondary);
+  margin: 0 0 var(--space-lg) 0;
+  max-width: 400px;
+}
+
+.empty-action {
+  margin-top: var(--space-md);
+}
+
+/* Data Section */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+/* Table wrapper */
+.table-wrapper {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+.font-bold {
+  font-weight: var(--font-bold);
+}
+
+.name-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.count-badge {
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+  font-weight: var(--font-normal);
+}
+
+.sold-restant {
+  color: var(--color-error) !important;
+}
+
+/* Mobile Cards */
+.mobile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.invoice-card {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.invoice-card.has-multiple {
+  cursor: pointer;
+}
+
+.card-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-md);
+  background: var(--surface-hover);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.card-badge {
+  font-size: var(--text-xs);
+  padding: 2px var(--space-xs);
+  background: var(--primary-100);
+  color: var(--color-primary);
+  border-radius: var(--radius-sm);
+}
+
+.card-body {
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.card-field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-field.highlight {
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--surface-border);
+  margin-top: var(--space-xs);
+}
+
+.card-row-inline {
+  display: flex;
+  gap: var(--space-md);
+}
+
+.card-row-inline .card-field {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.field-label {
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+}
+
+.field-value {
+  font-size: var(--text-sm);
+  color: var(--text-color);
+  font-weight: var(--font-medium);
+}
+
+.sold-value {
+  font-family: var(--font-mono);
+  font-weight: var(--font-bold);
+  color: var(--text-color);
+}
+
+.card-status {
+  display: inline-flex;
+  align-self: flex-start;
+  font-size: var(--text-xs);
+  padding: 2px var(--space-sm);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-medium);
+}
+
+.status-ok {
+  background: var(--green-100);
+  color: var(--green-600);
+}
+
+.status-restant {
+  background: var(--red-100);
+  color: var(--red-600);
+}
+
+/* Sub items for expanded groups */
+.card-sub-items {
+  border-top: 1px solid var(--surface-border);
+  padding: var(--space-sm) var(--space-md) var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.sub-item {
+  padding: var(--space-sm);
+  background: var(--surface-hover);
+  border-radius: var(--radius-sm);
+}
+
+.sub-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  margin-bottom: 4px;
+}
+
+.sub-item-sold {
+  font-family: var(--font-mono);
+  font-weight: var(--font-bold);
+}
+
+.sub-item-dates {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+}
+
+/* Empty data state */
+.empty-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2xl);
+  text-align: center;
+  color: var(--text-color-secondary);
+}
+
+.empty-data .pi {
+  font-size: 48px;
+  margin-bottom: var(--space-md);
+  opacity: 0.5;
+}
+
+/* Pagination */
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+/* Totals Summary */
+.totals-summary {
+  display: flex;
+  gap: var(--space-lg);
+  padding: var(--space-md);
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+}
+
+@media (max-width: 768px) {
+  .totals-summary {
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+}
+
+.total-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.total-label {
   font-size: var(--text-sm);
   color: var(--text-color-secondary);
-  font-style: italic;
+}
+
+.total-value {
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
+  font-family: var(--font-mono);
+  color: var(--color-primary);
+}
+
+/* Filter Sheet Content */
+.filter-sheet-content {
+  padding: var(--space-sm) 0;
+}
+
+.filter-sheet-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-color);
+  margin: 0 0 var(--space-lg) 0;
+}
+
+.filter-sheet-group {
+  margin-bottom: var(--space-md);
+}
+
+.filter-sheet-group .form-label {
+  display: block;
+  margin-bottom: var(--space-xs);
+}
+
+.filter-sheet-actions {
+  display: flex;
+  gap: var(--space-md);
+  margin-top: var(--space-lg);
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--surface-border);
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+/* Dark mode support */
+[data-theme="dark"] .filter-chip {
+  background: var(--surface-100);
+}
+
+[data-theme="dark"] .filter-chip.active {
+  background: var(--primary-800);
+}
+
+[data-theme="dark"] .card-badge {
+  background: var(--primary-800);
+}
+
+[data-theme="dark"] .status-ok {
+  background: var(--green-900);
+  color: var(--green-300);
+}
+
+[data-theme="dark"] .status-restant {
+  background: var(--red-900);
+  color: var(--red-300);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .filter-chip {
+    background: var(--surface-100);
+  }
+
+  :root:not([data-theme]) .filter-chip.active {
+    background: var(--primary-800);
+  }
+
+  :root:not([data-theme]) .card-badge {
+    background: var(--primary-800);
+  }
+
+  :root:not([data-theme]) .status-ok {
+    background: var(--green-900);
+    color: var(--green-300);
+  }
+
+  :root:not([data-theme]) .status-restant {
+    background: var(--red-900);
+    color: var(--red-300);
+  }
 }
 </style>