Skip to content

Fixed Dashboard UI #497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshrana14-fi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed Dashboard UI #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,538 changes: 1,466 additions & 72 deletions client/src/Style/UserDashboard.css
View file
Open in desktop

Large diffs are not rendered by default.

131 changes: 131 additions & 0 deletions client/src/components/Dashboard/CodingStatsTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="dashboard-section">
<div className="section-header">
<h2>Coding Statistics</h2>
<p>Detailed analytics of your coding activity</p>
</div>

{/* Main Stats Cards */}
<div className="stats-grid">
<div className="stat-card">
<h3><FaChartBar /> Total Executions</h3>
<div className="stat-number">{stats?.runs || 0}</div>
<div className="stat-description">Code snippets executed</div>
</div>

<div className="stat-card">
<h3><FaClock /> Average Session Time</h3>
<div className="stat-number">{avgSessionTime.toFixed(1)}m</div>
<div className="stat-description">Per collaboration session</div>
</div>

<div className="stat-card">
<h3><FaCode /> Snippets Created</h3>
<div className="stat-number">{snippets.length}</div>
<div className="stat-description">Total code snippets saved</div>
</div>

<div className="stat-card">
<h3><FaBrain /> AI Interactions</h3>
<div className="stat-number">{(stats?.aiExplains || 0) + (stats?.aiDebugs || 0)}</div>
<div className="stat-description">AI assistant usage</div>
</div>
</div>

{/* Charts Section */}
<div className="chart-section">
<h3>Activity Overview</h3>
<div className="chart-placeholder">
<FaChartBar style={{ fontSize: '3rem', marginBottom: '15px', color: '#666' }} />
<p>Interactive charts coming soon</p>
<p className="stat-description">Visualize your coding patterns and progress over time</p>
</div>
</div>

{/* Language Distribution */}
<div className="stats-grid">
<div className="stat-card wide">
<h3><FaCode /> Language Distribution</h3>
<div className="language-distribution">
{Object.keys(languageDistribution).length > 0 ? (
Object.entries(languageDistribution).map(([language, count]) => (
<div key={language} className="language-item">
<span className="language-name">{language}</span>
<div className="language-progress">
<div
className="language-bar"
style={{
width: `${(count / snippets.length) * 100}%`,
backgroundColor: '#d4581f'
}}
></div>
</div>
<span className="language-count">{count}</span>
</div>
))
) : (
<p className="stat-description">No snippets created yet</p>
)}
</div>
</div>
</div>

{/* Productivity Insights */}
<div className="stats-grid">
<div className="stat-card">
<h3><FaCheck /> Success Rate</h3>
<div className="stat-number">
{stats?.runs > 0 ? Math.round(((stats?.runs - (stats?.errors || 0)) / stats.runs) * 100) : 0}%
</div>
<div className="stat-description">Successful executions</div>
</div>

<div className="stat-card">
<h3><FaTimes /> Error Rate</h3>
<div className="stat-number">{stats?.errors || 0}</div>
<div className="stat-description">Execution errors encountered</div>
</div>

<div className="stat-card">
<h3><FaCode /> Favorite Language</h3>
<div className="stat-number" style={{ fontSize: '1.5rem' }}>{mostUsedLanguage}</div>
<div className="stat-description">Most frequently used</div>
</div>

<div className="stat-card">
<h3><FaClock /> Total Coding Time</h3>
<div className="stat-number">{Math.round(totalExecutionTime / 1000 / 60)}m</div>
<div className="stat-description">Across all sessions</div>
</div>
</div>
</div>
);
};

export default CodingStatsTab;
155 changes: 155 additions & 0 deletions client/src/components/Dashboard/CollaborationTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="dashboard-section">
<div className="section-header">
<h2>Collaboration History</h2>
<p>Track your collaborative coding sessions and teamwork</p>
</div>

{/* Collaboration Stats */}
<div className="stats-grid">
<div className="stat-card">
<h3><FaUsers /> Total Sessions</h3>
<div className="stat-number">{totalSessions}</div>
<div className="stat-description">Collaboration sessions joined</div>
</div>

