feat(data-entry): Add unified receipt form with OCR confidence tracking
New unified receipt creation system with: - UnifiedReceiptForm component with inline OCR preview and confidence indicators - Compact upload zone with drag-drop and camera support - TVA and Payment fields with dynamic add/remove - Supplier dual-field with autocomplete and OCR hint - Receipt form sections with collapsible auxiliary data Backend OCR improvements: - Add confidence_tva and confidence_payment to extraction results - Update TVA extraction to return confidence scores - Include TVA (15%) and payment (10%) in overall_confidence calculation Also includes: - CSS design system rules documentation - Port check helper function for service scripts - Expanded design tokens documentation in CLAUDE.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
321
src/modules/data-entry/components/receipts/AuxiliarySection.vue
Normal file
321
src/modules/data-entry/components/receipts/AuxiliarySection.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="auxiliary-section">
|
||||
<!-- Expense Type -->
|
||||
<div class="aux-field">
|
||||
<label>Tip Cheltuiala</label>
|
||||
<Dropdown
|
||||
:modelValue="expenseType"
|
||||
@update:modelValue="$emit('update:expenseType', $event)"
|
||||
:options="expenseTypes"
|
||||
optionLabel="name"
|
||||
optionValue="code"
|
||||
placeholder="Selecteaza tip cheltuiala"
|
||||
:disabled="disabled"
|
||||
class="expense-dropdown dropdown-borderless"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="aux-field">
|
||||
<label>Descriere</label>
|
||||
<Textarea
|
||||
:modelValue="description"
|
||||
@update:modelValue="$emit('update:description', $event)"
|
||||
rows="2"
|
||||
placeholder="Descriere optionala..."
|
||||
:disabled="disabled"
|
||||
class="description-textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<div class="aux-field attachments-field">
|
||||
<div class="attachments-header">
|
||||
<label>Atasamente</label>
|
||||
<Button
|
||||
v-if="!disabled"
|
||||
icon="pi pi-plus"
|
||||
label="Adauga"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
@click="triggerFileInput"
|
||||
/>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept="image/*,application/pdf"
|
||||
multiple
|
||||
class="hidden-input"
|
||||
@change="onFilesSelected"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Existing attachments -->
|
||||
<div v-if="attachments.length || newFiles.length" class="attachments-grid">
|
||||
<!-- Existing attachments -->
|
||||
<div
|
||||
v-for="att in attachments"
|
||||
:key="att.id"
|
||||
class="attachment-item"
|
||||
>
|
||||
<div class="attachment-preview">
|
||||
<i :class="att.mime_type?.startsWith('image/') ? 'pi pi-image' : 'pi pi-file-pdf'"></i>
|
||||
<span class="attachment-name">{{ truncateFilename(att.filename) }}</span>
|
||||
</div>
|
||||
<div class="attachment-actions">
|
||||
<Button
|
||||
icon="pi pi-download"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
text
|
||||
rounded
|
||||
@click="$emit('download-attachment', att)"
|
||||
/>
|
||||
<Button
|
||||
v-if="!disabled"
|
||||
icon="pi pi-times"
|
||||
size="small"
|
||||
severity="danger"
|
||||
text
|
||||
rounded
|
||||
@click="$emit('remove-attachment', att.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New files (pending upload) -->
|
||||
<div
|
||||
v-for="(file, idx) in newFiles"
|
||||
:key="'new-' + idx"
|
||||
class="attachment-item new-file"
|
||||
>
|
||||
<div class="attachment-preview">
|
||||
<i :class="file.type?.startsWith('image/') ? 'pi pi-image' : 'pi pi-file-pdf'"></i>
|
||||
<span class="attachment-name">{{ truncateFilename(file.name) }}</span>
|
||||
<span class="file-size">({{ formatFileSize(file.size) }})</span>
|
||||
</div>
|
||||
<div class="attachment-actions">
|
||||
<Button
|
||||
v-if="!disabled"
|
||||
icon="pi pi-times"
|
||||
size="small"
|
||||
severity="danger"
|
||||
text
|
||||
rounded
|
||||
@click="$emit('remove-file', idx)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else class="attachments-empty">
|
||||
<i class="pi pi-image"></i>
|
||||
<span>Niciun atasament</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import Button from 'primevue/button'
|
||||
|
||||
const props = defineProps({
|
||||
expenseType: { type: String, default: null },
|
||||
description: { type: String, default: '' },
|
||||
expenseTypes: { type: Array, default: () => [] },
|
||||
attachments: { type: Array, default: () => [] },
|
||||
newFiles: { type: Array, default: () => [] },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:expenseType',
|
||||
'update:description',
|
||||
'add-files',
|
||||
'remove-file',
|
||||
'remove-attachment',
|
||||
'download-attachment',
|
||||
])
|
||||
|
||||
const fileInputRef = ref(null)
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
const onFilesSelected = async (event) => {
|
||||
const files = Array.from(event.target?.files || [])
|
||||
if (files.length === 0) return
|
||||
|
||||
// Clone files to avoid Android SnapshotState issue
|
||||
const clonedFiles = await Promise.all(
|
||||
files.map(async (file) => {
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer()
|
||||
return new File([arrayBuffer], file.name, {
|
||||
type: file.type,
|
||||
lastModified: file.lastModified
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn('File clone failed:', e)
|
||||
return file
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
emit('add-files', clonedFiles)
|
||||
|
||||
// Reset input
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const truncateFilename = (name, maxLen = 20) => {
|
||||
if (!name || name.length <= maxLen) return name
|
||||
const ext = name.split('.').pop()
|
||||
const base = name.substring(0, name.length - ext.length - 1)
|
||||
const truncatedBase = base.substring(0, maxLen - ext.length - 4)
|
||||
return `${truncatedBase}...${ext}`
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auxiliary-section {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--surface-ground);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.aux-field {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.aux-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.aux-field label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.expense-dropdown {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.description-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Attachments */
|
||||
.attachments-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.attachments-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.attachment-item.new-file {
|
||||
background: var(--blue-50);
|
||||
border-color: var(--blue-200);
|
||||
}
|
||||
|
||||
.attachment-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.attachment-preview i {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
color: var(--text-color);
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.attachment-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.attachments-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.attachments-empty i {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.attachments-grid {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
[data-theme="dark"] .attachment-item.new-file {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--blue-700);
|
||||
}
|
||||
</style>
|
||||
511
src/modules/data-entry/components/receipts/CompactUploadZone.vue
Normal file
511
src/modules/data-entry/components/receipts/CompactUploadZone.vue
Normal file
@@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div class="compact-upload-zone">
|
||||
<div
|
||||
class="upload-strip"
|
||||
:class="{ 'dragging': isDragging, 'processing': processing, 'has-file': selectedFile }"
|
||||
@dragover.prevent="onDragOver"
|
||||
@dragleave.prevent="onDragLeave"
|
||||
@drop.prevent="onDrop"
|
||||
@click="triggerFileInput"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*,application/pdf"
|
||||
class="hidden-input"
|
||||
@change="onFileSelected"
|
||||
/>
|
||||
|
||||
<!-- Processing state -->
|
||||
<div v-if="processing" class="strip-content processing-state">
|
||||
<ProgressSpinner style="width: 24px; height: 24px" strokeWidth="4" />
|
||||
<span class="processing-text">{{ processingMessage }}</span>
|
||||
<span class="processing-subtext" v-if="processingSubtext">{{ processingSubtext }}</span>
|
||||
</div>
|
||||
|
||||
<!-- File selected state -->
|
||||
<div v-else-if="selectedFile" class="strip-content file-state">
|
||||
<i class="pi pi-check-circle" style="color: var(--green-500);"></i>
|
||||
<span class="file-name">{{ selectedFile.name }}</span>
|
||||
<span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else class="strip-content empty-state">
|
||||
<i class="pi pi-camera"></i>
|
||||
<span v-if="isDragging">Elibereaza pentru a incarca</span>
|
||||
<span v-else>Trage poza bonului aici sau click pentru a selecta</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action bar (inline with file strip) -->
|
||||
<div v-if="selectedFile && !processing" class="action-bar">
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
@click.stop="triggerFileInput"
|
||||
v-tooltip.top="'Schimba fisier'"
|
||||
/>
|
||||
<Dropdown
|
||||
v-model="selectedEngine"
|
||||
:options="engineOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="OCR"
|
||||
class="engine-selector dropdown-borderless"
|
||||
@click.stop
|
||||
/>
|
||||
<Button
|
||||
label="OCR"
|
||||
icon="pi pi-play"
|
||||
size="small"
|
||||
@click.stop="processOCR"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<Message v-if="error" severity="error" :closable="true" @close="error = null" class="error-message">
|
||||
{{ error }}
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import Message from 'primevue/message'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import Button from 'primevue/button'
|
||||
import api from '@data-entry/services/api'
|
||||
import { useOCRSettingsStore } from '@data-entry/stores/ocrSettingsStore'
|
||||
|
||||
const emit = defineEmits(['ocr-result', 'file-selected', 'error'])
|
||||
|
||||
const fileInput = ref(null)
|
||||
const selectedFile = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const processing = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// OCR Settings Store
|
||||
const ocrStore = useOCRSettingsStore()
|
||||
const selectedEngine = ref('auto')
|
||||
|
||||
// Engine config
|
||||
const engineConfig = {
|
||||
'auto': { label: 'Auto', desc: 'docTR→Paddle→Tess' },
|
||||
'doctr': { label: 'docTR', desc: 'Rapid, buna acuratete' },
|
||||
'doctr_plus': { label: 'docTR Plus', desc: '2 treceri (recomandat)' },
|
||||
'paddleocr': { label: 'PaddleOCR', desc: 'Cea mai buna calitate' },
|
||||
'tesseract': { label: 'Tesseract', desc: 'Cel mai rapid' },
|
||||
'hybrid': { label: 'Hybrid', desc: 'docTR+Tess paralel' },
|
||||
'hybrid-quality': { label: 'Hybrid Calitate', desc: 'Acuratete max' },
|
||||
}
|
||||
|
||||
const engineOptions = computed(() => {
|
||||
return ocrStore.availableEngines.map(engine => ({
|
||||
label: engineConfig[engine]?.label || engine,
|
||||
desc: engineConfig[engine]?.desc || '',
|
||||
value: engine
|
||||
}))
|
||||
})
|
||||
|
||||
// Job queue state
|
||||
const jobId = ref(null)
|
||||
const queuePosition = ref(null)
|
||||
const estimatedWait = ref(null)
|
||||
const jobStatus = ref(null)
|
||||
|
||||
const processingMessage = computed(() => {
|
||||
if (jobStatus.value === 'pending' && queuePosition.value > 0) {
|
||||
return `In coada (${queuePosition.value})`
|
||||
}
|
||||
if (jobStatus.value === 'processing') {
|
||||
return 'Se proceseaza...'
|
||||
}
|
||||
return 'Se trimite...'
|
||||
})
|
||||
|
||||
const processingSubtext = computed(() => {
|
||||
if (jobStatus.value === 'pending' && estimatedWait.value > 0) {
|
||||
return `~${estimatedWait.value}s`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
// Load user preference on mount
|
||||
onMounted(async () => {
|
||||
await ocrStore.loadPreference()
|
||||
selectedEngine.value = ocrStore.preferredEngine
|
||||
})
|
||||
|
||||
// Save preference when changed
|
||||
watch(selectedEngine, async (newEngine, oldEngine) => {
|
||||
if (oldEngine && newEngine !== oldEngine && ocrStore.initialized) {
|
||||
try {
|
||||
await ocrStore.setPreference(newEngine)
|
||||
} catch (err) {
|
||||
console.error('[CompactUploadZone] Failed to save preference:', err)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const onDragOver = () => { isDragging.value = true }
|
||||
const onDragLeave = () => { isDragging.value = false }
|
||||
|
||||
const onDrop = (event) => {
|
||||
isDragging.value = false
|
||||
const files = event.dataTransfer?.files
|
||||
if (files?.length > 0) handleFile(files[0])
|
||||
}
|
||||
|
||||
const triggerFileInput = () => { fileInput.value?.click() }
|
||||
|
||||
const onFileSelected = (event) => {
|
||||
const files = event.target?.files
|
||||
if (files?.length > 0) handleFile(files[0])
|
||||
}
|
||||
|
||||
const handleFile = async (file) => {
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
error.value = 'Tip de fisier invalid. Acceptate: JPG, PNG, PDF'
|
||||
return
|
||||
}
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
error.value = 'Fisier prea mare. Max 10MB.'
|
||||
return
|
||||
}
|
||||
|
||||
error.value = null
|
||||
|
||||
// Clone file to avoid Android SnapshotState issue
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer()
|
||||
const clonedFile = new File([arrayBuffer], file.name, {
|
||||
type: file.type,
|
||||
lastModified: file.lastModified
|
||||
})
|
||||
selectedFile.value = clonedFile
|
||||
emit('file-selected', clonedFile)
|
||||
} catch (e) {
|
||||
console.warn('File clone failed:', e)
|
||||
selectedFile.value = file
|
||||
emit('file-selected', file)
|
||||
}
|
||||
}
|
||||
|
||||
const processOCR = async () => {
|
||||
if (!selectedFile.value) return
|
||||
|
||||
processing.value = true
|
||||
error.value = null
|
||||
jobId.value = null
|
||||
queuePosition.value = null
|
||||
estimatedWait.value = null
|
||||
jobStatus.value = 'submitting'
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', selectedFile.value)
|
||||
|
||||
// Submit job
|
||||
const submitResponse = await api.post(`/ocr/extract?engine=${selectedEngine.value}`, formData, {
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
const job = submitResponse.data
|
||||
jobId.value = job.job_id
|
||||
queuePosition.value = job.queue_position
|
||||
estimatedWait.value = job.estimated_wait_seconds
|
||||
jobStatus.value = job.status
|
||||
|
||||
// Poll for result
|
||||
await pollJobStatus(job.job_id)
|
||||
|
||||
} catch (err) {
|
||||
const message = err.response?.data?.detail || err.message || 'Eroare OCR'
|
||||
error.value = message
|
||||
emit('error', message)
|
||||
processing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pollJobStatus = async (id) => {
|
||||
const LONG_POLL_TIMEOUT = 30
|
||||
const MAX_TOTAL_TIME = 120
|
||||
const MIN_POLL_INTERVAL = 500
|
||||
const startTime = Date.now()
|
||||
|
||||
const poll = async () => {
|
||||
const elapsed = (Date.now() - startTime) / 1000
|
||||
if (elapsed >= MAX_TOTAL_TIME) {
|
||||
processing.value = false
|
||||
error.value = 'Timeout - procesare prea lunga'
|
||||
emit('error', error.value)
|
||||
return
|
||||
}
|
||||
|
||||
const pollStartTime = Date.now()
|
||||
|
||||
try {
|
||||
const response = await api.get(`/ocr/jobs/${id}/wait`, {
|
||||
params: { timeout: LONG_POLL_TIMEOUT, _t: Date.now() },
|
||||
timeout: (LONG_POLL_TIMEOUT + 5) * 1000,
|
||||
headers: { 'Cache-Control': 'no-cache' }
|
||||
})
|
||||
|
||||
const job = response.data
|
||||
jobStatus.value = job.status
|
||||
queuePosition.value = job.queue_position
|
||||
estimatedWait.value = job.estimated_wait_seconds
|
||||
|
||||
if (job.status === 'completed') {
|
||||
processing.value = false
|
||||
if (job.result) {
|
||||
emit('ocr-result', {
|
||||
...job.result,
|
||||
_processing_time_ms: job.processing_time_ms
|
||||
})
|
||||
} else {
|
||||
error.value = 'OCR completat dar fara rezultat'
|
||||
emit('error', error.value)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (job.status === 'failed') {
|
||||
processing.value = false
|
||||
error.value = job.error || 'Procesare OCR esuata'
|
||||
emit('error', error.value)
|
||||
return
|
||||
}
|
||||
|
||||
// Still pending/processing
|
||||
if (processing.value) {
|
||||
const pollDuration = Date.now() - pollStartTime
|
||||
if (pollDuration < MIN_POLL_INTERVAL) {
|
||||
await new Promise(resolve => setTimeout(resolve, MIN_POLL_INTERVAL - pollDuration))
|
||||
}
|
||||
await poll()
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
if (err.code === 'ECONNABORTED' || err.message?.includes('timeout')) {
|
||||
if (processing.value) await poll()
|
||||
return
|
||||
}
|
||||
|
||||
const elapsed = (Date.now() - startTime) / 1000
|
||||
if (elapsed < MAX_TOTAL_TIME && processing.value) {
|
||||
await new Promise(resolve => setTimeout(resolve, MIN_POLL_INTERVAL))
|
||||
await poll()
|
||||
return
|
||||
}
|
||||
|
||||
processing.value = false
|
||||
error.value = 'Eroare verificare job'
|
||||
emit('error', error.value)
|
||||
}
|
||||
}
|
||||
|
||||
await poll()
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
selectedFile.value = null
|
||||
error.value = null
|
||||
jobId.value = null
|
||||
queuePosition.value = null
|
||||
estimatedWait.value = null
|
||||
jobStatus.value = null
|
||||
processing.value = false
|
||||
if (fileInput.value) fileInput.value.value = ''
|
||||
}
|
||||
|
||||
defineExpose({ reset, processOCR })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.compact-upload-zone {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.upload-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 28px;
|
||||
padding: 2px var(--space-sm); /* reduced vertical padding */
|
||||
border: 1px dashed var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-ground);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.upload-strip:hover {
|
||||
border-color: var(--primary-500);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.upload-strip.dragging {
|
||||
border-color: var(--primary-500);
|
||||
background: var(--primary-50);
|
||||
}
|
||||
|
||||
.upload-strip.processing {
|
||||
cursor: default;
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.upload-strip.has-file {
|
||||
border-style: solid;
|
||||
border-color: var(--green-300);
|
||||
background: var(--green-50);
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.strip-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--text-sm); /* bigger - 0.875rem */
|
||||
}
|
||||
|
||||
.strip-content i {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
.file-state {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: var(--font-medium);
|
||||
max-width: 200px; /* wider */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.processing-state {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.processing-text {
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.processing-subtext {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Action bar - single line */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: 2px; /* minimal margin */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-bar :deep(.p-button) {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: var(--text-xs);
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.action-bar :deep(.p-button .p-button-icon) {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.engine-selector {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.engine-selector :deep(.p-dropdown) {
|
||||
padding: 0 var(--space-xs);
|
||||
font-size: var(--text-xs);
|
||||
min-height: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.engine-selector :deep(.p-dropdown-label) {
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
|
||||
.engine-selector :deep(.p-dropdown-trigger) {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.engine-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.engine-label {
|
||||
font-weight: var(--font-medium);
|
||||
font-size: var(--text-xs); /* 12px - uniform */
|
||||
}
|
||||
|
||||
.engine-desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.error-message :deep(.p-message) {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: var(--text-xs); /* 12px - uniform */
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
.strip-content span:not(.file-name) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.strip-content .file-name {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.engine-selector {
|
||||
min-width: 90px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="pay-section">
|
||||
<!-- Payment fields - NO HEADER -->
|
||||
<div class="pay-grid">
|
||||
<!-- CARD -->
|
||||
<div class="pay-item" :class="{ active: modelValue.CARD > 0 }">
|
||||
<label class="pay-label">Card</label>
|
||||
<InputNumber
|
||||
v-model="modelValue.CARD"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="pay-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- NUMERAR -->
|
||||
<div class="pay-item" :class="{ active: modelValue.NUMERAR > 0 }">
|
||||
<label class="pay-label">Cash</label>
|
||||
<InputNumber
|
||||
v-model="modelValue.NUMERAR"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="pay-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ALTE (simple label + input, no dropdown) -->
|
||||
<div class="pay-item" :class="{ active: modelValue.ALTE?.amount > 0 }">
|
||||
<label class="pay-label">Alte</label>
|
||||
<InputNumber
|
||||
v-model="modelValue.ALTE.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="pay-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mismatch warning message -->
|
||||
<div v-if="showMismatch" class="mismatch-msg">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
Plati ({{ formatAmount(computedTotal) }}) ≠ Total ({{ formatAmount(total) }})
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Object, required: true },
|
||||
total: { type: Number, default: null },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const computedTotal = computed(() => {
|
||||
return (props.modelValue.CARD || 0) +
|
||||
(props.modelValue.NUMERAR || 0) +
|
||||
(props.modelValue.ALTE?.amount || 0)
|
||||
})
|
||||
|
||||
const showMismatch = computed(() => {
|
||||
if (!props.total || props.total === 0) return false
|
||||
if (computedTotal.value === 0) return false
|
||||
return Math.abs(computedTotal.value - props.total) > 0.02
|
||||
})
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return parseFloat(amount || 0).toLocaleString('ro-RO', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
}
|
||||
|
||||
const emitUpdate = () => {
|
||||
emit('update:modelValue', { ...props.modelValue })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* === PAYMENT SECTION - simple grid === */
|
||||
.pay-section {
|
||||
padding: var(--space-sm) 0;
|
||||
border-top: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
/* Payment grid - horizontal */
|
||||
.pay-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.pay-item.active .pay-input :deep(.p-inputnumber-input) {
|
||||
background: color-mix(in srgb, var(--blue-500) 8%, var(--surface-ground));
|
||||
}
|
||||
|
||||
/* Label above input */
|
||||
.pay-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Payment input */
|
||||
.pay-input {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.pay-input :deep(.p-inputnumber-input) {
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: var(--text-sm);
|
||||
text-align: right;
|
||||
height: 28px;
|
||||
background: var(--surface-ground);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.pay-input :deep(.p-inputnumber-input:focus) {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-color);
|
||||
}
|
||||
|
||||
/* Mismatch warning message */
|
||||
.mismatch-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: color-mix(in srgb, var(--yellow-500) 15%, var(--surface-card));
|
||||
border: 1px solid var(--yellow-500);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--yellow-600);
|
||||
}
|
||||
|
||||
.mismatch-msg i {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* Responsive: stack on mobile */
|
||||
@media (max-width: 400px) {
|
||||
.pay-grid {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
.pay-item {
|
||||
width: 100%;
|
||||
}
|
||||
.pay-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- NON-SCOPED: Force dark mode styling -->
|
||||
<style>
|
||||
[data-theme="dark"] .pay-section .p-inputnumber-input {
|
||||
background: var(--surface-ground) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-color: var(--surface-border) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) .pay-section .p-inputnumber-input {
|
||||
background: var(--surface-ground) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-color: var(--surface-border) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="payment-fixed-fields">
|
||||
<div class="payment-grid">
|
||||
<!-- CARD -->
|
||||
<div class="payment-field" :class="{ 'has-value': modelValue.CARD > 0 }">
|
||||
<label class="payment-label">
|
||||
<i class="pi pi-credit-card"></i>
|
||||
CARD
|
||||
</label>
|
||||
<InputNumber
|
||||
v-model="modelValue.CARD"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- NUMERAR -->
|
||||
<div class="payment-field" :class="{ 'has-value': modelValue.NUMERAR > 0 }">
|
||||
<label class="payment-label">
|
||||
<i class="pi pi-wallet"></i>
|
||||
NUMERAR
|
||||
</label>
|
||||
<InputNumber
|
||||
v-model="modelValue.NUMERAR"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ALTE (with type dropdown) -->
|
||||
<div class="payment-field payment-field-other" :class="{ 'has-value': modelValue.ALTE.amount > 0 }">
|
||||
<div class="payment-header">
|
||||
<label class="payment-label">
|
||||
<i class="pi pi-ticket"></i>
|
||||
ALTE
|
||||
</label>
|
||||
<Dropdown
|
||||
v-model="modelValue.ALTE.type"
|
||||
:options="otherPaymentTypes"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
placeholder="Tip"
|
||||
class="type-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.ALTE.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation warning: sum vs total -->
|
||||
<div class="validation-row" v-if="showMismatchWarning">
|
||||
<div class="warning-box">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
<span>
|
||||
Suma plati ({{ formatAmount(computedTotal) }}) {{ computedTotal > total ? '>' : '<' }} Total ({{ formatAmount(total) }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
// Expected structure:
|
||||
// { CARD: 0, NUMERAR: 0, ALTE: { amount: 0, type: null } }
|
||||
},
|
||||
total: { type: Number, default: null }, // Total amount for validation
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const otherPaymentTypes = [
|
||||
{ value: 'tichete_masa', label: 'Tichete masa' },
|
||||
{ value: 'voucher', label: 'Voucher' },
|
||||
{ value: 'credit_magazin', label: 'Credit magazin' },
|
||||
]
|
||||
|
||||
const computedTotal = computed(() => {
|
||||
const pm = props.modelValue
|
||||
return (pm.CARD || 0) + (pm.NUMERAR || 0) + (pm.ALTE?.amount || 0)
|
||||
})
|
||||
|
||||
const showMismatchWarning = computed(() => {
|
||||
if (!props.total || props.total === 0) return false
|
||||
if (computedTotal.value === 0) return false
|
||||
return Math.abs(computedTotal.value - props.total) > 0.02 // 2 bani tolerance
|
||||
})
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return parseFloat(amount || 0).toLocaleString('ro-RO', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
}
|
||||
|
||||
const emitUpdate = () => {
|
||||
emit('update:modelValue', { ...props.modelValue })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-fixed-fields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.payment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1.5fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.payment-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--surface-ground);
|
||||
border: 1px solid var(--surface-border);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.payment-field.has-value {
|
||||
background: var(--blue-50);
|
||||
border-color: var(--blue-200);
|
||||
}
|
||||
|
||||
.payment-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.payment-label i {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.payment-field.has-value .payment-label i {
|
||||
color: var(--blue-500);
|
||||
}
|
||||
|
||||
/* Other payment type with dropdown */
|
||||
.payment-field-other .payment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.type-dropdown {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.type-dropdown :deep(.p-dropdown) {
|
||||
padding: 0.2rem 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amount-input :deep(.p-inputnumber-input) {
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Validation warning */
|
||||
.validation-row {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--yellow-100);
|
||||
border: 1px solid var(--yellow-300);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--yellow-800);
|
||||
}
|
||||
|
||||
.warning-box i {
|
||||
color: var(--yellow-500);
|
||||
}
|
||||
|
||||
/* Responsive - stack on mobile */
|
||||
@media (max-width: 640px) {
|
||||
.payment-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.payment-field-other {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.payment-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
[data-theme="dark"] .payment-field.has-value {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--blue-700);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .warning-box {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
border-color: var(--yellow-700);
|
||||
color: var(--yellow-200);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="receipt-section" :class="[variant, { collapsed: isCollapsed }]">
|
||||
<div class="section-header" @click="toggleable && toggle()">
|
||||
<span class="section-title">{{ title }}</span>
|
||||
<div class="section-right">
|
||||
<slot name="header-right"></slot>
|
||||
<i
|
||||
v-if="toggleable"
|
||||
:class="isCollapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"
|
||||
class="toggle-icon"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content" v-show="!isCollapsed">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true },
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: (v) => ['default', 'highlight', 'muted'].includes(v)
|
||||
},
|
||||
toggleable: { type: Boolean, default: false },
|
||||
collapsed: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:collapsed'])
|
||||
|
||||
const isCollapsed = ref(props.collapsed)
|
||||
|
||||
watch(() => props.collapsed, (val) => {
|
||||
isCollapsed.value = val
|
||||
})
|
||||
|
||||
const toggle = () => {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
emit('update:collapsed', isCollapsed.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.receipt-section {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receipt-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.receipt-section.highlight {
|
||||
background: var(--green-50);
|
||||
border-color: var(--green-200);
|
||||
}
|
||||
|
||||
.receipt-section.muted {
|
||||
background: var(--surface-ground);
|
||||
border-color: var(--surface-border);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px dashed var(--surface-border);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.receipt-section.highlight .section-header {
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
border-bottom-color: var(--green-300);
|
||||
}
|
||||
|
||||
.receipt-section.collapsed .section-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.receipt-section[class*="toggleable"] .section-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.receipt-section.highlight .section-title {
|
||||
color: var(--green-800);
|
||||
}
|
||||
|
||||
.section-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-color-secondary);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.section-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.section-content {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
[data-theme="dark"] .receipt-section {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .receipt-section.highlight {
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
border-color: var(--green-800);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .section-header {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .receipt-section.highlight .section-header {
|
||||
background: rgba(34, 197, 94, 0.05);
|
||||
}
|
||||
</style>
|
||||
384
src/modules/data-entry/components/receipts/SupplierDualField.vue
Normal file
384
src/modules/data-entry/components/receipts/SupplierDualField.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div class="supplier-dual-field">
|
||||
<div class="dual-grid">
|
||||
<!-- LEFT: OCR Data (read-only) -->
|
||||
<div class="ocr-side" :class="{ 'has-data': ocrName || ocrCui }">
|
||||
<div class="side-header">
|
||||
<span class="side-label">Din OCR</span>
|
||||
<OCRConfidenceIndicator
|
||||
v-if="ocrConfidence"
|
||||
:confidence="ocrConfidence"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="side-content">
|
||||
<div class="ocr-name" v-if="ocrName">{{ ocrName }}</div>
|
||||
<div class="ocr-cui" v-if="ocrCui">CUI: {{ ocrCui }}</div>
|
||||
<div class="ocr-empty" v-if="!ocrName && !ocrCui">
|
||||
<i class="pi pi-info-circle"></i>
|
||||
Procesati o imagine pentru extragere automata
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: DB Validated (editable) -->
|
||||
<div class="db-side">
|
||||
<div class="side-header">
|
||||
<span class="side-label">Validat DB</span>
|
||||
<Button
|
||||
v-if="!disabled"
|
||||
icon="pi pi-sync"
|
||||
size="small"
|
||||
text
|
||||
rounded
|
||||
:loading="syncingSuppliers"
|
||||
@click="$emit('sync-suppliers')"
|
||||
v-tooltip.top="'Re-sincronizeaza furnizorii din Oracle'"
|
||||
class="sync-btn"
|
||||
/>
|
||||
</div>
|
||||
<div class="side-content">
|
||||
<div class="field-row">
|
||||
<AutoComplete
|
||||
v-model="localPartnerName"
|
||||
:suggestions="filteredPartners"
|
||||
optionLabel="name"
|
||||
field="name"
|
||||
@complete="searchPartners"
|
||||
@item-select="onPartnerSelect"
|
||||
placeholder="Cauta furnizor..."
|
||||
dropdown
|
||||
:forceSelection="false"
|
||||
:disabled="disabled"
|
||||
class="partner-autocomplete"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-row cui-row">
|
||||
<label>CUI</label>
|
||||
<InputText
|
||||
v-model="localCui"
|
||||
placeholder="RO12345678"
|
||||
:disabled="disabled"
|
||||
class="cui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supplier status badges -->
|
||||
<div class="supplier-status" v-if="supplierSource || showWarning">
|
||||
<div v-if="supplierSource" class="status-badge success">
|
||||
<i class="pi pi-check-circle"></i>
|
||||
<span>Validat ({{ supplierSource }})</span>
|
||||
</div>
|
||||
<div v-if="showWarning" class="status-badge warning">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
<span>Negasit - se va crea automat</span>
|
||||
<Button
|
||||
v-if="!disabled"
|
||||
label="Creaza acum"
|
||||
icon="pi pi-plus"
|
||||
size="small"
|
||||
severity="warning"
|
||||
text
|
||||
@click="$emit('create-supplier')"
|
||||
class="create-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address (collapsed by default) -->
|
||||
<div class="address-section" v-if="localAddress">
|
||||
<div class="address-toggle" @click="showAddress = !showAddress">
|
||||
<i :class="showAddress ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"></i>
|
||||
<span>{{ showAddress ? 'Ascunde adresa' : localAddress }}</span>
|
||||
</div>
|
||||
<div class="address-expanded" v-if="showAddress">
|
||||
<InputText
|
||||
v-model="localAddress"
|
||||
placeholder="Adresa furnizor"
|
||||
:disabled="disabled"
|
||||
class="address-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import AutoComplete from 'primevue/autocomplete'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Button from 'primevue/button'
|
||||
import OCRConfidenceIndicator from '@data-entry/components/ocr/OCRConfidenceIndicator.vue'
|
||||
|
||||
const props = defineProps({
|
||||
// OCR data (read-only display)
|
||||
ocrName: { type: String, default: '' },
|
||||
ocrCui: { type: String, default: '' },
|
||||
ocrConfidence: { type: Number, default: null },
|
||||
|
||||
// Form values (two-way bound)
|
||||
partnerName: { type: [String, Object], default: '' },
|
||||
cui: { type: String, default: '' },
|
||||
address: { type: String, default: '' },
|
||||
|
||||
// Supplier validation
|
||||
supplierSource: { type: String, default: null }, // 'oracle' | 'local' | null
|
||||
showWarning: { type: Boolean, default: false },
|
||||
|
||||
// Partners list for autocomplete
|
||||
partners: { type: Array, default: () => [] },
|
||||
|
||||
// State
|
||||
disabled: { type: Boolean, default: false },
|
||||
syncingSuppliers: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:partnerName',
|
||||
'update:cui',
|
||||
'update:address',
|
||||
'partner-selected',
|
||||
'sync-suppliers',
|
||||
'create-supplier',
|
||||
])
|
||||
|
||||
// Local refs with two-way binding
|
||||
const localPartnerName = computed({
|
||||
get: () => props.partnerName,
|
||||
set: (val) => emit('update:partnerName', val)
|
||||
})
|
||||
|
||||
const localCui = computed({
|
||||
get: () => props.cui,
|
||||
set: (val) => emit('update:cui', val)
|
||||
})
|
||||
|
||||
const localAddress = computed({
|
||||
get: () => props.address,
|
||||
set: (val) => emit('update:address', val)
|
||||
})
|
||||
|
||||
const showAddress = ref(false)
|
||||
const filteredPartners = ref([])
|
||||
|
||||
const searchPartners = (event) => {
|
||||
const query = event.query.toLowerCase()
|
||||
filteredPartners.value = props.partners.filter(p =>
|
||||
p.name.toLowerCase().includes(query) ||
|
||||
(p.fiscal_code && p.fiscal_code.toLowerCase().includes(query))
|
||||
)
|
||||
}
|
||||
|
||||
const onPartnerSelect = (event) => {
|
||||
const partner = event.value
|
||||
if (partner) {
|
||||
emit('update:cui', partner.fiscal_code || '')
|
||||
if (partner.address) {
|
||||
emit('update:address', partner.address)
|
||||
}
|
||||
emit('partner-selected', partner)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.supplier-dual-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dual-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Side styles */
|
||||
.ocr-side,
|
||||
.db-side {
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.ocr-side {
|
||||
background: var(--surface-ground);
|
||||
}
|
||||
|
||||
.ocr-side.has-data {
|
||||
background: var(--blue-50);
|
||||
border-color: var(--blue-200);
|
||||
}
|
||||
|
||||
.side-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px dashed var(--surface-border);
|
||||
}
|
||||
|
||||
.side-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.sync-btn {
|
||||
padding: 0.25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/* OCR side content */
|
||||
.ocr-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ocr-cui {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.ocr-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ocr-empty i {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
/* DB side content */
|
||||
.field-row {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.field-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cui-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cui-row label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-secondary);
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.partner-autocomplete {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cui-input {
|
||||
flex: 1;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
/* Supplier status */
|
||||
.supplier-status {
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.status-badge.success {
|
||||
color: var(--green-700);
|
||||
}
|
||||
|
||||
.status-badge.success i {
|
||||
color: var(--green-500);
|
||||
}
|
||||
|
||||
.status-badge.warning {
|
||||
color: var(--yellow-800);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-badge.warning i {
|
||||
color: var(--yellow-500);
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Address section */
|
||||
.address-section {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.address-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.address-toggle:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.address-toggle i {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.address-toggle span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.address-expanded {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.address-input {
|
||||
width: 100%;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dual-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
[data-theme="dark"] .ocr-side.has-data {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--blue-700);
|
||||
}
|
||||
</style>
|
||||
303
src/modules/data-entry/components/receipts/TvaCompactFields.vue
Normal file
303
src/modules/data-entry/components/receipts/TvaCompactFields.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="tva-row">
|
||||
<!-- TVA label like TOTAL -->
|
||||
<span class="row-label">TVA</span>
|
||||
<div class="tva-fields">
|
||||
<div
|
||||
v-for="(entry, index) in visibleEntries"
|
||||
:key="entry.code"
|
||||
class="tva-item"
|
||||
:class="{ active: modelValue[entry.code]?.amount > 0 }"
|
||||
>
|
||||
<!-- Percent as InputNumber (not dropdown) -->
|
||||
<InputNumber
|
||||
v-model="modelValue[entry.code].percent"
|
||||
suffix="%"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="21"
|
||||
:disabled="disabled"
|
||||
class="tva-percent"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
<InputNumber
|
||||
v-model="modelValue[entry.code].amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="tva-amount"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
<!-- Remove button (if more than 1 visible) -->
|
||||
<button
|
||||
v-if="visibleEntries.length > 1 && !disabled"
|
||||
type="button"
|
||||
class="remove-btn"
|
||||
@click="removeEntry(index)"
|
||||
>
|
||||
<i class="pi pi-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add button -->
|
||||
<button
|
||||
v-if="canAddMore && !disabled"
|
||||
type="button"
|
||||
class="add-btn"
|
||||
@click="addEntry"
|
||||
>
|
||||
<i class="pi pi-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Object, required: true },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const ALL_CODES = ['A', 'B', 'C', 'D', 'E']
|
||||
|
||||
// Track which TVA codes are visible (default: just 'A')
|
||||
const visibleCodes = ref(['A'])
|
||||
|
||||
// Computed: entries to display
|
||||
const visibleEntries = computed(() => {
|
||||
return visibleCodes.value.map(code => ({
|
||||
code,
|
||||
...props.modelValue[code]
|
||||
}))
|
||||
})
|
||||
|
||||
// Computed: can add more rows?
|
||||
const canAddMore = computed(() => {
|
||||
return visibleCodes.value.length < ALL_CODES.length
|
||||
})
|
||||
|
||||
// Add next available code
|
||||
const addEntry = () => {
|
||||
const nextCode = ALL_CODES.find(code => !visibleCodes.value.includes(code))
|
||||
if (nextCode) {
|
||||
visibleCodes.value = [...visibleCodes.value, nextCode]
|
||||
}
|
||||
}
|
||||
|
||||
// Remove code at index
|
||||
const removeEntry = (index) => {
|
||||
if (visibleCodes.value.length > 1) {
|
||||
const codeToRemove = visibleCodes.value[index]
|
||||
visibleCodes.value = visibleCodes.value.filter((_, i) => i !== index)
|
||||
// Reset the removed code's values
|
||||
if (props.modelValue[codeToRemove]) {
|
||||
props.modelValue[codeToRemove].percent = null
|
||||
props.modelValue[codeToRemove].amount = 0
|
||||
emitUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Watch modelValue for OCR changes - auto-expand to show filled values
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (!newVal) return
|
||||
const codesWithValues = ALL_CODES.filter(
|
||||
code => newVal[code]?.amount > 0
|
||||
)
|
||||
if (codesWithValues.length > 0) {
|
||||
// Ensure all codes with values are visible
|
||||
const newVisibleCodes = [...new Set([...visibleCodes.value, ...codesWithValues])]
|
||||
if (newVisibleCodes.length !== visibleCodes.value.length) {
|
||||
visibleCodes.value = newVisibleCodes
|
||||
}
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
const emitUpdate = () => {
|
||||
emit('update:modelValue', { ...props.modelValue })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* === TVA ROW - with label and green background === */
|
||||
.tva-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
background: var(--green-100); /* different from TOTAL which uses green-50 */
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
margin: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-weight: var(--font-semibold);
|
||||
font-size: var(--text-xs); /* 12px - uniform for labels */
|
||||
color: var(--text-color);
|
||||
flex-shrink: 0;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.tva-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tva-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.tva-item.active .tva-amount :deep(.p-inputnumber-input) {
|
||||
background: color-mix(in srgb, var(--green-500) 8%, var(--surface-ground));
|
||||
}
|
||||
|
||||
/* TVA percent input (wider to see "21%") */
|
||||
.tva-percent {
|
||||
width: 70px; /* wider to show % suffix */
|
||||
}
|
||||
|
||||
.tva-percent :deep(.p-inputnumber-input) {
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: var(--text-sm); /* 14px - uniform for inputs */
|
||||
font-weight: var(--font-normal);
|
||||
text-align: right;
|
||||
height: 32px; /* uniform height */
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tva-percent :deep(.p-inputnumber-input:focus) {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-color);
|
||||
}
|
||||
|
||||
/* TVA amount input (wider to see "1234.56") */
|
||||
.tva-amount {
|
||||
width: 90px; /* wider */
|
||||
}
|
||||
|
||||
.tva-amount :deep(.p-inputnumber-input) {
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
font-size: var(--text-sm); /* 14px - uniform for inputs */
|
||||
font-weight: var(--font-normal);
|
||||
text-align: right;
|
||||
height: 32px; /* uniform height */
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tva-amount :deep(.p-inputnumber-input:focus) {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-color);
|
||||
}
|
||||
|
||||
/* Add/Remove buttons - icon only, compact */
|
||||
.add-btn, .remove-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px dashed var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
color: var(--text-color-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
background: var(--red-500);
|
||||
border-color: var(--red-500);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-btn i, .remove-btn i {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* Responsive: stack on mobile */
|
||||
@media (max-width: 480px) {
|
||||
.tva-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.row-label {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.tva-fields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tva-item {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tva-percent {
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
.tva-amount {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- NON-SCOPED: Force dark mode styling -->
|
||||
<style>
|
||||
[data-theme="dark"] .tva-row {
|
||||
background: rgba(34, 197, 94, 0.15); /* slightly more visible than TOTAL */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .tva-row .p-inputnumber-input {
|
||||
background: var(--surface-ground) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-color: var(--surface-border) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) .tva-row {
|
||||
background: rgba(34, 197, 94, 0.15); /* slightly more visible than TOTAL */
|
||||
}
|
||||
|
||||
:root:not([data-theme="light"]) .tva-row .p-inputnumber-input {
|
||||
background: var(--surface-ground) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-color: var(--surface-border) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
294
src/modules/data-entry/components/receipts/TvaFixedFields.vue
Normal file
294
src/modules/data-entry/components/receipts/TvaFixedFields.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="tva-fixed-fields">
|
||||
<div class="tva-grid">
|
||||
<!-- TVA A -->
|
||||
<div class="tva-field" :class="{ 'has-value': modelValue.A.amount > 0 }">
|
||||
<div class="tva-header">
|
||||
<span class="tva-code">A</span>
|
||||
<Dropdown
|
||||
v-model="modelValue.A.percent"
|
||||
:options="percentOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
class="percent-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.A.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- TVA B -->
|
||||
<div class="tva-field" :class="{ 'has-value': modelValue.B.amount > 0 }">
|
||||
<div class="tva-header">
|
||||
<span class="tva-code">B</span>
|
||||
<Dropdown
|
||||
v-model="modelValue.B.percent"
|
||||
:options="percentOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
class="percent-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.B.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- TVA C -->
|
||||
<div class="tva-field" :class="{ 'has-value': modelValue.C.amount > 0 }">
|
||||
<div class="tva-header">
|
||||
<span class="tva-code">C</span>
|
||||
<Dropdown
|
||||
v-model="modelValue.C.percent"
|
||||
:options="percentOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
class="percent-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.C.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- TVA D -->
|
||||
<div class="tva-field" :class="{ 'has-value': modelValue.D.amount > 0 }">
|
||||
<div class="tva-header">
|
||||
<span class="tva-code">D</span>
|
||||
<Dropdown
|
||||
v-model="modelValue.D.percent"
|
||||
:options="percentOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
class="percent-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.D.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- TVA E (custom percent) -->
|
||||
<div class="tva-field" :class="{ 'has-value': modelValue.E.amount > 0 }">
|
||||
<div class="tva-header">
|
||||
<span class="tva-code">E</span>
|
||||
<Dropdown
|
||||
v-model="modelValue.E.percent"
|
||||
:options="percentOptionsWithCustom"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="disabled"
|
||||
class="percent-dropdown dropdown-borderless"
|
||||
@change="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
v-model="modelValue.E.amount"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
:disabled="disabled"
|
||||
placeholder="0.00"
|
||||
class="amount-input"
|
||||
@input="emitUpdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- TOTAL TVA -->
|
||||
<div class="tva-total">
|
||||
<span class="total-label">TOTAL TVA</span>
|
||||
<span class="total-value">{{ formatAmount(computedTotal) }} LEI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
// Expected structure:
|
||||
// { A: { percent: 19, amount: 0 }, B: {...}, C: {...}, D: {...}, E: {...} }
|
||||
},
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
// Standard VAT percentages in Romania
|
||||
const percentOptions = [
|
||||
{ value: 19, label: '19%' },
|
||||
{ value: 9, label: '9%' },
|
||||
{ value: 5, label: '5%' },
|
||||
{ value: 0, label: '0%' },
|
||||
]
|
||||
|
||||
// E field can have null (disabled) or custom values
|
||||
const percentOptionsWithCustom = [
|
||||
{ value: null, label: '--' },
|
||||
...percentOptions,
|
||||
]
|
||||
|
||||
const computedTotal = computed(() => {
|
||||
const tva = props.modelValue
|
||||
return (
|
||||
(tva.A?.amount || 0) +
|
||||
(tva.B?.amount || 0) +
|
||||
(tva.C?.amount || 0) +
|
||||
(tva.D?.amount || 0) +
|
||||
(tva.E?.amount || 0)
|
||||
)
|
||||
})
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return parseFloat(amount || 0).toLocaleString('ro-RO', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
}
|
||||
|
||||
const emitUpdate = () => {
|
||||
emit('update:modelValue', { ...props.modelValue })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tva-fixed-fields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tva-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tva-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--surface-ground);
|
||||
border: 1px solid var(--surface-border);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tva-field.has-value {
|
||||
background: var(--green-50);
|
||||
border-color: var(--green-200);
|
||||
}
|
||||
|
||||
.tva-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tva-code {
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color);
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.percent-dropdown {
|
||||
flex: 1;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.percent-dropdown :deep(.p-dropdown) {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amount-input :deep(.p-inputnumber-input) {
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Total row spans full width */
|
||||
.tva-total {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
border-top: 2px dashed var(--surface-border);
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Responsive - 3 columns on wider screens */
|
||||
@media (min-width: 768px) {
|
||||
.tva-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Stack on mobile */
|
||||
@media (max-width: 480px) {
|
||||
.tva-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
[data-theme="dark"] .tva-field.has-value {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: var(--green-700);
|
||||
}
|
||||
</style>
|
||||
1115
src/modules/data-entry/components/receipts/UnifiedReceiptForm.vue
Normal file
1115
src/modules/data-entry/components/receipts/UnifiedReceiptForm.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user