Skip to content

Commit e965067

Browse files
yash-pouranikyash-pouranik
committed
Enhance UI and functionality for Dashboard and Database pages
1 parent 23ea2de commit e965067

3 files changed

Lines changed: 700 additions & 215 deletions

File tree

‎frontend/src/pages/Dashboard.jsx‎

Lines changed: 163 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import axios from 'axios';
33
import { useAuth } from '../context/AuthContext';
44
import toast from 'react-hot-toast';
55
import { Link, useNavigate } from 'react-router-dom';
6-
import { Plus, Folder, Server, ArrowRight } from 'lucide-react';
6+
import { Plus, Folder, Server, ArrowRight, Activity, Database, HardDrive, Zap } from 'lucide-react';
77
import { API_URL } from '../config';
88

99
export default function Dashboard() {
@@ -30,95 +30,218 @@ export default function Dashboard() {
3030
if (token) fetchProjects();
3131
}, [token]);
3232

33-
if (isLoading) return <div className="container" style={{ color: 'var(--color-text-muted)' }}>Loading projects...</div>;
33+
// Inline Styles for Cards to match Landing Page aesthetic
34+
const cardStyle = {
35+
background: 'rgba(255, 255, 255, 0.02)',
36+
border: '1px solid var(--color-border)',
37+
borderRadius: '12px',
38+
padding: '1.5rem',
39+
transition: 'all 0.2s ease',
40+
display: 'flex',
41+
flexDirection: 'column',
42+
height: '100%',
43+
position: 'relative',
44+
overflow: 'hidden'
45+
};
46+
47+
if (isLoading) return (
48+
<div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh', color: 'var(--color-text-muted)', gap: '10px' }}>
49+
<div className="spinner"></div> Loading workspace...
50+
</div>
51+
);
3452

3553
return (
36-
<div className="container">
37-
{/* Page Header */}
38-
<div className="page-header">
54+
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto', paddingBottom: '4rem' }}>
55+
56+
{/* Header Section */}
57+
<div className="page-header" style={{ marginBottom: '3rem', borderBottom: 'none' }}>
3958
<div>
40-
<h1 className="page-title">Projects</h1>
41-
<p style={{ color: 'var(--color-text-muted)', marginTop: '4px' }}>
42-
Manage your backend services and APIs.
59+
<h1 className="page-title" style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>Overview</h1>
60+
<p style={{ color: 'var(--color-text-muted)' }}>
61+
Welcome back! Here's what's happening with your projects.
4362
</p>
4463
</div>
4564
<button
4665
onClick={() => navigate('/create-project')}
4766
className="btn btn-primary"
67+
style={{ padding: '0.75rem 1.5rem', gap: '8px', boxShadow: '0 4px 14px 0 rgba(0,0,0,0.3)' }}
4868
>
49-
<Plus size={16} /> New Project
69+
<Plus size={18} /> New Project
5070
</button>
5171
</div>
5272

53-
{/* Empty State */}
73+
{/* Stats Row (Static for now, makes it look dashboard-y) */}
74+
{projects.length > 0 && (
75+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '3rem' }}>
76+
<div style={cardStyle}>
77+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
78+
<span style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>Total Projects</span>
79+
<Folder size={20} color="var(--color-primary)" />
80+
</div>
81+
<div style={{ fontSize: '1.8rem', fontWeight: 700 }}>{projects.length}</div>
82+
</div>
83+
<div style={cardStyle}>
84+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
85+
<span style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>System Status</span>
86+
<Activity size={20} color="#3ECF8E" />
87+
</div>
88+
<div style={{ fontSize: '1.1rem', fontWeight: 600, color: '#3ECF8E', display: 'flex', alignItems: 'center', gap: '8px' }}>
89+
<span style={{ display: 'block', width: '8px', height: '8px', borderRadius: '50%', background: '#3ECF8E', boxShadow: '0 0 10px #3ECF8E' }}></span>
90+
Operational
91+
</div>
92+
</div>
93+
<div style={cardStyle}>
94+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
95+
<span style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>API Usage</span>
96+
<Zap size={20} color="#FFBD2E" />
97+
</div>
98+
<div style={{ fontSize: '1.1rem', fontWeight: 600, color: '#fff' }}>Free Tier</div>
99+
</div>
100+
</div>
101+
)}
102+
103+
{/* Projects Grid */}
104+
<h2 style={{ fontSize: '1.2rem', fontWeight: 600, marginBottom: '1.5rem', color: 'var(--color-text-main)' }}>Your Projects</h2>
105+
54106
{projects.length === 0 ? (
55-
<div className="card" style={{ textAlign: 'center', padding: '4rem 2rem' }}>
56-
<div style={{ color: 'var(--color-text-muted)', marginBottom: '1rem', display: 'flex', justifyContent: 'center' }}>
57-
<Server size={48} strokeWidth={1} />
107+
<div style={{
108+
...cardStyle,
109+
textAlign: 'center',
110+
padding: '6rem 2rem',
111+
alignItems: 'center',
112+
background: 'linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%)',
113+
borderStyle: 'dashed'
114+
}}>
115+
<div style={{
116+
width: '64px', height: '64px', borderRadius: '50%',
117+
background: 'rgba(255,255,255,0.05)', display: 'flex',
118+
alignItems: 'center', justifyContent: 'center', marginBottom: '1.5rem'
119+
}}>
120+
<Server size={32} color="var(--color-text-muted)" />
58121
</div>
59-
<h3 style={{ marginBottom: '0.5rem', fontSize: '1.2rem', fontWeight: 600 }}>No projects found</h3>
60-
<p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>
61-
Create your first backend project to get started.
122+
<h3 style={{ marginBottom: '0.5rem', fontSize: '1.25rem', fontWeight: 600 }}>No projects yet</h3>
123+
<p style={{ color: 'var(--color-text-muted)', marginBottom: '2rem', maxWidth: '400px' }}>
124+
Create your first backend project to start building APIs, Databases, and Storage buckets instantly.
62125
</p>
63126
<button
64127
onClick={() => navigate('/create-project')}
65128
className="btn btn-secondary"
129+
style={{ background: '#fff', color: '#000', fontWeight: 600 }}
66130
>
67131
Create Project
68132
</button>
69133
</div>
70134
) : (
71-
/* Projects Grid */
72-
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '1.5rem' }}>
135+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1.5rem' }}>
73136
{projects.map((project) => (
74137
<Link
75138
to={`/project/${project._id}`}
76139
key={project._id}
140+
className="dashboard-card-link"
77141
style={{ textDecoration: 'none' }}
78142
>
79-
<div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column', transition: 'transform 0.2s' }}>
80-
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '15px' }}>
143+
<div className="dashboard-card" style={cardStyle}>
144+
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '20px' }}>
81145
<div style={{
82-
padding: '10px',
83-
borderRadius: '6px',
84-
backgroundColor: 'rgba(62, 207, 142, 0.1)',
85-
color: 'var(--color-primary)'
146+
padding: '12px',
147+
borderRadius: '10px',
148+
background: 'linear-gradient(135deg, rgba(62, 207, 142, 0.15), rgba(62, 207, 142, 0.05))',
149+
color: '#3ECF8E',
150+
border: '1px solid rgba(62, 207, 142, 0.2)'
86151
}}>
87-
<Folder size={20} />
152+
<Database size={24} />
88153
</div>
89-
<h3 style={{ fontSize: '1rem', fontWeight: '600', color: 'var(--color-text-main)' }}>
90-
{project.name}
91-
</h3>
154+
<span style={{ fontSize: '0.75rem', padding: '4px 8px', borderRadius: '20px', background: 'rgba(255,255,255,0.05)', color: '#888', border: '1px solid var(--color-border)' }}>
155+
v1.0.0
156+
</span>
92157
</div>
93158

159+
<h3 style={{ fontSize: '1.1rem', fontWeight: '700', color: 'var(--color-text-main)', marginBottom: '8px' }}>
160+
{project.name}
161+
</h3>
162+
94163
<p style={{
95164
color: 'var(--color-text-muted)',
96165
fontSize: '0.9rem',
97-
lineHeight: '1.5',
98-
marginBottom: '1.5rem',
99-
flex: 1
166+
lineHeight: '1.6',
167+
marginBottom: '2rem',
168+
flex: 1,
169+
display: '-webkit-box',
170+
WebkitLineClamp: 2,
171+
WebkitBoxOrient: 'vertical',
172+
overflow: 'hidden'
100173
}}>
101-
{project.description || "No description provided."}
174+
{project.description || "A scalable backend project."}
102175
</p>
103176

104177
<div style={{
105-
borderTop: '1px solid var(--color-border)',
106-
paddingTop: '12px',
178+
borderTop: '1px solid rgba(255,255,255,0.05)',
179+
paddingTop: '1rem',
107180
display: 'flex',
108-
justifyContent: 'space-between',
109181
alignItems: 'center',
110-
color: 'var(--color-primary)',
111-
fontSize: '0.85rem',
112-
fontWeight: 500
182+
gap: '12px',
183+
color: 'var(--color-text-muted)',
184+
fontSize: '0.8rem'
113185
}}>
114-
<span>View Dashboard</span>
115-
<ArrowRight size={16} />
186+
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
187+
<Database size={14} /> <span>DB</span>
188+
</div>
189+
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
190+
<HardDrive size={14} /> <span>Storage</span>
191+
</div>
192+
<div style={{ marginLeft: 'auto', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', gap: '4px', fontWeight: 500 }}>
193+
Open <ArrowRight size={14} />
194+
</div>
116195
</div>
117196
</div>
118197
</Link>
119198
))}
199+
200+
{/* Add New Project Card (always visible at end of list) */}
201+
<button
202+
onClick={() => navigate('/create-project')}
203+
className="dashboard-card-add"
204+
style={{
205+
...cardStyle,
206+
background: 'transparent',
207+
borderStyle: 'dashed',
208+
justifyContent: 'center',
209+
alignItems: 'center',
210+
cursor: 'pointer',
211+
color: 'var(--color-text-muted)',
212+
minHeight: '240px'
213+
}}
214+
>
215+
<div style={{ background: 'rgba(255,255,255,0.05)', padding: '16px', borderRadius: '50%', marginBottom: '1rem' }}>
216+
<Plus size={24} />
217+
</div>
218+
<span style={{ fontWeight: 600 }}>Create New Project</span>
219+
</button>
120220
</div>
121221
)}
222+
223+
<style>{`
224+
.dashboard-card:hover {
225+
transform: translateY(-4px);
226+
border-color: var(--color-primary) !important;
227+
background: rgba(255,255,255,0.04) !important;
228+
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
229+
}
230+
.dashboard-card-add:hover {
231+
border-color: var(--color-primary) !important;
232+
color: var(--color-primary) !important;
233+
background: rgba(62, 207, 142, 0.02) !important;
234+
}
235+
.spinner {
236+
width: 20px;
237+
height: 20px;
238+
border: 2px solid rgba(255,255,255,0.1);
239+
border-left-color: var(--color-primary);
240+
border-radius: 50%;
241+
animation: spin 1s linear infinite;
242+
}
243+
@keyframes spin { 100% { transform: rotate(360deg); } }
244+
`}</style>
122245
</div>
123246
);
124247
}

0 commit comments

Comments
 (0)