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

package/dist/components/core/common/SolidGenericImport/SolidImportStepper.js

@@ -1,128 +1,18 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "primereact/button";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useEffect, useRef, useState } from "react";
-import styles from './SolidImport.module.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+var allSteps = [
+    { id: 1, label: "Instructions" },
+    { id: 2, label: "Upload" },
+    { id: 3, label: "Map Fields" },
+    { id: 4, label: "Summary" }
+];
 export var SolidImportStepper = function (_a) {
-    var importStep = _a.importStep, setImportStep = _a.setImportStep;
-    var containerRef = useRef(null);
-    var leftOverlayRef = useRef(null);
-    var rightOverlayRef = useRef(null);
-    var _b = useState(4), visibleStepsCount = _b[0], setVisibleStepsCount = _b[1];
-    var allSteps = [
-        { id: 1, label: "Instructions" },
-        { id: 2, label: "Import" },
-        { id: 3, label: "Map the fields" },
-        { id: 4, label: "Summary" }
-    ];
-    var getStepColor = function (step) {
-        if (importStep === step)
-            return "var(--primary-color)"; // current step
-        if (importStep > step)
-            return "#eceff1"; // past step
-        return "#F9F9F9"; // future step
-    };
-    // Dynamic responsive logic - same as SolidFormStepper
-    useEffect(function () {
-        var calculateVisibleSteps = function () {
-            if (!containerRef.current)
-                return;
-            var containerWidth = containerRef.current.offsetWidth;
-            var overflowButtonWidth = 50;
-            var stepWidth = 150; // approximate width per step
-            var arrowOverlap = 14; // overlap between steps
-            // Calculate how many steps can fit
-            var count = 0;
-            var totalWidth = 0;
-            for (var i = 0; i < allSteps.length; i++) {
-                var stepSpace = i === 0 ? stepWidth : stepWidth - arrowOverlap;
-                var needsOverflow = (i < allSteps.length - 1 && count + 1 < allSteps.length);
-                var requiredWidth = totalWidth + stepSpace + (needsOverflow ? overflowButtonWidth : 0);
-                if (requiredWidth <= containerWidth) {
-                    totalWidth += stepSpace;
-                    count++;
-                }
-                else {
-                    break;
-                }
-            }
-            count = Math.max(1, count); // At least 1 step visible
-            setVisibleStepsCount(count);
-        };
-        calculateVisibleSteps();
-        var resizeObserver = new ResizeObserver(calculateVisibleSteps);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        var timeoutId = setTimeout(calculateVisibleSteps, 100);
-        return function () {
-            resizeObserver.disconnect();
-            clearTimeout(timeoutId);
-        };
-    }, []);
-    var activeIndex = importStep - 1;
-    var isSingleVisibleStep = visibleStepsCount === 1;
-    var visibleSteps = [];
-    var previousSteps = [];
-    var nextSteps = [];
-    if (isSingleVisibleStep) {
-        // Show only current step
-        visibleSteps = [allSteps[activeIndex]];
-        previousSteps = allSteps.slice(0, activeIndex);
-        nextSteps = allSteps.slice(activeIndex + 1);
-    }
-    else if (activeIndex < visibleStepsCount) {
-        // Active step is in first group
-        visibleSteps = allSteps.slice(0, visibleStepsCount);
-        nextSteps = allSteps.slice(visibleStepsCount);
-    }
-    else {
-        // Active step needs to be centered
-        var slotsAvailable = visibleStepsCount - 1;
-        var afterActive = Math.min(Math.floor(slotsAvailable / 2), allSteps.length - activeIndex - 1);
-        var beforeActive = slotsAvailable - afterActive;
-        var startIndex = Math.max(0, activeIndex - beforeActive);
-        var endIndex = Math.min(allSteps.length, activeIndex + afterActive + 1);
-        previousSteps = allSteps.slice(0, startIndex);
-        visibleSteps = allSteps.slice(startIndex, endIndex);
-        nextSteps = allSteps.slice(endIndex);
-    }
-    var hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;
-    var hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
-    var renderStepSVG = function (step, index) {
-        var isFirst = index === 0 && !hasPreviousSteps;
-        var isLast = index === visibleSteps.length - 1 && !hasNextSteps;
-        var marginLeft = index === 0 ? 0 : -14;
-        if (isFirst) {
-            // First step - arrow on right only
-            return (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft: marginLeft }, onClick: function () { return setImportStep(step.id); }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 343 40", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M342 20.1399L329 0H0V40H329L342 20.1399Z", fill: getStepColor(step.id), stroke: getStepColor(step.id), strokeLinejoin: "round" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "100%", viewBox: "0 0 10 40", fill: "none", style: { marginLeft: -12 }, children: _jsx("path", { d: "M1 0L10 20.1399L1 40", stroke: "#CFD6DC", strokeLinejoin: "round" }) }), _jsx("div", { className: "".concat(styles.StepperText, " ").concat(importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText), children: step.label })] }));
-        }
-        else if (isLast) {
-            // Last step - arrow on left only
-            return (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }, onClick: function () { return setImportStep(step.id); }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 330 40", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M330 0H0L13.5 20L0 40H330V0Z", fill: getStepColor(step.id), stroke: getStepColor(step.id), strokeLinejoin: "round" }) }), _jsx("div", { className: "".concat(styles.StepperText, " ").concat(importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText), children: step.label })] }));
-        }
-        else {
-            // Middle steps - arrows on both sides
-            return (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }, onClick: function () { return setImportStep(step.id); }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 343 40", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M342 20.1399L330 0H0L13.5 20L0 40H330L342 20.1399Z", fill: getStepColor(step.id), stroke: getStepColor(step.id), strokeLinejoin: "round" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "100%", viewBox: "0 0 10 40", fill: "none", style: { marginLeft: -13 }, children: _jsx("path", { d: "M1 0L10 20.1399L1 40", stroke: "#CFD6DC", strokeLinejoin: "round" }) }), _jsx("div", { className: "".concat(styles.StepperText, " ").concat(importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText), children: step.label })] }));
-        }
-    };
-    return (_jsx("div", { className: "py-2 px-3 px-md-4 secondary-border-bottom", style: { backgroundColor: '#F6F6F6' }, children: _jsxs("div", { ref: containerRef, className: "flex align-items-center", style: { borderRadius: 6, border: '1px solid var(--primary-light-color)', overflow: 'hidden', cursor: 'pointer' }, children: [hasPreviousSteps && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-chevron-left", text: true, rounded: true, size: "small", style: { minWidth: '40px', height: '40px', margin: '0 4px' }, onClick: function (e) { var _a; return (_a = leftOverlayRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }), _jsx(OverlayPanel, { ref: leftOverlayRef, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }, children: previousSteps.map(function (step) { return (_jsx(Button, { label: step.label, text: true, className: importStep === step.id ? 'p-button-primary' : '', onClick: function () {
-                                        var _a;
-                                        setImportStep(step.id);
-                                        (_a = leftOverlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-                                    } }, step.id)); }) }) })] })), visibleSteps.map(function (step, index) { return renderStepSVG(step, index); }), hasNextSteps && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-chevron-right", text: true, rounded: true, size: "small", style: { minWidth: '40px', height: '40px' }, onClick: function (e) { var _a; return (_a = rightOverlayRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }), _jsx(OverlayPanel, { ref: rightOverlayRef, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }, children: (isSingleVisibleStep ? __spreadArray(__spreadArray([], previousSteps, true), nextSteps, true) : nextSteps).map(function (step) { return (_jsx(Button, { label: step.label, text: true, className: importStep === step.id ? 'p-button-primary' : '', onClick: function () {
-                                        var _a;
-                                        setImportStep(step.id);
-                                        (_a = rightOverlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-                                    } }, step.id)); }) }) })] }))] }) }));
+    var importStep = _a.importStep, _b = _a.maxStepReached, maxStepReached = _b === void 0 ? importStep : _b, setImportStep = _a.setImportStep;
+    return (_jsx("div", { className: "solid-import-stepper", "aria-label": "Import steps", children: allSteps.map(function (step, index) {
+            var isActive = importStep === step.id;
+            var isCompleted = importStep > step.id;
+            var isLocked = step.id > maxStepReached;
+            return (_jsx("div", { className: "solid-import-stepper-item-wrap ".concat(index === allSteps.length - 1 ? "is-last" : ""), children: _jsxs("button", { type: "button", className: "solid-import-stepper-item ".concat(isActive ? "is-active" : "", " ").concat(isCompleted ? "is-complete" : "", " ").concat(isLocked ? "is-locked" : ""), onClick: function () { return setImportStep(step.id); }, disabled: isLocked, children: [_jsx("span", { className: "solid-import-stepper-badge", children: isCompleted ? _jsx(Check, { size: 13 }) : step.id }), _jsx("span", { className: "solid-import-stepper-label", children: step.label })] }) }, step.id));
+        }) }));
 };
 //# sourceMappingURL=SolidImportStepper.js.map

