feat: dashboard

src/pages/customerPortal/components/EmptyBlock.tsx

@@ -21,17 +21,17 @@ const StyledCard = styled.div`
 `
 const StyledImageWrapper = styled.div`
   > svg {
-    width: 108px;
+	width: 108px;
-    height: 89px;
+	height: 89px;
   }
 
   ${props => props.theme.breakpoints.down('s')} {
-    text-align: center;
+	text-align: center;
 
-    > svg {
+	> svg {
-      width: 113px;
+	  width: 113px;
-      height: 145px;
+	  height: 145px;
-    }
+	}
   }
 
 `
@@ -42,18 +42,18 @@ const StyledInfo = styled.div`
   justify-content: center;
 
   ${props => props.theme.breakpoints.down('s')} {
-    margin-top: -20px;
+	margin-top: -20px;
   }
 
   ${props => props.theme.breakpoints.up('s')} {
-    width: 56%;
+	width: 56%;
-    max-width: 566px;
+	max-width: 566px;
-    padding: 0 20px;
+	padding: 0 20px;
   }
 `
 const StyledParagraph = styled(Paragraph)`
   ${props => props.theme.breakpoints.up('s')} {
-    margin-bottom: 10px !important;
+	margin-bottom: 10px !important;
   }
 `
 const StyledButtonGroup = styled.div`
@@ -63,19 +63,19 @@ const StyledButtonGroup = styled.div`
   gap: 15px;
 
   ${props => props.theme.breakpoints.down('s')} {
-    align-items: center;
+	align-items: center;
-		margin-top: 20px;
+	margin-top: 20px;
   }
 `
 const StyledButton = styled(Button)`
-	width: 152px;
+  width: 152px;
   height: 28px;
   font-size: 12px;
   line-height: 28px;
 `
-export const EmptyBlock: FC = () => {
+export const EmptyBlock: FC<{ className?: string; style?: React.CSSProperties }> = (props) => {
 	return (
-		<StyledCard>
+		<StyledCard {...props}>
 			<StyledImageWrapper><EmptySvg /></StyledImageWrapper>
 			<StyledInfo>
 				<StyledParagraph>Take the next step on your health and wellness journey!</StyledParagraph>

src/pages/customerPortal/dashboard/Dashboard.tsx

@@ -1,12 +1,82 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { EmptyBlock } from '../components/EmptyBlock'
 import { Container } from '../components/Container'
 import { InProgressItem } from '../components/InProgressItem'
+import styled from 'styled-components'
+import { Breakpoint } from '../../../components/Breakpoint'
+import { Title } from '../../../components/Typography'
+import { observer } from 'mobx-react-lite'
+import { AuthStore } from '../../../stores/AuthStore'
+import { ResultItem } from '../components/ResultItem'
 
-export const Dashboard = () => {
+const StyledMain = styled.div`
+  padding-top: 50px;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    padding-top: 32px;
+  }
+`
+
+const StyledItemWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    flex-direction: column;
+  }
+`
+const StyledProgress = styled.div`
+  ${props => props.theme.breakpoints.up('s')} {
+    width: 351px;
+    padding-right: 51px;
+  }
+`
+const StyledRecent = styled.div`
+  flex: auto;
+`
+const StyledSubTitle = styled(Title)`
+  margin-bottom: 14px;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    padding-left: 15px;
+  }
+`
+const StyledEmptyBlock = styled(EmptyBlock)`
+  margin-bottom: 32px`
+export const Dashboard = observer(() => {
+	const [{ userInfo }] = useState(AuthStore.instance())
+	const [inProgress, setInProgress] = useState([])
+	const [history, setHistory] = useState(['1'])
 	return (
 		<Container>
-
+			<Breakpoint s up>
+				<Title level={0}>Hello, {userInfo?.firstName}!</Title>
+			</Breakpoint>
+			<Breakpoint s down>
+				<Title level={2} style={{ marginBottom: 10 }}>Hello, {userInfo?.firstName}!</Title>
+			</Breakpoint>
+			<StyledMain>
+				{!inProgress.length && <StyledEmptyBlock />}
+				<StyledItemWrap>
+					{!!inProgress.length &&
+						(
+							<StyledProgress>
+								<StyledSubTitle level={3}>Tests in Progress</StyledSubTitle>
+								<InProgressItem step={0} />
+								<InProgressItem step={1} />
+								<InProgressItem step={1} error />
+							</StyledProgress>
+						)}
+					{!!history.length && (
+						<StyledRecent>
+							<StyledSubTitle level={3}>Recent Test Results</StyledSubTitle>
+							<ResultItem />
+							<ResultItem />
+							<ResultItem />
+						</StyledRecent>
+					)}
+				</StyledItemWrap>
+			</StyledMain>
 		</Container>
 	)
-}
+})

src/pages/customerPortal/history/History.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Breakpoint } from 'components/Breakpoint'
+import { Paragraph, Title } from 'components/Typography'
 import { EmptyBlock } from '../components/EmptyBlock'
 import { Container } from '../components/Container'
-import { Paragraph, Title } from 'components/Typography'
-import styled from 'styled-components'
 import { ResultItem } from '../components/ResultItem'
-import { Breakpoint } from '../../../components/Breakpoint'
 
 const StyledMain = styled.div`
   padding-top: 43px;