+ 
+ {filteredRoles.map((role, index) => (
+
+ );
+}
+
+export default QrPermit;
diff --git a/src/components/Global/RegisterRequest.jsx b/src/components/Global/RegisterRequest.jsx
new file mode 100644
index 0000000..4bd767c
--- /dev/null
+++ b/src/components/Global/RegisterRequest.jsx
@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+const RegistrationRequest = async ({ method, prefix, params, headers = {} }) => {
+ const baseURL = `${import.meta.env.VITE_API_SERVER}`;
+
+ try {
+ const response = await axios({
+ method: method,
+ url: `${baseURL}/${prefix}`,
+ data: params,
+ headers: {
+ 'Accept-Language': 'en_US',
+ ...headers,
+ },
+ withCredentials: true,
+ });
+
+ return response.data || {};
+ } catch (error) {
+ console.error(`Error saat ${prefix}:`, error.response?.data || error.message);
+ throw error.response?.data || { message: 'Terjadi kesalahan pada server' };
+ }
+};
+
+export default RegistrationRequest;
\ No newline at end of file
diff --git a/src/components/Global/StatusButton.jsx b/src/components/Global/StatusButton.jsx
new file mode 100644
index 0000000..9c7b531
--- /dev/null
+++ b/src/components/Global/StatusButton.jsx
@@ -0,0 +1,499 @@
+import React, { useState } from 'react';
+import {
+ Button,
+ Modal,
+ Divider,
+ Card,
+ Tag,
+ ConfigProvider,
+ Typography,
+ message,
+ Input,
+ Radio,
+} from 'antd';
+import { getStatusHistory, approvalPermit } from '../../api/status-history';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from './ToastNotif';
+import { getSessionData } from './Formatter';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const StatusButton = (props) => {
+ const {
+ color,
+ name,
+ style,
+ canApprove = true,
+ canReject = true,
+ refreshData = (e) => {},
+ } = props;
+
+ const session = getSessionData();
+ const isVendor = session?.user?.role_id == `${import.meta.env.VITE_ROLE_VENDOR}`;
+
+ const [isModalVisible, setIsModalVisible] = useState(false);
+ const [confirmLoading, setConfirmLoading] = useState(false);
+ const [historyData, setHistoryData] = useState([]);
+ const [showConfirmModal, setShowConfirmModal] = useState(false);
+ const [showPermitSelesai, setShowPermitSelesai] = useState(false);
+ const [actionType, setActionType] = useState(null);
+ const [deskripsi, setDeskripsi] = useState('');
+ const [closeType, setCloseType] = useState('1');
+
+ const pengajuanPermitSelesai = 4;
+ const permitSelesai = 7;
+
+ const fetchHistory = async () => {
+ const permitId = props.permitId;
+ const id = parseInt(permitId);
+
+ if (!permitId || isNaN(id)) {
+ console.error('Permit ID tidak valid:', permitId);
+ message.error('Permit ID tidak valid atau kosong');
+ return;
+ }
+
+ try {
+ const res = await getStatusHistory(id);
+
+ const mapped =
+ res?.data?.data?.map((item) => ({
+ name: item.name,
+ color: item.status_permit_color,
+ text: item.status_permit_name,
+ deskripsi: item.deskripsi,
+ date: item.created_at,
+ closed: item.close_type !== null ? item.close_type_name : null,
+ })) ?? [];
+
+ setHistoryData(mapped);
+ } catch (err) {
+ console.error('API ERROR:', err);
+ message.error('Gagal mengambil riwayat status dari server');
+ }
+ };
+
+ const showModal = () => {
+ fetchHistory();
+ setIsModalVisible(true);
+ };
+
+ const handleCancel = () => {
+ setIsModalVisible(false);
+ };
+
+ const handleSelesai = () => {
+ setShowPermitSelesai(true);
+ };
+
+ const handleApprove = () => {
+ setActionType('approve');
+ setShowConfirmModal(true);
+ };
+
+ const handleReject = () => {
+ setActionType('reject');
+ setShowConfirmModal(true);
+ };
+
+ const submitSelesai = async () => {
+ const payload = {
+ status_permit: true,
+ close_type: closeType,
+ };
+
+ try {
+
+ setConfirmLoading(true);
+ const response = await approvalPermit(props.permitId, payload);
+
+ if (response?.status === 200) {
+ NotifOk({
+ icon: 'success',
+ title: 'Pengajuan Selesai',
+ message: `Permit berhasil diajukan sebagai ${
+ closeType === '1' ? 'selesai' : 'belum selesai'
+ }.`,
+ });
+ setIsModalVisible(false);
+ setShowPermitSelesai(false);
+ setCloseType('');
+ setTimeout(() => {
+ refreshData();
+ }, 500);
+ } else {
+ throw new Error(response?.data?.message || 'Proses gagal');
+ }
+ } catch (err) {
+ console.error('Error saat mengajukan permit:', err);
+ NotifAlert({
+ icon: 'error',
+ title: 'Gagal',
+ message: err.message || 'Terjadi kesalahan saat memproses permit.',
+ });
+ } finally {
+ setConfirmLoading(false);
+ setShowPermitSelesai(false);
+ setCloseType('');
+ }
+ };
+
+ const submitApproval = async () => {
+ const payload = {
+ status_permit: actionType === 'approve' ? true : false,
+ deskripsi: deskripsi.trim(),
+ };
+
+ try {
+
+ setConfirmLoading(true);
+ const response = await approvalPermit(props.permitId, payload);
+
+ if (response?.status === 200) {
+ NotifOk({
+ icon: 'success',
+ title: actionType === 'approve' ? 'Disetujui' : 'Ditolak',
+ message:
+ actionType === 'approve'
+ ? 'Permit berhasil disetujui.'
+ : 'Permit berhasil ditolak.',
+ });
+ setIsModalVisible(false);
+ setShowConfirmModal(false);
+ setDeskripsi('');
+ setTimeout(() => {
+ refreshData();
+ }, 500);
+ } else {
+ throw new Error(response?.data?.message || 'Proses gagal');
+ }
+ } catch (err) {
+ console.error('Error saat menyetujui permit:', err);
+ NotifAlert({
+ icon: 'error',
+ title: 'Gagal',
+ message: err.message || 'Terjadi kesalahan saat memproses permit.',
+ });
+ } finally {
+ setConfirmLoading(false);
+ setShowConfirmModal(false);
+ setDeskripsi('');
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ Validasi Dokumen <br /> Pupuk Indonesia Utilitas
+
+
+ {role}
+
+
+ ))}
+
+
+ Nama:
+ {' '}
+ {selectedName ?? '-'}
+
+
+ {formattedTime}
+
+
+ +
+
+ {item.text}
+
+ {item.date != null && (
+
+ {dayjs.utc(item.date).format('YYYY-MM-DD HH:mm:ss')}
+
+ )}
+
+
+
+ Closed: {item.closed}
+
+ )}
+
+
+ {item.deskripsi && (
+ {item.name}
+
+ {item.closed && (
+ + {item.deskripsi} +
+ )} +Silakan isi deskripsi:
+