src/component/mymedia/MyMedia.js

@@ -187,8 +187,8 @@ console.log('imageLink', imageLink)
                                         item?.file_type === undefined
                                             ? "icons/01.png"
                                             : "icons/" + item.file_type + ".png";
-                                    return (<div key={index} className="widget-text">
-                                        <div className="media align-items-center" onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
+                                    return (<div key={index} className={`widget-text ${imageLink == file_url && 'bg-light'}`}>
+                                        <div className={`media align-items-center`} onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
                                             <img src={getImage(avtarImage)}
                                                 // src={`assets/img/file-icon/${item.file_type}.png`}
                                                 className="img-fluid"
@@ -223,7 +223,15 @@ console.log('imageLink', imageLink)
                         </div>
                         <div className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
                             {imageLink &&
-                                <img src={imageLink} alt='file-image' />
+                                <img className="w-100 h-auto" src={imageLink} alt='file-image' />
+                            }
+                        </div>
+                        <div className="card-header d-flex justify-content-between align-items-center">
+                            {imageLink &&
+                            <>
+                                <p>0 x 0 px</p>
+                                <p>size: 0 bytes</p>
+                            </>
                             }
                         </div>
                     </div>

src/component/reports/ProductReportTable.jsx

@@ -7,7 +7,7 @@ export default function ProductReportTable() {
             <div className="col-md-12 m-b-30">
                 <div className="d-block d-sm-flex flex-nowrap align-items-center">
                     <div className="page-title mb-2 mb-sm-0">
-                        <h4>Payments Report</h4>
+                        <h4>Products Report</h4>
                     </div>
                 </div>
             </div>

src/component/reports/Reports.jsx

@@ -5,12 +5,13 @@ import queryKeys from "../../services/queryKeys";
 import {getReportsTopicsList} from "../../services/services";
 import PaymentReportTable from "./PaymentReportTable";
 import ProductReportTable from "./ProductReportTable";
+import sortArrayByListOrder from "../../helpers/sortArrayByLIstOrder";
 
 
 export default function Reports() {
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.my_files,
+        queryKey: queryKeys.topics,
         queryFn: () => {
             let reqData = {
                 token: localStorage.getItem('token'), // USER TOKEN
@@ -22,6 +23,13 @@ export default function Reports() {
 
     const reportTopicList = data?.data?.topics?.topics;
 
+    const renderedTable = {
+        payment: <PaymentReportTable />,
+        product: <ProductReportTable />
+    }
+
+    const sortedReportTopicList= sortArrayByListOrder(reportTopicList ? reportTopicList : []) // SORTED SETTINGSCONFIG
+
     return (
         <>
             <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
@@ -36,28 +44,29 @@ export default function Reports() {
                             {/*</div>*/}
                             <div className="card-body">
                                 <div className="tab tab-vertical">
-                                    <ul className="nav nav-tabs" role="tablist">
-                                        {reportTopicList && reportTopicList.map((item, index) => {
-                                                return (
-                                                    <li className="nav-item">
-                                                        <a className="nav-link" id={`report-${item.url}-tab`}
-                                                           data-toggle="tab" href={`#`} role="tab"
-                                                           aria-controls="home-09" aria-selected="true"> {item.name}</a>
-                                                    </li>
-                                                )
-                                            }
-                                        )
-                                        }
+                                    
+                                    {/* <!-- 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">
-                                        <div className="tab-pane fade active show" id="home-09" role="tabpanel"
-                                             aria-labelledby="home-09-tab">
-                                            {<PaymentReportTable/>}
-                                        </div>
-                                        <div className="tab-pane fade" id="profile-09" role="tabpanel"
-                                             aria-labelledby="profile-09-tab">
-                                            {<ProductReportTable/>}
-                                        </div>
+                                        {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>

src/helpers/sortArrayByLIstOrder.js

@@ -0,0 +1,17 @@
+function sortArrayByListOrder(data) {
+  // Convert object to array if needed
+  const array = Array.isArray(data)
+    ? [...data]
+    : Object.values(data);
+
+  // Sort ascending by list_order
+  array.sort((a, b) => {
+    const orderA = a.list_order ?? 0;
+    const orderB = b.list_order ?? 0;
+    return orderA - orderB;
+  });
+
+  return array;
+}
+
+export default sortArrayByListOrder

src/services/queryKeys.js

@@ -12,6 +12,7 @@ const queryKeys = {
     subscriptions: ['subscriptions'],
     profile_data: ['profile_data'],
     my_files: ['my_files'],
+    topics: ['topics'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],