date picker

src/pages/statistics/components/RevenueChart.tsx

@@ -14,6 +14,7 @@ import Button from '@/components/Button'
 import { useGetPaymentsChart } from '../hooks/useStatsData'
 import { formatPrice } from '@/helpers/func'
 import PageLoading from '@/components/PageLoading'
+import moment from 'moment-jalaali'
 
 const RevenueChart: FC = () => {
     const [selectedTab] = useState<
@@ -22,6 +23,12 @@ const RevenueChart: FC = () => {
     const [startDate, setStartDate] = useState<string>('')
     const [endDate, setEndDate] = useState<string>('')
 
+    const convertToPersian = (gregorianDate: string | null | undefined): string | undefined => {
+        if (!gregorianDate) return undefined
+        const persianDate = moment(gregorianDate, 'YYYY-MM-DD').format('jYYYY-jMM-jDD')
+        return persianDate
+    }
+
     const apiParams = useMemo(() => {
         const params: {
             period?: 'daily' | 'monthly' | 'yearly';
@@ -177,14 +184,6 @@ const RevenueChart: FC = () => {
         )
     }
 
-    if (isLoading) {
-        return (
-            <div className='bg-white rounded-3xl p-6 shadow-sm h-full overflow-visible flex items-center justify-center min-h-[600px]'>
-                <PageLoading />
-            </div>
-        )
-    }
-
     return (
         <div className='bg-white rounded-3xl p-6 shadow-sm h-full overflow-visible'>
             {/* Header */}
@@ -198,11 +197,13 @@ const RevenueChart: FC = () => {
                 <DatePicker
                     label='تاریخ شروع'
                     placeholder='انتخاب تاریخ شروع'
+                    defaulValue={convertToPersian(startDate)}
                     onChange={setStartDate}
                 />
                 <DatePicker
                     label='تاریخ پایان'
                     placeholder='انتخاب تاریخ پایان'
+                    defaulValue={convertToPersian(endDate)}
                     onChange={setEndDate}
                 />
                 <Button className=''>
@@ -304,7 +305,11 @@ const RevenueChart: FC = () => {
             </div>
 
             {/* نمودار */}
-            {chartData.length === 0 ? (
+            {isLoading ? (
+                <div className='w-full h-[400px] min-h-[400px] flex items-center justify-center'>
+                    <PageLoading />
+                </div>
+            ) : chartData.length === 0 ? (
                 <div className='w-full h-[400px] min-h-[400px] flex items-center justify-center text-gray-500'>
                     داده‌ای برای نمایش وجود ندارد
                 </div>