Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/Analytics/MetricVsTarget.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { 
+    Progress,
+    InputGroupAddon,
+    InputGroupText,
+    Input,
+    InputGroup
+} from './../../../components';
+
+
+const MetricVsTarget = (props) => (
+    <React.Fragment>
+        <h2 className="pt-4 pb-2">
+            { props.value }
+        </h2>
+        <Progress value={ `${ props.progressbarValue }` } color={ `${ props.progressbarColor }` } className="mb-2" style={{height: "5px"}} />
+        <div className="mb-3">
+            Target: { props.targetValue }
+        </div>
+        <InputGroup className="mb-1">
+            <InputGroupAddon addonType="prepend">
+                <InputGroupText>Daily Target:</InputGroupText>
+            </InputGroupAddon>
+            <Input placeholder="Enter..." />
+        </InputGroup>
+    </React.Fragment>
+)
+MetricVsTarget.propTypes = {
+    title: PropTypes.node,
+    value: PropTypes.node,
+    progressbarValue: PropTypes.string,
+    progressbarColor: PropTypes.node,
+    targetValue: PropTypes.node
+};
+MetricVsTarget.defaultProps = {
+    title: "Title",
+    value: "000.000",
+    progressbarValue: "24",
+    progressbarColor: "secondary",
+    targetValue: "000.000"
+};
+
+
+export { MetricVsTarget };

app/routes/components/Analytics/SessionsByDevice.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SessionsByDevice = (props) => (
+    <React.Fragment>
+        <div className={ `mb-2 ${ props.valuePercentColor }` }>
+            { props.title }
+        </div>
+        <h2 className={ `${ props.valuePercentColor }` }>
+            { props.valuePercent }%
+        </h2>
+        <div className={ `mb-3 ${ props.valueColor }` }>
+            { props.value }
+        </div>
+    </React.Fragment>
+)
+SessionsByDevice.propTypes = {
+    title: PropTypes.node,
+    titlePercentColor: PropTypes.node,
+    valuePercent: PropTypes.string,
+    valuePercentColor: PropTypes.node,
+    value: PropTypes.node,
+    valueColor: PropTypes.node
+};
+SessionsByDevice.defaultProps = {
+    title: "Title",
+    titlePercentColor: "text-inverse",
+    valuePercent: "00,0",
+    valuePercentColor: "text-muted",
+    value: "000,000",
+    valueColor: "text-muted"
+};
+
+
+export { SessionsByDevice };

app/routes/components/Analytics/TinyAreaChart.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChart = ({ height }) => (
+    <ResponsiveContainer width='100%' height={ height }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+TinyAreaChart.propTypes = {
+    height: PropTypes.number,
+};
+TinyAreaChart.defaultProps = {
+    height: 25,
+};
+
+export { TinyAreaChart };

app/routes/components/Analytics/TinyAreaChartSpend.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChartSpend = () => (
+    <ResponsiveContainer width='100%' height={ 125 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChartSpend };

app/routes/components/Analytics/TrTableTrafficChannels.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import _ from 'lodash';
+import faker from 'faker/locale/en_US';
+import {  
+    Media, 
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray } from './../../../utilities';
+
+import {
+    TinyAreaChart
+} from "./TinyAreaChart";
+
+const channel = [
+    "Organic Search",
+    "Display",
+    "Direct",
+    "Paid Search"
+];
+
+const change = [
+    "75,0% ",
+    "34,4% ",
+    "12,9%",
+    "23,0%"
+];
+
+const TrTableTrafficChannels = () => (
+    <React.Fragment>
+        {
+            _.times(5, (index) => (
+                <tr key={ index }>
+                    <td className="align-middle text-inverse">
+                        { randomArray(channel) }
+                    </td>
+                    <td className="text-inverse align-middle">
+                        { faker.finance.amount() }
+                    </td>
+                    <td className="align-middle">
+                        { faker.finance.amount() }
+                    </td>
+                    <td className="align-middle text-right">
+                        { randomArray(change) } <i className="fa fa-caret-down text-danger ml-1"></i>
+                    </td>
+                    <td className="text-right align-middle">
+                        <TinyAreaChart />
+                    </td>
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableTrafficChannels };

app/routes/components/Analytics/WebsitePerformance.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import PropTypes from 'prop-types';
+
+import { 
+    Row,
+    Col
+} from './../../../components';
+
+import {
+    TinyAreaChart
+} from "./../../Graphs/ReCharts/components/TinyAreaChart";
+
+const WebsitePerformance = (props) => (
+    <React.Fragment>
+        <Row noGutters className="flex-column-reverse flex-md-row flex-nowrap">
+            <Col sm={ 12 } md="auto" className="d-flex align-items-start flex-column flex-fill">
+                <h6 className="mb-auto d-none d-md-block text-md-left">
+                    { props.title }
+                </h6>
+                <TinyAreaChart />
+            </Col>
+            <Col sm={ 12 } md="auto" className="text-center text-md-right pl-md-2">
+                <h2>
+                    { props.value }
+                </h2>
+                <div className={ `mb-1 ${ props.valuePercentColor }` }>
+                    <i className={ `fa mr-1 fa-${ props.valuePercentIcon }` }></i>
+                    { props.valuePercent }%
+                </div>
+                <div>
+                    vs { faker.finance .amount() } <i>(prev.)</i>
+                </div>
+            </Col>
+        </Row>
+    </React.Fragment>
+)
+WebsitePerformance.propTypes = {
+    title: PropTypes.node,
+    value: PropTypes.node,
+    valuePercentColor: PropTypes.node,
+    valuePercentIcon: PropTypes.node,
+    valuePercent: PropTypes.node
+};
+WebsitePerformance.defaultProps = {
+    title: "Title",
+    value: "00.000",
+    valuePercentColor: "text-muted",
+    valuePercentIcon: "caret-down",
+    valuePercent: "00,00"
+};
+
+
+export { WebsitePerformance };

app/routes/components/Attachment.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import faker from 'faker/locale/en_US';
+import { 
+    Media, 
+    Button 
+} from 'reactstrap';
+
+const Attachment = (props) => (
+        <Media className={ `${ props.mediaClassName }` }>
+            <Media left className="mr-2">
+                <span className="fa-stack fa-lg">
+                    <i className={ `fa fa-square fa-stack-2x fa-${ props.BgIcon } fa-stack-1x ${ props.BgIconClassName }` }></i>
+                    <i className={ `fa fa-${ props.icon } fa-stack-1x ${ props.iconClassName }` }></i>
+                </span>
+            </Media>
+            <Media body className="d-flex flex-column flex-md-row">
+                <div>
+                    <div className="text-inverse text-truncate">
+                        { faker.system.fileName() }
+                    </div>
+                    <span>
+                        by <span>
+                            { faker.name.firstName() } { faker.name.firstName() }
+                        </span> 
+                        <span className="text-muted"> · </span> 
+                        <span>
+                            { faker.finance.amount() } Kb
+                        </span>
+                    </span>
+                </div>
+                <div className="ml-md-auto flex-row-reverse flex-md-row d-flex justify-content-end mt-2 mt-md-0">
+                    <div className="text-left text-md-right mr-3">
+                        04-Oct-2012<br />
+                        05:20 PM
+                    </div>
+                    <Button color="link" className="align-self-center mr-2 mr-md-0">
+                        <i className="fa fa-fw fa-download"></i>
+                    </Button>
+                </div>
+            </Media>
+        </Media>
+
+
+)
+Attachment.propTypes = {
+    mediaClassName: PropTypes.node,
+    icon: PropTypes.node,
+    iconClassName: PropTypes.node,
+    BgIcon: PropTypes.node,
+    BgIconClassName: PropTypes.node
+};
+Attachment.defaultProps = {
+    mediaClassName: "",
+    icon: "question",
+    iconClassName: "text-white",
+    BgIcon: "square",
+    BgIconClassName: "text-muted"
+};
+
+export { Attachment };

app/routes/components/CardFooterInfo.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CardFooterInfo = (props) => (
+    <React.Fragment>
+        <div className="small">
+            <i className={ `fa fa-fw fa-${ props.icon } ${ props.iconClassName } mr-2` }></i>
+            { props.text }
+        </div>
+    </React.Fragment>
+
+)
+CardFooterInfo.propTypes = {
+    icon: PropTypes.node,
+    iconClassName: PropTypes.node,
+    text: PropTypes.node,
+};
+CardFooterInfo.defaultProps = {
+    icon: "question-circle",
+    iconClassName: "text-muted",
+    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam beatae, nesciunt incidunt laudantium. Eveniet ratione quis accusantium dolorum velit maiores illo mollitia."
+};
+
+export { CardFooterInfo };

app/routes/components/CardTextDemo.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CardText } from './../../components';
+
+const CardTextDemo = (props) => (
+    <CardText>
+        <span className="mr-2">
+            #{ props.cardNo }
+        </span> 
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nisl elit, porta a sapien eget, fringilla sagittis ex.
+    </CardText>
+)
+CardTextDemo.propTypes = {
+    cardNo: PropTypes.node
+};
+CardTextDemo.defaultProps = {
+    cardNo: "?.??"
+};
+
+export { CardTextDemo };

app/routes/components/Chat/ChatCardFooter.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { 
+    InputGroup,
+    InputGroupAddon,
+    Button,
+    Input
+} from './../../../components';
+
+const ChatCardFooter = () => (
+    <React.Fragment>
+        <InputGroup>
+            <InputGroupAddon addonType="prepend">
+                <Button color="secondary" outline>
+                    <i className="fa fa fa-paperclip"></i>
+                </Button>
+            </InputGroupAddon>
+            <Input placeholder="Your message..." />
+            <InputGroupAddon addonType="append">
+                <Button color="primary" tag={ Link } to="/apps/chat">
+                    <i className="fa fa fa-send"></i>
+                </Button>
+            </InputGroupAddon>
+        </InputGroup>
+    </React.Fragment>
+)
+
+export { ChatCardFooter };

app/routes/components/Chat/ChatCardHeader.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { 
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem,
+} from './../../../components';
+
+const ChatCardHeader = () => (
+    <React.Fragment>
+    <h6 className="align-self-center mb-0">
+        Chat with Romaine Weber
+    </h6>
+    <UncontrolledButtonDropdown className="align-self-center ml-auto">
+    <DropdownToggle color="link" size="sm" className="text-decoration-none">
+        <i className="fa fa-gear"></i><i className="fa fa-angle-down ml-2"></i>
+    </DropdownToggle>
+    <DropdownMenu right>
+        <DropdownItem>
+            <i className="fa fa-fw fa-comment mr-2"></i>
+            Private Message
+        </DropdownItem>
+        <DropdownItem>
+            <i className="fa fa-fw fa-search mr-2"></i>
+            Search this Thread
+        </DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>
+            <i className="fa fa-fw fa-ban mr-2"></i>
+            Block this User
+        </DropdownItem>
+    </DropdownMenu>
+    </UncontrolledButtonDropdown>
+    </React.Fragment>
+)
+
+export { ChatCardHeader };

app/routes/components/Chat/ChatLeft.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "warning",
+    "danger",
+    "success",
+    "secondary"
+];
+
+const ChatLeft = (props) => (
+    <React.Fragment>
+        <Media className="mb-2">
+            <Media left className="mr-3">
+                <Avatar.Image
+                    size="md"
+                    src={ randomAvatar() }
+                    className="mr-2"
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-bg"
+                        />,
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color={ randomArray(status) }
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Media>
+            <Media body>
+                <Card body className={ `mb-2 ${ props.cardClassName }` }>
+                    <p className="mb-0">
+                        { faker.lorem.paragraph() }
+                    </p>                                                   
+                </Card>
+                <div className="mb-2">
+                    <span className="text-inverse mr-2">
+                        { faker.name.firstName() } { faker.name.firstName() }
+                    </span>
+                    <span className="small">
+                        13-Jun-2015, 08:13
+                    </span>
+                </div>
+            </Media>
+        </Media>
+    </React.Fragment>
+)
+ChatLeft.propTypes = {
+    cardClassName: PropTypes.node
+};
+ChatLeft.defaultProps = {
+    cardClassName: "bg-white"
+};
+
+export { ChatLeft };

app/routes/components/Chat/ChatLeftNav.js

@@ -0,0 +1,248 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Nav,
+    NavItem,
+    Media,
+    InputGroup,
+    Input,
+    InputGroupAddon,
+    Button,
+    Avatar,
+    AvatarAddOn,
+    NavLink
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+const ChatLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Search
+            </div>
+            <InputGroup>
+                <Input placeholder="Search for..." />
+                <InputGroupAddon addonType="append">
+                    <Button outline color="secondary">
+                        <i className="fa fa-search"></i>
+                    </Button>
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="mt-4 mb-2">
+                <span className="small">
+                    Contacts
+                </span>
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="/chat" active>
+                        <Media>
+                            <Media left className="align-self-start mr-3">
+                                <Avatar.Image
+                                    size="sm"
+                                    src={ randomAvatar() }
+                                    addOns={[
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="primary"
+                                            key="avatar-icon-bg"
+                                        />,
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="danger"
+                                            key="avatar-icon-fg"
+                                        />
+                                    ]}
+                                /> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0 d-flex">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.country() }
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-3">
+                                <Avatar.Image
+                                    size="sm"
+                                    src={ randomAvatar() }
+                                    addOns={[
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="white"
+                                            key="avatar-icon-bg"
+                                        />,
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="success"
+                                            key="avatar-icon-fg"
+                                        />
+                                    ]}
+                                /> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0 d-flex">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.country() }
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-3">
+                                <Avatar.Image
+                                    size="sm"
+                                    src={ randomAvatar() }
+                                    addOns={[
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="white"
+                                            key="avatar-icon-bg"
+                                        />,
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="secondary"
+                                            key="avatar-icon-fg"
+                                        />
+                                    ]}
+                                /> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0 d-flex">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.country() }
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        Show All <span className="small mr-2">(345)</span>
+                        <i className="fa fa-angle-down"></i>
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="mt-4 mb-2">
+                <span className="small">
+                    Updates
+                </span>
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-1">
+                                <span className="fa-stack fa-lg fa-fw d-flex align-self-center mr-3">
+                                    <i className="fa fa-circle fa-fw fa-stack-2x text-warning"></i>
+                                    <i className="fa fa-exclamation fa-stack-1x fa-fw text-white"></i>
+                                </span> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.hacker.phrase() }
+                                </div>
+                                <span className="small">
+                                    24-Aug-2012, 12:12
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-1">
+                                <span className="fa-stack fa-lg fa-fw d-flex align-self-center mr-3">
+                                    <i className="fa fa-circle fa-fw fa-stack-2x text-danger"></i>
+                                    <i className="fa fa-close fa-stack-1x fa-fw text-white"></i>
+                                </span> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.hacker.phrase() }
+                                </div>
+                                <span className="small">
+                                    24-Aug-2012, 12:12
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-1">
+                                <span className="fa-stack fa-lg fa-fw d-flex align-self-center mr-3">
+                                    <i className="fa fa-circle fa-fw fa-stack-2x text-success"></i>
+                                    <i className="fa fa-check fa-stack-1x fa-fw text-white"></i>
+                                </span> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.hacker.phrase() }
+                                </div>
+                                <span className="small">
+                                    24-Aug-2012, 12:12
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        <Media>
+                            <Media left className="align-self-start mr-1">
+                                <span className="fa-stack fa-lg fa-fw d-flex align-self-center mr-3">
+                                    <i className="fa fa-circle fa-fw fa-stack-2x text-primary"></i>
+                                    <i className="fa fa-info fa-stack-1x fa-fw text-white"></i>
+                                </span> 
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.hacker.phrase() }
+                                </div>
+                                <span className="small">
+                                    24-Aug-2012, 12:12
+                                </span>
+                            </Media>
+                        </Media>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/chat">
+                        Show All <span className="small mr-2">(12)</span>
+                        <i className="fa fa-angle-down"></i>
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { ChatLeftNav };

app/routes/components/Chat/ChatRight.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "warning",
+    "danger",
+    "success",
+    "secondary"
+];
+
+const ChatRight = (props) => (
+    <React.Fragment>
+        <Media className="mb-2">
+            <Media body>
+                <Card body className={ `mb-2 ${ props.cardClassName }` }>
+                    <p className="mb-0">
+                        { faker.lorem.paragraph() }
+                    </p>                                                   
+                </Card>
+                <div className="mb-2 text-right">
+                    <span className="text-inverse mr-2">
+                        { faker.name.firstName() } { faker.name.firstName() }
+                    </span>
+                    <span className="small">
+                        13-Jun-2015, 08:13
+                    </span>
+                </div>
+            </Media>
+            <Media right className="ml-3">
+                <Avatar.Image
+                    size="md"
+                    src={ randomAvatar() }
+                    className="mr-2"
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-bg"
+                        />,
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color={ randomArray(status) }
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Media>
+        </Media>
+    </React.Fragment>
+)
+ChatRight.propTypes = {
+    cardClassName: PropTypes.node
+};
+ChatRight.defaultProps = {
+    cardClassName: "bg-white"
+};
+
+export { ChatRight };

