@solidxai/core-ui 0.0.1

package/dist/components/common/SolidFormStepper.tsx

@@ -0,0 +1,336 @@
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { useEffect, useRef, useState } from 'react'
+import { createSolidEntityApi } from '../../redux/api/solidEntityApi';
+import { useFormik } from 'formik';
+import { Toast } from 'primereact/toast';
+import { useSearchParams } from "../../hooks/useSearchParams";
+import { ERROR_MESSAGES } from '../../constants/error-messages';
+import showToast from "../../helpers/showToast";
+
+interface Props {
+    solidFormViewMetaData?: any;
+    modelName?: any,
+    initialEntityData?: any;
+    id?: any,
+    solidWorkflowFieldValue?: any
+    setSolidWorkflowFieldValue?: any
+    onStepperUpdate?: () => void
+}
+
+export const SolidFormStepper = (props: Props) => {
+    const { solidFormViewMetaData, modelName, initialEntityData, id, solidWorkflowFieldValue, setSolidWorkflowFieldValue, onStepperUpdate } = props;
+    const toast = useRef<Toast>(null);
+    const formStepperOverlay = useRef(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const leftFormStepperOverlay = useRef(null);
+
+    const searchParams = useSearchParams();
+    const viewMode = searchParams.get('viewMode');
+
+    const solidFormViewWorkflowData = solidFormViewMetaData?.data?.solidFormViewWorkflowData;
+    const solidWorkflowField = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowField;
+    const solidWorkflowFieldEnabled = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowFieldUpdateEnabled;
+    const defaultWorkflowFieldValue = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.defaultValue
+    const defaultWorkflowFieldDisplayName = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.displayName
+    const activeStep = solidFormViewMetaData?.data?.solidFormViewWorkflowData[0].value
+    const [solidWorkflowFieldKey, setSolidWorkflowFieldKey] = useState<string>("");
+    const [visibleStepsCount, setVisibleStepsCount] = useState<number>(1);
+
+    // Dynamic responsive logic
+    useEffect(() => {
+        const calculateVisibleSteps = () => {
+            if (!containerRef.current || !solidFormViewWorkflowData || solidFormViewWorkflowData.length === 0) return;
+
+            const containerWidth = containerRef.current.offsetWidth;
+            const overflowButtonWidth = 50;
+            const arrowWidth = 30; // Width for arrow between buttons
+            const spacing = 0; // No gap needed as arrows connect buttons
+
+            const tempContainer = document.createElement('div');
+            tempContainer.style.visibility = 'hidden';
+            tempContainer.style.position = 'absolute';
+            document.body.appendChild(tempContainer);
+
+            const buttonWidths: number[] = [];
+
+            solidFormViewWorkflowData.forEach((step: any) => {
+                const tempButton = document.createElement('button');
+                tempButton.className = 'arrow-step-button';
+                tempButton.textContent = step.label;
+                tempButton.style.padding = '0.5rem 1.5rem';
+                tempButton.style.minWidth = '100px';
+                tempContainer.appendChild(tempButton);
+                buttonWidths.push(Math.max(100, tempButton.offsetWidth));
+            });
+
+            document.body.removeChild(tempContainer);
+
+            let count = 0;
+            let totalWidth = 0;
+
+            for (let i = 0; i < buttonWidths.length; i++) {
+                const buttonWidth = buttonWidths[i];
+                const arrowSpace = i > 0 ? arrowWidth : 0;
+                const needsOverflow = i < buttonWidths.length - 1;
+                const requiredWidth = totalWidth + buttonWidth + arrowSpace + (needsOverflow ? overflowButtonWidth : 0);
+
+                if (requiredWidth <= containerWidth) {
+                    totalWidth += buttonWidth + arrowSpace;
+                    count++;
+                } else {
+                    break;
+                }
+            }
+
+            count = Math.max(1, count);
+            setVisibleStepsCount(count);
+        };
+
+        calculateVisibleSteps();
+
+        const resizeObserver = new ResizeObserver(calculateVisibleSteps);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        const timeoutId = setTimeout(calculateVisibleSteps, 100);
+
+        return () => {
+            resizeObserver.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, [solidFormViewWorkflowData]);
+
+    useEffect(() => {
+        if (!solidWorkflowField) return;
+
+        setSolidWorkflowFieldKey(solidWorkflowField);
+
+        setSolidWorkflowFieldValue(() => {
+            if (initialEntityData?.[solidWorkflowField] !== undefined) {
+                if (solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.type === "relation") {
+                    return initialEntityData[solidWorkflowField]?.id || initialEntityData[solidWorkflowField];
+                } else {
+                    return initialEntityData[solidWorkflowField];
+                }
+            } else if (defaultWorkflowFieldValue !== undefined) {
+                return defaultWorkflowFieldValue;
+            } else {
+                return activeStep;
+            }
+        });
+    }, [solidWorkflowField, initialEntityData, defaultWorkflowFieldValue, activeStep]);
+
+    const formik = useFormik({
+        enableReinitialize: true,
+        initialValues: {
+            id: +id,
+            [solidWorkflowFieldKey]: solidWorkflowFieldValue || "",
+        },
+        onSubmit: (values) => {
+            handleStepChange(values);
+        }
+    });
+
+    const entityApi = createSolidEntityApi(modelName);
+    const { usePatchUpdateSolidEntityMutation } = entityApi;
+
+    const [
+        updateStepper,
+        { isSuccess: isStepperUpdateSuccessfull, isError: isStepperUpdateError, error: stepperUpdateError },
+    ] = usePatchUpdateSolidEntityMutation();
+
+    const handleStepChange = async (values: any) => {
+        try {
+            const result = await updateStepper({ id: values.id, data: { [solidWorkflowFieldKey]: values[solidWorkflowFieldKey] } }).unwrap();
+            if (result?.statusCode === 200) {
+                showToast(toast, "success", ERROR_MESSAGES.FIELD_UPDATE(defaultWorkflowFieldDisplayName), ERROR_MESSAGES.FIELD_UPDATE_SUCCESSFULLY(defaultWorkflowFieldDisplayName));
+                if (result?.data?.[solidWorkflowFieldKey]) {
+                    setSolidWorkflowFieldValue(result.data[solidWorkflowFieldKey]);
+                }
+                if (onStepperUpdate) {
+                    onStepperUpdate();
+                }
+            }
+        } catch (error) {
+            console.error(ERROR_MESSAGES.UPDATING_STEPPER, error);
+            showToast(toast, "error", ERROR_MESSAGES.UPDATE_FAILED, ERROR_MESSAGES.FAILED_UPDATE_FROM);
+        }
+    }
+
+    const handleButtonClick = (stepValue: any) => {
+        if (solidWorkflowFieldEnabled === false || id === "new" || viewMode === "view") {
+            return
+        } else {
+            formik.setFieldValue(solidWorkflowFieldKey, stepValue);
+            formik.handleSubmit();
+        }
+    }
+
+    const activeIndex = solidFormViewWorkflowData?.findIndex((step: any) => step.value === solidWorkflowFieldValue) ?? -1;
+
+    let visibleSteps: any[] = [];
+    let previousSteps: any[] = [];
+    let nextSteps: any[] = [];
+    const isSingleVisibleStep = visibleStepsCount === 1;
+
+    if (solidFormViewWorkflowData && solidFormViewWorkflowData.length > 0) {
+        if (activeIndex === -1) {
+            visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);
+            nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);
+        } else if (visibleStepsCount === 1) {
+            visibleSteps = [solidFormViewWorkflowData[activeIndex]];
+            previousSteps = solidFormViewWorkflowData.slice(0, activeIndex);
+            nextSteps = solidFormViewWorkflowData.slice(activeIndex + 1);
+        } else {
+            const totalSteps = solidFormViewWorkflowData.length;
+
+            if (activeIndex < visibleStepsCount) {
+                visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);
+                nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);
+            } else {
+                const slotsAvailable = visibleStepsCount - 1;
+                const afterActive = Math.min(Math.floor(slotsAvailable / 2), totalSteps - activeIndex - 1);
+                const beforeActive = slotsAvailable - afterActive;
+
+                const startIndex = Math.max(0, activeIndex - beforeActive);
+                const endIndex = Math.min(totalSteps, activeIndex + afterActive + 1);
+
+                previousSteps = solidFormViewWorkflowData.slice(0, startIndex);
+                visibleSteps = solidFormViewWorkflowData.slice(startIndex, endIndex);
+                nextSteps = solidFormViewWorkflowData.slice(endIndex);
+            }
+        }
+    }
+
+    const hasPreviousSteps =
+        previousSteps.length > 0 && !isSingleVisibleStep;
+
+    const hasNextSteps =
+        nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div ref={containerRef} className='arrow-stepper-container'>
+                {hasPreviousSteps && (
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <button
+                            type='button'
+                            className="overflow-button overlow-left-button"
+                            onClick={(e) => {
+                                // @ts-ignore
+                                leftFormStepperOverlay.current.toggle(e)
+                            }}
+                        >
+                            <i className="pi pi-ellipsis-h" />
+                        </button>
+                        <OverlayPanel
+                            ref={leftFormStepperOverlay}
+                            className="solid-custom-overlay solid-form-stepper-overlay"
+                        >
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>
+                                {previousSteps.map((step: any, index: number) => {
+                                    const stepIndex = index;
+                                    const isStepActive = stepIndex === activeIndex;
+                                    const isStepBeforeActive = stepIndex < activeIndex;
+
+                                    return (
+                                        <button
+                                            key={stepIndex}
+                                            type='button'
+                                            className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}
+                                            onClick={() => {
+                                                handleButtonClick(step.value);
+                                                // @ts-ignore
+                                                leftFormStepperOverlay.current.hide();
+                                            }}
+                                        >
+                                            {step.label}
+                                        </button>
+                                    )
+                                })}
+                            </div>
+                        </OverlayPanel>
+                    </div>
+                )}
+
+                {visibleSteps.map((step: any) => {
+                    const stepIndex = solidFormViewWorkflowData.findIndex(
+                        (s: any) => s.value === step.value
+                    );
+
+                    const isActive = stepIndex === activeIndex;
+                    const isBeforeActive = stepIndex < activeIndex;
+                    const isSingleButton = visibleSteps.length === 1;
+
+                    return (
+                        <button
+                            key={step.value}
+                            type="button"
+                            className={`arrow-step-button ${isSingleButton ? 'single-button' : ''
+                                } ${isActive
+                                    ? 'arrow-step-active'
+                                    : isBeforeActive
+                                        ? 'arrow-step-completed'
+                                        : 'arrow-step-future'
+                                }`}
+                            onClick={() => handleButtonClick(step.value)}
+                            title={step.label}
+                        >
+                            <span className="step-text">{step.label}</span>
+                        </button>
+                    );
+                })}
+
+                {hasNextSteps && (
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <button
+                            type='button'
+                            className="overflow-button overflow-right-button"
+                            onClick={(e) => {
+                                // @ts-ignore
+                                formStepperOverlay.current.toggle(e)
+                            }}
+                        >
+                            <i className="pi pi-ellipsis-h" />
+                        </button>
+                        <OverlayPanel
+                            ref={formStepperOverlay}
+                            className="solid-custom-overlay solid-form-stepper-overlay"
+                        >
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>
+                                {(isSingleVisibleStep
+                                    ? [...previousSteps, ...nextSteps]
+                                    : nextSteps).map((step: any) => {
+
+                                        const stepIndex = solidFormViewWorkflowData.findIndex(
+                                            (s: any) => s.value === step.value
+                                        );
+
+                                        const isStepActive = stepIndex === activeIndex;
+                                        const isStepBeforeActive = stepIndex < activeIndex;
+
+                                        return (
+                                            <button
+                                                key={stepIndex}
+                                                type='button'
+                                                className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}
+                                                onClick={() => {
+                                                    handleButtonClick(step.value);
+                                                    // @ts-ignore
+                                                    formStepperOverlay.current.hide();
+                                                }}
+                                            >
+                                                {step.label}
+                                            </button>
+                                        )
+                                    })}
+                            </div>
+                        </OverlayPanel>
+                    </div>
+                )}
+            </div>
+        </>
+    )
+}

