@solidstarters/solid-core-ui 0.1.26 → 1.0.0

package/src/components/core/common/FilterComponent.tsx

@@ -0,0 +1,431 @@
+// @ts-nocheck
+'use client';
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Tooltip } from 'primereact/tooltip';
+import React, { useEffect, useState } from 'react';
+import { SolidFilterFields } from '../filter/SolidFilterFields';
+import { Button } from 'primereact/button';
+
+enum FilterRuleType {
+  RULE = 'rule',
+  RULE_GROUP = 'rule_group'
+}
+
+enum FilterOperator {
+  AND = 'and',
+  OR = 'or'
+}
+
+enum FilterMatchMode {
+  STARTS_WITH = 'startsWith',
+  CONTAINS = 'contains',
+  EQUALS = 'equals',
+  GREATER_THAN = 'gt',
+  LESS_THAN = 'lt',
+}
+
+interface FilterRule {
+  id: number;
+  type: FilterRuleType;
+  matchOperator?: FilterOperator;
+  fieldName?: string;
+  matchMode?: FilterMatchMode;
+  value?: any;
+  parentRule: number | null;
+  children?: FilterRule[];
+}
+
+interface Field {
+  name: string;
+  type: 'string' | 'number' | 'date';
+}
+
+// const fields: Field[] = [
+//   { name: 'name', type: 'string' },
+//   { name: 'dob', type: 'date' },
+//   { name: 'lastName', type: 'string' },
+//   { name: 'amount', type: 'number' }
+// ];
+
+const operatorOptions = {
+  // string: [FilterMatchMode.CONTAINS, FilterMatchMode.EQUALS],
+  // date: [FilterMatchMode.EQUALS, FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN],
+  // number: [FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN],
+  id: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  int: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  bigint: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  float: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  decimal: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  shortText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  longText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  richText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  boolean: [FilterMatchMode.EQUALS],
+  date: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN,],
+  datetime: [FilterMatchMode.EQUALS],
+  time: [FilterMatchMode.EQUALS],
+  relation: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  mediaSingle: [],
+  mediaMultiple: [],
+  selectionStatic: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  selectionDynamic: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  computed: [],
+  externalId: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  uuid: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+
+};
+
+const getRandomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Component to render a single filter rule
+const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  // const applicableOperators = rule.fieldName ? operatorOptions[fields.find(f => f.name === rule.fieldName)?.value.type].map(e => { return { name: e } }) : [];
+  // const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
+  const [fieldName, setFieldName] = useState({ name: rule.fieldName });
+  const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
+  console.log("fields", fields);
+
+  return (
+    // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
+    <div style={{ marginLeft: 5 + 'px' }} className="filter-rule">
+      <div className="filter-individual-rule">
+        <div className='filter-individual-rule-form'>
+          <div className="grid align-items-center">
+            <div className="col-10 p-0">
+              <div className="filter-component-fields">
+                <Dropdown
+                  key={rule.id}
+                  value={fieldName.name}
+                  onChange={e => {
+                    setFieldName({ name: e.value, value: e.value })
+                    onChange(rule.id, 'fieldName', e.value)
+                  }}
+                  options={fields}
+                  optionLabel='name'
+                  optionValue='name'
+                  placeholder="Select Field" className="w-full  md:w-14rem" />
+
+                {/* <Dropdown
+                    value={matchMode}
+                    onChange={e => {
+                      setMatchMode({ name: e.value.name })
+                      onChange(rule.id, 'matchMode', e.value.name)
+                    }}
+                    disabled={!rule.fieldName}
+                    options={applicableOperators}
+                    optionLabel='name'
+                    placeholder="Select Field" className="w-full filter-small-input md:w-14rem" /> */}
+                {rule.fieldName &&
+                  <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
+                }
+
+
+                {/* <div className="col-4">
+                  {applicableInputField === 'number' && (
+                    <InputNumber
+                      value={rule.value || ''}
+                      placeholder="Value"
+                      className='filter-small-input'
+                      onChange={(e) => onChange(rule.id, 'value', e.value)}
+                    />
+                  )
+                  }
+                  {applicableInputField === 'string' && (
+                    <InputText
+                      value={rule.value || ''}
+                      placeholder="Value"
+                      className='filter-small-input'
+                      onChange={(e) => onChange(rule.id, 'value', e.target.value)}
+                    />
+                  )
+                  }
+                  {applicableInputField === 'date' && (
+                    <Calendar value={rule.value || ''} onChange={(e) => onChange(rule.id, 'value', new Date(e.value))} dateFormat="dd/mm/yy" showIcon />
+                  )
+                  }
+                </div> */}
+
+
+              </div>
+            </div>
+            <div className="col-2 flex justify-content-end">
+              <button onClick={() => onAddRule(rule.parentRule)}>
+                <div className="card flex justify-content-center">
+                  {/* <Tooltip target=".custom-target-icon" /> */}
+
+                  <i className="custom-target-icon pi pi-plus-circle p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Add Rule"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+
+
+              </button>
+
+              {/* < Button
+                icon="pi pi-plus"
+                onClick={() => onAddGroup(rule.id)}
+                size="small"
+                className="small-button"
+                type="button"
+              />
+              <Button
+                icon="pi pi-trash"
+                onClick={() => onDelete(rule.id)}
+                size="small"
+                className="small-button"
+                severity="danger"
+                type="button"
+              /> */}
+              <button onClick={() => onAddGroup(rule.id)}>
+                <div className="card flex justify-content-center">
+
+                  <i className="custom-target-icon pi pi-sitemap p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Add Group"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+
+              </button>
+
+              <button onClick={() => onDelete(rule.id)}>
+                <div className="card flex justify-content-center">
+
+                  <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Delete Rule"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+              </button>
+
+            </div>
+
+          </div>
+
+
+
+
+
+        </div>
+
+      </div>
+
+      <div className="nested-rules">
+        {rule.children && rule.children.map(nestedRule => (
+          nestedRule.type === FilterRuleType.RULE
+            ? <FilterRuleComponent key={nestedRule.id} viewData={viewData} fields={fields} rule={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+            : <FilterGroupComponent key={nestedRule.id} viewData={viewData} fields={fields} group={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Component to render a group of filter rules
+const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  return (
+    <div style={{ marginLeft: 5 + 'px' }} className="filter-group">
+      {/* <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-group"> */}
+
+      <div className='flex justify-content-between align-items-center'>
+        <p className='m-0 mb-2 filter-text'> Match
+          <select className='filter-select'
+            value={group.matchOperator}
+            onChange={e => onChange(group.id, 'matchOperator', e.target.value)}
+          >
+            <option value={FilterOperator.AND}>AND</option>
+            <option value={FilterOperator.OR}>OR</option>
+          </select>
+          of the following rules:</p>
+
+        {/* <button onClick={() => onAddRule(group.id)}>Add Rule to Group</button> */}
+        {/* <button onClick={() => onAddGroup(group.id)}>Add Group to Group</button> */}
+
+        {/* Add Delete Button for non-root groups */}
+        {level > 0 && <button onClick={() => onDelete(group.id)}>
+          <div className="card flex justify-content-center">
+            <Tooltip target=".custom-target-icon" />
+
+            <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+              data-pr-tooltip="Delete Group"
+              data-pr-position="right"
+              data-pr-at="right+5 top"
+              data-pr-my="left center-2"
+              style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+            </i>
+          </div></button>}
+      </div>
+      {group.children && group.children.map(rule => (
+        rule.type === FilterRuleType.RULE
+          ? <FilterRuleComponent key={rule.id} viewData={viewData} fields={fields} rule={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+          : <FilterGroupComponent key={rule.id} viewData={viewData} fields={fields} group={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+      ))}
+    </div>
+  );
+};
+
+// Main Filter component
+const FilterComponent = ({ viewData, fields }) => {
+  const initialState: FilterRule[] = [
+    {
+      id: 1,
+      type: FilterRuleType.RULE_GROUP,
+      matchOperator: FilterOperator.OR,
+      parentRule: null,
+      children: [
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: 1,
+          children: []
+        }
+      ]
+    }
+  ];
+
+  const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+  const [printedState, setPrintedState] = useState<string>('');
+
+  const addChild = (rules, parentId, newChild) => {
+    return rules.map(rule => {
+      if (rule.id === parentId) {
+        return {
+          ...rule,
+          children: [...(rule.children || []), newChild]
+        };
+      } else if (rule.children) {
+        return {
+          ...rule,
+          children: addChild(rule.children, parentId, newChild)
+        };
+      }
+      return rule;
+    });
+  };
+
+  const handleChange = (id, key, value) => {
+    const updateRuleRecursively = (rules) => {
+      return rules.map(rule => {
+        if (rule.id === id) {
+          return { ...rule, [key]: value };
+        } else if (rule.children) {
+          return {
+            ...rule,
+            children: updateRuleRecursively(rule.children)
+          };
+        }
+        return rule;
+      });
+    };
+    setFilterRules(prev => updateRuleRecursively(prev));
+  };
+
+  const handleAddRule = (parentGroupId) => {
+    const newRule: FilterRule = {
+      id: Date.now(),
+      type: FilterRuleType.RULE,
+      fieldName: null,
+      matchMode: null,
+      value: null,
+      parentRule: parentGroupId,
+      children: []
+    };
+    setFilterRules(prev => addChild(prev, parentGroupId, newRule));
+  };
+
+  const handleAddGroup = (parentRuleId) => {
+    const newGroupId = Date.now();
+    const newGroup: FilterRule = {
+      id: newGroupId,
+      type: FilterRuleType.RULE_GROUP,
+      matchOperator: FilterOperator.AND,
+      parentRule: parentRuleId,
+      children: [
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        },
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        }
+      ]
+    };
+    setFilterRules(prev => addChild(prev, parentRuleId, newGroup));
+  };
+
+  const handleDeleteRule = (id) => {
+    const deleteRecursively = (rules, id) => {
+      return rules.filter(rule => rule.id !== id).map(rule => {
+        if (rule.children) {
+          return {
+            ...rule,
+            children: deleteRecursively(rule.children, id)
+          };
+        }
+        return rule;
+      });
+    };
+    setFilterRules(prev => deleteRecursively(prev, id));
+  };
+
+  const handlePrintState = () => {
+    setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
+  };
+
+  return (
+    <div className=''>
+      <div className="filter-builder">
+
+        {filterRules.map(rule => (
+          <FilterGroupComponent
+            key={rule.id}
+            viewData={viewData}
+            fields={fields}
+            group={rule}
+            onChange={handleChange}
+            onAddRule={handleAddRule}
+            onAddGroup={handleAddGroup}
+            onDelete={handleDeleteRule}
+            level={0} // Top-level group
+          />
+        ))}
+
+      </div>
+
+      <div>
+        <button onClick={handlePrintState}>Print State</button>
+        <br></br>
+        <textarea value={printedState} readOnly rows={20} cols={80} style={{ marginTop: '20px' }} />
+      </div>
+    </div>
+  );
+};
+
+export default FilterComponent;

package/src/components/core/common/LoadDynamicJsxComponent.tsx

@@ -0,0 +1,45 @@
+'use client';
+import dynamic from "next/dynamic";
+import path from "path";
+
+// Fallback component for missing components
+const FallbackComponent = ({ componentName }: any) => (
+    <div style={{ color: "red" }}>
+        Could not load <strong>{componentName}</strong>
+    </div>
+);
+
+type Props = {
+    context: any;
+};
+
+
+export const LoadDynamicJsxComponent = ({ context }: any) => {
+
+    
+
+    const Component = dynamic<Props>(
+        async () => {
+            try {
+               
+                const componentName = context?.rowAction?.action?.customComponent.split('/').pop();
+                const mod = await import(
+                    path.resolve(__dirname, 'src/components', context?.rowAction?.action?.customComponent)
+                );
+                // Return the default export or a named export matching the componentName
+                return mod.default || mod[componentName];
+            } catch (error) {
+                console.error(`Failed to load component "${context?.rowAction?.action?.customComponent}":`, error);
+                // Return a fallback component if the import fails
+                return () => <FallbackComponent componentName={context?.rowAction?.action?.customComponent} />;
+            }
+        },
+        { ssr: false } // Disable server-side rendering
+    );
+    return (
+        
+        <Component context={context}  />
+    );
+}
+
+

package/src/components/core/common/SolidConfigureLayoutElement.tsx

@@ -1,22 +1,30 @@
-import { Dialog } from "primereact/dialog";
+'use client';
 import { useState } from "react";
+import { Dialog } from "primereact/dialog";
+import dynamic from "next/dynamic";
 
 
-export const SolidConfigureLayoutElement = ({}: any) => {
+export const SolidConfigureLayoutElement = ({ }: any) => {
 
     const [visible, setVisible] = useState<boolean>(false);
 
+    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
+
     return (
         <div className="card flex justify-content-center">
-          <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
 
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </p>
+                <div>
+                   
+                </div>
+
             </Dialog>
         </div>
     )

package/src/components/core/common/SolidCreateButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { Button } from 'primereact/button';

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -1,11 +1,13 @@
-import { useState } from "react";
+'use client';
+import { useEffect, useState } from "react";
 import { Dialog } from "primereact/dialog";
 import { TabPanel, TabView } from "primereact/tabview";
-import { SolidKanbanFilter } from "../kanban/SolidKanbanFilter";
 import { SolidSearchBox } from "./SolidSearchBox";
+import FilterComponent from "@/components/core/common/FilterComponent";
+import { Button } from "primereact/button";
 
 
-export const SolidGlobalSearchElement = ({ solidKanbanViewMetaData, applyFilter, filterValues, setFilterValues }: any) => {
+export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues, setFilterValues }: any) => {
 
     const [visible, setVisible] = useState<boolean>(false);
     const handleApplyFilter = (filters: any) => {
@@ -13,20 +15,43 @@ export const SolidGlobalSearchElement = ({ solidKanbanViewMetaData, applyFilter,
         applyFilter(filters)
     }
 
+    const [fields, setFields] = useState<any[]>([]);
+
+    useEffect(() => {
+        if (viewData?.data?.solidFieldsMetadata) {
+            const fieldsData = viewData?.data?.solidFieldsMetadata
+            const fieldsList = Object.entries(fieldsData).map(([key, value]: any) => ({ name: key, value: key }));
+
+            setFields(fieldsList)
+        }
+    }, [])
+
+
     return (
 
 
         <div className="card flex justify-content-center">
             <i className="pi pi-search" onClick={() => setVisible(true)}></i>
-
-            <Dialog header={false} visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <div className="flex field-popup-navigation gap-3 justify-content-between ">
+                    <div className="flex text-2xl font-bold align-items-center ml-4" style={{ color: '#000' }}>
+                        <i className="pi pi-search" style={{ marginRight: '5px',color:"#06b6d4" }}></i>
+                        <p className="popup-heading m-0">Search and Filter</p>
+                    </div>
+                    <div className="flex align-items-center gap-3 close-popup">
+                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setVisible(false)} />
+                    </div>
+                </div>
                 <div className="card relative">
-                    <TabView>
+                    <TabView >
                         <TabPanel header="Search">
-                            <SolidSearchBox solidKanbanViewMetaData={solidKanbanViewMetaData}></SolidSearchBox>
+                            <SolidSearchBox viewData={viewData}></SolidSearchBox>
                         </TabPanel>
                         <TabPanel header="Filter" >
-                            <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter>
+                            {fields.length > 0 &&
+                                <FilterComponent viewData={viewData} fields={fields}></FilterComponent>
+                            }
+                            {/* <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter> */}
                         </TabPanel>
                     </TabView>
                 </div >

package/src/components/core/common/SolidSearchBox.tsx

@@ -1,14 +1,15 @@
+'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 
 
-export const SolidSearchBox = ({ solidKanbanViewMetaData }: any) => {
+export const SolidSearchBox = ({ viewData }: any) => {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
     const search = (event: any) => {
         // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
-    console.log("solidKanbanViewMetaData",solidKanbanViewMetaData?.data?.solidView?.model?.userKeyField);
+    console.log("viewData",viewData?.data?.solidView?.model?.userKeyField);
     return (
         <div className="card flex justify-content-center">
             <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />

package/src/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { useGenerateCodeForModelMutation } from "@/redux/api/modelApi";
+import { Button } from "primereact/button";
+
+
+export const GenerateModelCodeRowAction = ({ context }: any) => {
+
+    const [
+        generateCode,
+        { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
+    ] = useGenerateCodeForModelMutation();
+
+
+    const generateCodeHandler = async () => {
+        const response = await generateCode({ id: context.rowData.id })
+        context.closeCustomRowActionPopup();
+        console.log("response", response);
+    }
+
+    return (
+        <div>
+            <p className="">Click Ok to proceed with model code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
+            <p>Below is the list of files that will be created </p>
+            <ul>
+                <li>Model Entity File</li>
+                <li>Model Controller File</li>
+                <li>Model Service File</li>
+                <li>Model Create and Update Dto files</li>
+            </ul>
+            <div className="flex gap-5 justify-content-center">
+                <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
+                <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeCustomRowActionPopup()} />
+            </div>
+        </div >
+    )
+}
+
+

package/src/components/core/extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { useGenerateCodeFormoduleMutation } from "@/redux/api/moduleApi";
+import { Button } from "primereact/button";
+
+
+export const GenerateModuleCodeRowAction = ({ context, closeCustomRowActionPopup }: any) => {
+    const [
+        generateCode,
+        { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
+    ] = useGenerateCodeFormoduleMutation();
+
+    const generateCodeHandler = async () => {
+        const response = await generateCode({ id: context.rowData.id })
+        closeCustomRowActionPopup()
+
+    }
+
+    return (
+        <div>
+            <p className="text-center">Click Ok to proceed with module code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
+            <div className="flex gap-5 justify-content-center">
+                <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
+                <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={closeCustomRowActionPopup} />
+            </div>
+        </div >
+    )
+}
+