Merge remote-tracking branch 'origin/main' into efril

src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx

@@ -14,7 +14,7 @@ import ReportHeader from '@/views/dashboards/daily-report/report-header'
 import React, { useEffect, useRef, useState } from 'react'
 
 const DailyPOSReport = () => {
-  const reportRef = useRef<HTMLElement | null>(null)
+  const reportRef = useRef<HTMLDivElement | null>(null)
 
   const [now, setNow] = useState(new Date())
   const [selectedDate, setSelectedDate] = useState(new Date())
@@ -22,7 +22,7 @@ const DailyPOSReport = () => {
     startDate: new Date(),
     endDate: new Date()
   })
-  const [filterType, setFilterType] = useState('single') // 'single' or 'range'
+  const [filterType, setFilterType] = useState<'single' | 'range'>('single') // 'single' or 'range'
 
   // Use selectedDate for single date filter, or dateRange for range filter
   const getDateParams = () => {

src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx

@@ -1,14 +1,25 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
-import { formatShortCurrency } from '../../../../../../utils/transform'
+import { formatDateDDMMYYYY, formatShortCurrency } from '../../../../../../utils/transform'
 import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
 import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
+import { TextField, Typography, useTheme } from '@mui/material'
 
 const DashboardProfitloss = () => {
+  const theme = useTheme()
+
+  const [filter, setFilter] = useState({
+    date_from: new Date().setDate(new Date().getDate() - 30).toString(),
+    date_to: new Date().toString()
+  })
+
   // Sample data - replace with your actual data
-  const { data: profitData, isLoading } = useProfitLossAnalytics()
+  const { data: profitData, isLoading } = useProfitLossAnalytics({
+    date_from: formatDateDDMMYYYY(filter.date_from),
+    date_to: formatDateDDMMYYYY(filter.date_to)
+  })
 
   const formatCurrency = (amount: any) => {
     return new Intl.NumberFormat('id-ID', {
@@ -91,11 +102,45 @@ const DashboardProfitloss = () => {
       {profitData && (
         <div>
           {/* Header */}
-          <div className='mb-8'>
-            <h1 className='text-3xl font-bold text-gray-900 mb-2'>Profit Analysis Dashboard</h1>
-            <p className='text-gray-600'>
-              {formatDate(profitData.date_from)} - {formatDate(profitData.date_to)}
-            </p>
+          <div className='mb-8 flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Profit Analysis Dashboard
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={new Date(profitData.date_from).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
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={new Date(profitData.date_to).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>
 
           {/* Summary Metrics */}