Fix admin

frontend/src/App.jsx

@@ -105,7 +105,7 @@ function App() {
           body: JSON.stringify({
             userId: user.ID,
           }),
-        },
+        }
       );
 
       if (!response.ok) {
@@ -117,14 +117,14 @@ function App() {
       if (result.success) {
         console.log(
           "Recommendations generated successfully:",
-          result.recommendations,
+          result.recommendations
         );
         setRecommendations(result.recommendations);
 
         // Store recommendations in session storage for access across the app
         sessionStorage.setItem(
           "userRecommendations",
-          JSON.stringify(result.recommendations),
+          JSON.stringify(result.recommendations)
         );
       } else {
         console.error("Error generating recommendations:", result.message);
@@ -178,7 +178,7 @@ function App() {
             email: userData.email,
             // Add any other required fields
           }),
-        },
+        }
       );
 
       if (!response.ok) {
@@ -227,7 +227,7 @@ function App() {
             email: tempUserData.email,
             code: code,
           }),
-        },
+        }
       );
 
       if (!response.ok) {
@@ -271,7 +271,7 @@ function App() {
             "Content-Type": "application/json",
           },
           body: JSON.stringify(userData),
-        },
+        }
       );
 
       if (!response.ok) {
@@ -382,7 +382,7 @@ function App() {
               email: formValues.email,
               password: formValues.password,
             }),
-          },
+          }
         );
 
         if (!response.ok) {

frontend/src/api/admin.js

@@ -7,10 +7,10 @@ const client = axios.create({
 });
 
 // Users
-export const getUsers = async (page, limit = 10) => {
+export const getUsers = async (page = 1, limit = 10) => {
   try {
     const { data } = await client.get(
-      `/user/getUserWithPagination?page=${page}&limit=${limit}`,
+      `/user/getUserWithPagination?page=${page}&limit=${limit}`
     );
     return { users: data.users, total: data.total };
   } catch (error) {
@@ -37,10 +37,10 @@ export const verifyIsAdmin = async (id) => {
 };
 
 // Products
-export const getProducts = async (page, limit = 10) => {
+export const getProducts = async (page = 1, limit = 10) => {
   try {
     const { data } = await client.get(
-      `/product/getProductWithPagination?limit=${limit}&page=${page}`,
+      `/product/getProductWithPagination?limit=${limit}&page=${page}`
     );
     return { products: data.products, total: data.totalProd };
   } catch (error) {
@@ -61,7 +61,7 @@ export const removeProduct = async (id) => {
 export const getCategories = async (page, limit = 10) => {
   try {
     const { data } = await client.get(
-      `/category/getCategories?page=${page}&limit=${limit}`,
+      `/category/getCategories?page=${page}&limit=${limit}`
     );
     return { data: data.data, total: data.total };
   } catch (error) {
@@ -81,6 +81,7 @@ export const addCategory = async (name) => {
 export const removeCategory = async (id) => {
   try {
     const { data } = await client.delete(`/category/${id}`);
+    if (data.error) throw Error(data.error);
     return { message: data.message };
   } catch (error) {
     return handleError(error);
@@ -88,10 +89,10 @@ export const removeCategory = async (id) => {
 };
 
 // Transactions
-export const getTransactions = async (page, limit = 10) => {
+export const getTransactions = async (page = 1, limit = 10) => {
   try {
     const { data } = await client.get(
-      `/transaction/getTransactions?limit=${limit}&page=${page}`,
+      `/transaction/getTransactions?limit=${limit}&page=${page}`
     );
     return { transactions: data.data, total: data.total };
   } catch (error) {
@@ -112,7 +113,7 @@ export const removeTransaction = async (id) => {
 const handleError = (error) => {
   const { response } = error;
   if (response?.data) return response.data;
-  return { error: error.message || error };
+  return alert(error.message || error);
 };
 
 // Optional: export client if you want to use it elsewhere

frontend/src/pages/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import {
   getUsers,
   removeUser,
@@ -11,10 +11,8 @@ import {
 } from "../api/admin";
 import { MdDelete } from "react-icons/md";
 import { IoAddCircleSharp } from "react-icons/io5";
-import { FaHome } from "react-icons/fa";
 import Pagination from "../components/Pagination";
 import CategoryForm from "../components/CategoryForm";
-import DashboardNav from "../components/DashboardNav";
 import { useNavigate } from "react-router-dom";
 
 // Spinner Component
@@ -64,24 +62,32 @@ const Dashboard = ({
   const [loading, setLoading] = useState(true);
   const pageLimit = 10;
 
+  const currentTab = useRef();
+
+  //Reset the current page to 1 whenever we switch between tab
+  useEffect(() => {
+    if (currentTab.current != idKey) setCurrentPage(1);
+    currentTab.current = idKey;
+  }, [idKey]);
+
   const fetchItems = useCallback(
     (page = 1, limit = 10) => {
-      setLoading(true);
       fetchDataFn(page, limit)
         .then((res) => {
+          console.log(res);
+
           const data =
             res.users || res.products || res.transactions || res.data || [];
           setItems(data);
           setTotal(res.total);
         })
         .catch((error) => {
-          console.error("Error fetching data:", error);
           setItems([]);
           setTotal(0);
         })
         .finally(() => setLoading(false));
     },
-    [fetchDataFn],
+    [fetchDataFn]
   );
 
   const handleRemove = (id) => {
@@ -323,7 +329,9 @@ export default function AdminDashboardTabs() {
           <select
             className="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 p-2"
             value={activeTab}
-            onChange={(e) => setActiveTab(parseInt(e.target.value))}
+            onChange={(e) => {
+              setActiveTab(parseInt(e.target.value));
+            }}
           >
             {tabs.map((tab, index) => (
               <option key={tab.key} value={index}>
@@ -343,7 +351,9 @@ export default function AdminDashboardTabs() {
                   ? "text-green-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
                   : "text-gray-600 hover:text-green-700 bg-gray-50"
               }`}
-              onClick={() => setActiveTab(index)}
+              onClick={() => {
+                setActiveTab(index);
+              }}
             >
               <span className="inline-block mr-2">{tab.icon}</span>
               {tab.title}