package/dist/components/common/SolidModuleHome.d.ts

@@ -0,0 +1,6 @@
+type SolidModuleHomeProps = {
+    moduleName?: string;
+};
+export declare const SolidModuleHome: ({ moduleName }: SolidModuleHomeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidModuleHome.d.ts.map

package/dist/components/common/SolidModuleHome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidModuleHome.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidModuleHome.tsx"],"names":[],"mappings":"AAeA,KAAK,oBAAoB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAAkC,oBAAoB,4CA4GjF,CAAA"}

package/dist/components/common/SolidModuleHome.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSession } from "../../hooks/useSession";
+import styles from './solidModuleHome.module.css';
+import { Button } from 'primereact/button';
+import { DocsSvg } from '../Svg/DocsSvg';
+import { SettingsSvg } from '../Svg/SettingsSvg';
+import { DevDocs } from '../Svg/DevDocs';
+import { HomePageModuleSvg } from '../Svg/HomePageModuleSvg';
+import Link from "./Link";
+import { useState } from 'react';
+import { SolidAccountSettings } from '../core/common/SolidAccountSettings/SolidAccountSettings';
+import { useDispatch, useSelector } from "react-redux";
+import { showNavbar, toggleNavbar } from "../../redux/features/navbarSlice";
+export var SolidModuleHome = function (_a) {
+    var _b;
+    var _c = _a.moduleName, moduleName = _c === void 0 ? "Dashboard" : _c;
+    var _d = useSession(), session = _d.data, status = _d.status;
+    var dispatch = useDispatch();
+    var visibleNavbar = useSelector(function (state) { var _a; return (_a = state.navbarState) === null || _a === void 0 ? void 0 : _a.visibleNavbar; });
+    //@ts-ignore
+    var user = (_b = session === null || session === void 0 ? void 0 : session.user) === null || _b === void 0 ? void 0 : _b.username;
+    var _e = useState(false), showAccountSettings = _e[0], setShowAccountSettings = _e[1];
+    var toggleBothSidebars = function () {
+        if (visibleNavbar) {
+            dispatch(toggleNavbar()); // close both
+        }
+        else {
+            dispatch(showNavbar()); // open both
+        }
+    };
+    return (_jsxs("div", { className: "h-screen surface-0 overflow-y-auto", children: [_jsx("div", { className: "page-header", style: { borderBottom: '1px solid var(--primary-light-color)' }, children: _jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx("div", { className: "apps-icon block md:hidden cursor-pointer", onClick: toggleBothSidebars, children: _jsx("i", { className: "pi pi-th-large" }) }), _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: moduleName })] }) }), _jsxs("div", { className: "p-4 md:p-5 flex flex-column gap-4", children: [_jsxs("div", { className: styles.solidModuleWelcomeSection, children: [_jsxs("div", { className: 'flex flex-column gap-2 pr-3 lg:pr-0', children: [_jsxs("h3", { className: styles.solidModuleHomeTitle1, children: ["Welcome, ", status === "loading" ? "." : user] }), _jsxs("p", { className: 'm-0 w-35rem text-sl', children: ["This is the home page for the ", moduleName, " module. You can find documentation and settings below."] })] }), _jsx("div", { className: styles.homeSvg, children: _jsx(HomePageModuleSvg, {}) })] }), _jsx("div", { className: 'grid', children: [{
+                                icon: _jsx(DocsSvg, {}),
+                                title: 'Admin Docs',
+                                description: 'Explore the administrator documentation to manage and configure your system',
+                                class: styles.dashboardCardOne,
+                                url: 'https://docs.solidxai.com/docs/admin-docs/'
+                            }, {
+                                icon: _jsx(DevDocs, {}),
+                                title: 'Dev Docs',
+                                description: 'Dive into the developer documentation to build, extend, and integrate with the platform',
+                                class: styles.dashboardCardTwo,
+                                url: 'https://docs.solidxai.com/docs/developer-docs/'
+                            }, {
+                                icon: _jsx(SettingsSvg, {}),
+                                title: 'Settings',
+                                description: 'Access and update your account settings, preferences, and profile information',
+                                class: styles.dashboardCardThree,
+                                type: 'popup'
+                            }].map(function (card, i) { return (_jsx("div", { className: 'col-12 md:col-6 xl:col-4', children: _jsxs("div", { className: "".concat(styles.solidModuleHomeColorCards, " ").concat(card.class), children: [_jsxs("div", { children: [_jsx("div", { className: styles.solidModuleHomeCardSvgWrapper, children: card.icon }), _jsx("h3", { className: "".concat(styles.solidModuleHomeTitle1, " mt-4"), children: card.title }), _jsx("p", { className: 'mb-0 mt-2 mr-2 text-xs', children: card.description })] }), _jsx("div", { children: card.url ? (_jsx(Link, { href: card.url, target: "_blank", rel: "noopener noreferrer", children: _jsx(Button, { outlined: true, label: 'Explore', size: 'small', icon: "pi pi-arrow-right", iconPos: 'right', className: "font-bold", style: { background: 'var(--solid-module-home-add-button-bg)' } }) })) : (_jsx(Button, { outlined: true, label: 'Open', size: 'small', icon: "pi pi-cog", iconPos: 'right', className: "font-bold", style: { background: 'var(--solid-module-home-add-button-bg)' }, onClick: function () {
+                                                if (card.type === 'popup') {
+                                                    setShowAccountSettings(true);
+                                                }
+                                            } })) })] }) }, i)); }) })] }), showAccountSettings &&
+                _jsx(SolidAccountSettings, { showProfileSettingsDialog: showAccountSettings, setShowProfileSettingsDialog: setShowAccountSettings })] }));
+};
+//# sourceMappingURL=SolidModuleHome.js.map

