diff --git a/app/Http/Controllers/Mobile/LelongMobileController.php b/app/Http/Controllers/Mobile/LelongMobileController.php
index 44184048..2f2ce08b 100644
--- a/app/Http/Controllers/Mobile/LelongMobileController.php
+++ b/app/Http/Controllers/Mobile/LelongMobileController.php
@@ -14,6 +14,7 @@ use App\Models\Payment;
 use App\Models\Cart;
 use Carbon\Carbon;
 use App\Models\Cawangan;
+use App\Models\CawanganLelong;
 use App\Models\FileMarhun;
 use App\Models\Resit;
 use App\Models\FileResit;
@@ -1429,5 +1430,47 @@ class LelongMobileController extends Controller
         }
         return response()->json(['success' => true]);
     }
+    
+    public function listLelong()
+    {
+        $lelong_all = Lelong::select('id')->get();
+        return response()->json($lelong_all);
+    }
+
+    public function listCawangan(Request $request)
+    {
+        $cawangan_all = CawanganLelong::join('cawangan','cawangan_lelong.caw_id','=','cawangan.id')
+        ->where('lelong_id', $request->lelong_id)
+        ->select('cawangan_lelong.caw_id', 'cawangan.caw_name')->get();
+        return response()->json($cawangan_all);
+    }
+
+    public function listLelongBid(Request $request)
+    {
+        $lelong_bid_all = LelongBid::with('fileMarhunMain')
+        ->where('caw_id', $request->caw_id)
+        ->where('lelong_id', $request->lelong_id)
+        ->select(['id','norujukan', 'marhun', 'nilaimarhun'])
+        ->get();
+        
+        return response()->json($lelong_bid_all);
+    }
+
+    public function showPhotoMarhun(Request $request)
+    {
+        $fileMarhun = FileMarhun::find($request->filemarhun_id, ['file_type']);
+
+        $directory = "/{$request->norujukan}/overall_photo/";
+        $imageExtension = $fileMarhun->file_type;
+
+        $marhunImageFileName = "overall.{$imageExtension}";
+
+        if (Storage::disk('marhun')->exists("{$directory}${marhunImageFileName}")) {
+            $marhun_photo = Storage::disk('marhun')->get("{$directory}${marhunImageFileName}");
+            return base64_encode($marhun_photo);
+        } else {
+            return 0;
+        }
+    }
 
 }
