From a168e82277b288f0c34f9b2504be7c871606f116 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 13 Jul 2023 22:28:53 -0400
Subject: [PATCH 1/4] Connect rawUserAnalytics to the front-end table component

---
 apps/web/src/composables/users.ts             |   1 +
 .../web/src/mockData/mock_transaction_data.ts |   8 +-
 .../overview/components/BreakdownTable.vue    | 138 +++++++++++-------
 3 files changed, 93 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/composables/users.ts b/apps/web/src/composables/users.ts
index dfa0e8956..07536cc02 100644
--- a/apps/web/src/composables/users.ts
+++ b/apps/web/src/composables/users.ts
@@ -362,6 +362,7 @@ export default function useUsers() {
         user: readonly(user),
         userAddresses,
         userAnalytics,
+        rawUserAnalytics,
         addAccount,
         checkIfSecondaryAddress,
         checkIfPrimaryUserExists,
diff --git a/apps/web/src/mockData/mock_transaction_data.ts b/apps/web/src/mockData/mock_transaction_data.ts
index 0b50d6897..ee89f6dd7 100644
--- a/apps/web/src/mockData/mock_transaction_data.ts
+++ b/apps/web/src/mockData/mock_transaction_data.ts
@@ -50,9 +50,13 @@ export default function useTxData () {
         txDirection: 'incoming',
         txId: '0xf46d39ca96e489fb0eb2097f073bfde2dc7960bf8358e0692fa79cc8597d283e',
         receivedAt: generateRandomDate(),
-        amount: '0',
+        amount: (Math.random() * 20.00).toFixed(2),
         price: '0.0',
-        gasFee: '195178697897910'
+        gasFee: '195178697897910',
+        rewards:(Math.random() * 10.00).toFixed(2),
+        apy: (Math.random() * 10.00).toFixed(2) + '%',
+        status: Math.random() > 0.5? 'Pending' : 'Active',
+        opperators: [ 'red', 'green', 'blue', 'orange', 'yellow'] //This is random until I get more info on how it will look like from backend
       }
   
       data.push(transaction)
diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index 8f3723b38..07dd1fa8a 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import * as XLSX from 'xlsx'
 import VueFeather from 'vue-feather'
+import useUsers from '@/composables/users.ts'
 
 const searchInput = ref('')
 const tableView = ref('Wallets')
@@ -72,54 +73,24 @@ const tableHeaderOptions = ref(
   }
 )
 