package/dist/components/core/common/SolidGenericImport/SolidImportStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidImportStepper.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportStepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button } from \"primereact/button\"\nimport { OverlayPanel } from \"primereact/overlaypanel\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styles from './SolidImport.module.css'\n\nexport const SolidImportStepper = ({ importStep, setImportStep }: any) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const leftOverlayRef = useRef<OverlayPanel>(null);\n    const rightOverlayRef = useRef<OverlayPanel>(null);\n    const [visibleStepsCount, setVisibleStepsCount] = useState(4);\n\n    const allSteps = [\n        { id: 1, label: \"Instructions\" },\n        { id: 2, label: \"Import\" },\n        { id: 3, label: \"Map the fields\" },\n        { id: 4, label: \"Summary\" }\n    ];\n\n    const getStepColor = (step: number) => {\n        if (importStep === step) return \"var(--primary-color)\";      // current step\n        if (importStep > step) return \"#eceff1\";        // past step\n        return \"#F9F9F9\";                                  // future step\n    };\n\n    // Dynamic responsive logic - same as SolidFormStepper\n    useEffect(() => {\n        const calculateVisibleSteps = () => {\n            if (!containerRef.current) return;\n            \n            const containerWidth = containerRef.current.offsetWidth;\n            const overflowButtonWidth = 50;\n            const stepWidth = 150; // approximate width per step\n            const arrowOverlap = 14; // overlap between steps\n            \n            // Calculate how many steps can fit\n            let count = 0;\n            let totalWidth = 0;\n\n            for (let i = 0; i < allSteps.length; i++) {\n                const stepSpace = i === 0 ? stepWidth : stepWidth - arrowOverlap;\n                const needsOverflow = (i < allSteps.length - 1 && count + 1 < allSteps.length);\n                const requiredWidth = totalWidth + stepSpace + (needsOverflow ? overflowButtonWidth : 0);\n                \n                if (requiredWidth <= containerWidth) {\n                    totalWidth += stepSpace;\n                    count++;\n                } else {\n                    break;\n                }\n            }\n\n            count = Math.max(1, count); // At least 1 step visible\n            setVisibleStepsCount(count);\n        };\n\n        calculateVisibleSteps();\n        \n        const resizeObserver = new ResizeObserver(calculateVisibleSteps);\n        if (containerRef.current) {\n            resizeObserver.observe(containerRef.current);\n        }\n\n        const timeoutId = setTimeout(calculateVisibleSteps, 100);\n\n        return () => {\n            resizeObserver.disconnect();\n            clearTimeout(timeoutId);\n        };\n    }, []);\n\n    const activeIndex = importStep - 1;\n    const isSingleVisibleStep = visibleStepsCount === 1;\n\n    let visibleSteps: any[] = [];\n    let previousSteps: any[] = [];\n    let nextSteps: any[] = [];\n\n    if (isSingleVisibleStep) {\n        // Show only current step\n        visibleSteps = [allSteps[activeIndex]];\n        previousSteps = allSteps.slice(0, activeIndex);\n        nextSteps = allSteps.slice(activeIndex + 1);\n    } else if (activeIndex < visibleStepsCount) {\n        // Active step is in first group\n        visibleSteps = allSteps.slice(0, visibleStepsCount);\n        nextSteps = allSteps.slice(visibleStepsCount);\n    } else {\n        // Active step needs to be centered\n        const slotsAvailable = visibleStepsCount - 1;\n        const afterActive = Math.min(Math.floor(slotsAvailable / 2), allSteps.length - activeIndex - 1);\n        const beforeActive = slotsAvailable - afterActive;\n\n        const startIndex = Math.max(0, activeIndex - beforeActive);\n        const endIndex = Math.min(allSteps.length, activeIndex + afterActive + 1);\n\n        previousSteps = allSteps.slice(0, startIndex);\n        visibleSteps = allSteps.slice(startIndex, endIndex);\n        nextSteps = allSteps.slice(endIndex);\n    }\n\n    const hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;\n    const hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);\n\n    const renderStepSVG = (step: any, index: number) => {\n        const isFirst = index === 0 && !hasPreviousSteps;\n        const isLast = index === visibleSteps.length - 1 && !hasNextSteps;\n        const marginLeft = index === 0 ? 0 : -14;\n\n        if (isFirst) {\n            // First step - arrow on right only\n            return (\n                <div className=\"flex relative\" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft }} onClick={() => setImportStep(step.id)}>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 343 40\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M342 20.1399L329 0H0V40H329L342 20.1399Z\" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin=\"round\" />\n                    </svg>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"100%\" viewBox=\"0 0 10 40\" fill=\"none\" style={{ marginLeft: -12 }}>\n                        <path d=\"M1 0L10 20.1399L1 40\" stroke=\"#CFD6DC\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>\n                </div>\n            );\n        } else if (isLast) {\n            // Last step - arrow on left only\n            return (\n                <div className=\"flex relative\" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 330 40\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M330 0H0L13.5 20L0 40H330V0Z\" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin=\"round\" />\n                    </svg>\n                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>\n                </div>\n            );\n        } else {\n            // Middle steps - arrows on both sides\n            return (\n                <div className=\"flex relative\" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 343 40\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M342 20.1399L330 0H0L13.5 20L0 40H330L342 20.1399Z\" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin=\"round\" />\n                    </svg>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"100%\" viewBox=\"0 0 10 40\" fill=\"none\" style={{ marginLeft: -13 }}>\n                        <path d=\"M1 0L10 20.1399L1 40\" stroke=\"#CFD6DC\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>\n                </div>\n            );\n        }\n    };\n\n    return (\n        <div className=\"py-2 px-3 px-md-4 secondary-border-bottom\" style={{ backgroundColor: '#F6F6F6' }}>\n            <div ref={containerRef} className=\"flex align-items-center\" style={{ borderRadius: 6, border: '1px solid var(--primary-light-color)', overflow: 'hidden', cursor: 'pointer' }}>\n                \n                {/* Left Overflow Button */}\n                {hasPreviousSteps && (\n                    <>\n                        <Button\n                            icon=\"pi pi-chevron-left\"\n                            text\n                            rounded\n                            size=\"small\"\n                            style={{ minWidth: '40px', height: '40px', margin: '0 4px' }}\n                            onClick={(e) => leftOverlayRef.current?.toggle(e)}\n                        />\n                        <OverlayPanel ref={leftOverlayRef}>\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>\n                                {previousSteps.map((step) => (\n                                    <Button\n                                        key={step.id}\n                                        label={step.label}\n                                        text\n                                        className={importStep === step.id ? 'p-button-primary' : ''}\n                                        onClick={() => {\n                                            setImportStep(step.id);\n                                            leftOverlayRef.current?.hide();\n                                        }}\n                                    />\n                                ))}\n                            </div>\n                        </OverlayPanel>\n                    </>\n                )}\n\n                {/* Visible Steps */}\n                {visibleSteps.map((step, index) => renderStepSVG(step, index))}\n\n                {/* Right Overflow Button */}\n                {hasNextSteps && (\n                    <>\n                        <Button\n                            icon=\"pi pi-chevron-right\"\n                            text\n                            rounded\n                            size=\"small\"\n                            style={{ minWidth: '40px', height: '40px' }}\n                            onClick={(e) => rightOverlayRef.current?.toggle(e)}\n                        />\n                        <OverlayPanel ref={rightOverlayRef}>\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>\n                                {(isSingleVisibleStep ? [...previousSteps, ...nextSteps] : nextSteps).map((step) => (\n                                    <Button\n                                        key={step.id}\n                                        label={step.label}\n                                        text\n                                        className={importStep === step.id ? 'p-button-primary' : ''}\n                                        onClick={() => {\n                                            setImportStep(step.id);\n                                            rightOverlayRef.current?.hide();\n                                        }}\n                                    />\n                                ))}\n                            </div>\n                        </OverlayPanel>\n                    </>\n                )}\n            </div>\n        </div>\n    )\n}"]}
+{"version":3,"file":"SolidImportStepper.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,IAAM,QAAQ,GAAG;IACb,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE;IAChC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC1B,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE;IAC9B,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE;CAC9B,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,EAA+D;QAA7D,UAAU,gBAAA,EAAE,sBAA2B,EAA3B,cAAc,mBAAG,UAAU,KAAA,EAAE,aAAa,mBAAA;IACvF,OAAO,CACH,cAAK,SAAS,EAAC,sBAAsB,gBAAY,cAAc,YAC1D,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;YACtB,IAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,CAAC,EAAE,CAAC;YACxC,IAAM,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC;YACzC,IAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,cAAc,CAAC;YAE1C,OAAO,CACH,cAEI,SAAS,EAAE,yCAAkC,KAAK,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,YAE7F,kBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,oCAA6B,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,cAAI,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE,EACxI,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAtB,CAAsB,EACrC,QAAQ,EAAE,QAAQ,aAElB,eAAM,SAAS,EAAC,4BAA4B,YACvC,WAAW,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GACzC,EACP,eAAM,SAAS,EAAC,4BAA4B,YAAE,IAAI,CAAC,KAAK,GAAQ,IAC3D,IAbJ,IAAI,CAAC,EAAE,CAcV,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAA","sourcesContent":["import { Check } from \"lucide-react\";\n\nconst allSteps = [\n    { id: 1, label: \"Instructions\" },\n    { id: 2, label: \"Upload\" },\n    { id: 3, label: \"Map Fields\" },\n    { id: 4, label: \"Summary\" }\n];\n\nexport const SolidImportStepper = ({ importStep, maxStepReached = importStep, setImportStep }: any) => {\n    return (\n        <div className=\"solid-import-stepper\" aria-label=\"Import steps\">\n            {allSteps.map((step, index) => {\n                const isActive = importStep === step.id;\n                const isCompleted = importStep > step.id;\n                const isLocked = step.id > maxStepReached;\n\n                return (\n                    <div\n                        key={step.id}\n                        className={`solid-import-stepper-item-wrap ${index === allSteps.length - 1 ? \"is-last\" : \"\"}`}\n                    >\n                        <button\n                            type=\"button\"\n                            className={`solid-import-stepper-item ${isActive ? \"is-active\" : \"\"} ${isCompleted ? \"is-complete\" : \"\"} ${isLocked ? \"is-locked\" : \"\"}`}\n                            onClick={() => setImportStep(step.id)}\n                            disabled={isLocked}\n                        >\n                            <span className=\"solid-import-stepper-badge\">\n                                {isCompleted ? <Check size={13} /> : step.id}\n                            </span>\n                            <span className=\"solid-import-stepper-label\">{step.label}</span>\n                        </button>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"]}

