Sales Overview Page

2025-09-09 15:42:05 +07:00
parent dfa6b4be75
commit 5dc62b8390
14 changed files with 1195 additions and 2 deletions
@@ -0,0 +1,86 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+
+import { TextField, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
+import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
+import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'
+
+const SalesOverviewPage = () => {
+  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)
+  })
+
+  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'>
+              Orders Analysis Dashboard
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={formatForInputDate(today || 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={today}
+                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>
+      <Grid container spacing={6} className='mt-5'>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <SalesOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <SalesOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default SalesOverviewPage