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

12
src/assets/css/components/buttons.css
View File

@@ -107,8 +107,8 @@
}
.btn-success:hover {
background: #047857;
border-color: #047857;
background: var(--green-700);
border-color: var(--green-700);
}
.btn-warning {
@@ -118,8 +118,8 @@
}
.btn-warning:hover {
background: #b45309;
border-color: #b45309;
background: var(--yellow-700);
border-color: var(--yellow-700);
}
.btn-error {
@@ -129,8 +129,8 @@
}
.btn-error:hover {
background: #b91c1c;
border-color: #b91c1c;
background: var(--red-700);
border-color: var(--red-700);
}
/* Button Shapes */

54
src/assets/css/components/cards.css
View File

@@ -1,9 +1,9 @@
/* Card Components - ROA2WEB */
/* Base Card Styles */
/* Base Card Styles - Dark mode compatible */
.card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card) !important;
border: 1px solid var(--surface-border);
border-radius: var(--card-radius);
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
@@ -17,8 +17,8 @@
.card-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--surface-border);
background: var(--surface-hover);
}
.card-body {
@@ -27,8 +27,8 @@
.card-footer {
padding: var(--space-lg);
border-top: 1px solid var(--color-border);
background: var(--color-bg-secondary);
border-top: 1px solid var(--surface-border);
background: var(--surface-hover);
}
/* Card Variants */
@@ -57,10 +57,10 @@
transform: translateY(-2px);
}
/* Stats Cards */
/* Stats Cards - Dark mode compatible */
.stats-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card) !important;
border: 1px solid var(--surface-border);
border-radius: var(--card-radius);
padding: var(--space-lg);
text-align: center;
@@ -124,8 +124,8 @@
/* KPI Cards */
.kpi-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--card-radius);
padding: var(--space-lg);
display: flex;
@@ -172,8 +172,8 @@
/* Action Cards */
.action-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--card-radius);
padding: var(--space-lg);
cursor: pointer;
@@ -209,8 +209,8 @@
/* Status Cards */
.status-card {
background: var(--color-bg);
border-left: 4px solid var(--color-border);
background: var(--surface-card);
border-left: 4px solid var(--surface-border);
border-radius: var(--card-radius);
padding: var(--space-md);
box-shadow: var(--shadow-sm);
@@ -218,22 +218,22 @@
.status-card.success {
border-left-color: var(--color-success);
background: #f0fdf4;
background: var(--green-50);
}
.status-card.warning {
border-left-color: var(--color-warning);
background: #fffbeb;
background: var(--yellow-50);
}
.status-card.error {
border-left-color: var(--color-error);
background: #fef2f2;
background: var(--red-50);
}
.status-card.info {
border-left-color: var(--color-info);
background: #f0f9ff;
background: var(--blue-50);
}
/* Company Banner Card */
@@ -262,8 +262,8 @@
/* Dashboard V2 Mini Cards */
.mini-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
padding: var(--space-sm);
text-align: center;
@@ -298,17 +298,17 @@
/* Heatmap Colors for Mini Cards */
.mini-card.heat-low {
background: #f0fdf4;
background: var(--green-50);
border-color: var(--color-success);
}
.mini-card.heat-medium {
background: #fffbeb;
background: var(--yellow-50);
border-color: var(--color-warning);
}
.mini-card.heat-high {
background: #fef2f2;
background: var(--red-50);
border-color: var(--color-error);
}
@@ -366,8 +366,8 @@
/* ===== Dashboard Metric Cards ===== */
.metric-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--card-radius);
padding: var(--card-padding, 1.5rem);
transition: all var(--transition-fast);

24
src/assets/css/components/stats.css
View File

@@ -278,7 +278,7 @@
/* Heat Map Colors for Mini Cards */
.mini-stat-card.heat-low {
background: #f0fdf4;
background: var(--green-50);
border-color: var(--color-success);
}
@@ -287,7 +287,7 @@
}
.mini-stat-card.heat-medium {
background: #fffbeb;
background: var(--yellow-50);
border-color: var(--color-warning);
}
@@ -296,7 +296,7 @@
}
.mini-stat-card.heat-high {
background: #fef2f2;
background: var(--red-50);
border-color: var(--color-error);
}
@@ -332,30 +332,30 @@
/* Stats Card Variants */
.stats-card.clients {
border-left-color: #3b82f6;
border-left-color: var(--blue-500);
}
.stats-card.clients .stats-card-header i {
color: #3b82f6;
background: #eff6ff;
color: var(--blue-500);
background: var(--blue-50);
}
.stats-card.suppliers {
border-left-color: #f59e0b;
border-left-color: var(--yellow-500);
}
.stats-card.suppliers .stats-card-header i {
color: #f59e0b;
background: #fffbeb;
color: var(--yellow-600);
background: var(--yellow-50);
}
.stats-card.treasury {
border-left-color: #10b981;
border-left-color: var(--green-500);
}
.stats-card.treasury .stats-card-header i {
color: #10b981;
background: #ecfdf5;
color: var(--green-500);
background: var(--green-50);
}
/* Responsive Adjustments */

221
src/assets/css/core/variables.css
View File