package/dist/components/core/common/SolidGenericImport/SolidImportStepper.tsx

@@ -1,217 +1,39 @@
-import { Button } from "primereact/button"
-import { OverlayPanel } from "primereact/overlaypanel"
-import { useEffect, useRef, useState } from "react"
-import styles from './SolidImport.module.css'
+import { Check } from "lucide-react";
 
-export const SolidImportStepper = ({ importStep, setImportStep }: any) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const leftOverlayRef = useRef<OverlayPanel>(null);
-    const rightOverlayRef = useRef<OverlayPanel>(null);
-    const [visibleStepsCount, setVisibleStepsCount] = useState(4);
-
-    const allSteps = [
-        { id: 1, label: "Instructions" },
-        { id: 2, label: "Import" },
-        { id: 3, label: "Map the fields" },
-        { id: 4, label: "Summary" }
-    ];
-
-    const getStepColor = (step: number) => {
-        if (importStep === step) return "var(--primary-color)";      // current step
-        if (importStep > step) return "#eceff1";        // past step
-        return "#F9F9F9";                                  // future step
-    };
-
-    // Dynamic responsive logic - same as SolidFormStepper
-    useEffect(() => {
-        const calculateVisibleSteps = () => {
-            if (!containerRef.current) return;
-            
-            const containerWidth = containerRef.current.offsetWidth;
-            const overflowButtonWidth = 50;
-            const stepWidth = 150; // approximate width per step
-            const arrowOverlap = 14; // overlap between steps
-            
-            // Calculate how many steps can fit
-            let count = 0;
-            let totalWidth = 0;
-
-            for (let i = 0; i < allSteps.length; i++) {
-                const stepSpace = i === 0 ? stepWidth : stepWidth - arrowOverlap;
-                const needsOverflow = (i < allSteps.length - 1 && count + 1 < allSteps.length);
-                const requiredWidth = totalWidth + stepSpace + (needsOverflow ? overflowButtonWidth : 0);
-                
-                if (requiredWidth <= containerWidth) {
-                    totalWidth += stepSpace;
-                    count++;
-                } else {
-                    break;
-                }
-            }
-
-            count = Math.max(1, count); // At least 1 step visible
-            setVisibleStepsCount(count);
-        };
-
-        calculateVisibleSteps();
-        
-        const resizeObserver = new ResizeObserver(calculateVisibleSteps);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-
-        const timeoutId = setTimeout(calculateVisibleSteps, 100);
-
-        return () => {
-            resizeObserver.disconnect();
-            clearTimeout(timeoutId);
-        };
-    }, []);
-
-    const activeIndex = importStep - 1;
-    const isSingleVisibleStep = visibleStepsCount === 1;
-
-    let visibleSteps: any[] = [];
-    let previousSteps: any[] = [];
-    let nextSteps: any[] = [];
-
-    if (isSingleVisibleStep) {
-        // Show only current step
-        visibleSteps = [allSteps[activeIndex]];
-        previousSteps = allSteps.slice(0, activeIndex);
-        nextSteps = allSteps.slice(activeIndex + 1);
-    } else if (activeIndex < visibleStepsCount) {
-        // Active step is in first group
-        visibleSteps = allSteps.slice(0, visibleStepsCount);
-        nextSteps = allSteps.slice(visibleStepsCount);
-    } else {
-        // Active step needs to be centered
-        const slotsAvailable = visibleStepsCount - 1;
-        const afterActive = Math.min(Math.floor(slotsAvailable / 2), allSteps.length - activeIndex - 1);
-        const beforeActive = slotsAvailable - afterActive;
-
-        const startIndex = Math.max(0, activeIndex - beforeActive);
-        const endIndex = Math.min(allSteps.length, activeIndex + afterActive + 1);
-
-        previousSteps = allSteps.slice(0, startIndex);
-        visibleSteps = allSteps.slice(startIndex, endIndex);
-        nextSteps = allSteps.slice(endIndex);
-    }
-
-    const hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;
-    const hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
-
-    const renderStepSVG = (step: any, index: number) => {
-        const isFirst = index === 0 && !hasPreviousSteps;
-        const isLast = index === visibleSteps.length - 1 && !hasNextSteps;
-        const marginLeft = index === 0 ? 0 : -14;
-
-        if (isFirst) {
-            // First step - arrow on right only
-            return (
-                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft }} onClick={() => setImportStep(step.id)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 343 40" fill="none" preserveAspectRatio="none">
-                        <path d="M342 20.1399L329 0H0V40H329L342 20.1399Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="100%" viewBox="0 0 10 40" fill="none" style={{ marginLeft: -12 }}>
-                        <path d="M1 0L10 20.1399L1 40" stroke="#CFD6DC" strokeLinejoin="round" />
-                    </svg>
-                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
-                </div>
-            );
-        } else if (isLast) {
-            // Last step - arrow on left only
-            return (
-                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 330 40" fill="none" preserveAspectRatio="none">
-                        <path d="M330 0H0L13.5 20L0 40H330V0Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
-                    </svg>
-                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
-                </div>
-            );
-        } else {
-            // Middle steps - arrows on both sides
-            return (
-                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 343 40" fill="none" preserveAspectRatio="none">
-                        <path d="M342 20.1399L330 0H0L13.5 20L0 40H330L342 20.1399Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="100%" viewBox="0 0 10 40" fill="none" style={{ marginLeft: -13 }}>
-                        <path d="M1 0L10 20.1399L1 40" stroke="#CFD6DC" strokeLinejoin="round" />
-                    </svg>
-                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
-                </div>
-            );
-        }
-    };
+const allSteps = [
+    { id: 1, label: "Instructions" },
+    { id: 2, label: "Upload" },
+    { id: 3, label: "Map Fields" },
+    { id: 4, label: "Summary" }
+];
 
