- {loading ?
- <>
-
- :
-
+ {loading ? <>
:
+ <>
+
{formatTanggalIndo(date)}
@@ -124,10 +122,13 @@ export default function DetailPresenceCardComponent({ date, presences }) {
+
+ }
+
);
diff --git a/src/components/ExportExcelButton.js b/src/components/ExportExcelButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..fddfc808bcaf6982530632aa0608785ae73a1d68
--- /dev/null
+++ b/src/components/ExportExcelButton.js
@@ -0,0 +1,114 @@
+'use client';
+
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+import { Button } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/id';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+
+dayjs.locale('id');
+dayjs.extend(isSameOrBefore);
+
+const ExportExcelButton = ({ data }) => {
+ const exportToExcel = () => {
+ const rows = [];
+
+ // Ambil tanggal awal dan akhir dari data
+ const allDates = data.map((d) => d.date).sort();
+ const firstDate = dayjs(allDates[0]);
+ const lastDate = dayjs(allDates[allDates.length - 1]);
+
+ // Buat map tanggal ke data presensi
+ const dateMap = new Map();
+ data.forEach((record) => {
+ dateMap.set(record.date, record.presences);
+ });
+
+ // Iterasi dari tanggal awal ke akhir
+ for (
+ let current = firstDate;
+ current.isSameOrBefore(lastDate);
+ current = current.add(1, 'day')
+ ) {
+ const isoDate = current.format('YYYY-MM-DD');
+ const tanggalFormat = current.format('D MMMM YYYY');
+ const hari = current.format('dddd');
+
+ const presences = dateMap.get(isoDate) || [];
+ let hasMasuk = false;
+
+ presences.forEach((presence) => {
+ if (presence.presence_type !== 'masuk') return;
+
+ hasMasuk = true;
+ const masuk = presence.time;
+ const pulang = presence.presence?.time || '';
+
+ let waktuKerja = '';
+ if (masuk && pulang) {
+ const masukTime = dayjs(`1970-01-01T${masuk}`);
+ const pulangTime = dayjs(`1970-01-01T${pulang}`);
+ let durasi = pulangTime.diff(masukTime, 'second');
+
+ // Kurangi istirahat berdasarkan hari
+ if (hari === 'Jumat') {
+ durasi -= 5400; // 1 jam 30 menit
+ } else {
+ durasi -= 3600; // 1 jam
+ }
+
+ // Pastikan durasi tidak negatif
+ durasi = Math.max(0, durasi);
+
+ const jam = String(Math.floor(durasi / 3600)).padStart(2, '0');
+ const menit = String(Math.floor((durasi % 3600) / 60)).padStart(2, '0');
+ const detik = String(durasi % 60).padStart(2, '0');
+ waktuKerja = `${jam}:${menit}:${detik}`;
+ }
+
+ rows.push({
+ Hari: hari.charAt(0).toUpperCase() + hari.slice(1),
+ Tanggal: tanggalFormat,
+ Masuk: masuk,
+ Pulang: pulang,
+ 'Waktu Kerja': waktuKerja,
+ Keterangan:
+ hari === 'Sabtu' || hari === 'Minggu' ? 'Hadir (Hari Libur)' : 'Hadir',
+ });
+ });
+
+ // Jika tidak ada data masuk, tampilkan sebagai keterangan -
+ if (!hasMasuk) {
+ rows.push({
+ Hari: hari.charAt(0).toUpperCase() + hari.slice(1),
+ Tanggal: tanggalFormat,
+ Masuk: '',
+ Pulang: '',
+ 'Waktu Kerja': '',
+ Keterangan: '',
+ });
+ }
+ }
+
+ const worksheet = XLSX.utils.json_to_sheet(rows);
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, 'Presensi');
+
+ const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+ const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
+ saveAs(blob, `presensi_${dayjs().format('YYYY-MM-DD')}.xlsx`);
+ };
+
+ return (
+
+ );
+};
+
+export default ExportExcelButton;
diff --git a/src/components/LoadComponent.js b/src/components/LoadComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..12b302a6df6ad2c75cf742450ae140c93f988ea3
--- /dev/null
+++ b/src/components/LoadComponent.js
@@ -0,0 +1,10 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Skeleton, Spin } from 'antd';
+
+export default function LoadComponent() {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ProfileCardComponent.js b/src/components/ProfileCardComponent.js
index 6caadb2bfa1be88036a405d5d0d6aa0a1c788a08..b64d2dd3e60f1c52012e2fb9da943f3adf665c5d 100644
--- a/src/components/ProfileCardComponent.js
+++ b/src/components/ProfileCardComponent.js
@@ -15,7 +15,7 @@ export default function ProfileCardComponent({ name, image }) {
{session?.user?.name || '-'}
{session?.nip || 'NIP'}