@solidxai/core-ui 0.1.1 → 0.1.2

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

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

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

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

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

@@ -1,196 +0,0 @@
-
-import { Button } from 'primereact/button'
-import styles from './SolidImport.module.css'
-import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
-import React, { useEffect, useRef, useState } from 'react';
-import { Dropdown } from 'primereact/dropdown';
-import { Toast } from 'primereact/toast';
-import { ERROR_MESSAGES } from '../../../../constants/error-messages';
-import showToast from "../../../../helpers/showToast";
-export const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {
-    // console.log("get transaction id", transactionId);
-
-    const toast = useRef<Toast>(null);
-    const [trigger, { data: mappingInfo, isLoading, isError }] = useLazyGetImportMappingInfoQuery();
-    const [patchUpdateImportTransaction] = usePatchUpdateImportTransactionMutation();
-    const [createImportSync, { isLoading: isImporting }] = useCreateImportSyncMutation();
-    const [fieldMapping, setFieldMapping] = useState<Record<string, string>>({});
-    const [visibleHeaders, setVisibleHeaders] = useState<string[]>([]);
-
-    useEffect(() => {
-        if (transactionId) {
-            trigger({ id: transactionId });
-        }
-    }, [transactionId]);
-
-    useEffect(() => {
-        const defaultMapping: Record<string, string> = {};
-        const headers: string[] = [];
-        mappingInfo?.data?.sampleImportedRecordInfo?.forEach((sample: any) => {
-            defaultMapping[sample.cellHeader] = sample.defaultMappedFieldName || "";
-            headers.push(sample.cellHeader);
-        });
-        setFieldMapping(defaultMapping);
-        setVisibleHeaders(headers);
-    }, [mappingInfo?.data]);
-
-
-    const dropdownOptions = mappingInfo?.data?.importableFields.map((field: any) => ({
-        label: field.displayName,
-        value: field.name,
-    }));
-
-    const handleChange = (cellHeader: string, selectedField: string) => {
-        setFieldMapping((prev) => ({
-            ...prev,
-            [cellHeader]: selectedField,
-        }));
-    };
-
-    const handleRemoveRow = (cellHeader: string) => {
-        setVisibleHeaders((prev) => prev.filter(header => header !== cellHeader));
-        setFieldMapping((prev) => {
-            const updated = { ...prev };
-            delete updated[cellHeader];
-            return updated;
-        });
-    };
-
-    const handleImportTransaction = async () => {
-        try {
-            const mappingArray = Object.entries(fieldMapping).map(([header, fieldName]) => ({
-                header,
-                fieldName,
-            }));
-
-            const patchData = {
-                status: "mapping_created",
-                mapping: JSON.stringify(mappingArray),
-            };
-            const patchResult = await patchUpdateImportTransaction({
-                id: transactionId,
-                data: patchData,
-            }).unwrap();
-            if (patchResult?.statusCode === 200) {
-
-                // Sync
-                try {
-                    const importResult = await createImportSync({ id: transactionId }).unwrap();
-
-                    if (importResult?.data?.status === "import_succeeded") {
-                        setImportStatusResult(importResult)
-                        setImportStep(4);
-                    }
-                    if (importResult?.data?.status === "import_failed") {
-                        setImportStatusResult(importResult);
-                        setImportStep(4);
-                    }
-                } catch (importError: any) {
-                    showToast(toast, "error", ERROR_MESSAGES.IMPORT_ERROR, importError?.data?.error);
-                }
-
-                // Async
-            }
-        } catch (error: any) {
-            const errorMessage = error?.data?.error || ERROR_MESSAGES.SOMETHING_WRONG;
-            showToast(toast, "error", ERROR_MESSAGES.ERROR, errorMessage);
-        }
-    };
-
-    const sampleRecords = mappingInfo?.data?.sampleImportedRecordInfo ?? [];
-
-    return (
-        <div>
-            <Toast ref={toast} />
-            <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
-                    </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 || ""}
-                                            </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>
-
-                                        </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 className='mt-3 flex align-items-center gap-3'>
-                <Button
-                    label='Import'
-                    size='small'
-                    onClick={handleImportTransaction}
-                    loading={isImporting}
-                    disabled={isImporting || mappingInfo?.data?.sampleImportedRecordInfo?.length === 0}
-                />
-            </div>
-        </div>
-    )
-}