<div className="stat-card">
<h3><FaCheck /> Completed</h3>
<div className="stat-number">{completedSessions}</div>
<div className="stat-description">Successfully finished sessions</div>
</div>

<div className="stat-card">
<h3><FaClock /> Active Now</h3>
<div className="stat-number">{activeSessions}</div>
<div className="stat-description">Currently in progress</div>
</div>

<div className="stat-card">
<h3><FaClock /> Avg Duration</h3>
<div className="stat-number">{avgSessionTime.toFixed(1)}m</div>
<div className="stat-description">Average session length</div>
</div>
</div>

{/* Recent Sessions */}
<div className="collaboration-history">
<h3><FaCalendar /> Recent Sessions</h3>

{sortedSessions.length === 0 ? (
<div className="empty-state">
<FaUsers className="empty-icon" />
<h3>No Collaboration Sessions Yet</h3>
<p>Join a coding room to start collaborating with others!</p>
</div>
) : (
<div className="sessions-list">
{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 (
<div key={session.id} className={`session-card ${isActive ? 'active' : ''}`}>
<div className="session-header">
<div>
<h4>{session.roomId || 'Unnamed Session'}</h4>
<div className="session-meta">
<span className="session-date">
<FaCalendar /> {startDate.toLocaleDateString()} at {startDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
<span className={`session-status ${isActive ? 'active' : 'completed'}`}>
{isActive ? <><FaUsers /> Active</> : <><FaCheck /> Completed</>}
</span>
</div>
</div>
<div className="session-duration">
<FaClock /> {duration}{!isActive ? 'm' : ''}
</div>
</div>

<div className="session-details">
<p><strong>Participants:</strong> {session.participants?.length || 1} coder(s)</p>
{session.language && <p><strong>Language:</strong> {session.language}</p>}
{session.problemTitle && <p><strong>Problem:</strong> {session.problemTitle}</p>}
{isActive && (
<div className="session-actions">
<button className="btn-small primary">
<FaUsers /> Join Session
</button>
</div>
)}
</div>
</div>
);
})}
</div>
)}
</div>

{/* Collaboration Insights */}
<div className="collaboration-insights">
<h3>Collaboration Insights</h3>
<div className="insights-grid">
<div className="insight-card">
<h4>Team Player</h4>
<p>You've participated in {totalSessions} collaborative sessions</p>
</div>
<div className="insight-card">
<h4>Consistency</h4>
<p>Your average session duration is {avgSessionTime.toFixed(1)} minutes</p>
</div>
<div className="insight-card">
<h4>Completion Rate</h4>
<p>You've completed {completedSessions}/{totalSessions} sessions ({totalSessions > 0 ? Math.round((completedSessions/totalSessions)*100) : 0}%)</p>
</div>
<div className="insight-card">
<h4>Active Participation</h4>
<p>You currently have {activeSessions} session(s) in progress</p>
</div>
</div>
</div>

{/* Collaboration Tips */}
<div className="collaboration-tips">
<h3>Tips for Better Collaboration</h3>
<ul>
<li>Communicate clearly with your teammates</li>
<li>Share your screen regularly to stay synchronized</li>
<li>Take breaks during long sessions</li>
<li>Review code together before submitting</li>
<li>Be patient and supportive of others</li>
</ul>
</div>
</div>
);
};

export default CollaborationTab;
19 changes: 10 additions & 9 deletions client/src/components/Dashboard/DashboardSidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -29,6 +29,15 @@ const DashboardSidebar = ({
)}
</div>

{/* Hamburger Toggle Button */}
<button
className="sidebar-hamburger-toggle"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
title={sidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
>
{sidebarCollapsed ? <FaBars /> : <FaTimes />}
</button>

<nav className="sidebar-nav">
<button
className={`nav-item ${activeTab === 'overview' ? 'active' : ''}`}
Expand Down Expand Up @@ -107,14 +116,6 @@ const DashboardSidebar = ({
{!sidebarCollapsed && <span>Contributing</span>}
</button>
</div>

<button
className="sidebar-toggle-btn"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{sidebarCollapsed ? '»' : '«'}
</button>
</div>
);
};
Expand Down
Loading