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

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

@@ -1,27 +1,23 @@
 
 
-import { CancelButton, SolidCancelButton } from "../../../components/common/CancelButton";
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
 import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "../../../redux/api/modelApi";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
-import { Button } from "primereact/button";
-import { TabPanel, TabView } from "primereact/tabview";
 import qs from "qs";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { showToast } from "../../../redux/features/toastSlice";
 import FieldMetaData from "./FieldMetaData";
 import ModelMetaData from "./ModelMetaData";
-import { BackButton } from "../../../components/common/BackButton";
 import { SolidFormStepper } from "../../../components/common/SolidFormStepper";
-import { Dialog } from "primereact/dialog";
-import { Divider } from "primereact/divider";
-import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "../../../components/common/SolidBreadcrumb";
 import { SolidFormHeader } from "../../../components/common/SolidFormHeader";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { SolidButton, SolidDialog, SolidDivider, SolidPopover, SolidPopoverContent, SolidPopoverTrigger, SolidTabGroup } from "../../shad-cn-ui";
+import { Settings, Trash2 } from "lucide-react";
+import { SolidFormFooter } from "../form/SolidFormFooter";
 
 interface ErrorResponseData {
   message: string;
@@ -29,6 +25,14 @@ interface ErrorResponseData {
   error: string;
 }
 
+const TABS = ["model", "fields"] as const;
+type TabValue = typeof TABS[number];
+
+const getTabErrorState = (tab?: TabValue): Record<TabValue, boolean> => ({
+  model: tab === "model",
+  fields: tab === "fields",
+});
+
 const CreateModel = ({ data, params }: any) => {
 
   const dispatch = useDispatch();
@@ -63,20 +67,32 @@ const CreateModel = ({ data, params }: any) => {
     { isLoading: isModelDeleted, isSuccess: isDeleteModelSuceess, isError: isDeleteModelError, error: deleteModelError, data: DeletedModel },
   ] = useDeletemodelMutation();
 
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const [tabErrors, setTabErrors] = useState<{ [key: number]: boolean }>({});
+  const [activeTab, setActiveTab] = useState<TabValue>("model");
+  const [tabErrors, setTabErrors] = useState<Record<TabValue, boolean>>(getTabErrorState());
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 
   const nextTab = () => {
-    setActiveIndex(activeIndex + 1);
+    const currentIndex = TABS.indexOf(activeTab);
+    const nextValue = TABS[Math.min(currentIndex + 1, TABS.length - 1)];
+    setActiveTab(nextValue);
+  };
+
+  const handleTabChange = (nextValue: TabValue) => {
+    if (nextValue === activeTab) {
+      return;
+    }
+    if (activeTab === "model") {
+      formikModelMetadataRef.current?.handleSubmit();
+    }
+    setActiveTab(nextValue);
   };
 
   useEffect(() => {
     if (data) {
-      const isLegacyTable =  data.isLegacyTableWithId || data.isLegacyTable
-      const isLegacyTableWithId = data.isLegacyTable ;
+      const isLegacyTable = data.isLegacyTableWithId || data.isLegacyTable
+      const isLegacyTableWithId = data.isLegacyTable;
       const modelData = {
-        ...data, moduleId: data?.module?.id, parentModelId: data?.parentModel,isLegacyTable,isLegacyTableWithId
+        ...data, moduleId: data?.module?.id, parentModelId: data?.parentModel, isLegacyTable, isLegacyTableWithId
       }
 
       setIsLoadingData(false);
@@ -144,7 +160,7 @@ const CreateModel = ({ data, params }: any) => {
       // });
 
       formikModelMetadataRef.current.validateForm().then((errors: any) => {
-        let firstErrorTab: number | undefined;
+        let firstErrorTab: TabValue | undefined;
         if (Object.keys(errors).length > 0) {
           setFormErrors(errors);
           const errorMessages = Object.values(errors);
@@ -152,20 +168,21 @@ const CreateModel = ({ data, params }: any) => {
             dispatch(showToast({ severity: 'error', summary: 'Error', detail: Array.isArray(error) ? error.join(', ') : String(error) }));
           });
 
-          firstErrorTab = 0; // Model Metadata tab has errors
+          firstErrorTab = "model"; // Model Metadata tab has errors
         } else {
           setFormErrors({});
         }
 
         if (fieldMetaData.length === 0) {
           dispatch(showToast({ severity: 'error', summary: 'Error', detail: ERROR_MESSAGES.ADD_ATLEAST_ONE_FIELD }));
-          firstErrorTab = firstErrorTab ?? 1; // If no prior error, set to Field tab
+          firstErrorTab = firstErrorTab ?? "fields"; // If no prior error, set to Field tab
         }
 
         if (firstErrorTab !== undefined) {
-          setTabErrors({ [firstErrorTab]: true }); // Set error only on the first tab with an issue
-          setActiveIndex(firstErrorTab); // Switch to the tab with an error
+          setTabErrors(getTabErrorState(firstErrorTab)); // Set error only on the first tab with an issue
+          setActiveTab(firstErrorTab); // Switch to the tab with an error
         } else {
+          setTabErrors(getTabErrorState());
           handleFormSubmit();
         }
       });
@@ -175,36 +192,36 @@ const CreateModel = ({ data, params }: any) => {
 
   const handleFormSubmit = async () => {
 
-      let legacyTableConfig = {};
-  
-      if (modelMetaData?.isLegacyTable && modelMetaData?.isLegacyTableWithId) {
-        // UI: Both checked → Backend: both true
-        legacyTableConfig = {
-          isLegacyTable: true,
-          isLegacyTableWithId: false
-        };
-      } else if (modelMetaData?.isLegacyTable && !modelMetaData?.isLegacyTableWithId) {
-        // UI: Only isLegacyTable checked → Backend: only isLegacyTableWithId true
-        legacyTableConfig = {
-          isLegacyTable: false,
-          isLegacyTableWithId: true
-        };
-      } else {
-        // UI: Neither checked → Backend: both false
-        legacyTableConfig = {
-          isLegacyTable: false,
-          isLegacyTableWithId: false
-        };
-      }
+    let legacyTableConfig = {};
+
+    if (modelMetaData?.isLegacyTable && modelMetaData?.isLegacyTableWithId) {
+      // UI: Both checked → Backend: both true
+      legacyTableConfig = {
+        isLegacyTable: true,
+        isLegacyTableWithId: false
+      };
+    } else if (modelMetaData?.isLegacyTable && !modelMetaData?.isLegacyTableWithId) {
+      // UI: Only isLegacyTable checked → Backend: only isLegacyTableWithId true
+      legacyTableConfig = {
+        isLegacyTable: false,
+        isLegacyTableWithId: true
+      };
+    } else {
+      // UI: Neither checked → Backend: both false
+      legacyTableConfig = {
+        isLegacyTable: false,
+        isLegacyTableWithId: false
+      };
+    }
 
     if (modelMetaData?.isLegacyTable || modelMetaData?.isLegacyTableWithId) {
       const hasPrimaryKey = fieldMetaData.some(
         (field: any) => field.isPrimaryKey === true
       );
-  
+
       if (!hasPrimaryKey) {
         dispatch(showToast({ severity: "error", summary: "Primary Key Required", detail: "Legacy tables set at least one field marked as Primary Key. Please mark a field as Primary Key before proceeding.", life: 5000 }));
-        return; 
+        return;
       }
     }
 
@@ -296,18 +313,6 @@ const CreateModel = ({ data, params }: any) => {
 
   // Error Handler 
   // Added useEffect to remove active tab class border color if error is there.
-  useEffect(() => {
-    const tabHeaders = document.querySelectorAll(".p-tabview-nav li");
-    if (tabHeaders.length > 0) {
-      if (tabErrors[0]) {
-        tabHeaders[0].classList.remove("p-highlight");
-      }
-      if (tabErrors[1]) {
-        tabHeaders[1].classList.remove("p-highlight");
-      }
-    }
-  }, [tabErrors]);
-
 
   useEffect(() => {
     const errors = [
@@ -329,186 +334,147 @@ const CreateModel = ({ data, params }: any) => {
     }
 
   }, [isCreateModelError, isDeleteModelError, isUpdateModelError])
-  const op = useRef(null);
-
-  const formActionDropdown = () => {
-    return (
-      <div>
-        <Button
-          outlined
-          severity="secondary"
+  const [formActionsMenuOpen, setFormActionsMenuOpen] = useState(false);
+  const formActionDropdown = () => (
+    <SolidPopover open={formActionsMenuOpen} onOpenChange={setFormActionsMenuOpen}>
+      <SolidPopoverTrigger asChild>
+        <SolidButton
+          variant="ghost"
+          size="sm"
+          className="solid-icon-button"
+          aria-label="Model actions"
+        >
+          <Settings size={16} />
+        </SolidButton>
+      </SolidPopoverTrigger>
+      <SolidPopoverContent
+        side="bottom"
+        align="end"
+        className="solid-form-actions-popover"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <button
           type="button"
-          icon={'pi pi-cog'}
-          size="small"
-          className="surface-card p-0 hidden md:flex"
-          style={{
-            height: 33.06,
-            width: 33.06
+          className="solid-row-action-button solid-row-action-button-danger"
+          onClick={() => {
+            setFormActionsMenuOpen(false);
+            setDeleteEntity(true);
           }}
-          onClick={(e) =>
-            // @ts-ignore 
-            op.current.toggle(e)
-          }
-        />
-        <Button
-          outlined
-          type="button"
-          icon={'pi pi-cog'}
-          size="small"
-          className="surface-card p-0 solid-icon-button md:hidden"
-          // style={{
-          //   height: 33.06,
-          //   width: 33.06
-          // }}
-          onClick={(e) =>
-            // @ts-ignore 
-            op.current.toggle(e)
-          }
-        />
-        <OverlayPanel ref={op} className="solid-custom-overlay">
-          <div className="flex flex-column gap-1 p-1">
-            {/* <Button
-              text
-              type="button"
-              className="w-8rem text-left gap-2 text-color"
-              label="Duplicate"
-              size="small"
-              iconPos="left"
-              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
-              </svg>}
-            /> */}
-            <Button
-              text
-              type="button"
-              className="w-8rem text-left gap-2"
-              label="Delete"
-              size="small"
-              iconPos="left"
-              severity="danger"
-              icon={'pi pi-trash'}
-              onClick={() => setDeleteEntity(true)}
-            />
-          </div>
-        </OverlayPanel>
-      </div>
-    )
-  }
+        >
+          <Trash2 size={14} className="solid-row-action-button-icon" />
+          <span className="solid-row-action-button-label">Delete</span>
+        </button>
+      </SolidPopoverContent>
+    </SolidPopover>
+  );
 
   const [isDirty, setIsDirty] = useState(false);
+  const isCreateMode = params.id === "new";
+  const headerTitleBase = isCreateMode ? "Create Model" : "Edit Model";
+  const headerTitle = `${headerTitleBase}${modelMetaData?.displayName ? ` - ${modelMetaData.displayName}` : ""}`;
+  const canShowActionsMenu = !isCreateMode && data?.isSystem !== true;
+  const handleCancel = () => router.back();
 
 
   return (
     <div className="solid-form-wrapper">
-      <div style={{ width: '100%', borderRight: '1px solid var(--primary-light-color' }}>
-        <div className="solid-form-header">
-          {params.id === "new" ?
-            <>
-              <div className="flex align-items-center gap-3">
-                <BackButton />
-                <div className="form-wrapper-title solid-long-text-wrapper  ">Create Model {modelMetaData?.displayName ? `- ${modelMetaData?.displayName}` : ""}</div>
-              </div>
-              <div className="gap-3 flex">
-                {isDirty &&
-                  <Button label="Save" size="small" onClick={handleSubmit} type="submit" />
-                }
-                <CancelButton />
-              </div>
-            </>
-            :
-            <>
-              <div className="flex align-items-center gap-3">
-                <BackButton />
-                <div className="form-wrapper-title solid-long-text-wrapper ">Edit Model {modelMetaData?.displayName ? `- ${modelMetaData?.displayName}` : ""}</div>
-              </div>
-              <div className="gap-3 flex">
-                {data?.isSystem !== true &&
-                  <>
-                    <div>
-                      {isDirty &&
-                        <>
-                          <Button label="Save" size="small" type="submit" className="hidden lg:flex" onClick={handleSubmit} />
-                          <Button icon="pi pi-check" size="small" type="submit" className=" lg:hidden solid-icon-button" onClick={handleSubmit} />
-                        </>
-                      }
-                    </div>
-                    {/* <div>
-                      <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => setDeleteEntity(true)} />
-                    </div> */}
-                  </>
-                }
-                {/* <CancelButton /> */}
-                <SolidCancelButton />
-                {formActionDropdown()}
-              </div>
-            </>
-          }
-        </div>
-        <SolidFormHeader />
-        {/* <div className="solid-form-stepper">
-          <SolidFormStepper />
-        </div> */}
-        <div className="px-4 py-3 md:p-4 solid-form-content">
-          <TabView
-            activeIndex={activeIndex}
-            onTabChange={(e) => {
-              if (activeIndex == 0) {
-                formikModelMetadataRef.current.handleSubmit();
-                setActiveIndex(e.index)
-
-              }
-              if (activeIndex == 1) {
-                setActiveIndex(e.index)
+      <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }} >
+        <div>
+          <div className="solid-form-header flex align-items-center justify-content-between gap-3 flex-wrap">
+            <div className="flex flex-column gap-1">
+              {/* <span className="text-sm text-color-secondary uppercase tracking-wider">Model</span>
+            <div className="form-wrapper-title solid-long-text-wrapper m-0">{headerTitle}</div> */}
+            </div>
+            <div className="flex align-items-center gap-2">
+              <SolidButton
+                variant="outline"
+                size="sm"
+                type="button"
+                onClick={handleCancel}
+                className="bg-primary-reverse"
+              >
+                Cancel
+              </SolidButton>
+              {isDirty && (
+                <SolidButton size="sm" type="button" onClick={handleSubmit}>
+                  Save
+                </SolidButton>
+              )}
+              {canShowActionsMenu && formActionDropdown()}
+            </div>
+          </div>
+          {/* <SolidFormHeader /> */}
+          <div className="px-4 py-3 md:p-4 solid-form-content">
+          <SolidTabGroup
+            className="relative"
+            panelClassName="px-0"
+            tabs={[
+              {
+                value: "model",
+                label: <span className={tabErrors.model ? "tab-error-heading" : ""}>Model</span>,
+                content: (
+                  <ModelMetaData
+                    modelMetaData={modelMetaData}
+                    setModelMetaData={setModelMetaData}
+                    allModelsNames={allModelsNames}
+                    deleteModelFunction={deleteModelFunction}
+                    nextTab={nextTab}
+                    formikModelMetadataRef={formikModelMetadataRef}
+                    params={params}
+                    formErrors={formErrors}
+                    setIsDirty={setIsDirty}
+                  ></ModelMetaData>
+                ),
+              },
+              {
+                value: "fields",
+                label: <span className={tabErrors.fields ? "tab-error-heading" : ""}>Fields</span>,
+                content: (
+                  <FieldMetaData
+                    modelMetaData={modelMetaData}
+                    fieldMetaData={fieldMetaData}
+                    setFieldMetaData={setFieldMetaData}
+                    deleteModelFunction={deleteModelFunction}
+                    nextTab={nextTab}
+                    formikFieldsMetadataRef={formikFieldsMetadataRef}
+                    params={params}
+                    setIsDirty={setIsDirty}
+                  ></FieldMetaData>
+                ),
+              },
+            ]}
+            value={activeTab}
+            onValueChange={(value) => {
+              const next = TABS.find((tab) => tab === value);
+              if (next) {
+                handleTabChange(next);
               }
-
             }}
-            panelContainerClassName="px-0"
-            className="relative"
-          >
-            <TabPanel header="Model"
-              headerClassName={tabErrors[0] ? "tab-error-heading " : ""}>
-              <ModelMetaData
-                modelMetaData={modelMetaData}
-                setModelMetaData={setModelMetaData}
-                allModelsNames={allModelsNames}
-                deleteModelFunction={deleteModelFunction}
-                nextTab={nextTab}
-                formikModelMetadataRef={formikModelMetadataRef}
-                params={params}
-                formErrors={formErrors}
-                setIsDirty={setIsDirty}
-              ></ModelMetaData>
-            </TabPanel>
-            <TabPanel header="Fields"
-              headerClassName={tabErrors[1] ? "tab-error-heading " : ""}>
-              <FieldMetaData
-                modelMetaData={modelMetaData}
-                fieldMetaData={fieldMetaData}
-                setFieldMetaData={setFieldMetaData}
-                deleteModelFunction={deleteModelFunction}
-                nextTab={nextTab}
-                formikFieldsMetadataRef={formikFieldsMetadataRef}
-                params={params}
-                setIsDirty={setIsDirty}
-              ></FieldMetaData>
-            </TabPanel>
-          </TabView>
+          />
+          </div>
         </div>
+        <SolidFormFooter params={params}></SolidFormFooter>
+
       </div>
       {/* <div style={{ width: '22.5%' }}></div> */}
-      <Dialog header="Delete Field" headerClassName="py-2" className="solid-confirm-dialog" contentClassName="px-0 pb-0" visible={deleteEntity} style={{ width: '20vw' }} onHide={() => { if (!deleteEntity) return; setDeleteEntity(false); }}>
-        <Divider className="m-0" />
+      <SolidDialog header="Delete Field" headerClassName="py-2" className="solid-confirm-dialog" contentClassName="px-0 pb-0" visible={deleteEntity} style={{ width: '20vw' }} onHide={() => { if (!deleteEntity) return; setDeleteEntity(false); }}>
+        <SolidDivider className="m-0" />
         <div className="p-4">
           <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
             Are you sure you want to delete this Field ?
           </p>
           <p className="" style={{ color: 'var{--solid-grey-500}' }}>{modelMetaData?.singularName}</p>
           <div className="flex align-items-center gap-2 mt-3">
-            <Button label="Delete" size="small" onClick={deleteModelFunction} />
-            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined />
+            <SolidButton size="sm" onClick={deleteModelFunction}>
+              Delete
+            </SolidButton>
+            <SolidButton size="sm" variant="outline" onClick={() => setDeleteEntity(false)}>
+              Cancel
+            </SolidButton>
           </div>
         </div>
-      </Dialog>
+      </SolidDialog>
+
     </div>
   );
 };

package/dist/components/core/model/FieldMetaData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,aAAa,kIAAmI,GAAG,4CAiOxJ,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,aAAa,kIAAmI,GAAG,4CA2PxJ,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/core/model/FieldMetaData.js

@@ -36,33 +36,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from "../../../hooks/usePathname";
-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 { useRef, useState } from "react";
+import { SolidDataTable as DataTable, Column } from "../list/SolidDataTable";
+import { useState } from "react";
 import { useDispatch } from "react-redux";
 import { showToast } from "../../../redux/features/toastSlice";
 import FieldMetaDataForm from "./FieldMetaDataForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { AlertTriangle, Info, Pencil, Plus, Trash2 } from "lucide-react";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogFooter, } from "../../shad-cn-ui";
 var FieldMetaData = function (_a) {
     var setIsDirty = _a.setIsDirty, modelMetaData = _a.modelMetaData, fieldMetaData = _a.fieldMetaData, setFieldMetaData = _a.setFieldMetaData, deleteModelFunction = _a.deleteModelFunction, nextTab = _a.nextTab, formikFieldsMetadataRef = _a.formikFieldsMetadataRef, params = _a.params;
     var pathname = usePathname();
-    var msgs = useRef(null);
-    useMountEffect(function () {
-        if (msgs.current) {
-            msgs.current.clear();
-            msgs.current.show({
-                id: '1',
-                sticky: true,
-                severity: 'info',
-                detail: "Please select Module and Datasource from the models Tab.",
-                closable: false,
-            });
-        }
-    });
     var dispatch = useDispatch();
     var _b = useState(false), visiblePopup = _b[0], setVisiblePopup = _b[1];
     var _c = useState(false), isRequiredPopUp = _c[0], setIsRequiredPopUp = _c[1];
@@ -76,10 +60,10 @@ var FieldMetaData = function (_a) {
     // Template for the pencil icon column
     var editTemplate = function (rowData) {
         return (_jsx(_Fragment, { children: rowData.isSystem !== true && rowData.isMarkedForRemoval !== true &&
-                _jsx(Button, { icon: "pi pi-pencil", text: true, onClick: function () {
+                _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-icon-button", "aria-label": "Edit field", leftIcon: _jsx(Pencil, { size: 14 }), onClick: function () {
                         setSelectedFieldMetaData(rowData);
                         setVisiblePopup(true);
-                    }, size: "small" }) }));
+                    } }) }));
     };
     var bodyTemplate = function (rowData) {
         return (_jsx(_Fragment, { children: rowData.displayName &&
@@ -98,7 +82,7 @@ var FieldMetaData = function (_a) {
     // Template for the trash (delete) icon column
     var deleteTemplate = function (rowData) {
         return (_jsx(_Fragment, { children: (pathname.includes('create') || (rowData.isSystem !== true && rowData.isMarkedForRemoval !== true)) &&
-                _jsx(Button, { icon: "pi pi-trash", text: true, severity: "danger", onClick: function () { setRowToDelete(rowData); setDeleteAlertPopup(true); }, size: "small" }) }));
+                _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-icon-button", style: { color: "var(--solid-danger, #ef4444)" }, "aria-label": "Delete field", leftIcon: _jsx(Trash2, { size: 14 }), onClick: function () { setRowToDelete(rowData); setDeleteAlertPopup(true); } }) }));
     };
     var showToaster = function (message, severity) { return __awaiter(void 0, void 0, void 0, function () {
         var errorMessages;
@@ -115,13 +99,12 @@ var FieldMetaData = function (_a) {
     //     'bg-red-row': data.isMarkedForRemoval === true
     //   };
     // };
-    return (_jsx(_Fragment, { children: !modelMetaData.moduleId || !modelMetaData.dataSource ?
-            _jsx("div", { className: "card flex justify-content-center", children: _jsx(Messages, { ref: msgs }) })
+    var needsModelSetup = !modelMetaData.moduleId || !modelMetaData.dataSource;
+    return (_jsx(_Fragment, { children: needsModelSetup ?
+            _jsx("div", { className: "solid-placeholder-card-wrapper", children: _jsxs("div", { className: "solid-placeholder-card", children: [_jsx("div", { className: "solid-placeholder-card-icon", children: _jsx(Info, { size: 18 }) }), _jsxs("div", { className: "solid-placeholder-card-body", children: [_jsx("p", { className: "solid-placeholder-card-title", children: "Model setup incomplete" }), _jsx("p", { className: "solid-placeholder-card-text", children: "Please select Module and Datasource from the models tab before managing fields." })] })] }) })
             :
                 _jsxs(_Fragment, { children: [_jsx("div", { className: "absolute", style: { top: -3, right: 0 }, children: modelMetaData.isSystem !== true &&
-                                _jsx(Button, { label: "Add", 
-                                    // icon="pi pi-external-link"
-                                    onClick: function () {
+                                _jsx(SolidButton, { size: "sm", leftIcon: _jsx(Plus, { size: 14 }), onClick: function () {
                                         if (!(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType)) {
                                             dispatch(showToast({ severity: 'error', summary: ERROR_MESSAGES.ERROR, detail: ERROR_MESSAGES.ORM_TYPE_REQUIRED }));
                                         }
@@ -129,25 +112,31 @@ var FieldMetaData = function (_a) {
                                             setSelectedFieldMetaData(null);
                                             setVisiblePopup(true);
                                         }
-                                    }, size: "small" }) }), _jsxs(DataTable, { value: fieldMetaData, dataKey: "id", tableStyle: { minWidth: '50rem' }, size: "small", children: [_jsx(Column, { field: "displayName", header: "Display Name", body: bodyTemplate, headerClassName: "table-header-fs" }), _jsx(Column, { field: "name", header: "Name", headerClassName: "table-header-fs" }), _jsx(Column, { field: "type", header: "Type", headerClassName: "table-header-fs" }), modelMetaData.isSystem !== true &&
-                                    _jsx(Column, { body: editTemplate, header: "Edit", headerClassName: "table-header-fs", style: { width: '10%' } }), modelMetaData.isSystem !== true &&
-                                    _jsx(Column, { body: deleteTemplate, header: "Delete", headerClassName: "table-header-fs", style: { width: '10%' } })] }), _jsx(Dialog, { header: "", visible: visiblePopup, style: { width: "40vw" }, className: "solid-dialog solid-field-dialog", onHide: function () {
-                                if (!visiblePopup)
-                                    return;
-                                setVisiblePopup(false);
-                            }, showHeader: false, children: _jsx(FieldMetaDataForm, { setIsDirty: setIsDirty, modelMetaData: modelMetaData, fieldMetaData: selectedFieldMetaData, allFields: fieldMetaData, setFieldMetaData: setFieldMetaData, deleteModelFunction: deleteModelFunction, setVisiblePopup: setVisiblePopup, formikFieldsMetadataRef: formikFieldsMetadataRef, params: params, setIsRequiredPopUp: setIsRequiredPopUp, showToaster: showToaster }) }), _jsxs(Dialog, { visible: isRequiredPopUp, header: (_jsxs("div", { className: "flex align-items-center", children: [_jsx("i", { className: "pi pi-exclamation-triangle text-yellow-500 text-xl mr-2" }), _jsx("span", { children: "Warning" })] })), headerClassName: "text-center warning-header-popup", modal: true, style: { width: '20vw' }, onHide: function () { return setIsRequiredPopUp(false); }, className: "solid-dialog solid-confirm-dialog", children: [_jsx("p", { className: "p-3 mb-0", children: "If there is data against this model this operation might not work and manual intervention will be required" }), _jsx("div", { className: "flex justify-content-start p-3", children: _jsx(Button, { label: "Ok", className: 'small-button', onClick: function () { return setIsRequiredPopUp(false); } }) })] }), _jsxs(Dialog, { visible: deleteAlertPopup, header: (_jsxs("div", { className: "flex align-items-center justify-content-center", children: [_jsx("i", { className: "pi pi-exclamation-triangle text-yellow-500 text-xl mr-2" }), _jsx("span", { children: "Warning" })] })), headerClassName: "text-center warning-header-popup", modal: true, style: { width: '20vw' }, onHide: function () {
-                                setDeleteAlertPopup(false);
-                                setRowToDelete(null);
-                            }, className: "solid-dialog solid-confirm-dialog", children: [_jsx("p", { className: "p-3 mb-0 text-center", children: "Are you sure you want to delete this field?" }), _jsxs("div", { className: "flex justify-content-start p-3 align-items-center justify-content-center gap-3", children: [_jsx(Button, { label: "Ok", className: 'small-button', onClick: function () {
+                                    }, children: "Add" }) }), _jsx("div", { className: "solid-datatable-wrapper solid-list-table-area flex-1 min-h-0 overflow-hidden", children: _jsxs(DataTable, { value: fieldMetaData, dataKey: "id", size: "small", emptyMessage: "No fields configured", rowClassName: function (rowData) { return rowData.isMarkedForRemoval === true ? "greyed-out-row" : ""; }, children: [_jsx(Column, { field: "displayName", header: "Display Name", body: bodyTemplate }), _jsx(Column, { field: "name", header: "Name" }), _jsx(Column, { field: "type", header: "Type" }), modelMetaData.isSystem !== true &&
+                                        _jsx(Column, { body: editTemplate, header: "Edit", style: { width: '80px' } }), modelMetaData.isSystem !== true &&
+                                        _jsx(Column, { body: deleteTemplate, header: "Delete", style: { width: '90px' } })] }) }), _jsx(SolidDialog, { open: visiblePopup, onOpenChange: function (open) {
+                                if (!open) {
+                                    setVisiblePopup(false);
+                                }
+                            }, className: "solid-dialog solid-field-dialog", style: { width: "30vw" }, showHeader: false, children: _jsx(SolidDialogBody, { className: "solid-dialog-body-flush", children: _jsx(FieldMetaDataForm, { setIsDirty: setIsDirty, modelMetaData: modelMetaData, fieldMetaData: selectedFieldMetaData, allFields: fieldMetaData, setFieldMetaData: setFieldMetaData, deleteModelFunction: deleteModelFunction, setVisiblePopup: setVisiblePopup, formikFieldsMetadataRef: formikFieldsMetadataRef, params: params, setIsRequiredPopUp: setIsRequiredPopUp, showToaster: showToaster }) }) }), _jsxs(SolidDialog, { open: isRequiredPopUp, onOpenChange: function (open) {
+                                if (!open) {
+                                    setIsRequiredPopUp(false);
+                                }
+                            }, className: "solid-dialog solid-confirm-dialog", style: { width: "20vw" }, header: _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(AlertTriangle, { size: 18, className: "text-yellow-500" }), _jsx("span", { children: "Warning" })] }), children: [_jsx(SolidDialogBody, { children: _jsx("p", { className: "mb-0", children: "If there is data against this model this operation might not work and manual intervention will be required." }) }), _jsx(SolidDialogFooter, { className: "justify-content-start", children: _jsx(SolidButton, { size: "sm", onClick: function () { return setIsRequiredPopUp(false); }, children: "Ok" }) })] }), _jsxs(SolidDialog, { open: deleteAlertPopup, onOpenChange: function (open) {
+                                if (!open) {
+                                    setDeleteAlertPopup(false);
+                                    setRowToDelete(null);
+                                }
+                            }, className: "solid-dialog solid-confirm-dialog", style: { width: "20vw" }, header: _jsxs("div", { className: "flex align-items-center justify-content-center gap-2", children: [_jsx(AlertTriangle, { size: 18, className: "text-yellow-500" }), _jsx("span", { children: "Warning" })] }), children: [_jsx(SolidDialogBody, { children: _jsx("p", { className: "mb-0 text-center", children: "Are you sure you want to delete this field?" }) }), _jsxs(SolidDialogFooter, { className: "flex justify-content-center gap-2", children: [_jsx(SolidButton, { size: "sm", onClick: function () {
                                                 if (rowToDelete) {
                                                     deleteRow(rowToDelete);
                                                 }
                                                 setDeleteAlertPopup(false);
                                                 setRowToDelete(null);
-                                            } }), _jsx(Button, { label: "Cancel", className: 'small-button', outlined: true, severity: "danger", onClick: function () {
+                                            }, children: "Ok" }), _jsx(SolidButton, { size: "sm", variant: "outline", onClick: function () {
                                                 setDeleteAlertPopup(false);
                                                 setRowToDelete(null);
-                                            } })] })] })] }) }));
+                                            }, children: "Cancel" })] })] })] }) }));
 };
 export default FieldMetaData;
 //# sourceMappingURL=FieldMetaData.js.map