romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add PWA support and consolidate CSS design system

Browse Source 
- Add PWA manifest, icons (192x192, 512x512), and service worker
- Register service worker in index.html with Apple mobile web app support
- Consolidate CSS variables and design tokens documentation
- Update PrimeVue overrides for consistent theming
- Refactor data-entry components to use shared CSS patterns
- Add frontend-style-auditor agent for style consistency checks
- Minor OCR validation and job worker improvements
- Update start-prod.sh configuration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-06 14:00:21 +00:00
parent b2fe26da3a
commit 1bb3a382de
33 changed files with 1846 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/modules/data-entry/views/receipts/ReceiptsListView.vue
View File

@@ -436,11 +436,12 @@
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'
import { useReceiptsStore } from '@data-entry/stores/receiptsStore'
import { useCompanyStore } from '@data-entry/stores/sharedStores'
import Menu from 'primevue/menu'
import Dialog from 'primevue/dialog'
import Textarea from 'primevue/textarea'
@@ -450,6 +451,7 @@ const router = useRouter()
const toast = useToast()
const confirm = useConfirm()
const store = useReceiptsStore()
const companyStore = useCompanyStore()
// Rejection dialog state
const rejectDialogVisible = ref(false)
@@ -477,6 +479,29 @@ onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
// Watch for company changes and reload data
watch(
() => companyStore.selectedCompany,
async (newCompany, oldCompany) => {
// Skip initial load (handled by onMounted) and same company
if (!oldCompany || !newCompany) return
if (newCompany.id_firma === oldCompany.id_firma) return
console.log('[ReceiptsList] Company changed, reloading data...')
// Reset filters and pagination when company changes
filters.value = {
status: null,
search: '',
direction: null,
dateFrom: null,
dateTo: null,
}
store.clearFilters()
await store.fetchStats()
await store.fetchReceipts()
}
)
// Mobile context menu
const menuRef = ref()
const selectedReceipt = ref(null)
@@ -966,7 +991,7 @@ const approveSelected = async () => {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
@@ -974,12 +999,12 @@ const approveSelected = async () => {
}
.status-chip:hover {
background: #f1f5f9;
background: var(--surface-hover);
}
.status-chip.active {
background: #e2e8f0;
color: #1e293b;
background: var(--surface-200);
color: var(--text-color);
font-weight: 600;
position: relative;
}
@@ -991,22 +1016,22 @@ const approveSelected = async () => {
left: 0;
right: 0;
height: 3px;
background: #1e293b;
background: var(--text-color);
border-radius: 2px;
}
/* Color accents for active status */
.status-chip.status-draft.active { background: #dbeafe; color: #1d4ed8; }
.status-chip.status-draft.active::after { background: #1d4ed8; }
.status-chip.status-draft.active { background: var(--blue-100); color: var(--blue-700); }
.status-chip.status-draft.active::after { background: var(--blue-700); }
.status-chip.status-pending.active { background: #fef3c7; color: #b45309; }
.status-chip.status-pending.active::after { background: #d97706; }
.status-chip.status-pending.active { background: var(--yellow-100); color: var(--yellow-700); }
.status-chip.status-pending.active::after { background: var(--yellow-600); }
.status-chip.status-approved.active { background: #dcfce7; color: #15803d; }
.status-chip.status-approved.active::after { background: #16a34a; }
.status-chip.status-approved.active { background: var(--green-100); color: var(--green-700); }
.status-chip.status-approved.active::after { background: var(--green-600); }
.status-chip.status-rejected.active { background: #fee2e2; color: #b91c1c; }
.status-chip.status-rejected.active::after { background: #dc2626; }
.status-chip.status-rejected.active { background: var(--red-100); color: var(--red-700); }
.status-chip.status-rejected.active::after { background: var(--red-600); }
/* Search and Filters Row */
.filters-row {
@@ -1016,7 +1041,7 @@ const approveSelected = async () => {
flex-wrap: wrap;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--surface-border);
}
.filter-search {
@@ -1042,20 +1067,7 @@ const approveSelected = async () => {
margin-left: auto;
}
/* Compact DataTable */
.compact-table :deep(.p-datatable-tbody > tr > td) {
padding: 0.5rem 0.5rem;
font-size: 0.875rem;
}
.compact-table :deep(.p-datatable-thead > tr > th) {
padding: 0.5rem 0.5rem;
font-size: 0.8rem;
}
.compact-table :deep(.p-paginator) {
padding: 0.5rem;
}
/* Compact DataTable - styles moved to vendor/primevue-overrides.css */
/* Action buttons - always on same line */
.compact-table .button-group {
@@ -1072,17 +1084,17 @@ const approveSelected = async () => {
}
.receipt-card {
background: white;
background: var(--surface-card);
border-radius: 8px;
padding: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-sm);
cursor: pointer;
border: 1px solid #e2e8f0;
border: 1px solid var(--surface-border);
transition: all 0.2s ease;
}
.receipt-card:active {
background: #f8fafc;
background: var(--surface-ground);
transform: scale(0.99);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
@@ -1105,7 +1117,7 @@ const approveSelected = async () => {
.card-row-1 .partner {
font-weight: 600;
font-size: 0.875rem;
color: #1e293b;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1113,7 +1125,7 @@ const approveSelected = async () => {
.card-row-1 .cui {
font-size: 0.7rem;
color: #94a3b8;
color: var(--text-color-secondary);
}
.card-row-1 .amount-block {
@@ -1126,21 +1138,21 @@ const approveSelected = async () => {
.card-row-1 .amount {
font-weight: 700;
font-size: 0.875rem;
color: #0f172a;
color: var(--text-color);
}
.card-row-1 .amount-detail {
font-size: 0.875rem;
font-weight: 400;
color: #64748b;
color: var(--text-color-secondary);
}
.card-row-1 .amount-detail.tva {
color: #16a34a;
color: var(--green-600);
}
.card-row-1 .amount-detail.payment {
color: #7c3aed;
color: var(--purple-600);
}
.card-row-2 {
@@ -1148,12 +1160,12 @@ const approveSelected = async () => {
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: #64748b;
color: var(--text-color-secondary);
flex-wrap: wrap;
}
.card-row-2 .sep {
color: #cbd5e1;
color: var(--surface-border);
}
.card-row-2 .receipt-nr {
@@ -1161,12 +1173,12 @@ const approveSelected = async () => {
}
.card-row-2 .direction-out {
color: #dc2626;
color: var(--red-600);
font-weight: 500;
}
.card-row-2 .direction-in {
color: #16a34a;
color: var(--green-600);
font-weight: 500;
}
@@ -1175,12 +1187,12 @@ const approveSelected = async () => {
align-items: center;
gap: 0.375rem;
font-size: 0.7rem;
color: #94a3b8;
color: var(--text-color-secondary);
margin-top: 0.25rem;
}
.card-row-3 .sep {
color: #cbd5e1;
color: var(--surface-border);
}
.card-row-3 .created-by {
@@ -1192,7 +1204,7 @@ const approveSelected = async () => {
display: flex;
align-items: center;
gap: 0.125rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Small status badge for mobile cards */
@@ -1204,18 +1216,18 @@ const approveSelected = async () => {
text-transform: uppercase;
}
.status-badge-small.status-draft { background-color: #e3f2fd; color: #1976d2; }
.status-badge-small.status-pending { background-color: #fff3e0; color: #f57c00; }
.status-badge-small.status-approved { background-color: #e8f5e9; color: #388e3c; }
.status-badge-small.status-rejected { background-color: #ffebee; color: #d32f2f; }
.status-badge-small.status-synced { background-color: #e0f2f1; color: #00796b; }
.status-badge-small.status-draft { background-color: var(--blue-100); color: var(--blue-600); }
.status-badge-small.status-pending { background-color: var(--orange-100); color: var(--orange-600); }
.status-badge-small.status-approved { background-color: var(--green-100); color: var(--green-600); }
.status-badge-small.status-rejected { background-color: var(--red-100); color: var(--red-600); }
.status-badge-small.status-synced { background-color: var(--teal-100); color: var(--teal-600); }
/* Status text colors for mobile */
.status-text-draft { color: #1976d2; }
.status-text-pending_review { color: #f57c00; }
.status-text-approved { color: #388e3c; }
.status-text-rejected { color: #d32f2f; }
.status-text-synced { color: #00796b; }
.status-text-draft { color: var(--blue-600); }
.status-text-pending_review { color: var(--orange-600); }
.status-text-approved { color: var(--green-600); }
.status-text-rejected { color: var(--red-600); }
.status-text-synced { color: var(--teal-600); }
/* Mobile Pagination */
.mobile-pagination {
@@ -1230,7 +1242,7 @@ const approveSelected = async () => {
.page-info {
font-size: 0.875rem;
font-weight: 500;
color: #475569;
color: var(--text-color-secondary);
min-width: 60px;
text-align: center;
}
@@ -1349,18 +1361,15 @@ const approveSelected = async () => {
.reject-dialog-content p {
margin: 0;
color: #475569;
color: var(--text-color-secondary);
}
/* Text muted helper */
.text-muted {
color: #94a3b8;
color: var(--text-color-secondary);
}
/* Compact table adjustments for more columns */
.compact-table :deep(.p-datatable-wrapper) {
overflow-x: auto;
}
/* Compact table adjustments - styles moved to vendor/primevue-overrides.css */
/* Bulk Actions Bar */
.bulk-actions-bar {
@@ -1368,8 +1377,8 @@ const approveSelected = async () => {
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #bfdbfe;
background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
border: 1px solid var(--blue-200);
border-radius: 6px;
margin-bottom: 0.75rem;
}
@@ -1379,7 +1388,7 @@ const approveSelected = async () => {
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #1e40af;
color: var(--blue-700);
}
.selection-info i {