necesito que me ayudes a consegui este punto 1- En el modulo casos, poner un boton "Exportar" que muestre un alert con un mensaje cualquiera. 2- Logrado el punto anterior, en vez del alert, que llame al endpoint /Cases/generate-excel. Y este es el codigo espero te sirva y puedas darme la solucion: import { useRouter } from "next/router"; import { Col, Button } from "react-bootstrap"; import FilteringResolvers from "components/_common/filtering-resolvers"; import { useState, useEffect, Dispatch, CSSProperties } from "react"; import { EViewTypes } from "interfaces/context/IPreferencesContext"; import CreateButton from "./CreateButton"; import { EModuleUrlConstants, EModulesCodes } from "interfaces/ICommon"; import { usePreferences } from "hooks/usePreferences"; import { permissionFront } from "auth/permissions"; import AttachButton from "./AttachButton"; import { KanbanDropdown } from "./Kanban/KanbanDropDown"; import { ListViewSearch } from "./DataTable/ListViewSearch"; import { ActionDropdown, IActionDropdownOpt } from "./CallToActions/ActionDropdown"; import DashboardFilter from "./DashboardFilter"; import { IoOptionsOutline } from "react-icons/io5"; import PrimaryButton from "./buttons/PrimaryButton"; import axios from 'axios'; export interface ICtaProps { ModuleText: string; setViewFilter: (value: boolean) => void; viewFilter: boolean; moduleUrl: EModuleUrlConstants; hideBtnFilter?: boolean; hideBtnCreateBottom?: boolean; showInputSearch?: boolean; setQuery?: (value: string) => void; userHasCreatePermission?: boolean; showExportBtn?: boolean; showDropdownKanbanListView?: boolean; showBtnTablero?: boolean; userHasViewBoardPermission?: boolean; setShowModalExportInfoBCP?: any; showModal?: () => void; userHasCreateAttachmentPermission?: boolean; showNotificationSelectedFilter?: boolean; attachBottomText?: string; dropdownOpt?:IActionDropdownOpt[]; // Dashboard setDashboardDailyData?: Dispatch<any>; setDashboardMonthlyData?: Dispatch<any>; setDashboardYearlyData?: Dispatch<any>; setDashboardMonthlyfilterLabel?: Dispatch<string>; setDashboardYearlyfilterLabel?: Dispatch<string>; } export default function CallToActions(props: ICtaProps) { const { ModuleText, setViewFilter, viewFilter, moduleUrl, hideBtnFilter, setQuery, showInputSearch, userHasCreatePermission, //showExportBtn = false, showDropdownKanbanListView = false, showBtnTablero = false, userHasViewBoardPermission = false, showModal, setShowModalExportInfoBCP, userHasCreateAttachmentPermission, showNotificationSelectedFilter = true, dropdownOpt, hideBtnCreateBottom = false, // Dashboard setDashboardDailyData, setDashboardMonthlyData, setDashboardMonthlyfilterLabel, setDashboardYearlyData, setDashboardYearlyfilterLabel } = props; const moduleCode = moduleUrl.replace('/', '') as EModulesCodes; const { setModuleLastViewSelected, getModuleSideFilter, getModuleLastViewSelected, setModuleLastPageSelected } = usePreferences(); const [showLupita, setShowLupita] = useState<boolean>(true); const [showFilterNotification, setShowFilterNotification] = useState<boolean>(false); const modulo = moduleUrl; const toggleViewFilter = () => { window.scrollTo(0, 0); setViewFilter(!viewFilter); }; const handleChange = (view: EViewTypes) => { setModuleLastViewSelected(moduleCode, view); } const styleFilter:CSSProperties = { background: "#f2f2f2", border: 'none', color: 'gray' }; const router = useRouter(); const exportCase = () => window.open(`/cases/export`); const handleSearch = (e: any) => { if (document.querySelector("#search")) { const search: any = document.querySelector("#search"); if(search.value){ setModuleLastPageSelected(moduleUrl, 1); } setShowLupita(search.value ? false : true); e && e?.keyCode == 13 && setQuery(search.value || ""); } }; const handleClearSearch = () => { if (document.querySelector("#search")) { const search: any = document.querySelector("#search"); search.value = ""; setShowLupita(search.value ? false : true); setQuery(""); } } const filterSelectedName = getModuleSideFilter(moduleUrl); // console.log({ filterSelectedName }) const filterSelected = Object.getOwnPropertyNames(filterSelectedName); useEffect(() => { setShowFilterNotification((showNotificationSelectedFilter && filterSelected.length > 0 && viewFilter == false)); }, [filterSelected]); const showFilterButton = modulo === EModuleUrlConstants.CasesOrigins || modulo === EModuleUrlConstants.AccessChannels || modulo === EModuleUrlConstants.ProductsBCPS || modulo === EModuleUrlConstants.Countries || modulo === EModuleUrlConstants.Departments || modulo === EModuleUrlConstants.Cities; const [isLoading, setIsLoading] = useState(false); const handleExport = async () => { try { setIsLoading(true); // Hacemos la petición al endpoint sin filtros por ahora const response = await axios.get('/Cases/generate-excel', { responseType: 'blob' // Necesario para recibir archivos }); // Crear un objeto URL para el archivo recibido const url = window.URL.createObjectURL(new Blob([response.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })); // Crear y activar el enlace de descarga const link = document.createElement('a'); link.href = url; link.setAttribute('download', `casos_${new Date().toISOString().split('T')[0]}.xlsx`); document.body.appendChild(link); link.click(); // Limpieza document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (error) { console.error('Error al exportar:', error); } finally { setIsLoading(false); } }; return ( <> <Col sm={12} md={4} className="d-flex"> { showFilterNotification && <span className="filterNotification"></span> } { !hideBtnFilter && <Button variant="secondary" style={{ ...styleFilter, display: showFilterButton ? "none" : "block" }} onClick={() => toggleViewFilter()} className={"me-4 btnFiltro"} > <div className="d-flex" > <IoOptionsOutline size={22} /> </div> </Button> } {showInputSearch && ( <ListViewSearch moduleText={ModuleText} handleClearSearch={handleClearSearch} handleSearch={handleSearch} showLupita={showLupita} /> )} {ModuleText == "Caso" && <FilteringResolvers />} {ModuleText == "DailyDashboard" && <DashboardFilter setDashboardDailyData={setDashboardDailyData} filter="DailyDashboard" />} { ModuleText == "MonthlyDashboard" && <DashboardFilter setDashboardMonthlyData={setDashboardMonthlyData} filter="MonthlyDashboard" setDashboardMonthlyfilterLabel={setDashboardMonthlyfilterLabel} /> } { ModuleText == "YearlyDashboard" && <DashboardFilter setDashboardYearlyData={setDashboardYearlyData} filter="YearlyDashboard" setDashboardYearlyfilterLabel={setDashboardYearlyfilterLabel} /> } </Col> <Col sm={12} md={8} className="header-right-buttons busqueda"> <PrimaryButton title="Exportar" onClick={handleExport} disabled={isLoading} style={{ borderRadius: '4px', height: '38px', fontSize: '14px', marginRight: '10px' }} > {isLoading ? ( <> <i className="fas fa-spinner fa-spin me-2"></i> Exportando... </> ) : ( <> <i className="fas fa-file-export me-2"></i> Exportar </> )} </PrimaryButton> {showDropdownKanbanListView && ( <KanbanDropdown moduleSelected={getModuleLastViewSelected(moduleCode)} handleChange={handleChange} /> )} <div className="btn-tablero"> {(showBtnTablero && userHasViewBoardPermission) && ( <Button onClick={exportCase} variant="secondary" style={{ background: "#FFF", color: "black", marginRight: "24px", }} > Tablero Casos </Button> )} </div> { (userHasCreatePermission && !hideBtnCreateBottom) && ( <CreateButton moduleUrl={moduleUrl} text={ModuleText} showModal={showModal} /> ) } { ( !!dropdownOpt?.length ) && ( <ActionDropdown title="Acciones" options={dropdownOpt} /> ) } </Col> </> ); } TypeScript generate-function