@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

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;
@@ -61,60 +57,58 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
 
 
     return (
-        <div className="flex flex-column p-0 m-0">
+        <div className="flex flex-column p-0 m-0 solid-locale-stack">
             <div className="flex justify-content-end gap-3">
             </div>
             {solidFormViewData && (viewMode === 'edit') &&
-                (<div className="w-full" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>
+                (<div className={`w-full solid-locale-status-banner ${published !== null ? 'is-published' : 'is-unpublished'}`}>
                     {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&
                         published !== null ? (
-                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>
+                        <li className="w-full text-left list-disc solid-locale-status-copy">
                             Editing <span className="font-bold">published version</span>
                         </li>
                     ) : (
-                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>
+                        <li className="w-full text-left list-disc solid-locale-status-copy">
                             Editing <span className="font-bold">unpublished version</span>
                         </li>
                     )}
                 </div>
                 )
             }
-            <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" />
+            <div className="flex flex-column gap-2 mt-2 solid-locale-info-card">
+                <h3 className="solid-locale-section-title p-0 m-0">Information</h3>
+                <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>
-                        <p className="text-sm m-0">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Created At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>
                     </div>
-                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
-                        <p className="text-sm font-bold text-gray-500 m-0">Updated At</p>
-                        <p className="text-sm m-0">
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Updated At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">
                             {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}
                         </p>
                     </div>
-                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
-                        <p className="text-sm font-bold text-gray-500 m-0">Published At</p>
-                        <p className="text-sm m-0">{formatToDDMMYYWithTime(published ?? '')}</p>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Published At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">{formatToDDMMYYWithTime(published ?? '')}</p>
                     </div>
                 </div>
 
                 {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&
                     <>
-                        <h3 className="text-lg font-semibold mt-6 mb-2">Internationalisation</h3>
+                        <h3 className="solid-locale-section-title 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 && (
-                            <p className="text-sm text-gray-700 mt-0 ml-0"> By default record will be created in <b>{defautlLocale}</b></p>
+                        {(viewMode === 'view' || createMode) && (
+                            <p className="text-sm mt-0 ml-0 solid-locale-helper-copy"> By default record will be created in <b>{defautlLocale}</b></p>
                         )}
                     </>
                 }

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

@@ -1,36 +1,155 @@
-.SolidCustomLocaleTabviewPanels {
-  padding: 0 !important;
+.solid-locale-panel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  margin-left: 10px;
+  background: transparent;
 }
 
-.SolidCustomLocaleTabHighlight .p-tabview-nav-link {
-  border: none !important;
+.solid-locale-panel--single {
+  margin-left: 0;
 }
 
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected {
-  border-bottom: 2px solid var(--border-color) !important;
+.solid-locale-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected.p-highlight {
-  border-bottom: 2px solid var(--primary-color) !important;
+
+.solid-locale-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 44px;
+  padding: 0 0.9rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  background: color-mix(in srgb, var(--card) 97%, var(--background) 3%);
+  justify-content: flex-start;
 }
 
-.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 {
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0.65rem 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 150ms ease, border-color 150ms ease;
+}
 
-.SolidCustomLocaleTab {
+.solid-locale-tabs .solid-tabs-trigger:hover {
+  color: var(--foreground);
+}
+
+.solid-locale-tabs .solid-tabs-trigger.is-active {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
+
+.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;
+}
+
+.solid-locale-tab-content--padded {
+  padding: 0.85rem;
+}
+
+.solid-locale-stack {
+  gap: 0.2rem;
+}
+
+.solid-locale-status-banner {
+  margin: 0.25rem 0 0;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  background: color-mix(in srgb, var(--card) 97%, var(--background) 3%);
+}
+
+.solid-locale-status-banner.is-published {
+  border-color: color-mix(in srgb, #16a34a 24%, var(--border) 76%);
+  background: color-mix(in srgb, #16a34a 8%, var(--card) 92%);
+}
+
+.solid-locale-status-banner.is-unpublished {
+  border-color: color-mix(in srgb, #ef4444 24%, var(--border) 76%);
+  background: color-mix(in srgb, #ef4444 7%, var(--card) 93%);
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-nav-link{
-  border: none !important;
-}
+.solid-locale-status-copy {
+  margin: 0 1rem;
+  padding: 0.7rem 0;
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.solid-locale-status-banner.is-published .solid-locale-status-copy {
+  color: #15803d;
+}
+
+.solid-locale-status-banner.is-unpublished .solid-locale-status-copy {
+  color: #dc2626;
+}
+
+.dark .solid-locale-status-banner.is-published .solid-locale-status-copy,
+.theme-dark .solid-locale-status-banner.is-published .solid-locale-status-copy {
+  color: #4ade80;
+}
+
+.dark .solid-locale-status-banner.is-unpublished .solid-locale-status-copy,
+.theme-dark .solid-locale-status-banner.is-unpublished .solid-locale-status-copy {
+  color: #fda4af;
+}
+
+.solid-locale-info-card {
+  padding: 0.85rem;
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card) 96%, var(--background) 4%);
+}
+
+.solid-locale-section-title {
+  font-size: 0.9rem;
+  line-height: 1.25;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.solid-locale-info-row {
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--muted) 16%, var(--card) 84%);
+}
+
+.solid-locale-info-label {
+  color: var(--muted-foreground);
+  font-size: 0.72rem;
+}
+
+.solid-locale-info-value {
+  color: var(--foreground);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.solid-locale-helper-copy {
+  color: var(--muted-foreground);
+  font-size: 0.74rem;
+  line-height: 1.4;
+}

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 Model", 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 Model?" }), _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