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

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportDropzone.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useCallback, useState } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { Button } from 'primereact/button'\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../../../redux/features/toastSlice';\nimport styles from './SolidImport.module.css'\nimport { DocumentSvg } from './DocumentSvg';\nimport { useCreateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nexport const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMetadataId }: any) => {\n    const dispatch = useDispatch();\n\n    const [file, setFile] = useState<File | null>(null);\n    const [createImportTransaction, { isLoading }] = useCreateImportTransactionMutation();\n\n\n    const uploadFile = async (uploadFile: File) => {\n        const formData = new FormData();\n        formData.append('fileLocation', uploadFile);\n        formData.append('modelMetadataId', modelMetadataId);\n\n        try {\n            const response = await createImportTransaction(formData).unwrap();\n            console.log('Upload success:', response);\n            if (response?.statusCode === 200) {\n                setFile(uploadFile);\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.FILE_UPLOAD, detail: ERROR_MESSAGES.FILE_UPLOAD_SUCCESSFULLY }));\n                setTransactionId?.(response?.data?.id);\n            } else {\n                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }))\n            }\n        } catch (error) {\n            console.error(ERROR_MESSAGES.FAILED_UPLOAD_FILE, error);\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }))\n        }\n    };\n\n    const onDrop = useCallback((acceptedFiles: File[]) => {\n        if (acceptedFiles.length > 0) {\n            const selectedFile = acceptedFiles[0];\n            uploadFile(selectedFile); // 👈 Auto upload on drop\n        }\n    }, []);\n\n    const { getRootProps, getInputProps, open } = useDropzone({\n        onDrop,\n        accept: {\n            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],\n            'text/csv': ['.csv']\n        },\n        multiple: false,\n    });\n\n    const removeFile = () => {\n        setFile(null);\n    };\n\n    const formatBytes = (bytes: number) => {\n        const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n        if (bytes === 0) return '0 Byte';\n        const i = Math.floor(Math.log(bytes) / Math.log(1024));\n        return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;\n    };\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                <div {...getRootProps({ className: styles.dropzone })} className='h-full flex flex-column align-items-center justify-content-center'>\n                    <input {...getInputProps()} />\n                    {/* {!file ? ( */}\n                    <div className={\"\"}>\n                        <div className='flex justify-content-center'>\n                            <DocumentSvg />\n                        </div>\n                        <h5 className='text-center solid-primary-black-text'>Drop or upload a file to import</h5>\n                        <p className='text-center m-0'>Excel files are recommended as formatting is automatic.<br />\n                            But, you can also use .csv files</p>\n                        <div className='flex justify-content-center mt-3'>\n                            <Button label=\"Click to browse\" size=\"small\" severity='secondary' outlined />\n                        </div>\n                    </div>\n                    {/* ) : ( */}\n                    {file &&\n                        <div className=\"flex align-items-start justify-content-between gap-3 p-3 mt-4 w-full md:w-8\" style={{ border: '1px solid var(--primary-light-color)', borderRadius: 6 }} onClick={(e) => e.stopPropagation()}>\n                            <div>\n                                <p className='m-0'><strong>File:</strong> {file.name}</p>\n                                <p className='m-0'><strong>Type:</strong> {file.type || 'Unknown'}</p>\n                                <p className='m-0'><strong>Size:</strong> {formatBytes(file.size)}</p>\n                            </div>\n                            <div>\n                                <Button size=\"small\" icon=\"pi pi-trash\" text onClick={removeFile} />\n                            </div>\n                        </div>\n                    }\n                    {/* )} */}\n                </div>\n            </div>\n            <div className='mt-3 flex align-items-center gap-3'>\n                <Button\n                    label='Continue'\n                    size='small'\n                    onClick={() => {\n                        if (!file) {\n                            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.MISSING_FILE, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }));\n                            return;\n                        }\n                        setImportStep(3);\n                    }}\n                    disabled={!file}\n                />\n            </div>\n        </div>\n    )\n}"]}
+{"version":3,"file":"SolidImportDropzone.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useCallback, useState } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { FileSpreadsheet, FileText, Trash2, Upload } from 'lucide-react';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../../../redux/features/toastSlice';\nimport styles from './SolidImport.module.css'\nimport { DocumentSvg } from './DocumentSvg';\nimport { useCreateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { SolidButton } from '../../../shad-cn-ui';\nexport const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMetadataId }: any) => {\n    const dispatch = useDispatch();\n\n    const [file, setFile] = useState<File | null>(null);\n    const [createImportTransaction, { isLoading }] = useCreateImportTransactionMutation();\n\n\n    const uploadFile = async (uploadFile: File) => {\n        const formData = new FormData();\n        formData.append('fileLocation', uploadFile);\n        formData.append('modelMetadataId', modelMetadataId);\n\n        try {\n            const response = await createImportTransaction(formData).unwrap();\n            console.log('Upload success:', response);\n            if (response?.statusCode === 200) {\n                setFile(uploadFile);\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.FILE_UPLOAD, detail: ERROR_MESSAGES.FILE_UPLOAD_SUCCESSFULLY }));\n                setTransactionId?.(response?.data?.id);\n            } else {\n                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }))\n            }\n        } catch (error) {\n            console.error(ERROR_MESSAGES.FAILED_UPLOAD_FILE, error);\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }))\n        }\n    };\n\n    const onDrop = useCallback((acceptedFiles: File[]) => {\n        if (acceptedFiles.length > 0) {\n            const selectedFile = acceptedFiles[0];\n            uploadFile(selectedFile); // 👈 Auto upload on drop\n        }\n    }, []);\n\n    const { getRootProps, getInputProps, open } = useDropzone({\n        onDrop,\n        accept: {\n            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],\n            'text/csv': ['.csv']\n        },\n        multiple: false,\n    });\n\n    const rootProps = getRootProps({ className: 'solid-import-dropzone-shell' });\n\n    const removeFile = () => {\n        setFile(null);\n    };\n\n    const formatBytes = (bytes: number) => {\n        const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n        if (bytes === 0) return '0 Byte';\n        const i = Math.floor(Math.log(bytes) / Math.log(1024));\n        return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;\n    };\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                <div {...rootProps}>\n                    <input {...getInputProps()} />\n                    <div className=\"solid-import-dropzone-copy\">\n                        <div className='flex justify-content-center'>\n                            <DocumentSvg />\n                        </div>\n                        <div className=\"solid-import-dropzone-kicker\">Accepted formats</div>\n                        <h5 className='text-center solid-primary-black-text solid-import-section-title solid-import-dropzone-title'>Drop or upload a file to import</h5>\n                        <p className='text-center m-0 solid-import-section-copy'>Excel files are recommended as formatting is automatic. You can also import plain <code>.csv</code> files.</p>\n                        <div className=\"solid-import-dropzone-format-list\" aria-hidden=\"true\">\n                            <span className=\"solid-import-dropzone-format-pill\">\n                                <FileSpreadsheet size={13} />\n                                Excel\n                            </span>\n                            <span className=\"solid-import-dropzone-format-pill\">\n                                <FileText size={13} />\n                                CSV\n                            </span>\n                        </div>\n                        <div className='flex justify-content-center mt-3'>\n                            <SolidButton type=\"button\" variant=\"outline\" size=\"small\" leftIcon={<Upload size={14} />} onClick={(event) => {\n                                event.stopPropagation();\n                                open();\n                            }}>\n                                Browse Files\n                            </SolidButton>\n                        </div>\n                    </div>\n                    {file &&\n                        <div className=\"solid-import-file-card\" onClick={(e) => e.stopPropagation()}>\n                            <div className=\"solid-import-file-card-main\">\n                                <div className=\"solid-import-file-icon\">\n                                    <FileSpreadsheet size={18} />\n                                </div>\n                                <div className=\"solid-import-file-meta\">\n                                    <p className='m-0 solid-import-file-name'>{file.name}</p>\n                                    <p className='m-0 solid-import-file-caption'>{file.type || 'Unknown type'}</p>\n                                    <p className='m-0 solid-import-file-caption'>{formatBytes(file.size)}</p>\n                                </div>\n                            </div>\n                            <SolidButton type=\"button\" variant=\"ghost\" size=\"small\" className=\"solid-import-file-remove\" leftIcon={<Trash2 size={14} />} onClick={removeFile} />\n                        </div>\n                    }\n                </div>\n            </div>\n            <div className='solid-import-actions'>\n                <p className=\"solid-import-actions-copy\">Upload one source file and continue to field mapping.</p>\n                <SolidButton\n                    type=\"button\"\n                    size='small'\n                    onClick={() => {\n                        if (!file) {\n                            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.MISSING_FILE, detail: ERROR_MESSAGES.FAILED_UPLOAD_FILE }));\n                            return;\n                        }\n                        setImportStep(3);\n                    }}\n                    disabled={!file || isLoading}\n                    loading={isLoading}\n                >\n                    Continue\n                </SolidButton>\n            </div>\n        </div>\n    )\n}\n"]}

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

