@solidstarters/solid-core-ui 0.1.26 → 1.0.0

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

@@ -1,24 +1,28 @@
+'use client';
 "use client";
-import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
-import { useRouter } from "next/navigation";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Column } from "primereact/column";
+import React, { useState, useEffect } from "react";
 import {
   DataTable,
   DataTableFilterMeta,
   DataTableStateEvent,
 } from "primereact/datatable";
-import { Dialog } from "primereact/dialog";
+import { Column } from "primereact/column";
+import { FilterMatchMode } from "primereact/api";
+import Link from "next/link";
 import qs from "qs";
-import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
+import { SolidListViewColumn } from "./SolidListViewColumn";
 import { SolidConfigureLayoutElement } from "../common/SolidConfigureLayoutElement";
 import { SolidCreateButton } from "../common/SolidCreateButton";
 import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
-import { SolidListViewColumn } from "./SolidListViewColumn";
+import { pascalCase } from "change-case";
+import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
+import { useRouter } from "next/navigation";
+import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 
 type SolidListViewParams = {
   moduleName: string;
@@ -168,6 +172,10 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [createButtonUrl, setCreateButtonUrl] = useState<string>();
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
 
+  // Custom Row Action
+  const [listViewRowActionPopupState, setListViewRowActionPopupState] = useState(false);
+  const [listViewRowActionData, setListRowActionData] = useState<any>();
+
   // Get the list view data.
   const [triggerGetSolidEntities, { data: solidEntityListViewData, isLoading, error }] = useLazyGetSolidEntitiesQuery();
 
@@ -471,6 +479,16 @@ export const SolidListView = (params: SolidListViewParams) => {
     });
   };
 
+  //   const handlCustomRowAction = ((i, rowData) : any) => {
+
+  // }
+
+  //Note -  Custom Row Action Popup 
+  const closeListViewRowActionPopup = () => {
+    setListViewRowActionPopupState(false)
+  }
+
+
   return (
     <>
       <div className="flex gap-3 mb-3 align-items-center justify-content-between align-items-top">
@@ -506,7 +524,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           }
 
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
-            <SolidGlobalSearchElement></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement viewData={solidListViewMetaData} ></SolidGlobalSearchElement>
           }
         </div>
         {params.embeded === false &&
@@ -548,6 +566,30 @@ export const SolidListView = (params: SolidListViewParams) => {
         {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
           <Column body={detailsBodyTemplate}></Column>
         }
+        {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
+          solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
+            return (
+              <Column
+                key={rowAction}
+                body={(rowData) => (
+                  <a onClick={() => {
+                    setListRowActionData({
+                      modelName: params.modelName,
+                      moduleName: params.moduleName,
+                      rowAction: rowAction,
+                      rowData: rowData,
+                      closeListViewRowActionPopup: closeListViewRowActionPopup
+
+                    });
+                    setListViewRowActionPopupState(true)
+                  }
+                  }>
+                    <i className={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"} /> {/* PrimeIcons pencil icon */}
+                  </a>
+                )}
+              />
+            );
+          })}
       </DataTable>
       <Dialog
         visible={isDialogVisible}
@@ -563,6 +605,17 @@ export const SolidListView = (params: SolidListViewParams) => {
       >
         <p>Are you sure you want to delete the selected records?</p>
       </Dialog>
+
+
+      {listViewRowActionData &&
+        <Dialog
+          visible={listViewRowActionPopupState}
+          modal
+          onHide={closeListViewRowActionPopup}
+        >
+          <ListViewRowActionPopup context={listViewRowActionData}></ListViewRowActionPopup>
+        </Dialog>
+      }
     </>
   );
 };

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

@@ -1,23 +1,24 @@
 "use client";
+import SolidIntColumn from "./columns/SolidIntColumn";
 import SolidBigintColumn from "./columns/SolidBigintColumn";
+import SolidFloatColumn from "./columns/SolidFloatColumn";
+import SolidDecimalColumn from "./columns/SolidDecimalColumn";
+import SolidShortTextColumn from "./columns/SolidShortTextColumn";
+import SolidLongTextColumn from "./columns/SolidLongTextColumn";
+import SolidRichTextColumn from "./columns/SolidRichTextColumn";
 import SolidBooleanColumn from "./columns/SolidBooleanColumn";
-import SolidComputedColumn from "./columns/SolidComputedColumn";
 import SolidDateColumn from "./columns/SolidDateColumn";
 import SolidDatetimeColumn from "./columns/SolidDatetimeColumn";
