Add 30 n12345688400

webapp/src/app/[locale]/(GlobalWrapper)/(Auth)/dashboard/(home)/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react'
+import { useEffect, useCallback } from 'react'
 import GeneralLook from '@/components/dashboard/home/generalLook'
 import MembersOverviewChart from '@/components/dashboard/home/membersOverviewChart'
 import ServicesSubscriptions from '@/components/dashboard/home/servicesSubscriptions'
@@ -12,41 +12,60 @@ import { AppDispatch } from '@/redux/store';
 import { load } from '@/redux/features/statistics-slice'
 import CircularProgress from '@mui/material/CircularProgress';
 import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
 
 export default function Page() {
-
   const dispatch = useDispatch<AppDispatch>()
   const t = useTranslations('statistics');
 
   const report = useAppSelector((state) => state.statisticsReducer.value.report)
-  const loadedFirstTime = useAppSelector((state) => state.statisticsReducer.value.loadedFirstTime)
   const isLoading = useAppSelector((state) => state.statisticsReducer.value.isLoading)   
 
-  useEffect(() => {
-    if(loadedFirstTime) return;
-    if(isLoading) return;
-    async function a()
-    {
-      await dispatch(load({}))
+  const fetchData = useCallback(async () => {
+    try {
+      await dispatch(load({ forceRefresh: true }));
+    } catch (error) {
+      console.error('Failed to fetch dashboard data:', error);
     }
-    a()
-  }, [])
+  }, [dispatch]);
 
-  if(isLoading)
-  {
+  useEffect(() => {
+    // Always fetch fresh data when the component mounts
+    fetchData();
+    
+    // Set up interval to refresh data every 5 minutes
+    const intervalId = setInterval(fetchData, 5 * 60 * 1000);
+    
+    // Clean up interval on component unmount
+    return () => clearInterval(intervalId);
+  }, [fetchData]);
+
+  if (isLoading && !report) {
     return (
-      <>
       <div className="w-full h-[100vh] flex items-center justify-center gap-5">
         <CircularProgress color="secondary" size={22} />                
         <h1 className="dark:text-text-light text-text">{t('loading')}...</h1>
       </div>
-      </>
     )
   }
 
   return (
     <>
       <main className="min-h-[250px] max-h-[750px]">
+        <div className="w-full flex justify-end mb-4">
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={fetchData}
+            disabled={isLoading}
+            className="flex items-center gap-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+            {t('refresh')}
+          </Button>
+        </div>
+        
         <main className="w-full min-w-screen min-h-screen h-auto flex flex-col lg:gap-7 gap-3 pb-[50px]">
           <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[500px] items-stretch">
             <GeneralLook/>

webapp/src/redux/features/statistics-slice.ts

@@ -390,18 +390,18 @@ const initialState = {
 // load data ability
 const load = createAsyncThunk(
     'statistics/load',
-    async (actionPayload : {}, thunkAPI) => {
+    async (actionPayload: { forceRefresh?: boolean } = {}, thunkAPI) => {
         try {
-            let { data } = await axios.get(`/api/user/actions/${ACTION_NAME}`)
-            if(data.success)
-            {
+            // Add a timestamp to the URL to prevent caching when forceRefresh is true
+            const timestamp = actionPayload.forceRefresh ? `?t=${Date.now()}` : '';
+            let { data } = await axios.get(`/api/user/actions/${ACTION_NAME}${timestamp}`)
+            if (data.success) {
                 return data
-            }
-            else 
-            {
+            } else {
                 return { success: false }
             }
         } catch (err) {
+            console.error('Error loading statistics:', err);
             return { success: false }
         }
     }
@@ -422,8 +422,14 @@ export const statistics = createSlice({
         })
         builder.addCase(load.fulfilled, (state: IinitialState, action) => {
             state.value.isLoading = false;
+            if (action.payload?.success && action.payload.data) {
                 state.value.loadedFirstTime = true;
                 state.value.report = action.payload.data;
+            }
+        })
+        builder.addCase(load.rejected, (state: IinitialState, action) => {
+            state.value.isLoading = false;
+            console.error('Failed to load statistics:', action.error);
         })
     }
 })