@@ -1,13 +1,14 @@
 
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { Button } from 'primereact/button'
+import { FileSpreadsheet, FileText, Trash2, Upload } from 'lucide-react';
 import { useDispatch } from 'react-redux';
 import { showToast } from '../../../../redux/features/toastSlice';
 import styles from './SolidImport.module.css'
 import { DocumentSvg } from './DocumentSvg';
 import { useCreateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import { SolidButton } from '../../../shad-cn-ui';
 export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMetadataId }: any) => {
     const dispatch = useDispatch();
 
@@ -52,6 +53,8 @@ export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMeta
         multiple: false,
     });
 
+    const rootProps = getRootProps({ className: 'solid-import-dropzone-shell' });
+
     const removeFile = () => {
         setFile(null);
     };
@@ -66,39 +69,55 @@ export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMeta
     return (
         <div>
             <div className={styles.SolidImportContextWrapper}>
-                <div {...getRootProps({ className: styles.dropzone })} className='h-full flex flex-column align-items-center justify-content-center'>
+                <div {...rootProps}>
                     <input {...getInputProps()} />
-                    {/* {!file ? ( */}
-                    <div className={""}>
+                    <div className="solid-import-dropzone-copy">
                         <div className='flex justify-content-center'>
                             <DocumentSvg />
                         </div>
-                        <h5 className='text-center solid-primary-black-text'>Drop or upload a file to import</h5>
-                        <p className='text-center m-0'>Excel files are recommended as formatting is automatic.<br />
-                            But, you can also use .csv files</p>
+                        <div className="solid-import-dropzone-kicker">Accepted formats</div>
+                        <h5 className='text-center solid-primary-black-text solid-import-section-title solid-import-dropzone-title'>Drop or upload a file to import</h5>
+                        <p className='text-center m-0 solid-import-section-copy'>Excel files are recommended as formatting is automatic. You can also import plain <code>.csv</code> files.</p>
+                        <div className="solid-import-dropzone-format-list" aria-hidden="true">
+                            <span className="solid-import-dropzone-format-pill">
+                                <FileSpreadsheet size={13} />
+                                Excel
+                            </span>
+                            <span className="solid-import-dropzone-format-pill">
+                                <FileText size={13} />
+                                CSV
+                            </span>
+                        </div>
                         <div className='flex justify-content-center mt-3'>
-                            <Button label="Click to browse" size="small" severity='secondary' outlined />
+                            <SolidButton type="button" variant="outline" size="small" leftIcon={<Upload size={14} />} onClick={(event) => {
+                                event.stopPropagation();
+                                open();
+                            }}>
+                                Browse Files
+                            </SolidButton>
                         </div>
                     </div>
-                    {/* ) : ( */}
                     {file &&
-                        <div className="flex align-items-start justify-content-between gap-3 p-3 mt-4 w-full md:w-8" style={{ border: '1px solid var(--primary-light-color)', borderRadius: 6 }} onClick={(e) => e.stopPropagation()}>
-                            <div>
-                                <p className='m-0'><strong>File:</strong> {file.name}</p>
-                                <p className='m-0'><strong>Type:</strong> {file.type || 'Unknown'}</p>
-                                <p className='m-0'><strong>Size:</strong> {formatBytes(file.size)}</p>
-                            </div>
-                            <div>
-                                <Button size="small" icon="pi pi-trash" text onClick={removeFile} />
+                        <div className="solid-import-file-card" onClick={(e) => e.stopPropagation()}>
+                            <div className="solid-import-file-card-main">
+                                <div className="solid-import-file-icon">
+                                    <FileSpreadsheet size={18} />
+                                </div>
+                                <div className="solid-import-file-meta">
+                                    <p className='m-0 solid-import-file-name'>{file.name}</p>
+                                    <p className='m-0 solid-import-file-caption'>{file.type || 'Unknown type'}</p>
+                                    <p className='m-0 solid-import-file-caption'>{formatBytes(file.size)}</p>
+                                </div>
                             </div>
+                            <SolidButton type="button" variant="ghost" size="small" className="solid-import-file-remove" leftIcon={<Trash2 size={14} />} onClick={removeFile} />
                         </div>
                     }
-                    {/* )} */}
                 </div>
             </div>
-            <div className='mt-3 flex align-items-center gap-3'>
-                <Button
-                    label='Continue'
+            <div className='solid-import-actions'>
+                <p className="solid-import-actions-copy">Upload one source file and continue to field mapping.</p>
+                <SolidButton
+                    type="button"
                     size='small'
                     onClick={() => {
                         if (!file) {
@@ -107,9 +126,12 @@ export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMeta
                         }
                         setImportStep(3);
                     }}
-                    disabled={!file}
-                />
+                    disabled={!file || isLoading}
+                    loading={isLoading}
+                >
+                    Continue
+                </SolidButton>
             </div>
         </div>
     )
-}
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportInstructions.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,wCAAyC,GAAG,4CAkH/E,CAAA"}
+{"version":3,"file":"SolidImportInstructions.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,uBAAuB,wCAAyC,GAAG,4CAyI/E,CAAA"}

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

@@ -35,17 +35,18 @@ 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 { Download, FileSpreadsheet, MoveRight } from 'lucide-react';
 import styles from './SolidImport.module.css';
 import { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';
 import { useEffect } from 'react';
 import { getSession } from "../../../../adapters/auth/index";
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { env } from "../../../../adapters/env";
+import { SolidButton, SolidSpinner } from '../../../shad-cn-ui';
 export var SolidImportInstructions = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     var setImportStep = _a.setImportStep, listViewMetaData = _a.listViewMetaData;
-    var _e = useLazyGetImportInstructionsQuery(), getImportInstructions = _e[0], _f = _e[1], importInstructionsData = _f.data, isLoading = _f.isLoading, isError = _f.isError;
+    var _f = useLazyGetImportInstructionsQuery(), getImportInstructions = _f[0], _g = _f[1], importInstructionsData = _g.data, isLoading = _g.isLoading, isError = _g.isError;
     useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (listViewMetaData && ((_c = (_b = (_a = listViewMetaData === null || listViewMetaData === void 0 ? void 0 : listViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.id)) {
@@ -102,27 +103,25 @@ export var SolidImportInstructions = function (_a) {
             }
         });
     }); };
