@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/common/SolidExportStepper.tsx

@@ -0,0 +1,135 @@
+"use client";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import React, { useRef, useState } from "react";
+
+interface Step {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  solidFormViewWorkflowData: Step[];
+  activeValue: string;
+  setActiveValue: (value: string) => void;
+}
+
+export const SolidExportStepper = ({ solidFormViewWorkflowData, activeValue ,setActiveValue}: Props) => {
+  const formStepperOverlay = useRef<OverlayPanel>(null);
+  const activeIndex = solidFormViewWorkflowData.findIndex(step => step.value === activeValue);
+  const visibleSteps = solidFormViewWorkflowData.length > 5
+    ? solidFormViewWorkflowData.slice(0, 5)
+    : solidFormViewWorkflowData;
+    const handleStepClick = (value: string) => {
+        setActiveValue(value);
+      };
+  return (
+    <div className="flex solid-dynamic-stepper export-stepper">
+      {visibleSteps.map((step: any, index: number) => {
+                         const isActive = index === activeIndex;
+                         const isBeforeActive = index < activeIndex;
+                         const isAfterActive = index > activeIndex;
+                         const isFirstVisible = index === 0;
+                         const isLastVisible = index === visibleSteps.length - 1;
+                         const isNextAfterActive = index === activeIndex + 1;
+                         const isTwoStepsOnly = visibleSteps.length === 2;
+                         return (
+                             <Button
+                             key={index}
+                             type="button"
+                             className={`solid-step-button export relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}
+                             text={!isActive && !isBeforeActive}
+                                 onClick={() => handleStepClick(step.value)}
+                             >
+                                 {step.label}
+                                 <>
+                                     {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(activeValue) &&
+                                         (
+                                             <div className="absolute active-step-arrow">
+                                                 <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                     height="60px"
+                                                     width="60px"
+                                                 >
+                                                     <g id="SVGRepo_iconCarrier">
+                                                         <g id="color">
+                                                             <polygon fill={"var(--primary-color)"} points="36,62 65,12 7,12" />
+                                                         </g>
+                                                         <g id="line">
+                                                             <polyline fill="none" stroke="" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                         </g>
+                                                     </g>
+                                                 </svg>
+                                             </div>
+                                         )}
+     
+                                     {(isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (
+                                         <div className="absolute active-before-step-arrow">
+                                             <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                 height="55px"
+                                                 width="55px"
+                                             >
+                                                 <g id="SVGRepo_iconCarrier">
+                                                     <g id="color">
+                                                         <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                     <g id="line">
+                                                         <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                 </g>
+                                             </svg>
+                                         </div>
+                                     )}
+     
+                                     {isAfterActive && !isLastVisible && (
+                                         <div className="absolute inactive-step-arrow">
+                                             <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                 height="55px"
+                                                 width="55px"
+                                             >
+                                                 <g id="SVGRepo_iconCarrier">
+                                                     <g id="color">
+                                                         <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                     <g id="line">
+                                                         <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                 </g>
+                                             </svg>
+                                         </div>
+                                     )}
+                                 </>
+                                 {solidFormViewWorkflowData.length > 5 && index === 4 && (
+                                     <div className='absolute' style={{ right: 5 }}>
+                                         <Button
+                                             type='button'
+                                             icon="pi pi-angle-down"
+                                             text
+                                             size='small'
+                                             style={{ height: 24, width: '1.5rem', padding: 0 }}
+                                             onClick={(e) =>
+                                                 // @ts-ignore 
+                                                 formStepperOverlay.current.toggle(e)
+                                             }
+                                         />
+                                         <OverlayPanel ref={formStepperOverlay} className="solid-custom-overlay solid-form-stepper-overlay">
+                                             <div className='flex flex-column gap-1 p-1'>
+                                                 {solidFormViewWorkflowData.slice(5).map((step: any, index: number) => (
+                                                     <Button
+                                                         key={index}
+                                                         type='button'
+                                                         label={step.label}
+                                                         size='small'
+                                                         text
+                                                         onClick={() => handleStepClick(step.value)}
+                                                     />
+                                                 ))}
+                                             </div>
+                                         </OverlayPanel>
+                                     </div>
+                                 )}
+                             </Button>
+                         )
+                     })}
+    </div>
+  );
+};

package/src/components/common/SolidFieldTooltip.tsx

@@ -0,0 +1,23 @@
+"use client"
+import { Tooltip } from 'primereact/tooltip';
+import React from 'react'
+
+export const SolidFieldTooltip = ({ fieldContext }: any) => {
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const showTooltip = solidFormViewMetaData.data.solidView?.layout?.attrs?.showTooltip ?? true;
+    const tooltipPosition = solidFormViewMetaData.data.solidView?.layout?.attrs?.tooltipPosition;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+
+    return (
+        showTooltip && fieldDescription &&
+        <>
+            <Tooltip className='solid-field-tooltip' target=".solid-field-tooltip-icon" />
+            <i className="pi pi-info-circle solid-field-tooltip-icon"
+                data-pr-tooltip={fieldDescription}
+                data-pr-position={tooltipPosition}
+            />
+        </>
+    )
+}

package/src/components/common/SolidFormHeader.tsx

@@ -0,0 +1,25 @@
+"use client"
+import { SolidBreadcrumb } from './SolidBreadcrumb';
+import { SolidFormStepper } from './SolidFormStepper';
+
+interface Props {
+    solidFormViewMetaData?: any;
+    initialEntityData?: any;
+    modelName?: any;
+    id?: any,
+    solidWorkflowFieldValue?: any
+    setSolidWorkflowFieldValue?: any
+    onStepperUpdate?: () => void
+}
+
+export const SolidFormHeader = (props: Props) => {
+    const { solidFormViewMetaData, id } = props;
+    return (
+        <div className='flex flex-column gap-2 align-items-start xl:flex-row xl:align-items-center justify-content-between solid-dynamic-breadcrumb-stepper'>
+            <SolidBreadcrumb {...props} />
+            {solidFormViewMetaData?.data?.solidFormViewWorkflowData.length > 0 &&
+                <SolidFormStepper {...props} />
+            }
+        </div>
+    )
+}

package/src/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/src/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>
+    )
+}