add filter date on transaction

app/Http/Controllers/Customer/DepositController.php

@@ -11,21 +11,33 @@ use App\Models\Setting;
 use App\Services\GeneralService;
 use App\Services\MidtransService;
 use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
 
 class DepositController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
         $histories = DepositHistory::where('customer_id', auth()->id())
             ->orderBy('updated_at', 'desc')
             ->orderBy('is_valid', 'desc')
             ->where('type', DepositHistory::TYPE_DEPOSIT);
 
+        $start_date = now()->startOfMonth();
+        $end_date = now()->endOfMonth();
+        if ($request->startDate != '' && $request->endDate != '') {
+            $start_date = Carbon::parse($request->startDate);
+            $end_date = Carbon::parse($request->endDate);
+        }
+
+        $histories->whereBetween('created_at', [$start_date, $end_date]);
+
         return inertia('Deposit/Index', [
             'histories' => $histories->paginate(20),
+            '_start_date' => $start_date->format('m/d/Y'),
+            '_end_date' => $end_date->format('m/d/Y')
         ]);
     }
 

app/Http/Controllers/Customer/PoinController.php

@@ -4,16 +4,29 @@ namespace App\Http\Controllers\Customer;
 
 use App\Http\Controllers\Controller;
 use App\Models\PoinHistory;
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 
 class PoinController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
         $poins = PoinHistory::where('customer_id', auth()->id())
             ->orderBy('updated_at', 'desc');
 
+        $start_date = now()->startOfMonth();
+        $end_date = now()->endOfMonth();
+        if ($request->startDate != '' && $request->endDate != '') {
+            $start_date = Carbon::parse($request->startDate);
+            $end_date = Carbon::parse($request->endDate);
+        }
+
+        $poins->whereBetween('created_at', [$start_date, $end_date]);
+
         return inertia('Poin/Index', [
             'poins' => $poins->paginate(20),
+            '_start_date' => $start_date->format('m/d/Y'),
+            '_end_date' => $end_date->format('m/d/Y')
         ]);
     }
 

app/Http/Controllers/Customer/TransactionController.php

@@ -4,16 +4,29 @@ namespace App\Http\Controllers\Customer;
 
 use App\Http\Controllers\Controller;
 use App\Models\Sale;
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 
 class TransactionController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
         $query = Sale::where('customer_id', auth()->id())
             ->orderBy('created_at', 'desc');
 
+        $start_date = now()->startOfMonth();
+        $end_date = now()->endOfMonth();
+        if ($request->startDate != '' && $request->endDate != '') {
+            $start_date = Carbon::parse($request->startDate);
+            $end_date = Carbon::parse($request->endDate);
+        }
+
+        $query->whereBetween('created_at', [$start_date, $end_date]);
+
         return inertia('Trx/Index', [
-            'query' => $query->paginate(),
+            'query' => $query->paginate(20),
+            '_start_date' => $start_date->format('m/d/Y'),
+            '_end_date' => $end_date->format('m/d/Y')
         ]);
     }
 

resources/js/Customer/Components/HeaderTrx.jsx

@@ -1,15 +1,49 @@
+import React, { useState, useEffect } from 'react'
 import { usePage, router, Link } from '@inertiajs/react'
-import { useState } from 'react'
+import { usePrevious } from 'react-use'
+import { HiOutlineFilter } from 'react-icons/hi'
 import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2'
 
