@solidxai/core-ui 0.1.13-beta.2 → 0.1.13-beta.3

package/dist/components/core/list/widgets/SolidSummarizeListHeaderActionMqMessages.tsx

@@ -0,0 +1,185 @@
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+import { useState } from "react";
+import { solidGet } from "../../../../http/solidHttp";
+import { SolidButton } from "../../../shad-cn-ui";
+import { useDispatch } from "react-redux";
+import { closePopup } from "../../../../redux/features/popupSlice";
+import { X } from "lucide-react";
+
+// Chart.js imports
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Tooltip,
+    Legend
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+const CHART_COLORS = [
+    "#3b82f6",
+    "#22c55e",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#14b8a6"
+];
+
+const getColor = (index: number) => CHART_COLORS[index % CHART_COLORS.length];
+
+// =========================
+// Pivot Transform
+// =========================
+const transformToPivot = (groupMeta: any[]) => {
+    const pivot: Record<string, Record<string, number>> = {};
+    const stageSet = new Set<string>();
+
+    groupMeta.forEach((item: any) => {
+        const groupValue = item.groupValue || "";
+        const count = item.id_count || 0;
+
+        const parts = groupValue.split("_");
+        const stage = parts.pop();
+        const broker = parts.join("_");
+
+        if (!broker || !stage) return;
+
+        stageSet.add(stage);
+        if (!pivot[broker]) pivot[broker] = {};
+        pivot[broker][stage] = count;
+    });
+
+    const stages = Array.from(stageSet);
+
+    Object.keys(pivot).forEach((broker) => {
+        stages.forEach((stage) => {
+            if (pivot[broker][stage] === undefined) {
+                pivot[broker][stage] = 0;
+            }
+        });
+    });
+
+    return { pivot, stages };
+};
+
+type PivotData = ReturnType<typeof transformToPivot>;
+
+// =========================
+// Chart Component
+// =========================
+const PivotChart = ({ data }: { data: PivotData }) => {
+    const { pivot, stages } = data;
+
+    const queues = Object.keys(pivot).sort((a, b) => {
+        const sum = (q: string) =>
+            stages.reduce((acc, s) => acc + (pivot[q]?.[s] || 0), 0);
+        return sum(b) - sum(a);
+    });
+
+    const chartData = {
+        labels: queues,
+        datasets: stages.map((stage, index) => ({
+            label: stage,
+            data: queues.map((q) => pivot[q]?.[stage] || 0),
+            backgroundColor: getColor(index)
+        }))
+    };
+
+    const options: any = {
+        responsive: true,
+        plugins: { legend: { position: "top" } },
+        scales: {
+            x: { stacked: true },
+            y: { stacked: true, beginAtZero: true }
+        }
+    };
+
+    return <Bar data={chartData} options={options} />;
+};
+
+// =========================
+// Widget
+// =========================
+export const SolidSummarizeListHeaderActionMqMessages = ({
+    solidListViewMetaData
+}: SolidListFieldWidgetProps) => {
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false);
+    const [pivotData, setPivotData] = useState<PivotData | null>(null);
+
+    const handleContinue = async () => {
+        setLoading(true);
+
+        const selectedRows = solidListViewMetaData?.selectedRows || [];
+
+        const filters = selectedRows
+            .map(
+                (row: any, index: number) =>
+                    `filters[$and][0][$or][${index}][id][$eq]=${row.id}`
+            )
+            .join("&");
+
+        const qs = [
+            "offset=0",
+            "limit=100",
+            "groupBy[0]=messageBroker",
+            "groupBy[1]=stage",
+            "aggregates[0]=id:count",
+            filters || null
+        ]
+            .filter(Boolean)
+            .join("&");
+
+        const res = await solidGet(`/mq-message?${qs}`);
+        setPivotData(transformToPivot(res?.data?.data?.groupMeta ?? []));
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <div className="solid-filter-dialog-head">
+                <div>
+                    <h3 className="solid-filter-dialog-title">MQ Message Summary</h3>
+                </div>
+                <button
+                    className="solid-radix-dialog-close"
+                    aria-label="Close"
+                    onClick={() => dispatch(closePopup())}
+                >
+                    <X size={16} />
+                </button>
+            </div>
+
+            <div className="solid-filter-dialog-sep" />
+
+            <div className="solid-filter-dialog-body">
+                <div style={{ textAlign: "center",marginBottom:"10px",marginTop:"10px" }}>
+
+                    <p style={{ textAlign: "center", fontSize: "13px", marginBottom: "0" }}>
+                        You can summarize based on selected records or the full dataset.
+                        <br />
+                        Click <strong>Continue</strong> to load the summary.
+                    </p>
+                    <SolidButton
+                        size="small"
+                        loading={loading}
+                        onClick={handleContinue}
+                    >
+                        Continue
+                    </SolidButton>
+
+                </div>
+                {pivotData && (
+                    <div style={{ marginTop: "20px" }}>
+                        <PivotChart data={pivotData} />
+                    </div>
+                )}
+            </div>
+
+
+        </div>
+    );
+};

