MermsPanelReactJS/src/component/reports/Reports.jsx

import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import {useQuery} from "@tanstack/react-query";
import queryKeys from "../../services/queryKeys";
import {getReportsTopicsList} from "../../services/services";
import PaymentReportTable from "./PaymentReportTable";
import ProductReportTable from "./ProductReportTable";
import sortArrayByListOrder from "../../helpers/sortArrayByLIstOrder";
import SystemReportTable from "./SystemReportTable";


export default function Reports() {

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.topics,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid') // USER UID
            }
            return getReportsTopicsList(reqData)
        }
    })

    const reportTopicList = data?.data?.topics?.topics;

    const renderedTable = {
        payment: <PaymentReportTable />,
        product: <ProductReportTable />,
        system: <SystemReportTable />
    }

    const sortedReportTopicList= sortArrayByListOrder(reportTopicList ? reportTopicList : []) // SORTED SETTINGSCONFIG

    return (
        <>
            <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
            <div className="row">
            {isFetching ? 
            <>
                <div className="col-12">
                    <p className='text-mute'>Loading...</p>
                </div>
            </>
            : isError ?
            <div className="col-12">
                <p className='text-danger'>{error?.message}</p>
            </div>
            :
            <div>
                <div>
                    <div className="card card-statistics" style={{minHeight: '550px'}}>
                        {/*<div className="card-header">*/}
                        {/*    <div className="card-heading">*/}
                        {/*        <h4 className="card-title"> Tab vertical </h4>*/}
                        {/*    </div>*/}
                        {/*</div>*/}
                        <div className="card-body">
                            <div className="tab tab-vertical">
                                
                                {/* <!-- Tabs --> */}
                                <ul className="nav nav-tabs" id="myTab" role="tablist">
                                    {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
                                        return (
                                            <li key={index} className="nav-item" role="presentation">
                                                <a className={`nav-link ${index == 0 && 'active'}`} id={`tab-${item?.url}`} href="#" data-bs-toggle="tab" data-bs-target={`#content-${item?.url}`} type="button" role="tab">
                                                    {item?.name}
                                                </a>
                                            </li>
                                        )
                                    })}
                                </ul>

                                {/* <!-- Tab Content --> */}
                                <div className="tab-content">
                                    {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
                                        return (
                                            <div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel">
                                                {renderedTable[item?.url]}
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            }
            </div>
        </>
    )
}