more work on server stats

frontend/src/vues/ServerStats.vue

@@ -1,5 +1,63 @@
-<template></template>
+<template>
+  <div class="d-flex flex-row">
+    <v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
+    </v-select>
+    <v-select class="graph-selector" v-model="graphSelect" variant="underlined" :items="graphItems">
+    </v-select>
+  </div>
+  <div class="d-flex flex-row justify-space-around">
+    <div class="d-flex flex-column">
+      <v-label>Completed Games</v-label>
+      <v-label>0</v-label>
+    </div>
+    <div class="d-flex flex-column">
+      <v-label>Postponed Games</v-label>
+      <v-label>0</v-label>
+    </div>
+    <div class="d-flex flex-column">
+      <v-label>Average EB</v-label>
+      <v-label>0</v-label>
+    </div>
+    <div class="d-flex flex-column">
+      <v-label>Average IP</v-label>
+      <v-label>0</v-label>
+    </div>
+  </div>
+  <div class="d-flex flex-column">
+  	<v-table>
+  		<thead>
+  			<tr>
+  				<th class="text-left">Role</th>
+  			</tr>
+  		</thead>
+  		<tbody>
+  			<tr>
+  				<td>Solo</td>
+  			</tr>
+  		</tbody>
+  	</v-table>
+  </div>
+</template>
 
-<style></style>
+<style>
+.date-selector {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+.graph-selector {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+</style>
 
-<script></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dateSelect = ref('All Time')
+
+const dateItems = ['All Time', 'May 2024']
+
+const graphSelect = ref('All Time')
+
+const graphItems = ['All Time', 'May 2024']
+</script>