From 33f8119ee367edb9361b1fc892a843dba6d6c85a Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Sat, 20 Sep 2025 11:53:06 -0400
Subject: [PATCH] Added vendor card.

---
 web-app/src/components/VendorCard.vue | 33 +++++++++++++++++++++++++
 web-app/src/pages/VendorsPage.vue     | 35 +++------------------------
 2 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 web-app/src/components/VendorCard.vue

diff --git a/web-app/src/components/VendorCard.vue b/web-app/src/components/VendorCard.vue
new file mode 100644
index 0000000..5fa5ac4
--- /dev/null
+++ b/web-app/src/components/VendorCard.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TransactionVendor } from '@/api/transaction';
+import AppButton from './common/AppButton.vue';
+
+defineProps<{ vendor: TransactionVendor }>()
+defineEmits<{ 'edit': void, 'delete': void }>()
+</script>
+<template>
+  <div class="vendor-card">
+    <div style="flex-shrink: 1;">
+      <div>
+        {{ vendor.name }}
+      </div>
+      <div v-if="vendor.description !== null" class="font-size-small text-muted">
+        {{ vendor.description }}
+      </div>
+    </div>
+    <div>
+      <AppButton icon="wrench" size="sm" @click="$emit('edit')"></AppButton>
+      <AppButton icon="trash" size="sm" @click="$emit('delete')"></AppButton>
+    </div>
+  </div>
+</template>
+<style lang="css">
+.vendor-card {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--bg);
+  border-radius: 0.5rem;
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+}
+</style>
diff --git a/web-app/src/pages/VendorsPage.vue b/web-app/src/pages/VendorsPage.vue
index d6e86a4..1c1495a 100644
--- a/web-app/src/pages/VendorsPage.vue
+++ b/web-app/src/pages/VendorsPage.vue
@@ -5,6 +5,7 @@ import AppButton from '@/components/common/AppButton.vue'
 import AppPage from '@/components/common/AppPage.vue'
 import ButtonBar from '@/components/common/ButtonBar.vue'
 import EditVendorModal from '@/components/EditVendorModal.vue'
+import VendorCard from '@/components/VendorCard.vue'
 import { showConfirm } from '@/util/alert'
 import { onMounted, ref, useTemplateRef, type Ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -55,39 +56,11 @@ async function deleteVendor(vendor: TransactionVendor) {
       Vendors are businesses and other entities with which you exchange money. Adding a vendor to
       Finnow allows you to track when you interact with that vendor on a transaction.
     </p>
-    <table class="app-table">
-      <tbody>
-        <tr
-          v-for="vendor in vendors"
-          :key="vendor.id"
-        >
-          <td>{{ vendor.name }}</td>
-          <td>{{ vendor.description }}</td>
-          <td style="min-width: 130px">
-            <AppButton
-              icon="wrench"
-              @click="editVendor(vendor)"
-            />
-            <AppButton
-              icon="trash"
-              @click="deleteVendor(vendor)"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <VendorCard v-for="v in vendors" :key="v.id" :vendor="v" @edit="editVendor(v)" @delete="deleteVendor(v)" />
     <ButtonBar>
-      <AppButton
-        button-type="button"
-        icon="plus"
-        @click="addVendor()"
-        >Add Vendor</AppButton
-      >
+      <AppButton button-type="button" icon="plus" @click="addVendor()">Add Vendor</AppButton>
     </ButtonBar>
 
-    <EditVendorModal
-      ref="editVendorModal"
-      :vendor="editedVendor"
-    />
+    <EditVendorModal ref="editVendorModal" :vendor="editedVendor" />
   </AppPage>
 </template>