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

package/dist/components/common/SolidExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidExport.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExport.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAsC5B,eAAO,MAAM,WAAW,kCAAmC,GAAG,mDA8f7D,CAAC"}
+{"version":3,"file":"SolidExport.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExport.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAgF5B,eAAO,MAAM,WAAW,kCAAmC,GAAG,mDAga7D,CAAC"}

package/dist/components/common/SolidExport.js

@@ -44,128 +44,152 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useFormik } from "formik";
-import './solid-export.css';
-import { Button } from "primereact/button";
-import React, { useEffect, useState } from "react";
-import { useDispatch } from 'react-redux';
-import { showToast } from '../../redux/features/toastSlice';
-import { createSolidEntityApi } from "../../redux/api/solidEntityApi";
-import { Dropdown } from "primereact/dropdown";
-import { Dialog } from "primereact/dialog";
-import { InputText } from "primereact/inputtext";
-import { useCreateExportTemplateMutation, useDeleteExportTemplateMutation, useGetExportTemplatesQuery } from "../../redux/api/exportTemplateApi";
-import { downloadFileWithProgress } from '../../helpers/downloadFileWithProgress';
+import { useEffect, useMemo, useState } from "react";
+import { Check, Download, FileSpreadsheet, FileText, Plus, Save, Trash2 } from "lucide-react";
+import "./solid-export.css";
+import { useDispatch } from "react-redux";
+import { showToast } from "../../redux/features/toastSlice";
+import { useCreateExportTemplateMutation, useDeleteExportTemplateMutation, useGetExportTemplatesQuery, } from "../../redux/api/exportTemplateApi";
+import { downloadFileWithProgress } from "../../helpers/downloadFileWithProgress";
 import { DownloadProgressToast } from "./DownloadProgressToast";
