feat: Implement unified Vue SPA with granular service control
Consolidate Reports and Data Entry apps into a single Vue.js SPA with: Architecture: - Module-based structure with lazy-loaded routes (@reports, @data-entry) - Error boundaries per module to prevent cascade failures - Dual API proxy in Vite for microservices (reports:8001, data-entry:8003) - Pinia store factories for shared auth, company, and period stores - Vite path aliases for clear module boundaries (@shared, @reports, @data-entry) Service Management: - Granular service control scripts (backend-reports.sh, backend-data-entry.sh, bot.sh, frontend.sh) - 87% faster frontend restart: 7s vs 53s full restart - 38% faster full startup: 33s vs 53s via parallel backend initialization - Enhanced start-dev.sh with proper service timeouts (OCR: 30s, Vite: 15s, Bot: 10s) - status.sh for comprehensive health checks Features: - Auto-select first company on login with period auto-load - Hamburger menu with feature toggle support - JWT token auto-injection via axios interceptors - Unified header with company/period selectors - IIS web.config for production deployment with multi-API routing UX Improvements: - Vue watchers for reactive company/period loading - Lazy store initialization with graceful error handling - Period persistence per user+company in localStorage - Feature flags for optional modules Deployment: - Single IIS site serves unified frontend with API proxy rules - Maintains separate backend processes for microservices - Windows line ending fixes (.env CRLF → LF conversion) Stats: 112 files changed, 38,342 insertions(+), 2,342 deletions(-) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
502
src/assets/css/components/stats.css
Normal file
502
src/assets/css/components/stats.css
Normal file
@@ -0,0 +1,502 @@
|
||||
/* Stats Components - ROA2WEB Dashboard */
|
||||
|
||||
/* Stats Grid Layout */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Stats Cards */
|
||||
.stats-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-border-dark);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Stats Card Header */
|
||||
.stats-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding-bottom: var(--space-sm);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.stats-card-header i {
|
||||
font-size: var(--text-xl);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.stats-card-header h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Stats Details */
|
||||
.stats-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--space-xs) 0;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.stat-row span:first-child {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.stat-row span:last-child {
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-medium);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stat-highlight {
|
||||
background: var(--color-bg-secondary);
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
margin: var(--space-sm) 0;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.stat-warning {
|
||||
color: var(--color-error);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.stat-warning span:first-child {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.stat-success {
|
||||
color: var(--color-success);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.stat-success span:first-child {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
/* Treasury Specific Styling */
|
||||
.treasury-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.treasury-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.treasury-section-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--color-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.account-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--text-xs);
|
||||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: var(--font-medium);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.account-balance {
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-semibold);
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--space-sm);
|
||||
}
|
||||
|
||||
.treasury-totals {
|
||||
margin-top: var(--space-sm);
|
||||
padding-top: var(--space-sm);
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-bg-muted);
|
||||
margin-left: calc(-1 * var(--space-lg));
|
||||
margin-right: calc(-1 * var(--space-lg));
|
||||
margin-bottom: calc(-1 * var(--space-lg));
|
||||
padding-left: var(--space-lg);
|
||||
padding-right: var(--space-lg);
|
||||
padding-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.total-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--space-xs) 0;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
/* KPI Large Display */
|
||||
.kpi-large-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--space-xl);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.kpi-large-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.kpi-large-value {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--color-text);
|
||||
line-height: var(--leading-tight);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.kpi-large-label {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.kpi-large-change {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.kpi-large-change.positive {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.kpi-large-change.negative {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* Mini Stats for V2 Dashboard */
|
||||
.mini-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.mini-stat-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-sm);
|
||||
text-align: center;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mini-stat-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.mini-stat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-bottom: var(--space-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mini-stat-value {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-bold);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.mini-stat-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
/* Heat Map Colors for Mini Cards */
|
||||
.mini-stat-card.heat-low {
|
||||
background: #f0fdf4;
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-low .mini-stat-value {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-medium {
|
||||
background: #fffbeb;
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-medium .mini-stat-value {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-high {
|
||||
background: #fef2f2;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.mini-stat-card.heat-high .mini-stat-value {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* Quick Actions Grid */
|
||||
.quick-actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Loading Spinner for Stats */
|
||||
.stats-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.stats-loading-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Stats Card Variants */
|
||||
.stats-card.clients {
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.stats-card.clients .stats-card-header i {
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.stats-card.suppliers {
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.stats-card.suppliers .stats-card-header i {
|
||||
color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.stats-card.treasury {
|
||||
border-left-color: #10b981;
|
||||
}
|
||||
|
||||
.stats-card.treasury .stats-card-header i {
|
||||
color: #10b981;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.mini-stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.treasury-totals {
|
||||
margin-left: calc(-1 * var(--space-md));
|
||||
margin-right: calc(-1 * var(--space-md));
|
||||
margin-bottom: calc(-1 * var(--space-md));
|
||||
padding-left: var(--space-md);
|
||||
padding-right: var(--space-md);
|
||||
padding-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.mini-stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.kpi-large-value {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mini-stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(12, auto);
|
||||
}
|
||||
|
||||
.mini-stat-card {
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
|
||||
.mini-stat-value {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.stats-card-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-row span:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Summary Stats Inline ===== */
|
||||
/* Compact horizontal stats display for page summaries */
|
||||
.summary-stats-inline {
|
||||
display: flex;
|
||||
gap: var(--space-xl);
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.summary-stats-inline .stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.summary-stats-inline .stat-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.summary-stats-inline .stat-value {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.summary-stats-inline .stat-value.positive,
|
||||
.summary-stats-inline .stat-value.incasari {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.summary-stats-inline .stat-value.negative,
|
||||
.summary-stats-inline .stat-value.plati {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* Responsive: Stack on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.summary-stats-inline {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.stats-card {
|
||||
break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.summary-stats-inline {
|
||||
border: 1px solid #ccc;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user