Rank change system UI first pass

ui/src/pages/RankChange.vue

@@ -2,58 +2,63 @@
 import { Check, Search } from "lucide-vue-next"
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { getRanks, Rank, submitRankChange } from "@/api/rank"
 import { onMounted, ref } from "vue";
-import { Member, getMembers } from "@/api/member";
+import { getAllLightMembers } from "@/api/member";
+import { MemberLight } from "@shared/types/member";
 import { cn } from "@/lib/utils"
 import { CalendarIcon } from "lucide-vue-next"
+import { batchPromotionSchema } from '@shared/schemas/promotionSchema'
+import PromotionForm from "@/components/promotions/promotionForm.vue";
 
-import {
-    DateFormatter,
+// import {
+//     DateFormatter,
 
-    DateValue,
+//     DateValue,
 
-    getLocalTimeZone,
-    today,
-} from "@internationalized/date"
+//     getLocalTimeZone,
+//     today,
+// } from "@internationalized/date"
 
-import Button from "@/components/ui/button/Button.vue";
-import Calendar from "@/components/ui/calendar/Calendar.vue";
+// import Button from "@/components/ui/button/Button.vue";
+// import Calendar from "@/components/ui/calendar/Calendar.vue";
 
-const members = ref<Member[]>([])
-const ranks = ref<Rank[]>([])
-const date = ref<DateValue>(today(getLocalTimeZone()))
+// const members = ref<MemberLight[]>([])
+// const ranks = ref<Rank[]>([])
+// const date = ref<DateValue>(today(getLocalTimeZone()))
 
 
-const currentMember = ref<Member | null>(null);
-const currentRank = ref<Rank | null>(null);
-onMounted(async () => {
-    members.value = await getMembers();
-    ranks.value = await getRanks();
-});
+// const currentMember = ref<MemberLight | null>(null);
+// const currentRank = ref<Rank | null>(null);
+// onMounted(async () => {
+//     members.value = await getAllLightMembers();
+//     ranks.value = await getRanks();
+// });
 
-const df = new DateFormatter("en-US", {
-    dateStyle: "long",
-})
+// const df = new DateFormatter("en-US", {
+//     dateStyle: "long",
+// })
 
-function submit() {
-    submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
-        .then(() => {
-            alert("Rank change submitted!");
-            currentMember.value = null;
-            currentRank.value = null;
-            date.value = today(getLocalTimeZone());
-        })
-        .catch((err) => {
-            console.error(err);
-            alert("Failed to submit rank change.");
-        });
-}
+// function submit() {
+//     submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
+//         .then(() => {
+//             alert("Rank change submitted!");
+//             currentMember.value = null;
+//             currentRank.value = null;
+//             date.value = today(getLocalTimeZone());
+//         })
+//         .catch((err) => {
+//             console.error(err);
+//             alert("Failed to submit rank change.");
+//         });
+// }
 
 </script>
 
 <template>
-    <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
+    <div class="mx-auto w-full max-w-7xl px-4">
+        <PromotionForm />
+    </div>
+    <!-- <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
         <Combobox v-model="currentMember">
             <ComboboxAnchor class="w-[300px]">
                 <ComboboxInput placeholder="Search members..." class="w-full pl-9"
@@ -71,12 +76,12 @@ function submit() {
                             </ComboboxItemIndicator>
                         </ComboboxItem>
                     </template>
-                </ComboboxGroup>
-            </ComboboxList>
-        </Combobox>
+</ComboboxGroup>
+</ComboboxList>
+</Combobox> -->
 
-        <!-- Rank Combobox -->
-        <Combobox v-model="currentRank">
+    <!-- Rank Combobox -->
+    <!-- <Combobox v-model="currentRank">
             <ComboboxAnchor class="w-[300px]">
                 <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
                     :display-value="(v) => v ? v.short_name : ''" />
@@ -111,5 +116,5 @@ function submit() {
             </PopoverContent>
         </Popover>
         <Button @click="submit">Submit</Button>
-    </div>
+    </div> -->
 </template>