User Profile Modal - Copy this Html, Bootstrap Component to your project

<ConfirmationModal modalIsOpen={showProfileModal} modalTitle={t("User Profile")} modalDescription={ <div> <Row> <Col xs={3}> <img src={storefrontdetails[0].store_front_role.brand.image ? brandImagePath + storefrontdetails[0].store_front_role.brand.image : brand2} alt="TrustDish Logo" style={{ width: '100%', objectFit: 'contain' }} /> </Col> <Col xs={9}> <h5>{selectedUser.first_name} {selectedUser.last_name}</h5> <p>{t("Email")}: {selectedUser.email}</p> <p>{t("Phone")}: {selectedUser.phone || ' '}</p> <p>{t("Role")}: {selectedUser.role || t("User")}</p> </Col> </Row> {/* Test Link Section */} <div style={{ marginBottom: '20px', textAlign: 'center' }}> <h5>{t("Test Link")}</h5> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}> <a href={selectedUser?.testLink} target="_blank" rel="noopener noreferrer" style={{ color: '#007bff', textDecoration: 'underline', wordBreak: 'break all' }} > {selectedUser?.testLink} </a> <Button variant="outline primary" size="sm" onClick={() => { if (selectedUser?.testLink) { navigator.clipboard.writeText(selectedUser.testLink); toast.success(t("Link copied to clipboard!")); } else { toast.error(t("No link available to copy!")); } }} > {t("Copy")} </Button> </div> </div> {/* Progress Bar Section */} <div style={{ marginBottom: '20px' }}> <h6>{t("Progress")}</h6> <div style={{ background: '#e9ecef', borderRadius: '10px', overflow: 'hidden', height: '20px' }}> <div style={{ width: `${selectedUser?.progress || 0}%`, background: '#007bff', height: '100%', transition: 'width 0.5s ease', }} /> </div> <p style={{ textAlign: 'center', marginTop: '5px' }}> {`${selectedUser?.progress || 0}% ${t("Completed")}`} </p> </div> {/* User Details Section */} </div> } onConfirm={() => console.log('Confirmed')} // Handle confirmation logic here handlemodal={closeProfileModal} t={t} />