Section component and dashboard layout (#7)

* set up template for dashboard

* remove top padding

src/components/bcros/Section.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :data-cy="'section_' + name">
+    <div :data-cy="'header_' + name" class="font-bold text-lg pb-2">
+      <slot name="header" />
+    </div>
+    <div :data-cy="'body_' + name" class="bg-white rounded">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: { type: String, required: true }
+})
+</script>

src/lang/en.json

@@ -74,6 +74,12 @@
         "selectLogin": "Select log in method",
         "switchAccount": "Switch Account"
       }
+    },
+    "section": {
+      "toDo": "To Do",
+      "filingHistory": "Recent Filing History",
+      "officeAddresses": "Office Addresses",
+      "currentDirectors": "Current Directors"
     }
   }
 }

src/pages/dashboard.vue

@@ -1,6 +1,33 @@
 <template>
-  <div class="mt-8 mb-16" data-cy="business-dashboard">
-    TBD
+  <div class="mt-8 mb-16 flex flex-wrap" data-cy="business-dashboard">
+    <div class="w-full md:w-9/12">
+      <BcrosSection name="todo">
+        <template #header>
+          {{ $t('title.section.toDo') }}
+        </template>
+        TBD
+      </BcrosSection>
+      <BcrosSection name="filingHistory" class="pt-5">
+        <template #header>
+          {{ $t('title.section.filingHistory') }}
+        </template>
+        TBD
+      </BcrosSection>
+    </div>
+    <div class="w-full pt-5 md:w-3/12 md:pl-5 md:pt-0 flex flex-col">
+      <BcrosSection name="address">
+        <template #header>
+          {{ $t('title.section.officeAddresses') }}
+        </template>
+        TBD
+      </BcrosSection>
+      <BcrosSection name="directors" class="pt-5">
+        <template #header>
+          {{ $t('title.section.currentDirectors') }}
+        </template>
+        TBD
+      </BcrosSection>
+    </div>
   </div>
 </template>
 

tests/pages/dashboard.spec.ts

@@ -1,13 +1,14 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
+import { mockedI18n } from '../test-utils/mockedi18n'
 
 import Dashboard from '../../src/pages/dashboard.vue'
 
 describe('dashboard page tests', () => {
   let wrapper: VueWrapper<any>
 
   beforeEach(async () => {
-    wrapper = mount(Dashboard)
+    wrapper = mount(Dashboard, { global: { plugins: [mockedI18n] } })
     // await api calls to resolve
     await flushPromises()
   })

tests/test-utils/mockedi18n.ts

@@ -0,0 +1,7 @@
+import { createI18n } from 'vue-i18n'
+import en from '~/lang/en.json'
+
+export const mockedI18n = createI18n({
+  locale: 'en',
+  messages: en
+})