feat: Migrate to ultrathin monolith architecture
Consolidate 3 separate applications (reports-app, data-entry-app, telegram-bot) into a unified
architecture with single backend and frontend:
Backend Changes:
- Unified FastAPI backend at backend/ with modular structure
- Modules: reports, data_entry, telegram in backend/modules/
- Centralized config.py and main.py with all routers registered
- Single worker mode (--workers 1) for Telegram bot compatibility
- Shared Oracle connection pool and JWT authentication
- Unified requirements.txt and environment configuration
Frontend Changes:
- Single Vue.js SPA with module-based routing
- Unified frontend at src/ with modules in src/modules/{reports,data-entry}/
- Shared components and stores in src/shared/
- Error boundaries for module isolation
- Dual API proxy in Vite for module communication
Infrastructure:
- New unified startup scripts: start-prod.sh, start-test.sh, start-backend.sh
- Environment templates: .env.dev.example, .env.test.example, .env.prod.example
- Updated deployment scripts for Windows IIS
- Simplified SSH tunnel management
Documentation:
- Comprehensive CLAUDE.md with architecture overview
- Module-specific docs in docs/{data-entry,telegram}/
- Architecture decision records in docs/ARCHITECTURE-DECISIONS.md
- Deployment guides consolidated in deployment/windows/docs/
This migration reduces complexity, improves maintainability, and enables easier
deployment while maintaining all existing functionality.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -52,9 +52,9 @@ import axios from 'axios'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// API service for auth (uses reports API)
|
||||
// API service for auth and shared endpoints (unified backend)
|
||||
const authApi = axios.create({
|
||||
baseURL: '/api/reports',
|
||||
baseURL: import.meta.env.BASE_URL + 'api',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
|
||||
334
src/assets/css/data-entry.css
Normal file
334
src/assets/css/data-entry.css
Normal file
@@ -0,0 +1,334 @@
|
||||
/* Global styles for Data Entry App */
|
||||
|
||||
/* Import shared layout styles - COMMENTED OUT: paths don't exist in unified app */
|
||||
/* @import '../../../../../shared/frontend/styles/layout/header.css'; */
|
||||
/* @import '../../../../../shared/frontend/styles/layout/navigation.css'; */
|
||||
|
||||
:root {
|
||||
/* Layout variables */
|
||||
--header-height: 60px;
|
||||
--sidebar-width: 280px;
|
||||
--z-header: 100;
|
||||
--z-modal: 1000;
|
||||
--z-modal-backdrop: 999;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
|
||||
/* Typography */
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
|
||||
/* Radius */
|
||||
--radius-md: 6px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 24px;
|
||||
|
||||
/* Colors - Primary palette (matching reports-app) */
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-dark: #1d4ed8;
|
||||
--color-primary-light: #3b82f6;
|
||||
|
||||
/* Compatibility aliases */
|
||||
--primary-color: var(--color-primary);
|
||||
--text-color: #111827;
|
||||
--text-color-secondary: #6b7280;
|
||||
|
||||
/* Surface colors for PrimeVue */
|
||||
--surface-0: #ffffff;
|
||||
--surface-50: #f8fafc;
|
||||
--surface-100: #f1f5f9;
|
||||
--surface-200: #e2e8f0;
|
||||
|
||||
/* Red color palette for errors */
|
||||
--red-50: #fef2f2;
|
||||
--red-200: #fecaca;
|
||||
--red-800: #991b1b;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.roa-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.roa-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.roa-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Form styles */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-field .p-inputtext,
|
||||
.form-field .p-dropdown,
|
||||
.form-field .p-calendar,
|
||||
.form-field .p-inputnumber {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-field-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.status-approved {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.status-synced {
|
||||
background-color: #e0f2f1;
|
||||
color: #00796b;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.data-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-header {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-thead > tr > th {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Button groups */
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Upload area */
|
||||
.upload-area {
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #667eea;
|
||||
background-color: #f8f9ff;
|
||||
}
|
||||
|
||||
.upload-area.has-files {
|
||||
border-style: solid;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
/* Image preview */
|
||||
.image-preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.image-preview-item {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.image-preview-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-preview-item .remove-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Accounting entries table */
|
||||
.entries-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.entries-table th,
|
||||
.entries-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.entries-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.entries-table .debit {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.entries-table .credit {
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
/* Stats cards */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-card .stat-label {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
color: #ddd;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (max-width: 768px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button-group .p-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import ToastService from 'primevue/toastservice'
|
||||
import ConfirmationService from 'primevue/confirmationservice'
|
||||
import Tooltip from 'primevue/tooltip'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
@@ -42,6 +43,9 @@ import 'primevue/resources/themes/saga-blue/theme.css'
|
||||
import 'primevue/resources/primevue.min.css'
|
||||
import 'primeicons/primeicons.css'
|
||||
|
||||
// Data-Entry specific CSS (original styling)
|
||||
import './assets/css/data-entry.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// Pinia store
|
||||
@@ -55,6 +59,9 @@ app.use(PrimeVue, { ripple: true })
|
||||
app.use(ToastService)
|
||||
app.use(ConfirmationService)
|
||||
|
||||
// Register PrimeVue directives
|
||||
app.directive('tooltip', Tooltip)
|
||||
|
||||
// Register PrimeVue components globally
|
||||
app.component('Button', Button)
|
||||
app.component('InputText', InputText)
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
rounded
|
||||
size="small"
|
||||
@click="$emit('collapse')"
|
||||
v-tooltip="'Minimizeaza'"
|
||||
class="collapse-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -29,21 +29,6 @@
|
||||
<i class="pi pi-check-circle" style="font-size: 1.75rem; color: #22c55e;"></i>
|
||||
<p class="file-name">{{ selectedFile.name }}</p>
|
||||
<p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
|
||||
<div class="file-actions">
|
||||
<Button
|
||||
label="Schimba"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
@click.stop="triggerFileInput"
|
||||
/>
|
||||
<Button
|
||||
label="Proceseaza OCR"
|
||||
icon="pi pi-cog"
|
||||
size="small"
|
||||
@click.stop="processOCR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
@@ -58,6 +43,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons (below dropzone) -->
|
||||
<div v-if="selectedFile && !processing" class="action-buttons">
|
||||
<Button
|
||||
label="Schimba"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
@click="triggerFileInput"
|
||||
/>
|
||||
<Button
|
||||
label="Proceseaza OCR"
|
||||
icon="pi pi-cog"
|
||||
size="small"
|
||||
@click="processOCR"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- OCR Error Message -->
|
||||
<Message v-if="error" severity="error" :closable="true" @close="error = null">
|
||||
{{ error }}
|
||||
@@ -133,8 +135,9 @@ const processOCR = async () => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', selectedFile.value)
|
||||
|
||||
// Don't set Content-Type header - let browser set it with boundary for multipart/form-data
|
||||
// The API interceptor will add Authorization header automatically
|
||||
const response = await api.post('/ocr/extract', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 60000, // 60 second timeout for OCR
|
||||
})
|
||||
|
||||
@@ -253,10 +256,12 @@ defineExpose({ reset, processOCR })
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
/* Action buttons (below dropzone) */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Processing state */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api/data-entry',
|
||||
baseURL: import.meta.env.BASE_URL + 'api/data-entry',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
@@ -11,14 +11,39 @@ api.interceptors.request.use((config) => {
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
|
||||
|
||||
// Add selected company header if available
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}')
|
||||
const selectedCompanyId = localStorage.getItem('selectedCompanyId') || user.companies?.[0]?.id
|
||||
const username = user.username
|
||||
|
||||
// Try to get selected company from saved company object first
|
||||
let selectedCompanyId = null
|
||||
if (username) {
|
||||
const savedCompany = localStorage.getItem(`selected_company_${username}`)
|
||||
if (savedCompany) {
|
||||
try {
|
||||
const company = JSON.parse(savedCompany)
|
||||
selectedCompanyId = company.id_firma
|
||||
} catch (e) {
|
||||
console.error('Failed to parse saved company:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to first company in user.companies if no saved company
|
||||
if (!selectedCompanyId) {
|
||||
selectedCompanyId = user.companies?.[0]
|
||||
}
|
||||
|
||||
if (selectedCompanyId) {
|
||||
config.headers['X-Selected-Company'] = selectedCompanyId
|
||||
}
|
||||
|
||||
|
||||
// For FormData uploads, remove Content-Type header to let browser set it with boundary
|
||||
if (config.data instanceof FormData) {
|
||||
delete config.headers['Content-Type']
|
||||
}
|
||||
|
||||
return config
|
||||
})
|
||||
|
||||
@@ -31,7 +56,7 @@ api.interceptors.response.use(
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user')
|
||||
window.location.href = '/login'
|
||||
window.location.href = import.meta.env.BASE_URL + 'login'
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
@@ -253,12 +253,13 @@ export const useReceiptsStore = defineStore('receipts', {
|
||||
},
|
||||
|
||||
getAttachmentUrl(attachmentId) {
|
||||
return `/api/receipts/attachments/${attachmentId}/download`
|
||||
return `/api/data-entry/receipts/attachments/${attachmentId}/download`
|
||||
},
|
||||
|
||||
async fetchAttachmentBlob(attachmentId) {
|
||||
try {
|
||||
const response = await api.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
// Use apiClient directly - attachments endpoints are at /api/receipts/attachments, not /api/receipts/receipts/attachments
|
||||
const response = await apiClient.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
return URL.createObjectURL(response.data)
|
||||
@@ -270,7 +271,8 @@ export const useReceiptsStore = defineStore('receipts', {
|
||||
|
||||
async downloadAttachment(attachmentId, filename) {
|
||||
try {
|
||||
const response = await api.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
// Use apiClient directly - attachments endpoints are at /api/receipts/attachments, not /api/receipts/receipts/attachments
|
||||
const response = await apiClient.get(`/receipts/attachments/${attachmentId}/download`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
// Create download link
|
||||
@@ -378,7 +380,8 @@ export const useReceiptsStore = defineStore('receipts', {
|
||||
|
||||
async searchSupplier(fiscalCode) {
|
||||
try {
|
||||
const response = await api.get('/nomenclature/suppliers/search', {
|
||||
// Use apiClient directly (not wrapped) - nomenclature endpoints are at /api/nomenclature, not /api/receipts
|
||||
const response = await apiClient.get('/nomenclature/suppliers/search', {
|
||||
params: { fiscal_code: fiscalCode },
|
||||
})
|
||||
return response.data
|
||||
@@ -390,7 +393,8 @@ export const useReceiptsStore = defineStore('receipts', {
|
||||
|
||||
async createLocalSupplier(data) {
|
||||
try {
|
||||
const response = await api.post('/nomenclature/suppliers/local', data)
|
||||
// Use apiClient directly (not wrapped) - nomenclature endpoints are at /api/nomenclature, not /api/receipts
|
||||
const response = await apiClient.post('/nomenclature/suppliers/local', data)
|
||||
// Add to local partners list
|
||||
this.partners.push({
|
||||
id: response.data.id,
|
||||
|
||||
@@ -96,7 +96,6 @@
|
||||
size="small"
|
||||
class="download-btn"
|
||||
@click="downloadAttachment(att)"
|
||||
v-tooltip.top="'Descarca'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,7 +176,6 @@
|
||||
size="small"
|
||||
:loading="ocrRescanningId === att.id"
|
||||
@click="rescanAttachmentOCR(att)"
|
||||
v-tooltip.top="'Rescanare OCR'"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-download"
|
||||
@@ -185,7 +183,6 @@
|
||||
rounded
|
||||
size="small"
|
||||
@click="downloadAttachment(att)"
|
||||
v-tooltip.top="'Descarca'"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
@@ -193,7 +190,6 @@
|
||||
rounded
|
||||
size="small"
|
||||
@click="removeExistingAttachment(att.id)"
|
||||
v-tooltip.top="'Sterge'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -321,7 +317,6 @@
|
||||
v-if="directionAutoDetected"
|
||||
severity="info"
|
||||
value="Auto"
|
||||
v-tooltip="directionAutoReason"
|
||||
class="auto-tag"
|
||||
/>
|
||||
</div>
|
||||
@@ -529,7 +524,7 @@
|
||||
icon="pi pi-arrow-left"
|
||||
label="Inapoi"
|
||||
severity="secondary"
|
||||
@click="$router.push('/')"
|
||||
@click="$router.push('/data-entry')"
|
||||
/>
|
||||
|
||||
<!-- View mode buttons -->
|
||||
@@ -538,7 +533,7 @@
|
||||
v-if="receipt?.status === 'draft' || receipt?.status === 'rejected'"
|
||||
icon="pi pi-pencil"
|
||||
label="Editeaza"
|
||||
@click="$router.push(`/receipt/${receipt.id}/edit`)"
|
||||
@click="$router.push(`/data-entry/${receipt.id}/edit`)"
|
||||
/>
|
||||
<Button
|
||||
v-if="receipt?.status === 'draft'"
|
||||
@@ -909,7 +904,7 @@ const loadReceipt = async () => {
|
||||
detail: 'Nu s-a putut incarca bonul',
|
||||
life: 5000,
|
||||
})
|
||||
router.push('/')
|
||||
router.push('/data-entry')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1769,7 +1764,7 @@ const saveReceipt = async () => {
|
||||
life: 3000,
|
||||
})
|
||||
|
||||
router.push(`/receipt/${savedReceipt.id}`)
|
||||
router.push(`/data-entry/${savedReceipt.id}`)
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
@@ -1802,7 +1797,7 @@ const submitForReview = async () => {
|
||||
detail: 'Bonul a fost trimis spre aprobare',
|
||||
life: 3000,
|
||||
})
|
||||
router.push('/')
|
||||
router.push('/data-entry')
|
||||
} else {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
|
||||
@@ -29,68 +29,122 @@
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- Main Card -->
|
||||
<!-- Page Header (centered, no icon) -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Lista Bonuri Fiscale</h1>
|
||||
</div>
|
||||
|
||||
<!-- Main Card -->
|
||||
<div class="roa-card">
|
||||
<div class="roa-card-header">
|
||||
<h2 class="roa-card-title">
|
||||
<i class="pi pi-list"></i>
|
||||
Lista Bonuri Fiscale
|
||||
</h2>
|
||||
<!-- Status Filters Row (desktop only - mobile uses dropdown) -->
|
||||
<div class="status-actions-row" v-if="stats && !isMobile">
|
||||
<div class="status-chips">
|
||||
<span
|
||||
class="status-chip"
|
||||
:class="{ active: !filters.status }"
|
||||
@click="filterByStatus(null)"
|
||||
>
|
||||
Toate <Badge :value="stats.total?.count || 0" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-draft"
|
||||
:class="{ active: filters.status === 'draft' }"
|
||||
@click="filterByStatus('draft')"
|
||||
>
|
||||
Ciorne <Badge :value="stats.draft?.count || 0" severity="info" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-pending"
|
||||
:class="{ active: filters.status === 'pending_review' }"
|
||||
@click="filterByStatus('pending_review')"
|
||||
>
|
||||
În așteptare <Badge :value="stats.pending_review?.count || 0" severity="warning" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-approved"
|
||||
:class="{ active: filters.status === 'approved' }"
|
||||
@click="filterByStatus('approved')"
|
||||
>
|
||||
Validate <Badge :value="stats.approved?.count || 0" severity="success" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-rejected"
|
||||
:class="{ active: filters.status === 'rejected' }"
|
||||
@click="filterByStatus('rejected')"
|
||||
>
|
||||
Respinse <Badge :value="stats.rejected?.count || 0" severity="danger" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Bon Nou Button (desktop only) -->
|
||||
<Button
|
||||
v-if="!isMobile"
|
||||
label="Bon Nou"
|
||||
icon="pi pi-plus"
|
||||
size="small"
|
||||
@click="$router.push('/create')"
|
||||
severity="success"
|
||||
raised
|
||||
@click="goToCreate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Status Filters Row -->
|
||||
<div class="status-row" v-if="stats">
|
||||
<span
|
||||
class="status-chip"
|
||||
:class="{ active: !filters.status }"
|
||||
@click="filterByStatus(null)"
|
||||
>
|
||||
Toate <Badge :value="stats.total?.count || 0" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-draft"
|
||||
:class="{ active: filters.status === 'draft' }"
|
||||
@click="filterByStatus('draft')"
|
||||
>
|
||||
Ciorne <Badge :value="stats.draft?.count || 0" severity="info" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-pending"
|
||||
:class="{ active: filters.status === 'pending_review' }"
|
||||
@click="filterByStatus('pending_review')"
|
||||
>
|
||||
În așteptare <Badge :value="stats.pending_review?.count || 0" severity="warning" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-approved"
|
||||
:class="{ active: filters.status === 'approved' }"
|
||||
@click="filterByStatus('approved')"
|
||||
>
|
||||
Validate <Badge :value="stats.approved?.count || 0" severity="success" />
|
||||
</span>
|
||||
<span
|
||||
class="status-chip status-rejected"
|
||||
:class="{ active: filters.status === 'rejected' }"
|
||||
@click="filterByStatus('rejected')"
|
||||
>
|
||||
Respinse <Badge :value="stats.rejected?.count || 0" severity="danger" />
|
||||
</span>
|
||||
<!-- Mobile Toolbar (action buttons + Bon Nou) -->
|
||||
<div v-if="isMobile" class="mobile-toolbar-container">
|
||||
<div class="mobile-toolbar-buttons">
|
||||
<Button
|
||||
icon="pi pi-filter"
|
||||
label="Filtre"
|
||||
:class="{ 'filter-active': hasActiveFilters }"
|
||||
severity="secondary"
|
||||
outlined
|
||||
size="small"
|
||||
@click="showFilters = !showFilters"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
label="Resetează"
|
||||
severity="secondary"
|
||||
outlined
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="clearFilters"
|
||||
/>
|
||||
<Button
|
||||
label="Bon Nou"
|
||||
icon="pi pi-plus"
|
||||
severity="success"
|
||||
size="small"
|
||||
raised
|
||||
@click="goToCreate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filters Row -->
|
||||
<div class="filters-row">
|
||||
<div v-if="!isMobile || showFilters" class="filters-row">
|
||||
<!-- Mobile: Status Dropdown (instead of chips) -->
|
||||
<Dropdown
|
||||
v-if="isMobile"
|
||||
v-model="filters.status"
|
||||
:options="statusOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Status"
|
||||
class="filter-status"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
|
||||
<InputText
|
||||
v-model="filters.search"
|
||||
placeholder="Caută..."
|
||||
placeholder="Caută furnizor, CUI, nr. bon..."
|
||||
class="filter-search"
|
||||
@keyup.enter="onFilterChange"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
<i class="pi pi-search" />
|
||||
</template>
|
||||
</InputText>
|
||||
|
||||
<Dropdown
|
||||
v-model="filters.direction"
|
||||
:options="directionOptions"
|
||||
@@ -116,8 +170,26 @@
|
||||
class="filter-date"
|
||||
@date-select="onFilterChange"
|
||||
/>
|
||||
<Button icon="pi pi-search" label="Filtrează" size="small" @click="onFilterChange" />
|
||||
<Button icon="pi pi-refresh" label="Resetează" size="small" severity="secondary" @click="clearFilters" />
|
||||
|
||||
<!-- Desktop filter action buttons -->
|
||||
<div v-if="!isMobile" class="filter-actions">
|
||||
<Button
|
||||
icon="pi pi-search"
|
||||
label="Filtrează"
|
||||
severity="primary"
|
||||
outlined
|
||||
size="small"
|
||||
@click="onFilterChange"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
label="Resetează"
|
||||
severity="secondary"
|
||||
outlined
|
||||
size="small"
|
||||
@click="clearFilters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
@@ -343,7 +415,6 @@
|
||||
rounded
|
||||
size="small"
|
||||
@click="viewReceipt(data.id)"
|
||||
v-tooltip="'Vizualizează'"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
@@ -351,7 +422,6 @@
|
||||
rounded
|
||||
size="small"
|
||||
@click="toggleMenu($event, data)"
|
||||
v-tooltip="'Acțiuni'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -392,6 +462,7 @@ const bulkApproving = ref(false)
|
||||
|
||||
// Mobile detection
|
||||
const isMobile = ref(window.innerWidth < 768)
|
||||
const showFilters = ref(false)
|
||||
const handleResize = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
@@ -469,11 +540,31 @@ const directionOptions = [
|
||||
{ value: 'incasare', label: 'Încasări' },
|
||||
]
|
||||
|
||||
// Status filter options (for mobile dropdown)
|
||||
const statusOptions = [
|
||||
{ value: null, label: 'Toate' },
|
||||
{ value: 'draft', label: 'Ciorne' },
|
||||
{ value: 'pending_review', label: 'În așteptare' },
|
||||
{ value: 'approved', label: 'Validate' },
|
||||
{ value: 'rejected', label: 'Respinse' },
|
||||
]
|
||||
|
||||
const receipts = computed(() => store.receipts)
|
||||
const loading = computed(() => store.loading)
|
||||
const pagination = computed(() => store.pagination)
|
||||
const stats = computed(() => store.stats)
|
||||
|
||||
// Check if any filters are active (for mobile filter indicator)
|
||||
const hasActiveFilters = computed(() => {
|
||||
return (
|
||||
filters.value.status !== null ||
|
||||
filters.value.search !== '' ||
|
||||
filters.value.direction !== null ||
|
||||
filters.value.dateFrom !== null ||
|
||||
filters.value.dateTo !== null
|
||||
)
|
||||
})
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
@@ -570,6 +661,18 @@ const clearFilters = async () => {
|
||||
await store.fetchReceipts()
|
||||
}
|
||||
|
||||
// Refresh data (for mobile toolbar)
|
||||
const refreshData = async () => {
|
||||
await store.fetchReceipts()
|
||||
await store.fetchStats()
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Actualizare reușită',
|
||||
detail: 'Datele au fost actualizate',
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
|
||||
const onPageChange = async (event) => {
|
||||
selectedReceipts.value = [] // Clear selection on page change
|
||||
store.setPage(event.page + 1)
|
||||
@@ -591,12 +694,19 @@ const nextPage = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const goToCreate = () => {
|
||||
console.log('[ReceiptsList] Navigating to create...')
|
||||
router.push('/data-entry/create').catch(err => {
|
||||
console.error('[ReceiptsList] Navigation error:', err)
|
||||
})
|
||||
}
|
||||
|
||||
const viewReceipt = (id) => {
|
||||
router.push(`/receipt/${id}`)
|
||||
router.push(`/data-entry/${id}`)
|
||||
}
|
||||
|
||||
const editReceipt = (id) => {
|
||||
router.push(`/receipt/${id}/edit`)
|
||||
router.push(`/data-entry/${id}/edit`)
|
||||
}
|
||||
|
||||
const confirmDelete = (receipt) => {
|
||||
@@ -830,14 +940,23 @@ const approveSelected = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Status Filters Row */
|
||||
.status-row {
|
||||
/* Status Filters + Action Button Row */
|
||||
.status-actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status-chips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
@@ -901,16 +1020,26 @@ const approveSelected = async () => {
|
||||
}
|
||||
|
||||
.filter-search {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
flex: 1 1 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.filter-date {
|
||||
width: 120px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.filter-direction {
|
||||
width: 100px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.filter-status {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Compact DataTable */
|
||||
@@ -939,20 +1068,23 @@ const approveSelected = async () => {
|
||||
.receipt-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.receipt-card {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 0.75rem;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.receipt-card:active {
|
||||
background: #f8fafc;
|
||||
transform: scale(0.99);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-row-1 {
|
||||
@@ -1091,20 +1223,84 @@ const approveSelected = async () => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
padding: 1rem 0 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile Toolbar */
|
||||
.mobile-toolbar-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mobile-toolbar-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Action buttons (Filtre, Resetează) - equal width */
|
||||
.mobile-toolbar-buttons .p-button-outlined {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Bon Nou button - highlighted, takes more space */
|
||||
.mobile-toolbar-buttons .p-button-success {
|
||||
flex: 1.2;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Active filter indicator */
|
||||
.filter-active {
|
||||
border-color: var(--primary-color, #2563eb) !important;
|
||||
background: rgba(37, 99, 235, 0.05) !important;
|
||||
color: var(--primary-color, #2563eb) !important;
|
||||
}
|
||||
|
||||
/* Force green background for Bon Nou button (desktop) */
|
||||
.status-actions-row .p-button.p-button-success {
|
||||
background: var(--green-600, #16a34a) !important;
|
||||
border-color: var(--green-600, #16a34a) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.status-actions-row .p-button.p-button-success:hover {
|
||||
background: var(--green-700, #15803d) !important;
|
||||
border-color: var(--green-700, #15803d) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
/* Status row mobile */
|
||||
.status-row {
|
||||
.receipts-list-view {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Status + Action Row mobile */
|
||||
.status-actions-row {
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-chips {
|
||||
width: 100%;
|
||||
gap: 0.25rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-actions-row .p-button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
@@ -1112,25 +1308,35 @@ const approveSelected = async () => {
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
/* Filters row mobile - grid layout */
|
||||
/* Filters row mobile - compact grid layout */
|
||||
.filters-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Search field - full width at top */
|
||||
.filters-row .filter-search {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.filter-search,
|
||||
/* Status dropdown - full width below search */
|
||||
.filters-row .filter-status {
|
||||
grid-column: 1 / -1;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Direction and dates - 2 columns */
|
||||
.filter-direction,
|
||||
.filter-date {
|
||||
width: 100% !important;
|
||||
min-width: unset !important;
|
||||
}
|
||||
|
||||
.filters-row .p-button {
|
||||
flex: 1;
|
||||
/* Remove desktop filter action buttons on mobile */
|
||||
.filter-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -137,6 +137,12 @@ const initializeInflowsChart = async () => {
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Double-check canvas is still available after nextTick
|
||||
if (!inflowsCanvas.value) {
|
||||
console.warn('[CashFlowMetricCard] Inflows canvas ref not available after nextTick');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = inflowsCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
@@ -341,6 +347,12 @@ const initializeOutflowsChart = async () => {
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Double-check canvas is still available after nextTick
|
||||
if (!outflowsCanvas.value) {
|
||||
console.warn('[CashFlowMetricCard] Outflows canvas ref not available after nextTick');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = outflowsCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
|
||||
@@ -193,6 +193,12 @@ const initializeChart = async () => {
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Double-check canvas is still available after nextTick
|
||||
if (!chartCanvas.value) {
|
||||
console.warn('[ClientiBalanceCard] Canvas ref not available after nextTick');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = chartCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
|
||||
@@ -193,6 +193,12 @@ const initializeChart = async () => {
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Double-check canvas is still available after nextTick
|
||||
if (!chartCanvas.value) {
|
||||
console.warn('[FurnizoriBalanceCard] Canvas ref not available after nextTick');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = chartCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api/reports',
|
||||
baseURL: import.meta.env.BASE_URL + 'api/reports',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
@@ -23,7 +23,7 @@ api.interceptors.response.use(
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user')
|
||||
window.location.href = '/login'
|
||||
window.location.href = import.meta.env.BASE_URL + 'login'
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
@@ -520,8 +520,8 @@ const loadBankAccounts = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const apiService = (await import("../services/api")).apiService;
|
||||
const response = await api.get("/treasury/bank-cash-accounts", {
|
||||
const apiService = (await import("../services/api")).default;
|
||||
const response = await apiService.get("/treasury/bank-cash-accounts", {
|
||||
params: {
|
||||
company: companyStore.selectedCompany.id_firma,
|
||||
register_type: filters.value.registerType,
|
||||
@@ -673,8 +673,8 @@ const fetchAllData = async () => {
|
||||
params.bank_account = filters.value.bankAccount;
|
||||
}
|
||||
|
||||
const apiService = (await import("../services/api")).apiService;
|
||||
const response = await api.get("/treasury/bank-cash-register", {
|
||||
const apiService = (await import("../services/api")).default;
|
||||
const response = await apiService.get("/treasury/bank-cash-register", {
|
||||
params,
|
||||
});
|
||||
|
||||
|
||||
@@ -13,9 +13,9 @@ import LoginView from '@shared/components/LoginView.vue'
|
||||
import { createAuthStore } from '@shared/stores/auth.js'
|
||||
import axios from 'axios'
|
||||
|
||||
// API service for auth (uses reports API)
|
||||
// API service for auth and shared endpoints (unified backend)
|
||||
const authApi = axios.create({
|
||||
baseURL: '/api/reports',
|
||||
baseURL: import.meta.env.BASE_URL + 'api',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user