app/routes/components/Colors/CardColor.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { 
+    Card, 
+    CardTitle, 
+    CardBody, 
+    CardHeader
+} from './../../../components';
+
+import { InfoPopover } from './InfoPopover';
+
+const CardColor = (props) => (
+    <Card className={ `mb-3 ${ props.cardClass }` }>
+        <CardHeader className={ `bg-${ props.color }` } style={{ height: '120px' }} />
+        <CardBody>
+            <CardTitle tag="h6">
+                { props.color }
+            </CardTitle>
+            <dl className="row mb-0">
+                <dt className="col-sm-4">Hex</dt>
+                <dd className="col-sm-8 text-inverse samp">
+                    {props.hex}
+                </dd>
+                <dt className="col-sm-4">Rgba</dt>
+                <dd className="col-sm-8 text-inverse">
+                    {props.rgba}
+                </dd>
+                <dt className="col-sm-4">Cmyk</dt>
+                <dd className="col-sm-8 text-inverse">
+                    {props.cmyk}
+                </dd>
+                <dt className="col-sm-4">Scss</dt>
+                <dd className="col-sm-8 text-inverse">
+                    ${ props.color }
+                </dd>
+                <dt className="col-sm-4">More</dt>
+                <dd className="col-sm-8 text-inverse">
+                    <InfoPopover colorId={ props.color } href="javascript:;">
+                        Details 
+                        <i className="fa fa-angle-up ml-1"></i>
+                    </InfoPopover>
+                </dd>
+            </dl>
+        </CardBody>
+    </Card>
+
+)
+CardColor.propTypes = {
+    cardClass: PropTypes.node,
+    color: PropTypes.node,
+    hex: PropTypes.node,
+    rgba: PropTypes.node,
+    cmyk: PropTypes.node,
+    scss: PropTypes.node
+};
+CardColor.defaultProps = {
+    cardClass: "",
+    color: "Waiting for Data...",
+    hex: "Waiting for Data...",
+    rgba: "Waiting for Data...",
+    cmyk: "Waiting for Data...",
+    scss: "Waiting for Data...",
+};
+
+export { CardColor };

app/routes/components/Colors/CardRgbaColor.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { 
+    Card, 
+    CardBody, 
+    CardFooter,
+    Button,
+    CardHeader
+} from './../../../components';
+
+import { InfoPopover } from './InfoPopover';
+
+const CardRgbaColor = (props) => (
+    <Card className={ `mb-3 ${ props.cardClass }` }>
+    {
+        _.times(9, (index) => {
+            let Tag = CardFooter;
+            Tag = index === 0 ? CardHeader : CardBody;
+            Tag = index === 8 ? CardFooter : CardBody;
+            const colorId = `${ props.color }-0${ index + 1 }`
+            return (
+                <Tag className={ `d-flex justify-content-center b-0 bg-${ colorId }` } key={ index }>
+                    <InfoPopover className="h6 text-inverse p-1 mb-0" colorId={ colorId } tag={ Button } color="link">
+                        { colorId } 
+                        <i className="fa fa-angle-up ml-1"></i>
+                    </InfoPopover>
+                </Tag>
+            );
+        })
+    }
+    </Card>
+);
+CardRgbaColor.propTypes = {
+    cardClass: PropTypes.node,
+    color: PropTypes.node
+};
+CardRgbaColor.defaultProps = {
+    cardClass: "",
+    color: "Waiting for Data..."
+};
+
+export { CardRgbaColor };

app/routes/components/Colors/InfoPopover.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    UncontrolledPopover,
+    PopoverHeader,
+    PopoverBody,
+    Button
+} from './../../../components';
+
+export const POPOVER_BODY_PARTS = [
+    '.text-',
+    '.bg-',
+    '.b-',
+    '.bl-',
+    '.br-',
+    '.bt-',
+    '.bb-',
+    '.by-',
+    '.bx-',
+    '.btn-'
+];
+
+export const InfoPopover = ({ colorId, children, className, tag: Tag, ...otherProps }) => (
+    <React.Fragment>
+        <Tag color="link" id={ `color-popover--${ colorId }` } className={ className } { ...otherProps }>
+            { children }
+        </Tag>
+        <UncontrolledPopover
+            target={ `color-popover--${ colorId }` }
+            placement="top"
+        >
+            <PopoverHeader>
+                Color Options for { colorId }
+            </PopoverHeader>
+            <PopoverBody>
+            {
+                POPOVER_BODY_PARTS.map((partText, index) =>
+                    <span className="mr-1" key={ index }>{ `${partText}${colorId}` }</span>
+                )
+            }   
+            </PopoverBody>
+        </UncontrolledPopover>
+    </React.Fragment>
+);
+InfoPopover.propTypes = {
+    colorId: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tag: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func
+    ])
+};
+InfoPopover.defaultProps = {
+    tag: 'a'
+}

app/routes/components/Comment.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import faker from 'faker/locale/en_US';
+import { 
+    Avatar,
+    Media,
+    AvatarAddOn,
+    UncontrolledTooltip 
+} from './../../components';
+import { randomArray, randomAvatar } from './../../utilities';
+
+const status = [
+    "success",
+    "danger",
+    "warning",
+    "secondary"
+];
+
+const Comment = (props) => (
+
+    <Media className={ `mb-4 ${ props.mediaClassName }` }>
+        <Media left className="mr-3">
+            <Avatar.Image
+                size="md"
+                src={ randomAvatar() }
+                className="mr-2"
+                addOns={[
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color="white"
+                        key="avatar-icon-bg"
+                    />,
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color={ randomArray(status) }
+                        key="avatar-icon-fg"
+                    />
+                ]}
+            />
+        </Media>
+        <Media body>
+            <div className="mb-2">
+                <span className="text-inverse mr-2">
+                    { faker.name.firstName() } { faker.name.firstName() }
+                </span>
+                <span className="small">
+                    13-Jun-2015, 08:13
+                </span>
+            </div>
+            <p className="mb-1">
+                { faker.lorem.paragraph() }
+            </p>
+            <div>
+                <span className="text-success mr-2">
+                    +92
+                </span>
+                <a href="#" id="tooltipVoteUp1" className="mr-2">
+                    <i className="fa fa-angle-up text-success"></i>
+                </a>
+                <UncontrolledTooltip placement="top" target="tooltipVoteUp1">
+                    Vote Up
+                </UncontrolledTooltip>
+                <a href="#" id="tooltipVoteDown2" className="mr-2">
+                    <i className="fa fa-angle-down text-danger"></i>
+                </a>
+                <UncontrolledTooltip placement="bottom" target="tooltipVoteDown2">
+                    Vote Down
+                </UncontrolledTooltip>
+                <span className="mr-2">·</span>
+                <a href="#" className="mr-2">
+                    Reply
+                </a>
+                <span className="mr-2">·</span>
+                <a href="#">
+                    Edit
+                </a>
+            </div>
+        </Media>
+    </Media>
+
+)
+Comment.propTypes = {
+    mediaClassName: PropTypes.node
+};
+Comment.defaultProps = {
+    mediaClassName: "text-empty"
+};
+
+export { Comment };

app/routes/components/Dropdowns/Activity.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import faker from 'faker/locale/en_US';
+import { 
+    Media, 
+} from './../../../components';
+
+const Activity = (props) => (
+    <React.Fragment>
+        <Media>
+            <Media left>
+                <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+                    <i className={ `fa fa-fw fa-stack-2x fa-stack-2x text-${ props.iconColorBelow } fa-${ props.iconBelow }` }></i>
+                    <i className={ `fa fa-stack-1x fa-fw text-${ props.iconColor } fa-${ props.icon }` }></i>
+                </span>
+            </Media>
+            <Media body>
+                <span className="h6">
+                    { faker.name.firstName() } { faker.name.lastName() }
+                </span> changed Description to &quot;{ faker.random.words() }&quot;
+                <p className="mt-2 mb-1">
+                    { faker.lorem.sentence() }
+                </p>
+                <div className="small mt-2">
+                    { faker.date.past().toString() }
+                </div>
+            </Media>
+        </Media>
+    </React.Fragment>
+
+)
+Activity.propTypes = {
+    iconColorBelow: PropTypes.node,
+    iconBelow: PropTypes.node,
+    iconColor: PropTypes.node,
+    icon: PropTypes.node
+};
+Activity.defaultProps = {
+    iconColorBelow: "muted",
+    iconBelow: "circle",
+    iconColor: "white",
+    icon: "question",
+};
+
+export { Activity };

app/routes/components/Dropdowns/DropdownProfile.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { 
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+
+const DropdownProfile = (props) => (
+    <React.Fragment>
+        <DropdownMenu right={ props.right } >
+            <DropdownItem header>
+                { faker.name.firstName() } { faker.name.lastName() }
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem tag={ Link } to="/apps/profile-details">
+                My Profile
+            </DropdownItem>
+            <DropdownItem tag={ Link } to="/apps/settings-edit">
+                Settings
+            </DropdownItem>
+            <DropdownItem tag={ Link } to="/apps/billing-edit">
+                Billings
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem tag={ Link } to="/pages/login">
+                <i className="fa fa-fw fa-sign-out mr-2"></i>
+                Sign Out
+            </DropdownItem>
+        </DropdownMenu>
+    </React.Fragment>
+)
+DropdownProfile.propTypes = {
+    position: PropTypes.string,
+    right: PropTypes.bool
+};
+DropdownProfile.defaultProps = {
+    position: ""
+};
+
+export { DropdownProfile };

app/routes/components/Dropdowns/Messages.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Avatar, 
+    AvatarAddOn,
+    Media
+} from './../../../components';
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "success",
+    "danger",
+    "warning",
+    "secondary"
+];
+
+const Messages = () => (
+    <React.Fragment>
+        <Media>
+            <Media left className="mr-4">
+                <Avatar.Image
+                    size="md"
+                    src={ randomAvatar() }
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-bg"
+                        />,
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color={ randomArray(status) }
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Media>
+            <Media body className="text-left">
+                <span className="d-flex justify-content-start">
+                    <span className="h6 pb-0 mb-0 d-flex align-items-center">
+                        { faker.name.firstName() } { faker.name.lastName() }
+                    </span>
+                    
+                    <span className="ml-1 small">(23)</span>
+                    <span className="ml-auto small">Now</span>
+                </span>
+                <p className="mt-2 mb-1">
+                    { faker.lorem.sentences() }
+                </p>
+                <span className="small">
+                    { faker.date.past().toString() }
+                </span>
+            </Media>
+        </Media>
+    </React.Fragment>
+
+)
+
+export { Messages };

