Purchase Overview Page

2025-09-09 16:17:25 +07:00
parent 5dc62b8390
commit 849013a08a
14 changed files with 1024 additions and 3 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 PurchaseOverviewLeft from '@/views/apps/purchase/overview/overview-left'
+import PurchaseOverviewRight from '@/views/apps/purchase/overview/overview-right'
+
+const PurchaseOverviewPage = () => {
+  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'>
+              Overview Pembelian
+            </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 }}>
+          <PurchaseOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <PurchaseOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default PurchaseOverviewPage
@@ -26,7 +26,7 @@ const SalesOverviewPage = () => {
        <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
+              Overview Penjualan
            </Typography>
            <div className='flex items-center gap-4'>
              <TextField