You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
monitor-doc/resources/js/Pages/Dashboard.jsx

80 lines
3.2 KiB
React

2 years ago
import React from 'react';
2 years ago
import "@fullcalendar/react/dist/vdom";
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import interactionPlugin from "@fullcalendar/interaction" // needed for dayClick
2 years ago
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import { router } from '@inertiajs/react'
2 years ago
export default function Dashboard(props) {
2 years ago
const { count_active, count_update, count_expired, count_total, events } = props
2 years ago
const calenderEvents = events.map(e => {
return {
2 years ago
title: `${e.document.type.name} - ${e.document.name}`,
2 years ago
date: e.date,
id : e.id,
url: route('docs.show', e.document)
}
})
const handleEventClick = (arg) => {
// console.log(arg.event)
}
2 years ago
const handleDateClick = (arg) => { // bind with an arrow function
// apa yang harus di handle: tampilkan saja modal yang ada event pada date ini kemudian bisa tambah reminder atau hapus reminder pada data ini,
// untuk tambah reminder pilih form doc id saja kemudian tambah , untuk delete cukup confirm kemudian hilang
2 years ago
alert(arg.dateStr)
2 years ago
}
2 years ago
return (
<AuthenticatedLayout
auth={props.auth}
errors={props.errors}
flash={props.flash}
notify={props.notify}
2 years ago
>
<Head title="Dashboard" />
<div className='mx-auto px-2 md:px-4 lg:px-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-1'>
<div className="stats bg-base-100 shadow-md w-full">
<div className="stat">
<div className="stat-title">Dokumen Aktif</div>
<div className="stat-value">{count_active}</div>
2 years ago
</div>
</div>
<div className="stats bg-base-100 shadow-md w-full">
<div className="stat">
<div className="stat-title">Dokumen Diperbarui</div>
<div className="stat-value">{count_update}</div>
</div>
</div>
<div className="stats bg-base-100 shadow-md w-full">
<div className="stat">
<div className="stat-title">Dokumen Berakhir</div>
<div className="stat-value">{count_expired}</div>
</div>
</div>
<div className="stats bg-base-100 shadow-md w-full">
<div className="stat">
<div className="stat-title">Total Dokumen</div>
<div className="stat-value">{count_total}</div>
</div>
</div>
</div>
<div className='bg-base-100 mx-2 md:mx-8 mt-4 p-2 md:p-4 lg:p-8 h-auto'>
2 years ago
<FullCalendar
plugins={[ dayGridPlugin, interactionPlugin ]}
initialView="dayGridMonth"
dateClick={handleDateClick}
2 years ago
eventClick={handleEventClick}
2 years ago
events={calenderEvents}
/>
</div>
2 years ago
</AuthenticatedLayout>
);
}