Merge remote-tracking branch 'origin/staging' into origin/production

frontend/dashboard/src/pages/Dashboard.tsx

@@ -1,66 +1,557 @@
 // @mui
-import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { 
+  Button, 
+  Container, 
+  Grid, 
+  styled, 
+  Typography, 
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Card,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem, 
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Checkbox,
+ 
+} from '@mui/material';
 // hooks
 import useSettings from '../hooks/useSettings';
 // components
+import { PieChart, Pie, Cell, Tooltip, BarChart, Bar, XAxis, YAxis, Legend, ResponsiveContainer } from 'recharts';
 import Page from '../components/Page';
 import axios from '../utils/axios';
 import useAuth from '../hooks/useAuth';
 import SomethingUsage from '../sections/dashboard/SomethingUsage';
 import { fCurrency } from '../utils/formatNumber';
+import dayjs from "dayjs";
+import {DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { green, red } from "@mui/material/colors";
+import MuiDialog from '@/components/MuiDialog';
+import SearchIcon from "@mui/icons-material/Search";
 
 // ----------------------------------------------------------------------
+const COLORS = ['#229A16', '#919EAB', '#FF4842'];
+
+// const performaDokterData = [
+//   { name: 'Dr. John', Berhasil: 70, Gagal: 8, Abandon: 4 },
+//   { name: 'Dr. Richard', Berhasil: 68, Gagal: 10, Abandon: 2 },
+//   { name: 'Dr. Harman', Berhasil: 75, Gagal: 5, Abandon: 3 },
+//   { name: 'Dr. Emma', Berhasil: 80, Gagal: 7, Abandon: 1 },
+//   { name: 'Dr. tb', Berhasil: 80, Gagal: 7, Abandon: 1 },
+//   { name: 'Dr. test', Berhasil: 80, Gagal: 7, Abandon: 1 },
+//   { name: 'Dr. yayan', Berhasil: 80, Gagal: 7, Abandon: 1 },
+//   { name: 'Dr. intan', Berhasil: 80, Gagal: 7, Abandon: 1 },
+//   { name: 'Dr. fajri', Berhasil: 80, Gagal: 7, Abandon: 1 },
+// ];
+
+// Custom Tooltip
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const totalPasien =
+      payload[0].value + payload[1].value + payload[2].value;
+    return (
+      <div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
+        <p>{label}</p>
+        <p>Total Pasien: {totalPasien}</p>
+        <p>Berhasil: {payload[0].value}</p>
+        <p>Gagal: {payload[1].value}</p>
+        <p>Abandon: {payload[2].value}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
+// Custom Tooltip
+const CustomTooltipPie = ({ active, payload, startDate, endDate }) => {
+  if (!active || !payload || payload.length === 0) return null;
+  // Fungsi format tanggal ke "2 Jan 2025"
+  const formatDate = (date) => {
+    if (!date) return "N/A";
+    return new Date(date).toLocaleDateString("id-ID", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+  };
+  return (
+    <div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
+       <p>{formatDate(startDate)} - {formatDate(endDate)}</p>
+      <p>Status: {payload[0]?.name || "Tidak ada data"}</p>
+      <p>Jumlah Pasien: {payload[0]?.value || 0}</p>
+    </div>
+  );
+};
+
+
 
 export default function Dashboard() {
-  const { themeStretch } = useSettings();
-
-  const { logout } = useAuth();
   
-  const loadSomething = () => {
-    axios.get('/user')
+const transaksiDataDefault = [
+  { name: "Berhasil", value: 0, color: "#4CAF50" },
+  { name: "Gagal", value: 0, color: "#F44336" },
+  { name: "Abandon", value: 0, color: "#9E9E9E" },
+];
+  const { themeStretch } = useSettings();
+  const [startDate, setStartDate] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(dayjs().format('YYYY-MM-DD'));
+  const [startDateDokter, setStartDateDokter] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
+  const [endDateDokter, setEndDateDokter] = useState(dayjs().format('YYYY-MM-DD'));
+  const [transaksiData, setTransaksiData] = useState(transaksiDataDefault);
+  const [transaksiDataBar, setTransaksiDataBar] = useState([]);
+  const [type, setType] = useState(0);
+  const [status, setStatus] = useState(0);
+  const [statusDokter, setStatusDokter] = useState(0);
+  const [view, setView] = useState(["day", "month", "year"]);
+  const [performaDokterData, setListPerformaDoctors] = useState([]);
+  const [doctors, setListDoctors] = useState([]);
+  const [selectedDoctors, setSelectedDoctors] = useState(doctors.map((doctor) => doctor.id)); // State untuk dokter yang dipilih
+  
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(`dashboard/transaksi`, {
+        params: {
+          start_date: startDate,
+          end_date: endDate,
+          type,
+          status
+        }
+      });
+      if (response.data) {
+        setTransaksiData(response.data);
+      }
+      if (type === 0) {
+        setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
+      } else {
+        setView(["month"]); // Hanya menampilkan bulan & tahun
+      }
+    } catch (error) {
+      console.error('Error fetching transaksi data:', error);
+    }
   };
 
-  const DangerCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.error.main,
-    backgroundColor: theme.palette.error.lighter,
-  }));
+  const fetchDataBar = async () => {
+    try {
+      const response = await axios.get(`dashboard/transaksi-bar-chart`, {
+        params: {
+          start_date: startDate,
+          end_date: endDate,
+          type,
+          status
+        }
+      });
+      if (response.data) {
+        setTransaksiDataBar(response.data);
+      }
+      if (type === 0) {
+        setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
+      } else {
+        setView(["month"]); // Hanya menampilkan bulan & tahun
+      }
+    } catch (error) {
+      console.error('Error fetching transaksi data:', error);
+    }
+  }
 
