@solidstarters/solid-core-ui 1.1.210 → 1.1.212

package/dist/components/common/SolidFormStepper.tsx

@@ -0,0 +1,350 @@
+"use client"
+import { Button } from 'primereact/button'
+import { OverlayPanel } from 'primereact/overlaypanel';
+import React, { useEffect, useRef, useState } from 'react'
+import { createSolidEntityApi } from '../../redux/api/solidEntityApi';
+import { useFormik } from 'formik';
+import { Toast } from 'primereact/toast';
+import { useSearchParams } from 'next/navigation';
+import { ERROR_MESSAGES } from '../../constants/error-messages';
+
+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 showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const handleStepChange = async (values: any) => {
+        try {
+            const result = await updateStepper({ id: values.id, data: { [solidWorkflowFieldKey]: values[solidWorkflowFieldKey] } }).unwrap();
+            if (result?.statusCode === 200) {
+                showToast("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("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.map

@@ -1 +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"}
+{"version":3,"file":"SolidModuleHome.d.ts","sourceRoot":"./","sources":["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

@@ -12,16 +12,14 @@ 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, _c;
-    var _d = _a.moduleName, moduleName = _d === void 0 ? "Dashboard" : _d;
-    var _e = useSession(), session = _e.data, status = _e.status;
-    var dispatch = useDispatch();
-    var visibleNavbar = useSelector(function (state) { var _a; return (_a = state.navbarState) === null || _a === void 0 ? void 0 : _a.visibleNavbar; });
+export const SolidModuleHome = ({ moduleName = "Dashboard" }) => {
+    const { data: session, status } = useSession();
+    const dispatch = useDispatch();
+    const visibleNavbar = useSelector((state) => state.navbarState?.visibleNavbar);
     //@ts-ignore
-    var user = (_c = (_b = session === null || session === void 0 ? void 0 : session.user) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.username;
-    var _f = useState(false), showAccountSettings = _f[0], setShowAccountSettings = _f[1];
-    var toggleBothSidebars = function () {
+    const user = session?.user?.user?.username;
+    const [showAccountSettings, setShowAccountSettings] = useState(false);
+    const toggleBothSidebars = () => {
         if (visibleNavbar) {
             dispatch(toggleNavbar()); // close both
         }
@@ -47,11 +45,11 @@ export var SolidModuleHome = function (_a) {
                                 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 () {
+                            }].map((card, i) => (_jsx("div", { className: 'col-12 md:col-6 xl:col-4', children: _jsxs("div", { className: `${styles.solidModuleHomeColorCards} ${card.class}`, children: [_jsxs("div", { children: [_jsx("div", { className: styles.solidModuleHomeCardSvgWrapper, children: card.icon }), _jsx("h3", { className: `${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: () => {
                                                 if (card.type === 'popup') {
                                                     setShowAccountSettings(true);
                                                 }
-                                            } })) })] }) }, i)); }) })] }), showAccountSettings &&
+                                            } })) })] }) }, i))) })] }), showAccountSettings &&
                 _jsx(SolidAccountSettings, { showProfileSettingsDialog: showAccountSettings, setShowProfileSettingsDialog: setShowAccountSettings })] }));
 };
 //# sourceMappingURL=SolidModuleHome.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidModuleHome.js","sourceRoot":"","sources":["../../../src/components/common/SolidModuleHome.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SolidModuleHome.js","sourceRoot":"./","sources":["components/common/SolidModuleHome.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,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,WAAW,CAAC;AAC7B,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,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,GAAG,WAAW,EAAwB,EAAE,EAAE;IAClF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IACpF,YAAY;IACZ,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC;IAC3C,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,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,YAC5F,eAAK,SAAS,EAAC,+BAA+B,aAC9C,cAAK,SAAS,EAAC,0CAA0C,EAAC,OAAO,EAAE,kBAAkB,YACjF,YAAG,SAAS,EAAC,gBAAgB,GAAK,GAChC,EACF,YAAG,SAAS,EAAC,mCAAmC,YAC3C,UAAU,GACX,IACF,GACA,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,KAAK,CAAC,CAAC,CAAC,IAAI,IAC5C,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,8EAA8E;gCAC3F,KAAK,EAAE,MAAM,CAAC,gBAAgB;gCAC9B,GAAG,EAAE,4CAA4C;6BACpD,EAAE;gCACC,IAAI,EAAE,KAAC,OAAO,KAAG;gCACjB,KAAK,EAAE,UAAU;gCACjB,WAAW,EAAE,0FAA0F;gCACvG,KAAK,EAAE,MAAM,CAAC,gBAAgB;gCAC9B,GAAG,EAAE,gDAAgD;6BACxD,EAAE;gCACC,IAAI,EAAE,KAAC,WAAW,KAAG;gCACrB,KAAK,EAAE,UAAU;gCACjB,WAAW,EAAE,gFAAgF;gCAC7F,KAAK,EAAE,MAAM,CAAC,kBAAkB;gCAChC,IAAI,EAAE,OAAO;6BAChB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,cAAK,SAAS,EAAC,0BAA0B,YACrC,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,IAAI,CAAC,KAAK,EAAE,aAC/D,0BACI,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,YAAG,IAAI,CAAC,IAAI,GAAO,EACvE,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,OAAO,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,GAAG,EAAE;gDACV,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,CAAC,GACA,IACJ,EACL,mBAAmB;gBAChB,KAAC,oBAAoB,IACjB,yBAAyB,EAAE,mBAAmB,EAC9C,4BAA4B,EAAE,sBAAsB,GACtD,IAEJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { useSession } from 'next-auth/react'\nimport styles from './solidModuleHome.module.css'\nimport { Button } from 'primereact/button';\nimport { DocsSvg } from '../Svg/DocsSvg';\nimport { SettingsSvg } from '../Svg/SettingsSvg';\nimport { DevDocs } from '../Svg/DevDocs';\nimport { HomePageModuleSvg } from '../Svg/HomePageModuleSvg';\nimport Link from 'next/link';\nimport { useState } from 'react';\nimport { SolidAccountSettings } from '../core/common/SolidAccountSettings/SolidAccountSettings';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { showNavbar, toggleNavbar } from \"../../redux/features/navbarSlice\";\n\ntype SolidModuleHomeProps = {\n    moduleName?: string;\n};\n\nexport const SolidModuleHome = ({ moduleName = \"Dashboard\" }: SolidModuleHomeProps) => {\n    const { data: session, status } = useSession();\n    const dispatch = useDispatch();\n    const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);\n    //@ts-ignore\n    const user = session?.user?.user?.username;\n    const [showAccountSettings, setShowAccountSettings] = useState(false);\n\n    const toggleBothSidebars = () => {\n        if (visibleNavbar) {\n            dispatch(toggleNavbar());   // close both\n        } else {\n            dispatch(showNavbar());     // open both\n        }\n    };\n\n    return (\n        <div className=\"h-screen surface-0 overflow-y-auto\">\n            <div className=\"page-header\" style={{ borderBottom: '1px solid var(--primary-light-color)' }}>\n            <div className='flex align-items-center gap-2'>\n            <div className=\"apps-icon block md:hidden cursor-pointer\" onClick={toggleBothSidebars}>\n                <i className=\"pi pi-th-large\"></i>\n            </div>\n                <p className=\"m-0 view-title solid-text-wrapper\">\n                    {moduleName}\n                </p>\n            </div>\n            </div>\n            <div className=\"p-4 md:p-5 flex flex-column gap-4\">\n                <div className={styles.solidModuleWelcomeSection}>\n                    <div className='flex flex-column gap-2 pr-3 lg:pr-0'>\n                        <h3 className={styles.solidModuleHomeTitle1}>\n                            Welcome, {status === \"loading\" ? \"...\" : user}\n                        </h3>\n                        <p className='m-0 w-35rem text-sl'>\n                            This is the home page for the {moduleName} module. You can find documentation and settings below.\n                        </p>\n                    </div>\n                    <div className={styles.homeSvg}>\n                        <HomePageModuleSvg />\n                    </div>\n                </div>\n\n                {/* Cards */}\n                <div className='grid'>\n                    {[{\n                        icon: <DocsSvg />,\n                        title: 'Admin Docs',\n                        description: 'Explore the administrator documentation to manage and configure your system.',\n                        class: styles.dashboardCardOne,\n                        url: 'https://docs.solidxai.com/docs/admin-docs/'\n                    }, {\n                        icon: <DevDocs />,\n                        title: 'Dev Docs',\n                        description: 'Dive into the developer documentation to build, extend, and integrate with the platform.',\n                        class: styles.dashboardCardTwo,\n                        url: 'https://docs.solidxai.com/docs/developer-docs/'\n                    }, {\n                        icon: <SettingsSvg />,\n                        title: 'Settings',\n                        description: 'Access and update your account settings, preferences, and profile information.',\n                        class: styles.dashboardCardThree,\n                        type: 'popup'\n                    }].map((card, i) => (\n                        <div className='col-12 md:col-6 xl:col-4' key={i}>\n                            <div className={`${styles.solidModuleHomeColorCards} ${card.class}`}>\n                                <div>\n                                    <div className={styles.solidModuleHomeCardSvgWrapper}>{card.icon}</div>\n                                    <h3 className={`${styles.solidModuleHomeTitle1} mt-4`}>{card.title}</h3>\n                                    <p className='mb-0 mt-2 mr-2 text-xs'>\n                                        {card.description}\n                                    </p>\n                                </div>\n                                <div>\n                                    {card.url ? (\n                                        <Link href={card.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                                            <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)' }} />\n                                        </Link>\n                                    ) : (\n                                        <Button\n                                            outlined\n                                            label='Open'\n                                            size='small'\n                                            icon=\"pi pi-cog\"\n                                            iconPos='right'\n                                            className=\"font-bold\"\n                                            style={{ background: 'var(--solid-module-home-add-button-bg)' }}\n                                            onClick={() => {\n                                                if (card.type === 'popup') {\n                                                    setShowAccountSettings(true);\n                                                }\n                                            }}\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n                    ))}\n                </div>\n            </div>\n            {showAccountSettings &&\n                <SolidAccountSettings\n                    showProfileSettingsDialog={showAccountSettings}\n                    setShowProfileSettingsDialog={setShowAccountSettings}\n                />\n            }\n        </div>\n    )\n}"]}

package/dist/components/common/SolidModuleHome.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { useSession } from 'next-auth/react'
+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 'next/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?.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/SolidPopupContainer.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"SolidPopupContainer.d.ts","sourceRoot":"./","sources":["components/common/SolidPopupContainer.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,mBAAmB,sDAuBxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/common/SolidPopupContainer.js

@@ -1,28 +1,17 @@
 "use client";
-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();
+const SolidPopupContainer = () => {
+    const { isOpen, event } = useSelector((state) => state.popup);
+    const 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)) }));
+    const DynamicComponent = getExtensionComponent(event?.action);
+    return (_jsx(Dialog, { visible: isOpen, onHide: () => 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, { ...event }) }));
 };
 export default SolidPopupContainer;
 //# sourceMappingURL=SolidPopupContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidPopupContainer.js","sourceRoot":"","sources":["../../../src/components/common/SolidPopupContainer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;;;;;;;;;;;AACZ,gCAAgC;AAChC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI3D,IAAM,mBAAmB,GAAG;IAClB,IAAA,KAAoB,WAAW,CAAC,UAAC,KAAgB,IAAK,OAAA,KAAK,CAAC,KAAK,EAAX,CAAW,CAAC,EAAhE,MAAM,YAAA,EAAE,KAAK,WAAmD,CAAC;IACzE,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,CAAC;IAE9D,OAAO,CACH,KAAC,MAAM,IACH,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,cAAM,OAAA,QAAQ,CAAC,UAAU,EAAE,CAAC,EAAtB,CAAsB,EACpC,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,EAC9D,KAAK,QACL,eAAe,EAAC,KAAK,EACrB,gBAAgB,EAAC,KAAK,EACtB,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EACjC,SAAS,EAAC,qBAAqB,YAE9B,gBAAgB,IAAI,KAAC,gBAAgB,eAAK,KAAK,EAAI,GAC/C,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SolidPopupContainer.js","sourceRoot":"./","sources":["components/common/SolidPopupContainer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,gCAAgC;AAChC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC7B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAE9D,OAAO,CACH,KAAC,MAAM,IACH,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,EACpC,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,EAC9D,KAAK,QACL,eAAe,EAAC,KAAK,EACrB,gBAAgB,EAAC,KAAK,EACtB,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EACjC,SAAS,EAAC,qBAAqB,YAE9B,gBAAgB,IAAI,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAC/C,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["\"use client\"\n// components/PopupContainer.tsx\nimport { useSelector, useDispatch } from 'react-redux';\nimport { RootState } from '../../types/solid-core';\nimport { closePopup } from '../../redux/features/popupSlice';\nimport { Dialog } from 'primereact/dialog';\nimport { get } from 'lodash';\nimport { getExtensionComponent } from '../../helpers/registry';\nimport { Button } from 'primereact/button';\n\n\nconst SolidPopupContainer = () => {\n    const { isOpen, event } = useSelector((state: RootState) => state.popup);\n    const dispatch = useDispatch();\n\n    if (!isOpen) return null;\n\n    const DynamicComponent = getExtensionComponent(event?.action);\n\n    return (\n        <Dialog\n            visible={isOpen}\n            onHide={() => dispatch(closePopup())}\n            closable={false}\n            style={{ width: event.popupWidth ? event.popupWidth : '50vw' }}\n            modal\n            headerClassName='p-0'\n            contentClassName='p-0'\n            contentStyle={{ borderRadius: 6 }}\n            className='solid-common-dialog'\n        >\n            {DynamicComponent && <DynamicComponent {...event} />}\n        </Dialog>\n    );\n};\n\nexport default SolidPopupContainer;\n"]}

package/dist/components/common/SolidPopupContainer.tsx

@@ -0,0 +1,37 @@
+"use client"
+// components/PopupContainer.tsx
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../types/solid-core';
+import { closePopup } from '../../redux/features/popupSlice';
+import { Dialog } from 'primereact/dialog';
+import { get } from 'lodash';
+import { getExtensionComponent } from '../../helpers/registry';
+import { Button } from 'primereact/button';
+
+
+const SolidPopupContainer = () => {
+    const { isOpen, event } = useSelector((state: RootState) => state.popup);
+    const dispatch = useDispatch();
+
+    if (!isOpen) return null;
+
+    const DynamicComponent = getExtensionComponent(event?.action);
+
+    return (
+        <Dialog
+            visible={isOpen}
+            onHide={() => dispatch(closePopup())}
+            closable={false}
+            style={{ width: event.popupWidth ? event.popupWidth : '50vw' }}
+            modal
+            headerClassName='p-0'
+            contentClassName='p-0'
+            contentStyle={{ borderRadius: 6 }}
+            className='solid-common-dialog'
+        >
+            {DynamicComponent && <DynamicComponent {...event} />}
+        </Dialog>
+    );
+};
+
+export default SolidPopupContainer;