Tomasz Owczarczyk
357
app/routes/Apps/ProfileDetails/ProfileDetails.js
Executable file
357
app/routes/Apps/ProfileDetails/ProfileDetails.js
Executable file
@@ -0,0 +1,357 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
CardHeader,
|
||||
DropdownToggle,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
UncontrolledButtonDropdown,
|
||||
Card,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardGroup,
|
||||
Table,
|
||||
TabPane,
|
||||
Badge,
|
||||
Nav,
|
||||
NavItem,
|
||||
UncontrolledTabs
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import { Profile } from "../../components/Profile";
|
||||
import { ProfileOverviewCard } from "../../components/Profile/ProfileOverviewCard";
|
||||
import { DlRowContacts } from "../../components/Profile/DlRowContacts";
|
||||
import { DlRowAddress } from "../../components/Profile/DlRowAddress";
|
||||
import { ChatLeft } from "../../components/Chat/ChatLeft";
|
||||
import { ChatRight } from "../../components/Chat/ChatRight";
|
||||
import { ChatCardFooter } from "../../components/Chat/ChatCardFooter";
|
||||
import { TrTableMessages } from "./components/TrTableMessages";
|
||||
import { TimelineDefault } from "../../components/Timeline/TimelineDefault";
|
||||
|
||||
|
||||
const ProfileDetails = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Profile Details"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Profile />
|
||||
<div className="text-center pb-1">
|
||||
<ul className="list-inline">
|
||||
<li className="list-inline-item text-center">
|
||||
<h2 className="mb-1">23</h2>
|
||||
<span>Contracts</span>
|
||||
</li>
|
||||
<li className="list-inline-item text-center">
|
||||
<h2 className="mb-1">13</h2>
|
||||
<span>Tasks</span>
|
||||
</li>
|
||||
<li className="list-inline-item text-center">
|
||||
<h2 className="mb-1">5</h2>
|
||||
<span>Relases</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Row className="mt-3">
|
||||
<Col sm={ 6 } md={ 6 }>
|
||||
<Button color="primary" block tag={ Link } to="/apps/new-email" className="mb-3 mb-lg-0">
|
||||
Message
|
||||
</Button>
|
||||
</Col>
|
||||
<Col sm={ 6 } md={ 6 }>
|
||||
<Button color="secondary" outline block tag={ Link } to="/apps/profile-edit">
|
||||
Edit
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">
|
||||
Profile
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Dicta sapiente earum, necessitatibus commodi eius pariatur
|
||||
repudiandae cum sunt officiis ex!
|
||||
</p>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">
|
||||
Labels
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-left mb-4">
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">Contact</span>
|
||||
</div>
|
||||
<DlRowContacts
|
||||
leftSideClassName="text-lg-left"
|
||||
rightSideClassName="text-lg-right text-inverse"
|
||||
/>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">Address</span>
|
||||
</div>
|
||||
<DlRowAddress
|
||||
leftSideClassName="text-lg-left"
|
||||
rightSideClassName="text-lg-right text-inverse"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 8 }>
|
||||
<UncontrolledTabs initialActiveTabId="overview">
|
||||
{ /* START Pills Nav */}
|
||||
<Nav pills className="mb-4 flex-column flex-md-row mt-4 mt-lg-0">
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="overview">
|
||||
Overview
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="detailContact">
|
||||
Detail Contact
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="chat">
|
||||
Chat
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="messages">
|
||||
Messages <Badge pill color="secondary" className="ml-2">5</Badge>
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Pills Nav */}
|
||||
<UncontrolledTabs.TabContent>
|
||||
<TabPane tabId="overview">
|
||||
<CardGroup className="mb-5">
|
||||
<Card body>
|
||||
<ProfileOverviewCard
|
||||
title="Views"
|
||||
badgeColor="primary"
|
||||
badgeTitle="Monthly"
|
||||
value="6.200"
|
||||
valueTitle="Total Views"
|
||||
footerTitle="Last Month"
|
||||
footerTitleClassName="text-success"
|
||||
footerIcon="caret-up"
|
||||
footerValue="23%"
|
||||
/>
|
||||
</Card>
|
||||
<Card body>
|
||||
<ProfileOverviewCard
|
||||
title="Orders"
|
||||
badgeColor="info"
|
||||
badgeTitle="Annual"
|
||||
value="75.938"
|
||||
valueTitle="New Orders"
|
||||
footerTitle="Last Annual"
|
||||
footerTitleClassName="text-danger"
|
||||
footerIcon="caret-down"
|
||||
footerValue="96%"
|
||||
/>
|
||||
</Card>
|
||||
<Card body>
|
||||
<ProfileOverviewCard
|
||||
title="Visits"
|
||||
badgeColor="secondary"
|
||||
badgeTitle="Today"
|
||||
value="75.938"
|
||||
valueTitle="Total Visits"
|
||||
footerTitle="Yesterday"
|
||||
footerTitleClassName="text-success"
|
||||
footerIcon="caret-up"
|
||||
footerValue="40%"
|
||||
/>
|
||||
</Card>
|
||||
</CardGroup>
|
||||
<TimelineDefault
|
||||
showPillDate
|
||||
pillDate="Today"
|
||||
smallIconColor="danger"
|
||||
iconCircleColor="danger"
|
||||
iconCircle="exclamation"
|
||||
/>
|
||||
<TimelineDefault
|
||||
showPillDate
|
||||
pillDate="Yesterday"
|
||||
smallIconColor="info"
|
||||
iconCircleColor="info"
|
||||
iconCircle="comment"
|
||||
/>
|
||||
<TimelineDefault
|
||||
showPillDate
|
||||
pillDate="2 Days ago"
|
||||
smallIconColor="primary"
|
||||
iconCircleColor="primary"
|
||||
iconCircle="envelope"
|
||||
/>
|
||||
<TimelineDefault
|
||||
showPillDate
|
||||
pillDate="3 Months ago"
|
||||
smallIconColor="warning"
|
||||
iconCircleColor="warning"
|
||||
iconCircle="clock-o"
|
||||
/>
|
||||
<TimelineDefault
|
||||
showPillDate
|
||||
pillDate="Year ago"
|
||||
smallIconColor="success"
|
||||
iconCircleColor="success"
|
||||
iconCircle="check"
|
||||
/>
|
||||
<TimelineDefault
|
||||
iconCircle="close"
|
||||
/>
|
||||
</TabPane>
|
||||
<TabPane tabId="detailContact">
|
||||
<Card body>
|
||||
<div className="mb-2">
|
||||
<span className="small">Contact</span>
|
||||
</div>
|
||||
<DlRowContacts
|
||||
leftSideClassName="text-lg-right"
|
||||
rightSideClassName="text-inverse"
|
||||
/>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">Address</span>
|
||||
</div>
|
||||
<DlRowAddress
|
||||
leftSideClassName="text-lg-right"
|
||||
rightSideClassName="text-inverse"
|
||||
/>
|
||||
</Card>
|
||||
</TabPane>
|
||||
<TabPane tabId="chat">
|
||||
<Card>
|
||||
<CardHeader className="d-flex bg-white bb-0">
|
||||
<h6 className="align-self-center mb-0">
|
||||
Chat with Romaine Weber
|
||||
</h6>
|
||||
<UncontrolledButtonDropdown className="align-self-center ml-auto">
|
||||
<DropdownToggle color="link" size="sm">
|
||||
<i className="fa fa-gear"></i><i className="fa fa-angle-down ml-2" />
|
||||
</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>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
<ChatRight cardClassName="text-dark"/>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
<div className="mt-4 mb-3 text-center">
|
||||
<span className="small">
|
||||
Yesterday
|
||||
</span>
|
||||
</div>
|
||||
<ChatRight cardClassName="text-dark" />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ChatCardFooter />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</TabPane>
|
||||
<TabPane tabId="messages">
|
||||
<Card>
|
||||
<CardBody className="d-flex">
|
||||
<ButtonGroup size="sm">
|
||||
<Button color="secondary" outline active>
|
||||
Inbox
|
||||
</Button>
|
||||
<Button color="secondary" outline>
|
||||
Archive
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<span className="ml-auto">
|
||||
Showing 1 to 10 of 57 entries
|
||||
</span>
|
||||
</CardBody>
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">From</th>
|
||||
<th className="bt-0">Subject</th>
|
||||
<th className="bt-0 text-right">
|
||||
Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
<TrTableMessages />
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex">
|
||||
<ButtonGroup size="sm">
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</Button>
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<span className="ml-auto align-self-center">
|
||||
Showing 1 to 10 of 57 entries
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</TabPane>
|
||||
</UncontrolledTabs.TabContent>
|
||||
</UncontrolledTabs>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default ProfileDetails;
|
||||
81
app/routes/Apps/ProfileDetails/components/TrTableMessages.js
Executable file
81
app/routes/Apps/ProfileDetails/components/TrTableMessages.js
Executable file
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
Media
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray } from './../../../../utilities';
|
||||
|
||||
const status = [
|
||||
"warning",
|
||||
"danger",
|
||||
"success",
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const tag = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"info"
|
||||
];
|
||||
|
||||
|
||||
const TrTableMessages = () => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<Media>
|
||||
<Media left className="align-self-center mr-3">
|
||||
<Avatar.Image
|
||||
size="sm"
|
||||
src="http://bs4.webkom.co/img/avatars/2.jpg"
|
||||
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() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Link to="/apps/email-details">
|
||||
{ faker.company.catchPhrase() }
|
||||
</Link>
|
||||
<br />
|
||||
<div>
|
||||
{ faker.lorem.sentence() }
|
||||
</div>
|
||||
<Badge color={ randomArray(tag) } pill className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
30-Jun-2014<br />
|
||||
01:54 PM
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { TrTableMessages };
|
||||
3
app/routes/Apps/ProfileDetails/index.js
Executable file
3
app/routes/Apps/ProfileDetails/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ProfileDetails from './ProfileDetails';
|
||||
|
||||
export default ProfileDetails;
|
||||
Reference in New Issue
Block a user