@solidxai/core-ui 0.1.12-beta.3 → 0.1.12-beta.6

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

@@ -868,7 +868,27 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
   return Yup.object(schema);
 };
 
-const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, allFields, deleteModelFunction, setVisiblePopup, params, setIsRequiredPopUp, showToaster }: any) => {
+const FieldMetaDataForm = ({
+  setIsDirty,
+  modelMetaData,
+  fieldMetaData,
+  setFieldMetaData,
+  allFields,
+  deleteModelFunction,
+  setVisiblePopup,
+  params,
+  setIsRequiredPopUp,
+  showToaster,
+  onDraftSubmit,
+  onClose,
+  availableFieldTypes,
+  forceShowTypeSelector = false,
+  selectorRequireContinue = false,
+  selectorContinueLabel = "Next",
+  selectorInitialFieldType = null,
+  disableIdentityEditingForExisting = true,
+  submitLabel = "Finish",
+}: any) => {
   const booleanOptions = ["false", "true"];
   const booleanSegmentedOptions = booleanOptions.map((value) => ({
     label: capitalize(value),
@@ -898,9 +918,13 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
   const [markdownText, setMarkdownText] = useState<string>();
   const [encryptState, setEncryptState] = useState<boolean>(Boolean(fieldMetaData?.encrypt));
 
-  const [showTypeFilter, setShowTypeFilter] = useState(fieldMetaData ? false : true);
+  const [showTypeFilter, setShowTypeFilter] = useState(forceShowTypeSelector || !fieldMetaData);
   const [selectedType, setSelectedType] = useState<{ label: string; value: string } | null>(
-    fieldMetaData?.type ? { label: fieldMetaData.type, value: fieldMetaData.type } : null
+    fieldMetaData?.type
+      ? { label: fieldMetaData.type, value: fieldMetaData.type }
+      : selectorInitialFieldType
+        ? { label: selectorInitialFieldType, value: selectorInitialFieldType }
+        : null
   );
   const selectedTypeValue = selectedType?.value || "";
   const [selectedComputedFieldValueType, setSelectedComputedFieldValueType] = useState(fieldMetaData?.computedFieldValueType && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType });
@@ -939,6 +963,18 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
   const showOrmOptions = currentFields.includes("ormType") && Boolean(ormTypeOptions && ormTypeOptions.length);
   const showValidationSection =
     selectedTypeValue !== "relation" && (showRegexFields || showMinFields || showMaxFields || showOrmOptions);
+  const isExistingFieldReadOnly = disableIdentityEditingForExisting && Boolean(fieldMetaData?.id);
+
+  const closeForm = useCallback(() => {
+    if (typeof onClose === "function") {
+      onClose();
+      return;
+    }
+
+    if (typeof setVisiblePopup === "function") {
+      setVisiblePopup(false);
+    }
+  }, [onClose, setVisiblePopup]);
 
   const searchMediaStorageProvIderId = async (event: any) => {
     try {
@@ -1395,34 +1431,37 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
     enableReinitialize: true,
     onSubmit: async (values) => {
       try {
-        setFieldMetaData((prevItems: any) => {
-          const newFieldData = { ...values, isSystem: values.isSystem == true ? true : '' }
-          const formtatedFieldPayload = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
-          const existingIndex = prevItems.findIndex((item: any) => item.identifier === formtatedFieldPayload.identifier);
-          let updatedItems;
-          if (existingIndex !== -1) {
-            updatedItems = [...prevItems];
-            updatedItems[existingIndex] = formtatedFieldPayload;
-            return updatedItems
-          }
-          else {
-            updatedItems = [...prevItems, formtatedFieldPayload];
-            if (params?.id !== 'new' && formtatedFieldPayload?.required && !formtatedFieldPayload?.defaultValue) {
-              setIsRequiredPopUp(true);
+        const newFieldData = { ...values, isSystem: values.isSystem == true ? true : '' }
+        const formtatedFieldPayload = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
+
+        if (typeof onDraftSubmit === "function") {
+          onDraftSubmit(formtatedFieldPayload);
+        } else {
+          setFieldMetaData((prevItems: any) => {
+            const existingIndex = prevItems.findIndex((item: any) => item.identifier === formtatedFieldPayload.identifier);
+            let updatedItems;
+            if (existingIndex !== -1) {
+              updatedItems = [...prevItems];
+              updatedItems[existingIndex] = formtatedFieldPayload;
+              return updatedItems
             }
-            // return [...prevItems, formtatedFieldPayload]
-          }
-          return updatedItems;
-        });
-        if (values.userKey) {
-          const data = {
-            modelName: values.relationCoModelSingularName,
-            fieldName: values.userKey
+            else {
+              updatedItems = [...prevItems, formtatedFieldPayload];
+              if (params?.id !== 'new' && formtatedFieldPayload?.required && !formtatedFieldPayload?.defaultValue) {
+                setIsRequiredPopUp(true);
+              }
+            }
+            return updatedItems;
+          });
+          if (values.userKey) {
+            const data = {
+              modelName: values.relationCoModelSingularName,
+              fieldName: values.userKey
+            }
+            updateUserKey(data);
           }
-          updateUserKey(data);
         }
-        // nextTab()
-        setVisiblePopup(false);
+        closeForm();
 
       } catch (err) {
         console.error(ERROR_MESSAGES.CREATE_MODEL, err);
@@ -1773,6 +1812,10 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
             <FieldSelector
               handleTypeSelect={handleTypeSelect}
               modelMetaData={modelMetaData}
+              availableFieldTypes={availableFieldTypes}
+              initialSelectedValue={selectedType?.value ?? selectorInitialFieldType}
+              requireExplicitContinue={selectorRequireContinue}
+              continueLabel={selectorContinueLabel}
             ></FieldSelector>
             :
             <div className="p-3" style={{ maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
@@ -1795,7 +1838,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                             </label>
                             <SolidInput
                               type="text"
-                              disabled={fieldMetaData?.id}
+                              disabled={isExistingFieldReadOnly}
                               id="displayName"
                               name="displayName"
                               onChange={(e) => {
@@ -1823,7 +1866,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                               Name
                             </label>
                             <SolidInput
-                              disabled={fieldMetaData?.id}
+                              disabled={isExistingFieldReadOnly}
                               type="text"
                               id="name"
                               name="name"
@@ -1878,7 +1921,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   }
                                 }}
                                 checked={showColumnName}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                               />
                               <label htmlFor="ingredient1" className="form-field-label">
                                 Set Column Name
@@ -1890,7 +1933,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   Column Name
                                 </label>
                                 <SolidInput
-                                  disabled={fieldMetaData?.id}
+                                  disabled={isExistingFieldReadOnly}
                                   type="text"
                                   id="columnName"
                                   name="columnName"
@@ -2389,7 +2432,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelColumnName"
                                 name="relationCoModelColumnName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelColumnName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -2528,7 +2571,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelFieldName"
                                 name="relationCoModelFieldName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelFieldName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -2598,7 +2641,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationJoinTableName"
                                 name="relationJoinTableName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationJoinTableName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -3050,7 +3093,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                             "min"
                                           ),
                                         })}
-                                        disabled={fieldMetaData?.id}
+                                        disabled={isExistingFieldReadOnly}
                                       />
                                     </div>
                                     {isFormFieldValid(formik, "min") && (
@@ -3088,7 +3131,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                             "max"
                                           ),
                                         })}
-                                        disabled={fieldMetaData?.id}
+                                        disabled={isExistingFieldReadOnly}
                                       />
                                     </div>
 
@@ -3447,10 +3490,10 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                   </TabView>
                   <div className="mt-4 flex gap-4">
                     <div>
-                      <SolidButton label="Finish" size="small" onClick={() => showError()} type="submit" />
+                      <SolidButton label={submitLabel} size="small" onClick={() => showError()} type="submit" />
                     </div>
                     <div>
-                      <SolidButton label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined />
+                      <SolidButton label="Cancel" size="small" severity="secondary" type="reset" onClick={closeForm} outlined />
                     </div>
                   </div>
                 </div>

package/dist/components/core/model/FieldSelector.d.ts

@@ -1,7 +1,11 @@
 type FieldSelectorProps = {
     handleTypeSelect: (value: string, label: string) => void;
     modelMetaData?: any;
+    availableFieldTypes?: string[];
+    initialSelectedValue?: string | null;
+    requireExplicitContinue?: boolean;
+    continueLabel?: string;
 };
-declare const FieldSelector: ({ handleTypeSelect }: FieldSelectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldSelector: ({ handleTypeSelect, availableFieldTypes, initialSelectedValue, requireExplicitContinue, continueLabel, }: FieldSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldSelector;
 //# sourceMappingURL=FieldSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"AA0BA,KAAK,kBAAkB,GAAG;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAwDF,QAAA,MAAM,aAAa,yBAA0B,kBAAkB,4CAoC9D,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"AA4BA,KAAK,kBAAkB,GAAG;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAwDF,QAAA,MAAM,aAAa,6GAMhB,kBAAkB,4CAqEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AlignLeft, Calculator, Calendar, Clock9, Code2, Feather, Fingerprint, FunctionSquare, Hash, Image, Images, ListChecks, ListFilter, Mail, Share2, Shield, Sigma, Timer, ToggleLeft, Type, } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { AlignLeft, Calculator, Calendar, Clock9, Code2, Feather, Fingerprint, FunctionSquare, Hash, Image, Images, ListChecks, ListFilter, Mail, Share2, Shield, Sigma, Timer, ToggleLeft, Type, ArrowRight, } from "lucide-react";
+import { SolidButton } from "../../shad-cn-ui";
 var fieldToneMap = {
     int: "blue",
     bigint: "blue",
@@ -46,13 +47,31 @@ var solidFieldOptions = [
     { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
 ];
 var FieldSelector = function (_a) {
-    var handleTypeSelect = _a.handleTypeSelect;
-    var _b = useState(null), selectedField = _b[0], setSelectedField = _b[1];
+    var handleTypeSelect = _a.handleTypeSelect, availableFieldTypes = _a.availableFieldTypes, _b = _a.initialSelectedValue, initialSelectedValue = _b === void 0 ? null : _b, _c = _a.requireExplicitContinue, requireExplicitContinue = _c === void 0 ? false : _c, _d = _a.continueLabel, continueLabel = _d === void 0 ? "Next" : _d;
+    var _e = useState(initialSelectedValue), selectedField = _e[0], setSelectedField = _e[1];
+    useEffect(function () {
+        setSelectedField(initialSelectedValue);
+    }, [initialSelectedValue]);
+    var visibleFieldOptions = useMemo(function () {
+        if (!(availableFieldTypes === null || availableFieldTypes === void 0 ? void 0 : availableFieldTypes.length)) {
+            return solidFieldOptions;
+        }
+        var allowedTypes = new Set(availableFieldTypes);
+        return solidFieldOptions.filter(function (option) { return allowedTypes.has(option.value); });
+    }, [availableFieldTypes]);
     var handleSelect = function (option) {
         setSelectedField(option.value);
-        handleTypeSelect(option.value, option.label);
+        if (!requireExplicitContinue) {
+            handleTypeSelect(option.value, option.label);
+        }
     };
-    return (_jsxs("div", { className: "solid-field-selector-container", children: [_jsxs("div", { className: "solid-field-selector-header", children: [_jsx("p", { className: "form-wrapper-heading", children: "Select Field Type" }), _jsx("p", { className: "solid-field-selector-subheading", children: "Choose the data type you want to add to the model." })] }), _jsx("div", { className: "solid-field-selector-grid", children: solidFieldOptions.map(function (option) { return (_jsx("button", { type: "button", className: "solid-field-selector-card ".concat(selectedField === option.value ? "is-active" : ""), onClick: function () { return handleSelect(option); }, children: _jsxs("div", { className: "solid-field-selector-card-inner", children: [_jsx("span", { className: "solid-field-selector-icon solid-field-selector-icon-".concat(option.tone), children: _jsx(option.Icon, { size: 18, strokeWidth: 1.8 }) }), _jsxs("div", { className: "solid-field-selector-text", children: [_jsx("span", { className: "solid-field-selector-title", children: option.label }), _jsx("span", { className: "solid-field-selector-description", children: option.description })] })] }) }, option.value)); }) })] }));
+    var handleContinue = function () {
+        var selectedOption = visibleFieldOptions.find(function (option) { return option.value === selectedField; });
+        if (!selectedOption)
+            return;
+        handleTypeSelect(selectedOption.value, selectedOption.label);
+    };
+    return (_jsxs("div", { className: "solid-field-selector-container", children: [_jsxs("div", { className: "solid-field-selector-header", children: [_jsx("p", { className: "form-wrapper-heading", children: "Select Field Type" }), _jsx("p", { className: "solid-field-selector-subheading", children: "Choose the data type you want to add to the model." })] }), _jsx("div", { className: "solid-field-selector-grid", children: visibleFieldOptions.map(function (option) { return (_jsx("button", { type: "button", className: "solid-field-selector-card ".concat(selectedField === option.value ? "is-active" : ""), onClick: function () { return handleSelect(option); }, children: _jsxs("div", { className: "solid-field-selector-card-inner", children: [_jsx("span", { className: "solid-field-selector-icon solid-field-selector-icon-".concat(option.tone), children: _jsx(option.Icon, { size: 18, strokeWidth: 1.8 }) }), _jsxs("div", { className: "solid-field-selector-text", children: [_jsx("span", { className: "solid-field-selector-title", children: option.label }), _jsx("span", { className: "solid-field-selector-description", children: option.description })] })] }) }, option.value)); }) }), requireExplicitContinue ? (_jsx("div", { className: "mt-4 flex justify-end", children: _jsx(SolidButton, { size: "small", leftIcon: _jsx(ArrowRight, { size: 14 }), onClick: handleContinue, disabled: !selectedField, children: continueLabel }) })) : null] }));
 };
 export default FieldSelector;
 //# sourceMappingURL=FieldSelector.js.map

package/dist/components/core/model/FieldSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  AlignLeft,\n  Calculator,\n  Calendar,\n  Clock9,\n  Code2,\n  Feather,\n  Fingerprint,\n  FunctionSquare,\n  Hash,\n  Image,\n  Images,\n  ListChecks,\n  ListFilter,\n  Mail,\n  Share2,\n  Shield,\n  Sigma,\n  Timer,\n  ToggleLeft,\n  Type,\n} from \"lucide-react\";\n\ntype FieldSelectorProps = {\n  handleTypeSelect: (value: string, label: string) => void;\n  modelMetaData?: any;\n};\n\ntype FieldOption = {\n  label: string;\n  description: string;\n  Icon: LucideIcon;\n  value: string;\n  tone: \"blue\" | \"violet\" | \"green\" | \"orange\" | \"cyan\";\n};\n\nconst fieldToneMap: Record<string, FieldOption[\"tone\"]> = {\n  int: \"blue\",\n  bigint: \"blue\",\n  decimal: \"blue\",\n  shortText: \"violet\",\n  longText: \"violet\",\n  richText: \"violet\",\n  json: \"cyan\",\n  boolean: \"green\",\n  date: \"orange\",\n  datetime: \"orange\",\n  time: \"orange\",\n  relation: \"cyan\",\n  mediaSingle: \"violet\",\n  mediaMultiple: \"violet\",\n  email: \"cyan\",\n  password: \"cyan\",\n  selectionStatic: \"green\",\n  selectionDynamic: \"green\",\n  computed: \"blue\",\n  uuid: \"blue\",\n};\n\nconst solidFieldOptions: FieldOption[] = [\n  { label: \"Integer\", description: \"Whole number (int)\", Icon: Hash, value: \"int\", tone: fieldToneMap.int },\n  { label: \"Big Integer\", description: \"Large whole number (bigint)\", Icon: Calculator, value: \"bigint\", tone: fieldToneMap.bigint },\n  { label: \"Decimal\", description: \"64-bit floating-point number\", Icon: Sigma, value: \"decimal\", tone: fieldToneMap.decimal },\n  { label: \"Short Text\", description: \"Small text field\", Icon: Type, value: \"shortText\", tone: fieldToneMap.shortText },\n  { label: \"Long Text\", description: \"Large text field\", Icon: AlignLeft, value: \"longText\", tone: fieldToneMap.longText },\n  { label: \"Rich Text\", description: \"Rich text editor\", Icon: Feather, value: \"richText\", tone: fieldToneMap.richText },\n  { label: \"JSON\", description: \"JSON data format\", Icon: Code2, value: \"json\", tone: fieldToneMap.json },\n  { label: \"Boolean\", description: \"True / False value\", Icon: ToggleLeft, value: \"boolean\", tone: fieldToneMap.boolean },\n  { label: \"Date\", description: \"Date field\", Icon: Calendar, value: \"date\", tone: fieldToneMap.date },\n  { label: \"Datetime\", description: \"Date & time field\", Icon: Clock9, value: \"datetime\", tone: fieldToneMap.datetime },\n  { label: \"Time\", description: \"Time picker\", Icon: Timer, value: \"time\", tone: fieldToneMap.time },\n  { label: \"Relation\", description: \"Reference another entity\", Icon: Share2, value: \"relation\", tone: fieldToneMap.relation },\n  { label: \"Single Media\", description: \"Single file upload\", Icon: Image, value: \"mediaSingle\", tone: fieldToneMap.mediaSingle },\n  { label: \"Multiple Media\", description: \"Multiple file upload\", Icon: Images, value: \"mediaMultiple\", tone: fieldToneMap.mediaMultiple },\n  { label: \"Email\", description: \"Email field\", Icon: Mail, value: \"email\", tone: fieldToneMap.email },\n  { label: \"Password\", description: \"Password input\", Icon: Shield, value: \"password\", tone: fieldToneMap.password },\n  { label: \"Static Selection\", description: \"Predefined values\", Icon: ListChecks, value: \"selectionStatic\", tone: fieldToneMap.selectionStatic },\n  { label: \"Dynamic Selection\", description: \"Dynamic list\", Icon: ListFilter, value: \"selectionDynamic\", tone: fieldToneMap.selectionDynamic },\n  { label: \"Computed\", description: \"Derive value from data\", Icon: FunctionSquare, value: \"computed\", tone: fieldToneMap.computed },\n  { label: \"UUID\", description: \"Unique identifier\", Icon: Fingerprint, value: \"uuid\", tone: fieldToneMap.uuid },\n];\n\nconst FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {\n  const [selectedField, setSelectedField] = useState<string | null>(null);\n\n  const handleSelect = (option: FieldOption) => {\n    setSelectedField(option.value);\n    handleTypeSelect(option.value, option.label);\n  };\n\n  return (\n    <div className=\"solid-field-selector-container\">\n      <div className=\"solid-field-selector-header\">\n        <p className=\"form-wrapper-heading\">Select Field Type</p>\n        <p className=\"solid-field-selector-subheading\">Choose the data type you want to add to the model.</p>\n      </div>\n      <div className=\"solid-field-selector-grid\">\n        {solidFieldOptions.map((option) => (\n          <button\n            key={option.value}\n            type=\"button\"\n            className={`solid-field-selector-card ${selectedField === option.value ? \"is-active\" : \"\"}`}\n            onClick={() => handleSelect(option)}\n          >\n            <div className=\"solid-field-selector-card-inner\">\n              <span className={`solid-field-selector-icon solid-field-selector-icon-${option.tone}`}>\n                <option.Icon size={18} strokeWidth={1.8} />\n              </span>\n              <div className=\"solid-field-selector-text\">\n                <span className=\"solid-field-selector-title\">{option.label}</span>\n                <span className=\"solid-field-selector-description\">{option.description}</span>\n              </div>\n            </div>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default FieldSelector;\n"]}
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  AlignLeft,\n  Calculator,\n  Calendar,\n  Clock9,\n  Code2,\n  Feather,\n  Fingerprint,\n  FunctionSquare,\n  Hash,\n  Image,\n  Images,\n  ListChecks,\n  ListFilter,\n  Mail,\n  Share2,\n  Shield,\n  Sigma,\n  Timer,\n  ToggleLeft,\n  Type,\n  ArrowRight,\n} from \"lucide-react\";\nimport { SolidButton } from \"../../shad-cn-ui\";\n\ntype FieldSelectorProps = {\n  handleTypeSelect: (value: string, label: string) => void;\n  modelMetaData?: any;\n  availableFieldTypes?: string[];\n  initialSelectedValue?: string | null;\n  requireExplicitContinue?: boolean;\n  continueLabel?: string;\n};\n\ntype FieldOption = {\n  label: string;\n  description: string;\n  Icon: LucideIcon;\n  value: string;\n  tone: \"blue\" | \"violet\" | \"green\" | \"orange\" | \"cyan\";\n};\n\nconst fieldToneMap: Record<string, FieldOption[\"tone\"]> = {\n  int: \"blue\",\n  bigint: \"blue\",\n  decimal: \"blue\",\n  shortText: \"violet\",\n  longText: \"violet\",\n  richText: \"violet\",\n  json: \"cyan\",\n  boolean: \"green\",\n  date: \"orange\",\n  datetime: \"orange\",\n  time: \"orange\",\n  relation: \"cyan\",\n  mediaSingle: \"violet\",\n  mediaMultiple: \"violet\",\n  email: \"cyan\",\n  password: \"cyan\",\n  selectionStatic: \"green\",\n  selectionDynamic: \"green\",\n  computed: \"blue\",\n  uuid: \"blue\",\n};\n\nconst solidFieldOptions: FieldOption[] = [\n  { label: \"Integer\", description: \"Whole number (int)\", Icon: Hash, value: \"int\", tone: fieldToneMap.int },\n  { label: \"Big Integer\", description: \"Large whole number (bigint)\", Icon: Calculator, value: \"bigint\", tone: fieldToneMap.bigint },\n  { label: \"Decimal\", description: \"64-bit floating-point number\", Icon: Sigma, value: \"decimal\", tone: fieldToneMap.decimal },\n  { label: \"Short Text\", description: \"Small text field\", Icon: Type, value: \"shortText\", tone: fieldToneMap.shortText },\n  { label: \"Long Text\", description: \"Large text field\", Icon: AlignLeft, value: \"longText\", tone: fieldToneMap.longText },\n  { label: \"Rich Text\", description: \"Rich text editor\", Icon: Feather, value: \"richText\", tone: fieldToneMap.richText },\n  { label: \"JSON\", description: \"JSON data format\", Icon: Code2, value: \"json\", tone: fieldToneMap.json },\n  { label: \"Boolean\", description: \"True / False value\", Icon: ToggleLeft, value: \"boolean\", tone: fieldToneMap.boolean },\n  { label: \"Date\", description: \"Date field\", Icon: Calendar, value: \"date\", tone: fieldToneMap.date },\n  { label: \"Datetime\", description: \"Date & time field\", Icon: Clock9, value: \"datetime\", tone: fieldToneMap.datetime },\n  { label: \"Time\", description: \"Time picker\", Icon: Timer, value: \"time\", tone: fieldToneMap.time },\n  { label: \"Relation\", description: \"Reference another entity\", Icon: Share2, value: \"relation\", tone: fieldToneMap.relation },\n  { label: \"Single Media\", description: \"Single file upload\", Icon: Image, value: \"mediaSingle\", tone: fieldToneMap.mediaSingle },\n  { label: \"Multiple Media\", description: \"Multiple file upload\", Icon: Images, value: \"mediaMultiple\", tone: fieldToneMap.mediaMultiple },\n  { label: \"Email\", description: \"Email field\", Icon: Mail, value: \"email\", tone: fieldToneMap.email },\n  { label: \"Password\", description: \"Password input\", Icon: Shield, value: \"password\", tone: fieldToneMap.password },\n  { label: \"Static Selection\", description: \"Predefined values\", Icon: ListChecks, value: \"selectionStatic\", tone: fieldToneMap.selectionStatic },\n  { label: \"Dynamic Selection\", description: \"Dynamic list\", Icon: ListFilter, value: \"selectionDynamic\", tone: fieldToneMap.selectionDynamic },\n  { label: \"Computed\", description: \"Derive value from data\", Icon: FunctionSquare, value: \"computed\", tone: fieldToneMap.computed },\n  { label: \"UUID\", description: \"Unique identifier\", Icon: Fingerprint, value: \"uuid\", tone: fieldToneMap.uuid },\n];\n\nconst FieldSelector = ({\n  handleTypeSelect,\n  availableFieldTypes,\n  initialSelectedValue = null,\n  requireExplicitContinue = false,\n  continueLabel = \"Next\",\n}: FieldSelectorProps) => {\n  const [selectedField, setSelectedField] = useState<string | null>(initialSelectedValue);\n\n  useEffect(() => {\n    setSelectedField(initialSelectedValue);\n  }, [initialSelectedValue]);\n\n  const visibleFieldOptions = useMemo(() => {\n    if (!availableFieldTypes?.length) {\n      return solidFieldOptions;\n    }\n\n    const allowedTypes = new Set(availableFieldTypes);\n    return solidFieldOptions.filter((option) => allowedTypes.has(option.value));\n  }, [availableFieldTypes]);\n\n  const handleSelect = (option: FieldOption) => {\n    setSelectedField(option.value);\n    if (!requireExplicitContinue) {\n      handleTypeSelect(option.value, option.label);\n    }\n  };\n\n  const handleContinue = () => {\n    const selectedOption = visibleFieldOptions.find((option) => option.value === selectedField);\n    if (!selectedOption) return;\n    handleTypeSelect(selectedOption.value, selectedOption.label);\n  };\n\n  return (\n    <div className=\"solid-field-selector-container\">\n      <div className=\"solid-field-selector-header\">\n        <p className=\"form-wrapper-heading\">Select Field Type</p>\n        <p className=\"solid-field-selector-subheading\">Choose the data type you want to add to the model.</p>\n      </div>\n      <div className=\"solid-field-selector-grid\">\n        {visibleFieldOptions.map((option) => (\n          <button\n            key={option.value}\n            type=\"button\"\n            className={`solid-field-selector-card ${selectedField === option.value ? \"is-active\" : \"\"}`}\n            onClick={() => handleSelect(option)}\n          >\n            <div className=\"solid-field-selector-card-inner\">\n              <span className={`solid-field-selector-icon solid-field-selector-icon-${option.tone}`}>\n                <option.Icon size={18} strokeWidth={1.8} />\n              </span>\n              <div className=\"solid-field-selector-text\">\n                <span className=\"solid-field-selector-title\">{option.label}</span>\n                <span className=\"solid-field-selector-description\">{option.description}</span>\n              </div>\n            </div>\n          </button>\n        ))}\n      </div>\n      {requireExplicitContinue ? (\n        <div className=\"mt-4 flex justify-end\">\n          <SolidButton\n            size=\"small\"\n            leftIcon={<ArrowRight size={14} />}\n            onClick={handleContinue}\n            disabled={!selectedField}\n          >\n            {continueLabel}\n          </SolidButton>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default FieldSelector;\n"]}

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

@@ -1,5 +1,5 @@
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import {
   AlignLeft,
@@ -22,11 +22,17 @@ import {
   Timer,
   ToggleLeft,
   Type,
+  ArrowRight,
 } from "lucide-react";
+import { SolidButton } from "../../shad-cn-ui";
 
 type FieldSelectorProps = {
   handleTypeSelect: (value: string, label: string) => void;
   modelMetaData?: any;
+  availableFieldTypes?: string[];
+  initialSelectedValue?: string | null;
+  requireExplicitContinue?: boolean;
+  continueLabel?: string;
 };
 
 type FieldOption = {
@@ -83,12 +89,39 @@ const solidFieldOptions: FieldOption[] = [
   { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
 ];
 
-const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
-  const [selectedField, setSelectedField] = useState<string | null>(null);
+const FieldSelector = ({
+  handleTypeSelect,
+  availableFieldTypes,
+  initialSelectedValue = null,
+  requireExplicitContinue = false,
+  continueLabel = "Next",
+}: FieldSelectorProps) => {
+  const [selectedField, setSelectedField] = useState<string | null>(initialSelectedValue);
+
+  useEffect(() => {
+    setSelectedField(initialSelectedValue);
+  }, [initialSelectedValue]);
+
+  const visibleFieldOptions = useMemo(() => {
+    if (!availableFieldTypes?.length) {
+      return solidFieldOptions;
+    }
+
+    const allowedTypes = new Set(availableFieldTypes);
+    return solidFieldOptions.filter((option) => allowedTypes.has(option.value));
+  }, [availableFieldTypes]);
 
   const handleSelect = (option: FieldOption) => {
     setSelectedField(option.value);
-    handleTypeSelect(option.value, option.label);
+    if (!requireExplicitContinue) {
+      handleTypeSelect(option.value, option.label);
+    }
+  };
+
+  const handleContinue = () => {
+    const selectedOption = visibleFieldOptions.find((option) => option.value === selectedField);
+    if (!selectedOption) return;
+    handleTypeSelect(selectedOption.value, selectedOption.label);
   };
 
   return (
@@ -98,7 +131,7 @@ const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
         <p className="solid-field-selector-subheading">Choose the data type you want to add to the model.</p>
       </div>
       <div className="solid-field-selector-grid">
-        {solidFieldOptions.map((option) => (
+        {visibleFieldOptions.map((option) => (
           <button
             key={option.value}
             type="button"
@@ -117,6 +150,18 @@ const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
           </button>
         ))}
       </div>
+      {requireExplicitContinue ? (
+        <div className="mt-4 flex justify-end">
+          <SolidButton
+            size="small"
+            leftIcon={<ArrowRight size={14} />}
+            onClick={handleContinue}
+            disabled={!selectedField}
+          >
+            {continueLabel}
+          </SolidButton>
+        </div>
+      ) : null}
     </div>
   );
 };

package/dist/components/core/module/CreateModule.css

@@ -22,12 +22,6 @@
   border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
 }
 
-.solid-module-form-tab-extra {
-  display: inline-flex;
-  align-items: center;
-  padding-right: 0.35rem;
-}
-
 .solid-module-form-workspace .solid-module-form-tabpanel {
   padding-top: 0.65rem;
 }
@@ -110,3 +104,63 @@
   font-size: 0.875rem;
   line-height: 1.4;
 }
+
+.solid-module-automap-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid color-mix(in srgb, var(--primary-color, var(--primary)) 16%, var(--border, #d6dae5) 84%);
+  border-radius: 1rem;
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--primary-color, var(--primary)) 5%, #ffffff 95%),
+      color-mix(in srgb, var(--primary-color, var(--primary)) 9%, #f8fafc 91%)
+    );
+}
+
+.solid-module-automap-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.solid-module-automap-eyebrow {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--primary-color, var(--primary)) 70%, #4b5563 30%);
+}
+
+.solid-module-automap-copy h4 {
+  margin: 0;
+  color: var(--foreground, #111827);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.solid-module-automap-copy p {
+  margin: 0;
+  color: color-mix(in srgb, var(--foreground, #111827) 76%, var(--muted-foreground, #6b7280));
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.solid-module-automap-list {
+  margin: 0;
+  padding-left: 1.15rem;
+  color: color-mix(in srgb, var(--foreground, #111827) 76%, var(--muted-foreground, #6b7280));
+  font-size: 0.86rem;
+  line-height: 1.55;
+}
+
+.solid-module-automap-list li + li {
+  margin-top: 0.22rem;
+}
+
+.solid-module-automap-actions {
+  display: flex;
+  justify-content: center;
+}

package/dist/components/core/module/CreateModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AA+BA,OAAO,oBAAoB,CAAC;AAK5B,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAghB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AA+BA,OAAO,oBAAoB,CAAC;AAK5B,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAmiB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/core/module/CreateModule.js

@@ -306,8 +306,8 @@ var CreateModule = function (_a) {
                                                             if (pathname.includes('new')) {
                                                                 formik.setFieldValue("name", toKebabCase);
                                                             }
-                                                        }, value: formik.values.displayName, className: styles.fieldInput }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_c = (_b = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "name", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: true, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: styles.fieldInput }), isFormFieldValid(formik, "name") && (_jsx("p", { className: styles.fieldError, children: (_e = (_d = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toString() }))] }) })] }), _jsxs("div", { className: "mt-4 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "menuSequenceNumber", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Menu Sequence Number" }), _jsx(SolidInput, { id: "menuSequenceNumber", type: "number", onChange: formik.handleChange, min: 0, value: formik.values.menuSequenceNumber, className: styles.fieldInput }), isFormFieldValid(formik, "menuSequenceNumber") && (_jsx("p", { className: styles.fieldError, children: (_g = (_f = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _f === void 0 ? void 0 : _f.menuSequenceNumber) === null || _g === void 0 ? void 0 : _g.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "description", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Description ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidTextarea, { id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, className: styles.fieldTextarea, rows: 5, cols: 30 }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_j = (_h = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _h === void 0 ? void 0 : _h.description) === null || _j === void 0 ? void 0 : _j.toString() }))] }) })] })] }), _jsx(SolidPanel, { header: "Configurations", className: "solid-column-panel mt-4", children: _jsxs("div", { className: "mt-3 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "defaultDataSource", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Default Data Source" }), _jsx("div", { className: "solid-standard-autocomplete w-full", children: _jsx(SolidAutocomplete, { disabled: !!data, value: defaultDataSourceField.selectedItem, suggestions: defaultDataSourceField.filteredItems, completeMethod: defaultDataSourceField.searchItems, onChange: defaultDataSourceField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "defaultDataSource") && (_jsx("p", { className: styles.fieldError, children: (_l = (_k = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _k === void 0 ? void 0 : _k.defaultDataSource) === null || _l === void 0 ? void 0 : _l.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [_jsxs("label", { htmlFor: "menuIconUrl", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Menu Icon ", _jsx("small", { className: "text-red-500 helper-text", children: "(only svg, png and jpeg are allowed)" })] }), _jsxs("div", __assign({}, getRootPropsmenuIcon(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputPropsmenuIcon())), _jsx(DropzonePlaceholder, {})] })), isFormFieldValid(formik, "menuIconUrl") && (_jsx(SolidMessage, { severity: "error", text: (_o = (_m = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _m === void 0 ? void 0 : _m.menuIconUrl) === null || _o === void 0 ? void 0 : _o.toString(), className: "mt-2" })), fileDetails && (_jsxs("div", { className: "solid-file-upload-wrapper mt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-bold solid-module-mobile-text-wrapper", children: fileDetails.name }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger solid-module-upload-remove", "aria-label": "Remove uploaded menu icon", onClick: handleCancelUpload, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] }), uploadCompleted ? (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [totalSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("mask", { id: "mask0_2480_8635", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20", children: _jsx("rect", { width: "20", height: "20", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask0_2480_8635)", children: _jsx("path", { d: "M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 5.215 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z", fill: "var(--primary-color, var(--primary))" }) })] }), "Completed"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [uploadedSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z", fill: "black" }) }), "Uploading $", uploadProgress, "% Completed"] }))] })] }), _jsx(SolidProgressBar, { value: uploadProgress, showValue: false, style: { height: 4 }, className: "mt-2" })] }))] }) })] }) })] }) }), _jsx(SolidFormFooter, { params: params })] }));
-    return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [isCreateMode && (_jsxs("div", { className: "solid-form-header flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { className: "flex flex-col gap-1" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SolidButton, { variant: "outline", size: "sm", type: "button", onClick: handleCancel, className: "bg-[var(--primary-color-text)]", children: "Cancel" }), shouldShowGeneralSave && formik.dirty && (_jsx(SolidButton, { size: "sm", type: "submit", form: "module-general-info-form", onClick: function () { return showError(); }, children: "Save" }))] })] })), isCreateMode ? (generalInfoContent) : (_jsx("div", { className: "solid-module-form-workspace", children: _jsx(SolidTabGroup, { value: activeWorkspaceTab, onValueChange: setActiveWorkspaceTab, className: "solid-module-form-tabs", listClassName: "solid-module-form-tablist", panelClassName: "solid-module-form-tabpanel", extra: (_jsx("div", { className: "solid-module-form-tab-extra", children: _jsx(SolidButton, { type: "button", size: "sm", onClick: function () { return router.push("/admin/core/solid-core/modules/".concat(data === null || data === void 0 ? void 0 : data.id, "/datasource-introspection")); }, children: "Auto Map Tables" }) })), tabs: [
+                                                        }, value: formik.values.displayName, className: styles.fieldInput }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_c = (_b = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "name", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: true, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: styles.fieldInput }), isFormFieldValid(formik, "name") && (_jsx("p", { className: styles.fieldError, children: (_e = (_d = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toString() }))] }) })] }), _jsxs("div", { className: "mt-4 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "menuSequenceNumber", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Menu Sequence Number" }), _jsx(SolidInput, { id: "menuSequenceNumber", type: "number", onChange: formik.handleChange, min: 0, value: formik.values.menuSequenceNumber, className: styles.fieldInput }), isFormFieldValid(formik, "menuSequenceNumber") && (_jsx("p", { className: styles.fieldError, children: (_g = (_f = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _f === void 0 ? void 0 : _f.menuSequenceNumber) === null || _g === void 0 ? void 0 : _g.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "description", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Description ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidTextarea, { id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, className: styles.fieldTextarea, rows: 5, cols: 30 }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_j = (_h = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _h === void 0 ? void 0 : _h.description) === null || _j === void 0 ? void 0 : _j.toString() }))] }) })] }), _jsx("div", { className: "mt-4 flex flex-wrap -mx-2 -mt-2", children: _jsx("div", { className: "field w-full px-2 pt-2", children: _jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [_jsxs("label", { htmlFor: "menuIconUrl", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Menu Icon ", _jsx("small", { className: "text-red-500 helper-text", children: "(only svg, png and jpeg are allowed)" })] }), _jsxs("div", __assign({}, getRootPropsmenuIcon(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputPropsmenuIcon())), _jsx(DropzonePlaceholder, {})] })), isFormFieldValid(formik, "menuIconUrl") && (_jsx(SolidMessage, { severity: "error", text: (_l = (_k = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _k === void 0 ? void 0 : _k.menuIconUrl) === null || _l === void 0 ? void 0 : _l.toString(), className: "mt-2" })), fileDetails && (_jsxs("div", { className: "solid-file-upload-wrapper mt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-bold solid-module-mobile-text-wrapper", children: fileDetails.name }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger solid-module-upload-remove", "aria-label": "Remove uploaded menu icon", onClick: handleCancelUpload, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] }), uploadCompleted ? (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [totalSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("mask", { id: "mask0_2480_8635", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20", children: _jsx("rect", { width: "20", height: "20", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask0_2480_8635)", children: _jsx("path", { d: "M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 5.215 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z", fill: "var(--primary-color, var(--primary))" }) })] }), "Completed"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [uploadedSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z", fill: "black" }) }), "Uploading $", uploadProgress, "% Completed"] }))] })] }), _jsx(SolidProgressBar, { value: uploadProgress, showValue: false, style: { height: 4 }, className: "mt-2" })] }))] }) }) })] }), _jsx(SolidPanel, { header: "Datasource Configuration", className: "solid-column-panel mt-4", children: _jsxs("div", { className: "mt-3 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "defaultDataSource", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Default Data Source" }), _jsx("div", { className: "solid-standard-autocomplete w-full", children: _jsx(SolidAutocomplete, { disabled: !!data, value: defaultDataSourceField.selectedItem, suggestions: defaultDataSourceField.filteredItems, completeMethod: defaultDataSourceField.searchItems, onChange: defaultDataSourceField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "defaultDataSource") && (_jsx("p", { className: styles.fieldError, children: (_o = (_m = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _m === void 0 ? void 0 : _m.defaultDataSource) === null || _o === void 0 ? void 0 : _o.toString() }))] }) }), !isCreateMode ? (_jsx("div", { className: "field w-full px-2 pt-4", children: _jsxs("div", { className: "solid-module-automap-panel", children: [_jsxs("div", { className: "solid-module-automap-copy", children: [_jsx("div", { className: "solid-module-automap-eyebrow", children: "Legacy Table Mapping" }), _jsx("h4", { children: "Auto map datasource tables into this module" }), _jsx("p", { children: "Open the datasource introspection workspace to inspect legacy tables, preview field mappings, review metadata JSON changes, and generate the supporting migration template for SolidX system fields." }), _jsxs("ul", { className: "solid-module-automap-list", children: [_jsx("li", { children: "Review tables available on the selected datasource." }), _jsx("li", { children: "Control which legacy columns are included in each mapping session." }), _jsx("li", { children: "Preview the metadata JSON and migration output before saving." })] })] }), _jsx("div", { className: "solid-module-automap-actions", children: _jsx(SolidButton, { type: "button", size: "sm", onClick: function () { return router.push("/admin/core/solid-core/modules/".concat(data === null || data === void 0 ? void 0 : data.id, "/datasource-introspection")); }, children: "Auto Map Tables" }) })] }) })) : null] }) })] }) }), _jsx(SolidFormFooter, { params: params })] }));
+    return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [isCreateMode && (_jsxs("div", { className: "solid-form-header flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { className: "flex flex-col gap-1" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SolidButton, { variant: "outline", size: "sm", type: "button", onClick: handleCancel, className: "bg-[var(--primary-color-text)]", children: "Cancel" }), shouldShowGeneralSave && formik.dirty && (_jsx(SolidButton, { size: "sm", type: "submit", form: "module-general-info-form", onClick: function () { return showError(); }, children: "Save" }))] })] })), isCreateMode ? (generalInfoContent) : (_jsx("div", { className: "solid-module-form-workspace", children: _jsx(SolidTabGroup, { value: activeWorkspaceTab, onValueChange: setActiveWorkspaceTab, className: "solid-module-form-tabs", listClassName: "solid-module-form-tablist", panelClassName: "solid-module-form-tabpanel", tabs: [
                             {
                                 value: "general",
                                 label: _jsx("span", { className: "solid-module-form-tab-label", children: "General Info" }),