feat: Enhance invoice management with PDF optimization and date fixes
Optimize PDF export layout with compact columns and more space for partner names. Add accounting period display to invoices matching Trial Balance format. Fix date filtering to use local timezone instead of UTC. Update invoice ordering to chronological sequence (DATAACT, NRACT, NUME). **Backend changes:** - Add accounting period query from calendar table - Add currency (valuta) and cont filter support - Change invoice ordering to chronological (DATAACT ASC, NRACT ASC, NUME) - Add accounting_period field to InvoiceListResponse model **Frontend changes:** - Optimize PDF column widths (37% for partner names, compact numeric columns) - Add custom column width support in exportUtils - Fix date conversion from UTC to local timezone (prevents day shift) - Add accounting period display in PDF exports - Enhance E2E test coverage **Cleanup:** - Remove obsolete Trial Balance feature documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import PrimeVue from "primevue/config";
|
||||
// import Aura from '@primevue/themes/aura'
|
||||
import ToastService from "primevue/toastservice";
|
||||
import ConfirmationService from "primevue/confirmationservice";
|
||||
import Tooltip from "primevue/tooltip";
|
||||
|
||||
// Core components
|
||||
import Button from "primevue/button";
|
||||
@@ -54,6 +55,9 @@ app.use(PrimeVue, {
|
||||
app.use(ToastService);
|
||||
app.use(ConfirmationService);
|
||||
|
||||
// PrimeVue directives
|
||||
app.directive("tooltip", Tooltip);
|
||||
|
||||
// Global PrimeVue components
|
||||
app.component("Button", Button);
|
||||
app.component("InputText", InputText);
|
||||
|
||||
@@ -7,6 +7,7 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
const invoices = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const accountingPeriod = ref({ an: null, luna: null });
|
||||
const filters = ref({
|
||||
company: null,
|
||||
type: "CLIENTI", // CLIENTI or FURNIZORI
|
||||
@@ -15,7 +16,7 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
searchTerm: "",
|
||||
});
|
||||
const pagination = ref({
|
||||
page: 0,
|
||||
page: 1,
|
||||
rows: 50,
|
||||
totalRecords: 0,
|
||||
});
|
||||
@@ -57,16 +58,32 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
try {
|
||||
const params = {
|
||||
partner_type: filters.value.type,
|
||||
page: pagination.value.page + 1,
|
||||
size: pagination.value.rows,
|
||||
page: pagination.value.page,
|
||||
page_size: pagination.value.rows,
|
||||
...options,
|
||||
};
|
||||
|
||||
if (filters.value.dateFrom) {
|
||||
params.date_from = filters.value.dateFrom;
|
||||
// Convert Date object to YYYY-MM-DD string format (LOCAL date, not UTC)
|
||||
if (filters.value.dateFrom instanceof Date) {
|
||||
const year = filters.value.dateFrom.getFullYear();
|
||||
const month = String(filters.value.dateFrom.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateFrom.getDate()).padStart(2, '0');
|
||||
params.date_from = `${year}-${month}-${day}`;
|
||||
} else {
|
||||
params.date_from = filters.value.dateFrom;
|
||||
}
|
||||
}
|
||||
if (filters.value.dateTo) {
|
||||
params.date_to = filters.value.dateTo;
|
||||
// Convert Date object to YYYY-MM-DD string format (LOCAL date, not UTC)
|
||||
if (filters.value.dateTo instanceof Date) {
|
||||
const year = filters.value.dateTo.getFullYear();
|
||||
const month = String(filters.value.dateTo.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateTo.getDate()).padStart(2, '0');
|
||||
params.date_to = `${year}-${month}-${day}`;
|
||||
} else {
|
||||
params.date_to = filters.value.dateTo;
|
||||
}
|
||||
}
|
||||
if (filters.value.searchTerm) {
|
||||
params.search = filters.value.searchTerm;
|
||||
@@ -83,6 +100,11 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
invoices.value = response.data.invoices || [];
|
||||
pagination.value.totalRecords = response.data.total_count || 0;
|
||||
|
||||
// Store accounting period if available
|
||||
if (response.data.accounting_period) {
|
||||
accountingPeriod.value = response.data.accounting_period;
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
error.value = err.response?.data?.detail || "Failed to load invoices";
|
||||
@@ -123,9 +145,10 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
invoices.value = [];
|
||||
isLoading.value = false;
|
||||
error.value = null;
|
||||
accountingPeriod.value = { an: null, luna: null };
|
||||
clearFilters();
|
||||
pagination.value = {
|
||||
page: 0,
|
||||
page: 1,
|
||||
rows: 50,
|
||||
totalRecords: 0,
|
||||
};
|
||||
@@ -140,6 +163,7 @@ export const useInvoicesStore = defineStore("invoices", () => {
|
||||
invoices,
|
||||
isLoading,
|
||||
error,
|
||||
accountingPeriod,
|
||||
filters,
|
||||
pagination,
|
||||
|
||||
|
||||
@@ -137,22 +137,34 @@ export const exportToPDF = (data, columns, filename, header) => {
|
||||
// Total usable width: pageWidth - marginLeft - marginRight
|
||||
const totalWidth = pageWidth - marginLeft - marginRight; // ~281mm for A4 landscape
|
||||
|
||||
// Define width allocation (proportional)
|
||||
// Cont: 7%, Denumire: 33%, Number columns (6x): 10% each = 100%
|
||||
const widthAllocations = {
|
||||
0: totalWidth * 0.07, // Cont: ~20mm
|
||||
1: totalWidth * 0.33, // Denumire: ~93mm
|
||||
2: totalWidth * 0.10, // Sold Prec D: ~28mm
|
||||
3: totalWidth * 0.10, // Sold Prec C: ~28mm
|
||||
4: totalWidth * 0.10, // Rulaj D: ~28mm
|
||||
5: totalWidth * 0.10, // Rulaj C: ~28mm
|
||||
6: totalWidth * 0.10, // Sold Final D: ~28mm
|
||||
7: totalWidth * 0.10, // Sold Final C: ~28mm
|
||||
};
|
||||
// Define width allocation (proportional) - support custom widths from columns
|
||||
const widthAllocations = {};
|
||||
|
||||
columns.forEach((col, index) => {
|
||||
// Use custom width if provided, otherwise auto
|
||||
if (col.width && typeof col.width === 'number') {
|
||||
widthAllocations[index] = totalWidth * col.width;
|
||||
} else if (col.width === 'auto') {
|
||||
widthAllocations[index] = 'auto';
|
||||
} else {
|
||||
// Default width allocation for Trial Balance (8 columns)
|
||||
const defaultWidths = {
|
||||
0: totalWidth * 0.07, // Cont: ~20mm
|
||||
1: totalWidth * 0.33, // Denumire: ~93mm
|
||||
2: totalWidth * 0.10, // Sold Prec D: ~28mm
|
||||
3: totalWidth * 0.10, // Sold Prec C: ~28mm
|
||||
4: totalWidth * 0.10, // Rulaj D: ~28mm
|
||||
5: totalWidth * 0.10, // Rulaj C: ~28mm
|
||||
6: totalWidth * 0.10, // Sold Final D: ~28mm
|
||||
7: totalWidth * 0.10, // Sold Final C: ~28mm
|
||||
};
|
||||
widthAllocations[index] = defaultWidths[index] || 'auto';
|
||||
}
|
||||
});
|
||||
|
||||
columns.forEach((col, index) => {
|
||||
columnStyles[index] = {
|
||||
cellWidth: widthAllocations[index] || 'auto'
|
||||
cellWidth: widthAllocations[index]
|
||||
};
|
||||
|
||||
// Set alignment based on type
|
||||
|
||||
@@ -53,6 +53,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Status -->
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Status Plată</label>
|
||||
<Dropdown
|
||||
v-model="filters.paymentStatus"
|
||||
:options="paymentStatusOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Status plată"
|
||||
class="w-full"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range -->
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
@@ -81,7 +97,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="form-col search-col">
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Căutare</label>
|
||||
<InputText
|
||||
@@ -92,6 +108,19 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cont Filter -->
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Cont</label>
|
||||
<InputText
|
||||
v-model="filters.cont"
|
||||
placeholder="Filtru cont (ex: 4111)"
|
||||
class="w-full"
|
||||
@input="handleSearchChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-actions">
|
||||
@@ -101,6 +130,20 @@
|
||||
class="p-button-outlined p-button-secondary"
|
||||
@click="clearFilters"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-file-excel"
|
||||
label="Export Excel"
|
||||
class="p-button-outlined p-button-success"
|
||||
@click="exportExcel"
|
||||
:disabled="!invoicesStore.hasInvoices"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-file-pdf"
|
||||
label="Export PDF"
|
||||
class="p-button-outlined p-button-danger"
|
||||
@click="exportPDF"
|
||||
:disabled="!invoicesStore.hasInvoices"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
label="Actualizează"
|
||||
@@ -112,64 +155,6 @@
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Summary Statistics -->
|
||||
<div
|
||||
v-if="companyStore.selectedCompany && invoicesStore.hasInvoices"
|
||||
class="summary-stats"
|
||||
>
|
||||
<Card class="stat-card stat-total">
|
||||
<template #content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
<i class="pi pi-file-text"></i>
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<h3 class="stat-value">{{ invoicesStore.totalInvoices }}</h3>
|
||||
<p class="stat-label">Total Facturi</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="stat-card stat-paid">
|
||||
<template #content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
<i class="pi pi-check-circle"></i>
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<h3 class="stat-value">
|
||||
{{ invoicesStore.paidInvoices.length }}
|
||||
</h3>
|
||||
<p class="stat-label">Achitate</p>
|
||||
<small class="stat-amount">{{
|
||||
formatCurrency(invoicesStore.totalAmountPaid)
|
||||
}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="stat-card stat-overdue">
|
||||
<template #content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
<i class="pi pi-exclamation-circle"></i>
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<h3 class="stat-value">
|
||||
{{ invoicesStore.overdueInvoices.length }}
|
||||
</h3>
|
||||
<p class="stat-label">Restante</p>
|
||||
<small class="stat-amount">{{
|
||||
formatCurrency(invoicesStore.totalAmountOverdue)
|
||||
}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Invoices Table -->
|
||||
<Card v-if="companyStore.selectedCompany" class="table-card">
|
||||
<template #content>
|
||||
@@ -180,10 +165,10 @@
|
||||
:rows="pagination.rows"
|
||||
:total-records="invoicesStore.totalInvoices"
|
||||
:lazy="true"
|
||||
:striped-rows="true"
|
||||
paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rows-per-page-options="[25, 50, 100]"
|
||||
current-page-report-template="Afișare {first} - {last} din {totalRecords} înregistrări"
|
||||
:row-class="getRowClass"
|
||||
responsive-layout="scroll"
|
||||
@page="onPageChange"
|
||||
@sort="onSort"
|
||||
@@ -202,119 +187,76 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column field="numar_document" header="Număr Document" sortable>
|
||||
<Column field="cont" header="Cont" sortable>
|
||||
<template #body="slotProps">
|
||||
<strong>{{ slotProps.data.numar_document }}</strong>
|
||||
{{ slotProps.data.cont || '-' }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="data_document" header="Data Document" sortable>
|
||||
<Column field="nract" header="Numar Doc." sortable>
|
||||
<template #body="slotProps">
|
||||
{{ formatDate(slotProps.data.data_document) }}
|
||||
{{ slotProps.data.nract }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="nume_partener" header="Partener" sortable>
|
||||
<Column field="dataact" header="Data Doc." sortable>
|
||||
<template #body="slotProps">
|
||||
<div class="partner-info">
|
||||
<span class="partner-name">{{
|
||||
slotProps.data.nume_partener
|
||||
}}</span>
|
||||
<small
|
||||
v-if="slotProps.data.cod_partener"
|
||||
class="partner-code"
|
||||
>
|
||||
{{ slotProps.data.cod_partener }}
|
||||
</small>
|
||||
{{ formatDate(slotProps.data.dataact) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="datascad" header="Data Scadenta" sortable>
|
||||
<template #body="slotProps">
|
||||
{{ formatDate(slotProps.data.datascad) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="nume" header="Partener" sortable>
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.nume }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="totctva" header="Facturat" sortable>
|
||||
<template #body="slotProps">
|
||||
<div class="text-right">
|
||||
{{ formatNumber(slotProps.data.totctva) }}
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="suma" header="Sumă" sortable>
|
||||
<Column field="achitat" header="Achitat" sortable>
|
||||
<template #body="slotProps">
|
||||
<span class="amount" :class="getAmountClass(slotProps.data)">
|
||||
{{ formatCurrency(slotProps.data.suma) }}
|
||||
</span>
|
||||
<div class="text-right">
|
||||
{{ formatNumber(slotProps.data.achitat) }}
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="css_class" header="Status">
|
||||
<Column field="soldfinal" header="Sold" sortable>
|
||||
<template #body="slotProps">
|
||||
<Tag
|
||||
:value="getStatusText(slotProps.data.css_class)"
|
||||
:severity="getStatusSeverity(slotProps.data.css_class)"
|
||||
/>
|
||||
<div class="text-right">
|
||||
{{ formatNumber(slotProps.data.soldfinal) }}
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="data_scadenta" header="Data Scadență" sortable>
|
||||
<Column field="valuta" header="Valuta" sortable :style="{ width: '8%' }">
|
||||
<template #body="slotProps">
|
||||
{{ formatDate(slotProps.data.data_scadenta) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column header="Acțiuni" :exportable="false">
|
||||
<template #body="slotProps">
|
||||
<div class="table-actions">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
class="p-button-rounded p-button-text p-button-sm"
|
||||
v-tooltip="'Vezi detalii'"
|
||||
@click="viewInvoiceDetails(slotProps.data)"
|
||||
/>
|
||||
<div class="text-center">
|
||||
{{ slotProps.data.valuta || 'RON' }}
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<!-- Total Sold -->
|
||||
<div v-if="invoicesStore.hasInvoices" class="total-sold">
|
||||
<span class="total-sold-label">Total Sold:</span>
|
||||
<span class="total-sold-value">{{ formatCurrency(totalSold) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Invoice Details Dialog -->
|
||||
<Dialog
|
||||
v-model:visible="showDetailsDialog"
|
||||
:header="`Detalii Factură ${selectedInvoice?.numar_document}`"
|
||||
:modal="true"
|
||||
:style="{ width: '50vw' }"
|
||||
:breakpoints="{ '960px': '75vw', '641px': '90vw' }"
|
||||
>
|
||||
<div v-if="selectedInvoice" class="invoice-details">
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<label>Număr Document:</label>
|
||||
<span>{{ selectedInvoice.numar_document }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Data Document:</label>
|
||||
<span>{{ formatDate(selectedInvoice.data_document) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Partener:</label>
|
||||
<span>{{ selectedInvoice.nume_partener }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Cod Partener:</label>
|
||||
<span>{{ selectedInvoice.cod_partener || "-" }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Sumă:</label>
|
||||
<span class="amount">{{
|
||||
formatCurrency(selectedInvoice.suma)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Status:</label>
|
||||
<Tag
|
||||
:value="getStatusText(selectedInvoice.css_class)"
|
||||
:severity="getStatusSeverity(selectedInvoice.css_class)"
|
||||
/>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Data Scadență:</label>
|
||||
<span>{{ formatDate(selectedInvoice.data_scadenta) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -326,6 +268,7 @@ import { useCompanyStore } from "../stores/companies";
|
||||
import { useInvoicesStore } from "../stores/invoices";
|
||||
import { format } from "date-fns";
|
||||
import { ro } from "date-fns/locale";
|
||||
import { exportToExcel, exportToPDF } from "../utils/exportUtils";
|
||||
|
||||
const toast = useToast();
|
||||
const companyStore = useCompanyStore();
|
||||
@@ -333,19 +276,38 @@ const invoicesStore = useInvoicesStore();
|
||||
|
||||
// State
|
||||
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
|
||||
const showDetailsDialog = ref(false);
|
||||
const selectedInvoice = ref(null);
|
||||
|
||||
const filters = ref({
|
||||
type: "CLIENTI",
|
||||
paymentStatus: "neachitate", // Default to unpaid invoices
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
searchTerm: "",
|
||||
cont: "",
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: 0,
|
||||
rows: 50,
|
||||
page: 1,
|
||||
rows: 100, // Changed from 50 to 100
|
||||
});
|
||||
|
||||
// Computed
|
||||
const totalSold = computed(() => {
|
||||
return invoicesStore.invoiceList.reduce((sum, invoice) => {
|
||||
return sum + (parseFloat(invoice.soldfinal) || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
const accountingPeriodText = computed(() => {
|
||||
const months = [
|
||||
"Ianuarie", "Februarie", "Martie", "Aprilie", "Mai", "Iunie",
|
||||
"Iulie", "August", "Septembrie", "Octombrie", "Noiembrie", "Decembrie"
|
||||
];
|
||||
const luna = invoicesStore.accountingPeriod.luna;
|
||||
const an = invoicesStore.accountingPeriod.an;
|
||||
if (!luna || !an) return "";
|
||||
const monthName = months[luna - 1] || "";
|
||||
return `${monthName} ${an}`;
|
||||
});
|
||||
|
||||
// Options
|
||||
@@ -354,6 +316,11 @@ const invoiceTypes = [
|
||||
{ label: "Furnizori", value: "FURNIZORI" },
|
||||
];
|
||||
|
||||
const paymentStatusOptions = [
|
||||
{ label: "Neachitate", value: "neachitate" },
|
||||
{ label: "Toate", value: "toate" },
|
||||
];
|
||||
|
||||
// Methods
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount) return "0,00 RON";
|
||||
@@ -363,6 +330,14 @@ const formatCurrency = (amount) => {
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatNumber = (amount) => {
|
||||
if (!amount || amount === 0) return "0,00";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "";
|
||||
try {
|
||||
@@ -372,43 +347,6 @@ const formatDate = (dateString) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (cssClass) => {
|
||||
switch (cssClass) {
|
||||
case "invoice-paid":
|
||||
return "Achitat";
|
||||
case "invoice-overdue":
|
||||
return "Restant";
|
||||
default:
|
||||
return "Neutru";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusSeverity = (cssClass) => {
|
||||
switch (cssClass) {
|
||||
case "invoice-paid":
|
||||
return "success";
|
||||
case "invoice-overdue":
|
||||
return "danger";
|
||||
default:
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
|
||||
const getRowClass = (data) => {
|
||||
return data.css_class || "";
|
||||
};
|
||||
|
||||
const getAmountClass = (invoice) => {
|
||||
switch (invoice.css_class) {
|
||||
case "invoice-paid":
|
||||
return "amount-paid";
|
||||
case "invoice-overdue":
|
||||
return "amount-overdue";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompanyChange = async () => {
|
||||
if (!selectedCompanyId.value) return;
|
||||
|
||||
@@ -420,7 +358,7 @@ const handleCompanyChange = async () => {
|
||||
};
|
||||
|
||||
const handleFilterChange = async () => {
|
||||
pagination.value.page = 0;
|
||||
pagination.value.page = 1;
|
||||
await loadInvoices();
|
||||
};
|
||||
|
||||
@@ -429,7 +367,7 @@ const handleSearchChange = (() => {
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(async () => {
|
||||
pagination.value.page = 0;
|
||||
pagination.value.page = 1;
|
||||
await loadInvoices();
|
||||
}, 500);
|
||||
};
|
||||
@@ -438,11 +376,13 @@ const handleSearchChange = (() => {
|
||||
const clearFilters = async () => {
|
||||
filters.value = {
|
||||
type: "CLIENTI",
|
||||
paymentStatus: "neachitate",
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
searchTerm: "",
|
||||
cont: "",
|
||||
};
|
||||
pagination.value.page = 0;
|
||||
pagination.value.page = 1;
|
||||
await loadInvoices();
|
||||
};
|
||||
|
||||
@@ -460,17 +400,38 @@ const loadInvoices = async () => {
|
||||
if (!companyStore.selectedCompany) return;
|
||||
|
||||
try {
|
||||
// Set filters in store FIRST
|
||||
invoicesStore.setFilters(filters.value);
|
||||
invoicesStore.setPagination(pagination.value);
|
||||
|
||||
await invoicesStore.loadInvoices(companyStore.selectedCompany.id_firma, {
|
||||
tip: filters.value.type,
|
||||
date_from: filters.value.dateFrom?.toISOString().split("T")[0],
|
||||
date_to: filters.value.dateTo?.toISOString().split("T")[0],
|
||||
search: filters.value.searchTerm,
|
||||
const params = {
|
||||
partner_type: filters.value.type, // FIX: Add partner_type filter
|
||||
page: pagination.value.page,
|
||||
size: pagination.value.rows,
|
||||
});
|
||||
page_size: pagination.value.rows,
|
||||
only_unpaid: filters.value.paymentStatus === "neachitate", // Use filter value
|
||||
};
|
||||
|
||||
// Add optional filters (use LOCAL date, not UTC)
|
||||
if (filters.value.dateFrom) {
|
||||
const year = filters.value.dateFrom.getFullYear();
|
||||
const month = String(filters.value.dateFrom.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateFrom.getDate()).padStart(2, '0');
|
||||
params.date_from = `${year}-${month}-${day}`;
|
||||
}
|
||||
if (filters.value.dateTo) {
|
||||
const year = filters.value.dateTo.getFullYear();
|
||||
const month = String(filters.value.dateTo.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateTo.getDate()).padStart(2, '0');
|
||||
params.date_to = `${year}-${month}-${day}`;
|
||||
}
|
||||
if (filters.value.searchTerm) {
|
||||
params.partner_name = filters.value.searchTerm; // FIX: Use partner_name not search
|
||||
}
|
||||
if (filters.value.cont) {
|
||||
params.cont = filters.value.cont;
|
||||
}
|
||||
|
||||
await invoicesStore.loadInvoices(companyStore.selectedCompany.id_firma, params);
|
||||
} catch (error) {
|
||||
console.error("Failed to load invoices:", error);
|
||||
toast.add({
|
||||
@@ -483,7 +444,8 @@ const loadInvoices = async () => {
|
||||
};
|
||||
|
||||
const onPageChange = async (event) => {
|
||||
pagination.value.page = event.page;
|
||||
// PrimeVue pagination is 0-indexed, backend expects 1-indexed
|
||||
pagination.value.page = event.page + 1;
|
||||
pagination.value.rows = event.rows;
|
||||
await loadInvoices();
|
||||
};
|
||||
@@ -493,9 +455,213 @@ const onSort = async (event) => {
|
||||
await loadInvoices();
|
||||
};
|
||||
|
||||
const viewInvoiceDetails = (invoice) => {
|
||||
selectedInvoice.value = invoice;
|
||||
showDetailsDialog.value = true;
|
||||
// Export methods - Fetch ALL data (not just current page)
|
||||
const fetchAllInvoicesData = async () => {
|
||||
if (!companyStore.selectedCompany) return [];
|
||||
|
||||
try {
|
||||
const params = {
|
||||
company: companyStore.selectedCompany.id_firma,
|
||||
partner_type: filters.value.type, // FIX: Correctly pass partner_type
|
||||
page: 1,
|
||||
page_size: 999999, // Get all data
|
||||
only_unpaid: filters.value.paymentStatus === "neachitate", // Use filter value for export
|
||||
};
|
||||
|
||||
// Add optional filters (use LOCAL date, not UTC)
|
||||
if (filters.value.dateFrom) {
|
||||
const year = filters.value.dateFrom.getFullYear();
|
||||
const month = String(filters.value.dateFrom.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateFrom.getDate()).padStart(2, '0');
|
||||
params.date_from = `${year}-${month}-${day}`;
|
||||
}
|
||||
if (filters.value.dateTo) {
|
||||
const year = filters.value.dateTo.getFullYear();
|
||||
const month = String(filters.value.dateTo.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(filters.value.dateTo.getDate()).padStart(2, '0');
|
||||
params.date_to = `${year}-${month}-${day}`;
|
||||
}
|
||||
if (filters.value.searchTerm) {
|
||||
params.partner_name = filters.value.searchTerm; // FIX: Use partner_name not search
|
||||
}
|
||||
if (filters.value.cont) {
|
||||
params.cont = filters.value.cont;
|
||||
}
|
||||
|
||||
const apiService = (await import("../services/api")).apiService;
|
||||
const response = await apiService.get("/invoices/", { params });
|
||||
|
||||
return response.data.invoices || [];
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch all invoices data:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const exportExcel = async () => {
|
||||
if (!invoicesStore.hasInvoices) {
|
||||
toast.add({
|
||||
severity: "warn",
|
||||
summary: "Nu există date",
|
||||
detail: "Nu există facturi de exportat",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch ALL data for export (not just current page)
|
||||
toast.add({
|
||||
severity: "info",
|
||||
summary: "Se pregătește exportul",
|
||||
detail: "Se încarcă toate datele...",
|
||||
life: 2000,
|
||||
});
|
||||
|
||||
const allData = await fetchAllInvoicesData();
|
||||
|
||||
if (allData.length === 0) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Eroare",
|
||||
detail: "Nu s-au putut prelua datele pentru export",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare data for export - Format dates as strings for Excel
|
||||
const exportData = allData.map((row) => ({
|
||||
"Cont": row.cont || "",
|
||||
"Numar Doc.": row.nract,
|
||||
"Data Doc.": row.dataact ? formatDate(row.dataact) : "",
|
||||
"Data Scadenta": row.datascad ? formatDate(row.datascad) : "",
|
||||
"Partener": row.nume,
|
||||
"Facturat": parseFloat(row.totctva) || 0,
|
||||
"Achitat": parseFloat(row.achitat) || 0,
|
||||
"Sold": parseFloat(row.soldfinal) || 0,
|
||||
"Valuta": row.valuta || "RON",
|
||||
}));
|
||||
|
||||
const invoiceType = filters.value.type === "CLIENTI" ? "Clienti" : "Furnizori";
|
||||
const result = exportToExcel(
|
||||
exportData,
|
||||
`facturi_${invoiceType}_${companyStore.selectedCompany.name.replace(/\s+/g, "_")}`,
|
||||
`Facturi ${invoiceType}`
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
toast.add({
|
||||
severity: "success",
|
||||
summary: "Export reușit",
|
||||
detail: `${allData.length} facturi exportate cu succes`,
|
||||
life: 3000,
|
||||
});
|
||||
} else {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Eroare la export",
|
||||
detail: "Nu s-a putut genera fișierul Excel",
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const exportPDF = async () => {
|
||||
if (!invoicesStore.hasInvoices) {
|
||||
toast.add({
|
||||
severity: "warn",
|
||||
summary: "Nu există date",
|
||||
detail: "Nu există facturi de exportat",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch ALL data for export (not just current page)
|
||||
toast.add({
|
||||
severity: "info",
|
||||
summary: "Se pregătește exportul",
|
||||
detail: "Se încarcă toate datele...",
|
||||
life: 2000,
|
||||
});
|
||||
|
||||
const allData = await fetchAllInvoicesData();
|
||||
|
||||
if (allData.length === 0) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Eroare",
|
||||
detail: "Nu s-au putut prelua datele pentru export",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare data for export - Format dates as strings for PDF
|
||||
const exportData = allData.map((row) => ({
|
||||
cont: row.cont || "",
|
||||
nract: row.nract,
|
||||
dataact: row.dataact ? formatDate(row.dataact) : "",
|
||||
datascad: row.datascad ? formatDate(row.datascad) : "",
|
||||
nume: row.nume,
|
||||
totctva: row.totctva,
|
||||
achitat: row.achitat,
|
||||
soldfinal: row.soldfinal,
|
||||
valuta: row.valuta || "RON",
|
||||
}));
|
||||
|
||||
// Define columns for PDF with optimized widths (proportional percentages)
|
||||
// Compact numeric columns, more space for Partener (company names)
|
||||
const columns = [
|
||||
{ field: "cont", header: "Cont", type: "text", width: 0.06 }, // 6% - Compact account numbers
|
||||
{ field: "nract", header: "Numar Doc.", type: "text", width: 0.08 }, // 8% - Document numbers
|
||||
{ field: "dataact", header: "Data Doc.", type: "text", width: 0.08 }, // 8% - Dates
|
||||
{ field: "datascad", header: "Data Scadenta", type: "text", width: 0.09 }, // 9% - Due dates
|
||||
{ field: "nume", header: "Partener", type: "text", width: 0.37 }, // 37% - MORE SPACE for company names
|
||||
{ field: "totctva", header: "Facturat", type: "number", width: 0.09 }, // 9% - Compact numbers
|
||||
{ field: "achitat", header: "Achitat", type: "number", width: 0.09 }, // 9% - Compact numbers
|
||||
{ field: "soldfinal", header: "Sold", type: "number", width: 0.09 }, // 9% - Compact numbers
|
||||
{ field: "valuta", header: "Valuta", type: "text", width: 0.05 }, // 5% - Very compact (just "RON")
|
||||
];
|
||||
|
||||
const invoiceType = filters.value.type === "CLIENTI" ? "Clienti" : "Furnizori";
|
||||
|
||||
// Build period string - ALWAYS show accounting period (like Trial Balance)
|
||||
let periodText = accountingPeriodText.value || "";
|
||||
|
||||
// Optionally add date filter range if applied
|
||||
if (filters.value.dateFrom || filters.value.dateTo) {
|
||||
const fromDate = filters.value.dateFrom ? formatDate(filters.value.dateFrom) : "început";
|
||||
const toDate = filters.value.dateTo ? formatDate(filters.value.dateTo) : "prezent";
|
||||
periodText += periodText ? ` | Filtru dată: ${fromDate} - ${toDate}` : `Filtru dată: ${fromDate} - ${toDate}`;
|
||||
}
|
||||
|
||||
const result = exportToPDF(
|
||||
exportData,
|
||||
columns,
|
||||
`facturi-${invoiceType.toLowerCase()}-${companyStore.selectedCompany.name.replace(/\s+/g, "-")}`,
|
||||
{
|
||||
companyName: companyStore.selectedCompany?.name || "",
|
||||
title: `Facturi ${invoiceType}`,
|
||||
period: periodText
|
||||
}
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
toast.add({
|
||||
severity: "success",
|
||||
summary: "Export reușit",
|
||||
detail: `${allData.length} facturi exportate cu succes`,
|
||||
life: 3000,
|
||||
});
|
||||
} else {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Eroare la export",
|
||||
detail: "Nu s-a putut genera fișierul PDF",
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
@@ -566,98 +732,10 @@ watch(
|
||||
border-top: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.stat-card.stat-total {
|
||||
border-left-color: var(--blue-500);
|
||||
}
|
||||
|
||||
.stat-card.stat-paid {
|
||||
border-left-color: var(--green-500);
|
||||
}
|
||||
|
||||
.stat-card.stat-overdue {
|
||||
border-left-color: var(--red-500);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.stat-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.stat-amount {
|
||||
color: var(--text-color-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.partner-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.partner-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.partner-code {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.amount-paid {
|
||||
color: var(--green-600);
|
||||
}
|
||||
|
||||
.amount-overdue {
|
||||
color: var(--red-600);
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.no-data,
|
||||
.loading-table {
|
||||
display: flex;
|
||||
@@ -674,34 +752,58 @@ watch(
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.invoice-details {
|
||||
padding: 1rem 0;
|
||||
.text-right {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
.text-center {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
.total-sold {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 2px solid var(--surface-border);
|
||||
background-color: var(--surface-50);
|
||||
}
|
||||
|
||||
.detail-item label {
|
||||
.total-sold-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-item span {
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Row styling based on status - Defined globally in App.vue */
|
||||
.total-sold-value {
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Enhanced striped rows with better contrast - same as Trial Balance */
|
||||
.table-card :deep(.p-datatable .p-datatable-tbody > tr) {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(odd)) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(even)) {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-card :deep(.p-datatable .p-datatable-tbody > tr:hover) {
|
||||
background-color: #e3f2fd !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
@@ -717,16 +819,8 @@ watch(
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filters-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user