diff --git a/app/Http/Controllers/SettingController.php b/app/Http/Controllers/SettingController.php
index 0830d6f..1cde4dd 100644
--- a/app/Http/Controllers/SettingController.php
+++ b/app/Http/Controllers/SettingController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\CustomerLevel;
 use App\Models\Setting;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
@@ -94,33 +95,33 @@ class SettingController extends Controller
     {
         $setting = Setting::all();
 
-        return inertia('Setting/Payment', [
+        return inertia('Setting/Affilate', [
             'setting' => $setting,
-            'midtrans_notification_url' => route('api.midtrans.notification'),
+            'levels' => CustomerLevel::all()
         ]);
     }
 
     public function updateAffilate(Request $request)
     {
         $request->validate([
-            'MIDTRANS_SERVER_KEY' => 'required|string',
-            'MIDTRANS_CLIENT_KEY' => 'required|string',
-            'MIDTRANS_MERCHANT_ID' => 'required|string',
-            'MIDTRANS_ADMIN_FEE' => 'required|numeric',
-            'MIDTRANS_ENABLED' => 'required|in:0,1',
-            'midtrans_logo_file' => 'nullable|image',
+            'AFFILATE_ENABLED' => 'required|in:0,1',
+            'AFFILATE_POIN_AMOUNT' => 'required|numeric',
+            'AFFILATE_DOWNLINE_POIN_AMOUNT' => 'required|numeric',
+            'AFFILATE_SHARE_REFFERAL_CODE' => 'required|string',
+            'AFFILATE_ALLOWED_LEVELS' => 'required|array',
+            'AFFILATE_ALLOWED_LEVELS.*.key' => 'required|exists:customer_levels,key',
         ]);
 
         DB::beginTransaction();
-        foreach ($request->except(['midtrans_logo_file']) as $key => $value) {
+        foreach ($request->except(['AFFILATE_ALLOWED_LEVELS']) as $key => $value) {
             Setting::where('key', $key)->update(['value' => $value]);
         }
 
-        if ($request->hasFile('midtrans_logo_file')) {
-            $file = $request->file('midtrans_logo_file');
-            $file->store('uploads', 'public');
-            Setting::where('key', 'MIDTRANS_LOGO')->update(['value' => $file->hashName('uploads')]);
-        }
+        $allowedLevel = collect($request->AFFILATE_ALLOWED_LEVELS)->toArray();
+
+        Setting::where('key', 'AFFILATE_ALLOWED_LEVELS')->update([
+            'value' => json_encode($allowedLevel)
+        ]);
 
         Cache::flush();
 
diff --git a/database/seeders/InstallationSeed.php b/database/seeders/InstallationSeed.php
index aec83af..cecc0a8 100644
--- a/database/seeders/InstallationSeed.php
+++ b/database/seeders/InstallationSeed.php
@@ -20,12 +20,19 @@ class InstallationSeed extends Seeder
     public function settings()
     {
         $settings = [
+            // general
             ['key' => 'OPEN_WEBSITE_NAME', 'value' => 'Welcome to Voucher App', 'type' => 'text'],
+            ['key' => 'SHARE_TEXT', 'value' => '', 'type' => 'text'],
 
+
+            // affilate
             ['key' => 'AFFILATE_ENABLED', 'value' => '0', 'type' => 'checkbox'],
             ['key' => 'AFFILATE_POIN_AMOUNT', 'value' => '0', 'type' => 'text'],
             ['key' => 'AFFILATE_DOWNLINE_POIN_AMOUNT', 'value' => '0', 'type' => 'text'],
+            ['key' => 'AFFILATE_SHARE_REFFERAL_CODE', 'value' => 'Yuk daftar dapatkan bonus poin', 'type' => 'text'],
+            ['key' => 'AFFILATE_ALLOWED_LEVELS', 'value' => json_encode([]), 'type' => 'json'],
 
+            // midtrans
             ['key' => 'MIDTRANS_SERVER_KEY', 'value' => 'SB-Mid-server-UA0LQbY4aALV0CfLLX1v7xs8', 'type' => 'text'],
             ['key' => 'MIDTRANS_CLIENT_KEY', 'value' => 'SB-Mid-client-xqqkspzoZOM10iUG', 'type' => 'text'],
             ['key' => 'MIDTRANS_MERCHANT_ID', 'value' => 'G561244367', 'type' => 'text'],
@@ -33,8 +40,7 @@ class InstallationSeed extends Seeder
             ['key' => 'MIDTRANS_ENABLED', 'value' => '0', 'type' => 'text'],
             ['key' => 'MIDTRANS_ADMIN_FEE', 'value' => '2500', 'type' => 'text'],
 
-            // ['key' => 'VOUCHER_STOCK_NOTIFICATION', 'value' => '10', 'type' => 'text'],
-
+            // deposit
             ['key' => 'ENABLE_CASH_DEPOSIT', 'value' => '0', 'type' => 'text'],
             ['key' => 'ENABLE_MANUAL_TRANSFER', 'value' => '0', 'type' => 'text'],
             ['key' => 'MAX_MANUAL_TRANSFER_TIMEOUT', 'value' => '2', 'type' => 'text'], //dalam jam
diff --git a/resources/js/Components/FormInputNumeric.jsx b/resources/js/Components/FormInputNumeric.jsx
index f0cd547..f9ea153 100644
--- a/resources/js/Components/FormInputNumeric.jsx
+++ b/resources/js/Components/FormInputNumeric.jsx
@@ -18,15 +18,18 @@ export default function FormInputNumeric({
     }
     value = Number(value)
 
+    const labelId = `${name}-${value}`
+
     return (
         <div>
             <label
-                htmlFor="first_name"
+                htmlFor={label}
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
             >
                 {label}
             </label>
             <NumericFormat
+                id={label}
                 max={max}
                 thousandSeparator="."
                 decimalSeparator=","
diff --git a/resources/js/Pages/Setting/Affilate.jsx b/resources/js/Pages/Setting/Affilate.jsx
new file mode 100644
index 0000000..7943939
--- /dev/null
+++ b/resources/js/Pages/Setting/Affilate.jsx
@@ -0,0 +1,147 @@
+import React from 'react'
+import { Head, useForm } from '@inertiajs/react'
+
+import { extractValue } from './utils'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import FormInput from '@/Components/FormInput'
+import Button from '@/Components/Button'
+import FormFile from '@/Components/FormFile'
+import Checkbox from '@/Components/Checkbox'
+import FormInputNumeric from '@/Components/FormInputNumeric'
+import TextArea from '@/Components/TextArea'
+import LevelSelectionInput from '../CustomerLevel/SelectionInput'
+
+export default function Affilate(props) {
+    const { setting, levels } = props
+    const { data, setData, post, reset, processing, errors } = useForm({
+        AFFILATE_ENABLED: extractValue(setting, 'AFFILATE_ENABLED'),
+        AFFILATE_POIN_AMOUNT: extractValue(setting, 'AFFILATE_POIN_AMOUNT'),
+        AFFILATE_DOWNLINE_POIN_AMOUNT: extractValue(
+            setting,
+            'AFFILATE_DOWNLINE_POIN_AMOUNT'
+        ),
+        AFFILATE_SHARE_REFFERAL_CODE: extractValue(
+            setting,
+            'AFFILATE_SHARE_REFFERAL_CODE'
+        ),
+        AFFILATE_ALLOWED_LEVELS: JSON.parse(
+            extractValue(setting, 'AFFILATE_ALLOWED_LEVELS')
+        ),
+    })
+
+    console.log(data)
+
+    const handleCheckLevel = (e, level) => {
+        if (e.target.checked) {
+            const isExists = data.AFFILATE_ALLOWED_LEVELS.find(
+                (l) => l.id === level.id
+            )
+            if (isExists) {
+                return
+            }
+            setData(
+                'AFFILATE_ALLOWED_LEVELS',
+                data.AFFILATE_ALLOWED_LEVELS.concat(level)
+            )
+        } else {
+            setData(
+                'AFFILATE_ALLOWED_LEVELS',
+                data.AFFILATE_ALLOWED_LEVELS.filter((l) => l.id !== level.id)
+            )
+        }
+    }
+
+    const isCheck = (level) => {
+        const isExists = data.AFFILATE_ALLOWED_LEVELS.find(
+            (l) => l.id === level.id
+        )
+        if (isExists) {
+            return true
+        }
+        return false
+    }
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleSubmit = () => {
+        post(route('setting.affilate'))
+    }
+
+    return (
+        <AuthenticatedLayout
+            page={'Affilate'}
+            action={''}
+            parent={route(route().current())}
+        >
+            <Head title="Affilate" />
+
+            <div>
+                <div className="mx-auto sm:px-6 lg:px-8">
+                    <div className="overflow-hidden p-4 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 flex flex-col min-h-screen">
+                        <div className="mt-2 p-2 border rounded-xl">
+                            <div className="font-bold mb-2">Affilate</div>
+                            <FormInputNumeric
+                                name="AFFILATE_POIN_AMOUNT"
+                                value={data.AFFILATE_POIN_AMOUNT}
+                                onChange={handleOnChange}
+                                label="Poin Affiliasi"
+                                error={errors.AFFILATE_POIN_AMOUNT}
+                            />
+                            <FormInputNumeric
+                                name="AFFILATE_DOWNLINE_POIN_AMOUNT"
+                                value={data.AFFILATE_DOWNLINE_POIN_AMOUNT}
+                                onChange={handleOnChange}
+                                label="Poin Transaksi Affiliasi (Downline)"
+                                error={errors.AFFILATE_DOWNLINE_POIN_AMOUNT}
+                            />
+                            <TextArea
+                                name="AFFILATE_SHARE_REFFERAL_CODE"
+                                value={data.AFFILATE_SHARE_REFFERAL_CODE}
+                                onChange={handleOnChange}
+                                label="Text Sharelink Affilate"
+                                error={errors.AFFILATE_SHARE_REFFERAL_CODE}
+                            />
+                            <Checkbox
+                                label="Enable"
+                                value={+data.AFFILATE_ENABLED === 1}
+                                onChange={handleOnChange}
+                                name="AFFILATE_ENABLED"
+                            />
+                            <div className="mt-2">Level Affilate</div>
+                            <div className="border p-1 rounded">
+                                {levels.map((level) => (
+                                    <Checkbox
+                                        key={level.id}
+                                        label={level.name}
+                                        value={isCheck(level)}
+                                        onChange={(e) =>
+                                            handleCheckLevel(e, level)
+                                        }
+                                    />
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="mt-4">
+                            <Button
+                                onClick={handleSubmit}
+                                processing={processing}
+                            >
+                                Simpan
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </AuthenticatedLayout>
+    )
+}
diff --git a/resources/js/Pages/Setting/Index.jsx b/resources/js/Pages/Setting/Index.jsx
index 1668353..2c0df38 100644
--- a/resources/js/Pages/Setting/Index.jsx
+++ b/resources/js/Pages/Setting/Index.jsx
@@ -1,26 +1,18 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { Head, router, useForm } from '@inertiajs/react'
 
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
 import FormInput from '@/Components/FormInput'
 import Button from '@/Components/Button'
-import TextArea from '@/Components/TextArea'
-import FormFile from '@/Components/FormFile'
-import Checkbox from '@/Components/Checkbox'
 import { extractValue } from './utils'
 
+const TinyEditor = React.lazy(() => import('@/Components/TinyMCE'))
+
 export default function General(props) {
-    const { setting, midtrans_notification_url } = props
+    const { setting } = props
     const { data, setData, post, reset, processing, errors } = useForm({
         OPEN_WEBSITE_NAME: extractValue(setting, 'OPEN_WEBSITE_NAME'),
-        AFFILATE_ENABLED: extractValue(setting, 'AFFILATE_ENABLED'),
-        AFFILATE_POIN_AMOUNT: extractValue(setting, 'AFFILATE_POIN_AMOUNT'),
-        MIDTRANS_SERVER_KEY: extractValue(setting, 'MIDTRANS_SERVER_KEY'),
-        MIDTRANS_CLIENT_KEY: extractValue(setting, 'MIDTRANS_CLIENT_KEY'),
-        MIDTRANS_MERCHANT_ID: extractValue(setting, 'MIDTRANS_MERCHANT_ID'),
-        MIDTRANS_LOGO_URL: extractValue(setting, 'MIDTRANS_LOGO'),
-        MIDTRANS_ENABLED: extractValue(setting, 'MIDTRANS_ENABLED'),
-        midtrans_logo_file: null,
+        SHARE_TEXT: extractValue(setting, 'SHARE_TEXT'),
     })
 
     const handleOnChange = (event) => {
@@ -63,79 +55,33 @@ export default function General(props) {
                                 label="Nama Website"
                                 error={errors.OPEN_WEBSITE_NAME}
                             />
-                        </div>
-
-                        <div className="mt-2 p-2 border rounded-xl">
-                            <div className="font-bold mb-2">Affilate</div>
-                            <FormInput
-                                type={'number'}
-                                name="AFFILATE_POIN_AMOUNT"
-                                value={data.AFFILATE_POIN_AMOUNT}
-                                onChange={handleOnChange}
-                                label="Jumlah Bonus Poin"
-                                error={errors.AFFILATE_POIN_AMOUNT}
-                            />
-                            <Checkbox
-                                label="Enable"
-                                value={+data.AFFILATE_ENABLED === 1}
-                                onChange={handleOnChange}
-                                name="AFFILATE_ENABLED"
-                            />
-                        </div>
-
-                        <div className="mt-2 p-2 border rounded-xl">
-                            <div className="font-bold mb-2">
-                                Midtrans Payment
-                            </div>
-                            <FormInput
-                                name="MIDTRANS_MERCHANT_ID"
-                                value={data.MIDTRANS_MERCHANT_ID}
-                                onChange={handleOnChange}
-                                label="Merchant ID"
-                                error={errors.MIDTRANS_MERCHANT_ID}
-                            />
-                            <FormInput
-                                name="MIDTRANS_SERVER_KEY"
-                                value={data.MIDTRANS_SERVER_KEY}
-                                onChange={handleOnChange}
-                                label="Server Key"
-                                error={errors.MIDTRANS_SERVER_KEY}
-                            />
-                            <FormInput
-                                name="MIDTRANS_CLIENT_KEY"
-                                value={data.MIDTRANS_CLIENT_KEY}
-                                onChange={handleOnChange}
-                                label="Client Key"
-                                error={errors.MIDTRANS_CLIENT_KEY}
-                            />
-                            <FormFile
-                                label={'Logo'}
-                                onChange={(e) =>
-                                    setData(
-                                        'midtrans_logo_file',
-                                        e.target.files[0]
-                                    )
-                                }
-                                error={errors.midtrans_logo_file}
-                                preview={
-                                    <img
-                                        src={`${data.MIDTRANS_LOGO_URL}`}
-                                        className="w-40 mb-1"
-                                        alt="site logo"
+                            <div className="py-4">
+                                <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                    Share Text Voucher
+                                </label>
+                                <Suspense fallback={<div>Loading...</div>}>
+                                    <TinyEditor
+                                        value={data.SHARE_TEXT}
+                                        init={{
+                                            height: 500,
+                                            // menubar: false,
+                                            menubar:
+                                                'file edit view insert format tools table help',
+                                            plugins:
+                                                'preview importcss searchreplace autolink directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons',
+                                            toolbar_mode: 'scrolling',
+                                            toolbar:
+                                                'undo redo | insertfile image media link | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | charmap emoticons | fullscreen  preview save print | ltr rtl | anchor codesample',
+                                        }}
+                                        onEditorChange={(newValue, editor) => {
+                                            setData(
+                                                'SHARE_TEXT',
+                                                editor.getContent()
+                                            )
+                                        }}
                                     />
-                                }
-                            />
-                            <FormInput
-                                value={midtrans_notification_url}
-                                label="Notification URL"
-                                readOnly={true}
-                            />
-                            <Checkbox
-                                label="Enable"
-                                value={+data.MIDTRANS_ENABLED === 1}
-                                onChange={handleOnChange}
-                                name="MIDTRANS_ENABLED"
-                            />
+                                </Suspense>
+                            </div>
                         </div>
 
                         <div className="mt-4">
diff --git a/resources/js/Pages/Setting/Payment.jsx b/resources/js/Pages/Setting/Payment.jsx
index 67aaebb..630f6c1 100644
--- a/resources/js/Pages/Setting/Payment.jsx
+++ b/resources/js/Pages/Setting/Payment.jsx
@@ -1,10 +1,9 @@
 import React from 'react'
-import { Head, router, useForm } from '@inertiajs/react'
+import { Head, useForm } from '@inertiajs/react'
 
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
 import FormInput from '@/Components/FormInput'
 import Button from '@/Components/Button'
-import TextArea from '@/Components/TextArea'
 import FormFile from '@/Components/FormFile'
 import Checkbox from '@/Components/Checkbox'
 import { extractValue } from './utils'
@@ -77,7 +76,7 @@ export default function General(props) {
                                 name="MIDTRANS_ADMIN_FEE"
                                 value={data.MIDTRANS_ADMIN_FEE}
                                 onChange={handleOnChange}
-                                label="ADMIN FEE"
+                                label="Admin Fee"
                                 error={errors.MIDTRANS_ADMIN_FEE}
                             />
                             <FormFile