blumenjs 0.1.6 → 0.1.7
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.
|
@@ -58,44 +58,53 @@ const DashboardPage: React.FC = () => {
|
|
|
58
58
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
|
59
59
|
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
60
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}
|
|
61
|
+
.fd{min-height:100vh;background:#f0f2f0;display:flex;color:#1a1a2e;width:100%}
|
|
62
62
|
|
|
63
63
|
/* Sidebar */
|
|
64
|
-
.sb{width:
|
|
64
|
+
.sb{width:220px;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
65
|
.sb-brand{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:20px}
|
|
66
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
67
|
.sb-name{font-size:0.9rem;font-weight:800;letter-spacing:-0.01em}
|
|
68
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}
|
|
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;font-family:inherit}
|
|
70
70
|
.sb-ni:hover{color:#16a34a;background:#f0fdf4}
|
|
71
71
|
.sb-ni.on{color:#fff;background:#16a34a;font-weight:600}
|
|
72
72
|
.sb-cta{margin-top:auto;padding:16px;border-radius:12px;background:linear-gradient(135deg,#0f3d1e,#14532d);color:#fff;text-align:center}
|
|
73
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}
|
|
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;font-family:inherit}
|
|
75
|
+
|
|
76
|
+
/* Mobile header bar */
|
|
77
|
+
.mob-bar{display:none;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e5e7eb;padding:10px 16px;align-items:center;gap:10px}
|
|
78
|
+
.mob-bar-btn{width:36px;height:36px;border-radius:8px;background:#f0fdf4;border:1px solid #dcfce7;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem}
|
|
79
|
+
.mob-bar h1{font-size:1rem;font-weight:800;flex:1}
|
|
80
|
+
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:50}
|
|
81
|
+
.mob-overlay.show{display:block}
|
|
82
|
+
.sb.mob-open{display:flex!important;z-index:60}
|
|
75
83
|
|
|
76
84
|
/* Layout */
|
|
77
|
-
.mn{margin-left:
|
|
78
|
-
.lp{padding:16px
|
|
79
|
-
.cp{padding:
|
|
80
|
-
.rp{padding:16px
|
|
85
|
+
.mn{margin-left:220px;display:grid;grid-template-columns:260px 1fr 280px;min-height:100vh;width:calc(100% - 220px)}
|
|
86
|
+
.lp{padding:16px 14px;background:#fff;border-right:1px solid #e8ebe8;overflow-y:auto}
|
|
87
|
+
.cp{padding:20px;min-width:0;overflow-x:hidden}
|
|
88
|
+
.rp{padding:16px 14px;background:#fff;border-left:1px solid #e8ebe8;overflow-y:auto}
|
|
81
89
|
|
|
82
90
|
/* Components */
|
|
83
|
-
.cd{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:
|
|
84
|
-
.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:
|
|
85
|
-
.hdr h1{font-size:1.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
91
|
+
.cd{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:16px;margin-bottom:14px;animation:fu 0.4s ease-out both}
|
|
92
|
+
.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
|
|
93
|
+
.hdr h1{font-size:1.2rem;font-weight:800}
|
|
94
|
+
.hdr-right{display:flex;align-items:center;gap:10px}
|
|
95
|
+
.search{padding:7px 14px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;font-size:0.78rem;width:220px;font-family:inherit}
|
|
96
|
+
.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;flex-shrink:0}
|
|
88
97
|
|
|
89
98
|
/* User Card */
|
|
90
|
-
.uc{background:linear-gradient(135deg,#14532d,#166534);border-radius:14px;padding:
|
|
99
|
+
.uc{background:linear-gradient(135deg,#14532d,#166534);border-radius:14px;padding:18px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
|
|
91
100
|
.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.
|
|
93
|
-
.uc-b{font-size:0.
|
|
94
|
-
.uc-a{font-size:1.
|
|
95
|
-
.uc-m{display:flex;gap:16px;margin-top:10px;font-size:0.
|
|
101
|
+
.uc-n{font-size:0.92rem;font-weight:700;margin:8px 0 12px}
|
|
102
|
+
.uc-b{font-size:0.68rem;color:#86efac}
|
|
103
|
+
.uc-a{font-size:1.4rem;font-weight:800;margin:2px 0}
|
|
104
|
+
.uc-m{display:flex;gap:16px;margin-top:10px;font-size:0.68rem;color:#86efac}
|
|
96
105
|
|
|
97
106
|
/* Quick Actions */
|
|
98
|
-
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:
|
|
107
|
+
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
|
|
99
108
|
.qa-i{text-align:center;padding:8px 2px;border-radius:8px;background:#f0fdf4;border:1px solid #dcfce7;cursor:pointer;transition:all 0.15s}
|
|
100
109
|
.qa-i:hover{background:#dcfce7;transform:translateY(-1px)}
|
|
101
110
|
.qa-ic{font-size:0.9rem;margin-bottom:2px}
|
|
@@ -114,36 +123,36 @@ const DashboardPage: React.FC = () => {
|
|
|
114
123
|
.sv-m{display:flex;justify-content:space-between;font-size:0.65rem;color:#9ca3af}
|
|
115
124
|
|
|
116
125
|
/* Stats */
|
|
117
|
-
.sts{display:grid;grid-template-columns:repeat(3,1fr);gap:
|
|
118
|
-
.st{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:
|
|
126
|
+
.sts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
|
|
127
|
+
.st{background:#fff;border-radius:12px;border:1px solid #e8ebe8;padding:16px;animation:fu 0.35s ease-out both}
|
|
119
128
|
.st:nth-child(2){animation-delay:0.05s}
|
|
120
129
|
.st:nth-child(3){animation-delay:0.1s}
|
|
121
130
|
.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.
|
|
123
|
-
.st-l{font-size:0.
|
|
124
|
-
.st-c{font-size:0.
|
|
131
|
+
.st-v{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em}
|
|
132
|
+
.st-l{font-size:0.75rem;color:#9ca3af;margin-top:2px}
|
|
133
|
+
.st-c{font-size:0.68rem;font-weight:600;padding:2px 6px;border-radius:4px;margin-top:6px;display:inline-block}
|
|
125
134
|
.st-c.up{background:#f0fdf4;color:#16a34a}
|
|
126
135
|
.st-c.dn{background:#fef2f2;color:#dc2626}
|
|
127
136
|
|
|
128
137
|
/* Chart */
|
|
129
|
-
.ch{display:flex;align-items:flex-end;gap:4px;height:
|
|
138
|
+
.ch{display:flex;align-items:flex-end;gap:4px;height:160px;padding-top:6px}
|
|
130
139
|
.ch-c{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
|
|
131
140
|
.ch-bw{flex:1;width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
|
|
132
141
|
.ch-b{border-radius:2px 2px 0 0;min-width:6px;transition:all 0.2s}
|
|
133
142
|
.ch-b:hover{filter:brightness(1.15)}
|
|
134
143
|
.ch-b.inc{background:#16a34a}
|
|
135
144
|
.ch-b.exp{background:#bbf7d0}
|
|
136
|
-
.ch-m{font-size:0.
|
|
137
|
-
.lg{display:flex;gap:12px;font-size:0.
|
|
138
|
-
.lg-d{width:
|
|
145
|
+
.ch-m{font-size:0.58rem;color:#9ca3af;margin-top:3px}
|
|
146
|
+
.lg{display:flex;gap:12px;font-size:0.7rem;color:#6b7280}
|
|
147
|
+
.lg-d{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:4px}
|
|
139
148
|
|
|
140
149
|
/* Table */
|
|
141
|
-
.tb{width:100%;border-collapse:collapse;font-size:0.
|
|
142
|
-
.tb th{text-align:left;padding:
|
|
143
|
-
.tb td{padding:
|
|
144
|
-
.tb-n{font-weight:600;color:#1a1a2e;font-size:0.
|
|
145
|
-
.tb-c{font-size:0.
|
|
146
|
-
.badge{padding:
|
|
150
|
+
.tb{width:100%;border-collapse:collapse;font-size:0.75rem}
|
|
151
|
+
.tb th{text-align:left;padding:8px 10px;color:#9ca3af;font-weight:500;font-size:0.68rem;border-bottom:1px solid #f3f4f6}
|
|
152
|
+
.tb td{padding:10px;border-bottom:1px solid #f9fafb;color:#374151}
|
|
153
|
+
.tb-n{font-weight:600;color:#1a1a2e;font-size:0.78rem}
|
|
154
|
+
.tb-c{font-size:0.68rem;color:#9ca3af}
|
|
155
|
+
.badge{padding:3px 8px;border-radius:5px;font-size:0.65rem;font-weight:600}
|
|
147
156
|
|
|
148
157
|
/* Donut */
|
|
149
158
|
.dn-w{display:flex;justify-content:center;margin:12px 0}
|
|
@@ -151,24 +160,61 @@ const DashboardPage: React.FC = () => {
|
|
|
151
160
|
/* Expense list */
|
|
152
161
|
.ex{display:flex;align-items:center;padding:5px 0}
|
|
153
162
|
.ex-d{width:7px;height:7px;border-radius:50%;margin-right:7px;flex-shrink:0}
|
|
154
|
-
.ex-p{font-size:0.
|
|
155
|
-
.ex-l{flex:1;font-size:0.
|
|
156
|
-
.ex-a{font-size:0.
|
|
163
|
+
.ex-p{font-size:0.68rem;color:#9ca3af;margin-right:10px;min-width:24px;font-weight:600}
|
|
164
|
+
.ex-l{flex:1;font-size:0.78rem;color:#374151}
|
|
165
|
+
.ex-a{font-size:0.8rem;font-weight:600;text-align:right}
|
|
157
166
|
|
|
158
167
|
/* Activity */
|
|
159
168
|
.ac{display:flex;gap:8px;padding:6px 0}
|
|
160
169
|
.ac-d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
|
|
161
|
-
.ac-t{flex:1;font-size:0.
|
|
170
|
+
.ac-t{flex:1;font-size:0.75rem;color:#374151;line-height:1.4}
|
|
162
171
|
.ac-u{font-weight:600;color:#1a1a2e}
|
|
163
|
-
.ac-tm{font-size:0.
|
|
172
|
+
.ac-tm{font-size:0.65rem;color:#9ca3af;margin-top:1px}
|
|
173
|
+
|
|
174
|
+
.stl{font-size:0.85rem;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
|
|
175
|
+
.stl span{font-size:0.68rem;color:#16a34a;font-weight:500;cursor:pointer}
|
|
176
|
+
.sub{font-size:0.68rem;color:#9ca3af}
|
|
177
|
+
.big{font-size:1.2rem;font-weight:800;margin-bottom:8px}
|
|
178
|
+
|
|
179
|
+
/* ── Responsive ── */
|
|
180
|
+
|
|
181
|
+
/* Large: hide right panel */
|
|
182
|
+
@media(max-width:1400px){
|
|
183
|
+
.mn{grid-template-columns:260px 1fr}
|
|
184
|
+
.rp{display:none}
|
|
185
|
+
}
|
|
164
186
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
.
|
|
168
|
-
.
|
|
187
|
+
/* Medium: hide left panel too, only center */
|
|
188
|
+
@media(max-width:1100px){
|
|
189
|
+
.mn{grid-template-columns:1fr}
|
|
190
|
+
.lp{display:none}
|
|
191
|
+
.sts{grid-template-columns:repeat(3,1fr)}
|
|
192
|
+
}
|
|
169
193
|
|
|
170
|
-
|
|
171
|
-
@media(max-width:768px){
|
|
194
|
+
/* Tablet: hide sidebar, show mobile header */
|
|
195
|
+
@media(max-width:768px){
|
|
196
|
+
.sb{display:none}
|
|
197
|
+
.mn{margin-left:0;width:100%}
|
|
198
|
+
.mob-bar{display:flex}
|
|
199
|
+
.cp{padding:16px}
|
|
200
|
+
.sts{grid-template-columns:repeat(2,1fr)}
|
|
201
|
+
.search{width:140px}
|
|
202
|
+
.hdr{flex-wrap:wrap}
|
|
203
|
+
.hdr h1{display:none}
|
|
204
|
+
.tb th:nth-child(4),.tb td:nth-child(4){display:none}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Mobile: single column everything */
|
|
208
|
+
@media(max-width:480px){
|
|
209
|
+
.sts{grid-template-columns:1fr}
|
|
210
|
+
.cp{padding:12px}
|
|
211
|
+
.cd{padding:12px}
|
|
212
|
+
.hdr-right{flex-wrap:wrap}
|
|
213
|
+
.search{width:100%}
|
|
214
|
+
.st-v{font-size:1.1rem}
|
|
215
|
+
.ch{height:120px}
|
|
216
|
+
.tb th:nth-child(3),.tb td:nth-child(3){display:none}
|
|
217
|
+
}
|
|
172
218
|
`}} />
|
|
173
219
|
|
|
174
220
|
{/* Sidebar */}
|
|
@@ -191,6 +237,13 @@ const DashboardPage: React.FC = () => {
|
|
|
191
237
|
</div>
|
|
192
238
|
</aside>
|
|
193
239
|
|
|
240
|
+
{/* Mobile header bar */}
|
|
241
|
+
<div className="mob-bar">
|
|
242
|
+
<div className="mob-bar-btn" onClick={() => setActiveNav(activeNav)}>☰</div>
|
|
243
|
+
<h1>Dashboard</h1>
|
|
244
|
+
<div className="uav">AF</div>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
194
247
|
<div className="mn">
|
|
195
248
|
{/* Left Panel */}
|
|
196
249
|
<div className="lp">
|
|
@@ -233,7 +286,7 @@ const DashboardPage: React.FC = () => {
|
|
|
233
286
|
<div className="cp">
|
|
234
287
|
<div className="hdr">
|
|
235
288
|
<h1>Dashboard</h1>
|
|
236
|
-
<div
|
|
289
|
+
<div className="hdr-right">
|
|
237
290
|
<input className="search" placeholder="Search placeholder" />
|
|
238
291
|
<div className="uav">AF</div>
|
|
239
292
|
<span style={{ fontSize: "0.82rem", fontWeight: 600 }}>Andrew Forbist</span>
|