added initial members list

ui/src/pages/memberList.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { computed, ref } from "vue";
+import { Member, getMembers } from "@/api/member";
+import { useRouter } from 'vue-router';
+import { Ellipsis } from "lucide-vue-next";
+import Input from "@/components/ui/input/Input.vue";
+
+const members = ref<Member[]>([]);
+const router = useRouter();
+
+const fetchMembers = async () => {
+    members.value = await getMembers();
+};
+
+function viewMember(id) {
+    router.push(`/member/${id}`)
+}
+
+fetchMembers();
+
+const searchVal = ref<string>("");
+const searchedMembers = computed(() => {
+    return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
+});
+
+</script>
+
+<template>
+    <!-- table menu -->
+    <div class="w-4xl mx-auto">
+        <div class="flex justify-between mb-4">
+            <Input v-model="searchVal" placeholder="search..."></Input>
+        </div>
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">
+                        Member
+                    </TableHead>
+                    <TableHead>Rank</TableHead>
+                    <TableHead>Status</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <TableRow v-for="member in searchedMembers" :key="member.member_id"
+                    :onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
+                    <TableCell class="font-medium">
+                        {{ member.member_name }}
+                    </TableCell>
+                    <TableCell>{{ member.rank }}</TableCell>
+                    <TableCell>{{ member.status }}</TableCell>
+                    <TableCell @click.stop="console.log('hi')" class="text-right">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger class="cursor-pointer">
+                                <Ellipsis></Ellipsis>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem>Change Rank</DropdownMenuItem>
+                                <DropdownMenuItem>Transfer</DropdownMenuItem>
+                                <DropdownMenuItem>LOA</DropdownMenuItem>
+                                <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </div>
+</template>