@trustless-work/blocks 1.0.5 → 1.0.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/bin/index.js
CHANGED
|
@@ -1580,7 +1580,7 @@ if (args[0] === "init") {
|
|
|
1580
1580
|
}
|
|
1581
1581
|
|
|
1582
1582
|
const addShadcn = await promptYesNo(
|
|
1583
|
-
"Add shadcn components (button, input, form, card, sonner, checkbox, dialog, textarea, sonner, select, table, calendar, popover, separator, calendar-05, badge, sheet, tabs, avatar, tooltip, progress, chart)?",
|
|
1583
|
+
"Add shadcn components (button, input, form, card, sonner, checkbox, dialog, textarea, sonner, select, table, calendar, popover, separator, calendar-05, badge, sheet, tabs, avatar, tooltip, progress, chart, empty)?",
|
|
1584
1584
|
true
|
|
1585
1585
|
);
|
|
1586
1586
|
if (addShadcn) {
|
|
@@ -1610,6 +1610,7 @@ if (args[0] === "init") {
|
|
|
1610
1610
|
"tooltip",
|
|
1611
1611
|
"progress",
|
|
1612
1612
|
"chart",
|
|
1613
|
+
"empty",
|
|
1613
1614
|
]);
|
|
1614
1615
|
});
|
|
1615
1616
|
} else {
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
import { Separator } from "__UI_BASE__/separator";
|
|
12
12
|
import { useDashboard } from "./useDashboard";
|
|
13
13
|
import { formatCurrency } from "../../helpers/format.helper";
|
|
14
|
-
import { Activity, Layers3, PiggyBank } from "lucide-react";
|
|
14
|
+
import { Activity, Layers3, PiggyBank, CloudOff } from "lucide-react";
|
|
15
15
|
import {
|
|
16
16
|
AreaChart,
|
|
17
17
|
Area,
|
|
@@ -29,6 +29,13 @@ import {
|
|
|
29
29
|
ChartTooltipContent,
|
|
30
30
|
type ChartConfig,
|
|
31
31
|
} from "__UI_BASE__/chart";
|
|
32
|
+
import {
|
|
33
|
+
Empty,
|
|
34
|
+
EmptyHeader,
|
|
35
|
+
EmptyMedia,
|
|
36
|
+
EmptyTitle,
|
|
37
|
+
EmptyDescription,
|
|
38
|
+
} from "__UI_BASE__/empty";
|
|
32
39
|
|
|
33
40
|
const chartConfigBar: ChartConfig = {
|
|
34
41
|
desktop: {
|
|
@@ -86,7 +93,7 @@ export const Dashboard01 = () => {
|
|
|
86
93
|
<div className="grid gap-6">
|
|
87
94
|
{/* KPI Cards */}
|
|
88
95
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
89
|
-
<Card>
|
|
96
|
+
<Card className="gap-3">
|
|
90
97
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
91
98
|
<CardTitle className="text-sm font-medium">Escrows</CardTitle>
|
|
92
99
|
<Layers3 className="h-4 w-4 text-muted-foreground" />
|
|
@@ -101,7 +108,7 @@ export const Dashboard01 = () => {
|
|
|
101
108
|
</CardContent>
|
|
102
109
|
</Card>
|
|
103
110
|
|
|
104
|
-
<Card>
|
|
111
|
+
<Card className="gap-3">
|
|
105
112
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
106
113
|
<CardTitle className="text-sm font-medium">Total Amount</CardTitle>
|
|
107
114
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
|
@@ -116,7 +123,7 @@ export const Dashboard01 = () => {
|
|
|
116
123
|
</CardContent>
|
|
117
124
|
</Card>
|
|
118
125
|
|
|
119
|
-
<Card>
|
|
126
|
+
<Card className="gap-3">
|
|
120
127
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
121
128
|
<CardTitle className="text-sm font-medium">Total Balance</CardTitle>
|
|
122
129
|
<PiggyBank className="h-4 w-4 text-muted-foreground" />
|
|
@@ -137,7 +144,7 @@ export const Dashboard01 = () => {
|
|
|
137
144
|
{/* Charts */}
|
|
138
145
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
139
146
|
{/* Bar chart: Amounts by date (shadcn pattern) */}
|
|
140
|
-
<Card>
|
|
147
|
+
<Card className="gap-3">
|
|
141
148
|
<CardHeader>
|
|
142
149
|
<CardTitle>Escrow Amounts</CardTitle>
|
|
143
150
|
<CardDescription>Amounts by date</CardDescription>
|
|
@@ -147,26 +154,42 @@ export const Dashboard01 = () => {
|
|
|
147
154
|
className="w-full h-56 sm:h-64 lg:h-72"
|
|
148
155
|
config={chartConfigBar}
|
|
149
156
|
>
|
|
150
|
-
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
157
|
+
{barData.length > 0 ? (
|
|
158
|
+
<BarChart accessibilityLayer data={barData}>
|
|
159
|
+
<CartesianGrid vertical={false} />
|
|
160
|
+
<XAxis
|
|
161
|
+
dataKey="month"
|
|
162
|
+
tickLine={false}
|
|
163
|
+
tickMargin={10}
|
|
164
|
+
axisLine={false}
|
|
165
|
+
tickFormatter={(value) =>
|
|
166
|
+
new Date(String(value)).toLocaleDateString("en-US", {
|
|
167
|
+
month: "short",
|
|
168
|
+
day: "numeric",
|
|
169
|
+
})
|
|
170
|
+
}
|
|
171
|
+
/>
|
|
172
|
+
<ChartTooltip
|
|
173
|
+
cursor={false}
|
|
174
|
+
content={<ChartTooltipContent hideLabel />}
|
|
175
|
+
/>
|
|
176
|
+
<Bar
|
|
177
|
+
dataKey="desktop"
|
|
178
|
+
fill="var(--color-desktop)"
|
|
179
|
+
radius={8}
|
|
180
|
+
/>
|
|
181
|
+
</BarChart>
|
|
182
|
+
) : (
|
|
183
|
+
<Empty className="border border-dashed">
|
|
184
|
+
<EmptyHeader>
|
|
185
|
+
<EmptyMedia variant="icon">
|
|
186
|
+
<CloudOff />
|
|
187
|
+
</EmptyMedia>
|
|
188
|
+
<EmptyTitle>No data</EmptyTitle>
|
|
189
|
+
<EmptyDescription>No Data Available</EmptyDescription>
|
|
190
|
+
</EmptyHeader>
|
|
191
|
+
</Empty>
|
|
192
|
+
)}
|
|
170
193
|
</ChartContainer>
|
|
171
194
|
</CardContent>
|
|
172
195
|
</Card>
|
|
@@ -182,22 +205,34 @@ export const Dashboard01 = () => {
|
|
|
182
205
|
config={chartConfigDonut}
|
|
183
206
|
className="w-full h-56 sm:h-64 lg:h-72"
|
|
184
207
|
>
|
|
185
|
-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
208
|
+
{donutData.some((d) => Number(d.visitors) > 0) ? (
|
|
209
|
+
<PieChart>
|
|
210
|
+
<ChartTooltip
|
|
211
|
+
cursor={false}
|
|
212
|
+
content={<ChartTooltipContent hideLabel />}
|
|
213
|
+
/>
|
|
214
|
+
<Pie
|
|
215
|
+
data={donutData}
|
|
216
|
+
dataKey="visitors"
|
|
217
|
+
nameKey="browser"
|
|
218
|
+
innerRadius={60}
|
|
219
|
+
>
|
|
220
|
+
{donutData.map((slice, idx) => (
|
|
221
|
+
<Cell key={`cell-${idx}`} fill={slice.fill} />
|
|
222
|
+
))}
|
|
223
|
+
</Pie>
|
|
224
|
+
</PieChart>
|
|
225
|
+
) : (
|
|
226
|
+
<Empty className="border border-dashed">
|
|
227
|
+
<EmptyHeader>
|
|
228
|
+
<EmptyMedia variant="icon">
|
|
229
|
+
<CloudOff />
|
|
230
|
+
</EmptyMedia>
|
|
231
|
+
<EmptyTitle>No data</EmptyTitle>
|
|
232
|
+
<EmptyDescription>No Data Available</EmptyDescription>
|
|
233
|
+
</EmptyHeader>
|
|
234
|
+
</Empty>
|
|
235
|
+
)}
|
|
201
236
|
</ChartContainer>
|
|
202
237
|
<div className="mt-4 flex items-center justify-center gap-6">
|
|
203
238
|
<div className="flex items-center gap-2">
|
|
@@ -229,36 +264,48 @@ export const Dashboard01 = () => {
|
|
|
229
264
|
className="w-full h-56 sm:h-64 lg:h-72"
|
|
230
265
|
config={chartConfigArea}
|
|
231
266
|
>
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
267
|
+
{areaData.length > 0 ? (
|
|
268
|
+
<AreaChart
|
|
269
|
+
accessibilityLayer
|
|
270
|
+
data={areaData}
|
|
271
|
+
margin={{ left: 12, right: 12 }}
|
|
272
|
+
>
|
|
273
|
+
<CartesianGrid vertical={false} />
|
|
274
|
+
<XAxis
|
|
275
|
+
dataKey="month"
|
|
276
|
+
tickLine={false}
|
|
277
|
+
axisLine={false}
|
|
278
|
+
tickMargin={8}
|
|
279
|
+
tickFormatter={(value) =>
|
|
280
|
+
new Date(String(value)).toLocaleDateString("en-US", {
|
|
281
|
+
month: "short",
|
|
282
|
+
day: "numeric",
|
|
283
|
+
})
|
|
284
|
+
}
|
|
285
|
+
/>
|
|
286
|
+
<ChartTooltip
|
|
287
|
+
cursor={false}
|
|
288
|
+
content={<ChartTooltipContent indicator="line" />}
|
|
289
|
+
/>
|
|
290
|
+
<Area
|
|
291
|
+
dataKey="desktop"
|
|
292
|
+
type="natural"
|
|
293
|
+
fill="var(--color-desktop)"
|
|
294
|
+
fillOpacity={0.4}
|
|
295
|
+
stroke="var(--color-desktop)"
|
|
296
|
+
/>
|
|
297
|
+
</AreaChart>
|
|
298
|
+
) : (
|
|
299
|
+
<Empty className="border border-dashed">
|
|
300
|
+
<EmptyHeader>
|
|
301
|
+
<EmptyMedia variant="icon">
|
|
302
|
+
<CloudOff />
|
|
303
|
+
</EmptyMedia>
|
|
304
|
+
<EmptyTitle>No data</EmptyTitle>
|
|
305
|
+
<EmptyDescription>No Data Available</EmptyDescription>
|
|
306
|
+
</EmptyHeader>
|
|
307
|
+
</Empty>
|
|
308
|
+
)}
|
|
262
309
|
</ChartContainer>
|
|
263
310
|
</CardContent>
|
|
264
311
|
</Card>
|