@algorithm-shift/design-system 1.2.71 → 1.2.72
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/dist/index.css +118 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +10 -5
- package/dist/index.d.ts +10 -5
- package/dist/index.js +400 -162
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +396 -158
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -28986,8 +28986,126 @@ var Pagination_default = CustomPagination;
|
|
|
28986
28986
|
|
|
28987
28987
|
// src/components/Navigation/Tabs/Tabs.tsx
|
|
28988
28988
|
var import_link5 = __toESM(require("next/link"));
|
|
28989
|
+
var import_navigation3 = require("next/navigation");
|
|
28990
|
+
|
|
28991
|
+
// src/components/ui/dialog.tsx
|
|
28992
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
28989
28993
|
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
28990
|
-
|
|
28994
|
+
function Dialog({
|
|
28995
|
+
...props
|
|
28996
|
+
}) {
|
|
28997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
28998
|
+
}
|
|
28999
|
+
function DialogPortal({
|
|
29000
|
+
...props
|
|
29001
|
+
}) {
|
|
29002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
29003
|
+
}
|
|
29004
|
+
function DialogOverlay({
|
|
29005
|
+
className,
|
|
29006
|
+
...props
|
|
29007
|
+
}) {
|
|
29008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
29009
|
+
DialogPrimitive.Overlay,
|
|
29010
|
+
{
|
|
29011
|
+
"data-slot": "dialog-overlay",
|
|
29012
|
+
className: cn(
|
|
29013
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[60] bg-black/50",
|
|
29014
|
+
className
|
|
29015
|
+
),
|
|
29016
|
+
...props
|
|
29017
|
+
}
|
|
29018
|
+
);
|
|
29019
|
+
}
|
|
29020
|
+
function DialogContent({
|
|
29021
|
+
className,
|
|
29022
|
+
children,
|
|
29023
|
+
showCloseButton = true,
|
|
29024
|
+
...props
|
|
29025
|
+
}) {
|
|
29026
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
29027
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogOverlay, {}),
|
|
29028
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
29029
|
+
DialogPrimitive.Content,
|
|
29030
|
+
{
|
|
29031
|
+
"data-slot": "dialog-content",
|
|
29032
|
+
className: cn(
|
|
29033
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
29034
|
+
className
|
|
29035
|
+
),
|
|
29036
|
+
...props,
|
|
29037
|
+
children: [
|
|
29038
|
+
children,
|
|
29039
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
29040
|
+
DialogPrimitive.Close,
|
|
29041
|
+
{
|
|
29042
|
+
"data-slot": "dialog-close",
|
|
29043
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
29044
|
+
children: [
|
|
29045
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(X, {}),
|
|
29046
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sr-only", children: "Close" })
|
|
29047
|
+
]
|
|
29048
|
+
}
|
|
29049
|
+
)
|
|
29050
|
+
]
|
|
29051
|
+
}
|
|
29052
|
+
)
|
|
29053
|
+
] });
|
|
29054
|
+
}
|
|
29055
|
+
function DialogHeader({ className, ...props }) {
|
|
29056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
29057
|
+
"div",
|
|
29058
|
+
{
|
|
29059
|
+
"data-slot": "dialog-header",
|
|
29060
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
29061
|
+
...props
|
|
29062
|
+
}
|
|
29063
|
+
);
|
|
29064
|
+
}
|
|
29065
|
+
function DialogFooter({ className, ...props }) {
|
|
29066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
29067
|
+
"div",
|
|
29068
|
+
{
|
|
29069
|
+
"data-slot": "dialog-footer",
|
|
29070
|
+
className: cn(
|
|
29071
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
29072
|
+
className
|
|
29073
|
+
),
|
|
29074
|
+
...props
|
|
29075
|
+
}
|
|
29076
|
+
);
|
|
29077
|
+
}
|
|
29078
|
+
function DialogTitle({
|
|
29079
|
+
className,
|
|
29080
|
+
...props
|
|
29081
|
+
}) {
|
|
29082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
29083
|
+
DialogPrimitive.Title,
|
|
29084
|
+
{
|
|
29085
|
+
"data-slot": "dialog-title",
|
|
29086
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
29087
|
+
...props
|
|
29088
|
+
}
|
|
29089
|
+
);
|
|
29090
|
+
}
|
|
29091
|
+
function DialogDescription({
|
|
29092
|
+
className,
|
|
29093
|
+
...props
|
|
29094
|
+
}) {
|
|
29095
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
29096
|
+
DialogPrimitive.Description,
|
|
29097
|
+
{
|
|
29098
|
+
"data-slot": "dialog-description",
|
|
29099
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
29100
|
+
...props
|
|
29101
|
+
}
|
|
29102
|
+
);
|
|
29103
|
+
}
|
|
29104
|
+
|
|
29105
|
+
// src/components/Navigation/Tabs/Tabs.tsx
|
|
29106
|
+
var import_react26 = require("react");
|
|
29107
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
29108
|
+
var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = true }) => {
|
|
28991
29109
|
const rawTabs = Array.isArray(tabs) ? tabs : [];
|
|
28992
29110
|
const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
|
|
28993
29111
|
const activeClasses = "bg-white/10 text-white";
|
|
@@ -28996,26 +29114,45 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
|
|
|
28996
29114
|
if (!path) return false;
|
|
28997
29115
|
return pathname === path || path !== "/" && pathname?.startsWith(path);
|
|
28998
29116
|
};
|
|
29117
|
+
const router = (0, import_navigation3.useRouter)();
|
|
29118
|
+
const [showExitDialog, setShowExitDialog] = (0, import_react26.useState)(false);
|
|
29119
|
+
const [pendingUrl, setPendingUrl] = (0, import_react26.useState)(null);
|
|
29120
|
+
const handleBuilderExit = (0, import_react26.useCallback)(
|
|
29121
|
+
(e, url) => {
|
|
29122
|
+
if (isBuilder) {
|
|
29123
|
+
e.preventDefault();
|
|
29124
|
+
setPendingUrl(url);
|
|
29125
|
+
setShowExitDialog(true);
|
|
29126
|
+
}
|
|
29127
|
+
},
|
|
29128
|
+
[isBuilder]
|
|
29129
|
+
);
|
|
29130
|
+
const confirmExit = () => {
|
|
29131
|
+
if (pendingUrl) {
|
|
29132
|
+
setShowExitDialog(false);
|
|
29133
|
+
router.push(pendingUrl);
|
|
29134
|
+
}
|
|
29135
|
+
};
|
|
28999
29136
|
const renderDesktopTab = (tab, index) => {
|
|
29000
29137
|
const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
|
|
29001
29138
|
if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
|
|
29002
|
-
return /* @__PURE__ */ (0,
|
|
29003
|
-
/* @__PURE__ */ (0,
|
|
29139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenu, { children: [
|
|
29140
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
|
|
29004
29141
|
tab.header,
|
|
29005
|
-
/* @__PURE__ */ (0,
|
|
29142
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
|
|
29006
29143
|
] }),
|
|
29007
|
-
/* @__PURE__ */ (0,
|
|
29144
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29008
29145
|
DropdownMenuContent,
|
|
29009
29146
|
{
|
|
29010
29147
|
align: "start",
|
|
29011
29148
|
sideOffset: 6,
|
|
29012
29149
|
className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
|
|
29013
|
-
children: tab.children.map((item) => /* @__PURE__ */ (0,
|
|
29150
|
+
children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29014
29151
|
DropdownMenuItem,
|
|
29015
29152
|
{
|
|
29016
29153
|
asChild: true,
|
|
29017
29154
|
className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
|
|
29018
|
-
children: /* @__PURE__ */ (0,
|
|
29155
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
|
|
29019
29156
|
},
|
|
29020
29157
|
item.id
|
|
29021
29158
|
))
|
|
@@ -29023,14 +29160,24 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
|
|
|
29023
29160
|
)
|
|
29024
29161
|
] }, index);
|
|
29025
29162
|
}
|
|
29026
|
-
return tab.url ? /* @__PURE__ */ (0,
|
|
29163
|
+
return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29164
|
+
import_link5.default,
|
|
29165
|
+
{
|
|
29166
|
+
href: tab.url,
|
|
29167
|
+
className: finalClasses,
|
|
29168
|
+
style: tab.style,
|
|
29169
|
+
onClick: (e) => handleBuilderExit(e, tab.url || "#"),
|
|
29170
|
+
children: tab.header
|
|
29171
|
+
},
|
|
29172
|
+
index
|
|
29173
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
|
|
29027
29174
|
};
|
|
29028
|
-
const renderMobileMenu = () => /* @__PURE__ */ (0,
|
|
29029
|
-
/* @__PURE__ */ (0,
|
|
29030
|
-
/* @__PURE__ */ (0,
|
|
29175
|
+
const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenu, { children: [
|
|
29176
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
|
|
29177
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Menu, { className: "h-4 w-4" }),
|
|
29031
29178
|
"Menu"
|
|
29032
29179
|
] }),
|
|
29033
|
-
/* @__PURE__ */ (0,
|
|
29180
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29034
29181
|
DropdownMenuContent,
|
|
29035
29182
|
{
|
|
29036
29183
|
align: "start",
|
|
@@ -29039,25 +29186,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
|
|
|
29039
29186
|
children: rawTabs.map((tab, i) => {
|
|
29040
29187
|
const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
|
|
29041
29188
|
if (hasChildren) {
|
|
29042
|
-
return /* @__PURE__ */ (0,
|
|
29043
|
-
/* @__PURE__ */ (0,
|
|
29044
|
-
/* @__PURE__ */ (0,
|
|
29189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuSub, { children: [
|
|
29190
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
|
|
29191
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29045
29192
|
DropdownMenuItem,
|
|
29046
29193
|
{
|
|
29047
29194
|
asChild: true,
|
|
29048
29195
|
className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
|
|
29049
|
-
children: /* @__PURE__ */ (0,
|
|
29196
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
|
|
29050
29197
|
},
|
|
29051
29198
|
item.id
|
|
29052
29199
|
)) })
|
|
29053
29200
|
] }, i);
|
|
29054
29201
|
}
|
|
29055
|
-
return /* @__PURE__ */ (0,
|
|
29202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
29056
29203
|
DropdownMenuItem,
|
|
29057
29204
|
{
|
|
29058
29205
|
asChild: true,
|
|
29059
29206
|
className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
|
|
29060
|
-
children: /* @__PURE__ */ (0,
|
|
29207
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
|
|
29061
29208
|
},
|
|
29062
29209
|
i
|
|
29063
29210
|
);
|
|
@@ -29067,55 +29214,84 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
|
|
|
29067
29214
|
] });
|
|
29068
29215
|
const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
|
|
29069
29216
|
const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
|
|
29070
|
-
return /* @__PURE__ */ (0,
|
|
29071
|
-
|
|
29072
|
-
|
|
29217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
29218
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className, style, children: [
|
|
29219
|
+
forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
|
|
29220
|
+
forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
|
|
29221
|
+
] }),
|
|
29222
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
|
|
29223
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogHeader, { children: [
|
|
29224
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DialogTitle, { children: "Exit Builder?" }),
|
|
29225
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
|
|
29226
|
+
] }),
|
|
29227
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogFooter, { children: [
|
|
29228
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
|
|
29229
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
|
|
29230
|
+
] })
|
|
29231
|
+
] }) })
|
|
29073
29232
|
] });
|
|
29074
29233
|
};
|
|
29075
29234
|
var Tabs_default = Tabs;
|
|
29076
29235
|
|
|
29077
29236
|
// src/components/Navigation/Stages/Stages.tsx
|
|
29078
|
-
var
|
|
29079
|
-
var
|
|
29080
|
-
var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
|
|
29081
|
-
return /* @__PURE__ */ (0,
|
|
29082
|
-
/* @__PURE__ */ (0,
|
|
29083
|
-
/* @__PURE__ */ (0,
|
|
29084
|
-
/* @__PURE__ */ (0,
|
|
29237
|
+
var import_react27 = __toESM(require("react"));
|
|
29238
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
29239
|
+
var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange }) => {
|
|
29240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
|
|
29241
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
|
|
29242
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react27.default.Fragment, { children: [
|
|
29243
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
29085
29244
|
"button",
|
|
29086
29245
|
{
|
|
29087
29246
|
className: `min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap ${stage.isActive ? "bg-[#034486] text-white shadow-md" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
|
|
29247
|
+
onClick: () => {
|
|
29248
|
+
if (onStageChange) {
|
|
29249
|
+
onStageChange(stage.id);
|
|
29250
|
+
}
|
|
29251
|
+
},
|
|
29088
29252
|
children: stage.header
|
|
29089
29253
|
}
|
|
29090
29254
|
),
|
|
29091
|
-
index < stages.length - 1 && /* @__PURE__ */ (0,
|
|
29255
|
+
index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
|
|
29092
29256
|
] }, stage.id)) }),
|
|
29093
|
-
isShowBtn && /* @__PURE__ */ (0,
|
|
29257
|
+
isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
29258
|
+
"button",
|
|
29259
|
+
{
|
|
29260
|
+
className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
|
|
29261
|
+
onClick: () => {
|
|
29262
|
+
const activeStage = stages?.find((stage) => stage.isActive);
|
|
29263
|
+
if (activeStage && onStageChange) {
|
|
29264
|
+
onStageChange(activeStage.id);
|
|
29265
|
+
}
|
|
29266
|
+
},
|
|
29267
|
+
children: buttonText
|
|
29268
|
+
}
|
|
29269
|
+
) })
|
|
29094
29270
|
] }) });
|
|
29095
29271
|
};
|
|
29096
29272
|
var Stages_default = StagesComponent;
|
|
29097
29273
|
|
|
29098
29274
|
// src/components/Navigation/Spacer/Spacer.tsx
|
|
29099
|
-
var
|
|
29275
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
29100
29276
|
var Spacer = ({ className, style }) => {
|
|
29101
|
-
return /* @__PURE__ */ (0,
|
|
29277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `${className}`, style });
|
|
29102
29278
|
};
|
|
29103
29279
|
var Spacer_default = Spacer;
|
|
29104
29280
|
|
|
29105
29281
|
// src/components/Navigation/Profile/Profile.tsx
|
|
29106
|
-
var
|
|
29282
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
29107
29283
|
|
|
29108
29284
|
// src/components/Navigation/Notification/Notification.tsx
|
|
29109
|
-
var
|
|
29285
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
29110
29286
|
|
|
29111
29287
|
// src/components/Navigation/Logo/Logo.tsx
|
|
29112
|
-
var
|
|
29288
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
29113
29289
|
|
|
29114
29290
|
// src/components/ui/avatar.tsx
|
|
29115
29291
|
var React9 = __toESM(require("react"));
|
|
29116
29292
|
var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
|
|
29117
|
-
var
|
|
29118
|
-
var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
29293
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
29294
|
+
var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29119
29295
|
AvatarPrimitive.Root,
|
|
29120
29296
|
{
|
|
29121
29297
|
ref,
|
|
@@ -29127,7 +29303,7 @@ var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
29127
29303
|
}
|
|
29128
29304
|
));
|
|
29129
29305
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
29130
|
-
var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
29306
|
+
var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29131
29307
|
AvatarPrimitive.Image,
|
|
29132
29308
|
{
|
|
29133
29309
|
ref,
|
|
@@ -29136,7 +29312,7 @@ var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
29136
29312
|
}
|
|
29137
29313
|
));
|
|
29138
29314
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
29139
|
-
var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
29315
|
+
var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29140
29316
|
AvatarPrimitive.Fallback,
|
|
29141
29317
|
{
|
|
29142
29318
|
ref,
|
|
@@ -29152,8 +29328,10 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
|
|
29152
29328
|
// src/components/Navigation/Navbar/Navbar.tsx
|
|
29153
29329
|
var import_link6 = __toESM(require("next/link"));
|
|
29154
29330
|
var import_image3 = __toESM(require("next/image"));
|
|
29331
|
+
var import_navigation4 = require("next/navigation");
|
|
29155
29332
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
29156
|
-
var
|
|
29333
|
+
var import_react28 = require("react");
|
|
29334
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
29157
29335
|
function Navbar({
|
|
29158
29336
|
style,
|
|
29159
29337
|
badgeType,
|
|
@@ -29166,111 +29344,165 @@ function Navbar({
|
|
|
29166
29344
|
canvasMode = "desktop",
|
|
29167
29345
|
list = [],
|
|
29168
29346
|
profileMenu = [],
|
|
29169
|
-
userName = "Guest User"
|
|
29347
|
+
userName = "Guest User",
|
|
29348
|
+
isBuilder = true,
|
|
29349
|
+
source,
|
|
29350
|
+
navList
|
|
29170
29351
|
}) {
|
|
29171
29352
|
const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
|
|
29172
|
-
|
|
29173
|
-
|
|
29174
|
-
|
|
29175
|
-
|
|
29353
|
+
const router = (0, import_navigation4.useRouter)();
|
|
29354
|
+
const [showExitDialog, setShowExitDialog] = (0, import_react28.useState)(false);
|
|
29355
|
+
const [pendingUrl, setPendingUrl] = (0, import_react28.useState)(null);
|
|
29356
|
+
const handleBuilderExit = (0, import_react28.useCallback)(
|
|
29357
|
+
(e, url) => {
|
|
29358
|
+
if (isBuilder) {
|
|
29359
|
+
e.preventDefault();
|
|
29360
|
+
setPendingUrl(url);
|
|
29361
|
+
setShowExitDialog(true);
|
|
29362
|
+
}
|
|
29363
|
+
},
|
|
29364
|
+
[isBuilder]
|
|
29365
|
+
);
|
|
29366
|
+
const confirmExit = () => {
|
|
29367
|
+
if (pendingUrl) {
|
|
29368
|
+
setShowExitDialog(false);
|
|
29369
|
+
router.push(pendingUrl);
|
|
29370
|
+
}
|
|
29371
|
+
};
|
|
29372
|
+
const formatedMenu = (0, import_react28.useMemo)(() => {
|
|
29373
|
+
if (source === "state" && navList && navList.length) {
|
|
29374
|
+
return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
|
|
29375
|
+
}
|
|
29376
|
+
return list || [];
|
|
29377
|
+
}, [source, navList]);
|
|
29378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
|
|
29379
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29380
|
+
"nav",
|
|
29176
29381
|
{
|
|
29177
|
-
|
|
29178
|
-
|
|
29179
|
-
children:
|
|
29180
|
-
|
|
29181
|
-
|
|
29182
|
-
)) }),
|
|
29183
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-3", children: [
|
|
29184
|
-
!isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
|
|
29185
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
|
|
29186
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
|
|
29187
|
-
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29188
|
-
Button,
|
|
29189
|
-
{
|
|
29190
|
-
variant: "ghost",
|
|
29191
|
-
size: "icon",
|
|
29192
|
-
className: "border border-gray-400",
|
|
29193
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "h-5 w-5 text-gray-400" })
|
|
29194
|
-
}
|
|
29195
|
-
),
|
|
29196
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
|
|
29197
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
|
|
29198
|
-
badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
|
|
29199
|
-
] }),
|
|
29200
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenu, { children: [
|
|
29201
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-2", children: [
|
|
29202
|
-
!isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
|
|
29203
|
-
!isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
|
|
29204
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29205
|
-
AvatarImage,
|
|
29206
|
-
{
|
|
29207
|
-
src: "/images/appbuilder/toolset/profile.svg",
|
|
29208
|
-
alt: "Profile"
|
|
29209
|
-
}
|
|
29210
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
|
|
29211
|
-
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29212
|
-
Button,
|
|
29213
|
-
{
|
|
29214
|
-
variant: "ghost",
|
|
29215
|
-
size: "icon",
|
|
29216
|
-
className: "text-gray-900 md:hidden dark:invert",
|
|
29217
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
|
|
29218
|
-
}
|
|
29219
|
-
)
|
|
29220
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
29221
|
-
Button,
|
|
29382
|
+
className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm",
|
|
29383
|
+
style,
|
|
29384
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
|
|
29385
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29386
|
+
import_link6.default,
|
|
29222
29387
|
{
|
|
29223
|
-
|
|
29224
|
-
|
|
29225
|
-
className: "
|
|
29226
|
-
children: /* @__PURE__ */ (0,
|
|
29388
|
+
href: "/",
|
|
29389
|
+
onClick: (e) => handleBuilderExit(e, "/"),
|
|
29390
|
+
className: "flex items-center space-x-2",
|
|
29391
|
+
children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
|
|
29227
29392
|
}
|
|
29228
|
-
)
|
|
29229
|
-
|
|
29230
|
-
|
|
29231
|
-
|
|
29232
|
-
|
|
29233
|
-
|
|
29234
|
-
|
|
29393
|
+
),
|
|
29394
|
+
!isMobileView && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29395
|
+
import_link6.default,
|
|
29396
|
+
{
|
|
29397
|
+
href: item.url || "#",
|
|
29398
|
+
onClick: (e) => handleBuilderExit(e, item.url),
|
|
29399
|
+
className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
|
|
29400
|
+
children: item.header
|
|
29401
|
+
},
|
|
29402
|
+
item.id
|
|
29403
|
+
)) }),
|
|
29404
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center space-x-3", children: [
|
|
29405
|
+
!isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
|
|
29406
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
|
|
29407
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
|
|
29408
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Search, { className: "h-5 w-5 text-gray-400" }) }),
|
|
29409
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
|
|
29410
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
|
|
29411
|
+
badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
|
|
29412
|
+
] }),
|
|
29413
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenu, { children: [
|
|
29414
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center space-x-2", children: [
|
|
29415
|
+
!isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
|
|
29416
|
+
!isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
|
|
29417
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29418
|
+
AvatarImage,
|
|
29419
|
+
{
|
|
29420
|
+
src: "/images/appbuilder/toolset/profile.svg",
|
|
29421
|
+
alt: "Profile"
|
|
29422
|
+
}
|
|
29423
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
|
|
29424
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29425
|
+
Button,
|
|
29426
|
+
{
|
|
29427
|
+
variant: "ghost",
|
|
29428
|
+
size: "icon",
|
|
29429
|
+
className: "text-gray-900 md:hidden dark:invert",
|
|
29430
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { className: "h-6 w-6" })
|
|
29431
|
+
}
|
|
29432
|
+
)
|
|
29433
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { className: "h-6 w-6" }) })
|
|
29434
|
+
] }) }),
|
|
29435
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
|
|
29436
|
+
profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29437
|
+
import_link6.default,
|
|
29438
|
+
{
|
|
29439
|
+
href: item.url || "#",
|
|
29440
|
+
onClick: (e) => handleBuilderExit(e, item.url),
|
|
29441
|
+
children: item.header
|
|
29442
|
+
}
|
|
29443
|
+
) }, item.id)) }),
|
|
29444
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "md:hidden", children: [
|
|
29445
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
|
|
29446
|
+
formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
29447
|
+
import_link6.default,
|
|
29448
|
+
{
|
|
29449
|
+
href: item.url || "#",
|
|
29450
|
+
onClick: (e) => handleBuilderExit(e, item.url),
|
|
29451
|
+
children: item.header
|
|
29452
|
+
}
|
|
29453
|
+
) }, item.id)) })
|
|
29454
|
+
] })
|
|
29455
|
+
] })
|
|
29456
|
+
] })
|
|
29235
29457
|
] })
|
|
29236
29458
|
] })
|
|
29459
|
+
}
|
|
29460
|
+
),
|
|
29461
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
|
|
29462
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogHeader, { children: [
|
|
29463
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogTitle, { children: "Exit Builder?" }),
|
|
29464
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
|
|
29465
|
+
] }),
|
|
29466
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogFooter, { children: [
|
|
29467
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
|
|
29468
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
|
|
29237
29469
|
] })
|
|
29238
|
-
] })
|
|
29239
|
-
] })
|
|
29470
|
+
] }) })
|
|
29471
|
+
] });
|
|
29240
29472
|
}
|
|
29241
29473
|
|
|
29242
29474
|
// src/components/Chart/BarChart.tsx
|
|
29243
|
-
var
|
|
29475
|
+
var import_react29 = __toESM(require("react"));
|
|
29244
29476
|
var import_recharts = require("recharts");
|
|
29245
|
-
var
|
|
29477
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
29246
29478
|
var ChartComponent = ({ className, style, loading, ...props }) => {
|
|
29247
29479
|
const data = Array.isArray(props.data) ? props.data : [];
|
|
29248
29480
|
const chartType = props.chartType || "bar";
|
|
29249
29481
|
const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
|
|
29250
29482
|
if (loading || data.length === 0) {
|
|
29251
|
-
return /* @__PURE__ */ (0,
|
|
29483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
29252
29484
|
"div",
|
|
29253
29485
|
{
|
|
29254
29486
|
className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
|
|
29255
29487
|
style,
|
|
29256
|
-
children: /* @__PURE__ */ (0,
|
|
29488
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
|
|
29257
29489
|
}
|
|
29258
29490
|
);
|
|
29259
29491
|
}
|
|
29260
|
-
return /* @__PURE__ */ (0,
|
|
29261
|
-
/* @__PURE__ */ (0,
|
|
29262
|
-
/* @__PURE__ */ (0,
|
|
29263
|
-
/* @__PURE__ */ (0,
|
|
29264
|
-
/* @__PURE__ */ (0,
|
|
29265
|
-
/* @__PURE__ */ (0,
|
|
29266
|
-
/* @__PURE__ */ (0,
|
|
29492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts.BarChart, { data, title: "Leads", desc: "content", children: [
|
|
29493
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
|
|
29494
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.XAxis, { dataKey: "name" }),
|
|
29495
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.YAxis, {}),
|
|
29496
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
|
|
29497
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
|
|
29498
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
29267
29499
|
import_recharts.Bar,
|
|
29268
29500
|
{
|
|
29269
29501
|
dataKey: "value",
|
|
29270
29502
|
fill: "#00695C",
|
|
29271
29503
|
radius: [6, 6, 0, 0],
|
|
29272
29504
|
isAnimationActive: false,
|
|
29273
|
-
children: data.map((entry, index) => /* @__PURE__ */ (0,
|
|
29505
|
+
children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
29274
29506
|
"rect",
|
|
29275
29507
|
{
|
|
29276
29508
|
fill: entry.color || "#00695C"
|
|
@@ -29279,16 +29511,16 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
|
|
|
29279
29511
|
))
|
|
29280
29512
|
}
|
|
29281
29513
|
)
|
|
29282
|
-
] }) : /* @__PURE__ */ (0,
|
|
29283
|
-
/* @__PURE__ */ (0,
|
|
29284
|
-
/* @__PURE__ */ (0,
|
|
29285
|
-
/* @__PURE__ */ (0,
|
|
29514
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts.AreaChart, { data, children: [
|
|
29515
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
29516
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
|
|
29517
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
|
|
29286
29518
|
] }) }),
|
|
29287
|
-
/* @__PURE__ */ (0,
|
|
29288
|
-
/* @__PURE__ */ (0,
|
|
29289
|
-
/* @__PURE__ */ (0,
|
|
29290
|
-
/* @__PURE__ */ (0,
|
|
29291
|
-
/* @__PURE__ */ (0,
|
|
29519
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
|
|
29520
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.XAxis, { dataKey: "name" }),
|
|
29521
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.YAxis, {}),
|
|
29522
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
|
|
29523
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
29292
29524
|
import_recharts.Area,
|
|
29293
29525
|
{
|
|
29294
29526
|
type: "monotone",
|
|
@@ -29301,12 +29533,12 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
|
|
|
29301
29533
|
)
|
|
29302
29534
|
] }) }) });
|
|
29303
29535
|
};
|
|
29304
|
-
var BarChart_default =
|
|
29536
|
+
var BarChart_default = import_react29.default.memo(ChartComponent);
|
|
29305
29537
|
|
|
29306
29538
|
// src/components/Chart/PieChart.tsx
|
|
29307
|
-
var
|
|
29539
|
+
var import_react30 = __toESM(require("react"));
|
|
29308
29540
|
var import_recharts2 = require("recharts");
|
|
29309
|
-
var
|
|
29541
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
29310
29542
|
var getRandomColor = () => {
|
|
29311
29543
|
const palette = [
|
|
29312
29544
|
"#2563eb",
|
|
@@ -29326,51 +29558,57 @@ var DonutChart = ({ className, style, loading, ...props }) => {
|
|
|
29326
29558
|
const showLegends = props.showLegends ?? true;
|
|
29327
29559
|
const labelType = props.labelType || "inside";
|
|
29328
29560
|
const canvasMode = props.canvasMode;
|
|
29329
|
-
const data = (0,
|
|
29561
|
+
const data = (0, import_react30.useMemo)(() => {
|
|
29330
29562
|
if (!Array.isArray(props.data)) return [];
|
|
29331
29563
|
return props.data.map((item) => ({ ...item, color: getRandomColor() }));
|
|
29332
29564
|
}, [props.data]);
|
|
29333
|
-
const total = (0,
|
|
29565
|
+
const total = (0, import_react30.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
|
|
29334
29566
|
const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
|
|
29335
|
-
const
|
|
29567
|
+
const [mounted, setMounted] = (0, import_react30.useState)(false);
|
|
29568
|
+
(0, import_react30.useEffect)(() => {
|
|
29569
|
+
const timeout = setTimeout(() => setMounted(true), 100);
|
|
29570
|
+
return () => clearTimeout(timeout);
|
|
29571
|
+
}, []);
|
|
29572
|
+
const renderLegends = (0, import_react30.useMemo)(() => {
|
|
29336
29573
|
if (!showLegends) return null;
|
|
29337
|
-
return /* @__PURE__ */ (0,
|
|
29574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
29338
29575
|
"div",
|
|
29339
29576
|
{
|
|
29340
29577
|
className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
|
|
29341
29578
|
children: [
|
|
29342
|
-
/* @__PURE__ */ (0,
|
|
29579
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
29343
29580
|
"span",
|
|
29344
29581
|
{
|
|
29345
29582
|
className: "inline-block w-[16px] h-[16px] rounded",
|
|
29346
29583
|
style: { backgroundColor: d.color }
|
|
29347
29584
|
}
|
|
29348
29585
|
),
|
|
29349
|
-
/* @__PURE__ */ (0,
|
|
29586
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
|
|
29350
29587
|
]
|
|
29351
29588
|
},
|
|
29352
29589
|
d.name
|
|
29353
29590
|
)) });
|
|
29354
29591
|
}, [data, showLegends]);
|
|
29592
|
+
if (!mounted) return null;
|
|
29355
29593
|
if (loading || data.length === 0) {
|
|
29356
|
-
return /* @__PURE__ */ (0,
|
|
29594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
29357
29595
|
"div",
|
|
29358
29596
|
{
|
|
29359
29597
|
className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
|
|
29360
29598
|
style,
|
|
29361
|
-
children: /* @__PURE__ */ (0,
|
|
29599
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
|
|
29362
29600
|
}
|
|
29363
29601
|
);
|
|
29364
29602
|
}
|
|
29365
|
-
return /* @__PURE__ */ (0,
|
|
29603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
29366
29604
|
"div",
|
|
29367
29605
|
{
|
|
29368
29606
|
className: `relative flex flex-col items-center ${className}`,
|
|
29369
29607
|
style,
|
|
29370
29608
|
children: [
|
|
29371
|
-
/* @__PURE__ */ (0,
|
|
29372
|
-
/* @__PURE__ */ (0,
|
|
29373
|
-
/* @__PURE__ */ (0,
|
|
29609
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
|
|
29610
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_recharts2.ResponsiveContainer, { width: "99%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_recharts2.PieChart, { children: [
|
|
29611
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
29374
29612
|
import_recharts2.Pie,
|
|
29375
29613
|
{
|
|
29376
29614
|
data,
|
|
@@ -29382,8 +29620,8 @@ var DonutChart = ({ className, style, loading, ...props }) => {
|
|
|
29382
29620
|
labelLine: false,
|
|
29383
29621
|
isAnimationActive: false,
|
|
29384
29622
|
children: [
|
|
29385
|
-
data.map((entry, index) => /* @__PURE__ */ (0,
|
|
29386
|
-
/* @__PURE__ */ (0,
|
|
29623
|
+
data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_recharts2.Cell, { fill: entry.color }, `cell-${index}`)),
|
|
29624
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
29387
29625
|
import_recharts2.LabelList,
|
|
29388
29626
|
{
|
|
29389
29627
|
dataKey: "value",
|
|
@@ -29396,14 +29634,14 @@ var DonutChart = ({ className, style, loading, ...props }) => {
|
|
|
29396
29634
|
]
|
|
29397
29635
|
}
|
|
29398
29636
|
),
|
|
29399
|
-
/* @__PURE__ */ (0,
|
|
29637
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
29400
29638
|
import_recharts2.Tooltip,
|
|
29401
29639
|
{
|
|
29402
29640
|
formatter: (value, name) => [`${value}k`, name]
|
|
29403
29641
|
}
|
|
29404
29642
|
)
|
|
29405
29643
|
] }) }),
|
|
29406
|
-
/* @__PURE__ */ (0,
|
|
29644
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
29407
29645
|
"div",
|
|
29408
29646
|
{
|
|
29409
29647
|
className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${forceMobile ? "text-2xl" : "text-4xl"} font-bold text-[#000]`,
|
|
@@ -29414,18 +29652,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
|
|
|
29414
29652
|
}
|
|
29415
29653
|
)
|
|
29416
29654
|
] }),
|
|
29417
|
-
/* @__PURE__ */ (0,
|
|
29655
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
|
|
29418
29656
|
]
|
|
29419
29657
|
}
|
|
29420
29658
|
);
|
|
29421
29659
|
};
|
|
29422
|
-
var PieChart_default =
|
|
29660
|
+
var PieChart_default = import_react30.default.memo(DonutChart);
|
|
29423
29661
|
|
|
29424
29662
|
// src/components/Blocks/EmailComposer.tsx
|
|
29425
|
-
var
|
|
29663
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
29426
29664
|
function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
|
|
29427
|
-
return /* @__PURE__ */ (0,
|
|
29428
|
-
/* @__PURE__ */ (0,
|
|
29665
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
|
|
29666
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29429
29667
|
"input",
|
|
29430
29668
|
{
|
|
29431
29669
|
type: "email",
|
|
@@ -29434,8 +29672,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29434
29672
|
required: true
|
|
29435
29673
|
}
|
|
29436
29674
|
) }),
|
|
29437
|
-
/* @__PURE__ */ (0,
|
|
29438
|
-
/* @__PURE__ */ (0,
|
|
29675
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
29676
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29439
29677
|
"input",
|
|
29440
29678
|
{
|
|
29441
29679
|
type: "email",
|
|
@@ -29446,7 +29684,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29446
29684
|
required: true
|
|
29447
29685
|
}
|
|
29448
29686
|
),
|
|
29449
|
-
!showCc && /* @__PURE__ */ (0,
|
|
29687
|
+
!showCc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29450
29688
|
"button",
|
|
29451
29689
|
{
|
|
29452
29690
|
onClick: () => setShowCc?.(true),
|
|
@@ -29454,7 +29692,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29454
29692
|
children: "Cc"
|
|
29455
29693
|
}
|
|
29456
29694
|
),
|
|
29457
|
-
!showBcc && /* @__PURE__ */ (0,
|
|
29695
|
+
!showBcc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29458
29696
|
"button",
|
|
29459
29697
|
{
|
|
29460
29698
|
onClick: () => setShowBcc?.(true),
|
|
@@ -29463,7 +29701,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29463
29701
|
}
|
|
29464
29702
|
)
|
|
29465
29703
|
] }) }),
|
|
29466
|
-
showCc && /* @__PURE__ */ (0,
|
|
29704
|
+
showCc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29467
29705
|
"input",
|
|
29468
29706
|
{
|
|
29469
29707
|
type: "text",
|
|
@@ -29473,7 +29711,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29473
29711
|
className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
|
|
29474
29712
|
}
|
|
29475
29713
|
) }),
|
|
29476
|
-
showBcc && /* @__PURE__ */ (0,
|
|
29714
|
+
showBcc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29477
29715
|
"input",
|
|
29478
29716
|
{
|
|
29479
29717
|
type: "text",
|
|
@@ -29483,7 +29721,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29483
29721
|
className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
|
|
29484
29722
|
}
|
|
29485
29723
|
) }),
|
|
29486
|
-
/* @__PURE__ */ (0,
|
|
29724
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
29487
29725
|
"input",
|
|
29488
29726
|
{
|
|
29489
29727
|
type: "text",
|
|
@@ -29493,11 +29731,11 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
|
|
|
29493
29731
|
className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
|
|
29494
29732
|
}
|
|
29495
29733
|
) }),
|
|
29496
|
-
/* @__PURE__ */ (0,
|
|
29497
|
-
/* @__PURE__ */ (0,
|
|
29498
|
-
/* @__PURE__ */ (0,
|
|
29499
|
-
/* @__PURE__ */ (0,
|
|
29500
|
-
/* @__PURE__ */ (0,
|
|
29734
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(MyEditor, { value: body, onChange: setBody }) }),
|
|
29735
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex justify-end gap-2", children: [
|
|
29736
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
|
|
29737
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
|
|
29738
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
|
|
29501
29739
|
] })
|
|
29502
29740
|
] }) });
|
|
29503
29741
|
}
|
|
@@ -29542,10 +29780,10 @@ function showSonnerToast({
|
|
|
29542
29780
|
// src/components/ui/sonner.tsx
|
|
29543
29781
|
var import_next_themes = require("next-themes");
|
|
29544
29782
|
var import_sonner2 = require("sonner");
|
|
29545
|
-
var
|
|
29783
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
29546
29784
|
var Toaster = ({ ...props }) => {
|
|
29547
29785
|
const { theme = "system" } = (0, import_next_themes.useTheme)();
|
|
29548
|
-
return /* @__PURE__ */ (0,
|
|
29786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
29549
29787
|
import_sonner2.Toaster,
|
|
29550
29788
|
{
|
|
29551
29789
|
theme,
|