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

package/dist/components/core/locales/SolidChatterLocaleTabView.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { TabView, TabPanel } from 'primereact/tabview';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SolidChatter } from '../chatter/SolidChatter';
 import SolidLocale from './SolidLocale';
 import './solid-locale.css';
-import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
+import { SolidTabGroup } from '../../shad-cn-ui';
+// import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper'; // moved to SolidX Studio panel
 interface Props {
   solidFormViewMetaData: any;
   id: string;
@@ -23,6 +23,14 @@ interface Props {
   mcpUrl?: string | null;
 }
 
+const mapTabIndexToValue = (index: number, order: string[]) => {
+  if (!order.length) return '';
+  const safeIndex = Number.isFinite(index) ? index : 0;
+  if (safeIndex <= 0) return order[0];
+  if (safeIndex >= order.length) return order[order.length - 1];
+  return order[safeIndex];
+};
+
 const SolidChatterLocaleTabView: React.FC<Props> = ({
   solidFormViewMetaData,
   id,
@@ -38,53 +46,80 @@ const SolidChatterLocaleTabView: React.FC<Props> = ({
   solidFormViewData,
   published,
   actionsAllowed,
-  mcpUrl
+  mcpUrl,
 }) => {
+  const showWorkflowInfo = Boolean(solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow);
 
+  const tabOrder = useMemo(() => {
+    const order: string[] = [];
+    if (showWorkflowInfo) {
+      order.push('info');
+    }
+    order.push('audit');
+    return order;
+  }, [showWorkflowInfo]);
 
+  const [activeTabValue, setActiveTabValue] = useState<string>(() => mapTabIndexToValue(activeTab, tabOrder));
 
+  useEffect(() => {
+    const nextValue = mapTabIndexToValue(activeTab, tabOrder);
+    setActiveTabValue((prev) => (prev === nextValue ? prev : nextValue));
+  }, [activeTab, tabOrder]);
 
-
-
-  return (
-    <TabView className="SolidCustomLocaleTabviewPanels h-full" activeIndex={activeTab}>
-      {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
-        <TabPanel header="Info" className={`SolidCustomLocaleTab p-2`}>
-          <SolidLocale
-            setSelectedLocale={setSelectedLocale}
-            solidFormViewMetaData={solidFormViewMetaData}
-            selectedLocale={selectedLocale}
+  const tabs: { value: string; label: React.ReactNode; content: React.ReactNode; }[] = [
+    ...(showWorkflowInfo
+      ? [{
+        value: 'info',
+        label: 'Info',
+        content: (
+          <div className="solid-locale-tab-content solid-locale-tab-content--padded">
+            <SolidLocale
+              setSelectedLocale={setSelectedLocale}
+              solidFormViewMetaData={solidFormViewMetaData}
+              selectedLocale={selectedLocale}
+              id={id}
+              viewMode={viewMode}
+              createMode={createMode}
+              handleLocaleChangeRedirect={handleLocaleChangeRedirect}
+              defaultEntityLocaleId={defaultEntityLocaleId}
+              applicableLocales={solidFormViewMetaData?.data?.applicableLocales}
+              solidFormViewData={solidFormViewData}
+              published={published}
+            />
+          </div>
+        )
+      }]
+      : []),
+    {
+      value: 'audit',
+      label: 'Audit Trail',
+      content: (
+        <div className="solid-locale-tab-content">
+          <SolidChatter
+            modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
             id={id}
-            viewMode={viewMode}
-            createMode={createMode}
-            handleLocaleChangeRedirect={handleLocaleChangeRedirect}
-            defaultEntityLocaleId={defaultEntityLocaleId}
-            applicableLocales={solidFormViewMetaData?.data?.applicableLocales}
-            solidFormViewData={solidFormViewData}
-            published={published}
+            refreshChatterMessage={refreshChatterMessage}
+            setRefreshChatterMessage={setRefreshChatterMessage}
+            actionsAllowed={actionsAllowed}
           />
-        </TabPanel>
-      }
-      <TabPanel header="Audit Trail" className={`SolidCustomLocaleTab`} headerClassName='p-2'>
-        <SolidChatter
-          modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
-          id={id}
-          refreshChatterMessage={refreshChatterMessage}
-          setRefreshChatterMessage={setRefreshChatterMessage}
-          actionsAllowed={actionsAllowed}
-        />
-      </TabPanel>
-      {
-        mcpUrl &&
-        (
-          <TabPanel header="SolidX AI" className={`SolidCustomLocaleTab py-2`} contentClassName='h-full'>
-            <div style={{ height: "calc(100vh - 60px)" }}>
-              <SolidAiMainWrapper mcpUrl={mcpUrl} />
-            </div>
-          </TabPanel>
-        )
-      }
-    </TabView>
+        </div>
+      )
+    }
+  ];
+
+  return (
+    <div style={{marginLeft:"10px",backgroundColor:"#fff"}}>
+
+    <SolidTabGroup
+      className="solid-locale-tabs h-full"
+      listClassName="solid-locale-tabs-list"
+      panelClassName="solid-locale-tabs-panel"
+      tabs={tabs}
+      value={activeTabValue}
+      onValueChange={setActiveTabValue}
+      tabPosition='center'
+      />
+      </div>
   );
 };
 

package/dist/components/core/locales/SolidLocale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLocale.d.ts","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"AAKA,OAAO,oBAAoB,CAAC;AAC5B,QAAA,MAAM,WAAW;2BACsF,GAAG;QAAM,MAAM;oBAAkB,GAAG;uBAAqB,GAAG;cAAY,MAAM;gBAAc,OAAO;gCAA8B,GAAG;uBAAqB,GAAG;2BAAyB,MAAM,GAAG,IAAI;uBAAqB,GAAG;eAAa,MAAM,GAAG,IAAI;6CAqH1V,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SolidLocale.d.ts","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAC5B,QAAA,MAAM,WAAW;2BACsF,GAAG;QAAM,MAAM;oBAAkB,GAAG;uBAAqB,GAAG;cAAY,MAAM;gBAAc,OAAO;gCAA8B,GAAG;uBAAqB,GAAG;2BAAyB,MAAM,GAAG,IAAI;uBAAqB,GAAG;eAAa,MAAM,GAAG,IAAI;6CAiH1V,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/core/locales/SolidLocale.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Divider } from 'primereact/divider';
-import { Dropdown } from 'primereact/dropdown';
+import { SolidDivider, SolidSelect } from "../../shad-cn-ui";
 import "./solid-locale.css";
 var SolidLocale = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
@@ -31,8 +30,7 @@ var SolidLocale = function (_a) {
             }
         }
     }, [applicableLocales, id, viewMode, createMode]);
-    var handleLocaleChange = function (e) {
-        var newLocale = e.value;
+    var handleLocaleChange = function (newLocale) {
         if (newLocale === selectedLocale)
             return;
         setSelectedLocale(newLocale);
@@ -53,10 +51,8 @@ var SolidLocale = function (_a) {
     };
     return (_jsxs("div", { className: "flex flex-column p-0 m-0", children: [_jsx("div", { className: "flex justify-content-end gap-3" }), solidFormViewData && (viewMode === 'edit') &&
                 (_jsx("div", { className: "w-full", style: { backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow: 'hidden' }, children: ((_c = (_b = solidFormViewMetaData.data.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.draftPublishWorkflow) &&
-                        published !== null ? (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#15803D' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "published version" })] })) : (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#EF4444' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "unpublished version" })] })) })), _jsxs("div", { className: "flex flex-column gap-2 mt-2", style: { backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }, children: [_jsx("h3", { className: "text-lg font-semibold p-0 m-0", children: "Information" }), _jsx(Divider, { className: "my-2" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Created At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_d = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _d === void 0 ? void 0 : _d.createdAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Updated At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_e = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _e === void 0 ? void 0 : _e.updatedAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Published At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime(published !== null && published !== void 0 ? published : '') })] })] }), ((_h = (_g = (_f = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.internationalisation) &&
-                        _jsxs(_Fragment, { children: [_jsx("h3", { className: "text-lg font-semibold mt-6 mb-2", children: "Internationalisation" }), _jsx("label", { className: "form-field-label", children: "Locales" }), _jsx(Dropdown, { value: selectedLocale, onChange: function (e) { return handleLocaleChange(e); }, options: localeOptions, optionLabel: "label", placeholder: "Select locale", className: "w-full", 
-                                    //TODO: disable if createMode is true
-                                    disabled: createMode }), viewMode === 'view' || createMode && (_jsxs("p", { className: "text-sm text-gray-700 mt-0 ml-0", children: [" By default record will be created in ", _jsx("b", { children: defautlLocale })] }))] })] })] }));
+                        published !== null ? (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#15803D' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "published version" })] })) : (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#EF4444' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "unpublished version" })] })) })), _jsxs("div", { className: "flex flex-column gap-2 mt-2", style: { backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }, children: [_jsx("h3", { className: "text-lg font-semibold p-0 m-0", children: "Information" }), _jsx(SolidDivider, { className: "my-2" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Created At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_d = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _d === void 0 ? void 0 : _d.createdAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Updated At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_e = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _e === void 0 ? void 0 : _e.updatedAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Published At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime(published !== null && published !== void 0 ? published : '') })] })] }), ((_h = (_g = (_f = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.internationalisation) &&
+                        _jsxs(_Fragment, { children: [_jsx("h3", { className: "text-lg font-semibold mt-6 mb-2", children: "Internationalisation" }), _jsx("label", { className: "form-field-label", children: "Locales" }), _jsx(SolidSelect, { value: selectedLocale, onChange: function (e) { return handleLocaleChange(e.value); }, options: localeOptions, placeholder: "Select locale", className: "w-full", disabled: createMode }), viewMode === 'view' || createMode && (_jsxs("p", { className: "text-sm text-gray-700 mt-0 ml-0", children: [" By default record will be created in ", _jsx("b", { children: defautlLocale })] }))] })] })] }));
 };
 export default SolidLocale;
 //# sourceMappingURL=SolidLocale.js.map