-const tableMockedItems = ref({
+const { rawUserAnalytics, user } = useUsers()
+
+const tableData = ref({
   Wallets: [
-    {
-      wallet_provider: 'MetaMask',
-      act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
-      bal: '1.5 ETH',
-      stk_amt: '0.5 ETH',
-      stk_rwd: '0.034 ETH'
-    },
-    {
-      wallet_provider: 'CoinbaseWallet',
-      act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
-      bal: '1.5 ETH',
-      stk_amt: '0.5 ETH',
-      stk_rwd: '0.034 ETH'
-    }
   ],
   Transactions: [
-    {
-      tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
-      stk_amt: '1.5 ETH',
-      stk_rwd: '0.045 ETH',
-      date: '01/01/2023',
-      apy: '2.1 %',
-      status: 'pending',
-      operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
-    },
-    {
-      tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
-      stk_amt: '1.5 ETH',
-      stk_rwd: '0.045 ETH',
-      date: '01/01/2023',
-      apy: '2.1 %',
-      status: 'pending',
-      operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
-    },
   ],
 })
 
-const filteredData = ref(tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value])
+const filteredData = ref(tableData.value[tableView.value as keyof typeof tableData.value])
 
 const filterData = () => {
   let filteredDataArray
   if (searchInput.value === '') {
-    filteredDataArray = tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value]
+    filteredDataArray = tableData.value[tableView.value as keyof typeof tableData.value]
   } else {
     const searchTerm = searchInput.value
-    filteredDataArray = (tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value] as Array<any>).filter(item => {
+    filteredDataArray = (tableData.value[tableView.value as keyof typeof tableData.value] as Array<any>).filter(item => {
       return (
         // Might need to modify to match types each variable
         item.wallet_provider?.toLowerCase().includes(searchTerm) ||
@@ -149,7 +120,7 @@ const filterData = () => {
     })
   }
 
-  filteredData.value = filteredDataArray
+  filteredData.value = filteredDataArray as any
 }
 
 watch([searchInput, tableView, selectedHeader, selectedOrientation], ()=>{
@@ -174,12 +145,10 @@ const convertJsonToCsv = (jsonData: any[]) => {
   const csvRows = []
 
   if (!Array.isArray(jsonData)) {
-    console.error('jsonData is not an array')
     return ''
   }
 
   if (jsonData.length === 0) {
-    console.warn('jsonData is an empty array')
     return ''
   }
 
@@ -240,6 +209,70 @@ const removeItemFromCheckedList = (item:any) => {
     checkedItems.value.splice(index, 1)
   }
 }
+
+const setTableData = () =>{
+
+  if(!rawUserAnalytics.value) return 
+
+  const sortedTransactions = rawUserAnalytics.value.sort((a: any, b: any) => {
+    new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
+  })
+
+  const newTable = tableData.value
+
+  newTable.Transactions = sortedTransactions.map((item: any) =>{
+    return {
+        tx_hash: item.txId,
+        stk_amt: item.amount,
+        stk_rwd: item.rewards,
+        date: item.receivedAt,
+        apy: item.apy,
+        status: item.status,
+        operators: item.opperators
+    }
+  })
+
+  let filteredWallets = [] as any
+
+  sortedTransactions.forEach((item: any) => {
+    const index = filteredWallets.findIndex((i: any)=> i.act === item.walletAddress)
+
+    if(index > -1) {
+      if(new Date(filteredWallets[index].date).getTime() < new Date(item.receivedAt).getTime()){
+        filteredWallets[index].bal === item.walletBalance
+      }
+    } else {
+      let provider = user.value?.accounts.find(i => i.address.toLocaleLowerCase() === item.walletAddress.toLocaleLowerCase())?.walletProvider
+      filteredWallets.push(
+        {
+          wallet_provider: provider? provider : 'Unknown',
+          act: item.walletAddress,
+          bal: item.walletBalance,
+          stk_amt: item.amount,
+          stk_rwd: item.rewards,
+          date: item.receivedAt
+        }
+      )
+    }
+  })
+
+  newTable.Wallets = filteredWallets
+
+  tableData.value = newTable
+
+}
+
+watch(rawUserAnalytics, () =>{
+  setTableData()
+  filterData()
+})
+
+onMounted(() =>{
+  setTableData()
+  filterData()
+})
+
+
 </script>
 
 <template>
@@ -318,7 +351,7 @@ const removeItemFromCheckedList = (item:any) => {
         <thead>
           <tr class="bg-[#FCFCFD] border-b border-b-[#EAECF0] whitespace-nowrap">
             <th
-              v-for="header in tableHeaderOptions[tableView as keyof typeof tableHeaderOptions].headers"
+              v-for="header in tableHeaderOptions[tableView].headers"
               :key="header.title"
               class="table_header "
             >
@@ -379,11 +412,11 @@ const removeItemFromCheckedList = (item:any) => {
         >
           <tr
             v-for="item in filteredData"
-            :key="(item as any).act || (item as any).tx_hash"
+            :key="item"
             class="w-full text-grey_5 text-body border-b border-grey_2 h-[72px]"
           >
             <td
-              v-for="header in tableHeaderOptions[tableView as keyof typeof tableHeaderOptions].headers"
+              v-for="header in tableHeaderOptions[tableView].headers"
               :key="header.title"
               class="dynamic_padding"
             >
@@ -403,12 +436,13 @@ const removeItemFromCheckedList = (item:any) => {
                   />
                 </button>
                 <img
-                  :src="`/${item[header.value as keyof typeof item]}.svg`"
+                  v-if="item[header.value] != 'Unknown'"
+                  :src="`/${item[header.value ]}.svg`"
                   alt="Avatar "
                   class="w-[20px] h-[20px]"
                 >
-                <h6 class="title_name 800s:w-[20px] w-[50px] truncate">
-                  {{ item[header.value as keyof typeof item] }}
+                <h6 class="title_name 800s:w-[20px]">
+                  {{ item[header.value ] }}
                 </h6>
               </div>
               <div
@@ -416,7 +450,7 @@ const removeItemFromCheckedList = (item:any) => {
                 class="flex items-center gap-[12px] underline"
               >
                 <a href=""> 
-                  {{ convertString(item[header.value as keyof typeof item]) }}
+                  {{ convertString(item[header.value ]) }}
                 </a>
               </div>
               <div
@@ -435,7 +469,7 @@ const removeItemFromCheckedList = (item:any) => {
                   />
                 </button>
                 <a class="">
-                  {{ convertString(item[header.value as keyof typeof item]) }}
+                  {{ convertString(item[header.value ]) }}
                 </a>
               </div>
               <div
@@ -443,14 +477,14 @@ const removeItemFromCheckedList = (item:any) => {
                 class="flex items-center gap-[12px]"
               >
                 <div
-                  v-if="item[header.value as keyof typeof item] === 'staked'"
+                  v-if="item[header.value ] === 'staked'"
                   class="flex items-center gap-[8px] status_pill bg-[#ECFDF3] text-[#027A48]"
                 >
                   <div class="bg-[#027A48] rounded-[999px] w-[8px] h-[8px]" />
                   Staked
                 </div>
                 <div
-                  v-else-if="item[header.value as keyof typeof item] === 'pending'" 
+                  v-else-if="item[header.value ] === 'pending'" 
                   class="flex items-center gap-[8px] status_pill bg-[#FFFAEB] text-[#B54708]"
                 >
                   <div class="bg-[#F79009] rounded-[999px] w-[8px] h-[8px]" />
@@ -462,14 +496,14 @@ const removeItemFromCheckedList = (item:any) => {
                 class="flex items-center gap-[12px] pl-[20px]"
               >
                 <div
-                  v-for="operator in item[header.value as keyof typeof item]"
+                  v-for="operator in item[header.value ]"
                   :key="operator"
                   :class="`w-[24px] h-[24px] border-[2px] border-white bg-blue-300 rounded-[999px]`"
                   :style="`margin-left: -20px`"
                 />
               </div>
               <div v-else>
-                {{ item[header.value as keyof typeof item] }}
+                {{ item[header.value ] }}
               </div>
             </td>
           </tr>

From 8721aa5a67ee29732a475694885885af5154034b Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 13 Jul 2023 22:47:32 -0400
Subject: [PATCH 2/4] Add pagination and adjust front-end styling

---
 .../overview/components/BreakdownTable.vue    | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index 07dd1fa8a..2118eca0a 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -4,8 +4,12 @@ import * as XLSX from 'xlsx'
 import VueFeather from 'vue-feather'
 import useUsers from '@/composables/users.ts'
 
+const itemsPerPage = ref(7)
+const currentPage = ref(1)
+const totalPages = ref(1)
+
 const searchInput = ref('')
-const tableView = ref('Wallets')
+const tableView = ref('Transactions')
 
 const selectedHeader = ref('')
 const selectedOrientation = ref('ascending')
@@ -119,11 +123,14 @@ const filterData = () => {
       }
     })
   }
+  totalPages.value = Math.round(filteredDataArray.length / itemsPerPage.value)
 
-  filteredData.value = filteredDataArray as any
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  filteredData.value = filteredDataArray.slice(start, end) as any
 }
 
-watch([searchInput, tableView, selectedHeader, selectedOrientation], ()=>{
+watch([searchInput, tableView, selectedHeader, selectedOrientation, currentPage], ()=>{
   filterData()
 })
 
@@ -477,14 +484,14 @@ onMounted(() =>{
                 class="flex items-center gap-[12px]"
               >
                 <div
-                  v-if="item[header.value ] === 'staked'"
+                  v-if="item[header.value ] === 'Active'"
                   class="flex items-center gap-[8px] status_pill bg-[#ECFDF3] text-[#027A48]"
                 >
                   <div class="bg-[#027A48] rounded-[999px] w-[8px] h-[8px]" />
                   Staked
                 </div>
                 <div
-                  v-else-if="item[header.value ] === 'pending'" 
+                  v-else-if="item[header.value ] === 'Pending'" 
                   class="flex items-center gap-[8px] status_pill bg-[#FFFAEB] text-[#B54708]"
                 >
                   <div class="bg-[#F79009] rounded-[999px] w-[8px] h-[8px]" />
@@ -498,8 +505,8 @@ onMounted(() =>{
                 <div
                   v-for="operator in item[header.value ]"
                   :key="operator"
-                  :class="`w-[24px] h-[24px] border-[2px] border-white bg-blue-300 rounded-[999px]`"
-                  :style="`margin-left: -20px`"
+                  :class="`w-[24px] h-[24px] border-[2px] border-white  rounded-[999px]`"
+                  :style="`margin-left: -20px; background-color: ${operator}; opacity: 0.55`"
                 />
               </div>
               <div v-else>
@@ -510,20 +517,27 @@ onMounted(() =>{
         </tbody>
       </table>
     </div>
-    <!-- Waiting on a bigger data set to do this.. for now will comment out -->
-    <!-- <div class="flex justify-between items-center mt-[12px]">
+    <div class="flex justify-between items-center mt-[12px]">
       <div class="page_number ml-[56px]">
-        Page 1 of 10
+        Page {{ currentPage }} of {{ totalPages }}
       </div>
       <div class="flex items-center gap-[12px]">
-        <button class="pagination_button">
+        <button
+          class="pagination_button"
+          :disabled="currentPage === 1"
+          @click="currentPage > 1? currentPage = currentPage - 1 : ''"
+        >
           Previous
         </button>
-        <button class="pagination_button mr-[33px]">
+        <button
+          class="pagination_button mr-[33px]"
+          :disabled="currentPage === totalPages"
+          @click="currentPage < totalPages? currentPage = currentPage + 1 : ''"
+        >
           Next
         </button>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 

From 97385cbb1ac8561b5154f5d6576f73455ed737ec Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 13 Jul 2023 22:48:23 -0400
Subject: [PATCH 3/4] Fix filters

---
 apps/web/src/pages/overview/components/BreakdownTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index 2118eca0a..bc99a602d 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -9,7 +9,7 @@ const currentPage = ref(1)
 const totalPages = ref(1)
 
 const searchInput = ref('')
-const tableView = ref('Transactions')
+const tableView = ref('Wallets')
 
 const selectedHeader = ref('')
 const selectedOrientation = ref('ascending')

From 1e2c10a8ed6a9dfa0913b6dec8484497b78af35c Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Fri, 14 Jul 2023 22:44:18 -0400
Subject: [PATCH 4/4] Fix import issue

---
 apps/web/src/pages/overview/components/BreakdownTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index bc99a602d..fa2560b06 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -2,7 +2,7 @@
 import { ref, watch, onMounted } from 'vue'
 import * as XLSX from 'xlsx'
 import VueFeather from 'vue-feather'
-import useUsers from '@/composables/users.ts'
+import useUsers from '@/composables/users'
 
 const itemsPerPage = ref(7)
 const currentPage = ref(1)