chart edited

src/pages/statistics/components/RevenueChart.tsx

@@ -16,7 +16,7 @@ import { formatPrice } from '@/helpers/func'
 import PageLoading from '@/components/PageLoading'
 
 const RevenueChart: FC = () => {
-    const [selectedTab, setSelectedTab] = useState<
+    const [selectedTab] = useState<
         'daily' | 'monthly' | 'yearly'
     >('monthly')
     const [startDate, setStartDate] = useState<string>('')
@@ -27,13 +27,12 @@ const RevenueChart: FC = () => {
             period?: 'daily' | 'monthly' | 'yearly';
             startDate?: string;
             endDate?: string;
-        } = {
-            period: selectedTab,
-        }
-        if (startDate) params.startDate = startDate
-        if (endDate) params.endDate = endDate
+        } = {}
+        // فقط اگر تاریخ انتخاب شده باشد ارسال شود
+        if (startDate && startDate.trim() !== '') params.startDate = startDate
+        if (endDate && endDate.trim() !== '') params.endDate = endDate
         return params
-    }, [selectedTab, startDate, endDate])
+    }, [startDate, endDate])
 
     const { data: paymentsChartData, isLoading } = useGetPaymentsChart(apiParams)
 
@@ -97,9 +96,56 @@ const RevenueChart: FC = () => {
         return value.toLocaleString('fa-IR')
     }
 
-    const formatTooltip = (value: number | undefined) => {
-        if (value === undefined) return ''
-        return value.toLocaleString('fa-IR') + ' تومان'
+    const CustomTooltip = (props: {
+        active?: boolean
+        payload?: Array<{
+            dataKey?: string
+            value?: number
+            color?: string
+        }>
+        label?: string
+    }) => {
+        const { active, payload, label } = props
+        if (!active || !payload || payload.length === 0) {
+            return null
+        }
+
+        const cashValue = payload.find((item) => item.dataKey === 'cash')?.value as number | undefined
+        const onlineValue = payload.find((item) => item.dataKey === 'online')?.value as number | undefined
+
+        return (
+            <div className='bg-white p-3 rounded-xl shadow-lg border border-gray-200'>
+                <p className='text-sm font-medium text-gray-900 mb-2'>{label}</p>
+                <div className='space-y-1'>
+                    {cashValue !== undefined && (
+                        <div className='flex items-center gap-2'>
+                            <div className='w-2 h-2 rounded-full bg-[#B0BAC9]' />
+                            <span className='text-xs text-gray-600'>پرداخت نقدی:</span>
+                            <span className='text-xs font-medium text-gray-900'>
+                                {cashValue.toLocaleString('fa-IR')} تومان
+                            </span>
+                        </div>
+                    )}
+                    {onlineValue !== undefined && (
+                        <div className='flex items-center gap-2'>
+                            <div className='w-2 h-2 rounded-full bg-[#6B7FED]' />
+                            <span className='text-xs text-gray-600'>پرداخت آنلاین:</span>
+                            <span className='text-xs font-medium text-gray-900'>
+                                {onlineValue.toLocaleString('fa-IR')} تومان
+                            </span>
+                        </div>
+                    )}
+                    {cashValue !== undefined && onlineValue !== undefined && (
+                        <div className='pt-1 mt-1 border-t border-gray-100'>
+                            <span className='text-xs text-gray-600'>جمع:</span>
+                            <span className='text-xs font-medium text-gray-900 mr-2'>
+                                {(cashValue + onlineValue).toLocaleString('fa-IR')} تومان
+                            </span>
+                        </div>
+                    )}
+                </div>
+            </div>
+        )
     }
 
     if (isLoading) {
@@ -142,7 +188,7 @@ const RevenueChart: FC = () => {
             </div>
 
             {/* Tabs */}
-            <div className='flex items-center gap-2 mt-5 mb-5'>
+            {/* <div className='flex items-center gap-2 mt-5 mb-5'>
                 <button
                     onClick={() => setSelectedTab('yearly')}
                     className={`px-4 py-1.5 rounded-full text-xs transition-all border ${selectedTab === 'yearly'
@@ -170,7 +216,7 @@ const RevenueChart: FC = () => {
                 >
                     روزانه
                 </button>
-            </div>
+            </div> */}
 
             {/* مبلغ و درصد */}
 
@@ -304,15 +350,7 @@ const RevenueChart: FC = () => {
                                 domain={[0, 'dataMax + 2000000']}
                                 tickMargin={50}
                             />
-                            <Tooltip
-                                formatter={formatTooltip}
-                                contentStyle={{
-                                    backgroundColor: 'white',
-                                    border: '1px solid #e5e7eb',
-                                    borderRadius: '12px',
-                                    fontSize: '12px'
-                                }}
-                            />
+                            <Tooltip content={<CustomTooltip />} />
                             <Area
                                 type='natural'
                                 dataKey='cash'