- prettier formatting

- npm updates
- new SearchMap.vue component

resources/js/Components/CardBoxTransaction.vue

@@ -1,96 +1,83 @@
 <script setup>
-import { computed } from 'vue'
-import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js'
-import CardBox from '@/Components/CardBox.vue'
-import BaseLevel from '@/Components/BaseLevel.vue'
-import PillTag from '@/Components/PillTag.vue'
-import IconRounded from '@/Components/IconRounded.vue'
+import { computed } from 'vue';
+import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js';
+import CardBox from '@/Components/CardBox.vue';
+import BaseLevel from '@/Components/BaseLevel.vue';
+import PillTag from '@/Components/PillTag.vue';
+import IconRounded from '@/Components/IconRounded.vue';
 
 const props = defineProps({
-  amount: {
-    type: Number,
-    required: true
-  },
-  date: {
-    type: String,
-    required: true
-  },
-  business: {
-    type: String,
-    required: true
-  },
-  type: {
-    type: String,
-    required: true
-  },
-  name: {
-    type: String,
-    required: true
-  },
-  account: {
-    type: String,
-    required: true
-  }
-})
+    amount: {
+        type: Number,
+        required: true,
+    },
+    date: {
+        type: String,
+        required: true,
+    },
+    business: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        required: true,
+    },
+    name: {
+        type: String,
+        required: true,
+    },
+    account: {
+        type: String,
+        required: true,
+    },
+});
 
 const icon = computed(() => {
-  if (props.type === 'withdrawal') {
-    return {
-      icon: mdiCashMinus,
-      type: 'danger'
+    if (props.type === 'withdrawal') {
+        return {
+            icon: mdiCashMinus,
+            type: 'danger',
+        };
+    } else if (props.type === 'deposit') {
+        return {
+            icon: mdiCashPlus,
+            type: 'success',
+        };
+    } else if (props.type === 'invoice') {
+        return {
+            icon: mdiReceipt,
+            type: 'warning',
+        };
     }
-  } else if (props.type === 'deposit') {
-    return {
-      icon: mdiCashPlus,
-      type: 'success'
-    }
-  } else if (props.type === 'invoice') {
-    return {
-      icon: mdiReceipt,
-      type: 'warning'
-    }
-  }
 
-  return {
-    icon: mdiCreditCardOutline,
-    type: 'info'
-  }
-})
+    return {
+        icon: mdiCreditCardOutline,
+        type: 'info',
+    };
+});
 </script>
 
 <template>
-  <CardBox
-    class="mb-6 last:mb-0"
-    hoverable
-  >
-    <BaseLevel>
-      <BaseLevel type="justify-start">
-        <IconRounded
-          :icon="icon.icon"
-          :type="icon.type"
-          class="md:mr-6"
-        />
-        <div class="text-center space-y-1 md:text-left md:mr-6">
-          <h4 class="text-xl">
-            ${{ amount }}
-          </h4>
-          <p class="text-gray-500 dark:text-slate-400">
-            <b>{{ date }}</b> via {{ business }}
-          </p>
-        </div>
-      </BaseLevel>
-      <div class="text-center md:text-right space-y-2">
-        <p class="text-sm text-gray-500">
-          {{ name }}
-        </p>
-        <div>
-          <PillTag
-            :type="icon.type"
-            :text="type"
-            small
-          />
-        </div>
-      </div>
-    </BaseLevel>
-  </CardBox>
+    <CardBox class="mb-6 last:mb-0" hoverable>
+        <BaseLevel>
+            <BaseLevel type="justify-start">
+                <IconRounded :icon="icon.icon" :type="icon.type" class="md:mr-6" />
+                <div class="text-center space-y-1 md:text-left md:mr-6">
+                    <h4 class="text-xl">${{ amount }}</h4>
+                    <p class="text-gray-500 dark:text-slate-400">
+                        <b>{{ date }}</b> via {{ business }}
+                    </p>
+                </div>
+            </BaseLevel>
+            <div class="text-center md:text-right space-y-2">
+                <p class="text-sm text-gray-500">
+                    {{ name }}
+                </p>
+                <div>
+                    <PillTag :type="icon.type" :text="type" small />
+                </div>
+            </div>
+        </BaseLevel>
+    </CardBox>
 </template>