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
}
>
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
Nama |
Quantity |
Grand Total |
{employees.map((item) => (
{item.employee.name} |
{formatIDR(item.count)} |
{formatIDR(item.amount)} |
))}
Produk Masuk minggu ini
Nama |
Quantity |
{products.map((item) => (
{item.product.name} |
{formatIDR(item.count)} |
))}
)
}