@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx

@@ -0,0 +1,311 @@
+"use client"
+
+import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
+import { useGetUserQuery, useUpdateUserProfileMutation } from "../../../../redux/api/userApi";
+import { useFormik } from "formik";
+import { AutoComplete } from "primereact/autocomplete";
+import { Avatar } from "primereact/avatar";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { InputText } from "primereact/inputtext";
+import { Toast } from "primereact/toast";
+import { useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import styles from './SolidAccountSettings.module.css'
+import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+
+export const SolidPersonalInfo = () => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const toast = useRef<Toast>(null);
+
+    const [previewImage, setPreviewImage] = useState<string | null>(null);
+    const [deleteDialogVisible, setDeleteDialogVisible] = useState(false);
+    const [replaceDialogVisible, setReplaceDialogVisible] = useState(false);
+    const [pendingFile, setPendingFile] = useState<File | null>(null);
+
+    const userId = useSelector((state: any) => state.auth?.user?.user?.id);
+    const { data: userData, refetch } = useGetUserQuery(userId);
+
+    const [
+        deleteMedia,
+    ] = useDeleteMediaMutation();
+    const [updateUser] = useUpdateUserProfileMutation();
+
+    const showToast = (severity: "success" | "error" | "info", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const initialValues = {
+        fullName: userData?.data?.fullName ?? "",
+        profilePicture: userData?.data?._media?.profilePicture[0]?._full_url ?? null,
+    };
+
+    const formik = useFormik({
+        initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const formData = new FormData();
+                if (values.fullName !== initialValues.fullName) {
+                    formData.append("fullName", values.fullName);
+                }
+
+                if (values.profilePicture && values.profilePicture instanceof File) {
+                    formData.append("profilePicture", values.profilePicture);
+                }
+
+                if (!formData.has("fullName") && !formData.has("profilePicture")) {
+                    showToast("info", ERROR_MESSAGES.NO_CHANGE, ERROR_MESSAGES.NO_UPDATE_MADE);
+                    return;
+                }
+
+                const response = await updateUser({ data: formData }).unwrap();
+                if (response?.statusCode === 200) {
+                    showToast("success", ERROR_MESSAGES.PROFILE_SAVED, ERROR_MESSAGES.PROFILE_SAVED_SUCCESSFULLY);
+                    refetch();
+                    formik.resetForm();
+                    setPreviewImage(null);
+                } else {
+                    showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_UPDATED_PROFILE);
+                }
+            } catch (error) {
+                showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
+            }
+        },
+    });
+
+    const getInitials = (value: string) => {
+        if (!value) return "";
+
+        const email = value.includes('@') ? value.split('@')[0] : value;
+        return email[0]?.toUpperCase() || "";
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`;
+    };
+    const value = userData?.data?.email;
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    const handleFileChange = (file: File) => {
+        const existing = userData?.data?._media?.profilePicture?.[0];
+        if (existing) {
+            setPendingFile(file);
+            setReplaceDialogVisible(true);
+        } else {
+            formik.setFieldValue("profilePicture", file);
+            setPreviewImage(URL.createObjectURL(file));
+        }
+    };
+
+
+    const handleDeleteAvatar = () => {
+        const existing = userData?.data?._media?.profilePicture?.[0];
+        if (existing) {
+            setDeleteDialogVisible(true);
+        } else {
+            formik.setFieldValue("profilePicture", null);
+            setPreviewImage(null);
+        }
+    };
+
+    const confirmReplace = async () => {
+        const existing = userData?.data?._media?.profilePicture?.[0];
+        try {
+            if (existing?.id) {
+                await deleteMedia(existing.id).unwrap();
+            }
+
+            if (pendingFile) {
+                formik.setFieldValue("profilePicture", pendingFile);
+                setTimeout(() => {
+                    formik.submitForm();
+                }, 0);
+            }
+
+        } catch (error) {
+            showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_DELETED_IMAGE);
+        }
+
+        setReplaceDialogVisible(false);
+        setPendingFile(null);
+    };
+
+    const confirmDelete = async () => {
+        const existing = userData?.data?._media?.profilePicture?.[0];
+        if (existing?.id) {
+            try {
+                await deleteMedia(existing.id).unwrap();
+                showToast("success", ERROR_MESSAGES.DELETED, ERROR_MESSAGES.PROFILE_PICTURE_REMOVE);
+                refetch();
+            } catch {
+                showToast("error", ERROR_MESSAGES.ERROR, ERROR_MESSAGES.FAILED_DELETED_IMAGE);
+            }
+        }
+
+        formik.setFieldValue("profilePicture", null);
+        setPreviewImage(null);
+        setDeleteDialogVisible(false);
+    };
+
+    return (
+        <form onSubmit={formik.handleSubmit} className="h-full flex flex-column justify-content-between">
+            <Toast ref={toast} />
+            <div>
+                <div>
+                    <label className="form-field-label mb-2 font-bold">Profile Picture</label>
+                    <div className="flex align-items-center gap-3">
+                        {previewImage ? (
+                            <Avatar image={previewImage} shape="circle"
+                                style={{
+                                    height: '5rem',
+                                    width: '5rem'
+                                }}
+                            />
+                        ) : userData?.data?._media?.profilePicture?.[0]?._full_url ? (
+                            <div className="relative">
+                                <Avatar
+                                    image={userData?.data?._media?.profilePicture?.[0]?._full_url}
+                                    shape="circle"
+                                    style={{
+                                        height: '5rem',
+                                        width: '5rem'
+                                    }}
+                                />
+                                <div className={styles.SolidRemoveProfile} onClick={handleDeleteAvatar}>
+                                    <span className="pi pi-times" />
+                                </div>
+                            </div>
+                        ) : (
+                            <Avatar
+                                label={initials}
+                                size="xlarge"
+                                shape="circle"
+                                style={{
+                                    backgroundColor: bgColor,
+                                    color: '#ffffff',
+                                    height: '5rem',
+                                    width: '5rem'
+                                }}
+                            />
+                        )}
+
+                        <div className="flex gap-2">
+                            <Button
+                                type="button"
+                                size="small"
+                                severity="secondary"
+                                label="Upload Avatar"
+                                outlined
+                                className="small-button"
+                                onClick={() => fileInputRef.current?.click()}
+                            />
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept=".jpg,.jpeg,.png,.svg"
+                                hidden
+                                onChange={(e) => {
+                                    const file = e.target.files?.[0];
+                                    if (file) handleFileChange(file);
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className='mt-4 mb-2 sm:mb-0' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                <div className="mt-4">
+                    <label className="form-field-label mb-2 font-bold">Details</label>
+                    <div className="grid">
+                        <div className="col-12 md:col-8 lg:col-5">
+                            <label className="form-field-label mb-2">Name</label>
+                            <InputText
+                                name="fullName"
+                                value={formik.values.fullName}
+                                onChange={formik.handleChange}
+                                className="w-full"
+                            />
+                        </div>
+                        <div className="col-12 md:col-8 lg:col-5">
+                            <label className="form-field-label mb-2">Email</label>
+                            <InputText disabled placeholder={userData?.data?.email} value={userData?.data?.email}
+                                className="w-full" />
+                        </div>
+                        <div className="col-12 md:col-8 lg:col-5">
+                            <label className="form-field-label mb-2">Contact Number</label>
+                            <InputText disabled placeholder={userData?.data?.mobile} value={userData?.data?.mobile}
+                                className="w-full" />
+                        </div>
+                        <div className="col-12 md:col-8 lg:col-5">
+                            <label className="form-field-label mb-2">Role</label>
+                            <AutoComplete
+                                multiple
+                                disabled
+                                value={userData?.data?.roles?.map((role: any) => role.name) || []}
+                            />
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <Button
+                    type="submit"
+                    size="small"
+                    label="Save"
+                />
+            </div>
+            <Dialog
+                header={<h5 className='m-0 font-bold'>Replace Profile Picture</h5>}
+                visible={replaceDialogVisible}
+                headerClassName="px-4 py-3 secondary-border-bottom"
+                contentClassName="p-0"
+                style={{ width: '25vw' }}
+                className="solid-confirm-dialog "
+                modal
+                onHide={() => setReplaceDialogVisible(false)}
+            >
+                <div className="p-4">
+                    Do you want to replace the existing profile picture?
+                    <div className="flex justify-content-start mt-4 gap-2">
+                        <Button size="small" label="Confirm" severity="danger" onClick={confirmReplace} />
+                        <Button size="small" outlined label="Cancel" onClick={() => setReplaceDialogVisible(false)} />
+                    </div>
+                </div>
+            </Dialog>
+
+            <Dialog
+                header={<h5 className='m-0 font-bold'>Delete Profile Picture</h5>}
+                visible={deleteDialogVisible}
+                headerClassName="px-4 py-3 secondary-border-bottom"
+                contentClassName="p-0"
+                style={{ width: '25vw' }}
+                modal
+                className="solid-confirm-dialog "
+                onHide={() => setDeleteDialogVisible(false)}
+            >
+                <div className="p-4">
+                    Do you want to delete your profile picture?
+                    <div className="flex justify-content-start mt-4 gap-2">
+                        <Button size="small" label="Confirm" severity="danger" onClick={confirmDelete} />
+                        <Button size="small" outlined label="Cancel" onClick={() => setDeleteDialogVisible(false)} />
+                    </div>
+                </div>
+            </Dialog>
+
+        </form>
+    )
+}

package/dist/components/core/common/SolidCreateButton.tsx

@@ -0,0 +1,48 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Button } from 'primereact/button';
+
+export const SolidCreateButton = ({ createButtonUrl, createActionQueryParams, solidListViewLayout, responsiveIconOnly = false }: any) => {
+    const pathName = usePathname();
+    const createPath = createButtonUrl ? `${createButtonUrl}?${new URLSearchParams(createActionQueryParams).toString()}` : pathName.split('/').slice(0, -1).join('/') + '/form/new?viewMode=edit';
+
+    const icon = solidListViewLayout?.attrs?.addButtonIcon || "pi pi-plus";
+    const label = solidListViewLayout?.attrs?.addButtonTitle || "Add";
+    const className = solidListViewLayout?.attrs?.addButtonClassName || "";
+
+    return (
+        <div>
+            <Link href={createPath}>
+                {responsiveIconOnly ? (
+                    <>
+                        <Button
+                            type="button"
+                            icon={icon}
+                            className={`${className} p-button-sm lg:hidden solid-icon-button `}
+                            size='small'
+                        />
+
+                        <Button
+                            type="button"
+                            icon={icon}
+                            label={label}
+                            className={`${className} hidden lg:inline-flex`}
+                            size='small'
+
+                        />
+                    </>
+                ) : (
+                    <Button
+                        type="button"
+                        icon={icon}
+                        label={label}
+                        className={`${className}`}
+                        size='small'
+                    />
+                )}
+
+            </Link>
+        </div>
+    );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const DocumentSvg = () => {
+    return (
+        <svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fillRule="evenodd" clipRule="evenodd" d="M207 65C210.866 65 214 68.134 214 72C214 75.866 210.866 79 207 79H167C170.866 79 174 82.134 174 86C174 89.866 170.866 93 167 93H189C192.866 93 196 96.134 196 100C196 103.866 192.866 107 189 107H178.826C173.952 107 170 110.134 170 114C170 116.577 172 118.911 176 121C179.866 121 183 124.134 183 128C183 131.866 179.866 135 176 135H93C89.134 135 86 131.866 86 128C86 124.134 89.134 121 93 121H54C50.134 121 47 117.866 47 114C47 110.134 50.134 107 54 107H94C97.866 107 101 103.866 101 100C101 96.134 97.866 93 94 93H69C65.134 93 62 89.866 62 86C62 82.134 65.134 79 69 79H109C105.134 79 102 75.866 102 72C102 68.134 105.134 65 109 65H207ZM207 93C210.866 93 214 96.134 214 100C214 103.866 210.866 107 207 107C203.134 107 200 103.866 200 100C200 96.134 203.134 93 207 93Z" fill="#F9F0FF" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M153.672 63.9997L162.974 131.842L163.809 138.649C164.079 140.841 162.519 142.837 160.327 143.106L101.766 150.297C99.5738 150.566 97.578 149.007 97.3088 146.814L88.2931 73.3865C88.1584 72.2901 88.9381 71.2922 90.0344 71.1576C90.0413 71.1568 90.0483 71.156 90.0552 71.1552L94.9136 70.6102M98.8421 70.1695L103.429 69.655L98.8421 70.1695Z" fill="white" />
+            <path d="M154.91 63.8299C154.816 63.1459 154.186 62.6675 153.502 62.7613C152.818 62.8551 152.34 63.4855 152.433 64.1695L154.91 63.8299ZM162.974 131.842L164.214 131.69C164.214 131.684 164.213 131.678 164.212 131.673L162.974 131.842ZM163.809 138.649L165.05 138.496L163.809 138.649ZM160.327 143.106L160.479 144.347L160.327 143.106ZM101.766 150.297L101.919 151.537L101.766 150.297ZM97.3088 146.814L98.5495 146.662L97.3088 146.814ZM90.0552 71.1552L90.1945 72.3974L90.0552 71.1552ZM95.0529 71.8524C95.739 71.7755 96.2327 71.1569 96.1558 70.4709C96.0788 69.7848 95.4603 69.291 94.7742 69.368L95.0529 71.8524ZM98.7028 68.9273C98.0167 69.0043 97.5229 69.6228 97.5999 70.3089C97.6768 70.9949 98.2954 71.4887 98.9814 71.4117L98.7028 68.9273ZM103.568 70.8972C104.255 70.8202 104.748 70.2017 104.671 69.5156C104.594 68.8296 103.976 68.3358 103.29 68.4128L103.568 70.8972ZM152.433 64.1695L161.735 132.012L164.212 131.673L154.91 63.8299L152.433 64.1695ZM161.733 131.995L162.569 138.801L165.05 138.496L164.214 131.69L161.733 131.995ZM162.569 138.801C162.754 140.309 161.682 141.681 160.174 141.866L160.479 144.347C163.357 143.994 165.403 141.374 165.05 138.496L162.569 138.801ZM160.174 141.866L101.614 149.056L101.919 151.537L160.479 144.347L160.174 141.866ZM101.614 149.056C100.107 149.241 98.7346 148.169 98.5495 146.662L96.0681 146.966C96.4215 149.844 99.0409 151.891 101.919 151.537L101.614 149.056ZM98.5495 146.662L89.5337 73.2341L87.0524 73.5388L96.0681 146.966L98.5495 146.662ZM89.5337 73.2341C89.4833 72.823 89.7756 72.4488 90.1867 72.3983L89.8821 69.9169C88.1005 70.1357 86.8336 71.7572 87.0524 73.5388L89.5337 73.2341ZM90.1867 72.3983C90.1893 72.398 90.1919 72.3977 90.1945 72.3974L89.9159 69.913C89.9046 69.9142 89.8933 69.9156 89.8821 69.9169L90.1867 72.3983ZM90.1945 72.3974L95.0529 71.8524L94.7742 69.368L89.9159 69.913L90.1945 72.3974ZM98.9814 71.4117L103.568 70.8972L103.29 68.4128L98.7028 68.9273L98.9814 71.4117Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M151.14 68.2696L159.56 129.753L160.317 135.922C160.561 137.909 159.167 139.715 157.203 139.956L104.761 146.395C102.798 146.636 101.008 145.221 100.764 143.234L92.6141 76.8572C92.4795 75.7608 93.2591 74.7629 94.3555 74.6283L100.843 73.8318" fill="#F9F0FF" />
+            <path d="M110.672 51.25H156.229C156.866 51.25 157.481 51.4715 157.971 51.8721L158.173 52.0547L171.616 65.4902C172.132 66.0059 172.422 66.7053 172.422 67.4346V130C172.422 131.519 171.191 132.75 169.672 132.75H110.672C109.153 132.75 107.922 131.519 107.922 130V54C107.922 52.4812 109.153 51.25 110.672 51.25Z" fill="white" stroke="var(--primary-color)" strokeWidth="2.5" />
+            <path d="M156.672 52.4023V63.9995C156.672 65.6564 158.015 66.9995 159.672 66.9995H167.605" stroke="var(--primary-color)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M118 118H144M118 67H144H118ZM118 79H161H118ZM118 92H161H118ZM118 105H161H118Z" stroke="var(--primary-400)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}

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

@@ -0,0 +1,64 @@
+"use client"
+import { Dialog } from 'primereact/dialog';
+import React, { useState } from 'react'
+import { SolidImportStepper } from './SolidImportStepper';
+import { SolidImportInstructions } from './SolidImportInstructions';
+// import { SolidImportWrapper } from './SolidImportWrapper';
+import { SolidImportDropzone } from './SolidImportDropzone';
+import { SolidImportTransaction } from './SolidImportTransaction';
+import { SolidImportTransactionStatus } from './SolidImportTransactionStatus';
+
+export const SolidGenericImport = ({
+    openImportDialog,
+    setOpenImportDialog,
+    listViewMetaData,
+    handleFetchUpdatedRecords
+}: any) => {
+    const [importStep, setImportStep] = useState<number>(1)
+    const [transactionId, setTransactionId] = useState(null);
+    const [importStatusResult, setImportStatusResult] = useState<any>(null)
+    const modelMetadataId = listViewMetaData?.data?.solidView?.model?.id;
+    return (
+        <Dialog
+            header={<h5 className='m-0'>Import Data</h5>}
+            visible={openImportDialog}
+            style={{ width: '60vw' }}
+            onHide={() => { if (!openImportDialog) return; setOpenImportDialog(false); }}
+            headerClassName="px-4 py-2 secondary-border-bottom solid-import-dialog-header"
+            contentClassName="p-0"
+            className='solid-import-dialog'
+        >
+            <SolidImportStepper importStep={importStep} setImportStep={setImportStep} />
+            <div className='px-3 md:px-4 py-3'>
+                {importStep === 1 &&
+                    <SolidImportInstructions setImportStep={setImportStep} listViewMetaData={listViewMetaData} />
+                }
+                {/* {importStep === 2 &&
+                    <SolidImportWrapper handleFetchUpdatedRecords={handleFetchUpdatedRecords} setImportStep={setImportStep} listViewMetaData={listViewMetaData} setOpenImportDialog={setOpenImportDialog} />
+                } */}
+                {importStep === 2 &&
+                    <SolidImportDropzone
+                        setImportStep={setImportStep}
+                        setTransactionId={setTransactionId}
+                        modelMetadataId={modelMetadataId}
+                    />
+                }
+                {importStep === 3 &&
+                    <SolidImportTransaction
+                        transactionId={transactionId}
+                        setImportStatusResult={setImportStatusResult}
+                        setImportStep={setImportStep}
+                    />
+                }
+                {importStep === 4 &&
+                    <SolidImportTransactionStatus
+                        importStatusResult={importStatusResult}
+                        transactionId={transactionId}
+                        setOpenImportDialog={setOpenImportDialog}
+                        handleFetchUpdatedRecords={handleFetchUpdatedRecords}
+                    />
+                }
+            </div>
+        </Dialog>
+    )
+}

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

@@ -0,0 +1,125 @@
+"use client"
+import { useCallback, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Button } from 'primereact/button'
+import styles from './SolidImport.module.css'
+import { DocumentSvg } from './DocumentSvg';
+import { useCreateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
+import { Toast } from 'primereact/toast';
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMetadataId }: any) => {
+    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 [file, setFile] = useState<File | null>(null);
+    const [createImportTransaction, { isLoading }] = useCreateImportTransactionMutation();
+
+
+    const uploadFile = async (uploadFile: File) => {
+        const formData = new FormData();
+        formData.append('fileLocation', uploadFile);
+        formData.append('modelMetadataId', modelMetadataId);
+
+        try {
+            const response = await createImportTransaction(formData).unwrap();
+            console.log('Upload success:', response);
+            if (response?.statusCode === 200) {
+                setFile(uploadFile);
+                showToast("success", ERROR_MESSAGES.FILE_UPLOAD, ERROR_MESSAGES.FILE_UPLOAD_SUCCESSFULLY);
+                setTransactionId?.(response?.data?.id);
+            } else {
+                showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_UPLOAD_FILE)
+            }
+        } catch (error) {
+            console.error(ERROR_MESSAGES.FAILED_UPLOAD_FILE, error);
+            showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_UPLOAD_FILE)
+        }
+    };
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (acceptedFiles.length > 0) {
+            const selectedFile = acceptedFiles[0];
+            uploadFile(selectedFile); // 👈 Auto upload on drop
+        }
+    }, []);
+
+    const { getRootProps, getInputProps, open } = useDropzone({
+        onDrop,
+        accept: {
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+            'text/csv': ['.csv']
+        },
+        multiple: false,
+    });
+
+    const removeFile = () => {
+        setFile(null);
+    };
+
+    const formatBytes = (bytes: number) => {
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        if (bytes === 0) return '0 Byte';
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+    };
+
+    return (
+        <div>
+            <Toast ref={toast} />
+            <div className={styles.SolidImportContextWrapper}>
+                <div {...getRootProps({ className: styles.dropzone })} className='h-full flex flex-column align-items-center justify-content-center'>
+                    <input {...getInputProps()} />
+                    {/* {!file ? ( */}
+                    <div className={""}>
+                        <div className='flex justify-content-center'>
+                            <DocumentSvg />
+                        </div>
+                        <h5 className='text-center solid-primary-black-text'>Drop or upload a file to import</h5>
+                        <p className='text-center m-0'>Excel files are recommended as formatting is automatic.<br />
+                            But, you can also use .csv files</p>
+                        <div className='flex justify-content-center mt-3'>
+                            <Button label="Click to browse" size="small" severity='secondary' outlined />
+                        </div>
+                    </div>
+                    {/* ) : ( */}
+                    {file &&
+                        <div className="flex align-items-start justify-content-between gap-3 p-3 mt-4 w-full md:w-8" style={{ border: '1px solid var(--primary-light-color)', borderRadius: 6 }} onClick={(e) => e.stopPropagation()}>
+                            <div>
+                                <p className='m-0'><strong>File:</strong> {file.name}</p>
+                                <p className='m-0'><strong>Type:</strong> {file.type || 'Unknown'}</p>
+                                <p className='m-0'><strong>Size:</strong> {formatBytes(file.size)}</p>
+                            </div>
+                            <div>
+                                <Button size="small" icon="pi pi-trash" text onClick={removeFile} />
+                            </div>
+                        </div>
+                    }
+                    {/* )} */}
+                </div>
+            </div>
+            <div className='mt-3 flex align-items-center gap-3'>
+                <Button
+                    label='Continue'
+                    size='small'
+                    onClick={() => {
+                        if (!file) {
+                            showToast("error", ERROR_MESSAGES.MISSING_FILE, ERROR_MESSAGES.FAILED_UPLOAD_FILE);
+                            return;
+                        }
+                        setImportStep(3);
+                    }}
+                    disabled={!file}
+                />
+            </div>
+        </div>
+    )
+}