feat: enrich manage user list data

src/component/manage-user/manage-user.style.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-export const StyledUserList = styled.div`
+export const StyledUserList = styled.div `
   display: grid;
-  grid-template-columns: auto 1fr 1fr;
+  grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr;
   grid-gap: 0.5rem;
-`
+`

src/component/user-item/user-item.component.jsx

@@ -2,11 +2,20 @@ import React from 'react'
 import Avatar from '../avatar'
 
 const UserItem = ({ user }) => {
-  const { displayName, photoUrl, email, id } = user
+  const { displayName, photoUrl, email, id, subscription: {
+    next_billing_at,
+    plan_id
+  } = {} } = user
+
+  const getNiceDate = time => time ? new Date(next_billing_at * 1000).toDateString() : ''
+
   return (
     <>
       <Avatar user={user} />
       <div>{email}</div>
+      <div>{plan_id}</div>
+      <div>{plan_id}</div>
+      <div>{getNiceDate(next_billing_at)}</div>
       <div id={id}><a href={`#${id}`} title={id}>#{id.slice(0, 6)}</a></div>
     </>
   )