diff --git a/resources/js/axios.js b/resources/js/axios.js
new file mode 100644
index 00000000..c6ae5c1c
--- /dev/null
+++ b/resources/js/axios.js
@@ -0,0 +1,6 @@
+import axios from "axios";
+
+// const tokenKey = "token";
+// axios.defaults.headers.common['X-CSRF-TOKEN'] = tokenKey;
+
+axios.defaults.baseURL = "http://lelong-admin.test/api";
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue b/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
new file mode 100644
index 00000000..5b320ab8
--- /dev/null
+++ b/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="col-12">
+        Jumlah Item: {{ numberOfLelongBid }}
+    </div>
+    <div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid" class="col-lg-4 my-1 text-center col-md-6 col-sm-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="text-center" v-if="lelongBid.file_marhun_main != null">
+                    <MarhunImage v-bind:noRujukan="lelongBid.norujukan" v-bind:gambarId="lelongBid.file_marhun_main.id"/>
+                </div>
+                <div v-else>
+                    <div class="col-12">{{ lelongBid.norujukan }}</div>
+                    <div class="col-12 text-danger">Gambar Belum Di Muat Naik</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import axios from "axios";
+import MarhunImage from "./MarhunImage.vue"
+
+const props = defineProps({
+    selectedIdCawangan: String,
+    selectedBatchLelong: String
+})
+
+const allLelongBid = ref();
+
+const numberOfLelongBid = computed(
+    () => allLelongBid.length
+);
+
+function getListLelongBid() {
+    axios.get("/listLelongBid", {
+        params: {
+            lelong_id: props.selectedBatchLelong,
+            caw_id: props.selectedIdCawangan,
+        },
+    }).then((response) => {
+        allLelongBid.value = response.data;
+    }).catch((error) => { alert(error); });
+}
+
+onMounted(() => {
+    getListLelongBid();
+});
+</script>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/MarhunImage.vue b/resources/js/components/pengurusangambar/marhun/MarhunImage.vue
new file mode 100644
index 00000000..c8a3d026
--- /dev/null
+++ b/resources/js/components/pengurusangambar/marhun/MarhunImage.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="col-12">
+        file_marhun_id: {{ props.gambarId }}
+    </div>
+    <div class="col-12">
+        {{ props.noRujukan }}
+    </div>
+    <div v-if="stringGambar == 0" class="text-center text-primary">No Image in Storage. Please cp from the server</div>
+    <img v-else :src="stringGambarMarhun" alt="gambar-marhun" width="180">
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from "axios";
+
+const props = defineProps({
+    gambarId: Number,
+    noRujukan: String
+})
+
+const stringGambar = ref();
+const stringGambarMarhun = ref();
+
+function getPhotoMarhun() {
+    axios.get("/showPhotoMarhun", {
+        params: {
+            filemarhun_id: props.gambarId,
+            norujukan: props.noRujukan,
+        },
+    }).then((response) => {
+        stringGambar.value = response.data;
+        stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
+    }).catch((error) => { console.log(error); });
+}
+
+onMounted(() => {
+    getPhotoMarhun();
+});
+</script>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue b/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
new file mode 100644
index 00000000..3493ef84
--- /dev/null
+++ b/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
@@ -0,0 +1,48 @@
+<template>
+    <div v-if="isLoadingGetListLelong" class="row justify-content-center">
+        <div class="spinner-border text-primary" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+    <div v-else>
+        <label>Pilih Batch Lelong</label>
+        <select class="custom-select" @change="pilihBatchLelong($event)">
+            <option selected disabled>Batch Lelong</option>
+            <option v-for="val in listLelong" :key="val" v-bind:value="val.id">{{ val.id }}</option>
+        </select>
+        <div class="mt-3">
+            <SelectCawangan v-if="pilihLelong != null" v-bind:key="componentKey" v-bind:selectedLelong="pilihLelong" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import SelectCawangan from "./SelectCawangan.vue"
+import axios from "axios";
+
+const listLelong = ref();
+const pilihLelong = ref();
+const componentKey = ref(0);
+const isLoadingGetListLelong = ref(false);
+
+function getListLelong() {
+    isLoadingGetListLelong.value = true;
+    axios.get("/listLelong", {}).then((response) => {
+        listLelong.value = response.data;
+    }).catch((error) => {
+        alert(error);
+    });
+    isLoadingGetListLelong.value = false;
+};
+
+function pilihBatchLelong(e) {
+    let val = e.target.value;
+    pilihLelong.value = val;
+    componentKey.value += 1;
+};
+
+onMounted(() => {
+    getListLelong();
+})
+</script>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue b/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
new file mode 100644
index 00000000..a0b1d8b4
--- /dev/null
+++ b/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
@@ -0,0 +1,60 @@
+<template>
+    <button @click="testLoading()" class="btn btn-primary">Invert isLoadingGetListCawangan</button>
+    <div v-if="isLoadingGetListCawangan" class="row justify-content-center">
+        <div class="spinner-border text-primary" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+    <div v-else>
+        <label>Pilih Cawangan</label>
+        <select class="custom-select" @change="pilihCawangan($event)">
+            <option selected disabled>Cawangan</option>
+            <option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
+        </select>
+        <div class="mt-3 row justify-content-center">
+            <DisplayLelongBid v-if="pilihIdCawangan != null" v-bind:key="componentKeySecond"
+                v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import DisplayLelongBid from "./DisplayLelongBid.vue.vue"
+
+const props = defineProps({
+    selectedLelong: String
+})
+
+const listCawangan = ref();
+const pilihIdCawangan = ref();
+const componentKeySecond = ref(0);
+const isLoadingGetListCawangan = ref(false);
+
+function testLoading() {
+    isLoadingGetListCawangan.value = !isLoadingGetListCawangan.value;
+}
+
+function getListCawangan() {
+    isLoadingGetListCawangan.value = true;
+    axios.get("/listCawangan", {
+        params: {
+            lelong_id: props.selectedLelong,
+        },
+    }).then((response) => {
+        listCawangan.value = response.data;
+    }).catch((error) => { alert(error); });
+    isLoadingGetListCawangan.value = false;
+}
+
+function pilihCawangan(e) {
+    let val = e.target.value;
+    pilihIdCawangan.value = val;
+    componentKeySecond.value += 1;
+};
+
+onMounted(() => {
+    getListCawangan();
+})
+</script>
\ No newline at end of file
diff --git a/resources/js/vue-app.js b/resources/js/vue-app.js
index 1019d85b..9f658763 100644
--- a/resources/js/vue-app.js
+++ b/resources/js/vue-app.js
@@ -1,10 +1,14 @@
 import { createApp } from 'vue'
+import './axios'
 
-import HelloComponent from "./components/HelloComponent.vue"
-import ByeComponent from "./components/ByeComponent.vue"
+// import HelloComponent from "./components/HelloComponent.vue"
+// import ByeComponent from "./components/ByeComponent.vue"
+import SelectBatchLelong from "./components/pengurusangambar/marhun/SelectBatchLelong.vue"
 
-const appHelloComponent = createApp(HelloComponent);
-const appByeComponent = createApp(ByeComponent);
+// const appHelloComponent = createApp(HelloComponent);
+// const appByeComponent = createApp(ByeComponent);
+const appSelectBatchLelong = createApp(SelectBatchLelong);
 
-appHelloComponent.mount("#appHelloComponent");
-appByeComponent.mount("#appByeComponent");
+// appHelloComponent.mount("#appHelloComponent");
+// appByeComponent.mount("#appByeComponent");
+appSelectBatchLelong.mount("#appSelectBatchLelong");
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index c405e659..c2cea1c1 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -144,6 +144,11 @@ Route::group(['middleware' => ['auth:sanctum']], function () {
 Route::get('/item','ApiController@biditem'); 
 Route::get('/jeniskarat','ApiController@karat');
 
+Route::get('/listLelong', [LelongMobileController::class, 'listLelong']);
+Route::get('/listCawangan', [LelongMobileController::class, 'listCawangan']);
+Route::get('/listLelongBid', [LelongMobileController::class, 'listLelongBid']);
+Route::get('/showPhotoMarhun', [LelongMobileController::class, 'showPhotoMarhun']);
+
 // Route::get('/item',['as'=>'lelong.biditem','uses'=>'LelongController@biditem']); 
 // Route::get('/lelongstop/{id}',['as'=>'lelong.stop','uses'=>'LelongController@stop']);