Skip to content

Commit 3458a94

Browse files
Nandanans9072Nandanans9072
committed
update dashboard
1 parent 8c597d6 commit 3458a94

File tree

4 files changed

+372
-218
lines changed

4 files changed

+372
-218
lines changed

‎src/AfterLogin/Dashboard.css‎

Lines changed: 142 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,175 @@
1-
/* Layout */
21
.dashboard {
32
display: flex;
43
flex-direction: column;
5-
height: 100vh;
6-
background-color: #1e1e1e; /* Dark background for the whole dashboard */
7-
overflow: hidden;
4+
min-height: 100vh;
5+
background-color: #0D2620;
6+
color: #ffffff;
87
}
98

10-
/* Main Content */
11-
.mct {
9+
.dashboard-content {
1210
display: flex;
13-
flex-direction: row;
14-
gap: 20px;
15-
height: calc(100vh - 60px); /* Adjusted height to account for potential header */
11+
flex: 1;
12+
gap: 24px;
13+
padding: 24px;
1614
}
1715

1816
.main-content {
1917
flex: 1;
20-
padding: 32px;
21-
overflow-y: auto;
18+
display: flex;
19+
flex-direction: column;
20+
gap: 24px;
2221
}
2322

24-
/* Recent Projects */
25-
.recent-projects {
26-
margin-top: 32px;
23+
/* Stats Grid */
24+
.stats-grid {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
27+
gap: 24px;
28+
margin-bottom: 24px;
2729
}
2830

29-
.recent-projects h2 {
31+
.stat-card {
32+
background-color: #185143;
33+
border-radius: 12px;
34+
padding: 24px;
35+
display: flex;
36+
gap: 16px;
37+
transition: transform 0.2s, box-shadow 0.2s;
38+
}
39+
40+
.stat-card:hover {
41+
transform: translateY(-4px);
42+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
43+
}
44+
45+
.stat-icon {
46+
background-color: #1a4137;
47+
border-radius: 12px;
48+
padding: 12px;
49+
color: #00d47c;
50+
}
51+
52+
.stat-info h3 {
53+
font-size: 14px;
54+
color: #b3b3b3;
55+
margin: 0 0 8px 0;
56+
}
57+
58+
.stat-value {
59+
font-size: 24px;
60+
font-weight: bold;
61+
margin-bottom: 4px;
62+
}
63+
64+
.stat-trend {
65+
font-size: 12px;
66+
color: #00d47c;
67+
}
68+
69+
/* Recent Projects Section */
70+
.section-header {
71+
display: flex;
72+
justify-content: space-between;
73+
align-items: center;
3074
margin-bottom: 16px;
31-
font-size: 18px;
32-
color: #e6e6e6;
3375
}
3476

35-
/* New Projects Table Layout */
77+
.section-header h2 {
78+
font-size: 20px;
79+
margin: 0;
80+
}
81+
82+
.view-all-btn {
83+
background-color: transparent;
84+
border: 2px solid #00d47c;
85+
color: #00d47c;
86+
padding: 8px 16px;
87+
border-radius: 6px;
88+
cursor: pointer;
89+
transition: all 0.2s;
90+
}
91+
92+
.view-all-btn:hover {
93+
background-color: #00d47c;
94+
color: #0D2620;
95+
}
96+
97+
.projects-container {
98+
background-color: #185143;
99+
border-radius: 12px;
100+
overflow: hidden;
101+
}
102+
36103
.projects-table {
37104
width: 100%;
38105
border-collapse: collapse;
39-
background-color: #2a2a2a;
40-
border-radius: 8px;
41-
overflow: hidden;
42106
}
43107

44-
.projects-table th,
45-
.projects-table td {
108+
.projects-table th {
109+
background-color: #1a4137;
110+
padding: 16px;
46111
text-align: left;
112+
font-weight: 500;
113+
color: #b3b3b3;
114+
}
115+
116+
.projects-table td {
47117
padding: 16px;
118+
border-bottom: 1px solid #1a4137;
48119
}
49120

50-
.projects-table th {
51-
background-color: #3a3a3a;
52-
font-weight: 600;
53-
color: #ffffff;
121+
.project-name {
122+
display: flex;
123+
align-items: center;
124+
gap: 12px;
54125
}
55126

56-
.projects-table td {
57-
background-color: #2a2a2a;
58-
color: #d1d1d1;
127+
.project-icon {
128+
background-color: #1a4137;
129+
color: #00d47c;
130+
width: 36px;
131+
height: 36px;
132+
border-radius: 8px;
133+
display: flex;
134+
align-items: center;
135+
justify-content: center;
136+
font-weight: bold;
137+
}
138+
139+
.status {
140+
padding: 6px 12px;
141+
border-radius: 20px;
142+
font-size: 12px;
143+
font-weight: 500;
144+
}
145+
146+
.status.active {
147+
background-color: rgba(0, 212, 124, 0.2);
148+
color: #00d47c;
59149
}
60150

61-
.projects-table tr:nth-child(even) td {
62-
background-color: #333333;
151+
.status.completed {
152+
background-color: rgba(64, 196, 255, 0.2);
153+
color: #40c4ff;
63154
}
64155

65-
.projects-table tr:hover td {
66-
background-color: #3a3a3a;
156+
.status.pending {
157+
background-color: rgba(255, 171, 64, 0.2);
158+
color: #ffab40;
67159
}
160+
161+
@media (max-width: 1024px) {
162+
.stats-grid {
163+
grid-template-columns: repeat(2, 1fr);
164+
}
165+
}
166+
167+
@media (max-width: 768px) {
168+
.stats-grid {
169+
grid-template-columns: 1fr;
170+
}
171+
172+
.dashboard-content {
173+
flex-direction: column;
174+
}
175+
}

‎src/AfterLogin/Dashboard.jsx‎

Lines changed: 83 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import Navbar from './Navbarin'; // Ensure this matches the file name
2+
import { BarChart, Activity, FileText, Clock } from 'lucide-react';
3+
import Navbar from './Navbarin';
4+
import Sidebar from './Sidebar';
35
import './Dashboard.css';
4-
import { assets } from '../assets/assets';
5-
import Sidebar from './Sidebar'; // Import Sidebar component
66

77
const Dashboard = () => {
88
const links = [
@@ -12,47 +12,94 @@ const Dashboard = () => {
1212
{ label: 'Support', href: '/support' },
1313
];
1414

15+
const projectStats = [
16+
{ title: 'Total Projects', value: '24', icon: FileText, trend: '+4 this week' },
17+
{ title: 'Active Projects', value: '12', icon: Activity, trend: '+2 this month' },
18+
{ title: 'Time Spent', value: '47h', icon: Clock, trend: '12h this week' },
19+
{ title: 'Project Size', value: '2.1GB', icon: BarChart, trend: '+300MB' },
20+
];
21+
1522
return (
1623
<div className="dashboard">
17-
<Navbar links={links} brandLogo={assets.logo} />
18-
19-
<div className="mct">
20-
<Sidebar /> {/* Render Sidebar component here */}
21-
24+
<Navbar links={links} />
25+
26+
<div className="dashboard-content">
27+
<Sidebar />
28+
2229
<main className="main-content">
30+
<div className="stats-grid">
31+
{projectStats.map((stat, index) => (
32+
<div key={index} className="stat-card">
33+
<div className="stat-icon">
34+
{<stat.icon size={24} />}
35+
</div>
36+
<div className="stat-info">
37+
<h3>{stat.title}</h3>
38+
<div className="stat-value">{stat.value}</div>
39+
<div className="stat-trend">{stat.trend}</div>
40+
</div>
41+
</div>
42+
))}
43+
</div>
44+
2345
<section className="recent-projects">
24-
<h2>Recent Projects</h2>
25-
<table className="projects-table">
26-
<thead>
27-
<tr>
28-
<th>Project Name</th>
29-
<th>Last Opened</th>
30-
<th>Size</th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
<tr>
35-
<td>Buzz Show Bed_v10</td>
36-
<td>3 days ago</td>
37-
<td>132.2KB</td>
38-
</tr>
39-
<tr>
40-
<td>iPhone test</td>
41-
<td>28 days ago</td>
42-
<td>273KB</td>
43-
</tr>
44-
<tr>
45-
<td>Dramas For Transfer XtoCC</td>
46-
<td>last month</td>
47-
<td>271KB</td>
48-
</tr>
49-
</tbody>
50-
</table>
46+
<div className="section-header">
47+
<h2>Recent Projects</h2>
48+
<button className="view-all-btn">View All</button>
49+
</div>
50+
51+
<div className="projects-container">
52+
<table className="projects-table">
53+
<thead>
54+
<tr>
55+
<th>Project Name</th>
56+
<th>Last Modified</th>
57+
<th>Size</th>
58+
<th>Status</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<td>
64+
<div className="project-name">
65+
<div className="project-icon">BS</div>
66+
<span>Buzz Show Bed_v10</span>
67+
</div>
68+
</td>
69+
<td>3 days ago</td>
70+
<td>132.2KB</td>
71+
<td><span className="status active">Active</span></td>
72+
</tr>
73+
<tr>
74+
<td>
75+
<div className="project-name">
76+
<div className="project-icon">IT</div>
77+
<span>iPhone test</span>
78+
</div>
79+
</td>
80+
<td>28 days ago</td>
81+
<td>273KB</td>
82+
<td><span className="status completed">Completed</span></td>
83+
</tr>
84+
<tr>
85+
<td>
86+
<div className="project-name">
87+
<div className="project-icon">DT</div>
88+
<span>Dramas For Transfer XtoCC</span>
89+
</div>
90+
</td>
91+
<td>last month</td>
92+
<td>271KB</td>
93+
<td><span className="status pending">Pending</span></td>
94+
</tr>
95+
</tbody>
96+
</table>
97+
</div>
5198
</section>
5299
</main>
53100
</div>
54101
</div>
55102
);
56103
};
57104

58-
export default Dashboard;
105+
export default Dashboard;

0 commit comments

Comments
 (0)