first commit

resources/js/views/pages/cards/card-advance/CardAdvanceTeamMembers.vue

@@ -0,0 +1,215 @@
+<script setup>
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+
+const teamMembers = [
+  {
+    profilePic: avatar1,
+    name: 'Dean Hogan',
+    designation: 'IOS developer',
+    project: 'Zipper',
+    projectIndication: 'primary',
+    task: '87/135',
+    progress: 65,
+  },
+  {
+    profilePic: avatar8,
+    name: 'Hilda Rice',
+    designation: 'Laravel developer',
+    project: 'Brandi',
+    projectIndication: 'success',
+    task: '340/420',
+    progress: 75,
+  },
+  {
+    profilePic: avatar5,
+    name: 'Andrew O\'Brien',
+    designation: 'React developer',
+    project: 'Payers',
+    projectIndication: 'warning',
+    task: '50/82',
+    progress: 55,
+  },
+  {
+    profilePic: avatar2,
+    name: 'Eleanor Price',
+    designation: 'Angular developer',
+    project: 'Citibank',
+    projectIndication: 'error',
+    task: '98/260',
+    progress: 60,
+  },
+  {
+    profilePic: avatar3,
+    name: 'Carl Oliver',
+    designation: 'VueJs developer',
+    project: 'Aviator',
+    projectIndication: 'secondary',
+    task: '12/25',
+    progress: 60,
+  },
+]
+</script>
+
+<template>
+  <VCard>
+    <!-- SECTION Card Header and Menu -->
+    <VCardItem>
+      <!-- 👉 Title -->
+      <VCardTitle>Team Members</VCardTitle>
+
+      <!-- 👉 menu -->
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn />
+        </div>
+      </template>
+    </VCardItem>
+    <!-- !SECTION -->
+
+    <!-- TODO try to remove table border -->
+    <VTable class="text-no-wrap team-members-table">
+      <thead>
+        <tr>
+          <th scope="col">
+            Name
+          </th>
+          <th scope="col">
+            Project
+          </th>
+          <th scope="col">
+            Tasks
+          </th>
+          <th scope="col">
+            Progress
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="member in teamMembers"
+          :key="member.name"
+        >
+          <td>
+            <div class="d-flex align-center">
+              <div class="me-3">
+                <VAvatar
+                  size="38"
+                  :image="member.profilePic"
+                />
+              </div>
+              <div>
+                <h6 class="text-h6">
+                  {{ member.name }}
+                </h6>
+                <div class="text-body-1">
+                  {{ member.designation }}
+                </div>
+              </div>
+            </div>
+          </td>
+
+          <td>
+            <VChip
+              :color="member.projectIndication"
+              size="small"
+            >
+              {{ member.project }}
+            </VChip>
+          </td>
+
+          <td>
+            <div class="d-flex font-weight-medium">
+              <div class="text-primary">
+                {{ member.task.split('/')[0] }}
+              </div>
+              <div class="text-primary">
+                /
+              </div>
+              <h6 class="text-h6 text-medium-emphasis">
+                {{ member.task.split('/')[1] }}
+              </h6>
+            </div>
+          </td>
+
+          <td class="text-center">
+            <VProgressCircular
+              :color="member.projectIndication"
+              :model-value="member.progress"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VCard>
+</template>
+
+<style lang="scss">
+.team-members-table {
+  &.v-table{
+    --v-table-header-height: 2rem;
+
+    .v-table__wrapper{
+      table{
+        thead{
+          tr{
+            th{
+              background: none !important;
+              border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+              margin-block-end: 0.75rem !important;
+
+              &:first-child{
+                padding-inline-start: 1.25rem;
+              }
+
+              &:last-child{
+                padding-inline-end: 1.25rem;
+              }
+            }
+          }
+        }
+
+        tbody{
+          tr{
+            td{
+              padding-block: 0.5rem;
+              padding-inline: 1rem;
+
+              &:first-child{
+                padding-inline-start: 1.25rem;
+              }
+
+              &:last-child{
+                padding-inline-end: 1.25rem;
+              }
+            }
+
+            &:not(:last-child){
+              td{
+                border-block-end: none ;
+              }
+            }
+
+            &:last-child{
+              td{
+                padding-block-end: 1.25rem;
+              }
+            }
+
+            &:first-child{
+              td{
+                padding-block-start: 1.25rem;
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+}
+</style>