update dashboard

This commit is contained in:
Ramadhon Ikhsan Prasetya 2024-08-26 16:11:17 +07:00
parent f9da238d9d
commit 66e3c51bdc
7 changed files with 505 additions and 15 deletions

125
package-lock.json generated
View File

@ -25,6 +25,7 @@
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",
"nextjs-toploader": "^1.6.6", "nextjs-toploader": "^1.6.6",
"react": "^18", "react": "^18",
"react-apexcharts": "^1.4.1",
"react-dom": "^18", "react-dom": "^18",
"react-hook-form": "^7.45.4", "react-hook-form": "^7.45.4",
"react-query": "^3.39.3", "react-query": "^3.39.3",
@ -4068,6 +4069,12 @@
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
"peer": true "peer": true
}, },
"node_modules/@yr/monotone-cubic-spline": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
"peer": true
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.12.1", "version": "8.12.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@ -4225,6 +4232,21 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/apexcharts": {
"version": "3.52.0",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz",
"integrity": "sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==",
"peer": true,
"dependencies": {
"@yr/monotone-cubic-spline": "^1.0.3",
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1"
}
},
"node_modules/archiver": { "node_modules/archiver": {
"version": "5.3.2", "version": "5.3.2",
"resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz", "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
@ -8422,6 +8444,18 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-apexcharts": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
"integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"apexcharts": "^3.41.0",
"react": ">=0.13"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.3.1", "version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@ -9391,6 +9425,97 @@
"node": ">=12.0.0" "node": ">=12.0.0"
} }
}, },
"node_modules/svg.draggable.js": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"peer": true,
"dependencies": {
"svg.js": "^2.0.1"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.easing.js": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
"peer": true,
"dependencies": {
"svg.js": ">=2.3.x"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.filter.js": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
"peer": true,
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
"peer": true
},
"node_modules/svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"peer": true,
"dependencies": {
"svg.js": "^2.4.0"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"peer": true,
"dependencies": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js/node_modules/svg.select.js": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"peer": true,
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.select.js": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"peer": true,
"dependencies": {
"svg.js": "^2.6.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/tapable": { "node_modules/tapable": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

View File

@ -12,6 +12,7 @@
"@ant-design/icons": "^5.3.0", "@ant-design/icons": "^5.3.0",
"@sentry/nextjs": "^8.26.0", "@sentry/nextjs": "^8.26.0",
"antd": "^5.12.5", "antd": "^5.12.5",
"apexcharts": "^3.49.1",
"cookies-next": "^4.1.1", "cookies-next": "^4.1.1",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"docxtemplater": "^3.40.0", "docxtemplater": "^3.40.0",
@ -26,6 +27,7 @@
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",
"nextjs-toploader": "^1.6.6", "nextjs-toploader": "^1.6.6",
"react": "^18", "react": "^18",
"react-apexcharts": "^1.4.1",
"react-dom": "^18", "react-dom": "^18",
"react-hook-form": "^7.45.4", "react-hook-form": "^7.45.4",
"react-query": "^3.39.3", "react-query": "^3.39.3",

View File

@ -1 +1 @@
{"version":3,"file":"sw.js","sources":["C:/Users/Zame/AppData/Local/Temp/921224a5bd3165d633a1c85bf0fdd625/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from 'E:/JS PROJECT/das/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from 'E:/JS PROJECT/das/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from 'E:/JS PROJECT/das/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from 'E:/JS PROJECT/das/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"} {"version":3,"file":"sw.js","sources":["../../../Users/modern/AppData/Local/Temp/d3da5137cc0f02db0dee33dd804e57ce/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from 'C:/laragon/www/das/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from 'C:/laragon/www/das/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from 'C:/laragon/www/das/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from 'C:/laragon/www/das/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}

View File

@ -0,0 +1,132 @@
"use client";
import {useEffect, useState} from "react";
import {Spin} from "antd";
import {Helper} from "@/lib/Helper";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), {ssr: false});
const OntimeChart = () => {
const [grafik, setGrafik] = useState([])
const [optionGrafik, setOptionGrafik] = useState({
chart: {
fontFamily: 'var(--font-poppins)',
height: 500,
dropShadow: {
enabled: true, color: '#000', top: 18, left: 7, blur: 10, opacity: 0.2
},
}, yaxis: {
labels: {
formatter: (val) => {
return val
},
},
}, xaxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
}, stroke: {
curve: 'smooth'
}, dataLabels: {
enabled: true,
enabledOnSeries: [5], formatter: function (val, opt) {
return val
},
}, tooltip: {
shared: true, intersect: false, y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y
}
return y;
}
}
}, fill: {
type: 'solid',
opacity: [0.2, 0.2],
},
})
// const getChart = (data, total) => {
// let result = []
// data?.map((v, k) => {
// let dataResult = v?.detailMonths?.map((v, k) => {
// return Helper.numFormat(v.total)
// })
// result.push({
// name : v.jenisAgunanNm,
// type : 'area',
// data : dataResult,
// })
// })
// let detailAgunanMonths = []
// total?.map((v, k) => {
// detailAgunanMonths.push(v.total)
// })
// if (data.length > 1) {
// result.push({
// name : 'Total',
// type : 'line',
// color : '#2b2b2b',
// data : detailAgunanMonths,
// })
// }
// let resultMonth = data[0]?.detailMonths?.map((v, k) => {
// return Helper.formatDate(v.tgl, 'mm') + ' ' + Helper.formatDate(v.tgl, 'Y')
// })
// setOptionGrafik(prev => ({
// ...prev, xaxis: {
// categories: resultMonth
// }
// }));
// setGrafik(result)
// }
const getChart = () => {
let result = [{
name : 'Tepat Waktu',
type : 'area',
color : '#50CD89',
data : ['16', '15', '15', '14','16', '15', '15', '14','16', '15', '15', '14'],
},
{
name : 'Terlambat',
type : 'area',
color : '#F1416C',
data : ['3', '10', '8', '0','3', '1', '1', '0','3', '1', '1', '0'],
},]
setGrafik(result)
}
useEffect(() => {
getChart()
}, []);
return (
<>
{/* <Spin spinning={loading}> */}
<div className="card">
<div className="contentTitle">
<div className="title">Data Grafik</div>
<div className="subtitle">Ketepatan Waktu Karyawan</div>
</div>
<div className="contentCard">
<ReactApexChart options={optionGrafik} series={grafik} type="area" height={360} />
</div>
</div>
{/* </Spin> */}
</>
);
};
export default OntimeChart;

View File

@ -0,0 +1,144 @@
"use client";
import {useEffect, useState} from "react";
import {Spin} from "antd";
import {Helper} from "@/lib/Helper";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), {ssr: false});
const PresenceChart = () => {
const [grafik, setGrafik] = useState([])
const [optionGrafik, setOptionGrafik] = useState({
chart: {
fontFamily: 'var(--font-poppins)',
height: 500,
dropShadow: {
enabled: true, color: '#000', top: 18, left: 7, blur: 10, opacity: 0.2
},
}, yaxis: {
labels: {
formatter: (val) => {
return val
},
},
}, xaxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
}, stroke: {
curve: 'smooth'
}, dataLabels: {
enabled: true,
enabledOnSeries: [5], formatter: function (val, opt) {
return val
},
}, tooltip: {
shared: true, intersect: false, y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y
}
return y;
}
}
}, fill: {
type: 'solid',
opacity: [0.2, 0.2, 0.2, 0.2],
},
})
// const getChart = (data, total) => {
// let result = []
// data?.map((v, k) => {
// let dataResult = v?.detailMonths?.map((v, k) => {
// return Helper.numFormat(v.total)
// })
// result.push({
// name : v.jenisAgunanNm,
// type : 'area',
// data : dataResult,
// })
// })
// let detailAgunanMonths = []
// total?.map((v, k) => {
// detailAgunanMonths.push(v.total)
// })
// if (data.length > 1) {
// result.push({
// name : 'Total',
// type : 'line',
// color : '#2b2b2b',
// data : detailAgunanMonths,
// })
// }
// let resultMonth = data[0]?.detailMonths?.map((v, k) => {
// return Helper.formatDate(v.tgl, 'mm') + ' ' + Helper.formatDate(v.tgl, 'Y')
// })
// setOptionGrafik(prev => ({
// ...prev, xaxis: {
// categories: resultMonth
// }
// }));
// setGrafik(result)
// }
const getChart = () => {
let result = [{
name : 'Hadir',
type : 'area',
color : '#50CD89',
data : ['16', '15', '15', '14','16', '15', '15', '14','16', '15', '15', '14'],
},
{
name : 'Izin',
type : 'area',
color : '#FFC700',
data : ['1', '8', '6', '2','1', '0', '0', '2','1', '0', '0', '2'],
},
{
name : 'Sakit',
type : 'area',
color : '#F1416C',
data : ['3', '10', '8', '0','3', '1', '1', '0','3', '1', '1', '0'],
},
{
name : 'Cuti',
type : 'area',
color : '#4795F1',
data : ['1', '0', '0', '2','1', '0', '0', '2','1', '0', '0', '2'],
}]
setGrafik(result)
}
useEffect(() => {
getChart()
}, []);
return (
<>
{/* <Spin spinning={loading}> */}
<div className="card">
<div className="contentTitle">
<div className="title">Data Grafik</div>
<div className="subtitle">Kehadiran Karyawan Tahunan</div>
</div>
<div className="contentCard">
<ReactApexChart options={optionGrafik} series={grafik} type="area" height={360} />
</div>
</div>
{/* </Spin> */}
</>
);
};
export default PresenceChart;