@@ -74,6 +74,74 @@
--surface-900: #0f172a;
--surface-950: #020617;
/* Semantic surface tokens (PrimeVue-style) - CRITICAL for dark mode */
--surface-card: #ffffff;
--surface-ground: #f8fafc;
--surface-section: #ffffff;
--surface-hover: #f1f5f9;
--surface-border: #e2e8f0;
--surface-overlay: #ffffff;
/* Primary color scale */
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-200: #bfdbfe;
--primary-300: #93c5fd;
--primary-400: #60a5fa;
--primary-500: #3b82f6;
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--primary-800: #1e40af;
--primary-900: #1e3a8a;
/* Green color scale (success) */
--green-50: #f0fdf4;
--green-100: #dcfce7;
--green-200: #bbf7d0;
--green-300: #86efac;
--green-400: #4ade80;
--green-500: #22c55e;
--green-600: #16a34a;
--green-700: #15803d;
--green-800: #166534;
--green-900: #14532d;
/* Yellow color scale (warning) */
--yellow-50: #fefce8;
--yellow-100: #fef9c3;
--yellow-200: #fef08a;
--yellow-300: #fde047;
--yellow-400: #facc15;
--yellow-500: #eab308;
--yellow-600: #ca8a04;
--yellow-700: #a16207;
--yellow-800: #854d0e;
--yellow-900: #713f12;
/* Blue color scale (info) */
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
/* Gray color scale */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Red color palette for errors */
--red-50: #fef2f2;
--red-100: #fee2e2;
@@ -152,33 +220,154 @@
--breakpoint-wide: 1400px;
}
/* Dark mode support (for future enhancement) */
/* Manual dark theme via data-theme attribute (highest priority) */
[data-theme="dark"] {
/* Text colors - inverted for dark mode */
--color-text: #f9fafb;
--color-text-secondary: #d1d5db;
--color-text-muted: #9ca3af;
--text-color: #f9fafb;
--text-color-secondary: #d1d5db;
/* Background colors */
--color-bg: #111827;
--color-bg-secondary: #1f2937;
--color-bg-muted: #374151;
/* Border colors */
--color-border: #374151;
--color-border-light: #4b5563;
--color-border-dark: #6b7280;
/* Surface numeric scale - inverted for dark mode */
--surface-0: #0f172a;
--surface-50: #1e293b;
--surface-100: #334155;
--surface-200: #475569;
--surface-300: #64748b;
--surface-400: #94a3b8;
--surface-500: #cbd5e1;
--surface-600: #e2e8f0;
--surface-700: #f1f5f9;
--surface-800: #f8fafc;
--surface-900: #ffffff;
--surface-950: #ffffff;
/* Semantic surface tokens - CRITICAL for dark mode components */
--surface-card: #1e293b;
--surface-ground: #0f172a;
--surface-section: #1e293b;
--surface-hover: #334155;
--surface-border: #475569;
--surface-overlay: #1e293b;
/* Gray scale - inverted for dark mode */
--gray-50: #111827;
--gray-100: #1f2937;
--gray-200: #374151;
--gray-300: #4b5563;
--gray-400: #6b7280;
--gray-500: #9ca3af;
--gray-600: #d1d5db;
--gray-700: #e5e7eb;
--gray-800: #f3f4f6;
--gray-900: #f9fafb;
/* Status colors - slightly adjusted for dark backgrounds */
--green-50: #052e16;
--green-100: #14532d;
--green-800: #86efac;
--green-900: #bbf7d0;
--yellow-50: #422006;
--yellow-100: #713f12;
--yellow-800: #fde047;
--yellow-900: #fef08a;
--red-50: #450a0a;
--red-100: #7f1d1d;
--red-800: #fca5a5;
--red-900: #fecaca;
--blue-50: #1e3a8a;
--blue-100: #1e40af;
--blue-800: #93c5fd;
--blue-900: #bfdbfe;
}
/* System preference dark mode (fallback when no manual theme set) */
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme]) {
/* Text colors - inverted for dark mode */
--color-text: #f9fafb;
--color-text-secondary: #d1d5db;
--color-text-muted: #9ca3af;
--text-color: #f9fafb;
--text-color-secondary: #d1d5db;
/* Background colors */
--color-bg: #111827;
--color-bg-secondary: #1f2937;
--color-bg-muted: #374151;
/* Border colors */
--color-border: #374151;
--color-border-light: #4b5563;
--color-border-dark: #6b7280;
/* Surface colors for dark mode */
--surface-0: #ffffff;
--surface-50: #020617;
--surface-100: #0f172a;
--surface-200: #1e293b;
--surface-300: #334155;
--surface-400: #475569;
--surface-500: #64748b;
--surface-600: #94a3b8;
--surface-700: #cbd5e1;
--surface-800: #e2e8f0;
--surface-900: #f1f5f9;
--surface-950: #f8fafc;
/* Surface numeric scale - inverted for dark mode */
--surface-0: #0f172a;
--surface-50: #1e293b;
--surface-100: #334155;
--surface-200: #475569;
--surface-300: #64748b;
--surface-400: #94a3b8;
--surface-500: #cbd5e1;
--surface-600: #e2e8f0;
--surface-700: #f1f5f9;
--surface-800: #f8fafc;
--surface-900: #ffffff;
--surface-950: #ffffff;
/* Red colors remain the same in dark mode */
/* Semantic surface tokens - CRITICAL for dark mode components */
--surface-card: #1e293b;
--surface-ground: #0f172a;
--surface-section: #1e293b;
--surface-hover: #334155;
--surface-border: #475569;
--surface-overlay: #1e293b;
/* Gray scale - inverted for dark mode */
--gray-50: #111827;
--gray-100: #1f2937;
--gray-200: #374151;
--gray-300: #4b5563;
--gray-400: #6b7280;
--gray-500: #9ca3af;
--gray-600: #d1d5db;
--gray-700: #e5e7eb;
--gray-800: #f3f4f6;
--gray-900: #f9fafb;
/* Status colors - slightly adjusted for dark backgrounds */
--green-50: #052e16;
--green-100: #14532d;
--green-800: #86efac;
--green-900: #bbf7d0;
--yellow-50: #422006;
--yellow-100: #713f12;
--yellow-800: #fde047;
--yellow-900: #fef08a;
--red-50: #450a0a;
--red-100: #7f1d1d;
--red-800: #fca5a5;
--red-900: #fecaca;
--blue-50: #1e3a8a;
--blue-100: #1e40af;
--blue-800: #93c5fd;
--blue-900: #bfdbfe;
}
}

123
src/assets/css/data-entry.css
View File