-import SolidDecimalColumn from "./columns/SolidDecimalColumn";
-import SolidExternalIdColumn from "./columns/SolidExternalIdColumn";
-import SolidFloatColumn from "./columns/SolidFloatColumn";
-import SolidIntColumn from "./columns/SolidIntColumn";
-import SolidLongTextColumn from "./columns/SolidLongTextColumn";
-import SolidMediaMultipleColumn from "./columns/SolidMediaMultipleColumn";
-import SolidMediaSingleColumn from "./columns/SolidMediaSingleColumn";
+import SolidTimeColumn from "./columns/SolidTimeColumn";
 import SolidRelationColumn from "./columns/SolidRelationColumn";
-import SolidRichTextColumn from "./columns/SolidRichTextColumn";
-import SolidSelectionDynamicColumn from "./columns/SolidSelectionDynamicColumn";
+import SolidMediaSingleColumn from "./columns/SolidMediaSingleColumn";
+import SolidMediaMultipleColumn from "./columns/SolidMediaMultipleColumn";
 import SolidSelectionStaticColumn from "./columns/SolidSelectionStaticColumn";
-import SolidShortTextColumn from "./columns/SolidShortTextColumn";
-import SolidTimeColumn from "./columns/SolidTimeColumn";
+import SolidSelectionDynamicColumn from "./columns/SolidSelectionDynamicColumn";
+import SolidComputedColumn from "./columns/SolidComputedColumn";
+import SolidExternalIdColumn from "./columns/SolidExternalIdColumn";
 import SolidUuidColumn from "./columns/SolidUuidColumn";