-import { Checkbox } from "primereact/checkbox";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
+import { SolidButton, SolidCheckbox, SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidInput, SolidSelect, } from "../shad-cn-ui";
+var EXCLUDED_TYPES = new Set(["mediaSingle", "mediaMultiple"]);
+var FORMAT_OPTIONS = [
+    { name: "CSV", code: "csv" },
+    { name: "Excel", code: "excel" },
+];
+function parseTemplateFields(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value !== "string")
+        return [];
+    try {
+        var parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch (error) {
+        console.error(ERROR_MESSAGES.PARSED_FIELD, error);
+        return [];
+    }
+}
+function exportFormatMeta(code) {
+    if (code === "excel") {
+        return {
+            label: "Excel",
+            icon: _jsx(FileSpreadsheet, { size: 14 }),
+        };
+    }
+    return {
+        label: "CSV",
+        icon: _jsx(FileText, { size: 14 }),
+    };
+}
 export var SolidExport = function (_a) {
+    var _b, _c;
     var listViewMetaData = _a.listViewMetaData, filters = _a.filters;
     var dispatch = useDispatch();
-    var entityApi = createSolidEntityApi("userViewMetadata");
-    var useUpsertSolidEntityMutation = entityApi.useUpsertSolidEntityMutation;
-    var upsertUserView = useUpsertSolidEntityMutation()[0];
     if (!(listViewMetaData === null || listViewMetaData === void 0 ? void 0 : listViewMetaData.data))
         return null;
     var solidView = listViewMetaData.data.solidView;
     var solidFieldsMetadata = listViewMetaData.data.solidFieldsMetadata;
     if (!solidView || !solidFieldsMetadata)
         return null;
-    var checkedFieldNames = new Set(solidView.layout.children.map(function (col) { return col.attrs.name; }));
-    // const allColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(
-    //   ([key, field]) => ({
-    //     name: field.displayName,
-    //     key,
-    //   })
-    // );
-    var excludedTypes = new Set(['mediaSingle', 'mediaMultiple']);
-    var allColumns = Object.entries(solidFieldsMetadata)
-        .filter(function (_a) {
-        var field = _a[1];
-        return !excludedTypes.has(field.type);
-    })
-        .map(function (_a) {
-        var key = _a[0], field = _a[1];
-        return ({
-            name: field.displayName,
-            key: key,
+    var layoutChildren = Array.isArray((_b = solidView === null || solidView === void 0 ? void 0 : solidView.layout) === null || _b === void 0 ? void 0 : _b.children) ? solidView.layout.children : [];
+    var checkedFieldNames = useMemo(function () {
+        return new Set(layoutChildren
+            .map(function (col) { var _a; return (_a = col === null || col === void 0 ? void 0 : col.attrs) === null || _a === void 0 ? void 0 : _a.name; })
+            .filter(Boolean));
+    }, [layoutChildren]);
+    var allColumns = useMemo(function () {
+        return Object.entries(solidFieldsMetadata)
+            .filter(function (_a) {
+            var field = _a[1];
+            return !EXCLUDED_TYPES.has(field.type);
+        })
+            .map(function (_a) {
+            var key = _a[0], field = _a[1];
+            return ({
+                name: field.displayName,
+                key: key,
+            });
         });
-    });
-    var createExportTemplate = useCreateExportTemplateMutation()[0];
-    var deleteExportTemplate = useDeleteExportTemplateMutation()[0];
+    }, [solidFieldsMetadata]);
+    var defaultSelectedColumns = useMemo(function () { return allColumns.filter(function (col) { return checkedFieldNames.has(col.key); }); }, [allColumns, checkedFieldNames]);
+    var _d = useState(defaultSelectedColumns), selectedColumns = _d[0], setSelectedColumns = _d[1];
+    var _e = useState(null), selectedTemplate = _e[0], setSelectedTemplate = _e[1];
+    var _f = useState(FORMAT_OPTIONS[0]), selectedFormat = _f[0], setSelectedFormat = _f[1];
+    var _g = useState(false), isSaveDialogVisible = _g[0], setIsSaveDialogVisible = _g[1];
+    var _h = useState(""), newTemplateName = _h[0], setNewTemplateName = _h[1];
+    var _j = useState(0), progress = _j[0], setProgress = _j[1];
+    var _k = useState(false), showProgress = _k[0], setShowProgress = _k[1];
+    var _l = useState(""), message = _l[0], setMessage = _l[1];
+    var _m = useState(""), messageDescription = _m[0], setMessageDescription = _m[1];
+    var _o = useState("In Progress"), status = _o[0], setStatus = _o[1];
+    var _p = useState(false), checkApplyFilter = _p[0], setCheckedApplyFilter = _p[1];
+    var _q = useCreateExportTemplateMutation(), createExportTemplate = _q[0], isSavingTemplate = _q[1].isLoading;
+    var _r = useDeleteExportTemplateMutation(), deleteExportTemplate = _r[0], isDeletingTemplate = _r[1].isLoading;
     var templatesData = useGetExportTemplatesQuery({}).data;
-    var formik = useFormik({
-        initialValues: {
-            selectedColumns: allColumns.filter(function (col) { return checkedFieldNames.has(col.key); }),
-        },
-        onSubmit: function (values) {
-            // console.log("Selected columns:", values.selectedColumns);
-        }
-    });
-    var selectedColumns = formik.values.selectedColumns;
-    var availableColumns = allColumns.filter(function (col) { return !selectedColumns.some(function (selected) { return selected.key === col.key; }); });
+    var templateOptions = useMemo(function () {
+        var _a;
+        var records = (_a = templatesData === null || templatesData === void 0 ? void 0 : templatesData.records) !== null && _a !== void 0 ? _a : [];
+        return records.map(function (template) { return ({
+            name: template.templateName,
+            code: String(template.id),
+            fields: template.fields,
+            templateFormat: template.templateFormat,
+        }); });
+    }, [templatesData]);
+    var resolvedTemplateOptions = useMemo(function () {
+        if (!selectedTemplate)
+            return templateOptions;
+        if (templateOptions.some(function (template) { return template.code === selectedTemplate.code; }))
+            return templateOptions;
+        return __spreadArray([selectedTemplate], templateOptions, true);
+    }, [selectedTemplate, templateOptions]);
+    useEffect(function () {
+        setSelectedColumns(defaultSelectedColumns);
+    }, [defaultSelectedColumns]);
+    var selectedKeys = new Set(selectedColumns.map(function (item) { return item.key; }));
+    var availableColumns = allColumns.filter(function (col) { return !selectedKeys.has(col.key); });
     var moveToSelected = function (col) {
-        formik.setFieldValue("selectedColumns", __spreadArray(__spreadArray([], selectedColumns, true), [col], false));
+        setSelectedColumns(function (current) { return (current.some(function (item) { return item.key === col.key; }) ? current : __spreadArray(__spreadArray([], current, true), [col], false)); });
     };
     var moveToAvailable = function (col) {
-        formik.setFieldValue("selectedColumns", selectedColumns.filter(function (c) { return c.key !== col.key; }));
+        setSelectedColumns(function (current) { return current.filter(function (item) { return item.key !== col.key; }); });
     };
-    var _b = useState(null), selectedTemplate = _b[0], setSelectedTemplate = _b[1];
-    var _c = useState({
-        name: "CSV",
-        code: "csv",
-        icon: (_jsx("svg", { fill: "#000000", width: "16", height: "16", viewBox: "0 0 318.188 318.188", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { children: [_jsx("rect", { x: "182.882", y: "155.008", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "88.053", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "155.008", width: "33.713", height: "15" }), _jsx("polygon", { points: "112.09,123.663 112.09,123.662 118.286,113.621 124.548,123.662 134.588,123.662 123.647,107.909 133.82,91.54 123.911,91.54 118.33,101.472 112.53,91.54 102.906,91.54 112.925,107.228 102.269,123.663" }), _jsx("path", { d: "M201.02,249.514c-0.339,1.27-0.73,3.015-1.174,5.236c-0.445,2.222-0.741,4.073-0.889,5.555 c-0.127-2.053-0.847-5.691-2.158-10.918l-6.316-23.519h-14.092l15.139,46.401h14.759l15.202-46.401h-14.027L201.02,249.514z" }), _jsx("rect", { x: "142.457", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "142.457", y: "88.053", width: "33.713", height: "15" }), _jsx("path", { d: "M283.149,52.723L232.624,2.197C231.218,0.79,229.311,0,227.321,0H40.342c-4.142,0-7.5,3.358-7.5,7.5v303.188 c0,4.142,3.358,7.5,7.5,7.5h237.504c4.142,0,7.5-3.358,7.5-7.5V58.025C285.346,56.036,284.556,54.129,283.149,52.723z M234.821,25.606l24.918,24.919h-24.918V25.606z M47.842,15h171.979v10.263H47.842V15z M47.842,303.188V40.263h171.979v17.763 c0,4.143,3.358,7.5,7.5,7.5h43.024v237.662H47.842z" }), _jsx("rect", { x: "142.457", y: "132.689", width: "33.713", height: "15" }), _jsx("path", { d: "M122.372,235.484c1.969,0,3.809,0.275,5.523,0.826c1.713,0.55,3.428,1.227,5.141,2.031l3.841-9.871 c-4.57-2.18-9.362-3.27-14.378-3.27c-4.591,0-8.585,0.98-11.98,2.937c-3.396,1.957-5.999,4.755-7.808,8.395 c-1.81,3.64-2.714,7.86-2.714,12.663c0,7.682,1.867,13.553,5.602,17.615c3.734,4.063,9.104,6.094,16.107,6.094 c4.888,0,9.268-0.857,13.14-2.57v-10.602c-1.947,0.805-3.883,1.492-5.808,2.063c-1.926,0.571-3.915,0.857-5.967,0.857 c-6.793,0-10.188-4.464-10.188-13.393c0-4.295,0.836-7.665,2.507-10.109C117.062,236.707,119.39,235.484,122.372,235.484z" }), _jsx("path", { d: "M163.57,244.594c-4.169-1.904-6.724-3.216-7.665-3.936c-0.942-0.719-1.412-1.533-1.412-2.443 c-0.002-0.847,0.368-1.556,1.11-2.127c0.74-0.571,1.925-0.857,3.555-0.857c3.152,0,6.897,0.995,11.234,2.984l3.841-9.681 c-4.994-2.222-9.892-3.333-14.694-3.333c-5.439,0-9.713,1.196-12.822,3.587c-3.111,2.392-4.666,5.724-4.666,9.997 c0,2.285,0.365,4.264,1.095,5.936s1.851,3.152,3.364,4.443s3.782,2.624,6.809,3.999c3.343,1.503,5.4,2.497,6.173,2.983 c0.771,0.486,1.333,0.968,1.682,1.444c0.35,0.476,0.524,1.031,0.524,1.666c0,1.016-0.435,1.847-1.302,2.491 c-0.868,0.647-2.233,0.969-4.095,0.969c-2.158,0-4.527-0.344-7.109-1.032c-2.581-0.687-5.067-1.645-7.458-2.872v11.172 c2.264,1.079,4.443,1.836,6.538,2.27c2.095,0.434,4.687,0.65,7.775,0.65c3.703,0,6.93-0.619,9.681-1.856 c2.75-1.238,4.856-2.973,6.315-5.205c1.461-2.232,2.191-4.787,2.191-7.665c0-3.131-0.777-5.729-2.333-7.792 C170.346,248.323,167.569,246.393,163.57,244.594z" }), _jsx("rect", { x: "142.457", y: "155.008", width: "33.713", height: "15" })] }) }) }) })),
-    }), selectedFormat = _c[0], setSelectedFormat = _c[1];
-    var _d = useState([]), templateOptions = _d[0], setTemplateOptions = _d[1];
-    //loading hardcode format
-    var _e = useState([
-        {
-            name: "CSV",
-            code: "csv",
-            icon: (_jsx("svg", { fill: "#000000", width: "16", height: "16", viewBox: "0 0 318.188 318.188", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { children: [_jsx("rect", { x: "182.882", y: "155.008", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "88.053", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "155.008", width: "33.713", height: "15" }), _jsx("polygon", { points: "112.09,123.663 112.09,123.662 118.286,113.621 124.548,123.662 134.588,123.662 123.647,107.909 133.82,91.54 123.911,91.54 118.33,101.472 112.53,91.54 102.906,91.54 112.925,107.228 102.269,123.663" }), _jsx("path", { d: "M201.02,249.514c-0.339,1.27-0.73,3.015-1.174,5.236c-0.445,2.222-0.741,4.073-0.889,5.555 c-0.127-2.053-0.847-5.691-2.158-10.918l-6.316-23.519h-14.092l15.139,46.401h14.759l15.202-46.401h-14.027L201.02,249.514z" }), _jsx("rect", { x: "142.457", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "142.457", y: "88.053", width: "33.713", height: "15" }), _jsx("path", { d: "M283.149,52.723L232.624,2.197C231.218,0.79,229.311,0,227.321,0H40.342c-4.142,0-7.5,3.358-7.5,7.5v303.188 c0,4.142,3.358,7.5,7.5,7.5h237.504c4.142,0,7.5-3.358,7.5-7.5V58.025C285.346,56.036,284.556,54.129,283.149,52.723z M234.821,25.606l24.918,24.919h-24.918V25.606z M47.842,15h171.979v10.263H47.842V15z M47.842,303.188V40.263h171.979v17.763 c0,4.143,3.358,7.5,7.5,7.5h43.024v237.662H47.842z" }), _jsx("rect", { x: "142.457", y: "132.689", width: "33.713", height: "15" }), _jsx("path", { d: "M122.372,235.484c1.969,0,3.809,0.275,5.523,0.826c1.713,0.55,3.428,1.227,5.141,2.031l3.841-9.871 c-4.57-2.18-9.362-3.27-14.378-3.27c-4.591,0-8.585,0.98-11.98,2.937c-3.396,1.957-5.999,4.755-7.808,8.395 c-1.81,3.64-2.714,7.86-2.714,12.663c0,7.682,1.867,13.553,5.602,17.615c3.734,4.063,9.104,6.094,16.107,6.094 c4.888,0,9.268-0.857,13.14-2.57v-10.602c-1.947,0.805-3.883,1.492-5.808,2.063c-1.926,0.571-3.915,0.857-5.967,0.857 c-6.793,0-10.188-4.464-10.188-13.393c0-4.295,0.836-7.665,2.507-10.109C117.062,236.707,119.39,235.484,122.372,235.484z" }), _jsx("path", { d: "M163.57,244.594c-4.169-1.904-6.724-3.216-7.665-3.936c-0.942-0.719-1.412-1.533-1.412-2.443 c-0.002-0.847,0.368-1.556,1.11-2.127c0.74-0.571,1.925-0.857,3.555-0.857c3.152,0,6.897,0.995,11.234,2.984l3.841-9.681 c-4.994-2.222-9.892-3.333-14.694-3.333c-5.439,0-9.713,1.196-12.822,3.587c-3.111,2.392-4.666,5.724-4.666,9.997 c0,2.285,0.365,4.264,1.095,5.936s1.851,3.152,3.364,4.443s3.782,2.624,6.809,3.999c3.343,1.503,5.4,2.497,6.173,2.983 c0.771,0.486,1.333,0.968,1.682,1.444c0.35,0.476,0.524,1.031,0.524,1.666c0,1.016-0.435,1.847-1.302,2.491 c-0.868,0.647-2.233,0.969-4.095,0.969c-2.158,0-4.527-0.344-7.109-1.032c-2.581-0.687-5.067-1.645-7.458-2.872v11.172 c2.264,1.079,4.443,1.836,6.538,2.27c2.095,0.434,4.687,0.65,7.775,0.65c3.703,0,6.93-0.619,9.681-1.856 c2.75-1.238,4.856-2.973,6.315-5.205c1.461-2.232,2.191-4.787,2.191-7.665c0-3.131-0.777-5.729-2.333-7.792 C170.346,248.323,167.569,246.393,163.57,244.594z" }), _jsx("rect", { x: "142.457", y: "155.008", width: "33.713", height: "15" })] }) }) }) })),
-        },
-        {
-            name: "Excel",
-            code: "excel",
-            icon: (_jsx("svg", { version: "1.1", id: "Layer_1", x: "0px", y: "0px", fill: "#000000", viewBox: "0 0 512 512", width: "16", height: "16", children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { d: "M447.168,134.56c-0.535-1.288-1.318-2.459-2.304-3.445l-128-128c-2.003-1.988-4.709-3.107-7.531-3.115H74.667\n              C68.776,0,64,4.776,64,10.667v490.667C64,507.224,68.776,512,74.667,512h362.667c5.891,0,10.667-4.776,10.667-10.667V138.667\n              C447.997,137.256,447.714,135.86,447.168,134.56z M320,36.416L411.584,128H320V36.416z M426.667,490.667H85.333V21.333h213.333\n              v117.333c0,5.891,4.776,10.667,10.667,10.667h117.333V490.667z" }), _jsx("path", { d: "M128,181.333v256c0,5.891,4.776,10.667,10.667,10.667h234.667c5.891,0,10.667-4.776,10.667-10.667v-256\n              c0-5.891-4.776-10.667-10.667-10.667H138.667C132.776,170.667,128,175.442,128,181.333z M320,192h42.667v42.667H320V192z\n              M320,256h42.667v42.667H320V256z M320,320h42.667v42.667H320V320z M320,384h42.667v42.667H320V384z M213.333,192h85.333v42.667\n              h-85.333V192z M213.333,256h85.333v42.667h-85.333V256z M213.333,320h85.333v42.667h-85.333V320z M213.333,384h85.333v42.667\n              h-85.333V384z M149.333,192H192v42.667h-42.667V192z M149.333,256H192v42.667h-42.667V256z M149.333,320H192v42.667h-42.667V320z\n              M149.333,384H192v42.667h-42.667V384z" })] }) }) }) })),
-        },
-    ]), formatOptions = _e[0], setFormatOptions = _e[1];
-    var _f = useState(false), isDialogVisible = _f[0], setIsDialogVisible = _f[1];
-    var _g = useState(""), newTemplateName = _g[0], setNewTemplateName = _g[1];
-    var steps = [
-        { label: 'Export', value: 'export' },
-        { label: 'Summary', value: 'summary' },
-    ];
-    var _h = useState('export'), currentStepValue = _h[0], setCurrentStepValue = _h[1];
-    useEffect(function () {
-        if ((templatesData === null || templatesData === void 0 ? void 0 : templatesData.records) && templatesData.records.length > 0) {
-            var templates = templatesData.records.map(function (template) { return ({
-                name: template.templateName,
-                code: template.id,
-                fields: template.fields,
-                templateFormat: template.templateFormat
-            }); });
-            setTemplateOptions(__spreadArray([], templates, true));
+    var handleTemplateSelect = function (templateCode) {
+        var _a, _b;
+        var nextTemplate = (_a = templateOptions.find(function (option) { return option.code === templateCode; })) !== null && _a !== void 0 ? _a : null;
+        setSelectedTemplate(nextTemplate);
+        if (!nextTemplate) {
+            setSelectedColumns(defaultSelectedColumns);
+            setSelectedFormat(FORMAT_OPTIONS[0]);
+            return;
         }
-    }, [templatesData]);
+        var fields = parseTemplateFields(nextTemplate.fields);
+        var resolvedColumns = fields
+            .map(function (field) { return allColumns.find(function (column) { return column.key === field; }); })
+            .filter(Boolean);
+        setSelectedColumns(resolvedColumns);
+        setSelectedFormat((_b = FORMAT_OPTIONS.find(function (option) { return option.code === nextTemplate.templateFormat; })) !== null && _b !== void 0 ? _b : FORMAT_OPTIONS[0]);
+    };
     var handleAddTemplate = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var tname, customSelectedFields, fieldsData, exportData, response, newAddedTemplate_1, err_1;
+        var trimmedName, exportData, response, error_1;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    setIsDialogVisible(false);
-                    tname = newTemplateName.trim();
-                    if (!(((selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || tname) && selectedFormat)) return [3 /*break*/, 5];
-                    setNewTemplateName("");
-                    setIsDialogVisible(false);
-                    customSelectedFields = selectedColumns.map(function (col) { return col.key; });
-                    fieldsData = JSON.stringify(customSelectedFields);
+                    trimmedName = newTemplateName.trim();
+                    if (!trimmedName) {
+                        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.TEMPLATE_FAILED, detail: ERROR_MESSAGES.TEMPLATE_FAILED }));
+                        return [2 /*return*/];
+                    }
                     exportData = {
-                        templateName: tname || (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || "",
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
+                        templateName: trimmedName,
+                        templateFormat: selectedFormat.code,
                         notifyOnEmail: true,
-                        fields: fieldsData,
+                        fields: JSON.stringify(selectedColumns.map(function (col) { return col.key; })),
                         modelMetadataId: (_a = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _a === void 0 ? void 0 : _a.id,
                     };
                     _b.label = 1;
@@ -174,38 +198,50 @@ export var SolidExport = function (_a) {
                     return [4 /*yield*/, createExportTemplate(exportData).unwrap()];
                 case 2:
                     response = _b.sent();
+                    setSelectedTemplate({
+                        name: trimmedName,
+                        code: String(response.data.id),
+                        fields: selectedColumns.map(function (col) { return col.key; }),
+                        templateFormat: selectedFormat.code,
+                    });
+                    setNewTemplateName("");
+                    setIsSaveDialogVisible(false);
                     dispatch(showToast({ severity: "success", summary: "Template Added", detail: "Template Saved" }));
-                    newAddedTemplate_1 = {
-                        name: (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || "",
-                        code: response.data.id,
-                        fields: customSelectedFields,
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
-                    };
-                    setTemplateOptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newAddedTemplate_1], false); });
-                    // ✅ Select the newly added template
-                    setSelectedTemplate(newAddedTemplate_1);
-                    // ✅ Re-assign the selected format from options list
-                    setSelectedFormat(formatOptions.find(function (format) { return format.code === (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code); }) || null);
                     return [3 /*break*/, 4];
                 case 3:
-                    err_1 = _b.sent();
-                    console.error(ERROR_MESSAGES.TEMPLATE_FAILED, err_1);
+                    error_1 = _b.sent();
+                    console.error(ERROR_MESSAGES.TEMPLATE_FAILED, error_1);
+                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.TEMPLATE_FAILED, detail: ERROR_MESSAGES.TEMPLATE_FAILED }));
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteTemplate = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code))
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, deleteExportTemplate(selectedTemplate.code).unwrap()];
+                case 2:
+                    _a.sent();
+                    setSelectedTemplate(null);
+                    dispatch(showToast({ severity: "success", summary: "Template Deleted", detail: "Template Deleted" }));
                     return [3 /*break*/, 4];
-                case 4: return [3 /*break*/, 6];
-                case 5:
+                case 3:
+                    error_2 = _a.sent();
+                    console.error(ERROR_MESSAGES.TEMPLATE_FAILED, error_2);
                     dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.TEMPLATE_FAILED, detail: ERROR_MESSAGES.TEMPLATE_FAILED }));
-                    _b.label = 6;
-                case 6: return [2 /*return*/];
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
-    var panelFooterTemplate = function () { return (_jsx("div", { className: "p-1", children: _jsx(Button, { label: "Add New Template", icon: "pi pi-plus", className: "p-button", onClick: function () { return setIsDialogVisible(true); } }) })); };
-    var _j = useState(0), progress = _j[0], setProgress = _j[1];
-    var _k = useState(false), showProgress = _k[0], setShowProgress = _k[1];
-    var _l = useState(""), message = _l[0], setMessage = _l[1];
-    var _m = useState(""), messageDescription = _m[0], setMessageDescription = _m[1];
-    var _o = useState("In Progress"), status = _o[0], setStatus = _o[1];
-    var _p = useState(false), checkApplyFilter = _p[0], setCheckedApplyFilter = _p[1];
     var downloadHandlers = {
         onProgress: function (value) {
             setProgress(value);
@@ -218,120 +254,45 @@ export var SolidExport = function (_a) {
         },
     };
     var handleDownload = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var id, tname, customSelectedFields, fieldsData, exportData, err_2;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var exportData, error_3;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
-                    id = (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code) ? selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code : null;
-                    tname = (newTemplateName === null || newTemplateName === void 0 ? void 0 : newTemplateName.trim()) || (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || null;
-                    customSelectedFields = selectedColumns.map(function (col) { return col.key; });
-                    fieldsData = JSON.stringify(customSelectedFields);
                     exportData = {
-                        id: id,
-                        templateName: tname,
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
+                        id: (_a = selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code) !== null && _a !== void 0 ? _a : null,
+                        templateName: (_b = selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) !== null && _b !== void 0 ? _b : null,
+                        templateFormat: selectedFormat.code,
                         notifyOnEmail: true,
-                        fields: fieldsData,
-                        modelMetadataId: (_a = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _a === void 0 ? void 0 : _a.id,
+                        fields: JSON.stringify(selectedColumns.map(function (col) { return col.key; })),
+                        modelMetadataId: (_c = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _c === void 0 ? void 0 : _c.id,
                     };
-                    // setNewTemplateName("");
-                    setIsDialogVisible(false);
-                    _b.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _b.trys.push([1, 3, , 4]);
+                    _d.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, downloadFileWithProgress("/export-template/startExport/sync", downloadHandlers, filters, checkApplyFilter, exportData)];
                 case 2:
-                    _b.sent();
+                    _d.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    err_2 = _b.sent();
-                    console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, err_2);
+                    error_3 = _d.sent();
+                    console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error_3);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
         });
     }); };
