fix: added activities component to show activities

frontend/src/components/Activities.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="p-6">
+    <div v-for="activity in activities">
+      <div>{{ activity.value }}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  activities: {
+    type: Array,
+    default: [],
+  },
+})
+</script>

frontend/src/pages/Lead.vue

@@ -54,7 +54,7 @@
       <Button icon="more-horizontal" />
     </template>
   </LayoutHeader>
-  <TabGroup v-if="lead.doc" @change="moveIndicator">
+  <TabGroup v-if="lead.doc" @change="onTabChange">
     <TabList class="flex items-center gap-6 border-b pl-5 relative">
       <Tab
         ref="tabRef"
@@ -78,13 +78,8 @@
       />
     </TabList>
     <TabPanels class="flex h-full bg-gray-50">
-      <TabPanel
+      <TabPanel class="flex-1" v-for="tab in tabs" :key="tab.label">
-        as="template"
+        <Activities :activities="tab.content" />
-        class="flex-1"
-        v-for="tab in tabs"
-        :key="tab.label"
-      >
-        <div class="p-6">{{ tab.label }}</div>
       </TabPanel>
       <div class="flex flex-col gap-6.5 border-l px-6 py-3 w-[390px] bg-white">
         <div
@@ -137,6 +132,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Toggler from '@/components/Toggler.vue'
+import Activities from '@/components/Activities.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import {
   createDocumentResource,
@@ -162,18 +158,49 @@ const lead = createDocumentResource({
   auto: true,
 })
 
+const activities = [
+  {
+    type: 'change',
+    datetime: '2021-08-20 12:00:00',
+    value: 'Status changed from New to Contact made',
+  },
+  {
+    type: 'change',
+    datetime: '2021-08-20 12:00:00',
+    value: 'Status changed from Proposal made to New',
+  },
+  {
+    type: 'email',
+    datetime: '2021-08-20 12:00:00',
+    value: 'Email sent to Sharon',
+  },
+  {
+    type: 'change',
+    datetime: '2021-08-20 12:00:00',
+    value: 'Status changed from Contact made to Proposal made',
+  },
+  {
+    type: 'call',
+    datetime: '2021-08-20 12:00:00',
+    value: 'Call made to Sharon',
+  },
+]
+
 const tabs = [
   {
     label: 'Activity',
     icon: ActivityIcon,
+    content: activities,
   },
   {
     label: 'Emails',
     icon: EmailIcon,
+    content: activities.filter((activity) => activity.type === 'email'),
   },
   {
     label: 'Calls',
     icon: PhoneIcon,
+    content: activities.filter((activity) => activity.type === 'call'),
   },
   {
     label: 'Tasks',
@@ -194,7 +221,7 @@ const indicatorLeftValue = useTransition(indicatorLeft, {
   ease: TransitionPresets.easeOutCubic,
 })
 
-const moveIndicator = (index) => {
+function onTabChange(index) {
   const selectedTab = tabRef.value[index].el
   indicator.value.style.width = `${selectedTab.offsetWidth}px`
   indicatorLeft.value = selectedTab.offsetLeft