Add v-viewer, fix list lelong ui, use v-viewer for every photo display

src/components/pay/ReceiptImage.vue

@@ -2,9 +2,9 @@
   <div v-if="isLoading" class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="100" preview>
-    <template #indicator> Lihat Gambar </template>
-  </Image>
+  <div v-else class="images" v-viewer>
+    <img :src="dataUrl" class="photo-style">
+  </div>
 </template>
 
 <script>
@@ -53,3 +53,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.photo-style {
+  width: 100px;
+  /* border-radius: 8px; */
+  cursor: pointer;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+</style>