fix: re stock

src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx

@@ -11,14 +11,82 @@ import Loading from '../../../../../../components/layout/shared/Loading'
 import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
 import { PaymentDataItem } from '../../../../../../types/services/analytic'
 import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
+import { Typography, TextField, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
 
 const DashboardPayment = () => {
-  const { data, isLoading } = usePaymentAnalytics()
+  const theme = useTheme()
+
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const [filter, setFilter] = useState({
+    date_from: formatDateDDMMYYYY(monthAgo),
+    date_to: formatDateDDMMYYYY(today)
+  })
+
+  const { data, isLoading } = usePaymentAnalytics({
+    date_from: filter.date_from,
+    date_to: filter.date_to
+  })
 
   if (isLoading) return <Loading />
 
   return (
     <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <div className='flex gap-4 items-center justify-between'>
+          <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+            Payments Analysis Dashboard
+          </Typography>
+          <div className='flex items-center gap-4'>
+            <TextField
+              type='date'
+              value={formatForInputDate(data?.date_from || new Date())}
+              onChange={e => {
+                setFilter({
+                  ...filter,
+                  date_from: formatDateDDMMYYYY(new Date(e.target.value))
+                })
+              }}
+              size='small'
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  '&.Mui-focused fieldset': {
+                    borderColor: 'primary.main'
+                  },
+                  '& fieldset': {
+                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                  }
+                }
+              }}
+            />
+            <Typography>-</Typography>
+            <TextField
+              type='date'
+              value={
+                data?.date_to
+                  ? new Date(data?.date_to).toISOString().split('T')[0]
+                  : new Date().toISOString().split('T')[0]
+              }
+              onChange={e => {}}
+              size='small'
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  '&.Mui-focused fieldset': {
+                    borderColor: 'primary.main'
+                  },
+                  '& fieldset': {
+                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                  }
+                }
+              }}
+            />
+          </div>
+        </div>
+      </Grid>
       <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
         <DistributedBarChartOrder
           isLoading={isLoading}