report monthly

frontend/dashboard/src/pages/Report/Livechat/List.tsx

@@ -26,6 +26,8 @@ import {
   Autocomplete,
   InputAdornment,
   IconButton,
+  InputLabel,
+  MenuItem,
 } from '@mui/material';
 
 import {
@@ -61,6 +63,7 @@ import { RHFDatepicker } from '@/components/hook-form';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { fDateOnly } from '@/utils/formatTime';
+import { LoadingButton } from '@mui/lab';
 
 // ----------------------------------------------------------------------
 
@@ -73,7 +76,9 @@ export default function List() {
   const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
   const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
   const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
-
+  const [type, setType] = useState(0);
+  const [view, setView] = useState(["day", "month", "year"]);
+  
   function Filter(props: any) {
     // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -91,9 +96,27 @@ export default function List() {
       props.onSearch(searchText);
     };
 
+    const handleTypeChange = (value: string) => { // Perbaikan di parameter
+      setType(value); // Mengatur state type dengan nilai baru
+      if (value === "0") {
+        setView(["day", "month", "year"]); // Urutan benar
+      } else {
+        setView(["month"]); // Hanya menampilkan bulan & tahun
+      }
+
+      let entries = [...searchParams.entries(), ['type', value ?? '']];
+      if (!searchParams.get('type')) {
+        entries = [...entries, ['type', value ?? '']];
+      }
+      const filter = Object.fromEntries(entries);
+
+      setSearchParams(filter);
+    };
+
     useEffect(() => {
       // Trigger First Search
       setSearchText(searchParams.get('search') ?? '');
+     
     }, []);
 
     const item = [
@@ -107,7 +130,7 @@ export default function List() {
     return (
       <form style={{ width: '100%' }}>
         <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} md={4}>
             <TextField
               id="search-input"
               ref={searchInput}
@@ -130,21 +153,42 @@ export default function List() {
               }}
             />
           </Grid>
+          <Grid item xs={12} md={2}>
+            <FormControl fullWidth>
+              <InputLabel>Tipe</InputLabel>
+              <Select 
+                value={type} 
+                onChange={(event) => handleTypeChange(event.target.value)} // Perbaikan disini
+              >
+                <MenuItem value="0">Daily</MenuItem>
+                <MenuItem value="1">Monthly</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
           <Grid item xs={12} md={2}>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <DesktopDatePicker
+                views={view}
                 value={searchParams.get('startDate')}
                 inputFormat="dd/MM/yyyy"
                 onChange={(value) => {
                   try {
                     if (value && !!Date.parse(value)) {
-                      const date = value ? fDateOnly(value) : '';
-                      var entries = [...searchParams.entries(), ['startDate', date ?? '']];
+                      let date = fDateOnly(value);
+              
+                      // Jika view adalah "month", set tanggal ke 1
+                      if (view.length === 1 && view.includes("month")) {
+                        const dateObj = new Date(value);
+                        dateObj.setDate(1);
+                        date = fDateOnly(dateObj);
+                      }
+              
+                      let entries = [...searchParams.entries(), ['startDate', date ?? '']];
                       if (!searchParams.get('endDate')) {
                         entries = [...entries, ['endDate', date ?? '']];
                       }
                       const filter = Object.fromEntries(entries);
-
+              
                       setSearchParams(filter);
                       loadDataTableData(filter);
                     }
@@ -157,18 +201,28 @@ export default function List() {
           <Grid item xs={12} md={2}>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <DesktopDatePicker
+                views={view}
                 value={searchParams.get('endDate')}
                 inputFormat="dd/MM/yyyy"
                 onChange={(value) => {
                   try {
                     if (value && !!Date.parse(value)) {
-                      const date = fDateOnly(value);
-                      var entries = [...searchParams.entries(), ['endDate', date ?? '']];
+                      let date = fDateOnly(value);
+              
+                      // Jika mode monthly, set endDate ke akhir bulan dari startDate
+                      if (view.length === 1 && view.includes("month")) {
+                        const dateObj = new Date(value);
+                        dateObj.setMonth(dateObj.getMonth() + 1); // Pindah ke bulan berikutnya
+                        dateObj.setDate(0); // Set ke tanggal terakhir bulan sebelumnya (akhir bulan)
+                        date = fDateOnly(dateObj);
+                      }
+              
+                      let entries = [...searchParams.entries(), ['endDate', date ?? '']];
                       if (!searchParams.get('startDate')) {
-                        entries = [...entries, ['startDate', date ?? '']];
+                        entries = [...entries, ['startDate', date ?? ''] ];
                       }
                       const filter = Object.fromEntries(entries);
-
+              
                       setSearchParams(filter);
                       loadDataTableData(filter);
                     }
@@ -188,15 +242,25 @@ export default function List() {
             </LocalizationProvider>
           </Grid>
           <Grid item xs={12} md={2}>
-            <Button
+             {/* <LoadingButton
+                              type="submit"
+                              variant="contained"
+                              size="small"
+                            
+                              
+                            >
+                              {'Save'}
+                            </LoadingButton> */}
+            <LoadingButton 
               variant="outlined"
               fullWidth
               startIcon={<Add />}
               sx={{ p: 1.8 }}
+              loading={isSubmitting}
               onClick={exportExcel}
             >
               Export
-            </Button>
+            </LoadingButton>
           </Grid>
         </Grid>
       </form>
@@ -383,6 +447,7 @@ export default function List() {
   const [dataTableIsLoading, setDataTableLoading] = useState(true);
   const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
   const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [isSubmitting, setIsSubmitting] = useState(false)
   const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
@@ -411,10 +476,11 @@ export default function List() {
 
   const exportExcel = async () => {
     var filter = Object.fromEntries([...searchParams.entries()]);
-
+    setIsSubmitting(true)
     await axios
       .get('live-chat/export', { params: filter })
       .then((res) => {
+        setIsSubmitting(false)
         enqueueSnackbar('Data berhasil di Export', {
           variant: 'success',
           anchorOrigin: { horizontal: 'right', vertical: 'top' },