app/routes/components/Dropdowns/SwitchVersion.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import { Link } from 'react-router-dom';
+
+import { 
+    Badge, 
+} from './../../../components';
+
+import { 
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+
+const SwitchVersion = () => (
+    <React.Fragment>
+        <DropdownMenu>
+            <DropdownItem header>
+                Bootstrap 4 Versions:
+            </DropdownItem>
+            <DropdownItem href="http://jquery.bs4.webkom.co" className="d-flex">
+                <span>
+                    Jquery 2.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+            <DropdownItem href="http://react.bs4.webkom.co" active className="d-flex">
+                <span>
+                    React 2.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw fa-check ml-auto align-self-center pl-4" />
+            </DropdownItem>
+            <DropdownItem href="http://angular.bs4.webkom.co" className="d-flex">
+                <span>
+                    Angular 1.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+            <DropdownItem href="http://vue.bs4.webkom.co" className="d-flex">
+                <span>
+                    Vue 1.0.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+        </DropdownMenu>
+    </React.Fragment>
+)
+
+export { SwitchVersion };

app/routes/components/Files/FilesCardGrid.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    CardBody,
+    Badge,
+    CardFooter,
+    HolderProvider,
+    Avatar,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    CardImg,
+    DropdownMenu,
+    DropdownItem,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const badges = [
+    "secondary"
+];
+
+const avatarStatus = [
+    "secondary",
+    "warning",
+    "danger",
+    "success"
+];
+
+const FilesCardGrid = () => (
+    <React.Fragment>
+            { /* START Card */}
+            <Card>
+                <HolderProvider.Icon
+                    iconChar=""
+                    size={ 32 }
+                >
+                    <CardImg top />
+                </HolderProvider.Icon>
+                <CardBody>
+                    <h6 className="mb-2">
+                        { faker.commerce.productName() }   
+                    </h6>
+                    <span className="mb-2">
+                        { faker.finance.amount() } Mb
+                    </span>
+                    <div className="mb-2">
+                        { faker.system.commonFileName() }<br />
+                        { faker.internet.userName() }<br />
+                        { faker.date.weekday() }, 12 { faker.date.month() }, 2018<br />
+                        12:34 PM
+                    </div>
+                    <div className="mb-3">
+                        <Badge color={ randomArray(badges) } pill className="mr-1">
+                            { faker.commerce.department() }   
+                        </Badge>
+                        <Badge color={ randomArray(badges) } pill className="mr-1">
+                            { faker.commerce.department() }   
+                        </Badge>
+                        <Badge color={ randomArray(badges) } pill className="mr-1">
+                            { faker.commerce.department() }   
+                        </Badge>
+                    </div>
+                    <div>
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-3"
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color={ randomArray(avatarStatus) }
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        />
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-3"
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color={ randomArray(avatarStatus) }
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        />
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-3"
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color={ randomArray(avatarStatus) }
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        />
+                    </div>
+                </CardBody>
+                <CardFooter>
+                    <div className="d-flex">
+                        <a href="#" className="align-self-center text-decoration-none">
+                            Details<i className="fa fa-fw fa-angle-right ml-1"></i>
+                        </a>
+                        <UncontrolledButtonDropdown className="align-self-center ml-auto">
+                            <DropdownToggle color="link" size="sm" className="pr-0">
+                                <i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
+                            </DropdownToggle>
+                            <DropdownMenu right>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-reply mr-2"></i>
+                                    Share
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-download mr-2"></i>
+                                    Download
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-trash mr-2"></i>
+                                    Delete
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-pencil mr-2"></i>
+                                    Edit
+                                </DropdownItem>
+                                <DropdownItem divider />
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-files-o mr-2"></i>
+                                    Copy
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledButtonDropdown>
+                    </div>
+                </CardFooter>
+            </Card>
+            { /* END Card */}
+    </React.Fragment>
+)
+
+export { FilesCardGrid };

app/routes/components/Files/FilesLeftNav.js

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { 
+    Nav,
+    NavItem,
+    NavLink,
+    Badge
+} from './../../../components';
+
+const FilesLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" active>
+                        <i className="fa fa-fw fa-history mr-2"></i>
+                        Updates
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-files-o mr-2"></i>
+                        Files
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-users mr-2"></i>
+                        Team
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-image mr-2"></i>
+                        Photos
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-link mr-2"></i>
+                        Links
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-calendar-o mr-2"></i>
+                        Events
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-trash mr-2"></i>
+                        Deleted
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Tags
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-primary align-self-center mr-2"></i>
+                        Documents
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            12
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-info align-self-center mr-2"></i>
+                        Pictures
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            3
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-success align-self-center mr-2"></i>
+                        Videos
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            67
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-warning align-self-center mr-2"></i>
+                        Music
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            5
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-danger align-self-center mr-2"></i>
+                        Other
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            1
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-plus mr-2"></i>
+                        Add New
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { FilesLeftNav };

app/routes/components/Financial/StackedAreaChart.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { map } from 'lodash';
+import { 
+    AreaChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Area,
+    Dot,
+    Rectangle,
+    Polygon
+} from './../../../components/recharts';
+
+import colors from './../../../colors';
+
+const generateDot = ({ diameter, fill, stroke }) =>
+    /* eslint-disable */
+    ({ cx, cy }) => (
+        <Dot
+            cx={ cx }
+            cy={ cy }
+            r={ diameter / 2 }
+            fill={ fill }
+            stroke={ stroke }
+            strokeWidth={ 2 }
+            strokeOpacity={ 1 }
+            fillOpacity={ 1 }
+        />
+    )
+    /* eslint-enable */
+
+const generateSquare = ({ height, fill, stroke }) =>
+    /* eslint-disable */
+    ({ cx, cy }) => (
+        <Rectangle
+            x={ cx - height / 2 }
+            y={ cy - height / 2 }
+            fill={ fill }
+            stroke={ stroke }
+            strokeOpacity={ 1 }
+            strokeWidth={ 2 }
+            fillOpacity={ 1 }
+            width={ height }
+            height={ height }
+        /> 
+    );
+    /* eslint-enable */
+
+const generateTriangle = ({height, fill, stroke}) =>
+    // eslint-disable-next-line react/prop-types
+    ({ cx, cy }) => {
+        const halfSide = height / Math.sqrt(3);
+        const points = [
+            { x: 0, y: -(height * 2 / 3) },
+            { x: -halfSide, y: height / 3 },
+            { x: halfSide, y: height / 3 }
+        ];
+        const vertices = map(points, ({ x, y }) => ({ x: cx + x, y: cy + y }));
+
+        return (
+            <Polygon
+                points={ vertices }
+                fill={ fill }
+                fillOpacity={ 1 }
+                stroke={ stroke }
+                strokeWidth={ 2 }
+            />
+        );
+    }
+
+const data = [
+      {name: 'Mon', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Tue', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Wed', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Thu', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Fri', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Sat', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Sun', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const StackedAreaChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <AreaChart data={data} margin={{top: 10, right: 30, left: 0, bottom: 0}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Area
+                dataKey='uv'
+                stackId="1"
+                stroke={ colors['purple'] }
+                fill={ colors['purple-04'] }
+                dot={ generateTriangle({ height: 5, stroke: colors['purple'], fill: colors['purple'] }) }
+                activeDot={ generateTriangle({ height: 7, stroke: colors['purple'], fill: colors['purple'] }) }
+            />
+            <Area
+                dataKey='pv'
+                stackId="1"
+                stroke={ colors['primary'] }
+                fill={ colors['primary-04'] }
+                dot={ generateSquare({ height: 5, stroke: colors['primary'], fill: colors['primary'] }) }
+                activeDot={ generateSquare({ height: 7, stroke: colors['primary'], fill: colors['primary'] }) }
+            />
+            <Area
+                dataKey='amt'
+                stackId="1"
+                stroke={ colors['success'] }
+                fill={ colors['success-04'] }
+                dot={ generateDot({ diameter: 5, stroke: colors['success'], fill: colors['success'] }) }
+                activeDot={ generateDot({ diameter: 7, stroke: colors['success'], fill: colors['success'] }) }
+            />
+        </AreaChart>
+    </ResponsiveContainer>
+
+)
+
+export { StackedAreaChart };

app/routes/components/Financial/TinyDonutChartBig.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+const TinyDonutChartBig = (props) => (
+    <PieChart width={ 270 } height={ 270 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 98 }
+            outerRadius={ 109 }
+            fill={ colors[ props.pieBg ] }
+        >
+        {
+            data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+        }
+        </Pie>
+    </PieChart>
+);
+
+TinyDonutChartBig.propTypes = {
+    pieBg: PropTypes.spring
+};
+TinyDonutChartBig.defaultProps = {
+    pieBg: "300"
+};
+
+export { TinyDonutChartBig };

app/routes/components/Financial/TrTableInvoices.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import _ from 'lodash';
+import faker from 'faker/locale/en_US';
+import {  
+    Media, 
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomAvatar } from './../../../utilities';
+
+const TrTableInvoices = () => (
+    <React.Fragment>
+        {
+            _.times(6, (index) => (
+                <tr key={ index }>
+                    <td className="align-middle">
+                        <span className="text-inverse">{ faker.company.companyName() }</span><br />
+                        { faker.company.bsBuzz() }
+                    </td>
+                    <td className="align-middle">
+                        ${ faker.commerce.price() }
+                    </td>
+                    <td className="align-middle text-nowrap">
+                        25-May-2018
+                    </td>
+                    <td className="align-middle">
+                        <Media>
+                            <Media left className="align-self-center mr-4">
+                                <Avatar.Image
+                                    size="md"
+                                    src={ randomAvatar() }
+                                    addOns={[
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="white"
+                                            key="avatar-icon-bg"
+                                        />,
+                                        <AvatarAddOn.Icon 
+                                            className="fa fa-circle"
+                                            color="danger"
+                                            key="avatar-icon-fg"
+                                        />
+                                    ]}
+                                /> 
+                            </Media>
+                            <Media body>
+                                <span className="d-flex mb-1">
+                                    <span className="mt-0 d-flex h6 mb-0">
+                                        { faker.name.firstName() } { faker.name.lastName() }
+                                    </span>
+                                </span>
+                                <p className="mb-0">
+                                    { faker.name.jobTitle() }
+                                </p>
+                            </Media>
+                        </Media>
+                    </td>
+                    <td className="align-middle">
+                        <a href="#" className="text-decoration-none">
+                            { faker.internet.exampleEmail() }
+                        </a><br />
+                        { faker.phone.phoneNumber() }
+                    </td>
+                    <td className="text-right align-middle text-nowrap">
+                        <a href="#" className="text-decoration-none">View <i className="fa fa-angle-right"></i></a>
+                    </td>
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableInvoices };

app/routes/components/Financial/TrTableRecentFundings.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import _ from 'lodash';
+import faker from 'faker/locale/en_US';
+
+
+const TrTableRecentFundings = () => (
+    <React.Fragment>
+        {
+            _.times(6, (index) => (
+                <tr key={ index }>
+                    <td className="align-middle">
+                        <span className="text-inverse">{ faker.company.companyName() }</span>
+                    </td>
+                    <td className="align-middle">
+                        ${ faker.commerce.price() }
+                    </td>
+                    <td className="align-middle text-nowrap">
+                        20-02-2015
+                    </td>
+                    <td className="align-middle text-right text-nowrap">
+                        <a href="#" className="text-decoration-none">View <i className="fa fa-angle-right"></i></a>
+                    </td>
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableRecentFundings };

app/routes/components/FooterText.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FooterText = (props) => (
+	<React.Fragment>
+		(C) { props.year } All Rights Reserved. This is the &quot;{ props.name }&quot; built with { props.desc }. 
+		Designed and implemented by{' '}
+		<a
+			href="http://www.webkom.co"
+			target="_blank"
+			rel="noopener noreferrer"
+			className="sidebar__link"
+		>
+			www.webkom.co
+		</a>
+	</React.Fragment>
+)
+FooterText.propTypes = {
+    year: PropTypes.node,
+	name: PropTypes.node,
+	desc: PropTypes.node,
+};
+FooterText.defaultProps = {
+    year: "2018",
+    name: "Admin Theme",
+    desc: "Bootstrap 4, React 16 (latest) & NPM"
+};
+
+export { FooterText };

app/routes/components/Gallery/GalleryCard.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+import { 
+    Card,
+    CardImg,
+    HolderProvider,
+    Media,
+    Avatar,
+    CustomInput,
+    UncontrolledTooltip,
+    AvatarAddOn,
+    Badge,
+    CardBody
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "success",
+    "danger",
+    "warning",
+    "secondary"
+];
+const badges = [
+    "secondary"
+];
+
+const GalleryCard = (props) => (
+    <React.Fragment>
+        { /* START Card */}
+        <Card className="mb-3">
+            <HolderProvider.Icon
+                iconChar=""
+                size={ 32 }
+            >
+            <CardImg top />
+            </HolderProvider.Icon>
+            <CardBody>
+                <Media className="mb-3">
+                    <Media left>
+                        <CustomInput type="checkbox" id={`galleryCard-${ props.id }` } label="" className="pr-2" />
+                    </Media>
+                    <Media body>
+                        <span>
+                            <a className="h6 text-decoration-none" href="#">
+                                { faker.commerce.productName() }
+                            </a>
+                            <br />
+                            <span href="#">
+                                { faker.system.fileName() }
+                            </span>
+                        </span>
+                    </Media>
+                    <Media right>
+                        <a href="#" className="ml-auto" id={`galleryCardTooltip-${ props.id }` }>
+                            <i className="fa fa-download"></i>
+                        </a>
+                        <UncontrolledTooltip placement="top" target={`galleryCardTooltip-${ props.id }` }>
+                            Download
+                        </UncontrolledTooltip>
+                    </Media>
+                </Media>
+                <Media className="mb-3">
+                    <Media left className="align-self-center mr-3">
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color={ randomArray(status) }
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        /> 
+                    </Media>
+                    <Media body>
+                        <a className="mt-0 d-flex text-decoration-none" href="#">
+                            { faker.name.firstName() } { faker.name.lastName() }
+                        </a>
+                        <span>
+                            { faker.address.state() }, { faker.address.stateAbbr() }
+                        </span>
+                    </Media>
+                </Media>
+                <div>
+                    <Badge pill color={ randomArray(badges) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                    <Badge pill color={ randomArray(badges) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                    <Badge pill color={ randomArray(badges) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                </div>
+            </CardBody>
+        </Card>
+        { /* END Card */}
+    </React.Fragment>
+)
+GalleryCard.propTypes = {
+    id: PropTypes.node
+};
+GalleryCard.defaultProps = {
+    id: "1"
+};
+
+export { GalleryCard };

app/routes/components/HeaderDemo.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Media } from 'reactstrap';
+
+const HeaderDemo = (props) => (
+    <Media className={ `mb-3 ${ props.className }` }>
+        <Media left top>
+            <h1 className="mr-3 display-4 text-muted">
+                {props.no}. 
+            </h1>
+        </Media>
+        <Media body>
+            <h4 className="mt-1">
+                {props.title}
+            </h4>
+            <p>{props.children || props.subTitle}</p>
+        </Media>
+    </Media>
+)
+HeaderDemo.propTypes = {
+    no: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+    title: PropTypes.string,
+    subTitle: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+HeaderDemo.defaultProps = {
+    no: 0,
+    title: "Waiting for Data...",
+    subTitle: "Waiting for Data..."
+};
+
+export { HeaderDemo };

app/routes/components/HeaderMain.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HeaderMain = (props) => (
+    <React.Fragment>
+        { /* START H1 Header */}
+        <div className={` d-flex ${ props.className }` }>
+            <h1 className="display-4 mr-3 mb-0 align-self-start">
+                { props.title }
+            </h1>
+        </div>
+        { /* END H1 Header */}
+    </React.Fragment>
+)
+HeaderMain.propTypes = {
+    title: PropTypes.string,
+    subTitle: PropTypes.node,
+    className: PropTypes.string
+};
+HeaderMain.defaultProps = {
+    title: "Waiting for Data...",
+    subTitle: "Waiting for Data...",
+    className: "my-4"
+};
+
+export { HeaderMain };

app/routes/components/LogoThemed/LogoThemed.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { ThemeConsumer } from '../../../components/Theme';
+
+const logos = {
+    'white': require('./../../../images/logos/logo-white.svg'),
+    'primary': require('./../../../images/logos/logo-primary.svg'),
+    'success': require('./../../../images/logos/logo-success.svg'),
+    'warning': require('./../../../images/logos/logo-warning.svg'),
+    'danger': require('./../../../images/logos/logo-danger.svg'),
+    'info': require('./../../../images/logos/logo-info.svg'),
+    'indigo': require('./../../../images/logos/logo-indigo.svg'),
+    'purple': require('./../../../images/logos/logo-purple.svg'),
+    'pink': require('./../../../images/logos/logo-pink.svg'),
+    'yellow': require('./../../../images/logos/logo-yellow.svg')
+}
+
+const getLogoUrl = (style, color) => {
+    return logos[color];
+}
+
+// Check for background
+const getLogoUrlBackground = (style, color) => {
+    if (style === 'color') {
+        return logos['white'];
+    } else {
+        return getLogoUrl(style, color);
+    }
+}
+
+const LogoThemed = ({ checkBackground, className, ...otherProps }) => (
+    <ThemeConsumer>
+    {
+        ({ style, color }) => (
+            <img
+                src={
+                    checkBackground ?
+                        getLogoUrlBackground(style, color) :
+                        getLogoUrl(style, color)
+                }
+                className={ classNames('d-block', className) }
+                alt="Airframe Logo"
+                { ...otherProps }
+            />
+        )
+    }
+    </ThemeConsumer>
+);
+LogoThemed.propTypes = {
+    checkBackground: PropTypes.bool,
+    className: PropTypes.string,
+};
+
+export { LogoThemed };

app/routes/components/Logos/LogoNavbar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoNavbar = (props) => (
+<React.Fragment>
+    { /* START Logo: Visible on: md, lg, xl */}
+    <i className={` fa fa-lg fa-fw d-none d-lg-block fa-${ props.logo }`}></i>
+    { /* END Logo: Visible on: md, lg, xl */}
+    { /* START Logo: Visible on: xs, sm */}
+    <i className={` fa fa-fw d-lg-none fa-${ props.logo }`}></i>
+    { /* END Logo: Visible on: xs, sm */}
+</React.Fragment>
+)
+
+LogoNavbar.propTypes = {
+    logo: PropTypes.node
+};
+LogoNavbar.defaultProps = {
+    logo: "send"
+};
+
+export { LogoNavbar };

app/routes/components/Logos/LogotypeNavbar.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogotypeNavbar = (props) => (
+<React.Fragment>
+    { /* START Logotype: Visible on: md, lg, xl */}
+    <div className={` fw-600 sidebar-logo mb-1 text-left d-none d-lg-block ${ props.logoH }`}>
+        { props.logotype } <i className="fa fa-angle-down"></i>
+    </div>
+    { /* END Logotype: Visible on: md, lg, xl */}
+    { /* START Logotype: Visible on: xs, sm */}
+    <div className="h6 fw-600 sidebar-logo mb-0 text-left d-lg-none">
+        { props.logotype } <i className="fa fa-angle-down"></i>
+    </div>
+    { /* END Logotype: Visible on: xs, sm */}
+    <div className="job-title small text-left d-flex">
+        <span className="d-none d-lg-block">Version: </span>React, { props.version }
+    </div>
+</React.Fragment>
+)
+
+LogotypeNavbar.propTypes = {
+    logoH: PropTypes.node,
+    logotype: PropTypes.node,
+    version: PropTypes.node,
+};
+LogotypeNavbar.defaultProps = {
+    logoH: "h5",
+    logotype: "react",
+    version: "2.0"
+};
+
+export { LogotypeNavbar };

app/routes/components/Mailbox/MailboxLeftNav.js

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { 
+    Nav,
+    NavItem,
+    NavLink,
+    Badge
+} from './../../../components';
+
+const MailboxLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" active className="d-flex">
+                        Inbox
+                        <Badge pill color="secondary" className="align-self-center ml-auto">
+                            12
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        Draft
+                        <Badge pill color="secondary" className="align-self-center ml-auto">
+                            12
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        Sent
+                        <Badge pill color="secondary" className="align-self-center ml-auto">
+                            2
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        Trash
+                        <Badge pill color="secondary" className="align-self-center ml-auto">
+                            45
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Labels
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-circle text-primary mr-2"></i>
+                        Family
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-circle text-info mr-2"></i>
+                        Friends
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-circle text-success mr-2"></i>
+                        Work
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-circle text-warning mr-2"></i>
+                        Trips
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-circle text-danger mr-2"></i>
+                        Other
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-plus mr-2"></i>
+                        Add New Label
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { MailboxLeftNav };

app/routes/components/Monitor/TinyAreaChart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from './../../../components/recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-03'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChart };

app/routes/components/Monitor/TinyDonutChart.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['primary'], colors['info'], colors['300']];
+
+const TinyDonutChart = () => (
+    <PieChart width={ 70 } height={ 70 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 21 }
+            outerRadius={ 27 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChart };

app/routes/components/Monitor/TinyDonutChartBig.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300}
+];
+
+const TinyDonutChartBig = (props) => (
+    <PieChart width={ 130 } height={ 160 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke="{ colors['white'] }"
+            innerRadius={ 58 }
+            outerRadius={ 65 }
+            fill={ colors[ props.pieBg ] }
+        >
+        <Cell fill={ colors[ props.pieColor ] } />
+        </Pie>
+    </PieChart>
+);
+
+TinyDonutChartBig.propTypes = {
+    pieColor: PropTypes.string,
+    pieBg: PropTypes.string
+};
+TinyDonutChartBig.defaultProps = {
+    pieColor: "secondary",
+    pieBg: "300"
+};
+
+export { TinyDonutChartBig };

app/routes/components/Monitor/TrTableMonitor.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { 
+    Badge,
+    Progress
+} from './../../../components';
+
+/*eslint-disable */
+const status = [
+    <td className="text-right">
+        Healthly <i className="fa fa-fw fa-check-circle text-success"></i>
+    </td>,
+    <td className="text-right">
+        Degraded <i className="fa fa-fw fa-exclamation-circle text-danger"></i>
+    </td>
+];
+/*eslint-enable */
+/*eslint-disable */
+const tasksCompleted = [
+    "25",
+    "50",
+    "70",
+    "90"
+];
+/*eslint-enable */
+
+const TrTableMonitor = () => (
+    <React.Fragment>
+        {
+            _.times(14, (index) => (
+                <tr key={ index } className="text-nowrap">
+                    <td className="align-middle">
+                        <span className="text-inverse">HDD1</span> <span className="small">(ada0)</span>
+                    </td>
+                    <td className="align-middle">
+                        Mirror <Badge color="secondary" pill className="ml-2">/mtn/volume1</Badge>
+                    </td>
+                    <td className="align-middle">
+                        <Progress value={ tasksCompleted[index%4] } style={{height: "5px"}} />
+                    </td>
+                    <td>
+                        <span className="text-inverse">7.3.5 TiB</span> / 9.3.1 TiB
+                    </td>
+                    { status[index%2] }
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableMonitor };

app/routes/components/Navbars/NavbarExample.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import {
+    Avatar,
+    AvatarAddOn,
+    Button,
+    DropdownToggle,
+    NavbarThemeProvider,
+    Navbar,
+    NavbarBrand,
+    Nav,
+    NavItem,
+    NavLink,
+    NavbarToggler,
+    UncontrolledCollapse,
+    UncontrolledDropdown,
+} from './../../../components';
+
+import { NavbarActivityFeed } from './../../../layout/components/NavbarActivityFeed';
+import { NavbarMessages } from './../../../layout/components/NavbarMessages';
+import { NavbarUser } from './../../../layout/components/NavbarUser';
+import { NavbarNavigation } from './NavbarNavigation';
+import { DropdownProfile } from './../Dropdowns/DropdownProfile';
+
+import { randomAvatar } from './../../../utilities';
+
+const NavbarExample = ({ themeColor, themeStyle, navStyle }) => {
+    return (
+        <NavbarThemeProvider style={ themeStyle } color={ themeColor } className="shadow-sm">
+            <Navbar expand="lg" themed>
+                <Link to="/">
+                    <NavbarBrand className="mb-0" tag="div">
+                        react.bs4
+                    </NavbarBrand>
+                </Link>
+
+                <Nav pills>
+                    <NavItem>
+                        <NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
+                            <i className="fa fa-fw fa-bars"></i>
+                        </NavLink>
+                    </NavItem>
+                </Nav>
+
+                { /* Navigation with Collapse */ }
+                <UncontrolledCollapse navbar toggler="#navbar-navigation-toggler">
+                    <NavbarNavigation
+                        pills={ navStyle === 'pills' }
+                        accent={ navStyle === 'accent' }
+                    />
+                </UncontrolledCollapse>
+
+                { /* END Navbar: Left Side */ }
+                { /* START Navbar: Right Side */ }
+                <Nav className="ml-auto" pills>
+                    <NavbarMessages />
+                    <NavbarActivityFeed />
+                    { /* START Navbar: Dropdown */ }
+                    <UncontrolledDropdown nav inNavbar>
+                        <DropdownToggle nav>
+                            <Avatar.Image
+                                size="sm"
+                                src={ randomAvatar() }
+                                addOns={[
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="white"
+                                        key="avatar-icon-bg"
+                                    />,
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="danger"
+                                        key="avatar-icon-fg"
+                                    />
+                                ]}
+                            /> 
+                        </DropdownToggle>
+                        <DropdownProfile  
+                            right  
+                        />
+                    </UncontrolledDropdown>
+                    { /* END Navbar: Dropdown */ }
+                    <NavbarUser className="d-none d-lg-block" />
+                </Nav>
+                { /* END Navbar: Right Side */ }
+            </Navbar>
+
+            <Navbar light expand="lg" className="py-3 bg-white">
+                <h1 className="mb-0 h4">
+                    Navbar Only
+                </h1>
+                
+                <Button color={ themeColor } className="px-4 my-sm-0">
+                    Download <i className="fa ml-1 fa-fw fa-download"></i>
+                </Button>
+            </Navbar>
+        </NavbarThemeProvider>
+    );
+}
+
+NavbarExample.propTypes = {
+    navStyle: PropTypes.oneOf(['pills', 'accent', 'default']),
+    themeStyle: PropTypes.string,
+    themeColor: PropTypes.string,
+};
+NavbarExample.defaultProps = {
+    navStyle: 'default',
+    themeStyle: 'dark',
+    themeColor: 'primary'
+};
+
+export { NavbarExample };

app/routes/components/Navbars/NavbarNavigation.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink as Link } from 'react-router-dom';
+import classNames from 'classnames';
+
+import { 
+    Nav,
+    DropdownToggle,
+    NavLink,
+    UncontrolledDropdown,
+    NavItem,
+    DropdownMenu,
+    DropdownItem,
+    NestedDropdown
+} from './../../../components';
+
+const NavbarNavigation = ({ accent, pills, ...navbarProps }) => (
+    <Nav navbar accent={ accent } pills={ pills } { ...navbarProps }>
+        <NavItem>
+            <NavLink tag={ Link } to="/interface/navbars">
+                <span className={ classNames({ 'mr-3': !(pills || accent) }) }>
+                    <i className="fa fa-fw fa-home d-none d-md-inline"></i>
+                    <span className="d-md-none">
+                        Home
+                    </span>
+                </span>
+            </NavLink>
+        </NavItem>
+        <UncontrolledDropdown nav inNavbar>
+            <DropdownToggle nav>
+                Dashboards
+                <i className="fa fa-angle-down fa-fw ml-1"></i>
+            </DropdownToggle>
+            <DropdownMenu>
+                <DropdownItem tag={ Link } to="/dashboards/analytics">Analytics</DropdownItem>
+                <DropdownItem tag={ Link } to="/dashboards/projects">Projects</DropdownItem>
+            </DropdownMenu>
+        </UncontrolledDropdown>
+
+        <UncontrolledDropdown nav inNavbar>
+            <DropdownToggle nav>
+                Interface
+                <i className="fa fa-angle-down fa-fw ml-1"></i>
+            </DropdownToggle>
+            <DropdownMenu>
+                <DropdownItem tag={ Link } to="/interface/colors">Colors</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/typography">Typography</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/buttons">Buttons</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/paginations">Paginations</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/images">Images</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/avatars">Avatars</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/progressbars">Progress Bars</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/badgeslabels">Badges & Labels</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/mediaobjects">Media Objects</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/listgroups">List Groups</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/alerts">Alerts</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/accordions">Accordions</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/tabspills">Tabs Pills</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/tooltipspopovers">Tooltips Popovers</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/dropdowns">Dropdowns</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/dropdowns">Modals</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/breadcrumbs">Breadcrumbs</DropdownItem>
+                <DropdownItem tag={ Link } to="/interface/navbars">Navbars</DropdownItem>
+            </DropdownMenu>
+        </UncontrolledDropdown>
+
+        <NestedDropdown nav inNavbar>
+            <DropdownToggle nav>
+                Apps
+                <i className="fa fa-angle-down fa-fw ml-1"></i>
+            </DropdownToggle>
+            <DropdownMenu>
+                <NestedDropdown.Submenu title="Projects">
+                    <DropdownItem tag={ Link } to="/apps/projects/list">Projects List</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/projects/grid">Projects Grid</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Tasks">
+                    <DropdownItem tag={ Link } to="/apps/tasks/list">Tasks List</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/tasks/grid">Tasks Grid</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/tasks/kanban">Tasks Kanban</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/tasks/details">Task Details</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Files">
+                    <DropdownItem tag={ Link } to="/apps/files/list">Files List</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/files/grid">Files Grid</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Search Results">
+                    <DropdownItem tag={ Link } to="/apps/search-results">Search Results</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/images-results">Images Results</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/videos-results">Videos Results</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/users-results">Users Results</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Users">
+                    <DropdownItem tag={ Link } to="/apps/users/list">Users List</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/users/grid">Users Grid</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Gallery">
+                    <DropdownItem tag={ Link } to="/apps/gallery-grid">Gallery Grid</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/gallery-table">Gallery Table</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Mailbox">
+                    <DropdownItem tag={ Link } to="/apps/inbox">Inbox</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/new-email">New Email</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/email-details">Email Details</DropdownItem>
+                </NestedDropdown.Submenu>
+                <NestedDropdown.Submenu title="Profile">
+                    <DropdownItem tag={ Link } to="/apps/profile-details">Profile Details</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/profile-edit">Profile Edit</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/account-edit">Account Edit</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/billing-edit">Billing Edit</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/settings-edit">Settings Edit</DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/sessions-edit">Sessions Edit</DropdownItem>
+                </NestedDropdown.Submenu>
+                <DropdownItem tag={ Link } to="/apps/clients">Clients</DropdownItem>
+                <DropdownItem tag={ Link } to="/apps/chat">Chat</DropdownItem>
+            </DropdownMenu>
+        </NestedDropdown>
+
+        <UncontrolledDropdown nav inNavbar>
+            <DropdownToggle nav>
+                Layouts                                 
+                <i className="fa fa-angle-down fa-fw ml-1"></i>
+            </DropdownToggle>
+            <DropdownMenu>
+                <DropdownItem tag={ Link } to="/layouts/navbar">Navbar</DropdownItem>
+                <DropdownItem tag={ Link } to="/layouts/sidebar">Sidebar</DropdownItem>
+                <DropdownItem tag={ Link } to="/layouts/sidebar-with-navbar">Sidebar with Navbar</DropdownItem>
+            </DropdownMenu>
+        </UncontrolledDropdown>
+
+        <UncontrolledDropdown nav inNavbar>
+            <DropdownToggle nav>
+                <i className="fa fa-ellipsis-h fa-fw"></i>
+            </DropdownToggle>
+            <DropdownMenu>
+                <DropdownItem header>Cards</DropdownItem>
+                <DropdownItem tag={ Link } to="/cards/cards">Cards</DropdownItem>
+                <DropdownItem tag={ Link } to="/cards/cardsheaders">Cards Headers</DropdownItem>
+                <DropdownItem divider />
+                <DropdownItem header>Layouts</DropdownItem>
+                <DropdownItem tag={ Link } to="/layouts/navbar-only">Navbar Only</DropdownItem>
+                <DropdownItem divider />
+                <DropdownItem header>Other</DropdownItem>
+                <DropdownItem tag={ Link } to="/tables/tables">Tables</DropdownItem>
+                <DropdownItem tag={ Link } to="/icons">Icons</DropdownItem>
+                <DropdownItem tag={ Link } to="/widgets">Widgets</DropdownItem>
+                <DropdownItem tag={ Link } to="/graphs/re-charts">Re Charts</DropdownItem>
+            </DropdownMenu>
+        </UncontrolledDropdown>
+    </Nav>
+);
+NavbarNavigation.propTypes = {
+    pills: PropTypes.bool,
+    accent: PropTypes.bool,
+};
+
+
+export { NavbarNavigation };

app/routes/components/Pages/FooterAuth.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { FooterText } from '../FooterText';
+
+const FooterAuth = ({ className }) => (
+    <p className={ classNames(className, 'small') }>
+        <FooterText />
+    </p>
+);
+FooterAuth.propTypes = {
+    className: PropTypes.string
+};
+
+export { FooterAuth };

app/routes/components/Pages/HeaderAuth.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { LogoThemed } from './../LogoThemed/LogoThemed';
+
+const HeaderAuth = (props) => (
+    <div className="mb-4">
+        <div className="mb-4 text-center">
+            <Link to="/" className="d-inline-block">
+                {
+                    props.icon ? (
+                        <i className={ `fa fa-${ props.icon } fa-3x ${ props.iconClassName }` }></i>
+                    ) : (
+                        <LogoThemed checkBackground height="30" />
+                    )
+                }
+            </Link>
+        </div>
+        <h5 className="text-center mb-4">
+            { props.title }
+        </h5>
+        <p className="text-center">
+            { props.text }
+        </p>
+    </div>
+)
+HeaderAuth.propTypes = {
+    icon: PropTypes.node,
+    iconClassName: PropTypes.node,
+    title: PropTypes.node,
+    text: PropTypes.node,
+};
+HeaderAuth.defaultProps = {
+    title: "Waiting for Data...",
+    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptas aperiam odit, reiciendis dicta nihil.",
+    iconClassName: "text-theme"
+};
+
+export { HeaderAuth };

app/routes/components/Paginations.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { 
+    Pagination,
+    PaginationItem,
+    PaginationLink
+} from 'reactstrap';
+
+const Paginations = () => (
+
+    <Pagination aria-label="Page navigation example">
+        <PaginationItem>
+            <PaginationLink previous href="#">
+                <i className="fa fa-fw fa-angle-left"></i>
+            </PaginationLink>
+        </PaginationItem>
+        <PaginationItem active>
+            <PaginationLink href="#">
+                1
+            </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+            <PaginationLink href="#">
+                2
+            </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+            <PaginationLink href="#">
+                3
+            </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+            <PaginationLink next href="#">
+                <i className="fa fa-fw fa-angle-right"></i>
+            </PaginationLink>
+        </PaginationItem>
+    </Pagination>
+)
+
+export { Paginations };

app/routes/components/Profile.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Avatar,
+    AvatarAddOn
+} from './../../components';
+
+import { randomArray, randomAvatar } from './../../utilities';
+
+const Profile = () => { 
+
+    const avatar = [
+        [
+            <AvatarAddOn.Icon 
+                className="fa fa-circle"
+                color="facebook"
+                key="avatar-icon-bg"
+            />,
+            <AvatarAddOn.Icon 
+                className="fa fa-facebook"
+                color="white"
+                key="avatar-icon-fg"
+                small
+            />
+        ],
+        [
+            <AvatarAddOn.Icon 
+                className="fa fa-circle"
+                color="twitter"
+                key="avatar-icon-bg"
+            />,
+            <AvatarAddOn.Icon 
+                className="fa fa-twitter"
+                color="white"
+                key="avatar-icon-fg"
+                small
+            />
+        ],
+        [
+            <AvatarAddOn.Icon 
+                className="fa fa-circle"
+                color="linkedin"
+                key="avatar-icon-bg"
+            />,
+            <AvatarAddOn.Icon 
+                className="fa fa-linkedin"
+                color="white"
+                key="avatar-icon-fg"
+                small
+            />
+        ],
+        [
+            <AvatarAddOn.Icon 
+                className="fa fa-circle"
+                color="foursquare"
+                key="avatar-icon-bg"
+            />,
+            <AvatarAddOn.Icon 
+                className="fa fa-foursquare"
+                color="white"
+                key="avatar-icon-fg"
+                small
+            />
+        ],
+        [
+            <AvatarAddOn.Icon 
+                className="fa fa-circle"
+                color="paypal"
+                key="avatar-icon-bg"
+            />,
+            <AvatarAddOn.Icon 
+                className="fa fa-paypal"
+                color="white"
+                key="avatar-icon-fg"
+                small
+            />
+        ],
+    ];
+    return (
+        <React.Fragment>
+            <div className="d-flex justify-content-center my-3">
+                <Avatar.Image
+                    size="lg"
+                    src={ randomAvatar() }
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-white-bg"
+                        />,
+                        ...randomArray(avatar)
+                    ]}
+                /> 
+            </div>
+            <div className="mb-4 text-center">
+                <a className="h6 text-decoration-none" href="#">
+                    { faker.name.firstName() } { faker.name.lastName() }
+                </a>
+                <div className="text-center mt-2">
+                    { faker.name.jobTitle() }
+                </div>
+                <div className="text-center">
+                    <i className="fa fa-map-marker mr-1"></i>
+                    { faker.address.city() }
+                </div>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export { Profile };

app/routes/components/Profile/DlRowAddress.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DlRowAddress = (props) => (
+    <React.Fragment>
+        <dl className="row">
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Adress</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>700 Zemlak Glen</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>City</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>Jacobiton</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>State</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }><a href="#">West Virginia</a></dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>ZIP</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>87032</dd>
+        </dl>
+    </React.Fragment>
+)
+DlRowAddress.propTypes = {
+    leftSideClassName: PropTypes.node,
+    rightSideClassName: PropTypes.node
+};
+DlRowAddress.defaultProps = {
+    leftSideClassName: "",
+    rightSideClassName: ""
+};
+
+export { DlRowAddress };

app/routes/components/Profile/DlRowContacts.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DlRowContacts = (props) => (
+    <React.Fragment>
+        <dl className="row">
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Phone</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>340-702-6720</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Mobile</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>363-999-9380</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Fax</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>727-613-5840</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Email</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>
+                <a href="#">t.herald@gmail.com</a>
+            </dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Skype</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }><a href="#">t.herald</a></dd>
+        </dl>
+    </React.Fragment>
+)
+DlRowContacts.propTypes = {
+    leftSideClassName: PropTypes.node,
+    rightSideClassName: PropTypes.node
+};
+DlRowContacts.defaultProps = {
+    leftSideClassName: "text-right",
+    rightSideClassName: "text-left"
+};
+
+export { DlRowContacts };

app/routes/components/Profile/ProfileHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Badge,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+const ProfileHeader = () => (
+    <React.Fragment>
+        { /* START Header */}
+        <Media className="mb-3">
+            <Media left middle className="mr-3 align-self-center">
+              <Avatar.Image
+                size="lg"
+                src={ randomAvatar() }
+                className="mr-2"
+                addOns={[
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color="white"
+                        key="avatar-icon-bg"
+                    />,
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color="success"
+                        key="avatar-icon-fg"
+                    />
+                ]}
+            />
+            </Media>
+            <Media body>
+                <h5 className="mb-1 mt-0">
+                    <Link to="/apps/profile-details">
+                        { faker.name.firstName() } { faker.name.lastName() }
+                    </Link> <span className="text-muted mx-1"> / </span> Profile Edit
+                </h5>
+                <Badge color="primary" pill className="mr-2">Premium</Badge> 
+                <span className="text-muted">Edit Your Name, Avatar, etc.</span>
+            </Media>
+        </Media>
+        { /* END Header */}
+    </React.Fragment>
+)
+
+export { ProfileHeader };

app/routes/components/Profile/ProfileLeftNav.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import { 
+    Nav,
+    NavItem,
+    NavLink
+} from './../../../components';
+
+const ProfileLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/profile-edit">
+                        Profile Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/account-edit">
+                        Account Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/billing-edit">
+                        Billing Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/settings-edit">
+                        Settings Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/sessions-edit">
+                        Sessions Edit
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { ProfileLeftNav };

app/routes/components/Profile/ProfileOverviewCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { 
+    CardTitle,
+    Badge
+} from './../../../components';
+
+const ProfileOverviewCard = (props) => (
+    <React.Fragment>
+        <div className="d-flex">
+            <CardTitle tag="h6">
+                { props.title }
+            </CardTitle>
+            <Badge pill color={ `${ props.badgeColor }` } className="align-self-start ml-auto">
+                { props.badgeTitle }
+            </Badge>
+        </div>
+        <div className="text-center my-4">
+            <h2>{ props.value }</h2>
+            <span>
+                { props.valueTitle }
+            </span>
+        </div>
+        <div className="d-flex">
+            <span>
+                { props.footerTitle }
+            </span>
+            <span className={ `ml-auto ${ props.footerTitleClassName }` }>
+                <i className={ `fa mr-1 fa-${ props.footerIcon }` }></i>
+                { props.footerValue }
+            </span>
+        </div>
+    </React.Fragment>
+)
+ProfileOverviewCard.propTypes = {
+    title: PropTypes.node,
+    badgeColor: PropTypes.node,
+    badgeTitle: PropTypes.node,
+    value: PropTypes.node,
+    valueTitle: PropTypes.node,
+    footerTitle: PropTypes.node,
+    footerTitleClassName: PropTypes.node,
+    footerIcon: PropTypes.node,
+    footerValue: PropTypes.node
+};
+ProfileOverviewCard.defaultProps = {
+    title: "Waiting",
+    badgeColor: "secondary",
+    badgeTitle: "Waiting",
+    value: "0.000",
+    valueTitle: "Waiting",
+    footerTitle: "Waiting",
+    footerTitleClassName: "text-muted",
+    footerIcon: "caret-down",
+    footerValue: "0.00%"
+};
+
+export { ProfileOverviewCard };

app/routes/components/Projects/ProjectsCardGrid.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import { Link } from 'react-router-dom';
+
+import { 
+    Card,
+    CardBody,
+    Badge,
+    CardFooter,
+    Progress,
+    Avatar,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const badges = [
+    <Badge pill color="success" className="mb-2" key="badge-active">
+        Active
+    </Badge>,
+    <Badge pill color="danger" className="mb-2" key="badge-suspended">
+        Suspended
+    </Badge>,
+    <Badge pill color="warning" className="mb-2" key="badge-waiting">
+        Waiting
+    </Badge>,
+    <Badge pill color="secondary" className="mb-2" key="badge-paused">
+        Paused
+    </Badge>,
+];
+
+const taskCompleted = [
+    "15",
+    "28",
+    "30",
+    "80",
+    "57",
+    "90"
+];
+
+const ProjectsCardGrid = () => (
+    <React.Fragment>
+            { /* START Card */}
+            <Card>
+                <CardBody>
+                    { randomArray(badges) }
+                    <div className="mb-2">
+                        <a href="#" className="mr-2">
+                            <i className="fa fa-fw fa-star-o"></i>
+                        </a>
+                        <Link to="/apps/tasks/grid" className="text-decoration-none">
+                            { faker.company.catchPhrase() }
+                        </Link>
+                    </div>
+                    <div className="mb-3">
+                        Last Edited by: { faker.name.firstName() } { faker.name.lastName() } <br />
+                        { faker.date.weekday() }, 12 { faker.date.month() }, 2018
+                    </div>
+                    <div className="mb-3">
+                        <Progress value={ randomArray(taskCompleted) } style={{height: "5px"}} className="mb-2" />
+                        <div>
+                            Tasks Completed: 
+                            <span className="text-inverse">
+                                36/94
+                            </span>
+                        </div>
+                    </div>
+                    <div>
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-2"
+                        />
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-2"
+                        />
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            className="mr-2"
+                        />
+                    </div>
+                </CardBody>
+                <CardFooter className="d-flex">
+                    <span className="align-self-center">
+                        20 Sep, Fri, 2018
+                    </span>
+                    <UncontrolledButtonDropdown className="align-self-center ml-auto">
+                        <DropdownToggle color="link" size="sm" className="pr-0">
+                            <i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
+                        </DropdownToggle>
+                        <DropdownMenu right>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-folder-open mr-2"></i>
+                                View
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-ticket mr-2"></i>
+                                Add Task
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-paperclip mr-2"></i>
+                                Add Files
+                            </DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-trash mr-2"></i>
+                                Delete
+                            </DropdownItem>
+                        </DropdownMenu>
+                    </UncontrolledButtonDropdown>
+                </CardFooter>
+            </Card>
+            { /* END Card */}
+    </React.Fragment>
+)
+
+export { ProjectsCardGrid };

app/routes/components/Projects/ProjectsLeftNav.js

@@ -0,0 +1,179 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    InputGroup,
+    Button,
+    Input,
+    InputGroupAddon,
+    Nav,
+    NavItem,
+    NavLink,
+    Badge,
+    Media,
+    Avatar
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+const ProjectsLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Search
+            </div>
+            <InputGroup>
+                <Input placeholder="Search for..." className="bg-white" />
+                <InputGroupAddon addonType="append">
+                    <Button outline color="secondary">
+                        <i className="fa fa-search"></i>
+                    </Button>
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Favorites
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" active>
+                        <i className="fa fa-fw fa-line-chart mr-2"></i>
+                        Overview
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-calendar-o mr-2"></i>
+                        Calendar
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Projects
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
+                        Analytics Redesign
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            12
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
+                        New Website
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            4
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
+                        Chart for Newsletter
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            9
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-plus mr-2"></i>
+                        Add New Project
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                People
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <Media>
+                            <Media left middle className="mr-3 align-self-center">
+                                <Avatar.Image
+                                    size="md"
+                                    src={ randomAvatar() }
+                                />
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.state() }, { faker.address.stateAbbr() }
+                                </span>
+                            </Media>
+                        </Media>
+                        <i className="fa fa-fw fa-circle text-success ml-auto align-self-center ml-2"></i>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <Media>
+                            <Media left middle className="mr-3 align-self-center">
+                                <Avatar.Image
+                                    size="md"
+                                    src={ randomAvatar() }
+                                />
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.state() }, { faker.address.stateAbbr() }
+                                </span>
+                            </Media>
+                        </Media>
+                        <i className="fa fa-fw fa-circle text-warning ml-auto align-self-center ml-2"></i>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <Media>
+                            <Media left middle className="mr-3 align-self-center">
+                                <Avatar.Image
+                                    size="md"
+                                    src={ randomAvatar() }
+                                />
+                            </Media>
+                            <Media body>
+                                <div className="mt-0">
+                                    { faker.name.firstName() } { faker.name.lastName() }
+                                </div>
+                                <span className="small">
+                                    { faker.address.state() }, { faker.address.stateAbbr() }
+                                </span>
+                            </Media>
+                        </Media>
+                        <i className="fa fa-fw fa-circle text-danger ml-auto align-self-center ml-2"></i>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-plus mr-2"></i>
+                        Add New People
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { ProjectsLeftNav };

app/routes/components/Projects/ProjectsSmHeader.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, Link } from 'react-router-dom';
+
+import { 
+    Button,
+    Breadcrumb,
+    ButtonToolbar,
+    UncontrolledTooltip,
+    BreadcrumbItem,
+    ButtonGroup,
+} from './../../../components';
+
+const ProjectsSmHeader = (props ) => (
+    <React.Fragment>
+        { /* START Header Nav */}
+        <div className="d-flex flex-column flex-md-row mb-3 mb-md-0">
+            <Breadcrumb className="mr-auto d-flex align-items-center">
+                { /* START 1st */}
+                <BreadcrumbItem active>
+                    <Link to="/">
+                        <i className="fa fa-home"></i>
+                    </Link>
+                </BreadcrumbItem>
+                { /* END 1st */}
+
+                { /* START 2nd */}
+                { 
+                    props.title ? (
+                        <BreadcrumbItem>
+                            <Link to={ props.subTitleLink }>
+                                {props.subTitle}
+                            </Link>
+                        </BreadcrumbItem>
+                    ): (
+                        <BreadcrumbItem active>
+                            {props.subTitle}
+                        </BreadcrumbItem>
+                    )
+                }
+                { /* END 2nd */}
+
+                { /* START 3rd */}
+                {
+                    props.title && (
+                        <BreadcrumbItem active>
+                            {props.title}
+                        </BreadcrumbItem>  
+                    )
+                }
+                { /* END 3rd */}
+            </Breadcrumb>
+            <ButtonToolbar>
+                <ButtonGroup className="mr-auto mr-md-2">
+                    <Button tag={ NavLink } to={ `${ props.linkList }` } color="secondary" outline className="align-self-center" id="tooltipShowList">
+                        <i className="fa-fw fa fa-bars"></i>
+                    </Button>
+                    <UncontrolledTooltip placement="bottom" target="tooltipShowList">
+                        Show List
+                    </UncontrolledTooltip>
+                    <Button tag={ NavLink } to={ `${ props.linkGrid }` } color="secondary" outline className="align-self-center" id="tooltipShowGrid">
+                        <i className="fa-fw fa fa-th-large"></i>
+                    </Button>
+                    <UncontrolledTooltip placement="bottom" target="tooltipShowGrid">
+                        Show Grid
+                    </UncontrolledTooltip>
+                        {
+                            props.btnShowKanban && (
+                                <React.Fragment>
+                                    <Button tag={ NavLink } to={ `${ props.linkKanban }` } color="secondary" outline className="align-self-center" id="tooltipShowKanban">
+                                        <i className="fa-fw fa fa-trello"></i>
+                                    </Button>
+                                    <UncontrolledTooltip placement="bottom" target="tooltipShowKanban">
+                                        Show Kanban
+                                    </UncontrolledTooltip>
+                                 </React.Fragment>
+                                )
+                        }
+                </ButtonGroup>
+                <ButtonGroup>
+                    <Button color="primary" className="align-self-center" id="tooltipAddNew">
+                        <i className="fa-fw fa fa-plus"></i>
+                    </Button>
+                    <UncontrolledTooltip placement="bottom" target="tooltipAddNew">
+                        Add New
+                    </UncontrolledTooltip>
+                </ButtonGroup>
+            </ButtonToolbar>
+        </div>
+        { /* END Header Nav */}
+    </React.Fragment>
+)
+ProjectsSmHeader.propTypes = {
+    subTitle: PropTypes.node,
+    title: PropTypes.node,
+    subTitleLink: PropTypes.string,
+    linkList: PropTypes.node,
+    linkGrid: PropTypes.node,
+    btnShowKanban: PropTypes.bool,
+        linkKanban: PropTypes.node
+};
+ProjectsSmHeader.defaultProps = {
+    subTitle: "Folder",
+    linkList: "#",
+    linkGrid: "#",
+    btnShowKanban: false,
+        linkKanban: "/apps/tasks-kanban"
+};
+
+export { ProjectsSmHeader };

app/routes/components/ProjectsDashboards/ProjectsList.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+import { 
+    Badge,
+    Progress
+} from './../../../components';
+
+const ProjectsList = (props) => (
+    <React.Fragment>
+        <div className="d-flex flex-column">
+            <div className="mb-3 d-flex justify-content-between">
+                <span className="mb-0 text-inverse">
+                     { props.title || faker.commerce.productName() }
+                </span>
+                <Badge color={ `${ props.badgeColor }` } pill className="align-self-center">
+                    { props.badgeTitle }
+                </Badge>
+            </div>
+            <Progress value={ `${ props.progressValue }` } className="mb-4" style={{height: "5px"}} />
+            <div className="d-flex justify-content-between">
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.completeValue }%
+                    </h5>
+                    <span>
+                        Complete
+                    </span>
+                </div>
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.myTasksValue }
+                    </h5>
+                    <span>
+                        My Tasks
+                    </span>
+                </div>
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.daysDueValue }
+                    </h5>
+                    <span>
+                        Days Due
+                    </span>
+                </div>  
+            </div>
+        </div>
+    </React.Fragment>
+)
+ProjectsList.propTypes = {
+    title: PropTypes.string,
+    badgeColor: PropTypes.string,
+    badgeTitle: PropTypes.string,
+    progressValue: PropTypes.string,
+    completeValue: PropTypes.string,
+    myTasksValue: PropTypes.string,
+    daysDueValue: PropTypes.string
+};
+ProjectsList.defaultProps = {
+    badgeColor: "secondary",
+    badgeTitle: "Waiting",
+    progressValue: "25",
+    completeValue: "60",
+    myTasksValue: "5",
+    daysDueValue: "53"
+};
+
+export { ProjectsList };

app/routes/components/ProjectsDashboards/TasksMedia.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { 
+    Media,
+    CustomInput
+} from './../../../components';
+
+const TasksMedia = (props) => (
+    <React.Fragment>
+        <Media>
+            <Media left className="mr-3">
+                <CustomInput className="pt-0 mt-0" type="checkbox" id={`taskMedia-${ props.id }` } label="" />
+            </Media>
+            <Media body>
+                <div className="mt-0 mb-2">
+                    <Link to="/apps/tasks/tasks-details" className="text-decoration-none">
+                        { faker.hacker.phrase() }
+                    </Link>
+                </div>
+                <div className="mb-0">
+                    { faker.date.past().toString() }
+                </div>
+            </Media>
+            <Media right className="ml-3">
+                <i className={ `fa fa-fw fa-circle text-${ props.iconColor }` }></i>
+            </Media>
+        </Media>
+    </React.Fragment>
+)
+TasksMedia.propTypes = {
+    iconColor: PropTypes.node,
+    id: PropTypes.node,
+};
+TasksMedia.defaultProps = {
+    iconColor: "muted",
+    id: "1"
+};
+
+export { TasksMedia };

app/routes/components/ProjectsDashboards/TinyDonutChart.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 200},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['yellow'], colors['red'], colors['success'], colors['yellow']];
+
+const TinyDonutChart = () => (
+    <PieChart width={ 80 } height={ 80 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 26 }
+            outerRadius={ 35 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChart };

app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 200},
+    {name: 'Group B', value: 200},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['primary'], colors['info'], colors['purple'], colors['yellow']];
+
+const TinyDonutChartAllProjects = () => (
+    <PieChart width={ 80 } height={ 80 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 26 }
+            outerRadius={ 35 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChartAllProjects };

app/routes/components/SearchResults/ImagesResultsCard.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    CardImg,
+    HolderProvider,
+    Media,
+    Avatar,
+    AvatarAddOn,
+    CardFooter,
+    CardBody
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "danger",
+    "success",
+    "warning",
+    "secondary"
+];
+
+const ImagesResultsCard = () => (
+    <React.Fragment>
+        { /* START Card */}
+        <Card className="mb-3">
+            <HolderProvider.Icon
+                iconChar=""
+                size={ 32 }
+            >
+            <CardImg top />
+            </HolderProvider.Icon>
+            <CardBody>
+                <div className="d-flex mb-3">
+                    <span>
+                        <a className="h6 text-decoration-none" href="#">
+                            { faker.commerce.productName() }
+                        </a>
+                        <br />
+                        <a href="#" className="text-success">
+                            { faker.internet.url() }
+                        </a>
+                    </span>
+                    <a href="#" className="ml-auto">
+                        <i className="fa fa-external-link"></i>
+                    </a>
+                </div>
+                <Media>
+                    <Media left className="align-self-center mr-3">
+                        <Avatar.Image
+                            size="md"
+                            src={ randomAvatar() }
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color={ randomArray(status) }
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        /> 
+                    </Media>
+                    <Media body>
+                        <div className="mt-0 d-flex text-inverse">
+                            { faker.name.firstName() } { faker.name.lastName() }
+                        </div>
+                        <span>
+                            { faker.address.state() }, { faker.address.stateAbbr() }
+                        </span>
+                    </Media>
+                </Media>
+            </CardBody>
+            <CardFooter className="bt-0">
+                <span className="mr-3">
+                    <i className="fa fa-eye mr-1"></i> <span className="text-inverse">233</span> 
+                </span>
+                <span>
+                    <i className="fa fa-heart-o mr-1"></i> <span className="text-inverse">98</span> 
+                </span>
+            </CardFooter>
+        </Card>
+        { /* END Card */}
+    </React.Fragment>
+)
+
+export { ImagesResultsCard };

app/routes/components/SearchResults/SearchResultsCard.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    CardBody
+} from './../../../components';
+
+import { randomArray } from './../../../utilities';
+
+const stars = [
+    <span key="stars5">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+    </span>,
+    <span key="stars4">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars4">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars2">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars1">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+];
+
+const SearchResultsCard = () => (
+    <React.Fragment>
+        <Card className="mb-3">
+            <CardBody>
+                <a href="#" className="h6 text-decoration-none">
+                    { faker.lorem.sentence() }
+                </a>
+                <br />
+                <div className="mb-2">
+                    <span className="text-success">
+                        { faker.internet.url() }
+                    </span>
+                    <span className="mx-2">·</span>
+                    { randomArray(stars) }
+                    <span className="mx-2">·</span>
+                    <span>
+                        Votes
+                    </span>
+                </div>
+                <p className="mb-0">
+                    { faker.lorem.paragraph() }
+                </p>
+            </CardBody>
+        </Card>
+    </React.Fragment>
+)
+
+export { SearchResultsCard };

app/routes/components/SearchResults/SearchResultsHeader.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { 
+    InputGroup,
+    InputGroupAddon,
+    Input,
+    Button,
+} from './../../../components';
+
+const SearchResultsHeader = () => (
+    <React.Fragment>
+        <div className="mb-4">
+            <h4 className="mt-2 mb-3">
+                <small className="mr-1">
+                    Search Results for
+                </small> "Content Designer" 
+                <small className="mr-2">
+                    <small className="ml-3">
+                        About 1,370 result (0.13 seconds)
+                    </small>
+                </small>
+            </h4>
+            <InputGroup>
+                <Input placeholder="Search for..." className="bg-white" />
+                <InputGroupAddon addonType="append">
+                    <Button color="primary">
+                        <i className="fa fa-search"></i>
+                    </Button>
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+    </React.Fragment>
+)
+
+export { SearchResultsHeader };

app/routes/components/SearchResults/SearchResultsLeftNav.js

@@ -0,0 +1,254 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+
+import { 
+    Nav, 
+    NavLink,
+    NavItem,
+    InputGroup,
+    InputGroupAddon,
+    Input,
+    Button,
+    CustomInput,
+    Badge
+} from './../../../components';
+
+const SearchResultsLeftNav = () => (
+    <React.Fragment>
+        { /* START Navigation */}
+        <Nav vertical pills className="mb-3">
+            <NavItem>
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Navigation
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink tag={ RouterNavLink } to="/apps/search-results" className="d-flex">
+                    All Results
+                    <Badge pill color="secondary" className="ml-auto align-self-center">
+                        12
+                    </Badge>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink tag={ RouterNavLink } to="/apps/images-results" className="d-flex">
+                    Images
+                    <Badge pill color="secondary" className="ml-auto align-self-center">
+                        5
+                    </Badge>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink tag={ RouterNavLink } to="/apps/videos-results" className="d-flex">
+                    Videos
+                    <Badge pill color="secondary" className="ml-auto align-self-center">
+                        10
+                    </Badge>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink tag={ RouterNavLink } to="/apps/users-results" className="d-flex">
+                    Users
+                    <Badge pill color="secondary" className="ml-auto align-self-center">
+                        2
+                    </Badge>
+                </NavLink>
+            </NavItem>
+        </Nav>
+        { /* END Navigation */}
+        { /* START Category */}
+        <Nav vertical className="mb-3">
+            <NavItem>
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Category
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="#" className="d-flex">
+                    <span>
+                        { faker.commerce.department() }
+                    </span>
+                    <span className="small ml-auto align-self-center text-body">
+                        ({ faker.finance.mask() })
+                    </span>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="#" className="d-flex">
+                    <span>
+                        { faker.commerce.department() }
+                    </span>
+                    <span className="small ml-auto align-self-center text-body">
+                        ({ faker.finance.mask() })
+                    </span>
+                </NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="#" className="d-flex">
+                    <span>
+                        { faker.commerce.department() }
+                    </span>
+                    <span className="small ml-auto align-self-center text-body">
+                        ({ faker.finance.mask() })
+                    </span>
+                </NavLink>
+            </NavItem>
+        </Nav>
+        { /* END Category */}
+        { /* START Rating */}
+        <Nav vertical className="mb-3">
+            <NavItem className="mb-2">
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Rating
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="radio" id="radio1" name="rating" label="Clothing" inline defaultChecked />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="radio" id="radio2" name="rating" label="Baby" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="radio" id="radio3" name="rating" label="Jewelery" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="radio" id="radio4" name="rating" label="Games" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+        </Nav>
+        { /* END Rating */}
+        { /* START Tags */}
+        <Nav vertical className="mb-3">
+            <NavItem className="mb-2">
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Tags
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="checkbox" id="checkbox1" label="Garden" inline defaultChecked />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="checkbox" id="checkbox2" label="Beauty" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="checkbox" id="checkbox3" label="Clothing" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+            <NavItem className="d-flex px-2 mb-2">
+                <CustomInput type="checkbox" id="checkbox4" label="Games" inline />
+                <span className="small ml-auto align-self-center">
+                    ({ faker.finance.mask() })
+                </span>
+            </NavItem>
+        </Nav>
+        { /* END Tags */}
+        { /* START Price */}
+        <Nav vertical className="mb-3">
+            <NavItem className="mb-2">
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Price
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem className="d-flex p-0">
+                <InputGroup>
+                    <InputGroupAddon addonType="prepend">
+                        $
+                    </InputGroupAddon>
+                    <Input placeholder="Min: 5" className="bg-white" />
+                    <Input placeholder="Max: 87" className="bg-white" />
+                    <InputGroupAddon addonType="append">
+                        <Button color="secondary" outline>
+                            <i className="fa fa-check"></i>
+                        </Button>
+                    </InputGroupAddon> 
+                </InputGroup>
+            </NavItem>
+        </Nav>
+        { /* END Price */}
+        { /* START Shipping */}
+        <Nav vertical className="mb-3">
+            <NavItem className="mb-2">
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Shipping
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem className="d-flex p-0">
+                <CustomInput type="select" name="select" id="shipping">
+                    <option>England</option>
+                    <option>United States</option>
+                    <option>Canada</option>
+                    <option>Australia</option>
+                    <option>Other...</option>
+                </CustomInput>
+            </NavItem>
+        </Nav>
+        { /* END Shipping */}
+        { /* START Sales */}
+        <Nav vertical className="mb-4">
+            <NavItem className="mb-2">
+                <NavLink href="#" className="small d-flex px-1">
+                    <span>
+                        Sales
+                    </span>
+                    <i className="fa fa-angle-down align-self-center ml-auto"></i>
+                </NavLink>
+            </NavItem>
+            <NavItem className="d-flex p-0">
+                <CustomInput type="select" name="select" id="sales">
+                    <option>England</option>
+                    <option>United States</option>
+                    <option>Canada</option>
+                    <option>Australia</option>
+                    <option>Other...</option>
+                </CustomInput>
+            </NavItem>
+        </Nav>
+        { /* END Sales */}
+        <Button color="primary" block>
+            Confirm Changes
+        </Button>
+        <Button color="link" block>
+            Reset to Default
+        </Button>
+    </React.Fragment>
+)
+
+export { SearchResultsLeftNav };

app/routes/components/SearchResults/UsersResultsCard.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    UncontrolledTooltip,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem,
+    Button,
+    Badge,
+    CardBody
+} from './../../../components';
+
+import {
+    Profile
+} from "./../Profile";
+
+import { randomArray } from './../../../utilities';
+
+const badgesColors = [
+    "info",
+    "primary",
+    "secondary"
+];
+
+const UsersResultsCard = () => (
+    <React.Fragment>
+        { /* START Card */}
+        <Card className="mb-3">
+            <CardBody>
+                <div className="d-flex">
+                    <Button color="link" size="sm" id="tooltipGridAddToFavorites">
+                        <i className="fa fa-star-o"></i>
+                    </Button>
+                    <UncontrolledTooltip placement="top" target="tooltipGridAddToFavorites">
+                        Add To Favorites
+                    </UncontrolledTooltip>
+                    <UncontrolledButtonDropdown className="ml-auto">
+                        <DropdownToggle color="link" size="sm">
+                            <i className="fa fa-bars"></i>
+                        </DropdownToggle>
+                        <DropdownMenu right>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-phone mr-2"></i>
+                                Call
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-comment mr-2"></i>
+                                Chat
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-video-camera mr-2"></i>
+                                Video
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-user mr-2"></i>
+                                Profile
+                            </DropdownItem>
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-pencil mr-2"></i>
+                                Edit
+                            </DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>
+                                <i className="fa fa-fw fa-trash mr-2"></i>
+                                Delete
+                            </DropdownItem>
+                        </DropdownMenu>
+                    </UncontrolledButtonDropdown>
+                </div>
+                <Profile />
+                <div className="text-center mb-4">
+                    <div className="mb-2">
+                        <span className="small">
+                            Labels
+                        </span>
+                    </div>
+                    <Badge pill color={ randomArray(badgesColors) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                    <Badge pill color={ randomArray(badgesColors) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                    <Badge pill color={ randomArray(badgesColors) }>
+                        { faker.commerce.department() }
+                    </Badge>
+                </div>
+                <div className="text-center mb-4">
+                    <div className="mb-2">
+                        <span className="small">
+                            Profile
+                        </span>
+                    </div>
+                    <p className="mb-0">
+                        { faker.lorem.paragraph() }
+                    </p>
+                </div>                
+            </CardBody>
+        </Card>
+        { /* END Card */}
+    </React.Fragment>
+)
+
+export { UsersResultsCard };

app/routes/components/SearchResults/VideosResultsCard.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    CardImg,
+    HolderProvider,
+    Media,
+    Avatar,
+    AvatarAddOn,
+    Button,
+    Badge,
+    CardBody
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "warning",
+    "danger",
+    "success",
+    "secondary"
+];
+const stars = [
+    <span key="stars5">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+    </span>,
+    <span key="stars4">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars4">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars2">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star text-warning"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+    <span key="stars1">
+        <i className="fa fa-fw fa-star text-warning" />
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+        <i className="fa fa-fw fa-star-o"></i>
+    </span>,
+];
+
+const VideosResultsCard = () => (
+    <React.Fragment>
+        <Card className="mb-3">
+            <div className="row">
+                <div className="col-md-4">
+                    <HolderProvider.Icon
+                        iconChar=""
+                        size={ 32 }
+                        width="100p"
+                        height={350}
+                    >
+                        <CardImg height="100px" />
+                    </HolderProvider.Icon>
+                </div>
+                <div className="col-md-8 py-2">
+                    <CardBody>
+                        <div>
+                            <a href="#" className="h6 mb-0">
+                                { faker.commerce.productName() }
+                            </a>
+                        </div>
+                        <div className="text-success mb-3">
+                            { faker.internet.url() }
+                        </div>
+                        <div className="mb-3">
+                            { faker.lorem.paragraph() }
+                        </div>
+                        <div>
+                            { randomArray(stars) } <span className="ml-2">16 Reviews</span>
+                        </div>
+                        <div className="mb-2">
+                            <Badge color="secondary" pill className="mr-1">
+                                { faker.internet.domainName() }
+                            </Badge>
+                            <Badge color="secondary" pill className="mr-1">
+                                { faker.internet.domainName() }
+                            </Badge>
+                            <Badge color="secondary" pill className="mr-1">
+                                { faker.internet.domainName() }
+                            </Badge>                       
+                        </div>
+                        <div>
+                            <Media>
+                                <Media left className="align-self-center mr-3">
+                                    <Avatar.Image
+                                        size="sm"
+                                        src={ randomAvatar() }
+                                        addOns={[
+                                            <AvatarAddOn.Icon 
+                                                className="fa fa-circle"
+                                                color="white"
+                                                key="avatar-icon-bg"
+                                            />,
+                                            <AvatarAddOn.Icon 
+                                                className="fa fa-circle"
+                                                color={ randomArray(status) }
+                                                key="avatar-icon-fg"
+                                            />
+                                        ]}
+                                    /> 
+                                </Media>
+                                <Media body>
+                                    <div className="mt-0">
+                                        { faker.name.firstName() } { faker.name.lastName() }
+                                    </div>
+                                </Media>
+                            </Media>  
+                        </div>  
+                    </CardBody>
+                </div>
+            </div>
+        </Card>
+    </React.Fragment>
+)
+
+export { VideosResultsCard };

app/routes/components/Sidebar/SidebarBottomA.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+    Button,
+    Sidebar,
+    UncontrolledPopover,
+    PopoverBody
+} from './../../../components';
+
+import { FooterAuth } from '../Pages/FooterAuth';
+import { FooterText } from '../FooterText';
+import { VersionSelector } from '../VersionSelector';
+
+const SidebarBottomA = () => (
+    <React.Fragment>
+        { /* START Desktop */ }
+        <Sidebar.HideSlim>
+            <Sidebar.Section className="pb-0">
+                <VersionSelector sidebar dashboard="Airframe" />
+            </Sidebar.Section>
+            <Sidebar.Section>
+                <FooterAuth className="text-muted" />
+            </Sidebar.Section>
+        </Sidebar.HideSlim>
+        { /* END Desktop */ }
+
+        { /* START Slim Only */ }
+        <Sidebar.ShowSlim>
+            <Sidebar.Section className="text-center">
+                { /* Slim Version Selector */ }
+                <VersionSelector
+                    dashboard="Airframe"
+                    sidebar
+                    compact
+                    render={() => (
+                        <i className="fa fa-fw fa-toggle-on"></i>
+                    )}
+                />
+
+                { /* Footer Text as Tooltip */ }
+                <Button
+                    id="UncontrolledSidebarPopoverFooter"
+                    color="link"
+                    className="sidebar__link p-0 mt-3"
+                >
+                    <i className="fa fa-fw fa-question-circle-o"></i>
+                </Button>
+                <UncontrolledPopover placement="left-end" target="UncontrolledSidebarPopoverFooter">
+                    <PopoverBody>
+                        <FooterText />
+                    </PopoverBody>
+                </UncontrolledPopover>
+            </Sidebar.Section>
+        </Sidebar.ShowSlim>
+        { /* END Slim Only */ }
+    </React.Fragment>
+)
+
+export { SidebarBottomA };

