first pass of promotions list view

ui/src/components/promotions/promotionListDay.vue

@@ -1,17 +1,52 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { getPromotionsOnDay } from '@/api/rank';
+import { BatchPromotionMember } from '@shared/schemas/promotionSchema';
+import { onMounted, ref } from 'vue';
+import MemberCard from '../members/MemberCard.vue';
+import Spinner from '../ui/spinner/Spinner.vue';
 
 
-defineProps<{
+const props = defineProps<{
     date: Date
 }>()
 
-onMounted(async () => {
+const promoList = ref<BatchPromotionMember[]>();
+const loading = ref(true);
 
+onMounted(async () => {
+    promoList.value = await getPromotionsOnDay(props.date);
+    loading.value = false;
 })
 
 </script>
 
 <template>
-    Hello
+    <div class="overflow-x-auto">
+        <table v-if="!loading" class="min-w-full text-left border-collapse">
+            <thead>
+                <tr class="border-b-2 border-gray-200 bg-white/10">
+                    <th class="px-4 py-3 text-sm font-semibold">Member</th>
+                    <th class="px-4 py-3 text-sm font-semibold">Rank</th>
+                    <th class="px-4 py-3 text-sm font-semibold text-right">Approved By</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <tr v-for="p in promoList" :key="p.member_id" class="border-b transition-colors">
+                    <td class="px-4 py-4">
+                        <MemberCard :member-id="p.member_id" />
+                    </td>
+                    <td class="px-4 py-4 text-sm">
+                        {{ p.rank_id }}
+                    </td>
+                    <td class="px-4 py-4 text-sm text-right">
+                        guy1
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <div v-else class="overflow-hidden mx-auto flex w-full">
+            <Spinner class="size-7"></Spinner>
+        </div>
+    </div>
 </template>