Skip to content

Commit 2722d82

Browse files
yash-pouranikyash-pouranik
committed
feat(dashboard): UI overhaul for Project Details page and chart empty state fix
1 parent da79159 commit 2722d82

2 files changed

Lines changed: 24 additions & 15 deletions

File tree

‎apps/web-dashboard/src/components/ProjectDetails/AnalyticsChart.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const CustomTooltip = ({ active, payload, label }) => {
1616
padding: '8px 12px',
1717
borderRadius: '6px',
1818
fontSize: '0.7rem',
19-
boxShadow: '0 10px 20px rgba(0,0,0,0.3)',
19+
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
2020
zIndex: 100
2121
}}>
2222
<p style={{ color: 'var(--color-text-muted)', marginBottom: '6px', fontWeight: 600 }}>{label}</p>
@@ -57,7 +57,7 @@ const AnalyticsChart = ({ data = [] }) => {
5757
<stop offset="95%" stopColor="#ef4444" stopOpacity={0}/>
5858
</linearGradient>
5959
</defs>
60-
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
60+
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--color-border)" />
6161
<XAxis
6262
dataKey="_id"
6363
axisLine={false}
@@ -70,7 +70,7 @@ const AnalyticsChart = ({ data = [] }) => {
7070
tickLine={false}
7171
tick={{ fontSize: 9, fill: 'var(--color-text-muted)' }}
7272
/>
73-
<Tooltip content={<CustomTooltip />} cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }} />
73+
<Tooltip content={<CustomTooltip />} cursor={{ stroke: 'var(--color-border)', strokeWidth: 1 }} />
7474
<Area
7575
type="monotone"
7676
dataKey="success"

