@solidstarters/solid-core-ui 1.1.210 → 1.1.211

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

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

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

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

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

@@ -0,0 +1,205 @@
+"use client"
+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';
+export const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {
+    // console.log("get transaction id", transactionId);
+
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+    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("error", ERROR_MESSAGES.IMPORT_ERROR, importError?.data?.error);
+                }
+
+                // Async
+            }
+        } catch (error: any) {
+            const errorMessage = error?.data?.error || ERROR_MESSAGES.SOMETHING_WRONG;
+            showToast("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>
+    )
+}