@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

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

@@ -1,5 +1,4 @@
 
-import { SingleSelectAutoCompleteField } from "../../../components/common/SingleSelectAutoCompleteField";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { getSingularAndPlural } from "../../../helpers/helpers";
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
@@ -7,43 +6,40 @@ import { useLazyGetModelsQuery } from "../../../redux/api/modelApi";
 import { useLazyGetmodulesQuery } from "../../../redux/api/moduleApi";
 import { useFormik } from "formik";
 import { snakeCase } from "lodash";
-import { usePathname } from "../../../hooks/usePathname";
-import { useRouter } from "../../../hooks/useRouter";
-import { Checkbox } from "primereact/checkbox";
-import { Divider } from "primereact/divider";
-import { InputText } from "primereact/inputtext";
-import { InputTextarea } from "primereact/inputtextarea";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
-import { classNames } from "primereact/utils";
 import qs from "qs";
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { showToast } from "../../../redux/features/toastSlice";
 import * as Yup from "yup";
+import { SolidAutocomplete, SolidCheckbox, SolidInput, SolidPanel, SolidTextarea } from "../../shad-cn-ui";
+import { useSolidAutocompleteField } from "../../../hooks/useSolidAutocompleteField";
+import styles from "../form/fields/solidFields.module.css";
+
+const cx = (...parts: Array<string | false | null | undefined | Record<string, boolean>>) => {
+  const classes: string[] = [];
+  parts.forEach((part) => {
+    if (!part) return;
+    if (typeof part === "string") {
+      classes.push(part);
+      return;
+    }
+    Object.entries(part).forEach(([key, value]) => {
+      if (value) classes.push(key);
+    });
+  });
+  return classes.join(" ");
+};
 
 const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allModelsNames, deleteModelFunction, nextTab, formikModelMetadataRef, params, formErrors, setIsDirty }: any, ref) => {
 
   // const ModelMetaData = ({ modelMetaData, setModelMetaData, deleteModelFunction, nextTab, formikModelMetadataRef }: any) => {   
 
-  const router = useRouter();
   const dispatch = useDispatch();
-  const pathname = usePathname();
 
   const [triggerGetModules, { data: moduleData, isFetching: isModuleFetching, error: moduleError }] = useLazyGetmodulesQuery();
   const [triggerGetModels, { data: modelData, isFetching: isModelFetching, error: modelError }] = useLazyGetModelsQuery();
   const { data: fieldDefaultMetaData, isLoading, error, refetch } = useGetFieldDefaultMetaDataQuery(null);
-
-
-  const dataSourceTypes = [
-    { label: "Mysql", value: "mysql" },
-    { label: "Postgres", value: "postgres" },
-    { label: "Mssql", value: "mssql" },
-    { label: "Oracle", value: "oracle" },
-    { label: "Mariadb", value: "mariadb" },
-  ];
-
-
+  
 
   const initialValues = {
     singularName: modelMetaData ? modelMetaData?.singularName : "",
@@ -147,6 +143,40 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
   const isFormFieldValid = (formik: any, fieldName: string) =>
     formik.touched[fieldName] && formik.errors[fieldName];
 
+  const getFieldErrorMessage = (fieldName: string, fallbackField?: string) => {
+    const errors = formik.errors as Record<string, any>;
+    const message =
+      errors[fieldName] ??
+      (fallbackField ? errors[fallbackField] : undefined) ??
+      formErrors[fieldName] ??
+      (fallbackField ? formErrors[fallbackField] : undefined);
+    return message;
+  };
+
+  const fieldHasError = (fieldName: string, fallbackField?: string) => {
+    return Boolean(
+      isFormFieldValid(formik, fieldName) ||
+        (fallbackField && isFormFieldValid(formik, fallbackField)) ||
+        formErrors[fieldName] ||
+        (fallbackField && formErrors[fallbackField])
+    );
+  };
+
+  const renderFieldError = (fieldName: string, fallbackField?: string) => {
+    if (!fieldHasError(fieldName, fallbackField)) {
+      return null;
+    }
+
+    const message = getFieldErrorMessage(fieldName, fallbackField);
+
+    if (!message) {
+      return null;
+    }
+
+    const errorText = Array.isArray(message) ? message.join(", ") : String(message);
+    return <p className={styles.fieldError}>{errorText}</p>;
+  };
+
   const formik = useFormik({
     initialValues,
     validationSchema,
@@ -341,530 +371,320 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
     }
   }, [formik.dirty]);
 
+  const moduleField = useSolidAutocompleteField({
+    formik,
+    fieldName: "module",
+    fieldNameId: "moduleId",
+    labelKey: "displayName",
+    valueKey: "id",
+    searchData: searchModule,
+    existingData: formik.values.module,
+    relationField: true,
+    additionalAction: (e: any) => setSelectedModule(e.value),
+  });
+
+  const dataSourceField = useSolidAutocompleteField({
+    formik,
+    fieldName: "dataSource",
+    labelKey: "label",
+    valueKey: "value",
+    searchData: serachDataSource,
+    existingData: formik.values.dataSource,
+    additionalAction: (e: any) => formik.setFieldValue("dataSourceType", e.target.value.type),
+  });
+
+  const parentModelField = useSolidAutocompleteField({
+    formik,
+    fieldName: "parentModel",
+    fieldNameId: "parentModelId",
+    labelKey: "displayName",
+    valueKey: "id",
+    searchData: searchModel,
+    existingData: formik.values.parentModel,
+    relationField: true,
+  });
+
   return (
 
     <>
       <form onSubmit={formik.handleSubmit}>
-        {/* <div className="form-wrapper-subtitle">Name</div> */}
         <div className="">
           <div className="grid formgrid">
             <div className="field col-12 lg:col-6 lg:pr-3">
-              {/* <p className="form-wrapper-heading text-base">Basic Info</p> */}
-              <Panel header={"Basic Info"} className="solid-column-panel">
-                <div className="flex flex-column gap-2 mt-3">
-                  <label htmlFor="type" className="form-field-label">
+              <SolidPanel header={"Basic Info"} className="solid-column-panel">
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="moduleId" className={styles.fieldLabel}>
                     Module
                   </label>
-                  <SingleSelectAutoCompleteField
-                    disabled={params.id !== 'new'}
-                    key="module"
-                    formik={formik}
-                    isFormFieldValid={isFormFieldValid}
-                    relationField={true}
-                    fieldName="module"
-                    fieldNameId="moduleId"
-                    labelKey="displayName"
-                    valueKey="id"
-                    searchData={searchModule}
-                    existingData={formik.values.module}
-                    formErrors={formErrors}
-                    additionalAction={(e: any) => setSelectedModule(e.value)}
-                  />
-                  {(isFormFieldValid(formik, "module") || (formErrors["module"])) && (
-                    <Message severity="error" text={formik?.errors?.moduleId?.toString()} />
-                  )}
+                  <div
+                    className={cx(
+                      "solid-standard-autocomplete w-full",
+                      fieldHasError("module", "moduleId") && styles.fieldInvalidControl
+                    )}
+                  >
+                    <SolidAutocomplete
+                      disabled={params.id !== "new"}
+                      value={moduleField.selectedItem}
+                      suggestions={moduleField.filteredItems}
+                      completeMethod={moduleField.searchItems}
+                      onChange={moduleField.handleChange}
+                      dropdown
+                      field="displayName"
+                      className="w-full"
+                    />
+                  </div>
+                  {renderFieldError("module", "moduleId")}
                 </div>
 
-                <div className="flex flex-column gap-2 mt-3 lg:mt-4">
-                  <label htmlFor="dataSource" className="form-field-label">
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="dataSource" className={styles.fieldLabel}>
                     Data Source
                   </label>
-                  <SingleSelectAutoCompleteField
-                    disabled={params.id !== 'new'}
-                    key="dataSource"
-                    formik={formik}
-                    isFormFieldValid={isFormFieldValid}
-                    // relationField={false}
-                    fieldName="dataSource"
-                    fieldNameId={null}
-                    labelKey="label"
-                    valueKey="value"
-                    searchData={serachDataSource}
-                    existingData={formik.values.dataSource}
-                    additionalAction={(e: any) => formik.setFieldValue("dataSourceType", e.target.value.type)}
-                    formErrors={formErrors}
-                  />
-                  {formik.values.dataSourceType && <p className="form-field-label text-sm">Your datasource will connect to a {formik.values.dataSourceType} database</p>}
-                  {(isFormFieldValid(formik, "dataSource") || (formErrors["dataSource"])) && (
-                    <Message severity="error" text={formik?.errors?.dataSource?.toString()} />
+                  <div
+                    className={cx(
+                      "solid-standard-autocomplete w-full",
+                      fieldHasError("dataSource") && styles.fieldInvalidControl
+                    )}
+                  >
+                    <SolidAutocomplete
+                      disabled={params.id !== "new"}
+                      value={dataSourceField.selectedItem}
+                      suggestions={dataSourceField.filteredItems}
+                      completeMethod={dataSourceField.searchItems}
+                      onChange={dataSourceField.handleChange}
+                      dropdown
+                      field="label"
+                      className="w-full"
+                    />
+                  </div>
+                  {formik.values.dataSourceType && (
+                    <p className="form-field-label text-sm">
+                      Your datasource will connect to a {formik.values.dataSourceType} database
+                    </p>
                   )}
+                  {renderFieldError("dataSource")}
                 </div>
+              </SolidPanel>
 
-
-                {/* <div className="field col-12 flex flex-column gap-2 my-4">
-                  <label htmlFor="dataSourceType" className="form-field-label">
-                    Data Source Type
-                  </label>
-                  <SingleSelectAutoCompleteField
-                            key="dataSourceType"
-                            formik={formik}
-                            isFormFieldValid={isFormFieldValid}
-                            // relationField={false}
-                            fieldName="dataSourceType"
-                            fieldNameId={null}
-                            labelKey="label"
-                            valueKey="value"
-                            searchData={serachDataSourceType}
-                            existingData={formik.values.dataSourceType}
-                          /> 
-                  <InputText
-                    disabled
-                    type="text"
-                    id="dataSourceType"
-                    name="dataSourceType"
-                    onChange={formik.handleChange}
-                    value={formik.values.dataSourceType}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "dataSourceType"),
-                    })}
-                  />
-
-
-                  {isFormFieldValid(formik, "dataSourceType") && (
-                    <Message severity="error" text={formik?.errors?.dataSourceType?.toString()} />
-                  )}
-                </div>*/}
-              </Panel>
-              {/* <Divider /> */}
-              {/* <p className="form-wrapper-heading text-base">Configurations</p> */}
-              <Panel header={"Configurations"} className="solid-column-panel mt-3 mb-3 lg:mt-5">
-                {/* {params.id === 'new' &&
-
-                  <div className="field col-6">
-                    <div className="flex align-items-center gap-2">
-                      <Checkbox
-                        disabled={params.id !== 'new'}
-                        name="isSystem"
-                        onChange={(e) => {
-                          formik.setFieldValue("isSystem", e.checked);
-                        }}
-                        checked={formik.values.isSystem}
-                      ></Checkbox>
-                      <label htmlFor="isSystem" className="form-field-label">
-                        Is System
-                      </label>
-                    </div>
-                    {isFormFieldValid(formik, "isSystem") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.isSystem?.toString()}
-                      />
-                    )}
-                  </div>} */}
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+              <SolidPanel header={"Configurations"} className="solid-column-panel mt-3 mb-3 lg:mt-5">
+                <div className="mt-2">
+                  <SolidCheckbox
                     name="enableSoftDelete"
-                    onChange={(e) => {
-                      formik.setFieldValue("enableSoftDelete", e.checked);
+                    disabled={params.id !== "new"}
+                    checked={!!formik.values.enableSoftDelete}
+                    onChange={(event) => {
+                      formik.setFieldValue("enableSoftDelete", event.currentTarget.checked);
                     }}
-                    disabled={params.id !== 'new'}
-                    checked={formik.values.enableSoftDelete}
-                  ></Checkbox>
-                  <label htmlFor="enableSoftDelete" className="form-field-label">
-                    Enable Soft Delete
-                  </label>
-                </div>
-                {params.id !== 'new' && <p className="form-field-label mt-1 text-sm">Soft-delete can only be set during initial creation to maintain data integrity</p>}
-                {(isFormFieldValid(formik, "enableSoftDelete") || (formErrors["enableSoftDelete"])) && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.enableSoftDelete?.toString()}
-                    className="mt-2"
+                    label="Enable Soft Delete"
                   />
-                )}
+                  {params.id !== "new" && (
+                    <p className="form-field-label mt-1 text-sm">
+                      Soft-delete can only be set during initial creation to maintain data integrity
+                    </p>
+                  )}
+                  {renderFieldError("enableSoftDelete")}
+                </div>
 
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+                <div className="mt-3">
+                  <SolidCheckbox
                     name="isChild"
-                    onChange={(e) => {
-                      formik.setFieldValue("isChild", e.checked);
+                    disabled={params.id !== "new"}
+                    checked={!!formik.values.isChild}
+                    onChange={(event) => {
+                      formik.setFieldValue("isChild", event.currentTarget.checked);
                     }}
-                    disabled={params.id !== 'new'}
-                    checked={formik.values.isChild}
-                  ></Checkbox>
-                  <label htmlFor="isChild" className="form-field-label">
-                    Is Child
-                  </label>
-                </div>
-                {params.id !== 'new' && <p className="form-field-label mt-1 text-sm">Is Current Model child of another Model</p>}
-                {(isFormFieldValid(formik, "isChild") || (formErrors["isChild"])) && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.isChild?.toString()}
-                    className="mt-2"
+                    label="Is Child"
                   />
-                )}
-                {showParentModel &&
-                  <div className="flex flex-column gap-2 mt-3">
-                    <label htmlFor="type" className="form-field-label">
+                  {params.id !== "new" && (
+                    <p className="form-field-label mt-1 text-sm">
+                      Is Current Model child of another Model
+                    </p>
+                  )}
+                  {renderFieldError("isChild")}
+                </div>
+
+                {showParentModel && (
+                  <div className={styles.fieldWrapper}>
+                    <label htmlFor="parentModelId" className={styles.fieldLabel}>
                       Parent Model
                     </label>
-                    <SingleSelectAutoCompleteField
-                      disabled={params.id !== 'new'}
-                      key="parentModel"
-                      formik={formik}
-                      isFormFieldValid={isFormFieldValid}
-                      relationField={true}
-                      fieldName="parentModel"
-                      fieldNameId="parentModelId"
-                      labelKey="displayName"
-                      valueKey="id"
-                      searchData={searchModel}
-                      existingData={formik.values.parentModel}
-                      formErrors={formErrors}
-                    />
-                    {(isFormFieldValid(formik, "parentModel") || (formErrors["parentModel"])) && (
-                      <Message severity="error" text={formik?.errors?.parentModelId?.toString()} />
-                    )}
+                    <div
+                      className={cx(
+                        "solid-standard-autocomplete w-full",
+                        fieldHasError("parentModel", "parentModelId") && styles.fieldInvalidControl
+                      )}
+                    >
+                      <SolidAutocomplete
+                        disabled={params.id !== "new"}
+                        value={parentModelField.selectedItem}
+                        suggestions={parentModelField.filteredItems}
+                        completeMethod={parentModelField.searchItems}
+                        onChange={parentModelField.handleChange}
+                        dropdown
+                        field="displayName"
+                        className="w-full"
+                      />
+                    </div>
+                    {renderFieldError("parentModel", "parentModelId")}
                   </div>
-                }
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+                )}
+
+                <div className="mt-3">
+                  <SolidCheckbox
                     name="enableAuditTracking"
-                    onChange={(e) => {
-                      formik.setFieldValue("enableAuditTracking", e.checked);
+                    checked={!!formik.values.enableAuditTracking}
+                    onChange={(event) => {
+                      formik.setFieldValue("enableAuditTracking", event.currentTarget.checked);
                     }}
-                    checked={formik.values.enableAuditTracking}
-                  ></Checkbox>
-                  <label htmlFor="enableAuditTracking" className="form-field-label">
-                    Enable Audit Tracking
-                  </label>
-                </div>
-                {(isFormFieldValid(formik, "enableAuditTracking") || (formErrors["enableAuditTracking"])) && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.enableAuditTracking?.toString()}
-                    className="mt-2"
+                    label="Enable Audit Tracking"
                   />
-                )}
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+                  {renderFieldError("enableAuditTracking")}
+                </div>
+
+                <div className="mt-3">
+                  <SolidCheckbox
                     name="internationalisation"
-                    onChange={(e) => {
-                      formik.setFieldValue("internationalisation", e.checked);
+                    checked={!!formik.values.internationalisation}
+                    onChange={(event) => {
+                      formik.setFieldValue("internationalisation", event.currentTarget.checked);
                     }}
-                    checked={formik.values.internationalisation}
-                  ></Checkbox>
-                  <label htmlFor="internationalisation" className="form-field-label">
-                    Is Internationalisation Enabled
-                  </label>
+                    label="Is Internationalisation Enabled"
+                  />
                 </div>
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+
+                <div className="mt-3">
+                  <SolidCheckbox
                     name="draftPublishWorkflow"
-                    onChange={(e) => {
-                      formik.setFieldValue("draftPublishWorkflow", e.checked);
+                    checked={!!formik.values.draftPublishWorkflow}
+                    onChange={(event) => {
+                      formik.setFieldValue("draftPublishWorkflow", event.currentTarget.checked);
                     }}
-                    checked={formik.values.draftPublishWorkflow}
-                  ></Checkbox>
-                  <label htmlFor="draftPublishWorkflow" className="form-field-label">
-                    Draft/Publish Workflow
-                  </label>
+                    label="Draft/Publish Workflow"
+                  />
                 </div>
-                <div className="flex align-items-center gap-2 mt-3">
-                  <Checkbox
+
+                <div className="mt-3">
+                  <SolidCheckbox
                     name="isLegacyTable"
-                    onChange={(e) => {
-                      formik.setFieldValue("isLegacyTable", e.checked);
-                      // Reset isLegacyTableWithId when isLegacyTable is unchecked
-                      if (!e.checked) {
+                    checked={!!formik.values.isLegacyTable}
+                    onChange={(event) => {
+                      const isChecked = event.currentTarget.checked;
+                      formik.setFieldValue("isLegacyTable", isChecked);
+                      if (!isChecked) {
                         formik.setFieldValue("isLegacyTableWithId", false);
                       }
                     }}
-                    checked={formik.values.isLegacyTable}
-                  ></Checkbox>
-                  <label htmlFor="isLegacyTable" className="form-field-label">
-                    Is Legacy Table
-                  </label>
-                </div>
-                 {/* Conditionally show "Has existing Id" when "Is Legacy Table" is checked */}
-                {formik.values.isLegacyTable && (
-                  <div className="flex align-items-center gap-2 mt-2 ml-4">
-                    <Checkbox
-                      name="isLegacyTableWithId"
-                      onChange={(e) => {
-                        formik.setFieldValue("isLegacyTableWithId", e.checked);
-                      }}
-                      checked={formik.values.isLegacyTableWithId}
-                    ></Checkbox>
-                    <label htmlFor="isLegacyTableWithId" className="form-field-label">
-                      Has existing Id
-                    </label>
-                  </div>
-                )}
-                {formik.values.isLegacyTable && (
-                  <p className="form-field-label mt-2 text-sm">
-                    Note: Legacy tables require at least one field marked as Primary Key during model creation
-                  </p>
-                )}
-                {/* <div className="field col-6">
-                  <div className="flex align-items-center gap-2 mt-3">
-                    <Checkbox
-                      name="enableAuditTracking"
-                      onChange={(e) => {
-                        formik.setFieldValue("enableAuditTracking", e.checked);
-                      }}
-                      checked={formik.values.enableAuditTracking}
-                    ></Checkbox>
-                    <label htmlFor="enableAuditTracking" className="form-field-label">
-                      Enable Audit Tracking
-                    </label>
-                  </div>
-                  {isFormFieldValid(formik, "enableAuditTracking") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.enableAuditTracking?.toString()}
-                    />
-                  )}
-                </div>
-                <div className="field col-6">
-                  <div className="flex align-items-center gap-2 mt-3">
-                    <Checkbox
-                      name="internationalisation"
-                      onChange={(e) => {
-                        formik.setFieldValue("internationalisation", e.checked);
-                      }}
-                      checked={formik.values.internationalisation}
-                    ></Checkbox>
-                    <label htmlFor="internationalisation" className="form-field-label">
-                      Internationalisation
-                    </label>
-                  </div>
-                  {isFormFieldValid(formik, "internationalisation") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.internationalisation?.toString()}
-                    />
-                  )}
+                    label="Is Legacy Table"
+                  />
                 </div>
 
-                <div className="field col-6 mt-3">
-                  <div className="flex align-items-center gap-2">
-                    <Checkbox
-                      name="isExportable"
-                      onChange={(e) => {
-                        formik.setFieldValue("isExportable", e.checked);
-                      }}
-                      checked={formik.values.isExportable}
-                    ></Checkbox>
-                    <label htmlFor="isExportable" className="form-field-label">
-                      Is Exportable
-                    </label>
-                  </div>
-                  {isFormFieldValid(formik, "isExportable") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.isExportable?.toString()}
-                    />
-                  )}
-                </div>
-                <div className="field col-6 mt-3">
-                  <div className="flex align-items-center gap-2">
-
-                    <Checkbox onChange={e => {
-                      setShowUserKeyField(e.checked);
-                      formik.setFieldValue("hasUserKey", e.checked);
-                    }} checked={showUserKeyField}></Checkbox>
-                    <label htmlFor="ingredient1" className="form-field-label">
-                      Has User Key
-                    </label>
-                  </div>
-                  {showUserKeyField &&
-                    <div className="formgrid grid">
-                      <div className="field col-12 mt-3">
-                        <label htmlFor="userKeyFieldId" className="form-field-label">
-                          User Key Field
-                        </label>
-                        <InputText
-                          type="text"
-                          id="userKeyFieldId"
-                          name="userKeyFieldId"
-                          onChange={formik.handleChange}
-                          value={formik.values.userKeyFieldId}
-                          className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "userKeyFieldId"),
-                          })}
-                        />
-                        {isFormFieldValid(formik, "userKeyFieldId") && (
-                          <Message
-                            severity="error"
-                            text={formik?.errors?.userKeyFieldId?.toString()}
-                          />
-                        )}
-                      </div>
+                {formik.values.isLegacyTable && (
+                  <>
+                    <div className="ml-4 mt-2">
+                      <SolidCheckbox
+                        name="isLegacyTableWithId"
+                        checked={!!formik.values.isLegacyTableWithId}
+                        onChange={(event) => {
+                          formik.setFieldValue("isLegacyTableWithId", event.currentTarget.checked);
+                        }}
+                        label="Has existing Id"
+                      />
                     </div>
-                  }
-                </div>*/}
-
-              </Panel>
-
+                    <p className="form-field-label mt-2 text-sm">
+                      Note: Legacy tables require at least one field marked as Primary Key during model creation
+                    </p>
+                  </>
+                )}
+              </SolidPanel>
             </div>
             <div className="field col-12 lg:col-6 lg:pl-3">
-
-              {/* <p className="form-wrapper-heading text-base">Basic Settings</p> */}
-              <Panel header={"Basic Settings"} className="solid-column-panel">
-                <div className="flex flex-column gap-2 mt-3">
-                  <label htmlFor="displayName" className="form-field-label">
+              <SolidPanel header={"Basic Settings"} className="solid-column-panel">
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="displayName" className={styles.fieldLabel}>
                     Display Name
                   </label>
-                  <InputText
+                  <SolidInput
                     type="text"
                     id="displayName"
                     name="displayName"
+                    className={styles.fieldInput}
+                    value={formik.values.displayName}
                     onChange={(e) => {
-
                       formik.handleChange(e);
                       const { toCamelCase, toSnakeCase, toPluralCamelCase } = getSingularAndPlural(e.target.value);
-                      if (params.id === 'new') {
+                      if (params.id === "new") {
                         formik.setFieldValue("singularName", toCamelCase);
                         formik.setFieldValue("pluralName", toPluralCamelCase);
-                      }
-                      if (params.id === 'new') {
                         formik.setFieldValue("tableName", toSnakeCase);
                       }
-
-
                     }}
-                    value={formik.values.displayName}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "displayName") || formErrors["displayName"],
-                    })}
-
                   />
-
-                  {(isFormFieldValid(formik, "displayName") || (formErrors["displayName"])) && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.displayName?.toString()}
-                    />
-                  )}
+                  {renderFieldError("displayName")}
                 </div>
-                <div className="flex flex-column gap-1 mt-4">
-                  <label htmlFor="singularName" className="form-field-label">
+
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="singularName" className={styles.fieldLabel}>
                     Singular Name
                   </label>
-                  <InputText
-                    disabled={true}
+                  <SolidInput
                     type="text"
                     id="singularName"
                     name="singularName"
-                    onChange={formik.handleChange}
+                    className={styles.fieldInput}
                     value={formik.values.singularName}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "singularName") || formErrors["singularName"],
-                    })}
+                    disabled
+                    onChange={formik.handleChange}
                   />
