blumenjs 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli/postinstall.cjs +74 -0
- package/dist/cli/blumen.js +112 -8
- package/dist/cli/commands/create.js +120 -2
- package/dist/cli/commands/dev.js +120 -2
- package/dist/cli/utils.js +99 -0
- package/dist/templates/app/pages/templates/BlumenDashboard.tsx +305 -507
- package/package.json +3 -1
|
@@ -1,544 +1,342 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
|
|
3
3
|
const DashboardPage: React.FC = () => {
|
|
4
|
-
const [activeNav, setActiveNav] = useState("
|
|
5
|
-
|
|
4
|
+
const [activeNav, setActiveNav] = useState("dashboard");
|
|
5
|
+
const nav = [
|
|
6
|
+
{ id: "dashboard", label: "Dashboard" }, { id: "payments", label: "Payments" },
|
|
7
|
+
{ id: "transactions", label: "Transactions" }, { id: "invoices", label: "Invoices" },
|
|
8
|
+
{ id: "cards", label: "Cards" }, { id: "savings", label: "Saving Plans" },
|
|
9
|
+
{ id: "investments", label: "Investments" }, { id: "inbox", label: "Inbox" },
|
|
10
|
+
];
|
|
6
11
|
const stats = [
|
|
7
|
-
{ label: "Total
|
|
8
|
-
{ label: "
|
|
9
|
-
{ label: "
|
|
10
|
-
{ label: "Bounce Rate", value: "24.3%", change: "-2.4%", up: false, icon: "◇" },
|
|
12
|
+
{ label: "Total Income", value: "$78,000", change: "+17.5%", up: true },
|
|
13
|
+
{ label: "Total Expense", value: "$43,000", change: "-12.4%", up: false },
|
|
14
|
+
{ label: "Total Savings", value: "$56,000", change: "+24.5%", up: true },
|
|
11
15
|
];
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
{
|
|
16
|
-
{
|
|
17
|
-
{ id: "settings", label: "Settings", icon: "⬡" },
|
|
16
|
+
const bars = [
|
|
17
|
+
{ m: "Jan", i: 50, e: 35 }, { m: "Feb", i: 55, e: 40 }, { m: "Mar", i: 48, e: 45 },
|
|
18
|
+
{ m: "Apr", i: 62, e: 38 }, { m: "May", i: 58, e: 48 }, { m: "Jun", i: 72, e: 42 },
|
|
19
|
+
{ m: "Jul", i: 60, e: 38 }, { m: "Aug", i: 68, e: 52 }, { m: "Sep", i: 75, e: 50 },
|
|
20
|
+
{ m: "Oct", i: 82, e: 58 }, { m: "Nov", i: 70, e: 45 }, { m: "Dec", i: 78, e: 52 },
|
|
18
21
|
];
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
{
|
|
22
|
-
{
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
const txns = [
|
|
23
|
+
{ name: "Electricity Bill", cat: "Payments", date: "2028-03-01", amt: "$295.81", note: "Monthly electricity bill", status: "Failed" },
|
|
24
|
+
{ name: "Weekly Groceries", cat: "Shopping", date: "2028-03-04", amt: "$204.07", note: "Local supermarket", status: "Completed" },
|
|
25
|
+
{ name: "Movie Night", cat: "Entertainment", date: "2028-02-27", amt: "$97.84", note: "Tickets and snacks", status: "Pending" },
|
|
26
|
+
{ name: "Medical Check-up", cat: "Healthcare", date: "2028-02-07", amt: "$323.33", note: "Routine health check", status: "Pending" },
|
|
27
|
+
];
|
|
28
|
+
const funds = [
|
|
29
|
+
{ name: "Emergency Fund", saved: "$5,000", pct: 50, target: "$10,000" },
|
|
30
|
+
{ name: "Vacation Fund", saved: "$3,000", pct: 60, target: "$5,000" },
|
|
31
|
+
{ name: "Home Down Payment", saved: "$7,250", pct: 36, target: "$20,000" },
|
|
32
|
+
];
|
|
33
|
+
const expenses = [
|
|
34
|
+
{ label: "Rent & Living", pct: "60%", amt: "$2,100", c: "#16a34a" },
|
|
35
|
+
{ label: "Investment", pct: "15%", amt: "$525", c: "#22c55e" },
|
|
36
|
+
{ label: "Education", pct: "12%", amt: "$420", c: "#4ade80" },
|
|
37
|
+
{ label: "Food & Drink", pct: "8%", amt: "$280", c: "#86efac" },
|
|
38
|
+
{ label: "Entertainment", pct: "5%", amt: "$175", c: "#bbf7d0" },
|
|
39
|
+
];
|
|
40
|
+
const acts = [
|
|
41
|
+
{ u: "Jamie Smith", a: "updated account settings", t: "16:05", c: "#22c55e" },
|
|
42
|
+
{ u: "Alex Johnson", a: "logged in", t: "13:05", c: "#3b82f6" },
|
|
43
|
+
{ u: "Morgan Lee", a: "added a new savings goal", t: "02:05", c: "#f59e0b" },
|
|
26
44
|
];
|
|
45
|
+
const actsY = [
|
|
46
|
+
{ u: "Taylor Green", a: "reviewed recent transactions", t: "21:05", c: "#8b5cf6" },
|
|
47
|
+
{ u: "Wilson Baptista", a: "transferred funds", t: "09:06", c: "#ef4444" },
|
|
48
|
+
];
|
|
49
|
+
const sc: Record<string, { bg: string; fg: string }> = {
|
|
50
|
+
Failed: { bg: "#fef2f2", fg: "#dc2626" },
|
|
51
|
+
Completed: { bg: "#f0fdf4", fg: "#16a34a" },
|
|
52
|
+
Pending: { bg: "#fffbeb", fg: "#d97706" },
|
|
53
|
+
};
|
|
27
54
|
|
|
28
55
|
return (
|
|
29
|
-
<div className="
|
|
30
|
-
<style
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
padding: 16px 14px;
|
|
147
|
-
border-top: 1px solid rgba(255,255,255,0.06);
|
|
148
|
-
display: flex;
|
|
149
|
-
align-items: center;
|
|
150
|
-
gap: 12px;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.bl-avatar {
|
|
154
|
-
width: 34px; height: 34px;
|
|
155
|
-
border-radius: 8px;
|
|
156
|
-
background: linear-gradient(135deg, #1e1b4b, #312e81);
|
|
157
|
-
display: flex;
|
|
158
|
-
align-items: center;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
font-size: 0.7rem;
|
|
161
|
-
font-weight: 600;
|
|
162
|
-
color: #a5b4fc;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.bl-user-name {
|
|
166
|
-
font-size: 0.82rem;
|
|
167
|
-
font-weight: 600;
|
|
168
|
-
color: #e5e7eb;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.bl-user-role {
|
|
172
|
-
font-size: 0.72rem;
|
|
173
|
-
color: #6b7280;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/* ── Main ── */
|
|
177
|
-
.bl-main {
|
|
178
|
-
flex: 1;
|
|
179
|
-
margin-left: 260px;
|
|
180
|
-
padding: 32px 40px;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.bl-header {
|
|
184
|
-
display: flex;
|
|
185
|
-
justify-content: space-between;
|
|
186
|
-
align-items: center;
|
|
187
|
-
margin-bottom: 36px;
|
|
188
|
-
animation: fade-up 0.6s ease-out both;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.bl-header-title {
|
|
192
|
-
font-size: 1.6rem;
|
|
193
|
-
font-weight: 800;
|
|
194
|
-
letter-spacing: -0.03em;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.bl-header-sub {
|
|
198
|
-
font-size: 0.88rem;
|
|
199
|
-
color: #6b7280;
|
|
200
|
-
margin-top: 4px;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.bl-header-actions {
|
|
204
|
-
display: flex;
|
|
205
|
-
gap: 10px;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.bl-btn {
|
|
209
|
-
padding: 9px 20px;
|
|
210
|
-
border-radius: 10px;
|
|
211
|
-
font-family: inherit;
|
|
212
|
-
font-size: 0.82rem;
|
|
213
|
-
font-weight: 600;
|
|
214
|
-
border: none;
|
|
215
|
-
cursor: pointer;
|
|
216
|
-
transition: all 0.2s;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.bl-btn-primary {
|
|
220
|
-
background: linear-gradient(135deg, #6366f1, #818cf8);
|
|
221
|
-
color: #fff;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.bl-btn-primary:hover {
|
|
225
|
-
transform: translateY(-1px);
|
|
226
|
-
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.bl-btn-ghost {
|
|
230
|
-
background: rgba(255,255,255,0.05);
|
|
231
|
-
color: #9ca3af;
|
|
232
|
-
border: 1px solid rgba(255,255,255,0.08);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.bl-btn-ghost:hover {
|
|
236
|
-
background: rgba(255,255,255,0.08);
|
|
237
|
-
color: #e5e7eb;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
/* ── Stats Grid ── */
|
|
241
|
-
.bl-stats {
|
|
242
|
-
display: grid;
|
|
243
|
-
grid-template-columns: repeat(4, 1fr);
|
|
244
|
-
gap: 16px;
|
|
245
|
-
margin-bottom: 32px;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.bl-stat-card {
|
|
249
|
-
padding: 24px;
|
|
250
|
-
border-radius: 16px;
|
|
251
|
-
background: #111114;
|
|
252
|
-
border: 1px solid rgba(255,255,255,0.06);
|
|
253
|
-
transition: all 0.3s;
|
|
254
|
-
animation: fade-up 0.6s ease-out both;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.bl-stat-card:nth-child(1) { animation-delay: 0.05s; }
|
|
258
|
-
.bl-stat-card:nth-child(2) { animation-delay: 0.1s; }
|
|
259
|
-
.bl-stat-card:nth-child(3) { animation-delay: 0.15s; }
|
|
260
|
-
.bl-stat-card:nth-child(4) { animation-delay: 0.2s; }
|
|
261
|
-
|
|
262
|
-
.bl-stat-card:hover {
|
|
263
|
-
border-color: rgba(99, 102, 241, 0.2);
|
|
264
|
-
transform: translateY(-2px);
|
|
265
|
-
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.bl-stat-top {
|
|
269
|
-
display: flex;
|
|
270
|
-
justify-content: space-between;
|
|
271
|
-
align-items: center;
|
|
272
|
-
margin-bottom: 16px;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.bl-stat-icon {
|
|
276
|
-
width: 40px; height: 40px;
|
|
277
|
-
border-radius: 10px;
|
|
278
|
-
background: rgba(99, 102, 241, 0.1);
|
|
279
|
-
display: flex;
|
|
280
|
-
align-items: center;
|
|
281
|
-
justify-content: center;
|
|
282
|
-
font-size: 1rem;
|
|
283
|
-
color: #818cf8;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.bl-stat-change {
|
|
287
|
-
font-size: 0.75rem;
|
|
288
|
-
font-weight: 600;
|
|
289
|
-
padding: 3px 8px;
|
|
290
|
-
border-radius: 6px;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
.bl-stat-change.up {
|
|
294
|
-
background: rgba(34, 197, 94, 0.1);
|
|
295
|
-
color: #4ade80;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.bl-stat-change.down {
|
|
299
|
-
background: rgba(239, 68, 68, 0.1);
|
|
300
|
-
color: #f87171;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.bl-stat-value {
|
|
304
|
-
font-size: 1.8rem;
|
|
305
|
-
font-weight: 800;
|
|
306
|
-
letter-spacing: -0.02em;
|
|
307
|
-
margin-bottom: 4px;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.bl-stat-label {
|
|
311
|
-
font-size: 0.82rem;
|
|
312
|
-
color: #6b7280;
|
|
313
|
-
font-weight: 500;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
/* ── Content Grid ── */
|
|
317
|
-
.bl-grid {
|
|
318
|
-
display: grid;
|
|
319
|
-
grid-template-columns: 1fr 380px;
|
|
320
|
-
gap: 20px;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.bl-card {
|
|
324
|
-
border-radius: 16px;
|
|
325
|
-
background: #111114;
|
|
326
|
-
border: 1px solid rgba(255,255,255,0.06);
|
|
327
|
-
padding: 24px;
|
|
328
|
-
animation: fade-up 0.6s ease-out 0.25s both;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.bl-card-title {
|
|
332
|
-
font-size: 1rem;
|
|
333
|
-
font-weight: 700;
|
|
334
|
-
margin-bottom: 20px;
|
|
335
|
-
display: flex;
|
|
336
|
-
justify-content: space-between;
|
|
337
|
-
align-items: center;
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.bl-card-badge {
|
|
341
|
-
font-size: 0.7rem;
|
|
342
|
-
padding: 4px 10px;
|
|
343
|
-
border-radius: 6px;
|
|
344
|
-
background: rgba(99, 102, 241, 0.1);
|
|
345
|
-
color: #818cf8;
|
|
346
|
-
font-weight: 600;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
/* ── Chart placeholder ── */
|
|
350
|
-
.bl-chart {
|
|
351
|
-
height: 200px;
|
|
352
|
-
border-radius: 12px;
|
|
353
|
-
background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
|
|
354
|
-
border: 1px dashed rgba(99, 102, 241, 0.15);
|
|
355
|
-
display: flex;
|
|
356
|
-
align-items: flex-end;
|
|
357
|
-
justify-content: space-around;
|
|
358
|
-
padding: 20px 16px;
|
|
359
|
-
gap: 8px;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.bl-bar {
|
|
363
|
-
flex: 1;
|
|
364
|
-
border-radius: 6px 6px 0 0;
|
|
365
|
-
background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
|
|
366
|
-
transition: all 0.3s;
|
|
367
|
-
min-height: 10px;
|
|
368
|
-
position: relative;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.bl-bar:hover {
|
|
372
|
-
filter: brightness(1.3);
|
|
373
|
-
transform: scaleY(1.05);
|
|
374
|
-
transform-origin: bottom;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
/* ── Activity List ── */
|
|
378
|
-
.bl-activity-item {
|
|
379
|
-
display: flex;
|
|
380
|
-
align-items: center;
|
|
381
|
-
gap: 14px;
|
|
382
|
-
padding: 14px 0;
|
|
383
|
-
border-bottom: 1px solid rgba(255,255,255,0.04);
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
.bl-activity-item:last-child { border-bottom: none; }
|
|
387
|
-
|
|
388
|
-
.bl-activity-avatar {
|
|
389
|
-
width: 36px; height: 36px;
|
|
390
|
-
border-radius: 10px;
|
|
391
|
-
background: linear-gradient(135deg, #1e1b4b, #312e81);
|
|
392
|
-
display: flex;
|
|
393
|
-
align-items: center;
|
|
394
|
-
justify-content: center;
|
|
395
|
-
font-size: 0.65rem;
|
|
396
|
-
font-weight: 700;
|
|
397
|
-
color: #a5b4fc;
|
|
398
|
-
flex-shrink: 0;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
.bl-activity-info { flex: 1; }
|
|
402
|
-
|
|
403
|
-
.bl-activity-user {
|
|
404
|
-
font-size: 0.82rem;
|
|
405
|
-
font-weight: 600;
|
|
406
|
-
color: #e5e7eb;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.bl-activity-action {
|
|
410
|
-
font-size: 0.78rem;
|
|
411
|
-
color: #6b7280;
|
|
412
|
-
margin-top: 2px;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
.bl-activity-time {
|
|
416
|
-
font-size: 0.72rem;
|
|
417
|
-
color: #4b5563;
|
|
418
|
-
white-space: nowrap;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.bl-online-dot {
|
|
422
|
-
width: 8px; height: 8px;
|
|
423
|
-
border-radius: 50%;
|
|
424
|
-
background: #22c55e;
|
|
425
|
-
animation: pulse-ring 2s infinite;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
@media (max-width: 1024px) {
|
|
429
|
-
.bl-sidebar { display: none; }
|
|
430
|
-
.bl-main { margin-left: 0; }
|
|
431
|
-
.bl-stats { grid-template-columns: repeat(2, 1fr); }
|
|
432
|
-
.bl-grid { grid-template-columns: 1fr; }
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
@media (max-width: 640px) {
|
|
436
|
-
.bl-stats { grid-template-columns: 1fr; }
|
|
437
|
-
.bl-main { padding: 20px 16px; }
|
|
438
|
-
}
|
|
439
|
-
`,
|
|
440
|
-
}}
|
|
441
|
-
/>
|
|
56
|
+
<div className="fd">
|
|
57
|
+
<style dangerouslySetInnerHTML={{ __html: `
|
|
58
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
|
59
|
+
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
60
|
+
.fd *{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',sans-serif}
|
|
61
|
+
.fd{min-height:100vh;background:#f0f2f0;display:flex;color:#1a1a2e}
|
|
62
|
+
|
|
63
|
+
/* Sidebar */
|
|
64
|
+
.sb{width:200px;background:#fff;border-right:1px solid #e5e7eb;padding:16px 10px;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:10}
|
|
65
|
+
.sb-brand{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:20px}
|
|
66
|
+
.sb-logo{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#16a34a,#22c55e);display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:#fff;font-weight:800}
|
|
67
|
+
.sb-name{font-size:0.9rem;font-weight:800;letter-spacing:-0.01em}
|
|
68
|
+
.sb-nav{list-style:none;flex:1}
|
|
69
|
+
.sb-ni{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:0.78rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all 0.15s;margin-bottom:1px;border:none;background:none;width:100%;text-align:left}
|
|
70
|
+
.sb-ni:hover{color:#16a34a;background:#f0fdf4}
|
|
71
|
+
.sb-ni.on{color:#fff;background:#16a34a;font-weight:600}
|
|
72
|
+
.sb-cta{margin-top:auto;padding:16px;border-radius:12px;background:linear-gradient(135deg,#0f3d1e,#14532d);color:#fff;text-align:center}
|
|
73
|
+
.sb-cta p{font-size:0.65rem;color:#86efac;margin:6px 0 10px;line-height:1.4}
|
|
74
|
+
.sb-cta-btn{padding:6px 16px;border-radius:6px;background:#22c55e;color:#fff;font-size:0.72rem;font-weight:600;border:none;cursor:pointer}
|
|
75
|
+
|
|
76
|
+
/* Layout */
|
|
77
|
+
.mn{margin-left:200px;display:grid;grid-template-columns:240px 1fr 260px;min-height:100vh}
|
|
78
|
+
.lp{padding:16px 12px;background:#fff;border-right:1px solid #e8ebe8}
|
|
79
|
+
.cp{padding:16px}
|
|
80
|
+
.rp{padding:16px 12px;background:#fff;border-left:1px solid #e8ebe8}
|
|
81
|
+
|
|
82
|
+
/* Components */
|
|
83
|
+
.cd{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:14px;margin-bottom:12px;animation:fu 0.4s ease-out both}
|
|
84
|
+
.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
|
|
85
|
+
.hdr h1{font-size:1.15rem;font-weight:800}
|
|
86
|
+
.search{padding:6px 14px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;font-size:0.78rem;width:200px}
|
|
87
|
+
.uav{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#4ade80);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#fff}
|
|
88
|
+
|
|
89
|
+
/* User Card */
|
|
90
|
+
.uc{background:linear-gradient(135deg,#14532d,#166534);border-radius:14px;padding:16px;color:#fff;margin-bottom:12px;position:relative;overflow:hidden}
|
|
91
|
+
.uc::after{content:'';position:absolute;top:-25px;right:-25px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.05)}
|
|
92
|
+
.uc-n{font-size:0.9rem;font-weight:700;margin:8px 0 12px}
|
|
93
|
+
.uc-b{font-size:0.65rem;color:#86efac}
|
|
94
|
+
.uc-a{font-size:1.3rem;font-weight:800;margin:2px 0}
|
|
95
|
+
.uc-m{display:flex;gap:16px;margin-top:10px;font-size:0.65rem;color:#86efac}
|
|
96
|
+
|
|
97
|
+
/* Quick Actions */
|
|
98
|
+
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
|
|
99
|
+
.qa-i{text-align:center;padding:8px 2px;border-radius:8px;background:#f0fdf4;border:1px solid #dcfce7;cursor:pointer;transition:all 0.15s}
|
|
100
|
+
.qa-i:hover{background:#dcfce7;transform:translateY(-1px)}
|
|
101
|
+
.qa-ic{font-size:0.9rem;margin-bottom:2px}
|
|
102
|
+
.qa-lb{font-size:0.6rem;color:#6b7280;font-weight:500}
|
|
103
|
+
|
|
104
|
+
/* Progress bars */
|
|
105
|
+
.pb{height:5px;border-radius:3px;background:#e5e7eb;margin-top:6px;overflow:hidden}
|
|
106
|
+
.pf{height:100%;border-radius:3px;background:linear-gradient(90deg,#16a34a,#22c55e)}
|
|
107
|
+
|
|
108
|
+
/* Savings */
|
|
109
|
+
.sv{padding:10px 0;border-bottom:1px solid #f3f4f6}
|
|
110
|
+
.sv:last-child{border-bottom:none}
|
|
111
|
+
.sv-n{font-size:0.78rem;font-weight:600;margin-bottom:4px}
|
|
112
|
+
.sv-b{height:5px;border-radius:3px;background:#e5e7eb;margin:4px 0;overflow:hidden}
|
|
113
|
+
.sv-f{height:100%;border-radius:3px;background:#22c55e}
|
|
114
|
+
.sv-m{display:flex;justify-content:space-between;font-size:0.65rem;color:#9ca3af}
|
|
115
|
+
|
|
116
|
+
/* Stats */
|
|
117
|
+
.sts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
|
|
118
|
+
.st{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:14px;animation:fu 0.35s ease-out both}
|
|
119
|
+
.st:nth-child(2){animation-delay:0.05s}
|
|
120
|
+
.st:nth-child(3){animation-delay:0.1s}
|
|
121
|
+
.st-ic{width:32px;height:32px;border-radius:8px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;font-size:0.8rem;margin-bottom:10px}
|
|
122
|
+
.st-v{font-size:1.3rem;font-weight:800;letter-spacing:-0.02em}
|
|
123
|
+
.st-l{font-size:0.72rem;color:#9ca3af;margin-top:2px}
|
|
124
|
+
.st-c{font-size:0.65rem;font-weight:600;padding:2px 6px;border-radius:4px;margin-top:6px;display:inline-block}
|
|
125
|
+
.st-c.up{background:#f0fdf4;color:#16a34a}
|
|
126
|
+
.st-c.dn{background:#fef2f2;color:#dc2626}
|
|
127
|
+
|
|
128
|
+
/* Chart */
|
|
129
|
+
.ch{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:6px}
|
|
130
|
+
.ch-c{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
|
|
131
|
+
.ch-bw{flex:1;width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
|
|
132
|
+
.ch-b{border-radius:2px 2px 0 0;min-width:6px;transition:all 0.2s}
|
|
133
|
+
.ch-b:hover{filter:brightness(1.15)}
|
|
134
|
+
.ch-b.inc{background:#16a34a}
|
|
135
|
+
.ch-b.exp{background:#bbf7d0}
|
|
136
|
+
.ch-m{font-size:0.55rem;color:#9ca3af;margin-top:3px}
|
|
137
|
+
.lg{display:flex;gap:12px;font-size:0.68rem;color:#6b7280}
|
|
138
|
+
.lg-d{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:3px}
|
|
139
|
+
|
|
140
|
+
/* Table */
|
|
141
|
+
.tb{width:100%;border-collapse:collapse;font-size:0.72rem}
|
|
142
|
+
.tb th{text-align:left;padding:6px 8px;color:#9ca3af;font-weight:500;font-size:0.65rem;border-bottom:1px solid #f3f4f6}
|
|
143
|
+
.tb td{padding:8px;border-bottom:1px solid #f9fafb;color:#374151}
|
|
144
|
+
.tb-n{font-weight:600;color:#1a1a2e;font-size:0.75rem}
|
|
145
|
+
.tb-c{font-size:0.65rem;color:#9ca3af}
|
|
146
|
+
.badge{padding:2px 7px;border-radius:5px;font-size:0.62rem;font-weight:600}
|
|
147
|
+
|
|
148
|
+
/* Donut */
|
|
149
|
+
.dn-w{display:flex;justify-content:center;margin:12px 0}
|
|
150
|
+
|
|
151
|
+
/* Expense list */
|
|
152
|
+
.ex{display:flex;align-items:center;padding:5px 0}
|
|
153
|
+
.ex-d{width:7px;height:7px;border-radius:50%;margin-right:7px;flex-shrink:0}
|
|
154
|
+
.ex-p{font-size:0.65rem;color:#9ca3af;margin-right:10px;min-width:24px;font-weight:600}
|
|
155
|
+
.ex-l{flex:1;font-size:0.75rem;color:#374151}
|
|
156
|
+
.ex-a{font-size:0.78rem;font-weight:600;text-align:right}
|
|
157
|
+
|
|
158
|
+
/* Activity */
|
|
159
|
+
.ac{display:flex;gap:8px;padding:6px 0}
|
|
160
|
+
.ac-d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
|
|
161
|
+
.ac-t{flex:1;font-size:0.72rem;color:#374151;line-height:1.4}
|
|
162
|
+
.ac-u{font-weight:600;color:#1a1a2e}
|
|
163
|
+
.ac-tm{font-size:0.62rem;color:#9ca3af;margin-top:1px}
|
|
164
|
+
|
|
165
|
+
.stl{font-size:0.82rem;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
|
|
166
|
+
.stl span{font-size:0.65rem;color:#16a34a;font-weight:500;cursor:pointer}
|
|
167
|
+
.sub{font-size:0.65rem;color:#9ca3af}
|
|
168
|
+
.big{font-size:1.15rem;font-weight:800;margin-bottom:8px}
|
|
169
|
+
|
|
170
|
+
@media(max-width:1100px){.mn{grid-template-columns:1fr}.lp,.rp{display:none}}
|
|
171
|
+
@media(max-width:768px){.sb{display:none}.mn{margin-left:0}.sts{grid-template-columns:1fr}}
|
|
172
|
+
`}} />
|
|
442
173
|
|
|
443
174
|
{/* Sidebar */}
|
|
444
|
-
<aside className="
|
|
445
|
-
<div className="
|
|
446
|
-
<div className="
|
|
447
|
-
<div className="
|
|
448
|
-
Blumen
|
|
449
|
-
<span>Dashboard</span>
|
|
450
|
-
</div>
|
|
175
|
+
<aside className="sb">
|
|
176
|
+
<div className="sb-brand">
|
|
177
|
+
<div className="sb-logo">B</div>
|
|
178
|
+
<div className="sb-name">BLUMEN</div>
|
|
451
179
|
</div>
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
key={item.id}
|
|
457
|
-
className={`bl-nav-item ${activeNav === item.id ? "active" : ""}`}
|
|
458
|
-
onClick={() => setActiveNav(item.id)}
|
|
459
|
-
>
|
|
460
|
-
<span className="bl-nav-icon">{item.icon}</span>
|
|
461
|
-
{item.label}
|
|
180
|
+
<nav className="sb-nav">
|
|
181
|
+
{nav.map(n => (
|
|
182
|
+
<button key={n.id} className={`sb-ni ${activeNav === n.id ? "on" : ""}`} onClick={() => setActiveNav(n.id)}>
|
|
183
|
+
{n.label}
|
|
462
184
|
</button>
|
|
463
185
|
))}
|
|
464
186
|
</nav>
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
<
|
|
468
|
-
<
|
|
469
|
-
<div className="bl-user-name">Jane Doe</div>
|
|
470
|
-
<div className="bl-user-role">Admin</div>
|
|
471
|
-
</div>
|
|
187
|
+
<div className="sb-cta">
|
|
188
|
+
<div style={{ fontSize: "1.5rem" }}>🌸</div>
|
|
189
|
+
<p>Gain full access to your finances with detailed analytics</p>
|
|
190
|
+
<button className="sb-cta-btn">Get Pro</button>
|
|
472
191
|
</div>
|
|
473
192
|
</aside>
|
|
474
193
|
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
<div className="
|
|
478
|
-
<div>
|
|
479
|
-
<
|
|
480
|
-
<
|
|
194
|
+
<div className="mn">
|
|
195
|
+
{/* Left Panel */}
|
|
196
|
+
<div className="lp">
|
|
197
|
+
<div className="uc">
|
|
198
|
+
<div style={{ fontSize: "1.2rem" }}>🌸</div>
|
|
199
|
+
<div className="uc-n">Andrew Forbist</div>
|
|
200
|
+
<div className="uc-b">Balance Amount</div>
|
|
201
|
+
<div className="uc-a">$562,000</div>
|
|
202
|
+
<div className="uc-m"><span>EXP 11/29</span><span>CVV 323</span></div>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div className="qa">
|
|
206
|
+
{[["⊕","Top Up"],["⇄","Transfer"],["↗","Request"],["◷","History"]].map(([ic,lb]) => (
|
|
207
|
+
<div key={lb} className="qa-i"><div className="qa-ic">{ic}</div><div className="qa-lb">{lb}</div></div>
|
|
208
|
+
))}
|
|
481
209
|
</div>
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
<
|
|
210
|
+
|
|
211
|
+
<div className="cd">
|
|
212
|
+
<div className="stl">Daily Limit</div>
|
|
213
|
+
<div style={{ fontSize: "0.78rem", fontWeight: 600 }}>$2,500.00 <span className="sub">spent of $20,000.00</span></div>
|
|
214
|
+
<div className="pb"><div className="pf" style={{ width: "12.5%" }} /></div>
|
|
215
|
+
<div style={{ textAlign: "right", fontSize: "0.62rem", color: "#9ca3af", marginTop: "3px" }}>12.5%</div>
|
|
485
216
|
</div>
|
|
486
|
-
</div>
|
|
487
217
|
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
<div
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
<
|
|
495
|
-
|
|
496
|
-
</span>
|
|
218
|
+
<div className="cd">
|
|
219
|
+
<div className="stl">Saving Plans <span>+ Add Plan</span></div>
|
|
220
|
+
<div className="sub">Total Savings</div>
|
|
221
|
+
<div className="big">$84,500</div>
|
|
222
|
+
{funds.map(f => (
|
|
223
|
+
<div key={f.name} className="sv">
|
|
224
|
+
<div className="sv-n">{f.name}</div>
|
|
225
|
+
<div className="sv-b"><div className="sv-f" style={{ width: `${f.pct}%` }} /></div>
|
|
226
|
+
<div className="sv-m"><span>{f.saved} {f.pct}%</span><span>Target: {f.target}</span></div>
|
|
497
227
|
</div>
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
</div>
|
|
501
|
-
))}
|
|
228
|
+
))}
|
|
229
|
+
</div>
|
|
502
230
|
</div>
|
|
503
231
|
|
|
504
|
-
{/*
|
|
505
|
-
<div className="
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
<div
|
|
509
|
-
|
|
510
|
-
<
|
|
232
|
+
{/* Center */}
|
|
233
|
+
<div className="cp">
|
|
234
|
+
<div className="hdr">
|
|
235
|
+
<h1>Dashboard</h1>
|
|
236
|
+
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
|
237
|
+
<input className="search" placeholder="Search placeholder" />
|
|
238
|
+
<div className="uav">AF</div>
|
|
239
|
+
<span style={{ fontSize: "0.82rem", fontWeight: 600 }}>Andrew Forbist</span>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div className="sts">
|
|
244
|
+
{stats.map(s => (
|
|
245
|
+
<div key={s.label} className="st">
|
|
246
|
+
<div className="st-ic">💰</div>
|
|
247
|
+
<div className="st-v">{s.value}</div>
|
|
248
|
+
<div className="st-l">{s.label}</div>
|
|
249
|
+
<span className={`st-c ${s.up ? "up" : "dn"}`}>{s.change}</span>
|
|
250
|
+
</div>
|
|
251
|
+
))}
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div className="cd" style={{ animationDelay: "0.12s" }}>
|
|
255
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
|
|
256
|
+
<div>
|
|
257
|
+
<div className="stl" style={{ marginBottom: 4 }}>Cashflow</div>
|
|
258
|
+
<div className="sub">Total Balance</div>
|
|
259
|
+
<div style={{ fontSize: "1.2rem", fontWeight: 800, margin: "2px 0 10px" }}>$562,000</div>
|
|
260
|
+
</div>
|
|
261
|
+
<div className="lg">
|
|
262
|
+
<span><span className="lg-d" style={{ background: "#16a34a" }} />Income</span>
|
|
263
|
+
<span><span className="lg-d" style={{ background: "#bbf7d0" }} />Expense</span>
|
|
264
|
+
</div>
|
|
511
265
|
</div>
|
|
512
|
-
<div className="
|
|
513
|
-
{
|
|
514
|
-
<div
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
266
|
+
<div className="ch">
|
|
267
|
+
{bars.map(d => (
|
|
268
|
+
<div key={d.m} className="ch-c">
|
|
269
|
+
<div className="ch-bw">
|
|
270
|
+
<div className="ch-b inc" style={{ height: `${d.i * 1.6}px` }} />
|
|
271
|
+
<div className="ch-b exp" style={{ height: `${d.e * 1.6}px` }} />
|
|
272
|
+
</div>
|
|
273
|
+
<div className="ch-m">{d.m}</div>
|
|
274
|
+
</div>
|
|
519
275
|
))}
|
|
520
276
|
</div>
|
|
521
277
|
</div>
|
|
522
278
|
|
|
523
|
-
{
|
|
524
|
-
|
|
525
|
-
<
|
|
526
|
-
|
|
527
|
-
<
|
|
279
|
+
<div className="cd" style={{ animationDelay: "0.2s" }}>
|
|
280
|
+
<div className="stl">Recent Transactions</div>
|
|
281
|
+
<table className="tb">
|
|
282
|
+
<thead><tr><th>Transaction Name</th><th>Date</th><th>Amount</th><th>Note</th><th>Status</th></tr></thead>
|
|
283
|
+
<tbody>
|
|
284
|
+
{txns.map(t => (
|
|
285
|
+
<tr key={t.name}>
|
|
286
|
+
<td><div className="tb-n">{t.name}</div><div className="tb-c">{t.cat}</div></td>
|
|
287
|
+
<td>{t.date}</td>
|
|
288
|
+
<td>{t.amt}</td>
|
|
289
|
+
<td style={{ color: "#9ca3af", fontSize: "0.65rem" }}>{t.note}</td>
|
|
290
|
+
<td><span className="badge" style={{ background: sc[t.status].bg, color: sc[t.status].fg }}>{t.status}</span></td>
|
|
291
|
+
</tr>
|
|
292
|
+
))}
|
|
293
|
+
</tbody>
|
|
294
|
+
</table>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
{/* Right Panel */}
|
|
299
|
+
<div className="rp">
|
|
300
|
+
<div className="cd">
|
|
301
|
+
<div className="stl">Statistic</div>
|
|
302
|
+
<div className="dn-w">
|
|
303
|
+
<svg width="120" height="120" viewBox="0 0 120 120">
|
|
304
|
+
<circle cx="60" cy="60" r="46" fill="none" stroke="#e5e7eb" strokeWidth="12" />
|
|
305
|
+
<circle cx="60" cy="60" r="46" fill="none" stroke="#16a34a" strokeWidth="12" strokeDasharray="289" strokeDashoffset="72" strokeLinecap="round" transform="rotate(-90 60 60)" />
|
|
306
|
+
<circle cx="60" cy="60" r="46" fill="none" stroke="#4ade80" strokeWidth="12" strokeDasharray="289" strokeDashoffset="246" strokeLinecap="round" transform="rotate(150 60 60)" />
|
|
307
|
+
<text x="60" y="55" textAnchor="middle" fill="#9ca3af" fontSize="7" fontFamily="Inter">Total Expense</text>
|
|
308
|
+
<text x="60" y="70" textAnchor="middle" fill="#1a1a2e" fontSize="14" fontWeight="800" fontFamily="Inter">$3,500</text>
|
|
309
|
+
</svg>
|
|
528
310
|
</div>
|
|
529
|
-
{
|
|
530
|
-
<div key={
|
|
531
|
-
<
|
|
532
|
-
<
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
311
|
+
{expenses.map(e => (
|
|
312
|
+
<div key={e.label} className="ex">
|
|
313
|
+
<span className="ex-d" style={{ background: e.c }} />
|
|
314
|
+
<span className="ex-p">{e.pct}</span>
|
|
315
|
+
<span className="ex-l">{e.label}</span>
|
|
316
|
+
<span className="ex-a">{e.amt}</span>
|
|
317
|
+
</div>
|
|
318
|
+
))}
|
|
319
|
+
</div>
|
|
320
|
+
|
|
321
|
+
<div className="cd" style={{ animationDelay: "0.1s" }}>
|
|
322
|
+
<div className="stl">Recent Activity</div>
|
|
323
|
+
<div style={{ fontSize: "0.68rem", fontWeight: 600, color: "#9ca3af", marginBottom: "6px" }}>Today</div>
|
|
324
|
+
{acts.map(a => (
|
|
325
|
+
<div key={a.u} className="ac">
|
|
326
|
+
<span className="ac-d" style={{ background: a.c }} />
|
|
327
|
+
<div><div className="ac-t"><span className="ac-u">{a.u}</span> {a.a}</div><div className="ac-tm">{a.t}</div></div>
|
|
328
|
+
</div>
|
|
329
|
+
))}
|
|
330
|
+
<div style={{ fontSize: "0.68rem", fontWeight: 600, color: "#9ca3af", margin: "10px 0 6px" }}>Yesterday</div>
|
|
331
|
+
{actsY.map(a => (
|
|
332
|
+
<div key={a.u} className="ac">
|
|
333
|
+
<span className="ac-d" style={{ background: a.c }} />
|
|
334
|
+
<div><div className="ac-t"><span className="ac-u">{a.u}</span> {a.a}</div><div className="ac-tm">{a.t}</div></div>
|
|
537
335
|
</div>
|
|
538
336
|
))}
|
|
539
337
|
</div>
|
|
540
338
|
</div>
|
|
541
|
-
</
|
|
339
|
+
</div>
|
|
542
340
|
</div>
|
|
543
341
|
);
|
|
544
342
|
};
|