added placeholder manage transfers page

ui/src/pages/ManageTransfers.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue';
+import Button from '@/components/ui/button/Button.vue';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+
+import { onMounted, ref } from 'vue';
+import { getRanks } from '@/api/rank';
+
+const setRankDialog = ref(false);
+const rankOnTransfer = ref();
+const ranks = ref(null);
+
+onMounted(async () => {
+    ranks.value = await getRanks();
+});
+</script>
+<template>
+    <Dialog :open="setRankDialog" @update:open="setRankDialog = false">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Set Rank on Transfer</DialogTitle>
+                <DialogDescription>
+                    Assign MEMBER a rank on transfer completion.
+                </DialogDescription>
+            </DialogHeader>
+            <!-- Rank Combobox -->
+            <Combobox v-model="rankOnTransfer">
+                <ComboboxAnchor class="w-[300px]">
+                    <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
+                        :display-value="(v) => v ? v.short_name : ''" />
+                </ComboboxAnchor>
+                <ComboboxList class="w-[300px]">
+                    <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                    <ComboboxGroup>
+                        <template v-for="rank in ranks" :key="rank.id">
+                            <ComboboxItem :value="rank"
+                                class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                                {{ rank.short_name }}
+                                <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                    <Check class="h-4 w-4" />
+                                </ComboboxItemIndicator>
+                            </ComboboxItem>
+                        </template>
+                    </ComboboxGroup>
+                </ComboboxList>
+            </Combobox>
+            <DialogFooter>
+                <Button variant="outline" @click="setRankDialog = false">Cancel</Button>
+                <Button>Confirm</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+
+    <div class="max-w-5xl mx-auto">
+        Active
+        <div>
+            <Card>
+                <CardHeader>
+                    <CardTitle class="flex justify-between">
+                        <div class="flex items-center gap-3">
+                            <Badge class="">Pending</Badge>
+                            <p>Name</p>
+                        </div>
+                        <div class="text-muted-foreground font-normal flex gap-2">
+                            Transfer To: <p class="text-white">Company</p>
+                        </div>
+                    </CardTitle>
+                    <CardDescription class="flex gap-2">Approved by: <p class="text-white">Someone, Someone?</p>
+                    </CardDescription>
+                    <CardDescription class="flex gap-2">Rank on transfer: <p class="text-white">Rank</p>
+                    </CardDescription>
+                </CardHeader>
+                <!-- <CardContent>
+                    Card Content
+                </CardContent> -->
+                <CardFooter class="flex justify-between">
+                    <p class="text-muted-foreground">Request Date:</p>
+                    <div class="flex gap-4">
+                        <Button variant="success">Approve</Button>
+                        <Button variant="destructive">Deny</Button>
+                    </div>
+                </CardFooter>
+            </Card>
+        </div>
+        <div>
+            Inactive
+        </div>
+    </div>
+</template>