package/dist/components/layout/DashboardHeader.d.ts

@@ -0,0 +1,3 @@
+declare const DashboardHeader: () => import("react/jsx-runtime").JSX.Element;
+export default DashboardHeader;
+//# sourceMappingURL=DashboardHeader.d.ts.map

package/dist/components/layout/DashboardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAuFpB,CAAA;AACD,eAAe,eAAe,CAAC"}

package/dist/components/layout/DashboardHeader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../shad-cn-ui/SolidIcon";
+var DashboardHeader = function () {
+    var _a = useState(false), menuOpen = _a[0], setMenuOpen = _a[1];
+    var items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Export',
+            icon: 'pi pi-upload'
+        }
+    ];
+    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidButton, { label: "New", size: "sm", type: "submit", className: "small-button" }), _jsxs(SolidPopover, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { type: "button", icon: "pi pi-cog", variant: "ghost", size: "sm", className: "ml-2" }) }), _jsx(SolidPopoverContent, { side: "bottom", align: "start", className: "solid-form-actions-popover", children: _jsx("div", { className: "solid-row-actions-menu", children: items.map(function (item) { return (_jsxs("button", { type: "button", className: "solid-row-action-button", onClick: function () { return setMenuOpen(false); }, children: [(function () { var m = parseSolidIconMeta(item.icon); return m ? _jsx(SolidIcon, { name: m.name, spin: m.spin, className: "solid-row-action-button-icon" }) : _jsx("i", { className: "".concat(item.icon, " solid-row-action-button-icon") }); })(), _jsx("span", { className: "solid-row-action-button-label", children: item.label })] }, item.label)); }) }) })] })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx(SolidIcon, { name: "si-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-user", className: "mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-inbox", className: "mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-cog", className: "mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-power-off", className: "mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
+};
+export default DashboardHeader;
+//# sourceMappingURL=DashboardHeader.js.map

package/dist/components/layout/DashboardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from \"../shad-cn-ui\";\nimport { SolidIcon, parseSolidIconMeta } from \"../shad-cn-ui/SolidIcon\";\n\nconst DashboardHeader = () => {\n\n    const [menuOpen, setMenuOpen] = useState(false);\n    const items = [\n        {\n            label: 'Refresh',\n            icon: 'pi pi-refresh'\n        },\n        {\n            label: 'Export',\n            icon: 'pi pi-upload'\n        }\n    ];\n\n    return (\n        <div className=\"flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static\" style={{ height: \"60px\" }}>\n            <div className=\"flex align-items-center\">\n                <SolidButton label=\"New\" size=\"sm\" type=\"submit\" className=\"small-button\" />\n                <SolidPopover open={menuOpen} onOpenChange={setMenuOpen}>\n                    <SolidPopoverTrigger asChild>\n                        <SolidButton\n                            type=\"button\"\n                            icon=\"pi pi-cog\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"ml-2\"\n                        />\n                    </SolidPopoverTrigger>\n                    <SolidPopoverContent side=\"bottom\" align=\"start\" className=\"solid-form-actions-popover\">\n                        <div className=\"solid-row-actions-menu\">\n                            {items.map((item) => (\n                                <button key={item.label} type=\"button\" className=\"solid-row-action-button\" onClick={() => setMenuOpen(false)}>\n                                    {(() => { const m = parseSolidIconMeta(item.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className=\"solid-row-action-button-icon\" /> : <i className={`${item.icon} solid-row-action-button-icon`} />; })()}\n                                    <span className=\"solid-row-action-button-label\">{item.label}</span>\n                                </button>\n                            ))}\n                        </div>\n                    </SolidPopoverContent>\n                </SolidPopover>\n            </div>\n            <div className=\"flex align-items-center\">\n                <div className=\"bgCircle\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-bell\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"bgCircle ml-3\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-envelope\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"topbar-profile\">\n                    <button className=\"topbar-profile-button p-link\" type=\"button\">\n                        <img alt=\"avatar\" src=\"/images/dashboard/Ellipse 1.svg\" />\n                        <span className=\"profile-details\">\n                            <span className=\"profile-name\">Gene Russell</span>\n                            <span className=\"profile-email\">ben95@example.com</span>\n                        </span>\n                        <SolidIcon name=\"si-angle-down\" />\n                    </button>\n                    <ul className=\"list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden\">\n                        <li>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-user\" className=\"mr-3\" />\n                                <span>Profile</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-inbox\" className=\"mr-3\" />\n                                <span>Inbox</span></a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-cog\" className=\"mr-3\" />\n                                <span>Settings</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-power-off\" className=\"mr-3\" />\n                                <span>Sign Out</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DashboardHeader;\n"]}

