From 0fada18346571b321ceb46689659b544ffc9dfe2 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 12 Mar 2025 09:38:31 +0700 Subject: fix transaction --- src/lib/transaction/components/Transactions.jsx | 227 +++++++++++++++++++++--- 1 file changed, 198 insertions(+), 29 deletions(-) (limited to 'src/lib') diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index a6cfe177..d93c9aef 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -35,6 +35,13 @@ import { upsertUserCart } from '~/services/cart'; import { useProductCartContext } from '@/contexts/ProductCartContext'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; +import { DateRangePicker } from 'react-date-range'; +import { addDays } from 'date-fns'; +import 'react-date-range/dist/styles.css'; // main style file +import 'react-date-range/dist/theme/default.css'; // theme css file +import { Popover } from '@headlessui/react'; const Transactions = ({ context = '' }) => { const auth = useAuth(); const router = useRouter(); @@ -45,6 +52,8 @@ const Transactions = ({ context = '' }) => { limit = 15, status = 'all', sort = 'none', + startDate = null, + endDate = new Date(), } = router.query; const { productCart, @@ -66,6 +75,40 @@ const Transactions = ({ context = '' }) => { const [statusNew, setStatusNew] = useState(status); const [sortNew, setSortNew] = useState(sort); const [contextNew, setcontextNew] = useState(router.query.context || context); + const [dateRange, setDateRange] = useState([null, null]); + // const [startDate, endDate] = dateRange; + const [isOpenCalender, setIsOpenCalender] = useState(false); + + const parseDate = (date) => { + console.log('masuk sini', date); + if (null || 'null') return null; + if (!date) return null; + if (date instanceof Date) return date; // Jika sudah Date, langsung return + const [day, month, year] = date.split('/').map(Number); + return new Date(year, month - 1, day); + }; + + const [state, setState] = useState([ + { + startDate: startDate != null || 'null' ? parseDate(startDate) : null, // Gunakan `parseDate` + endDate: startDate == null ? endDate : parseDate(endDate), + key: 'selection', + }, + ]); + console.log('startDate', startDate); + console.log('state', state); + // useEffect(() => { + // if (state[0].startDate != null) { + // setState([ + // { + // startDate: parseDate(startDate), + // endDate: parseDate(endDate), + // key: 'selection', + // }, + // ]); + // } + // }, [startDate, endDate]); + const query = { name: q, offset: (pageNew - 1) * limitNew, @@ -73,10 +116,13 @@ const Transactions = ({ context = '' }) => { limit: limitNew, status: statusNew, sort: sortNew, + startDate: state[0].startDate + ? state[0].startDate.toLocaleDateString('id-ID') + : state[0].startDate, + endDate: state[0]?.endDate?.toLocaleDateString('id-ID'), site: siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null), }; - const statuses = [ { id: 'all', label: 'Semua' }, { id: 'quotation', label: 'Pending Quotation' }, @@ -92,7 +138,6 @@ const Transactions = ({ context = '' }) => { { id: 'asc', label: 'dari yang terkecil' }, { id: 'desc', label: 'dari yang terbesar' }, ]; - const { transactions } = useTransactions({ query }); const fetchSite = async () => { const site = await getSite(); @@ -330,15 +375,47 @@ const Transactions = ({ context = '' }) => { } }; + const handleReset = () => { + setState([ + { + startDate: null, + endDate: new Date(), + key: 'selection', + }, + ]); + setIsOpenCalender(false); + router.push('/my/transactions'); + }; + + const formatDate = (dateString) => { + const months = [ + 'Januari', + 'Februari', + 'Maret', + 'April', + 'Mei', + 'Juni', + 'Juli', + 'Agustus', + 'September', + 'Oktober', + 'November', + 'Desember', + ]; + + const [day, month, year] = dateString.split('/'); + return `${day} ${months[parseInt(month, 10) - 1]} ${year}`; + }; + return ( <>
-
+
setSortNew(e.target.value)} - className='border border-gray-300 rounded-lg px-3 py-1 text-sm bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' + className='border border-gray-300 rounded-lg px-2 py-1 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' > {sortes.map((status) => ( ))} - +
+
setIsOpenCalender(true)} + > + + {state[0]?.startDate + ? `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}` + : 'Semua Tanggal'} + +
+ + {isOpenCalender && ( +
+
+ setState([item.selection])} + showSelectionPreview={true} + maxDate={new Date()} + moveRangeOnFirstSelection={false} + months={1} + ranges={state} + direction='horizontal' + className='w-full' + /> + +
+ + +
+
+
+ )} +
+ {/*
+ e.target === document} + selectsRange={true} + startDate={startDate} + endDate={endDate} + dateFormat='dd/MM' + className='w-full' + maxDate={new Date()} + placeholderText='Semua Tanggal' + onChange={(update) => { + setDateRange(update); + }} + withPortal + isClearable={true} + /> +
*/}
@@ -379,14 +538,14 @@ const Transactions = ({ context = '' }) => { setInputQuery(e.target.value)} />
-

+

Menampilkan {startItem}- {endItem ? endItem @@ -405,7 +564,7 @@ const Transactions = ({ context = '' }) => { setLimitNew(Number(e.target.value)); setPageNew(1); }} - className='border p-2' + className='border p-2 text-xs' > @@ -436,7 +595,7 @@ const Transactions = ({ context = '' }) => {

{saleOrder.name}

- {saleOrder.dateOrder.split(' ')[0] || '-'} + {formatDate(saleOrder.dateOrder.split(' ')[0]) || '-'}
@@ -493,7 +652,11 @@ const Transactions = ({ context = '' }) => { href={`/my/quotations/${saleOrder?.id}`} className=' text-red-500 text-nowrap' > - Lihat semua produk + {saleOrder.products?.length > 6 + ? 'Lihat ' + + (saleOrder.products?.length - 6) + + ' produk lainnya' + : 'Lihat semua produk'}
)} @@ -508,9 +671,9 @@ const Transactions = ({ context = '' }) => {
-
-

Total Harga

-

+

+

Total Harga

+

{currencyFormat(saleOrder.amountTotal)}

@@ -715,7 +878,7 @@ const Transactions = ({ context = '' }) => {
-
+
@@ -723,7 +886,7 @@ const Transactions = ({ context = '' }) => { {statuses.map((status) => ( @@ -831,7 +994,7 @@ const Transactions = ({ context = '' }) => { {transactions.data.saleOrders.map((saleOrder, index) => (
{
Tanggal Pesanan:{' '} - {saleOrder.dateOrder.split(' ')[0] || '-'} + {formatDate( + saleOrder.dateOrder.split(' ')[0] + ) || '-'}
@@ -906,7 +1071,11 @@ const Transactions = ({ context = '' }) => { href={`/my/quotations/${saleOrder?.id}`} className='text-sm text-red-500 text-nowrap' > - Lihat semua produk + {saleOrder.products?.length > 6 + ? 'Lihat ' + + (saleOrder.products?.length - 6) + + ' produk lainnya' + : 'Lihat semua produk'}
)} -- cgit v1.2.3