app/routes/components/Sidebar/SidebarBottomB.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import {
+    Button,
+    Sidebar,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    UncontrolledPopover,
+    PopoverBody,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+import { DropdownProfile } from '../Dropdowns/DropdownProfile';
+import { FooterAuth } from '../Pages/FooterAuth';
+import { FooterText } from '../FooterText';
+
+const SidebarBottomB = () => (
+    <React.Fragment>
+        { /* START Sidebar BOTTOM: B */ }
+        <Sidebar.Section>
+            { /* START DESKTOP View */ }
+            <Sidebar.HideSlim>
+                <UncontrolledButtonDropdown direction="up" className="mb-3">
+                    <DropdownToggle color="link" className="btn-profile text-left pl-0 pb-0">
+                            <Media>
+                                <Media left middle className="mr-3">
+                                    <Avatar.Image
+                                        size="md"
+                                        src={ randomAvatar() }
+                                        addOns={[
+                                            <AvatarAddOn.Icon 
+                                                className="fa fa-circle"
+                                                color="white"
+                                                key="avatar-icon-bg"
+                                            />,
+                                            <AvatarAddOn.Icon 
+                                                className="fa fa-circle"
+                                                color="success"
+                                                key="avatar-icon-fg"
+                                            />
+                                        ]}
+                                    /> 
+                                </Media>
+                                <Media body>
+                                    <span className="mt-0 d-flex h6 mb-1 text-truncate">
+                                        { faker.name.firstName() } { faker.name.lastName() } <i className="fa fa-fw fa-angle-up ml-1"></i>
+                                    </span>
+                                    <p className="small text-truncate">
+                                        { faker.name.jobTitle() }
+                                    </p>
+                                </Media>
+                            </Media>
+                    </DropdownToggle>
+                    <DropdownProfile />
+                </UncontrolledButtonDropdown>
+            </Sidebar.HideSlim>
+            { /* END DESKTOP View */ }
+            { /* START SLIM Only View */ }
+            <Sidebar.ShowSlim>
+                <div className="text-center">
+                    <UncontrolledButtonDropdown direction="right" className="mb-3">
+                        <DropdownToggle color="link" className="text-left pl-0 pb-0">
+                            <Avatar.Image
+                                size="sm"
+                                src={ randomAvatar() }
+                                addOns={[
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="white"
+                                        key="avatar-icon-bg"
+                                    />,
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="success"
+                                        key="avatar-icon-fg"
+                                    />
+                                ]}
+                            /> 
+                        </DropdownToggle>
+                        <DropdownProfile />
+                    </UncontrolledButtonDropdown>
+                </div>
+            </Sidebar.ShowSlim>
+            { /* END SLIM Only View  */ }
+            { /* START DESKTOP View */ }
+            <Sidebar.HideSlim>
+                <FooterAuth />
+            </Sidebar.HideSlim>
+            { /* END DESKTOP View */ }
+            { /* START SLIM Only View */ }
+            <Sidebar.ShowSlim>
+                <div className="text-center">
+                    <Button
+                        color="link"
+                        id="UncontrolledSidebarPopoverFooter"
+                        className="sidebar__link p-0"
+                    >
+                        <i className="fa fa-fw fa-question-circle-o" />
+                    </Button>
+                    <UncontrolledPopover placement="left-end" target="UncontrolledSidebarPopoverFooter">
+                        <PopoverBody>
+                            <FooterText />
+                        </PopoverBody>
+                    </UncontrolledPopover>
+                </div>
+            </Sidebar.ShowSlim>
+            { /* END SLIM Only View */ }
+        </Sidebar.Section>
+        { /* END Sidebar BOTTOM: B */ }
+    </React.Fragment>
+)
+
+export { SidebarBottomB };

app/routes/components/Sidebar/SidebarTopA.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import { Link } from 'react-router-dom';
+
+import { 
+    Sidebar,
+    UncontrolledButtonDropdown,
+    Avatar,
+    AvatarAddOn,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+const avatarImg = randomAvatar();
+
+const SidebarTopA = () => (
+    <React.Fragment>
+        { /* START: Sidebar Default */ }
+        <Sidebar.HideSlim>
+            <Sidebar.Section className="pt-0">
+                <Link to="/" className="d-block">
+                    <Sidebar.HideSlim>
+                        <Avatar.Image
+                            size="lg"
+                            src={ avatarImg }
+                            addOns={[
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="white"
+                                    key="avatar-icon-bg"
+                                />,
+                                <AvatarAddOn.Icon 
+                                    className="fa fa-circle"
+                                    color="success"
+                                    key="avatar-icon-fg"
+                                />
+                            ]}
+                        />
+                    </Sidebar.HideSlim>
+                </Link>
+                
+                <UncontrolledButtonDropdown>
+                    <DropdownToggle color="link" className="pl-0 pb-0 btn-profile sidebar__link">
+                        { faker.name.firstName() } { faker.name.lastName() }
+                        <i className="fa fa-angle-down ml-2"></i>
+                    </DropdownToggle>
+                    <DropdownMenu persist>
+                    <DropdownItem header>
+                        { faker.name.firstName() } { faker.name.lastName() }
+                    </DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem tag={ Link } to="/apps/profile-details">
+                        My Profile
+                    </DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/settings-edit">
+                        Settings
+                    </DropdownItem>
+                    <DropdownItem tag={ Link } to="/apps/billing-edit">
+                        Billings
+                    </DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem tag={ Link } to="/pages/login">
+                        <i className="fa fa-fw fa-sign-out mr-2"></i>
+                        Sign Out
+                    </DropdownItem>
+                    </DropdownMenu>
+                </UncontrolledButtonDropdown>
+                <div className="small sidebar__link--muted">
+                    { faker.name.jobTitle() }
+                </div>
+            </Sidebar.Section>
+        </Sidebar.HideSlim>
+        { /* END: Sidebar Default */ }
+
+        { /* START: Sidebar Slim */ }
+        <Sidebar.ShowSlim>
+            <Sidebar.Section>
+                <Avatar.Image
+                    size="sm"
+                    src={ avatarImg }
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-bg"
+                        />,
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="success"
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Sidebar.Section>
+        </Sidebar.ShowSlim>
+        { /* END: Sidebar Slim */ }
+    </React.Fragment>
+)
+
+export { SidebarTopA };

app/routes/components/Sidebar/SidebarTopB.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+    Sidebar,
+    UncontrolledTooltip
+} from './../../../components';
+
+import { VersionSelector } from '../VersionSelector';
+
+const SidebarTopB = () => (
+    <React.Fragment>
+        { /* START Sidebar TOP: B */ }
+            { /* START DESKTOP View */ }
+            <Sidebar.HideSlim>
+                <div>
+                    <div className="d-flex">
+                        <Link to="/" className="align-self-center sidebar__brand" id="tooltipBackToHome">
+                            <i className="fa fa-send fa-fw fa-2x"></i>
+                        </Link>
+                        <UncontrolledTooltip placement="right" target="tooltipBackToHome">
+                            Back to Home
+                        </UncontrolledTooltip>
+
+                        <VersionSelector
+                            down
+                            sidebar
+                            dashboard="Airframe"
+                            render={(currentVersion) => (
+                                <React.Fragment>
+                                    <div className="h4 fw-600 sidebar-logo mb-1 text-left">
+                                        react.bs4 <i className="fa fa-angle-down ml-1 sidebar__link--muted"></i>
+                                    </div>
+                                    <div
+                                        className="job-title small text-left sidebar__link--muted"
+                                    >
+                                        Version: {currentVersion.label}, {currentVersion.version}
+                                    </div>
+                                </React.Fragment>
+                            )}
+                        />
+                    </div>
+                </div>
+            </Sidebar.HideSlim>
+            { /* END DESKTOP View */ }
+            { /* START SLIM Only View */ }
+            <Sidebar.ShowSlim>
+                <div className="text-center">
+                    <Link to="/">
+                        <i className="fa fa-send fa-fw text-primary" id="tooltipBackToHomeSlim"></i>
+                    </Link>
+                    <UncontrolledTooltip placement="right" target="tooltipBackToHomeSlim">
+                        Back to Home
+                    </UncontrolledTooltip>
+                </div>
+            </Sidebar.ShowSlim>
+            { /* END SLIM Only View  */ }
+        { /* END Sidebar TOP: B */ }
+    </React.Fragment>
+)
+
+export { SidebarTopB };

app/routes/components/Stock/SimpleLineChart.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { 
+    Line, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    LineChart,
+    Dot
+} from './../../../components/recharts';
+
+import colors from './../../../colors';
+
+const data = [
+      {name: 'Mar \'11', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Dec \'11', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Oct \'12', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Jul \'13', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'May \'14', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Feb \'15', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Dec \'15', uv: 3490, pv: 4300, amt: 2100},
+];
+
+// eslint-disable-next-line
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        fill={ stroke }
+        stroke={ colors['white'] }
+        r={ 4 }
+        strokeWidth={ 2 }
+    />
+);
+
+const generateActiveDot = (props) => (
+    <Dot
+        { ...props }
+        stroke={ colors['white'] }
+        r={ 7 }
+    />
+);
+
+const SimpleLineChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <LineChart data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <Tooltip/>
+           <Legend />
+           <Line dataKey="pv" stroke={ colors['success'] } dot={generateDot} activeDot={generateActiveDot} name='Internistic Value' />
+           <Line dataKey="uv" stroke={ colors['purple'] } dot={generateDot} activeDot={generateActiveDot} name='Buy Price' />
+           <Line dataKey="amt" stroke={ colors['blue'] } dot={generateDot} activeDot={generateActiveDot} name='Stock Price' />
+      </LineChart>
+    </ResponsiveContainer>
+);
+
+export { SimpleLineChart };