package/dist/components/layout/DashboardHeader.tsx

@@ -0,0 +1,94 @@
+
+import { useState } from "react";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../shad-cn-ui/SolidIcon";
+
+const DashboardHeader = () => {
+
+    const [menuOpen, setMenuOpen] = useState(false);
+    const items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Export',
+            icon: 'pi pi-upload'
+        }
+    ];
+
+    return (
+        <div className="flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static" style={{ height: "60px" }}>
+            <div className="flex align-items-center">
+                <SolidButton label="New" size="sm" type="submit" className="small-button" />
+                <SolidPopover open={menuOpen} onOpenChange={setMenuOpen}>
+                    <SolidPopoverTrigger asChild>
+                        <SolidButton
+                            type="button"
+                            icon="pi pi-cog"
+                            variant="ghost"
+                            size="sm"
+                            className="ml-2"
+                        />
+                    </SolidPopoverTrigger>
+                    <SolidPopoverContent side="bottom" align="start" className="solid-form-actions-popover">
+                        <div className="solid-row-actions-menu">
+                            {items.map((item) => (
+                                <button key={item.label} type="button" className="solid-row-action-button" onClick={() => setMenuOpen(false)}>
+                                    {(() => { const m = parseSolidIconMeta(item.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className="solid-row-action-button-icon" /> : <i className={`${item.icon} solid-row-action-button-icon`} />; })()}
+                                    <span className="solid-row-action-button-label">{item.label}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </SolidPopoverContent>
+                </SolidPopover>
+            </div>
+            <div className="flex align-items-center">
+                <div className="bgCircle">
+                    <div style={{ position: "relative" }}>
+                        <SolidIcon name="si-bell" />
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="bgCircle ml-3">
+                    <div style={{ position: "relative" }}>
+                        <SolidIcon name="si-envelope" />
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="topbar-profile">
+                    <button className="topbar-profile-button p-link" type="button">
+                        <img alt="avatar" src="/images/dashboard/Ellipse 1.svg" />
+                        <span className="profile-details">
+                            <span className="profile-name">Gene Russell</span>
+                            <span className="profile-email">ben95@example.com</span>
+                        </span>
+                        <SolidIcon name="si-angle-down" />
+                    </button>
+                    <ul className="list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden">
+                        <li>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-user" className="mr-3" />
+                                <span>Profile</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-inbox" className="mr-3" />
+                                <span>Inbox</span></a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-cog" className="mr-3" />
+                                <span>Settings</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-power-off" className="mr-3" />
+                                <span>Sign Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default DashboardHeader;

package/dist/helpers/# no such endpoints exist, need to calle

@@ -0,0 +1,3 @@
+# no such endpoints exist, need to called user get with populate api key filter
+useGetSelfApiKeysQuery() → GET /iam/api-keys (self mode)
+useGetUserApiKeysQuery(userId) → GET /users/:id/api-keys (admin mode)

package/dist/helpers/ToastContainer.d.ts

@@ -0,0 +1,4 @@
+export declare const ToastContainer: () => import("react/jsx-runtime").JSX.Element;
+export declare const handleError: (errorToast: any) => void;
+export declare const handleSuccess: (successMessage: any) => void;
+//# sourceMappingURL=ToastContainer.d.ts.map

package/dist/helpers/ToastContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../src/helpers/ToastContainer.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,cAAc,+CAI1B,CAAC;AAUF,eAAO,MAAM,WAAW,eAAgB,GAAG,SAqC1C,CAAC;AAEF,eAAO,MAAM,aAAa,mBAAoB,GAAG,SAwBhD,CAAC"}

package/dist/helpers/ToastContainer.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ERROR_MESSAGES } from '../constants/error-messages';
+import { Toast } from 'primereact/toast';
+import { useRef } from 'react';
+var toastRef = null;
+export var ToastContainer = function () {
+    toastRef = useRef(null);
+    return _jsx(Toast, { ref: toastRef });
+};
+function isFetchBaseQueryErrorWithErrorResponse(error) {
+    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+}
+var extractErrorMessages = function (errorObj) {
+    return Object.values(errorObj);
+};
+export var handleError = function (errorToast) {
+    var _a;
+    var errorMessage = errorToast ? errorToast : [ERROR_MESSAGES.ERROR_OCCURED];
+    if (typeof errorMessage == 'object') {
+        if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+            errorMessage = errorToast.data.message;
+        }
+    }
+    // if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+    //     errorMessage = errorToast.data.message;
+    // } else {
+    //     errorMessage = ['Something went wrong'];
+    // }
+    (_a = toastRef === null || toastRef === void 0 ? void 0 : toastRef.current) === null || _a === void 0 ? void 0 : _a.show({
+        severity: 'error',
+        summary: ERROR_MESSAGES.ERROR,
+        detail: errorMessage,
+        life: 3000,
+        //@ts-ignore
+        content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: Array.isArray(errorMessage) ? (errorMessage.map(function (message, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: message.trim() }) }, index)); })) : (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.trim() }) })) })); },
+    });
+};
+export var handleSuccess = function (successMessage) {
+    var _a;
+    (_a = toastRef === null || toastRef === void 0 ? void 0 : toastRef.current) === null || _a === void 0 ? void 0 : _a.show({
+        severity: 'error',
+        summary: ERROR_MESSAGES.IS_SUCCESS,
+        detail: successMessage,
+        life: 3000,
+        //@ts-ignore
+        content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: Array.isArray(successMessage) ? (successMessage.map(function (message, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: message.trim() }) }, index)); })) : (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: successMessage === null || successMessage === void 0 ? void 0 : successMessage.trim() }) })) })); },
+    });
+};
+//# sourceMappingURL=ToastContainer.js.map

