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

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportTransaction.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { Button } from 'primereact/button'\nimport styles from './SolidImport.module.css'\nimport { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';\nimport React, { useEffect, useState } from 'react';\nimport { Dropdown } from 'primereact/dropdown';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../../../redux/features/toastSlice';\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nexport const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {\n    // console.log(\"get transaction id\", transactionId);\n\n    const dispatch = useDispatch();\n    const [trigger, { data: mappingInfo, isLoading, isError }] = useLazyGetImportMappingInfoQuery();\n    const [patchUpdateImportTransaction] = usePatchUpdateImportTransactionMutation();\n    const [createImportSync, { isLoading: isImporting }] = useCreateImportSyncMutation();\n    const [fieldMapping, setFieldMapping] = useState<Record<string, string>>({});\n    const [visibleHeaders, setVisibleHeaders] = useState<string[]>([]);\n\n    useEffect(() => {\n        if (transactionId) {\n            trigger({ id: transactionId });\n        }\n    }, [transactionId]);\n\n    useEffect(() => {\n        const defaultMapping: Record<string, string> = {};\n        const headers: string[] = [];\n        mappingInfo?.data?.sampleImportedRecordInfo?.forEach((sample: any) => {\n            defaultMapping[sample.cellHeader] = sample.defaultMappedFieldName || \"\";\n            headers.push(sample.cellHeader);\n        });\n        setFieldMapping(defaultMapping);\n        setVisibleHeaders(headers);\n    }, [mappingInfo?.data]);\n\n\n    const dropdownOptions = mappingInfo?.data?.importableFields.map((field: any) => ({\n        label: field.displayName,\n        value: field.name,\n    }));\n\n    const handleChange = (cellHeader: string, selectedField: string) => {\n        setFieldMapping((prev) => ({\n            ...prev,\n            [cellHeader]: selectedField,\n        }));\n    };\n\n    const handleRemoveRow = (cellHeader: string) => {\n        setVisibleHeaders((prev) => prev.filter(header => header !== cellHeader));\n        setFieldMapping((prev) => {\n            const updated = { ...prev };\n            delete updated[cellHeader];\n            return updated;\n        });\n    };\n\n    const handleImportTransaction = async () => {\n        try {\n            const mappingArray = Object.entries(fieldMapping).map(([header, fieldName]) => ({\n                header,\n                fieldName,\n            }));\n\n            const patchData = {\n                status: \"mapping_created\",\n                mapping: JSON.stringify(mappingArray),\n            };\n            const patchResult = await patchUpdateImportTransaction({\n                id: transactionId,\n                data: patchData,\n            }).unwrap();\n            if (patchResult?.statusCode === 200) {\n\n                // Sync\n                try {\n                    const importResult = await createImportSync({ id: transactionId }).unwrap();\n\n                    if (importResult?.data?.status === \"import_succeeded\") {\n                        setImportStatusResult(importResult)\n                        setImportStep(4);\n                    }\n                    if (importResult?.data?.status === \"import_failed\") {\n                        setImportStatusResult(importResult);\n                        setImportStep(4);\n                    }\n                } catch (importError: any) {\n                    dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.IMPORT_ERROR, detail: importError?.data?.error }));\n                }\n\n                // Async\n            }\n        } catch (error: any) {\n            const errorMessage = error?.data?.error || ERROR_MESSAGES.SOMETHING_WRONG;\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.ERROR, detail: errorMessage }));\n        }\n    };\n\n    const sampleRecords = mappingInfo?.data?.sampleImportedRecordInfo ?? [];\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                <div className='grid m-0 relative'>\n                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>\n                        File Column\n                        <div className={styles.TransactionsHeaderDivider}></div>\n                    </div>\n                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>\n                        SolidX Field\n                    </div>\n                    {sampleRecords.length > 0 ? (\n                        sampleRecords\n                            ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))\n                            .map((sample: any) => {\n                                const fieldMeta = mappingInfo.data.importableFields.find(\n                                    (f: any) => f.name === fieldMapping[sample.cellHeader]\n                                );\n                                const isRequired = fieldMeta?.required;\n                                // {sampleRecords.length > 0 ? (\n                                //    sampleRecords    \n                                //     ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))\n                                //     ?.sort((a: any, b: any) => {\n                                //         const aRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[a.cellHeader])?.required;\n                                //         const bRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[b.cellHeader])?.required;\n                                //         return (bRequired ? 1 : 0) - (aRequired ? 1 : 0); // true comes before false\n                                //     })\n                                //     .map((sample: any) => {\n                                //         const fieldMeta = mappingInfo.data.importableFields.find(\n                                //             (f: any) => f.name === fieldMapping[sample.cellHeader]\n                                //         );\n                                //         const isRequired = fieldMeta?.required;\n                                return (\n                                    <React.Fragment key={sample.cellHeader}>\n                                        <div\n                                            className=\"col-5 md:col-6 py-2 pl-3 pr-2 md:px-3 flex flex-column justify-content-center\"\n                                            style={{ borderBottom: \"1px solid var(--gray-100)\" }}\n                                        >\n                                             \n                                            <div className=\"font-medium text-primary\">{sample.cellHeader}</div>\n                                            <div className=\"text-sm\" style={{ color: \"var(--solid-grey-500)\" }}>\n                                                {sample.cellValue || \"\"}\n                                            </div>\n                                        </div>\n                                        <div className=\"col-7 md:col-6 py-0\" style={{ borderBottom: \"1px solid var(--gray-100)\" }}>\n                                            <div className={`flex w-full justify-between align-items-center gap-2  py-2 md:px-3  ${fieldMapping[sample.cellHeader] ? \"col-11 sm:col-12\" : \"col-12\"} `}>\n                                                <Dropdown\n                                                    value={fieldMapping[sample.cellHeader]}\n                                                    options={dropdownOptions}\n                                                    onChange={(e) => handleChange(sample.cellHeader, e.value)}\n                                                    className=\"w-full p-inputtext-sm\"\n                                                    placeholder=\"Select field\"\n                                                />\n                                                {!isRequired ? (\n                                                    <span\n                                                        onClick={() => handleRemoveRow(sample.cellHeader)}\n                                                        title=\"Remove this row\"\n                                                        style={{ cursor: 'pointer' }}\n                                                    >\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                                                            <rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#F0F0F0\" />\n                                                            <path d=\"M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z\" fill=\"#4B4D52\" />\n                                                        </svg>\n                                                    </span>\n                                                )\n                                                    :\n                                                    <span style={{ height: 16, width: 16 }}></span>\n                                                }\n                                            </div>\n\n                                        </div>\n                                    </React.Fragment>\n                                );\n                            })\n                    ) : (\n                        <div className='col-12 flex flex-column align-items-center'>\n                            <h4 className='text-center px-2'>No Sample Imported Record Info Found</h4>\n                            <p>Please Add Records</p>\n                        </div>\n                    )}\n                </div>\n            </div>\n            <div className='mt-3 flex align-items-center gap-3'>\n                <Button\n                    label='Import'\n                    size='small'\n                    onClick={handleImportTransaction}\n                    loading={isImporting}\n                    disabled={isImporting || mappingInfo?.data?.sampleImportedRecordInfo?.length === 0}\n                />\n            </div>\n        </div>\n    )\n}"]}
+{"version":3,"file":"SolidImportTransaction.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { CircleX, MoveRight } from 'lucide-react'\nimport styles from './SolidImport.module.css'\nimport { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';\nimport React, { useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../../../redux/features/toastSlice';\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { SolidButton, SolidSelect, SolidSpinner } from '../../../shad-cn-ui';\nexport const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {\n    const dispatch = useDispatch();\n    const [trigger, { data: mappingInfo, isLoading }] = useLazyGetImportMappingInfoQuery();\n    const [patchUpdateImportTransaction] = usePatchUpdateImportTransactionMutation();\n    const [createImportSync, { isLoading: isImporting }] = useCreateImportSyncMutation();\n    const [fieldMapping, setFieldMapping] = useState<Record<string, string>>({});\n    const [visibleHeaders, setVisibleHeaders] = useState<string[]>([]);\n\n    useEffect(() => {\n        if (transactionId) {\n            trigger({ id: transactionId });\n        }\n    }, [transactionId]);\n\n    useEffect(() => {\n        const defaultMapping: Record<string, string> = {};\n        const headers: string[] = [];\n        mappingInfo?.data?.sampleImportedRecordInfo?.forEach((sample: any) => {\n            defaultMapping[sample.cellHeader] = sample.defaultMappedFieldName || \"\";\n            headers.push(sample.cellHeader);\n        });\n        setFieldMapping(defaultMapping);\n        setVisibleHeaders(headers);\n    }, [mappingInfo?.data]);\n\n\n    const dropdownOptions = (mappingInfo?.data?.importableFields ?? []).map((field: any) => ({\n        label: field.displayName,\n        value: field.name,\n    }));\n\n    const handleChange = (cellHeader: string, selectedField: string) => {\n        setFieldMapping((prev) => ({\n            ...prev,\n            [cellHeader]: selectedField,\n        }));\n    };\n\n    const handleRemoveRow = (cellHeader: string) => {\n        setVisibleHeaders((prev) => prev.filter(header => header !== cellHeader));\n        setFieldMapping((prev) => {\n            const updated = { ...prev };\n            delete updated[cellHeader];\n            return updated;\n        });\n    };\n\n    const handleImportTransaction = async () => {\n        try {\n            const mappingArray = Object.entries(fieldMapping).map(([header, fieldName]) => ({\n                header,\n                fieldName,\n            }));\n\n            const patchData = {\n                status: \"mapping_created\",\n                mapping: JSON.stringify(mappingArray),\n            };\n            const patchResult = await patchUpdateImportTransaction({\n                id: transactionId,\n                data: patchData,\n            }).unwrap();\n            if (patchResult?.statusCode === 200) {\n\n                // Sync\n                try {\n                    const importResult = await createImportSync({ id: transactionId }).unwrap();\n\n                    if (importResult?.data?.status === \"import_succeeded\") {\n                        setImportStatusResult(importResult)\n                        setImportStep(4);\n                    }\n                    if (importResult?.data?.status === \"import_failed\") {\n                        setImportStatusResult(importResult);\n                        setImportStep(4);\n                    }\n                } catch (importError: any) {\n                    dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.IMPORT_ERROR, detail: importError?.data?.error }));\n                }\n\n                // Async\n            }\n        } catch (error: any) {\n            const errorMessage = error?.data?.error || ERROR_MESSAGES.SOMETHING_WRONG;\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.ERROR, detail: errorMessage }));\n        }\n    };\n\n    const sampleRecords = mappingInfo?.data?.sampleImportedRecordInfo ?? [];\n    const visibleSampleRecords = sampleRecords?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader));\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 mapping info\" />\n                    </div>\n                ) : visibleSampleRecords.length > 0 ? (\n                    <div className='solid-import-mapping-shell'>\n                        <div className=\"solid-import-mapping-intro\">\n                            <div>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Map file columns</h5>\n                                <p className='solid-import-section-copy m-0'>Match each incoming column to the correct SolidX field before the import runs.</p>\n                            </div>\n                            <div className=\"solid-import-mapping-count\">\n                                {visibleSampleRecords.length} column{visibleSampleRecords.length > 1 ? 's' : ''}\n                            </div>\n                        </div>\n                        <div className='solid-import-mapping-table'>\n                            <div className={`solid-import-mapping-head ${styles.ImportTableHeader}`}>\n                                <div className=\"solid-import-mapping-head-cell\">File Column</div>\n                                <div className=\"solid-import-mapping-head-cell\">SolidX Field</div>\n                            </div>\n                            <div className=\"solid-import-mapping-body\">\n                                {visibleSampleRecords.map((sample: any) => {\n                                    const fieldMeta = mappingInfo.data.importableFields.find(\n                                        (f: any) => f.name === fieldMapping[sample.cellHeader]\n                                    );\n                                    const isRequired = fieldMeta?.required;\n\n                                    return (\n                                        <div key={sample.cellHeader} className=\"solid-import-mapping-row\">\n                                            <div className=\"solid-import-mapping-source\">\n                                                <div className=\"solid-import-mapping-source-title\">{sample.cellHeader}</div>\n                                                <div className=\"solid-import-mapping-source-value\">{sample.cellValue || \"No sample value\"}</div>\n                                            </div>\n                                            <div className=\"solid-import-mapping-target\">\n                                                <div className=\"solid-import-mapping-target-controls\">\n                                                    <SolidSelect\n                                                        value={fieldMapping[sample.cellHeader]}\n                                                        options={dropdownOptions}\n                                                        onChange={(e) => handleChange(sample.cellHeader, e.value)}\n                                                        className=\"w-full\"\n                                                        placeholder=\"Select field\"\n                                                    />\n                                                    {!isRequired ? (\n                                                        <button\n                                                            type=\"button\"\n                                                            className=\"solid-import-mapping-remove\"\n                                                            onClick={() => handleRemoveRow(sample.cellHeader)}\n                                                            title=\"Remove this row\"\n                                                        >\n                                                            <CircleX size={16} />\n                                                        </button>\n                                                    ) : (\n                                                        <span className=\"solid-import-mapping-remove-placeholder\" />\n                                                    )}\n                                                </div>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        </div>\n                    </div>\n                ) : (\n                    <div className='solid-import-empty-state'>\n                        <h4 className='text-center px-2'>No sample import records found</h4>\n                        <p>Upload a file first and then continue to mapping.</p>\n                    </div>\n                )}\n            </div>\n            <div className='solid-import-actions'>\n                <p className=\"solid-import-actions-copy\">Confirm the mapping and start the import.</p>\n                <SolidButton\n                    type=\"button\"\n                    size='small'\n                    onClick={handleImportTransaction}\n                    loading={isImporting}\n                    disabled={isImporting || mappingInfo?.data?.sampleImportedRecordInfo?.length === 0}\n                    rightIcon={<MoveRight size={14} />}\n                >\n                    Import\n                </SolidButton>\n            </div>\n        </div>\n    )\n}\n"]}

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

@@ -1,17 +1,15 @@
 
-import { Button } from 'primereact/button'
+import { CircleX, MoveRight } from 'lucide-react'
 import styles from './SolidImport.module.css'
 import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
 import React, { useEffect, useState } from 'react';
-import { Dropdown } from 'primereact/dropdown';
 import { useDispatch } from 'react-redux';
 import { showToast } from '../../../../redux/features/toastSlice';
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import { SolidButton, SolidSelect, SolidSpinner } from '../../../shad-cn-ui';
 export const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {
-    // console.log("get transaction id", transactionId);
-
     const dispatch = useDispatch();
-    const [trigger, { data: mappingInfo, isLoading, isError }] = useLazyGetImportMappingInfoQuery();
+    const [trigger, { data: mappingInfo, isLoading }] = useLazyGetImportMappingInfoQuery();
     const [patchUpdateImportTransaction] = usePatchUpdateImportTransactionMutation();
     const [createImportSync, { isLoading: isImporting }] = useCreateImportSyncMutation();
     const [fieldMapping, setFieldMapping] = useState<Record<string, string>>({});
@@ -35,7 +33,7 @@ export const SolidImportTransaction = ({ setImportStatusResult, transactionId, s
     }, [mappingInfo?.data]);
 
 
-    const dropdownOptions = mappingInfo?.data?.importableFields.map((field: any) => ({
+    const dropdownOptions = (mappingInfo?.data?.importableFields ?? []).map((field: any) => ({
         label: field.displayName,
         value: field.name,
     }));
@@ -98,98 +96,93 @@ export const SolidImportTransaction = ({ setImportStatusResult, transactionId, s
     };
 
     const sampleRecords = mappingInfo?.data?.sampleImportedRecordInfo ?? [];
+    const visibleSampleRecords = sampleRecords?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader));
 
     return (
         <div>
             <div className={styles.SolidImportContextWrapper}>
-                <div className='grid m-0 relative'>
-                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>
-                        File Column
-                        <div className={styles.TransactionsHeaderDivider}></div>
-                    </div>
-                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>
-                        SolidX Field
+                {isLoading ? (
+                    <div className="solid-import-loading-state">
+                        <SolidSpinner size={22} label="Loading mapping info" />
                     </div>
-                    {sampleRecords.length > 0 ? (
-                        sampleRecords
-                            ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
-                            .map((sample: any) => {
-                                const fieldMeta = mappingInfo.data.importableFields.find(
-                                    (f: any) => f.name === fieldMapping[sample.cellHeader]
-                                );
-                                const isRequired = fieldMeta?.required;
-                                // {sampleRecords.length > 0 ? (
-                                //    sampleRecords    
-                                //     ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
-                                //     ?.sort((a: any, b: any) => {
-                                //         const aRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[a.cellHeader])?.required;
-                                //         const bRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[b.cellHeader])?.required;
-                                //         return (bRequired ? 1 : 0) - (aRequired ? 1 : 0); // true comes before false
-                                //     })
-                                //     .map((sample: any) => {
-                                //         const fieldMeta = mappingInfo.data.importableFields.find(
-                                //             (f: any) => f.name === fieldMapping[sample.cellHeader]
-                                //         );
-                                //         const isRequired = fieldMeta?.required;
-                                return (
-                                    <React.Fragment key={sample.cellHeader}>
-                                        <div
-                                            className="col-5 md:col-6 py-2 pl-3 pr-2 md:px-3 flex flex-column justify-content-center"
-                                            style={{ borderBottom: "1px solid var(--gray-100)" }}
-                                        >
-                                             
-                                            <div className="font-medium text-primary">{sample.cellHeader}</div>
-                                            <div className="text-sm" style={{ color: "var(--solid-grey-500)" }}>
-                                                {sample.cellValue || ""}
+                ) : visibleSampleRecords.length > 0 ? (
+                    <div className='solid-import-mapping-shell'>
+                        <div className="solid-import-mapping-intro">
+                            <div>
+                                <h5 className='solid-primary-black-text solid-import-section-title'>Map file columns</h5>
+                                <p className='solid-import-section-copy m-0'>Match each incoming column to the correct SolidX field before the import runs.</p>
+                            </div>
+                            <div className="solid-import-mapping-count">
+                                {visibleSampleRecords.length} column{visibleSampleRecords.length > 1 ? 's' : ''}
+                            </div>
+                        </div>
+                        <div className='solid-import-mapping-table'>
+                            <div className={`solid-import-mapping-head ${styles.ImportTableHeader}`}>
+                                <div className="solid-import-mapping-head-cell">File Column</div>
+                                <div className="solid-import-mapping-head-cell">SolidX Field</div>
+                            </div>
+                            <div className="solid-import-mapping-body">
+                                {visibleSampleRecords.map((sample: any) => {
+                                    const fieldMeta = mappingInfo.data.importableFields.find(
+                                        (f: any) => f.name === fieldMapping[sample.cellHeader]
+                                    );
+                                    const isRequired = fieldMeta?.required;
+
+                                    return (
+                                        <div key={sample.cellHeader} className="solid-import-mapping-row">
+                                            <div className="solid-import-mapping-source">
+                                                <div className="solid-import-mapping-source-title">{sample.cellHeader}</div>
+                                                <div className="solid-import-mapping-source-value">{sample.cellValue || "No sample value"}</div>
                                             </div>
-                                        </div>
-                                        <div className="col-7 md:col-6 py-0" style={{ borderBottom: "1px solid var(--gray-100)" }}>
-                                            <div className={`flex w-full justify-between align-items-center gap-2  py-2 md:px-3  ${fieldMapping[sample.cellHeader] ? "col-11 sm:col-12" : "col-12"} `}>
-                                                <Dropdown
-                                                    value={fieldMapping[sample.cellHeader]}
-                                                    options={dropdownOptions}
-                                                    onChange={(e) => handleChange(sample.cellHeader, e.value)}
-                                                    className="w-full p-inputtext-sm"
-                                                    placeholder="Select field"
-                                                />
-                                                {!isRequired ? (
-                                                    <span
-                                                        onClick={() => handleRemoveRow(sample.cellHeader)}
-                                                        title="Remove this row"
-                                                        style={{ cursor: 'pointer' }}
-                                                    >
-                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                                            <rect width="16" height="16" rx="8" fill="#F0F0F0" />
-                                                            <path d="M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z" fill="#4B4D52" />
-                                                        </svg>
-                                                    </span>
-                                                )
-                                                    :
-                                                    <span style={{ height: 16, width: 16 }}></span>
-                                                }
+                                            <div className="solid-import-mapping-target">
+                                                <div className="solid-import-mapping-target-controls">
+                                                    <SolidSelect
+                                                        value={fieldMapping[sample.cellHeader]}
+                                                        options={dropdownOptions}
+                                                        onChange={(e) => handleChange(sample.cellHeader, e.value)}
+                                                        className="w-full"
+                                                        placeholder="Select field"
+                                                    />
+                                                    {!isRequired ? (
+                                                        <button
+                                                            type="button"
+                                                            className="solid-import-mapping-remove"
+                                                            onClick={() => handleRemoveRow(sample.cellHeader)}
+                                                            title="Remove this row"
+                                                        >
+                                                            <CircleX size={16} />
+                                                        </button>
+                                                    ) : (
+                                                        <span className="solid-import-mapping-remove-placeholder" />
+                                                    )}
+                                                </div>
                                             </div>
-
                                         </div>
-                                    </React.Fragment>
-                                );
-                            })
-                    ) : (
-                        <div className='col-12 flex flex-column align-items-center'>
-                            <h4 className='text-center px-2'>No Sample Imported Record Info Found</h4>
-                            <p>Please Add Records</p>
+                                    );
+                                })}
+                            </div>
                         </div>
-                    )}
-                </div>
+                    </div>
+                ) : (
+                    <div className='solid-import-empty-state'>
+                        <h4 className='text-center px-2'>No sample import records found</h4>
+                        <p>Upload a file first and then continue to mapping.</p>
+                    </div>
+                )}
             </div>
-            <div className='mt-3 flex align-items-center gap-3'>
-                <Button
-                    label='Import'
+            <div className='solid-import-actions'>
+                <p className="solid-import-actions-copy">Confirm the mapping and start the import.</p>
+                <SolidButton
+                    type="button"
                     size='small'
                     onClick={handleImportTransaction}
                     loading={isImporting}
                     disabled={isImporting || mappingInfo?.data?.sampleImportedRecordInfo?.length === 0}
-                />
+                    rightIcon={<MoveRight size={14} />}
+                >
+                    Import
+                </SolidButton>
             </div>
         </div>
     )
-}
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportTransactionStatus.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransactionStatus.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,4BAA4B,0FAA2F,GAAG,4CAqJtI,CAAA"}
+{"version":3,"file":"SolidImportTransactionStatus.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransactionStatus.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,4BAA4B,0FAA2F,GAAG,4CA8KtI,CAAA"}

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

@@ -37,10 +37,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { getSession } from "../../../../adapters/auth/index";
-import { Button } from 'primereact/button';
-import { Dialog } from 'primereact/dialog';
+import { AlertTriangle, CheckCircle2, CircleX, Download, Eye } from 'lucide-react';
 import { useState } from 'react';
 import { env } from "../../../../adapters/env";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from '../../../shad-cn-ui';
 export var SolidImportTransactionStatus = function (_a) {
     var importStatusResult = _a.importStatusResult, transactionId = _a.transactionId, setOpenImportDialog = _a.setOpenImportDialog, handleFetchUpdatedRecords = _a.handleFetchUpdatedRecords;
     var _b = useState(false), showPartialDialog = _b[0], setShowPartialDialog = _b[1];
@@ -113,29 +113,27 @@ export var SolidImportTransactionStatus = function (_a) {
     }); };
     var getStatusTag = function () {
         if (status === "import_succeeded") {
-            return _jsx(Button, { type: 'button', size: 'small', icon: "pi pi-check-circle", severity: "success", label: "".concat(importedCount, " row").concat(importedCount > 1 ? 's' : '', " imported successfully") });
+            return (_jsxs("div", { className: "solid-import-status-pill is-success", children: [_jsx(CheckCircle2, { size: 16 }), _jsxs("span", { children: [importedCount, " row", importedCount > 1 ? 's' : '', " imported successfully"] })] }));
         }
         if (status === "import_failed" && importedCount === 0) {
-            return _jsx(Button, { type: 'button', size: 'small', icon: "pi pi-times-circle", severity: "danger", label: "Import Failed" });
+            return (_jsxs("div", { className: "solid-import-status-pill is-danger", children: [_jsx(CircleX, { size: 16 }), _jsx("span", { children: "Import Failed" })] }));
         }
         if (status === "import_failed" && importedCount > 0) {
-            return _jsx(Button, { type: 'button', size: 'small', icon: "pi pi-exclamation-triangle", severity: "warning", label: "Completed with Some Errors" });
+            return (_jsxs("div", { className: "solid-import-status-pill is-warning", children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: "Completed with Some Errors" })] }));
         }
         return _jsx("div", { children: "Import Status" });
     };
