customer level view done

TODO.md

@@ -10,7 +10,7 @@
 -   [x] CRUD Voucher
 -   [x] Import Voucher
 -   [x] Setting Web (enable affilate, amount bonus affilate)
--   [ ] Setting Level Customer (view levels, edit name of level,minimal saldo, max amount saldo, max hutang)
+-   [x] Setting Level Customer (view levels, edit name of level,minimal saldo, max amount saldo, max hutang)
 -   [ ] Deposit Menu (view daftar histori deposit)
 -   [ ] Manual Approve Deposit
 -   [ ] Setting Bonus Coin (memasukan amount bonus coin yang didapat dengan level dan harga voucher) - coin rewards

app/Http/Controllers/CustomerLevelController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\CustomerLevel;
+use Illuminate\Http\Request;
+
+class CustomerLevelController extends Controller
+{
+    public function index()
+    {
+        $query = CustomerLevel::query();
+        return inertia('CustomerLevel/Index', [
+            'query' => $query->paginate()
+        ]);
+    }
+
+    public function update(Request $request, CustomerLevel $customerLevel)
+    {
+        $request->validate([
+            'name' => 'required|string',
+            'description' => 'nullable|string',
+            'min_amount' => 'required|numeric|min:0',
+            'max_amount' => 'required|numeric|min:0'
+        ]);
+
+        $customerLevel->update([
+            'name' => $request->name,
+            'description' => $request->description,
+            'min_amount' => $request->min_amount,
+            'max_amount' => $request->max_amount,
+        ]);
+
+        session()->flash('message', ['type' => 'success', 'message' => 'Item has beed updated']);
+    }
+}

database/seeders/InstallationSeed.php

