import React, { useState, useEffect } from 'react' import { usePrevious } from 'react-use' import { Inertia } from '@inertiajs/inertia' import DatePicker from 'react-datepicker' import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from 'chart.js' import { Bar } from 'react-chartjs-2' ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip) import Authenticated from '@/Layouts/Authenticated' import { Head } from '@inertiajs/inertia-react' import { formatIDR } from '@/utils' export default function Dashboard(props) { const { employee, product, totalAmount, totalItem, employees, products, charts, _startDate, _endDate, } = props const [startDate, setStartDate] = useState( _startDate ? new Date(_startDate) : new Date() ) const [endDate, setEndDate] = useState( _endDate ? new Date(_endDate) : new Date() ) const preValue = usePrevious(`${startDate}-${endDate}`) const options = { responsive: true, }; const data = { labels: charts.map((item) => item.date), datasets: [ { label: 'Sales', data: charts.map((item) => item.amount), backgroundColor: 'rgb(87, 13, 248, 0.5)', //rgb(87, 13, 248, 0.5) //rgba(255, 99, 132, 0.5) }, ], } useEffect(() => { if (preValue) { Inertia.get(route(route().current()), {startDate, endDate}, { replace: true, preserveState: true, }) } }, [startDate, endDate]) return ( Dashboard } >
{product}
Barang
{employee}
Karyawan
Rp. {formatIDR(totalAmount)}
Minggu ini
{formatIDR(totalItem)}
Minggu ini
Gajian Minggu ini
{ setStartDate(date) }} format="dd/mm/yyyy" className="input input-bordered" nextMonthButtonLabel=">" previousMonthButtonLabel="<" />
{ setEndDate(date) }} format="dd/mm/yyyy" className="input input-bordered" nextMonthButtonLabel=">" previousMonthButtonLabel="<" />
;
Kerjaan karyawan minggu ini
{employees.map((item) => ( ))}
Nama Quantity Grand Total
{item.employee.name} {formatIDR(item.count)} {formatIDR(item.amount)}
Produk Masuk minggu ini
{products.map((item) => ( ))}
Nama Quantity
{item.product.name} {formatIDR(item.count)}
) }