-    return (_jsxs("div", { children: [_jsxs("div", { style: { borderRadius: 6, border: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: 'p-3', style: { borderBottom: '1px solid var(--primary-light-color)', pointerEvents: 'none' }, children: getStatusTag() }), _jsxs("div", { className: 'font-bold', style: { color: 'var(--solid-primary-black)' }, children: [_jsxs("div", { className: 'p-3 flex justify-content-between', children: [_jsx("span", { children: "No. of Successful Rows" }), " ", _jsx("span", { children: importedCount !== null && importedCount !== void 0 ? importedCount : 0 })] }), _jsx("div", { className: 'px-3', children: _jsx("div", { style: { borderTop: '1px dashed var(--primary-light-color)' } }) }), _jsxs("div", { className: 'p-3 flex justify-content-between', children: [_jsx("span", { children: "No. of Failed Rows" }), " ", _jsx("span", { children: failedCount !== null && failedCount !== void 0 ? failedCount : 0 })] })] })] }), _jsxs("div", { className: 'mt-3 flex align-items-center gap-3', children: [importedCount > 0 &&
-                        _jsx(Button, { label: 'View Imported Records', size: 'small', onClick: function () {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "solid-import-summary-card", children: [_jsx("div", { className: 'solid-import-summary-card-header', children: getStatusTag() }), _jsxs("div", { className: 'solid-import-summary-metrics', children: [_jsxs("div", { className: 'solid-import-summary-metric', children: [_jsx("span", { children: "No. of Successful Rows" }), " ", _jsx("span", { children: importedCount !== null && importedCount !== void 0 ? importedCount : 0 })] }), _jsx("div", { className: 'solid-import-summary-divider-wrap', children: _jsx("div", { className: 'solid-import-summary-divider' }) }), _jsxs("div", { className: 'solid-import-summary-metric', children: [_jsx("span", { children: "No. of Failed Rows" }), " ", _jsx("span", { children: failedCount !== null && failedCount !== void 0 ? failedCount : 0 })] })] })] }), _jsxs("div", { className: 'solid-import-actions', children: [_jsx("p", { className: "solid-import-actions-copy", children: "Review the result and open the updated records when you are ready." }), importedCount > 0 &&
+                        _jsx(SolidButton, { type: 'button', size: 'small', leftIcon: _jsx(Eye, { size: 14 }), onClick: function () {
                                 if (status === "import_failed" && importedCount > 0) {
                                     setShowPartialDialog(true);
                                 }
                                 else {
                                     handleSuccessSyncImport();
                                 }
-                            } }), status === "import_failed" && transactionId &&
-                        _jsx(Button, { label: "Download Failed Records", size: 'small', icon: "pi pi-download", outlined: true, severity: 'secondary', onClick: function () { return handleDownloadFailedRecords(transactionId); } })] }), _jsx(Dialog, { header: "View Imported Records", visible: showPartialDialog, onHide: function () { return setShowPartialDialog(false); }, style: {
-                    width: '50vh'
-                }, footer: _jsxs("div", { className: "flex justify-content-start gap-2", children: [_jsx(Button, { label: "Yes", size: 'small', icon: "pi pi-download", onClick: handlePartialDialogConfirm }), _jsx(Button, { label: "No", size: 'small', icon: "pi pi-times", severity: "secondary", outlined: true, onClick: function () {
-                                handleSuccessSyncImport();
-                            } })] }), modal: true, children: _jsx("p", { children: "Do you want to download failed records before viewing the successful imports?" }) })] }));
+                            }, children: "View Imported Records" }), status === "import_failed" && transactionId &&
+                        _jsx(SolidButton, { type: 'button', size: 'small', leftIcon: _jsx(Download, { size: 14 }), variant: 'outline', onClick: function () { return handleDownloadFailedRecords(transactionId); }, children: "Download Failed Records" })] }), _jsxs(SolidDialog, { open: showPartialDialog, onOpenChange: setShowPartialDialog, style: { width: 'min(460px, calc(100vw - 2rem))' }, className: "solid-import-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "View Imported Records" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Failed rows can be downloaded before you return to the imported results." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-import-confirm-dialog-body", children: _jsx("p", { children: "Do you want to download failed records before viewing the successful imports?" }) }), _jsxs(SolidDialogFooter, { className: "solid-import-confirm-dialog-footer", children: [_jsx(SolidButton, { type: "button", size: 'small', leftIcon: _jsx(Download, { size: 14 }), onClick: handlePartialDialogConfirm, children: "Yes" }), _jsx(SolidButton, { type: "button", size: 'small', variant: "outline", leftIcon: _jsx(CircleX, { size: 14 }), onClick: function () {
+                                    handleSuccessSyncImport();
+                                }, children: "No" })] })] })] }));
 };
 //# sourceMappingURL=SolidImportTransactionStatus.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidImportTransactionStatus.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransactionStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { Button } from 'primereact/button';\nimport { Dialog } from 'primereact/dialog';\nimport { useState } from 'react';\nimport { env } from \"../../../../adapters/env\";\n\nexport const SolidImportTransactionStatus = ({ importStatusResult, transactionId, setOpenImportDialog, handleFetchUpdatedRecords }: any) => {\n\n  const [showPartialDialog, setShowPartialDialog] = useState(false);\n\n  const handleDownloadFailedRecords = async (transactionId: number) => {\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/${transactionId}/export-failed-import-records`,\n        {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${token}`,\n          },\n        }\n      );\n\n      if (!response.ok) throw new Error(ERROR_MESSAGES.FAILED_TO_DOWNLOAD);\n\n      const blob = await response.blob();\n      const url = window.URL.createObjectURL(blob);\n      const a = document.createElement(\"a\");\n      a.href = url;\n\n      // Try to extract filename from Content-Disposition header\n      const contentDisposition = response.headers.get(\"Content-Disposition\");\n      const match = contentDisposition?.match(/filename=\"(.+)\"/);\n      a.download = match?.[1] ?? \"failed-records.xlsx\"; // fallback if not found\n\n      document.body.appendChild(a);\n      a.click();\n      a.remove();\n      window.URL.revokeObjectURL(url);\n    } catch (error) {\n      console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n    }\n  };\n\n  const { status, failedCount = 0, importedCount = 0 } = importStatusResult?.data || {};\n\n  const handleSuccessSyncImport = () => {\n    setOpenImportDialog(false);\n    setTimeout(() => {\n      handleFetchUpdatedRecords();\n    }, 150);\n  };\n\n  const handlePartialDialogConfirm = async () => {\n    await handleDownloadFailedRecords(transactionId);\n    setOpenImportDialog(false);\n    setTimeout(() => {\n      handleFetchUpdatedRecords();\n    }, 150);\n  };\n\n  const getStatusTag = () => {\n    if (status === \"import_succeeded\") {\n      return <Button type='button' size='small' icon=\"pi pi-check-circle\" severity=\"success\" label={`${importedCount} row${importedCount > 1 ? 's' : ''} imported successfully`} />;\n    }\n    if (status === \"import_failed\" && importedCount === 0) {\n      return <Button type='button' size='small' icon=\"pi pi-times-circle\" severity=\"danger\" label=\"Import Failed\" />;\n    }\n    if (status === \"import_failed\" && importedCount > 0) {\n      return <Button type='button' size='small' icon=\"pi pi-exclamation-triangle\" severity=\"warning\" label=\"Completed with Some Errors\" />;\n    }\n    return <div>Import Status</div>;\n  };\n\n  return (\n    <div>\n      <div style={{ borderRadius: 6, border: '1px solid var(--primary-light-color)' }}>\n        <div className='p-3' style={{ borderBottom: '1px solid var(--primary-light-color)', pointerEvents: 'none' }}>\n          {getStatusTag()}\n        </div>\n        <div className='font-bold' style={{ color: 'var(--solid-primary-black)' }}>\n          <div className='p-3 flex justify-content-between'>\n            <span>No. of Successful Rows</span> <span>{importedCount ?? 0}</span>\n          </div>\n          <div className='px-3'>\n            <div style={{ borderTop: '1px dashed var(--primary-light-color)' }}></div>\n          </div>\n          <div className='p-3 flex justify-content-between'>\n            <span>No. of Failed Rows</span> <span>{failedCount ?? 0}</span>\n          </div>\n        </div>\n      </div>\n      <div className='mt-3 flex align-items-center gap-3'>\n        {importedCount > 0 &&\n          <Button\n            label='View Imported Records'\n            size='small'\n            onClick={() => {\n              if (status === \"import_failed\" && importedCount > 0) {\n                setShowPartialDialog(true);\n              } else {\n                handleSuccessSyncImport();\n              }\n            }\n            }\n          />\n        }\n        {status === \"import_failed\" && transactionId &&\n          <Button\n            label=\"Download Failed Records\"\n            size='small'\n            icon=\"pi pi-download\"\n            outlined\n            severity='secondary'\n            onClick={() => handleDownloadFailedRecords(transactionId)}\n          />\n        }\n      </div>\n      <Dialog\n        header=\"View Imported Records\"\n        visible={showPartialDialog}\n        onHide={() => setShowPartialDialog(false)}\n        style={{\n          width: '50vh'\n        }}\n        footer={\n          <div className=\"flex justify-content-start gap-2\">\n            <Button\n              label=\"Yes\"\n              size='small'\n              icon=\"pi pi-download\"\n              onClick={handlePartialDialogConfirm}\n            />\n            <Button\n              label=\"No\"\n              size='small'\n              icon=\"pi pi-times\"\n              severity=\"secondary\"\n              outlined\n              onClick={() => {\n                handleSuccessSyncImport();\n              }}\n            />\n          </div>\n        }\n        modal\n      >\n        <p>Do you want to download failed records before viewing the successful imports?</p>\n      </Dialog>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"SolidImportTransactionStatus.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransactionStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { AlertTriangle, CheckCircle2, CircleX, Download, Eye } from 'lucide-react';\nimport { useState } from 'react';\nimport { env } from \"../../../../adapters/env\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogClose,\n  SolidDialogDescription,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n} from '../../../shad-cn-ui';\n\nexport const SolidImportTransactionStatus = ({ importStatusResult, transactionId, setOpenImportDialog, handleFetchUpdatedRecords }: any) => {\n\n  const [showPartialDialog, setShowPartialDialog] = useState(false);\n\n  const handleDownloadFailedRecords = async (transactionId: number) => {\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/${transactionId}/export-failed-import-records`,\n        {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${token}`,\n          },\n        }\n      );\n\n      if (!response.ok) throw new Error(ERROR_MESSAGES.FAILED_TO_DOWNLOAD);\n\n      const blob = await response.blob();\n      const url = window.URL.createObjectURL(blob);\n      const a = document.createElement(\"a\");\n      a.href = url;\n\n      // Try to extract filename from Content-Disposition header\n      const contentDisposition = response.headers.get(\"Content-Disposition\");\n      const match = contentDisposition?.match(/filename=\"(.+)\"/);\n      a.download = match?.[1] ?? \"failed-records.xlsx\"; // fallback if not found\n\n      document.body.appendChild(a);\n      a.click();\n      a.remove();\n      window.URL.revokeObjectURL(url);\n    } catch (error) {\n      console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n    }\n  };\n\n  const { status, failedCount = 0, importedCount = 0 } = importStatusResult?.data || {};\n\n  const handleSuccessSyncImport = () => {\n    setOpenImportDialog(false);\n    setTimeout(() => {\n      handleFetchUpdatedRecords();\n    }, 150);\n  };\n\n  const handlePartialDialogConfirm = async () => {\n    await handleDownloadFailedRecords(transactionId);\n    setOpenImportDialog(false);\n    setTimeout(() => {\n      handleFetchUpdatedRecords();\n    }, 150);\n  };\n\n  const getStatusTag = () => {\n    if (status === \"import_succeeded\") {\n      return (\n        <div className=\"solid-import-status-pill is-success\">\n          <CheckCircle2 size={16} />\n          <span>{importedCount} row{importedCount > 1 ? 's' : ''} imported successfully</span>\n        </div>\n      );\n    }\n    if (status === \"import_failed\" && importedCount === 0) {\n      return (\n        <div className=\"solid-import-status-pill is-danger\">\n          <CircleX size={16} />\n          <span>Import Failed</span>\n        </div>\n      );\n    }\n    if (status === \"import_failed\" && importedCount > 0) {\n      return (\n        <div className=\"solid-import-status-pill is-warning\">\n          <AlertTriangle size={16} />\n          <span>Completed with Some Errors</span>\n        </div>\n      );\n    }\n    return <div>Import Status</div>;\n  };\n\n  return (\n    <div>\n      <div className=\"solid-import-summary-card\">\n        <div className='solid-import-summary-card-header'>\n          {getStatusTag()}\n        </div>\n        <div className='solid-import-summary-metrics'>\n          <div className='solid-import-summary-metric'>\n            <span>No. of Successful Rows</span> <span>{importedCount ?? 0}</span>\n          </div>\n          <div className='solid-import-summary-divider-wrap'>\n            <div className='solid-import-summary-divider'></div>\n          </div>\n          <div className='solid-import-summary-metric'>\n            <span>No. of Failed Rows</span> <span>{failedCount ?? 0}</span>\n          </div>\n        </div>\n      </div>\n      <div className='solid-import-actions'>\n        <p className=\"solid-import-actions-copy\">Review the result and open the updated records when you are ready.</p>\n        {importedCount > 0 &&\n          <SolidButton\n            type='button'\n            size='small'\n            leftIcon={<Eye size={14} />}\n            onClick={() => {\n              if (status === \"import_failed\" && importedCount > 0) {\n                setShowPartialDialog(true);\n              } else {\n                handleSuccessSyncImport();\n              }\n            }\n            }\n          >\n            View Imported Records\n          </SolidButton>\n        }\n        {status === \"import_failed\" && transactionId &&\n          <SolidButton\n            type='button'\n            size='small'\n            leftIcon={<Download size={14} />}\n            variant='outline'\n            onClick={() => handleDownloadFailedRecords(transactionId)}\n          >\n            Download Failed Records\n          </SolidButton>\n        }\n      </div>\n      <SolidDialog\n        open={showPartialDialog}\n        onOpenChange={setShowPartialDialog}\n        style={{ width: 'min(460px, calc(100vw - 2rem))' }}\n        className=\"solid-import-confirm-dialog\"\n      >\n        <SolidDialogHeader className=\"solid-filter-dialog-head\">\n          <div>\n            <SolidDialogTitle className=\"solid-filter-dialog-title m-0\">View Imported Records</SolidDialogTitle>\n            <SolidDialogDescription className=\"solid-filter-dialog-subtitle m-0\">\n              Failed rows can be downloaded before you return to the imported results.\n            </SolidDialogDescription>\n          </div>\n          <SolidDialogClose className=\"solid-filter-dialog-close\" />\n        </SolidDialogHeader>\n        <SolidDialogSeparator className=\"solid-filter-dialog-sep\" />\n        <SolidDialogBody className=\"solid-import-confirm-dialog-body\">\n          <p>Do you want to download failed records before viewing the successful imports?</p>\n        </SolidDialogBody>\n        <SolidDialogFooter className=\"solid-import-confirm-dialog-footer\">\n          <SolidButton type=\"button\" size='small' leftIcon={<Download size={14} />} onClick={handlePartialDialogConfirm}>\n            Yes\n          </SolidButton>\n          <SolidButton\n            type=\"button\"\n            size='small'\n            variant=\"outline\"\n            leftIcon={<CircleX size={14} />}\n            onClick={() => {\n              handleSuccessSyncImport();\n            }}\n          >\n            No\n          </SolidButton>\n        </SolidDialogFooter>\n      </SolidDialog>\n    </div>\n  )\n}\n"]}

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