@@ -38,10 +38,10 @@ class InstallationSeed extends Seeder
     public function customer_levels()
     {
         $levels = [
-            ['name' => 'Basic', 'key' => 'basic'],
+            ['name' => 'Basic', 'key' => 'basic', 'description' => '-', 'min_amount' => '100000', 'max_amount' => '500000'],
-            ['name' => 'Silver', 'key' => 'silver'],
+            ['name' => 'Silver', 'key' => 'silver', 'description' => '-', 'min_amount' => '100000', 'max_amount' => '1000000'],
-            ['name' => 'Gold', 'key' => 'gold'],
+            ['name' => 'Gold', 'key' => 'gold', 'description' => '-', 'min_amount' => '100000', 'max_amount' => '2000000'],
-            ['name' => 'Platinum', 'key' => 'platinum'],
+            ['name' => 'Platinum', 'key' => 'platinum', 'description' => '-', 'min_amount' => '100000', 'max_amount' => '3000000'],
         ];
 
         foreach ($levels as $level) {

database/seeders/PermissionSeeder.php

@@ -51,10 +51,8 @@ class PermissionSeeder extends Seeder
             ['id' => Str::ulid(), 'label' => 'View Customer', 'name' => 'view-customer'],
             ['id' => Str::ulid(), 'label' => 'Delete Customer', 'name' => 'delete-customer'],
 
-            ['id' => Str::ulid(), 'label' => 'Create Customer Level', 'name' => 'create-customer-level'],
             ['id' => Str::ulid(), 'label' => 'Update Customer Level', 'name' => 'update-customer-level'],
             ['id' => Str::ulid(), 'label' => 'View Customer Level', 'name' => 'view-customer-level'],
-            ['id' => Str::ulid(), 'label' => 'Delete Customer Level', 'name' => 'delete-customer-level'],
 
             ['id' => Str::ulid(), 'label' => 'Create Customer Verification', 'name' => 'create-customer-verification'],
             ['id' => Str::ulid(), 'label' => 'Update Customer Verification', 'name' => 'update-customer-verification'],

resources/js/Layouts/Partials/routes.js

@@ -32,6 +32,14 @@ export default [
         active: 'customer.*',
         permission: 'view-customer',
     },
+    {
+        name: 'Customer Level',
+        show: true,
+        icon: HiUserCircle,
+        route: route('customer-level.index'),
+        active: 'customer-level.*',
+        permission: 'view-customer-level',
+    },
     {
         name: 'Bank Akun',
         show: true,

resources/js/Pages/CustomerLevel/FormModal.jsx

@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react'
+import Modal from '@/Components/Modal'
+import { useForm } from '@inertiajs/react'
+import Button from '@/Components/Button'
+import FormInput from '@/Components/FormInput'
+import RoleSelectionInput from '../Role/SelectionInput'
+
+import { isEmpty } from 'lodash'
+
+export default function FormModal(props) {
+    const { modalState } = props
+    const { data, setData, post, put, processing, errors, reset, clearErrors } =
+        useForm({
+            name: '',
+            description: '',
+            min_amount: 0,
+            max_amount: 0,
+        })
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleReset = () => {
+        modalState.setData(null)
+        reset()
+        clearErrors()
+    }
+
+    const handleClose = () => {
+        handleReset()
+        modalState.toggle()
+    }
+
+    const handleSubmit = () => {
+        const customerLevel = modalState.data
+        put(route('customer-level.update', customerLevel.id), {
+            onSuccess: () => handleClose(),
+        })
+    }
+
+    useEffect(() => {
+        const customerLevel = modalState.data
+        if (isEmpty(customerLevel) === false) {
+            setData({
+                name: customerLevel.name,
+                description: customerLevel.description,
+                min_amount: customerLevel.min_amount,
+                max_amount: customerLevel.max_amount,
+            })
+            return
+        }
+    }, [modalState])
+
+    return (
+        <Modal isOpen={modalState.isOpen} toggle={handleClose} title={'Info'}>
+            <FormInput
+                name="name"
+                value={data.name}
+                onChange={handleOnChange}
+                label="Nama"
+                error={errors.name}
+            />
+            <FormInput
+                name="description"
+                value={data.description}
+                onChange={handleOnChange}
+                label="Description"
+                error={errors.description}
+            />
+            <FormInput
+                type="number"
+                name="min_amount"
+                value={data.min_amount}
+                onChange={handleOnChange}
+                label="Minimal Deposit"
+                error={errors.min_amount}
+            />
+            <FormInput
+                type="number"
+                name="max_amount"
+                value={data.max_amount}
+                onChange={handleOnChange}
+                label="Maksimal Deposit"
+                error={errors.max_amount}
+            />
+            <div className="flex items-center">
+                <Button onClick={handleSubmit} processing={processing}>
+                    Simpan
+                </Button>
+                <Button onClick={handleClose} type="secondary">
+                    Batal
+                </Button>
+            </div>
+        </Modal>
+    )
+}

resources/js/Pages/CustomerLevel/Index.jsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { Head } from '@inertiajs/react'
+import { Dropdown } from 'flowbite-react'
+import { HiPencil } from 'react-icons/hi'
+import { useModalState } from '@/hooks'
+
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import Pagination from '@/Components/Pagination'
+import FormModal from './FormModal'
+import { formatIDR, hasPermission } from '@/utils'
+
+export default function Info(props) {
+    const {
+        query: { links, data },
+        auth,
+    } = props
+
+    const formModal = useModalState()
+
+    const toggleFormModal = (customerlevel = null) => {
+        formModal.setData(customerlevel)
+        formModal.toggle()
+    }
+
+    const canUpdate = hasPermission(auth, 'update-customer-level')
+
+    return (
+        <AuthenticatedLayout
+            auth={props.auth}
+            errors={props.errors}
+            flash={props.flash}
+            page={'Customer Level'}
+            action={''}
+        >
+            <Head title="Customer Level" />
+
+            <div>
+                <div className="mx-auto sm:px-6 lg:px-8 ">
+                    <div className="p-6 overflow-hidden shadow-sm sm:rounded-lg bg-gray-200 dark:bg-gray-800 space-y-4">
+                        <div className="flex justify-between">{/*  */}</div>
+                        <div className="overflow-auto">
+                            <div>
+                                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 mb-4">
+                                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                                        <tr>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            >
+                                                Name
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            >
+                                                Description
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            >
+                                                Minimal Deposit
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            >
+                                                Maximal Deposit
+                                            </th>
+                                            <th
+                                                scope="col"
+                                                className="py-3 px-6"
+                                            />
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {data.map((level) => (
+                                            <tr
+                                                className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                                                key={level.id}
+                                            >
+                                                <td
+                                                    scope="row"
+                                                    className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                                >
+                                                    {level.name}
+                                                </td>
+                                                <td className="py-4 px-6">
+                                                    {level.description}
+                                                </td>
+                                                <td className="py-4 px-6">
+                                                    {formatIDR(
+                                                        level.min_amount
+                                                    )}
+                                                </td>
+                                                <td className="py-4 px-6">
+                                                    {formatIDR(
+                                                        level.max_amount
+                                                    )}
+                                                </td>
+                                                <td className="py-4 px-6 flex justify-end">
+                                                    <Dropdown
+                                                        label={'Opsi'}
+                                                        floatingArrow={true}
+                                                        arrowIcon={true}
+                                                        dismissOnClick={true}
+                                                        size={'sm'}
+                                                    >
+                                                        {canUpdate && (
+                                                            <Dropdown.Item
+                                                                onClick={() =>
+                                                                    toggleFormModal(
+                                                                        level
+                                                                    )
+                                                                }
+                                                            >
+                                                                <div className="flex space-x-1 items-center">
+                                                                    <HiPencil />
+                                                                    <div>
+                                                                        Ubah
+                                                                    </div>
+                                                                </div>
+                                                            </Dropdown.Item>
+                                                        )}
+                                                    </Dropdown>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div className="w-full flex items-center justify-center">
+                                <Pagination links={links} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <FormModal modalState={formModal} />
+        </AuthenticatedLayout>
+    )
+}

routes/admin.php

@@ -4,6 +4,7 @@ use App\Http\Controllers\AccountController;
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
 use App\Http\Controllers\BannerController;
 use App\Http\Controllers\CustomerController;
+use App\Http\Controllers\CustomerLevelController;
 use App\Http\Controllers\GeneralController;
 use App\Http\Controllers\InfoController;
 use App\Http\Controllers\LocationController;
@@ -77,6 +78,10 @@ Route::middleware(['http_secure_aware', 'inertia.admin'])
             Route::post('/banner/{banner}', [BannerController::class, 'update'])->name('banner.update');
             Route::delete('/banner/{banner}', [BannerController::class, 'destroy'])->name('banner.destroy');
 
+            // customer level
+            Route::get('/customer-levels', [CustomerLevelController::class, 'index'])->name('customer-level.index');
+            Route::put('/customer-levels/{customerLevel}', [CustomerLevelController::class, 'update'])->name('customer-level.update');
+
             // customer
             Route::get('/customers', [CustomerController::class, 'index'])->name('customer.index');
             Route::get('/customers/create', [CustomerController::class, 'create'])->name('customer.create');