Update 01-12
This commit is contained in:
parent
68e3cf14c9
commit
3a6e86d6da
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
@media (max-width: 1023px) {
|
||||
[data-theme="dark"] .mobile-progress {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-dark);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #dc2626;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.mobile-progress .step {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.error-message::before {
|
||||
content: "⚠";
|
||||
font-size: 16px;
|
||||
[data-theme="dark"] .mobile-progress .step {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.field-error {
|
||||
border: 1px solid #dc2626 !important;
|
||||
background-color: #fef2f2;
|
||||
@media print {
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #333333;
|
||||
--border-color: #cccccc;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
.btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DocVA Client | Dashboard</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/public/css/dashboard.css">
|
||||
</head>
|
||||
<body class="dashboard-body">
|
||||
<div id="root">
|
||||
<nav class="dashboard-header">
|
||||
<div class="header-content">
|
||||
<div class="header-logo">
|
||||
<div class="logo-container">
|
||||
<h2 class="sidebar-title">DocVA Client Portal</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-nav">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item">
|
||||
<a href="/client/dashboard" class="nav-button">
|
||||
<i class="fas fa-chart-bar"></i>Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/client/virtual-assistants" class="nav-button active">
|
||||
<i class="fas fa-users"></i>Virtual Assistants
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/client/projects" class="nav-button">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="mobile-menu-button">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="dashboard-container">
|
||||
<aside class="dashboard-sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="sidebar-list">
|
||||
<li class="sidebar-item">
|
||||
<a href="/client/profile" class="sidebar-link">
|
||||
<i class="fas fa-user sidebar-icon"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/client/dashboard" class="sidebar-link">
|
||||
<i class="fas fa-chart-bar sidebar-icon"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/client/virtual-assistants" class="sidebar-link active">
|
||||
<i class="fas fa-users sidebar-icon"></i>
|
||||
<span>Virtual Assistants</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/client/projects" class="sidebar-link">
|
||||
<i class="fas fa-file-invoice sidebar-icon"></i>
|
||||
<span>Projects</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="javascript:void(0);" class="sidebar-link" id="logoutButton">
|
||||
<i class="fas fa-sign-out-alt sidebar-icon"></i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="dashboard-main">
|
||||
<div class="dashboard-content">
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-info">
|
||||
<h3>Unbilled Tips</h3>
|
||||
<div class="stat-value" id="vaUnbilledTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<i class="fas fa-file-invoice fa-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-info">
|
||||
<h3>Total Tips</h3>
|
||||
<div class="stat-value" id="vaTotalTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<i class="fas fa-dollar fa-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Virtual Assistants List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||
<a href="/client/virtual-assistants" class="btn btn-secondary">Back</a>
|
||||
<span class="btn btn-primary" id="tipVaAddBtn">Tip Virtual Assistant</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Void</th>
|
||||
<th>Status</th>
|
||||
<th>Virtual Assistant Name</th>
|
||||
<th>Description</th>
|
||||
<th>Date Added</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaTipTableBody">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="vaEmptyTipState" style="display: none;">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-users"></i>
|
||||
<h3>No Tip Found</h3>
|
||||
<p>You haven't gave any Tip yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div id="tipModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Tip Virtual Assistant</h2>
|
||||
<button class="modal-close" onclick="closeTipModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="modal-form" id="tipForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Virtual Assistant</label>
|
||||
<select name="vaForTip" class="form-input select-field" id="vaForTip" required>
|
||||
<option value="">-- Select Virtual Assistant --</option>
|
||||
<option value="va 1">VA 1</option>
|
||||
<!-- Options will be populated dynamically -->
|
||||
</select>
|
||||
<div class="error-message" id="vaForTipError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Amount</label>
|
||||
<input type="text" class="form-input" id="vaTipAmount" required>
|
||||
<div class="error-message" id="vaTipAmountError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Description</label>
|
||||
<textarea name="vaTipDescription" class="form-input" id="vaTipDescription"></textarea>
|
||||
<div class="error-message" id="vaTipDescriptionError"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="cancel-btn" onclick="closeTipModal()">Cancel</button>
|
||||
<button type="submit" class="save-btn" id="savePasswordBtn">Submit Tip</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logoutModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Confirm Logout</h2>
|
||||
<button class="modal-close" onclick="closeLogoutModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="logout-modal-body">
|
||||
<div class="logout-icon">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
</div>
|
||||
<h3 class="logout-title">Are you sure you want to logout?</h3>
|
||||
<p class="logout-message">You will be logged out of your account and redirected to the login page.</p>
|
||||
<div class="logout-actions">
|
||||
<button class="logout-cancel-btn" onclick="closeLogoutModal()">Cancel</button>
|
||||
<button class="logout-confirm-btn" id="confirmLogoutBtn">Yes, Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Theme management
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
|
||||
function getSystemTheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
// Initialize theme
|
||||
const savedTheme = getSystemTheme();
|
||||
setTheme(savedTheme);
|
||||
|
||||
// API base URL
|
||||
const API_BASE = '/api/v1/client';
|
||||
|
||||
// Auth token management
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('knoptpq');
|
||||
}
|
||||
|
||||
async function fetchWithAuth(url, options = {}) {
|
||||
const token = getAuthToken();
|
||||
if (!token) {
|
||||
window.location.href = '/client/login';
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'token': `${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
}
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('knoptpq');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/client/login';
|
||||
return;
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
try {
|
||||
// Call logout API
|
||||
await fetchWithAuth(`${API_BASE}/logout`, {
|
||||
method: 'POST'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Logout API error:', error);
|
||||
} finally {
|
||||
// Clear local storage and redirect
|
||||
localStorage.removeItem('knoptpq');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/client/login';
|
||||
}
|
||||
}
|
||||
|
||||
// Logout Modal Functions
|
||||
function openLogoutModal() {
|
||||
const modal = document.getElementById('logoutModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeLogoutModal() {
|
||||
const modal = document.getElementById('logoutModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
function openTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Clear form
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function closeTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// Clear form and errors
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function clearErrorMessages() {
|
||||
document.getElementById('vaForTipError').textContent = '';
|
||||
document.getElementById('vaTipAmountError').textContent = '';
|
||||
document.getElementById('vaTipDescriptionError').textContent = '';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
document.getElementById('tipVaAddBtn').addEventListener('click', openTipModal);
|
||||
|
||||
document.getElementById('tipModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeLogoutModal();
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('logoutModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeLogoutModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Logout button - opens confirmation modal instead of directly logging out
|
||||
document.getElementById('logoutButton').addEventListener('click', openLogoutModal);
|
||||
|
||||
// Confirm logout button
|
||||
document.getElementById('confirmLogoutBtn').addEventListener('click', handleLogout);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -121,8 +121,9 @@
|
|||
|
||||
<!-- Virtual Assistants List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||
<h2 class="section-title">Virtual Assistants <span class="total-count" id="vaListCount">0 VAs</span></h2>
|
||||
<a href="/client/virtual-assistants/manage-tips" class="btn btn-primary">Manage Tips</a>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
|
|
|
|||
Loading…
Reference in New Issue