Basic calendar view

src/pages/TaskPage.vue

@@ -1,8 +1,26 @@
 <template>
+  <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <!-- content -->
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Launch Prep</div>
+        <div class="text-subtitle2">Prepare for Launch</div>
+        <q-chip size="md" color="green" text-color="white" icon="alarm">
+          APR 1,2024
+        </q-chip>
+        <q-chip size="md" icon="build"> 24 tasks </q-chip>
+      </q-card-section>
+    </q-card>
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">General Maintenance</div>
+        <div class="text-subtitle2">Day to day maintenance and upkeep</div>
+        <q-chip size="md" icon="build"> 4 tasks </q-chip>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>