+export const SolidImportStepper = ({ importStep, maxStepReached = importStep, setImportStep }: any) => {
     return (
-        <div className="py-2 px-3 px-md-4 secondary-border-bottom" style={{ backgroundColor: '#F6F6F6' }}>
-            <div ref={containerRef} className="flex align-items-center" style={{ borderRadius: 6, border: '1px solid var(--primary-light-color)', overflow: 'hidden', cursor: 'pointer' }}>
-                
-                {/* Left Overflow Button */}
-                {hasPreviousSteps && (
-                    <>
-                        <Button
-                            icon="pi pi-chevron-left"
-                            text
-                            rounded
-                            size="small"
-                            style={{ minWidth: '40px', height: '40px', margin: '0 4px' }}
-                            onClick={(e) => leftOverlayRef.current?.toggle(e)}
-                        />
-                        <OverlayPanel ref={leftOverlayRef}>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>
-                                {previousSteps.map((step) => (
-                                    <Button
-                                        key={step.id}
-                                        label={step.label}
-                                        text
-                                        className={importStep === step.id ? 'p-button-primary' : ''}
-                                        onClick={() => {
-                                            setImportStep(step.id);
-                                            leftOverlayRef.current?.hide();
-                                        }}
-                                    />
-                                ))}
-                            </div>
-                        </OverlayPanel>
-                    </>
-                )}
-
-                {/* Visible Steps */}
-                {visibleSteps.map((step, index) => renderStepSVG(step, index))}
-
-                {/* Right Overflow Button */}
-                {hasNextSteps && (
-                    <>
-                        <Button
-                            icon="pi pi-chevron-right"
-                            text
-                            rounded
-                            size="small"
-                            style={{ minWidth: '40px', height: '40px' }}
-                            onClick={(e) => rightOverlayRef.current?.toggle(e)}
-                        />
-                        <OverlayPanel ref={rightOverlayRef}>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>
-                                {(isSingleVisibleStep ? [...previousSteps, ...nextSteps] : nextSteps).map((step) => (
-                                    <Button
-                                        key={step.id}
-                                        label={step.label}
-                                        text
-                                        className={importStep === step.id ? 'p-button-primary' : ''}
-                                        onClick={() => {
-                                            setImportStep(step.id);
-                                            rightOverlayRef.current?.hide();
-                                        }}
-                                    />
-                                ))}
-                            </div>
-                        </OverlayPanel>
-                    </>
-                )}
-            </div>
+        <div className="solid-import-stepper" aria-label="Import steps">
+            {allSteps.map((step, index) => {
+                const isActive = importStep === step.id;
+                const isCompleted = importStep > step.id;
+                const isLocked = step.id > maxStepReached;
+
+                return (
+                    <div
+                        key={step.id}
+                        className={`solid-import-stepper-item-wrap ${index === allSteps.length - 1 ? "is-last" : ""}`}
+                    >
+                        <button
+                            type="button"
+                            className={`solid-import-stepper-item ${isActive ? "is-active" : ""} ${isCompleted ? "is-complete" : ""} ${isLocked ? "is-locked" : ""}`}
+                            onClick={() => setImportStep(step.id)}
+                            disabled={isLocked}
+                        >
+                            <span className="solid-import-stepper-badge">
+                                {isCompleted ? <Check size={13} /> : step.id}
+                            </span>
+                            <span className="solid-import-stepper-label">{step.label}</span>
+                        </button>
+                    </div>
+                );
+            })}
         </div>
-    )
-}
+    );
+}

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidImportTransaction.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,4DAA6D,GAAG,4CAyLlG,CAAA"}
+{"version":3,"file":"SolidImportTransaction.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,4DAA6D,GAAG,4CAkLlG,CAAA"}

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.js