-export default function HeaderTrx({ enable = 'deposit' }) {
+import { useModalState } from '@/hooks'
+import BottomSheet from './BottomSheet'
+import FormInputDateRanger from '@/Components/FormInputDateRange'
+
+const FilterSheet = ({ state, dates, setDates, setApply }) => {
+    const apply = () => {
+        setApply(true)
+        state.toggle()
+    }
+
+    return (
+        <BottomSheet isOpen={state.isOpen} toggle={() => state.toggle()}>
+            <div className="flex flex-col min-h-[calc(50dvh)] px-5">
+                <div className="mb-2 font-bold text-lg">Filter Tanggal</div>
+                <FormInputDateRanger
+                    selected={dates}
+                    onChange={(dates) => setDates(dates)}
+                />
+                <div
+                    onClick={() => apply()}
+                    className="mt-5 font-semibold h-11 border bg-blue-700 text-white px-5 py-2 rounded-full hover:text-black hover:bg-white"
+                >
+                    Apply
+                </div>
+            </div>
+        </BottomSheet>
+    )
+}
+
+export default function HeaderTrx({ enable = 'deposit', dates, setDates }) {
     const {
         props: {
             auth: { user },
         },
     } = usePage()
 
+    const filterModal = useModalState()
+
     const [popover, setPopover] = useState(false)
+    const [isApply, setApply] = useState(false)
 
     return (
         <>
@@ -50,39 +84,61 @@ export default function HeaderTrx({ enable = 'deposit' }) {
                 </div>
             </div>
             <div className="w-full">
-                <div className="flex flex-row gap-2 px-5 py-5">
-                    <Link
-                        href={route('transactions.deposit.index')}
-                        className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
-                            enable === 'deposit'
-                                ? 'bg-blue-700 text-white'
-                                : 'bg-blue-100'
-                        }`}
-                    >
-                        Deposit
-                    </Link>
-                    <Link
-                        href={route('transactions.sale.index')}
-                        className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
-                            enable === 'trx'
-                                ? 'bg-blue-700 text-white'
-                                : 'bg-blue-100'
-                        }`}
-                    >
-                        Pembelian
-                    </Link>
-                    <Link
-                        href={route('transactions.poin.index')}
-                        className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
-                            enable === 'poin'
-                                ? 'bg-blue-700 text-white'
-                                : 'bg-blue-100'
-                        }`}
+                <div className="flex flex-row justify-between items-center px-5 py-5">
+                    <div className="flex flex-row gap-2 ">
+                        <Link
+                            href={route('transactions.deposit.index')}
+                            className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
+                                enable === 'deposit'
+                                    ? 'bg-blue-700 text-white'
+                                    : 'bg-blue-100'
+                            }`}
+                        >
+                            Deposit
+                        </Link>
+                        <Link
+                            href={route('transactions.sale.index')}
+                            className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
+                                enable === 'trx'
+                                    ? 'bg-blue-700 text-white'
+                                    : 'bg-blue-100'
+                            }`}
+                        >
+                            Pembelian
+                        </Link>
+                        <Link
+                            href={route('transactions.poin.index')}
+                            className={`px-3 py-1 rounded-full border hover:bg-blue-500  ${
+                                enable === 'poin'
+                                    ? 'bg-blue-700 text-white'
+                                    : 'bg-blue-100'
+                            }`}
+                        >
+                            Poin
+                        </Link>
+                    </div>
+                    <div
+                        className="flex flex-row"
+                        onClick={() => filterModal.toggle()}
                     >
-                        Poin
-                    </Link>
+                        <HiOutlineFilter className="h-6 w-6" />
+                        {/* only show on filter */}
+                        {isApply && (
+                            <div>
+                                <div className="bg-blue-300 text-blue-600 rounded-lg px-1 text-xs -ml-3 -mt-1">
+                                    1
+                                </div>
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
+            <FilterSheet
+                state={filterModal}
+                dates={dates}
+                setDates={setDates}
+                setApply={setApply}
+            />
         </>
     )
 }

resources/js/Customer/Deposit/Index.jsx

@@ -1,19 +1,41 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Head, router } from '@inertiajs/react'
+import { usePrevious } from 'react-use'
+
 import CustomerLayout from '@/Layouts/CustomerLayout'
-import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2'
 import HeaderTrx from '../Components/HeaderTrx'
+import { formatIDDate } from '@/utils'
+
+const EmptyHere = () => {
+    return (
+        <div className="w-full px-5 text-center flex flex-col my-auto">
+            <div className="font-bold text-xl">Transaksi kosong</div>
+            <div className="text-gray-400">
+                Yuk, topup saldo kamu sekarang juga
+            </div>
+        </div>
+    )
+}
+
+export default function Index(props) {
+    const {
+        histories: { data, next_page_url },
+        _start_date,
+        _end_date,
+    } = props
 
-export default function Index({
-    auth: { user },
-    histories: { data, next_page_url },
-}) {
     const [deposites, setDeposites] = useState(data)
 
+    const [dates, setDates] = useState({
+        startDate: _start_date,
+        endDate: _end_date,
+    })
+    const preValue = usePrevious(`${dates}`)
+
     const handleNextPage = () => {
         router.get(
             next_page_url,
-            {},
+            { startDate: dates.startDate, endDate: dates.endDate },
             {
                 replace: true,
                 preserveState: true,
@@ -25,13 +47,41 @@ export default function Index({
         )
     }
 
+    useEffect(() => {
+        if (preValue) {
+            router.get(
+                route(route().current()),
+                {
+                    startDate: dates.startDate,
+                    endDate: dates.endDate,
+                },
+                {
+                    replace: true,
+                    preserveState: true,
+                    only: ['histories'],
+                    onSuccess: (res) => {
+                        setDeposites(res.props.histories.data)
+                    },
+                }
+            )
+        }
+    }, [dates])
+
     return (
         <CustomerLayout>
             <Head title="Top Up" />
             <div className="flex flex-col w-full min-h-[calc(90dvh)]">
-                <HeaderTrx />
+                <HeaderTrx dates={dates} setDates={setDates} />
+                {deposites.length <= 0 && <EmptyHere />}
+
                 <div className="w-full">
                     <div className="flex flex-col space-y-5 px-5">
+                        {deposites.length > 0 && (
+                            <div className="text-sm text-gray-400">
+                                {formatIDDate(dates.startDate)} s/d{' '}
+                                {formatIDDate(dates.endDate)}
+                            </div>
+                        )}
                         {deposites.map((history) => (
                             <div
                                 key={history.id}

resources/js/Customer/Poin/Index.jsx

@@ -1,5 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Head, router } from '@inertiajs/react'
+import { usePrevious } from 'react-use'
+
+import { formatIDDate } from '@/utils'
 import CustomerLayout from '@/Layouts/CustomerLayout'
 import HeaderTrx from '../Components/HeaderTrx'
 
@@ -15,16 +18,24 @@ const EmptyHere = () => {
     )
 }
 
-export default function Index({
-    auth: { user },
-    poins: { data, next_page_url },
-}) {
+export default function Index(props) {
+    const {
+        poins: { data, next_page_url },
+        _start_date,
+        _end_date,
+    } = props
     const [_poins, setpoins] = useState(data)
 
+    const [dates, setDates] = useState({
+        startDate: _start_date,
+        endDate: _end_date,
+    })
+    const preValue = usePrevious(`${dates}`)
+
     const handleNextPage = () => {
         router.get(
             next_page_url,
-            {},
+            { startDate: dates.startDate, endDate: dates.endDate },
             {
                 replace: true,
                 preserveState: true,
@@ -36,14 +47,40 @@ export default function Index({
         )
     }
 
+    useEffect(() => {
+        if (preValue) {
+            router.get(
+                route(route().current()),
+                {
+                    startDate: dates.startDate,
+                    endDate: dates.endDate,
+                },
+                {
+                    replace: true,
+                    preserveState: true,
+                    only: ['poins'],
+                    onSuccess: (res) => {
+                        setpoins(res.props.poins.data)
+                    },
+                }
+            )
+        }
+    }, [dates])
+
     return (
         <CustomerLayout>
             <Head title="poin" />
             <div className="flex flex-col w-full min-h-[calc(90dvh)]">
-                <HeaderTrx enable="poin" />
+                <HeaderTrx enable="poin" dates={dates} setDates={setDates} />
                 {_poins.length <= 0 && <EmptyHere />}
                 <div className="w-full">
                     <div className="flex flex-col py-10 space-y-5 px-5">
+                        {_poins.length > 0 && (
+                            <div className="text-sm text-gray-400">
+                                {formatIDDate(dates.startDate)} s/d{' '}
+                                {formatIDDate(dates.endDate)}
+                            </div>
+                        )}
                         {_poins.map((poin) => (
                             <div
                                 key={poin.id}

resources/js/Customer/Trx/Index.jsx

@@ -1,5 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import { usePrevious } from 'react-use'
 import { Head, router } from '@inertiajs/react'
+
+import { formatIDDate } from '@/utils'
 import CustomerLayout from '@/Layouts/CustomerLayout'
 import HeaderTrx from '../Components/HeaderTrx'
 
@@ -14,13 +17,28 @@ const EmptyHere = () => {
     )
 }
 
-export default function Index({ query: { data, next_page_url } }) {
+export default function Index(props) {
+    const {
+        query: { data, next_page_url },
+        _start_date,
+        _end_date,
+    } = props
+
     const [sales, setSales] = useState(data)
 
+    const [dates, setDates] = useState({
+        startDate: _start_date,
+        endDate: _end_date,
+    })
+    const preValue = usePrevious(`${dates}`)
+
     const handleNextPage = () => {
         router.get(
             next_page_url,
-            {},
+            {
+                startDate: dates.startDate,
+                endDate: dates.endDate,
+            },
             {
                 replace: true,
                 preserveState: true,
@@ -32,14 +50,40 @@ export default function Index({ query: { data, next_page_url } }) {
         )
     }
 
+    useEffect(() => {
+        if (preValue) {
+            router.get(
+                route(route().current()),
+                {
+                    startDate: dates.startDate,
+                    endDate: dates.endDate,
+                },
+                {
+                    replace: true,
+                    preserveState: true,
+                    only: ['query'],
+                    onSuccess: (res) => {
+                        setSales(res.props.query.data)
+                    },
+                }
+            )
+        }
+    }, [dates])
+
     return (
         <CustomerLayout>
             <Head title="Transaksi" />
             <div className="flex flex-col min-h-[calc(90dvh)]">
-                <HeaderTrx enable="trx" />
+                <HeaderTrx enable="trx" dates={dates} setDates={setDates} />
                 {sales.length <= 0 && <EmptyHere />}
                 <div className="w-full">
                     <div className="flex flex-col space-y-5 px-5">
+                        {sales.length > 0 && (
+                            <div className="text-sm text-gray-400">
+                                {formatIDDate(dates.startDate)} s/d{' '}
+                                {formatIDDate(dates.endDate)}
+                            </div>
+                        )}
                         {sales.map((sale) => (
                             <div
                                 key={sale.id}

resources/js/utils.js

@@ -1,4 +1,6 @@
 import moment from 'moment'
+import 'moment/locale/id'
+
 import { isEmpty } from 'lodash'
 
 export const formatDate = (date) => {