diff --git a/TODO.md b/TODO.md
index 91ad66d..2fc080b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,8 +3,8 @@
 ## Note
 
 [x] Kerjakan dulu semua yang terkait penjualan normal, deposit normal dan bonus poin transaksi dan downline
-[ ] baru setelah itu yang berhubungan dengan mitrawbb dan hutang
 [ ] setelah itu baru penukaran voucher
+[ ] baru setelah itu yang berhubungan dengan mitrawbb dan hutang
 
 ## Front
 
diff --git a/app/Http/Controllers/Customer/PoinExchangeController.php b/app/Http/Controllers/Customer/PoinExchangeController.php
index 85c2c28..eb528ad 100644
--- a/app/Http/Controllers/Customer/PoinExchangeController.php
+++ b/app/Http/Controllers/Customer/PoinExchangeController.php
@@ -14,24 +14,38 @@ class PoinExchangeController extends Controller
 {
     public function index(Request $request)
     {
-        $locations = Location::get();
+        $locations = Location::orderBy('name', 'asc')->get();
+
         $vouchers = Voucher::with(['locationProfile.location'])
             ->whereHas('locationProfile', function ($q) {
-                $q->where('price_poin', '!=', 0)
-                    ->where('price_poin', '!=', null);
+                $q->where(['price_poin', '!=', 0])
+                    ->orWhereHas('prices', function ($q) {
+                        return $q->where(['price_poin', '!=', 0]);
+                    });
             })
             ->where('is_sold', Voucher::UNSOLD)
             ->groupBy('location_profile_id')
             ->orderBy('updated_at', 'desc');
 
         if ($request->location_id != '') {
-            $vouchers->where('location_id', $request->location_id);
+            $vouchers->whereHas('locationProfile', function ($q) use ($request) {
+                return $q->whereIn('location_id', $request->location_ids);
+            });
+
+            $slocations = Location::whereIn('id', $request->location_ids)->get();
+
+            $vouchers = tap($vouchers->paginate(20))->setHidden(['username', 'password']);
+        }
+
+        if (auth()->guard('customer')->guest() && $request->location_ids == '') {
+            $vouchers = tap($vouchers->paginate(20))->setHidden(['username', 'password']);
         }
 
         return inertia('Poin/Exchange', [
             'locations' => $locations,
-            'vouchers' => tap($vouchers->paginate(10))->setHidden(['username', 'password']),
+            'vouchers' => $vouchers,
             '_location_id' => $request->location_id ?? '',
+            '_slocations' => $slocations,
         ]);
     }
 
@@ -40,7 +54,7 @@ class PoinExchangeController extends Controller
         $batchCount = $voucher->count_unsold();
         if ($batchCount < 1) {
             return redirect()->route('customer.poin.exchange')
-                ->with('message', ['type' => 'error', 'message' => 'transaksi gagal, voucher sedang tidak tersedia']);
+                ->with('message', ['type' => 'error', 'message'=> 'transaksi gagal, voucher sedang tidak tersedia']);
         }
 
         $customer = Customer::find(auth()->id());
@@ -52,7 +66,7 @@ class PoinExchangeController extends Controller
 
         DB::beginTransaction();
         $sale = $customer->sales()->create([
-            'code' => 'Tukar poin ' . str()->upper(str()->random(5)),
+            'code' => 'Tukar poin ' . str()->upper(str()->random(5)), //TODO changes this
             'date_time' => now(),
             'amount' => 0,
             'payed_with' => Sale::PAYED_WITH_POIN,
diff --git a/resources/js/Customer/Components/HeaderTrx.jsx b/resources/js/Customer/Components/HeaderTrx.jsx
index ada1ce6..0464bef 100644
--- a/resources/js/Customer/Components/HeaderTrx.jsx
+++ b/resources/js/Customer/Components/HeaderTrx.jsx
@@ -6,7 +6,7 @@ import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2'
 
 import { useModalState } from '@/hooks'
 import BottomSheet from './BottomSheet'
-import FormInputDateRanger from '@/Components/FormInputDateRange'
+import FormInputDateRanger from './InputDateRange'
 
 const FilterSheet = ({ state, dates, setDates, setApply }) => {
     const apply = () => {
diff --git a/resources/js/Customer/Components/InputDateRange.jsx b/resources/js/Customer/Components/InputDateRange.jsx
new file mode 100644
index 0000000..934d921
--- /dev/null
+++ b/resources/js/Customer/Components/InputDateRange.jsx
@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react'
+import DatePicker from 'react-datepicker'
+import { converToDate, dateToString } from '@/utils'
+
+const CustomDateRange = forwardRef(({ value, onClick }, ref) => {
+    return (
+        <div
+            className="px-3 py-2 rounded-md w-full border border-gray-200"
+            ref={ref}
+            onClick={onClick}
+        >
+            {value}
+        </div>
+    )
+})
+
+export default function InputDateRanger({ selected, onChange }) {
+    return (
+        <div>
+            <DatePicker
+                selected={converToDate(selected.startDate)}
+                onChange={(date) => {
+                    let startDate = dateToString(date[0])
+                    let endDate = null
+                    if (date[1] != null) {
+                        endDate = dateToString(date[1])
+                    }
+                    onChange({ startDate, endDate })
+                }}
+                startDate={converToDate(selected.startDate)}
+                endDate={converToDate(selected.endDate)}
+                closeOnScroll={true}
+                shouldCloseOnSelect={true}
+                dateFormat="dd/MM/yyyy"
+                className={`mb-2 bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700  dark:placeholder-gray-400 dark:text-white 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500`}
+                nextMonthButtonLabel=">"
+                previousMonthButtonLabel="<"
+                nextYearButtonLabel=">"
+                previousYearButtonLabel="<"
+                customInput={<CustomDateRange />}
+                selectsRange
+            />
+        </div>
+    )
+}