voucher listing

app/Http/Controllers/Customer/HomeController.php

@@ -6,19 +6,30 @@ use App\Http\Controllers\Controller;
 use App\Models\Banner;
 use App\Models\Info;
 use App\Models\Location;
+use App\Models\Voucher;
+use Illuminate\Http\Request;
 
 class HomeController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
         $infos = Info::where('is_publish', 1)->orderBy('updated_at', 'desc')->get();
         $banners = Banner::orderBy('updated_at', 'desc')->get();
         $locations = Location::get();
+        $vouchers = Voucher::with(['location'])
+            ->groupBy('batch_id')
+            ->orderBy('updated_at', 'desc');
+
+        if ($request->location_id != '') {
+            $vouchers->where('location_id', $request->location_id);
+        }
 
         return inertia('Home/Index/Index', [
             'infos' => $infos,
             'banners' => $banners,
-            'locations' => $locations
+            'locations' => $locations,
+            'vouchers' => $vouchers->paginate(10),
+            '_location_id' => $request->location_id
         ]);
     }
 

app/Http/Controllers/VoucherController.php

@@ -6,6 +6,7 @@ use App\Models\Voucher;
 use App\Services\GeneralService;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 
 class VoucherController extends Controller
 {
@@ -131,6 +132,7 @@ class VoucherController extends Controller
             'expired_unit' => 'required|string',
         ]);
 
+        $batchId = Str::ulid();
         $vouchers = GeneralService::script_parser($request->script);
 
         DB::beginTransaction();
@@ -146,6 +148,7 @@ class VoucherController extends Controller
                 'comment' => $voucher['comment'],
                 'expired' => $request->expired,
                 'expired_unit' => $request->expired_unit,
+                'batch_id' => $batchId,
             ]);
         }
         DB::commit();

app/Models/Voucher.php

@@ -27,7 +27,7 @@ class Voucher extends Model
         'batch_id',
     ];
 
-    protected $appends = ['display_quota'];
+    protected $appends = ['display_quota', 'display_expired'];
 
     protected static function booted(): void
     {
@@ -62,6 +62,13 @@ class Voucher extends Model
         });
     }
 
+    public function displayExpired(): Attribute
+    {
+        return Attribute::make(get: function () {
+            return $this->expired . ' ' . $this->expired_unit;
+        });
+    }
+
     public function location()
     {
         return $this->belongsTo(Location::class);

resources/js/Pages/Home/Index/Index.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Head, router, usePage } from '@inertiajs/react'
 
 import CustomerLayout from '@/Layouts/CustomerLayout'
 import { HiOutlineBell } from 'react-icons/hi2'
 import UserBanner from './UserBanner'