package/dist/components/common/SolidModuleHome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidModuleHome.js","sourceRoot":"","sources":["../../../src/components/common/SolidModuleHome.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0DAA0D,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAM5E,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAkD;;QAAhD,kBAAwB,EAAxB,UAAU,mBAAG,WAAW,KAAA;IAChD,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,aAAa,GAAG,WAAW,CAAC,UAAC,KAAU,YAAK,OAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,aAAa,CAAA,EAAA,CAAC,CAAC;IACpF,YAAY;IACZ,IAAM,IAAI,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,QAAQ,CAAC;IAC/B,IAAA,KAAgD,QAAQ,CAAC,KAAK,CAAC,EAA9D,mBAAmB,QAAA,EAAE,sBAAsB,QAAmB,CAAC;IAEtE,IAAM,kBAAkB,GAAG;QACvB,IAAI,aAAa,EAAE;YACf,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAG,aAAa;SAC5C;aAAM;YACH,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,CAAK,YAAY;SAC3C;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,oCAAoC,aAC/C,cAAK,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,sCAAsC,EAAE,YACxF,eAAK,SAAS,EAAC,+BAA+B,aAC1C,cAAK,SAAS,EAAC,0CAA0C,EAAC,OAAO,EAAE,kBAAkB,YACjF,YAAG,SAAS,EAAC,gBAAgB,GAAK,GAChC,EACN,YAAG,SAAS,EAAC,mCAAmC,YAC3C,UAAU,GACX,IACF,GACJ,EACN,eAAK,SAAS,EAAC,mCAAmC,aAC9C,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,eAAK,SAAS,EAAC,qCAAqC,aAChD,cAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,0BAC7B,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAC1C,EACL,aAAG,SAAS,EAAC,qBAAqB,+CACC,UAAU,+DACzC,IACF,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC1B,KAAC,iBAAiB,KAAG,GACnB,IACJ,EAGN,cAAK,SAAS,EAAC,MAAM,YAChB,CAAC;gCACE,IAAI,EAAE,KAAC,OAAO,KAAG;gCACjB,KAAK,EAAE,YAAY;gCACnB,WAAW,EAAE,6EAA6E;gCAC1F,KAAK,EAAE,MAAM,CAAC,gBAAgB;gCAC9B,GAAG,EAAE,4CAA4C;6BACpD,EAAE;gCACC,IAAI,EAAE,KAAC,OAAO,KAAG;gCACjB,KAAK,EAAE,UAAU;gCACjB,WAAW,EAAE,yFAAyF;gCACtG,KAAK,EAAE,MAAM,CAAC,gBAAgB;gCAC9B,GAAG,EAAE,gDAAgD;6BACxD,EAAE;gCACC,IAAI,EAAE,KAAC,WAAW,KAAG;gCACrB,KAAK,EAAE,UAAU;gCACjB,WAAW,EAAE,+EAA+E;gCAC5F,KAAK,EAAE,MAAM,CAAC,kBAAkB;gCAChC,IAAI,EAAE,OAAO;6BAChB,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC,IAAK,OAAA,CAChB,cAAK,SAAS,EAAC,0BAA0B,YACrC,eAAK,SAAS,EAAE,UAAG,MAAM,CAAC,yBAAyB,cAAI,IAAI,CAAC,KAAK,CAAE,aAC/D,0BACI,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,YAAG,IAAI,CAAC,IAAI,GAAO,EACvE,aAAI,SAAS,EAAE,UAAG,MAAM,CAAC,qBAAqB,UAAO,YAAG,IAAI,CAAC,KAAK,GAAM,EACxE,YAAG,SAAS,EAAC,wBAAwB,YAChC,IAAI,CAAC,WAAW,GACjB,IACF,EACN,wBACK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACR,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAC3D,KAAC,MAAM,IAAC,QAAQ,QAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,mBAAmB,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,wCAAwC,EAAE,GAAI,GAC7K,CACV,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,IACH,QAAQ,QACR,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,EAAE,UAAU,EAAE,wCAAwC,EAAE,EAC/D,OAAO,EAAE;gDACL,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oDACvB,sBAAsB,CAAC,IAAI,CAAC,CAAC;iDAChC;4CACL,CAAC,GACH,CACL,GACC,IACJ,IA/BqC,CAAC,CAgC1C,CACT,EAlCmB,CAkCnB,CAAC,GACA,IACJ,EACL,mBAAmB;gBAChB,KAAC,oBAAoB,IACjB,yBAAyB,EAAE,mBAAmB,EAC9C,4BAA4B,EAAE,sBAAsB,GACtD,IAEJ,CACT,CAAA;AACL,CAAC,CAAA"}

package/dist/components/common/SolidModuleHome.tsx

@@ -0,0 +1,128 @@
+
+
+import { useSession } from "../../hooks/useSession";
+import styles from './solidModuleHome.module.css'
+import { Button } from 'primereact/button';
+import { DocsSvg } from '../Svg/DocsSvg';
+import { SettingsSvg } from '../Svg/SettingsSvg';
+import { DevDocs } from '../Svg/DevDocs';
+import { HomePageModuleSvg } from '../Svg/HomePageModuleSvg';
+import Link from "./Link";
+import { useState } from 'react';
+import { SolidAccountSettings } from '../core/common/SolidAccountSettings/SolidAccountSettings';
+import { useDispatch, useSelector } from "react-redux";
+import { showNavbar, toggleNavbar } from "../../redux/features/navbarSlice";
+
+type SolidModuleHomeProps = {
+    moduleName?: string;
+};
+
+export const SolidModuleHome = ({ moduleName = "Dashboard" }: SolidModuleHomeProps) => {
+    const { data: session, status } = useSession();
+    const dispatch = useDispatch();
+    const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);
+    //@ts-ignore
+    const user = session?.user?.username;
+    const [showAccountSettings, setShowAccountSettings] = useState(false);
+
+    const toggleBothSidebars = () => {
+        if (visibleNavbar) {
+            dispatch(toggleNavbar());   // close both
+        } else {
+            dispatch(showNavbar());     // open both
+        }
+    };
+
+    return (
+        <div className="h-screen surface-0 overflow-y-auto">
+            <div className="page-header" style={{ borderBottom: '1px solid var(--primary-light-color)' }}>
+                <div className='flex align-items-center gap-2'>
+                    <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
+                        <i className="pi pi-th-large"></i>
+                    </div>
+                    <p className="m-0 view-title solid-text-wrapper">
+                        {moduleName}
+                    </p>
+                </div>
+            </div>
+            <div className="p-4 md:p-5 flex flex-column gap-4">
+                <div className={styles.solidModuleWelcomeSection}>
+                    <div className='flex flex-column gap-2 pr-3 lg:pr-0'>
+                        <h3 className={styles.solidModuleHomeTitle1}>
+                            Welcome, {status === "loading" ? "." : user}
+                        </h3>
+                        <p className='m-0 w-35rem text-sl'>
+                            This is the home page for the {moduleName} module. You can find documentation and settings below.
+                        </p>
+                    </div>
+                    <div className={styles.homeSvg}>
+                        <HomePageModuleSvg />
+                    </div>
+                </div>
+
+                {/* Cards */}
+                <div className='grid'>
+                    {[{
+                        icon: <DocsSvg />,
+                        title: 'Admin Docs',
+                        description: 'Explore the administrator documentation to manage and configure your system',
+                        class: styles.dashboardCardOne,
+                        url: 'https://docs.solidxai.com/docs/admin-docs/'
+                    }, {
+                        icon: <DevDocs />,
+                        title: 'Dev Docs',
+                        description: 'Dive into the developer documentation to build, extend, and integrate with the platform',
+                        class: styles.dashboardCardTwo,
+                        url: 'https://docs.solidxai.com/docs/developer-docs/'
+                    }, {
+                        icon: <SettingsSvg />,
+                        title: 'Settings',
+                        description: 'Access and update your account settings, preferences, and profile information',
+                        class: styles.dashboardCardThree,
+                        type: 'popup'
+                    }].map((card, i) => (
+                        <div className='col-12 md:col-6 xl:col-4' key={i}>
+                            <div className={`${styles.solidModuleHomeColorCards} ${card.class}`}>
+                                <div>
+                                    <div className={styles.solidModuleHomeCardSvgWrapper}>{card.icon}</div>
+                                    <h3 className={`${styles.solidModuleHomeTitle1} mt-4`}>{card.title}</h3>
+                                    <p className='mb-0 mt-2 mr-2 text-xs'>
+                                        {card.description}
+                                    </p>
+                                </div>
+                                <div>
+                                    {card.url ? (
+                                        <Link href={card.url} target="_blank" rel="noopener noreferrer">
+                                            <Button outlined label='Explore' size='small' icon="pi pi-arrow-right" iconPos='right' className="font-bold" style={{ background: 'var(--solid-module-home-add-button-bg)' }} />
+                                        </Link>
+                                    ) : (
+                                        <Button
+                                            outlined
+                                            label='Open'
+                                            size='small'
+                                            icon="pi pi-cog"
+                                            iconPos='right'
+                                            className="font-bold"
+                                            style={{ background: 'var(--solid-module-home-add-button-bg)' }}
+                                            onClick={() => {
+                                                if (card.type === 'popup') {
+                                                    setShowAccountSettings(true);
+                                                }
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {showAccountSettings &&
+                <SolidAccountSettings
+                    showProfileSettingsDialog={showAccountSettings}
+                    setShowProfileSettingsDialog={setShowAccountSettings}
+                />
+            }
+        </div>
+    )
+}

package/dist/components/common/SolidNotFoundPage.d.ts

@@ -0,0 +1,9 @@
+type SolidNotFoundPageProps = {
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    actionHref?: string;
+};
+export declare const SolidNotFoundPage: ({ title, message, actionLabel, actionHref, }: SolidNotFoundPageProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidNotFoundPage.d.ts.map

package/dist/components/common/SolidNotFoundPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidNotFoundPage.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidNotFoundPage.tsx"],"names":[],"mappings":"AAIA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,iDAK3B,sBAAsB,4CAoBxB,CAAC"}

package/dist/components/common/SolidNotFoundPage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "primereact/card";
+import { Button } from "primereact/button";
+import { useRouter } from "../../hooks/useRouter";
+export var SolidNotFoundPage = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? "Not Found" : _b, _c = _a.message, message = _c === void 0 ? "Requested resource is not available." : _c, _d = _a.actionLabel, actionLabel = _d === void 0 ? "Go to Dashboard" : _d, _e = _a.actionHref, actionHref = _e === void 0 ? "/admin" : _e;
+    var router = useRouter();
+    return (_jsx("div", { className: "flex align-items-center justify-content-center", style: { minHeight: "70vh" }, children: _jsx(Card, { className: "w-full", style: { maxWidth: 420 }, children: _jsxs("div", { className: "flex flex-column align-items-center text-center gap-3", children: [_jsx("div", { className: "text-xl font-bold", style: { color: "#3b82f6" }, children: "404" }), _jsx("h2", { className: "m-0", children: title }), _jsx("p", { className: "m-0 text-sm", children: message }), _jsx(Button, { label: actionLabel, link: true, onClick: function () { return router.push(actionHref); }, className: "mt-2" })] }) }) }));
+};
+//# sourceMappingURL=SolidNotFoundPage.js.map

package/dist/components/common/SolidNotFoundPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidNotFoundPage.js","sourceRoot":"","sources":["../../../src/components/common/SolidNotFoundPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAKT;QAJvB,aAAmB,EAAnB,KAAK,mBAAG,WAAW,KAAA,EACnB,eAAgD,EAAhD,OAAO,mBAAG,sCAAsC,KAAA,EAChD,mBAA+B,EAA/B,WAAW,mBAAG,iBAAiB,KAAA,EAC/B,kBAAqB,EAArB,UAAU,mBAAG,QAAQ,KAAA;IAErB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAC1F,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,YAC/C,eAAK,SAAS,EAAC,uDAAuD,aACpE,cAAK,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAW,EACzE,aAAI,SAAS,EAAC,KAAK,YAAE,KAAK,GAAM,EAChC,YAAG,SAAS,EAAC,aAAa,YAAE,OAAO,GAAK,EACxC,KAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,IAAI,QACJ,OAAO,EAAE,cAAM,OAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,EAAvB,CAAuB,EACtC,SAAS,EAAC,MAAM,GAChB,IACE,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/common/SolidNotFoundPage.tsx

@@ -0,0 +1,37 @@
+import { Card } from "primereact/card";
+import { Button } from "primereact/button";
+import { useRouter } from "../../hooks/useRouter";
+
+type SolidNotFoundPageProps = {
+  title?: string;
+  message?: string;
+  actionLabel?: string;
+  actionHref?: string;
+};
+
+export const SolidNotFoundPage = ({
+  title = "Not Found",
+  message = "Requested resource is not available.",
+  actionLabel = "Go to Dashboard",
+  actionHref = "/admin",
+}: SolidNotFoundPageProps) => {
+  const router = useRouter();
+
+  return (
+    <div className="flex align-items-center justify-content-center" style={{ minHeight: "70vh" }}>
+      <Card className="w-full" style={{ maxWidth: 420 }}>
+        <div className="flex flex-column align-items-center text-center gap-3">
+          <div className="text-xl font-bold" style={{ color: "#3b82f6" }}>404</div>
+          <h2 className="m-0">{title}</h2>
+          <p className="m-0 text-sm">{message}</p>
+          <Button
+            label={actionLabel}
+            link
+            onClick={() => router.push(actionHref)}
+            className="mt-2"
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};

package/dist/components/common/SolidPopupContainer.d.ts

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

package/dist/components/common/SolidPopupContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidPopupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidPopupContainer.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,mBAAmB,sDAuBxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/common/SolidPopupContainer.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+// components/PopupContainer.tsx
+import { useSelector, useDispatch } from 'react-redux';
+import { closePopup } from '../../redux/features/popupSlice';
+import { Dialog } from 'primereact/dialog';
+import { getExtensionComponent } from '../../helpers/registry';
+var SolidPopupContainer = function () {
+    var _a = useSelector(function (state) { return state.popup; }), isOpen = _a.isOpen, event = _a.event;
+    var dispatch = useDispatch();
+    if (!isOpen)
+        return null;
+    var DynamicComponent = getExtensionComponent(event === null || event === void 0 ? void 0 : event.action);
+    return (_jsx(Dialog, { visible: isOpen, onHide: function () { return dispatch(closePopup()); }, closable: false, style: { width: event.popupWidth ? event.popupWidth : '50vw' }, modal: true, headerClassName: 'p-0', contentClassName: 'p-0', contentStyle: { borderRadius: 6 }, className: 'solid-common-dialog', children: DynamicComponent && _jsx(DynamicComponent, __assign({}, event)) }));
+};
+export default SolidPopupContainer;
+//# sourceMappingURL=SolidPopupContainer.js.map