@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/common/SolidExportStepper.tsx

@@ -1,135 +0,0 @@
-
-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

@@ -1,23 +0,0 @@
-
-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

@@ -1,25 +0,0 @@
-
-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

@@ -1,336 +0,0 @@
-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/src/components/common/SolidModuleHome.tsx

@@ -1,128 +0,0 @@
-
-
-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>
-    )
-}