feat: Add data-entry-app for fiscal receipts with approval workflow
New application for entering fiscal receipts (bonuri fiscale) with: Backend (FastAPI + SQLModel + Alembic): - Receipt, ReceiptAttachment, AccountingEntry models - CRUD operations with async SQLite database - Workflow: DRAFT → PENDING_REVIEW → APPROVED/REJECTED - Auto-generation of accounting entries with VAT calculation - File upload support (images, PDFs) - Predefined expense types (Fuel, Materials, Office, etc.) - Nomenclature service for partners, accounts, cash registers Frontend (Vue.js 3 + PrimeVue + Pinia): - ReceiptsListView with filters and stats - ReceiptCreateView with image upload - ReceiptDetailView with accounting entries - ReceiptApprovalView for accountant approval Documentation: - REQUIREMENTS.md with functional specifications - ARCHITECTURE.md with technical decisions - CLAUDE.md for AI assistant guidance Phase 1 MVP uses SQLite, prepared for Oracle integration in Phase 2. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
524
data-entry-app/frontend/src/views/receipts/ReceiptDetailView.vue
Normal file
524
data-entry-app/frontend/src/views/receipts/ReceiptDetailView.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<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>
|
||||
|
||||
<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
|
||||
})
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user