67 lines
3.5 KiB
TypeScript
67 lines
3.5 KiB
TypeScript
"use client"
|
|
import { useAppSelector } from "@/lib/hooks";
|
|
import { useGetEmployeeSummaryQuery, useGetMonthlyEmployeeQuery } from "@/services/api";
|
|
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
|
|
import { BarChart, ChartsLegend, ChartsTooltip, ChartsXAxis, ChartsYAxis, LineChart } from "@mui/x-charts";
|
|
import { formatDate } from "date-fns";
|
|
import { useEffect } from "react";
|
|
|
|
export default function KaryawanPage() {
|
|
|
|
const filter = useAppSelector(state => state.filter.filter);
|
|
const {data: employeeSummary} = useGetEmployeeSummaryQuery(filter);
|
|
const {data: montlyEmployee} = useGetMonthlyEmployeeQuery(filter);
|
|
|
|
useEffect(() => {
|
|
console.log(filter);
|
|
}, [filter]);
|
|
|
|
return (
|
|
<div className="grid grid-cols-12 gap-4">
|
|
<div className="col-span-8 bg-white py-4 pl-4 rounded-lg max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Data Karyawan</div>
|
|
<div className="flex-1 min-h-[300px]">
|
|
{employeeSummary && <BarChart className="w-full" dataset={employeeSummary} series={[
|
|
{dataKey: "count", label: (v) => v === "tooltip" ? "Jumlah Karyawan" : undefined!, color: "#2385DE"}
|
|
]} xAxis={[
|
|
{dataKey: "organization_code", label: "Nama Perusahaan", scaleType: "band", valueFormatter: (v, context) => context.location === "tooltip" ? employeeSummary.find(e => e.organization_code === v)?.organization_name : v}
|
|
]} />}
|
|
</div>
|
|
</div>
|
|
<div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Data Karyawan Perbulan</div>
|
|
<div className="flex-1 min-h-[300px]">
|
|
{montlyEmployee && <LineChart className="w-full" dataset={montlyEmployee} series={[
|
|
{dataKey: "count", label: (v) => v === "tooltip" ? "Jumlah Karyawan" : undefined!, area: true, color: "#F7CAA9"}
|
|
]} xAxis={[
|
|
{dataKey: "date", label: "Bulan", scaleType: "band", valueFormatter: (v, context) => formatDate(new Date(v), context.location === "tooltip" ? "MMMM yyyy" : "MMM")}
|
|
]} />}
|
|
</div>
|
|
</div>
|
|
<div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Pergerakan Karyawan</div>
|
|
<div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
|
|
<span className="text-gray-600">Data belum tersedia</span>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-8 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Ranking (Top 10) Total Pergerakan Karyawan Setiap Perusahaan</div>
|
|
<div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
|
|
<span className="text-gray-600">Data belum tersedia</span>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Penjatuhan Sanksi</div>
|
|
<div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
|
|
<span className="text-gray-600">Data belum tersedia</span>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-8 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
|
|
<div className="text-xl font-bold">Ranking (Top 10) Total Penjatuhan Sanksi Setiap Perusahaan</div>
|
|
<div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
|
|
<span className="text-gray-600">Data belum tersedia</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |