@fortawesome/free-solid-svg-icons#faMinus JavaScript Examples

AccordionSection = ({
  i,
  expanded,
  setExpanded,
  headerText,
  children,
}) => {
  const isOpen = expanded[i] === true
  const icon = isOpen ? faMinus : faPlus

  // By using `AnimatePresence` to mount and unmount the contents, we can animate
  // them in and out while also only rendering the contents of open accordions
  return (
    <Container>
      <Header
        initial={false}
        animate={{
          backgroundColor: isOpen ? styles.colorWhite : styles.colorWhite,
          color: isOpen ? styles.colorGrayDarkest : styles.colorGrayDarkest,
        }}
        onClick={() => setExpanded({ ...expanded, [i]: isOpen ? false : true })}
      >
        <span>
          <Icon icon={icon} />
        </span>
        <span>{headerText}</span>
      </Header>
      <AnimatePresence initial={false}>
        {isOpen && (
          <Section
            key="content"
            initial="collapsed"
            animate="open"
            exit="collapsed"
            variants={{
              open: { opacity: 1, height: "auto" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }}
          >
            <Content
              variants={{ collapsed: { scale: 0.8 }, open: { scale: 1 } }}
              transition={{ duration: 0.8 }}
              className="accordion-content"
            >
              {children}
            </Content>
          </Section>
        )}
      </AnimatePresence>
    </Container>
  )
}

export default function Enrollments({
  user,
  searchStr,
}) {
  const { add, clear } = useContext(UserMessagesContext);
  const [formType, setFormType] = useState(null);
  const [enrollmentData, setEnrollmentData] = useState(null);
  const [enrollmentToChange, setEnrollmentToChange] = useState(undefined);
  const [selectedCourseId, setSelectedCourseId] = useState(undefined);
  const formRef = useRef(null);

  const changeHandler = () => setEnrollmentData(null);

  useEffect(() => {
    if (enrollmentData === null) {
      clear('enrollments');
      getEnrollments(user).then((result) => {
        const camelCaseResult = camelCaseObject(result);
        if (camelCaseResult.errors) {
          camelCaseResult.errors.forEach(error => add(error));
          setEnrollmentData([]);
        } else {
          setEnrollmentData(camelCaseResult);
        }
      });
    }
  }, [user, enrollmentData]);

  const tableData = useMemo(() => {
    if (enrollmentData === null || enrollmentData.length === 0) {
      return [];
    }
    return enrollmentData.filter(
      enrollment => (enrollment.courseId.toLowerCase().includes(searchStr)
              || enrollment.courseName.toLowerCase().includes(searchStr)),
    ).map(enrollment => ({
      expander: {
        lastModified: enrollment.manualEnrollment ? enrollment.manualEnrollment.timeStamp : 'N/A',
        lastModifiedBy: enrollment.manualEnrollment && enrollment.manualEnrollment.enrolledBy ? enrollment.manualEnrollment.enrolledBy : 'N/A',
        reason: enrollment.manualEnrollment && enrollment.manualEnrollment.reason ? enrollment.manualEnrollment.reason : 'N/A',
      },
      enterpriseCourseEnrollments: enrollment.enterpriseCourseEnrollments?.map((ece => ({
        enterpriseCustomerName: ece.enterpriseCustomerName,
        consentProvided: formatBoolean(ece.dataSharingConsent?.consentProvided),
        consentRequired: formatBoolean(ece.dataSharingConsent?.consentRequired),
        license: ece.license?.uuid ?? 'N/A',
        isLicenseRevoked: formatBoolean(ece.license?.isRevoked),
      }))),
      courseId: enrollment.courseId,
      courseName: enrollment.courseName,
      courseStart: enrollment.courseStart,
      courseEnd: enrollment.courseEnd,
      upgradeDeadline: enrollment.verifiedUpgradeDeadline,
      created: enrollment.created,
      pacingType: enrollment.pacingType,
      active: formatBoolean(enrollment.isActive),
      mode: enrollment.mode,
      actions: (
        <Dropdown>
          <Dropdown.Toggle variant="sm">
            Actions
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Item
              onClick={() => {
                setEnrollmentToChange(enrollment);
                setFormType(CHANGE);
              }}
              className="small"
            >
              Change Enrollment
            </Dropdown.Item>
            <Dropdown.Item
              onClick={() => {
                setSelectedCourseId(enrollment.courseId);
              }}
              className="small"
            >
              View Certificate
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      ),
    }));
  }, [enrollmentData, searchStr]);

  const defaultSortColumn = [{
    id: 'enrollmentDate',
    desc: true,
  }];

  useLayoutEffect(() => {
    if (formType != null) {
      formRef.current.focus();
    }
  });

  const expandAllRowsHandler = ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
    <a {...getToggleAllRowsExpandedProps()} className="link-primary">
      { isAllRowsExpanded ? 'Collapse All' : 'Expand All' }
    </a>
  );
  expandAllRowsHandler.propTypes = {
    getToggleAllRowsExpandedProps: PropTypes.func.isRequired,
    isAllRowsExpanded: PropTypes.bool.isRequired,
  };

  const rowExpandHandler = ({ row }) => (
    // We can use the getToggleRowExpandedProps prop-getter
    // to build the expander.
    <div className="text-center">
      <span {...row.getToggleRowExpandedProps()}>
        {row.isExpanded ? (
          <FontAwesomeIcon icon={faMinus} />
        ) : <FontAwesomeIcon icon={faPlus} />}
      </span>
    </div>
  );

  rowExpandHandler.propTypes = {
    row: PropTypes.shape({
      isExpanded: PropTypes.bool,
      getToggleRowExpandedProps: PropTypes.func,
    }).isRequired,
  };

  const columns = React.useMemo(
    () => [
      {
        // Make an expander column
        Header: expandAllRowsHandler,
        id: 'expander',
        Cell: rowExpandHandler, // Use Cell to render an expander for each row.
      },
      { // eslint-disable-next-line react/prop-types
        Header: 'Course Run ID', accessor: 'courseId', Cell: ({ value }) => <a href={`${getConfig().LMS_BASE_URL}/courses/${value}`} rel="noopener noreferrer" target="_blank" className="word_break">{value}</a>, sortable: true,
      },
      {
        Header: 'Course Title', accessor: 'courseName', sortable: true,
      },
      {
        Header: 'Course Start', accessor: 'courseStart', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Course End', accessor: 'courseEnd', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Upgrade Deadline', accessor: 'upgradeDeadline', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Enrollment Date', accessor: 'created', Cell: ({ value }) => formatDate(value), sortable: true, id: 'enrollmentDate',
      },
      {
        Header: 'Pacing Type', accessor: 'pacingType', sortable: true,
      },
      {
        Header: 'Mode', accessor: 'mode', sortable: true,
      },
      {
        Header: 'Active', accessor: 'active', sortable: true,
      },
      {
        Header: 'Actions', accessor: 'actions',
      },
    ],
    [],
  );

  const extraColumns = React.useMemo(
    () => [
      {
        Header: 'Last Modified', accessor: 'lastModified', Cell: ({ value }) => formatDate(value),
      },
      {
        Header: 'Last Modified By', accessor: 'lastModifiedBy',
      },
      {
        Header: 'Reason', accessor: 'reason',
      },
    ],
    [],
  );

  const enterpriseCourseEnrollmentColumns = [
    {
      Header: 'Enterprise Name',
      accessor: 'enterpriseCustomerName',
    },
    {
      Header: 'Data Sharing Consent Provided',
      accessor: 'consentProvided',
    },
    {
      Header: 'Data Sharing Consent Required',
      accessor: 'consentRequired',
    },
    {
      Header: 'License',
      accessor: 'license',
    },
    {
      Header: 'License Revoked',
      accessor: 'isLicenseRevoked',
    },
  ];

  /* eslint-disable react/prop-types */
  const renderRowSubComponent = useCallback(
    ({ row }) => (
      <>
        <Table
          data={[row.original.expander]}
          columns={extraColumns}
          styleName="custom-expander-table"
        />
        {row.original.enterpriseCourseEnrollments?.length > 0 && (
          <>
            <hr />
            <div className="custom-expander-table">
              <h4 className="my-3">Enterprise Course Enrollments {`(${row.original.enterpriseCourseEnrollments.length})`}</h4>
              <Table
                data={row.original.enterpriseCourseEnrollments}
                columns={enterpriseCourseEnrollmentColumns}
              />
            </div>
          </>
        )}
      </>
    ),
    [],
  );
  /* eslint-enable react/prop-types */

  return (
    <section className="mb-3">
      <div className="row">
        <h3 className="ml-4 mr-auto">Enrollments ({tableData.length})</h3>
        <Button
          id="create-enrollment-button"
          type="button"
          variant="outline-primary mr-4"
          size="sm"
          onClick={() => {
            setEnrollmentToChange(undefined);
            setFormType(CREATE);
          }}
        >
          Create New Enrollment
        </Button>
      </div>
      {enrollmentData
        ? (
          <Table
            columns={columns}
            data={tableData}
            renderRowSubComponent={renderRowSubComponent}
            styleName={tableData.length === 1 ? 'custom-table mb-60' : 'custom-table'}
            defaultSortColumn={defaultSortColumn}
          />
        )
        : <PageLoading srMessage="Loading" />}

      <AlertList topic="enrollments" className="mb-3" />
      <TransitionReplace>
        {formType != null ? (
          <EnrollmentForm
            key="enrollment-form"
            enrollment={enrollmentToChange}
            formType={formType}
            user={user}
            submitHandler={() => {}}
            changeHandler={changeHandler}
            closeHandler={() => setFormType(null)}
            forwardedRef={formRef}
          />
        ) : (<React.Fragment key="nothing" />) }
      </TransitionReplace>
      <TransitionReplace>
        {selectedCourseId !== undefined ? (
          <Certificates
            key="certificates-data"
            closeHandler={() => setSelectedCourseId(undefined)}
            courseId={selectedCourseId}
            username={user}
          />
        ) : (<React.Fragment key="nothing" />) }
      </TransitionReplace>
    </section>
  );
}

export default function Entitlements({
  user,
  searchStr,
}) {
  const { add, clear } = useContext(UserMessagesContext);
  const [formType, setFormType] = useState(null);
  const [userEntitlement, setUserEntitlement] = useState(undefined);
  const [courseSummaryUUID, setCourseSummaryUUID] = useState(null);
  const [entitlementData, setEntitlementData] = useState(null);
  const formRef = useRef(null);

  const changeHandler = () => setEntitlementData(null);

  useEffect(() => {
    if (entitlementData === null) {
      clear('entitlements');
      getEntitlements(user).then((result) => {
        const camelCaseResult = camelCaseObject(result);
        if (camelCaseResult.errors) {
          camelCaseResult.errors.forEach(error => add(error));
          setEntitlementData({ results: [] });
        } else {
          setEntitlementData(camelCaseResult);
        }
      });
    }
  }, [user, entitlementData]);

  const tableData = useMemo(() => {
    if (entitlementData === null) {
      return [];
    }
    return entitlementData.results.filter(
      entitlement => (entitlement.courseUuid.toLowerCase().includes(searchStr)
          || (entitlement.enrollmentCourseRun && entitlement.enrollmentCourseRun.toLowerCase().includes(searchStr))),
    ).map(entitlement => ({
      expander: entitlement.supportDetails.map(supportDetail => ({
        action: supportDetail.action,
        comments: supportDetail.comments,
        actionCreated: supportDetail.created,
        supportUser: supportDetail.supportUser,
        unenrolledRun: supportDetail.unenrolledRun,
      })),
      courseUuid: entitlement.courseUuid,
      courseSummary: (
        <Hyperlink
          destination=""
          target="_blank"
          onClick={(event) => {
            event.preventDefault();
            setFormType(null);
            setUserEntitlement(undefined);
            setCourseSummaryUUID(entitlement.courseUuid);
          }}
        >
          See Details
        </Hyperlink>
      ),
      enrollmentCourseRun: (entitlement.enrollmentCourseRun ? (
        <a
          href={`${getConfig().LMS_BASE_URL}/courses/${entitlement.enrollmentCourseRun}`}
          rel="noopener noreferrer"
          target="_blank"
        >
          {entitlement.enrollmentCourseRun}
        </a>
      ) : 'Course Run Not Selected'),
      expiredAt: entitlement.expiredAt,
      created: entitlement.created,
      modified: entitlement.modified,
      orderNumber: (
        <a
          href={`${getConfig().ECOMMERCE_BASE_URL}/dashboard/orders/${entitlement.orderNumber}/`}
          rel="noopener noreferrer"
          target="_blank"
        >
          {entitlement.orderNumber}
        </a>
      ),
      mode: entitlement.mode,
      actions: (
        <Dropdown>
          <Dropdown.Toggle variant="sm">
            Actions
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Item
              onClick={() => {
                setCourseSummaryUUID(null);
                setUserEntitlement(entitlement);
                setFormType(REISSUE);
              }}
              // disable if entitlement has no associated course run
              disabled={Boolean(!entitlement.enrollmentCourseRun)}
              className="small"
            >
              Reissue
            </Dropdown.Item>
            <Dropdown.Item
              onClick={() => {
                setCourseSummaryUUID(null);
                setUserEntitlement(entitlement);
                setFormType(EXPIRE);
              }}
              disabled={Boolean(entitlement.expiredAt)}
              className="small"
            >
              Expire
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>

      ),
    }));
  }, [entitlementData, searchStr]);

  useLayoutEffect(() => {
    if (formType != null) {
      formRef.current.focus();
    }
  });

  const expandAllRowsHandler = ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
    <a {...getToggleAllRowsExpandedProps()} className="link-primary">
      { isAllRowsExpanded ? 'Collapse All' : 'Expand All' }
    </a>
  );
  expandAllRowsHandler.propTypes = {
    getToggleAllRowsExpandedProps: PropTypes.func.isRequired,
    isAllRowsExpanded: PropTypes.bool.isRequired,
  };

  const rowExpandHandler = ({ row }) => (
    // We can use the getToggleRowExpandedProps prop-getter
    // to build the expander.
    <div className="text-center">
      <span {...row.getToggleRowExpandedProps()}>
        {row.isExpanded ? (
          <FontAwesomeIcon icon={faMinus} />
        ) : <FontAwesomeIcon icon={faPlus} />}
      </span>
    </div>
  );

  rowExpandHandler.propTypes = {
    row: PropTypes.shape({
      isExpanded: PropTypes.bool,
      getToggleRowExpandedProps: PropTypes.func,
    }).isRequired,
  };

  const columns = React.useMemo(
    () => [
      {
        // Make an expander column
        Header: expandAllRowsHandler,
        id: 'expander',
        Cell: rowExpandHandler, // Use Cell to render an expander for each row.
      },
      {
        Header: 'Course UUID', accessor: 'courseUuid', sortable: true,
      },
      {
        Header: 'Course Run ID', accessor: 'enrollmentCourseRun', sortable: true,
      },
      {
        Header: 'Course Summary', accessor: 'courseSummary',
      },
      {
        Header: 'Expiration Date', accessor: 'expiredAt', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Date Created', accessor: 'created', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Date Modified', accessor: 'modified', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Order', accessor: 'orderNumber', sortable: true,
      },
      {
        Header: 'Mode', accessor: 'mode', sortable: true,
      },
      {
        Header: 'Actions', accessor: 'actions',
      },
    ],
    [],
  );

  const supportDetailsColumn = React.useMemo(
    () => [
      {
        Header: 'Action', accessor: 'action', sortable: true,
      },
      {
        Header: 'Comments', accessor: 'comments', sortable: true,
      },
      {
        Header: 'Action Creation Timestamp', accessor: 'actionCreated', Cell: ({ value }) => formatDate(value), sortable: true,
      },
      {
        Header: 'Support User', accessor: 'supportUser', sortable: true,
      },
      {
        Header: 'Unenrolled Run', accessor: 'unenrolledRun', sortable: true,
      },
    ],
    [],
  );

  const renderRowSubComponent = useCallback(
    ({ row }) => (
      <Table
        // eslint-disable-next-line react/prop-types
        data={row.original.expander}
        columns={supportDetailsColumn}
        styleName="custom-expander-table"
      />
    ),
    [],
  );

  return (
    <section className="mb-3">
      <div className="row">
        <h3 className="ml-4 mr-auto">Entitlements ({tableData.length})</h3>
        <Button
          id="create-enrollment-button"
          type="button"
          variant="outline-primary mr-4"
          size="sm"
          onClick={() => {
            setCourseSummaryUUID(null);
            setUserEntitlement(undefined);
            setFormType(CREATE);
          }}
        >
          Create New Entitlement
        </Button>
      </div>

      {!entitlementData
        ? <PageLoading srMessage="Loading" />
        : (
          <Table
            columns={columns}
            data={tableData}
            renderRowSubComponent={renderRowSubComponent}
            styleName={tableData.length === 1 ? 'custom-table mb-60' : 'custom-table'}
          />
        )}

      <AlertList topic="entitlements" className="mb-3" />
      <TransitionReplace>
        {formType !== null ? (
          <EntitlementForm
            key="entitlement-form"
            user={user}
            entitlement={userEntitlement}
            formType={formType}
            changeHandler={changeHandler}
            submitHandler={() => { }}
            closeHandler={() => setFormType(null)}
            forwardedRef={formRef}
          />
        ) : (<React.Fragment key="nothing" />)}
      </TransitionReplace>
      <TransitionReplace>
        {courseSummaryUUID !== null ? (
          <CourseSummary
            courseUUID={courseSummaryUUID}
            closeHandler={() => {
              setCourseSummaryUUID(null);
            }}
          />
        ) : (<React.Fragment key="nothing" />)}
      </TransitionReplace>
    </section>
  );
}

export default function DemoDashboard() {
  return (
    <>
      <LteContentHeader title='Dashboard' />
      <LteContent>
        <Row>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
          </Col>
          <div className='clearfix hidden-md-up' />
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
          </Col>
        </Row>

        <Row>
          <Col lg='3' xs='6'>
            <LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
          </Col>
        </Row>

        <Row>
          <Col lg='8'>
            <Card>
              <CardHeader className='border-transparent'>
                <CardTitle>Latest Orders</CardTitle>
                <LteCardTools>
                  <Button color='' className='btn-tool' data-card-widget='collapse'>
                    <FontAwesomeIcon icon={faMinus} />
                  </Button>
                  <Button color='' className='btn-tool' data-card-widget='remove'>
                    <FontAwesomeIcon icon={faTimes} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody className='p-0'>
                <Table responsive>
                  <thead>
                    <tr>
                      <th>Order ID</th>
                      <th>Item</th>
                      <th>Status</th>
                      <th>Popularity</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='info'>
                          Processing
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00c0ef' data-height='20'>
                          90,80,-90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </CardBody>
            </Card>

            <Row>
              <Col lg='6'>
                <LteDirectChat color='warning'>
                  <CardHeader>
                    <CardTitle>Direct Chat</CardTitle>
                    <LteCardTools>
                      <Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
                        3
                      </Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button
                        color=''
                        className='btn-tool'
                        data-toggle='tooltip'
                        title='Contacts'
                        data-widget='chat-pane-toggle'
                      >
                        <FontAwesomeIcon icon={faComments} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody>
                    <LteDirectChatMessages>
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 2:00 pm'
                        image={user1}
                        message="Is this template really for free? That's unbelievable!"
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 2:05 pm'
                        image={user3}
                        message='You better believe it!'
                      />
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 5:37 pm'
                        image={user1}
                        message='Working with AdminLTE on a great new app! Wanna join?'
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 6:10 pm'
                        image={user3}
                        message='I would love to.'
                      />
                    </LteDirectChatMessages>
                    <LteDirectChatContacts>
                      <LteContactsList>
                        <LteContactsListItem
                          href='/contacts'
                          image={user1}
                          name='Count Dracula'
                          date='2/28/2015'
                          message='How have you been? I was...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user7}
                          name='Sarah Doe'
                          date='2/23/2015'
                          message='I will be waiting for...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user3}
                          name='Nadia Jolie'
                          date='2/20/2015'
                          message="I'll call you back at..."
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user5}
                          name='Nora S. Vans'
                          date='2/10/2015'
                          message='Where is your new...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user6}
                          name='John K.'
                          date='1/27/2015'
                          message='Can I take a look at...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user8}
                          name='Kenneth M.'
                          date='1/4/2015'
                          message='Never mind I found...'
                        />
                      </LteContactsList>
                    </LteDirectChatContacts>
                  </CardBody>
                  <CardFooter>
                    <Form>
                      <InputGroup>
                        <Input placeholder='Type Message ...' />
                        <InputGroupAddon addonType='append'>
                          <Button color='warning'>Send</Button>
                        </InputGroupAddon>
                      </InputGroup>
                    </Form>
                  </CardFooter>
                </LteDirectChat>
              </Col>
              <Col lg='6'>
                <Card>
                  <CardHeader>
                    <CardTitle>Latest Members</CardTitle>
                    <LteCardTools>
                      <Badge color='danger'>8 New Members</Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody className='p-0'>
                    <LteUsersList>
                      <LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
                      <LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
                      <LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
                      <LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
                      <LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
                      <LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
                      <LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
                      <LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
                    </LteUsersList>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Col>
          <Col lg='4'>
            <LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
            <LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
            <LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
            <LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
            <Card>
              <CardHeader className='border-0'>
                <CardTitle>Online Store Overview</CardTitle>
                <LteCardTools>
                  <Button className='btn-tool' color=''>
                    <FontAwesomeIcon icon={faDownload} />
                  </Button>
                  <Button color='' className='btn-tool'>
                    <FontAwesomeIcon icon={faBars} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-success text-xl'>
                    <FontAwesomeIcon icon={faRedo} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-success' />
                      12%
                    </span>
                    <span className='text-muted'>CONVERSION RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-warning text-xl'>
                    <FontAwesomeIcon icon={faShoppingCart} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
                    </span>
                    <span className='text-muted'>SALES RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center mb-0'>
                  <p className='text-danger text-xl'>
                    <FontAwesomeIcon icon={faUsers} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
                    </span>
                    <span className='text-muted'>REGISTRATION RATE</span>
                  </p>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </LteContent>
    </>
  );
}