‎apps/web-dashboard/src/pages/ProjectDetails.jsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ function ProjectDetails() {
120120
display: 'flex', justifyContent: 'center', alignItems: 'center',
121121
backdropFilter: 'blur(8px)'
122122
}}>
123-
<div className="glass-card" style={{ maxWidth: '520px', width: '90%', padding: '2rem', borderRadius: '12px', border: `1px solid ${newKey.type === 'secret' ? '#ef4444' : 'var(--color-primary)'}` }}>
123+
<div style={{ maxWidth: '520px', width: '90%', padding: '2rem', borderRadius: '12px', background: 'var(--color-bg-card)', border: `1px solid ${newKey.type === 'secret' ? '#ef4444' : 'var(--color-primary)'}` }}>
124124
<div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
125125
<h2 style={{ fontSize: '1.25rem', marginBottom: '8px' }}>New {newKey.type} Key{newKey.keys ? 's' : ''}</h2>
126126
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>Copy this now. It won't be shown again.</p>
@@ -160,7 +160,10 @@ function ProjectDetails() {
160160
</div>
161161
<div>
162162
<h1 style={{ fontSize: '1.5rem', fontWeight: 700, letterSpacing: '-0.02em' }}>{project.name}</h1>
163-
<p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Project ID: {project._id}</p>
163+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px' }}>
164+
<span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Project ID:</span>
165+
<code style={{ fontSize: '0.7rem', padding: '2px 6px', background: 'var(--color-bg-input)', border: '1px solid var(--color-border)', borderRadius: '4px', cursor: 'pointer', color: 'var(--color-text-main)' }} onClick={() => { navigator.clipboard.writeText(project._id); toast.success('Project ID copied') }} title="Click to copy">{project._id}</code>
166+
</div>
164167
</div>
165168
</div>
166169
<button onClick={() => navigate(`/project/${projectId}/settings`)} className="btn btn-secondary" style={{ fontSize: '0.8rem', height: '32px' }}>Settings</button>
@@ -174,7 +177,7 @@ function ProjectDetails() {
174177
{/* Analytics Section */}
175178
<section>
176179
<SectionHeader title="Traffic Overview" />
177-
<div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px' }}>
180+
<div style={{ padding: '1.25rem', borderRadius: '12px', background: 'var(--color-bg-card)', border: '1px solid var(--color-border)' }}>
178181
<div style={{ display: 'flex', gap: '2rem', marginBottom: '1rem' }}>
179182
<div>
180183
<span style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)', fontWeight: 600 }}>Traffic (24h)</span>
@@ -185,7 +188,13 @@ function ProjectDetails() {
185188
<div style={{ fontSize: '1.25rem', fontWeight: 700, color: '#a78bfa' }}>{(project.databaseUsed / (1024 * 1024)).toFixed(2)} MB</div>
186189
</div>
187190
</div>
188-
<AnalyticsChart data={analytics?.timeSeries} />
191+
{analytics?.timeSeries?.length > 0 ? (
192+
<AnalyticsChart data={analytics?.timeSeries} />
193+
) : (
194+
<div style={{ height: '180px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--color-text-muted)', fontSize: '0.8rem', border: '1px dashed var(--color-border)', borderRadius: '8px', marginTop: '1rem', background: 'var(--color-bg-input)' }}>
195+
No traffic data available (last 24h)
196+
</div>
197+
)}
189198
</div>
190199
</section>
191200

@@ -201,12 +210,12 @@ function ProjectDetails() {
201210
<h2 style={{ fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', opacity: 0.8 }}>Collections</h2>
202211
<button onClick={() => navigate(`/project/${projectId}/create-collection`)} className="btn btn-primary" style={{ height: '28px', fontSize: '0.75rem', padding: '0 10px' }}>+ New</button>
203212
</div>
204-
<div className="glass-card" style={{ padding: 0, overflow: 'hidden' }}>
213+
<div style={{ padding: 0, overflow: 'hidden', background: 'var(--color-bg-card)', border: '1px solid var(--color-border)', borderRadius: '12px' }}>
205214
{project.collections.length === 0 ? (
206215
<div style={{ padding: '3rem', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>No collections found.</div>
207216
) : (
208217
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
209-
<thead style={{ background: 'rgba(255,255,255,0.02)', fontSize: '0.7rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>
218+
<thead style={{ background: 'var(--color-surface-hover)', fontSize: '0.7rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>
210219
<tr>
211220
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: 600 }}>Name</th>
212221
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: 600 }}>Fields</th>
@@ -234,7 +243,7 @@ function ProjectDetails() {
234243
{/* Project Status */}
235244
<section>
236245
<SectionHeader title="Project Status" />
237-
<div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
246+
<div style={{ padding: '1.25rem', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '1rem', background: 'var(--color-bg-card)', border: '1px solid var(--color-border)' }}>
238247
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
239248
<span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>Database Status</span>
240249
<span style={{ fontSize: '0.8rem', fontWeight: 600, color: '#10b981', display: 'flex', alignItems: 'center', gap: '6px' }}>
@@ -254,7 +263,7 @@ function ProjectDetails() {
254263
{/* API Config / Keys */}
255264
<section>
256265
<SectionHeader title="API Credentials" />
257-
<div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
266+
<div style={{ padding: '1.25rem', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '1.25rem', background: 'var(--color-bg-card)', border: '1px solid var(--color-border)' }}>
258267
<div>
259268
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '6px' }}>
260269
<label style={{ fontSize: '0.75rem', fontWeight: 600 }}>API Base Endpoint</label>
@@ -306,7 +315,7 @@ function ProjectDetails() {
306315
{/* Recent Logs Section */}
307316
<section>
308317
<SectionHeader title="Recent Activity" />
309-
<div className="glass-card" style={{ padding: '1rem', borderRadius: '12px' }}>
318+
<div style={{ padding: '1rem', borderRadius: '12px', background: 'var(--color-bg-card)', border: '1px solid var(--color-border)' }}>
310319
<ProjectLogs logs={analytics?.logs?.slice(0, 5)} />
311320
<button onClick={() => navigate(`/project/${projectId}/analytics`)} className="btn btn-ghost" style={{ width: '100%', marginTop: '1rem', fontSize: '0.7rem', opacity: 0.6 }}>View Detailed Logs</button>
312321
</div>
@@ -315,9 +324,9 @@ function ProjectDetails() {
315324
</div>
316325

317326
<style>{`
318-
.hover-row:hover { background: rgba(255,255,255,0.02); }
319-
.hover-row:hover td { color: var(--color-primary); }
320-
.spinner { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.1); border-left-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
327+
.hover-row:hover { background: var(--color-surface-hover); }
328+
.hover-row:hover td { color: var(--color-text-main); }
329+
.spinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-left-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
321330
@keyframes spin { 100% { transform: rotate(360deg); } }
322331
`}</style>
323332
</div>

0 commit comments

Comments
 (0)