package/dist/components/core/locales/SolidLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLocale.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"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","sourcesContent":["\n\nimport React, { useEffect, useState } from 'react';\nimport { Divider } from 'primereact/divider';\nimport { Dropdown } from 'primereact/dropdown';\nimport \"./solid-locale.css\";\nconst SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,\n    applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {\n    const [localeOptions, setLocaleOptions] = useState([]);\n    const [defautlLocale, setDefaultLocale] = useState('');\n    useEffect(() => {\n        if (!applicableLocales) return;\n        // Set dropdown options\n        const localeOptions = applicableLocales.map((x: any) => ({\n            label: x.displayName,\n            value: x.locale,\n        }));\n        setLocaleOptions(localeOptions);\n\n        if (createMode) {\n            const defaultLocale = applicableLocales.find((x: any) => x.isDefault === 'yes');\n            setSelectedLocale(defaultLocale?.locale || null);\n            setDefaultLocale(defaultLocale?.displayName || '');\n            return;\n        }\n\n        if (viewMode === 'edit' || viewMode === 'view') {\n            //This is to check record entity matched defaultEntityLocaleId from query params & isDefault for default locale\n            const matchedLocale = applicableLocales.find(\n                (x: any) => x.isDefault === 'yes' && x.defaultEntityLocaleId == id\n            );\n            if (matchedLocale) {\n                setSelectedLocale(matchedLocale.locale);\n            }\n        }\n    }, [applicableLocales, id, viewMode, createMode]);\n\n    const handleLocaleChange = (e: any) => {\n\n        const newLocale = e.value;\n        if (newLocale === selectedLocale) return;\n        setSelectedLocale(newLocale);\n        const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;\n        handleLocaleChangeRedirect(newLocale, targetDefaultEntityLocaleId, viewMode);\n    };\n\n    // utils/formatDate.ts\n    const formatToDDMMYYWithTime = (dateString: string) => {\n        if (!dateString) return 'N/A';\n        const date = new Date(dateString);\n\n        const day = String(date.getDate()).padStart(2, '0');\n        const month = String(date.getMonth() + 1).padStart(2, '0');\n        const year = String(date.getFullYear()).slice(-2);\n\n        const hours = String(date.getHours()).padStart(2, '0');\n        const minutes = String(date.getMinutes()).padStart(2, '0');\n\n        return `${day}-${month}-${year} ${hours}:${minutes}`;\n    }\n\n\n    return (\n        <div className=\"flex flex-column p-0 m-0\">\n            <div className=\"flex justify-content-end gap-3\">\n            </div>\n            {solidFormViewData && (viewMode === 'edit') &&\n                (<div className=\"w-full\" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>\n                    {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&\n                        published !== null ? (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>\n                            Editing <span className=\"font-bold\">published version</span>\n                        </li>\n                    ) : (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>\n                            Editing <span className=\"font-bold\">unpublished version</span>\n                        </li>\n                    )}\n                </div>\n                )\n            }\n            <div className=\"flex flex-column gap-2 mt-2\" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>\n                <h3 className=\"text-lg font-semibold p-0 m-0\">Information</h3>\n                <Divider className=\"my-2\" />\n                <div className=\"space-y-2\">\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Created At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Updated At</p>\n                        <p className=\"text-sm m-0\">\n                            {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}\n                        </p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Published At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(published ?? '')}</p>\n                    </div>\n                </div>\n\n                {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&\n                    <>\n                        <h3 className=\"text-lg font-semibold mt-6 mb-2\">Internationalisation</h3>\n                        <label className=\"form-field-label\">Locales</label>\n                        <Dropdown\n                            value={selectedLocale}\n                            onChange={(e) => handleLocaleChange(e)}\n                            options={localeOptions}\n                            optionLabel=\"label\"\n                            placeholder=\"Select locale\"\n                            className=\"w-full\"\n                            //TODO: disable if createMode is true\n                            disabled={createMode}\n                        />\n                        {viewMode === 'view' || createMode && (\n                            <p className=\"text-sm text-gray-700 mt-0 ml-0\"> By default record will be created in <b>{defautlLocale}</b></p>\n                        )}\n                    </>\n                }\n            </div>\n            {/* <p className=\"text-sm font-bold text-gray-500 px-2\">Fill in form another locale</p> */}\n        </div>\n    );\n};\n\nexport default SolidLocale;\n"]}
+{"version":3,"file":"SolidLocale.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { SolidDivider, SolidSelect } from \"../../shad-cn-ui\";\nimport \"./solid-locale.css\";\nconst SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,\n    applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {\n    const [localeOptions, setLocaleOptions] = useState([]);\n    const [defautlLocale, setDefaultLocale] = useState('');\n    useEffect(() => {\n        if (!applicableLocales) return;\n        // Set dropdown options\n        const localeOptions = applicableLocales.map((x: any) => ({\n            label: x.displayName,\n            value: x.locale,\n        }));\n        setLocaleOptions(localeOptions);\n\n        if (createMode) {\n            const defaultLocale = applicableLocales.find((x: any) => x.isDefault === 'yes');\n            setSelectedLocale(defaultLocale?.locale || null);\n            setDefaultLocale(defaultLocale?.displayName || '');\n            return;\n        }\n\n        if (viewMode === 'edit' || viewMode === 'view') {\n            //This is to check record entity matched defaultEntityLocaleId from query params & isDefault for default locale\n            const matchedLocale = applicableLocales.find(\n                (x: any) => x.isDefault === 'yes' && x.defaultEntityLocaleId == id\n            );\n            if (matchedLocale) {\n                setSelectedLocale(matchedLocale.locale);\n            }\n        }\n    }, [applicableLocales, id, viewMode, createMode]);\n\n    const handleLocaleChange = (newLocale: string) => {\n        if (newLocale === selectedLocale) return;\n        setSelectedLocale(newLocale);\n        const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;\n        handleLocaleChangeRedirect(newLocale, targetDefaultEntityLocaleId, viewMode);\n    };\n\n    // utils/formatDate.ts\n    const formatToDDMMYYWithTime = (dateString: string) => {\n        if (!dateString) return 'N/A';\n        const date = new Date(dateString);\n\n        const day = String(date.getDate()).padStart(2, '0');\n        const month = String(date.getMonth() + 1).padStart(2, '0');\n        const year = String(date.getFullYear()).slice(-2);\n\n        const hours = String(date.getHours()).padStart(2, '0');\n        const minutes = String(date.getMinutes()).padStart(2, '0');\n\n        return `${day}-${month}-${year} ${hours}:${minutes}`;\n    }\n\n\n    return (\n        <div className=\"flex flex-column p-0 m-0\">\n            <div className=\"flex justify-content-end gap-3\">\n            </div>\n            {solidFormViewData && (viewMode === 'edit') &&\n                (<div className=\"w-full\" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>\n                    {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&\n                        published !== null ? (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>\n                            Editing <span className=\"font-bold\">published version</span>\n                        </li>\n                    ) : (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>\n                            Editing <span className=\"font-bold\">unpublished version</span>\n                        </li>\n                    )}\n                </div>\n                )\n            }\n            <div className=\"flex flex-column gap-2 mt-2\" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>\n                <h3 className=\"text-lg font-semibold p-0 m-0\">Information</h3>\n                <SolidDivider className=\"my-2\" />\n                <div className=\"space-y-2\">\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Created At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Updated At</p>\n                        <p className=\"text-sm m-0\">\n                            {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}\n                        </p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Published At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(published ?? '')}</p>\n                    </div>\n                </div>\n\n                {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&\n                    <>\n                        <h3 className=\"text-lg font-semibold mt-6 mb-2\">Internationalisation</h3>\n                        <label className=\"form-field-label\">Locales</label>\n                        <SolidSelect\n                            value={selectedLocale}\n                            onChange={(e) => handleLocaleChange(e.value)}\n                            options={localeOptions}\n                            placeholder=\"Select locale\"\n                            className=\"w-full\"\n                            disabled={createMode}\n                        />\n                        {viewMode === 'view' || createMode && (\n                            <p className=\"text-sm text-gray-700 mt-0 ml-0\"> By default record will be created in <b>{defautlLocale}</b></p>\n                        )}\n                    </>\n                }\n            </div>\n            {/* <p className=\"text-sm font-bold text-gray-500 px-2\">Fill in form another locale</p> */}\n        </div>\n    );\n};\n\nexport default SolidLocale;\n"]}

