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

feat(mobile-navigation-improvements): Complete US-206 - Creare Pagină Hub Setări

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 4

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 12:12:24 +00:00
parent 9d97d72d4d
commit 55b8e9e937
3 changed files with 284 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/ralph/prd.json
View File

@@ -91,8 +91,8 @@
"Design responsive (grid 2x2 pe mobil, 4 columns pe desktop)",
"npm run build passes"
],
"passes": false,
"notes": ""
"passes": true,
"notes": "Completed in iteration 4"
},
{
"id": "US-204",

6
scripts/ralph/progress.txt
View File

@@ -22,3 +22,9 @@ User Stories: 14 (US-201 to US-214)
[2026-01-12 12:07:31] Working on story: US-208
[2026-01-12 12:07:31] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_3_US-208.log)
[2026-01-12 12:09:57] SUCCESS: Story US-208 passed!
[2026-01-12 12:09:57] Changes committed
[2026-01-12 12:09:57] Progress: 3/14 stories completed
[2026-01-12 12:09:59] === Iteration 4/100 ===
[2026-01-12 12:09:59] Working on story: US-206
[2026-01-12 12:09:59] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-206.log)
[2026-01-12 12:12:24] SUCCESS: Story US-206 passed!

339
src/modules/reports/views/SettingsHubView.vue
View File