+import VoucherCard from './VoucherCard'
 
 const GuestBanner = () => {
     const {
@@ -29,11 +30,60 @@ const GuestBanner = () => {
     )
 }
 
-export default function Index({ auth: { user }, infos, banners, locations }) {
+export default function Index({
+    auth: { user },
+    infos,
+    banners,
+    locations,
+    vouchers: { data, next_page_url },
+    _location_id,
+}) {
+    const [locId, setLocId] = useState(_location_id)
+    const [v, setV] = useState(data)
+
     const handleBanner = (banner) => {
         router.get(route('home.banner', banner))
     }
 
+    const handleSelectLoc = (loc) => {
+        if (loc.id === locId) {
+            setLocId('')
+            return
+        }
+        setLocId(loc.id)
+    }
+
+    const loadMore = () => {
+        router.get(
+            next_page_url,
+            {
+                location_id: locId,
+            },
+            {
+                replace: true,
+                preserveState: true,
+                only: ['vouchers'],
+                onSuccess: (res) => {
+                    setV(v.concat(res.props.vouchers.data))
+                },
+            }
+        )
+    }
+
+    useEffect(() => {
+        router.get(
+            route(route().current()),
+            { location_id: locId },
+            {
+                replace: true,
+                preserveState: true,
+                onSuccess: (res) => {
+                    setV(res.props.vouchers.data)
+                },
+            }
+        )
+    }, [locId])
+
     return (
         <CustomerLayout>
             <Head title="Home" />
@@ -69,15 +119,18 @@ export default function Index({ auth: { user }, infos, banners, locations }) {
                     ))}
                 </div>
 
-                {/* voucher */}
                 <div className="w-full flex flex-col">
                     {/* chips */}
                     <div className="w-full flex flex-row overflow-y-scroll space-x-2 px-2">
                         {locations.map((location) => (
                             <div
+                                onClick={() => handleSelectLoc(location)}
                                 key={location.id}
-                                // selected: px-2 py-1 rounded-2xl text-white bg-blue-600 border border-blue-800
+                                className={`px-2 py-1 rounded-2xl ${
-                                className="px-2 py-1 rounded-2xl  bg-blue-100 border border-blue-200"
+                                    location.id === locId
+                                        ? 'text-white bg-blue-600 border border-blue-800'
+                                        : 'bg-blue-100 border border-blue-200'
+                                }`}
                             >
                                 {location.name}
                             </div>
@@ -86,43 +139,17 @@ export default function Index({ auth: { user }, infos, banners, locations }) {
 
                     {/* voucher */}
                     <div className="flex flex-col w-full px-3 mt-3 space-y-2">
-                        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((x) => (
+                        {v.map((voucher) => (
+                            <VoucherCard key={voucher.id} voucher={voucher} />
+                        ))}
+                        {next_page_url !== null && (
                             <div
-                                className="px-3 py-1 shadow-md rounded border border-gray-100"
+                                onClick={loadMore}
-                                key={x}
+                                className="w-full text-center px-2 py-1 border mt-5 hover:bg-blue-600 hover:text-white"
                             >
-                                <div className="text-base font-bold">
+                                Load more
-                                    Lawaranet voucher internet sedap
-                                </div>
-                                <div className="w-full border border-dashed"></div>
-                                <div className="flex flex-row justify-between items-center">
-                                    <div>
-                                        <div className="text-xs text-gray-400 py-1">
-                                            Jabriel.net
-                                        </div>
-                                        <div className="text-xl font-bold">
-                                            IDR 10.000
-                                        </div>
-                                        <div className="flex flex-row space-x-2 items-center text-xs pb-2">
-                                            <div className="bg-red-300 text-red-600 px-1 py-0.5 font-bold rounded">
-                                                50%
-                                            </div>
-                                            <div className="text-gray-400 line-through">
-                                                20.000
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="flex flex-col justify-center items-center">
-                                        <div className="text-3xl font-bold">
-                                            8GB
-                                        </div>
-                                        <div className="text-gray-400">
-                                            3 Hari
-                                        </div>
-                                    </div>
-                                </div>
                             </div>
-                        ))}
+                        )}
                     </div>
                 </div>
             </div>

resources/js/Pages/Home/Index/VoucherCard.jsx

@@ -0,0 +1,38 @@
+import { formatIDR } from '@/utils'
+
+export default function VoucherCard({ voucher }) {
+    return (
+        <div className="px-3 py-1 shadow-md rounded border border-gray-100">
+            <div className="text-base font-bold">{voucher.location.name}</div>
+            <div className="w-full border border-dashed"></div>
+            <div className="flex flex-row justify-between items-center">
+                <div>
+                    <div className="text-xs text-gray-400 py-1">
+                        {voucher.location.name}
+                    </div>
+                    <div className="text-xl font-bold">
+                        IDR {formatIDR(voucher.price)}
+                    </div>
+                    {+voucher.discount !== 0 && (
+                        <div className="flex flex-row space-x-2 items-center text-xs pb-2">
+                            <div className="bg-red-300 text-red-600 px-1 py-0.5 font-bold rounded">
+                                {voucher.discount}%
+                            </div>
+                            <div className="text-gray-400 line-through">
+                                {formatIDR(voucher.display_price)}
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className="flex flex-col justify-center ">
+                    <div className="text-3xl font-bold">
+                        {voucher.display_quota}
+                    </div>
+                    <div className="text-gray-400 text-right">
+                        {voucher.display_expired}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

resources/js/Pages/Voucher/Index.jsx

@@ -96,6 +96,12 @@ export default function Index(props) {
                                             >
                                                 No
                                             </th>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            >
+                                                Lokasi
+                                            </th>
                                             <th
                                                 scope="col"
                                                 className="py-3 px-6"
@@ -144,6 +150,12 @@ export default function Index(props) {
                                                 >
                                                     {index + 1}
                                                 </td>
+                                                <td
+                                                    scope="row"
+                                                    className="py-4 px-6"
+                                                >
+                                                    {voucher.location.name}
+                                                </td>
                                                 <td
                                                     scope="row"
                                                     className="py-4 px-6"