From 55b8e9e9371562458d92bbff8307a52854835e03 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Mon, 12 Jan 2026 12:12:24 +0000 Subject: [PATCH] =?UTF-8?q?feat(mobile-navigation-improvements):=20Complet?= =?UTF-8?q?e=20US-206=20-=20Creare=20Pagin=C4=83=20Hub=20Set=C4=83ri?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented by Ralph autonomous loop. Iteration: 4 Co-Authored-By: Claude --- scripts/ralph/prd.json | 4 +- scripts/ralph/progress.txt | 6 + src/modules/reports/views/SettingsHubView.vue | 339 ++++++++++++++---- 3 files changed, 284 insertions(+), 65 deletions(-) diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index 5d7f7ed..62fe628 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -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", diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index 5b04a93..e91d148 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -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! diff --git a/src/modules/reports/views/SettingsHubView.vue b/src/modules/reports/views/SettingsHubView.vue index 3201740..7c7318a 100644 --- a/src/modules/reports/views/SettingsHubView.vue +++ b/src/modules/reports/views/SettingsHubView.vue @@ -11,21 +11,61 @@
-

Setări

+

+ + Setări +

+

Configurare și monitorizare sistem

- -
- -

Hub Setări

-

Această pagină va conține carduri pentru toate opțiunile de setări.

-

Implementare completă în US-206

+ +
+ + +
+ +
+
+

OCR Setări

+

Metrici și configurare OCR pentru procesarea bonurilor

+
+ + - - - - OCR Metrics - + + +
+ +
+
+

Cache Stats

+

Statistici și monitorizare cache sistem

+
+ + + + + +
+ +
+
+

Loguri Server

+

Vizualizare și analiză loguri aplicație

+
+ + + + + +
+ +
+
+

Telegram

+

Conectare bot Telegram pentru notificări

+
+
@@ -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); + } }