webapp/src/components/dashboard/home/incomeOutcome.tsx

@@ -11,7 +11,7 @@ export default function IncomeOutcome()
 {
     // get needed redux state
     const report = useAppSelector((state) => state.statisticsReducer.value.report);
-    const settings = useAppSelector((state) => state.settingsReducer.value);
+    const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol || '$');
     const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
     const [isClient, setIsClient] = useState(false);
     
@@ -27,8 +27,8 @@ export default function IncomeOutcome()
         setIsClient(true);
     }, []);
     
-    // if loading or no report or settings not loaded, show loading spinner
-    if (!report || !isClient || !settings?.appGeneralSettings) {
+    // if loading or no report, don't render the chart
+    if (!report || !isClient) {
         return (
             <div className="w-full h-[350px] flex items-center justify-center">
                 <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
@@ -36,9 +36,6 @@ export default function IncomeOutcome()
         );
     }
     
-    // Get currency symbol with fallback to '$' if not available
-    const currencySymbol = settings.appGeneralSettings.currencySymbol || '$';
-    
     // prepare chart data
     const data = [report?.totalIncome || 0, report?.totalOutcome || 0];
     // prepare chart labels

webapp/src/components/dashboard/home/servicesSubscriptions.tsx

@@ -2,7 +2,6 @@ import { useAppSelector } from '@/redux/store';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Cookies from 'universal-cookie';
-import { useState, useEffect } from 'react';
 const ReactApexChart = dynamic(() => import('react-apexcharts'), {
     ssr: false,
 });
@@ -10,56 +9,34 @@ const ReactApexChart = dynamic(() => import('react-apexcharts'), {
 export default function ServicesSubscriptions()
 {
     // get redux needed state
-    const report = useAppSelector((state) => state.statisticsReducer.value.report);
-    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
-    const [isClient, setIsClient] = useState(false);
-    
+    const report = useAppSelector((state) => state.statisticsReducer.value.report)
+    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType)
     // declare global variables
     const cookies = new Cookies();
     const t = useTranslations('statistics');
-    const locale = cookies.get("NEXT_LOCALE");
-    const isRtl = locale === 'ar';
-    const isDark = themeType === 'dark';
-    
-    // Set isClient to true after component mounts
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
-    
-    // if loading or no report, show loading spinner
-    if (!report || !isClient) {
-        return (
-            <div className="w-full h-[350px] flex items-center justify-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
-            </div>
-        );
-    }
-
-    // setup chart data with null checks
-    const data = report?.servicesNameAndSubscribers?.value?.map((v: {
-        _id: string;
-        name: string;
-        totalSubscribers: number;
-    }) => v?.totalSubscribers) || [];
-    
-    // setup chart labels with null checks
-    const labels = report?.servicesNameAndSubscribers?.value?.map((v: {
-        _id: string;
-        name: string;
-        totalSubscribers: number;
-    }) => v?.name) || [];
-    
-    // Return empty state if no data
-    if (data.length === 0 || labels.length === 0) {
-        return (
-            <div className="w-full h-[350px] flex items-center justify-center">
-                <p>{t('noDataAvailable')}</p>
-            </div>
-        );
-    }
-    
+    const locale = cookies.get("NEXT_LOCALE")
+    const isRtl = locale == 'ar' ? true : false
+    const isDark = themeType == 'dark' ? true : false
+    // if loading show load screen
+    if(!report) return
+    // setup chart data
+    let data = report?.servicesNameAndSubscribers.value.map((v : {
+        _id: string,
+        name: string,
+        totalSubscribers: number,
+    } , i : number) => {
+        return v?.totalSubscribers;
+    })
+    // setup chart labels
+    let labels = report?.servicesNameAndSubscribers.value.map((v : {
+        _id: string,
+        name: string,
+        totalSubscribers: number,
+    } , i : number) => {
+        return v?.name;
+    })
     // setup chart options
-    const options = {
+    var options = {
             series: [{
             name: t('subscription'),
             data: data

webapp/src/components/dashboard/home/workersJobTypes.tsx

@@ -2,7 +2,6 @@ import { useAppSelector } from '@/redux/store';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Cookies from 'universal-cookie';
-import { useState, useEffect } from 'react';
 const ReactApexChart = dynamic(() => import('react-apexcharts'), {
     ssr: false,
 });
@@ -10,56 +9,34 @@ const ReactApexChart = dynamic(() => import('react-apexcharts'), {
 export default function WorkersJobTypes()
 {
     // get needed redux state
-    const report = useAppSelector((state) => state.statisticsReducer.value.report);
-    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
-    const [isClient, setIsClient] = useState(false);
-    
+    const report = useAppSelector((state) => state.statisticsReducer.value.report)
+    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType)
     // declare global variables
     const cookies = new Cookies();
     const t = useTranslations('statistics');
-    const locale = cookies.get("NEXT_LOCALE");
-    const isRtl = locale === 'ar';
-    const isDark = themeType === 'dark';
-    
-    // Set isClient to true after component mounts
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
-    
-    // if loading or no report, show loading spinner
-    if (!report || !isClient) {
-        return (
-            <div className="w-full h-[350px] flex items-center justify-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
-            </div>
-        );
-    }
-    
-    // prepare chart data with null checks
-    const data = report?.workersNameAndJobType?.value?.map((v: {
-        _id: string;
-        jobType: string;
-        count: number;
-    }) => v?.count) || [];
-    
-    // prepare chart labels with null checks
-    const labels = report?.workersNameAndJobType?.value?.map((v: {
-        _id: string;
-        jobType: string;
-        count: number;
-    }) => v?.jobType) || [];
-    
-    // Return empty state if no data
-    if (data.length === 0 || labels.length === 0) {
-        return (
-            <div className="w-full h-[350px] flex items-center justify-center">
-                <p>{t('noDataAvailable')}</p>
-            </div>
-        );
-    }
-    
+    const locale = cookies.get("NEXT_LOCALE")
+    const isRtl = locale == 'ar' ? true : false
+    const isDark = themeType == 'dark' ? true : false
+    // if loading show load screen
+    if(!report) return
+    // prepare chart data
+    let data = report?.workersNameAndJobType.value.map((v : {
+        _id: string,
+        jobType: string,
+        count: number,
+    } , i : number) => {
+        return v?.count;
+    })
+    // prepare chart labels
+    let labels = report?.workersNameAndJobType.value.map((v : {
+        _id: string,
+        jobType: string,
+        count: number,
+    } , i : number) => {
+        return v?.jobType;
+    })
     // prepare chart options
-    const options = {
+    var options = {
             series: [{
             name: t('worker'),
             data: data