app/routes/components/Stock/TrTableFavStock.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import _ from 'lodash';
+import { randomArray } from './../../../utilities';
+import {
+    Badge
+} from './../../../components';
+
+const name = [
+    "Action Score",
+    "Quality Score",
+    "Value Score",
+    "Growth Score"
+];
+const badge = [
+    "a",
+    "q",
+    "v",
+    "g"
+];
+const value = [
+    "23",
+    "67",
+    "12",
+    "89",
+    "11",
+    "10",
+    "43",
+    "98"
+];
+
+const TrTableFavStock = () => {
+    return (
+        <React.Fragment>
+            {
+                _.times(5, (index) => (
+                    <tr key={ index }>
+                        <td className="align-middle">
+                            { randomArray(name) }
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                        <td className="align-middle">
+                            <Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
+                        </td>
+                    </tr>
+                ))
+            }
+        </React.Fragment>)
+}
+
+export { TrTableFavStock };

app/routes/components/Stock/TrTableStock.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import _ from 'lodash';
+import { randomArray } from './../../../utilities';
+
+const name = [
+    <React.Fragment key="name-1">
+        <span className="text-inverse">Caterpillar</span> <small>(CAT)</small>
+    </React.Fragment>,
+    <React.Fragment key="name-2">
+        <span className="text-inverse">Google</span> <small>(GOOGL)</small>
+    </React.Fragment>,
+    <React.Fragment key="name-3">
+        <span className="text-inverse">Microsoft</span> <small>(MSFT)</small>
+    </React.Fragment>,
+    <React.Fragment key="name-4">
+        <span className="text-inverse">Apple</span> <small>(AAPL)</small>
+    </React.Fragment>,
+    <React.Fragment key="name-5">
+        <span className="text-inverse">Samsung Electronics</span> <small>(0593xq)</small>
+    </React.Fragment>
+];
+
+const percentForPrice = [
+    "34.18",
+    "21.34",
+    "19.12",
+    "67.82"
+];
+const score = [
+    "87",
+    "11",
+    "12"
+];
+const q = [
+    "35",
+    "98",
+    "56"
+];
+const v = [
+    "17",
+    "38",
+    "23"
+];
+const g = [
+    "45",
+    "15",
+    "16"
+];
+
+const price = [
+    <React.Fragment key="price1">
+        <span className="text-success">
+            <i className="fa fa-caret-up mr-1"></i> { randomArray(percentForPrice) }%
+        </span>
+    </React.Fragment>,
+    <React.Fragment key="price2">
+        <span className="text-danger">
+            <i className="fa fa-caret-down mr-1"></i> { randomArray(percentForPrice) }%
+        </span>
+    </React.Fragment>
+];
+
+const TrTableStock = () => {
+    return (
+        <React.Fragment>
+            {
+                _.times(5, (index) => (
+                    <tr key={ index }>
+                        <td className="align-middle">
+                            { randomArray(name) }
+                        </td>
+                        <td className="align-middle text-right text-nowrap">
+                            { randomArray(price) }
+                        </td>
+                        <td className="align-middle text-right">
+                            { randomArray(score) }
+                        </td>
+                        <td className="align-middle text-right">
+                            { randomArray(q) }
+                        </td>
+                        <td className="align-middle text-right">
+                            { randomArray(v) }
+                        </td>
+                        <td className="align-middle text-right">
+                            { randomArray(g) }
+                        </td>
+                    </tr>
+                ))
+            }
+        </React.Fragment>)
+}
+
+export { TrTableStock };