@@ -11,21 +11,61 @@
<div class="app-container">
<!-- Page Header - only on desktop -->
<div v-if="!isMobile" class="page-header">
<h1 class="page-title">Setări</h1>
<h1 class="page-title">
<i class="pi pi-cog"></i>
Setări
</h1>
<p class="page-subtitle">Configurare și monitorizare sistem</p>
</div>
<!-- Placeholder content - to be implemented in US-206 -->
<div class="placeholder-content">
<i class="pi pi-cog placeholder-icon"></i>
<h2>Hub Setări</h2>
<p>Această pagină va conține carduri pentru toate opțiunile de setări.</p>
<p class="placeholder-note">Implementare completă în US-206</p>
<!-- Settings Cards Grid -->
<div class="settings-grid">
<!-- OCR Setări Card -->
<router-link to="/data-entry/ocr-metrics" class="settings-card">
<div class="card-icon ocr-icon">
<i class="pi pi-chart-line"></i>
</div>
<div class="card-content">
<h3 class="card-title">OCR Setări</h3>
<p class="card-description">Metrici și configurare OCR pentru procesarea bonurilor</p>
</div>
<i class="pi pi-chevron-right card-arrow"></i>
</router-link>
<!-- Quick link to OCR Metrics (existing page) -->
<router-link to="/data-entry/ocr-metrics" class="quick-link">
<i class="pi pi-chart-line"></i>
<span>OCR Metrics</span>
<i class="pi pi-arrow-right"></i>
<!-- Cache Stats Card -->
<router-link to="/reports/cache-stats" class="settings-card">
<div class="card-icon cache-icon">
<i class="pi pi-database"></i>
</div>
<div class="card-content">
<h3 class="card-title">Cache Stats</h3>
<p class="card-description">Statistici și monitorizare cache sistem</p>
</div>
<i class="pi pi-chevron-right card-arrow"></i>
</router-link>
<!-- Server Logs Card -->
<router-link to="/reports/server-logs" class="settings-card">
<div class="card-icon logs-icon">
<i class="pi pi-file"></i>
</div>
<div class="card-content">
<h3 class="card-title">Loguri Server</h3>
<p class="card-description">Vizualizare și analiză loguri aplicație</p>
</div>
<i class="pi pi-chevron-right card-arrow"></i>
</router-link>
<!-- Telegram Card -->
<router-link to="/reports/telegram" class="settings-card">
<div class="card-icon telegram-icon">
<i class="pi pi-send"></i>
</div>
<div class="card-content">
<h3 class="card-title">Telegram</h3>
<p class="card-description">Conectare bot Telegram pentru notificări</p>
</div>
<i class="pi pi-chevron-right card-arrow"></i>
</router-link>
</div>
</div>
@@ -80,66 +120,239 @@ onUnmounted(() => {
padding-bottom: 56px;
}
/* Placeholder content styles */
.placeholder-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
padding: var(--space-xl);
background: var(--surface-card);
border-radius: var(--radius-lg);
border: 1px dashed var(--surface-border);
margin: var(--space-lg);
/* Page header styles */
.page-header {
margin-bottom: var(--space-xl);
}
.placeholder-icon {
font-size: 48px;
color: var(--primary-color);
margin-bottom: var(--space-lg);
}
.placeholder-content h2 {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--text-color);
margin: 0 0 var(--space-md) 0;
}
.placeholder-content p {
font-size: var(--text-base);
color: var(--text-color-secondary);
margin: 0 0 var(--space-sm) 0;
}
.placeholder-note {
font-size: var(--text-sm);
color: var(--text-color-secondary);
font-style: italic;
margin-bottom: var(--space-lg);
}
/* Quick link to existing OCR Metrics page */
.quick-link {
.page-title {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--primary-color);
color: var(--primary-color-text);
border-radius: var(--radius-md);
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--text-color);
margin: 0 0 var(--space-sm) 0;
}
.page-title i {
color: var(--color-primary);
}
.page-subtitle {
font-size: var(--text-base);
color: var(--text-color-secondary);
margin: 0;
}
/* Settings Cards Grid */
.settings-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
padding: var(--space-md);
}
/* Responsive: 2x2 on mobile, 4 columns on desktop */
@media (max-width: 1200px) {
.settings-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.settings-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
padding: var(--space-sm);
}
}
@media (max-width: 480px) {
.settings-grid {
gap: var(--space-sm);
padding: var(--space-xs);
}
}
/* Settings Card - Action Card Style */
.settings-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-lg);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: var(--font-medium);
transition: background-color 0.2s ease;
color: inherit;
transition: all var(--transition-fast);
cursor: pointer;
position: relative;
min-height: 180px;
}
.quick-link:hover {
background: var(--primary-600);
.settings-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.quick-link i:last-child {
margin-left: var(--space-sm);
.settings-card:active {
transform: translateY(0);
}
/* Card Icon Container */
.card-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
font-size: var(--text-2xl);
}
/* Icon color variants */
.card-icon.ocr-icon {
background: var(--blue-50);
color: var(--blue-600);
}
.card-icon.cache-icon {
background: var(--green-50);
color: var(--green-600);
}
.card-icon.logs-icon {
background: var(--yellow-50);
color: var(--yellow-600);
}
.card-icon.telegram-icon {
background: var(--cyan-50);
color: var(--cyan-600);
}
/* Card Content */
.card-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.card-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-color);
margin: 0;
}
.card-description {
font-size: var(--text-sm);
color: var(--text-color-secondary);
margin: 0;
line-height: var(--leading-normal);
}
/* Card Arrow */
.card-arrow {
position: absolute;
top: var(--space-md);
right: var(--space-md);
color: var(--text-color-secondary);
font-size: var(--text-sm);
opacity: 0;
transition: opacity var(--transition-fast);
}
.settings-card:hover .card-arrow {
opacity: 1;
}
/* Mobile optimizations */
@media (max-width: 768px) {
.settings-card {
padding: var(--space-md);
min-height: 150px;
}
.card-icon {
width: 48px;
height: 48px;
font-size: var(--text-xl);
margin-bottom: var(--space-sm);
}
.card-title {
font-size: var(--text-base);
}
.card-description {
font-size: var(--text-xs);
}
.card-arrow {
display: none;
}
}
/* ================================================
Dark Mode Support
================================================ */
/* Manual dark mode via data-theme attribute */
[data-theme="dark"] .card-icon.ocr-icon {
background: var(--blue-900);
color: var(--blue-400);
}
[data-theme="dark"] .card-icon.cache-icon {
background: var(--green-900);
color: var(--green-400);
}
[data-theme="dark"] .card-icon.logs-icon {
background: var(--yellow-900);
color: var(--yellow-400);
}
[data-theme="dark"] .card-icon.telegram-icon {
background: var(--cyan-900);
color: var(--cyan-400);
}
[data-theme="dark"] .settings-card:hover {
border-color: var(--blue-500);
}
/* Auto dark mode (when no manual theme is set) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .card-icon.ocr-icon {
background: var(--blue-900);
color: var(--blue-400);
}
:root:not([data-theme]) .card-icon.cache-icon {
background: var(--green-900);
color: var(--green-400);
}
:root:not([data-theme]) .card-icon.logs-icon {
background: var(--yellow-900);
color: var(--yellow-400);
}
:root:not([data-theme]) .card-icon.telegram-icon {
background: var(--cyan-900);
color: var(--cyan-400);
}
:root:not([data-theme]) .settings-card:hover {
border-color: var(--blue-500);
}
}
</style>