@solidstarters/solid-core-ui 1.1.37 → 1.1.40

package/src/components/common/SolidFormHeader.tsx

@@ -0,0 +1,22 @@
+"use client"
+import { SolidBreadcrumb } from './SolidBreadcrumb';
+import { SolidFormStepper } from './SolidFormStepper';
+
+interface Props {
+    solidFormViewMetaData?: any;
+    initialEntityData?: any;
+    modelName?: any;
+    id?:any
+}
+
+export const SolidFormHeader = (props: Props) => {
+    const { solidFormViewMetaData } = props;
+    return (
+        <div className='flex 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,65 +1,217 @@
 "use client"
 import { Button } from 'primereact/button'
 import { OverlayPanel } from 'primereact/overlaypanel';
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { createSolidEntityApi } from '@/redux/api/solidEntityApi';
+import { useFormik } from 'formik';
+import { Toast } from 'primereact/toast';
 
-export const SolidFormStepper = () => {
+interface Props {
+    solidFormViewMetaData?: any;
+    modelName?: any,
+    initialEntityData?: any;
+    id?: any
+}
+
+export const SolidFormStepper = (props: Props) => {
+    const { solidFormViewMetaData, modelName, initialEntityData, id } = props;
+    const toast = useRef<Toast>(null);
     const formStepperOverlay = useRef(null);
 
+    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 [solidWorkflowFieldValue, setSolidWorkflowFieldValue] = useState<string>("");
+
+    useEffect(() => {
+        if (!solidWorkflowField) return;
+
+        setSolidWorkflowFieldKey(solidWorkflowField);
+
+        setSolidWorkflowFieldValue(() => {
+            if (initialEntityData?.[solidWorkflowField] !== undefined) {
+                console.log("checkloginitial", initialEntityData[solidWorkflowField]);
+                return initialEntityData[solidWorkflowField];
+            } else if (defaultWorkflowFieldValue !== undefined) {
+                console.log("checklogdefault", defaultWorkflowFieldValue);
+                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,
+            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", `${defaultWorkflowFieldDisplayName} Update`, `${defaultWorkflowFieldDisplayName} updated successfully!`);
+                if (result?.data?.[solidWorkflowFieldKey]) {
+                    setSolidWorkflowFieldValue(result.data[solidWorkflowFieldKey]);
+                }
+            }
+        } catch (error) {
+            console.error('Error updating stepper:', error);
+            showToast("error", "Update Failed", "Failed to update the form.");
+        }
+    }
+
+    const handleButtonClick = (stepValue: any) => {
+        formik.setFieldValue(solidWorkflowFieldKey, stepValue);
+        formik.handleSubmit();
+    }
+
+    const activeIndex = solidFormViewWorkflowData.findIndex((step: any) => step.value === solidWorkflowFieldValue);
+    const visibleSteps = solidFormViewWorkflowData.length > 5 ? solidFormViewWorkflowData.slice(0, 5) : solidFormViewWorkflowData;
+    console.log("activeIndex:", activeIndex, "solidWorkflowFieldValue:", solidWorkflowFieldValue);
+
     return (
-        <div className='flex justify-content-end'>
-            <Button type='button' severity='secondary' className='solid-step-button btn-step-first'>Step 1</Button>
-            <Button type='button' className='solid-step-button btn-step'>Step 2</Button>
-            <Button type='button' className='solid-step-button btn-step-last relative'>
-                Step 3
-                <div className='absolute' style={{ right: 8 }}>
-                    <Button
-                        type='button'
-                        icon="pi pi-angle-down"
-                        text
-                        size='small'
-                        style={{ height: 24, width: '1.5rem' }}
-                        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'>
-                            <Button
-                                type='button'
-                                label='Step 01'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 02'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 03'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 04'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 05'
-                                size='small'
-                                text
-                            />
-                        </div>
-                    </OverlayPanel>
-                </div>
-            </Button>
-        </div>
+        <>
+            <Toast ref={toast} />
+            <div className='flex solid-dynamic-stepper' style={solidWorkflowFieldEnabled === false ? { pointerEvents: 'none' } : {}}>
+                {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;
+                    console.log("isActive", isActive);
+
+                    return (
+                        <Button
+                            key={index}
+                            type="button"
+                            className={`solid-step-button relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}
+                            text={!isActive && !isBeforeActive}
+                            onClick={() => handleButtonClick(step.value)}
+                        >
+                            {step.label}
+                            <>
+                                {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(solidWorkflowFieldValue) &&
+                                    (
+                                        <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="48px"
+                                                width="48px"
+                                            >
+                                                <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="" stroke-miterlimit="10" stroke-width="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="48px"
+                                            width="48px"
+                                        >
+                                            <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)" stroke-miterlimit="10" stroke-width="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="48px"
+                                            width="48px"
+                                        >
+                                            <g id="SVGRepo_iconCarrier">
+                                                <g id="color">
+                                                    <polygon fill="#fff" points="36,62 65,12 7,12" />
+                                                </g>
+                                                <g id="line">
+                                                    <polyline fill="none" stroke="var(--solid-stepper-border)" stroke-miterlimit="10" stroke-width="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={() => handleButtonClick(step.value)}
+                                                />
+                                            ))}
+                                        </div>
+                                    </OverlayPanel>
+                                </div>
+                            )}
+                        </Button>
+                    )
+                })}
+            </div>
+        </>
     )
 }

package/src/components/common/SolidModuleHome.tsx

@@ -0,0 +1,68 @@
+"use client"
+import { Card } from "primereact/card"
+type SolidModuleParams = {
+    moduleName: string;
+}
+export const SolidModuleHome = (params: SolidModuleParams) => {
+    const formatName = (moduleName: string) => {
+        return moduleName
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
+            .join(' ');
+    };
+    return (
+        <div className="page-parent-wrapper">
+            <div className="surface-0 text-center">
+                <div className="mb-3 font-bold text-3xl">
+                    <span className="text-900">One Product, </span>
+                    <span className="text-blue-600">Many Solutions</span>
+                </div>
+                <div className="text-700 mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+                <div className="grid">
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-desktop text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Built for Developers</div>
+                        <span className="text-700 line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-lock text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">End-to-End Encryption</div>
+                        <span className="text-700 line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-check-circle text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Easy to Use</div>
+                        <span className="text-700 line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-globe text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Fast & Global Support</div>
+                        <span className="text-700 line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-github text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Open Source</div>
+                        <span className="text-700 line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+                    </div>
+                    <div className="col-12 md:col-4 md:mb-4 mb-0 px-3">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-shield text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Trusted Securitty</div>
+                        <span className="text-700 line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/core/form/SolidFormView.tsx

@@ -41,6 +41,8 @@ import { SolidFormWidgetProps, SolidLoadForm } from "@/types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
 import { Panel } from "primereact/panel";
+import { SolidFormStepper } from "@/components/common/SolidFormStepper";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -1176,17 +1178,23 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    {params.embeded !== true &&
+                    {/* {params.embeded !== true &&
                         <SolidBreadcrumb
                             solidViewData={solidFormViewMetaData?.data?.solidView?.model}
                             initialEntityData={initialEntityData}
                         />
-                    }
-                    {/* {params.embeded !== true &&
-                        <div className="solid-form-stepper">
-                            <SolidFormStepper />
-                        </div>
                     } */}
+                    {params.embeded !== true &&
+                        // <div className="solid-form-stepper">
+                            <SolidFormHeader 
+                                // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
+                                solidFormViewMetaData={solidFormViewMetaData}
+                                initialEntityData={initialEntityData}
+                                modelName={params.modelName}
+                                id={params.id}
+                            />
+                        // </div>
+                    }
                     <div className="p-4 solid-form-content">
                         {DynamicHeaderComponent && <DynamicHeaderComponent />}
                         {renderFormDynamically(formViewMetaData)}

package/src/components/core/kanban/KanbanBoard.tsx

@@ -24,7 +24,7 @@ interface ApiResponse {
     };
 }
 
-export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination }: any) => {
+export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination ,setLightboxUrls, setOpenLightbox }: any) => {
     const [loading, setLoading] = useState<boolean>(true);
     // State to manage the folded status of each column
     const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
@@ -102,17 +102,22 @@ export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewDa
                     return (
                         <KanbanColumn
                             key={data.groupName}
+                            groupedView={groupedView}
                             groupByField={data.groupName}
                             group={group}
-                            solidViewMetaData={solidViewMetaData}
+                            solidKanbanViewMetaData={solidKanbanViewMetaData}
                             groupData={data.groupData.records}
                             toggleFold={toggleFold}
                             handleLoadMore={handleLoadMore}
+                            setLightboxUrls={setLightboxUrls}
+                             setOpenLightbox={setOpenLightbox}
                         />
                     );
                 })}
-                <div className="kanban-load-more-folded">
-                    <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
+                {groupedView !== false &&
+                    <div className="kanban-load-more-folded">
+                        <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
+                }
             </div>
         </DragDropContext>
     );

package/src/components/core/kanban/KanbanCard.tsx

@@ -4,6 +4,7 @@
 import { Draggable, DraggableProvided } from "@hello-pangea/dnd";
 import { Card } from "primereact/card";
 import React from "react";
+import { SolidKanbanViewFields } from "./SolidKanbanViewFields";
 
 // Define the types for the data and props
 interface Data {
@@ -14,21 +15,46 @@ interface Data {
 
 interface KanbanCardProps {
   data: Data;
-  solidViewMetaData: any;
+  solidKanbanViewMetaData: any;
   index: number;
 }
 
-const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index }) => {
+// Render columns dynamically based on metadata
+const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData: any, setLightboxUrls?: any, setOpenLightbox?: any) => {
+  if (!solidKanbanViewMetaData) {
+    return;
+  }
+
+  const solidView = solidKanbanViewMetaData.solidView;
+  const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+  if (!solidView || !solidFieldsMetadata) {
+    return;
+  }
+  const fieldMetadata = solidFieldsMetadata[field.attrs.name];
+  const fieldLayout = field;
+  return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox });
+  // return solidView.layout.children?.map((column: any) => {
+  //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+  //   if (!fieldMetadata) {
+  //     return;
+  //   }
+
+  //   return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, column });
+
+  // });
+};
+
+const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox }) => {
 
   const SolidRow = ({ children, attrs }: any) => {
     const className = attrs.className;
     return (
       <div className={`row ${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
       </div>
     );
@@ -38,10 +64,10 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
     return (
       <div className={`${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
 
       </div>
@@ -52,28 +78,28 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
     return (
       <div className={`${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
 
       </div>
     );
   };
 
-  const SolidField = ({ field, initialEntityData, solidFormViewMetaData }: any) => {
+  const SolidField = ({ field, data, solidKanbanViewMetaData }: any) => {
 
-    switch (initialEntityData[field.attrs.name].type) {
-      case "mediaSingle":
-        return <img src=""></img>
-      default:
-        return <p>{initialEntityData[field.attrs.name]}</p>
+    return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox)
+    // switch (solidKanbanViewMetaData[field.attrs.name].type) {
+    //   case "mediaSingle":
+    //     return <img src=""></img>
+    //   default:
+    //     return <p>{initialEntityData[field.attrs.name]}</p>
 
-    }
+    // }
   };
 
-
   const SolidCard = ({ children }: any) => (
     <div className="p-fluid p-grid">
       {children}
@@ -81,36 +107,36 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
   );
 
   // Now render the form dynamically...
-  const renderFormElementDynamically: any = (element: any, solidViewMetaData: any) => {
+  const renderFormElementDynamically: any = (element: any, solidKanbanViewMetaData: any) => {
     const { type, attrs, children } = element;
     // const key = attrs?.name ?? generateRandomKey();
     const key = attrs?.name;
     switch (type) {
       case "card":
-        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidCard>;
+        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidCard>;
       case "row":
-        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidRow>;
+        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidRow>;
       case "column":
-        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidColumn>;
+        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidColumn>;
       case "image":
-        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidImage>;
+        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidImage>;
 
       case "field": {
         // const fieldMetadata = solidFieldsMetadata[attrs.name];
-        const fieldMetadata = solidViewMetaData.solidFieldsMetadata[attrs.name];
-        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} initialEntityData={data ? data : null} solidViewMetaData={solidViewMetaData} />;
+        const fieldMetadata = solidKanbanViewMetaData.solidFieldsMetadata[attrs.name];
+        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} data={data ? data : null} solidKanbanViewMetaData={solidKanbanViewMetaData} />;
       }
       default:
         return null;
     }
   };
 
-  const renderFormDynamically = (solidViewMetaData: any) => {
-    if (!solidViewMetaData) {
+  const renderFormDynamically = (solidKanbanViewMetaData: any) => {
+    if (!solidKanbanViewMetaData) {
       return;
     }
-    const solidView = solidViewMetaData.solidView;
-    const solidFieldsMetadata = solidViewMetaData.solidFieldsMetadata;
+    const solidView = solidKanbanViewMetaData.solidView;
+    const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
     if (!solidView || !solidFieldsMetadata) {
       return;
     }
@@ -118,7 +144,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
       return;
     }
     const updatedLayout = solidView.layout.children;
-    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidViewMetaData));
+    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData));
     return dynamicForm;
   };
 
@@ -132,6 +158,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           style={{ marginBottom: "1rem", ...provided.draggableProps.style }}
+          className="kanban-card-container"
         >
           {/* <p className="kanban-card-heading">{data.title}</p> */}
           {/* <p className="kanban-card-content">{data.content}</p> */}
@@ -142,10 +169,10 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
             }}
             elevation={snapshot.isDragging ? 3 : 1}
           >
-            {renderFormDynamically(solidViewMetaData)}
+            {renderFormDynamically(solidKanbanViewMetaData)}
 
-            {/* {solidViewMetaData?.solidView?.layout?.layoutData &&
-              Object.entries(solidViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
+            {/* {solidKanbanViewMetaData?.solidView?.layout?.layoutData &&
+              Object.entries(solidKanbanViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
                 <p className="kanban-card-heading" key={key}>{data[value]}</p>
               ))
             } */}