app/routes/components/Stock/TrTableSummary.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import _ from 'lodash';
+import { randomArray } from './../../../utilities';
+
+const name = [
+    "PE",
+    "CROIC",
+    "Magic Y",
+    "EV/EBITDA",
+    "P/FCF",
+    "ROA"
+];
+
+const tr2013 = [
+    "33*4%",
+    "10*4",
+    "2*5"
+];
+
+const ttm = [
+    "28*3%",
+    "16*5"
+];
+
+const TrTableSummary = () => (
+    <React.Fragment>
+        {
+            _.times(9, (index) => (
+                <tr key={ index }>
+                    <td className="align-middle text-inverse">
+                        { randomArray(name) }
+                    </td>
+                    <td className="align-middle text-right">
+                        { randomArray(tr2013) }
+                    </td>
+                    <td className="align-middle text-right">
+                        { randomArray(tr2013) }
+                    </td>
+                    <td className="align-middle text-right">
+                        { randomArray(ttm) }
+                    </td>
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableSummary };

app/routes/components/Tables/TrBorderless.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Badge,
+    UncontrolledTooltip
+} from './../../../components';
+
+const TrBorderless = () => (
+    <React.Fragment>
+        { /* START TR */}
+        <tr>
+            <td className="align-middle">
+                <i className="fa fa-fw fa-check text-success"></i>
+            </td>
+            <td className="align-middle">
+                <samp>{ faker.random.number() }</samp>
+            </td>
+            <td className="align-middle">
+                { faker.date.weekday() }, 12 { faker.date.month() }, 2018
+            </td>
+            <td className="align-middle text-inverse">
+                $ { faker.finance.amount() }
+            </td>
+            <td className="align-middle">
+                <Badge color="primary">
+                    Premium
+                </Badge>
+            </td>
+            <td className="align-middle">
+                <i className="fa fa-fw fa-paypal text-primary mr-2"></i>
+                { faker.internet.email() }
+            </td>
+            <td className="align-middle text-right">
+                <a href="#" id="UncontrolledTooltipDownload">
+                    <i className="fa fa-fw fa-download text-primary"></i>
+                </a>
+                <UncontrolledTooltip placement="left" target="UncontrolledTooltipDownload">
+                    Download
+                </UncontrolledTooltip>
+            </td>
+        </tr>
+        { /* END TR */}
+    </React.Fragment>
+)
+
+export { TrBorderless };

app/routes/components/Tables/TrResponsive.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Media,
+    UncontrolledTooltip
+} from './../../../components';
+
+const TrResponsive = () => (
+    <React.Fragment>
+        { /* START TR */}
+        <tr>
+            <td className="align-middle">
+                <i className="fa fa -fw fa-circle text-danger"></i>
+            </td>
+            <td className="align-middle">
+                <Media>
+                    <Media left className="align-self-center mr-3">
+                        <i className="fa fa-fw fa-desktop fa-lg"></i>
+                    </Media>
+                    <Media body>
+                        <div className="mt-0 d-flex">
+                            <span className="text-inverse">
+                                Safari
+                            </span> / 
+                            { faker.system.semver() }
+                        </div>
+                        <span>
+                            macOs { faker.system.semver() }
+                        </span>
+                    </Media>
+                </Media>
+            </td>
+            <td className="align-middle">
+                <div>
+                    <samp>
+                        { faker.internet.ip() }
+                    </samp>
+                </div>
+                <span>
+                    -
+                </span>
+            </td>
+            <td className="align-middle">
+                <div>
+                    { faker.address.city() }
+                </div>
+                <span>
+                    { faker.address.state() }, { faker.address.country() }
+                </span>
+            </td>
+            <td className="align-middle">
+                { faker.date.weekday() }, 12 { faker.date.month() }, 2018<br />
+                12:34 PM
+            </td>
+            <td className="align-middle text-right">
+                <a href="#" id="UncontrolledTooltipRevoke">
+                    <i className="fa fa-fw fa-close text-danger"></i>
+                </a>
+                <UncontrolledTooltip placement="left" target="UncontrolledTooltipRevoke">
+                    Revoke
+                </UncontrolledTooltip>
+            </td>
+        </tr>
+        { /* END TR */}
+    </React.Fragment>
+)
+
+export { TrResponsive };

app/routes/components/Tasks/TasksCardGrid.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { 
+    Card,
+    CardBody,
+    Badge,
+    Avatar,
+    Media,
+    CustomInput,
+    CardFooter,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownItem,
+    DropdownMenu,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const badgesColors = [
+    "secondary"
+];
+
+const avatarStatus = [
+    "secondary",
+    "warning",
+    "danger",
+    "success"
+];
+
+const prioStatus = [
+        <React.Fragment key="1">
+            <i className="fa fa-circle text-success mr-2"></i>
+            Small<i className="fa fa-angle-down ml-2" />
+        </React.Fragment>,
+        <React.Fragment key="2">
+            <i className="fa fa-circle text-primary mr-2"></i>
+            Normal<i className="fa fa-angle-down ml-2" />
+        </React.Fragment>,
+        <React.Fragment key="3">
+            <i className="fa fa-circle text-warning mr-2"></i>
+            High<i className="fa fa-angle-down ml-2" />
+        </React.Fragment>,
+        <React.Fragment key="3">
+            <i className="fa fa-circle text-danger mr-2"></i>
+            Big<i className="fa fa-angle-down ml-2" />
+        </React.Fragment>
+];
+
+const TasksCardGrid = (props) => (
+    <React.Fragment>
+        { /* START Card */}
+        <Card>
+            <CardBody>
+                <UncontrolledButtonDropdown>
+                    <DropdownToggle color="link" link size="sm" className="pl-0 mb-3 text-decoration-none">
+                        { randomArray(prioStatus) }
+                    </DropdownToggle>
+                    <DropdownMenu>
+                        <DropdownItem header>Select Priority</DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-circle text-danger mr-2"></i>
+                            Big 
+                        </DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-circle text-warning mr-2"></i>
+                            High 
+                        </DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-circle text-primary mr-2"></i>
+                            Normal 
+                        </DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-circle text-success mr-2"></i>
+                            Small 
+                        </DropdownItem>
+                    </DropdownMenu>
+                </UncontrolledButtonDropdown>
+                <Media className="mb-2">
+                    <Media left middle className="mr-2">
+                        <CustomInput type="checkbox" id={`TasksCardGrid-${ props.id }` } label="" />
+                    </Media>
+                    <Media body>
+                        <span className="mr-2">#{ faker.random.number() }</span>
+                        <Link to="/apps/task-details" className="text-decoration-none">
+                            { faker.hacker.phrase() }
+                        </Link>
+                    </Media>
+                </Media>
+                <p className="mb-2">
+                    { faker.lorem.sentence() }
+                </p>
+                <div className="mb-3">
+                    <Badge pill color={ randomArray(badgesColors) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                    <Badge pill color={ randomArray(badgesColors) } className="mr-1">
+                        { faker.commerce.department() }
+                    </Badge>
+                </div>
+                <div>
+                    <Avatar.Image
+                        size="md"
+                        src={ randomAvatar() }
+                        className="mr-3"
+                        addOns={[
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color="white"
+                                key="avatar-icon-bg"
+                            />,
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color={ randomArray(avatarStatus) }
+                                key="avatar-icon-fg"
+                            />
+                        ]}
+                    />
+                    <Avatar.Image
+                        size="md"
+                        src={ randomAvatar() }
+                        className="mr-3"
+                        addOns={[
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color="white"
+                                key="avatar-icon-bg"
+                            />,
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color="success"
+                                key="avatar-icon-fg"
+                            />
+                        ]}
+                    />
+                    <Avatar.Image
+                        size="md"
+                        src={ randomAvatar() }
+                        className="mr-3"
+                        addOns={[
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color="white"
+                                key="avatar-icon-bg"
+                            />,
+                            <AvatarAddOn.Icon 
+                                className="fa fa-circle"
+                                color="success"
+                                key="avatar-icon-fg"
+                            />
+                        ]}
+                    />
+                </div>
+            </CardBody>
+            <CardFooter className="d-flex">
+                <span className="align-self-center">
+                    20 Sep, Fri, 2018
+                </span>
+                <UncontrolledButtonDropdown className="align-self-center ml-auto">
+                    <DropdownToggle color="link" size="sm" className="pr-0">
+                        <i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
+                    </DropdownToggle>
+                    <DropdownMenu right>
+                        <DropdownItem>
+                            <i className="fa fa-fw fa-folder-open mr-2"></i>
+                            View
+                        </DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-fw fa-ticket mr-2"></i>
+                            Add Task
+                        </DropdownItem>
+                        <DropdownItem>
+                            <i className="fa fa-fw fa-paperclip mr-2"></i>
+                            Add Files
+                        </DropdownItem>
+                        <DropdownItem divider />
+                        <DropdownItem>
+                            <i className="fa fa-fw fa-trash mr-2"></i>
+                            Delete
+                        </DropdownItem>
+                    </DropdownMenu>
+                </UncontrolledButtonDropdown>
+            </CardFooter>
+        </Card>
+        { /* END Card */}
+    </React.Fragment>
+)
+
+TasksCardGrid.propTypes = {
+    id: PropTypes.node
+};
+TasksCardGrid.defaultProps = {
+    id: "1"
+};
+
+export { TasksCardGrid };

app/routes/components/Timeline/TimelineDefault.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+
+import { randomArray } from './../../../utilities';
+
+const hour = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12"
+];
+
+const min = [
+    "00",
+    "15",
+    "20",
+    "25",
+    "30",
+    "35",
+    "40",
+    "45",
+    "50"
+];
+
+const amPm = [
+    "am",
+    "pm"
+];
+
+const TimelineDefault = (props) => (
+    <React.Fragment>
+        { /* START TIMELINE Default */}
+        <div className="timeline timeline-datetime">
+            {
+                props.showPillDate && (
+                    <React.Fragment>
+                        { /* START PILL Date */}
+                        <div className="timeline-date">
+                            <span className="badge badge-pill badge-secondary">
+                                { props.pillDate }
+                            </span>
+                        </div>
+                        { /* END PILL Date */}
+                    </React.Fragment>
+                    )
+            }
+            <div className="timeline-item pr-3">
+                { /* START Small ICON  */}
+                <div className="timeline-icon">
+                    <i className={` fa fa-circle-o text-${ props.smallIconColor }`}></i>
+                </div>
+                { /* END Small ICON  */}
+                <div className="timeline-item-inner pb-0">
+                    { /* START HOUR  */}
+                    <span className="timeline-item-time">
+                        { randomArray(hour) }:{ randomArray(min) } { randomArray(amPm) }
+                    </span>
+                    { /* START HOUR  */}
+                    <div className="timeline-item-head pb-0">
+                        { /* START ICON Circle  */}
+                        <div className="pull-left mr-2">
+                            <span className="fa-stack fa-lg">
+                                <i className={` fa fa-circle fa-stack-2x text-${ props.iconCircleColor }`}></i> 
+                                <i className={` fa fa-stack-1x text-white fa-${ props.iconCircle }`}></i>
+                            </span>
+                        </div>
+                        { /* END ICON Circle  */}
+                        <div className="user-detail">
+                            { /* START TITLE  */}
+                            <h6 className="mb-0">
+                                { faker.company.catchPhrase() }
+                            </h6>
+                            { /* END TITLE  */}
+                            { /* START SUB-TITLE  */}
+                            <p>
+                                { faker.company.catchPhraseAdjective() }
+                            </p>
+                            { /* END SUB-TITLE  */}
+                        </div>
+                    </div>
+                    { /* START CONTENT  */}
+                    <div className="timeline-item-content">
+                        <p>
+                            { faker.lorem.paragraph() }
+                        </p>
+                    </div>
+                    { /* END CONTENT  */}
+                </div>
+            </div>
+        </div>
+        { /* END TIMELINE Default */}
+    </React.Fragment>
+)
+
+TimelineDefault.propTypes = {
+    showPillDate: PropTypes.bool,
+        pillDate: PropTypes.string,
+    smallIconColor: PropTypes.string,
+    iconCircleColor: PropTypes.string,
+        iconCircle: PropTypes.string,
+    badgeTitle: PropTypes.string
+};
+
+TimelineDefault.defaultProps = {
+    showPillDate: false,
+        pillDate: "Waiting",
+    smallIconColor: "secondary",
+    iconCircleColor: "secondary",
+        iconCircle: "question"
+};
+
+export { TimelineDefault };

app/routes/components/Timeline/TimelineMini.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+import { 
+    Badge
+} from './../../../components';
+
+const TimelineMini = (props) => (
+    <React.Fragment>
+        { /* START TIMELINE Position */}
+        <div className="timeline">
+            {
+                props.showPillDate && (
+                    <React.Fragment>
+                        { /* START PILL Date */}
+                        <div className="timeline-date">
+                            <Badge pill>
+                                { props.pillDate }
+                            </Badge>
+                        </div>
+                        { /* END PILL Date */}
+                    </React.Fragment>
+                    )
+            }
+            { /* START POST Timeline */}
+            <div className="timeline-item">
+                { /* Icon */}    
+                <div className="timeline-icon">
+                    <i className={` fa fa-fw fa-${ props.icon } ${ props.iconClassName }`}></i>
+                </div>
+                <div className="timeline-item-head clearfix mb-0 pl-3">
+                    { /* Badge */}
+                    <div className="mb-2">
+                        <span className={`badge badge-${ props.badgeColor } `}>
+                            { props.badgeTitle }
+                        </span>
+                    </div>
+                    { /* Content */}
+                    <p className="text-inverse mb-1">
+                        { faker.company.catchPhrase() }
+                    </p>
+                    { /* Date */}
+                    <p>
+                        { faker.date.past().toString() }
+                    </p>
+                </div>
+            </div>
+            { /* END POST Timeline */}
+        </div>
+        { /* END Timeline Position */}
+    </React.Fragment>
+)
+
+TimelineMini.propTypes = {
+    showPillDate: PropTypes.bool,
+        pillDate: PropTypes.string,
+    icon: PropTypes.string,
+    iconClassName: PropTypes.string,
+    badgeColor: PropTypes.string,
+    badgeTitle: PropTypes.string
+};
+
+TimelineMini.defaultProps = {
+    showPillDate: false,
+        pillDate: "Waiting",
+    icon: "question-circle",
+    iconClassName: "text-secondary",
+    badgeColor: "secondary",
+    badgeTitle: "Waiting"
+};
+
+export { TimelineMini };

app/routes/components/Users/UsersCardGrid.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { 
+    Card,
+    CardBody,
+    Button,
+    UncontrolledTooltip,
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownMenu,
+    CardFooter,
+    CustomInput,
+    ButtonGroup,
+    DropdownItem
+} from './../../../components';
+
+import {
+    Profile
+} from "./../Profile";
+
+const UsersCardGrid = (props) => (
+    <React.Fragment>
+        { /* START Card */}
+        <Card>
+            <CardBody>
+                <div className="d-flex">
+                    <CustomInput className="pt-0 mt-0" type="checkbox" id={`usersCardGrid-${ props.id }` } label="" />
+                    <ButtonGroup size="sm" className="ml-auto">
+                        <Button color="link" size="sm" id={`usersCardGridTooltip-${ props.id }` } className="pt-0">
+                            <i className="fa fa-star-o"></i>
+                        </Button>
+                        <UncontrolledTooltip placement="top" target={`usersCardGridTooltip-${ props.id }` }>
+                            Add To Favorites
+                        </UncontrolledTooltip>
+                        <UncontrolledButtonDropdown className="ml-auto">
+                            <DropdownToggle color="link" size="sm" className="pt-0">
+                                <i className="fa fa-fw fa-bars pr-0" />
+                            </DropdownToggle>
+                            <DropdownMenu right>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-phone mr-2"></i>
+                                    Call
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-comment mr-2"></i>
+                                    Chat
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-video-camera mr-2"></i>
+                                    Video
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-user mr-2"></i>
+                                    Profile
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-pencil mr-2"></i>
+                                    Edit
+                                </DropdownItem>
+                                <DropdownItem divider />
+                                <DropdownItem>
+                                    <i className="fa fa-fw fa-trash mr-2"></i>
+                                    Delete
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledButtonDropdown>
+                    </ButtonGroup>
+                </div>
+                <Profile />
+            </CardBody>
+            <CardFooter className="bt-0 text-center">
+                <span>
+                    <span className="mr-3">
+                        <i className="fa fa-user-o mr-1"></i> <span className="text-inverse">233</span> 
+                    </span>
+                    <span>
+                        <i className="fa fa-star-o mr-1"></i> <span className="text-inverse">98</span>
+                    </span>
+                </span>
+            </CardFooter>
+        </Card>
+        { /* END Card */}
+    </React.Fragment>
+)
+UsersCardGrid.propTypes = {
+    id: PropTypes.node
+};
+UsersCardGrid.defaultProps = {
+    id: "1"
+};
+
+export { UsersCardGrid };

app/routes/components/Users/UsersLeftNav.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { 
+    Nav,
+    NavItem,
+    NavLink,
+    Badge
+} from './../../../components';
+
+const UsersLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" active>
+                        All Contacts
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        Favorites
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        Private
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <div className="small mb-3">
+                Tags
+            </div>
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-primary align-self-center mr-2"></i>
+                        Family
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            12
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-info align-self-center mr-2"></i>
+                        Friends
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            3
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-success align-self-center mr-2"></i>
+                        Work
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            67
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-warning align-self-center mr-2"></i>
+                        Trips
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            5
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#" className="d-flex">
+                        <i className="fa fa-fw fa-circle text-danger align-self-center mr-2"></i>
+                        Other
+                        <Badge color="secondary" pill className="ml-auto align-self-center">
+                            1
+                        </Badge>
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="#">
+                        <i className="fa fa-fw fa-plus mr-2"></i>
+                        Add New Label
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { UsersLeftNav };

app/routes/components/VersionSelector.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import fetch from 'node-fetch';
+import classNames from 'classnames';
+import _ from 'lodash';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import {
+    UncontrolledButtonDropdown,
+    DropdownMenu,
+    DropdownItem,
+    DropdownToggle
+} from './../../components';
+
+const SERVICE_URL = "http://dashboards.webkom.co:8000";
+
+export class VersionSelector extends React.Component {
+    static propTypes = {
+        dashboard: PropTypes.string,
+        down: PropTypes.bool,
+        compact: PropTypes.bool,
+        render: PropTypes.func,
+        className: PropTypes.string,
+        sidebar: PropTypes.bool
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            versions: [],
+            isError: false,
+            render: null
+        };
+    }
+
+    async fetchVersions() {
+        const { dashboard } = this.props;
+        let versions;
+        try {
+            versions = await fetch(`${SERVICE_URL}/dashboards/versions`)
+                .then(response => response.json());
+        } catch(exc) {
+            this.setState({ isError: true })
+        }
+        const targetVersions = _.filter(versions, { dashboardName: dashboard });
+        
+        this.setState({ versions: targetVersions });
+    }
+
+    componentDidMount() {
+        this.fetchVersions();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.dashboard !== this.props.dashboard) {
+            this.fetchVersions();
+        }
+    }
+
+    render() {
+        const { down, render, className, sidebar } = this.props;
+        const { versions } = this.state;
+        const currentVersion = _.find(versions, { label: "React" });
+
+        return (
+            <UncontrolledButtonDropdown direction={ down ? "down" : "up" } className={ className }>
+                <DropdownToggle
+                    disabled={ _.isEmpty(versions) }
+                    tag="a"
+                    href="javascript:;"
+                    className={classNames(
+                        'btn-switch-version',
+                        {
+                            'sidebar__link': sidebar,
+                        }
+                    )}
+                >
+                    {
+                        currentVersion ? (
+                            render ? render(currentVersion) : (
+                                <React.Fragment>
+                                    React {currentVersion.version} <i className={`fa ${down ? "fa-angle-down" : "fa-angle-up"} ml-2`}></i>
+                                    <br />
+                                    <span className={ classNames('small', { 'sidebar__link--muted': sidebar }) }>
+                                        { moment(currentVersion.date).format("ddd, MMM DD, YYYY h:mm:ss A") }
+                                    </span>
+                                </React.Fragment>
+                            )
+                        ) : (
+                            <span>Loading...</span>
+                        )
+                    }
+                </DropdownToggle>
+                {
+                    (!_.isEmpty(versions)) && (
+                        <DropdownMenu>
+                            <DropdownItem header>
+                                Bootstrap 4 Versions:
+                            </DropdownItem>
+                            {
+                                _.map(versions, (version, index) => (
+                                    <DropdownItem
+                                        key={ index }
+                                        href={ version.demoUrl }
+                                        className="d-flex"
+                                        active={ version === currentVersion }
+                                    >
+                                        <span>
+                                            { version.label } { version.version }
+                                            <br />
+                                            <span className="small">
+                                                { moment(version.date).format("ddd, MMM DD, YYYY h:mm:ss A") }
+                                            </span>
+                                        </span>
+                                        {
+                                            (version === currentVersion) && (
+                                                <i className="fa fa-fw fa-check text-success ml-auto align-self-center pl-3" />
+                                            )
+                                        }
+                                    </DropdownItem>
+                                ))
+                            }
+                        </DropdownMenu>
+                    )
+                }
+            </UncontrolledButtonDropdown>
+        );
+    }
+}