@@ -46,24 +46,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
+import { CircleX, MoveRight } from 'lucide-react';
 import styles from './SolidImport.module.css';
 import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
-import React, { useEffect, useState } from 'react';
-import { Dropdown } from 'primereact/dropdown';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { showToast } from '../../../../redux/features/toastSlice';
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import { SolidButton, SolidSelect, SolidSpinner } from '../../../shad-cn-ui';
 export var SolidImportTransaction = function (_a) {
-    // console.log("get transaction id", transactionId);
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g;
     var setImportStatusResult = _a.setImportStatusResult, transactionId = _a.transactionId, setImportStep = _a.setImportStep;
     var dispatch = useDispatch();
-    var _g = useLazyGetImportMappingInfoQuery(), trigger = _g[0], _h = _g[1], mappingInfo = _h.data, isLoading = _h.isLoading, isError = _h.isError;
+    var _h = useLazyGetImportMappingInfoQuery(), trigger = _h[0], _j = _h[1], mappingInfo = _j.data, isLoading = _j.isLoading;
     var patchUpdateImportTransaction = usePatchUpdateImportTransactionMutation()[0];
-    var _j = useCreateImportSyncMutation(), createImportSync = _j[0], isImporting = _j[1].isLoading;
-    var _k = useState({}), fieldMapping = _k[0], setFieldMapping = _k[1];
-    var _l = useState([]), visibleHeaders = _l[0], setVisibleHeaders = _l[1];
+    var _k = useCreateImportSyncMutation(), createImportSync = _k[0], isImporting = _k[1].isLoading;
+    var _l = useState({}), fieldMapping = _l[0], setFieldMapping = _l[1];
+    var _m = useState([]), visibleHeaders = _m[0], setVisibleHeaders = _m[1];
     useEffect(function () {
         if (transactionId) {
             trigger({ id: transactionId });
@@ -80,7 +79,7 @@ export var SolidImportTransaction = function (_a) {
         setFieldMapping(defaultMapping);
         setVisibleHeaders(headers);
     }, [mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data]);
-    var dropdownOptions = (_b = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _b === void 0 ? void 0 : _b.importableFields.map(function (field) { return ({
+    var dropdownOptions = ((_c = (_b = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _b === void 0 ? void 0 : _b.importableFields) !== null && _c !== void 0 ? _c : []).map(function (field) { return ({
         label: field.displayName,
         value: field.name,
     }); });
@@ -152,26 +151,12 @@ export var SolidImportTransaction = function (_a) {
             }
         });
     }); };
-    var sampleRecords = (_d = (_c = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _c === void 0 ? void 0 : _c.sampleImportedRecordInfo) !== null && _d !== void 0 ? _d : [];
-    return (_jsxs("div", { children: [_jsx("div", { className: styles.SolidImportContextWrapper, children: _jsxs("div", { className: 'grid m-0 relative', children: [_jsxs("div", { className: "col-6 font-bold p-3 ".concat(styles.ImportTableHeader), children: ["File Column", _jsx("div", { className: styles.TransactionsHeaderDivider })] }), _jsx("div", { className: "col-6 font-bold p-3 ".concat(styles.ImportTableHeader), children: "SolidX Field" }), sampleRecords.length > 0 ? (sampleRecords === null || sampleRecords === void 0 ? void 0 : sampleRecords.filter(function (sample) { return visibleHeaders.includes(sample.cellHeader); }).map(function (sample) {
-                            var fieldMeta = mappingInfo.data.importableFields.find(function (f) { return f.name === fieldMapping[sample.cellHeader]; });
-                            var isRequired = fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.required;
-                            // {sampleRecords.length > 0 ? (
-                            //    sampleRecords    
-                            //     ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
-                            //     ?.sort((a: any, b: any) => {
-                            //         const aRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[a.cellHeader])?.required;
-                            //         const bRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[b.cellHeader])?.required;
-                            //         return (bRequired ? 1 : 0) - (aRequired ? 1 : 0); // true comes before false
-                            //     })
-                            //     .map((sample: any) => {
-                            //         const fieldMeta = mappingInfo.data.importableFields.find(
-                            //             (f: any) => f.name === fieldMapping[sample.cellHeader]
-                            //         );
-                            //         const isRequired = fieldMeta?.required;
-                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "col-5 md:col-6 py-2 pl-3 pr-2 md:px-3 flex flex-column justify-content-center", style: { borderBottom: "1px solid var(--gray-100)" }, children: [_jsx("div", { className: "font-medium text-primary", children: sample.cellHeader }), _jsx("div", { className: "text-sm", style: { color: "var(--solid-grey-500)" }, children: sample.cellValue || "" })] }), _jsx("div", { className: "col-7 md:col-6 py-0", style: { borderBottom: "1px solid var(--gray-100)" }, children: _jsxs("div", { className: "flex w-full justify-between align-items-center gap-2  py-2 md:px-3  ".concat(fieldMapping[sample.cellHeader] ? "col-11 sm:col-12" : "col-12", " "), children: [_jsx(Dropdown, { value: fieldMapping[sample.cellHeader], options: dropdownOptions, onChange: function (e) { return handleChange(sample.cellHeader, e.value); }, className: "w-full p-inputtext-sm", placeholder: "Select field" }), !isRequired ? (_jsx("span", { onClick: function () { return handleRemoveRow(sample.cellHeader); }, title: "Remove this row", style: { cursor: 'pointer' }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", 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" })] }) }))
-                                                    :
-                                                        _jsx("span", { style: { height: 16, width: 16 } })] }) })] }, sample.cellHeader));
-                        })) : (_jsxs("div", { className: 'col-12 flex flex-column align-items-center', children: [_jsx("h4", { className: 'text-center px-2', children: "No Sample Imported Record Info Found" }), _jsx("p", { children: "Please Add Records" })] }))] }) }), _jsx("div", { className: 'mt-3 flex align-items-center gap-3', children: _jsx(Button, { label: 'Import', size: 'small', onClick: handleImportTransaction, loading: isImporting, disabled: isImporting || ((_f = (_e = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _e === void 0 ? void 0 : _e.sampleImportedRecordInfo) === null || _f === void 0 ? void 0 : _f.length) === 0 }) })] }));
+    var sampleRecords = (_e = (_d = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _d === void 0 ? void 0 : _d.sampleImportedRecordInfo) !== null && _e !== void 0 ? _e : [];
+    var visibleSampleRecords = sampleRecords === null || sampleRecords === void 0 ? void 0 : sampleRecords.filter(function (sample) { return visibleHeaders.includes(sample.cellHeader); });
+    return (_jsxs("div", { children: [_jsx("div", { className: styles.SolidImportContextWrapper, children: isLoading ? (_jsx("div", { className: "solid-import-loading-state", children: _jsx(SolidSpinner, { size: 22, label: "Loading mapping info" }) })) : visibleSampleRecords.length > 0 ? (_jsxs("div", { className: 'solid-import-mapping-shell', children: [_jsxs("div", { className: "solid-import-mapping-intro", children: [_jsxs("div", { children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Map file columns" }), _jsx("p", { className: 'solid-import-section-copy m-0', children: "Match each incoming column to the correct SolidX field before the import runs." })] }), _jsxs("div", { className: "solid-import-mapping-count", children: [visibleSampleRecords.length, " column", visibleSampleRecords.length > 1 ? 's' : ''] })] }), _jsxs("div", { className: 'solid-import-mapping-table', children: [_jsxs("div", { className: "solid-import-mapping-head ".concat(styles.ImportTableHeader), children: [_jsx("div", { className: "solid-import-mapping-head-cell", children: "File Column" }), _jsx("div", { className: "solid-import-mapping-head-cell", children: "SolidX Field" })] }), _jsx("div", { className: "solid-import-mapping-body", children: visibleSampleRecords.map(function (sample) {
+                                        var fieldMeta = mappingInfo.data.importableFields.find(function (f) { return f.name === fieldMapping[sample.cellHeader]; });
+                                        var isRequired = fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.required;
+                                        return (_jsxs("div", { className: "solid-import-mapping-row", children: [_jsxs("div", { className: "solid-import-mapping-source", children: [_jsx("div", { className: "solid-import-mapping-source-title", children: sample.cellHeader }), _jsx("div", { className: "solid-import-mapping-source-value", children: sample.cellValue || "No sample value" })] }), _jsx("div", { className: "solid-import-mapping-target", children: _jsxs("div", { className: "solid-import-mapping-target-controls", children: [_jsx(SolidSelect, { value: fieldMapping[sample.cellHeader], options: dropdownOptions, onChange: function (e) { return handleChange(sample.cellHeader, e.value); }, className: "w-full", placeholder: "Select field" }), !isRequired ? (_jsx("button", { type: "button", className: "solid-import-mapping-remove", onClick: function () { return handleRemoveRow(sample.cellHeader); }, title: "Remove this row", children: _jsx(CircleX, { size: 16 }) })) : (_jsx("span", { className: "solid-import-mapping-remove-placeholder" }))] }) })] }, sample.cellHeader));
+                                    }) })] })] })) : (_jsxs("div", { className: 'solid-import-empty-state', children: [_jsx("h4", { className: 'text-center px-2', children: "No sample import records found" }), _jsx("p", { children: "Upload a file first and then continue to mapping." })] })) }), _jsxs("div", { className: 'solid-import-actions', children: [_jsx("p", { className: "solid-import-actions-copy", children: "Confirm the mapping and start the import." }), _jsx(SolidButton, { type: "button", size: 'small', onClick: handleImportTransaction, loading: isImporting, disabled: isImporting || ((_g = (_f = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _f === void 0 ? void 0 : _f.sampleImportedRecordInfo) === null || _g === void 0 ? void 0 : _g.length) === 0, rightIcon: _jsx(MoveRight, { size: 14 }), children: "Import" })] })] }));
 };
 //# sourceMappingURL=SolidImportTransaction.js.map