+import { Column } from "primereact/column";
 
 export type SolidListViewColumnParams = {
     solidListViewMetaData: any;

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

@@ -1,6 +1,8 @@
+'use client';
+import React, { } from "react";
 import { usePathname } from 'next/navigation';
+import FilterMenu from "@/components/layout/FilterMenu";
 import { plural } from "pluralize";
-import { } from "react";
 
 
 const SolidListingHeader = () => {

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

@@ -1,7 +1,9 @@
+'use client';
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { InputTypes } from "./SolidVarInputsFilterElement"
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import qs from "qs";
 import { useState } from "react";
+import qs from "qs";
 
 
 export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {

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

@@ -1,3 +1,4 @@
+'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 import qs from "qs";

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

@@ -1,5 +1,8 @@
+'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
+import qs from "qs";
+import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
 
 
 export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {

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

@@ -1,3 +1,4 @@
+'use client';
 import { Button } from "primereact/button"
 import { Calendar } from "primereact/calendar";
 import { InputNumber } from "primereact/inputnumber";

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidIntColumn from './SolidIntColumn';
 

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

@@ -1,6 +1,12 @@
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { Dropdown } from 'primereact/dropdown';
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
+import { classNames } from 'primereact/utils';
+import { Dropdown } from 'primereact/dropdown';
 
 const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidShortTextColumn from './SolidShortTextColumn';
 import SolidIntColumn from './SolidIntColumn';

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 export const dateFilterMatchModeOptions = [
     { label: 'Equals', value: FilterMatchMode.EQUALS },

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

@@ -1,7 +1,9 @@
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
 
 const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidIntColumn from './SolidIntColumn';
 

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidIntColumn from './SolidIntColumn';
 

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.filterable;

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidShortTextColumn from './SolidShortTextColumn';
 

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

@@ -1,3 +1,5 @@
+'use client';
+import React from 'react';
 import { Column } from "primereact/column";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 

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

@@ -1,5 +1,10 @@
-import { Column } from "primereact/column";
+'use client';
+import React from 'react';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     // const filterable = column.attrs.filterable;

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidRelationManyToOneColumn from './relations/SolidRelationManyToOneColumn';
 

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

@@ -1,3 +1,4 @@
+'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import SolidShortTextColumn from './SolidShortTextColumn';
 

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 
 const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,7 +1,10 @@
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
 
 const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {

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

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

package/src/components/core/list/columns/relations/SolidRelationManyToOneColumn.tsx

@@ -1,8 +1,10 @@
-import { FilterMatchMode } from 'primereact/api';
+'use client';
+import React from 'react';
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
 
 const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;

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

@@ -1,18 +1,18 @@
 "use client"
 
-import { CancelButton } from "@/components/common/CancelButton";
-import { handleError } from "@/helpers/ToastContainer";
-import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
-import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "@/redux/api/modelApi";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import React, { useEffect, useRef, useState } from "react";
+import { TabView, TabPanel } from "primereact/tabview";
 import { usePathname, useRouter } from "next/navigation";
 import { Button } from "primereact/button";
-import { TabPanel, TabView } from "primereact/tabview";
+import ModelMetaData from "./ModelMetaData";
+import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "@/redux/api/modelApi";
+import FieldMetaData from "./FieldMetaData";
+import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
 import { Toast } from "primereact/toast";
+import { CancelButton } from "@/components/common/CancelButton";
 import qs from "qs";
-import { useEffect, useRef, useState } from "react";
-import FieldMetaData from "./FieldMetaData";
-import ModelMetaData from "./ModelMetaData";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import { handleError } from "@/helpers/ToastContainer";
 
 
 interface ErrorResponseData {

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

@@ -1,13 +1,16 @@
-import { usePathname } from "next/navigation";
+'use client';
+import React, { useEffect, useRef, useState } from "react";
 import { Button } from "primereact/button";
-import { Column } from "primereact/column";
-import { DataTable } from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
-import { useMountEffect } from "primereact/hooks";
-import { Messages } from "primereact/messages";
-import { Toast } from "primereact/toast";
-import { useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { hideFieldsPopup } from "@/redux/features/popupSlice";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
 import FieldMetaDataForm from "./FieldMetaDataForm";
+import { Toast } from "primereact/toast";
+import { Messages } from "primereact/messages";
+import { useMountEffect } from "primereact/hooks";
+import { usePathname } from "next/navigation";
 
 
 const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef }: any) => {

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

@@ -1,3 +1,4 @@
+'use client';
 import React, { useEffect, useRef, useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";

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

@@ -1,4 +1,7 @@
-import { useState } from 'react';
+'use client';
+import React, { useState } from 'react';
+import { Card } from 'primereact/card';
+import { TabView, TabPanel } from 'primereact/tabview';
 
 const FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {
 

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

@@ -1,22 +1,27 @@
 "use client";
-import { CreateButton } from "@/components/common/CreateButton";
+import React, { useState, useEffect } from "react";
+import {
+  DataTable,
+  DataTableFilterMeta,
+  DataTableStateEvent,
+} from "primereact/datatable";
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FilterMatchMode, FilterOperator } from "primereact/api";
+import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+import { Calendar } from "primereact/calendar";
+import { InputNumber, InputNumberChangeEvent } from "primereact/inputnumber";
+import Link from "next/link";
+import { FilterIcon } from "@/components/modelsComponents/filterIcon";
+import { CustomTag } from "@/components/Tag/CustomTag";
 import {
   useDeleteMultipleModelsMutation,
   useGenerateCodeForModelMutation,
   useLazyGetModelsQuery,
 } from "@/redux/api/modelApi";
-import Link from "next/link";
-import { FilterMatchMode } from "primereact/api";
+import { CreateButton } from "@/components/common/CreateButton";
+import qs from "qs";
 import { Button } from "primereact/button";
-import { Column } from "primereact/column";
-import {
-  DataTable,
-  DataTableFilterMeta,
-  DataTableStateEvent,
-} from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
-import qs from "qs";
-import { useEffect, useState } from "react";
 
 export interface ModelMetaData {
   id: string;

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

@@ -1,18 +1,23 @@
-import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectAutoCompleteField";
-import { getSingularAndPlural } from "@/helpers/helpers";
-import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
+'use client';
+import React, { useEffect, useRef, useState } from "react";
 import { useLazyGetmodulesQuery } from "@/redux/api/moduleApi";
 import { useFormik } from "formik";
-import { usePathname, useRouter } from "next/navigation";
-import { Checkbox } from "primereact/checkbox";
+import * as Yup from "yup";
 import { InputText } from "primereact/inputtext";
-import { InputTextarea } from "primereact/inputtextarea";
+import { Button } from "primereact/button";
+import { classNames } from "primereact/utils";
 import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
-import { classNames } from "primereact/utils";
+import { usePathname, useRouter } from "next/navigation";
 import qs from "qs";
-import React, { useEffect, useRef, useState } from "react";
-import * as Yup from "yup";
+import { getSingularAndPlural } from "@/helpers/helpers";
+import { InputTextarea } from "primereact/inputtextarea";
+import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
+import { Checkbox } from "primereact/checkbox";
+import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectAutoCompleteField";
+import { Messages } from "primereact/messages";
+import { useMountEffect } from "primereact/hooks";
+import { useGetModelsQuery } from "@/redux/api/modelApi";
 
 const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allModelsNames, deleteModelFunction, nextTab, formikModelMetadataRef,params }: any, ref) => {