feat: render last_login & about on user page

src/components/UserProfile/Info/About.tsx

@@ -2,12 +2,17 @@ import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 import type { IAboutProps } from '.';
 
-const About: React.FC<IAboutProps> = () => {
+const About: React.FC<IAboutProps> = ({ about }) => {
   return (
     <Box>
       <Text fontSize={'sm'}>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. A quibusdam sapiente quisquam vero harum ipsam officiis
-        rerum. Cum, excepturi nulla.
+        {about ? (
+          about
+        ) : (
+          <Text as='span' color='gray.500' userSelect={'none'}>
+            No description provided
+          </Text>
+        )}
       </Text>
     </Box>
   );

src/components/UserProfile/Info/Details.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import { Flex, Text, Icon, Divider } from '@chakra-ui/react';
 import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons';
 import type { IDetailsProps } from '.';
@@ -17,7 +18,7 @@ const Details: React.FC<IDetailsProps> = ({ registered, lastLogin }) => {
           <Flex alignItems={'center'} mr='5'>
             <Icon as={RepeatClockIcon} color='gray.500' />
             <Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='3'>
-              Last login: {lastLogin}
+              Last login: {lastLogin ? `${moment(lastLogin).fromNow()}` : 'Never'}
             </Text>
           </Flex>
         </Flex>

src/components/UserProfile/Info/index.ts

@@ -11,11 +11,11 @@ export interface IHeadingProps {
 
 export interface IDetailsProps {
   registered: string;
-  lastLogin: string;
+  lastLogin: IUser['last_login'];
 }
 
 export interface IAboutProps {
-  about: string;
+  about: IUser['about'];
 }
 
 export { Info, Heading, Details, About };

src/interfaces/index.ts

@@ -116,6 +116,8 @@ export interface IUser {
   first_name: string;
   last_name: string;
   fullname: string;
+  about: string | null;
+  last_login: string | null;
   email: string;
   roles: IUserRole[];
   contacts: IUserContacts | null;

src/pages/user/user.tsx

@@ -28,12 +28,8 @@ const UserPage: React.FC<IPageProps> = () => {
           </UserProfile.Avatar>
           <UserProfile.Info>
             <UserProfile.Heading fullname={user.fullname} roles={user.roles} />
-            <UserProfile.Details registered={user.created_at} lastLogin='3 days ago' />
-            <UserProfile.About
-              about={
-                'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores consectetur quasi minima veritatis id quisquam natus in nostrum quam?'
-              }
-            />
+            <UserProfile.Details registered={user.created_at} lastLogin={user.last_login} />
+            <UserProfile.About about={user.about} />
           </UserProfile.Info>
         </UserProfile>
       </PageContent>