first pass of promotions list view

ui/src/api/rank.ts

@@ -1,4 +1,4 @@
-import { BatchPromotion } from '@shared/schemas/promotionSchema';
+import { BatchPromotion, BatchPromotionMember } from '@shared/schemas/promotionSchema';
 import { PagedData } from '@shared/types/pagination';
 import { PromotionSummary, Rank } from '@shared/types/rank'
 
@@ -59,3 +59,15 @@ export async function getPromoHistory(page?: number, pageSize?: number): Promise
         }
     });
 }
+
+export async function getPromotionsOnDay(day: Date): Promise<BatchPromotionMember[]> {
+    const res = await fetch(`${addr}/memberRanks/${day}`, {
+        credentials: 'include',
+    })
+
+    if (res.ok) {
+        return await res.json();
+    } else {
+        throw new Error("Failed to submit rank change: Server error");
+    }
+}

ui/src/components/promotions/promotionList.vue

@@ -104,7 +104,7 @@ function formatDate(date: Date): string {
                             :class="{ 'bg-muted/50 border-t-0': hoverID === index }">
                             <TableCell :colspan="8" class="p-0">
                                 <div class="w-full p-2 mb-6 space-y-3">
-                                    <PromotionListDay :date="batch.entry_day"></PromotionListDay>
+                                    <PromotionListDay :date="new Date(batch.entry_day)"></PromotionListDay>
                                 </div>
                             </TableCell>
                         </TableRow>

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>