platform dashboard (#202)

* Interim dashboard draft commit
* updated redirect
* removed commented out styles
Signed-off-by: Kial Jinnah <[email protected]>

strr-platform-web/app/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   ui: {
+    strategy: 'merge',
     button: {
       color: {
         red: {

strr-platform-web/app/components/connect/DashboardSection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{ title: string, loading: boolean }>()
+</script>
+<template>
+  <div class="space-y-2">
+    <slot name="header">
+      <ConnectTypographyH2 :text="title" />
+    </slot>
+    <div class="rounded bg-white">
+      <slot v-if="loading" name="loading">
+        <div class="min-w-[300px] animate-pulse space-y-2 p-5">
+          <div class="h-5 w-full rounded bg-gray-200" />
+          <div class="h-5 w-full rounded bg-gray-200" />
+          <div class="h-5 w-full rounded bg-gray-200" />
+        </div>
+      </slot>
+      <slot v-else name="default" />
+    </div>
+  </div>
+</template>

strr-platform-web/app/components/connect/DetailsHeader.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const {
+  loading,
+  title,
+  subtitles,
+  details,
+  sideDetails,
+  bottomButtons
+} = storeToRefs(useConnectDetailsHeaderStore())
+</script>
+
+<template>
+  <div class="bg-white py-5" data-testid="connect-details-header">
+    <div class="app-inner-container">
+      <div v-if="loading" class="flex animate-pulse flex-col gap-2 sm:flex-row">
+        <div class="grow space-y-2">
+          <div class="h-9 w-[400px] rounded bg-gray-200" />
+          <div class="h-5 w-[250px] rounded bg-gray-200" />
+          <div class="h-5 w-[200px] rounded bg-gray-200" />
+          <div class="h-5 w-[150px] rounded bg-gray-200" />
+        </div>
+        <div class="space-y-2">
+          <div class="h-5 w-[300px] rounded bg-gray-200" />
+          <div class="h-5 w-[300px] rounded bg-gray-200" />
+          <div class="h-5 w-[300px] rounded bg-gray-200" />
+          <div class="h-5 w-[300px] rounded bg-gray-200" />
+        </div>
+      </div>
+      <div v-else class="flex flex-col gap-2 sm:flex-row">
+        <div class="grow space-y-4">
+          <div class="space-y-2">
+            <ConnectTypographyH1 v-if="title" :text="title" />
+            <div v-if="subtitles.length" class="flex divide-x *:border-gray-500 *:px-2 first:*:pl-0">
+              <p v-for="subtitle in subtitles" :key="subtitle" class="text-sm">
+                {{ subtitle }}
+              </p>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <slot name="details">
+              <p v-if="details" class="text-sm">
+                {{ details }}
+              </p>
+            </slot>
+            <slot name="buttons">
+              <div v-if="bottomButtons.length" class="flex flex-wrap gap-2">
+                <UButton
+                  v-for="btn in bottomButtons"
+                  :key="btn.label"
+                  :label="btn.label"
+                  :icon="btn.icon"
+                  class="pl-0"
+                  color="primary"
+                  variant="link"
+                  @click="btn.action()"
+                />
+              </div>
+            </slot>
+          </div>
+        </div>
+        <dl class="mr-14 space-y-1 text-sm">
+          <template v-for="detail in sideDetails" :key="detail.label">
+            <div>
+              <UTooltip
+                :close-delay="100"
+                :popper="{ placement: 'right', arrow: false, offsetDistance: 0 }"
+                :ui="{ background: 'bg-transparent', container: 'opacity-100', shadow: 'shadow-none' }"
+              >
+                <div class="flex flex-row flex-wrap gap-2">
+                  <dt class="font-bold" :class="[detail.edit?.isEditing && 'mt-1']">
+                    {{ detail.label }}:
+                  </dt>
+                  <dd v-if="!detail.edit?.isEditing">
+                    {{ detail.value }}
+                  </dd>
+                  <UFormGroup
+                    v-else
+                    :name="detail.label"
+                    :error="detail.edit?.validation?.error || undefined"
+                    size="xs"
+                  >
+                    <UInput
+                      v-model="detail.value"
+                      size="2xs"
+                      @change="detail.edit.validation
+                        ? detail.edit.validation.error = detail.edit?.validation?.validate($event)
+                        : console.info('no validation')"
+                    />
+                  </UFormGroup>
+                </div>
+                <template #text>
+                  <UButton
+                    v-if="detail.edit"
+                    icon="i-mdi-edit"
+                    :label="!detail.edit.isEditing ? $t('word.Edit') : $t('word.Save')"
+                    :padded="false"
+                    variant="link"
+                    @click="detail.edit.isEditing = !detail.edit.isEditing"
+                  />
+                </template>
+              </UTooltip>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>

strr-platform-web/app/components/connect/accordion/Index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{ items: ConnectAccordionItem[], multiple?: boolean }>()
+</script>
+
+<template>
+  <UAccordion :items="items" :multiple="multiple">
+    <template #default="{ item, open }">
+      <UButton
+        ref="accordionButton"
+        variant="ghost"
+        class="p-4 text-sm font-bold text-gray-900 hover:bg-transparent"
+        :class="item.class || ''"
+      >
+        <template #leading>
+          <div v-if="item.showAvatar" class="flex size-6 items-center justify-center rounded-full">
+            <UAvatar size="xs" class="bg-blue-500" :ui="{text: 'text-white'}" :text="item.label.substring(0,1)" />
+          </div>
+        </template>
+        <span class="text-left" :class="item.showAvatar ? 'pl-2' : ''">{{ item.label }}</span>
+        <template #trailing>
+          <UIcon
+            name="i-heroicons-chevron-down-20-solid"
+            class="ms-auto size-5 text-gray-700 transition-transform duration-200"
+            :class="[open && '-rotate-180', item.icon]"
+          />
+        </template>
+      </UButton>
+    </template>
+    <template #item="{ item }">
+      <ConnectAccordionItem class="px-4" :class="item.class" :item="item" :pad-left="item.showAvatar" />
+    </template>
+  </UAccordion>
+</template>

strr-platform-web/app/components/connect/accordion/Item.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ item: ConnectAccordionItem, padLeft?: boolean }>()
+</script>
+<template>
+  <div class="space-y-3">
+    <div v-for="info, i in item.values" :key="`connect-accordian-info-${i}`">
+      <div class="flex gap-2" :class="[padLeft && 'pl-10', info.class || '']">
+        <UIcon v-if="info.icon" :name="info.icon" class="text-2xl" :class="info.iconClass ?? ''" />
+        <div class="space-y-1">
+          <p v-if="info.label" class="text-gray-950">
+            {{ info.label }}
+          </p>
+          <p v-if="info.text" class="break-all text-sm">
+            {{ info.text }}
+          </p>
+          <ConnectFormAddressDisplay v-if="info.address" :address="info.address" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

strr-platform-web/app/components/connect/fee/Widget.vue

@@ -11,7 +11,7 @@ const {
   totalProcessingFees,
   totalGst,
   totalPst
-} = storeToRefs(useConnectFee())
+} = storeToRefs(useConnectFeeStore())
 
 const isPlaceholderActive = ref(false)
 

strr-platform-web/app/components/connect/date/Input.vue → strr-platform-web/app/components/connect/form/date/Input.vue

@@ -89,7 +89,7 @@ const handleManualDateEntry = (input: string) => {
       </template>
     </UInput>
 
-    <ConnectDatePicker
+    <ConnectFormDatePicker
       v-if="showDatePicker"
       ref="dateSelectPickerRef"
       class="absolute z-20"

strr-platform-web/app/components/connect/field/Group.vue → strr-platform-web/app/components/connect/form/field/Group.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 
 <template>
   <UFormGroup :label="label" :name="name" :help="help">
-    <ConnectField
+    <ConnectFormField
       :id="id"
       v-model="model"
       :placeholder="placeholder"

strr-platform-web/app/components/connect/phoneNumber/Index.vue → strr-platform-web/app/components/connect/form/phoneNumber/Index.vue

@@ -20,7 +20,7 @@ const inputMask = computed(() => countryCode.value === '1' ? northAmericaMask :
 <template>
   <div class="flex w-full max-w-bcGovInput flex-col gap-3 sm:flex-row">
     <UFormGroup :name="name + '.countryCode'" class="grow sm:max-w-[130px]">
-      <ConnectPhoneNumberCountryCode
+      <ConnectFormPhoneNumberCountryCode
         v-model:country-calling-code="countryCode"
         v-model:country-iso2="countryIso2"
         :aria-label="$t('label.phone.countryCode')"

strr-platform-web/app/components/connect/typography/H1.vue

@@ -2,7 +2,7 @@
 defineProps<{ text: string }>()
 </script>
 <template>
-  <h1 class="text-[32px] font-bold" data-testid="h1">
+  <h1 class="text-xl font-bold" data-testid="h1">
     {{ text }}
   </h1>
 </template>

strr-platform-web/app/components/connect/typography/H2.vue

@@ -2,7 +2,7 @@
 defineProps<{ text: string }>()
 </script>
 <template>
-  <h2 :class="`font-bold text-[24px]`" data-testid="h2">
+  <h2 :class="`font-bold text-lg`" data-testid="h2">
     {{ text }}
   </h2>
 </template>

strr-platform-web/app/components/form/common/Contact.vue

@@ -27,21 +27,21 @@ defineProps<{
 
 <template>
   <div class="space-y-10 py-10">
-    <ConnectSection v-if="prepopulateName" :title="tPlat('section.subTitle.yourName')">
+    <ConnectFormSection v-if="prepopulateName" :title="tPlat('section.subTitle.yourName')">
       <p class="font-bold">
         <span v-if="fullName">{{ fullName }}</span>
         <span v-else>{{ firstName }} {{ lastName }}</span>
       </p>
       <p v-if="prepopulateType" class="text-sm">
         {{ tPlat(`text.yourName${prepopulateType}`) }}
       </p>
-    </ConnectSection>
-    <ConnectSection v-else :title="tPlat('section.subTitle.contactName')" :error="errorName">
+    </ConnectFormSection>
+    <ConnectFormSection v-else :title="tPlat('section.subTitle.contactName')" :error="errorName">
       <div class="space-y-5">
         <p v-if="sectionInfo" class="mt-1 text-sm">
           {{ sectionInfo }}
         </p>
-        <ConnectFieldGroup
+        <ConnectFormFieldGroup
           v-if="fullName !== undefined"
           :id="idPrefix + '-full-name'"
           v-model="fullName"
@@ -50,7 +50,7 @@ defineProps<{
           :placeholder="t('label.fullName')"
         />
         <div v-else class="flex max-w-bcGovInput flex-col gap-3 sm:flex-row">
-          <ConnectFieldGroup
+          <ConnectFormFieldGroup
             v-if="firstName !== undefined"
             :id="idPrefix + '-first-name'"
             v-model="firstName"
@@ -59,7 +59,7 @@ defineProps<{
             name="firstName"
             :placeholder="t('label.firstName')"
           />
-          <ConnectFieldGroup
+          <ConnectFormFieldGroup
             v-if="middleName !== undefined"
             :id="idPrefix + '-middle-name'"
             v-model="middleName"
@@ -68,7 +68,7 @@ defineProps<{
             name="middleName"
             :placeholder="t('label.middleNameOpt')"
           />
-          <ConnectFieldGroup
+          <ConnectFormFieldGroup
             v-if="lastName !== undefined"
             :id="idPrefix + '-last-name'"
             v-model="lastName"
@@ -78,7 +78,7 @@ defineProps<{
             :placeholder="t('label.lastName')"
           />
         </div>
-        <ConnectFieldGroup
+        <ConnectFormFieldGroup
           v-if="preferredName !== undefined"
           :id="idPrefix + '-preferred-name'"
           v-model="preferredName"
@@ -88,11 +88,11 @@ defineProps<{
           data-testid="preferredName"
         />
       </div>
-    </ConnectSection>
+    </ConnectFormSection>
     <div v-if="nameDivider" class="h-px w-full border-b border-gray-100" />
-    <ConnectSection :title="tPlat('section.subTitle.contactDetails')" :error="errorDetails">
+    <ConnectFormSection :title="tPlat('section.subTitle.contactDetails')" :error="errorDetails">
       <div class="space-y-5">
-        <ConnectFieldGroup
+        <ConnectFormFieldGroup
           v-if="position !== undefined"
           :id="idPrefix + '-position'"
           v-model="position"
@@ -101,22 +101,22 @@ defineProps<{
           name="position"
           :placeholder="t('label.positionTitle')"
         />
-        <ConnectPhoneNumber
+        <ConnectFormPhoneNumber
           v-if="phone"
           v-model:country-code="phone.countryCode"
           v-model:country-iso2="phone.countryIso2"
           v-model:extension="phone.extension"
           v-model:number="phone.number"
         />
-        <ConnectFieldGroup
+        <ConnectFormFieldGroup
           v-if="faxNumber !== undefined"
           :id="idPrefix + '-fax-number'"
           v-model="faxNumber"
           :aria-label="t('createAccount.contactForm.faxNumber')"
           name="faxNumber"
           :placeholder="t('createAccount.contactForm.faxNumber')"
         />
-        <ConnectFieldGroup
+        <ConnectFormFieldGroup
           v-if="emailAddress !== undefined"
           :id="idPrefix + '-party-email'"
           v-model="emailAddress"
@@ -126,6 +126,6 @@ defineProps<{
         />
         <EmailAlert v-if="emailWarning" />
       </div>
-    </ConnectSection>
+    </ConnectFormSection>
   </div>
 </template>