package/dist/helpers/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sourceRoot":"","sources":["../../src/helpers/ToastContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { ERROR_MESSAGES } from '../constants/error-messages';\nimport { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';\nimport { Toast } from 'primereact/toast';\nimport React, { useRef } from 'react';\n\n\ninterface ErrorResponseData {\n    message: string;\n    statusCode: number;\n    error: string;\n}\n\n\nlet toastRef: React.MutableRefObject<Toast | null> | null = null;\n\nexport const ToastContainer = () => {\n    toastRef = useRef(null);\n\n    return <Toast ref={toastRef} />;\n};\n\nfunction isFetchBaseQueryErrorWithErrorResponse(error: any): error is FetchBaseQueryError & { data: ErrorResponseData } {\n    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;\n}\nconst extractErrorMessages = (errorObj: Record<string, string>): string[] => {\n    return Object.values(errorObj);\n};\n\n\nexport const handleError = (errorToast: any) => {\n    let errorMessage: any = errorToast ? errorToast : [ERROR_MESSAGES.ERROR_OCCURED];\n\n\n    if (typeof errorMessage == 'object') {\n        if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {\n            errorMessage = errorToast.data.message;\n        }\n    }\n    // if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {\n    //     errorMessage = errorToast.data.message;\n    // } else {\n    //     errorMessage = ['Something went wrong'];\n    // }\n\n    toastRef?.current?.show({\n        severity: 'error',\n        summary: ERROR_MESSAGES.ERROR,\n        detail: errorMessage,\n        life: 3000,\n        //@ts-ignore\n        content: (props) => (\n            <div className=\"flex flex-column align-items-left\" style={{ flex: \"1\" }}>\n                {Array.isArray(errorMessage) ? (\n                    errorMessage.map((message, index) => (\n                        <div className=\"flex align-items-center gap-2\" key={index}>\n                            <span className=\"font-bold text-900\">{message.trim()}</span>\n                        </div>\n                    ))\n                ) : (\n                    <div className=\"flex align-items-center gap-2\">\n                        <span className=\"font-bold text-900\">{errorMessage?.trim()}</span>\n                    </div>\n                )}\n            </div>\n        ),\n    });\n};\n\nexport const handleSuccess = (successMessage: any) => {\n\n    toastRef?.current?.show({\n        severity: 'error',\n        summary: ERROR_MESSAGES.IS_SUCCESS,\n        detail: successMessage,\n        life: 3000,\n        //@ts-ignore\n        content: (props) => (\n            <div className=\"flex flex-column align-items-left\" style={{ flex: \"1\" }}>\n                {Array.isArray(successMessage) ? (\n                    successMessage.map((message, index) => (\n                        <div className=\"flex align-items-center gap-2\" key={index}>\n                            <span className=\"font-bold text-900\">{message.trim()}</span>\n                        </div>\n                    ))\n                ) : (\n                    <div className=\"flex align-items-center gap-2\">\n                        <span className=\"font-bold text-900\">{successMessage?.trim()}</span>\n                    </div>\n                )}\n            </div>\n        ),\n    });\n};\n"]}

package/dist/helpers/ToastContainer.tsx

@@ -0,0 +1,94 @@
+
+import { ERROR_MESSAGES } from '../constants/error-messages';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { Toast } from 'primereact/toast';
+import React, { useRef } from 'react';
+
+
+interface ErrorResponseData {
+    message: string;
+    statusCode: number;
+    error: string;
+}
+
+
+let toastRef: React.MutableRefObject<Toast | null> | null = null;
+
+export const ToastContainer = () => {
+    toastRef = useRef(null);
+
+    return <Toast ref={toastRef} />;
+};
+
+function isFetchBaseQueryErrorWithErrorResponse(error: any): error is FetchBaseQueryError & { data: ErrorResponseData } {
+    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+}
+const extractErrorMessages = (errorObj: Record<string, string>): string[] => {
+    return Object.values(errorObj);
+};
+
+
+export const handleError = (errorToast: any) => {
+    let errorMessage: any = errorToast ? errorToast : [ERROR_MESSAGES.ERROR_OCCURED];
+
+
+    if (typeof errorMessage == 'object') {
+        if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+            errorMessage = errorToast.data.message;
+        }
+    }
+    // if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+    //     errorMessage = errorToast.data.message;
+    // } else {
+    //     errorMessage = ['Something went wrong'];
+    // }
+
+    toastRef?.current?.show({
+        severity: 'error',
+        summary: ERROR_MESSAGES.ERROR,
+        detail: errorMessage,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+            <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+                {Array.isArray(errorMessage) ? (
+                    errorMessage.map((message, index) => (
+                        <div className="flex align-items-center gap-2" key={index}>
+                            <span className="font-bold text-900">{message.trim()}</span>
+                        </div>
+                    ))
+                ) : (
+                    <div className="flex align-items-center gap-2">
+                        <span className="font-bold text-900">{errorMessage?.trim()}</span>
+                    </div>
+                )}
+            </div>
+        ),
+    });
+};
+
+export const handleSuccess = (successMessage: any) => {
+
+    toastRef?.current?.show({
+        severity: 'error',
+        summary: ERROR_MESSAGES.IS_SUCCESS,
+        detail: successMessage,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+            <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+                {Array.isArray(successMessage) ? (
+                    successMessage.map((message, index) => (
+                        <div className="flex align-items-center gap-2" key={index}>
+                            <span className="font-bold text-900">{message.trim()}</span>
+                        </div>
+                    ))
+                ) : (
+                    <div className="flex align-items-center gap-2">
+                        <span className="font-bold text-900">{successMessage?.trim()}</span>
+                    </div>
+                )}
+            </div>
+        ),
+    });
+};