-                  {(isFormFieldValid(formik, "singularName") || (formErrors["singularName"])) && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.singularName?.toString()}
-                    />
-                  )}
+                  {renderFieldError("singularName")}
                 </div>
-                <div className="flex flex-column gap-1 mt-4">
-                  <label htmlFor="pluralName" className="form-field-label">
+
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="pluralName" className={styles.fieldLabel}>
                     Plural Name
                   </label>
-                  <InputText
-                    disabled={true}
+                  <SolidInput
                     type="text"
                     id="pluralName"
                     name="pluralName"
-                    onChange={formik.handleChange}
+                    className={styles.fieldInput}
                     value={formik.values.pluralName}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "pluralName") || formErrors["pluralName"],
-                    })}
+                    disabled
+                    onChange={formik.handleChange}
                   />
-                  {(isFormFieldValid(formik, "pluralName") || (formErrors["pluralName"])) && (
-                    <Message severity="error" text={formik?.errors?.pluralName?.toString()} />
-                  )}
+                  {renderFieldError("pluralName")}
                 </div>
 
-                {/* <div className="mt-4">
-                  <div className="flex align-items-center gap-2">
-                    <Checkbox onChange={e => {
-                      setShowTableName(e.checked);
-                      if (e.checked === true) {
-                        const { toCamelCase, toSnakeCase, toPluralCamelCase } = getSingularAndPlural(formik.values.displayName);
-                        if (params.id === 'new') {
-                          formik.setFieldValue("tableName", toSnakeCase);
-                        }
-                      }
-
-                    }} checked={showTableName} disabled={params.id !== 'new'}></Checkbox>
-                    <label htmlFor="setTableName" className="form-field-label">
-                      Set table name
-                    </label>
-                  </div>
-                </div> */}
-                {/* {showTableName && */}
-                <div className="flex flex-column gap-1 mt-4">
-                  <label htmlFor="tableName" className="form-field-label">
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="tableName" className={styles.fieldLabel}>
                     Table Name
                   </label>
