From 50d040953f23496fce893bc1b7da54fb40747464 Mon Sep 17 00:00:00 2001 From: Vinix Date: Fri, 24 Oct 2025 11:46:58 +0700 Subject: [PATCH] color picker --- .../master/status/component/DetailStatus.jsx | 73 ++++----- src/pages/user/component/ListUser.jsx | 147 +++++++++--------- 2 files changed, 104 insertions(+), 116 deletions(-) diff --git a/src/pages/master/status/component/DetailStatus.jsx b/src/pages/master/status/component/DetailStatus.jsx index efe499d..11b1afa 100644 --- a/src/pages/master/status/component/DetailStatus.jsx +++ b/src/pages/master/status/component/DetailStatus.jsx @@ -9,7 +9,7 @@ import { Switch, Row, Col, - Radio, + ColorPicker, } from 'antd'; import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif'; import { validateRun } from '../../../../Utils/validate'; @@ -18,18 +18,6 @@ import { createStatus, updateStatus } from '../../../../api/master-status'; const { Text } = Typography; const { TextArea } = Input; -// Daftar 8 warna yang tersedia -const COLOR_OPTIONS = [ - { label: 'Merah', value: '#EF4444', hex: '#EF4444' }, - { label: 'Biru', value: '#3B82F6', hex: '#3B82F6' }, - { label: 'Hijau', value: '#10B981', hex: '#10B981' }, - { label: 'Kuning', value: '#F59E0B', hex: '#F59E0B' }, - { label: 'Ungu', value: '#8B5CF6', hex: '#8B5CF6' }, - { label: 'Pink', value: '#EC4899', hex: '#EC4899' }, - { label: 'Orange', value: '#F97316', hex: '#F97316' }, - { label: 'Teal', value: '#14B8A6', hex: '#14B8A6' }, -]; - const DetailStatus = (props) => { const [confirmLoading, setConfirmLoading] = useState(false); @@ -57,8 +45,8 @@ const DetailStatus = (props) => { setFormData({ ...formData, is_active: checked }); }; - const handleColorChange = (e) => { - setFormData({ ...formData, status_color: e.target.value }); + const handleColorChange = (color, hex) => { + setFormData({ ...formData, status_color: hex }); }; const handleCancel = () => { @@ -213,38 +201,33 @@ const DetailStatus = (props) => { Status Color *
- - - {COLOR_OPTIONS.map((color) => ( - - -
-
- {color.label} -
- - - ))} - - + showText={(color) => `color hex: ${color.toHexString()}`} + allowClear={false} + format="hex" + size="large" + style={{ width: '100%' }} + presets={[ + { + label: 'Recommended', + colors: [ + '#EF4444', // Merah + '#3B82F6', // Biru + '#10B981', // Hijau + '#F59E0B', // Kuning + '#8B5CF6', // Ungu + '#EC4899', // Pink + '#F97316', // Orange + '#14B8A6', // Teal + '#6B7280', // Gray + '#000000', // Black + ], + }, + ]} + />
diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx index b580830..067b456 100644 --- a/src/pages/user/component/ListUser.jsx +++ b/src/pages/user/component/ListUser.jsx @@ -1,5 +1,5 @@ import React, { memo, useState, useEffect } from 'react'; -import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd'; +import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Modal } from 'antd'; import { PlusOutlined, EditOutlined, @@ -8,6 +8,7 @@ import { SearchOutlined, CheckOutlined, CloseOutlined, + ClockCircleOutlined, } from '@ant-design/icons'; import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif'; import { useNavigate } from 'react-router-dom'; @@ -49,13 +50,7 @@ const getRoleColor = (role_name, role_level) => { return 'default'; }; -const columns = ( - showPreviewModal, - showEditModal, - showDeleteDialog, - showApproveDialog, - showRejectDialog -) => [ +const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApprovalModal) => [ { title: 'ID', dataIndex: 'user_id', @@ -116,32 +111,22 @@ const columns = ( render: (_, record) => { // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved if (record.is_approve === 1 || record.is_approve === '1') { - // Pending - show both Approve and Reject buttons + // Pending - show single Pending button return ( - - - - + ); } else if (record.is_approve === 0 || record.is_approve === '0') { // Rejected @@ -233,6 +218,8 @@ const columns = ( const ListUser = memo(function ListUser(props) { const [showFilter, setShowFilter] = useState(false); const [trigerFilter, setTrigerFilter] = useState(false); + const [approvalModalVisible, setApprovalModalVisible] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); const defaultFilter = { criteria: '' }; const [formDataFilter, setFormDataFilter] = useState(defaultFilter); @@ -285,44 +272,30 @@ const ListUser = memo(function ListUser(props) { props.setActionMode('add'); }; - const showApproveDialog = (param) => { - Swal.fire({ - icon: 'question', - title: 'Konfirmasi Approve User', - text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?', - showCancelButton: true, - cancelButtonColor: '#d33', - cancelButtonText: 'Batal', - confirmButtonColor: '#23A55A', - confirmButtonText: 'Approve', - reverseButtons: true, - }).then((result) => { - if (result.isConfirmed) { - handleApprove(param.user_id); - } else if (result.dismiss) { - props.setSelectedData(null); - } - }); + const showApprovalModal = (param) => { + setSelectedUser(param); + setApprovalModalVisible(true); }; - const showRejectDialog = (param) => { - Swal.fire({ - icon: 'warning', - title: 'Konfirmasi Reject User', - text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?', - showCancelButton: true, - cancelButtonColor: '#23A55A', - cancelButtonText: 'Batal', - confirmButtonColor: '#d33', - confirmButtonText: 'Reject', - reverseButtons: true, - }).then((result) => { - if (result.isConfirmed) { - handleReject(param.user_id); - } else if (result.dismiss) { - props.setSelectedData(null); - } - }); + const handleModalApprove = () => { + if (selectedUser) { + handleApprove(selectedUser.user_id); + setApprovalModalVisible(false); + setSelectedUser(null); + } + }; + + const handleModalReject = () => { + if (selectedUser) { + handleReject(selectedUser.user_id); + setApprovalModalVisible(false); + setSelectedUser(null); + } + }; + + const handleModalCancel = () => { + setApprovalModalVisible(false); + setSelectedUser(null); }; const showDeleteDialog = (param) => { @@ -470,14 +443,46 @@ const ListUser = memo(function ListUser(props) { showPreviewModal, showEditModal, showDeleteDialog, - showApproveDialog, - showRejectDialog + showApprovalModal )} triger={trigerFilter} /> + + {/* Approval Modal */} + + Reject User + , + , + ]} + width={400} + > +
+ +

+ User: {selectedUser?.user_fullname} +

+

+ Apakah Anda ingin approve atau reject user ini? +

+
+ ); });