From a94846515f67c425c653a6d1ea105bdbc4046926 Mon Sep 17 00:00:00 2001 From: Harsh Date: Thu, 5 Feb 2026 17:20:30 +0530 Subject: [PATCH] fixedddd --- client/src/Style/UserDashboard.css | 1538 ++++++++++++++++- .../components/Dashboard/CodingStatsTab.jsx | 131 ++ .../components/Dashboard/CollaborationTab.jsx | 155 ++ .../components/Dashboard/DashboardSidebar.jsx | 19 +- .../src/components/Dashboard/PortfolioTab.jsx | 538 ++++++ .../src/components/Dashboard/SettingsTab.jsx | 388 +++-- .../src/components/Dashboard/SnippetsTab.jsx | 209 ++- client/src/components/Navbar.jsx | 1 - client/src/components/UserDashboard.jsx | 85 +- 9 files changed, 2781 insertions(+), 283 deletions(-) create mode 100644 client/src/components/Dashboard/CodingStatsTab.jsx create mode 100644 client/src/components/Dashboard/CollaborationTab.jsx create mode 100644 client/src/components/Dashboard/PortfolioTab.jsx diff --git a/client/src/Style/UserDashboard.css b/client/src/Style/UserDashboard.css index 835646c..bc278d5 100644 --- a/client/src/Style/UserDashboard.css +++ b/client/src/Style/UserDashboard.css @@ -31,27 +31,32 @@ width: 60px; } -.sidebar-toggle-btn { - position: absolute; - right: -12px; - top: 50%; - transform: translateY(-50%); - background: #333; - border: 1px solid #444; - color: #f0f0f0; - width: 24px; - height: 40px; - border-radius: 0 4px 4px 0; + + +.sidebar-hamburger-toggle { + background: rgba(212, 88, 31, 0.2); + border: 1px solid #d4581f; + color: #ff7043; + width: 36px; + height: 36px; + border-radius: 8px; cursor: pointer; - z-index: 10; display: flex; align-items: center; justify-content: center; - transition: background 0.3s ease; + transition: all 0.3s ease; + margin: 0; + font-size: 1.1rem; + position: absolute; + top: 15px; + right: 12px; + z-index: 100; } -.sidebar-toggle-btn:hover { - background: #444; +.sidebar-hamburger-toggle:hover { + background: rgba(212, 88, 31, 0.3); + color: #fff; + transform: scale(1.05); } .sidebar-profile { @@ -61,10 +66,13 @@ display: flex; flex-direction: column; align-items: center; + position: relative; + padding-top: 60px; } .sidebar-profile.compact { padding: 10px 0 15px; + padding-top: 50px; } .sidebar-profile.compact .sidebar-avatar { @@ -139,6 +147,14 @@ display: none; } +.dashboard-sidebar.collapsed .sidebar-hamburger-toggle { + width: 30px; + height: 30px; + font-size: 1rem; + top: 12px; + right: 10px; +} + .dashboard-sidebar.collapsed .nav-item::before { content: attr(data-tooltip); position: fixed; @@ -333,6 +349,14 @@ border-left: 4px solid #d4581f; } +.metric-card.tertiary { + border-left: 4px solid #d4581f; +} + +.metric-card.quaternary { + border-left: 4px solid #4caf50; +} + .metric-card.success { border-left: 4px solid #4caf50; } @@ -679,6 +703,52 @@ padding: 20px; display: flex; gap: 15px; + align-items: center; +} + +.achievement-card.earned { + border-left: 4px solid #4caf50; + background: rgba(76, 175, 80, 0.1); +} + +.achievement-card.locked { + border-left: 4px solid #666; + opacity: 0.7; +} + +.achievement-icon { + font-size: 2rem; + color: #ff7043; + flex-shrink: 0; +} + +.achievement-card.earned .achievement-icon { + color: #4caf50; +} + +.achievement-card.locked .achievement-icon { + color: #666; +} + +.achievement-content { + flex: 1; +} + +.achievement-content h4 { + margin: 0 0 5px 0; + color: #fff; + font-size: 1.1rem; +} + +.achievement-content p { + margin: 0 0 5px 0; + color: #aaa; + font-size: 0.9rem; +} + +.achievement-date { + color: #888; + font-size: 0.8rem; } .achievement-icon-large { @@ -945,6 +1015,17 @@ input:checked + .slider:before { border: 1px solid #444; border-radius: 8px; padding: 20px; + transition: all 0.3s ease; +} + +.session-card.active { + border-color: #00ffe0; + background: rgba(0, 255, 224, 0.1); +} + +.session-card:hover { + transform: translateY(-2px); + border-color: #d4581f; } .session-header { @@ -974,6 +1055,42 @@ input:checked + .slider:before { color: #ff7043; } +.session-meta { + display: flex; + gap: 15px; + margin-top: 5px; + flex-wrap: wrap; +} + +.session-status { + display: flex; + align-items: center; + gap: 5px; + font-size: 0.85rem; +} + +.session-status.active { + color: #00ffe0; +} + +.session-status.completed { + color: #4caf50; +} + +.session-duration { + color: #aaa; + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 5px; +} + +.session-actions { + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #444; +} + /* Settings Grid */ .settings-grid { display: grid; @@ -993,95 +1110,1348 @@ input:checked + .slider:before { margin: 0 0 20px 0; } -.profile-form { +.profile-photo-section { + text-align: center; + margin-bottom: 30px; +} + +.profile-photo-large { + width: 120px; + height: 120px; + border-radius: 50%; + object-fit: cover; + border: 3px solid #d4581f; + margin-bottom: 15px; +} + +.photo-upload { display: flex; - flex-direction: column; - gap: 15px; + justify-content: center; + gap: 10px; } .form-group { - display: flex; - flex-direction: column; - gap: 5px; + margin-bottom: 20px; } .form-group label { + display: block; color: #ff7043; - font-size: 0.9rem; - margin-bottom: 5px; + margin-bottom: 8px; + font-weight: 600; } -.input-field, -.textarea-field { - padding: 10px; +.form-input, +.form-textarea { + width: 100%; + padding: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid #444; border-radius: 6px; color: #fff; font-family: 'Lora', serif; + transition: border-color 0.3s ease; } -.textarea-field { +.form-input:focus, +.form-textarea:focus { + outline: none; + border-color: #d4581f; +} + +.form-textarea { resize: vertical; - min-height: 80px; + min-height: 100px; } -.privacy-options { +.form-value { + padding: 12px; + background: rgba(0, 0, 0, 0.2); + border: 1px solid #444; + border-radius: 6px; + color: #ddd; + margin: 0; +} + +.form-actions { + display: flex; + gap: 15px; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #444; +} + +.settings-grid { + display: grid; + grid-template-columns: 1fr; + gap: 30px; +} + +.portfolio-grid { + display: grid; + grid-template-columns: 1.5fr 1.5fr; + gap: 30px; + margin-bottom: 30px; +} + +.portfolio-main-content { display: flex; flex-direction: column; + gap: 30px; +} + +.portfolio-preview-sidebar { + position: sticky; + top: 100px; + align-self: start; + min-width: 420px; +} + +.portfolio-section-card { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 25px; +} + +.portfolio-section-card .section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; + padding-bottom: 15px; + border-bottom: 1px solid #444; +} + +.portfolio-section-card .section-header h3 { + margin: 0; + color: #ff7043; + display: flex; + align-items: center; gap: 10px; } -/* Buttons */ -.btn-primary { - background: #d4581f; - color: white; - border: none; - padding: 12px 20px; - border-radius: 6px; - cursor: pointer; - font-family: 'Lora', serif; +/* Projects Styles */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 20px; + margin-bottom: 30px; +} + +.project-card { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + position: relative; + transition: all 0.3s ease; +} + +.project-card:hover { + transform: translateY(-3px); + border-color: #d4581f; + box-shadow: 0 5px 15px rgba(212, 88, 31, 0.2); +} + +.project-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 12px; +} + +.project-header h4 { + margin: 0; + color: #fff; + font-size: 1.2rem; + flex: 1; + margin-right: 10px; +} + +.project-date { + background: rgba(212, 88, 31, 0.2); + color: #ff7043; + padding: 4px 10px; + border-radius: 4px; + font-size: 0.8rem; font-weight: 600; - transition: background 0.3s ease; + flex-shrink: 0; } -.btn-primary:hover { - background: #ff7043; +.project-description { + color: #ddd; + margin: 0 0 15px 0; + line-height: 1.5; } -/* Responsive Design */ -@media (max-width: 1200px) { - .dashboard-wrapper { - flex-direction: column; - } - - .dashboard-sidebar { - width: 100%; - min-height: auto; - position: static; - } - - .dashboard-content { - min-height: auto; - } - - .dashboard-grid { - grid-template-columns: 1fr; - } - - .settings-grid { - grid-template-columns: 1fr; - } +.project-tech { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 15px; } -@media (max-width: 768px) { - .dashboard-container { - padding-top: 70px; - } - - .dashboard-content { - padding: 20px 15px; - } +.tech-tag { + background: rgba(0, 255, 224, 0.1); + color: #00ffe0; + padding: 4px 10px; + border-radius: 20px; + font-size: 0.8rem; + border: 1px solid rgba(0, 255, 224, 0.3); +} + +.project-links { + display: flex; + gap: 12px; + margin-bottom: 10px; +} + +.project-link { + display: flex; + align-items: center; + gap: 5px; + color: #ff7043; + text-decoration: none; + font-size: 0.9rem; + transition: color 0.3s ease; +} + +.project-link:hover { + color: #00ffe0; +} + +.project-delete { + position: absolute; + top: 15px; + right: 15px; + padding: 6px; + font-size: 0.9rem; +} + +.add-project-form { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + margin-top: 20px; +} + +.add-project-form h4 { + color: #ff7043; + margin: 0 0 20px 0; + padding-bottom: 10px; + border-bottom: 1px solid #444; +} + +/* Experience Styles */ +.experiences-list { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 30px; +} + +.experience-card { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + position: relative; + transition: all 0.3s ease; +} + +.experience-card:hover { + transform: translateY(-2px); + border-color: #d4581f; +} + +.experience-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 12px; +} + +.experience-header h4 { + margin: 0 0 5px 0; + color: #fff; + font-size: 1.2rem; +} + +.experience-header h5 { + margin: 0; + color: #00ffe0; + font-size: 1rem; + font-weight: 600; +} + +.experience-duration { + background: rgba(212, 88, 31, 0.2); + color: #ff7043; + padding: 4px 10px; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 600; + white-space: nowrap; +} + +.experience-description { + color: #ddd; + margin: 0; + line-height: 1.5; +} + +.experience-delete { + position: absolute; + top: 15px; + right: 15px; + padding: 6px; + font-size: 0.9rem; +} + +.add-experience-form { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + margin-top: 20px; +} + +.add-experience-form h4 { + color: #ff7043; + margin: 0 0 20px 0; + padding-bottom: 10px; + border-bottom: 1px solid #444; +} + +/* Form Styles */ +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; +} + +@media (max-width: 768px) { + .form-row { + grid-template-columns: 1fr; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .project-header { + flex-direction: column; + gap: 10px; + } + + .experience-header { + flex-direction: column; + gap: 10px; + } + + .project-links { + flex-wrap: wrap; + } + + .portfolio-section-card .section-header { + flex-direction: column; + align-items: flex-start; + gap: 15px; + } +} + +.portfolio-preview-card { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 25px; + min-width: 400px; +} + +.portfolio-preview-card h3 { + color: #ff7043; + margin: 0 0 20px 0; +} + +.portfolio-preview-content { + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; + padding: 20px; +} + +.preview-header { + display: flex; + gap: 20px; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #444; +} + +.preview-avatar { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + border: 2px solid #d4581f; +} + +.preview-info h2 { + margin: 0 0 10px 0; + color: #fff; +} + +.preview-info p { + margin: 0 0 15px 0; + color: #aaa; +} + +.preview-links { + display: flex; + gap: 15px; +} + +.preview-links a { + color: #ff7043; + font-size: 1.2rem; + transition: color 0.3s ease; +} + +.preview-links a:hover { + color: #00ffe0; +} + +.preview-section { + margin-bottom: 20px; +} + +.preview-section h4 { + color: #ff7043; + margin: 0 0 15px 0; +} + +.skills-tags { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.skill-tag { + background: rgba(212, 88, 31, 0.2); + color: #ff7043; + padding: 5px 12px; + border-radius: 20px; + font-size: 0.9rem; +} + +.portfolio-actions { + display: flex; + gap: 15px; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid #444; +} + +.account-actions { + display: flex; + flex-direction: column; + gap: 15px; +} + +.account-buttons { + display: flex; + gap: 15px; +} + +.compact-profile-card { + max-width: 500px; +} + +.profile-summary { + display: flex; + flex-direction: column; + gap: 20px; +} + +.profile-avatar-section { + display: flex; + align-items: center; + gap: 15px; + padding: 15px; + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; +} + +.profile-avatar-small { + width: 60px; + height: 60px; + border-radius: 50%; + object-fit: cover; + border: 2px solid #d4581f; +} + +.profile-basic-info h4 { + margin: 0 0 5px 0; + color: #fff; + font-size: 1.2rem; +} + +.profile-email { + margin: 0; + color: #aaa; + display: flex; + align-items: center; + gap: 8px; +} + +.profile-bio { + padding: 15px; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; + border-left: 3px solid #d4581f; +} + +.profile-bio p { + margin: 0; + color: #ddd; + line-height: 1.5; +} + +.profile-links { + display: flex; + flex-direction: column; + gap: 10px; + padding: 15px; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; +} + +.profile-links p { + margin: 0; + color: #ddd; + display: flex; + align-items: center; + gap: 8px; +} + +.profile-links a { + color: #00ffe0; + text-decoration: none; + transition: color 0.3s ease; +} + +.profile-links a:hover { + color: #00dcc8; + text-decoration: underline; +} + +.account-actions-card { + max-width: 500px; +} + +/* Settings Sections */ +.settings-section { + display: flex; + flex-direction: column; + gap: 20px; +} + +.setting-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; + border: 1px solid #444; +} + +.toggle-setting { + padding: 12px 15px; +} + +.action-setting { + padding: 15px; +} + +.setting-label { + display: flex; + flex-direction: column; + gap: 5px; + color: #fff; + font-weight: 600; +} + +.setting-label svg { + margin-right: 8px; + color: #ff7043; +} + +.setting-description { + color: #aaa; + font-size: 0.9rem; + font-weight: normal; + margin-top: 3px; +} + +.setting-select { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 6px; + color: #fff; + padding: 8px 12px; + font-family: 'Lora', serif; + cursor: pointer; + min-width: 120px; +} + +.setting-select:focus { + outline: none; + border-color: #d4581f; +} + +.setting-select option { + background: #2d2d2d; + color: #fff; +} + +/* Toggle Switch Styles */ +.toggle-switch { + position: relative; + display: inline-block; + width: 50px; + height: 24px; +} + +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 24px; +} + +.slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked + .slider { + background-color: #d4581f; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +/* Action Buttons */ +.action-setting .btn-secondary { + background: transparent; + color: #f0f0f0; + border: 1px solid #444; + padding: 8px 16px; + border-radius: 6px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 0.9rem; +} + +.action-setting .btn-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: #666; +} + +.logout-btn { + background: #00ffe0; + color: #000; + font-weight: 700; +} + +.logout-btn:hover { + background: #00dcc8; + transform: translateY(-2px); +} + +.delete-account-btn { + background: #f44336; + font-weight: 700; +} + +.delete-account-btn:hover { + background: #d32f2f; + transform: translateY(-2px); +} + +.account-warning { + background: rgba(244, 67, 54, 0.1); + border: 1px solid rgba(244, 67, 54, 0.3); + border-radius: 6px; + padding: 15px; + color: #f44336; + font-size: 0.9rem; + line-height: 1.5; +} + +.portfolio-tips { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; +} + +.portfolio-tips h3 { + color: #ff7043; + margin: 0 0 15px 0; +} + +.portfolio-tips ul { + margin: 0; + padding-left: 20px; +} + +.portfolio-tips li { + color: #ddd; + margin-bottom: 8px; +} + +.language-distribution { + display: flex; + flex-direction: column; + gap: 15px; +} + +.language-item { + display: flex; + align-items: center; + gap: 15px; +} + +.language-name { + width: 100px; + color: #fff; + font-size: 0.9rem; +} + +.language-progress { + flex: 1; + height: 8px; + background: #333; + border-radius: 4px; + overflow: hidden; +} + +.language-bar { + height: 100%; + transition: width 0.3s ease; +} + +.language-count { + width: 30px; + text-align: right; + color: #aaa; + font-size: 0.9rem; +} + +.collaboration-history { + margin-bottom: 30px; +} + +.collaboration-history h3 { + color: #ff7043; + margin: 0 0 20px 0; +} + +.sessions-list { + display: flex; + flex-direction: column; + gap: 15px; +} + +.collaboration-insights { + margin-bottom: 30px; +} + +.collaboration-insights h3 { + color: #ff7043; + margin: 0 0 20px 0; +} + +.insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.insight-card { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; +} + +.insight-card h4 { + color: #fff; + margin: 0 0 10px 0; +} + +.insight-card p { + color: #aaa; + margin: 0; + font-size: 0.9rem; +} + +.collaboration-tips { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; +} + +.collaboration-tips h3 { + color: #ff7043; + margin: 0 0 15px 0; +} + +.collaboration-tips ul { + margin: 0; + padding-left: 20px; +} + +/* Portfolio Preview Enhancements */ +.preview-projects, +.preview-experiences { + display: flex; + flex-direction: column; + gap: 15px; +} + +.preview-project, +.preview-experience { + background: rgba(0, 0, 0, 0.2); + border: 1px solid #444; + border-radius: 6px; + padding: 15px; +} + +.preview-project h5, +.preview-experience h5 { + margin: 0 0 8px 0; + color: #fff; + font-size: 1rem; +} + +.preview-project h6, +.preview-experience h6 { + margin: 0 0 10px 0; + color: #00ffe0; + font-size: 0.9rem; + font-weight: 600; +} + +.preview-tech { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 10px; +} + +.preview-tech-tag { + background: rgba(0, 255, 224, 0.1); + color: #00ffe0; + padding: 3px 8px; + border-radius: 15px; + font-size: 0.75rem; + border: 1px solid rgba(0, 255, 224, 0.3); +} + +.more-indicator { + color: #888; + font-style: italic; + text-align: center; + margin: 10px 0 0 0; + padding-top: 10px; + border-top: 1px solid #444; +} + +/* Snippets Tab Styles */ +.snippet-form-card { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 25px; + margin-bottom: 30px; +} + +.snippet-form-card h3 { + color: #ff7043; + margin: 0 0 20px 0; + font-size: 1.3rem; +} + +.snippet-input, +.snippet-select, +.snippet-textarea { + width: 100%; + margin-bottom: 15px; + padding: 12px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 6px; + color: #fff; + font-family: 'Lora', serif; + transition: border-color 0.3s ease; +} + +.snippet-input:focus, +.snippet-select:focus, +.snippet-textarea:focus { + outline: none; + border-color: #d4581f; +} + +.snippet-textarea { + resize: vertical; + min-height: 120px; + font-family: 'Courier New', monospace; + font-size: 0.9rem; +} + +.snippets-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 20px; +} + +.snippet-card { + background: rgba(0, 0, 0, 0.5); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + transition: all 0.3s ease; +} + +.snippet-card:hover { + transform: translateY(-3px); + border-color: #d4581f; + box-shadow: 0 5px 15px rgba(212, 88, 31, 0.2); +} + +.snippet-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 12px; +} + +.snippet-header h4 { + margin: 0; + color: #fff; + font-size: 1.1rem; + flex: 1; + margin-right: 10px; +} + +.snippet-language { + background: rgba(212, 88, 31, 0.2); + color: #ff7043; + padding: 4px 10px; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + flex-shrink: 0; +} + +.snippet-description { + color: #aaa; + margin: 0 0 15px 0; + font-size: 0.9rem; + line-height: 1.4; +} + +.snippet-code { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: 4px; + padding: 12px; + margin: 0 0 15px 0; + color: #ddd; + font-size: 0.85rem; + font-family: 'Courier New', monospace; + overflow-x: auto; + white-space: pre-wrap; + max-height: 150px; + overflow-y: auto; +} + +.snippet-actions { + display: flex; + gap: 8px; + justify-content: flex-end; +} + +.btn-icon { + background: transparent; + border: 1px solid #444; + color: #f0f0f0; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 5px; +} + +.btn-icon:hover { + background: rgba(212, 88, 31, 0.2); + border-color: #d4581f; + transform: translateY(-1px); +} + +.btn-icon.btn-danger:hover { + background: rgba(244, 67, 54, 0.2); + border-color: #f44336; +} + +/* Enhanced Snippets Tab Styles */ +.snippets-layout { + display: flex; + flex-direction: column; + gap: 30px; +} + +.snippet-form-fields { + display: flex; + flex-direction: column; + gap: 15px; +} + +.snippet-form-actions { + display: flex; + gap: 12px; + margin-top: 10px; +} + +.snippet-form-actions .btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.snippets-section { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 8px; + padding: 20px; +} + +.snippets-section .section-header { + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 15px; +} + +.snippets-section .section-header h3 { + margin: 0; + color: #ff7043; + font-size: 1.3rem; +} + +.snippets-controls { + display: flex; + gap: 10px; +} + +.snippet-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 0; + padding: 8px 0; + border-top: 1px solid #333; + border-bottom: 1px solid #333; +} + +.snippet-date { + color: #888; + font-size: 0.8rem; +} + +.snippet-code { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: 4px; + padding: 12px; + margin: 0 0 15px 0; + color: #ddd; + font-size: 0.85rem; + font-family: 'Courier New', monospace; + overflow-x: auto; + white-space: pre-wrap; + max-height: 120px; + overflow-y: auto; +} + +@media (max-width: 768px) { + .snippets-section .section-header { + flex-direction: column; + align-items: flex-start; + } + + .settings-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .setting-item { + flex-direction: column; + align-items: flex-start; + gap: 15px; + } + + .account-buttons { + flex-direction: column; + } + + .btn-danger { + width: 100%; + } + + .snippets-controls { + width: 100%; + justify-content: stretch; + } + + .snippets-controls .btn-small { + flex: 1; + text-align: center; + } + + .snippet-form-actions { + flex-direction: column; + } +} + +.profile-form { + display: flex; + flex-direction: column; + gap: 15px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 5px; +} + +.form-group label { + color: #ff7043; + font-size: 0.9rem; + margin-bottom: 5px; +} + +.input-field, +.textarea-field { + padding: 10px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid #444; + border-radius: 6px; + color: #fff; + font-family: 'Lora', serif; +} + +.textarea-field { + resize: vertical; + min-height: 80px; +} + +.privacy-options { + display: flex; + flex-direction: column; + gap: 10px; +} + +.settings-card h3 { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #444; +} + +.settings-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 30px; + justify-content: flex-start; +} + +/* Buttons */ +.btn-primary { + background: #d4581f; + color: white; + border: none; + padding: 12px 20px; + border-radius: 6px; + cursor: pointer; + font-family: 'Lora', serif; + font-weight: 600; + transition: background 0.3s ease; + display: flex; + align-items: center; + gap: 8px; + justify-content: center; +} + +.btn-primary:hover { + background: #ff7043; +} + +.btn-danger { + background: #f44336; + color: white; + border: none; + padding: 12px 20px; + border-radius: 6px; + cursor: pointer; + font-family: 'Lora', serif; + font-weight: 600; + transition: background 0.3s ease; + display: flex; + align-items: center; + gap: 8px; + justify-content: center; + flex: 1; +} + +.btn-danger:hover { + background: #d32f2f; + transform: translateY(-2px); +} + +.btn-secondary { + background: transparent; + color: #f0f0f0; + border: 1px solid #444; + padding: 12px 20px; + border-radius: 6px; + cursor: pointer; + font-family: 'Lora', serif; + font-weight: 600; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 8px; + justify-content: center; +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: #666; +} + +.btn-small { + padding: 6px 12px; + border: 1px solid; + border-radius: 4px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.3s ease; + background: transparent; + color: #f0f0f0; +} + +.btn-small.primary { + background: #00ffe0; + color: #000; + border-color: #00ffe0; +} + +.btn-small.secondary { + background: transparent; + color: #f0f0f0; + border-color: #444; +} + +.btn-small.danger { + background: #f44336; + color: white; + border-color: #f44336; +} + +.btn-small:hover { + opacity: 0.9; + transform: translateY(-1px); +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .dashboard-wrapper { + flex-direction: column; + } + + .dashboard-sidebar { + width: 100%; + min-height: auto; + position: static; + } + + .dashboard-content { + min-height: auto; + } + + .dashboard-grid { + grid-template-columns: 1fr; + } + + .settings-grid { + grid-template-columns: 1fr; + } + + .portfolio-grid { + grid-template-columns: 1fr; + } + + .portfolio-preview-sidebar { + position: static; + margin-top: 30px; + } + + .stats-grid .stat-card.wide { + grid-column: 1; + } +} + +@media (max-width: 768px) { + .dashboard-container { + padding-top: 70px; + } + + .dashboard-content { + padding: 20px 15px; + } .overview-metrics { grid-template-columns: 1fr; @@ -1114,4 +2484,28 @@ input:checked + .slider:before { flex-direction: column; gap: 10px; } + + .preview-header { + flex-direction: column; + text-align: center; + } + + .session-meta { + flex-direction: column; + gap: 8px; + } + + .language-item { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .language-name { + width: auto; + } + + .portfolio-actions { + flex-direction: column; + } } \ No newline at end of file diff --git a/client/src/components/Dashboard/CodingStatsTab.jsx b/client/src/components/Dashboard/CodingStatsTab.jsx new file mode 100644 index 0000000..4fca77e --- /dev/null +++ b/client/src/components/Dashboard/CodingStatsTab.jsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { FaChartBar, FaClock, FaCode, FaBrain, FaCheck, FaTimes } from 'react-icons/fa'; +import '../../Style/UserDashboard.css'; + +const CodingStatsTab = ({ stats, sessions, snippets }) => { + // Calculate advanced statistics + const totalExecutionTime = sessions.reduce((sum, session) => { + if (session.endedAt) { + const start = new Date(session.startedAt).getTime(); + const end = new Date(session.endedAt).getTime(); + return sum + (end - start); + } + return sum; + }, 0); + + const avgSessionTime = sessions.length > 0 ? totalExecutionTime / sessions.length / 1000 / 60 : 0; + + const languageDistribution = snippets.reduce((acc, snippet) => { + acc[snippet.language] = (acc[snippet.language] || 0) + 1; + return acc; + }, {}); + + const mostUsedLanguage = Object.keys(languageDistribution).length > 0 + ? Object.entries(languageDistribution).sort(([,a], [,b]) => b - a)[0][0] + : 'None'; + + return ( +
+
+

Coding Statistics

+

Detailed analytics of your coding activity

+
+ + {/* Main Stats Cards */} +
+
+

Total Executions

+
{stats?.runs || 0}
+
Code snippets executed
+
+ +
+

Average Session Time

+
{avgSessionTime.toFixed(1)}m
+
Per collaboration session
+
+ +
+

Snippets Created

+
{snippets.length}
+
Total code snippets saved
+
+ +
+

AI Interactions

+
{(stats?.aiExplains || 0) + (stats?.aiDebugs || 0)}
+
AI assistant usage
+
+
+ + {/* Charts Section */} +
+

Activity Overview

+
+ +

Interactive charts coming soon

+

Visualize your coding patterns and progress over time

+
+
+ + {/* Language Distribution */} +
+
+

Language Distribution

+
+ {Object.keys(languageDistribution).length > 0 ? ( + Object.entries(languageDistribution).map(([language, count]) => ( +
+ {language} +
+
+
+ {count} +
+ )) + ) : ( +

No snippets created yet

+ )} +
+
+
+ + {/* Productivity Insights */} +
+
+

Success Rate

+
+ {stats?.runs > 0 ? Math.round(((stats?.runs - (stats?.errors || 0)) / stats.runs) * 100) : 0}% +
+
Successful executions
+
+ +
+

Error Rate

+
{stats?.errors || 0}
+
Execution errors encountered
+
+ +
+

Favorite Language

+
{mostUsedLanguage}
+
Most frequently used
+
+ +
+

Total Coding Time

+
{Math.round(totalExecutionTime / 1000 / 60)}m
+
Across all sessions
+
+
+
+ ); +}; + +export default CodingStatsTab; \ No newline at end of file diff --git a/client/src/components/Dashboard/CollaborationTab.jsx b/client/src/components/Dashboard/CollaborationTab.jsx new file mode 100644 index 0000000..371937f --- /dev/null +++ b/client/src/components/Dashboard/CollaborationTab.jsx @@ -0,0 +1,155 @@ +import React from 'react'; +import { FaUsers, FaClock, FaCode, FaCheck, FaTimes, FaCalendar } from 'react-icons/fa'; +import '../../Style/UserDashboard.css'; + +const CollaborationTab = ({ sessions }) => { + // Sort sessions by date (newest first) + const sortedSessions = [...sessions].sort((a, b) => + new Date(b.startedAt) - new Date(a.startedAt) + ); + + // Calculate collaboration statistics + const totalSessions = sessions.length; + const completedSessions = sessions.filter(s => s.endedAt).length; + const activeSessions = sessions.filter(s => !s.endedAt).length; + + const totalTime = sessions.reduce((sum, session) => { + if (session.endedAt) { + const start = new Date(session.startedAt).getTime(); + const end = new Date(session.endedAt).getTime(); + return sum + (end - start); + } + return sum; + }, 0); + + const avgSessionTime = completedSessions > 0 ? totalTime / completedSessions / 1000 / 60 : 0; + + return ( +
+
+

Collaboration History

+

Track your collaborative coding sessions and teamwork

+
+ + {/* Collaboration Stats */} +
+
+

Total Sessions

+
{totalSessions}
+
Collaboration sessions joined
+
+ +
+

Completed

+
{completedSessions}
+
Successfully finished sessions
+
+ +
+

Active Now

+
{activeSessions}
+
Currently in progress
+
+ +
+

Avg Duration

+
{avgSessionTime.toFixed(1)}m
+
Average session length
+
+
+ + {/* Recent Sessions */} +
+

Recent Sessions

+ + {sortedSessions.length === 0 ? ( +
+ +

No Collaboration Sessions Yet

+

Join a coding room to start collaborating with others!

+
+ ) : ( +
+ {sortedSessions.map((session) => { + const startDate = new Date(session.startedAt); + const endDate = session.endedAt ? new Date(session.endedAt) : null; + const duration = endDate ? ((endDate - startDate) / 1000 / 60).toFixed(1) : 'In Progress'; + const isActive = !session.endedAt; + + return ( +
+
+
+

{session.roomId || 'Unnamed Session'}

+
+ + {startDate.toLocaleDateString()} at {startDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} + + + {isActive ? <> Active : <> Completed} + +
+
+
+ {duration}{!isActive ? 'm' : ''} +
+
+ +
+

Participants: {session.participants?.length || 1} coder(s)

+ {session.language &&

Language: {session.language}

} + {session.problemTitle &&

Problem: {session.problemTitle}

} + {isActive && ( +
+ +
+ )} +
+
+ ); + })} +
+ )} +
+ + {/* Collaboration Insights */} +
+

Collaboration Insights

+
+
+

Team Player

+

You've participated in {totalSessions} collaborative sessions

+
+
+

Consistency

+

Your average session duration is {avgSessionTime.toFixed(1)} minutes

+
+
+

Completion Rate

+

You've completed {completedSessions}/{totalSessions} sessions ({totalSessions > 0 ? Math.round((completedSessions/totalSessions)*100) : 0}%)

+
+
+

Active Participation

+

You currently have {activeSessions} session(s) in progress

+
+
+
+ + {/* Collaboration Tips */} +
+

Tips for Better Collaboration

+
    +
  • Communicate clearly with your teammates
    • +
  • Share your screen regularly to stay synchronized
    • +
  • Take breaks during long sessions
    • +
  • Review code together before submitting
    • +
  • Be patient and supportive of others
    • +
+
+
+ ); +}; + +export default CollaborationTab; \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardSidebar.jsx b/client/src/components/Dashboard/DashboardSidebar.jsx index 4ac8721..a560c4d 100644 --- a/client/src/components/Dashboard/DashboardSidebar.jsx +++ b/client/src/components/Dashboard/DashboardSidebar.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { FaChartLine, FaCode, FaFolder, FaStar, FaUser, FaUsers, FaCog, FaQuestionCircle, FaGithub } from 'react-icons/fa'; +import { FaChartLine, FaCode, FaFolder, FaStar, FaUser, FaUsers, FaCog, FaQuestionCircle, FaGithub, FaBars, FaTimes } from 'react-icons/fa'; import { useNavigate } from 'react-router-dom'; import '../../Style/UserDashboard.css'; @@ -29,6 +29,15 @@ const DashboardSidebar = ({ )} + {/* Hamburger Toggle Button */} + +