import { useEffect, useState, Fragment } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import 'mantine-datatable/styles.css'; import { DataTable } from '@/components/Shared/DataTable'; import { setPageTitle } from '../../store/themeConfigSlice'; import Link from 'next/link'; import ProtectedRoute from '@/components/ProtectedRoute'; import { Dialog, Transition } from '@headlessui/react'; import { coloredToast } from '@/lib/toast'; import Swal from 'sweetalert2'; import NumberFormatter from '@/lib/ribuan'; import { logActivity } from '@/utils/activityLogger'; import CloseIcon from '@mui/icons-material/Close'; interface Point { id: string; email: string; name: string; point: number; } interface PointLogItem { user_id: { email?: string; name?: string; }; point_amount: number; description: string; createdAt: Date; } const PointIndex = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Points')); }, []); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); const [page, setPage] = useState(1); const PAGE_SIZES = [5, 10, 20, 30, 50, 100]; const [pageSize, setPageSize] = useState(PAGE_SIZES[0]); const [records, setRecords] = useState([]); const [totalRecords, setTotalRecords] = useState(0); const [search, setSearch] = useState(''); const [isLoading, setIsLoading] = useState(true); // Add isLoading state const [isRequestPoint, setRequestPoint] = useState(false); // Add isLoading state const [isLodaingExpire, setIsLodaingExpire] = useState(false); const [pointModal, setPointModal] = useState(false); const [pointLogModalOpen, setPointLogModalOpen] = useState(false); const [selectedPointEmail, setSelectedPointEmail] = useState(''); const [isLoadingPointLog, setIsLoadingPointLog] = useState(false); const [pointLogRecords, setPointLogRecords] = useState([]); const [pointAction, setPointAction] = useState({ action: '', action_amount: 0, id: '', current_point: 0, }); // Fetch data from API const fetchData = async () => { setIsLoading(true); // Set isLoading to true before fetching data try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/users/data?page=${page}&per_page=${pageSize}&sortByPoint=true&email=${search}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', // Include this option }); const data = await response.json(); setPage(data.currentPage); setTotalRecords(data.totalData); setRecords(data.data); setIsLoading(false); // Set isLoading to false after data is fetched } catch (error) { console.error('Error fetching data:', error); setIsLoading(false); // Set isLoading to false even if there's an error } }; useEffect(() => { fetchData(); }, [page, pageSize]); const handleKeypress = (event: React.KeyboardEvent) => { if (event.keyCode === 13) { if (page !== 1) { setPage(1); } else { fetchData(); } } }; const addPoint = (id: string, point: number) => { setPointAction({ action: 'add', action_amount: 0, id, current_point: point, }); setPointModal(true); }; const deductPoint = (id: string, point: number) => { setPointAction({ action: 'deduct', action_amount: 0, id, current_point: point, }); setPointModal(true); }; const changeValue = (value: any) => { setPointAction((prev: any) => { return { ...prev, action_amount: value, }; }); }; const savePointAction = async () => { setRequestPoint(true); if (pointAction.action === 'deduct' && pointAction.action_amount > pointAction.current_point) { coloredToast('warning', 'point cannot under 0'); setRequestPoint(false); return; } if (pointAction.action_amount <= 0) { coloredToast('warning', 'point amount is required'); setRequestPoint(false); return; } try { const payload = { point_request: parseInt(pointAction.action_amount), }; const api_url = process.env.API_URL; const fetchUrl = pointAction.action === 'add' ? `${api_url}api/point/add/${pointAction.id}` : `${api_url}api/point/deduct/${pointAction.id}`; const response = await fetch(fetchUrl, { method: 'PATCH', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(payload), credentials: 'include', // Include this option }); if (!response.ok) { const res = await response.json(); throw new Error(res.message); } } catch (error: any) { coloredToast('warning', error.message || 'something went wrong'); } coloredToast('success', 'point adjusted successfully'); const finalPoint = pointAction.action === 'add' ? Number(pointAction.current_point) + Number(pointAction.action_amount) : Number(pointAction.current_point) - Number(pointAction.action_amount); await logActivity({ location: 'Point', description: `User ID: ${pointAction.id} | Action: ${pointAction.action} | Amount: ${Number(pointAction.action_amount)} | Point before: ${Number( pointAction.current_point )} | Point after: ${finalPoint}`, }); setPointModal(false); setRequestPoint(false); fetchData(); }; const handleExpirePoints = () => { const currentDate = new Date(); const expiryDate = new Date('2025-12-31T23:59:59'); if (currentDate > expiryDate) { Swal.fire({ icon: 'warning', title: 'Are you sure?', text: "You won't be able to revert this!", showCancelButton: true, confirmButtonText: 'Reset Points', padding: '2em', customClass: { container: 'sweet-alerts', }, }).then(async (result) => { if (result.value) { setIsLodaingExpire(true); try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/point/expire`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', }); if (!response.ok) { const res = await response.json(); throw new Error(res.message); } Swal.fire({ title: 'Reset Points!', text: 'All points have been reset.', icon: 'success', customClass: { container: 'sweet-alerts', }, }); fetchData(); } catch (error: any) { coloredToast('warning', error.message || 'something went wrong'); } setIsLodaingExpire(false); } }); } else { coloredToast('warning', 'Points cannot be expired until after December 31, 2025.'); } }; const fetchPointLogsByEmail = async (email: string) => { setSelectedPointEmail(email); setPointLogModalOpen(true); setIsLoadingPointLog(true); setPointLogRecords([]); try { const api_url = process.env.API_URL; const response = await fetch(`${api_url}api/point/logs?page=1&per_page=100&email=${encodeURIComponent(email)}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }); const data = await response.json(); setPointLogRecords(Array.isArray(data?.data) ? data.data : []); } catch (error) { console.error('Error fetching point logs:', error); setPointLogRecords([]); } finally { setIsLoadingPointLog(false); } }; return ( <> {isMounted && ( <>

Points

{/* table of points */}

Point Logs

setSearch(e.target.value)} onKeyDown={handleKeypress} />

{isLoading ? ( // Show loading indicator here

Please wait, we're still working to load the data...

) : ( index + 1, }, { accessor: 'email', render: ({ email }) => ( ), }, { accessor: 'name', }, { accessor: 'point', render: ({ point }) => <>{point > 0 ? point.toLocaleString('id-ID') : 0}, }, { accessor: 'action', title: 'Actions', textAlign: 'center', render: ({ id, point }) => (

), }, ]} highlightOnHover totalRecords={totalRecords} recordsPerPage={pageSize} page={page} onPageChange={(p) => setPage(p)} recordsPerPageOptions={PAGE_SIZES} onRecordsPerPageChange={setPageSize} paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} `} /> )}

{pointLogModalOpen && (

setPointLogModalOpen(false)}>

e.stopPropagation()}>

Point Logs: {selectedPointEmail}

{user_id?.email || '-'}

, }, { accessor: 'name', render: ({ user_id }) =>

{user_id?.name || '-'}

, }, { accessor: 'point_amount', render: ({ point_amount }) => <>{point_amount.toLocaleString('id-ID')}, }, { accessor: 'description', }, { accessor: 'activity', render: ({ createdAt }) => { const createdAtDate = new Date(createdAt); return (

{createdAtDate.toLocaleDateString('id-ID')}

{createdAtDate.toLocaleTimeString('id-ID')}

); }, }, ]} />

)} )} ); }; export default PointIndex;