-                  <InputText
-                    disabled={params.id !== 'new'}
+                  <SolidInput
                     type="text"
                     id="tableName"
                     name="tableName"
-                    onChange={formik.handleChange}
+                    className={styles.fieldInput}
                     value={formik.values.tableName}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "tableName") || formErrors["tableName"],
-                    })}
+                    disabled={params.id !== "new"}
+                    onChange={formik.handleChange}
                   />
-                  {(isFormFieldValid(formik, "tableName") || (formErrors["tableName"])) && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.tableName?.toString()}
-                    />
-                  )}
+                  {renderFieldError("tableName")}
                 </div>
-                {/* } */}
-                <div className="flex flex-column gap-1 mt-4">
-                  <label htmlFor="description" className="form-field-label">
+
+                <div className={styles.fieldWrapper}>
+                  <label htmlFor="description" className={styles.fieldLabel}>
                     Description
                   </label>
-                  {/* <InputText
-                      type="text"
-                      id="description"
-                      name="description"
-                      onChange={formik.handleChange}
-                      value={formik.values.description}
-                      className={classNames("p-inputtext-sm w-full small-input", {
-                        "p-invalid": isFormFieldValid(formik, "description"),
-                      })}
-                    /> */}
-                  <InputTextarea
+                  <SolidTextarea
                     id="description"
                     name="description"
-                    onChange={formik.handleChange}
+                    className={styles.fieldTextarea}
                     value={formik.values.description}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "description") || formErrors["description"],
-                    })}
                     rows={5}
-                    cols={30}
+                    onChange={formik.handleChange}
                   />
-                  {(isFormFieldValid(formik, "description") || (formErrors["description"])) && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.description?.toString()}
-                    />
-                  )}
+                  {renderFieldError("description")}
                 </div>
-              </Panel>
+              </SolidPanel>
             </div>
 
             {/* <div className="md:col-6 sm:col-12">
@@ -878,7 +698,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                       name="pluralName"
                       onChange={formik.handleChange}
                       value={formik.values.pluralName}
-                      className={classNames("p-inputtext-sm w-full small-input", {
+                      className={cx("p-inputtext-sm w-full small-input", {
                         "p-invalid": isFormFieldValid(formik, "pluralName"),
                       })}
                     />
@@ -910,7 +730,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                       }
                       }
                       placeholder="Select a Data Source"
-                      className={classNames("p-inputtext-sm w-full", {
+                      className={cx("p-inputtext-sm w-full", {
                         "p-invalid": isFormFieldValid(formik, "dataSource"),
                       })}
                     />