@solidstarters/solid-core-ui 1.1.210 → 1.1.212

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

@@ -0,0 +1,122 @@
+"use client"
+import { Button } from 'primereact/button'
+import styles from './SolidImport.module.css'
+import { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';
+import { useEffect } from 'react';
+import { getSession } from 'next-auth/react';
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {
+    const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =
+        useLazyGetImportInstructionsQuery();
+
+    useEffect(() => {
+        if (listViewMetaData && listViewMetaData?.data?.solidView?.model?.id) {
+            getImportInstructions({ id: listViewMetaData?.data?.solidView?.model?.id });
+        }
+    }, [listViewMetaData, getImportInstructions]);
+
+    const handleTemplateDownload = async (format: 'csv' | 'excel') => {
+        const modelId = listViewMetaData?.data?.solidView?.model?.id;
+        if (!modelId) return;
+        try {
+            const session: any = await getSession();
+            const token = session?.user?.accessToken || "";
+            if (!token) {
+                throw new Error(ERROR_MESSAGES.NO_AUTH_TOKEN_FOUND);
+            }
+            const response = await fetch(
+                `${process.env.API_URL}/api/import-transaction/import-template/${modelId}/${format}`,
+                {
+                    method: 'GET',
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    }
+                }
+            );
+
+            if (!response.ok) {
+                throw new Error(ERROR_MESSAGES.FILE_DOWNLOAD_FAILED);
+            }
+
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `import-template.${format === 'csv' ? 'csv' : 'xlsx'}`;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);
+        }
+    };
+
+    return (
+        <div>
+            <div className={styles.SolidImportContextWrapper}>
+                <div className='p-3 h-full'>
+                    <div className='grid'>
+                        <div className={`${importInstructionsData?.data?.custom.length > 0 ? 'col-7' : 'col-12'}`} style={{ borderRight: importInstructionsData?.data?.custom.length > 0 ? '1px solid var(--primary-light-color)' : '', overflowY: 'auto', height: '48vh' }}>
+                            <h5 className='solid-primary-black-text'>Standard Instructions</h5>
+                            <ol className='p-0' style={{ listStyleType: 'none' }}>
+                                <li>
+                                    <p className='font-medium solid-primary-black-text'>1. CSV or Excel (based on radio button selected) template:</p>
+                                    <div className='flex align-items-centerm gap-3'>
+                                        <Button label='CSV Download' icon="pi pi-download" iconPos='right' size='small' onClick={() => handleTemplateDownload('csv')} />
+                                        <Button label='Excel Download' icon="pi pi-download" iconPos='right' size='small' onClick={() => handleTemplateDownload('excel')} />
+                                    </div>
+                                </li>
+                                {(() => {
+                                    let count = 2; // Start numbering from 2
+                                    return (importInstructionsData?.data?.standard &&
+                                        (Object.entries(importInstructionsData.data.standard) as [string, string[]][])
+                                            .map(([key, values]) => {
+                                                if (!values?.length) return null;
+
+                                                const titleCaseKey = key
+                                                    .replace(/([A-Z])/g, ' $1')
+                                                    .replace(/^./, str => str.toUpperCase());
+
+                                                const rendered = (
+                                                    <li key={key} className='mt-3'>
+                                                        <p className='font-medium solid-primary-black-text mb-1'>
+                                                            {count}. {titleCaseKey}:
+                                                        </p>
+                                                        <div className='flex flex-wrap'>
+                                                            {values.map((item:any, i) => (
+                                                                <span key={i} className='mr-2'>
+                                                                    {typeof item === 'string'
+                                                                        ? item
+                                                                        : item?.fieldName
+                                                                            ? `${item.fieldName} (Regex: ${item.regexPattern})`
+                                                                            : JSON.stringify(item)}
+                                                                    {i < values.length - 1 ? ', ' : ''}
+                                                                </span>
+                                                            ))}
+                                                        </div>
+                                                    </li>
+                                                );
+
+                                                count++;
+                                                return rendered;
+                                            }));
+                                })()}
+                            </ol>
+                        </div>
+                        {importInstructionsData?.data?.custom.length > 0 &&
+                            <div className='col-5' style={{ overflowY: 'auto', height: '48vh' }}>
+                                <h5 className='solid-primary-black-text'>Custom Instructions</h5>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            <div className='mt-3 flex align-items-center gap-3'>
+                <Button label='Continue' size='small' onClick={() => setImportStep(2)} />
+                {/* <Button label='Cancel' size='small' outlined /> */}
+            </div>
+        </div>
+    )
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportStepper.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportStepper.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,kCAAmC,GAAG,4CAmNpE,CAAA"}
+{"version":3,"file":"SolidImportStepper.d.ts","sourceRoot":"./","sources":["components/core/common/SolidGenericImport/SolidImportStepper.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,kCAAmC,GAAG,4CAmNpE,CAAA"}

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

@@ -1,30 +1,20 @@
-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';
-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 = [
+export const SolidImportStepper = ({ importStep, setImportStep }) => {
+    const containerRef = useRef(null);
+    const leftOverlayRef = useRef(null);
+    const rightOverlayRef = useRef(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" }
     ];
-    var getStepColor = function (step) {
+    const getStepColor = (step) => {
         if (importStep === step)
             return "var(--primary-color)"; // current step
         if (importStep > step)
@@ -32,21 +22,21 @@ export var SolidImportStepper = function (_a) {
         return "#F9F9F9"; // future step
     };
     // Dynamic responsive logic - same as SolidFormStepper
-    useEffect(function () {
-        var calculateVisibleSteps = function () {
+    useEffect(() => {
+        const calculateVisibleSteps = () => {
             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
+            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
-            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);
+            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++;
@@ -59,21 +49,21 @@ export var SolidImportStepper = function (_a) {
             setVisibleStepsCount(count);
         };
         calculateVisibleSteps();
-        var resizeObserver = new ResizeObserver(calculateVisibleSteps);
+        const resizeObserver = new ResizeObserver(calculateVisibleSteps);
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
         }
-        var timeoutId = setTimeout(calculateVisibleSteps, 100);
-        return function () {
+        const timeoutId = setTimeout(calculateVisibleSteps, 100);
+        return () => {
             resizeObserver.disconnect();
             clearTimeout(timeoutId);
         };
     }, []);
-    var activeIndex = importStep - 1;
-    var isSingleVisibleStep = visibleStepsCount === 1;
-    var visibleSteps = [];
-    var previousSteps = [];
-    var nextSteps = [];
+    const activeIndex = importStep - 1;
+    const isSingleVisibleStep = visibleStepsCount === 1;
+    let visibleSteps = [];
+    let previousSteps = [];
+    let nextSteps = [];
     if (isSingleVisibleStep) {
         // Show only current step
         visibleSteps = [allSteps[activeIndex]];
@@ -87,42 +77,40 @@ export var SolidImportStepper = function (_a) {
     }
     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);
+        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);
     }
-    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;
+    const hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;
+    const hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
+    const renderStepSVG = (step, index) => {
+        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 (_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 })] }));
+            return (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft }, onClick: () => 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: `${styles.StepperText} ${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 })] }));
+            return (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }, onClick: () => 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: `${styles.StepperText} ${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 (_jsxs("div", { className: "flex relative", style: { flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }, onClick: () => 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: `${styles.StepperText} ${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;
+    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: (e) => leftOverlayRef.current?.toggle(e) }), _jsx(OverlayPanel, { ref: leftOverlayRef, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }, children: previousSteps.map((step) => (_jsx(Button, { label: step.label, text: true, className: importStep === step.id ? 'p-button-primary' : '', onClick: () => {
                                         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;
+                                        leftOverlayRef.current?.hide();
+                                    } }, step.id))) }) })] })), visibleSteps.map((step, index) => 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: (e) => rightOverlayRef.current?.toggle(e) }), _jsx(OverlayPanel, { ref: rightOverlayRef, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }, children: (isSingleVisibleStep ? [...previousSteps, ...nextSteps] : nextSteps).map((step) => (_jsx(Button, { label: step.label, text: true, className: importStep === step.id ? 'p-button-primary' : '', onClick: () => {
                                         setImportStep(step.id);
-                                        (_a = rightOverlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-                                    } }, step.id)); }) }) })] }))] }) }));
+                                        rightOverlayRef.current?.hide();
+                                    } }, 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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"}
+{"version":3,"file":"SolidImportStepper.js","sourceRoot":"./","sources":["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}"]}

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

@@ -0,0 +1,217 @@
+import { Button } from "primereact/button"
+import { OverlayPanel } from "primereact/overlaypanel"
+import { useEffect, useRef, useState } from "react"
+import styles from './SolidImport.module.css'
+
+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>
+            );
+        }
+    };
+
+    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>
+    )
+}

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":"AAQA,eAAO,MAAM,sBAAsB,4DAA6D,GAAG,4CAoMlG,CAAA"}
+{"version":3,"file":"SolidImportTransaction.d.ts","sourceRoot":"./","sources":["components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,4DAA6D,GAAG,4CAoMlG,CAAA"}