ui fixes, calendar

src/views/HomeView.vue

@@ -126,7 +126,7 @@ function onClickCard(status?: string) {
 
 <template>
   <div>
-    <div v-if="session.data" class="d-flex flex-column ga-4">
+    <div v-if="session.data" class="d-flex flex-column ga-2">
       <project-menu />
 
       <div class="dashboard_grid">
@@ -142,6 +142,23 @@ function onClickCard(status?: string) {
 
       <v-divider />
 
+      <v-row density="compact">
+        <v-col cols="12" md="6">
+          <v-card border>
+            <v-card-title>Issues by status</v-card-title>
+            <v-divider />
+            <v-card-text>
+              <issue-status-chart :stats="stats" @select="onClickCard" />
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="6">
+          <!--          <v-card border>-->
+          <!--            <v-card-text>text</v-card-text>-->
+          <!--          </v-card>-->
+        </v-col>
+      </v-row>
+
       <v-row density="compact">
         <v-col cols="12" md="8">
           <v-card border>
@@ -207,23 +224,6 @@ function onClickCard(status?: string) {
           </v-card>
         </v-col>
       </v-row>
-
-      <v-row density="compact">
-        <v-col cols="12" md="6">
-          <v-card border>
-            <v-card-title>Issues by status</v-card-title>
-            <v-divider />
-            <v-card-text>
-              <issue-status-chart :stats="stats" @select="onClickCard" />
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col cols="12" md="6">
-          <!--          <v-card border>-->
-          <!--            <v-card-text>text</v-card-text>-->
-          <!--          </v-card>-->
-        </v-col>
-      </v-row>
     </div>
   </div>
 </template>

src/views/calendar/CalendarView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const type = ref('month')
+const types = ['month', 'week', 'day', '4day']
+const mode = ref('stack')
+const modes = ['stack', 'column']
+const weekday = ref([0, 1, 2, 3, 4, 5, 6])
+const weekdays = [
+  { title: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
+  { title: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
+  { title: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
+  { title: 'Mon, Wed, Fri', value: [1, 3, 5] },
+]
+const value = ref('')
+const events = ref([])
+const colors = ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey-darken-1']
+const names = ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party']
+
+function rnd(a: number, b: number) {
+  return Math.floor((b - a + 1) * Math.random()) + a
+}
+</script>
+
+<template>
+  <div>
+    <v-sheet height="600">
+      <v-calendar></v-calendar>
+    </v-sheet>
+  </div>
+</template>
+<style scoped lang="scss"></style>