import React, { useState, useEffect } from 'react' import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, ArcElement, Legend, } from 'chart.js' import { Bar, Doughnut } from 'react-chartjs-2' import { Head, router } from '@inertiajs/react' import { usePrevious } from 'react-use' import moment from 'moment' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import { formatIDR } from '@/utils' import FormInputDateRanger from '@/Components/FormInputDateRange' import CustomerSelectionInput from './Customer/SelectionInput' import LocationSelectionInput from './Location/SelectionInput' ChartJS.register( CategoryScale, LinearScale, BarElement, Title, Tooltip, ArcElement, Legend ) export default function Dashboard(props) { const { total_voucher, total_customer, total_customer_verified, total_deposit, total_voucher_sale_this_month, count_voucher_sale_this_month, total_voucher_sale_this_day, count_voucher_sale_this_day, month, deposites, sales, charts, _startDate, _endDate, } = props const [dates, setDates] = useState({ startDate: _startDate, endDate: _endDate, }) const [customer_id, setCustomerId] = useState(null) const [location_id, setLocationId] = useState(null) const preValue = usePrevious(`${dates}${customer_id}${location_id}`) const options = { responsive: true, scales: { x: {}, }, } const data = { labels: charts.map((item) => moment(item.date, 'DD/MM/YYYY').format('DD MMM YYYY') ), datasets: [ { label: 'Penjualan', data: charts.map((item) => item.sale_total), backgroundColor: ['rgba(255, 205, 86, 1)'], }, ], } useEffect(() => { if (preValue) { router.get( route(route().current()), { start_date: dates.startDate, end_date: dates.endDate, customer_id, location_id, }, { replace: true, preserveState: true, } ) } }, [dates, customer_id, location_id]) return (

Total Voucher

{formatIDR(total_voucher)}

Total Customer

{formatIDR(total_customer)}

Total Customer Verified

{formatIDR(total_customer_verified)}

Total Deposit

{formatIDR(total_deposit)}

Total Voucher terjual bulan {month}

{formatIDR(total_voucher_sale_this_month)}

Jumlah Voucher terjual bulan {month}

{formatIDR(count_voucher_sale_this_month)}

Total Voucher terjual hari ini

{formatIDR(total_voucher_sale_this_day)}

Jumlah Voucher terjual hari ini

{formatIDR(count_voucher_sale_this_day)}

Penjualan

setLocationId(id) } placeholder="filter lokasi" /> setCustomerId(id) } placeholder="filter customer" /> setDates(dates)} />

Deposit Hari Ini

{deposites.map((deposit, index) => ( ))}

#	Customer	Deposit
{index + 1}	{deposit.customer.name}	{formatIDR(deposit.total)}

Penjualan Hari Ini

{sales.map((sale, index) => ( ))}

#	Customer	Voucher	Total
{index + 1}	{sale.name}	{formatIDR(sale.count)}	{formatIDR(sale.total)}

) }