View File

@ -7,15 +7,105 @@ import { Row, Col, Spin } from 'antd';
import { ClockCircleOutlined, TrophyOutlined } from '@ant-design/icons'; import { ClockCircleOutlined, TrophyOutlined } from '@ant-design/icons';
import { Helper } from "@/lib/Helper"; import { Helper } from "@/lib/Helper";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import dayjs from 'dayjs';
import {DropdownAPI} from "@/lib/DropdownAPI";
import PresenceChart from "./PresenceChart";
import OntimeChart from "./OntimeChart";
import usePreventBackNavigation from "@/hooks/usePreventBackNavigation"; import usePreventBackNavigation from "@/hooks/usePreventBackNavigation";
export default function Dashboard() { export default function Dashboard() {
usePreventBackNavigation(); usePreventBackNavigation();
const [dropdownLoading, setDropdownLoading] = useState(false);
const [dropdownData, setDropdownData] = useState(
{
branchId : []
});
// const [dataLoading, setDataLoading] = useState({
// summary: true,
// activity: true,
// date: false
// });
const { const {
register, setValue, watch, getValues, formState: { errors }, register, setValue, watch, getValues, formState: { errors },
} = useForm(); } = useForm();
const getDropdownFilter = async () => {
setDropdownLoading(true)
let listBranch = await DropdownAPI.cabang()
console.log(listBranch)
setDropdownData({
branchId : listBranch
})
setDropdownLoading(false)
}
const getDashboardData = async (filter) => {
console.log(filter)
// setDataLoading(prev => ({
// ...prev,
// summary: true,
// activity: true,
// }));
// let setFilter = (filter) ? filter : ''
// // console.log(setFilter)
// let dataDashboard = await API.GET(`/dashboard/webmin/lelang` + setFilter)
// let dataActivity = await API.GET(`/dashboard/webmin/lelang/activity` + setFilter)
// if (dataDashboard.status === 200) {
// setSummary(dataDashboard.result)
// } else {
// notifOpen("Gagal", dataDashboard.result.message, 'danger');
// }
// if (dataActivity.status === 200) {
// setActivity(dataActivity.result)
// } else {
// notifOpen("Gagal", dataActivity.result.message, 'danger');
// }
// setDataLoading(prev => ({
// ...prev,
// summary: false,
// activity: false,
// }));
}
const initFilter = async () => {
let filterCabang = (getValues("filterCabang")) ? watch("filterCabang") : ''
let startDate = (getValues("filterTanggal")) ? dayjs(watch("filterTanggal")?.startDate).format("YYYY-MM-DD") : dayjs().startOf("year").format("YYYY-MM-DD")
let endDate = (getValues("filterTanggal")) ? dayjs(watch("filterTanggal")?.endDate).format("YYYY-MM-DD") : dayjs().endOf("year").format("YYYY-MM-DD")
const queryParams = {
branchId: filterCabang,
startDate: startDate,
endDate: endDate
};
let queryString = new URLSearchParams(queryParams).toString();
queryString = "?" + queryString
await getDashboardData(queryString);
}
useEffect(() => {
getDropdownFilter();
}, []);
useEffect(() => {
initFilter()
}, [watch("filterCabang"), watch("filterTanggal")]);
return (<div className="dashboard"> return (<div className="dashboard">
<div className="bodyContent"> <div className="bodyContent">
@ -34,7 +124,8 @@ export default function Dashboard() {
name={"filterCabang"} name={"filterCabang"}
register={register} register={register}
error={errors} error={errors}
options={''} loading={dropdownLoading}
options={dropdownData?.branchId}
val={getValues("filterCabang")} val={getValues("filterCabang")}
placeholder={"Filter Cabang"} placeholder={"Filter Cabang"}
setValue={setValue} setValue={setValue}
@ -56,7 +147,7 @@ export default function Dashboard() {
</div> </div>
<div className="contents"> <div className="contents">
<Row gutter={[24, 24]}> <Row gutter={[24, 24]}>
<Col xs={24} xl={10}> <Col xs={24} xl={10} xxl={9}>
<div className="card attendance"> <div className="card attendance">
<div className="contentTitle"> <div className="contentTitle">
<div className="title">Kehadiran</div> <div className="title">Kehadiran</div>
@ -191,23 +282,19 @@ export default function Dashboard() {
</li> </li>
<li> <li>
<div className="date">1 Maret 2024 13:00</div> <div className="date">1 Maret 2024 13:00</div>
<div className="activity"><span>Zamzam</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, reprehenderit eum soluta corrupti nobis vitae facilis ad assumenda veritatis quibusdam, repudiandae natus magni, commodi eveniet sequi ea est quasi. Temporibus? </div> <div className="activity"><span>Zamzam</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus.</div>
</li> </li>
<li> <li>
<div className="date">1 Maret 2024 13:00</div> <div className="date">1 Maret 2024 13:00</div>
<div className="activity"><span>Fauzi</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, reprehenderit eum soluta corrupti nobis vitae facilis ad assumenda veritatis quibusdam, repudiandae natus magni, commodi eveniet sequi ea est quasi. Temporibus? </div> <div className="activity"><span>Fauzi</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus.</div>
</li> </li>
</ul> </ul>
<img src="/img/dashboard/user-detail.svg" className="bgIcon" /> <img src="/img/dashboard/user-detail.svg" className="bgIcon" />
</div> </div>
</Col> </Col>
<Col xs={24} xl={14}> <Col xs={24} xl={14} xxl={15}>
<div className="card attendance"> <PresenceChart />
<div className="contentTitle"> <OntimeChart />
<div className="title">Data Grafik</div>
<div className="subtitle">Kehadiran Karyawan Tahunan</div>
</div>
</div>
<Row gutter={[24, 24]}> <Row gutter={[24, 24]}>
<Col xs={24} xl={12}> <Col xs={24} xl={12}>
<div className="card statusAttendance good"> <div className="card statusAttendance good">

View File

@ -13,8 +13,8 @@ const cabang = async () => {
let response = await API.GET(`/ref/branch`); let response = await API.GET(`/ref/branch`);
return response?.result?.data?.map((v) => { return response?.result?.data?.map((v) => {
return { return {
value: v.kdCab, value: v.branchId,
label: v.namaCabang, label: v.nm,
}; };
}); });
} }