package/dist/helpers/downloadMediaFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"downloadMediaFile.d.ts","sourceRoot":"","sources":["../../src/helpers/downloadMediaFile.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,YAAa,MAAM,aAAa,MAAM,SAQnE,CAAC"}
+{"version":3,"file":"downloadMediaFile.d.ts","sourceRoot":"","sources":["../../src/helpers/downloadMediaFile.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,iBAAiB,YAAa,MAAM,aAAa,MAAM,SAMnE,CAAC"}

package/dist/helpers/downloadMediaFile.js

@@ -1,10 +1,17 @@
-export var downloadMediaFile = function (fileUrl, fileName) {
+var triggerBrowserDownload = function (url, fileName) {
     var link = document.createElement("a");
-    link.href = fileUrl;
+    var downloadUrl = new URL(url, window.location.origin);
+    downloadUrl.searchParams.set("disposition", "attachment");
+    link.href = downloadUrl.toString();
     link.download = fileName || "";
-    link.target = "_blank";
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
 };
+export var downloadMediaFile = function (fileUrl, fileName) {
+    if (!fileUrl) {
+        return;
+    }
+    triggerBrowserDownload(fileUrl, fileName);
+};
 //# sourceMappingURL=downloadMediaFile.js.map

package/dist/helpers/downloadMediaFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"downloadMediaFile.js","sourceRoot":"","sources":["../../src/helpers/downloadMediaFile.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,OAAe,EAAE,QAAiB;IAChE,IAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACpB,IAAI,CAAC,QAAQ,GAAG,QAAQ,IAAI,EAAE,CAAC;IAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { ERROR_MESSAGES } from \"../constants/error-messages\";\nimport { env } from \"../adapters/env\";\n\nexport const downloadMediaFile = (fileUrl: string, fileName?: string) => {\n    const link = document.createElement(\"a\");\n    link.href = fileUrl;\n    link.download = fileName || \"\";\n    link.target = \"_blank\";\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n};\n"]}
+{"version":3,"file":"downloadMediaFile.js","sourceRoot":"","sources":["../../src/helpers/downloadMediaFile.tsx"],"names":[],"mappings":"AAAA,IAAM,sBAAsB,GAAG,UAAC,GAAW,EAAE,QAAiB;IAC1D,IAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,IAAM,WAAW,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC1D,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;IACnC,IAAI,CAAC,QAAQ,GAAG,QAAQ,IAAI,EAAE,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,EAAE,CAAK;IACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,OAAe,EAAE,QAAiB;IAChE,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;KACV;IAED,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["const triggerBrowserDownload = (url: string, fileName?: string) => {\n    const link = document.createElement(\"a\");\n    const downloadUrl = new URL(url, window.location.origin);\n    downloadUrl.searchParams.set(\"disposition\", \"attachment\");\n    link.href = downloadUrl.toString();\n    link.download = fileName || \"\";\n    document.body.appendChild(link);\n    link.click()    ;\n    document.body.removeChild(link);\n};\n\nexport const downloadMediaFile = (fileUrl: string, fileName?: string) => {\n    if (!fileUrl) {\n        return;\n    }\n\n    triggerBrowserDownload(fileUrl, fileName);\n};\n"]}

package/dist/helpers/downloadMediaFile.tsx

@@ -1,12 +1,18 @@
-import { ERROR_MESSAGES } from "../constants/error-messages";
-import { env } from "../adapters/env";
-
-export const downloadMediaFile = (fileUrl: string, fileName?: string) => {
+const triggerBrowserDownload = (url: string, fileName?: string) => {
     const link = document.createElement("a");
-    link.href = fileUrl;
+    const downloadUrl = new URL(url, window.location.origin);
+    downloadUrl.searchParams.set("disposition", "attachment");
+    link.href = downloadUrl.toString();
     link.download = fileName || "";
-    link.target = "_blank";
     document.body.appendChild(link);
-    link.click();
+    link.click()    ;
     document.body.removeChild(link);
 };
+
+export const downloadMediaFile = (fileUrl: string, fileName?: string) => {
+    if (!fileUrl) {
+        return;
+    }
+
+    triggerBrowserDownload(fileUrl, fileName);
+};

package/dist/helpers/fileTypeIcon.d.ts

@@ -2,9 +2,10 @@ type FileTypeIconTone = {
     bg: string;
     corner: string;
 };
-export declare const getFileTypeIconTone: (fileUrl: string) => FileTypeIconTone;
-export declare const SolidFileTypeIcon: ({ fileUrl, size, className }: {
+export declare const getFileTypeIconTone: (fileUrl: string, fileName?: string) => FileTypeIconTone;
+export declare const SolidFileTypeIcon: ({ fileUrl, fileName, size, className }: {
     fileUrl: string;
+    fileName?: string | undefined;
     size?: number | undefined;
     className?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/helpers/fileTypeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileTypeIcon.d.ts","sourceRoot":"","sources":["../../src/helpers/fileTypeIcon.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AA6BF,eAAO,MAAM,mBAAmB,YAAa,MAAM,qBAGlD,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAAkD,MAAM;;;6CAyBrF,CAAC"}
+{"version":3,"file":"fileTypeIcon.d.ts","sourceRoot":"","sources":["../../src/helpers/fileTypeIcon.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAkCF,eAAO,MAAM,mBAAmB,YAAa,MAAM,aAAa,MAAM,qBAGrE,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAA4D,MAAM;;;;6CAyB/F,CAAC"}

package/dist/helpers/fileTypeIcon.js

@@ -19,19 +19,23 @@ var FILE_TYPE_ICON_MAP = {
     ogg: { bg: "#DB2777", corner: "#F9A8D4" },
     wav: { bg: "#DB2777", corner: "#F9A8D4" }
 };
-var getFileExtension = function (fileUrl) {
+var getFileExtension = function (fileName, fileUrl) {
     var _a, _b;
-    var cleanUrl = fileUrl.split("?")[0];
-    return (_b = (_a = cleanUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+    var value = fileName || fileUrl;
+    if (!value) {
+        return "";
+    }
+    var cleanValue = value.split("?")[0];
+    return (_b = (_a = cleanValue.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
 };
-export var getFileTypeIconTone = function (fileUrl) {
+export var getFileTypeIconTone = function (fileUrl, fileName) {
     var _a;
-    var extension = getFileExtension(fileUrl);
+    var extension = getFileExtension(fileName, fileUrl);
     return (_a = FILE_TYPE_ICON_MAP[extension]) !== null && _a !== void 0 ? _a : DEFAULT_FILE_ICON;
 };
 export var SolidFileTypeIcon = function (_a) {
-    var fileUrl = _a.fileUrl, _b = _a.size, size = _b === void 0 ? 24 : _b, className = _a.className;
-    var icon = getFileTypeIconTone(fileUrl);
+    var fileUrl = _a.fileUrl, fileName = _a.fileName, _b = _a.size, size = _b === void 0 ? 24 : _b, className = _a.className;
+    var icon = getFileTypeIconTone(fileUrl, fileName);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, "aria-hidden": true, children: [_jsx("path", { d: "M7.5 2.5h12L26 9v19.5a2 2 0 0 1-2 2H7.5a2 2 0 0 1-2-2v-24a2 2 0 0 1 2-2Z", fill: icon.bg }), _jsx("path", { d: "M19.5 2.5V8a1 1 0 0 0 1 1H26L19.5 2.5Z", fill: icon.corner }), _jsx("path", { d: "M9.5 12.25h9.5M9.5 15.25h12", stroke: "rgba(255,255,255,0.42)", strokeWidth: "1.4", strokeLinecap: "round" }), _jsx("rect", { x: "7.5", y: "18", width: "17", height: "7.5", rx: "1.5", fill: "rgba(255,255,255,0.2)" })] }));
 };
 //# sourceMappingURL=fileTypeIcon.js.map