-    return (_jsxs("div", { children: [_jsx("div", { className: styles.SolidImportContextWrapper, children: _jsx("div", { className: 'p-3 h-full', children: _jsxs("div", { className: 'grid', children: [_jsxs("div", { className: "".concat(((_b = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _b === void 0 ? void 0 : _b.custom.length) > 0 ? 'col-7' : 'col-12'), style: { borderRight: ((_c = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _c === void 0 ? void 0 : _c.custom.length) > 0 ? '1px solid var(--primary-light-color)' : '', overflowY: 'auto', height: '48vh' }, children: [_jsx("h5", { className: 'solid-primary-black-text', children: "Standard Instructions" }), _jsxs("ol", { className: 'p-0', style: { listStyleType: 'none' }, children: [_jsxs("li", { children: [_jsx("p", { className: 'font-medium solid-primary-black-text', children: "1. CSV or Excel (based on radio button selected) template:" }), _jsxs("div", { className: 'flex align-items-centerm gap-3', children: [_jsx(Button, { label: 'CSV Download', icon: "pi pi-download", iconPos: 'right', size: 'small', onClick: function () { return handleTemplateDownload('csv'); } }), _jsx(Button, { label: 'Excel Download', icon: "pi pi-download", iconPos: 'right', size: 'small', onClick: function () { return handleTemplateDownload('excel'); } })] })] }), (function () {
-                                                var _a;
-                                                var count = 2; // Start numbering from 2
-                                                return (((_a = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _a === void 0 ? void 0 : _a.standard) &&
-                                                    Object.entries(importInstructionsData.data.standard)
-                                                        .map(function (_a) {
-                                                        var key = _a[0], values = _a[1];
-                                                        if (!(values === null || values === void 0 ? void 0 : values.length))
-                                                            return null;
-                                                        var titleCaseKey = key
-                                                            .replace(/([A-Z])/g, ' $1')
-                                                            .replace(/^./, function (str) { return str.toUpperCase(); });
-                                                        var rendered = (_jsxs("li", { className: 'mt-3', children: [_jsxs("p", { className: 'font-medium solid-primary-black-text mb-1', children: [count, ". ", titleCaseKey, ":"] }), _jsx("div", { className: 'flex flex-wrap', children: values.map(function (item, i) { return (_jsxs("span", { className: 'mr-2', children: [typeof item === 'string'
-                                                                                ? item
-                                                                                : (item === null || item === void 0 ? void 0 : item.fieldName)
-                                                                                    ? "".concat(item.fieldName, " (Regex: ").concat(item.regexPattern, ")")
-                                                                                    : JSON.stringify(item), i < values.length - 1 ? ', ' : ''] }, i)); }) })] }, key));
-                                                        count++;
-                                                        return rendered;
-                                                    }));
-                                            })()] })] }), ((_d = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _d === void 0 ? void 0 : _d.custom.length) > 0 &&
-                                _jsx("div", { className: 'col-5', style: { overflowY: 'auto', height: '48vh' }, children: _jsx("h5", { className: 'solid-primary-black-text', children: "Custom Instructions" }) })] }) }) }), _jsx("div", { className: 'mt-3 flex align-items-center gap-3', children: _jsx(Button, { label: 'Continue', size: 'small', onClick: function () { return setImportStep(2); } }) })] }));
+    var customInstructions = (_c = (_b = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _b === void 0 ? void 0 : _b.custom) !== null && _c !== void 0 ? _c : [];
+    var standardInstructions = (_e = (_d = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _d === void 0 ? void 0 : _d.standard) !== null && _e !== void 0 ? _e : {};
+    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 import instructions" }) })) : isError ? (_jsxs("div", { className: 'solid-import-empty-state', children: [_jsx("h4", { className: 'text-center px-2', children: "Could not load import instructions" }), _jsx("p", { children: "Try again or continue if you already know the expected format." })] })) : (_jsxs("div", { className: "solid-import-panel-grid ".concat(customInstructions.length === 0 ? 'is-single-column' : ''), children: [_jsxs("div", { className: "solid-import-panel solid-import-panel-main ".concat(customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'), children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Standard Instructions" }), _jsxs("ol", { className: 'solid-import-instruction-list', children: [_jsxs("li", { children: [_jsx("p", { className: 'font-medium solid-primary-black-text solid-import-instruction-title', children: "Download a starter template" }), _jsxs("div", { className: 'flex gap-3 flex-wrap', children: [_jsx(SolidButton, { type: "button", variant: "outline", size: "small", leftIcon: _jsx(Download, { size: 14 }), onClick: function () { return handleTemplateDownload('csv'); }, children: "CSV Template" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "small", leftIcon: _jsx(FileSpreadsheet, { size: 14 }), onClick: function () { return handleTemplateDownload('excel'); }, children: "Excel Template" })] })] }), (function () {
+                                            return (Object.entries(standardInstructions)
+                                                .map(function (_a) {
+                                                var key = _a[0], values = _a[1];
+                                                if (!(values === null || values === void 0 ? void 0 : values.length))
+                                                    return null;
+                                                var titleCaseKey = key
+                                                    .replace(/([A-Z])/g, ' $1')
+                                                    .replace(/^./, function (str) { return str.toUpperCase(); });
+                                                var rendered = (_jsxs("li", { className: 'solid-import-instruction-item', children: [_jsx("p", { className: 'font-medium solid-primary-black-text mb-1 solid-import-instruction-title', children: titleCaseKey }), _jsx("div", { className: 'flex flex-wrap solid-import-instruction-copy', children: values.map(function (item, i) { return (_jsxs("span", { className: 'mr-2', children: [typeof item === 'string'
+                                                                        ? item
+                                                                        : (item === null || item === void 0 ? void 0 : item.fieldName)
+                                                                            ? "".concat(item.fieldName, " (Regex: ").concat(item.regexPattern, ")")
+                                                                            : JSON.stringify(item), i < values.length - 1 ? ', ' : ''] }, i)); }) })] }, key));
+                                                return rendered;
+                                            }));
+                                        })()] })] }), customInstructions.length > 0 &&
+                            _jsxs("div", { className: 'solid-import-panel solid-import-panel-side', children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Custom Instructions" }), _jsx("div", { className: 'solid-import-instruction-copy', children: customInstructions.map(function (instruction, index) { return (_jsx("p", { className: 'solid-import-custom-instruction', children: typeof instruction === "string" ? instruction : JSON.stringify(instruction) }, index)); }) })] })] })) }), _jsxs("div", { className: 'solid-import-actions', children: [_jsx("p", { className: "solid-import-actions-copy", children: "Review the template guidance before uploading your file." }), _jsx(SolidButton, { type: "button", size: 'small', onClick: function () { return setImportStep(2); }, rightIcon: _jsx(MoveRight, { size: 14 }), children: "Continue" })] })] }));
 };
 //# sourceMappingURL=SolidImportInstructions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportInstructions.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button } from 'primereact/button'\nimport styles from './SolidImport.module.css'\nimport { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';\nimport { useEffect } from 'react';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { env } from \"../../../../adapters/env\";\n\nexport const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {\n    const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =\n        useLazyGetImportInstructionsQuery();\n\n    useEffect(() => {\n        if (listViewMetaData && listViewMetaData?.data?.solidView?.model?.id) {\n            getImportInstructions({ id: listViewMetaData?.data?.solidView?.model?.id });\n        }\n    }, [listViewMetaData, getImportInstructions]);\n\n    const handleTemplateDownload = async (format: 'csv' | 'excel') => {\n        const modelId = listViewMetaData?.data?.solidView?.model?.id;\n        if (!modelId) return;\n        try {\n            const session: any = await getSession();\n            const token = session?.user?.accessToken || \"\";\n            if (!token) {\n                throw new Error(ERROR_MESSAGES.NO_AUTH_TOKEN_FOUND);\n            }\n            const response = await fetch(\n                `${env(\"API_URL\")}/api/import-transaction/import-template/${modelId}/${format}`,\n                {\n                    method: 'GET',\n                    headers: {\n                        Authorization: `Bearer ${token}`,\n                    }\n                }\n            );\n\n            if (!response.ok) {\n                throw new Error(ERROR_MESSAGES.FILE_DOWNLOAD_FAILED);\n            }\n\n            const blob = await response.blob();\n            const url = window.URL.createObjectURL(blob);\n\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `import-template.${format === 'csv' ? 'csv' : 'xlsx'}`;\n            document.body.appendChild(link);\n            link.click();\n            link.remove();\n            window.URL.revokeObjectURL(url);\n        } catch (error) {\n            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n        }\n    };\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                <div className='p-3 h-full'>\n                    <div className='grid'>\n                        <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' }}>\n                            <h5 className='solid-primary-black-text'>Standard Instructions</h5>\n                            <ol className='p-0' style={{ listStyleType: 'none' }}>\n                                <li>\n                                    <p className='font-medium solid-primary-black-text'>1. CSV or Excel (based on radio button selected) template:</p>\n                                    <div className='flex align-items-centerm gap-3'>\n                                        <Button label='CSV Download' icon=\"pi pi-download\" iconPos='right' size='small' onClick={() => handleTemplateDownload('csv')} />\n                                        <Button label='Excel Download' icon=\"pi pi-download\" iconPos='right' size='small' onClick={() => handleTemplateDownload('excel')} />\n                                    </div>\n                                </li>\n                                {(() => {\n                                    let count = 2; // Start numbering from 2\n                                    return (importInstructionsData?.data?.standard &&\n                                        (Object.entries(importInstructionsData.data.standard) as [string, string[]][])\n                                            .map(([key, values]) => {\n                                                if (!values?.length) return null;\n\n                                                const titleCaseKey = key\n                                                    .replace(/([A-Z])/g, ' $1')\n                                                    .replace(/^./, str => str.toUpperCase());\n\n                                                const rendered = (\n                                                    <li key={key} className='mt-3'>\n                                                        <p className='font-medium solid-primary-black-text mb-1'>\n                                                            {count}. {titleCaseKey}:\n                                                        </p>\n                                                        <div className='flex flex-wrap'>\n                                                            {values.map((item: any, i) => (\n                                                                <span key={i} className='mr-2'>\n                                                                    {typeof item === 'string'\n                                                                        ? item\n                                                                        : item?.fieldName\n                                                                            ? `${item.fieldName} (Regex: ${item.regexPattern})`\n                                                                            : JSON.stringify(item)}\n                                                                    {i < values.length - 1 ? ', ' : ''}\n                                                                </span>\n                                                            ))}\n                                                        </div>\n                                                    </li>\n                                                );\n\n                                                count++;\n                                                return rendered;\n                                            }));\n                                })()}\n                            </ol>\n                        </div>\n                        {importInstructionsData?.data?.custom.length > 0 &&\n                            <div className='col-5' style={{ overflowY: 'auto', height: '48vh' }}>\n                                <h5 className='solid-primary-black-text'>Custom Instructions</h5>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n            <div className='mt-3 flex align-items-center gap-3'>\n                <Button label='Continue' size='small' onClick={() => setImportStep(2)} />\n                {/* <Button label='Cancel' size='small' outlined /> */}\n            </div>\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"SolidImportInstructions.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Download, FileSpreadsheet, MoveRight } from 'lucide-react';\nimport styles from './SolidImport.module.css'\nimport { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';\nimport { useEffect } from 'react';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { env } from \"../../../../adapters/env\";\nimport { SolidButton, SolidSpinner } from '../../../shad-cn-ui';\n\nexport const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {\n    const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =\n        useLazyGetImportInstructionsQuery();\n\n    useEffect(() => {\n        if (listViewMetaData && listViewMetaData?.data?.solidView?.model?.id) {\n            getImportInstructions({ id: listViewMetaData?.data?.solidView?.model?.id });\n        }\n    }, [listViewMetaData, getImportInstructions]);\n\n    const handleTemplateDownload = async (format: 'csv' | 'excel') => {\n        const modelId = listViewMetaData?.data?.solidView?.model?.id;\n        if (!modelId) return;\n        try {\n            const session: any = await getSession();\n            const token = session?.user?.accessToken || \"\";\n            if (!token) {\n                throw new Error(ERROR_MESSAGES.NO_AUTH_TOKEN_FOUND);\n            }\n            const response = await fetch(\n                `${env(\"API_URL\")}/api/import-transaction/import-template/${modelId}/${format}`,\n                {\n                    method: 'GET',\n                    headers: {\n                        Authorization: `Bearer ${token}`,\n                    }\n                }\n            );\n\n            if (!response.ok) {\n                throw new Error(ERROR_MESSAGES.FILE_DOWNLOAD_FAILED);\n            }\n\n            const blob = await response.blob();\n            const url = window.URL.createObjectURL(blob);\n\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `import-template.${format === 'csv' ? 'csv' : 'xlsx'}`;\n            document.body.appendChild(link);\n            link.click();\n            link.remove();\n            window.URL.revokeObjectURL(url);\n        } catch (error) {\n            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n        }\n    };\n\n    const customInstructions = importInstructionsData?.data?.custom ?? [];\n    const standardInstructions = importInstructionsData?.data?.standard ?? {};\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                {isLoading ? (\n                    <div className=\"solid-import-loading-state\">\n                        <SolidSpinner size={22} label=\"Loading import instructions\" />\n                    </div>\n                ) : isError ? (\n                    <div className='solid-import-empty-state'>\n                        <h4 className='text-center px-2'>Could not load import instructions</h4>\n                        <p>Try again or continue if you already know the expected format.</p>\n                    </div>\n                ) : (\n                    <div className={`solid-import-panel-grid ${customInstructions.length === 0 ? 'is-single-column' : ''}`}>\n                        <div className={`solid-import-panel solid-import-panel-main ${customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'}`}>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Standard Instructions</h5>\n                                <ol className='solid-import-instruction-list'>\n                                    <li>\n                                        <p className='font-medium solid-primary-black-text solid-import-instruction-title'>Download a starter template</p>\n                                        <div className='flex gap-3 flex-wrap'>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"small\" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>\n                                                CSV Template\n                                            </SolidButton>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"small\" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>\n                                                Excel Template\n                                            </SolidButton>\n                                        </div>\n                                    </li>\n                                    {(() => {\n                                        return (\n                                            Object.entries(standardInstructions as Record<string, string[]>)\n                                                .map(([key, values]) => {\n                                                    if (!values?.length) return null;\n\n                                                    const titleCaseKey = key\n                                                        .replace(/([A-Z])/g, ' $1')\n                                                        .replace(/^./, str => str.toUpperCase());\n\n                                                    const rendered = (\n                                                        <li key={key} className='solid-import-instruction-item'>\n                                                            <p className='font-medium solid-primary-black-text mb-1 solid-import-instruction-title'>\n                                                                {titleCaseKey}\n                                                            </p>\n                                                            <div className='flex flex-wrap solid-import-instruction-copy'>\n                                                                {values.map((item: any, i) => (\n                                                                    <span key={i} className='mr-2'>\n                                                                        {typeof item === 'string'\n                                                                            ? item\n                                                                            : item?.fieldName\n                                                                                ? `${item.fieldName} (Regex: ${item.regexPattern})`\n                                                                                : JSON.stringify(item)}\n                                                                        {i < values.length - 1 ? ', ' : ''}\n                                                                    </span>\n                                                                ))}\n                                                            </div>\n                                                        </li>\n                                                    );\n                                                    return rendered;\n                                                })\n                                        );\n                                    })()}\n                                </ol>\n                        </div>\n                        {customInstructions.length > 0 &&\n                            <div className='solid-import-panel solid-import-panel-side'>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Custom Instructions</h5>\n                                <div className='solid-import-instruction-copy'>\n                                    {customInstructions.map((instruction: any, index: number) => (\n                                        <p key={index} className='solid-import-custom-instruction'>\n                                            {typeof instruction === \"string\" ? instruction : JSON.stringify(instruction)}\n                                        </p>\n                                    ))}\n                                </div>\n                            </div>\n                        }\n                    </div>\n                )}\n            </div>\n            <div className='solid-import-actions'>\n                <p className=\"solid-import-actions-copy\">Review the template guidance before uploading your file.</p>\n                <SolidButton type=\"button\" size='small' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>\n                    Continue\n                </SolidButton>\n            </div>\n        </div>\n    )\n}\n"]}

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

@@ -1,10 +1,11 @@
-import { Button } from 'primereact/button'
+import { Download, FileSpreadsheet, MoveRight } from 'lucide-react';
 import styles from './SolidImport.module.css'
 import { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';
 import { useEffect } from 'react';
 import { getSession } from "../../../../adapters/auth/index";
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { env } from "../../../../adapters/env";
+import { SolidButton, SolidSpinner } from '../../../shad-cn-ui';
 
 export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {
     const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =
@@ -54,69 +55,92 @@ export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any
         }
     };
 
+    const customInstructions = importInstructionsData?.data?.custom ?? [];
+    const standardInstructions = importInstructionsData?.data?.standard ?? {};
+
     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());
+                {isLoading ? (
+                    <div className="solid-import-loading-state">
+                        <SolidSpinner size={22} label="Loading import instructions" />
+                    </div>
+                ) : isError ? (
+                    <div className='solid-import-empty-state'>
+                        <h4 className='text-center px-2'>Could not load import instructions</h4>
+                        <p>Try again or continue if you already know the expected format.</p>
+                    </div>
+                ) : (
+                    <div className={`solid-import-panel-grid ${customInstructions.length === 0 ? 'is-single-column' : ''}`}>
+                        <div className={`solid-import-panel solid-import-panel-main ${customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'}`}>
+                                <h5 className='solid-primary-black-text solid-import-section-title'>Standard Instructions</h5>
+                                <ol className='solid-import-instruction-list'>
+                                    <li>
+                                        <p className='font-medium solid-primary-black-text solid-import-instruction-title'>Download a starter template</p>
+                                        <div className='flex gap-3 flex-wrap'>
+                                            <SolidButton type="button" variant="outline" size="small" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>
+                                                CSV Template
+                                            </SolidButton>
+                                            <SolidButton type="button" variant="outline" size="small" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>
+                                                Excel Template
+                                            </SolidButton>
+                                        </div>
+                                    </li>
+                                    {(() => {
+                                        return (
+                                            Object.entries(standardInstructions as Record<string, string[]>)
+                                                .map(([key, values]) => {
+                                                    if (!values?.length) return null;
 
-                                                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>
-                                                );
+                                                    const titleCaseKey = key
+                                                        .replace(/([A-Z])/g, ' $1')
+                                                        .replace(/^./, str => str.toUpperCase());
 
-                                                count++;
-                                                return rendered;
-                                            }));
-                                })()}
-                            </ol>
+                                                    const rendered = (
+                                                        <li key={key} className='solid-import-instruction-item'>
+                                                            <p className='font-medium solid-primary-black-text mb-1 solid-import-instruction-title'>
+                                                                {titleCaseKey}
+                                                            </p>
+                                                            <div className='flex flex-wrap solid-import-instruction-copy'>
+                                                                {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>
+                                                    );
+                                                    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>
+                        {customInstructions.length > 0 &&
+                            <div className='solid-import-panel solid-import-panel-side'>
+                                <h5 className='solid-primary-black-text solid-import-section-title'>Custom Instructions</h5>
+                                <div className='solid-import-instruction-copy'>
+                                    {customInstructions.map((instruction: any, index: number) => (
+                                        <p key={index} className='solid-import-custom-instruction'>
+                                            {typeof instruction === "string" ? instruction : JSON.stringify(instruction)}
+                                        </p>
+                                    ))}
+                                </div>
                             </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 className='solid-import-actions'>
+                <p className="solid-import-actions-copy">Review the template guidance before uploading your file.</p>
+                <SolidButton type="button" size='small' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>
+                    Continue
+                </SolidButton>
             </div>
         </div>
     )

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

@@ -1,2 +1,2 @@
-export declare const SolidImportStepper: ({ importStep, setImportStep }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SolidImportStepper: ({ importStep, maxStepReached, setImportStep }: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidImportStepper.d.ts.map

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":["../../../../../src/components/core/common/SolidGenericImport/SolidImportStepper.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB,kDAAgE,GAAG,4CA6BjG,CAAA"}