package/dist/components/core/locales/SolidLocale.tsx

@@ -1,8 +1,6 @@
 
-
 import React, { useEffect, useState } from 'react';
-import { Divider } from 'primereact/divider';
-import { Dropdown } from 'primereact/dropdown';
+import { SolidDivider, SolidSelect } from "../../shad-cn-ui";
 import "./solid-locale.css";
 const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,
     applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {
@@ -35,9 +33,7 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
         }
     }, [applicableLocales, id, viewMode, createMode]);
 
-    const handleLocaleChange = (e: any) => {
-
-        const newLocale = e.value;
+    const handleLocaleChange = (newLocale: string) => {
         if (newLocale === selectedLocale) return;
         setSelectedLocale(newLocale);
         const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;
@@ -81,7 +77,7 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
             }
             <div className="flex flex-column gap-2 mt-2" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>
                 <h3 className="text-lg font-semibold p-0 m-0">Information</h3>
-                <Divider className="my-2" />
+                <SolidDivider className="my-2" />
                 <div className="space-y-2">
                     <div className='flex align-items-center justify-content-between gap-2 p-2'>
                         <p className="text-sm font-bold text-gray-500 m-0">Created At</p>
@@ -103,14 +99,12 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
                     <>
                         <h3 className="text-lg font-semibold mt-6 mb-2">Internationalisation</h3>
                         <label className="form-field-label">Locales</label>
-                        <Dropdown
+                        <SolidSelect
                             value={selectedLocale}
-                            onChange={(e) => handleLocaleChange(e)}
+                            onChange={(e) => handleLocaleChange(e.value)}
                             options={localeOptions}
-                            optionLabel="label"
                             placeholder="Select locale"
                             className="w-full"
-                            //TODO: disable if createMode is true
                             disabled={createMode}
                         />
                         {viewMode === 'view' || createMode && (

package/dist/components/core/locales/solid-locale.css

@@ -1,36 +1,57 @@
-.SolidCustomLocaleTabviewPanels {
-  padding: 0 !important;
+.solid-locale-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.SolidCustomLocaleTabHighlight .p-tabview-nav-link {
-  border: none !important;
+.solid-locale-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--solid-surface-1) 90%, transparent);
+  justify-content: flex-start;
 }
 
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected {
-  border-bottom: 2px solid var(--border-color) !important;
+.solid-locale-tabs .solid-tabs-trigger {
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 150ms ease, border-color 150ms ease;
 }
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected.p-highlight {
-  border-bottom: 2px solid var(--primary-color) !important;
+
+.solid-locale-tabs .solid-tabs-trigger:hover {
+  color: var(--foreground);
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-nav li .p-tabview-nav-link {
-  border: none !important;
-  text-align: center !important;
-  align-content: center !important;
-  justify-content: center !important;
-} 
+.solid-locale-tabs .solid-tabs-trigger.is-active {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
 
-.SolidCustomLocaleTab {
+.solid-locale-tabs-panel {
   flex: 1;
-  /* text-align: center !important; */
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-panels{
-  width: 100% !important;
-  height: 100%;
-  padding: 0 !important;
+.solid-locale-tab-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-nav-link{
-  border: none !important;
-}
+.solid-locale-tab-content--padded {
+  padding: 0.75rem;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AA+BA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CAkezC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AAmCA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CA4bzC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -56,26 +56,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CancelButton, SolidCancelButton } from "../../../components/common/CancelButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
 import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "../../../redux/api/modelApi";
 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 { Dialog } from "primereact/dialog";
-import { Divider } from "primereact/divider";
-import { OverlayPanel } from "primereact/overlaypanel";
-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";
+var TABS = ["model", "fields"];
+var getTabErrorState = function (tab) { return ({
+    model: tab === "model",
+    fields: tab === "fields",
+}); };
 var CreateModel = function (_a) {
     var data = _a.data, params = _a.params;
     var dispatch = useDispatch();
@@ -93,11 +93,23 @@ var CreateModel = function (_a) {
     var _k = useCreatemodelMutation(), createModel = _k[0], _l = _k[1], isCreateModelLoading = _l.isLoading, isCreateModelSuccess = _l.isSuccess, isCreateModelError = _l.isError, createModelError = _l.error, newModel = _l.data;
     var _m = useUpdatemodelMutation(), updateModel = _m[0], _o = _m[1], isUpdatedModelUpdating = _o.isLoading, isUpdatedModelSuceess = _o.isSuccess, isUpdateModelError = _o.isError, updateModelError = _o.error, updatedModel = _o.data;
     var _p = useDeletemodelMutation(), deleteModel = _p[0], _q = _p[1], isModelDeleted = _q.isLoading, isDeleteModelSuceess = _q.isSuccess, isDeleteModelError = _q.isError, deleteModelError = _q.error, DeletedModel = _q.data;
-    var _r = useState(0), activeIndex = _r[0], setActiveIndex = _r[1];
-    var _s = useState({}), tabErrors = _s[0], setTabErrors = _s[1];
+    var _r = useState("model"), activeTab = _r[0], setActiveTab = _r[1];
+    var _s = useState(getTabErrorState()), tabErrors = _s[0], setTabErrors = _s[1];
     var _t = useState({}), formErrors = _t[0], setFormErrors = _t[1];
     var nextTab = function () {
-        setActiveIndex(activeIndex + 1);
+        var currentIndex = TABS.indexOf(activeTab);
+        var nextValue = TABS[Math.min(currentIndex + 1, TABS.length - 1)];
+        setActiveTab(nextValue);
+    };
+    var handleTabChange = function (nextValue) {
+        var _a;
+        if (nextValue === activeTab) {
+            return;
+        }
+        if (activeTab === "model") {
+            (_a = formikModelMetadataRef.current) === null || _a === void 0 ? void 0 : _a.handleSubmit();
+        }
+        setActiveTab(nextValue);
     };
     useEffect(function () {
         var _a;
@@ -164,7 +176,6 @@ var CreateModel = function (_a) {
                     //   }
                     // });
                     formikModelMetadataRef.current.validateForm().then(function (errors) {
-                        var _a;
                         var firstErrorTab;
                         if (Object.keys(errors).length > 0) {
                             setFormErrors(errors);
@@ -172,20 +183,21 @@ var CreateModel = function (_a) {
                             errorMessages.forEach(function (error) {
                                 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 !== null && firstErrorTab !== void 0 ? firstErrorTab : 1; // If no prior error, set to Field tab
+                            firstErrorTab = firstErrorTab !== null && firstErrorTab !== void 0 ? firstErrorTab : "fields"; // If no prior error, set to Field tab
                         }
                         if (firstErrorTab !== undefined) {
-                            setTabErrors((_a = {}, _a[firstErrorTab] = true, _a)); // 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();
                         }
                     });
@@ -314,17 +326,6 @@ var CreateModel = function (_a) {
     // };
     // Error Handler 
     // Added useEffect to remove active tab class border color if error is there.
-    useEffect(function () {
-        var 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(function () {
         var errors = [
             { isError: isCreateModelError, error: createModelError },
@@ -345,41 +346,35 @@ var CreateModel = function (_a) {
             });
         }
     }, [isCreateModelError, isDeleteModelError, isUpdateModelError]);
-    var op = useRef(null);
-    var formActionDropdown = function () {
-        return (_jsxs("div", { children: [_jsx(Button, { outlined: true, severity: "secondary", type: "button", icon: 'pi pi-cog', size: "small", className: "surface-card p-0 hidden md:flex", style: {
-                        height: 33.06,
-                        width: 33.06
-                    }, onClick: function (e) {
-                        // @ts-ignore 
-                        return op.current.toggle(e);
-                    } }), _jsx(Button, { outlined: true, 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: function (e) {
-                        // @ts-ignore 
-                        return op.current.toggle(e);
-                    } }), _jsx(OverlayPanel, { ref: op, className: "solid-custom-overlay", children: _jsx("div", { className: "flex flex-column gap-1 p-1", children: _jsx(Button, { text: true, type: "button", className: "w-8rem text-left gap-2", label: "Delete", size: "small", iconPos: "left", severity: "danger", icon: 'pi pi-trash', onClick: function () { return setDeleteEntity(true); } }) }) })] }));
-    };
-    var _u = useState(false), isDirty = _u[0], setIsDirty = _u[1];
-    return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsxs("div", { style: { width: '100%', borderRight: '1px solid var(--primary-light-color' }, children: [_jsx("div", { className: "solid-form-header", children: params.id === "new" ?
-                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(BackButton, {}), _jsxs("div", { className: "form-wrapper-title solid-long-text-wrapper  ", children: ["Create Model ", (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) ? "- ".concat(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) : ""] })] }), _jsxs("div", { className: "gap-3 flex", children: [isDirty &&
-                                                _jsx(Button, { label: "Save", size: "small", onClick: handleSubmit, type: "submit" }), _jsx(CancelButton, {})] })] })
-                            :
-                                _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(BackButton, {}), _jsxs("div", { className: "form-wrapper-title solid-long-text-wrapper ", children: ["Edit Model ", (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) ? "- ".concat(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) : ""] })] }), _jsxs("div", { className: "gap-3 flex", children: [(data === null || data === void 0 ? void 0 : data.isSystem) !== true &&
-                                                    _jsx(_Fragment, { children: _jsx("div", { children: isDirty &&
-                                                                _jsxs(_Fragment, { children: [_jsx(Button, { label: "Save", size: "small", type: "submit", className: "hidden lg:flex", onClick: handleSubmit }), _jsx(Button, { icon: "pi pi-check", size: "small", type: "submit", className: " lg:hidden solid-icon-button", onClick: handleSubmit })] }) }) }), _jsx(SolidCancelButton, {}), formActionDropdown()] })] }) }), _jsx(SolidFormHeader, {}), _jsx("div", { className: "px-4 py-3 md:p-4 solid-form-content", children: _jsxs(TabView, { activeIndex: activeIndex, onTabChange: function (e) {
-                                if (activeIndex == 0) {
-                                    formikModelMetadataRef.current.handleSubmit();
-                                    setActiveIndex(e.index);
-                                }
-                                if (activeIndex == 1) {
-                                    setActiveIndex(e.index);
-                                }
-                            }, panelContainerClassName: "px-0", className: "relative", children: [_jsx(TabPanel, { header: "Model", headerClassName: tabErrors[0] ? "tab-error-heading " : "", children: _jsx(ModelMetaData, { modelMetaData: modelMetaData, setModelMetaData: setModelMetaData, allModelsNames: allModelsNames, deleteModelFunction: deleteModelFunction, nextTab: nextTab, formikModelMetadataRef: formikModelMetadataRef, params: params, formErrors: formErrors, setIsDirty: setIsDirty }) }), _jsx(TabPanel, { header: "Fields", headerClassName: tabErrors[1] ? "tab-error-heading " : "", children: _jsx(FieldMetaData, { modelMetaData: modelMetaData, fieldMetaData: fieldMetaData, setFieldMetaData: setFieldMetaData, deleteModelFunction: deleteModelFunction, nextTab: nextTab, formikFieldsMetadataRef: formikFieldsMetadataRef, params: params, setIsDirty: setIsDirty }) })] }) })] }), _jsxs(Dialog, { header: "Delete Field", headerClassName: "py-2", className: "solid-confirm-dialog", contentClassName: "px-0 pb-0", visible: deleteEntity, style: { width: '20vw' }, onHide: function () { if (!deleteEntity)
-                    return; setDeleteEntity(false); }, children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "p-4", children: [_jsx("p", { className: "m-0 solid-primary-title", style: { fontSize: 16 }, children: "Are you sure you want to delete this Field ?" }), _jsx("p", { className: "", style: { color: 'var{--solid-grey-500}' }, children: modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName }), _jsxs("div", { className: "flex align-items-center gap-2 mt-3", children: [_jsx(Button, { label: "Delete", size: "small", onClick: deleteModelFunction }), _jsx(Button, { label: "Cancel", size: "small", onClick: function () { return setDeleteEntity(false); }, outlined: true })] })] })] })] }));
+    var _u = useState(false), formActionsMenuOpen = _u[0], setFormActionsMenuOpen = _u[1];
+    var formActionDropdown = function () { return (_jsxs(SolidPopover, { open: formActionsMenuOpen, onOpenChange: setFormActionsMenuOpen, children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-icon-button", "aria-label": "Model actions", children: _jsx(Settings, { size: 16 }) }) }), _jsx(SolidPopoverContent, { side: "bottom", align: "end", className: "solid-form-actions-popover", onClick: function (event) { return event.stopPropagation(); }, children: _jsxs("button", { type: "button", className: "solid-row-action-button solid-row-action-button-danger", onClick: function () {
+                        setFormActionsMenuOpen(false);
+                        setDeleteEntity(true);
+                    }, children: [_jsx(Trash2, { size: 14, className: "solid-row-action-button-icon" }), _jsx("span", { className: "solid-row-action-button-label", children: "Delete" })] }) })] })); };
+    var _v = useState(false), isDirty = _v[0], setIsDirty = _v[1];
+    var isCreateMode = params.id === "new";
+    var headerTitleBase = isCreateMode ? "Create Model" : "Edit Model";
+    var headerTitle = "".concat(headerTitleBase).concat((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) ? " - ".concat(modelMetaData.displayName) : "");
+    var canShowActionsMenu = !isCreateMode && (data === null || data === void 0 ? void 0 : data.isSystem) !== true;
+    var handleCancel = function () { return router.back(); };
+    return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [_jsxs("div", { children: [_jsxs("div", { className: "solid-form-header flex align-items-center justify-content-between gap-3 flex-wrap", children: [_jsx("div", { className: "flex flex-column gap-1" }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidButton, { variant: "outline", size: "sm", type: "button", onClick: handleCancel, className: "bg-primary-reverse", children: "Cancel" }), isDirty && (_jsx(SolidButton, { size: "sm", type: "button", onClick: handleSubmit, children: "Save" })), canShowActionsMenu && formActionDropdown()] })] }), _jsx("div", { className: "px-4 py-3 md:p-4 solid-form-content", children: _jsx(SolidTabGroup, { className: "relative", panelClassName: "px-0", tabs: [
+                                        {
+                                            value: "model",
+                                            label: _jsx("span", { className: tabErrors.model ? "tab-error-heading" : "", children: "Model" }),
+                                            content: (_jsx(ModelMetaData, { modelMetaData: modelMetaData, setModelMetaData: setModelMetaData, allModelsNames: allModelsNames, deleteModelFunction: deleteModelFunction, nextTab: nextTab, formikModelMetadataRef: formikModelMetadataRef, params: params, formErrors: formErrors, setIsDirty: setIsDirty })),
+                                        },
+                                        {
+                                            value: "fields",
+                                            label: _jsx("span", { className: tabErrors.fields ? "tab-error-heading" : "", children: "Fields" }),
+                                            content: (_jsx(FieldMetaData, { modelMetaData: modelMetaData, fieldMetaData: fieldMetaData, setFieldMetaData: setFieldMetaData, deleteModelFunction: deleteModelFunction, nextTab: nextTab, formikFieldsMetadataRef: formikFieldsMetadataRef, params: params, setIsDirty: setIsDirty })),
+                                        },
+                                    ], value: activeTab, onValueChange: function (value) {
+                                        var next = TABS.find(function (tab) { return tab === value; });
+                                        if (next) {
+                                            handleTabChange(next);
+                                        }
+                                    } }) })] }), _jsx(SolidFormFooter, { params: params })] }), _jsxs(SolidDialog, { header: "Delete Field", headerClassName: "py-2", className: "solid-confirm-dialog", contentClassName: "px-0 pb-0", visible: deleteEntity, style: { width: '20vw' }, onHide: function () { if (!deleteEntity)
+                    return; setDeleteEntity(false); }, children: [_jsx(SolidDivider, { className: "m-0" }), _jsxs("div", { className: "p-4", children: [_jsx("p", { className: "m-0 solid-primary-title", style: { fontSize: 16 }, children: "Are you sure you want to delete this Field ?" }), _jsx("p", { className: "", style: { color: 'var{--solid-grey-500}' }, children: modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName }), _jsxs("div", { className: "flex align-items-center gap-2 mt-3", children: [_jsx(SolidButton, { size: "sm", onClick: deleteModelFunction, children: "Delete" }), _jsx(SolidButton, { size: "sm", variant: "outline", onClick: function () { return setDeleteEntity(false); }, children: "Cancel" })] })] })] })] }));
 };
 export default CreateModel;
 //# sourceMappingURL=CreateModel.js.map