-  const SuccessCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.success.darker,
-    backgroundColor: theme.palette.success.lighter,
-  }));
+  const fetchListPerfomaDokter = async () => {
+    try {
+      const response = await axios.get(`dashboard/list-performa-dokter`, {
+        params: {
+          start_date: startDateDokter,
+          end_date: endDateDokter,
+          type,
+          statusDokter,
+          nIDDokter: selectedDoctors
+        }
+      } );
+      if (response.data) {
+        setListPerformaDoctors(response.data);
+      }
+    } catch (error) {
+      console.error('Error fetching transaksi data:', error);
+    }
+  };
+
+  
+  const fetchListDokter = async () => {
+    try {
+      const response = await axios.get(`dashboard/list-dokter`);
+      if (response.data) {
+        setListDoctors(response.data);
+      }
+    } catch (error) {
+      console.error('Error fetching transaksi data:', error);
+    }
+  };
+
+  // Fetch data saat pertama kali halaman dimuat dan ketika filter berubah
+  useEffect(() => {
+    fetchData();
+    fetchDataBar();
+    // fetchListPerfomaDokter();
+  }, [startDate, endDate, type, status]);
+
+  // Fetch 
+  useEffect(() => {
+    fetchListPerfomaDokter();
+  }, [selectedDoctors, startDateDokter, endDateDokter])
+
+  useEffect(() => {
+    fetchListDokter();
+  }, []);
+
+ 
+  // Performa dokter
+  const [openDialog, setOpenDialog] = useState(false);
+  const handleOpen = () => setOpenDialog(true);
+ 
+
+  const getContent = () => {
+    const [search, setSearch] = useState(""); // State untuk pencarian dokter
+
+    // Filter dokter berdasarkan pencarian
+    const filteredDoctors = doctors.filter((doctor) =>
+      doctor.name.toLowerCase().includes(search.toLowerCase())
+    );
+  
+    // Handle pilih satu dokter
+    const handleSelectDoctor = (id) => {
+      setSelectedDoctors((prev) =>
+        prev.includes(id) ? prev.filter((docId) => docId !== id) : [...prev, id]
+      );
+    };
+  
+    // Handle pilih semua dokter
+    const handleSelectAll = () => {
+      if (selectedDoctors.length === doctors.length) {
+        setSelectedDoctors([]);
+      } else {
+        setSelectedDoctors(doctors.map((doctor) => doctor.id));
+      }
+    };
+
+    const handleCloseDialog = () => {
+      setOpenDialog(false);
+      setSelectedDoctors([]);
+    }
+
+    const handlePilihDokter = () => {
+      setOpenDialog(false);
+      console.log(selectedDoctors);
+    }  
+    return (
+      <>
+        {/* Search Bar */}
+        <TextField 
+          fullWidth
+          variant="outlined"
+          placeholder="Search Doctor"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          InputProps={{
+            endAdornment: <SearchIcon />,
+          }}
+          sx={{ mb: 2, mt:2 }}
+        />
+  
+        {/* Table Dokter */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  <Checkbox
+                    checked={selectedDoctors.length === doctors.length}
+                    onChange={handleSelectAll}
+                  />
+                </TableCell>
+                <TableCell>Kode</TableCell>
+                <TableCell>Nama</TableCell>
+                <TableCell>Status</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filteredDoctors.map((doctor) => (
+                <TableRow key={doctor.id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedDoctors.includes(doctor.id)}
+                      onChange={() => handleSelectDoctor(doctor.id)}
+                    />
+                  </TableCell>
+                  <TableCell>{doctor.code}</TableCell>
+                  <TableCell>{doctor.name}</TableCell>
+                  <TableCell>
+                    <Typography
+                      sx={{
+                        color: doctor.online === 1 ? green[500] : red[500],
+                        fontWeight: "bold",
+                      }}
+                    >
+                      {doctor.online === 1 ? "🟢 Online" : "🔴 Offline"}
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <DialogActions>
+            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                <Button color="primary"  variant="contained" onClick={handlePilihDokter}>Pilih</Button>
+           
+            
+        </DialogActions>
+      </>
+    );
+  };
+  
 
   return (
     <Page title="Dashboard">
-      <Container maxWidth={themeStretch ? false : 'xl'}>
+      <Container maxWidth="xl">
         <Typography variant="h3" component="h1" paragraph>
           Dashboard
         </Typography>
 
-        <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <SomethingUsage />
+        {/* Jumlah Transaksi */}
+        <Card sx={{ p: 3, mb: 3 }}>
+          <Typography variant="h5" gutterBottom>
+            Jumlah Transaksi
+          </Typography>
+          <Grid container spacing={3}>
+            {/* Pilih */}
+            <Grid item sm={3}>
+              <FormControl fullWidth>
+                <InputLabel>Tipe</InputLabel>
+                <Select 
+                value={type} 
+                onChange={(e) => setType(e.target.value)}
+                >
+                  <MenuItem value="0">Harian</MenuItem>
+                  <MenuItem value="1">Mingguan</MenuItem>
+                  <MenuItem value="2">Bulanan</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item md={2}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DesktopDatePicker
+                  label="Start"
+                  views={view} 
+                  value={startDate}
+                  inputFormat="dd/MM/yyyy"
+                  onChange={(value) => {
+                    if (!value) return; // Hindari error jika value null atau undefined
+                    if (type == 0) {
+                      setStartDate(value);
+                    } else {
+                      setStartDate(new Date(value.getFullYear(), value.getMonth(), 1));
+                    }
+                  }}
+                  renderInput={(params) => <TextField {...params} variant="outlined" />}
+                />
+              </LocalizationProvider>
+            </Grid>
+            <Grid item md={2}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                label="End"
+                views={view} 
+                inputFormat="dd/MM/yyyy"
+                value={endDate}
+                onChange={(value) => {
+                  if (!value) return; // Hindari error jika value null atau undefined
+                  if (type == 0) {
+                    setEndDate(value);
+                  } else {
+                    setEndDate(new Date(value.getFullYear(), value.getMonth(), 1));
+                  }
+                }}
+                renderInput={(params) => <TextField {...params} variant="outlined" />}
+              />
+              </LocalizationProvider>
+            </Grid>
+            {/* Pilih Status */}
+            <Grid item sm={3}>
+              <FormControl fullWidth>
+                <InputLabel>Status</InputLabel>
+                <Select 
+                  value={status} 
+                  onChange={(e) => setStatus(e.target.value)}
+                >
+                  <MenuItem value="0">Semua</MenuItem>
+                  <MenuItem value="1">Berhasil</MenuItem>
+                  <MenuItem value="2">Abandon</MenuItem>
+                  <MenuItem value="3">Gagal</MenuItem>
+                </Select>
+
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <ResponsiveContainer width="100%" height={350}>
+                <PieChart>
+                  <Pie
+                    data={transaksiData}
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={100}
+                    fill="#8884d8"
+                    dataKey="value"
+                    label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
+                  >
+                    {transaksiData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip content={<CustomTooltipPie startDate={startDate} endDate={endDate} />} />
+                  <Legend />
+                </PieChart>
+              </ResponsiveContainer>
+            </Grid>
+            <Grid item xs={12} md={8}>
+              <div style={{ width: "100%", overflowX: "auto" }}>
+                <ResponsiveContainer width={1000} height={350}>
+                  <BarChart
+                    data={transaksiDataBar}
+                    margin={{ top: 10, right: 30, left: 10, bottom: 10 }}
+                  >
+                    <XAxis
+                      dataKey="date"
+                      tickFormatter={(date) => date}
+                    />
+                    <YAxis />
+                    <Tooltip content={<CustomTooltip />} />
+                    <Legend />
+                    <Bar dataKey="Berhasil" fill="#4CAF50" barSize={20} />
+                    <Bar dataKey="Gagal" fill="#F44336" barSize={20} />
+                    <Bar dataKey="Abandon" fill="#9E9E9E" barSize={20} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </Grid>
           </Grid>
-          <Grid item xs={6}>
-            <DangerCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
-                <Typography>{fCurrency(15000000)} (57)</Typography>
-              </Stack>
-            </DangerCard>
-            <br />
-            <SuccessCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
-                <Typography>November 2022</Typography>
-              </Stack>
-            </SuccessCard>
+        </Card>
+
+        {/* Performa Dokter */}
+        <Card sx={{ p: 3 }}>
+          <Typography variant="h5" gutterBottom>
+            Performa Dokter
+          </Typography>
+          <Grid container spacing={3}>
+            {/* Pilih Dokter*/}
+            <Grid item sm={3}>
+              <Button variant="contained" onClick={handleOpen}>
+                Pilih Dokter
+              </Button>
+            </Grid>
+            {/* Pilih */}
+            <Grid item sm={3}>
+              <FormControl fullWidth>
+                <InputLabel>Tipe</InputLabel>
+                <Select 
+                value={type} 
+                onChange={(e) => setType(e.target.value)}
+                >
+                  <MenuItem value="0">Harian</MenuItem>
+                  <MenuItem value="1">Mingguan</MenuItem>
+                  <MenuItem value="2">Bulanan</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item md={2}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DesktopDatePicker
+                  label="Start"
+                  views={view} 
+                  value={startDateDokter}
+                  inputFormat="dd/MM/yyyy"
+                  onChange={(value) => {
+                    if (!value) return; // Hindari error jika value null atau undefined
+                    if (type == 0) {
+                      setStartDateDokter(value);
+                    } else {
+                      setStartDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
+                    }
+                  }}
+                  renderInput={(params) => <TextField {...params} variant="outlined" />}
+                />
+              </LocalizationProvider>
+            </Grid>
+            <Grid item md={2}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                label="End"
+                views={view} 
+                inputFormat="dd/MM/yyyy"
+                value={endDateDokter}
+                onChange={(value) => {
+                  if (!value) return; // Hindari error jika value null atau undefined
+                  if (type == 0) {
+                    setEndDateDokter(value);
+                  } else {
+                    setEndDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
+                  }
+                }}
+                renderInput={(params) => <TextField {...params} variant="outlined" />}
+              />
+              </LocalizationProvider>
+            </Grid>
+            {/* Pilih Status */}
+            <Grid item sm={2}>
+              <FormControl fullWidth>
+                <InputLabel>Status</InputLabel>
+                <Select 
+                  value={statusDokter} 
+                  onChange={(e) => setStatusDokter(e.target.value)}
+                >
+                  <MenuItem value="0">Semua</MenuItem>
+                  <MenuItem value="1">Berhasil</MenuItem>
+                  <MenuItem value="2">Abandon</MenuItem>
+                  <MenuItem value="3">Gagal</MenuItem>
+                </Select>
+
+              </FormControl>
+            </Grid>
+            <Grid item sm={12} marginTop={2}>
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={performaDokterData}>
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="Berhasil" fill="#4CAF50" />
+                  <Bar dataKey="Gagal" fill="#F44336" />
+                  <Bar dataKey="Abandon" fill="#9E9E9E" />
+                </BarChart>
+              </ResponsiveContainer>
+            </Grid>
           </Grid>
-        </Grid>
+
+          {/* Dialog Pilih Dokter */}
+          <MuiDialog
+            title={{name: "Pilih Dokter"}}
+            openDialog={openDialog}
+            setOpenDialog={setOpenDialog}
+            content={getContent()}
+            maxWidth="xl"
+          />
+          
+        </Card>
       </Container>
     </Page>
   );

frontend/dashboard/src/pages/InvoicePayment/Detail.tsx

@@ -0,0 +1,323 @@
+import {
+    Container,
+    Grid,
+    Stack,
+    Typography,
+    Card,
+    TableRow,
+    Tab,
+    TableCell,
+    Collapse,
+    AccordionSummary,
+    AccordionDetails,
+    IconButton,
+    TextField
+ } from '@mui/material';
+ import { fCurrency } from '../../utils/formatNumber';
+ import { Table, TableBody, TableContainer, TableHead, Paper } from '@mui/material';
+// components
+import Page from '@/components/Page';
+// utils
+import useSettings from '@/hooks/useSettings';
+// react
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { useEffect, useState, useRef, useMemo } from 'react';
+import axios from '@/utils/axios';
+// pages
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { fDate, fDateTimesecond, fDateTime } from '@/utils/formatTime';
+import { Button } from '@mui/material';
+import Label from '@/components/Label';
+import { Box } from '@mui/system';
+import { Accordion } from '@mui/material';
+import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
+import AddIcon from '@mui/icons-material/Add';
+
+import MoreMenu from '@/components/MoreMenu';
+import { MenuItem } from '@mui/material';
+import { fNumber } from '@/utils/formatNumber';
+import palette from '@/theme/palette';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { enqueueSnackbar } from 'notistack';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import {  List, ListItem, Link, Divider } from '@mui/material';
+
+
+
+// ----------------------------------------------------------------------
+
+export default function Detail() {
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const [invoicePayment, setInvoicePayment] = useState([]);
+    const [invoicePaymentDetail, setInvoicePaymentDetail] = useState([]);
+    const [invoicePaymentFile, setInvoicePaymentFile] = useState([]);
+    const [statusClaim, setStatusClaim] = useState('');
+    const [dataMember, setDataMember] = useState('');
+
+
+    const { id } = useParams();
+
+    useEffect(() => {
+        axios
+        .get('invoice-payment/detail/'+id)
+        .then((response) => {
+            setInvoicePayment(response.data.invoice_payments);
+            setInvoicePaymentDetail(response.data.invoice_payment_details);
+            setInvoicePaymentFile(response.data.files);
+        })
+        .catch((error) => {
+            console.error(error);
+        });
+    }, [id]);
+
+    console.log(invoicePayment);
+    console.log(invoicePaymentDetail);
+    console.log(invoicePaymentFile);
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style3 = {
+        color: '#919EAB',
+        width: '35%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+
+    const handleCloseDialogSubmit = () => {
+        setOpenDialogSubmit(false);
+    }
+
+    const [decline, setDeclaine] = useState('');
+
+    // const handleSubmitData = () => {
+    //     //approve or decline
+    //     if(!reasonDecline && approve == 'decline')
+    //     {
+    //         enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
+    //         return false;
+    //     }
+    //     axios
+    //     .post('claims/'+id_claim+'/'+approve, {reasonDecline:reasonDecline})
+    //     .then((response) => {
+    //         enqueueSnackbar('Success '+toTitleCase(approve)+' Claim Request', { variant: 'success' });
+    //         setOpenDialogSubmit(false);
+    //         // window.location.reload();
+
+    //     })
+    //     .catch(({ response }) => {
+    //         enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+    //     });
+
+    //     setTimeout(() =>
+    //     {
+    //         window.location.reload();
+    //     }, 5000);
+
+    // };
+
+    function toTitleCase(str: string | null) {
+        return str.replace(/\w\S*/g, function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+    }
+
+    const [reasonDecline, setReasonDecline] = useState('');
+
+    const handleReasonDeclineChange = (event) => {
+        setReasonDecline(event.target.value);
+        // Tambahkan logika yang diperlukan di sini
+    };
+
+    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
+    const [openDialogEditDetail, setDialogDEditDetail] = useState(false);
+    const [openDialogBenefit, setDialogBenefit] = useState(false);
+    const [openDialogMedicine, setDialogMedicine] = useState(false);
+
+    // Handel Delete Detail Benefit
+    const [idBenefitData, setIdBenefitData] = useState<number>();
+    const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
+
+    const [idMedicineData, setIdMedicineData] = useState<number>();
+    const [openDialogDeleteMedicine, setDialogDeleteMedicine] = useState(false)
+
+    const [approve, setApprove] = useState('')
+
+    // Handle Edit Detail Benefit
+    const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
+    const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
+
+    // Buat total data
+
+
+    // Handle Delete File LOG
+    const [pathFile, setPathFile] = useState('')
+    const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
+
+    // Handle Upload File LOG
+    const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
+
+    const totalAmount = invoicePaymentFile.reduce((sum, payment) => {
+        const num = parseFloat(payment.amount_paid) || 0;
+        return parseFloat(sum) + parseFloat(num);
+    }, 0);
+    const grandTotal = invoicePaymentDetail.reduce((sum, item) => sum + parseFloat(item.tot_bill ? item.tot_bill : 0), 0);
+
+    return (
+        <Page title='Detail'>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
+            <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
+            <Typography variant="h5" sx={{ marginLeft: 2 }}>
+            {/* {invoicePayment.length > 0 ? invoicePayment[0].invoice_number : 'Detail'} */}
+            Detail Invoice
+            </Typography>
+            </Stack>
+            <Grid container spacing={2}>
+                {/* Detail */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Grid container spacing={2}>
+                            <Grid item xs={6}>
+                                <Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
+                                Detail
+                                </Typography>
+                            </Grid>
+                        </Grid>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Tanggal Invoice</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].invoice_date) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Nomor Invoice </Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? invoicePayment[0].invoice_number : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Periode Pembayaran</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].start_date) : '-'}-{invoicePayment.length > 0 ? fDate(invoicePayment[0].end_date) : '-'}</Typography>
+                        </Stack>
+
+                    </Card>
+                </Grid>
+
+                {/* Benefit */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Claim</Typography>
+                        </Stack>
+                        <TableContainer component={Paper}>
+                    <Table>
+                        <TableHead>
+                        <TableRow>
+                            <TableCell>Code Claim/Code Log</TableCell>
+                            <TableCell>Invoice No</TableCell>
+                            <TableCell>Name</TableCell>
+                            <TableCell>Member ID</TableCell>
+                            <TableCell>Policy Number</TableCell>
+                            <TableCell>Provider</TableCell>
+                            <TableCell>Total Bill</TableCell>
+                        </TableRow>
+                        </TableHead>
+                        <TableBody>
+                        {invoicePaymentDetail.map((detail) => (
+                            <TableRow key={detail.id}>
+                            <TableCell>{detail.code} / {detail.code_log}</TableCell>
+                            <TableCell>{detail.invoice_no || '-'}</TableCell>
+                            <TableCell>{detail.name}</TableCell>
+                            <TableCell>{detail.member_id}</TableCell>
+                            <TableCell>{detail.corporate_policies}</TableCell>
+                            <TableCell>{detail.provider}</TableCell>
+                            <TableCell>{fCurrency(detail.tot_bill)}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </Table>
+                    </TableContainer>
+                    </Card>
+
+
+
+                </Grid>
+
+                {/* Catatan Pembayaran */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Catatan Pembayaran</Typography>
+
+                        </Stack>
+                        {invoicePaymentFile.map((file, index) => (
+                            <Stack key={index.id} spacing={2} width="100%" sx={{ border: "1px solid #ddd", p: 2, borderRadius: 2, mt: 2, pt: 2 }}>
+                                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                                    <Typography variant="subtitle1">Pembayaran {file.payment_number}</Typography>
+                                </Stack>
+
+                                {/* Input Jumlah Bayar */}
+                                <Stack direction="row" spacing={2} width="100%">
+                                    <Stack spacing={2} sx={{ width: "50%" }}>
+                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Nominal Pembayaran</Typography>
+                                        <Typography variant='subtitle2' sx={style2} gutterBottom>{fCurrency(parseFloat(file.amount_paid))}</Typography>
+                                    </Stack>
+
+                                    {/* Input File Bukti */}
+                                    <Stack spacing={2} sx={{ width: "50%" }}>
+                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Bukti Pembayaran</Typography>
+                                        <Stack>
+                                            <Stack divider={<Divider orientation="horizontal" flexItem />} spacing={1}>
+                                                {file.files.map((file1, fileIndex) => (
+                                                    <Stack direction="row" justifyContent="space-between" key={fileIndex}>
+                                                        <a
+                                                        href={file1.path}
+                                                            style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                                                            target="_blank"
+                                                        >
+                                                            <Typography variant="body2" gutterBottom>{file1.original_name ? file1.original_name : '-'}</Typography>
+                                                        </a>
+                                                    </Stack>
+                                                ))}
+                                            </Stack>
+                                        </Stack>
+                                    </Stack>
+                                </Stack>
+                            </Stack>
+                        ))}
+                        <Stack direction="row" justifyContent="space-between" alignContent="center" sx={{ mt: 2, pt: 2}}>
+                            <Typography variant='subtitle1' fontWeight="bold">Jumlah Tagihan</Typography>
+                            <Typography variant='subtitle1' fontWeight="bold">
+                                {fCurrency(grandTotal)}
+                            </Typography>
+                        </Stack>
+                        {/* Total Jumlah Bayar */}
+                        <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 2, borderTop: "2px solid #ddd", pt: 2 }}>
+                            <Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>Total Dibayar</Typography>
+                            <Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>
+                                {fCurrency(totalAmount.toString())}
+                            </Typography>
+                        </Stack>
+                        <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 1, pt: 1 }}>
+                            <Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>Sisa Pembayaran</Typography>
+                            <Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>
+                                {fCurrency((grandTotal - totalAmount))}
+                            </Typography>
+                        </Stack>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Container>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/InvoicePayment/Index.tsx

@@ -0,0 +1,30 @@
+import { Card, Stack } from "@mui/material";
+import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
+import Page from "../../components/Page";
+import List from "./List";
+
+
+
+export default function Invoice() {
+
+  const pageTitle = 'Invoice Management';
+  return (
+    <Page title={ pageTitle } sx={{ mx: 2}}>
+
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Invoice Payment',
+            href: '/invoice-payment',
+          },
+        ]}
+      />
+
+      {/* <Stack> */}
+      <List />
+      {/* </Stack> */}
+    </Page>
+  );
+}

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' },

frontend/dashboard/src/routes/index.tsx

@@ -480,6 +480,22 @@ export default function Router() {
           path: 'report/rujukan',
           element: <RujukanPasien/>,
         },
+        {
+            path: 'invoice-payment',
+            element: <InvoicePayments />,
+        },
+        {
+            path: 'invoice-payment/create',
+            element: <CreateInvoicePayments />,
+        },
+        {
+            path: 'invoice-payment/detail/:id',
+            element: <InvoicePaymentsDetail />,
+        },
+        {
+            path: 'invoice-payment/edit/:invoiceID',
+            element: <InvoicePaymentsEdit />,
+        },
         {
           path: 'claims',
           element: <Claims />,
@@ -780,6 +796,13 @@ const CorporateHistories = Loadable(
 
 const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
 
+//Invoice_Payments
+const InvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/Index')));
+const CreateInvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
+const InvoicePaymentsDetail = Loadable(lazy(() => import('../pages/InvoicePayment/Detail')));
+const InvoicePaymentsEdit = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
+
+
 const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
 const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
 const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));