@@ -1,9 +1,19 @@
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { getSession } from "../../../../adapters/auth/index";
-import { Button } from 'primereact/button';
-import { Dialog } from 'primereact/dialog';
+import { AlertTriangle, CheckCircle2, CircleX, Download, Eye } from 'lucide-react';
 import { useState } from 'react';
 import { env } from "../../../../adapters/env";
+import {
+  SolidButton,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogClose,
+  SolidDialogDescription,
+  SolidDialogFooter,
+  SolidDialogHeader,
+  SolidDialogSeparator,
+  SolidDialogTitle,
+} from '../../../shad-cn-ui';
 
 export const SolidImportTransactionStatus = ({ importStatusResult, transactionId, setOpenImportDialog, handleFetchUpdatedRecords }: any) => {
 
@@ -66,40 +76,57 @@ export const SolidImportTransactionStatus = ({ importStatusResult, transactionId
 
   const getStatusTag = () => {
     if (status === "import_succeeded") {
-      return <Button type='button' size='small' icon="pi pi-check-circle" severity="success" label={`${importedCount} row${importedCount > 1 ? 's' : ''} imported successfully`} />;
+      return (
+        <div className="solid-import-status-pill is-success">
+          <CheckCircle2 size={16} />
+          <span>{importedCount} row{importedCount > 1 ? 's' : ''} imported successfully</span>
+        </div>
+      );
     }
     if (status === "import_failed" && importedCount === 0) {
-      return <Button type='button' size='small' icon="pi pi-times-circle" severity="danger" label="Import Failed" />;
+      return (
+        <div className="solid-import-status-pill is-danger">
+          <CircleX size={16} />
+          <span>Import Failed</span>
+        </div>
+      );
     }
     if (status === "import_failed" && importedCount > 0) {
-      return <Button type='button' size='small' icon="pi pi-exclamation-triangle" severity="warning" label="Completed with Some Errors" />;
+      return (
+        <div className="solid-import-status-pill is-warning">
+          <AlertTriangle size={16} />
+          <span>Completed with Some Errors</span>
+        </div>
+      );
     }
     return <div>Import Status</div>;
   };
 
   return (
     <div>
-      <div style={{ borderRadius: 6, border: '1px solid var(--primary-light-color)' }}>
-        <div className='p-3' style={{ borderBottom: '1px solid var(--primary-light-color)', pointerEvents: 'none' }}>
+      <div className="solid-import-summary-card">
+        <div className='solid-import-summary-card-header'>
           {getStatusTag()}
         </div>
-        <div className='font-bold' style={{ color: 'var(--solid-primary-black)' }}>
-          <div className='p-3 flex justify-content-between'>
+        <div className='solid-import-summary-metrics'>
+          <div className='solid-import-summary-metric'>
             <span>No. of Successful Rows</span> <span>{importedCount ?? 0}</span>
           </div>
-          <div className='px-3'>
-            <div style={{ borderTop: '1px dashed var(--primary-light-color)' }}></div>
+          <div className='solid-import-summary-divider-wrap'>
+            <div className='solid-import-summary-divider'></div>
           </div>
-          <div className='p-3 flex justify-content-between'>
+          <div className='solid-import-summary-metric'>
             <span>No. of Failed Rows</span> <span>{failedCount ?? 0}</span>
           </div>
         </div>
       </div>
-      <div className='mt-3 flex align-items-center gap-3'>
+      <div className='solid-import-actions'>
+        <p className="solid-import-actions-copy">Review the result and open the updated records when you are ready.</p>
         {importedCount > 0 &&
-          <Button
-            label='View Imported Records'
+          <SolidButton
+            type='button'
             size='small'
+            leftIcon={<Eye size={14} />}
             onClick={() => {
               if (status === "import_failed" && importedCount > 0) {
                 setShowPartialDialog(true);
@@ -108,50 +135,58 @@ export const SolidImportTransactionStatus = ({ importStatusResult, transactionId
               }
             }
             }
-          />
+          >
+            View Imported Records
+          </SolidButton>
         }
         {status === "import_failed" && transactionId &&
-          <Button
-            label="Download Failed Records"
+          <SolidButton
+            type='button'
             size='small'
-            icon="pi pi-download"
-            outlined
-            severity='secondary'
+            leftIcon={<Download size={14} />}
+            variant='outline'
             onClick={() => handleDownloadFailedRecords(transactionId)}
-          />
+          >
+            Download Failed Records
+          </SolidButton>
         }
       </div>
-      <Dialog
-        header="View Imported Records"
-        visible={showPartialDialog}
-        onHide={() => setShowPartialDialog(false)}
-        style={{
-          width: '50vh'
-        }}
-        footer={
-          <div className="flex justify-content-start gap-2">
-            <Button
-              label="Yes"
-              size='small'
-              icon="pi pi-download"
-              onClick={handlePartialDialogConfirm}
-            />
-            <Button
-              label="No"
-              size='small'
-              icon="pi pi-times"
-              severity="secondary"
-              outlined
-              onClick={() => {
-                handleSuccessSyncImport();
-              }}
-            />
-          </div>
-        }
-        modal
+      <SolidDialog
+        open={showPartialDialog}
+        onOpenChange={setShowPartialDialog}
+        style={{ width: 'min(460px, calc(100vw - 2rem))' }}
+        className="solid-import-confirm-dialog"
       >
-        <p>Do you want to download failed records before viewing the successful imports?</p>
-      </Dialog>
+        <SolidDialogHeader className="solid-filter-dialog-head">
+          <div>
+            <SolidDialogTitle className="solid-filter-dialog-title m-0">View Imported Records</SolidDialogTitle>
+            <SolidDialogDescription className="solid-filter-dialog-subtitle m-0">
+              Failed rows can be downloaded before you return to the imported results.
+            </SolidDialogDescription>
+          </div>
+          <SolidDialogClose className="solid-filter-dialog-close" />
+        </SolidDialogHeader>
+        <SolidDialogSeparator className="solid-filter-dialog-sep" />
+        <SolidDialogBody className="solid-import-confirm-dialog-body">
+          <p>Do you want to download failed records before viewing the successful imports?</p>
+        </SolidDialogBody>
+        <SolidDialogFooter className="solid-import-confirm-dialog-footer">
+          <SolidButton type="button" size='small' leftIcon={<Download size={14} />} onClick={handlePartialDialogConfirm}>
+            Yes
+          </SolidButton>
+          <SolidButton
+            type="button"
+            size='small'
+            variant="outline"
+            leftIcon={<CircleX size={14} />}
+            onClick={() => {
+              handleSuccessSyncImport();
+            }}
+          >
+            No
+          </SolidButton>
+        </SolidDialogFooter>
+      </SolidDialog>
     </div>
   )
 }