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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SECTION: TOTAL -->
|
<!-- SECTION: TOTAL + PLATA (combined) -->
|
||||||
<div class="ocr-section" v-if="data.amount">
|
<div class="ocr-section ocr-section-total" v-if="data.amount">
|
||||||
<div class="ocr-section-title">TOTAL</div>
|
<div class="ocr-section-title">TOTAL</div>
|
||||||
<div class="ocr-section-content">
|
<div class="ocr-section-content">
|
||||||
<div class="ocr-total-box">
|
<div class="ocr-total-box">
|
||||||
<span class="total-amount">{{ formatAmount(data.amount) }} LEI</span>
|
<div class="total-main">
|
||||||
<OCRConfidenceIndicator :confidence="data.confidence_amount" size="small" />
|
<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>
|
||||||
<div v-if="data.items_count" class="items-count">
|
<div v-if="data.items_count" class="items-count">
|
||||||
{{ data.items_count }} articole
|
{{ data.items_count }} articole
|
||||||
@@ -75,25 +87,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- SECTION: TVA -->
|
||||||
<div class="ocr-section" v-if="data.tva_entries?.length > 0 || data.tva_total">
|
<div class="ocr-section" v-if="data.tva_entries?.length > 0 || data.tva_total">
|
||||||
<div class="ocr-section-title">TVA</div>
|
<div class="ocr-section-title">TVA</div>
|
||||||
@@ -299,30 +292,40 @@ const formatProcessingTime = (ms) => {
|
|||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section-based layout (bon fiscal style) */
|
/* Section-based layout (bon fiscal style) - clearer separation */
|
||||||
.ocr-section {
|
.ocr-section {
|
||||||
padding: 0.6rem 0;
|
padding: 0.75rem;
|
||||||
border-bottom: 1px solid #d1fae5;
|
margin-bottom: 0.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #bbf7d0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ocr-section:last-of-type {
|
.ocr-section:last-of-type {
|
||||||
border-bottom: none;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ocr-section-title {
|
.ocr-section-title {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: #166534;
|
color: #166534;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.08em;
|
||||||
margin-bottom: 0.35rem;
|
margin-bottom: 0.5rem;
|
||||||
opacity: 0.8;
|
padding-bottom: 0.35rem;
|
||||||
|
border-bottom: 1px dashed #86efac;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ocr-section-content {
|
.ocr-section-content {
|
||||||
color: #1e293b;
|
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 */
|
/* FURNIZOR section */
|
||||||
.vendor-name {
|
.vendor-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -376,6 +379,13 @@ const formatProcessingTime = (ms) => {
|
|||||||
border: 2px solid #86efac;
|
border: 2px solid #86efac;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -388,6 +398,21 @@ const formatProcessingTime = (ms) => {
|
|||||||
color: #166534;
|
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 {
|
.items-count {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
@@ -395,29 +420,6 @@ const formatProcessingTime = (ms) => {
|
|||||||
margin-top: 0.35rem;
|
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 */
|
/* TVA section */
|
||||||
.ocr-tva-table {
|
.ocr-tva-table {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -26,19 +26,19 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="selectedFile" class="file-selected-state">
|
<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-name">{{ selectedFile.name }}</p>
|
||||||
<p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
|
<p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
|
||||||
<div class="file-actions">
|
<div class="file-actions">
|
||||||
<Button
|
<Button
|
||||||
label="Schimba fisierul"
|
label="Schimba"
|
||||||
icon="pi pi-refresh"
|
icon="pi pi-refresh"
|
||||||
severity="secondary"
|
severity="secondary"
|
||||||
size="small"
|
size="small"
|
||||||
@click.stop="triggerFileInput"
|
@click.stop="triggerFileInput"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
label="Proceseaza cu OCR"
|
label="Proceseaza OCR"
|
||||||
icon="pi pi-cog"
|
icon="pi pi-cog"
|
||||||
size="small"
|
size="small"
|
||||||
@click.stop="processOCR"
|
@click.stop="processOCR"
|
||||||
@@ -47,17 +47,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="empty-state">
|
<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">
|
<p class="main-text">
|
||||||
<span v-if="isDragging">Elibereaza pentru a incarca</span>
|
<span v-if="isDragging">Elibereaza pentru a incarca</span>
|
||||||
<span v-else>Trage poza bonului aici sau click pentru a selecta</span>
|
<span v-else>Trage poza bonului aici sau click pentru a selecta</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="sub-text">
|
<p class="sub-text">
|
||||||
Formate acceptate: JPG, PNG, PDF (max 10MB)
|
JPG, PNG, PDF (max 10MB) • OCR extrage automat datele
|
||||||
</p>
|
|
||||||
<p class="ocr-hint">
|
|
||||||
<i class="pi pi-sparkles"></i>
|
|
||||||
OCR va extrage automat datele din bon
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -187,8 +183,8 @@ defineExpose({ reset, processOCR })
|
|||||||
|
|
||||||
.upload-dropzone {
|
.upload-dropzone {
|
||||||
border: 2px dashed #cbd5e1;
|
border: 2px dashed #cbd5e1;
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
padding: 2rem;
|
padding: 1rem 1.25rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@@ -215,63 +211,52 @@ defineExpose({ reset, processOCR })
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Empty state */
|
/* Empty state - compact */
|
||||||
.empty-state {
|
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.25rem;
|
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 {
|
.file-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
color: #1e293b;
|
color: #1e293b;
|
||||||
margin: 0.5rem 0 0 0;
|
margin: 0.25rem 0 0 0;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-size {
|
.file-size {
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-actions {
|
.file-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75rem;
|
gap: 0.5rem;
|
||||||
margin-top: 1rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Processing state */
|
/* Processing state */
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/receipt/:id',
|
path: '/receipt/:id',
|
||||||
name: 'ReceiptDetail',
|
name: 'ReceiptDetail',
|
||||||
component: () => import('../views/receipts/ReceiptDetailView.vue'),
|
component: () => import('../views/receipts/ReceiptCreateView.vue'),
|
||||||
meta: { title: 'Detalii Bon', requiresAuth: true }
|
meta: { title: 'Detalii Bon', requiresAuth: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -238,6 +238,39 @@ export const useReceiptsStore = defineStore('receipts', {
|
|||||||
return `/api/receipts/attachments/${attachmentId}/download`
|
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 ============
|
// ============ Accounting Entries ============
|
||||||
|
|
||||||
async fetchEntries(receiptId) {
|
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