fix: Improve receipt form UX with top buttons, attachment download, and TVA fix
- Add top action buttons in all modes (view/edit/create) aligned to the right - Merge ReceiptDetailView into ReceiptCreateView for unified receipt handling - Fix attachment download using blob URLs with auth headers - Add download button in both view and edit modes for attachments - Fix TVA InputNumber type mismatch by parsing amounts as floats - Add fetchAttachmentBlob and downloadAttachment methods to receiptsStore 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -61,13 +61,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION: TOTAL -->
|
||||
<div class="ocr-section" v-if="data.amount">
|
||||
<!-- SECTION: TOTAL + PLATA (combined) -->
|
||||
<div class="ocr-section ocr-section-total" v-if="data.amount">
|
||||
<div class="ocr-section-title">TOTAL</div>
|
||||
<div class="ocr-section-content">
|
||||
<div class="ocr-total-box">
|
||||
<span class="total-amount">{{ formatAmount(data.amount) }} LEI</span>
|
||||
<OCRConfidenceIndicator :confidence="data.confidence_amount" size="small" />
|
||||
<div class="total-main">
|
||||
<span class="total-amount">{{ formatAmount(data.amount) }} LEI</span>
|
||||
<OCRConfidenceIndicator :confidence="data.confidence_amount" size="small" />
|
||||
</div>
|
||||
<!-- Payment methods integrated into total box -->
|
||||
<div v-if="data.payment_methods?.length > 0" class="payment-methods-inline">
|
||||
<Tag
|
||||
v-for="(pm, idx) in data.payment_methods"
|
||||
:key="idx"
|
||||
:severity="pm.method === 'CARD' ? 'info' : 'success'"
|
||||
:value="`${pm.method}: ${formatAmount(pm.amount)} LEI`"
|
||||
class="payment-tag"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="data.items_count" class="items-count">
|
||||
{{ data.items_count }} articole
|
||||
@@ -75,25 +87,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION: PLATA -->
|
||||
<div class="ocr-section" v-if="data.payment_methods?.length > 0">
|
||||
<div class="ocr-section-title">PLATA</div>
|
||||
<div class="ocr-section-content">
|
||||
<div class="ocr-payment-tags">
|
||||
<Tag
|
||||
v-for="(pm, idx) in data.payment_methods"
|
||||
:key="idx"
|
||||
:severity="pm.method === 'CARD' ? 'info' : 'success'"
|
||||
:value="`${pm.method}: ${formatAmount(pm.amount)} LEI`"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="data.suggested_payment_mode" class="suggested-payment-mode">
|
||||
<i class="pi pi-lightbulb"></i>
|
||||
<span>Sugestie: <strong>{{ getSuggestedPaymentLabel(data.suggested_payment_mode) }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION: TVA -->
|
||||
<div class="ocr-section" v-if="data.tva_entries?.length > 0 || data.tva_total">
|
||||
<div class="ocr-section-title">TVA</div>
|
||||
@@ -299,30 +292,40 @@ const formatProcessingTime = (ms) => {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
/* Section-based layout (bon fiscal style) */
|
||||
/* Section-based layout (bon fiscal style) - clearer separation */
|
||||
.ocr-section {
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid #d1fae5;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.ocr-section:last-of-type {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ocr-section-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: #166534;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.35rem;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px dashed #86efac;
|
||||
}
|
||||
|
||||
.ocr-section-content {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* TOTAL section - prominent styling */
|
||||
.ocr-section-total {
|
||||
background: linear-gradient(135deg, rgba(220, 252, 231, 0.8) 0%, rgba(187, 247, 208, 0.6) 100%);
|
||||
border: 2px solid #86efac;
|
||||
}
|
||||
|
||||
/* FURNIZOR section */
|
||||
.vendor-name {
|
||||
font-weight: 600;
|
||||
@@ -376,6 +379,13 @@ const formatProcessingTime = (ms) => {
|
||||
border: 2px solid #86efac;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.total-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -388,6 +398,21 @@ const formatProcessingTime = (ms) => {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
/* Payment methods inside total box */
|
||||
.payment-methods-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px dashed #86efac;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.payment-tag {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.items-count {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
@@ -395,29 +420,6 @@ const formatProcessingTime = (ms) => {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
/* PLATA section */
|
||||
.ocr-payment-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.suggested-payment-mode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: #fef3c7;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.suggested-payment-mode .pi-lightbulb {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* TVA section */
|
||||
.ocr-tva-table {
|
||||
display: flex;
|
||||
|
||||
@@ -26,19 +26,19 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedFile" class="file-selected-state">
|
||||
<i class="pi pi-check-circle" style="font-size: 2.5rem; color: #22c55e;"></i>
|
||||
<i class="pi pi-check-circle" style="font-size: 1.75rem; color: #22c55e;"></i>
|
||||
<p class="file-name">{{ selectedFile.name }}</p>
|
||||
<p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
|
||||
<div class="file-actions">
|
||||
<Button
|
||||
label="Schimba fisierul"
|
||||
label="Schimba"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
@click.stop="triggerFileInput"
|
||||
/>
|
||||
<Button
|
||||
label="Proceseaza cu OCR"
|
||||
label="Proceseaza OCR"
|
||||
icon="pi pi-cog"
|
||||
size="small"
|
||||
@click.stop="processOCR"
|
||||
@@ -47,17 +47,13 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<i class="pi pi-camera" style="font-size: 3rem; color: #667eea;"></i>
|
||||
<i class="pi pi-camera" style="font-size: 2rem; color: #667eea;"></i>
|
||||
<p class="main-text">
|
||||
<span v-if="isDragging">Elibereaza pentru a incarca</span>
|
||||
<span v-else>Trage poza bonului aici sau click pentru a selecta</span>
|
||||
</p>
|
||||
<p class="sub-text">
|
||||
Formate acceptate: JPG, PNG, PDF (max 10MB)
|
||||
</p>
|
||||
<p class="ocr-hint">
|
||||
<i class="pi pi-sparkles"></i>
|
||||
OCR va extrage automat datele din bon
|
||||
JPG, PNG, PDF (max 10MB) • OCR extrage automat datele
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,8 +183,8 @@ defineExpose({ reset, processOCR })
|
||||
|
||||
.upload-dropzone {
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
@@ -215,63 +211,52 @@ defineExpose({ reset, processOCR })
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
/* Empty state - compact */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
font-size: 1rem;
|
||||
color: #475569;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ocr-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #667eea;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #eef2ff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* File selected state */
|
||||
.file-selected-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
font-size: 0.9rem;
|
||||
color: #475569;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* File selected state - compact */
|
||||
.file-selected-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: #1e293b;
|
||||
margin: 0.5rem 0 0 0;
|
||||
margin: 0.25rem 0 0 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Processing state */
|
||||
|
||||
@@ -23,7 +23,7 @@ const routes = [
|
||||
{
|
||||
path: '/receipt/:id',
|
||||
name: 'ReceiptDetail',
|
||||
component: () => import('../views/receipts/ReceiptDetailView.vue'),
|
||||
component: () => import('../views/receipts/ReceiptCreateView.vue'),
|
||||
meta: { title: 'Detalii Bon', requiresAuth: true }
|
||||
},
|
||||
{
|
||||
|
||||
@@ -238,6 +238,39 @@ export const useReceiptsStore = defineStore('receipts', {
|
||||
return `/api/receipts/attachments/${attachmentId}/download`
|
||||
},
|
||||
|
||||
async fetchAttachmentBlob(attachmentId) {
|
||||
try {
|
||||
const response = await apiService.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
return URL.createObjectURL(response.data)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch attachment:', error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
|
||||
async downloadAttachment(attachmentId, filename) {
|
||||
try {
|
||||
const response = await apiService.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
// Create download link
|
||||
const url = URL.createObjectURL(response.data)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename || 'attachment'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
URL.revokeObjectURL(url)
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Failed to download attachment:', error)
|
||||
throw new Error(error.response?.data?.detail || 'Failed to download attachment')
|
||||
}
|
||||
},
|
||||
|
||||
// ============ Accounting Entries ============
|
||||
|
||||
async fetchEntries(receiptId) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,629 +0,0 @@
|
||||
<template>
|
||||
<div class="receipt-detail-view">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
|
||||
<template v-else-if="receipt">
|
||||
<!-- Header Card -->
|
||||
<div class="roa-card">
|
||||
<div class="roa-card-header">
|
||||
<div>
|
||||
<h2 class="roa-card-title">
|
||||
<i class="pi pi-receipt"></i>
|
||||
Bon #{{ receipt.id }}
|
||||
</h2>
|
||||
<span :class="['status-badge', getStatusClass(receipt.status)]">
|
||||
{{ getStatusLabel(receipt.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<Button
|
||||
label="Inapoi"
|
||||
icon="pi pi-arrow-left"
|
||||
severity="secondary"
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<Button
|
||||
v-if="receipt.status === 'draft'"
|
||||
label="Editeaza"
|
||||
icon="pi pi-pencil"
|
||||
@click="$router.push(`/receipt/${receipt.id}/edit`)"
|
||||
/>
|
||||
<Button
|
||||
v-if="receipt.status === 'draft'"
|
||||
label="Trimite spre aprobare"
|
||||
icon="pi pi-send"
|
||||
severity="success"
|
||||
@click="submitReceipt"
|
||||
:loading="submitting"
|
||||
/>
|
||||
<Button
|
||||
v-if="receipt.status === 'rejected'"
|
||||
label="Re-trimite"
|
||||
icon="pi pi-refresh"
|
||||
severity="warning"
|
||||
@click="resubmitReceipt"
|
||||
:loading="submitting"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rejection Reason -->
|
||||
<div v-if="receipt.rejection_reason" class="rejection-alert">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
<div>
|
||||
<strong>Motiv respingere:</strong>
|
||||
<p>{{ receipt.rejection_reason }}</p>
|
||||
<small>Respins de {{ receipt.reviewed_by }} la {{ formatDateTime(receipt.reviewed_at) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-grid">
|
||||
<!-- Receipt Details -->
|
||||
<div class="roa-card">
|
||||
<h3>
|
||||
<i class="pi pi-info-circle"></i>
|
||||
Detalii Bon
|
||||
</h3>
|
||||
|
||||
<div class="detail-list">
|
||||
<div class="detail-item">
|
||||
<span class="label">Tip Document</span>
|
||||
<span class="value">
|
||||
{{ receipt.receipt_type === 'bon_fiscal' ? 'Bon Fiscal' : 'Chitanta' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Directie</span>
|
||||
<span class="value">
|
||||
{{ receipt.direction === 'cheltuiala' ? 'Cheltuiala' : 'Incasare' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Data</span>
|
||||
<span class="value">{{ formatDate(receipt.receipt_date) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Suma</span>
|
||||
<span class="value amount">{{ formatAmount(receipt.amount) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Furnizor</span>
|
||||
<span class="value">{{ receipt.partner_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Tip Cheltuiala</span>
|
||||
<span class="value">{{ getExpenseTypeName(receipt.expense_type_code) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Casa/Banca</span>
|
||||
<span class="value">{{ receipt.cash_register_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-item" v-if="receipt.receipt_number">
|
||||
<span class="label">Numar Bon</span>
|
||||
<span class="value">{{ receipt.receipt_number }}</span>
|
||||
</div>
|
||||
<div class="detail-item" v-if="receipt.description">
|
||||
<span class="label">Descriere</span>
|
||||
<span class="value">{{ receipt.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalii Suplimentare (TVA, items, address from OCR) -->
|
||||
<template v-if="hasTvaData || receipt.items_count || receipt.vendor_address">
|
||||
<Divider />
|
||||
|
||||
<h4 style="margin-bottom: 0.75rem; color: #0284c7;">
|
||||
<i class="pi pi-list"></i>
|
||||
Detalii Suplimentare
|
||||
</h4>
|
||||
|
||||
<div class="detail-list">
|
||||
<!-- TVA Breakdown -->
|
||||
<div v-if="parsedTvaBreakdown?.length > 0" class="detail-item tva-detail">
|
||||
<span class="label">TVA</span>
|
||||
<div class="tva-breakdown-display">
|
||||
<div v-for="(entry, idx) in parsedTvaBreakdown" :key="idx" class="tva-line">
|
||||
<span class="tva-code" v-if="entry.code">{{ entry.code }}:</span>
|
||||
<span class="tva-percent">{{ entry.percent }}%</span>
|
||||
<span class="tva-amount">= {{ formatAmount(entry.amount) }}</span>
|
||||
</div>
|
||||
<div v-if="receipt.tva_total && parsedTvaBreakdown.length > 1" class="tva-total-line">
|
||||
<strong>Total TVA: {{ formatAmount(receipt.tva_total) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-item" v-if="receipt.items_count">
|
||||
<span class="label">Nr. Articole</span>
|
||||
<span class="value">{{ receipt.items_count }} articole</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-item" v-if="receipt.vendor_address">
|
||||
<span class="label">Adresa Furnizor</span>
|
||||
<span class="value">{{ receipt.vendor_address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div class="detail-list">
|
||||
<div class="detail-item">
|
||||
<span class="label">Creat de</span>
|
||||
<span class="value">{{ receipt.created_by }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Creat la</span>
|
||||
<span class="value">{{ formatDateTime(receipt.created_at) }}</span>
|
||||
</div>
|
||||
<div class="detail-item" v-if="receipt.submitted_at">
|
||||
<span class="label">Trimis la</span>
|
||||
<span class="value">{{ formatDateTime(receipt.submitted_at) }}</span>
|
||||
</div>
|
||||
<div class="detail-item" v-if="receipt.reviewed_by">
|
||||
<span class="label">Revizuit de</span>
|
||||
<span class="value">{{ receipt.reviewed_by }}</span>
|
||||
</div>
|
||||
<div class="detail-item" v-if="receipt.reviewed_at">
|
||||
<span class="label">Revizuit la</span>
|
||||
<span class="value">{{ formatDateTime(receipt.reviewed_at) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<div class="roa-card">
|
||||
<h3>
|
||||
<i class="pi pi-images"></i>
|
||||
Atasamente ({{ receipt.attachments?.length || 0 }})
|
||||
</h3>
|
||||
|
||||
<div v-if="receipt.attachments?.length" class="attachments-grid">
|
||||
<div
|
||||
v-for="att in receipt.attachments"
|
||||
:key="att.id"
|
||||
class="attachment-item"
|
||||
>
|
||||
<template v-if="att.mime_type?.startsWith('image/')">
|
||||
<Image
|
||||
:src="store.getAttachmentUrl(att.id)"
|
||||
:alt="att.filename"
|
||||
preview
|
||||
class="attachment-image"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a
|
||||
:href="store.getAttachmentUrl(att.id)"
|
||||
target="_blank"
|
||||
class="pdf-link"
|
||||
>
|
||||
<i class="pi pi-file-pdf"></i>
|
||||
{{ att.filename }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<i class="pi pi-image"></i>
|
||||
<p>Niciun atasament</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accounting Entries -->
|
||||
<div class="roa-card">
|
||||
<h3>
|
||||
<i class="pi pi-book"></i>
|
||||
Note Contabile
|
||||
</h3>
|
||||
|
||||
<div v-if="receipt.entries?.length" class="entries-table-container">
|
||||
<table class="entries-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tip</th>
|
||||
<th>Cont</th>
|
||||
<th>Denumire Cont</th>
|
||||
<th style="text-align: right;">Suma</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="entry in receipt.entries" :key="entry.id">
|
||||
<td>
|
||||
<Tag
|
||||
:value="entry.entry_type === 'debit' ? 'D' : 'C'"
|
||||
:severity="entry.entry_type === 'debit' ? 'danger' : 'success'"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ entry.account_code }}</td>
|
||||
<td>{{ entry.account_name || '-' }}</td>
|
||||
<td :class="entry.entry_type" style="text-align: right;">
|
||||
{{ formatAmount(entry.amount) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right;"><strong>Total Debit:</strong></td>
|
||||
<td class="debit" style="text-align: right;">
|
||||
<strong>{{ formatAmount(totalDebit) }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right;"><strong>Total Credit:</strong></td>
|
||||
<td class="credit" style="text-align: right;">
|
||||
<strong>{{ formatAmount(totalCredit) }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<div v-if="!isBalanced" class="balance-warning">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
Atentie: Notele contabile nu sunt echilibrate!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<i class="pi pi-book"></i>
|
||||
<p>Notele contabile vor fi generate la trimiterea spre aprobare</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Not Found -->
|
||||
<div v-else class="empty-state">
|
||||
<i class="pi pi-exclamation-circle"></i>
|
||||
<h3>Bonul nu a fost gasit</h3>
|
||||
<Button label="Inapoi la lista" @click="$router.push('/')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { useReceiptsStore } from '../../stores/receiptsStore'
|
||||
import { EXPENSE_TYPES } from '../../utils/constants'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const store = useReceiptsStore()
|
||||
|
||||
const receipt = ref(null)
|
||||
const loading = ref(true)
|
||||
const submitting = ref(false)
|
||||
|
||||
const totalDebit = computed(() => {
|
||||
if (!receipt.value?.entries) return 0
|
||||
return receipt.value.entries
|
||||
.filter(e => e.entry_type === 'debit')
|
||||
.reduce((sum, e) => sum + parseFloat(e.amount), 0)
|
||||
})
|
||||
|
||||
const totalCredit = computed(() => {
|
||||
if (!receipt.value?.entries) return 0
|
||||
return receipt.value.entries
|
||||
.filter(e => e.entry_type === 'credit')
|
||||
.reduce((sum, e) => sum + parseFloat(e.amount), 0)
|
||||
})
|
||||
|
||||
const isBalanced = computed(() => {
|
||||
return Math.abs(totalDebit.value - totalCredit.value) < 0.01
|
||||
})
|
||||
|
||||
const parsedTvaBreakdown = computed(() => {
|
||||
if (!receipt.value?.tva_breakdown) return []
|
||||
try {
|
||||
// Handle both string (JSON) and array formats
|
||||
return typeof receipt.value.tva_breakdown === 'string'
|
||||
? JSON.parse(receipt.value.tva_breakdown)
|
||||
: receipt.value.tva_breakdown
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
const hasTvaData = computed(() => {
|
||||
return parsedTvaBreakdown.value?.length > 0 || receipt.value?.tva_total
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await loadReceipt()
|
||||
})
|
||||
|
||||
const loadReceipt = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
receipt.value = await store.fetchReceiptById(route.params.id)
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: 'Nu s-a putut incarca bonul',
|
||||
life: 5000,
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('ro-RO')
|
||||
}
|
||||
|
||||
const formatDateTime = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleString('ro-RO')
|
||||
}
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const classes = {
|
||||
draft: 'status-draft',
|
||||
pending_review: 'status-pending',
|
||||
approved: 'status-approved',
|
||||
rejected: 'status-rejected',
|
||||
synced: 'status-synced',
|
||||
}
|
||||
return classes[status] || ''
|
||||
}
|
||||
|
||||
const getStatusLabel = (status) => {
|
||||
const labels = {
|
||||
draft: 'Ciorna',
|
||||
pending_review: 'In asteptare',
|
||||
approved: 'Aprobat',
|
||||
rejected: 'Respins',
|
||||
synced: 'Sincronizat',
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
const getExpenseTypeName = (code) => {
|
||||
return EXPENSE_TYPES[code] || code || '-'
|
||||
}
|
||||
|
||||
const submitReceipt = async () => {
|
||||
submitting.value = true
|
||||
try {
|
||||
const result = await store.submitReceipt(receipt.value.id)
|
||||
if (result.success) {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Succes',
|
||||
detail: 'Bonul a fost trimis spre aprobare',
|
||||
life: 3000,
|
||||
})
|
||||
await loadReceipt()
|
||||
} else {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: result.message,
|
||||
life: 5000,
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: error.message || 'Nu s-a putut trimite bonul',
|
||||
life: 5000,
|
||||
})
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resubmitReceipt = async () => {
|
||||
submitting.value = true
|
||||
try {
|
||||
const result = await store.resubmitReceipt(receipt.value.id)
|
||||
if (result.success) {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Succes',
|
||||
detail: 'Bonul a fost re-trimis spre aprobare',
|
||||
life: 3000,
|
||||
})
|
||||
await loadReceipt()
|
||||
} else {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: result.message,
|
||||
life: 5000,
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: error.message || 'Nu s-a putut re-trimite bonul',
|
||||
life: 5000,
|
||||
})
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-item .value.amount {
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rejection-alert {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #fff3e0;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.rejection-alert i {
|
||||
font-size: 1.5rem;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.rejection-alert p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.rejection-alert small {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.attachments-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attachment-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pdf-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pdf-link i {
|
||||
font-size: 3rem;
|
||||
color: #d32f2f;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.entries-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.balance-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #fff3e0;
|
||||
border-radius: 8px;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
/* TVA Breakdown Display */
|
||||
.detail-item.tva-detail {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tva-breakdown-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
background: #f0f9ff;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tva-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tva-code {
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.tva-percent {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: #dbeafe;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: #1e40af;
|
||||
min-width: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tva-amount {
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.tva-total-line {
|
||||
margin-top: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
border-top: 1px dashed #0284c7;
|
||||
color: #0284c7;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user