From 3a6e86d6daa6298a5b54f1c37083289712d37c88 Mon Sep 17 00:00:00 2001 From: Aakash Date: Mon, 1 Dec 2025 12:52:06 +0530 Subject: [PATCH] Update 01-12 --- public/css/dashboard.css | 14 + public/css/va-register.css | 415 ++++++++++++++---- src/server.js | 10 + views/client/dashboard-manage-va-tips.ejs | 350 +++++++++++++++ views/client/dashboard-virtual-assistants.ejs | 3 +- 5 files changed, 695 insertions(+), 97 deletions(-) create mode 100644 views/client/dashboard-manage-va-tips.ejs diff --git a/public/css/dashboard.css b/public/css/dashboard.css index fcd6185..62e108d 100644 --- a/public/css/dashboard.css +++ b/public/css/dashboard.css @@ -1461,6 +1461,7 @@ tr[data-vaid]:hover { background: var(--bg-primary); color: var(--text-primary); transition: border-color 0.2s; + resize: vertical; } .modal-form .form-input:focus { @@ -1477,6 +1478,19 @@ tr[data-vaid]:hover { border-color: var(--color-danger); } +.select-field { + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 16px; + border-radius: 6px; +} + +[data-theme="dark"] .select-field { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); +} + .error-message { color: var(--color-danger); font-size: 0.875rem; diff --git a/public/css/va-register.css b/public/css/va-register.css index 279eb44..6818b17 100644 --- a/public/css/va-register.css +++ b/public/css/va-register.css @@ -64,11 +64,12 @@ body { display: none; flex-direction: column; width: 388px; - background: linear-gradient(to bottom, #f4f4f5, #d0f9f9, #cac5f7); + background: var(--bg-sidebar); padding: 24px; border-radius: 14px; margin: 20px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow); + transition: all 0.3s ease; } .logo { @@ -80,18 +81,24 @@ body { width: 100%; height: auto; max-width: 196px; + filter: brightness(var(--logo-brightness, 1)); } + +[data-theme="dark"] .logo-placeholder img { + --logo-brightness: 0.9; +} + .logo-placeholder h2 { font-size: 32px; font-weight: 700; - color: #000; + color: var(--text-primary); text-align: center; } .form-title-sec { font-size: 24px; font-weight: 700; - color: #000; + color:var(--text-primary); text-align: center; margin-bottom: 24px; } @@ -111,15 +118,25 @@ body { border: 2px solid transparent; cursor: pointer; position: relative; + transition: all 0.3s ease; + background: rgba(255, 255, 255, 0.1); +} + +[data-theme="dark"] .step { + background: rgba(255, 255, 255, 0.05); } .step.active { - border-color: #000000; + border-color: var(--accent-color); +} + +[data-theme="dark"] .step.active { + background: rgba(255, 255, 255, 0.1); } .step.completed .step-number { - background-color: #000000; - border-color: #000000; + background-color: var(--accent-color); + border-color: var(--accent-color); color: white; } @@ -130,30 +147,43 @@ body { display: flex; align-items: center; justify-content: center; - border: 2px solid #00000070; + border: 2px solid var(--accent-color); font-weight: 600; - color: #000000b5; + color: var(--accent-color); transition: all 0.3s ease; + background: rgba(255, 255, 255, 0.8); +} + +[data-theme="dark"] .step-number { + background: rgba(255, 255, 255, 0.1); + border-color: var(--accent-color); + color: var(--text-primary); } .step.active .step-number { - border-color: #000; - color: #000; + border-color:var(--text-primary); + color:var(--text-primary); + opacity: 1; + background: rgba(255, 255, 255, 0.9); +} + +[data-theme="dark"] .step.active .step-number { + background: rgba(255, 255, 255, 0.2); } .step-text { font-size: 14px; - color: #000000b5; + color: var(--text-primary); } .step.active .step-text { - color: #000; + color:var(--text-primary); } .step-connector { height: 24px; width: 2px; - background-color: #00000070; + background-color: var(--accent-color); margin-left: 16px; position: absolute; top: 46px; @@ -161,7 +191,7 @@ body { } .step.active .step-connector { - background-color: #000; + background-color:var(--text-primary); } /* Main Content Styles */ @@ -171,15 +201,17 @@ body { flex-direction: column; padding: 20px; overflow-y: auto; + background-color: var(--bg-primary); } .mobile-progress { - background-color: #f4f4f5; + background-color: var(--bg-secondary); padding: 16px; border-radius: 12px; margin-bottom: 20px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow); overflow-x: auto; + border: 1px solid var(--border-color); } .mobile-progress ol { @@ -204,11 +236,12 @@ body { .form-card { width: 100%; max-width: 450px; - background: white; - border: 1px solid #e5e7eb; + background: var(--bg-card); + border: 1px solid var(--border-color); border-radius: 12px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-lg); padding: 24px; + transition: all 0.3s ease; } .form-title { @@ -216,7 +249,7 @@ body { font-size: 20px; font-weight: 600; margin-bottom: 24px; - color: #000; + color:var(--text-primary); } .form-step { @@ -234,10 +267,17 @@ body { .input-container { position: relative; - background-color: #f9fafb; + background-color: var(--bg-secondary); border-radius: 6px; overflow: hidden; padding: 2px 0; + border: 1px solid transparent; + transition: all 0.3s ease; +} + +.input-container:focus-within { + border-color: var(--accent-light); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .input-label { @@ -246,7 +286,7 @@ body { top: 50%; transform: translateY(-50%); font-size: 14px; - color: #6b7280; + color: var(--text-secondary); transition: all 0.2s ease; pointer-events: none; } @@ -259,6 +299,16 @@ body { outline: none; font-size: 14px; border-radius: 6px; + color: var(--text-primary); + transition: all 0.3s ease; +} + +[data-theme="dark"] .input-field, [data-theme="dark"] .select-field { + background-color: #ffffff1a; +} + +.input-field::placeholder { + color: var(--text-muted); } .select-field { @@ -270,6 +320,10 @@ body { border-radius: 6px; } +[data-theme="dark"] .select-field { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); +} + .input-field:focus + .input-label, .input-field:not(:placeholder-shown) + .input-label, .select-field:focus + .input-label, @@ -277,6 +331,7 @@ body { top: 2px; font-size: 12px; transform: none; + color: var(--accent-light); } .checkbox-group { @@ -289,10 +344,13 @@ body { .checkbox-group input { width: 16px; height: 16px; + accent-color: var(--accent-color); } .checkbox-group label { font-size: 14px; + color: var(--text-primary); + cursor: pointer; } .form-actions { @@ -312,31 +370,33 @@ body { } .btn-primary { - background-color: #000000; + background-color: var(--accent-color); color: white; } .btn-primary:hover { opacity: 0.9; + transform: translateY(-1px); } .btn-secondary { - background-color: #f3f4f6; - color: #374151; + background-color: var(--bg-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); } .btn-secondary:hover { - background-color: #e5e7eb; + background-color: var(--border-color); } .btn-outline { background-color: transparent; - border: 1px solid #070065; - color: #070065; + border: 1px solid var(--accent-light); + color: var(--accent-light); } .btn-outline:hover { - background-color: #070065; + background-color: var(--accent-light); color: white; } @@ -344,6 +404,7 @@ body { .btn:disabled { opacity: 0.6; cursor: not-allowed; + transform: none !important; } .btn-sm { @@ -360,31 +421,109 @@ body { } .payment-option.selected { - border-color: #000000; - background-color: #f0f9ff; + border-color: var(--border-color); + transition: all 0.3s ease; + background: var(--bg-card); +} + +.payment-option:hover { + border-color: var(--accent-light); + transform: translateY(-1px); +} + +.payment-option.selected { + border-color: var(--accent-color); + background-color: rgba(99, 102, 241, 0.1); +} + +[data-theme="dark"] .payment-option.selected { + background-color: rgba(99, 102, 241, 0.2); +} + +/* Button Dark Mode Styles */ +[data-theme="dark"] .btn-primary { + background-color: #6366f1; + color: white; + border: 1px solid #6366f1; +} + +[data-theme="dark"] .btn-primary:hover { + background-color: #4f46e5; + border-color: #4f46e5; + opacity: 1; +} + +[data-theme="dark"] .btn-secondary { + background-color: #374151; + color: #d1d5db; + border: 1px solid #4b5563; +} + +[data-theme="dark"] .btn-secondary:hover { + background-color: #4b5563; + border-color: #6b7280; +} + +[data-theme="dark"] .btn-outline { + background-color: transparent; + border: 1px solid #6366f1; + color: #6366f1; +} + +[data-theme="dark"] .btn-outline:hover { + background-color: #6366f1; + color: white; +} + +[data-theme="dark"] .btn:disabled { + background-color: #374151; + color: #6b7280; + border-color: #4b5563; + opacity: 0.5; +} + +/* Action button dark mode styles */ +[data-theme="dark"] .password-toggle, +[data-theme="dark"] .password-generate, +[data-theme="dark"] .detect-location { + color: #818cf8; +} + +[data-theme="dark"] .password-toggle:hover, +[data-theme="dark"] .password-generate:hover, +[data-theme="dark"] .detect-location:hover { + color: #6366f1; +} + +/* Focus states for dark mode */ +[data-theme="dark"] .btn:focus-visible { + outline: 2px solid #818cf8; + outline-offset: 2px; } .payment-option h4 { margin-bottom: 8px; font-size: 16px; + color: var(--text-primary); } .payment-option p { font-size: 14px; - color: #6b7280; + color: var(--text-secondary); } .payment-details { display: none; margin: 4px 0 16px; padding: 16px; - border: 1px solid #e5e7eb; + border: 1px solid var(--border-color); border-radius: 8px; - background-color: #bdbdbd; + transition: all 0.3s ease; } .payment-details.active { display: block; + animation: slideDown 0.3s ease-out; } .success-message { @@ -394,24 +533,25 @@ body { .success-icon { font-size: 48px; - color: #10b981; + color: var(--success-color); margin-bottom: 16px; } .success-message h3 { font-size: 24px; margin-bottom: 8px; + color: var(--text-primary); } .success-message p { - color: #6b7280; + color: var(--text-secondary); margin-bottom: 24px; } .location-loading { display: none; font-size: 12px; - color: #6b7280; + color: var(--text-secondary); margin-top: 4px; margin-left: 12px; position: absolute; @@ -428,17 +568,17 @@ body { } .profile-incomplete { - background: #fff3cd; - border: 1px solid #ffeaa7; + background: var(--warning-bg); + border: 1px solid var(--warning-border); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; - color: #856404; + color: var(--warning-text); } .password-strength { height: 5px; - background: #e9ecef; + background: var(--bg-secondary); border-radius: 5px; margin-top: 5px; overflow: hidden; @@ -452,7 +592,7 @@ body { } .password-weak { - background: #dc3545; + background: var(--error-color); width: 25%; } @@ -462,7 +602,7 @@ body { } .password-strong { - background: #28a745; + background: var(--success-color); width: 100%; } @@ -473,38 +613,127 @@ body { margin-top: 8px; } -.password-toggle { +.password-toggle, .password-generate, .detect-location { background: none; border: none; - color: #070065; + color: var(--accent-light); cursor: pointer; font-size: 12px; + transition: color 0.3s ease; } -.password-generate { - background: none; - border: none; - color: #070065; - cursor: pointer; - font-size: 12px; +.password-toggle:hover, .password-generate:hover, .detect-location:hover { + color: var(--accent-color); } .form-text { font-size: 12px; - color: #6b7280; + color: var(--text-secondary); margin-top: 4px; } -.detect-location { - background: none; - border: none; - color: #070065; - cursor: pointer; - font-size: 12px; - text-decoration: underline; - margin-top: 5px; +/* Error States */ +.step-error-container { + background-color: rgba(220, 38, 38, 0.1); + border: 1px solid rgba(220, 38, 38, 0.3); + border-radius: 8px; + padding: 12px 16px; + margin-bottom: 20px; + animation: slideDown 0.3s ease-out; } +[data-theme="dark"] .step-error-container { + background-color: rgba(220, 38, 38, 0.2); + border-color: rgba(220, 38, 38, 0.4); +} + +.error-message { + color: var(--error-color); + font-size: 14px; + font-weight: 500; + display: flex; + align-items: center; + gap: 8px; +} + +.error-message::before { + content: "⚠"; + font-size: 16px; +} + +.field-error { + border: 1px solid var(--error-color) !important; + background-color: rgba(220, 38, 38, 0.05) !important; +} + +[data-theme="dark"] .field-error { + background-color: rgba(220, 38, 38, 0.1) !important; +} + +/* Animations */ +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb { + background: var(--border-dark); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { + background: var(--text-secondary); +} + +.btn:focus-visible, +.input-field:focus-visible, +.select-field:focus-visible, +.payment-option:focus-visible { + outline: 2px solid var(--accent-light); + outline-offset: 2px; +} + +/* Selection Color */ +::selection { + background-color: rgba(99, 102, 241, 0.3); + color: var(--text-primary); +} + + /* Responsive styles */ @media (min-width: 1024px) { .sidebar { @@ -520,41 +749,35 @@ body { } } - .step-error-container { - background-color: #fef2f2; - border: 1px solid #fecaca; - border-radius: 8px; - padding: 12px 16px; - margin-bottom: 20px; - animation: slideDown 0.3s ease-out; -} - -.error-message { - color: #dc2626; - font-size: 14px; - font-weight: 500; - display: flex; - align-items: center; - gap: 8px; -} - -.error-message::before { - content: "⚠"; - font-size: 16px; -} - -.field-error { - border: 1px solid #dc2626 !important; - background-color: #fef2f2; -} - -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); +@media (max-width: 1023px) { + [data-theme="dark"] .mobile-progress { + background-color: var(--bg-card); + border: 1px solid var(--border-dark); } - to { - opacity: 1; - transform: translateY(0); + + .mobile-progress .step { + background: rgba(255, 255, 255, 0.05); + } + + [data-theme="dark"] .mobile-progress .step { + background: rgba(255, 255, 255, 0.1); + } +} + +@media print { + [data-theme="dark"] { + --bg-primary: #ffffff; + --bg-card: #ffffff; + --text-primary: #000000; + --text-secondary: #333333; + --border-color: #cccccc; + } + + .sidebar { + display: none; + } + + .btn { + display: none; } } \ No newline at end of file diff --git a/src/server.js b/src/server.js index 0a295d7..93c25a3 100644 --- a/src/server.js +++ b/src/server.js @@ -168,6 +168,16 @@ app.get('/client/profile', async (req, res) => { } }); +app.get('/client/virtual-assistants/manage-tips', async (req, res) => { + try { + // const vaData = await virtualAssistantService.getClientVAs(req.user.id); + res.render('client/dashboard-manage-va-tips'); + } catch (error) { + console.error('Projects error:', error); + res.status(500).render('client/dashboard-manage-va-tips', { error: 'Failed to load profile' }); + } +}); + app.get("/live/:projectId/:vaId", async (req, res) => { const { projectId, vaId } = req.params; diff --git a/views/client/dashboard-manage-va-tips.ejs b/views/client/dashboard-manage-va-tips.ejs new file mode 100644 index 0000000..bc9580f --- /dev/null +++ b/views/client/dashboard-manage-va-tips.ejs @@ -0,0 +1,350 @@ + + + + + + DocVA Client | Dashboard + + + + +
+ +
+ +
+
+ +
+
+
+
+

Unbilled Tips

+
$0
+
+
+ +
+
+
+
+
+
+

Total Tips

+
$0
+
+
+ +
+
+
+
+ + +
+
+ Back + Tip Virtual Assistant +
+
+
+ + + + + + + + + + + + + + +
VoidStatusVirtual Assistant NameDescriptionDate AddedAmount
+
+ +
+
+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/views/client/dashboard-virtual-assistants.ejs b/views/client/dashboard-virtual-assistants.ejs index 73e1796..732dbc0 100644 --- a/views/client/dashboard-virtual-assistants.ejs +++ b/views/client/dashboard-virtual-assistants.ejs @@ -121,8 +121,9 @@
-
+

Virtual Assistants 0 VAs

+ Manage Tips