Dummy daily Summary Component

src/components/Card.tsx

@@ -11,7 +11,6 @@ const Card = styled.div`
   padding-bottom: 1rem;
   border: 1px solid ${fog};
   border-radius: 0.5rem;
-  max-width: 88em;
   &:hover {
     box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.1);
   }

src/components/Sidebar/NavBar.tsx

@@ -21,6 +21,7 @@ class NavBar extends Component {
 const Container = styled.div`
   background: ${primary};
   display: flex;
+  user-select: none;
 `
 
 const active = 'active'

src/helpers/date-range-helper.ts

@@ -19,6 +19,8 @@ export const getMinMaxDateRange = (
   return undefined
 }
 
+export const getDateToday = () => moment().format('YYYY-MM-DD')
+
 const getDailyRange = (numbers: number[]) =>
   numbers.map((n: number) => {
     const date = moment()

src/screens/Dashboard/DailySummary/DailySummary.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import Card from '../../../components/Card'
+import CardTitle from '../../../components/CardTitle'
+interface IProps {
+  customerStats?: any
+}
+const DailySummary: React.SFC<IProps> = props => (
+  <Container>
+    <Card style={{ padding: '1rem' }}>
+      <CardTitle>Dummy Daily Summary [Please Ignore]</CardTitle>
+      <p>Customers</p>
+      <p>Verified: 10/14</p>
+      <hr />
+      <p>Mandates:</p>
+      <p>initiated: 3</p>
+      <p>success: 4</p>
+      <p>fail: 1</p>
+      <hr />
+      <p>Total Beneficiaries added: 18</p>
+      <hr />
+      <p>Transactions</p>
+      <p>initiated: 3 (rs10000)</p>
+      <p>success: 4 (rs)</p>
+      <p>fail: 1</p>
+    </Card>
+  </Container>
+)
+
+const Container = styled.div`
+  max-width: 40rem;
+  margin: 0 auto;
+`
+export default DailySummary

src/screens/Dashboard/Dashboard.tsx

@@ -1,31 +1,11 @@
 import { Component, default as React } from 'react'
-import { customerStats } from '../../api/statistics-api'
-import { rangeEnum } from '../../helpers/date-range-helper'
+import DailySummary from './DailySummary/DailySummary'
 
 class Dashboard extends Component {
-  public state = {
-    hi: 'bye',
-  }
-
-  public componentDidMount() {
-    customerStats(rangeEnum.days)
-    customerStats(rangeEnum.weeks)
-    customerStats(rangeEnum.months)
-  }
-
   public render() {
     return (
       <div>
-        <p>D</p>
-        <p>A</p>
-        <p>S</p>
-        <p>H</p>
-        <p>B</p>
-        <p>o</p>
-        <p>R</p>
-        <p>D</p>
-        <p>.</p>
-        <p>{this.state.hi}</p>
+        <DailySummary />
       </div>
     )
   }

src/screens/Transactions/AmountCell.tsx

@@ -6,19 +6,20 @@ interface IProps {
   style?: any
 }
 
-const
-  AmountCell: React.SFC<IProps> = props => (
+const AmountCell: React.SFC<IProps> = props => (
   <Container style={props.style}>
-    {props.amount.toLocaleString('en-EN', {
-      currency: 'INR',
-      maximumFractionDigits: 0,
-      minimumFractionDigits: 0,
-      style: 'currency',
-    })}
+    <p style={{ fontSize: '0.5rem', paddingBottom: '0.5rem' }}>₹</p>
+    <p>
+      {props.amount.toLocaleString('en-EN', {
+        maximumFractionDigits: 0,
+        minimumFractionDigits: 0,
+      })}
+    </p>
   </Container>
 )
 
-const Container = styled.p`
+const Container = styled.div`
+  display: flex;
   font-size: 1.1rem;
 `