@solidstarters/solid-core-ui 1.1.16 → 1.1.18

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -51,7 +51,8 @@ export class SolidTimeField implements ISolidField {
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -60,10 +61,12 @@ export class SolidTimeField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -136,6 +136,7 @@ export class SolidRelationManyToManyField implements ISolidField {
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -235,9 +236,11 @@ export class SolidRelationManyToManyField implements ISolidField {
             return (
                 <div className={className}>
                     <div className="flex align-items-center gap-3">
-                        <label className="form-field-label">
-                            {capitalize(fieldLayoutInfo.attrs.name)}
-                        </label>
+                        {showFieldLabel != false &&
+                            <label className="form-field-label">
+                                {capitalize(fieldLayoutInfo.attrs.name)}
+                            </label>
+                        }
                         {fieldLayoutInfo.attrs.inlineCreate === "true" &&
                             this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                         }
@@ -289,8 +292,9 @@ export class SolidRelationManyToManyField implements ISolidField {
     renderAutoCompleteMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -358,9 +362,11 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                </label>
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        {fieldLabel}
+                    </label>
+                }
                 <div className="flex align-items-center gap-3">
                     <AutoComplete
                         readOnly={readOnly}
@@ -388,7 +394,7 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         const params = {

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -7,6 +7,12 @@ import { useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { camelCase, capitalize } from "lodash";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Dialog } from "primereact/dialog";
+import { Panel } from "primereact/panel";
+import SolidFormView from "../../SolidFormView";
 
 
 export class SolidRelationManyToOneField implements ISolidField {
@@ -57,6 +63,8 @@ export class SolidRelationManyToOneField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -106,11 +114,36 @@ export class SolidRelationManyToOneField implements ISolidField {
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
+
+
+
+        const disabled = fieldLayoutInfo.attrs?.disabled;
+        const readOnly = fieldLayoutInfo.attrs?.readOnly;
+
+
+        const customCreateHandler = (values: any) => {
+            const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
+            const jsonValues = Object.fromEntries(values.entries());
+            const updatedRelationData = [
+                ...currentRelationData,
+                {
+                    label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: "new",
+                    original: jsonValues,
+                },
+            ];
+
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
+
+        }
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                            {fieldLabel}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}
@@ -122,8 +155,11 @@ export class SolidRelationManyToOneField implements ISolidField {
                         suggestions={autoCompleteItems}
                         completeMethod={autoCompleteSearch}
                         onChange={formik.handleChange}
-                        className="solid-standard-autocomplete"
+                        className="w-full solid-standard-autocomplete"
                     />
+                    {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                    }
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
@@ -131,4 +167,58 @@ export class SolidRelationManyToOneField implements ISolidField {
             </div>
         );
     }
+
+
+    renderSolidFormEmbededView(formik: FormikObject, customCreateHandler: any, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        const params = {
+            moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+            id: "new",
+            embeded: true,
+            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            customCreateHandler: ((values: any) => {
+                setvisibleCreateRelationEntity(false);
+                customCreateHandler(values)
+            }),
+            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
+            handlePopupClose: (() => {
+                setvisibleCreateRelationEntity(false);
+            }),
+            modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
+        }
+
+        return (
+            <div >
+                <Button
+                    icon="pi pi-plus"
+                    rounded
+                    outlined
+                    aria-label="Filter"
+                    type="button"
+                    size="small"
+                    onClick={() => setvisibleCreateRelationEntity(true)}
+                    className="custom-add-button"
+                />
+                <Dialog
+                    header=""
+                    showHeader={false}
+                    visible={visibleCreateRelationEntity}
+                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
+                    onHide={() => {
+                        if (!visibleCreateRelationEntity) return;
+                        setvisibleCreateRelationEntity(false);
+                    }}
+                    className="solid-dialog"
+                >
+                    <SolidFormView {...params} />
+
+                </Dialog>
+            </div>
+        )
+    }
 }

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -62,6 +62,7 @@ export class SolidRelationOneToManyField implements ISolidField {
         const [listViewParams, setListViewParams] = useState<any>()
         const [formViewParams, setformViewParams] = useState<any>()
         const [refreshList, setRefreshList] = useState(false); // Added state for rerender
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
 
         const handlePopupOpen = (id: any) => {
@@ -133,7 +134,10 @@ export class SolidRelationOneToManyField implements ISolidField {
         return (
             <div className={className}>
                 {/* <div className="justify-content-center align-items-center"> */}
-                    <label htmlFor={fieldLayoutInfo.attrs.name}  className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                }
+
                 {/* </div>
                 <br></br> */}
                 {listViewParams &&

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

@@ -237,7 +237,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           groupFilter: {
             limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsCount,
             offset: 0,
-            filters:filters
+            filters: filters
           }
           // sort: [`id:desc`],
         };
@@ -258,7 +258,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
   // clear Filter
 
-  const clearFilter = async() => {
+  const clearFilter = async () => {
     if (solidKanbanViewMetaData) {
       // initialFilterMethod()
     }
@@ -553,7 +553,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
   return (
-    <>
+    <div className="page-parent-wrapper">
       <div className="flex gap-3 mb-4 align-items-center justify-content-between kanban-view">
         <div className="flex gap-3 mb-4 align-items-center" >
 
@@ -610,7 +610,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       >
         <p>Are you sure you want to delete the selected records?</p>
       </Dialog>
-    </>
+    </div>
   );
 };
 

package/src/components/core/list/SolidListView.tsx

@@ -59,6 +59,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   // const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
 
   const [toPopulate, setToPopulate] = useState<string[]>([]);
+  const [toPopulateMedia, setToPopulateMedia] = useState<string[]>([]);
   const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
 
   const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
@@ -123,6 +124,8 @@ export const SolidListView = (params: SolidListViewParams) => {
 
     const initialFilters: any = {};
     const toPopulate: string[] = [];
+    const toPopulateMedia: string[] = [];
+
     for (let i = 0; i < solidView.layout.children?.length; i++) {
       const column = solidView.layout.children[i];
       const fieldMetadata = solidFieldsMetadata[column.attrs.name];
@@ -155,10 +158,14 @@ export const SolidListView = (params: SolidListViewParams) => {
       if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
         toPopulate.push(fieldMetadata.name);
       }
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.relationType === 'mediaMultiple') {
+        toPopulateMedia.push(fieldMetadata.name);
+      }
     }
     // setFilters(initialFilters);
     setRows(solidListViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? solidListViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
     setToPopulate(toPopulate);
+    setToPopulateMedia(toPopulateMedia);
   }
 
   useEffect(() => {
@@ -268,11 +275,12 @@ export const SolidListView = (params: SolidListViewParams) => {
 
   // Fetch data after toPopulate has been populated...
   useEffect(() => {
-    if (toPopulate) {
+    if (toPopulate || toPopulateMedia) {
       const queryData = {
         offset: 0,
         limit: 25,
         populate: toPopulate,
+        populateMedia: toPopulateMedia,
         sort: [`id:desc`],
         filters: { ...params.customFilter }
       };
@@ -288,7 +296,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       setSelectedRecoverRecords([]);
       setShowArchived(false);
     }
-  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate]);
+  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate, toPopulateMedia]);
 
   // Handle pagination event.
   const onPageChange = (event: any) => {
@@ -402,6 +410,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       limit: limit ?? rows,
       filters: filters ?? filters,
       populate: toPopulate,
+      populateMedia: toPopulateMedia
     };
 
     if (sortField) {
@@ -450,7 +459,6 @@ export const SolidListView = (params: SolidListViewParams) => {
   const op = useRef(null)
   const [deleteEntity, setDeleteEntity] = useState(false);
 
-
   // clickable link allowing one to open the detail / form view.
   const detailsBodyTemplate = (solidViewData: any) => {
     return (
@@ -472,62 +480,6 @@ export const SolidListView = (params: SolidListViewParams) => {
             <path d="M4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14ZM4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8ZM4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979166 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979166 4 1.45 4 2Z" fill="#666666" />
           </svg>
         </Button>
-        <OverlayPanel ref={op} className="solid-custom-overlay" style={{ top: 10 }}>
-          <div className="flex flex-column gap-1 p-1">
-            <Button
-              className="w-8rem text-left gap-2"
-              label="Edit"
-              size="small"
-              iconPos="left"
-              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M3.33333 12.6667H4.28333L10.8 6.15L9.85 5.2L3.33333 11.7167V12.6667ZM2 14V11.1667L10.8 2.38333C10.9333 2.26111 11.0806 2.16667 11.2417 2.1C11.4028 2.03333 11.5722 2 11.75 2C11.9278 2 12.1 2.03333 12.2667 2.1C12.4333 2.16667 12.5778 2.26667 12.7 2.4L13.6167 3.33333C13.75 3.45556 13.8472 3.6 13.9083 3.76667C13.9694 3.93333 14 4.1 14 4.26667C14 4.44444 13.9694 4.61389 13.9083 4.775C13.8472 4.93611 13.75 5.08333 13.6167 5.21667L4.83333 14H2ZM10.3167 5.68333L9.85 5.2L10.8 6.15L10.3167 5.68333Z" fill="#F9F0FF" />
-              </svg>}
-              onClick={() => {
-                console.log("solidViewData.id", solidViewData.id);
-
-                if (params.embeded == true) {
-                  params.handlePopUpOpen(solidsolidViewDataId);
-                } else {
-                  router.push(`${editButtonUrl}/${solidsolidViewDataId}`)
-                }
-              }}
-            />
-            <Button
-              text
-              className="w-8rem text-left gap-2"
-              label="Delete"
-              size="small"
-              iconPos="left"
-              severity="secondary"
-              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
-              </svg>}
-              onClick={() => setDeleteEntity(true)}
-            />
-            {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
-              solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
-                return (
-                  <Button
-                    text
-                    size="small"
-                    icon={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"}
-                    onClick={() => {
-                      setListRowActionData({
-                        modelName: params.modelName,
-                        moduleName: params.moduleName,
-                        rowAction: rowAction,
-                        rowData: solidViewData,
-                        closeListViewRowActionPopup: closeListViewRowActionPopup
-
-                      });
-                      setListViewRowActionPopupState(true)
-                    }
-                    }
-                  />
-                );
-              })}
-          </div>
-        </OverlayPanel>
       </div>
       // <a onClick={() => {
       //   if (params.embeded == true) {
@@ -673,7 +625,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [view, setView] = useState<string | any>(viewModes[0].value);
 
   return (
-    <>
+    <div className="page-parent-wrapper">
       <div className="page-header">
         <Toast ref={toast} />
         <div className="flex gap-3 align-items-center">
@@ -759,7 +711,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           rows={rows}
           rowsPerPageOptions={solidListViewMetaData?.data?.solidView?.layout?.attrs?.pageSizeOptions}
           dataKey="id"
-          emptyMessage="No Entities found."
+          emptyMessage={solidListViewMetaData?.data?.solidView?.model?.description || 'No Entities found.'}
           filterDisplay="menu"
           totalRecords={totalRecords}
           first={first}
@@ -898,12 +850,12 @@ export const SolidListView = (params: SolidListViewParams) => {
           </p>
           <p className="" style={{ color: 'var{--solid-grey-500}' }}>{selectedSolidViewData?.singularName}</p>
           <div className="flex align-items-center gap-2 mt-3">
-            <Button label="Delete" size="small" onClick={() => { deleteSolidSingleEntiry(solidsolidViewDataId); setDeleteEntity(false); }} />
-            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined />
+            <Button label="Delete" size="small" onClick={() => { deleteSolidSingleEntiry(selectedSolidViewData?.id); setDeleteEntity(false); }} />
+            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined className='bg-primary-reverse' />
           </div>
         </div>
       </Dialog>
-    </>
+    </div>
   );
 };
 

package/src/components/core/list/columns/SolidMediaMultipleColumn.tsx

@@ -9,11 +9,29 @@ const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
+    const imageBodyTemplate = (product: any) => {
+        if (!product?._media?.[fieldMetadata.name]) return null;
 
+        const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+        return (
+            <>
+                {imageUrls.map((url: string, index: number) => (
+                    <img
+                        key={index}
+                        src={url}
+                        alt={`product-image-${index}`}
+                        className="w-6rem shadow-2 border-round"
+                    />
+                ))}
+            </>
+        );
+    };
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
+            body={imageBodyTemplate}
             header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}

package/src/components/core/list/columns/SolidMediaSingleColumn.tsx

@@ -8,16 +8,37 @@ import { FilterMatchMode } from 'primereact/api';
 
 const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     // const filterable = column.attrs.filterable;
+
     const filterable = false;
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
+    const imageBodyTemplate = (product: any) => {
+        if (!product?._media?.[fieldMetadata.name]) return null;
+
+        const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+        return (
+            <>
+                {imageUrls.map((url: string, index: number) => (
+                    <img
+                        key={index}
+                        src={url}
+                        alt={`product-image-${index}`}
+                        className="w-6rem shadow-2 border-round"
+                    />
+                ))}
+            </>
+        );
+    };
+
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
+            body={imageBodyTemplate}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}

package/src/components/core/model/CreateModel.tsx

@@ -17,6 +17,7 @@ import { BackButton } from "@/components/common/BackButton";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { Dialog } from "primereact/dialog";
 import { Divider } from "primereact/divider";
+import { OverlayPanel } from "primereact/overlaypanel";
 
 interface ErrorResponseData {
   message: string;
@@ -303,6 +304,62 @@ const CreateModel = ({ data, params }: any) => {
     }
 
   }, [isCreateModelError, isDeleteModelError, isUpdateModelError])
+  const op = useRef(null);
+
+  const formActionDropdown = () => {
+    return (
+      <div>
+        <Button
+          outlined
+          severity="secondary"
+          type="button"
+          icon={
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z" fill="#4B4D52" />
+            </svg>
+          }
+          size="small"
+          className="bg-primary-reverse p-0"
+          style={{
+            height: 32,
+            width: 32
+          }}
+          onClick={(e) =>
+            // @ts-ignore 
+            op.current.toggle(e)
+          }
+        />
+        <OverlayPanel ref={op} className="solid-custom-overlay">
+          <div className="flex flex-column gap-1 p-1">
+            <Button
+              text
+              type="button"
+              className="w-8rem text-left gap-2 text-color"
+              label="Duplicate"
+              size="small"
+              iconPos="left"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
+              </svg>}
+            />
+            <Button
+              text
+              type="button"
+              className="w-8rem text-left gap-2 text-color"
+              label="Delete"
+              size="small"
+              iconPos="left"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
+              </svg>
+              }
+              onClick={() => setDeleteEntity(true)}
+            />
+          </div>
+        </OverlayPanel>
+      </div>
+    )
+  }
 
   return (
     <div className="solid-form-wrapper">
@@ -338,6 +395,7 @@ const CreateModel = ({ data, params }: any) => {
                   </>
                 }
                 <CancelButton />
+                {formActionDropdown()}
               </div>
             </>
           }

package/src/components/core/model/FieldMetaData.tsx

@@ -74,6 +74,30 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
     )
   };
 
+    const showToaster = async (message: any, severity: any) => {
+      const errorMessages = Object.values(message);
+      if (errorMessages.length > 0) {
+        toast?.current?.show({
+          severity: severity,
+          summary: "Can you send me the report?",
+          life: 3000,
+          //@ts-ignore
+          content: (props) => (
+            <div
+              className="flex flex-column align-items-left"
+              style={{ flex: "1" }}
+            >
+              {errorMessages.map((m, index) => (
+                <div className="flex align-items-center gap-2" key={index}>
+                  <span className="font-bold text-900">{String(m)}</span>
+                </div>
+              ))}
+            </div>
+          ),
+        });
+      }
+    };
+
 
 
   return (
@@ -124,6 +148,7 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
             header=""
             visible={visiblePopup}
             style={{ width: "40vw" }}
+            className="solid-dialog"
             onHide={() => {
               if (!visiblePopup) return;
 
@@ -131,7 +156,7 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
             }}
             showHeader={false}
           >
-            <FieldMetaDataForm modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp}></FieldMetaDataForm>
+            <FieldMetaDataForm modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>
           </Dialog>
           <Dialog
             visible={isRequiredPopUp}
@@ -149,6 +174,7 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
               </div>
             )}
             onHide={() => setIsRequiredPopUp(false)}
+            className="solid-dialog"
           >
             <p>If there is data against this model this operation might not work and manual intervention will be required</p>
           </Dialog>