-    var handleTemplateChange = function (e) {
-        var selected = templateOptions.find(function (option) { return option.code === e.value.code; });
-        setSelectedTemplate(selected || null);
-        if (selected) {
-            var fields = [];
-            if (typeof selected.fields === "string") {
-                try {
-                    fields = JSON.parse(selected.fields);
-                }
-                catch (error) {
-                    console.error(ERROR_MESSAGES.PARSED_FIELD, error);
-                }
-            }
-            else if (Array.isArray(selected.fields)) {
-                fields = selected.fields;
-            }
-            var selectedFields = fields.map(function (field) {
-                var _a;
-                return ({
-                    key: field,
-                    name: ((_a = solidFieldsMetadata[field]) === null || _a === void 0 ? void 0 : _a.displayName) || field,
-                });
-            });
-            formik.setFieldValue("selectedColumns", selectedFields);
-            setSelectedTemplate(selected);
-            var format = formatOptions.find(function (f) { return f.code === selected.templateFormat; });
-            setSelectedFormat(format || null);
-        }
-        else {
-            setSelectedTemplate(null);
-        }
-    };
-    var renderSourceItem = function (item) { return (_jsx("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 SolidCustomPicklistItemWrapper SolidCustomPicklistSourceItem", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { onClick: function () { return moveToSelected(item); }, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { opacity: "0.4", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5", fill: "white", stroke: "#D9D9D9" }), _jsx("path", { d: "M7.42857 8.57143H4V7.42857H7.42857V4H8.57143V7.42857H12V8.57143H8.57143V12H7.42857V8.57143Z", fill: "#4B4D52" })] }) }), _jsx("label", { htmlFor: item.key, className: "text-sm font-semibold ml-2", children: item.name })] }) }, item.key)); };
-    var renderTargetItem = function (item) { return (_jsxs("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 pr-2 gap-2 SolidCustomPicklistItemWrapper", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.46672 11.7331C7.46672 12.0997 7.33616 12.4136 7.07505 12.6747C6.81394 12.9359 6.50005 13.0664 6.13338 13.0664C5.76672 13.0664 5.45283 12.9359 5.19172 12.6747C4.9306 12.4136 4.80005 12.0997 4.80005 11.7331C4.80005 11.3664 4.9306 11.0525 5.19172 10.7914C5.45283 10.5303 5.76672 10.3997 6.13338 10.3997C6.50005 10.3997 6.81394 10.5303 7.07505 10.7914C7.33616 11.0525 7.46672 11.3664 7.46672 11.7331ZM7.46672 7.73307C7.46672 8.09974 7.33616 8.41363 7.07505 8.67474C6.81394 8.93585 6.50005 9.06641 6.13338 9.06641C5.76672 9.06641 5.45283 8.93585 5.19172 8.67474C4.9306 8.41363 4.80005 8.09974 4.80005 7.73307C4.80005 7.36641 4.9306 7.05252 5.19172 6.79141C5.45283 6.5303 5.76672 6.39974 6.13338 6.39974C6.50005 6.39974 6.81394 6.5303 7.07505 6.79141C7.33616 7.05252 7.46672 7.36641 7.46672 7.73307ZM7.46672 3.73307C7.46672 4.09974 7.33616 4.41363 7.07505 4.67474C6.81394 4.93585 6.50005 5.06641 6.13338 5.06641C5.76672 5.06641 5.45283 4.93585 5.19172 4.67474C4.9306 4.41363 4.80005 4.09974 4.80005 3.73307C4.80005 3.36641 4.9306 3.05252 5.19172 2.79141C5.45283 2.5303 5.76672 2.39974 6.13338 2.39974C6.50005 2.39974 6.81394 2.5303 7.07505 2.79141C7.33616 3.05252 7.46672 3.36641 7.46672 3.73307Z", fill: "black", "fill-opacity": "0.25" }), _jsx("path", { d: "M11.7333 11.7331C11.7333 12.0997 11.6028 12.4136 11.3417 12.6747C11.0805 12.9359 10.7667 13.0664 10.4 13.0664C10.0333 13.0664 9.71943 12.9359 9.45832 12.6747C9.19721 12.4136 9.06665 12.0997 9.06665 11.7331C9.06665 11.3664 9.19721 11.0525 9.45832 10.7914C9.71943 10.5303 10.0333 10.3997 10.4 10.3997C10.7667 10.3997 11.0805 10.5303 11.3417 10.7914C11.6028 11.0525 11.7333 11.3664 11.7333 11.7331ZM11.7333 7.73307C11.7333 8.09974 11.6028 8.41363 11.3417 8.67474C11.0805 8.93585 10.7667 9.06641 10.4 9.06641C10.0333 9.06641 9.71943 8.93585 9.45832 8.67474C9.19721 8.41363 9.06665 8.09974 9.06665 7.73307C9.06665 7.36641 9.19721 7.05252 9.45832 6.79141C9.71943 6.5303 10.0333 6.39974 10.4 6.39974C10.7667 6.39974 11.0805 6.5303 11.3417 6.79141C11.6028 7.05252 11.7333 7.36641 11.7333 7.73307ZM11.7333 3.73307C11.7333 4.09974 11.6028 4.41363 11.3417 4.67474C11.0805 4.93585 10.7667 5.06641 10.4 5.06641C10.0333 5.06641 9.71943 4.93585 9.45832 4.67474C9.19721 4.41363 9.06665 4.09974 9.06665 3.73307C9.06665 3.36641 9.19721 3.05252 9.45832 2.79141C9.71943 2.5303 10.0333 2.39974 10.4 2.39974C10.7667 2.39974 11.0805 2.5303 11.3417 2.79141C11.6028 3.05252 11.7333 3.36641 11.7333 3.73307Z", fill: "black", "fill-opacity": "0.25" })] }), _jsx("span", { className: "text-sm font-semibold flex-1 ", children: item.name }), _jsxs("svg", { width: "16", height: "16", onClick: function () { return moveToAvailable(item); }, cursor: 'pointer', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "16", height: "16", rx: "8", fill: "#F0F0F0" }), _jsx("path", { d: "M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z", fill: "#4B4D52" })] })] }, item.key)); };
-    var maxVisibleRows = Math.max(availableColumns.length, selectedColumns.length);
-    var renderEmptyRow = function (index) { return (_jsx("div", { className: "SolidCustomPicklistItemWrapper" }, "empty-".concat(index))); };
-    // Dialog footer (Save and Cancel buttons)
-    var dialogFooter = (_jsxs("div", { children: [_jsx(Button, { label: "Save", className: "p-button rounded", onClick: function () { return handleAddTemplate(); }, disabled: !newTemplateName.trim() }), _jsx(Button, { label: "Cancel", className: "ExportCancelButton", onClick: function () {
-                    setNewTemplateName("");
-                    setIsDialogVisible(false);
-                } })] }));
-    var handleDeleteTemplate = function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, deleteExportTemplate(id).unwrap()];
-                case 1:
-                    response = _a.sent();
-                    setTemplateOptions(function (prev) { return prev.filter(function (template) { return template.code !== id; }); });
-                    dispatch(showToast({ severity: "success", summary: "Template Deleted", detail: "Template Deleted" }));
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var itemTemplate = function (option) {
-        return (_jsxs("div", { className: "flex align-items-center justify-content-between w-full py-1", children: [_jsx("span", { className: "ExportDropdownText", children: option.name }), _jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 24 24", fill: "none", style: { right: 0 }, className: "ExportDropdownIcon", onClick: function (e) {
-                        e.stopPropagation(); // Prevent triggering selection
-                        handleDeleteTemplate(option.code);
-                    }, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z", fill: "#ff3d32" }) })] }));
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-0", children: currentStepValue === 'export' &&
-                    _jsxs(_Fragment, { children: [_jsxs("div", { className: "SolidExportControls mx-2 gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { inputId: "applyFilters", onChange: function (e) { return setCheckedApplyFilter(!!e.checked); }, checked: checkApplyFilter }), _jsx("label", { htmlFor: "applyFilters", className: "ml-2", children: "  Apply Filters" })] }), _jsx(Dropdown, { value: selectedFormat, onChange: function (e) { return setSelectedFormat(e.value); }, options: formatOptions, optionLabel: "name", placeholder: "Format .", className: "p-dropdown p-outlined", 
-                                        // 👇 Render icon + text for dropdown list options
-                                        itemTemplate: function (option) {
-                                            var isSelected = (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) === option.code;
-                                            var iconColor = isSelected ? "#722ED1" : "#000000"; // Blue for selected
-                                            return (_jsxs("div", { className: "flex items-center gap-2 ", children: [React.cloneElement(option.icon, { fill: iconColor }), _jsx("span", { children: option.name })] }));
-                                        }, 
-                                        // 👇 Render icon + text for selected value display
-                                        valueTemplate: function (option) {
-                                            if (!option)
-                                                return "Format .";
-                                            return (_jsxs("div", { className: "flex items-center gap-2 h-1rem", children: [React.cloneElement(option.icon, { fill: "#722ED1" }), _jsx("span", { children: option.name })] }));
-                                        } }), _jsx(Dropdown, { value: selectedTemplate, onChange: function (e) { return handleTemplateChange(e); }, options: templateOptions, optionLabel: "name", placeholder: "Template ", className: "p-dropdown hidden md:flex", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }), _jsx(Button, { className: "p-button hidden md:flex", label: "Export", disabled: !selectedFormat, onClick: function () { return handleDownload(); } }), _jsx(Button, { className: "p-button md:hidden", label: "Export", disabled: !selectedFormat, onClick: function () { return handleDownload(); }, size: "small" })] }), _jsx("div", { className: "col-12 sm:col-6 p-0 ", children: _jsx(Dropdown, { value: selectedTemplate, onChange: function (e) { return handleTemplateChange(e); }, options: templateOptions, optionLabel: "name", placeholder: "Template", className: "p-dropdown md:hidden w-full mt-2 p-inputtext-sm", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }) }), _jsxs(Dialog, { header: "Save Export Template", className: "solid-confirm-dialog", visible: isDialogVisible, style: { width: "20rem", right: "0" }, footer: dialogFooter, onHide: function () {
+    var selectedTemplateFieldsCount = selectedColumns.length;
+    var selectedFormatMeta = exportFormatMeta(selectedFormat.code);
+    var selectionSummary = selectedTemplate ? "Template: ".concat(selectedTemplate.name) : "Current field selection";
+    var filterSummary = checkApplyFilter ? "Filters applied" : "All records";
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "solid-export-shell", children: [_jsxs("div", { className: "solid-export-toolbar", children: [_jsxs("div", { className: "solid-export-toolbar-main", children: [_jsxs("label", { className: "solid-export-field", children: [_jsx("span", { className: "solid-export-field-label", children: "Format" }), _jsx(SolidSelect, { value: selectedFormat.code, options: FORMAT_OPTIONS.map(function (option) { return ({ label: option.name, value: option.code }); }), onChange: function (event) {
+                                                    var next = FORMAT_OPTIONS.find(function (option) { return option.code === event.value; });
+                                                    if (next)
+                                                        setSelectedFormat(next);
+                                                }, placeholder: "Select format" })] }), _jsxs("label", { className: "solid-export-field solid-export-field--template", children: [_jsx("span", { className: "solid-export-field-label", children: "Template" }), _jsx(SolidSelect, { value: (_c = selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code) !== null && _c !== void 0 ? _c : "", options: resolvedTemplateOptions.map(function (option) { return ({ label: option.name, value: option.code }); }), onChange: function (event) { return handleTemplateSelect(event.value); }, placeholder: resolvedTemplateOptions.length ? "Choose template" : "No saved templates" })] })] }), _jsxs("div", { className: "solid-export-toolbar-side", children: [_jsx("div", { className: "solid-export-toolbar-options", children: _jsx(SolidCheckbox, { checked: checkApplyFilter, onChange: function (event) { return setCheckedApplyFilter(event.target.checked); }, label: "Apply Filters" }) }), _jsxs("div", { className: "solid-export-toolbar-actions", children: [_jsx(SolidButton, { variant: "outline", size: "small", leftIcon: _jsx(Save, { size: 14 }), onClick: function () { return setIsSaveDialogVisible(true); }, children: "Save Template" }), _jsx(SolidButton, { variant: "ghost", size: "small", leftIcon: _jsx(Trash2, { size: 14 }), onClick: handleDeleteTemplate, disabled: !selectedTemplate || isDeletingTemplate, children: "Delete" }), _jsx(SolidButton, { size: "small", leftIcon: _jsx(Download, { size: 14 }), onClick: handleDownload, disabled: selectedColumns.length === 0, children: "Export" })] })] })] }), _jsxs("div", { className: "solid-export-summary", children: [_jsx("div", { className: "solid-export-summary-card", children: _jsxs("div", { className: "solid-export-summary-title-row", children: [_jsx("div", { className: "solid-export-summary-format-icon", children: selectedFormatMeta.icon }), _jsxs("div", { className: "solid-export-summary-copy-block", children: [_jsxs("div", { className: "solid-export-summary-title", children: [selectedFormatMeta.label, " export"] }), _jsxs("div", { className: "solid-export-summary-meta", children: [_jsx("span", { className: "solid-export-summary-copy", children: selectionSummary }), _jsx("span", { className: "solid-export-summary-dot", "aria-hidden": "true" }), _jsx("span", { className: "solid-export-summary-copy", children: filterSummary })] })] })] }) }), _jsxs("div", { className: "solid-export-summary-chip", children: [_jsx(Check, { size: 13 }), selectedTemplateFieldsCount, " field", selectedTemplateFieldsCount === 1 ? "" : "s", " selected"] })] }), _jsxs("div", { className: "solid-export-builder", children: [_jsxs("div", { className: "solid-export-pane", children: [_jsxs("div", { className: "solid-export-pane-header", children: [_jsxs("div", { children: [_jsx("div", { className: "solid-export-pane-title", children: "Available Fields" }), _jsx("div", { className: "solid-export-pane-copy", children: "Add fields to include in the export." })] }), _jsx("div", { className: "solid-export-pane-count", children: availableColumns.length })] }), _jsx("div", { className: "solid-export-list", children: availableColumns.length ? (availableColumns.map(function (item) { return (_jsxs("div", { className: "solid-export-list-row", children: [_jsx("div", { className: "solid-export-list-row-copy", children: _jsxs("div", { className: "solid-export-list-row-title", children: [item.name, _jsxs("span", { className: "solid-export-list-row-key", children: ["(", item.key, ")"] })] }) }), _jsx(SolidButton, { variant: "ghost", size: "small", className: "solid-export-list-row-action", leftIcon: _jsx(Plus, { size: 14 }), "aria-label": "Add ".concat(item.name), tooltip: "Add ".concat(item.name), onClick: function () { return moveToSelected(item); } })] }, item.key)); })) : (_jsxs("div", { className: "solid-export-empty", children: [_jsx("div", { className: "solid-export-empty-title", children: "All fields are already selected" }), _jsx("div", { className: "solid-export-empty-copy", children: "Remove a field from the export set to make it available here again." })] })) })] }), _jsxs("div", { className: "solid-export-pane", children: [_jsxs("div", { className: "solid-export-pane-header", children: [_jsxs("div", { children: [_jsx("div", { className: "solid-export-pane-title", children: "Selected Fields" }), _jsx("div", { className: "solid-export-pane-copy", children: "These columns will be exported in the file." })] }), _jsx("div", { className: "solid-export-pane-count is-selected", children: selectedColumns.length })] }), _jsx("div", { className: "solid-export-list", children: selectedColumns.length ? (selectedColumns.map(function (item) { return (_jsxs("div", { className: "solid-export-list-row", children: [_jsx("div", { className: "solid-export-list-row-copy", children: _jsxs("div", { className: "solid-export-list-row-title", children: [item.name, _jsxs("span", { className: "solid-export-list-row-key", children: ["(", item.key, ")"] })] }) }), _jsx(SolidButton, { variant: "ghost", size: "small", className: "solid-export-list-row-action is-remove", leftIcon: _jsx(Trash2, { size: 14 }), "aria-label": "Remove ".concat(item.name), tooltip: "Remove ".concat(item.name), onClick: function () { return moveToAvailable(item); } })] }, item.key)); })) : (_jsxs("div", { className: "solid-export-empty", children: [_jsx("div", { className: "solid-export-empty-title", children: "No fields selected yet" }), _jsx("div", { className: "solid-export-empty-copy", children: "Pick at least one field before starting the export." })] })) })] })] })] }), _jsxs(SolidDialog, { open: isSaveDialogVisible, onOpenChange: setIsSaveDialogVisible, className: "solid-export-save-dialog", style: { width: "min(420px, calc(100vw - 24px))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "Save Export Template" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Save the current format and selected fields so this export can be reused later." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-filter-dialog-body", children: _jsxs("label", { className: "solid-export-field solid-export-save-field", children: [_jsx("span", { className: "solid-export-field-label", children: "Template name" }), _jsx(SolidInput, { value: newTemplateName, onChange: function (event) { return setNewTemplateName(event.target.value); }, placeholder: "Enter template name", autoFocus: true })] }) }), _jsxs(SolidDialogFooter, { className: "solid-export-save-footer", children: [_jsx(SolidButton, { type: "button", size: "small", variant: "outline", onClick: function () {
                                     setNewTemplateName("");
-                                    setIsDialogVisible(false);
-                                }, children: [_jsx("label", { htmlFor: "templateName", className: "text-color-secondary", children: "Title" }), _jsx(InputText, { id: "templateName", name: "templateName", value: newTemplateName, onChange: function (e) { return setNewTemplateName(e.target.value); }, placeholder: "Enter template name", className: "w-full", autoFocus: true })] }), _jsx("div", { className: "SolidCustomPicklist mt-2", children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold SolidCustomPicklistSourceHeader", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Available Fields" }), _jsxs("div", { children: [availableColumns.map(renderSourceItem), Array.from({ length: maxVisibleRows - availableColumns.length }).map(function (_, i) {
-                                                            return renderEmptyRow(i);
-                                                        })] })] }), _jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Selected Fields" }), _jsxs("div", { children: [selectedColumns.map(renderTargetItem), Array.from({ length: maxVisibleRows - selectedColumns.length }).map(function (_, i) {
-                                                            return renderEmptyRow(i);
-                                                        })] })] })] }) })] }) }), _jsx(DownloadProgressToast, { visible: showProgress, progress: progress, message: message, submessage: messageDescription, status: status, onClose: function () { return setShowProgress(false); } })] }));
+                                    setIsSaveDialogVisible(false);
+                                }, children: "Cancel" }), _jsx(SolidButton, { type: "button", size: "small", loading: isSavingTemplate, disabled: !newTemplateName.trim() || isSavingTemplate, onClick: handleAddTemplate, children: "Save Template" })] })] }), _jsx(DownloadProgressToast, { visible: showProgress, progress: progress, message: message, submessage: messageDescription, status: status, onClose: function () { return setShowProgress(false); } })] }));
 };
 //# sourceMappingURL=SolidExport.js.map