@tree-ia/design-system 1.3.1 → 1.4.1
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/README.md +0 -0
- package/dist/index.d.mts +316 -2
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +1480 -155
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -5
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
|
-
import { AlertTriangle, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Info, LogOut, Moon, Sun, User, X, XCircle } from "lucide-react";
|
|
4
|
+
import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, File, GripVertical, Image, Inbox, Info, LogOut, Moon, Search, Sun, Upload, User, X, XCircle } from "lucide-react";
|
|
5
5
|
import { Bar, Line } from "react-chartjs-2";
|
|
6
|
-
import { BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip } from "chart.js";
|
|
6
|
+
import { BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip as Tooltip$1 } from "chart.js";
|
|
7
|
+
import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
|
7
8
|
|
|
8
9
|
//#region src/components/Loading/index.tsx
|
|
9
10
|
const sizeMap = {
|
|
@@ -34,14 +35,14 @@ function Loading({ size = "md", className = "", text, textColor, color, variant
|
|
|
34
35
|
|
|
35
36
|
//#endregion
|
|
36
37
|
//#region src/components/Button/index.tsx
|
|
37
|
-
const cn$
|
|
38
|
+
const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
|
|
38
39
|
function Button({ children, variant = "primary", size = "md", isLoading = false, icon, iconPosition = "left", className, disabled, ...props }) {
|
|
39
|
-
const baseStyles = "font-medium rounded-lg transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center";
|
|
40
|
+
const baseStyles = "font-medium rounded-lg transition-all duration-200 ease-out cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--dashboard-primary,#2563EB)] active:scale-[0.97]";
|
|
40
41
|
const variantStyles = {
|
|
41
|
-
primary: "bg-[var(--dashboard-primary,#
|
|
42
|
-
secondary: "bg-[var(--dashboard-text-secondary,#
|
|
43
|
-
danger: "bg-[var(--dashboard-status-danger,#
|
|
44
|
-
ghost: "bg-transparent hover:bg-[var(--dashboard-text-secondary,#
|
|
42
|
+
primary: "bg-[var(--dashboard-primary,#2563EB)] text-white hover:brightness-110 hover:shadow-md",
|
|
43
|
+
secondary: "bg-[var(--dashboard-text-secondary,#64748B)]/10 text-[var(--dashboard-text-primary,#0F172A)] border border-[var(--dashboard-text-secondary,#64748B)]/20 hover:bg-[var(--dashboard-text-secondary,#64748B)]/15 hover:border-[var(--dashboard-text-secondary,#64748B)]/30",
|
|
44
|
+
danger: "bg-[var(--dashboard-status-danger,#DC2626)] text-white hover:brightness-110 hover:shadow-md",
|
|
45
|
+
ghost: "bg-transparent hover:bg-[var(--dashboard-text-secondary,#64748B)]/8 text-[var(--dashboard-text-primary,#0F172A)]"
|
|
45
46
|
};
|
|
46
47
|
const sizeStyles = {
|
|
47
48
|
sm: "px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm",
|
|
@@ -55,7 +56,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
|
|
|
55
56
|
};
|
|
56
57
|
const isIconOnly = !!icon && (children === void 0 || children === null || typeof children === "string" && children.trim() === "");
|
|
57
58
|
return /* @__PURE__ */ jsx("button", {
|
|
58
|
-
className: cn$
|
|
59
|
+
className: cn$29(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
|
|
59
60
|
disabled: disabled || isLoading,
|
|
60
61
|
...props,
|
|
61
62
|
children: isLoading ? /* @__PURE__ */ jsxs("span", {
|
|
@@ -80,7 +81,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
|
|
|
80
81
|
|
|
81
82
|
//#endregion
|
|
82
83
|
//#region src/components/Input/index.tsx
|
|
83
|
-
const cn$
|
|
84
|
+
const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
|
|
84
85
|
const Input = React.forwardRef(({ className, type = "text", label, error, children, id, ...props }, ref) => {
|
|
85
86
|
const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
|
|
86
87
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -96,7 +97,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, childr
|
|
|
96
97
|
children: [/* @__PURE__ */ jsx("input", {
|
|
97
98
|
type,
|
|
98
99
|
id: inputId,
|
|
99
|
-
className: cn$
|
|
100
|
+
className: cn$28("flex h-10 w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] px-3 py-2 text-sm text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-colors duration-200 focus:border-[var(--dashboard-primary,#37a501)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
|
|
100
101
|
ref,
|
|
101
102
|
...props
|
|
102
103
|
}), children && /* @__PURE__ */ jsx("div", {
|
|
@@ -247,7 +248,7 @@ function Dropdown({ options, value, onChange, label, placeholder = "Selecione um
|
|
|
247
248
|
top: position.top,
|
|
248
249
|
left: position.left,
|
|
249
250
|
width: position.width,
|
|
250
|
-
zIndex:
|
|
251
|
+
zIndex: 10001
|
|
251
252
|
},
|
|
252
253
|
children: /* @__PURE__ */ jsx("ul", {
|
|
253
254
|
className: "py-1",
|
|
@@ -284,9 +285,9 @@ function Table({ columns, data, onRowClick, isLoading = false, emptyMessage = "N
|
|
|
284
285
|
icon: emptyIcon
|
|
285
286
|
});
|
|
286
287
|
return /* @__PURE__ */ jsx("div", {
|
|
287
|
-
className: `overflow-x-auto bg-[var(--dashboard-surface,#ffffff)] rounded-
|
|
288
|
+
className: `overflow-x-auto bg-[var(--dashboard-surface,#ffffff)] rounded-xl border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm ${className}`,
|
|
288
289
|
children: /* @__PURE__ */ jsxs("table", {
|
|
289
|
-
className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#
|
|
290
|
+
className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#64748B)]/10",
|
|
290
291
|
children: [/* @__PURE__ */ jsx(TableHeader, { columns }), /* @__PURE__ */ jsx(TableBody, {
|
|
291
292
|
columns,
|
|
292
293
|
data,
|
|
@@ -299,10 +300,10 @@ function Table({ columns, data, onRowClick, isLoading = false, emptyMessage = "N
|
|
|
299
300
|
function TableHeader({ columns }) {
|
|
300
301
|
const alignClass = (align) => align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left";
|
|
301
302
|
return /* @__PURE__ */ jsx("thead", {
|
|
302
|
-
className: "bg-[var(--dashboard-
|
|
303
|
+
className: "bg-[var(--dashboard-background,#F8FAFC)] sticky top-0 z-10",
|
|
303
304
|
children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
|
|
304
305
|
scope: "col",
|
|
305
|
-
className: `px-6 py-3 text-
|
|
306
|
+
className: `px-6 py-3 text-[0.6875rem] font-semibold text-[var(--dashboard-text-secondary,#64748B)] uppercase tracking-wider ${alignClass(column.align)} ${column.width ? `w-[${column.width}]` : ""}`,
|
|
306
307
|
children: column.header
|
|
307
308
|
}, column.key)) })
|
|
308
309
|
});
|
|
@@ -310,47 +311,80 @@ function TableHeader({ columns }) {
|
|
|
310
311
|
function TableBody({ columns, data, onRowClick, keyExtractor }) {
|
|
311
312
|
const alignClass = (align) => align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left";
|
|
312
313
|
return /* @__PURE__ */ jsx("tbody", {
|
|
313
|
-
className: "bg-[var(--dashboard-surface,#ffffff)] divide-y divide-[var(--dashboard-text-secondary,#
|
|
314
|
-
children: data.map((item) => /* @__PURE__ */ jsx("tr", {
|
|
314
|
+
className: "bg-[var(--dashboard-surface,#ffffff)] divide-y divide-[var(--dashboard-text-secondary,#64748B)]/8",
|
|
315
|
+
children: data.map((item, index) => /* @__PURE__ */ jsx("tr", {
|
|
315
316
|
onClick: () => onRowClick?.(item),
|
|
316
|
-
className: `
|
|
317
|
+
className: `transition-colors duration-150 ${index % 2 === 1 ? "bg-[var(--dashboard-text-secondary,#64748B)]/[0.02]" : ""} hover:bg-[var(--dashboard-primary,#2563EB)]/[0.04] ${onRowClick ? "cursor-pointer" : ""}`,
|
|
317
318
|
children: columns.map((column) => /* @__PURE__ */ jsx("td", {
|
|
318
|
-
className: `px-6 py-
|
|
319
|
+
className: `px-6 py-3.5 whitespace-nowrap text-sm leading-snug ${alignClass(column.align)}`,
|
|
319
320
|
children: column.render(item)
|
|
320
321
|
}, column.key))
|
|
321
322
|
}, keyExtractor(item)))
|
|
322
323
|
});
|
|
323
324
|
}
|
|
324
|
-
function TableSkeleton() {
|
|
325
|
+
function TableSkeleton({ rows = 5 }) {
|
|
325
326
|
return /* @__PURE__ */ jsx("div", {
|
|
326
|
-
className: "bg-[var(--dashboard-surface,#ffffff)] rounded-
|
|
327
|
-
children: /* @__PURE__ */
|
|
328
|
-
className: "
|
|
329
|
-
children: /* @__PURE__ */ jsx(
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
327
|
+
className: "overflow-x-auto bg-[var(--dashboard-surface,#ffffff)] rounded-xl border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm",
|
|
328
|
+
children: /* @__PURE__ */ jsxs("table", {
|
|
329
|
+
className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#64748B)]/10",
|
|
330
|
+
children: [/* @__PURE__ */ jsx("thead", {
|
|
331
|
+
className: "bg-[var(--dashboard-background,#F8FAFC)]",
|
|
332
|
+
children: /* @__PURE__ */ jsx("tr", { children: [
|
|
333
|
+
1,
|
|
334
|
+
2,
|
|
335
|
+
3,
|
|
336
|
+
4
|
|
337
|
+
].map((i) => /* @__PURE__ */ jsx("th", {
|
|
338
|
+
className: "px-6 py-3",
|
|
339
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
340
|
+
className: "h-3 rounded animate-pulse",
|
|
341
|
+
style: {
|
|
342
|
+
width: i === 2 ? "60%" : i === 1 ? "30%" : "20%",
|
|
343
|
+
backgroundColor: "var(--dashboard-text-secondary, #64748B)",
|
|
344
|
+
opacity: .1
|
|
345
|
+
}
|
|
346
|
+
})
|
|
347
|
+
}, i)) })
|
|
348
|
+
}), /* @__PURE__ */ jsx("tbody", {
|
|
349
|
+
className: "bg-[var(--dashboard-surface,#ffffff)] divide-y divide-[var(--dashboard-text-secondary,#64748B)]/8",
|
|
350
|
+
children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("tr", { children: [
|
|
351
|
+
1,
|
|
352
|
+
2,
|
|
353
|
+
3,
|
|
354
|
+
4
|
|
355
|
+
].map((col) => /* @__PURE__ */ jsx("td", {
|
|
356
|
+
className: "px-6 py-3.5",
|
|
357
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
358
|
+
className: "h-4 rounded animate-pulse",
|
|
359
|
+
style: {
|
|
360
|
+
width: col === 2 ? "75%" : col === 1 ? "40%" : col === 3 ? "50%" : "30%",
|
|
361
|
+
backgroundColor: "var(--dashboard-text-secondary, #64748B)",
|
|
362
|
+
opacity: .08
|
|
363
|
+
}
|
|
364
|
+
})
|
|
365
|
+
}, col)) }, i))
|
|
366
|
+
})]
|
|
333
367
|
})
|
|
334
368
|
});
|
|
335
369
|
}
|
|
336
370
|
function TableEmpty({ message, icon }) {
|
|
337
371
|
return /* @__PURE__ */ jsx("div", {
|
|
338
|
-
className: "bg-[var(--dashboard-surface,#ffffff)] rounded-
|
|
372
|
+
className: "bg-[var(--dashboard-surface,#ffffff)] rounded-xl border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm p-12",
|
|
339
373
|
children: /* @__PURE__ */ jsxs("div", {
|
|
340
374
|
className: "text-center",
|
|
341
375
|
children: [icon || /* @__PURE__ */ jsx("svg", {
|
|
342
|
-
className: "mx-auto h-12 w-12 text-[var(--dashboard-text-secondary,#
|
|
376
|
+
className: "mx-auto h-12 w-12 text-[var(--dashboard-text-secondary,#64748B)]/40",
|
|
343
377
|
fill: "none",
|
|
344
378
|
stroke: "currentColor",
|
|
345
379
|
viewBox: "0 0 24 24",
|
|
346
380
|
children: /* @__PURE__ */ jsx("path", {
|
|
347
381
|
strokeLinecap: "round",
|
|
348
382
|
strokeLinejoin: "round",
|
|
349
|
-
strokeWidth:
|
|
383
|
+
strokeWidth: 1.5,
|
|
350
384
|
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
351
385
|
})
|
|
352
386
|
}), /* @__PURE__ */ jsx("p", {
|
|
353
|
-
className: "mt-4 text-[var(--dashboard-text-secondary,#
|
|
387
|
+
className: "mt-4 text-sm text-[var(--dashboard-text-secondary,#64748B)]",
|
|
354
388
|
children: message
|
|
355
389
|
})]
|
|
356
390
|
})
|
|
@@ -435,13 +469,13 @@ function Modal({ isOpen, onClose, onSave, title = "", children, showFooter = fal
|
|
|
435
469
|
"aria-labelledby": title ? "modal-title" : void 0,
|
|
436
470
|
children: /* @__PURE__ */ jsxs("div", {
|
|
437
471
|
ref: modalRef,
|
|
438
|
-
className: `w-full rounded-
|
|
472
|
+
className: `w-full rounded-2xl bg-[var(--dashboard-surface,#ffffff)] border border-[var(--dashboard-text-secondary,#64748B)]/10 dashboard-shadow-xl ${sizeClasses[size]} flex max-h-[90vh] flex-col transition-all duration-200 ease-out ${isClosing ? "scale-[0.98] opacity-0" : "scale-100 opacity-100"}`,
|
|
439
473
|
children: [
|
|
440
474
|
/* @__PURE__ */ jsxs("div", {
|
|
441
|
-
className: "flex h-fit items-center justify-between border-b border-[var(--dashboard-text-secondary,#
|
|
475
|
+
className: "flex h-fit items-center justify-between border-b border-[var(--dashboard-text-secondary,#64748B)]/10 px-6 py-4",
|
|
442
476
|
children: [title && /* @__PURE__ */ jsx("h2", {
|
|
443
477
|
id: "modal-title",
|
|
444
|
-
className: "text-
|
|
478
|
+
className: "text-lg font-semibold text-[var(--dashboard-text-primary,#0F172A)] tracking-tight",
|
|
445
479
|
children: title
|
|
446
480
|
}), /* @__PURE__ */ jsx(Button, {
|
|
447
481
|
variant: "ghost",
|
|
@@ -480,21 +514,21 @@ function Modal({ isOpen, onClose, onSave, title = "", children, showFooter = fal
|
|
|
480
514
|
//#region src/components/Card/index.tsx
|
|
481
515
|
function Card({ children, className = "", title, subtitle, icon, headerActions, showDivider = false }) {
|
|
482
516
|
return /* @__PURE__ */ jsx("div", {
|
|
483
|
-
className: `bg-[var(--dashboard-surface,#ffffff)] rounded-
|
|
517
|
+
className: `bg-[var(--dashboard-surface,#ffffff)] rounded-xl border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-shadow duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md ${className}`,
|
|
484
518
|
children: /* @__PURE__ */ jsxs("div", {
|
|
485
|
-
className: "p-
|
|
519
|
+
className: "p-5",
|
|
486
520
|
children: [title && /* @__PURE__ */ jsxs("div", {
|
|
487
|
-
className: showDivider ? "mb-
|
|
521
|
+
className: showDivider ? "mb-5" : "mb-3",
|
|
488
522
|
children: [
|
|
489
523
|
/* @__PURE__ */ jsxs("div", {
|
|
490
524
|
className: "flex items-center justify-between",
|
|
491
525
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
492
|
-
className: "flex items-center gap-2",
|
|
526
|
+
className: "flex items-center gap-2.5",
|
|
493
527
|
children: [icon && /* @__PURE__ */ jsx("div", {
|
|
494
|
-
className: "text-[var(--dashboard-text-secondary,#
|
|
528
|
+
className: "text-[var(--dashboard-text-secondary,#64748B)]",
|
|
495
529
|
children: icon
|
|
496
530
|
}), /* @__PURE__ */ jsx("h3", {
|
|
497
|
-
className: `${showDivider ? "font-medium" : "text-base font-semibold"} text-[var(--dashboard-text-primary,#
|
|
531
|
+
className: `${showDivider ? "font-medium" : "text-base font-semibold"} text-[var(--dashboard-text-primary,#0F172A)] truncate tracking-tight`,
|
|
498
532
|
children: title
|
|
499
533
|
})]
|
|
500
534
|
}), headerActions && /* @__PURE__ */ jsx("div", {
|
|
@@ -503,10 +537,10 @@ function Card({ children, className = "", title, subtitle, icon, headerActions,
|
|
|
503
537
|
})]
|
|
504
538
|
}),
|
|
505
539
|
subtitle && /* @__PURE__ */ jsx("p", {
|
|
506
|
-
className: "text-sm text-[var(--dashboard-text-secondary,#
|
|
540
|
+
className: "text-sm text-[var(--dashboard-text-secondary,#64748B)] mt-1",
|
|
507
541
|
children: subtitle
|
|
508
542
|
}),
|
|
509
|
-
showDivider && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-[var(--dashboard-text-secondary,#
|
|
543
|
+
showDivider && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-[var(--dashboard-text-secondary,#64748B)]/10 mt-5" })
|
|
510
544
|
]
|
|
511
545
|
}), children]
|
|
512
546
|
})
|
|
@@ -760,16 +794,16 @@ function FormField({ label, name, type = "text", value, onChange, error, require
|
|
|
760
794
|
|
|
761
795
|
//#endregion
|
|
762
796
|
//#region src/components/Tabs/index.tsx
|
|
763
|
-
const cn$
|
|
797
|
+
const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
|
|
764
798
|
function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
765
799
|
if (variant === "pill") return /* @__PURE__ */ jsx("div", {
|
|
766
|
-
className: cn$
|
|
800
|
+
className: cn$27("flex flex-wrap gap-2", className),
|
|
767
801
|
role: "tablist",
|
|
768
802
|
children: tabs.map((tab) => {
|
|
769
803
|
const isActive = activeTab === tab.id;
|
|
770
804
|
return /* @__PURE__ */ jsxs("button", {
|
|
771
805
|
onClick: () => onChange(tab.id),
|
|
772
|
-
className: cn$
|
|
806
|
+
className: cn$27("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
|
|
773
807
|
role: "tab",
|
|
774
808
|
"aria-selected": isActive,
|
|
775
809
|
children: [
|
|
@@ -779,7 +813,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
|
779
813
|
}),
|
|
780
814
|
tab.label,
|
|
781
815
|
tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
782
|
-
className: cn$
|
|
816
|
+
className: cn$27("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-white/20 text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
|
|
783
817
|
children: tab.count
|
|
784
818
|
})
|
|
785
819
|
]
|
|
@@ -787,7 +821,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
|
787
821
|
})
|
|
788
822
|
});
|
|
789
823
|
return /* @__PURE__ */ jsx("div", {
|
|
790
|
-
className: cn$
|
|
824
|
+
className: cn$27("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
|
|
791
825
|
children: /* @__PURE__ */ jsx("nav", {
|
|
792
826
|
className: "flex gap-6",
|
|
793
827
|
"aria-label": "Tabs",
|
|
@@ -795,7 +829,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
|
795
829
|
const isActive = activeTab === tab.id;
|
|
796
830
|
return /* @__PURE__ */ jsxs("button", {
|
|
797
831
|
onClick: () => onChange(tab.id),
|
|
798
|
-
className: cn$
|
|
832
|
+
className: cn$27("relative pb-3 px-1 text-sm font-medium transition-colors border-b-2 flex items-center gap-2 cursor-pointer", isActive ? "text-[var(--dashboard-primary,#37a501)] border-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)] border-transparent"),
|
|
799
833
|
role: "tab",
|
|
800
834
|
"aria-selected": isActive,
|
|
801
835
|
children: [
|
|
@@ -805,7 +839,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
|
805
839
|
}),
|
|
806
840
|
tab.label,
|
|
807
841
|
tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
808
|
-
className: cn$
|
|
842
|
+
className: cn$27("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
|
|
809
843
|
children: tab.count
|
|
810
844
|
})
|
|
811
845
|
]
|
|
@@ -817,7 +851,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
|
|
|
817
851
|
|
|
818
852
|
//#endregion
|
|
819
853
|
//#region src/components/DateRangePicker/index.tsx
|
|
820
|
-
const cn$
|
|
854
|
+
const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
|
|
821
855
|
const locales = {
|
|
822
856
|
pt: {
|
|
823
857
|
months: [
|
|
@@ -924,7 +958,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
|
|
|
924
958
|
};
|
|
925
959
|
const days = getDaysInMonth(currentMonth);
|
|
926
960
|
return /* @__PURE__ */ jsxs("div", {
|
|
927
|
-
className: cn$
|
|
961
|
+
className: cn$26("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
|
|
928
962
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
929
963
|
className: "flex items-center justify-between mb-4",
|
|
930
964
|
children: [
|
|
@@ -962,9 +996,9 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
|
|
|
962
996
|
const isSelected = isStart || isEnd;
|
|
963
997
|
return /* @__PURE__ */ jsxs("div", {
|
|
964
998
|
className: "relative h-8 w-8",
|
|
965
|
-
children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$
|
|
999
|
+
children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$26("absolute inset-0 bg-[var(--dashboard-text-secondary,#6b7280)]/10", isStart && "rounded-l-full", isEnd && "rounded-r-full") }), /* @__PURE__ */ jsx("button", {
|
|
966
1000
|
onClick: () => handleDayClick(day),
|
|
967
|
-
className: cn$
|
|
1001
|
+
className: cn$26("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full cursor-pointer", isSelected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
|
|
968
1002
|
children: day
|
|
969
1003
|
})]
|
|
970
1004
|
}, day);
|
|
@@ -975,7 +1009,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
|
|
|
975
1009
|
|
|
976
1010
|
//#endregion
|
|
977
1011
|
//#region src/components/Title/index.tsx
|
|
978
|
-
const cn$
|
|
1012
|
+
const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
|
|
979
1013
|
const defaultSizeByLevel = {
|
|
980
1014
|
1: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl",
|
|
981
1015
|
2: "text-xl sm:text-2xl md:text-3xl lg:text-4xl",
|
|
@@ -1010,7 +1044,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
|
|
|
1010
1044
|
const sizeClass = size ? customSizes[size] : defaultSizeByLevel[level];
|
|
1011
1045
|
const colorClass = color || "text-[var(--dashboard-text-primary,#2d2d2d)]";
|
|
1012
1046
|
return /* @__PURE__ */ jsx(Tag, {
|
|
1013
|
-
className: cn$
|
|
1047
|
+
className: cn$25(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
|
|
1014
1048
|
...props,
|
|
1015
1049
|
children
|
|
1016
1050
|
});
|
|
@@ -1018,7 +1052,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
|
|
|
1018
1052
|
|
|
1019
1053
|
//#endregion
|
|
1020
1054
|
//#region src/components/ToggleSwitch/index.tsx
|
|
1021
|
-
const cn$
|
|
1055
|
+
const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1022
1056
|
const sizeConfig$1 = {
|
|
1023
1057
|
sm: {
|
|
1024
1058
|
track: "h-5 w-9",
|
|
@@ -1042,7 +1076,7 @@ const sizeConfig$1 = {
|
|
|
1042
1076
|
function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label, className }) {
|
|
1043
1077
|
const config = sizeConfig$1[size];
|
|
1044
1078
|
return /* @__PURE__ */ jsxs("div", {
|
|
1045
|
-
className: cn$
|
|
1079
|
+
className: cn$24("inline-flex items-center gap-2", className),
|
|
1046
1080
|
children: [/* @__PURE__ */ jsx("button", {
|
|
1047
1081
|
type: "button",
|
|
1048
1082
|
role: "switch",
|
|
@@ -1050,10 +1084,10 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
|
|
|
1050
1084
|
"aria-label": label,
|
|
1051
1085
|
disabled,
|
|
1052
1086
|
onClick: () => onChange(!enabled),
|
|
1053
|
-
className: cn$
|
|
1054
|
-
children: /* @__PURE__ */ jsx("span", { className: cn$
|
|
1087
|
+
className: cn$24("relative inline-flex items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--dashboard-primary,#37a501)]", config.track, enabled ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
|
|
1088
|
+
children: /* @__PURE__ */ jsx("span", { className: cn$24("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
|
|
1055
1089
|
}), label && /* @__PURE__ */ jsx("span", {
|
|
1056
|
-
className: cn$
|
|
1090
|
+
className: cn$24("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
|
|
1057
1091
|
children: label
|
|
1058
1092
|
})]
|
|
1059
1093
|
});
|
|
@@ -1061,7 +1095,7 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
|
|
|
1061
1095
|
|
|
1062
1096
|
//#endregion
|
|
1063
1097
|
//#region src/components/BadgeStatus/index.tsx
|
|
1064
|
-
const cn$
|
|
1098
|
+
const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1065
1099
|
const variantStyles = {
|
|
1066
1100
|
success: {
|
|
1067
1101
|
color: "text-[var(--dashboard-status-success,#10B981)]",
|
|
@@ -1084,7 +1118,7 @@ const variantStyles = {
|
|
|
1084
1118
|
bgColor: "bg-[var(--dashboard-text-secondary,#6b7280)]/10"
|
|
1085
1119
|
}
|
|
1086
1120
|
};
|
|
1087
|
-
const sizeClasses = {
|
|
1121
|
+
const sizeClasses$1 = {
|
|
1088
1122
|
sm: "px-2 py-0.5 text-xs",
|
|
1089
1123
|
md: "px-3 py-1 text-sm"
|
|
1090
1124
|
};
|
|
@@ -1092,7 +1126,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
|
|
|
1092
1126
|
const styles = variantStyles[variant];
|
|
1093
1127
|
const useCustomColors = color || bgColor;
|
|
1094
1128
|
return /* @__PURE__ */ jsx("span", {
|
|
1095
|
-
className: cn$
|
|
1129
|
+
className: cn$23("inline-flex items-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
|
|
1096
1130
|
style: useCustomColors ? {
|
|
1097
1131
|
color: color || void 0,
|
|
1098
1132
|
backgroundColor: bgColor || void 0
|
|
@@ -1103,7 +1137,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
|
|
|
1103
1137
|
|
|
1104
1138
|
//#endregion
|
|
1105
1139
|
//#region src/components/Sidebar/index.tsx
|
|
1106
|
-
const cn$
|
|
1140
|
+
const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1107
1141
|
function DefaultLink({ href, className, children }) {
|
|
1108
1142
|
return /* @__PURE__ */ jsx("a", {
|
|
1109
1143
|
href,
|
|
@@ -1115,7 +1149,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1115
1149
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
1116
1150
|
const cubicBezier = "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
1117
1151
|
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
|
|
1118
|
-
className: "xl:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--dashboard-
|
|
1152
|
+
className: "xl:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-b border-[var(--dashboard-sidebar-border,#2A6510)]",
|
|
1119
1153
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
1120
1154
|
className: "flex items-center justify-center px-4 h-16 relative",
|
|
1121
1155
|
children: [/* @__PURE__ */ jsx("div", {
|
|
@@ -1123,7 +1157,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1123
1157
|
children: logo
|
|
1124
1158
|
}), /* @__PURE__ */ jsx("button", {
|
|
1125
1159
|
onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
|
|
1126
|
-
className: "absolute right-4 inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors cursor-pointer bg-
|
|
1160
|
+
className: "absolute right-4 inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors cursor-pointer bg-white/10 text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/20 h-10 w-10",
|
|
1127
1161
|
"aria-label": "Menu",
|
|
1128
1162
|
"aria-expanded": isMobileMenuOpen,
|
|
1129
1163
|
children: /* @__PURE__ */ jsx(ChevronDown, {
|
|
@@ -1132,7 +1166,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1132
1166
|
})
|
|
1133
1167
|
})]
|
|
1134
1168
|
}), /* @__PURE__ */ jsx("nav", {
|
|
1135
|
-
className: `absolute top-16 left-0 right-0 bg-[var(--dashboard-
|
|
1169
|
+
className: `absolute top-16 left-0 right-0 bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-b border-[var(--dashboard-sidebar-border,#2A6510)] shadow-lg transition-all duration-200 ${isMobileMenuOpen ? "max-h-[calc(100vh-4rem)] overflow-y-auto" : "max-h-0 overflow-hidden"}`,
|
|
1136
1170
|
children: /* @__PURE__ */ jsxs("div", {
|
|
1137
1171
|
className: "px-4 py-2",
|
|
1138
1172
|
children: [menuItems.map((item) => {
|
|
@@ -1142,7 +1176,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1142
1176
|
href: item.href,
|
|
1143
1177
|
className: "block",
|
|
1144
1178
|
children: /* @__PURE__ */ jsxs("div", {
|
|
1145
|
-
className: cn$
|
|
1179
|
+
className: cn$22("w-full flex items-center justify-start px-4 py-3 rounded-lg text-sm font-medium transition-colors mb-1 cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)]/25 text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/10"),
|
|
1146
1180
|
children: [/* @__PURE__ */ jsx(Icon, {
|
|
1147
1181
|
size: 20,
|
|
1148
1182
|
className: "mr-3 flex-shrink-0"
|
|
@@ -1153,33 +1187,33 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1153
1187
|
})
|
|
1154
1188
|
}, item.id);
|
|
1155
1189
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1156
|
-
className: "mt-2 pt-2 border-t border-[var(--dashboard-
|
|
1190
|
+
className: "mt-2 pt-2 border-t border-[var(--dashboard-sidebar-border,#2A6510)] space-y-2",
|
|
1157
1191
|
children: [user && /* @__PURE__ */ jsxs("button", {
|
|
1158
1192
|
onClick: onUserClick,
|
|
1159
|
-
className: "w-full flex items-center px-4 py-3 rounded-lg bg-
|
|
1193
|
+
className: "w-full flex items-center px-4 py-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer",
|
|
1160
1194
|
children: [/* @__PURE__ */ jsx("div", {
|
|
1161
|
-
className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/
|
|
1195
|
+
className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/30 text-[var(--dashboard-sidebar-text,#FFFFFF)] flex-shrink-0",
|
|
1162
1196
|
children: /* @__PURE__ */ jsx(User, { size: 16 })
|
|
1163
1197
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1164
1198
|
className: "ml-3 text-left",
|
|
1165
1199
|
children: [
|
|
1166
1200
|
user.subtitle && /* @__PURE__ */ jsx("p", {
|
|
1167
|
-
className: "text-xs text-[var(--dashboard-text
|
|
1201
|
+
className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
|
|
1168
1202
|
children: user.subtitle
|
|
1169
1203
|
}),
|
|
1170
1204
|
/* @__PURE__ */ jsx("p", {
|
|
1171
|
-
className: "text-sm font-medium text-[var(--dashboard-text
|
|
1205
|
+
className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#FFFFFF)] whitespace-nowrap truncate",
|
|
1172
1206
|
children: user.name
|
|
1173
1207
|
}),
|
|
1174
1208
|
/* @__PURE__ */ jsx("p", {
|
|
1175
|
-
className: "text-xs text-[var(--dashboard-text
|
|
1209
|
+
className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
|
|
1176
1210
|
children: user.email
|
|
1177
1211
|
})
|
|
1178
1212
|
]
|
|
1179
1213
|
})]
|
|
1180
1214
|
}), onLogout && /* @__PURE__ */ jsxs("button", {
|
|
1181
1215
|
onClick: onLogout,
|
|
1182
|
-
className: "w-full flex items-center justify-start px-4 py-3 rounded-lg text-sm font-medium transition-colors cursor-pointer text-[var(--dashboard-text
|
|
1216
|
+
className: "w-full flex items-center justify-start px-4 py-3 rounded-lg text-sm font-medium transition-colors cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/10",
|
|
1183
1217
|
children: [/* @__PURE__ */ jsx(LogOut, {
|
|
1184
1218
|
size: 20,
|
|
1185
1219
|
className: "mr-3 flex-shrink-0"
|
|
@@ -1192,7 +1226,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1192
1226
|
})
|
|
1193
1227
|
})]
|
|
1194
1228
|
}), /* @__PURE__ */ jsxs("aside", {
|
|
1195
|
-
className: cn$
|
|
1229
|
+
className: cn$22("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-r border-[var(--dashboard-sidebar-border,#2A6510)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
|
|
1196
1230
|
style: { transition: `width 400ms ${cubicBezier}` },
|
|
1197
1231
|
children: [onToggleCollapse && /* @__PURE__ */ jsxs("button", {
|
|
1198
1232
|
onClick: onToggleCollapse,
|
|
@@ -1211,7 +1245,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1211
1245
|
className: "absolute inset-0",
|
|
1212
1246
|
children: /* @__PURE__ */ jsx("path", {
|
|
1213
1247
|
d: "M10.2036 118.86C14.8518 115.918 19.5 107.801 19.5 95.9116C19.5 84.0223 15.672 76.4939 10.2036 72.9634C4.73505 69.4329 2.54765 63.5488 1.72738 55.8994L1.72738 136.512C2.82108 125.921 5.55533 121.802 10.2036 118.86Z",
|
|
1214
|
-
fill: "var(--dashboard-
|
|
1248
|
+
fill: "var(--dashboard-sidebar-bg,#1B4D08)"
|
|
1215
1249
|
})
|
|
1216
1250
|
}), /* @__PURE__ */ jsx("svg", {
|
|
1217
1251
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1223,7 +1257,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1223
1257
|
style: { transition: `transform 400ms ${cubicBezier}` },
|
|
1224
1258
|
children: /* @__PURE__ */ jsx("path", {
|
|
1225
1259
|
d: "M4.5 2L8.5 6L4.5 10",
|
|
1226
|
-
stroke: "var(--dashboard-text
|
|
1260
|
+
stroke: "var(--dashboard-sidebar-text,#FFFFFF)",
|
|
1227
1261
|
strokeWidth: "2",
|
|
1228
1262
|
strokeLinecap: "round",
|
|
1229
1263
|
strokeLinejoin: "round"
|
|
@@ -1233,7 +1267,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1233
1267
|
className: "flex flex-col h-full overflow-y-auto",
|
|
1234
1268
|
children: [
|
|
1235
1269
|
/* @__PURE__ */ jsxs("div", {
|
|
1236
|
-
className: "flex justify-center items-center py-6 px-4 border-b border-[var(--dashboard-
|
|
1270
|
+
className: "flex justify-center items-center py-6 px-4 border-b border-[var(--dashboard-sidebar-border,#2A6510)] overflow-hidden relative h-[88px]",
|
|
1237
1271
|
children: [collapsedLogo && /* @__PURE__ */ jsx("div", {
|
|
1238
1272
|
className: "absolute inset-0 flex items-center justify-center",
|
|
1239
1273
|
style: {
|
|
@@ -1261,7 +1295,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1261
1295
|
href: item.href,
|
|
1262
1296
|
className: "block",
|
|
1263
1297
|
children: /* @__PURE__ */ jsxs("div", {
|
|
1264
|
-
className: cn$
|
|
1298
|
+
className: cn$22("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", isCollapsed ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#37a501)]/25 text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/10"),
|
|
1265
1299
|
style: { transition: "background-color 200ms, color 200ms" },
|
|
1266
1300
|
title: isCollapsed ? item.label : void 0,
|
|
1267
1301
|
children: [/* @__PURE__ */ jsx(Icon, {
|
|
@@ -1284,13 +1318,13 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1284
1318
|
})
|
|
1285
1319
|
}),
|
|
1286
1320
|
/* @__PURE__ */ jsxs("footer", {
|
|
1287
|
-
className: "p-4 border-t border-[var(--dashboard-
|
|
1321
|
+
className: "p-4 border-t border-[var(--dashboard-sidebar-border,#2A6510)] space-y-2",
|
|
1288
1322
|
children: [user && /* @__PURE__ */ jsxs("button", {
|
|
1289
1323
|
onClick: onUserClick,
|
|
1290
|
-
className: cn$
|
|
1324
|
+
className: cn$22("w-full flex items-center px-4 py-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
|
|
1291
1325
|
title: isCollapsed ? `${user.subtitle ? user.subtitle + " - " : ""}${user.name}` : void 0,
|
|
1292
1326
|
children: [/* @__PURE__ */ jsx("div", {
|
|
1293
|
-
className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/
|
|
1327
|
+
className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/30 text-[var(--dashboard-sidebar-text,#FFFFFF)] flex-shrink-0",
|
|
1294
1328
|
children: /* @__PURE__ */ jsx(User, { size: 16 })
|
|
1295
1329
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1296
1330
|
className: "ml-3 overflow-hidden text-left",
|
|
@@ -1301,22 +1335,22 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
|
|
|
1301
1335
|
},
|
|
1302
1336
|
children: [
|
|
1303
1337
|
user.subtitle && /* @__PURE__ */ jsx("p", {
|
|
1304
|
-
className: "text-xs text-[var(--dashboard-text
|
|
1338
|
+
className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
|
|
1305
1339
|
children: user.subtitle
|
|
1306
1340
|
}),
|
|
1307
1341
|
/* @__PURE__ */ jsx("p", {
|
|
1308
|
-
className: "text-sm font-medium text-[var(--dashboard-text
|
|
1342
|
+
className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#FFFFFF)] whitespace-nowrap truncate",
|
|
1309
1343
|
children: user.name
|
|
1310
1344
|
}),
|
|
1311
1345
|
/* @__PURE__ */ jsx("p", {
|
|
1312
|
-
className: "text-xs text-[var(--dashboard-text
|
|
1346
|
+
className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
|
|
1313
1347
|
children: user.email
|
|
1314
1348
|
})
|
|
1315
1349
|
]
|
|
1316
1350
|
})]
|
|
1317
1351
|
}), onLogout && /* @__PURE__ */ jsxs("button", {
|
|
1318
1352
|
onClick: onLogout,
|
|
1319
|
-
className: cn$
|
|
1353
|
+
className: cn$22("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/10", isCollapsed ? "justify-center" : "justify-start"),
|
|
1320
1354
|
style: { transition: "background-color 200ms" },
|
|
1321
1355
|
title: isCollapsed ? logoutLabel : void 0,
|
|
1322
1356
|
children: [/* @__PURE__ */ jsx(LogOut, {
|
|
@@ -1352,7 +1386,7 @@ function useTheme() {
|
|
|
1352
1386
|
|
|
1353
1387
|
//#endregion
|
|
1354
1388
|
//#region src/components/ThemeSwitcher/index.tsx
|
|
1355
|
-
const cn$
|
|
1389
|
+
const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1356
1390
|
function ThemeSwitcher({ className }) {
|
|
1357
1391
|
const { resolvedTheme, setTheme } = useTheme();
|
|
1358
1392
|
const toggle = () => {
|
|
@@ -1361,7 +1395,7 @@ function ThemeSwitcher({ className }) {
|
|
|
1361
1395
|
return /* @__PURE__ */ jsxs("button", {
|
|
1362
1396
|
type: "button",
|
|
1363
1397
|
onClick: toggle,
|
|
1364
|
-
className: cn$
|
|
1398
|
+
className: cn$21("relative inline-flex items-center justify-center h-9 w-9 rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] shadow-sm transition-colors cursor-pointer hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dashboard-primary,#37a501)] focus-visible:ring-offset-2", className),
|
|
1365
1399
|
"aria-label": "Alternar tema",
|
|
1366
1400
|
children: [
|
|
1367
1401
|
/* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
|
|
@@ -1376,7 +1410,7 @@ function ThemeSwitcher({ className }) {
|
|
|
1376
1410
|
|
|
1377
1411
|
//#endregion
|
|
1378
1412
|
//#region src/components/KPICard/index.tsx
|
|
1379
|
-
const cn$
|
|
1413
|
+
const cn$20 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1380
1414
|
function formatValue(value, format) {
|
|
1381
1415
|
switch (format) {
|
|
1382
1416
|
case "currency": return new Intl.NumberFormat("pt-BR", {
|
|
@@ -1391,44 +1425,44 @@ function formatValue(value, format) {
|
|
|
1391
1425
|
const trendConfigs = {
|
|
1392
1426
|
up: {
|
|
1393
1427
|
icon: "↑",
|
|
1394
|
-
color: "text-[var(--dashboard-status-success,#
|
|
1428
|
+
color: "text-[var(--dashboard-status-success,#059669)] bg-[var(--dashboard-status-success,#059669)]/8"
|
|
1395
1429
|
},
|
|
1396
1430
|
down: {
|
|
1397
1431
|
icon: "↓",
|
|
1398
|
-
color: "text-[var(--dashboard-status-danger,#
|
|
1432
|
+
color: "text-[var(--dashboard-status-danger,#DC2626)] bg-[var(--dashboard-status-danger,#DC2626)]/8"
|
|
1399
1433
|
},
|
|
1400
1434
|
stable: {
|
|
1401
1435
|
icon: "→",
|
|
1402
|
-
color: "text-[var(--dashboard-text-secondary,#
|
|
1436
|
+
color: "text-[var(--dashboard-text-secondary,#64748B)] bg-[var(--dashboard-text-secondary,#64748B)]/8"
|
|
1403
1437
|
}
|
|
1404
1438
|
};
|
|
1405
1439
|
function KPICard({ title, value, variation, trend, format = "number", benchmark, isLoading, className }) {
|
|
1406
1440
|
if (isLoading) return /* @__PURE__ */ jsx(KPICardSkeleton, { className });
|
|
1407
1441
|
const trendConfig = trendConfigs[trend];
|
|
1408
1442
|
return /* @__PURE__ */ jsxs("div", {
|
|
1409
|
-
className: cn$
|
|
1443
|
+
className: cn$20("h-full w-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-all duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md flex flex-col", className),
|
|
1410
1444
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
1411
1445
|
className: "flex justify-between items-start mb-4",
|
|
1412
1446
|
children: [/* @__PURE__ */ jsx("h3", {
|
|
1413
|
-
className: "text-
|
|
1447
|
+
className: "text-xs font-semibold uppercase tracking-wider text-[var(--dashboard-text-secondary,#64748B)] whitespace-nowrap",
|
|
1414
1448
|
children: title
|
|
1415
1449
|
}), benchmark && /* @__PURE__ */ jsx("span", {
|
|
1416
|
-
className: "text-xs text-[var(--dashboard-text-secondary,#
|
|
1450
|
+
className: "text-xs text-[var(--dashboard-text-secondary,#64748B)]/50 ml-2 whitespace-nowrap flex-shrink-0",
|
|
1417
1451
|
title: "Benchmark de referência",
|
|
1418
1452
|
children: benchmark
|
|
1419
1453
|
})]
|
|
1420
1454
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1421
|
-
className: "flex items-
|
|
1455
|
+
className: "flex items-end gap-3 flex-1",
|
|
1422
1456
|
children: [/* @__PURE__ */ jsx("p", {
|
|
1423
|
-
className: "text-3xl font-bold text-[var(--dashboard-text-primary,#
|
|
1457
|
+
className: "text-3xl font-bold text-[var(--dashboard-text-primary,#0F172A)] whitespace-nowrap tracking-tight",
|
|
1424
1458
|
children: formatValue(value, format)
|
|
1425
1459
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1426
|
-
className: cn$
|
|
1460
|
+
className: cn$20("inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
|
|
1427
1461
|
children: [/* @__PURE__ */ jsx("span", {
|
|
1428
|
-
className: "text-
|
|
1462
|
+
className: "text-sm",
|
|
1429
1463
|
children: trendConfig.icon
|
|
1430
1464
|
}), /* @__PURE__ */ jsxs("span", {
|
|
1431
|
-
className: "text-
|
|
1465
|
+
className: "text-xs font-semibold whitespace-nowrap",
|
|
1432
1466
|
children: [Math.abs(variation).toFixed(1), "%"]
|
|
1433
1467
|
})]
|
|
1434
1468
|
})]
|
|
@@ -1437,23 +1471,23 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
|
|
|
1437
1471
|
}
|
|
1438
1472
|
function KPICardSkeleton({ className }) {
|
|
1439
1473
|
return /* @__PURE__ */ jsxs("div", {
|
|
1440
|
-
className: cn$
|
|
1441
|
-
children: [/* @__PURE__ */ jsx("div", { className: "h-
|
|
1442
|
-
className: "flex items-
|
|
1443
|
-
children: [/* @__PURE__ */ jsx("div", { className: "h-8 bg-[var(--dashboard-text-secondary,#
|
|
1474
|
+
className: cn$20("h-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm animate-pulse flex flex-col", className),
|
|
1475
|
+
children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-2/3 mb-4" }), /* @__PURE__ */ jsxs("div", {
|
|
1476
|
+
className: "flex items-end gap-3 flex-1",
|
|
1477
|
+
children: [/* @__PURE__ */ jsx("div", { className: "h-8 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-1/2" }), /* @__PURE__ */ jsx("div", { className: "h-5 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded-full w-1/4" })]
|
|
1444
1478
|
})]
|
|
1445
1479
|
});
|
|
1446
1480
|
}
|
|
1447
1481
|
|
|
1448
1482
|
//#endregion
|
|
1449
1483
|
//#region src/components/PageLayout/index.tsx
|
|
1450
|
-
const cn$
|
|
1484
|
+
const cn$19 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1451
1485
|
function PageLayout({ title, description, headerActions, children, contentPadding = true, sidebar, sidebarCollapsed = false, sidebarWidth = 280, sidebarCollapsedWidth = 109, className }) {
|
|
1452
1486
|
const marginLeft = sidebar ? sidebarCollapsed ? `max(0px, ${sidebarCollapsedWidth}px)` : `max(0px, ${sidebarWidth}px)` : "0px";
|
|
1453
1487
|
return /* @__PURE__ */ jsxs("div", {
|
|
1454
|
-
className: cn$
|
|
1488
|
+
className: cn$19("min-h-screen bg-[var(--dashboard-background,#f2f2f2)]", className),
|
|
1455
1489
|
children: [sidebar, /* @__PURE__ */ jsxs("main", {
|
|
1456
|
-
className: cn$
|
|
1490
|
+
className: cn$19("pt-16 xl:pt-0", !sidebar && "pt-0"),
|
|
1457
1491
|
style: {
|
|
1458
1492
|
marginLeft,
|
|
1459
1493
|
transition: "margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
@@ -1490,8 +1524,8 @@ function PageLayout({ title, description, headerActions, children, contentPaddin
|
|
|
1490
1524
|
|
|
1491
1525
|
//#endregion
|
|
1492
1526
|
//#region src/components/ComparisonLineChart/index.tsx
|
|
1493
|
-
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip, Legend, Filler);
|
|
1494
|
-
const cn$
|
|
1527
|
+
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
|
|
1528
|
+
const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1495
1529
|
function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, currentPeriodLabel = "Período atual", previousPeriodLabel = "Período anterior", title, color, height = 300, className }) {
|
|
1496
1530
|
const primaryColor = color || (typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--dashboard-primary").trim() : "") || "#37a501";
|
|
1497
1531
|
const data = {
|
|
@@ -1585,7 +1619,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
|
|
|
1585
1619
|
}
|
|
1586
1620
|
};
|
|
1587
1621
|
return /* @__PURE__ */ jsxs("div", {
|
|
1588
|
-
className: cn$
|
|
1622
|
+
className: cn$18("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
|
|
1589
1623
|
children: [title && /* @__PURE__ */ jsx("h3", {
|
|
1590
1624
|
className: "text-base font-semibold mb-4 text-[var(--dashboard-text-primary,#2d2d2d)]",
|
|
1591
1625
|
children: title
|
|
@@ -1601,8 +1635,8 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
|
|
|
1601
1635
|
|
|
1602
1636
|
//#endregion
|
|
1603
1637
|
//#region src/components/HorizontalBarChart/index.tsx
|
|
1604
|
-
Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip, Legend);
|
|
1605
|
-
const cn$
|
|
1638
|
+
Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
|
|
1639
|
+
const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1606
1640
|
function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", className }) {
|
|
1607
1641
|
const [activeTab, setActiveTab] = useState((tabs ? tabs.map((t) => t.id) : Object.keys(datasets))[0]);
|
|
1608
1642
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -1677,7 +1711,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
|
|
|
1677
1711
|
}
|
|
1678
1712
|
};
|
|
1679
1713
|
return /* @__PURE__ */ jsxs("div", {
|
|
1680
|
-
className: cn$
|
|
1714
|
+
className: cn$17("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
|
|
1681
1715
|
children: [
|
|
1682
1716
|
title && /* @__PURE__ */ jsxs("div", {
|
|
1683
1717
|
className: "flex items-center gap-2 mb-4",
|
|
@@ -1690,7 +1724,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
|
|
|
1690
1724
|
className: "flex gap-2 mb-4 flex-wrap",
|
|
1691
1725
|
children: tabs.map((tab) => /* @__PURE__ */ jsx("button", {
|
|
1692
1726
|
onClick: () => setActiveTab(tab.id),
|
|
1693
|
-
className: cn$
|
|
1727
|
+
className: cn$17("px-3.5 py-2 sm:px-4 sm:py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap cursor-pointer", activeTab === tab.id ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
|
|
1694
1728
|
children: tab.label
|
|
1695
1729
|
}, tab.id))
|
|
1696
1730
|
}),
|
|
@@ -1728,8 +1762,8 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
|
|
|
1728
1762
|
|
|
1729
1763
|
//#endregion
|
|
1730
1764
|
//#region src/components/VerticalBarChart/index.tsx
|
|
1731
|
-
Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip, Legend);
|
|
1732
|
-
const cn$
|
|
1765
|
+
Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
|
|
1766
|
+
const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1733
1767
|
function VerticalBarChart({ labels, data: values, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", labelMaxChars = 3, className }) {
|
|
1734
1768
|
const maxValue = Math.max(...values);
|
|
1735
1769
|
const bestLabel = labels[values.indexOf(maxValue)];
|
|
@@ -1792,7 +1826,7 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
|
|
|
1792
1826
|
}
|
|
1793
1827
|
};
|
|
1794
1828
|
return /* @__PURE__ */ jsxs("div", {
|
|
1795
|
-
className: cn$
|
|
1829
|
+
className: cn$16("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
|
|
1796
1830
|
children: [
|
|
1797
1831
|
title && /* @__PURE__ */ jsxs("div", {
|
|
1798
1832
|
className: "flex items-center gap-2 mb-4",
|
|
@@ -1835,7 +1869,7 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
|
|
|
1835
1869
|
|
|
1836
1870
|
//#endregion
|
|
1837
1871
|
//#region src/components/ProgressBarList/index.tsx
|
|
1838
|
-
const cn$
|
|
1872
|
+
const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1839
1873
|
function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, sortByValue = true, formatValue, className }) {
|
|
1840
1874
|
const sortedItems = sortByValue ? [...items].sort((a, b) => b.value - a.value) : items;
|
|
1841
1875
|
const maxValue = Math.max(...items.map((i) => i.value));
|
|
@@ -1844,7 +1878,7 @@ function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens",
|
|
|
1844
1878
|
const defaultFormat = (v) => `${v} ${v === 1 ? singular : valueLabel}`;
|
|
1845
1879
|
const fmt = formatValue || defaultFormat;
|
|
1846
1880
|
return /* @__PURE__ */ jsxs("div", {
|
|
1847
|
-
className: cn$
|
|
1881
|
+
className: cn$15("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
|
|
1848
1882
|
children: [title && /* @__PURE__ */ jsxs("div", {
|
|
1849
1883
|
className: "flex items-center gap-2 mb-4",
|
|
1850
1884
|
children: [titleIcon, /* @__PURE__ */ jsx("h3", {
|
|
@@ -1892,8 +1926,8 @@ function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens",
|
|
|
1892
1926
|
|
|
1893
1927
|
//#endregion
|
|
1894
1928
|
//#region src/components/MetricPanel/index.tsx
|
|
1895
|
-
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip, Legend, Filler);
|
|
1896
|
-
const cn$
|
|
1929
|
+
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
|
|
1930
|
+
const cn$14 = (...classes) => classes.filter(Boolean).join(" ");
|
|
1897
1931
|
function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, secondaryColor, onActionClick, actionLabel, isLoading = false, className }) {
|
|
1898
1932
|
const [selectedMetricKey, setSelectedMetricKey] = useState(metrics[0]?.key);
|
|
1899
1933
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -1991,7 +2025,7 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
|
|
|
1991
2025
|
}
|
|
1992
2026
|
};
|
|
1993
2027
|
return /* @__PURE__ */ jsxs("div", {
|
|
1994
|
-
className: cn$
|
|
2028
|
+
className: cn$14("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
|
|
1995
2029
|
style: { overflow: "visible" },
|
|
1996
2030
|
children: [
|
|
1997
2031
|
/* @__PURE__ */ jsxs("div", {
|
|
@@ -2032,7 +2066,7 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
|
|
|
2032
2066
|
const Icon = metric.icon;
|
|
2033
2067
|
return /* @__PURE__ */ jsxs("button", {
|
|
2034
2068
|
onClick: () => setSelectedMetricKey(metric.key),
|
|
2035
|
-
className: cn$
|
|
2069
|
+
className: cn$14("flex items-center gap-2 px-4 md:px-6 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", selectedMetricKey === metric.key ? "bg-[var(--dashboard-surface,#ffffff)] border-2 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-surface,#ffffff)] border border-[var(--dashboard-text-secondary,#6b7280)]/30 text-[var(--dashboard-text-secondary,#6b7280)] hover:border-[var(--dashboard-text-secondary,#6b7280)]/50"),
|
|
2036
2070
|
style: selectedMetricKey === metric.key ? {
|
|
2037
2071
|
borderColor: primaryColor,
|
|
2038
2072
|
color: primaryColor
|
|
@@ -2057,16 +2091,13 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
|
|
|
2057
2091
|
zIndex: 10
|
|
2058
2092
|
},
|
|
2059
2093
|
children: isLoading ? /* @__PURE__ */ jsx("div", {
|
|
2060
|
-
className: "flex items-center justify-center h-full",
|
|
2061
|
-
children: /* @__PURE__ */
|
|
2062
|
-
className: "
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
}
|
|
2067
|
-
className: "text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
2068
|
-
children: "Carregando gráfico..."
|
|
2069
|
-
})]
|
|
2094
|
+
className: "flex items-center justify-center h-full p-4",
|
|
2095
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
2096
|
+
className: "h-full w-full rounded-lg animate-pulse",
|
|
2097
|
+
style: {
|
|
2098
|
+
backgroundColor: "var(--dashboard-text-secondary, #6b7280)",
|
|
2099
|
+
opacity: .08
|
|
2100
|
+
}
|
|
2070
2101
|
})
|
|
2071
2102
|
}) : /* @__PURE__ */ jsx(Line, {
|
|
2072
2103
|
data,
|
|
@@ -2080,10 +2111,10 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
|
|
|
2080
2111
|
|
|
2081
2112
|
//#endregion
|
|
2082
2113
|
//#region src/components/FilterBar/index.tsx
|
|
2083
|
-
const cn$
|
|
2114
|
+
const cn$13 = (...classes) => classes.filter(Boolean).join(" ");
|
|
2084
2115
|
function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...", children, actions, className }) {
|
|
2085
2116
|
return /* @__PURE__ */ jsxs("div", {
|
|
2086
|
-
className: cn$
|
|
2117
|
+
className: cn$13("flex flex-col gap-3 sm:flex-row sm:items-center sm:flex-wrap", className),
|
|
2087
2118
|
children: [
|
|
2088
2119
|
onSearchChange !== void 0 && /* @__PURE__ */ jsx("div", {
|
|
2089
2120
|
className: "flex-1 min-w-[200px]",
|
|
@@ -2123,7 +2154,7 @@ function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...
|
|
|
2123
2154
|
|
|
2124
2155
|
//#endregion
|
|
2125
2156
|
//#region src/components/Checkbox/index.tsx
|
|
2126
|
-
const cn$
|
|
2157
|
+
const cn$12 = (...classes) => classes.filter(Boolean).join(" ");
|
|
2127
2158
|
const sizeConfig = {
|
|
2128
2159
|
sm: {
|
|
2129
2160
|
box: 16,
|
|
@@ -2171,7 +2202,7 @@ function Checkbox({ name, id, label, checked = false, onChange, disabled = false
|
|
|
2171
2202
|
const resolvedColor = primaryColor || "var(--dashboard-primary, #37A501)";
|
|
2172
2203
|
return /* @__PURE__ */ jsxs("label", {
|
|
2173
2204
|
htmlFor: inputId,
|
|
2174
|
-
className: cn$
|
|
2205
|
+
className: cn$12("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", className),
|
|
2175
2206
|
style: { gap: cfg.gap },
|
|
2176
2207
|
children: [
|
|
2177
2208
|
/* @__PURE__ */ jsx("input", {
|
|
@@ -2222,7 +2253,7 @@ function Checkbox({ name, id, label, checked = false, onChange, disabled = false
|
|
|
2222
2253
|
|
|
2223
2254
|
//#endregion
|
|
2224
2255
|
//#region src/components/AuthLayout/index.tsx
|
|
2225
|
-
const cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
2256
|
+
const cn$11 = (...classes) => classes.filter(Boolean).join(" ");
|
|
2226
2257
|
/** Resolves a CSS color value (including var() references) to a computed hex/rgb string */
|
|
2227
2258
|
function useResolvedColor(cssValue) {
|
|
2228
2259
|
const [resolved, setResolved] = useState(cssValue);
|
|
@@ -2389,7 +2420,7 @@ function AuthLayout({ logo, title, subtitle, error, success, fields, values, onF
|
|
|
2389
2420
|
if (link.onClick) return /* @__PURE__ */ jsx("button", {
|
|
2390
2421
|
type: "button",
|
|
2391
2422
|
onClick: link.onClick,
|
|
2392
|
-
className: cn("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
|
|
2423
|
+
className: cn$11("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
|
|
2393
2424
|
style,
|
|
2394
2425
|
children: link.label
|
|
2395
2426
|
});
|
|
@@ -2397,13 +2428,13 @@ function AuthLayout({ logo, title, subtitle, error, success, fields, values, onF
|
|
|
2397
2428
|
href: link.href,
|
|
2398
2429
|
target: link.target,
|
|
2399
2430
|
rel: link.target === "_blank" ? "noopener noreferrer" : void 0,
|
|
2400
|
-
className: cn("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
|
|
2431
|
+
className: cn$11("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
|
|
2401
2432
|
style,
|
|
2402
2433
|
children: link.label
|
|
2403
2434
|
});
|
|
2404
2435
|
}
|
|
2405
2436
|
return /* @__PURE__ */ jsxs("div", {
|
|
2406
|
-
className: cn("fixed inset-0 flex select-none overflow-hidden", className),
|
|
2437
|
+
className: cn$11("fixed inset-0 flex select-none overflow-hidden", className),
|
|
2407
2438
|
style: bgCss,
|
|
2408
2439
|
children: [
|
|
2409
2440
|
branding && branding.logos.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
@@ -2684,22 +2715,1308 @@ function CodeInput({ length = 6, value, onChange, disabled = false, error = fals
|
|
|
2684
2715
|
});
|
|
2685
2716
|
}
|
|
2686
2717
|
|
|
2718
|
+
//#endregion
|
|
2719
|
+
//#region src/components/Skeleton/index.tsx
|
|
2720
|
+
const cn$10 = (...classes) => classes.filter(Boolean).join(" ");
|
|
2721
|
+
function Skeleton({ variant = "text", width, height, animate = true, className, lines = 1 }) {
|
|
2722
|
+
const baseStyles = "bg-[var(--dashboard-text-secondary,#6b7280)]/10 relative overflow-hidden";
|
|
2723
|
+
const shimmerStyles = animate ? "after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-[var(--dashboard-text-secondary,#6b7280)]/5 after:to-transparent dashboard-animate-shimmer after:content-['']" : "";
|
|
2724
|
+
const variantStyles = {
|
|
2725
|
+
text: "h-4 rounded",
|
|
2726
|
+
circle: "rounded-full",
|
|
2727
|
+
rectangle: "rounded-lg",
|
|
2728
|
+
card: "rounded-lg"
|
|
2729
|
+
};
|
|
2730
|
+
const style = {};
|
|
2731
|
+
if (width) style.width = typeof width === "number" ? `${width}px` : width;
|
|
2732
|
+
if (height) style.height = typeof height === "number" ? `${height}px` : height;
|
|
2733
|
+
if (variant === "circle" && !height) {
|
|
2734
|
+
style.height = style.width || "40px";
|
|
2735
|
+
if (!width) style.width = "40px";
|
|
2736
|
+
}
|
|
2737
|
+
if (variant === "card" && !height) style.height = "120px";
|
|
2738
|
+
if (variant === "text" && lines > 1) return /* @__PURE__ */ jsx("div", {
|
|
2739
|
+
className: cn$10("flex flex-col gap-2", className),
|
|
2740
|
+
children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", {
|
|
2741
|
+
className: cn$10(baseStyles, shimmerStyles, variantStyles.text),
|
|
2742
|
+
style: {
|
|
2743
|
+
...style,
|
|
2744
|
+
width: i === lines - 1 ? "75%" : style.width || "100%"
|
|
2745
|
+
}
|
|
2746
|
+
}, i))
|
|
2747
|
+
});
|
|
2748
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2749
|
+
className: cn$10(baseStyles, shimmerStyles, variantStyles[variant], className),
|
|
2750
|
+
style
|
|
2751
|
+
});
|
|
2752
|
+
}
|
|
2753
|
+
|
|
2754
|
+
//#endregion
|
|
2755
|
+
//#region src/components/DataGrid/index.tsx
|
|
2756
|
+
const cn$9 = (...classes) => classes.filter(Boolean).join(" ");
|
|
2757
|
+
function SortIcon({ sorted }) {
|
|
2758
|
+
if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" });
|
|
2759
|
+
if (sorted === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" });
|
|
2760
|
+
return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-40" });
|
|
2761
|
+
}
|
|
2762
|
+
function DataGridSkeleton({ columns, rows, compact }) {
|
|
2763
|
+
const cellPadding = compact ? "px-4 py-2" : "px-6 py-3";
|
|
2764
|
+
return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsx("td", {
|
|
2765
|
+
className: cellPadding,
|
|
2766
|
+
children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" })
|
|
2767
|
+
}, colIdx)) }, rowIdx)) });
|
|
2768
|
+
}
|
|
2769
|
+
function VirtualRows({ table, rowHeight, onRowClick, compact }) {
|
|
2770
|
+
const containerRef = useRef(null);
|
|
2771
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
2772
|
+
const [containerHeight, setContainerHeight] = useState(400);
|
|
2773
|
+
const rows = table.getRowModel().rows;
|
|
2774
|
+
const totalHeight = rows.length * rowHeight;
|
|
2775
|
+
useEffect(() => {
|
|
2776
|
+
const container = containerRef.current;
|
|
2777
|
+
if (!container) return;
|
|
2778
|
+
const observer = new ResizeObserver((entries) => {
|
|
2779
|
+
for (const entry of entries) setContainerHeight(entry.contentRect.height);
|
|
2780
|
+
});
|
|
2781
|
+
observer.observe(container);
|
|
2782
|
+
const handleScroll = () => {
|
|
2783
|
+
setScrollTop(container.scrollTop);
|
|
2784
|
+
};
|
|
2785
|
+
container.addEventListener("scroll", handleScroll, { passive: true });
|
|
2786
|
+
return () => {
|
|
2787
|
+
observer.disconnect();
|
|
2788
|
+
container.removeEventListener("scroll", handleScroll);
|
|
2789
|
+
};
|
|
2790
|
+
}, []);
|
|
2791
|
+
const overscan = 5;
|
|
2792
|
+
const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
|
|
2793
|
+
const endIndex = Math.min(rows.length, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
|
|
2794
|
+
const visibleRows = rows.slice(startIndex, endIndex);
|
|
2795
|
+
const cellPadding = compact ? "px-4 py-2" : "px-6 py-4";
|
|
2796
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2797
|
+
ref: containerRef,
|
|
2798
|
+
className: "overflow-auto",
|
|
2799
|
+
style: { maxHeight: containerHeight },
|
|
2800
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
2801
|
+
style: {
|
|
2802
|
+
height: totalHeight,
|
|
2803
|
+
position: "relative"
|
|
2804
|
+
},
|
|
2805
|
+
children: /* @__PURE__ */ jsxs("table", {
|
|
2806
|
+
className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#6b7280)]/20",
|
|
2807
|
+
children: [/* @__PURE__ */ jsx("thead", {
|
|
2808
|
+
className: "bg-[var(--dashboard-text-secondary,#6b7280)]/5 sticky top-0 z-10",
|
|
2809
|
+
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx("th", {
|
|
2810
|
+
scope: "col",
|
|
2811
|
+
className: cn$9("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", compact ? "px-4 py-2" : "px-6 py-3", header.column.getCanSort() && "cursor-pointer select-none"),
|
|
2812
|
+
style: { width: header.getSize() },
|
|
2813
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
2814
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
2815
|
+
className: "flex items-center gap-1",
|
|
2816
|
+
children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && /* @__PURE__ */ jsx(SortIcon, { sorted: header.column.getIsSorted() })]
|
|
2817
|
+
})
|
|
2818
|
+
}, header.id)) }, headerGroup.id))
|
|
2819
|
+
}), /* @__PURE__ */ jsxs("tbody", { children: [
|
|
2820
|
+
/* @__PURE__ */ jsx("tr", {
|
|
2821
|
+
style: { height: startIndex * rowHeight },
|
|
2822
|
+
children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllColumns().length })
|
|
2823
|
+
}),
|
|
2824
|
+
visibleRows.map((row) => /* @__PURE__ */ jsx("tr", {
|
|
2825
|
+
onClick: () => onRowClick?.(row.original),
|
|
2826
|
+
className: cn$9("hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5 transition-colors", onRowClick && "cursor-pointer", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5"),
|
|
2827
|
+
style: { height: rowHeight },
|
|
2828
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
|
|
2829
|
+
className: cn$9(cellPadding, "text-sm whitespace-nowrap"),
|
|
2830
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
2831
|
+
}, cell.id))
|
|
2832
|
+
}, row.id)),
|
|
2833
|
+
/* @__PURE__ */ jsx("tr", {
|
|
2834
|
+
style: { height: (rows.length - endIndex) * rowHeight },
|
|
2835
|
+
children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllColumns().length })
|
|
2836
|
+
})
|
|
2837
|
+
] })]
|
|
2838
|
+
})
|
|
2839
|
+
})
|
|
2840
|
+
});
|
|
2841
|
+
}
|
|
2842
|
+
function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting: controlledSorting, onSortingChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, columnFilters: controlledColumnFilters, onColumnFiltersChange, rowSelection: controlledRowSelection, onRowSelectionChange, enableRowSelection = false, pagination: controlledPagination, onPaginationChange, pageCount, manualPagination = false, pageSizeOptions = [
|
|
2843
|
+
10,
|
|
2844
|
+
20,
|
|
2845
|
+
30,
|
|
2846
|
+
50
|
|
2847
|
+
], onRowClick, getRowId, enableVirtualization = false, rowHeight = 48, emptyMessage = "Nenhum registro encontrado", emptyIcon, stickyHeader = false, compact = false, striped = false, bordered = false, className }) {
|
|
2848
|
+
const [internalSorting, setInternalSorting] = useState([]);
|
|
2849
|
+
const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
|
|
2850
|
+
const [internalColumnFilters, setInternalColumnFilters] = useState([]);
|
|
2851
|
+
const [internalRowSelection, setInternalRowSelection] = useState({});
|
|
2852
|
+
const [internalPagination, setInternalPagination] = useState({
|
|
2853
|
+
pageIndex: 0,
|
|
2854
|
+
pageSize: 10
|
|
2855
|
+
});
|
|
2856
|
+
const sorting = controlledSorting ?? internalSorting;
|
|
2857
|
+
const globalFilter = controlledGlobalFilter ?? internalGlobalFilter;
|
|
2858
|
+
const columnFilters = controlledColumnFilters ?? internalColumnFilters;
|
|
2859
|
+
const rowSelection = controlledRowSelection ?? internalRowSelection;
|
|
2860
|
+
const pagination = controlledPagination ?? internalPagination;
|
|
2861
|
+
const handleSortingChange = useCallback((updater) => {
|
|
2862
|
+
const next = typeof updater === "function" ? updater(sorting) : updater;
|
|
2863
|
+
onSortingChange ? onSortingChange(next) : setInternalSorting(next);
|
|
2864
|
+
}, [sorting, onSortingChange]);
|
|
2865
|
+
const handleGlobalFilterChange = useCallback((updater) => {
|
|
2866
|
+
const next = typeof updater === "function" ? updater(globalFilter) : updater;
|
|
2867
|
+
onGlobalFilterChange ? onGlobalFilterChange(next) : setInternalGlobalFilter(next);
|
|
2868
|
+
}, [globalFilter, onGlobalFilterChange]);
|
|
2869
|
+
const handleColumnFiltersChange = useCallback((updater) => {
|
|
2870
|
+
const next = typeof updater === "function" ? updater(columnFilters) : updater;
|
|
2871
|
+
onColumnFiltersChange ? onColumnFiltersChange(next) : setInternalColumnFilters(next);
|
|
2872
|
+
}, [columnFilters, onColumnFiltersChange]);
|
|
2873
|
+
const handleRowSelectionChange = useCallback((updater) => {
|
|
2874
|
+
const next = typeof updater === "function" ? updater(rowSelection) : updater;
|
|
2875
|
+
onRowSelectionChange ? onRowSelectionChange(next) : setInternalRowSelection(next);
|
|
2876
|
+
}, [rowSelection, onRowSelectionChange]);
|
|
2877
|
+
const handlePaginationChange = useCallback((updater) => {
|
|
2878
|
+
const next = typeof updater === "function" ? updater(pagination) : updater;
|
|
2879
|
+
onPaginationChange ? onPaginationChange(next) : setInternalPagination(next);
|
|
2880
|
+
}, [pagination, onPaginationChange]);
|
|
2881
|
+
const table = useReactTable({
|
|
2882
|
+
data,
|
|
2883
|
+
columns,
|
|
2884
|
+
state: {
|
|
2885
|
+
sorting,
|
|
2886
|
+
globalFilter,
|
|
2887
|
+
columnFilters,
|
|
2888
|
+
rowSelection,
|
|
2889
|
+
pagination
|
|
2890
|
+
},
|
|
2891
|
+
onSortingChange: handleSortingChange,
|
|
2892
|
+
onGlobalFilterChange: handleGlobalFilterChange,
|
|
2893
|
+
onColumnFiltersChange: handleColumnFiltersChange,
|
|
2894
|
+
onRowSelectionChange: handleRowSelectionChange,
|
|
2895
|
+
onPaginationChange: handlePaginationChange,
|
|
2896
|
+
getCoreRowModel: getCoreRowModel(),
|
|
2897
|
+
getSortedRowModel: getSortedRowModel(),
|
|
2898
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
2899
|
+
getPaginationRowModel: manualPagination ? void 0 : getPaginationRowModel(),
|
|
2900
|
+
enableRowSelection,
|
|
2901
|
+
getRowId,
|
|
2902
|
+
manualPagination,
|
|
2903
|
+
pageCount
|
|
2904
|
+
});
|
|
2905
|
+
const cellPadding = compact ? "px-4 py-2" : "px-6 py-4";
|
|
2906
|
+
const headerPadding = compact ? "px-4 py-2" : "px-6 py-3";
|
|
2907
|
+
if (enableVirtualization) return /* @__PURE__ */ jsx("div", {
|
|
2908
|
+
className: cn$9("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
|
|
2909
|
+
children: /* @__PURE__ */ jsx(VirtualRows, {
|
|
2910
|
+
table,
|
|
2911
|
+
rowHeight,
|
|
2912
|
+
onRowClick,
|
|
2913
|
+
compact
|
|
2914
|
+
})
|
|
2915
|
+
});
|
|
2916
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
2917
|
+
className: cn$9("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
|
|
2918
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
2919
|
+
className: "overflow-x-auto",
|
|
2920
|
+
children: /* @__PURE__ */ jsxs("table", {
|
|
2921
|
+
className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#6b7280)]/20",
|
|
2922
|
+
children: [/* @__PURE__ */ jsx("thead", {
|
|
2923
|
+
className: cn$9("bg-[var(--dashboard-text-secondary,#6b7280)]/5", stickyHeader && "sticky top-0 z-10"),
|
|
2924
|
+
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx("th", {
|
|
2925
|
+
scope: "col",
|
|
2926
|
+
className: cn$9("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", headerPadding, header.column.getCanSort() && "cursor-pointer select-none"),
|
|
2927
|
+
style: header.getSize() !== 150 ? { width: header.getSize() } : void 0,
|
|
2928
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
2929
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
2930
|
+
className: "flex items-center gap-1",
|
|
2931
|
+
children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && /* @__PURE__ */ jsx(SortIcon, { sorted: header.column.getIsSorted() })]
|
|
2932
|
+
})
|
|
2933
|
+
}, header.id)) }, headerGroup.id))
|
|
2934
|
+
}), /* @__PURE__ */ jsx("tbody", {
|
|
2935
|
+
className: "divide-y divide-[var(--dashboard-text-secondary,#6b7280)]/20",
|
|
2936
|
+
children: isLoading ? /* @__PURE__ */ jsx(DataGridSkeleton, {
|
|
2937
|
+
columns: columns.length,
|
|
2938
|
+
rows: skeletonRows,
|
|
2939
|
+
compact
|
|
2940
|
+
}) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
|
|
2941
|
+
colSpan: columns.length,
|
|
2942
|
+
className: "py-12",
|
|
2943
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
2944
|
+
className: "text-center",
|
|
2945
|
+
children: [emptyIcon || /* @__PURE__ */ jsx("svg", {
|
|
2946
|
+
className: "mx-auto h-10 w-10 text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
2947
|
+
fill: "none",
|
|
2948
|
+
stroke: "currentColor",
|
|
2949
|
+
viewBox: "0 0 24 24",
|
|
2950
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
2951
|
+
strokeLinecap: "round",
|
|
2952
|
+
strokeLinejoin: "round",
|
|
2953
|
+
strokeWidth: 2,
|
|
2954
|
+
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
2955
|
+
})
|
|
2956
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
2957
|
+
className: "mt-3 text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
2958
|
+
children: emptyMessage
|
|
2959
|
+
})]
|
|
2960
|
+
})
|
|
2961
|
+
}) }) : table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", {
|
|
2962
|
+
onClick: () => onRowClick?.(row.original),
|
|
2963
|
+
className: cn$9("transition-colors", onRowClick && "cursor-pointer", "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5", striped && rowIndex % 2 === 1 && "bg-[var(--dashboard-text-secondary,#6b7280)]/3"),
|
|
2964
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
|
|
2965
|
+
className: cn$9(cellPadding, "text-sm text-[var(--dashboard-text-primary,#2d2d2d)]"),
|
|
2966
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
2967
|
+
}, cell.id))
|
|
2968
|
+
}, row.id))
|
|
2969
|
+
})]
|
|
2970
|
+
})
|
|
2971
|
+
}), (onPaginationChange || !manualPagination) && table.getPageCount() > 1 && /* @__PURE__ */ jsxs("div", {
|
|
2972
|
+
className: "flex items-center justify-between gap-4 flex-wrap border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 px-4 py-3",
|
|
2973
|
+
children: [
|
|
2974
|
+
/* @__PURE__ */ jsxs("div", {
|
|
2975
|
+
className: "flex items-center gap-2",
|
|
2976
|
+
children: [/* @__PURE__ */ jsx("select", {
|
|
2977
|
+
value: pagination.pageSize,
|
|
2978
|
+
onChange: (e) => handlePaginationChange({
|
|
2979
|
+
pageIndex: 0,
|
|
2980
|
+
pageSize: Number(e.target.value)
|
|
2981
|
+
}),
|
|
2982
|
+
className: "rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] px-2 py-1 text-sm text-[var(--dashboard-text-primary,#2d2d2d)]",
|
|
2983
|
+
children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", {
|
|
2984
|
+
value: size,
|
|
2985
|
+
children: size
|
|
2986
|
+
}, size))
|
|
2987
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
2988
|
+
className: "text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
2989
|
+
children: "por pagina"
|
|
2990
|
+
})]
|
|
2991
|
+
}),
|
|
2992
|
+
/* @__PURE__ */ jsxs("span", {
|
|
2993
|
+
className: "text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
2994
|
+
children: [
|
|
2995
|
+
"Pagina ",
|
|
2996
|
+
pagination.pageIndex + 1,
|
|
2997
|
+
" de ",
|
|
2998
|
+
table.getPageCount()
|
|
2999
|
+
]
|
|
3000
|
+
}),
|
|
3001
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3002
|
+
className: "flex items-center gap-1",
|
|
3003
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
3004
|
+
type: "button",
|
|
3005
|
+
onClick: () => table.previousPage(),
|
|
3006
|
+
disabled: !table.getCanPreviousPage(),
|
|
3007
|
+
className: "rounded-md p-1.5 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer",
|
|
3008
|
+
"aria-label": "Pagina anterior",
|
|
3009
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
|
|
3010
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
3011
|
+
type: "button",
|
|
3012
|
+
onClick: () => table.nextPage(),
|
|
3013
|
+
disabled: !table.getCanNextPage(),
|
|
3014
|
+
className: "rounded-md p-1.5 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer",
|
|
3015
|
+
"aria-label": "Proxima pagina",
|
|
3016
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
|
|
3017
|
+
})]
|
|
3018
|
+
})
|
|
3019
|
+
]
|
|
3020
|
+
})]
|
|
3021
|
+
});
|
|
3022
|
+
}
|
|
3023
|
+
|
|
3024
|
+
//#endregion
|
|
3025
|
+
//#region src/components/TreeView/index.tsx
|
|
3026
|
+
const cn$8 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3027
|
+
function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, onSelect, onToggle, onMove, renderNode, dragState, setDragState }) {
|
|
3028
|
+
const hasChildren = node.children && node.children.length > 0;
|
|
3029
|
+
const isExpanded = expanded.has(node.id);
|
|
3030
|
+
const isSelected = selectedId === node.id;
|
|
3031
|
+
const isDragging = dragState.draggingId === node.id;
|
|
3032
|
+
const isDropTarget = dragState.targetId === node.id;
|
|
3033
|
+
const handleDragStart = (e) => {
|
|
3034
|
+
if (!draggable || node.disabled) return;
|
|
3035
|
+
e.dataTransfer.setData("text/plain", node.id);
|
|
3036
|
+
e.dataTransfer.effectAllowed = "move";
|
|
3037
|
+
setDragState((prev) => ({
|
|
3038
|
+
...prev,
|
|
3039
|
+
draggingId: node.id
|
|
3040
|
+
}));
|
|
3041
|
+
};
|
|
3042
|
+
const handleDragOver = (e) => {
|
|
3043
|
+
if (!draggable || !dragState.draggingId || dragState.draggingId === node.id) return;
|
|
3044
|
+
e.preventDefault();
|
|
3045
|
+
e.dataTransfer.dropEffect = "move";
|
|
3046
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
3047
|
+
const y = e.clientY - rect.top;
|
|
3048
|
+
const height = rect.height;
|
|
3049
|
+
let position;
|
|
3050
|
+
if (y < height * .25) position = "before";
|
|
3051
|
+
else if (y > height * .75) position = "after";
|
|
3052
|
+
else position = "inside";
|
|
3053
|
+
setDragState((prev) => ({
|
|
3054
|
+
...prev,
|
|
3055
|
+
targetId: node.id,
|
|
3056
|
+
position
|
|
3057
|
+
}));
|
|
3058
|
+
};
|
|
3059
|
+
const handleDragLeave = () => {
|
|
3060
|
+
setDragState((prev) => {
|
|
3061
|
+
if (prev.targetId === node.id) return {
|
|
3062
|
+
...prev,
|
|
3063
|
+
targetId: null,
|
|
3064
|
+
position: null
|
|
3065
|
+
};
|
|
3066
|
+
return prev;
|
|
3067
|
+
});
|
|
3068
|
+
};
|
|
3069
|
+
const handleDrop = (e) => {
|
|
3070
|
+
e.preventDefault();
|
|
3071
|
+
if (!draggable || !dragState.draggingId || !dragState.position || dragState.draggingId === node.id) return;
|
|
3072
|
+
onMove?.(dragState.draggingId, node.id, dragState.position);
|
|
3073
|
+
setDragState({
|
|
3074
|
+
draggingId: null,
|
|
3075
|
+
targetId: null,
|
|
3076
|
+
position: null
|
|
3077
|
+
});
|
|
3078
|
+
};
|
|
3079
|
+
const handleDragEnd = () => {
|
|
3080
|
+
setDragState({
|
|
3081
|
+
draggingId: null,
|
|
3082
|
+
targetId: null,
|
|
3083
|
+
position: null
|
|
3084
|
+
});
|
|
3085
|
+
};
|
|
3086
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
3087
|
+
role: "treeitem",
|
|
3088
|
+
"aria-expanded": hasChildren ? isExpanded : void 0,
|
|
3089
|
+
"aria-selected": isSelected,
|
|
3090
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
3091
|
+
className: cn$8("group flex items-center gap-1 rounded-md px-2 py-1.5 transition-colors", isSelected ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-primary,#2d2d2d)]", isDragging && "opacity-40", isDropTarget && dragState.position === "inside" && "ring-2 ring-[var(--dashboard-primary,#37a501)] ring-inset", node.disabled && "opacity-50 cursor-not-allowed"),
|
|
3092
|
+
style: { paddingLeft: `${level * indentSize + 4}px` },
|
|
3093
|
+
draggable: draggable && !node.disabled,
|
|
3094
|
+
onDragStart: handleDragStart,
|
|
3095
|
+
onDragOver: handleDragOver,
|
|
3096
|
+
onDragLeave: handleDragLeave,
|
|
3097
|
+
onDrop: handleDrop,
|
|
3098
|
+
onDragEnd: handleDragEnd,
|
|
3099
|
+
children: [
|
|
3100
|
+
isDropTarget && dragState.position === "before" && /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-0 h-0.5 bg-[var(--dashboard-primary,#37a501)]" }),
|
|
3101
|
+
isDropTarget && dragState.position === "after" && /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 bottom-0 h-0.5 bg-[var(--dashboard-primary,#37a501)]" }),
|
|
3102
|
+
draggable && !node.disabled && /* @__PURE__ */ jsx("span", {
|
|
3103
|
+
className: "flex-shrink-0 opacity-0 group-hover:opacity-60 cursor-grab active:cursor-grabbing",
|
|
3104
|
+
children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5 text-[var(--dashboard-text-secondary,#6b7280)]" })
|
|
3105
|
+
}),
|
|
3106
|
+
/* @__PURE__ */ jsx("button", {
|
|
3107
|
+
type: "button",
|
|
3108
|
+
onClick: () => hasChildren && onToggle(node.id),
|
|
3109
|
+
className: cn$8("flex-shrink-0 w-5 h-5 flex items-center justify-center rounded transition-transform", hasChildren ? "cursor-pointer" : "invisible"),
|
|
3110
|
+
tabIndex: hasChildren ? 0 : -1,
|
|
3111
|
+
"aria-label": isExpanded ? "Recolher" : "Expandir",
|
|
3112
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { className: cn$8("h-3.5 w-3.5 transition-transform duration-150", isExpanded && "rotate-90") })
|
|
3113
|
+
}),
|
|
3114
|
+
renderNode ? /* @__PURE__ */ jsx("div", {
|
|
3115
|
+
className: "flex-1 min-w-0 cursor-pointer",
|
|
3116
|
+
onClick: () => !node.disabled && onSelect?.(node),
|
|
3117
|
+
children: renderNode(node, isSelected, isExpanded)
|
|
3118
|
+
}) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3119
|
+
node.icon && /* @__PURE__ */ jsx("span", {
|
|
3120
|
+
className: "flex-shrink-0 h-4 w-4",
|
|
3121
|
+
children: node.icon
|
|
3122
|
+
}),
|
|
3123
|
+
/* @__PURE__ */ jsx("span", {
|
|
3124
|
+
className: cn$8("flex-1 min-w-0 text-sm truncate", !node.disabled && "cursor-pointer"),
|
|
3125
|
+
onClick: () => !node.disabled && onSelect?.(node),
|
|
3126
|
+
children: node.label
|
|
3127
|
+
}),
|
|
3128
|
+
node.badge && /* @__PURE__ */ jsx("span", {
|
|
3129
|
+
className: "flex-shrink-0",
|
|
3130
|
+
children: node.badge
|
|
3131
|
+
}),
|
|
3132
|
+
node.actions && /* @__PURE__ */ jsx("span", {
|
|
3133
|
+
className: "flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity",
|
|
3134
|
+
children: node.actions
|
|
3135
|
+
})
|
|
3136
|
+
] })
|
|
3137
|
+
]
|
|
3138
|
+
}), hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", {
|
|
3139
|
+
role: "group",
|
|
3140
|
+
className: "dashboard-animate-expand",
|
|
3141
|
+
children: node.children.map((child) => /* @__PURE__ */ jsx(TreeItem, {
|
|
3142
|
+
node: child,
|
|
3143
|
+
level: level + 1,
|
|
3144
|
+
expanded,
|
|
3145
|
+
selectedId,
|
|
3146
|
+
draggable,
|
|
3147
|
+
indentSize,
|
|
3148
|
+
onSelect,
|
|
3149
|
+
onToggle,
|
|
3150
|
+
onMove,
|
|
3151
|
+
renderNode,
|
|
3152
|
+
dragState,
|
|
3153
|
+
setDragState
|
|
3154
|
+
}, child.id))
|
|
3155
|
+
})]
|
|
3156
|
+
});
|
|
3157
|
+
}
|
|
3158
|
+
function TreeView({ nodes, onSelect, onExpand, onMove, renderNode, selectedId, defaultExpanded = [], draggable = false, indentSize = 20, className }) {
|
|
3159
|
+
const [expanded, setExpanded] = useState(() => new Set(defaultExpanded));
|
|
3160
|
+
const [dragState, setDragState] = useState({
|
|
3161
|
+
draggingId: null,
|
|
3162
|
+
targetId: null,
|
|
3163
|
+
position: null
|
|
3164
|
+
});
|
|
3165
|
+
const handleToggle = useCallback((nodeId) => {
|
|
3166
|
+
setExpanded((prev) => {
|
|
3167
|
+
const next = new Set(prev);
|
|
3168
|
+
const willExpand = !next.has(nodeId);
|
|
3169
|
+
if (willExpand) next.add(nodeId);
|
|
3170
|
+
else next.delete(nodeId);
|
|
3171
|
+
onExpand?.(nodeId, willExpand);
|
|
3172
|
+
return next;
|
|
3173
|
+
});
|
|
3174
|
+
}, [onExpand]);
|
|
3175
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
3176
|
+
role: "tree",
|
|
3177
|
+
className: cn$8("select-none", className),
|
|
3178
|
+
children: nodes.map((node) => /* @__PURE__ */ jsx(TreeItem, {
|
|
3179
|
+
node,
|
|
3180
|
+
level: 0,
|
|
3181
|
+
expanded,
|
|
3182
|
+
selectedId,
|
|
3183
|
+
draggable,
|
|
3184
|
+
indentSize,
|
|
3185
|
+
onSelect,
|
|
3186
|
+
onToggle: handleToggle,
|
|
3187
|
+
onMove,
|
|
3188
|
+
renderNode,
|
|
3189
|
+
dragState,
|
|
3190
|
+
setDragState
|
|
3191
|
+
}, node.id))
|
|
3192
|
+
});
|
|
3193
|
+
}
|
|
3194
|
+
|
|
3195
|
+
//#endregion
|
|
3196
|
+
//#region src/components/Stepper/index.tsx
|
|
3197
|
+
const cn$7 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3198
|
+
function StepIcon({ step, index }) {
|
|
3199
|
+
const status = step.status || "pending";
|
|
3200
|
+
if (status === "completed") return /* @__PURE__ */ jsx("div", {
|
|
3201
|
+
className: "flex h-8 w-8 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)] text-white flex-shrink-0",
|
|
3202
|
+
children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
|
|
3203
|
+
});
|
|
3204
|
+
if (status === "error") return /* @__PURE__ */ jsx("div", {
|
|
3205
|
+
className: "flex h-8 w-8 items-center justify-center rounded-full bg-[var(--dashboard-status-danger,#EF4444)] text-white flex-shrink-0",
|
|
3206
|
+
children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" })
|
|
3207
|
+
});
|
|
3208
|
+
if (status === "active") return /* @__PURE__ */ jsx("div", {
|
|
3209
|
+
className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)] flex-shrink-0",
|
|
3210
|
+
children: step.icon || /* @__PURE__ */ jsx("span", {
|
|
3211
|
+
className: "text-sm font-semibold",
|
|
3212
|
+
children: index + 1
|
|
3213
|
+
})
|
|
3214
|
+
});
|
|
3215
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3216
|
+
className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--dashboard-text-secondary,#6b7280)]/30 text-[var(--dashboard-text-secondary,#6b7280)] flex-shrink-0",
|
|
3217
|
+
children: step.icon || /* @__PURE__ */ jsx("span", {
|
|
3218
|
+
className: "text-sm font-medium",
|
|
3219
|
+
children: index + 1
|
|
3220
|
+
})
|
|
3221
|
+
});
|
|
3222
|
+
}
|
|
3223
|
+
function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal", className }) {
|
|
3224
|
+
const resolvedSteps = steps.map((step, i) => ({
|
|
3225
|
+
...step,
|
|
3226
|
+
status: step.status || (i < activeStep ? "completed" : i === activeStep ? "active" : "pending")
|
|
3227
|
+
}));
|
|
3228
|
+
if (orientation === "vertical") return /* @__PURE__ */ jsx("nav", {
|
|
3229
|
+
"aria-label": "Progress",
|
|
3230
|
+
className,
|
|
3231
|
+
children: /* @__PURE__ */ jsx("ol", {
|
|
3232
|
+
className: "flex flex-col",
|
|
3233
|
+
children: resolvedSteps.map((step, index) => /* @__PURE__ */ jsxs("li", {
|
|
3234
|
+
className: "flex gap-3",
|
|
3235
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
3236
|
+
className: "flex flex-col items-center",
|
|
3237
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
3238
|
+
type: "button",
|
|
3239
|
+
onClick: () => onStepChange?.(index),
|
|
3240
|
+
disabled: !onStepChange,
|
|
3241
|
+
className: cn$7("relative z-10", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
|
|
3242
|
+
"aria-current": step.status === "active" ? "step" : void 0,
|
|
3243
|
+
children: /* @__PURE__ */ jsx(StepIcon, {
|
|
3244
|
+
step,
|
|
3245
|
+
index
|
|
3246
|
+
})
|
|
3247
|
+
}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$7("w-0.5 flex-1 min-h-[32px]", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
|
|
3248
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
3249
|
+
className: cn$7("pb-6", index === resolvedSteps.length - 1 && "pb-0"),
|
|
3250
|
+
children: [/* @__PURE__ */ jsx("p", {
|
|
3251
|
+
className: cn$7("text-sm font-medium leading-8", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
|
|
3252
|
+
children: step.label
|
|
3253
|
+
}), step.description && /* @__PURE__ */ jsx("p", {
|
|
3254
|
+
className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] mt-0.5",
|
|
3255
|
+
children: step.description
|
|
3256
|
+
})]
|
|
3257
|
+
})]
|
|
3258
|
+
}, step.id))
|
|
3259
|
+
})
|
|
3260
|
+
});
|
|
3261
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
3262
|
+
"aria-label": "Progress",
|
|
3263
|
+
className,
|
|
3264
|
+
children: /* @__PURE__ */ jsx("ol", {
|
|
3265
|
+
className: "flex items-center",
|
|
3266
|
+
children: resolvedSteps.map((step, index) => /* @__PURE__ */ jsxs("li", {
|
|
3267
|
+
className: cn$7("flex items-center", index < resolvedSteps.length - 1 && "flex-1"),
|
|
3268
|
+
children: [/* @__PURE__ */ jsxs("button", {
|
|
3269
|
+
type: "button",
|
|
3270
|
+
onClick: () => onStepChange?.(index),
|
|
3271
|
+
disabled: !onStepChange,
|
|
3272
|
+
className: cn$7("flex items-center gap-2 group", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
|
|
3273
|
+
"aria-current": step.status === "active" ? "step" : void 0,
|
|
3274
|
+
children: [/* @__PURE__ */ jsx(StepIcon, {
|
|
3275
|
+
step,
|
|
3276
|
+
index
|
|
3277
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
3278
|
+
className: "hidden sm:block text-left",
|
|
3279
|
+
children: [/* @__PURE__ */ jsx("p", {
|
|
3280
|
+
className: cn$7("text-sm font-medium whitespace-nowrap", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
|
|
3281
|
+
children: step.label
|
|
3282
|
+
}), step.description && /* @__PURE__ */ jsx("p", {
|
|
3283
|
+
className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] whitespace-nowrap",
|
|
3284
|
+
children: step.description
|
|
3285
|
+
})]
|
|
3286
|
+
})]
|
|
3287
|
+
}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$7("flex-1 h-0.5 mx-3", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
|
|
3288
|
+
}, step.id))
|
|
3289
|
+
})
|
|
3290
|
+
});
|
|
3291
|
+
}
|
|
3292
|
+
|
|
3293
|
+
//#endregion
|
|
3294
|
+
//#region src/components/FileUpload/index.tsx
|
|
3295
|
+
const cn$6 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3296
|
+
function formatSize(bytes) {
|
|
3297
|
+
if (bytes < 1024) return `${bytes} B`;
|
|
3298
|
+
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
3299
|
+
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
3300
|
+
}
|
|
3301
|
+
function isImageType(type) {
|
|
3302
|
+
return type.startsWith("image/");
|
|
3303
|
+
}
|
|
3304
|
+
function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, preview = true, disabled = false, label = "Arraste arquivos aqui ou clique para selecionar", description, icon, maxFiles, className, files: controlledFiles }) {
|
|
3305
|
+
const [internalFiles, setInternalFiles] = useState([]);
|
|
3306
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
3307
|
+
const [error, setError] = useState(null);
|
|
3308
|
+
const inputRef = useRef(null);
|
|
3309
|
+
const files = controlledFiles || internalFiles;
|
|
3310
|
+
const validateFiles = useCallback((fileList) => {
|
|
3311
|
+
setError(null);
|
|
3312
|
+
const valid = [];
|
|
3313
|
+
for (const file of fileList) {
|
|
3314
|
+
if (maxSize && file.size > maxSize) {
|
|
3315
|
+
setError(`"${file.name}" excede o limite de ${formatSize(maxSize)}`);
|
|
3316
|
+
continue;
|
|
3317
|
+
}
|
|
3318
|
+
valid.push(file);
|
|
3319
|
+
}
|
|
3320
|
+
if (maxFiles) {
|
|
3321
|
+
const available = maxFiles - files.length;
|
|
3322
|
+
if (valid.length > available) {
|
|
3323
|
+
setError(`Limite de ${maxFiles} arquivos`);
|
|
3324
|
+
return valid.slice(0, Math.max(0, available));
|
|
3325
|
+
}
|
|
3326
|
+
}
|
|
3327
|
+
return valid;
|
|
3328
|
+
}, [
|
|
3329
|
+
maxSize,
|
|
3330
|
+
maxFiles,
|
|
3331
|
+
files.length
|
|
3332
|
+
]);
|
|
3333
|
+
const addFiles = useCallback((newFiles) => {
|
|
3334
|
+
const validated = validateFiles(newFiles);
|
|
3335
|
+
if (validated.length === 0) return;
|
|
3336
|
+
const uploaded = validated.map((file) => ({
|
|
3337
|
+
file,
|
|
3338
|
+
id: `${file.name}-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
3339
|
+
preview: isImageType(file.type) ? URL.createObjectURL(file) : void 0
|
|
3340
|
+
}));
|
|
3341
|
+
if (!controlledFiles) setInternalFiles((prev) => multiple ? [...prev, ...uploaded] : uploaded);
|
|
3342
|
+
onUpload?.(validated);
|
|
3343
|
+
}, [
|
|
3344
|
+
validateFiles,
|
|
3345
|
+
multiple,
|
|
3346
|
+
onUpload,
|
|
3347
|
+
controlledFiles
|
|
3348
|
+
]);
|
|
3349
|
+
const handleRemove = useCallback((fileId) => {
|
|
3350
|
+
if (!controlledFiles) setInternalFiles((prev) => {
|
|
3351
|
+
const file = prev.find((f) => f.id === fileId);
|
|
3352
|
+
if (file?.preview) URL.revokeObjectURL(file.preview);
|
|
3353
|
+
return prev.filter((f) => f.id !== fileId);
|
|
3354
|
+
});
|
|
3355
|
+
onRemove?.(fileId);
|
|
3356
|
+
}, [onRemove, controlledFiles]);
|
|
3357
|
+
const handleDrop = useCallback((e) => {
|
|
3358
|
+
e.preventDefault();
|
|
3359
|
+
setIsDragging(false);
|
|
3360
|
+
if (disabled) return;
|
|
3361
|
+
addFiles(Array.from(e.dataTransfer.files));
|
|
3362
|
+
}, [addFiles, disabled]);
|
|
3363
|
+
const handleDragOver = useCallback((e) => {
|
|
3364
|
+
e.preventDefault();
|
|
3365
|
+
if (!disabled) setIsDragging(true);
|
|
3366
|
+
}, [disabled]);
|
|
3367
|
+
const handleDragLeave = useCallback((e) => {
|
|
3368
|
+
e.preventDefault();
|
|
3369
|
+
setIsDragging(false);
|
|
3370
|
+
}, []);
|
|
3371
|
+
const handleInputChange = useCallback((e) => {
|
|
3372
|
+
addFiles(e.target.files ? Array.from(e.target.files) : []);
|
|
3373
|
+
if (inputRef.current) inputRef.current.value = "";
|
|
3374
|
+
}, [addFiles]);
|
|
3375
|
+
useEffect(() => {
|
|
3376
|
+
return () => {
|
|
3377
|
+
internalFiles.forEach((f) => {
|
|
3378
|
+
if (f.preview) URL.revokeObjectURL(f.preview);
|
|
3379
|
+
});
|
|
3380
|
+
};
|
|
3381
|
+
}, []);
|
|
3382
|
+
const descText = description || [accept && `Formatos: ${accept}`, maxSize && `Tamanho max: ${formatSize(maxSize)}`].filter(Boolean).join(" | ") || void 0;
|
|
3383
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3384
|
+
className,
|
|
3385
|
+
children: [
|
|
3386
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3387
|
+
onDrop: handleDrop,
|
|
3388
|
+
onDragOver: handleDragOver,
|
|
3389
|
+
onDragLeave: handleDragLeave,
|
|
3390
|
+
onClick: () => !disabled && inputRef.current?.click(),
|
|
3391
|
+
className: cn$6("relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors", isDragging ? "border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/5" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
|
|
3392
|
+
role: "button",
|
|
3393
|
+
tabIndex: disabled ? -1 : 0,
|
|
3394
|
+
"aria-label": label,
|
|
3395
|
+
onKeyDown: (e) => {
|
|
3396
|
+
if ((e.key === "Enter" || e.key === " ") && !disabled) {
|
|
3397
|
+
e.preventDefault();
|
|
3398
|
+
inputRef.current?.click();
|
|
3399
|
+
}
|
|
3400
|
+
},
|
|
3401
|
+
children: [/* @__PURE__ */ jsx("input", {
|
|
3402
|
+
ref: inputRef,
|
|
3403
|
+
type: "file",
|
|
3404
|
+
accept,
|
|
3405
|
+
multiple,
|
|
3406
|
+
onChange: handleInputChange,
|
|
3407
|
+
className: "hidden",
|
|
3408
|
+
disabled,
|
|
3409
|
+
"aria-hidden": "true",
|
|
3410
|
+
tabIndex: -1
|
|
3411
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
3412
|
+
className: "flex flex-col items-center text-center",
|
|
3413
|
+
children: [
|
|
3414
|
+
icon || /* @__PURE__ */ jsx(Upload, { className: cn$6("h-8 w-8 mb-3", isDragging ? "text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)]") }),
|
|
3415
|
+
/* @__PURE__ */ jsx("p", {
|
|
3416
|
+
className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)]",
|
|
3417
|
+
children: label
|
|
3418
|
+
}),
|
|
3419
|
+
descText && /* @__PURE__ */ jsx("p", {
|
|
3420
|
+
className: "mt-1 text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
3421
|
+
children: descText
|
|
3422
|
+
})
|
|
3423
|
+
]
|
|
3424
|
+
})]
|
|
3425
|
+
}),
|
|
3426
|
+
error && /* @__PURE__ */ jsx("p", {
|
|
3427
|
+
className: "mt-2 text-xs text-[var(--dashboard-status-danger,#EF4444)]",
|
|
3428
|
+
children: error
|
|
3429
|
+
}),
|
|
3430
|
+
preview && files.length > 0 && /* @__PURE__ */ jsx("ul", {
|
|
3431
|
+
className: "mt-3 space-y-2",
|
|
3432
|
+
children: files.map((uploaded) => /* @__PURE__ */ jsxs("li", {
|
|
3433
|
+
className: "flex items-center gap-3 rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] p-3",
|
|
3434
|
+
children: [
|
|
3435
|
+
uploaded.preview ? /* @__PURE__ */ jsx("img", {
|
|
3436
|
+
src: uploaded.preview,
|
|
3437
|
+
alt: uploaded.file.name,
|
|
3438
|
+
className: "h-10 w-10 rounded object-cover flex-shrink-0"
|
|
3439
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
3440
|
+
className: "flex h-10 w-10 items-center justify-center rounded bg-[var(--dashboard-text-secondary,#6b7280)]/10 flex-shrink-0",
|
|
3441
|
+
children: isImageType(uploaded.file.type) ? /* @__PURE__ */ jsx(Image, { className: "h-5 w-5 text-[var(--dashboard-text-secondary,#6b7280)]" }) : /* @__PURE__ */ jsx(File, { className: "h-5 w-5 text-[var(--dashboard-text-secondary,#6b7280)]" })
|
|
3442
|
+
}),
|
|
3443
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3444
|
+
className: "flex-1 min-w-0",
|
|
3445
|
+
children: [
|
|
3446
|
+
/* @__PURE__ */ jsx("p", {
|
|
3447
|
+
className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)] truncate",
|
|
3448
|
+
children: uploaded.file.name
|
|
3449
|
+
}),
|
|
3450
|
+
/* @__PURE__ */ jsx("p", {
|
|
3451
|
+
className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
3452
|
+
children: formatSize(uploaded.file.size)
|
|
3453
|
+
}),
|
|
3454
|
+
uploaded.progress !== void 0 && uploaded.progress < 100 && /* @__PURE__ */ jsx("div", {
|
|
3455
|
+
className: "mt-1 h-1 w-full rounded-full bg-[var(--dashboard-text-secondary,#6b7280)]/10 overflow-hidden",
|
|
3456
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
3457
|
+
className: "h-full rounded-full bg-[var(--dashboard-primary,#37a501)] transition-all duration-300",
|
|
3458
|
+
style: { width: `${uploaded.progress}%` }
|
|
3459
|
+
})
|
|
3460
|
+
})
|
|
3461
|
+
]
|
|
3462
|
+
}),
|
|
3463
|
+
/* @__PURE__ */ jsx("button", {
|
|
3464
|
+
onClick: (e) => {
|
|
3465
|
+
e.stopPropagation();
|
|
3466
|
+
handleRemove(uploaded.id);
|
|
3467
|
+
},
|
|
3468
|
+
className: "flex-shrink-0 rounded-md p-1 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 transition-colors cursor-pointer",
|
|
3469
|
+
"aria-label": `Remover ${uploaded.file.name}`,
|
|
3470
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
3471
|
+
})
|
|
3472
|
+
]
|
|
3473
|
+
}, uploaded.id))
|
|
3474
|
+
})
|
|
3475
|
+
]
|
|
3476
|
+
});
|
|
3477
|
+
}
|
|
3478
|
+
|
|
3479
|
+
//#endregion
|
|
3480
|
+
//#region src/components/Tooltip/index.tsx
|
|
3481
|
+
const cn$5 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3482
|
+
function Tooltip({ content, position = "top", delay = 200, children, className, maxWidth = 240 }) {
|
|
3483
|
+
const [visible, setVisible] = useState(false);
|
|
3484
|
+
const [coords, setCoords] = useState({
|
|
3485
|
+
top: 0,
|
|
3486
|
+
left: 0
|
|
3487
|
+
});
|
|
3488
|
+
const triggerRef = useRef(null);
|
|
3489
|
+
const tooltipRef = useRef(null);
|
|
3490
|
+
const timeoutRef = useRef();
|
|
3491
|
+
const idRef = useRef(`tooltip-${Math.random().toString(36).slice(2, 9)}`);
|
|
3492
|
+
const calculatePosition = useCallback(() => {
|
|
3493
|
+
if (!triggerRef.current || !tooltipRef.current) return;
|
|
3494
|
+
const trigger = triggerRef.current.getBoundingClientRect();
|
|
3495
|
+
const tooltip = tooltipRef.current.getBoundingClientRect();
|
|
3496
|
+
const gap = 8;
|
|
3497
|
+
let top = 0;
|
|
3498
|
+
let left = 0;
|
|
3499
|
+
switch (position) {
|
|
3500
|
+
case "top":
|
|
3501
|
+
top = trigger.top - tooltip.height - gap;
|
|
3502
|
+
left = trigger.left + trigger.width / 2 - tooltip.width / 2;
|
|
3503
|
+
break;
|
|
3504
|
+
case "bottom":
|
|
3505
|
+
top = trigger.bottom + gap;
|
|
3506
|
+
left = trigger.left + trigger.width / 2 - tooltip.width / 2;
|
|
3507
|
+
break;
|
|
3508
|
+
case "left":
|
|
3509
|
+
top = trigger.top + trigger.height / 2 - tooltip.height / 2;
|
|
3510
|
+
left = trigger.left - tooltip.width - gap;
|
|
3511
|
+
break;
|
|
3512
|
+
case "right":
|
|
3513
|
+
top = trigger.top + trigger.height / 2 - tooltip.height / 2;
|
|
3514
|
+
left = trigger.right + gap;
|
|
3515
|
+
break;
|
|
3516
|
+
}
|
|
3517
|
+
left = Math.max(8, Math.min(left, window.innerWidth - tooltip.width - 8));
|
|
3518
|
+
top = Math.max(8, Math.min(top, window.innerHeight - tooltip.height - 8));
|
|
3519
|
+
setCoords({
|
|
3520
|
+
top,
|
|
3521
|
+
left
|
|
3522
|
+
});
|
|
3523
|
+
}, [position]);
|
|
3524
|
+
const show = useCallback(() => {
|
|
3525
|
+
timeoutRef.current = setTimeout(() => {
|
|
3526
|
+
setVisible(true);
|
|
3527
|
+
}, delay);
|
|
3528
|
+
}, [delay]);
|
|
3529
|
+
const hide = useCallback(() => {
|
|
3530
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
3531
|
+
setVisible(false);
|
|
3532
|
+
}, []);
|
|
3533
|
+
useEffect(() => {
|
|
3534
|
+
if (visible) requestAnimationFrame(calculatePosition);
|
|
3535
|
+
}, [visible, calculatePosition]);
|
|
3536
|
+
useEffect(() => {
|
|
3537
|
+
return () => {
|
|
3538
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
3539
|
+
};
|
|
3540
|
+
}, []);
|
|
3541
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
3542
|
+
ref: triggerRef,
|
|
3543
|
+
onMouseEnter: show,
|
|
3544
|
+
onMouseLeave: hide,
|
|
3545
|
+
onFocus: show,
|
|
3546
|
+
onBlur: hide,
|
|
3547
|
+
"aria-describedby": visible ? idRef.current : void 0,
|
|
3548
|
+
className: "inline-flex",
|
|
3549
|
+
children
|
|
3550
|
+
}), visible && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsx("div", {
|
|
3551
|
+
ref: tooltipRef,
|
|
3552
|
+
id: idRef.current,
|
|
3553
|
+
role: "tooltip",
|
|
3554
|
+
className: cn$5("fixed z-[10002] rounded-md px-3 py-2 text-xs font-medium", "bg-[var(--dashboard-text-primary,#2d2d2d)] text-white", "shadow-lg dashboard-animate-fade-in pointer-events-none", className),
|
|
3555
|
+
style: {
|
|
3556
|
+
top: coords.top,
|
|
3557
|
+
left: coords.left,
|
|
3558
|
+
maxWidth
|
|
3559
|
+
},
|
|
3560
|
+
children: content
|
|
3561
|
+
}), document.body)] });
|
|
3562
|
+
}
|
|
3563
|
+
|
|
3564
|
+
//#endregion
|
|
3565
|
+
//#region src/components/Breadcrumb/index.tsx
|
|
3566
|
+
const cn$4 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3567
|
+
function Breadcrumb({ items, separator, onNavigate, className }) {
|
|
3568
|
+
const defaultSeparator = /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-[var(--dashboard-text-secondary,#6b7280)] flex-shrink-0" });
|
|
3569
|
+
const handleClick = (e, href) => {
|
|
3570
|
+
if (href && onNavigate) {
|
|
3571
|
+
e.preventDefault();
|
|
3572
|
+
onNavigate(href);
|
|
3573
|
+
}
|
|
3574
|
+
};
|
|
3575
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
3576
|
+
"aria-label": "Breadcrumb",
|
|
3577
|
+
className,
|
|
3578
|
+
children: /* @__PURE__ */ jsx("ol", {
|
|
3579
|
+
className: "flex items-center gap-1.5 flex-wrap",
|
|
3580
|
+
children: items.map((item, index) => {
|
|
3581
|
+
const isLast = index === items.length - 1;
|
|
3582
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
3583
|
+
className: "flex items-center gap-1.5",
|
|
3584
|
+
children: [index > 0 && /* @__PURE__ */ jsx("span", {
|
|
3585
|
+
"aria-hidden": "true",
|
|
3586
|
+
children: separator || defaultSeparator
|
|
3587
|
+
}), isLast ? /* @__PURE__ */ jsxs("span", {
|
|
3588
|
+
className: cn$4("flex items-center gap-1.5 text-sm font-medium", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
|
|
3589
|
+
"aria-current": "page",
|
|
3590
|
+
children: [item.icon && /* @__PURE__ */ jsx("span", {
|
|
3591
|
+
className: "flex-shrink-0 h-4 w-4",
|
|
3592
|
+
children: item.icon
|
|
3593
|
+
}), item.label]
|
|
3594
|
+
}) : /* @__PURE__ */ jsxs("a", {
|
|
3595
|
+
href: item.href || "#",
|
|
3596
|
+
onClick: (e) => handleClick(e, item.href),
|
|
3597
|
+
className: cn$4("flex items-center gap-1.5 text-sm", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-primary,#37a501)] transition-colors"),
|
|
3598
|
+
children: [item.icon && /* @__PURE__ */ jsx("span", {
|
|
3599
|
+
className: "flex-shrink-0 h-4 w-4",
|
|
3600
|
+
children: item.icon
|
|
3601
|
+
}), item.label]
|
|
3602
|
+
})]
|
|
3603
|
+
}, index);
|
|
3604
|
+
})
|
|
3605
|
+
})
|
|
3606
|
+
});
|
|
3607
|
+
}
|
|
3608
|
+
|
|
3609
|
+
//#endregion
|
|
3610
|
+
//#region src/components/Combobox/index.tsx
|
|
3611
|
+
const cn$3 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3612
|
+
function Combobox({ options, value, onChange, multiple = false, searchable = true, placeholder = "Selecione...", label, error, disabled = false, renderOption, noResultsText = "Nenhum resultado encontrado", className }) {
|
|
3613
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
3614
|
+
const [query, setQuery] = useState("");
|
|
3615
|
+
const [position, setPosition] = useState({
|
|
3616
|
+
top: 0,
|
|
3617
|
+
left: 0,
|
|
3618
|
+
width: 0
|
|
3619
|
+
});
|
|
3620
|
+
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
3621
|
+
const containerRef = useRef(null);
|
|
3622
|
+
const inputRef = useRef(null);
|
|
3623
|
+
const listRef = useRef(null);
|
|
3624
|
+
const selectedValues = useMemo(() => {
|
|
3625
|
+
if (!value) return [];
|
|
3626
|
+
return Array.isArray(value) ? value : [value];
|
|
3627
|
+
}, [value]);
|
|
3628
|
+
const filtered = useMemo(() => {
|
|
3629
|
+
if (!query) return options;
|
|
3630
|
+
const lower = query.toLowerCase();
|
|
3631
|
+
return options.filter((o) => o.label.toLowerCase().includes(lower));
|
|
3632
|
+
}, [options, query]);
|
|
3633
|
+
const calculatePosition = useCallback(() => {
|
|
3634
|
+
if (!containerRef.current) return;
|
|
3635
|
+
const rect = containerRef.current.getBoundingClientRect();
|
|
3636
|
+
setPosition({
|
|
3637
|
+
top: rect.bottom + 4,
|
|
3638
|
+
left: rect.left,
|
|
3639
|
+
width: rect.width
|
|
3640
|
+
});
|
|
3641
|
+
}, []);
|
|
3642
|
+
const open = useCallback(() => {
|
|
3643
|
+
if (disabled) return;
|
|
3644
|
+
calculatePosition();
|
|
3645
|
+
setIsOpen(true);
|
|
3646
|
+
setFocusedIndex(-1);
|
|
3647
|
+
setTimeout(() => inputRef.current?.focus(), 0);
|
|
3648
|
+
}, [disabled, calculatePosition]);
|
|
3649
|
+
const close = useCallback(() => {
|
|
3650
|
+
setIsOpen(false);
|
|
3651
|
+
setQuery("");
|
|
3652
|
+
setFocusedIndex(-1);
|
|
3653
|
+
}, []);
|
|
3654
|
+
const toggleOption = useCallback((optionValue) => {
|
|
3655
|
+
if (multiple) {
|
|
3656
|
+
const current = selectedValues;
|
|
3657
|
+
onChange(current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue]);
|
|
3658
|
+
} else {
|
|
3659
|
+
onChange(optionValue);
|
|
3660
|
+
close();
|
|
3661
|
+
}
|
|
3662
|
+
}, [
|
|
3663
|
+
multiple,
|
|
3664
|
+
selectedValues,
|
|
3665
|
+
onChange,
|
|
3666
|
+
close
|
|
3667
|
+
]);
|
|
3668
|
+
const removeValue = useCallback((val, e) => {
|
|
3669
|
+
e?.stopPropagation();
|
|
3670
|
+
if (multiple) onChange(selectedValues.filter((v) => v !== val));
|
|
3671
|
+
else onChange(multiple ? [] : "");
|
|
3672
|
+
}, [
|
|
3673
|
+
multiple,
|
|
3674
|
+
selectedValues,
|
|
3675
|
+
onChange
|
|
3676
|
+
]);
|
|
3677
|
+
useEffect(() => {
|
|
3678
|
+
if (!isOpen) return;
|
|
3679
|
+
const handleClick = (e) => {
|
|
3680
|
+
const portal = document.querySelector(".dc-combobox-portal");
|
|
3681
|
+
if (containerRef.current && !containerRef.current.contains(e.target) && (!portal || !portal.contains(e.target))) close();
|
|
3682
|
+
};
|
|
3683
|
+
const handleScroll = (e) => {
|
|
3684
|
+
const portal = document.querySelector(".dc-combobox-portal");
|
|
3685
|
+
if (!portal || !portal.contains(e.target)) close();
|
|
3686
|
+
};
|
|
3687
|
+
document.addEventListener("mousedown", handleClick);
|
|
3688
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
3689
|
+
window.addEventListener("resize", close);
|
|
3690
|
+
return () => {
|
|
3691
|
+
document.removeEventListener("mousedown", handleClick);
|
|
3692
|
+
window.removeEventListener("scroll", handleScroll, true);
|
|
3693
|
+
window.removeEventListener("resize", close);
|
|
3694
|
+
};
|
|
3695
|
+
}, [isOpen, close]);
|
|
3696
|
+
const handleKeyDown = useCallback((e) => {
|
|
3697
|
+
if (!isOpen) {
|
|
3698
|
+
if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
|
|
3699
|
+
e.preventDefault();
|
|
3700
|
+
open();
|
|
3701
|
+
}
|
|
3702
|
+
return;
|
|
3703
|
+
}
|
|
3704
|
+
switch (e.key) {
|
|
3705
|
+
case "ArrowDown":
|
|
3706
|
+
e.preventDefault();
|
|
3707
|
+
setFocusedIndex((prev) => {
|
|
3708
|
+
const next = prev + 1;
|
|
3709
|
+
return next >= filtered.length ? 0 : next;
|
|
3710
|
+
});
|
|
3711
|
+
break;
|
|
3712
|
+
case "ArrowUp":
|
|
3713
|
+
e.preventDefault();
|
|
3714
|
+
setFocusedIndex((prev) => {
|
|
3715
|
+
const next = prev - 1;
|
|
3716
|
+
return next < 0 ? filtered.length - 1 : next;
|
|
3717
|
+
});
|
|
3718
|
+
break;
|
|
3719
|
+
case "Enter":
|
|
3720
|
+
e.preventDefault();
|
|
3721
|
+
if (focusedIndex >= 0 && filtered[focusedIndex] && !filtered[focusedIndex].disabled) toggleOption(filtered[focusedIndex].value);
|
|
3722
|
+
break;
|
|
3723
|
+
case "Escape":
|
|
3724
|
+
e.preventDefault();
|
|
3725
|
+
close();
|
|
3726
|
+
break;
|
|
3727
|
+
}
|
|
3728
|
+
}, [
|
|
3729
|
+
isOpen,
|
|
3730
|
+
open,
|
|
3731
|
+
close,
|
|
3732
|
+
filtered,
|
|
3733
|
+
focusedIndex,
|
|
3734
|
+
toggleOption
|
|
3735
|
+
]);
|
|
3736
|
+
useEffect(() => {
|
|
3737
|
+
if (focusedIndex >= 0 && listRef.current) listRef.current.children[focusedIndex]?.scrollIntoView({ block: "nearest" });
|
|
3738
|
+
}, [focusedIndex]);
|
|
3739
|
+
const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
|
|
3740
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3741
|
+
className: cn$3("space-y-2", className),
|
|
3742
|
+
children: [
|
|
3743
|
+
label && /* @__PURE__ */ jsx("label", {
|
|
3744
|
+
className: "block text-sm text-[var(--dashboard-text-primary,#2d2d2d)]",
|
|
3745
|
+
children: label
|
|
3746
|
+
}),
|
|
3747
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3748
|
+
ref: containerRef,
|
|
3749
|
+
onKeyDown: handleKeyDown,
|
|
3750
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
3751
|
+
role: "combobox",
|
|
3752
|
+
"aria-expanded": isOpen,
|
|
3753
|
+
"aria-haspopup": "listbox",
|
|
3754
|
+
"aria-controls": "combobox-listbox",
|
|
3755
|
+
tabIndex: disabled ? -1 : 0,
|
|
3756
|
+
onClick: () => isOpen ? close() : open(),
|
|
3757
|
+
className: cn$3("flex min-h-[40px] w-full items-center gap-2 rounded-lg border px-3 py-2 transition-colors", isOpen ? "border-[var(--dashboard-primary,#37a501)] ring-2 ring-[var(--dashboard-primary,#37a501)]/20" : error ? "border-[var(--dashboard-status-danger,#EF4444)]" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed bg-[var(--dashboard-text-secondary,#6b7280)]/10" : "cursor-pointer bg-[var(--dashboard-surface,#ffffff)]"),
|
|
3758
|
+
children: [
|
|
3759
|
+
/* @__PURE__ */ jsx("div", {
|
|
3760
|
+
className: "flex flex-1 flex-wrap items-center gap-1 min-w-0",
|
|
3761
|
+
children: multiple && selectedLabels.length > 0 ? selectedLabels.map((lbl, i) => /* @__PURE__ */ jsxs("span", {
|
|
3762
|
+
className: "inline-flex items-center gap-1 rounded-md bg-[var(--dashboard-primary,#37a501)]/10 px-2 py-0.5 text-xs font-medium text-[var(--dashboard-primary,#37a501)]",
|
|
3763
|
+
children: [lbl, /* @__PURE__ */ jsx("button", {
|
|
3764
|
+
type: "button",
|
|
3765
|
+
onClick: (e) => removeValue(selectedValues[i], e),
|
|
3766
|
+
className: "rounded-sm hover:bg-[var(--dashboard-primary,#37a501)]/20 cursor-pointer",
|
|
3767
|
+
"aria-label": `Remover ${lbl}`,
|
|
3768
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
3769
|
+
})]
|
|
3770
|
+
}, selectedValues[i])) : !multiple && selectedLabels.length === 1 ? /* @__PURE__ */ jsx("span", {
|
|
3771
|
+
className: "text-sm text-[var(--dashboard-text-primary,#2d2d2d)] truncate",
|
|
3772
|
+
children: selectedLabels[0]
|
|
3773
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
3774
|
+
className: "text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
3775
|
+
children: placeholder
|
|
3776
|
+
})
|
|
3777
|
+
}),
|
|
3778
|
+
!multiple && selectedValues.length > 0 && /* @__PURE__ */ jsx("button", {
|
|
3779
|
+
type: "button",
|
|
3780
|
+
onClick: (e) => removeValue(selectedValues[0], e),
|
|
3781
|
+
className: "flex-shrink-0 rounded-md p-0.5 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 cursor-pointer",
|
|
3782
|
+
"aria-label": "Limpar seleção",
|
|
3783
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
|
|
3784
|
+
}),
|
|
3785
|
+
/* @__PURE__ */ jsx(ChevronDown, { className: cn$3("h-4 w-4 flex-shrink-0 text-[var(--dashboard-text-secondary,#6b7280)] transition-transform", isOpen && "rotate-180") })
|
|
3786
|
+
]
|
|
3787
|
+
}), isOpen && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs("div", {
|
|
3788
|
+
className: "dc-combobox-portal rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] shadow-lg dashboard-animate-fade-in overflow-hidden",
|
|
3789
|
+
style: {
|
|
3790
|
+
position: "fixed",
|
|
3791
|
+
top: position.top,
|
|
3792
|
+
left: position.left,
|
|
3793
|
+
width: position.width,
|
|
3794
|
+
zIndex: 10001
|
|
3795
|
+
},
|
|
3796
|
+
children: [searchable && /* @__PURE__ */ jsxs("div", {
|
|
3797
|
+
className: "flex items-center gap-2 border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 px-3 py-2",
|
|
3798
|
+
children: [/* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-[var(--dashboard-text-secondary,#6b7280)] flex-shrink-0" }), /* @__PURE__ */ jsx("input", {
|
|
3799
|
+
ref: inputRef,
|
|
3800
|
+
type: "text",
|
|
3801
|
+
value: query,
|
|
3802
|
+
onChange: (e) => {
|
|
3803
|
+
setQuery(e.target.value);
|
|
3804
|
+
setFocusedIndex(-1);
|
|
3805
|
+
},
|
|
3806
|
+
placeholder: "Buscar...",
|
|
3807
|
+
className: "flex-1 bg-transparent text-sm text-[var(--dashboard-text-primary,#2d2d2d)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] outline-none",
|
|
3808
|
+
"aria-label": "Buscar opções"
|
|
3809
|
+
})]
|
|
3810
|
+
}), /* @__PURE__ */ jsx("ul", {
|
|
3811
|
+
ref: listRef,
|
|
3812
|
+
id: "combobox-listbox",
|
|
3813
|
+
role: "listbox",
|
|
3814
|
+
"aria-multiselectable": multiple,
|
|
3815
|
+
className: "max-h-60 overflow-y-auto py-1",
|
|
3816
|
+
children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", {
|
|
3817
|
+
className: "px-3 py-3 text-center text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
3818
|
+
children: noResultsText
|
|
3819
|
+
}) : filtered.map((option, index) => {
|
|
3820
|
+
const isSelected = selectedValues.includes(option.value);
|
|
3821
|
+
const isFocused = index === focusedIndex;
|
|
3822
|
+
return /* @__PURE__ */ jsx("li", {
|
|
3823
|
+
role: "option",
|
|
3824
|
+
"aria-selected": isSelected,
|
|
3825
|
+
"aria-disabled": option.disabled,
|
|
3826
|
+
"data-modal-ignore": true,
|
|
3827
|
+
onClick: () => {
|
|
3828
|
+
if (!option.disabled) toggleOption(option.value);
|
|
3829
|
+
},
|
|
3830
|
+
className: cn$3("flex items-center justify-between px-3 py-2 text-sm transition-colors", option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isFocused && "bg-[var(--dashboard-text-secondary,#6b7280)]/10", !isFocused && !option.disabled && "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10", isSelected ? "text-[var(--dashboard-primary,#37a501)] font-medium" : "text-[var(--dashboard-text-primary,#2d2d2d)]"),
|
|
3831
|
+
children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
3832
|
+
className: "truncate",
|
|
3833
|
+
children: option.label
|
|
3834
|
+
}), isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 flex-shrink-0 text-[var(--dashboard-primary,#37a501)]" })] })
|
|
3835
|
+
}, option.value);
|
|
3836
|
+
})
|
|
3837
|
+
})]
|
|
3838
|
+
}), document.body)]
|
|
3839
|
+
}),
|
|
3840
|
+
error && /* @__PURE__ */ jsx("p", {
|
|
3841
|
+
className: "text-xs text-[var(--dashboard-status-danger,#EF4444)]",
|
|
3842
|
+
children: error
|
|
3843
|
+
})
|
|
3844
|
+
]
|
|
3845
|
+
});
|
|
3846
|
+
}
|
|
3847
|
+
|
|
3848
|
+
//#endregion
|
|
3849
|
+
//#region src/components/Alert/index.tsx
|
|
3850
|
+
const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3851
|
+
const variantConfig = {
|
|
3852
|
+
info: {
|
|
3853
|
+
border: "border-[var(--dashboard-status-info,#3b82f6)]",
|
|
3854
|
+
bg: "bg-[var(--dashboard-status-info,#3b82f6)]/5",
|
|
3855
|
+
text: "text-[var(--dashboard-status-info,#3b82f6)]",
|
|
3856
|
+
icon: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5" })
|
|
3857
|
+
},
|
|
3858
|
+
success: {
|
|
3859
|
+
border: "border-[var(--dashboard-status-success,#10B981)]",
|
|
3860
|
+
bg: "bg-[var(--dashboard-status-success,#10B981)]/5",
|
|
3861
|
+
text: "text-[var(--dashboard-status-success,#10B981)]",
|
|
3862
|
+
icon: /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5" })
|
|
3863
|
+
},
|
|
3864
|
+
warning: {
|
|
3865
|
+
border: "border-[var(--dashboard-status-warning,#f59e0b)]",
|
|
3866
|
+
bg: "bg-[var(--dashboard-status-warning,#f59e0b)]/5",
|
|
3867
|
+
text: "text-[var(--dashboard-status-warning,#f59e0b)]",
|
|
3868
|
+
icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5" })
|
|
3869
|
+
},
|
|
3870
|
+
danger: {
|
|
3871
|
+
border: "border-[var(--dashboard-status-danger,#EF4444)]",
|
|
3872
|
+
bg: "bg-[var(--dashboard-status-danger,#EF4444)]/5",
|
|
3873
|
+
text: "text-[var(--dashboard-status-danger,#EF4444)]",
|
|
3874
|
+
icon: /* @__PURE__ */ jsx(AlertOctagon, { className: "h-5 w-5" })
|
|
3875
|
+
}
|
|
3876
|
+
};
|
|
3877
|
+
function Alert({ variant = "info", title, description, onClose, actions, icon, className }) {
|
|
3878
|
+
const config = variantConfig[variant];
|
|
3879
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3880
|
+
className: cn$2("rounded-lg border-l-4 p-4", config.border, config.bg, className),
|
|
3881
|
+
role: "alert",
|
|
3882
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
3883
|
+
className: "flex gap-3",
|
|
3884
|
+
children: [
|
|
3885
|
+
/* @__PURE__ */ jsx("div", {
|
|
3886
|
+
className: cn$2("flex-shrink-0 mt-0.5", config.text),
|
|
3887
|
+
children: icon || config.icon
|
|
3888
|
+
}),
|
|
3889
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3890
|
+
className: "flex-1 min-w-0",
|
|
3891
|
+
children: [
|
|
3892
|
+
title && /* @__PURE__ */ jsx("h3", {
|
|
3893
|
+
className: cn$2("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
|
|
3894
|
+
children: title
|
|
3895
|
+
}),
|
|
3896
|
+
description && /* @__PURE__ */ jsx("div", {
|
|
3897
|
+
className: cn$2("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
|
|
3898
|
+
children: description
|
|
3899
|
+
}),
|
|
3900
|
+
actions && /* @__PURE__ */ jsx("div", {
|
|
3901
|
+
className: "mt-3 flex gap-2",
|
|
3902
|
+
children: actions
|
|
3903
|
+
})
|
|
3904
|
+
]
|
|
3905
|
+
}),
|
|
3906
|
+
onClose && /* @__PURE__ */ jsx("button", {
|
|
3907
|
+
onClick: onClose,
|
|
3908
|
+
className: "flex-shrink-0 rounded-md p-1 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 transition-colors cursor-pointer",
|
|
3909
|
+
"aria-label": "Fechar alerta",
|
|
3910
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
3911
|
+
})
|
|
3912
|
+
]
|
|
3913
|
+
})
|
|
3914
|
+
});
|
|
3915
|
+
}
|
|
3916
|
+
|
|
3917
|
+
//#endregion
|
|
3918
|
+
//#region src/components/EmptyState/index.tsx
|
|
3919
|
+
const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
|
|
3920
|
+
function EmptyState({ icon, title, description, action, className }) {
|
|
3921
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3922
|
+
className: cn$1("flex flex-col items-center justify-center py-12 px-6 text-center", className),
|
|
3923
|
+
children: [
|
|
3924
|
+
/* @__PURE__ */ jsx("div", {
|
|
3925
|
+
className: "flex h-16 w-16 items-center justify-center rounded-full bg-[var(--dashboard-text-secondary,#6b7280)]/10 mb-4",
|
|
3926
|
+
children: icon || /* @__PURE__ */ jsx(Inbox, { className: "h-8 w-8 text-[var(--dashboard-text-secondary,#6b7280)]" })
|
|
3927
|
+
}),
|
|
3928
|
+
/* @__PURE__ */ jsx("h3", {
|
|
3929
|
+
className: "text-lg font-semibold text-[var(--dashboard-text-primary,#2d2d2d)]",
|
|
3930
|
+
children: title
|
|
3931
|
+
}),
|
|
3932
|
+
description && /* @__PURE__ */ jsx("p", {
|
|
3933
|
+
className: "mt-2 max-w-sm text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
|
|
3934
|
+
children: description
|
|
3935
|
+
}),
|
|
3936
|
+
action && /* @__PURE__ */ jsx("div", {
|
|
3937
|
+
className: "mt-6",
|
|
3938
|
+
children: action
|
|
3939
|
+
})
|
|
3940
|
+
]
|
|
3941
|
+
});
|
|
3942
|
+
}
|
|
3943
|
+
|
|
3944
|
+
//#endregion
|
|
3945
|
+
//#region src/components/StatusBadge/index.tsx
|
|
3946
|
+
const cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
3947
|
+
const defaultColorMap = {
|
|
3948
|
+
ACTIVE: "var(--dashboard-status-success,#10B981)",
|
|
3949
|
+
APPROVED: "var(--dashboard-status-success,#10B981)",
|
|
3950
|
+
COMPLETED: "var(--dashboard-status-success,#10B981)",
|
|
3951
|
+
DELIVERED: "var(--dashboard-status-success,#10B981)",
|
|
3952
|
+
SUCCESS: "var(--dashboard-status-success,#10B981)",
|
|
3953
|
+
PENDING: "var(--dashboard-status-warning,#f59e0b)",
|
|
3954
|
+
IN_REVIEW: "var(--dashboard-status-warning,#f59e0b)",
|
|
3955
|
+
AWAITING: "var(--dashboard-status-warning,#f59e0b)",
|
|
3956
|
+
DRAFT: "var(--dashboard-status-warning,#f59e0b)",
|
|
3957
|
+
PROCESSING: "var(--dashboard-status-info,#3b82f6)",
|
|
3958
|
+
IN_PROGRESS: "var(--dashboard-status-info,#3b82f6)",
|
|
3959
|
+
SENT: "var(--dashboard-status-info,#3b82f6)",
|
|
3960
|
+
QUOTED: "var(--dashboard-status-info,#3b82f6)",
|
|
3961
|
+
CANCELLED: "var(--dashboard-status-danger,#EF4444)",
|
|
3962
|
+
REJECTED: "var(--dashboard-status-danger,#EF4444)",
|
|
3963
|
+
EXPIRED: "var(--dashboard-status-danger,#EF4444)",
|
|
3964
|
+
ERROR: "var(--dashboard-status-danger,#EF4444)",
|
|
3965
|
+
INACTIVE: "var(--dashboard-text-secondary,#6b7280)",
|
|
3966
|
+
ARCHIVED: "var(--dashboard-text-secondary,#6b7280)"
|
|
3967
|
+
};
|
|
3968
|
+
const sizeClasses = {
|
|
3969
|
+
sm: "px-2 py-0.5 text-xs",
|
|
3970
|
+
md: "px-2.5 py-1 text-xs",
|
|
3971
|
+
lg: "px-3 py-1 text-sm"
|
|
3972
|
+
};
|
|
3973
|
+
const dotSizeClasses = {
|
|
3974
|
+
sm: "h-1.5 w-1.5",
|
|
3975
|
+
md: "h-2 w-2",
|
|
3976
|
+
lg: "h-2.5 w-2.5"
|
|
3977
|
+
};
|
|
3978
|
+
function formatLabel(status) {
|
|
3979
|
+
return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
3980
|
+
}
|
|
3981
|
+
function StatusBadge({ status, colorMap, size = "md", label, dot = true, className }) {
|
|
3982
|
+
const color = {
|
|
3983
|
+
...defaultColorMap,
|
|
3984
|
+
...colorMap
|
|
3985
|
+
}[status.toUpperCase().replace(/[\s-]/g, "_")] || "var(--dashboard-text-secondary,#6b7280)";
|
|
3986
|
+
const displayLabel = label || formatLabel(status);
|
|
3987
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
3988
|
+
className: cn("inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap", sizeClasses[size], className),
|
|
3989
|
+
style: {
|
|
3990
|
+
color,
|
|
3991
|
+
backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`
|
|
3992
|
+
},
|
|
3993
|
+
children: [dot && /* @__PURE__ */ jsx("span", {
|
|
3994
|
+
className: cn("rounded-full flex-shrink-0", dotSizeClasses[size]),
|
|
3995
|
+
style: { backgroundColor: color }
|
|
3996
|
+
}), displayLabel]
|
|
3997
|
+
});
|
|
3998
|
+
}
|
|
3999
|
+
|
|
2687
4000
|
//#endregion
|
|
2688
4001
|
//#region src/config/defaults.ts
|
|
2689
4002
|
const defaultConfig = {
|
|
2690
4003
|
name: "Dashboard",
|
|
2691
4004
|
colors: {
|
|
2692
|
-
primary: "#
|
|
2693
|
-
secondary: "#
|
|
2694
|
-
background: "#
|
|
4005
|
+
primary: "#2563EB",
|
|
4006
|
+
secondary: "#F1F5F9",
|
|
4007
|
+
background: "#F8FAFC",
|
|
2695
4008
|
surface: "#FFFFFF",
|
|
2696
|
-
textPrimary: "#
|
|
2697
|
-
textSecondary: "#
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
4009
|
+
textPrimary: "#0F172A",
|
|
4010
|
+
textSecondary: "#64748B",
|
|
4011
|
+
sidebarBg: "#0F172A",
|
|
4012
|
+
sidebarBorder: "#1E293B",
|
|
4013
|
+
sidebarText: "#CBD5E1",
|
|
4014
|
+
sidebarActiveText: "#FFFFFF",
|
|
4015
|
+
statusSuccess: "#059669",
|
|
4016
|
+
statusDanger: "#DC2626",
|
|
4017
|
+
statusWarning: "#D97706",
|
|
4018
|
+
statusInfo: "#2563EB",
|
|
4019
|
+
statusNeutral: "#64748B"
|
|
2703
4020
|
},
|
|
2704
4021
|
components: {
|
|
2705
4022
|
modal: {
|
|
@@ -2871,7 +4188,7 @@ function NotificationsProvider({ children }) {
|
|
|
2871
4188
|
clearNotifications
|
|
2872
4189
|
},
|
|
2873
4190
|
children: [children, notifications.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
2874
|
-
className: "fixed w-full max-w-[400px] px-4 z-
|
|
4191
|
+
className: "fixed w-full max-w-[400px] px-4 z-[10002] top-4 left-1/2 -translate-x-1/2 sm:top-5 sm:right-4 sm:left-auto sm:translate-x-0 flex flex-col gap-2",
|
|
2875
4192
|
children: notifications.map((notification) => /* @__PURE__ */ jsx(Toast, {
|
|
2876
4193
|
title: notification.title,
|
|
2877
4194
|
subtitle: notification.subtitle,
|
|
@@ -2895,6 +4212,10 @@ function CSSVarsInjector({ config }) {
|
|
|
2895
4212
|
root.style.setProperty("--dashboard-surface", colors.surface);
|
|
2896
4213
|
root.style.setProperty("--dashboard-text-primary", colors.textPrimary);
|
|
2897
4214
|
root.style.setProperty("--dashboard-text-secondary", colors.textSecondary);
|
|
4215
|
+
root.style.setProperty("--dashboard-sidebar-bg", colors.sidebarBg);
|
|
4216
|
+
root.style.setProperty("--dashboard-sidebar-border", colors.sidebarBorder);
|
|
4217
|
+
root.style.setProperty("--dashboard-sidebar-text", colors.sidebarText);
|
|
4218
|
+
root.style.setProperty("--dashboard-sidebar-active-text", colors.sidebarActiveText);
|
|
2898
4219
|
root.style.setProperty("--dashboard-status-success", colors.statusSuccess);
|
|
2899
4220
|
root.style.setProperty("--dashboard-status-danger", colors.statusDanger);
|
|
2900
4221
|
root.style.setProperty("--dashboard-status-warning", colors.statusWarning);
|
|
@@ -2907,6 +4228,10 @@ function CSSVarsInjector({ config }) {
|
|
|
2907
4228
|
root.style.removeProperty("--dashboard-surface");
|
|
2908
4229
|
root.style.removeProperty("--dashboard-text-primary");
|
|
2909
4230
|
root.style.removeProperty("--dashboard-text-secondary");
|
|
4231
|
+
root.style.removeProperty("--dashboard-sidebar-bg");
|
|
4232
|
+
root.style.removeProperty("--dashboard-sidebar-border");
|
|
4233
|
+
root.style.removeProperty("--dashboard-sidebar-text");
|
|
4234
|
+
root.style.removeProperty("--dashboard-sidebar-active-text");
|
|
2910
4235
|
root.style.removeProperty("--dashboard-status-success");
|
|
2911
4236
|
root.style.removeProperty("--dashboard-status-danger");
|
|
2912
4237
|
root.style.removeProperty("--dashboard-status-warning");
|
|
@@ -2925,5 +4250,5 @@ function DashboardProvider({ config: configOverrides, children }) {
|
|
|
2925
4250
|
}
|
|
2926
4251
|
|
|
2927
4252
|
//#endregion
|
|
2928
|
-
export { AuthLayout, BadgeStatus, Button, Card, Checkbox, CodeInput, ComparisonLineChart, DashboardProvider, DateRangePicker, Dropdown, FilterBar, FormField, HorizontalBarChart, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Table, TableBody, TableEmpty, TableHeader, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, VerticalBarChart, createConfig, defaultConfig, useConfig, useLoading, useNotifications, useTheme };
|
|
4253
|
+
export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Card, Checkbox, CodeInput, Combobox, ComparisonLineChart, DashboardProvider, DataGrid, DateRangePicker, Dropdown, EmptyState, FileUpload, FilterBar, FormField, HorizontalBarChart, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, StatusBadge, Stepper, Table, TableBody, TableEmpty, TableHeader, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, createColumnHelper, createConfig, defaultConfig, useConfig, useLoading, useNotifications, useTheme };
|
|
2929
4254
|
//# sourceMappingURL=index.mjs.map
|