Add 30 n123

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

@@ -2,6 +2,7 @@ import { useAppSelector } from '@/redux/store';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Cookies from 'universal-cookie';
+import { useEffect, useState } from 'react';
 const ReactApexChart = dynamic(() => import('react-apexcharts'), {
     ssr: false,
 });
@@ -9,23 +10,39 @@ const ReactApexChart = dynamic(() => import('react-apexcharts'), {
 export default function IncomeOutcome()
 {
     // get needed redux state
-    const report = useAppSelector((state) => state.statisticsReducer.value.report)
+    const report = useAppSelector((state) => state.statisticsReducer.value.report);
-    const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol)
+    const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol || '$');
-    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType)
+    const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
+    const [isClient, setIsClient] = useState(false);
+    
     // declare global variables
     const cookies = new Cookies();
     const t = useTranslations('statistics');
-    const locale = cookies.get("NEXT_LOCALE")
+    const locale = cookies.get("NEXT_LOCALE");
-    const isRtl = locale == 'ar' ? true : false
+    const isRtl = locale === 'ar';
-    const isDark = themeType == 'dark' ? true : false    
+    const isDark = themeType === 'dark';
-    // if loading show load screen
+    
-    if(!report) return
+    // Set isClient to true after component mounts
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    
+    // 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>
+            </div>
+        );
+    }
+    
     // prepare chart data
-    let data = [report?.totalIncome , report?.totalOutcome]
+    const data = [report?.totalIncome || 0, report?.totalOutcome || 0];
     // prepare chart labels
-    let labels = [t('income') , t('outcome')]
+    const labels = [t('income'), t('outcome')];
+    
     // prepare chart options
-    var options = {
+    const options = {
         series: [{
             name: currencySymbol,
             data: data
@@ -47,6 +64,9 @@ export default function IncomeOutcome()
         chart: {
             height: 350,
             type: 'bar',
+            toolbar: {
+                show: false
+            }
         },
         plotOptions: {
             bar: {
@@ -69,6 +89,7 @@ export default function IncomeOutcome()
                 horizontal: 10,
                 vertical: 5,
             },
+            show: false
         },
         fill: {
             type: isDark ? '' : 'gradient',
@@ -90,7 +111,7 @@ export default function IncomeOutcome()
         },
         grid: {
             row: {
-                colors: [isDark ? '#333' : '#fff', '#f2f2f2'] // Adjust the grid row color for dark mode
+                colors: [isDark ? '#333' : '#fff', '#f2f2f2']
             },
         },
         xaxis: {                
@@ -100,39 +121,68 @@ export default function IncomeOutcome()
                 offsetY: 5,
                 style: {
                     colors: isDark ? '#fff' : '#000',
-                    fontSize: '12px',
-                    cssClass: 'apexcharts-xaxis-title',
                 },
+                formatter: function(value: string) {
+                    return value;
+                }
             },
             categories: labels,
-            tickPlacement: 'on'
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            },
         },
         yaxis: {
-            tickAmount: 7,
             labels: {
-                offsetX: isRtl ? -30 : -10,
-                offsetY: 0,
                 style: {
                     colors: isDark ? '#fff' : '#000',
-                    fontSize: '12px',
+                }
-                    cssClass: 'apexcharts-yaxis-title',
+            }
-                },
-            },
         },
         tooltip: {
             theme: isDark ? 'dark' : 'light',
-            x: {
+            y: {
-                show: true,
+                formatter: function(val: number) {
-            },
+                    return `${currencySymbol} ${val}`;
-        },
+                }
-    };
+            }
-    // return the ui
+        },
-    return (
+        responsive: [{
-        <>
+            breakpoint: 480,
-            <div className="flex flex-col gap-5 [&_*]:dark:!text-text-dark p-5 w-full shadow border border-secondary-light bg-primary dark:bg-primary-dark rounded-[5px]">
+            options: {
-                <h3 className="text-xl font-bold">{t('incomeOutcomeGeneralOverview')}</h3>
+                legend: {
-                <ReactApexChart series={options.series} options={options} type="bar" height={350} width={'100%'} />
+                    position: 'bottom',
-            </div>
+                    offsetY: 10,
-        </>
+                    horizontalAlign: 'center',
-    )
+                    fontSize: '12px',
+                    markers: {
+                        width: 10,
+                        height: 10,
+                        offsetX: isRtl ? 5 : -5,
+                    },
+                    itemMargin: {
+                        horizontal: 10,
+                        vertical: 5,
+                    },
+                },
+            }
+        }]
+    };
+
+    return (
+        <div className="w-full h-auto p-5 shadow border border-secondary-light bg-primary dark:bg-primary-dark rounded-[5px]">
+            <h3 className="text-xl font-bold mb-5">{t('incomeOutcomeGeneralOverview')}</h3>
+            <div className="w-full h-[350px]">
+                <ReactApexChart 
+                    options={options} 
+                    series={options.series} 
+                    type="bar" 
+                    height="100%" 
+                    width="100%" 
+                />
+            </div>
+        </div>
+    );
 }