import { useEffect, useState, Fragment } from 'react'; import 'mantine-datatable/styles.css'; import { Dialog, Transition } from '@headlessui/react'; import AsyncSelect from 'react-select/async'; import { OptionsOrGroups } from 'react-select'; import { coloredToast } from '@/lib/toast'; import { logActivity } from '@/utils/activityLogger'; import NumberFormatter from '@/lib/ribuan'; import { DataTable } from '@/components/Shared/DataTable'; interface AffilatorCommission { affiliator: { personal_detail: { name: string; email: string; }; _id: string; affiliate_code: string; }; max_percentage: number; max_commission: number; is_active: boolean; _id: string; } const AffiliatorCommissions = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); const [records, setRecords] = useState([]); const [isLoading, setIsLoading] = useState(true); const [page, setPage] = useState(1); const PAGE_SIZES = [5, 10, 20, 30, 50, 100]; const [pageSize, setPageSize] = useState(PAGE_SIZES[0]); const [totalPages, setTotalPages] = useState(0); const [search, setSearch] = useState(''); const fetchData = async () => { setIsLoading(true); try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/setting/affiliate/affiliator-commission?page=${page}&per_page=${pageSize}&q=${search}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }); const data = await response.json(); setPage(data.currentPage); setTotalPages(data.totalPages); setRecords(data.data); setIsLoading(false); } catch (error) { console.error('Error fetching data:', error); setIsLoading(false); } }; useEffect(() => { fetchData(); }, [page, pageSize]); const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpenEdit, setIsModalOpenEdit] = useState(false); interface SelectedAffiliatorState { affiliate_id: string; email: string; max_percentage: number; max_commission: number; } const [selectedAffiliator, setSelectedAffiliator] = useState({ affiliate_id: '', email: '', max_commission: 0, max_percentage: 0, }); const fetchEmailAffiliator = async (inputValue: string) => { try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/affiliate/affiliator?email=${inputValue}&status=approved`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }); const { data } = await response.json(); return data.map((item: any) => ({ value: item.id, label: item.personal_detail.email })); } catch (error) { console.error('Error fetching data:', error); return []; } }; let debounceTimeout: any; const loadOptions = async (inputValue: string): Promise> => { return new Promise>((resolve) => { clearTimeout(debounceTimeout); if (inputValue.length >= 3) { debounceTimeout = setTimeout(async () => { const options = await fetchEmailAffiliator(inputValue); resolve(options); }, 1000); } else { resolve([]); } }); }; const describeChanges = (oldData: AffilatorCommission, newData: Partial) => { const changes: string[] = []; if (newData.max_commission !== undefined && oldData.max_commission !== newData.max_commission) { changes.push(`Max Commission: ${oldData.max_commission} -> ${newData.max_commission}`); } if (newData.max_percentage !== undefined && oldData.max_percentage !== newData.max_percentage) { changes.push(`Max Percentage: ${oldData.max_percentage}% -> ${newData.max_percentage}%`); } if (newData.is_active !== undefined && oldData.is_active !== newData.is_active) { changes.push(`Is Active: ${oldData.is_active} -> ${newData.is_active}`); } return changes.join(' | ') || 'No changes made'; }; const handleAddCommission = async (event: React.FormEvent) => { event.preventDefault(); const newCommission = { affiliate_id: selectedAffiliator.affiliate_id, max_percentage: selectedAffiliator.max_percentage, max_commission: selectedAffiliator.max_commission, is_active: true, }; try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/setting/affiliate/affiliator-commission/add`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', }, credentials: 'include', body: JSON.stringify(newCommission), }); const data = await response.json(); if (!response.ok) { throw new Error(data.message || 'Error adding commission'); } setSelectedAffiliator({ affiliate_id: '', email: '', max_percentage: 0, max_commission: 0, }); setIsModalOpen(false); coloredToast('success', 'Commission added successfully'); await logActivity({ location: 'Affiliate Setting', description: `Added Affiliator: ${newCommission.affiliate_id} | Max Commission: ${newCommission.max_commission} | Max Percentage: ${newCommission.max_percentage}% | Is Active: true`, }); fetchData(); } catch (error) { console.error('Error adding commission:', error); coloredToast('danger', error instanceof Error ? error.message : 'Error adding commission'); } }; const updateAffiliatorCommission = async (commissionData: { affiliate_id: string; max_commission?: number; max_percentage?: number; is_active?: boolean }) => { try { const old = records.find((r) => r._id === commissionData.affiliate_id); if (!old) return; const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/setting/affiliate/affiliator-commission/${commissionData.affiliate_id}/update`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', }, credentials: 'include', body: JSON.stringify(commissionData), }); const data = await response.json(); if (!response.ok) { throw new Error(response.statusText); } const changeDescription = describeChanges(old, commissionData); await logActivity({ location: 'Affiliate Setting', description: `Edited Affiliator (${old.affiliator.personal_detail.email}): ${changeDescription}`, }); setIsModalOpenEdit(false); fetchData(); coloredToast('success', 'Commission updated successfully'); } catch (error) { console.error('Error updating commission:', error); coloredToast('danger', 'Error updating commission'); } }; const deleteAffiliatorCommission = async (affiliate_id: string) => { try { const target = records.find((r) => r._id === affiliate_id); const email = target?.affiliator?.personal_detail?.email || affiliate_id; const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/setting/affiliate/affiliator-commission/${affiliate_id}/delete`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }); const data = await response.json(); if (!response.ok) { throw new Error(response.statusText); } await logActivity({ location: 'Affiliate Setting', description: `Deleted Affiliator Commission: ${email}`, }); fetchData(); coloredToast('success', 'Commission deleted successfully'); } catch (error) { console.error('Error deleting commission:', error); coloredToast('danger', 'Error deleting commission'); } }; const toggleIsActive = async (affiliate_id: string, is_active: boolean) => { updateAffiliatorCommission({ affiliate_id, is_active: !is_active }); }; const [selectedAffiliatorEdit, setSelectedAffiliatorEdit] = useState({ affiliate_id: '', email: '', max_percentage: 0, max_commission: 0, }); const handleEditCommission = async (event: React.FormEvent) => { event.preventDefault(); updateAffiliatorCommission({ affiliate_id: selectedAffiliatorEdit.affiliate_id, max_commission: selectedAffiliatorEdit.max_commission, max_percentage: selectedAffiliatorEdit.max_percentage }); }; const handleKeypress = (event: React.KeyboardEvent) => { if (event.keyCode === 13) { if (page !== 1) { setPage(1); } else { fetchData(); } } }; return ( <> {isMounted && ( <>
setIsModalOpen(true)}> Add New Commission
setSearch(e.target.value)} onKeyDown={handleKeypress} />
{/* Modal Add Affiliate Setting */} setIsModalOpen(false)}>
Add New Affiliator Commission
{ if (selectedItem) { setSelectedAffiliator((prevState: SelectedAffiliatorState) => ({ ...prevState, email: selectedItem.label, affiliate_id: selectedItem.value, })); console.log(selectedAffiliator); } }} placeholder="Search by email..." />
{ const value = Math.min(100, Math.max(0, parseFloat(e.target.value))); setSelectedAffiliator((prevState: SelectedAffiliatorState) => ({ ...prevState, max_percentage: value })); }} />
setSelectedAffiliator((prevState: SelectedAffiliatorState) => ({ ...prevState, max_commission: value }))} className="form-input" />
{/* Modal Edit Affiliate Setting */} setIsModalOpenEdit(false)}>
Edit Affiliator Commission
{ const value = Math.min(100, Math.max(0, parseFloat(e.target.value))); setSelectedAffiliatorEdit((prevState: SelectedAffiliatorState) => ({ ...prevState, max_percentage: value })); }} />
setSelectedAffiliatorEdit((prevState: SelectedAffiliatorState) => ({ ...prevState, max_commission: value })) } className="form-input" />
{isLoading ? (
Please wait, we're still working to load the data...
) : ( ( <>
{affiliator?.personal_detail?.name}
({affiliator?.personal_detail?.email})
{affiliator?.affiliate_code}
), }, { accessor: 'is_active', title: 'Is Active', render: ({ is_active, _id }) => ( ), }, { accessor: 'max_percentage', render: ({ max_percentage }) =>
{max_percentage}%
, }, { accessor: 'max_commission', render: ({ max_commission }) => (
{new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format( max_commission )}
), }, { accessor: 'action', title: 'Actions', textAlign: 'center', render: ({ affiliator, _id, max_commission, max_percentage }) => (
{ setIsModalOpenEdit(true); setSelectedAffiliatorEdit({ affiliate_id: _id, email: affiliator.personal_detail.email, max_commission: max_commission, max_percentage: max_percentage, }); }} >
), }, ]} highlightOnHover page={page} totalRecords={totalPages} recordsPerPage={pageSize} onPageChange={(p) => setPage(p)} recordsPerPageOptions={PAGE_SIZES} onRecordsPerPageChange={setPageSize} paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} Affiliator`} /> )}
)} ); }; export default AffiliatorCommissions;