Display metrics

db/structs.go

@@ -395,6 +395,7 @@ type BountyData struct {
 	Person
 	AssigneeAlias         string         `json:"assignee_alias"`
 	AssigneeId            uint           `json:"assignee_id"`
+	AssigneeImg           string         `json:"assignee_img"`
 	AssigneeCreated       *time.Time     `json:"assignee_created"`
 	AssigneeUpdated       *time.Time     `json:"assignee_updated"`
 	AssigneeDescription   string         `json:"assignee_description"`

frontend/app/src/pages/superadmin/index.tsx

@@ -3,12 +3,11 @@
  * To enable colaborations
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-// import { useStores } from 'store';
+import { useStores } from 'store';
 import moment from 'moment';
 import { MyTable } from './tableComponent';
-import { bounties } from './tableComponent/mockBountyData';
 import { Header } from './header';
 import { Statistics } from './statistics';
 import AdminAccessDenied from './accessDenied';
@@ -22,8 +21,9 @@ const Container = styled.body`
 
 export const SuperAdmin = () => {
   //Todo: Remove all comments when metrcis development is done
-  // const { main, ui } = useStores();
+  const { main } = useStores();
   const [isSuperAdmin] = useState(true);
+  const [bounties, setBounties] = useState<any[]>([]);
 
   /**
    * Todo use the same date range,
@@ -43,6 +43,17 @@ export const SuperAdmin = () => {
   //   }
   // }, [main, ui, getIsSuperAdmin]);
 
+  const getBounties = useCallback(async () => {
+    if (startDate && endDate) {
+      const bounties = await main.getBountiesByRange(String(startDate), String(endDate));
+      setBounties(bounties);
+    }
+  }, [main, startDate, endDate]);
+
+  useEffect(() => {
+    getBounties();
+  }, [getBounties]);
+
   return (
     <>
       {!isSuperAdmin ? (

frontend/app/src/pages/superadmin/tableComponent/index.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useStores } from 'store';
+import moment from 'moment';
 import paginationarrow1 from '../header/icons/paginationarrow1.svg';
 import paginationarrow2 from '../header/icons/paginationarrow2.svg';
-
+import defaultPic from '../../../public/static/profile_avatar.svg';
 import copygray from '../header/icons/copygray.svg';
+
 import {
   TableContainer,
   HeaderContainer,
@@ -259,25 +261,48 @@ export const MyTable = ({ bounties, startDate, endDate }: TableProps) => {
             <TableHeaderDataRight>Status</TableHeaderDataRight>
           </TableRow>
           <tbody>
-            {currentPageData()?.map((bounty: any) => (
-              <TableDataRow key={bounty?.id}>
-                <BountyData className="avg">{bounty?.title}</BountyData>
-                <TableData>{bounty?.date}</TableData>
-                <TableDataCenter>{bounty?.dtgp}</TableDataCenter>
-                <TableDataAlternative>
-                  <ImageWithText text={bounty?.assignee} image={bounty?.assigneeImage} />
-                </TableDataAlternative>
-                <TableDataAlternative className="address">
-                  <ImageWithText text={bounty?.provider} image={bounty?.providerImage} />
-                </TableDataAlternative>
-                <TableData className="organization">
-                  <ImageWithText text={bounty?.organization} image={bounty?.organizationImage} />
-                </TableData>
-                <TableData3>
-                  <TextInColorBox status={bounty?.status} />
-                </TableData3>
-              </TableDataRow>
-            ))}
+            {currentPageData()?.map((bounty: any) => {
+              const bounty_status =
+                bounty?.paid && bounty.assignee
+                  ? 'completed'
+                  : bounty.assignee && !bounty.paid
+                  ? 'assigned'
+                  : 'open';
+
+              const created = moment.unix(bounty.bounty_created).format('YYYY-MM-DD');
+              const time_to_pay = bounty.paid_date
+                ? moment(bounty.paid_date).diff(created, 'days')
+                : 0;
+
+              return (
+                <TableDataRow key={bounty?.id}>
+                  <BountyData className="avg">{bounty?.title}</BountyData>
+                  <TableData>{created}</TableData>
+                  <TableDataCenter>{time_to_pay}</TableDataCenter>
+                  <TableDataAlternative>
+                    <ImageWithText
+                      text={bounty?.assignee}
+                      image={bounty?.assignee_img || defaultPic}
+                    />
+                  </TableDataAlternative>
+                  <TableDataAlternative className="address">
+                    <ImageWithText
+                      text={bounty?.owner_pubkey}
+                      image={bounty?.providerImage || defaultPic}
+                    />
+                  </TableDataAlternative>
+                  <TableData className="organization">
+                    <ImageWithText
+                      text={bounty?.organization}
+                      image={bounty?.organization_img || defaultPic}
+                    />
+                  </TableData>
+                  <TableData3>
+                    <TextInColorBox status={bounty_status} />
+                  </TableData3>
+                </TableDataRow>
+              );
+            })}
           </tbody>
         </Table>
       </TableContainer>

frontend/app/src/store/main.ts

@@ -2423,7 +2423,7 @@ export class MainStore {
     }
   }
 
-  async getBountiesByRange(start_date: number, end_date: number): Promise<any | undefined> {
+  async getBountiesByRange(start_date: string, end_date: string): Promise<any | undefined> {
     try {
       if (!uiStore.meInfo) return undefined;
       const info = uiStore.meInfo;
@@ -2443,7 +2443,7 @@ export class MainStore {
         }
       });
 
-      return r;
+      return r.json();
     } catch (e) {
       console.error('getBountyMetrics', e);
       return undefined;

handlers/metrics.go

@@ -256,6 +256,7 @@ func GetMetricsBountiesData(metricBounties []db.Bounty) []db.BountyData {
 			BountyDescription:   bounty.Description,
 			BountyUpdated:       bounty.Updated,
 			AssigneeId:          bountyAssignee.ID,
+			AssigneeImg:         bountyAssignee.Img,
 			AssigneeAlias:       bountyAssignee.OwnerAlias,
 			AssigneeDescription: bountyAssignee.Description,
 			AssigneeRouteHint:   bountyAssignee.OwnerRouteHint,