@@ -4,59 +4,27 @@
/* @import '../../../../../shared/frontend/styles/layout/header.css'; */
/* @import '../../../../../shared/frontend/styles/layout/navigation.css'; */
/* Note: Color variables are defined in core/variables.css with dark mode support */
/* This file only overrides layout-specific variables for data-entry module */
:root {
/* Layout variables */
/* Layout variables (data-entry specific) */
--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;
/* Dark mode overrides for Data Entry module */
/* These must be here because data-entry.css is loaded before main.css */
[data-theme="dark"] {
--surface-card: #1e293b;
--surface-ground: #0f172a;
--surface-border: #475569;
--surface-hover: #334155;
--text-color: #f9fafb;
--text-color-secondary: #94a3b8;
}
* {
@@ -70,13 +38,14 @@ body {
-moz-osx-font-smoothing: grayscale;
}
/* Card styles */
/* Card styles - Dark mode compatible */
.roa-card {
background: white;
background: var(--surface-card) !important;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--surface-border);
}
.roa-card-header {
@@ -85,13 +54,13 @@ body {
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--surface-border);
}
.roa-card-title {
font-size: 1.25rem;
font-weight: 600;
color: #333;
color: var(--text-color);
margin: 0;
display: flex;
align-items: center;
@@ -113,7 +82,7 @@ body {
.form-field label {
font-weight: 500;
color: #555;
color: var(--text-color-secondary);
font-size: 0.9rem;
}
@@ -138,28 +107,28 @@ body {
}
.status-draft {
background-color: #e3f2fd;
color: #1976d2;
background-color: var(--blue-50);
color: var(--blue-600);
}
.status-pending {
background-color: #fff3e0;
color: #f57c00;
background-color: var(--yellow-50);
color: var(--yellow-700);
}
.status-approved {
background-color: #e8f5e9;
color: #388e3c;
background-color: var(--green-50);
color: var(--green-600);
}
.status-rejected {
background-color: #ffebee;
color: #d32f2f;
background-color: var(--red-50);
color: var(--red-600);
}
.status-synced {
background-color: #e0f2f1;
color: #00796b;
background-color: var(--green-50);
color: var(--green-700);
}
/* Table styles */
@@ -174,8 +143,8 @@ body {
}
.p-datatable .p-datatable-thead > tr > th {
background: #f8f9fa;
color: #495057;
background: var(--surface-hover);
color: var(--text-color);
font-weight: 600;
}
@@ -188,7 +157,7 @@ body {
/* Upload area */
.upload-area {
border: 2px dashed #ddd;
border: 2px dashed var(--surface-border);
border-radius: 12px;
padding: 2rem;
text-align: center;
@@ -197,13 +166,13 @@ body {
}
.upload-area:hover {
border-color: #667eea;
background-color: #f8f9ff;
border-color: var(--primary-500);
background-color: var(--surface-hover);
}
.upload-area.has-files {
border-style: solid;
border-color: #667eea;
border-color: var(--primary-500);
}
/* Image preview */
@@ -244,21 +213,21 @@ body {
.entries-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--surface-border);
}
.entries-table th {
background: #f8f9fa;
background: var(--surface-hover);
font-weight: 600;
color: #495057;
color: var(--text-color);
}
.entries-table .debit {
color: #d32f2f;
color: var(--red-600);
}
.entries-table .credit {
color: #388e3c;
color: var(--green-600);
}
/* Stats cards */
@@ -270,7 +239,7 @@ body {
}
.stat-card {
background: white;
background: var(--surface-card);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -280,11 +249,11 @@ body {
.stat-card .stat-value {
font-size: 2rem;
font-weight: 700;
color: #333;
color: var(--text-color);
}
.stat-card .stat-label {
color: #666;
color: var(--text-color-secondary);
font-size: 0.9rem;
margin-top: 0.25rem;
}
@@ -301,12 +270,12 @@ body {
.empty-state {
text-align: center;
padding: 3rem;
color: #666;
color: var(--text-color-secondary);
}
.empty-state i {
font-size: 4rem;
color: #ddd;
color: var(--surface-border);
margin-bottom: 1rem;
}

115
src/assets/css/vendor/primevue-overrides.css vendored
View File

@@ -80,17 +80,17 @@
transition: background-color var(--transition-fast) !important;
}
/* DataTable Striped Rows - Global Pattern */
/* DataTable Striped Rows - Global Pattern (Dark Mode Compatible) */
.p-datatable .p-datatable-tbody > tr:nth-child(odd) {
background-color: #ffffff !important;
background-color: var(--surface-card) !important;
}
.p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: #f8f9fa !important;
background-color: var(--surface-ground) !important;
}
.p-datatable .p-datatable-tbody > tr:hover {
background-color: #e3f2fd !important;
background-color: var(--surface-hover) !important;
cursor: pointer;
}
@@ -112,6 +112,7 @@
/* ===== Card ===== */
.p-card {
background: var(--surface-card) !important;
box-shadow: var(--shadow-sm) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--card-radius, 8px) !important;
@@ -125,6 +126,11 @@
.p-card .p-card-body {
padding: var(--space-lg) !important;
background: var(--surface-card) !important;
}
.p-card .p-card-content {
background: var(--surface-card) !important;
}
/* ===== Mobile Optimizations ===== */
@@ -136,3 +142,104 @@
font-size: 16px !important; /* Prevent iOS zoom */
}
}
/* ===== Compact DataTable (ReceiptsListView) ===== */
.compact-table .p-datatable-tbody > tr > td {
padding: 0.5rem 0.5rem;
font-size: 0.875rem;
}
.compact-table .p-datatable-thead > tr > th {
padding: 0.5rem 0.5rem;
font-size: 0.8rem;
}
.compact-table .p-paginator {
padding: 0.5rem;
}
.compact-table .p-datatable-wrapper {
overflow-x: auto;
}
/* ===== Receipt Form InputNumber (ReceiptCreateView) ===== */
.value-item-total .p-inputnumber {
width: 100% !important;
max-width: 130px !important;
}
.value-item-total .p-inputnumber-input {
width: 100% !important;
}
.payment-method-item .p-inputnumber {
width: 100% !important;
max-width: 110px !important;
}
.payment-method-item .p-inputnumber-input {
width: 100% !important;
}
.dropdown-payment {
width: 100% !important;
max-width: 190px !important;
}
.dropdown-payment .p-dropdown {
width: 100% !important;
}
.input-tva {
width: 110px !important;
}
.input-tva .p-inputnumber-input {
width: 110px !important;
}
/* ===== Receipt Form Mobile (ReceiptCreateView) ===== */
@media (max-width: 768px) {
.form-field .p-dropdown,
.form-field .p-autocomplete,
.form-field .p-calendar {
width: 100% !important;
}
}
/* ===== OCR Preview Mobile (OCRPreview) ===== */
@media (max-width: 768px) {
.preview-actions .p-button {
width: 100%;
}
}
/* ===== OCR Engine Selector (OCRUploadZone) ===== */
.engine-selector .p-dropdown-label {
padding: 0.5rem 0.75rem !important;
font-size: 0.875rem;
color: var(--text-color-secondary);
}
.engine-selector .p-dropdown-trigger {
width: 2rem !important;
}
/* ===== Table Card Striped Rows (InvoicesView) ===== */
/* Note: Uses design tokens for dark mode compatibility */
.table-card .p-datatable .p-datatable-tbody > tr {
transition: background-color 0.2s ease;
}
.table-card .p-datatable .p-datatable-tbody > tr:nth-child(odd) {
background-color: var(--surface-card, #ffffff);
}
.table-card .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: var(--surface-ground, #f8f9fa);
}
.table-card .p-datatable .p-datatable-tbody > tr:hover {
background-color: var(--surface-hover, #e3f2fd) !important;
cursor: pointer;
}

135
src/modules/data-entry/components/ocr/OCRPreview.vue
View File

@@ -2,7 +2,7 @@
<div class="ocr-preview">
<div class="preview-header">
<div class="header-left">
<i class="pi pi-check-circle" style="color: #22c55e; font-size: 1.25rem;"></i>
<i class="pi pi-check-circle" style="color: var(--green-500); font-size: 1.25rem;"></i>
<span class="title">Date extrase din imagine</span>
</div>
<div class="header-right">
@@ -319,8 +319,8 @@ const formatProcessingTime = (ms) => {
<style scoped>
.ocr-preview {
background: #f0fdf4;
border: 1px solid #86efac;
background: var(--green-50);
border: 1px solid var(--green-300);
border-radius: 12px;
margin: 1rem 0;
overflow: hidden;
@@ -331,8 +331,8 @@ const formatProcessingTime = (ms) => {
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #dcfce7;
border-bottom: 1px solid #86efac;
background: var(--green-100);
border-bottom: 1px solid var(--green-300);
}
.header-left {
@@ -343,7 +343,7 @@ const formatProcessingTime = (ms) => {
.title {
font-weight: 600;
color: #166534;
color: var(--green-800);
}
.header-right {
@@ -357,11 +357,11 @@ const formatProcessingTime = (ms) => {
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #166534;
color: var(--green-800);
}
.collapse-btn {
color: #166534 !important;
color: var(--green-800) !important;
}
.preview-content {
@@ -374,7 +374,7 @@ const formatProcessingTime = (ms) => {
margin-bottom: 0.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
border: 1px solid #bbf7d0;
border: 1px solid var(--green-200);
}
.ocr-section:last-of-type {
@@ -384,16 +384,16 @@ const formatProcessingTime = (ms) => {
.ocr-section-title {
font-size: 0.7rem;
font-weight: 700;
color: #166534;
color: var(--green-800);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
padding-bottom: 0.35rem;
border-bottom: 1px dashed #86efac;
border-bottom: 1px dashed var(--green-300);
}
.ocr-section-content {
color: #1e293b;
color: var(--text-color);
}
/* FURNIZOR section */
@@ -407,13 +407,13 @@ const formatProcessingTime = (ms) => {
.vendor-cui {
font-size: 0.85rem;
color: #475569;
color: var(--text-color-secondary);
margin-top: 0.15rem;
}
.vendor-address {
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
margin-top: 0.15rem;
}
@@ -428,19 +428,19 @@ const formatProcessingTime = (ms) => {
.client-cui {
font-size: 0.85rem;
color: #475569;
color: var(--text-color-secondary);
margin-top: 0.15rem;
}
.client-address {
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
margin-top: 0.15rem;
}
/* Placeholder when no data extracted */
.no-data {
color: #9ca3af;
color: var(--text-color-secondary);
font-style: italic;
}
@@ -454,20 +454,20 @@ const formatProcessingTime = (ms) => {
.doc-number {
font-weight: 500;
color: #334155;
color: var(--text-color);
}
.doc-date {
display: flex;
align-items: center;
gap: 0.35rem;
color: #475569;
color: var(--text-color-secondary);
font-size: 0.9rem;
}
.doc-date .pi-calendar {
font-size: 0.85rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Unified values table (TOTAL + Payment + TVA) */
@@ -486,13 +486,13 @@ const formatProcessingTime = (ms) => {
.value-label {
font-weight: 500;
color: #374151;
color: var(--text-color);
}
.value-amount {
font-weight: 600;
margin-left: auto;
color: #1f2937;
color: var(--text-color);
display: flex;
align-items: center;
gap: 0.5rem;
@@ -501,13 +501,13 @@ const formatProcessingTime = (ms) => {
.value-row.total-row {
margin-top: 0.35rem;
padding-top: 0.5rem;
border-top: 1px dashed #86efac;
border-top: 1px dashed var(--green-300);
}
/* Items count - subtle, at bottom of values section */
.items-count-inline {
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
text-align: right;
padding-top: 0.35rem;
}
@@ -519,7 +519,7 @@ const formatProcessingTime = (ms) => {
/* Warning row for calculated total */
.value-row.warning-row {
background: #fef3c7;
background: var(--yellow-100);
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
@@ -529,22 +529,22 @@ const formatProcessingTime = (ms) => {
display: flex;
align-items: center;
gap: 0.5rem;
color: #92400e;
color: var(--yellow-800);
}
.warning-icon {
color: #f59e0b;
color: var(--yellow-500);
font-size: 0.9rem;
}
.value-amount.calculated {
color: #92400e;
color: var(--yellow-800);
}
.value-amount .hint {
font-size: 0.75rem;
font-weight: 400;
color: #a3a3a3;
color: var(--text-color-secondary);
}
/* Validation warnings */
@@ -554,14 +554,14 @@ const formatProcessingTime = (ms) => {
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
background: #fee2e2;
background: var(--red-100);
border-radius: 6px;
font-size: 0.8rem;
color: #991b1b;
color: var(--red-800);
}
.validation-warning i {
color: #dc2626;
color: var(--red-600);
font-size: 0.9rem;
}
@@ -572,21 +572,21 @@ const formatProcessingTime = (ms) => {
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
background: #dbeafe;
background: var(--blue-100);
border-radius: 6px;
font-size: 0.8rem;
color: #1e40af;
color: var(--blue-700);
}
.validation-info i {
color: #2563eb;
color: var(--blue-600);
font-size: 0.9rem;
}
.raw-text-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed #86efac;
border-top: 1px dashed var(--green-300);
}
.raw-text-header {
@@ -607,44 +607,44 @@ const formatProcessingTime = (ms) => {
}
.ocr-engine-badge.paddleocr {
background: #dbeafe;
color: #1e40af;
background: var(--blue-100);
color: var(--blue-700);
}
.ocr-engine-badge.tesseract {
background: #fef3c7;
color: #92400e;
background: var(--yellow-100);
color: var(--yellow-800);
}
.ocr-engine-badge.fast {
background: #dcfce7;
color: #166534;
background: var(--green-100);
color: var(--green-800);
}
.ocr-engine-badge.adaptive {
background: #dbeafe;
color: #1e40af;
background: var(--blue-100);
color: var(--blue-700);
}
.ocr-engine-badge.full {
background: #fef3c7;
color: #92400e;
background: var(--yellow-100);
color: var(--yellow-800);
}
/* docTR engine styles */
.ocr-engine-badge.doctr {
background: #ede9fe;
color: #5b21b6;
background: var(--purple-100);
color: var(--purple-700);
}
.ocr-engine-badge.doctr-fast {
background: #d1fae5;
color: #047857;
background: var(--teal-100);
color: var(--teal-700);
}
.ocr-engine-badge.doctr-adaptive {
background: #e0e7ff;
color: #3730a3;
background: var(--indigo-100);
color: var(--indigo-700);
}
.ocr-message-badge {
@@ -655,18 +655,18 @@ const formatProcessingTime = (ms) => {
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
background: #f1f5f9;
color: #475569;
background: var(--surface-100);
color: var(--text-color-secondary);
}
.ocr-message-badge.fast-mode {
background: #dcfce7;
color: #166534;
background: var(--green-100);
color: var(--green-800);
}
.ocr-message-badge.full-pipeline {
background: #fef3c7;
color: #92400e;
background: var(--yellow-100);
color: var(--yellow-800);
}
.ocr-time-badge {
@@ -677,15 +677,15 @@ const formatProcessingTime = (ms) => {
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
background: #e0e7ff;
color: #3730a3;
background: var(--indigo-100);
color: var(--indigo-700);
}
.raw-text {
margin-top: 0.5rem;
padding: 0.75rem;
background: white;
border: 1px solid #e2e8f0;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 8px;
max-height: 200px;
overflow: auto;
@@ -696,7 +696,7 @@ const formatProcessingTime = (ms) => {
font-size: 0.75rem;
white-space: pre-wrap;
word-break: break-word;
color: #475569;
color: var(--text-color-secondary);
}
.preview-actions {
@@ -704,8 +704,8 @@ const formatProcessingTime = (ms) => {
justify-content: flex-end;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
background: var(--surface-ground);
border-top: 1px solid var(--surface-border);
}
@media (max-width: 640px) {
@@ -722,9 +722,6 @@ const formatProcessingTime = (ms) => {
.preview-actions {
flex-direction: column;
}
.preview-actions :deep(.p-button) {
width: 100%;
}
/* PrimeVue button width moved to vendor/primevue-overrides.css */
}
</style>

46
src/modules/data-entry/components/ocr/OCRUploadZone.vue
View File

@@ -26,13 +26,13 @@
</div>
<div v-else-if="selectedFile" class="file-selected-state">
<i class="pi pi-check-circle" style="font-size: 1.75rem; color: #22c55e;"></i>
<i class="pi pi-check-circle" style="font-size: 1.75rem; color: var(--green-500);"></i>
<p class="file-name">{{ selectedFile.name }}</p>
<p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
</div>
<div v-else class="empty-state">
<i class="pi pi-camera" style="font-size: 2rem; color: #667eea;"></i>
<i class="pi pi-camera" style="font-size: 2rem; color: var(--primary-500);"></i>
<p class="main-text">
<span v-if="isDragging">Elibereaza pentru a incarca</span>
<span v-else>Trage poza bonului aici sau click pentru a selecta</span>
@@ -436,29 +436,29 @@ defineExpose({ reset, processOCR })
}
.upload-dropzone {
border: 2px dashed #cbd5e1;
border: 2px dashed var(--surface-border);
border-radius: 10px;
padding: 1rem 1.25rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #f8fafc;
background: var(--surface-ground);
}
.upload-dropzone:hover {
border-color: #667eea;
background: #f1f5f9;
border-color: var(--primary-500);
background: var(--surface-hover);
}
.upload-dropzone.dragging {
border-color: #667eea;
background: #eef2ff;
border-color: var(--primary-500);
background: var(--primary-50);
transform: scale(1.02);
}
.upload-dropzone.processing {
cursor: default;
background: #fefefe;
background: var(--surface-card);
}
.hidden-input {
@@ -475,13 +475,13 @@ defineExpose({ reset, processOCR })
.main-text {
font-size: 0.9rem;
color: #475569;
color: var(--text-color-secondary);
margin: 0.25rem 0;
}
.sub-text {
font-size: 0.8rem;
color: #94a3b8;
color: var(--text-color-secondary);
margin: 0;
}
@@ -496,14 +496,14 @@ defineExpose({ reset, processOCR })
.file-name {
font-weight: 600;
font-size: 0.9rem;
color: #1e293b;
color: var(--text-color);
margin: 0.25rem 0 0 0;
word-break: break-all;
}
.file-size {
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
margin: 0;
}
@@ -517,21 +517,11 @@ defineExpose({ reset, processOCR })
flex-wrap: wrap;
}
/* Engine selector dropdown */
/* Engine selector dropdown - PrimeVue styles in vendor/primevue-overrides.css */
.engine-selector {
min-width: 180px;
}
.engine-selector:deep(.p-dropdown-label) {
padding: 0.5rem 0.75rem !important;
font-size: 0.875rem;
color: #475569;
}
.engine-selector:deep(.p-dropdown-trigger) {
width: 2rem !important;
}
/* Engine dropdown option with description */
.engine-option {
display: flex;
@@ -543,12 +533,12 @@ defineExpose({ reset, processOCR })
.engine-label {
font-weight: 500;
font-size: 0.875rem;
color: #1e293b;
color: var(--text-color);
}
.engine-desc {
font-size: 0.75rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Processing state */
@@ -561,14 +551,14 @@ defineExpose({ reset, processOCR })
.processing-text {
font-size: 1rem;
color: #475569;
color: var(--text-color-secondary);
margin: 0.5rem 0 0 0;
font-weight: 500;
}
.processing-subtext {
font-size: 0.85rem;
color: #94a3b8;
color: var(--text-color-secondary);
margin: 0;
}
</style>

62
src/modules/data-entry/views/OCRMetricsView.vue
View File

@@ -12,7 +12,7 @@
<!-- Empty State -->
<div v-else-if="!hasData" class="empty-state">
<i class="pi pi-chart-bar" style="font-size: 3rem; color: #94a3b8;"></i>
<i class="pi pi-chart-bar empty-state-icon"></i>
<h3>Nu exista date</h3>
<p>Procesati imagini cu OCR pentru a vedea statisticile.</p>
</div>
@@ -163,28 +163,28 @@
<h3>Statistici Generale</h3>
<div class="stats-grid">
<div class="stat-box">
<i class="pi pi-file" style="color: #667eea;"></i>
<i class="pi pi-file stat-icon stat-icon--primary"></i>
<div class="stat-info">
<span class="stat-number">{{ stats.total_jobs || 0 }}</span>
<span class="stat-desc">Total joburi</span>
</div>
</div>
<div class="stat-box">
<i class="pi pi-check-circle" style="color: #22c55e;"></i>
<i class="pi pi-check-circle stat-icon stat-icon--success"></i>
<div class="stat-info">
<span class="stat-number">{{ stats.successful_jobs || 0 }}</span>
<span class="stat-desc">Procesate cu succes</span>
</div>
</div>
<div class="stat-box">
<i class="pi pi-times-circle" style="color: #ef4444;"></i>
<i class="pi pi-times-circle stat-icon stat-icon--error"></i>
<div class="stat-info">
<span class="stat-number">{{ stats.failed_jobs || 0 }}</span>
<span class="stat-desc">Esuate</span>
</div>
</div>
<div class="stat-box">
<i class="pi pi-clock" style="color: #f59e0b;"></i>
<i class="pi pi-clock stat-icon stat-icon--warning"></i>
<div class="stat-info">
<span class="stat-number">{{ formatTime(stats.avg_processing_time_ms) }}</span>
<span class="stat-desc">Timp mediu total</span>
@@ -823,7 +823,7 @@ onBeforeUnmount(() => {
.page-header h1 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
color: var(--text-color);
margin: 0;
}
@@ -968,11 +968,11 @@ onBeforeUnmount(() => {
/* Section Card */
.section-card {
background: white;
background: var(--surface-card);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
box-shadow: var(--shadow-sm);
border: 1px solid var(--surface-border);
margin-bottom: 1.5rem;
}
@@ -1115,11 +1115,11 @@ onBeforeUnmount(() => {
}
.chart-card {
background: white;
background: var(--surface-card);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
box-shadow: var(--shadow-sm);
border: 1px solid var(--surface-border);
}
.chart-card h3 {
@@ -1136,11 +1136,11 @@ onBeforeUnmount(() => {
/* Stats Overview */
.stats-overview {
background: white;
background: var(--surface-card);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
box-shadow: var(--shadow-sm);
border: 1px solid var(--surface-border);
margin-bottom: 1.5rem;
}
@@ -1162,7 +1162,7 @@ onBeforeUnmount(() => {
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8fafc;
background: var(--surface-ground);
border-radius: 8px;
}
@@ -1178,12 +1178,12 @@ onBeforeUnmount(() => {
.stat-number {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-color);
}
.stat-desc {
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Engine Badges */
@@ -1292,6 +1292,32 @@ onBeforeUnmount(() => {
min-width: 100%;
}
}
/* Dark mode compatible icon styles */
.empty-state-icon {
font-size: 3rem;
color: var(--text-color-secondary);
}
.stat-icon {
font-size: 1.5rem;
}
.stat-icon--primary {
color: var(--primary-500, #667eea);
}
.stat-icon--success {
color: var(--green-500, #22c55e);
}
.stat-icon--error {
color: var(--red-500, #ef4444);
}
.stat-icon--warning {
color: var(--yellow-500, #f59e0b);
}
</style>
<!-- Non-scoped styles for PrimeVue overrides -->

232
src/modules/data-entry/views/receipts/ReceiptCreateView.vue
View File

@@ -159,7 +159,7 @@
v-else-if="att.mime_type?.startsWith('image/') && !attachmentBlobUrls[att.id]"
class="image-placeholder"
>
<i class="pi pi-image" style="font-size: 2rem; color: #94a3b8;"></i>
<i class="pi pi-image" style="font-size: 2rem; color: var(--text-color-secondary);"></i>
<span>{{ att.filename }}</span>
</div>
<div v-else class="pdf-preview">
@@ -2071,16 +2071,16 @@ const submitForReview = async () => {
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: #fef3c7;
border: 1px solid #fbbf24;
color: #92400e;
background: var(--yellow-100);
border: 1px solid var(--yellow-400);
color: var(--yellow-800);
font-size: 0.875rem;
}
.validation-banner.warning {
background: #fee2e2;
border-color: #f87171;
color: #991b1b;
background: var(--red-100);
border-color: var(--red-400);
color: var(--red-800);
}
.validation-banner i {
@@ -2167,8 +2167,8 @@ const submitForReview = async () => {
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
background: #dcfce7;
border: 1px solid #86efac;
background: var(--green-100);
border: 1px solid var(--green-300);
border-radius: 8px;
cursor: pointer;
margin-top: 0.75rem;
@@ -2176,23 +2176,23 @@ const submitForReview = async () => {
}
.ocr-applied-banner:hover {
background: #bbf7d0;
background: var(--green-200);
}
.ocr-applied-banner .pi-check-circle {
color: #22c55e;
color: var(--green-500);
font-size: 1.1rem;
}
.ocr-applied-banner span {
flex: 1;
font-weight: 500;
color: #166534;
color: var(--green-800);
font-size: 0.9rem;
}
.ocr-applied-banner .pi-chevron-down {
color: #166534;
color: var(--green-800);
font-size: 0.8rem;
}
@@ -2222,11 +2222,11 @@ const submitForReview = async () => {
/* Pending files header */
.pending-files-header {
font-size: 0.85rem;
color: #64748b;
color: var(--text-color-secondary);
font-weight: 500;
margin-bottom: 0.5rem;
padding-bottom: 0.35rem;
border-bottom: 1px dashed #cbd5e1;
border-bottom: 1px dashed var(--surface-border);
}
.radio-group {
@@ -2246,7 +2246,7 @@ const submitForReview = async () => {
align-items: center;
justify-content: center;
height: 100%;
background: #f5f5f5;
background: var(--surface-100);
padding: 1rem;
}
@@ -2270,20 +2270,20 @@ const submitForReview = async () => {
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
background: var(--surface-ground);
border: 1px solid var(--surface-border);
border-radius: 8px;
}
.selected-file-item i {
color: #667eea;
color: var(--primary-500);
font-size: 1.25rem;
}
.selected-file-item .file-name {
flex: 1;
font-weight: 500;
color: #1e293b;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -2291,15 +2291,15 @@ const submitForReview = async () => {
.selected-file-item .file-size {
font-size: 0.85rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Extra details section (TVA, items, address) */
.extra-details-section {
margin-top: 1rem;
padding: 0.75rem;
background: #f0f9ff;
border: 1px solid #bae6fd;
background: var(--blue-50);
border: 1px solid var(--blue-200);
border-radius: 8px;
}
@@ -2309,7 +2309,7 @@ const submitForReview = async () => {
gap: 0.5rem;
margin-bottom: 0.75rem;
margin-top: 0;
color: #0284c7;
color: var(--blue-600);
font-size: 0.95rem;
}
@@ -2329,13 +2329,13 @@ const submitForReview = async () => {
.tva-row.total {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed #0284c7;
border-top: 1px dashed var(--blue-600);
}
.tva-label {
min-width: 150px;
font-weight: 500;
color: #334155;
color: var(--text-color);
}
.tva-input {
@@ -2344,7 +2344,7 @@ const submitForReview = async () => {
.tva-value {
font-weight: 600;
color: #0284c7;
color: var(--blue-600);
}
/* Supplier warning */
@@ -2353,7 +2353,7 @@ const submitForReview = async () => {
align-items: center;
gap: 0.25rem;
margin-top: 0.25rem;
color: #f59e0b;
color: var(--yellow-500);
}
/* Supplier selected indicator */
@@ -2362,7 +2362,7 @@ const submitForReview = async () => {
align-items: center;
gap: 0.25rem;
margin-top: 0.25rem;
color: #22c55e;
color: var(--green-500);
font-weight: 500;
}
@@ -2371,7 +2371,7 @@ const submitForReview = async () => {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: #64748b;
color: var(--text-color-secondary);
}
/* Payment methods display */
@@ -2407,7 +2407,7 @@ const submitForReview = async () => {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
color: #334155;
color: var(--text-color);
}
/* ========================================
@@ -2416,7 +2416,7 @@ const submitForReview = async () => {
.form-section {
padding: 0.6rem 0;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--surface-border);
}
.form-section:last-of-type {
@@ -2426,7 +2426,7 @@ const submitForReview = async () => {
.form-section-title {
font-size: 0.7rem;
font-weight: 600;
color: #64748b;
color: var(--text-color-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
@@ -2489,7 +2489,7 @@ const submitForReview = async () => {
.direction-header .field-label {
font-size: 0.85rem;
font-weight: 500;
color: #475569;
color: var(--text-color-secondary);
}
.auto-tag {
@@ -2519,7 +2519,7 @@ const submitForReview = async () => {
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: #22c55e;
color: var(--green-500);
font-weight: 500;
white-space: nowrap;
}
@@ -2544,7 +2544,7 @@ const submitForReview = async () => {
.tva-label-compact {
min-width: 80px;
font-size: 0.85rem;
color: #475569;
color: var(--text-color-secondary);
}
.tva-input-compact {
@@ -2554,12 +2554,12 @@ const submitForReview = async () => {
.tva-edit-row.tva-total-row {
margin-top: 0.35rem;
padding-top: 0.35rem;
border-top: 1px dashed #cbd5e1;
border-top: 1px dashed var(--surface-border);
}
.tva-total-value {
font-weight: 600;
color: #0284c7;
color: var(--blue-600);
font-size: 0.9rem;
}
@@ -2578,7 +2578,7 @@ const submitForReview = async () => {
/* Form groups with subtle borders */
.form-group {
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--surface-border);
}
.form-group:first-child {
@@ -2606,24 +2606,24 @@ const submitForReview = async () => {
gap: 0.4rem;
padding: 0.3rem 0.5rem;
margin-top: 0.4rem;
background: #f8fafc;
background: var(--surface-ground);
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
.address-collapsed:hover {
background: #f1f5f9;
background: var(--surface-hover);
}
.address-collapsed i {
font-size: 0.7rem;
color: #64748b;
color: var(--text-color-secondary);
}
.address-preview {
font-size: 0.75rem;
color: #64748b;
color: var(--text-color-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -2634,7 +2634,7 @@ const submitForReview = async () => {
.address-expanded {
margin-top: 0.4rem;
padding: 0.4rem;
background: #f8fafc;
background: var(--surface-ground);
border-radius: 4px;
}
@@ -2660,7 +2660,7 @@ const submitForReview = async () => {
======================================== */
.values-section {
background: #f8fafc;
background: var(--surface-ground);
border-radius: 6px;
padding: 0.5rem 0.75rem;
}
@@ -2702,55 +2702,23 @@ const submitForReview = async () => {
.value-item label {
font-size: 0.75rem;
font-weight: 500;
color: #64748b;
color: var(--text-color-secondary);
text-transform: uppercase;
}
/* Force InputNumber to respect container width */
/* Force InputNumber to respect container width - PrimeVue styles in vendor/primevue-overrides.css */
.input-compact {
width: 100% !important;
max-width: 130px !important;
}
:deep(.value-item-total .p-inputnumber) {
width: 100% !important;
max-width: 130px !important;
}
:deep(.value-item-total .p-inputnumber-input) {
width: 100% !important;
}
:deep(.payment-method-item .p-inputnumber) {
width: 100% !important;
max-width: 110px !important;
}
:deep(.payment-method-item .p-inputnumber-input) {
width: 100% !important;
}
.dropdown-payment {
width: 100% !important;
max-width: 190px !important;
}
:deep(.dropdown-payment) {
width: 100% !important;
max-width: 190px !important;
}
:deep(.dropdown-payment .p-dropdown) {
width: 100% !important;
}
.payment-method-value {
display: inline-block;
font-size: 0.95rem;
font-weight: 500;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: var(--text-color);
background: var(--surface-ground);
border: 1px solid var(--surface-border);
padding: 0.5rem 0.75rem;
border-radius: 6px;
min-width: 90px;
@@ -2761,7 +2729,7 @@ const submitForReview = async () => {
.tva-compact {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed #cbd5e1;
border-top: 1px dashed var(--surface-border);
}
.tva-item {
@@ -2771,14 +2739,7 @@ const submitForReview = async () => {
.input-tva {
width: 110px !important;
}
:deep(.input-tva) {
width: 110px !important;
}
:deep(.input-tva .p-inputnumber-input) {
width: 110px !important;
}
/* PrimeVue input-tva styles moved to vendor/primevue-overrides.css */
.tva-total-item {
padding-left: 0.5rem;
@@ -2788,9 +2749,9 @@ const submitForReview = async () => {
display: inline-block;
font-size: 0.95rem;
font-weight: 500;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: var(--text-color);
background: var(--surface-ground);
border: 1px solid var(--surface-border);
padding: 0.5rem 0.75rem;
border-radius: 6px;
min-width: 90px;
@@ -2800,12 +2761,12 @@ const submitForReview = async () => {
/* Small labels for secondary fields */
.label-small {
font-size: 0.8rem !important;
color: #64748b !important;
color: var(--text-color-secondary) !important;
}
/* Muted labels for optional fields */
.label-muted {
color: #94a3b8 !important;
color: var(--text-color-secondary) !important;
}
/* Small inputs */
@@ -2845,7 +2806,7 @@ const submitForReview = async () => {
align-items: flex-end;
padding: 0.5rem 0;
margin-top: 0.5rem;
background: #f8fafc;
background: var(--surface-ground);
border-radius: 4px;
padding: 0.5rem;
}
@@ -2866,14 +2827,14 @@ const submitForReview = async () => {
.tva-total-inline {
font-weight: 500;
color: #334155;
color: var(--text-color);
font-size: 0.95rem;
padding: 0.5rem 0;
}
/* Optional fields row */
.optional-fields {
background: #f8fafc;
background: var(--surface-ground);
padding: 0.5rem;
border-radius: 4px;
margin-top: 0.4rem;
@@ -2958,20 +2919,15 @@ const submitForReview = async () => {
min-width: 80px;
}
/* Dropdowns and inputs full width in their containers */
.form-field :deep(.p-dropdown),
.form-field :deep(.p-autocomplete),
.form-field :deep(.p-calendar) {
width: 100% !important;
}
/* Dropdowns and inputs full width - styles in vendor/primevue-overrides.css */
/* Action buttons on mobile - not fixed, flow with content */
.action-buttons-top {
position: static;
width: 100%;
padding: 1rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
background: var(--surface-ground);
border-top: 1px solid var(--surface-border);
margin-top: 1rem;
display: flex;
flex-direction: row;
@@ -3006,28 +2962,28 @@ const submitForReview = async () => {
}
.status-draft {
background: #f1f5f9;
color: #475569;
background: var(--surface-100);
color: var(--text-color-secondary);
}
.status-pending {
background: #fef3c7;
color: #92400e;
background: var(--yellow-100);
color: var(--yellow-800);
}
.status-approved {
background: #dcfce7;
color: #166534;
background: var(--green-100);
color: var(--green-800);
}
.status-rejected {
background: #fee2e2;
color: #991b1b;
background: var(--red-100);
color: var(--red-800);
}
.status-synced {
background: #dbeafe;
color: #1e40af;
background: var(--blue-100);
color: var(--blue-700);
}
/* Rejection Alert */
@@ -3035,14 +2991,14 @@ const submitForReview = async () => {
display: flex;
gap: 1rem;
padding: 1rem;
background: #fff3e0;
background: var(--orange-100);
border-radius: 8px;
margin-bottom: 1rem;
}
.rejection-alert i {
font-size: 1.5rem;
color: #f57c00;
color: var(--orange-500);
}
.rejection-alert p {
@@ -3064,8 +3020,8 @@ const submitForReview = async () => {
border-radius: 8px;
overflow: hidden;
position: relative;
border: 1px solid #e2e8f0;
background: #f8fafc;
border: 1px solid var(--surface-border);
background: var(--surface-ground);
}
.attachment-image {
@@ -3085,12 +3041,12 @@ const submitForReview = async () => {
.pdf-attachment i {
font-size: 2.5rem;
color: #dc2626;
color: var(--red-600);
}
.pdf-attachment span {
font-size: 0.85rem;
color: #475569;
color: var(--text-color-secondary);
text-align: center;
word-break: break-word;
}
@@ -3122,8 +3078,8 @@ const submitForReview = async () => {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #f8fafc;
border: 1px solid var(--surface-border);
background: var(--surface-ground);
}
.image-preview-item img {
@@ -3141,8 +3097,8 @@ const submitForReview = async () => {
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #f1f5f9;
color: #94a3b8;
background: var(--surface-hover);
color: var(--text-color-secondary);
font-size: 0.75rem;
text-align: center;
padding: 0.5rem;
@@ -3160,7 +3116,7 @@ const submitForReview = async () => {
align-items: center;
justify-content: center;
padding: 2rem;
color: #94a3b8;
color: var(--text-color-secondary);
text-align: center;
}
@@ -3177,7 +3133,7 @@ const submitForReview = async () => {
.entries-section {
margin-top: 1.5rem;
padding: 1rem;
background: #f8fafc;
background: var(--surface-ground);
border-radius: 8px;
}
@@ -3186,7 +3142,7 @@ const submitForReview = async () => {
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem 0;
color: #334155;
color: var(--text-color);
}
.entries-table-container {
@@ -3203,25 +3159,25 @@ const submitForReview = async () => {
.entries-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--surface-border);
}
.entries-table th {
background: #f1f5f9;
background: var(--surface-hover);
font-weight: 600;
color: #475569;
color: var(--text-color-secondary);
}
.entries-table tbody tr:hover {
background: #f8fafc;
background: var(--surface-ground);
}
.entries-table .debit {
color: #dc2626;
color: var(--red-600);
}
.entries-table .credit {
color: #16a34a;
color: var(--green-600);
}
.entries-table tfoot td {
@@ -3235,9 +3191,9 @@ const submitForReview = async () => {
gap: 0.5rem;
margin-top: 1rem;
padding: 0.75rem;
background: #fff3e0;
background: var(--orange-100);
border-radius: 8px;
color: #f57c00;
color: var(--orange-500);
}
</style>

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 {

14
src/modules/reports/components/dashboard/DetailedDataTable.vue
View File

@@ -580,7 +580,7 @@ watch(
}
.detailed-table th {
background: #ffffff;
background: var(--surface-card);
font-weight: 500;
color: var(--color-text-primary);
position: sticky;
@@ -592,7 +592,7 @@ watch(
/* Group row styling */
.group-row {
background: #ffffff;
background: var(--surface-card);
cursor: pointer;
font-weight: 500;
border-top: 1px solid var(--color-border);
@@ -600,26 +600,26 @@ watch(
}
.group-row:hover {
background: #f8f9fa;
background: var(--surface-hover);
}
.group-row.has-restant:hover {
background: #f8f9fa;
background: var(--surface-hover);
}
/* Single invoice row styling */
.single-invoice-row {
background: #ffffff;
background: var(--surface-card);
font-weight: 400;
transition: background 0.15s ease;
}
.single-invoice-row:hover {
background: #f8f9fa;
background: var(--surface-hover);
}
.single-invoice-row.row-restant:hover {
background: #f8f9fa;
background: var(--surface-hover);
}
.single-invoice-row td:first-child {

18
src/modules/reports/views/InvoicesView.vue
View File

@@ -878,23 +878,7 @@ watch(
display: block;
}
/* Enhanced striped rows with better contrast - same as Trial Balance */
.table-card :deep(.p-datatable .p-datatable-tbody > tr) {
transition: background-color 0.2s ease;
}
.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(odd)) {
background-color: #ffffff;
}
.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(even)) {
background-color: #f8f9fa;
}
.table-card :deep(.p-datatable .p-datatable-tbody > tr:hover) {
background-color: #e3f2fd !important;
cursor: pointer;
}
/* Enhanced striped rows - moved to vendor/primevue-overrides.css with design tokens */
/* Responsive design */
@media (max-width: 768px) {

4
src/modules/reports/views/ServerLogsView.vue
View File

@@ -343,8 +343,8 @@ onUnmounted(() => {
.logs-container {
max-height: 600px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #e2e8f0;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
}

4
src/modules/reports/views/TelegramView.vue
View File

@@ -282,9 +282,9 @@ onUnmounted(() => {
display: flex;
justify-content: center;
padding: var(--space-lg);
background: white;
background: var(--surface-card);
border-radius: var(--radius-md);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
/* Responsive - Telegram-specific adjustments */

57
src/shared/components/layout/AppHeader.vue
View File

@@ -20,7 +20,7 @@
</router-link>
</div>
<!-- Right side: Period + Company + User -->
<!-- Right side: Period + Company + Theme + User -->
<div class="header-actions">
<PeriodSelector
v-if="showPeriod && selectedCompany"
@@ -36,6 +36,15 @@
variant="header"
@company-changed="onCompanyChanged"
/>
<!-- Theme Toggle Button -->
<button
class="theme-toggle-btn"
@click="cycleTheme"
:title="themeLabel"
aria-label="Change theme"
>
<i :class="themeIcon"></i>
</button>
<!-- User menu slot (only rendered if showUser is true) -->
<div v-if="showUser">
<slot name="user-menu">
@@ -51,7 +60,7 @@
</template>
<script>
import { computed } from "vue";
import { computed, ref, onMounted } from "vue";
import CompanySelector from "../CompanySelector.vue";
import PeriodSelector from "../PeriodSelector.vue";
@@ -125,10 +134,54 @@ export default {
emit("period-changed", period);
};
// Theme toggle logic
const currentTheme = ref(localStorage.getItem('user-theme') || 'auto');
const themeIcon = computed(() => ({
'auto': 'pi pi-desktop',
'light': 'pi pi-sun',
'dark': 'pi pi-moon'
}[currentTheme.value]));
const themeLabel = computed(() => ({
'auto': 'Tema: Auto (sistem)',
'light': 'Tema: Light',
'dark': 'Tema: Dark'
}[currentTheme.value]));
const applyTheme = (theme) => {
if (theme === 'auto') {
document.documentElement.removeAttribute('data-theme');
localStorage.removeItem('user-theme');
} else {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('user-theme', theme);
}
};
const cycleTheme = () => {
const themes = ['auto', 'light', 'dark'];
const idx = themes.indexOf(currentTheme.value);
const next = themes[(idx + 1) % 3];
currentTheme.value = next;
applyTheme(next);
};
// Initialize theme on mount
onMounted(() => {
if (currentTheme.value !== 'auto') {
applyTheme(currentTheme.value);
}
});
return {
selectedCompany,
onCompanyChanged,
onPeriodChanged,
currentTheme,
themeIcon,
themeLabel,
cycleTheme,
};
},
};

36
src/shared/styles/layout/header.css
View File

@@ -132,6 +132,42 @@
background-color: rgba(255, 255, 255, 0.1);
}
/* Theme Toggle Button */
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--surface-border, #e2e8f0);
border-radius: var(--radius-md, 6px);
cursor: pointer;
color: var(--text-color, #111827);
transition: all 0.15s ease;
}
.theme-toggle-btn:hover {
background: var(--surface-hover, #f1f5f9);
border-color: var(--primary-500, #3b82f6);
color: var(--primary-500, #3b82f6);
}
.theme-toggle-btn i {
font-size: 1rem;
}
/* Gradient header theme toggle */
.header-container--gradient .theme-toggle-btn {
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.header-container--gradient .theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.header-container {

4
src/shared/styles/login.css
View File

@@ -23,12 +23,13 @@
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--surface-card);
}
.login-header {
text-align: center;
padding: 2rem 2rem 1rem 2rem;
background: white;
background: var(--surface-card);
}
.login-title {
@@ -46,6 +47,7 @@
.login-form {
padding: 0 2rem 2rem 2rem;
background: var(--surface-card);
}
.login-button {