Tomasz Owczarczyk
156
app/routes/Apps/AccountEdit/AccountEdit.js
Executable file
156
app/routes/Apps/AccountEdit/AccountEdit.js
Executable file
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Input,
|
||||
Card,
|
||||
Button,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
Label,
|
||||
FormGroup,
|
||||
Form
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav";
|
||||
import { ProfileHeader } from "../../components/Profile/ProfileHeader";
|
||||
|
||||
const AccountEdit = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Account Edit"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProfileHeader />
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<ProfileLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-flex mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Account Edit
|
||||
</CardTitle>
|
||||
<span className="ml-auto align-self-start small">
|
||||
Fields mark as <span className="text-danger">*</span> is required.
|
||||
</span>
|
||||
</div>
|
||||
<Form>
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label for="oldPassword" sm={3} className="text-right">
|
||||
<span className="text-danger">*</span> Old Password
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="password"
|
||||
name="password"
|
||||
id="oldPassword"
|
||||
defaultValue="********"
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label for="newPassword" sm={3} className="text-right">
|
||||
<span className="text-danger">*</span> New Password
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="password"
|
||||
name="password"
|
||||
id="newPassword"
|
||||
defaultValue="********"
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row className="mb-0">
|
||||
<Label for="confirmNewPassword" sm={3} className="text-right">
|
||||
<span className="text-danger">*</span> Confirm New Password
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="password"
|
||||
name="password"
|
||||
id="confirmNewPassword"
|
||||
defaultValue="********"
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label sm={3} >
|
||||
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Button color="primary">
|
||||
Update Profile
|
||||
</Button>
|
||||
<Button color="link">
|
||||
Forgot Password
|
||||
</Button>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
</Form>
|
||||
{ /* END Form */}
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-support text-muted mr-2"></i>
|
||||
If you have trouble with the configuration, you can contact us. <a href="#">We Can Help</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Change Username
|
||||
</CardTitle>
|
||||
<p>
|
||||
Changing the username is not recommended. In this connection,
|
||||
I can appear <a href="#">many problems</a>.
|
||||
</p>
|
||||
<Button color="secondary" outline>
|
||||
Change Username
|
||||
</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3 b-danger">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-danger">
|
||||
Delete Account
|
||||
</CardTitle>
|
||||
<p>
|
||||
Once you delete your account, there is no going back. Please be certain.
|
||||
</p>
|
||||
<Button color="danger" outline>
|
||||
Yes, Delete
|
||||
</Button>
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-support text-muted mr-2"></i>
|
||||
Are you sure you don’t want to just downgrade your account to a <strong>Free Account</strong>? We won’t charge your PayPal account anymore.
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default AccountEdit;
|
||||
3
app/routes/Apps/AccountEdit/index.js
Executable file
3
app/routes/Apps/AccountEdit/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import AccountEdit from './AccountEdit';
|
||||
|
||||
export default AccountEdit;
|
||||
157
app/routes/Apps/BillingEdit/BillingEdit.js
Executable file
157
app/routes/Apps/BillingEdit/BillingEdit.js
Executable file
@@ -0,0 +1,157 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Table,
|
||||
Card,
|
||||
Button,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
Progress
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProfileLeftNav } from "./../../components/Profile/ProfileLeftNav";
|
||||
import { ProfileHeader } from "./../../components/Profile/ProfileHeader";
|
||||
import { TrTableBorderless } from "./../../Tables/Tables/components/TrTableBorderless";
|
||||
|
||||
const BillingEdit = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Billing Edit"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProfileHeader />
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<ProfileLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-flex mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Billing Edit
|
||||
</CardTitle>
|
||||
<span className="ml-auto align-self-start small">
|
||||
Fields mark as <span className="text-danger">*</span> is required.
|
||||
</span>
|
||||
</div>
|
||||
<Row className="mb-4">
|
||||
<Col sm={3} className="text-right">
|
||||
Your Plan
|
||||
</Col>
|
||||
<Col sm={9}>
|
||||
<div className="mb-2">
|
||||
<span className="text-inverse">
|
||||
Premium
|
||||
</span> - You use <strong>37%</strong> of the available space.
|
||||
</div>
|
||||
<Progress multi style={{height: "5px"}} className="mb-3">
|
||||
<Progress bar value="15" />
|
||||
<Progress bar color="purple" value="30" />
|
||||
<Progress bar color="yellow" value="25" />
|
||||
</Progress>
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4 text-right">Amount Space</dt>
|
||||
<dd className="col-sm-8 text-inverse">214,8 GB / 1,03 TB</dd>
|
||||
<dt className="col-sm-4 text-right">Regular Files</dt>
|
||||
<dd className="col-sm-8">
|
||||
<i className="fa fa-circle text-primary mr-2"></i>
|
||||
<span className="text-inverse">177,8 GB</span>
|
||||
</dd>
|
||||
<dt className="col-sm-4 text-right">Shared Files</dt>
|
||||
<dd className="col-sm-8">
|
||||
<i className="fa fa-circle text-purple mr-2"></i>
|
||||
<span className="text-inverse">37 GB</span>
|
||||
</dd>
|
||||
<dt className="col-sm-4 text-right">Available Files</dt>
|
||||
<dd className="col-sm-8">
|
||||
<i className="fa fa-circle text-yellow mr-2"></i>
|
||||
<span className="text-inverse">177,8 GB</span>
|
||||
</dd>
|
||||
<dt className="col-sm-4 text-right">Action</dt>
|
||||
<dd className="col-sm-8">
|
||||
<Button color="secondary" outline size="sm">
|
||||
Change Plan
|
||||
</Button>
|
||||
</dd>
|
||||
</dl>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="mb-4">
|
||||
<span className="small">Payment</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col sm={3} className="text-right">
|
||||
Payment Method
|
||||
</Col>
|
||||
<Col sm={9}>
|
||||
<div className="mb-2">
|
||||
<i className="fa fa-fw fa-paypal text-primary mr-2"></i>
|
||||
<span className="text-inverse">
|
||||
PayPal
|
||||
</span> - Account: <samp>Tyshawn_Lakin56@gmail.com</samp>
|
||||
</div>
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4 text-right">Next Payment Due</dt>
|
||||
<dd className="col-sm-8 text-inverse">2016-05-21</dd>
|
||||
<dt className="col-sm-4 text-right">Amount</dt>
|
||||
<dd className="col-sm-8 text-inverse">$ 13.00</dd>
|
||||
<dt className="col-sm-4 text-right">Action</dt>
|
||||
<dd className="col-sm-8">
|
||||
<Button color="secondary" outline size="sm">
|
||||
Change Payment
|
||||
</Button>
|
||||
</dd>
|
||||
</dl>
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-support text-muted mr-2"></i>
|
||||
If you want to personalize the notification settings, go <a href="#">here</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Billing History
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">#</th>
|
||||
<th className="bt-0">ID</th>
|
||||
<th className="bt-0">Date</th>
|
||||
<th className="bt-0">Amount</th>
|
||||
<th className="bt-0">Description</th>
|
||||
<th className="bt-0">Payment Method</th>
|
||||
<th className="text-right bt-0">
|
||||
Receipt
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableBorderless />
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default BillingEdit;
|
||||
3
app/routes/Apps/BillingEdit/index.js
Executable file
3
app/routes/Apps/BillingEdit/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import BillingEdit from './BillingEdit';
|
||||
|
||||
export default BillingEdit;
|
||||
60
app/routes/Apps/Chat/Chat.js
Executable file
60
app/routes/Apps/Chat/Chat.js
Executable file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
CardBody,
|
||||
Col,
|
||||
CardHeader,
|
||||
Card,
|
||||
CardFooter
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ChatLeft } from "../../components/Chat/ChatLeft";
|
||||
import { ChatRight } from "../../components/Chat/ChatRight";
|
||||
import { ChatLeftNav } from "../../components/Chat/ChatLeftNav";
|
||||
import { ChatCardFooter } from "../../components/Chat/ChatCardFooter";
|
||||
import { ChatCardHeader } from "../../components/Chat/ChatCardHeader";
|
||||
|
||||
const Clients = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Chat"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<ChatLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardHeader className="d-flex bb-0 bg-white">
|
||||
<ChatCardHeader />
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
<ChatRight cardClassName="text-dark"/>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
<ChatRight cardClassName="text-dark"/>
|
||||
<div className="small mb-3 mt-4 text-center">
|
||||
Yesterday
|
||||
</div>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
<ChatRight cardClassName="text-dark"/>
|
||||
<ChatLeft cardClassName="bg-gray-300 b-0 text-dark" />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ChatCardFooter />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Clients;
|
||||
3
app/routes/Apps/Chat/index.js
Executable file
3
app/routes/Apps/Chat/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Chat from './Chat';
|
||||
|
||||
export default Chat;
|
||||
295
app/routes/Apps/Clients/Clients.js
Executable file
295
app/routes/Apps/Clients/Clients.js
Executable file
@@ -0,0 +1,295 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
ButtonToolbar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
Table,
|
||||
TabPane,
|
||||
Badge,
|
||||
Nav,
|
||||
NavItem,
|
||||
Pagination,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
UncontrolledTooltip,
|
||||
UncontrolledTabs
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { Profile } from "../../components/Profile";
|
||||
import { DlRowContacts } from "../../components/Profile/DlRowContacts";
|
||||
import { DlRowAddress } from "../../components/Profile/DlRowAddress";
|
||||
import { TrTableClients } from "./components/TrTableClients";
|
||||
import { TrTableCompanies } from "./components/TrTableCompanies";
|
||||
|
||||
const Clients = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Clients"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 8 }>
|
||||
<Card className="mb-3">
|
||||
<UncontrolledTabs initialActiveTabId="clients">
|
||||
<CardBody>
|
||||
<div className="d-flex">
|
||||
<Nav pills>
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="clients">
|
||||
Clients
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<UncontrolledTabs.NavLink tabId="companies">
|
||||
Companies
|
||||
</UncontrolledTabs.NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
<ButtonToolbar className="ml-auto">
|
||||
<ButtonGroup>
|
||||
<Button color="link" className="align-self-center mr-2 text-decoration-none" id="tooltipSettings">
|
||||
<i className="fa fa-fw fa-gear"></i>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button color="primary" className="align-self-center" id="tooltipAddNew">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
<UncontrolledTooltip placement="right" target="tooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="right" target="tooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
<UncontrolledTabs.TabContent>
|
||||
<TabPane tabId="clients">
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0">Name</th>
|
||||
<th className="bt-0">Email</th>
|
||||
<th className="text-right bt-0">Phone</th>
|
||||
<th className="text-right bt-0">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableClients />
|
||||
<TrTableClients
|
||||
id="2"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="3"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="4"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="5"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="6"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="7"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="8"
|
||||
/>
|
||||
<TrTableClients
|
||||
id="9"
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
</TabPane>
|
||||
<TabPane tabId="companies">
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0">Name</th>
|
||||
<th className="bt-0">PM</th>
|
||||
<th className="text-right bt-0">Phone</th>
|
||||
<th className="text-right bt-0">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableCompanies />
|
||||
<TrTableCompanies
|
||||
id="2"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="3"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="4"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="5"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="6"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="7"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="8"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="9"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="10"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="11"
|
||||
/>
|
||||
<TrTableCompanies
|
||||
id="12"
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
</TabPane>
|
||||
</UncontrolledTabs.TabContent>
|
||||
</UncontrolledTabs>
|
||||
|
||||
<CardFooter className="d-flex">
|
||||
<span className="align-self-center">
|
||||
Showing 1 to 10 of 57 entries
|
||||
</span>
|
||||
<Pagination aria-label="Page navigation example" className="ml-auto">
|
||||
<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>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
<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 }>
|
||||
<Button color="primary" block>
|
||||
Message
|
||||
</Button>
|
||||
</Col>
|
||||
<Col sm={ 6 }>
|
||||
<Button color="secondary" outline block>
|
||||
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="primary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="primary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">Contact</span>
|
||||
</div>
|
||||
<DlRowContacts
|
||||
leftSideClassName="text-left"
|
||||
rightSideClassName="text-right text-inverse"
|
||||
/>
|
||||
<div className="mt-4 mb-2">
|
||||
<span className="small">Address</span>
|
||||
</div>
|
||||
<DlRowAddress
|
||||
leftSideClassName="text-left"
|
||||
rightSideClassName="text-right text-inverse"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Clients;
|
||||
94
app/routes/Apps/Clients/components/TrTableClients.js
Executable file
94
app/routes/Apps/Clients/components/TrTableClients.js
Executable file
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Avatar,
|
||||
CustomInput,
|
||||
UncontrolledTooltip,
|
||||
AvatarAddOn,
|
||||
Media
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray } from './../../../../utilities';
|
||||
|
||||
const status = [
|
||||
"secondary",
|
||||
"success",
|
||||
"warning",
|
||||
"danger"
|
||||
];
|
||||
|
||||
const tag = [
|
||||
"secondary",
|
||||
"primary",
|
||||
"info"
|
||||
];
|
||||
|
||||
const TrTableClients = (props) => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" id={`trTableClients-${ props.id }` } label="" inline />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<a href="#" id={`trTableClientsTooltip-${ props.id }` }>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target={`trTableClientsTooltip-${ props.id }` }>
|
||||
Add To Favorites
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Media>
|
||||
<Media left className="align-self-center mr-3">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
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>
|
||||
<a className="mt-0 d-flex text-decoration-none" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<span>
|
||||
{ faker.name.jobTitle() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.internet.email() }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.phone.phoneNumberFormat() }
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<Badge pill color={ randomArray(tag) }>
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
TrTableClients.propTypes = {
|
||||
id: PropTypes.node
|
||||
};
|
||||
TrTableClients.defaultProps = {
|
||||
id: "1"
|
||||
};
|
||||
|
||||
export { TrTableClients };
|
||||
287
app/routes/Apps/Clients/components/TrTableCompanies.js
Executable file
287
app/routes/Apps/Clients/components/TrTableCompanies.js
Executable file
@@ -0,0 +1,287 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
CustomInput,
|
||||
UncontrolledTooltip,
|
||||
AvatarAddOn,
|
||||
Media
|
||||
} from './../../../../components';
|
||||
import { randomArray } from './../../../../utilities';
|
||||
|
||||
const status = [
|
||||
"success",
|
||||
"danger",
|
||||
"warning",
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const brand = [
|
||||
<Media key="facebook">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-facebook"></i>
|
||||
<i className="fa fa-facebook fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Facebook
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="twitter">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-twitter"></i>
|
||||
<i className="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Twitter
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="linkedin">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-linkedin"></i>
|
||||
<i className="fa fa-linkedin fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Linkedin
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="foursquare">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-foursquare"></i>
|
||||
<i className="fa fa-foursquare fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Foursquare
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="lastfm">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-lastfm"></i>
|
||||
<i className="fa fa-lastfm fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
LastFM
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="paypal">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-paypal"></i>
|
||||
<i className="fa fa-paypal fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
PayPal
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="amazon">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-amazon"></i>
|
||||
<i className="fa fa-amazon fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Amazon
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="skype">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-skype"></i>
|
||||
<i className="fa fa-skype fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Skype
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="spotify">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-spotify"></i>
|
||||
<i className="fa fa-spotify fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Spotify
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="pinterest">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-pinterest"></i>
|
||||
<i className="fa fa-pinterest fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Pinterest
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="windows">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-windows"></i>
|
||||
<i className="fa fa-windows fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Windows
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="android">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-android"></i>
|
||||
<i className="fa fa-android fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Android
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
<Media key="medium">
|
||||
<Media left className="align-self-center mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-stop fa-stack-2x text-medium"></i>
|
||||
<i className="fa fa-medium fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse mt-0 d-flex">
|
||||
Medium
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.country() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>,
|
||||
];
|
||||
|
||||
const TrTableCompanies = (props) => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" id={`trTableCompanies-${ props.id }` } label="" inline />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<a href="#" id={`trTableCompaniesTooltip-${ props.id }` }>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target={`trTableCompaniesTooltip-${ props.id }` }>
|
||||
Add To Favorites
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ randomArray(brand) }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Avatar.Image
|
||||
size="sm"
|
||||
src="http://bs4.webkom.co/img/avatars/2.jpg"
|
||||
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"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
{ faker.phone.phoneNumberFormat() }<br />
|
||||
{ faker.internet.email() }
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
{ faker.address.streetAddress() }<br />
|
||||
{ faker.address.city() }
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
TrTableCompanies.propTypes = {
|
||||
id: PropTypes.node
|
||||
};
|
||||
TrTableCompanies.defaultProps = {
|
||||
id: "1"
|
||||
};
|
||||
|
||||
export { TrTableCompanies };
|
||||
3
app/routes/Apps/Clients/index.js
Executable file
3
app/routes/Apps/Clients/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Clients from './Clients';
|
||||
|
||||
export default Clients;
|
||||
239
app/routes/Apps/EmailDetails/EmailDetails.js
Executable file
239
app/routes/Apps/EmailDetails/EmailDetails.js
Executable file
@@ -0,0 +1,239 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
ButtonToolbar,
|
||||
Badge,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav";
|
||||
import { Attachment } from "../../components/Attachment";
|
||||
|
||||
const EmailDetails = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Email Details"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<MailboxLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
{ /* START Header */}
|
||||
<div className="d-lg-flex justify-content-end mb-4">
|
||||
<div className="mr-auto d-flex align-items-center mb-3 mb-xl-0">
|
||||
<Button color="link" tag={ Link } to="/apps/inbox" className="text-decoration-none">
|
||||
<i className="fa fa-angle-left mr-2"></i> Inbox
|
||||
</Button>
|
||||
</div>
|
||||
<ButtonToolbar>
|
||||
<ButtonGroup className="mr-2 mb-3 mb-sm-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrev">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipPrev">
|
||||
Prev Message
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipNext">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipNext">
|
||||
Next Message
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="mr-2">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipForward">
|
||||
<i className="fa fa-fw fa-mail-forward"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipForward">
|
||||
Forward
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFav">
|
||||
<i className="fa fa-fw fa-star"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipFav">
|
||||
Add to Favorites
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrint">
|
||||
<i className="fa fa-fw fa-print"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipPrint">
|
||||
Print
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDelete">
|
||||
<i className="fa fa-fw fa-trash"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipDelete">
|
||||
Delete
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="ml-auto ml-lg-0">
|
||||
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/inbox" id="tooltipReply">
|
||||
<i className="fa fa-fw fa-reply"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipReply">
|
||||
Reply
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
{ /* END Header */}
|
||||
{ /* START Message */}
|
||||
<div className="mb-4">
|
||||
<div className="d-flex flex-column flex-md-row">
|
||||
<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>
|
||||
<a className="mt-0 text-decoration-none d-flex" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<samp className="small">
|
||||
{ faker.internet.email() }
|
||||
</samp>
|
||||
</Media>
|
||||
</Media>
|
||||
<div className="ml-md-auto align-self-start text-left text-md-right mt-2 mt-md-0">
|
||||
18-Jun-2012<br />
|
||||
08:43 PM
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="d-flex mb-3">
|
||||
<h5>
|
||||
Secured Asynchronous Capacity
|
||||
</h5>
|
||||
<Badge pill color="primary" className="ml-auto align-self-start">
|
||||
Work
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="lead">
|
||||
{ faker.lorem.sentences() }
|
||||
</p>
|
||||
<p>
|
||||
{ faker.lorem.paragraphs() }
|
||||
</p>
|
||||
</div>
|
||||
{ /* END Message */}
|
||||
{ /* START Attachments */}
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<span className="small mr-2">
|
||||
Attachments
|
||||
</span>
|
||||
<Badge pill color="secondary">3</Badge>
|
||||
</div>
|
||||
<Attachment
|
||||
BgIconClassName="text-primary"
|
||||
icon="file-word-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-success"
|
||||
icon="file-excel-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-warning"
|
||||
icon="file-powerpoint-o"
|
||||
/>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ButtonToolbar className="flex-column flex-lg-row">
|
||||
<ButtonGroup className="mb-2 mb-lg-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrevBtm">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipPrevBtm">
|
||||
Prev Message
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipNextBtm">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipNextBtm">
|
||||
Next Message
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonToolbar className="flex-column flex-sm-row ml-0 ml-lg-auto">
|
||||
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipForwardBtm">
|
||||
<i className="fa fa-fw fa-mail-forward"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipForwardBtm">
|
||||
Forward
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFavBtm">
|
||||
<i className="fa fa-fw fa-star"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipFavBtm">
|
||||
Add to Favorites
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrintBtm">
|
||||
<i className="fa fa-fw fa-print"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipPrintBtm">
|
||||
Print
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDeleteBtm">
|
||||
<i className="fa fa-fw fa-trash"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipDeleteBtm">
|
||||
Delete
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="ml-0 ml-md-auto m-lg-0">
|
||||
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/inbox" id="tooltipReplyBtm">
|
||||
<i className="fa fa-fw fa-reply"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipReplyBtm">
|
||||
Reply
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</ButtonToolbar>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default EmailDetails;
|
||||
3
app/routes/Apps/EmailDetails/index.js
Executable file
3
app/routes/Apps/EmailDetails/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import EmailDetails from './EmailDetails';
|
||||
|
||||
export default EmailDetails;
|
||||
50
app/routes/Apps/Files/Files.js
Executable file
50
app/routes/Apps/Files/Files.js
Executable file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import FilesList from './FilesList';
|
||||
import FilesGrid from './FilesGrid';
|
||||
import { FilesLeftNav } from "../../components/Files/FilesLeftNav";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
|
||||
const Files = (props) => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Files"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<FilesLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle={props.match.params.type === "list"?"Files List":"Files Grid"}
|
||||
linkList="/apps/files/list"
|
||||
linkGrid="/apps/files/grid"
|
||||
/>
|
||||
|
||||
{
|
||||
props.match.params.type === "list" ?
|
||||
<FilesList /> :
|
||||
<FilesGrid />
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
Files.propTypes = {
|
||||
match: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
|
||||
export default Files;
|
||||
26
app/routes/Apps/Files/FilesGrid.js
Executable file
26
app/routes/Apps/Files/FilesGrid.js
Executable file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CardColumns } from './../../../components';
|
||||
import { FilesCardGrid } from "../../components/Files/FilesCardGrid";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const FilesGrid = () => (
|
||||
<React.Fragment>
|
||||
<CardColumns>
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
<FilesCardGrid />
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default FilesGrid;
|
||||
50
app/routes/Apps/Files/FilesList.js
Executable file
50
app/routes/Apps/Files/FilesList.js
Executable file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardFooter,
|
||||
Table
|
||||
} from './../../../components';
|
||||
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
import { TrTableFilesList } from "./components/TrTableFilesList";
|
||||
|
||||
const FilesList = () => (
|
||||
<Card className="mb-3">
|
||||
{ /* START Table */}
|
||||
<div className="table-responsive-xl">
|
||||
<Table className="mb-0" hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="align-middle bt-0">Directory</th>
|
||||
<th className="align-middle bt-0">Last Change</th>
|
||||
<th className="align-middle bt-0">Share</th>
|
||||
<th className="align-middle bt-0">Tags</th>
|
||||
<th className="align-middle bt-0 text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
<TrTableFilesList />
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<Paginations />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
);
|
||||
|
||||
export default FilesList;
|
||||
113
app/routes/Apps/Files/components/TrTableFilesList.js
Executable file
113
app/routes/Apps/Files/components/TrTableFilesList.js
Executable file
@@ -0,0 +1,113 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Avatar,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
AvatarAddOn,
|
||||
Media,
|
||||
DropdownItem
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../../utilities';
|
||||
|
||||
const badges = [
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const status = [
|
||||
"success",
|
||||
"danger",
|
||||
"warning",
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const TrTableFilesList = () => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<Media>
|
||||
<Media left middle>
|
||||
<i className="fa fa-fw fa-folder-o fa-3x mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="text-inverse">
|
||||
{ faker.commerce.department() }
|
||||
</div>
|
||||
<span>
|
||||
{ faker.finance.amount() } Mb
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018<br />
|
||||
12:23 PM
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<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"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<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>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { TrTableFilesList };
|
||||
3
app/routes/Apps/Files/index.js
Executable file
3
app/routes/Apps/Files/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Files from './Files';
|
||||
|
||||
export default Files;
|
||||
64
app/routes/Apps/GalleryGrid/GalleryGrid.js
Executable file
64
app/routes/Apps/GalleryGrid/GalleryGrid.js
Executable file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
CardColumns,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
import { GalleryCard } from "../../components/Gallery/GalleryCard";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const GalleryGrid = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Gallery Grid"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle="Gallery Grid"
|
||||
linkList="/apps/gallery-table"
|
||||
linkGrid="/apps/gallery-grid"
|
||||
/>
|
||||
<CardColumns>
|
||||
<GalleryCard />
|
||||
<GalleryCard
|
||||
id="2"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="3"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="4"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="5"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="6"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="7"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="8"
|
||||
/>
|
||||
<GalleryCard
|
||||
id="9"
|
||||
/>
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default GalleryGrid;
|
||||
3
app/routes/Apps/GalleryGrid/index.js
Executable file
3
app/routes/Apps/GalleryGrid/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import GalleryGrid from './GalleryGrid';
|
||||
|
||||
export default GalleryGrid;
|
||||
85
app/routes/Apps/GalleryTable/GalleryTable.js
Executable file
85
app/routes/Apps/GalleryTable/GalleryTable.js
Executable file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Table,
|
||||
CardFooter,
|
||||
Card,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
import { TrTableGalleryList } from "./components/TrTableGalleryList";
|
||||
|
||||
const GalleryTable = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Gallery Table"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle="Gallery Table"
|
||||
linkList="/apps/gallery-table"
|
||||
linkGrid="/apps/gallery-grid"
|
||||
/>
|
||||
<Card>
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover size="sm" responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Thumb</th>
|
||||
<th>Title</th>
|
||||
<th>Author</th>
|
||||
<th>Date</th>
|
||||
<th>Info</th>
|
||||
<th className="text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableGalleryList />
|
||||
<TrTableGalleryList
|
||||
id="2"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="3"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="4"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="5"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="6"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="7"
|
||||
/>
|
||||
<TrTableGalleryList
|
||||
id="8"
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<Paginations />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default GalleryTable;
|
||||
122
app/routes/Apps/GalleryTable/components/TrTableGalleryList.js
Executable file
122
app/routes/Apps/GalleryTable/components/TrTableGalleryList.js
Executable file
@@ -0,0 +1,122 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
CustomInput,
|
||||
Avatar,
|
||||
HolderProvider,
|
||||
CardImg,
|
||||
Media,
|
||||
AvatarAddOn,
|
||||
Button,
|
||||
UncontrolledTooltip
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../../utilities';
|
||||
|
||||
const status = [
|
||||
"secondary",
|
||||
"danger",
|
||||
"success",
|
||||
"warning"
|
||||
];
|
||||
const badges = [
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const TrTableGalleryList = (props) => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" id={`trTableGalleryList-${ props.id }` } label="" inline />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 16 }
|
||||
width={ 100 }
|
||||
height={ 100 }
|
||||
>
|
||||
<CardImg className="rounded" />
|
||||
</HolderProvider.Icon>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<span>
|
||||
<a className="text-inverse" href="#">
|
||||
{ faker.commerce.productName() }
|
||||
</a>
|
||||
<br />
|
||||
<span href="#">
|
||||
{ faker.system.fileName() }
|
||||
</span>
|
||||
<br />
|
||||
<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>
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<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>
|
||||
<a className="mt-0 text-decoration-none d-flex" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<span>
|
||||
{ faker.address.state() }, { faker.address.stateAbbr() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
22-Jul-2012
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
Size: { faker.random.number() } Kb<br />
|
||||
Format: .png
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<Button color="link" id={`trTableGalleryListTooltip-${ props.id }` }>
|
||||
<i className="fa fa-fw fa-download"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="left" target={`trTableGalleryListTooltip-${ props.id }` }>
|
||||
Download
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
TrTableGalleryList.propTypes = {
|
||||
id: PropTypes.node
|
||||
};
|
||||
TrTableGalleryList.defaultProps = {
|
||||
id: "1"
|
||||
};
|
||||
|
||||
export { TrTableGalleryList };
|
||||
3
app/routes/Apps/GalleryTable/index.js
Executable file
3
app/routes/Apps/GalleryTable/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import GalleryTable from './GalleryTable';
|
||||
|
||||
export default GalleryTable;
|
||||
50
app/routes/Apps/ImagesResults/ImagesResults.js
Executable file
50
app/routes/Apps/ImagesResults/ImagesResults.js
Executable file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
CardColumns,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav";
|
||||
import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader";
|
||||
import { ImagesResultsCard } from "../../components/SearchResults/ImagesResultsCard";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const ImagesResults = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Images Results"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<SearchResultsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<SearchResultsHeader />
|
||||
<CardColumns>
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
<ImagesResultsCard />
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default ImagesResults;
|
||||
3
app/routes/Apps/ImagesResults/index.js
Executable file
3
app/routes/Apps/ImagesResults/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ImagesResults from './ImagesResults';
|
||||
|
||||
export default ImagesResults;
|
||||
138
app/routes/Apps/Inbox/Inbox.js
Executable file
138
app/routes/Apps/Inbox/Inbox.js
Executable file
@@ -0,0 +1,138 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
import _ from 'lodash';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
ButtonToolbar,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
Card,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CustomInput,
|
||||
Table,
|
||||
Badge,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
import { TrTableInbox } from "./components/TrTableInbox";
|
||||
|
||||
const Inbox = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Inbox"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<MailboxLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-lg-flex justify-content-end">
|
||||
<div className="mr-auto d-flex align-items-center mb-3 mb-lg-0">
|
||||
<InputGroup>
|
||||
<Input placeholder="Search for..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<ButtonToolbar>
|
||||
<ButtonGroup className="mr-2">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipRefresh">
|
||||
<i className="fa fa-fw fa-refresh"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipRefresh">
|
||||
Refresh
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFav">
|
||||
<i className="fa fa-fw fa-star"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipFav">
|
||||
Add to Favorites
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipTag">
|
||||
<i className="fa fa-fw fa-tag"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipTag">
|
||||
Tag
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipBan">
|
||||
<i className="fa fa-fw fa-ban"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipBan">
|
||||
Ban this User
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDelete">
|
||||
<i className="fa fa-fw fa-trash"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipDelete">
|
||||
Delete
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="ml-auto ml-lg-0">
|
||||
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/new-email" id="tooltipAddNew">
|
||||
<i className="fa fa-fw fa-pencil"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
</CardBody>
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0">From</th>
|
||||
<th className="bt-0">Subject</th>
|
||||
<th className="text-right bt-0">
|
||||
Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
_.times(11, (index) => (
|
||||
<TrTableInbox
|
||||
id={index.toString()}
|
||||
key={index}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<Paginations />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Inbox;
|
||||
114
app/routes/Apps/Inbox/components/TrTableInbox.js
Executable file
114
app/routes/Apps/Inbox/components/TrTableInbox.js
Executable file
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Avatar,
|
||||
UncontrolledTooltip,
|
||||
CustomInput,
|
||||
AvatarAddOn,
|
||||
Media
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../../utilities';
|
||||
|
||||
const status = [
|
||||
"warning",
|
||||
"danger",
|
||||
"success",
|
||||
"secondary"
|
||||
];
|
||||
|
||||
|
||||
const tag = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"info"
|
||||
];
|
||||
|
||||
|
||||
const TrTableInbox = (props) => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
{
|
||||
(Math.round(Math.random())) ? (
|
||||
<span>
|
||||
<i className="fa fa-circle fa-fw text-primary" id={`newMessage-${ props.id }` }></i>
|
||||
<UncontrolledTooltip placement="bottom" target={`#newMessage-${ props.id }` }>
|
||||
New Message
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
) : (
|
||||
<span></span>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" label="" id={` mailboxCheckbox-${ props.id }` } />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Media>
|
||||
<Media left className="d-flex align-self-center mr-3">
|
||||
<div className="mr-2">
|
||||
<a href="#" id="tooltipAddToFavorites">
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tooltipAddToFavorites">
|
||||
Add To Favorites
|
||||
</UncontrolledTooltip>
|
||||
</div>
|
||||
<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 text-decoration-none d-flex" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<span>
|
||||
{ faker.address.state() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Link to="/apps/email-details" className="text-decoration-none">
|
||||
{ faker.company.catchPhrase() }
|
||||
</Link>
|
||||
<br />
|
||||
{ faker.lorem.sentence() }
|
||||
<br />
|
||||
<Badge pill color={ randomArray(tag) }>
|
||||
{ faker.commerce.department() }
|
||||
</Badge> <i className="fa fa-paperclip ml-2"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
30-Jun-2014<br />
|
||||
01:54 PM
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
TrTableInbox.propTypes = {
|
||||
id: PropTypes.string
|
||||
};
|
||||
|
||||
export { TrTableInbox };
|
||||
3
app/routes/Apps/Inbox/index.js
Executable file
3
app/routes/Apps/Inbox/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Inbox from './Inbox';
|
||||
|
||||
export default Inbox;
|
||||
143
app/routes/Apps/NewEmail/NewEmail.js
Executable file
143
app/routes/Apps/NewEmail/NewEmail.js
Executable file
@@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
Badge,
|
||||
ButtonToolbar,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav";
|
||||
import { Attachment } from "../../components/Attachment";
|
||||
|
||||
const NewEmail = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="New Email"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<MailboxLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
{ /* START Header */}
|
||||
<div className="flex-column flex-md-row d-flex mb-4">
|
||||
<div className="mr-md-auto mr-sm-0">
|
||||
<Button color="link" tag={ Link } to="/apps/inbox" className="text-decoration-none">
|
||||
<i className="fa fa-angle-left mr-2"></i> Inbox
|
||||
</Button>
|
||||
</div>
|
||||
<ButtonToolbar>
|
||||
<ButtonGroup className="mr-2">
|
||||
<Button color="link" tag={ Link } to="/apps/inbox" className="text-decoration-none">
|
||||
Cancel
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button color="primary" tag={ Link } to="/apps/inbox" id="tooltipSend">
|
||||
<i className="fa fa-send"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipSend">
|
||||
Send Now
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
{ /* END Header */}
|
||||
{ /* START Forms */}
|
||||
<div className="mb-4">
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroupAddon addonType="prepend">
|
||||
To:
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Enter email(s)..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
<Row className="mb-3">
|
||||
<Col sm={12} lg={6} className="mb-3 mb-lg-0">
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend">
|
||||
CC:
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Enter email(s)..." />
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col sm={12} lg={6}>
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend">
|
||||
BCC:
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Enter email(s)..." />
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroupAddon addonType="prepend">
|
||||
Subject:
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Enter topic..." />
|
||||
</InputGroup>
|
||||
<Input type="textarea" name="text" />
|
||||
</div>
|
||||
{ /* END Forms */}
|
||||
{ /* START Attachments */}
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<span className="small mr-2">
|
||||
Attachments
|
||||
</span>
|
||||
<Badge pill color="secondary">3</Badge>
|
||||
</div>
|
||||
<Attachment
|
||||
BgIconClassName="text-primary"
|
||||
icon="file-word-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-success"
|
||||
icon="file-excel-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-warning"
|
||||
icon="file-powerpoint-o"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</CardBody>
|
||||
<CardFooter className="text-right">
|
||||
<Button color="link" className="text-decoration-none">
|
||||
<i className="fa fa-paperclip mr-2"></i>
|
||||
Add New Files
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default NewEmail;
|
||||
3
app/routes/Apps/NewEmail/index.js
Executable file
3
app/routes/Apps/NewEmail/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import NewEmail from './NewEmail';
|
||||
|
||||
export default NewEmail;
|
||||
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;
|
||||
207
app/routes/Apps/ProfileEdit/ProfileEdit.js
Executable file
207
app/routes/Apps/ProfileEdit/ProfileEdit.js
Executable file
@@ -0,0 +1,207 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Input,
|
||||
Card,
|
||||
Button,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
FormText,
|
||||
CardTitle,
|
||||
CustomInput,
|
||||
Label,
|
||||
FormGroup,
|
||||
Form
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav";
|
||||
import { ProfileHeader } from "../../components/Profile/ProfileHeader";
|
||||
|
||||
const ProfileEdit = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Profile Edit"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProfileHeader />
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<ProfileLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div className="d-flex mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Profile Edit
|
||||
</CardTitle>
|
||||
<span className="ml-auto align-self-start small">
|
||||
Fields mark as <span className="text-danger">*</span> is required.
|
||||
</span>
|
||||
</div>
|
||||
<Form>
|
||||
<div className="small mt-4 mb-3">
|
||||
Required
|
||||
</div>
|
||||
{ /* START File Select */}
|
||||
<FormGroup row>
|
||||
<Label for="uploadYourAvatar" sm={3} className="text-right">
|
||||
Upload Your Avatar
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<CustomInput type="file" id="uploadYourAvatar" name="customFile" label="Browse for a file to upload...." />
|
||||
<FormText color="muted">
|
||||
JPG, GIF, PNG, MOV and AVI. Please choose a files under 2GB to upload. File sizes are 400 x 300px.
|
||||
</FormText>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END File Select */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label for="firstName" sm={3} className="text-right">
|
||||
<span className="text-danger">*</span> First Name
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="text"
|
||||
name=""
|
||||
id="firstName"
|
||||
placeholder="First Name..."
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label for="lastName" sm={3} className="text-right">
|
||||
<span className="text-danger">*</span> Last Name
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="lastName"
|
||||
placeholder="Last Name..."
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Select */}
|
||||
<FormGroup row>
|
||||
<Label for="jobType" sm={3} className="text-right">
|
||||
Job Type
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<CustomInput
|
||||
type="select"
|
||||
name="customSelect"
|
||||
id="jobType"
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
<option>Human Intranet Developer </option>
|
||||
<option>Dynamic Tactics Specialist</option>
|
||||
<option>Global Configuration Consultant</option>
|
||||
<option>Principal Directives Orchestrator</option>
|
||||
<option>Corporate Usability Consultant</option>
|
||||
</CustomInput>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Select */}
|
||||
<div className="small mt-5 mb-3">
|
||||
Availability
|
||||
</div>
|
||||
{ /* START Radios */}
|
||||
<FormGroup row>
|
||||
<Label for="afterLogging" sm={3} className="text-right pt-0">
|
||||
After Logging
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="operatingSystem12"
|
||||
name="afterLogging"
|
||||
label="Available"
|
||||
defaultChecked
|
||||
/>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="operatingSystem22"
|
||||
name="afterLogging"
|
||||
label="Inactive"
|
||||
|
||||
/>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="operatingSystem33"
|
||||
name="afterLogging"
|
||||
label="Busy"
|
||||
/>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="operatingSystem34"
|
||||
name="afterLogging"
|
||||
label="Offline"
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<div className="small mt-4 mb-3">
|
||||
Fill Profile
|
||||
</div>
|
||||
{ /* END Radios */}
|
||||
{ /* START Textarea */}
|
||||
<FormGroup row>
|
||||
<Label for="profile" sm={3} className="text-right">
|
||||
Profile
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="textarea"
|
||||
name="text"
|
||||
id="profile"
|
||||
placeholder="Please Describe Your Profile..."
|
||||
className="mb-2"
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Textarea */}
|
||||
{ /* START Input */}
|
||||
<FormGroup row>
|
||||
<Label for="addLabels" sm={3} className="text-right">
|
||||
Add Labels
|
||||
</Label>
|
||||
<Col sm={8}>
|
||||
<Input
|
||||
type="text"
|
||||
name=""
|
||||
id="addLabels"
|
||||
placeholder="Add Here..."
|
||||
/>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
</Form>
|
||||
{ /* END Form */}
|
||||
</CardBody>
|
||||
<CardFooter className="text-right">
|
||||
<Button color="primary">
|
||||
Update Profile
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default ProfileEdit;
|
||||
3
app/routes/Apps/ProfileEdit/index.js
Executable file
3
app/routes/Apps/ProfileEdit/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ProfileEdit from './ProfileEdit';
|
||||
|
||||
export default ProfileEdit;
|
||||
49
app/routes/Apps/Projects/Projects.js
Executable file
49
app/routes/Apps/Projects/Projects.js
Executable file
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import ProjectsList from './ProjectsList';
|
||||
import ProjectsGrid from './ProjectsGrid';
|
||||
import { ProjectsLeftNav } from "../../components/Projects/ProjectsLeftNav";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
|
||||
const Projects = (props) => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Projects"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<ProjectsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle={props.match.params.type === "list"?"Projects List":"Projects Grid"}
|
||||
linkList="/apps/projects/list"
|
||||
linkGrid="/apps/projects/grid"
|
||||
/>
|
||||
|
||||
{
|
||||
props.match.params.type === "list" ?
|
||||
<ProjectsList /> :
|
||||
<ProjectsGrid />
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
Projects.propTypes = {
|
||||
match: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
23
app/routes/Apps/Projects/ProjectsGrid.js
Executable file
23
app/routes/Apps/Projects/ProjectsGrid.js
Executable file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { CardColumns } from './../../../components';
|
||||
import { ProjectsCardGrid } from "../../components/Projects/ProjectsCardGrid";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const ProjectsGrid = () => (
|
||||
<React.Fragment>
|
||||
<CardColumns>
|
||||
{
|
||||
_.times(12, (index) => (
|
||||
<ProjectsCardGrid key={ index } />
|
||||
))
|
||||
}
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default ProjectsGrid;
|
||||
71
app/routes/Apps/Projects/ProjectsList.js
Executable file
71
app/routes/Apps/Projects/ProjectsList.js
Executable file
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
Card,
|
||||
CardFooter,
|
||||
Table
|
||||
} from './../../../components';
|
||||
|
||||
import {
|
||||
TrTableProjectsList
|
||||
} from "./components/TrTableProjectsList";
|
||||
|
||||
const ProjectsList = () => (
|
||||
<Card className="mb-3">
|
||||
{ /* START Table */}
|
||||
<div className="table-responsive-xl">
|
||||
<Table className="mb-0" hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="align-middle bt-0">Star</th>
|
||||
<th className="align-middle bt-0">Project</th>
|
||||
<th className="align-middle bt-0">Status</th>
|
||||
<th className="align-middle bt-0">Tasks Completed</th>
|
||||
<th className="align-middle bt-0">People</th>
|
||||
<th className="align-middle bt-0 text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableProjectsList />
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<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>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export default ProjectsList;
|
||||
115
app/routes/Apps/Projects/components/TrTableProjectsList.js
Executable file
115
app/routes/Apps/Projects/components/TrTableProjectsList.js
Executable file
@@ -0,0 +1,115 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import _ from 'lodash';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Progress,
|
||||
Avatar,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from './../../../../components';
|
||||
import { randomAvatar } from './../../../../utilities';
|
||||
|
||||
/*eslint-disable */
|
||||
const status = [
|
||||
<Badge pill color="success">
|
||||
Active
|
||||
</Badge>,
|
||||
<Badge pill color="danger">
|
||||
Suspended
|
||||
</Badge>,
|
||||
<Badge pill color="warning">
|
||||
Waiting
|
||||
</Badge>,
|
||||
<Badge pill color="secondary">
|
||||
Paused
|
||||
</Badge>
|
||||
];
|
||||
/*eslint-enable */
|
||||
/*eslint-disable */
|
||||
const tasksCompleted = [
|
||||
"25",
|
||||
"50",
|
||||
"70",
|
||||
"90"
|
||||
];
|
||||
/*eslint-enable */
|
||||
|
||||
const TrTableProjectsList = () => (
|
||||
<React.Fragment>
|
||||
{
|
||||
_.times(12, (index) => (
|
||||
<tr key={ index }>
|
||||
<td className="align-middle">
|
||||
<div className="text-inverse">
|
||||
<a href="#">
|
||||
<i className="fa fa-fw fa-lg fa-star-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<div>
|
||||
<Link to="/apps/tasks/list" className="text-decoration-none">
|
||||
{ faker.company.catchPhrase() }
|
||||
</Link>
|
||||
</div>
|
||||
<span>
|
||||
Last Edited by: { faker.name.firstName() } { faker.name.lastName() } <br />
|
||||
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ status[index%4] }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Progress value={ tasksCompleted[index%4] } style={{height: "5px"}} className="mb-2" />
|
||||
<div>
|
||||
Tasks Completed:
|
||||
<span className="text-inverse">
|
||||
36/94
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
/>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link" outline>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { TrTableProjectsList };
|
||||
3
app/routes/Apps/Projects/index.js
Executable file
3
app/routes/Apps/Projects/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Projects from './Projects';
|
||||
|
||||
export default Projects;
|
||||
48
app/routes/Apps/SearchResults/SearchResults.js
Executable file
48
app/routes/Apps/SearchResults/SearchResults.js
Executable file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { SearchResultsLeftNav } from
|
||||
"../../components/SearchResults/SearchResultsLeftNav";
|
||||
import { SearchResultsHeader } from
|
||||
"../../components/SearchResults/SearchResultsHeader";
|
||||
import { SearchResultsCard } from
|
||||
"../../components/SearchResults/SearchResultsCard";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const SearchResults = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Search Results"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<SearchResultsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<SearchResultsHeader />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<SearchResultsCard />
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default SearchResults;
|
||||
3
app/routes/Apps/SearchResults/index.js
Executable file
3
app/routes/Apps/SearchResults/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import SearchResults from './SearchResults';
|
||||
|
||||
export default SearchResults;
|
||||
66
app/routes/Apps/SessionsEdit/SessionsEdit.js
Executable file
66
app/routes/Apps/SessionsEdit/SessionsEdit.js
Executable file
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Table,
|
||||
Card,
|
||||
CardBody,
|
||||
CardTitle
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav";
|
||||
import { ProfileHeader } from "../../components/Profile/ProfileHeader";
|
||||
import { TrTableResponsive } from "./../../Tables/Tables/components/TrTableResponsive";
|
||||
|
||||
const BillingEdit = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Sessions Edit"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProfileHeader />
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<ProfileLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Billing History
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
{ /* START Table */}
|
||||
<Table className="mb-0" responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">#</th>
|
||||
<th className="bt-0">Browser & OS</th>
|
||||
<th className="bt-0">IP</th>
|
||||
<th className="bt-0">Location</th>
|
||||
<th className="bt-0">Signed In</th>
|
||||
<th className="text-right">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableResponsive />
|
||||
</tbody>
|
||||
</Table>
|
||||
{ /* END Table */}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default BillingEdit;
|
||||
3
app/routes/Apps/SessionsEdit/index.js
Executable file
3
app/routes/Apps/SessionsEdit/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import SessionsEdit from './SessionsEdit';
|
||||
|
||||
export default SessionsEdit;
|
||||
114
app/routes/Apps/SettingsEdit/SettingsEdit.js
Executable file
114
app/routes/Apps/SettingsEdit/SettingsEdit.js
Executable file
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Input,
|
||||
Card,
|
||||
Button,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
FormText,
|
||||
CardTitle,
|
||||
CustomInput,
|
||||
Label,
|
||||
FormGroup,
|
||||
Form
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav";
|
||||
import { ProfileHeader } from "../../components/Profile/ProfileHeader";
|
||||
|
||||
const SettingsEdit = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Settings Edit"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProfileHeader />
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<ProfileLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Settings Edit
|
||||
</CardTitle>
|
||||
<Form>
|
||||
{ /* START Input */}
|
||||
<FormGroup className="mb-5">
|
||||
<Label for="notifyMe" className="mb-1 text-inverse">
|
||||
Monthly Newsletter
|
||||
</Label>
|
||||
<p className="mb-2">
|
||||
Do you want receive our monthly newsletter about
|
||||
new products and offers?
|
||||
</p>
|
||||
<CustomInput type="checkbox" id="notifyMe" label="Notify Me" inline />
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup className="mb-5">
|
||||
<Label for="privateMessage" className="mb-1 text-inverse">
|
||||
Private Message
|
||||
</Label>
|
||||
<p className="mb-2">
|
||||
Do you want notify you by email whenever contacts send you a message?
|
||||
</p>
|
||||
<CustomInput type="radio" id="privateMessageYes" name="privateMessage" label="Yes" defaultChecked />
|
||||
<CustomInput type="radio" id="privateMessageNo" name="privateMessage" label="No" />
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup className="mb-5">
|
||||
<Label for="privateMessage" className="mb-1 text-inverse">
|
||||
Publication Email Subscriptions
|
||||
</Label>
|
||||
<p className="mb-2">
|
||||
Control the emails that publications send to you.
|
||||
</p>
|
||||
<Button color="primary" outline>
|
||||
Manage Publication
|
||||
</Button>
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
{ /* START Input */}
|
||||
<FormGroup className="mb-5">
|
||||
<Label for="ActivityNotifications" className="mb-1 text-inverse">
|
||||
Activity Notifications
|
||||
</Label>
|
||||
<p className="mb-2">
|
||||
Notify me via email when...
|
||||
</p>
|
||||
<CustomInput type="radio" id="someoneComments" name="ActivityNotifications" label="Someone Comments" defaultChecked />
|
||||
<CustomInput type="radio" id="someoneMentions" name="ActivityNotifications" label="Someone Mentions" />
|
||||
<CustomInput type="radio" id="anyoneFollowsMe" name="ActivityNotifications" label="Anyone Follows Me" />
|
||||
</FormGroup>
|
||||
{ /* END Input */}
|
||||
|
||||
|
||||
</Form>
|
||||
{ /* END Form */}
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-support text-muted mr-2"></i>
|
||||
If you have trouble with the configuration, you can contact us. <a href="#">We Can Help</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default SettingsEdit;
|
||||
3
app/routes/Apps/SettingsEdit/index.js
Executable file
3
app/routes/Apps/SettingsEdit/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import SettingsEdit from './SettingsEdit';
|
||||
|
||||
export default SettingsEdit;
|
||||
52
app/routes/Apps/Tasks/Tasks.js
Executable file
52
app/routes/Apps/Tasks/Tasks.js
Executable file
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import TasksList from './TasksList';
|
||||
import TasksGrid from './TasksGrid';
|
||||
import { ProjectsLeftNav } from "../../components/Projects/ProjectsLeftNav";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
|
||||
const Tasks = (props) => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tasks"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<ProjectsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle="Projects"
|
||||
subTitleLink="/apps/projects/list"
|
||||
title={props.match.params.type === "list"?"Tasks List":"Tasks Grid"}
|
||||
linkList="/apps/tasks/list"
|
||||
linkGrid="/apps/tasks/grid"
|
||||
btnShowKanban
|
||||
/>
|
||||
|
||||
{
|
||||
props.match.params.type === "list" ?
|
||||
<TasksList /> :
|
||||
<TasksGrid />
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
Tasks.propTypes = {
|
||||
match: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default Tasks;
|
||||
42
app/routes/Apps/Tasks/TasksGrid.js
Executable file
42
app/routes/Apps/Tasks/TasksGrid.js
Executable file
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CardColumns } from './../../../components';
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid";
|
||||
|
||||
const TasksGrid = () => (
|
||||
<React.Fragment>
|
||||
<CardColumns>
|
||||
<TasksCardGrid />
|
||||
<TasksCardGrid
|
||||
id="2"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="3"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="4"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="5"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="6"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="7"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="8"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="9"
|
||||
/>
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TasksGrid;
|
||||
97
app/routes/Apps/Tasks/TasksList.js
Executable file
97
app/routes/Apps/Tasks/TasksList.js
Executable file
@@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
Card,
|
||||
CardFooter,
|
||||
Table
|
||||
} from './../../../components';
|
||||
|
||||
import { TrTableTasksList } from "./components/TrTableTasksList";
|
||||
|
||||
const TasksList = () => (
|
||||
<Card className="mb-3">
|
||||
{ /* START Table */}
|
||||
<div className="table-responsive-xl">
|
||||
<Table className="mb-0" hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="align-middle bt-0">#</th>
|
||||
<th className="align-middle bt-0">Priority</th>
|
||||
<th className="align-middle bt-0">Title & Description</th>
|
||||
<th className="align-middle bt-0">People</th>
|
||||
<th className="align-middle bt-0">Update</th>
|
||||
<th className="align-middle bt-0 text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableTasksList />
|
||||
<TrTableTasksList
|
||||
id="2"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="3"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="4"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="5"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="6"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="7"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="8"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="9"
|
||||
/>
|
||||
<TrTableTasksList
|
||||
id="10"
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<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>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
);
|
||||
|
||||
export default TasksList;
|
||||
159
app/routes/Apps/Tasks/components/TrTableTasksList.js
Executable file
159
app/routes/Apps/Tasks/components/TrTableTasksList.js
Executable file
@@ -0,0 +1,159 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Avatar,
|
||||
CustomInput,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
AvatarAddOn
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../../utilities';
|
||||
|
||||
const badges = [
|
||||
"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 TrTableTasksList = (props) => (
|
||||
<React.Fragment>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" id={`TrTableTasksList-${ props.id }` } label="" inline />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<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>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<div>
|
||||
<span className="mr-2">#{ faker.random.number() }</span>
|
||||
<Link to="/apps/task-details" className="text-decoration-none">
|
||||
{ faker.hacker.phrase() }
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mb-0">
|
||||
<span className="mr-2">
|
||||
{ faker.lorem.sentence() }
|
||||
</span>
|
||||
<Badge pill color={ randomArray(badges) } className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color={ randomArray(badges) } className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</p>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<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"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
16-Jul-2016
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<UncontrolledButtonDropdown className="align-self-center ml-auto">
|
||||
<DropdownToggle color="link" size="sm">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
TrTableTasksList.propTypes = {
|
||||
id: PropTypes.node
|
||||
};
|
||||
TrTableTasksList.defaultProps = {
|
||||
id: "1"
|
||||
};
|
||||
|
||||
export { TrTableTasksList };
|
||||
3
app/routes/Apps/Tasks/index.js
Executable file
3
app/routes/Apps/Tasks/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Tasks from './Tasks';
|
||||
|
||||
export default Tasks;
|
||||
323
app/routes/Apps/TasksDetails/TasksDetails.js
Executable file
323
app/routes/Apps/TasksDetails/TasksDetails.js
Executable file
@@ -0,0 +1,323 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Table,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Media,
|
||||
Input,
|
||||
InputGroup,
|
||||
CustomInput,
|
||||
InputGroupAddon,
|
||||
Badge,
|
||||
Avatar
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
import { Attachment } from "../../components/Attachment";
|
||||
import { Comment } from "../../components/Comment";
|
||||
|
||||
const TasksDetails = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tasks Details"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-5">
|
||||
<div className="small mb-3">
|
||||
Task Details
|
||||
</div>
|
||||
<Table size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="align-middle">Project</td>
|
||||
<td className="text-right">
|
||||
<a href="#" className="text-decoration-none">Analytics Redo</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Assigned by</td>
|
||||
<td className="text-right">
|
||||
<a href="#" className="text-decoration-none">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Start Date</td>
|
||||
<td className="text-right">
|
||||
Thu 12 May 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">End Date</td>
|
||||
<td className="text-right">
|
||||
Wed 18 May 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Priority</td>
|
||||
<td className="text-right">
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link" className="p-0 text-decoration-none">
|
||||
<i className="fa fa-circle text-success mr-2"></i>
|
||||
Small<i className="fa fa-angle-down ml-2" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<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 active>
|
||||
<i className="fa fa-circle text-success mr-2"></i>
|
||||
Small
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Progress</td>
|
||||
<td className="align-middle text-right">
|
||||
30%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Task ID</td>
|
||||
<td className="align-middle text-right">
|
||||
# 6726746
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Date Assigned</td>
|
||||
<td className="align-middle text-right">
|
||||
Wed, 16 Dec 2015, 12:17 PM
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
Assigned to
|
||||
</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 */}
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle="Tasks"
|
||||
subTitleLink="/apps/tasks/grid"
|
||||
title="Task Details"
|
||||
/>
|
||||
{ /* START Right Content */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Media>
|
||||
<Media left href="#">
|
||||
<CustomInput type="checkbox" id="checkboxTaskDetails" label="" inline />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="mb-3">
|
||||
<h5>
|
||||
<span className="mr-2">
|
||||
#{ faker.random.number() }
|
||||
</span>
|
||||
{ faker.hacker.phrase() }
|
||||
</h5>
|
||||
<Badge pill color="primary" 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>
|
||||
</Media>
|
||||
</Media>
|
||||
<p className="lead">
|
||||
Animi ea magni voluptates accusamus laboriosam. Unde repellat hic id et aliquam ut qui dignissimos.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
{ faker.lorem.paragraphs() }
|
||||
</p>
|
||||
{ /* START Atachemnts */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-3">
|
||||
<span className="small mr-3">
|
||||
Attachments
|
||||
</span>
|
||||
<Badge pill color="secondary">
|
||||
3
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-word-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-excel-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-success"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-powerpoint-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-warning"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<a href="#">
|
||||
<i className="fa fa-plus mr-2"></i>
|
||||
Add More Files to this Task
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{ /* END Atachemnts */}
|
||||
<div className="mb-3">
|
||||
<span className="small mr-3">
|
||||
Comments
|
||||
</span>
|
||||
<Badge pill color="secondary">
|
||||
3
|
||||
</Badge>
|
||||
</div>
|
||||
<Comment />
|
||||
<Comment />
|
||||
{ /* END Comment Media */}
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<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">
|
||||
<i className="fa fa fa-send"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Right Content */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TasksDetails;
|
||||
3
app/routes/Apps/TasksDetails/index.js
Executable file
3
app/routes/Apps/TasksDetails/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import TasksDetails from './TasksDetails';
|
||||
|
||||
export default TasksDetails;
|
||||
216
app/routes/Apps/TasksKanban/TasksKanban.js
Executable file
216
app/routes/Apps/TasksKanban/TasksKanban.js
Executable file
@@ -0,0 +1,216 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardColumns,
|
||||
Badge,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid";
|
||||
|
||||
const TasksKanban = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tasks Kanban"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<ProjectsSmHeader
|
||||
btnShowKanban
|
||||
linkList="/apps/tasks/list"
|
||||
linkGrid="/apps/tasks/grid"
|
||||
title="Tasks Kanban"
|
||||
subTitle="Projects"
|
||||
subTitleLink="/apps/projects/list"
|
||||
/>
|
||||
<CardColumns>
|
||||
{ /* START Card */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
{ /* START Card Header */}
|
||||
<div className="mb-4">
|
||||
<CardTitle tag="h6">
|
||||
To-Do
|
||||
<Badge pill color="secondary" className="ml-2">
|
||||
3
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<span className="small d-flex">
|
||||
16 Jun 2016 - 23 Aug 2016
|
||||
<span className="ml-auto">
|
||||
<a href="#" className="mr-2" id="TooltipSettings">
|
||||
<i className="fa fa-gear"></i>
|
||||
</a>
|
||||
<a href="#" className="mr-2" id="TooltipCollapse">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</a>
|
||||
<a href="#" id="TooltipAddNew">
|
||||
<i className="fa fa-plus"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Collapse
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{ /* END CardHeader */}
|
||||
<TasksCardGrid />
|
||||
<TasksCardGrid
|
||||
id="2"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="3"
|
||||
/>
|
||||
</CardBody>
|
||||
{ /* START Card Footer */}
|
||||
<CardFooter className="text-center">
|
||||
<a href="#">
|
||||
<i className="fa fa-plus text-success mr-2"></i>
|
||||
Add Task
|
||||
</a>
|
||||
</CardFooter>
|
||||
{ /* END Card Footer */}
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
{ /* START Card */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
{ /* START Card Header */}
|
||||
<div className="mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Doing
|
||||
<Badge pill color="secondary" className="ml-2">
|
||||
2
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<span className="small d-flex">
|
||||
16 Jun 2016 - 23 Aug 2016
|
||||
<span className="ml-auto">
|
||||
<a href="#" className="mr-2" id="TooltipSettings">
|
||||
<i className="fa fa-gear"></i>
|
||||
</a>
|
||||
<a href="#" className="mr-2" id="TooltipCollapse">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</a>
|
||||
<a href="#" id="TooltipAddNew">
|
||||
<i className="fa fa-plus"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Collapse
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{ /* END CardHeader */}
|
||||
<TasksCardGrid
|
||||
id="4"
|
||||
/>
|
||||
<TasksCardGrid
|
||||
id="5"
|
||||
/>
|
||||
</CardBody>
|
||||
{ /* START Card Footer */}
|
||||
<CardFooter className="text-center">
|
||||
<a href="#">
|
||||
<i className="fa fa-plus text-success mr-2"></i>
|
||||
Add Task
|
||||
</a>
|
||||
</CardFooter>
|
||||
{ /* END Card Footer */}
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
{ /* START Card */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
{ /* START Card Header */}
|
||||
<div className="mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Done
|
||||
<Badge pill color="secondary" className="ml-2">
|
||||
1
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<span className="small d-flex">
|
||||
16 Jun 2016 - 23 Aug 2016
|
||||
<span className="ml-auto">
|
||||
<a href="#" className="mr-2" id="TooltipSettings">
|
||||
<i className="fa fa-gear"></i>
|
||||
</a>
|
||||
<a href="#" className="mr-2" id="TooltipCollapse">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</a>
|
||||
<a href="#" id="TooltipAddNew">
|
||||
<i className="fa fa-plus"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipSettings">
|
||||
Collapse
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{ /* END CardHeader */}
|
||||
<TasksCardGrid
|
||||
id="6"
|
||||
/>
|
||||
</CardBody>
|
||||
{ /* START Card Footer */}
|
||||
<CardFooter className="text-center">
|
||||
<a href="#">
|
||||
<i className="fa fa-plus text-success mr-2"></i>
|
||||
Add Task
|
||||
</a>
|
||||
</CardFooter>
|
||||
{ /* END Card Footer */}
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
{ /* START Card */}
|
||||
<Card type="border-dash">
|
||||
<CardBody className="d-flex align-items-center justify-content-center">
|
||||
<a href="#" className="py-5">
|
||||
<i className="fa fa-plus text-success mr-2"></i>
|
||||
Add New Column
|
||||
</a>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
</CardColumns>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TasksKanban;
|
||||
3
app/routes/Apps/TasksKanban/index.js
Executable file
3
app/routes/Apps/TasksKanban/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import TasksKanban from './TasksKanban';
|
||||
|
||||
export default TasksKanban;
|
||||
48
app/routes/Apps/Users/Users.js
Executable file
48
app/routes/Apps/Users/Users.js
Executable file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import UsersList from './UsersList';
|
||||
import UsersGrid from './UsersGrid';
|
||||
import { UsersLeftNav } from "../../components/Users/UsersLeftNav";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
|
||||
const Users = (props) => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Users"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<UsersLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle={props.match.params.type === "list"?"Users List":"Users Grid"}
|
||||
linkList="/apps/users/list"
|
||||
linkGrid="/apps/users/grid"
|
||||
/>
|
||||
|
||||
{
|
||||
props.match.params.type === "list" ?
|
||||
<UsersList /> :
|
||||
<UsersGrid />
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
Users.propTypes = {
|
||||
match: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
|
||||
export default Users;
|
||||
51
app/routes/Apps/Users/UsersGrid.js
Executable file
51
app/routes/Apps/Users/UsersGrid.js
Executable file
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CardColumns } from './../../../components';
|
||||
import { UsersCardGrid } from "../../components/Users/UsersCardGrid";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const UsersGrid = () => (
|
||||
<React.Fragment>
|
||||
<CardColumns>
|
||||
<UsersCardGrid />
|
||||
<UsersCardGrid
|
||||
id="2"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="3"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="4"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="5"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="6"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="7"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="8"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="9"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="10"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="11"
|
||||
/>
|
||||
<UsersCardGrid
|
||||
id="12"
|
||||
/>
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default UsersGrid;
|
||||
71
app/routes/Apps/Users/UsersList.js
Executable file
71
app/routes/Apps/Users/UsersList.js
Executable file
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardFooter,
|
||||
Table,
|
||||
} from './../../../components';
|
||||
|
||||
import {
|
||||
TrTableUsersList
|
||||
} from "./components/TrTableUsersList";
|
||||
|
||||
import {
|
||||
Paginations
|
||||
} from "../../components/Paginations";
|
||||
|
||||
const UsersList = () => (
|
||||
<Card className="mb-3">
|
||||
{ /* START Table */}
|
||||
<div className="table-responsive-xl">
|
||||
<Table className="mb-0" hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="align-middle bt-0"></th>
|
||||
<th className="align-middle bt-0"></th>
|
||||
<th className="align-middle bt-0">Name</th>
|
||||
<th className="align-middle bt-0">Email</th>
|
||||
<th className="align-middle bt-0">Phone</th>
|
||||
<th className="align-middle bt-0 text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableUsersList />
|
||||
<TrTableUsersList
|
||||
id="2"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="3"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="4"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="5"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="6"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="7"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="8"
|
||||
/>
|
||||
<TrTableUsersList
|
||||
id="9"
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Table */}
|
||||
<CardFooter className="d-flex justify-content-center pb-0">
|
||||
<Paginations />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
);
|
||||
|
||||
export default UsersList;
|
||||
176
app/routes/Apps/Users/components/TrTableUsersList.js
Executable file
176
app/routes/Apps/Users/components/TrTableUsersList.js
Executable file
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
CustomInput,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from './../../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../../utilities';
|
||||
|
||||
const TrTableUsersList = (props) => {
|
||||
|
||||
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>
|
||||
<tr>
|
||||
<td className="align-middle">
|
||||
<CustomInput type="checkbox" id={`TrTableUsersList-${ props.id }` } label="" inline />
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<a href="#">
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<Media>
|
||||
<Media left className="d-flex align-self-center mr-3">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="align-self-center"
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-white-bg"
|
||||
/>,
|
||||
...randomArray(avatar)
|
||||
]}
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<a className="mt-0 d-flex text-decoration-none" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<span>
|
||||
{ faker.name.jobTitle() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.internet.email() }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.phone.phoneNumberFormat() }
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link" className="pr-0">
|
||||
<i className="fa fa-bars"></i><i className="fa fa-angle-down ml-2" />
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
TrTableUsersList.propTypes = {
|
||||
id: PropTypes.node
|
||||
};
|
||||
TrTableUsersList.defaultProps = {
|
||||
id: "1"
|
||||
};
|
||||
|
||||
export { TrTableUsersList };
|
||||
3
app/routes/Apps/Users/index.js
Executable file
3
app/routes/Apps/Users/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Users from './Users';
|
||||
|
||||
export default Users;
|
||||
50
app/routes/Apps/UsersResults/UsersResults.js
Executable file
50
app/routes/Apps/UsersResults/UsersResults.js
Executable file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
CardColumns,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav";
|
||||
import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader";
|
||||
import { UsersResultsCard } from "../../components/SearchResults/UsersResultsCard";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const UsersResults = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Users Results"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<SearchResultsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<SearchResultsHeader />
|
||||
<CardColumns>
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
<UsersResultsCard />
|
||||
</CardColumns>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default UsersResults;
|
||||
3
app/routes/Apps/UsersResults/index.js
Executable file
3
app/routes/Apps/UsersResults/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import UsersResults from './UsersResults';
|
||||
|
||||
export default UsersResults;
|
||||
45
app/routes/Apps/VideosResults/VideosResults.js
Executable file
45
app/routes/Apps/VideosResults/VideosResults.js
Executable file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav";
|
||||
import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader";
|
||||
import { VideosResultsCard } from "../../components/SearchResults/VideosResultsCard";
|
||||
import { Paginations } from "../../components/Paginations";
|
||||
|
||||
const VideosResults = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Videos Results"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<SearchResultsLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<SearchResultsHeader />
|
||||
<VideosResultsCard />
|
||||
<VideosResultsCard />
|
||||
<VideosResultsCard />
|
||||
<VideosResultsCard />
|
||||
<VideosResultsCard />
|
||||
<VideosResultsCard />
|
||||
<div className="d-flex justify-content-center">
|
||||
<Paginations />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default VideosResults;
|
||||
3
app/routes/Apps/VideosResults/index.js
Executable file
3
app/routes/Apps/VideosResults/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import VideosResults from './VideosResults';
|
||||
|
||||
export default VideosResults;
|
||||
601
app/routes/Cards/Cards/Cards.js
Executable file
601
app/routes/Cards/Cards/Cards.js
Executable file
@@ -0,0 +1,601 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardTitle,
|
||||
CardText
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
HeaderDemo
|
||||
} from "../../components/HeaderDemo";
|
||||
|
||||
const cardText = ({ cardNo }) => (
|
||||
<CardText>
|
||||
<span className="mr-2 text-muted">
|
||||
#{ cardNo }
|
||||
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex.
|
||||
</CardText>
|
||||
);
|
||||
|
||||
const cardContent = (title = 'Some Card Title') => (
|
||||
<CardBody>
|
||||
<CardTitle>
|
||||
{ title }
|
||||
</CardTitle>
|
||||
{ cardText }
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
const Cards = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Cards"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Card Default Styles"
|
||||
subTitle="Available panel styles and colors"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6">
|
||||
Default Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6">
|
||||
White Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-primary text-white">
|
||||
Primary Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-secondary text-white">
|
||||
Secondary Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-info text-white">
|
||||
Info Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-success text-white">
|
||||
Success Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.06" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-warning text-white">
|
||||
Warning Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.07" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-danger text-white">
|
||||
Danger Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.08" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-dark text-white">
|
||||
Dark Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.09" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader tag="h6" className="bg-facebook text-white">
|
||||
Facebook Card
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "1.10" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Without Header
|
||||
<span className="small ml-1">
|
||||
Optional
|
||||
</span>
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "1.11" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Cards Borders"
|
||||
subTitle="Provide contextual feedback messages"
|
||||
className="mt-5"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card type="border" color="dark" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dark Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="primary" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Primary Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="secondary" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Secondary Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="info" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Info Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card type="border" color="success" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Success Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="warning" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Warning Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="danger" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Danger Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="border" color="facebook" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Facebook Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "2.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Cards Sides Borders"
|
||||
subTitle="Provide contextual feedback messages"
|
||||
className="mt-5"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card type="side-border" color="dark" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Dark Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="primary" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Primary Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="secondary" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Secondary Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="info" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Info Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card type="side-border" color="success" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Success Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="warning" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Warning Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.06" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="danger" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Danger Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.07" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card type="side-border" color="facebook" className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Left Facebook Border
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "3.08" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Cards Sides Borders"
|
||||
subTitle="Provide contextual feedback messages"
|
||||
className="mt-5"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="dark"
|
||||
tag="h6">
|
||||
Bottom Dark Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="primary"
|
||||
tag="h6">
|
||||
Bottom Primary Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="secondary"
|
||||
tag="h6">
|
||||
Bottom Secondary Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="success"
|
||||
tag="h6">
|
||||
Bottom Success Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="info"
|
||||
tag="h6">
|
||||
Bottom Info Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="dark"
|
||||
tag="h6">
|
||||
Bottom Warning Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.06" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="primary"
|
||||
tag="h6">
|
||||
Bottom Danger Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.07" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="secondary"
|
||||
tag="h6">
|
||||
Bottom Dark Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.08" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardHeader
|
||||
type="border"
|
||||
color="success"
|
||||
tag="h6">
|
||||
Bottom Facebook Border
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{ cardText({ cardNo: "4.09" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={5}
|
||||
title="Cards Backgrounds"
|
||||
subTitle="Provide contextual feedback messages"
|
||||
className="mt-5"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 5 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
White Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="primary">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Primary Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="secondary">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Secondary Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="success">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Success Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="warning">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Warning Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3" type="background" color="info">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Info Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.06" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="danger">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Danger Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.07" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="dark">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Dark Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="background" color="facebook">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="text-white">
|
||||
Facebook Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "5.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 5 */}
|
||||
|
||||
{ /* START Header 6 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={6}
|
||||
title="Cards Various"
|
||||
subTitle="Provide contextual feedback messages"
|
||||
className="mt-5"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 6 */}
|
||||
{ /* START Section 6 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3 bg-none">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Without Background
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "6.01" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="border-dash">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dashed Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "6.02" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="shadow">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Shadow Custom
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "6.03" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3 bg-none" type="border-dot">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dotted Border Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "6.04" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3" type="none">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Without Border & Background Card
|
||||
</CardTitle>
|
||||
{ cardText({ cardNo: "6.05" }) }
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 6 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Cards;
|
||||
3
app/routes/Cards/Cards/index.js
Executable file
3
app/routes/Cards/Cards/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Cards from './Cards';
|
||||
|
||||
export default Cards;
|
||||
1386
app/routes/Cards/CardsHeaders/CardsHeaders.js
Executable file
1386
app/routes/Cards/CardsHeaders/CardsHeaders.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Cards/CardsHeaders/index.js
Executable file
3
app/routes/Cards/CardsHeaders/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import CardsHeaders from './CardsHeaders';
|
||||
|
||||
export default CardsHeaders;
|
||||
599
app/routes/Dashboards/Analytics/Analytics.js
Executable file
599
app/routes/Dashboards/Analytics/Analytics.js
Executable file
@@ -0,0 +1,599 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
Container,
|
||||
ButtonToolbar,
|
||||
ButtonGroup,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
FloatGrid as Grid,
|
||||
Card,
|
||||
Media,
|
||||
CardBody,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
Progress,
|
||||
Table,
|
||||
CardFooter,
|
||||
Button,
|
||||
CardHeader
|
||||
} from './../../../components';
|
||||
import { applyColumn } from './../../../components/FloatGrid';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
MetricVsTarget
|
||||
} from "../../components/Analytics/MetricVsTarget";
|
||||
import {
|
||||
WebsitePerformance
|
||||
} from "../../components/Analytics/WebsitePerformance";
|
||||
import {
|
||||
AudienceMetricsChart
|
||||
} from "./components/AudienceMetricsChart";
|
||||
import {
|
||||
TinyAreaChart
|
||||
} from "../../components/Analytics/TinyAreaChart";
|
||||
import {
|
||||
SimpleLineChart
|
||||
} from "./../../Graphs/ReCharts/components/SimpleLineChart";
|
||||
|
||||
import classes from './Analytics.scss';
|
||||
|
||||
const LAYOUT = {
|
||||
'metric-v-target-users': { h: 6, md: 4 },
|
||||
'metric-v-target-sessions': { h: 6, md: 4 },
|
||||
'metric-v-target-pageviews': { h: 6, md: 4 },
|
||||
'analytics-audience-metrics': { h: 9, minH: 7 },
|
||||
'traffic-channels': { md: 6, h: 6 },
|
||||
'sessions': { md: 6, h: 6, maxH: 9, minW: 3 },
|
||||
'spend': { md: 6, h: 7 },
|
||||
'website-performance': { md: 6, h: 11 },
|
||||
'organic-traffic': { md: 6, h: 10 }
|
||||
}
|
||||
|
||||
const SessionByDevice = (props) => (
|
||||
<div className={classes['session']}>
|
||||
<div className={classes['session__title']}>
|
||||
{ props.title }
|
||||
</div>
|
||||
<div className={classes['session__values']}>
|
||||
<div className={`${classes['session__percentage']} text-${props.color}`}>
|
||||
{ props.valuePercent }%
|
||||
</div>
|
||||
<div className={`${classes['session__value']} text-${props.color}`}>
|
||||
{ props.value }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
SessionByDevice.propTypes = {
|
||||
title: PropTypes.node,
|
||||
color: PropTypes.string,
|
||||
valuePercent: PropTypes.string,
|
||||
value: PropTypes.string
|
||||
}
|
||||
|
||||
export class Analytics extends React.Component {
|
||||
state = {
|
||||
layouts: _.clone(LAYOUT)
|
||||
}
|
||||
|
||||
_resetLayout = () => {
|
||||
this.setState({
|
||||
layouts: _.clone(LAYOUT)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { layouts } = this.state;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Container fluid={ false }>
|
||||
<div className="d-flex mt-3 mb-5">
|
||||
<HeaderMain
|
||||
title="Analytics"
|
||||
className="mt-0"
|
||||
/>
|
||||
<ButtonToolbar className="ml-auto">
|
||||
<ButtonGroup className="align-self-start mr-2">
|
||||
<UncontrolledButtonDropdown className="ml-auto flex-column">
|
||||
<DropdownToggle color="link" className="text-left pl-0 text-decoration-none mb-2">
|
||||
<i className="fa fa-globe text-body mr-2"></i>
|
||||
www.webkom.co<i className="fa fa-angle-down text-body ml-2" />
|
||||
</DropdownToggle>
|
||||
<div className="small">
|
||||
Last 30 Days vs Previous Period
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownItem header>
|
||||
Select Site:
|
||||
</DropdownItem>
|
||||
<DropdownItem active>
|
||||
www.webkom.co
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
www.spin.webkom.co
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-plus mr-2"></i>
|
||||
Add New
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="align-self-start mr-2">
|
||||
<UncontrolledButtonDropdown className="ml-auto flex-column">
|
||||
<DropdownToggle color="link" className="text-left pl-0 text-decoration-none mb-2">
|
||||
<i className="fa fa-calendar-o text-body mr-2"></i>
|
||||
Last Month<i className="fa fa-angle-down text-body ml-2" />
|
||||
</DropdownToggle>
|
||||
<div className="small">
|
||||
Jan 01, 2017 to Jan 31, 2017
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownItem header>
|
||||
Select Period:
|
||||
</DropdownItem>
|
||||
<DropdownItem active>
|
||||
Last Month
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last 3 Months
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last 6 Months
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last Year
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
Custom...
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="align-self-start mr-2">
|
||||
<UncontrolledButtonDropdown className="ml-auto flex-column">
|
||||
<DropdownToggle color="link" className="text-left pl-0 text-decoration-none mb-2">
|
||||
<i className="fa fa-calendar-o text-body mr-2"></i>
|
||||
Previous Period<i className="fa fa-angle-down text-body ml-2" />
|
||||
</DropdownToggle>
|
||||
<div className="small">
|
||||
Jan 01, 2017 to Jan 31, 2017
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownItem header>
|
||||
Select Period:
|
||||
</DropdownItem>
|
||||
<DropdownItem active>
|
||||
Previous Period
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last 3 Months
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last 6 Months
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
Last Year
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
Custom...
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="align-self-start">
|
||||
<Button color="primary" className="mb-2 mr-2 px-3">
|
||||
Apply
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
color="link"
|
||||
className="mb-2 text-decoration-none align-self-start"
|
||||
onClick={this._resetLayout}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<Grid>
|
||||
<Grid.Row
|
||||
onLayoutChange={ layouts => this.setState({ layouts }) }
|
||||
columnSizes={ this.state.layouts }
|
||||
rowHeight={ 55 }
|
||||
>
|
||||
<Grid.Col { ...(applyColumn('metric-v-target-users', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 pb-0 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Users
|
||||
</CardHeader>
|
||||
<CardBody className="pt-2">
|
||||
<MetricVsTarget
|
||||
title="Users"
|
||||
value="168,793"
|
||||
progressbarColor="danger"
|
||||
targetValue="169,001"
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('metric-v-target-sessions', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 pb-0 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Sessions
|
||||
</CardHeader>
|
||||
<CardBody className="pt-2">
|
||||
<MetricVsTarget
|
||||
title="Sessions"
|
||||
value="529,747"
|
||||
progressbarValue="67"
|
||||
progressbarColor="primary"
|
||||
targetValue="782,957"
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('metric-v-target-pageviews', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 pb-0 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Pageviews
|
||||
</CardHeader>
|
||||
<CardBody className="pt-2">
|
||||
<MetricVsTarget
|
||||
title="Pageviews"
|
||||
value="1,763,981"
|
||||
progressbarValue="34"
|
||||
progressbarColor="secondary"
|
||||
targetValue="1,567,334"
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('analytics-audience-metrics', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 pb-4 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v mr-2 text-body"></i> Analytics Audience Metrics
|
||||
</CardHeader>
|
||||
<CardBody className="d-flex flex-column">
|
||||
<Grid.Ready>
|
||||
<AudienceMetricsChart height="100%" className="flex-fill" />
|
||||
</Grid.Ready>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('traffic-channels', layouts)) }>
|
||||
<Card className="d-flex flex-column">
|
||||
<CardHeader className="bb-0 pt-3 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Traffic Channels
|
||||
</CardHeader>
|
||||
<Table responsive className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="bt-0">Channel</th>
|
||||
<th scope="col" className="bt-0">Sessions</th>
|
||||
<th scope="col" className="bt-0">Prev Period</th>
|
||||
<th scope="col" className="text-right bt-0">Change</th>
|
||||
<th scope="col" className="bt-0 text-right">Trend</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="align-middle text-inverse">
|
||||
Organic Search
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.finance.amount() }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<span data-faker="[[finance.amount]]">949.00</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
-75,0%
|
||||
<i className="fa fa-caret-down text-danger ml-1"></i>
|
||||
</td>
|
||||
<td className="text-right align-middle">
|
||||
<TinyAreaChart />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle text-inverse">
|
||||
Direct
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.finance.amount() }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<span data-faker="[[finance.amount]]">157.11</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
82,1%
|
||||
<i className="fa fa-caret-up text-success ml-1"></i>
|
||||
</td>
|
||||
<td className="text-right align-middle">
|
||||
<TinyAreaChart />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle text-inverse">
|
||||
Social Media
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
{ faker.finance.amount() }
|
||||
</td>
|
||||
<td className="align-middle">
|
||||
<span data-faker="[[finance.amount]]">949.00</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
-75,0%
|
||||
<i className="fa fa-caret-down text-danger ml-1"></i>
|
||||
</td>
|
||||
<td className="text-right align-middle">
|
||||
<TinyAreaChart />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<CardFooter className="mt-auto flex-grow-0">
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('sessions', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 pb-0 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Sessions by Device Type
|
||||
</CardHeader>
|
||||
<CardBody className="d-flex flex-column">
|
||||
<div className={classes['sessions']}>
|
||||
<SessionByDevice
|
||||
title="Desktop"
|
||||
color="purple"
|
||||
valuePercent="51,5"
|
||||
value="201,345"
|
||||
/>
|
||||
<SessionByDevice
|
||||
title="Mobile"
|
||||
color="primary"
|
||||
valuePercent="34,4"
|
||||
value="134,201"
|
||||
/>
|
||||
<SessionByDevice
|
||||
title="Mobile"
|
||||
color="success"
|
||||
valuePercent="20,8"
|
||||
value="81,525"
|
||||
/>
|
||||
</div>
|
||||
<Progress multi className={ classes['sessions-progress'] } style={{height: "5px"}}>
|
||||
<Progress bar color="purple" value="25" style={{height: "5px"}} />
|
||||
<Progress bar color="primary" value="30" style={{height: "5px"}} />
|
||||
<Progress bar color="success" value="45" style={{height: "5px"}} />
|
||||
</Progress>
|
||||
</CardBody>
|
||||
<CardFooter className={`${classes['sessions-info']} mt-auto`}>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('spend', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="d-flex bb-0 pt-3 bg-none">
|
||||
<span className="h6">
|
||||
<i className="fa fa-ellipsis-v text-body mr-2"></i> Spend
|
||||
</span>
|
||||
<span className="ml-auto text-right">
|
||||
Dec 22, 2016 to<br />
|
||||
Dec 31, 2016 <i>(prev.)</i>
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="text-center mb-4">
|
||||
<h2>
|
||||
$2,890.12
|
||||
</h2>
|
||||
<div className="mb-1 text-success">
|
||||
<i className="fa mr-1 fa-caret-up"></i>
|
||||
23.34%
|
||||
</div>
|
||||
<div>
|
||||
vs { faker.finance .amount() } (prev.)
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardBody className="p-0">
|
||||
<TinyAreaChart height={ 70 } />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('website-performance', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="bb-0 pt-3 bg-none" tag="h6">
|
||||
<i className="fa fa-ellipsis-v mr-2"></i> Website Performance
|
||||
</CardHeader>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem className="bt-0">
|
||||
<WebsitePerformance
|
||||
title="Bounce Rate (Avg)"
|
||||
value="46,893"
|
||||
valuePercentIcon="caret-up"
|
||||
valuePercentColor="text-success"
|
||||
valuePercent="23,91"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="bt-0">
|
||||
<WebsitePerformance
|
||||
title="Pageviews (Avg)"
|
||||
value="2.15"
|
||||
valuePercentColor="text-danger"
|
||||
valuePercent="42,82"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="bt-0">
|
||||
<WebsitePerformance
|
||||
title="New Sessions"
|
||||
value="76,40"
|
||||
valuePercentIcon="caret-up"
|
||||
valuePercentColor="text-success"
|
||||
valuePercent="23,91"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="bt-0 bb-0">
|
||||
<WebsitePerformance
|
||||
title="Time on Site (Avg)"
|
||||
value="2m:16s"
|
||||
valuePercentColor="text-danger"
|
||||
valuePercent="65,28"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
<CardFooter className="flex-grow-0 mt-auto">
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col { ...(applyColumn('organic-traffic', layouts)) }>
|
||||
<Card>
|
||||
<CardHeader className="d-flex bb-0 pt-3 bg-none">
|
||||
<Media>
|
||||
<Media left className="mr-3">
|
||||
<i className="fa fa-ellipsis-v"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<span className="h6">
|
||||
How did my organic traffic perform?
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
Dec 22, 2016 to Dec 31, 2016 <i>(prev.)</i>
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</CardHeader>
|
||||
<CardBody className="d-flex flex-column">
|
||||
<div className="text-center mb-4">
|
||||
<h6>Organics Sessons</h6>
|
||||
<h2>
|
||||
46,982
|
||||
</h2>
|
||||
<div className="mb-1 text-success">
|
||||
<i className="fa mr-1 fa-caret-up"></i>
|
||||
23.34% <span> vs { faker.finance .amount() } <i>(prev.)</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Grid.Ready>
|
||||
<SimpleLineChart height="100%" className="flex-fill"/>
|
||||
</Grid.Ready>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Media className="small">
|
||||
<Media left>
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute" className="text-dark">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</Media>
|
||||
</Media>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
60
app/routes/Dashboards/Analytics/Analytics.scss
Executable file
60
app/routes/Dashboards/Analytics/Analytics.scss
Executable file
@@ -0,0 +1,60 @@
|
||||
@import "./../../../styles/variables.scss";
|
||||
|
||||
.sessions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sessions-progress {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.session {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&__percentage {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.float-column--size-xs),
|
||||
:global(.float-column--size-sm) {
|
||||
.sessions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&__values {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&__percentage {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__value {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
+ .session {
|
||||
border-top: 1px solid $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.float-column--size-xs) {
|
||||
.sessions-progress {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.sessions-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
77
app/routes/Dashboards/Analytics/components/AudienceMetricsChart.js
Executable file
77
app/routes/Dashboards/Analytics/components/AudienceMetricsChart.js
Executable file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import moment from 'moment';
|
||||
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
ComposedChart,
|
||||
CartesianGrid,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Area,
|
||||
Bar,
|
||||
Dot
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const CHART_LENGTH = 30;
|
||||
const CHART_START_DATE = moment().subtract(CHART_LENGTH, 'months');
|
||||
|
||||
const dataGenerator = (index) => {
|
||||
const referenceValue = _.random(1500, 1800);
|
||||
const halfedRefVal = referenceValue / 2;
|
||||
|
||||
return {
|
||||
key: index,
|
||||
month: moment(CHART_START_DATE).add(index, 'months').format('MMM YY'),
|
||||
"Tokyo": referenceValue,
|
||||
"New York": _.random(1200, 2200),
|
||||
"Berlin": referenceValue - _.random(halfedRefVal, halfedRefVal * 1.1),
|
||||
};
|
||||
}
|
||||
|
||||
const data = _.times(CHART_LENGTH, dataGenerator);
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const generateDot = ({stroke, ...other}) => (
|
||||
<Dot
|
||||
{ ...other }
|
||||
fill={ stroke }
|
||||
stroke={ colors['white'] }
|
||||
strokeWidth={ 2 }
|
||||
r={ 5 }
|
||||
/>
|
||||
);
|
||||
|
||||
export const AudienceMetricsChart = ({height, className}) => (
|
||||
<ResponsiveContainer
|
||||
width='100%'
|
||||
minHeight='250px'
|
||||
className={ className }
|
||||
{...(!_.isUndefined(height) ? {
|
||||
height
|
||||
} : {
|
||||
aspect: 2 / 1
|
||||
})}
|
||||
>
|
||||
<ComposedChart data={data}
|
||||
margin={{top: 20, right: 20, bottom: 20, left: 20}}>
|
||||
<CartesianGrid stroke={ colors['200'] } strokeDasharray='none' vertical={ false }/>
|
||||
<XAxis dataKey="month"/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey='New York' barSize={5} fill={ colors['400'] } />
|
||||
<Area dataKey='Tokyo' fill={ colors['purple-02'] } stroke={ colors['purple'] } activeDot={ null } />
|
||||
<Area dataKey='Berlin' fill={ colors['primary-04'] } stroke={ colors['primary'] } activeDot={{r: 5}} dot={generateDot} />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
AudienceMetricsChart.propTypes = {
|
||||
height: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
}
|
||||
3
app/routes/Dashboards/Analytics/index.js
Executable file
3
app/routes/Dashboards/Analytics/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Analytics } from './Analytics';
|
||||
|
||||
export default Analytics;
|
||||
262
app/routes/Dashboards/Financial/Financial.js
Executable file
262
app/routes/Dashboards/Financial/Financial.js
Executable file
@@ -0,0 +1,262 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
CustomInput,
|
||||
CardDeck,
|
||||
Table,
|
||||
UncontrolledDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
CardTitle,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
Button,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
TrTableInvoices
|
||||
} from "../../components/Financial/TrTableInvoices"
|
||||
import {
|
||||
TinyDonutChartBig
|
||||
} from "../../components/Financial/TinyDonutChartBig"
|
||||
import {
|
||||
StackedAreaChart
|
||||
} from "../../components/Financial/StackedAreaChart"
|
||||
import {
|
||||
TrTableRecentFundings
|
||||
} from "../../components/Financial/TrTableRecentFundings"
|
||||
|
||||
/*eslint-disable */
|
||||
const progressCompletion = [
|
||||
"25",
|
||||
"50",
|
||||
"75",
|
||||
"97"
|
||||
];
|
||||
/*eslint-enable */
|
||||
|
||||
const Financial = () => (
|
||||
<Container>
|
||||
<Row className="mb-2">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Financial"
|
||||
className="mb-4 mb-lg-3"
|
||||
/>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<div className="hr-text hr-text-center mt-4 mb-4">
|
||||
<span>Your Cash</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Main Fundings
|
||||
</CardTitle>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h2>$ 188.00</h2>
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-caret-down fa-fw text-danger"></i> $464.00
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Invoices
|
||||
</CardTitle>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h2>$ 553.00</h2>
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-caret-down fa-fw text-danger"></i> $994.00
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Accounts Receivable
|
||||
</CardTitle>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h2>$ 451.00</h2>
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i> $938.00
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Accounts Receivable
|
||||
</CardTitle>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h2>$ 194.00</h2>
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i> $519.00
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 12 }>
|
||||
<CardDeck>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="mb-4 d-flex">
|
||||
<h6>Money Map</h6>
|
||||
<UncontrolledDropdown className="ml-auto">
|
||||
<DropdownToggle color="link" size="sm" caret className="pt-0">
|
||||
Last Month
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem header>Select Date</DropdownItem>
|
||||
<DropdownItem active>Last Month</DropdownItem>
|
||||
<DropdownItem>Last 12 Months</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Custom...</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
</CardTitle>
|
||||
<div className="d-flex justify-content-center">
|
||||
<TinyDonutChartBig />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="mb-1 d-flex">
|
||||
<h6>Recent Fundings</h6>
|
||||
<Button color="link" size="sm" className="pt-0 ml-auto">
|
||||
View All <i className="fa fa-angle-right"></i>
|
||||
</Button>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<Table responsive striped className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">Company</th>
|
||||
<th className="bt-0">Amount</th>
|
||||
<th className="bt-0">Date</th>
|
||||
<th className="bt-0 text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableRecentFundings />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</CardDeck>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="mb-1 d-flex">
|
||||
<h6>Invoices</h6>
|
||||
<Button color="link" size="sm" className="pt-0 ml-auto">
|
||||
View All <i className="fa fa-angle-right"></i>
|
||||
</Button>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<Table responsive striped className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">Company</th>
|
||||
<th className="bt-0">Amount</th>
|
||||
<th className="bt-0">Date</th>
|
||||
<th className="bt-0">Contact</th>
|
||||
<th className="bt-0">Email</th>
|
||||
<th className="bt-0 text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableInvoices />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 8 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="mb-4 d-flex">
|
||||
<h6>Account Performance</h6>
|
||||
</CardTitle>
|
||||
<div className="d-flex justify-content-center">
|
||||
<StackedAreaChart />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="mb-1">
|
||||
<h6 className="mb-0">Settings</h6>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>My Cash</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch" name="customSwitch" label="" className="ml-auto" />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>My Cap</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch1" name="customSwitch" label="" className="ml-auto" defaultChecked />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>Client List</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch2" name="customSwitch" label="" className="ml-auto" defaultChecked />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>Recent Fundings</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch3" name="customSwitch" label="" className="ml-auto" />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>Invoice Creator</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch4" name="customSwitch" label="" className="ml-auto" />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>Sales Lead</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch5" name="customSwitch" label="" className="ml-auto" defaultChecked />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="d-flex">
|
||||
<span>Q&A</span>
|
||||
<CustomInput type="switch" id="exampleCustomSwitch6" name="customSwitch" label="" className="ml-auto" defaultChecked />
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Financial'
|
||||
})(Financial);
|
||||
3
app/routes/Dashboards/Financial/index.js
Executable file
3
app/routes/Dashboards/Financial/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Financial from './Financial';
|
||||
|
||||
export default Financial;
|
||||
348
app/routes/Dashboards/Monitor/Monitor.js
Executable file
348
app/routes/Dashboards/Monitor/Monitor.js
Executable file
@@ -0,0 +1,348 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
Table,
|
||||
CardTitle,
|
||||
Progress,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
TinyDonutChart
|
||||
} from "../../components/Monitor/TinyDonutChart"
|
||||
import {
|
||||
TinyDonutChartBig
|
||||
} from "../../components/Monitor/TinyDonutChartBig"
|
||||
import {
|
||||
TrTableMonitor
|
||||
} from "../../components/Monitor/TrTableMonitor"
|
||||
import {
|
||||
TinyAreaChart
|
||||
} from "../../components/Monitor/TinyAreaChart"
|
||||
|
||||
/*eslint-disable */
|
||||
const progressCompletion = [
|
||||
"25",
|
||||
"50",
|
||||
"75",
|
||||
"97"
|
||||
];
|
||||
/*eslint-enable */
|
||||
|
||||
const Monitor = () => (
|
||||
<Container>
|
||||
<Row className="mb-2">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Monitor"
|
||||
className="mb-4 mb-lg-5"
|
||||
/>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
System Monitoring
|
||||
</CardTitle>
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<h6 className="mb-1">CPU</h6>
|
||||
<p>Intel Celeron G1610 @2.60Ghz</p>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">Core 0</span>
|
||||
<Progress value="44" className="mt-2 w-50" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">86%</span>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">Core 1</span>
|
||||
<Progress value="74" className="mt-2 w-50" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<h6 className="mb-1">Memory <small>(Ram)</small></h6>
|
||||
<p>GSkill 2 x 8 GB DDR3 @1333 Mhz</p>
|
||||
</div>
|
||||
<div className="mb-3 d-flex">
|
||||
<TinyDonutChart />
|
||||
<div className="ml-2 align-self-center">
|
||||
<h2 className="mb-0">52 <small>GB</small></h2>
|
||||
<span>Total Memory</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-info"></i> Allocated
|
||||
</div>
|
||||
<h6 className="mb-0">48,7 MB</h6>
|
||||
<span>79%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-primary"></i> In Cache
|
||||
</div>
|
||||
<h6 className="mb-0">26,9 MB</h6>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-gray-300"></i> Available
|
||||
</div>
|
||||
<h6 className="mb-0">2,7 MB</h6>
|
||||
<span>34%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h6 className="mb-1">Interface Traffic <small>(re0)</small></h6>
|
||||
<p>Intel Celeron G1610 @2.60Ghz</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Network Monitoring
|
||||
</CardTitle>
|
||||
<div>
|
||||
<div>
|
||||
<h6 className="mb-1">Interface Traffic <small>(re0)</small></h6>
|
||||
<p>Intel Celeron G1610 @2.60Ghz</p>
|
||||
</div>
|
||||
</div>
|
||||
<TinyAreaChart />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Hardware Temperature
|
||||
</CardTitle>
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<h6>CPU <small>(idle)</small></h6>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-3">
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-down fa-fw text-danger"></i>Min: 19ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 26ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 32ºC
|
||||
</div>
|
||||
</div>
|
||||
<TinyAreaChart />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<h6>HDD1 WD30EZRX <small>(ada0)</small></h6>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-3">
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-down fa-fw text-danger"></i>Min: 19ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 26ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 32ºC
|
||||
</div>
|
||||
</div>
|
||||
<TinyAreaChart />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h6>HDD1 WD30EZRX <small>(ada1)</small></h6>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-3">
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-down fa-fw text-danger"></i>Min: 19ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 26ºC
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<i className="fa fa-caret-up fa-fw text-success"></i>Min: 32ºC
|
||||
</div>
|
||||
</div>
|
||||
<TinyAreaChart />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 8 }>
|
||||
<p>
|
||||
Nesciunt odit eius nihil molestiae tenetur earum enim quidem. Aperiam non sapiente voluptatum in doloremque rerum magnam quae sed.
|
||||
Quisquam eos non voluptate sapiente qui temporibus harum in illo. Aliquid at dolor labore. Qui error modi.
|
||||
</p>
|
||||
<div className="hr-text hr-text-left mt-4 mb-4">
|
||||
<span>Volume Status</span>
|
||||
</div>
|
||||
<Row className="mb-5">
|
||||
<Col lg={ 3 }>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h6 className="mb-1">Path</h6>
|
||||
<Badge color="secondary" pill>/mtn/volume1</Badge>
|
||||
</div>
|
||||
<div className="mb-0">
|
||||
<h2 className="mb-0">2.24 <small>TiB</small></h2>
|
||||
<span>Volume Size</span>
|
||||
</div>
|
||||
<TinyDonutChartBig
|
||||
pieColor="primary"
|
||||
/>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-purple"></i> Used Space
|
||||
</div>
|
||||
<h6 className="mb-0">483,7 MB</h6>
|
||||
<span>79%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-gray-300"></i> Free Space
|
||||
</div>
|
||||
<h6 className="mb-0">269,3 MB</h6>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h6 className="mb-1">Path</h6>
|
||||
<Badge color="secondary" pill>/mtn/volume1</Badge>
|
||||
</div>
|
||||
<div className="mb-0">
|
||||
<h2 className="mb-0">5.07 <small>TiB</small></h2>
|
||||
<span>Volume Size</span>
|
||||
</div>
|
||||
<TinyDonutChartBig
|
||||
pieColor="purple"
|
||||
/>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-purple"></i> Used Space
|
||||
</div>
|
||||
<h6 className="mb-0">48,7 MB</h6>
|
||||
<span>79%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-gray-300"></i> Free Space
|
||||
</div>
|
||||
<h6 className="mb-0">26,9 MB</h6>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h6 className="mb-1">Path</h6>
|
||||
<Badge color="secondary" pill>/mtn/volume1</Badge>
|
||||
</div>
|
||||
<div className="mb-0">
|
||||
<h2 className="mb-0">3.16 <small>TiB</small></h2>
|
||||
<span>Volume Size</span>
|
||||
</div>
|
||||
<TinyDonutChartBig
|
||||
pieColor="success"
|
||||
/>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-success"></i> Used Space
|
||||
</div>
|
||||
<h6 className="mb-0">483,3 MB</h6>
|
||||
<span>79%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-gray-300"></i> Free Space
|
||||
</div>
|
||||
<h6 className="mb-0">262,9 MB</h6>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<h6 className="mb-1">Path</h6>
|
||||
<Badge color="secondary" pill>/mtn/volume1</Badge>
|
||||
</div>
|
||||
<div className="mb-0">
|
||||
<h2 className="mb-0">9.27 <small>TiB</small></h2>
|
||||
<span>Volume Size</span>
|
||||
</div>
|
||||
<TinyDonutChartBig
|
||||
pieColor="yellow"
|
||||
/>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-yellow"></i> Used Space
|
||||
</div>
|
||||
<h6 className="mb-0">482,7 MB</h6>
|
||||
<span>79%</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="small mb-2">
|
||||
<i className="fa fa-circle fa-fw text-gray-300"></i> Free Space
|
||||
</div>
|
||||
<h6 className="mb-0">26,9 MB</h6>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="hr-text hr-text-left mt-2 mb-4">
|
||||
<span>Mounted Devices</span>
|
||||
</div>
|
||||
<Table responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">Description</th>
|
||||
<th className="bt-0">RAID</th>
|
||||
<th className="bt-0">Capacity</th>
|
||||
<th className="bt-0 text-right">Usage</th>
|
||||
<th className="bt-0 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableMonitor />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Monitor'
|
||||
})(Monitor);
|
||||
3
app/routes/Dashboards/Monitor/index.js
Executable file
3
app/routes/Dashboards/Monitor/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Monitor from './Monitor';
|
||||
|
||||
export default Monitor;
|
||||
120
app/routes/Dashboards/Projects/DraggableProjects.js
Executable file
120
app/routes/Dashboards/Projects/DraggableProjects.js
Executable file
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import uid from 'uuid/v4';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import _ from 'lodash';
|
||||
|
||||
import {
|
||||
ProjectsList
|
||||
} from "../../components/ProjectsDashboards/ProjectsList";
|
||||
|
||||
const reorder = (list, startIndex, endIndex) => {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export class DraggableProjects extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
projects: [
|
||||
{
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "success",
|
||||
badgeTitle: "Active",
|
||||
progressValue: "76",
|
||||
completeValue: "13",
|
||||
myTasksValue: "35",
|
||||
daysDueValue: "6"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "danger",
|
||||
badgeTitle: "Suspended",
|
||||
progressValue: "23",
|
||||
completeValue: "6",
|
||||
myTasksValue: "87",
|
||||
daysDueValue: "15"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "secondary",
|
||||
badgeTitle: "Archived",
|
||||
progressValue: "4",
|
||||
completeValue: "98",
|
||||
myTasksValue: "21",
|
||||
daysDueValue: "7"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "warning",
|
||||
badgeTitle: "Paused",
|
||||
progressValue: "63",
|
||||
completeValue: "98",
|
||||
myTasksValue: "21",
|
||||
daysDueValue: "7"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
onDragEnd(result) {
|
||||
if (!result.destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const projects = reorder(
|
||||
this.state.projects,
|
||||
result.source.index,
|
||||
result.destination.index
|
||||
);
|
||||
|
||||
this.setState({
|
||||
projects,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DragDropContext onDragEnd={this.onDragEnd}>
|
||||
<Droppable droppableId="droppable">
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="list-group list-group-flush"
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{_.map(this.state.projects, ({id, ...project}, index) => (
|
||||
<Draggable key={id} draggableId={id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="list-group-item"
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={{
|
||||
...provided.draggableProps.style,
|
||||
borderLeft: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)',
|
||||
borderRight: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)'
|
||||
}}
|
||||
>
|
||||
<ProjectsList
|
||||
{ ...project }
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
}
|
||||
}
|
||||
304
app/routes/Dashboards/Projects/ProjectsDashboard.js
Executable file
304
app/routes/Dashboards/Projects/ProjectsDashboard.js
Executable file
@@ -0,0 +1,304 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
Table,
|
||||
CardTitle,
|
||||
Button,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
Media,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
TasksMedia
|
||||
} from "../../components/ProjectsDashboards/TasksMedia";
|
||||
import {
|
||||
TinyDonutChart
|
||||
} from "../../components/ProjectsDashboards/TinyDonutChart"
|
||||
import {
|
||||
TinyDonutChartAllProjects
|
||||
} from "../../components/ProjectsDashboards/TinyDonutChartAllProjects"
|
||||
import {
|
||||
TimelineMini
|
||||
} from "../../components/Timeline/TimelineMini"
|
||||
import { DraggableProjects } from './DraggableProjects';
|
||||
|
||||
const ProjectsDashboard = () => (
|
||||
<Container>
|
||||
<Row className="mb-5">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Projects"
|
||||
className="mb-4 mb-lg-5"
|
||||
/>
|
||||
<p>
|
||||
{ faker.lorem.paragraph() }
|
||||
</p>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div className="hr-text hr-text-center my-2">
|
||||
<span>Payments</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-primary mr-2"></i>
|
||||
Today
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$3,267
|
||||
</h4>
|
||||
</Col>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-info mr-2"></i>
|
||||
This Month
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$8,091
|
||||
</h4>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="hr-text hr-text-center mb-2 mt-3">
|
||||
<span>Invoices</span>
|
||||
</div>
|
||||
<Row className="mb-4 mb-xl-0">
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-warning mr-2"></i>
|
||||
Due
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$4,007
|
||||
</h4>
|
||||
</Col>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-danger mr-2"></i>
|
||||
Overdue
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$11,091
|
||||
</h4>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>All Tasks</span>
|
||||
</div>
|
||||
<Media>
|
||||
<Media left className="mr-3">
|
||||
<TinyDonutChart />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-yellow"></i>
|
||||
<span className="text-inverse">23</span> Pending
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-danger"></i>
|
||||
<span className="text-inverse">3</span> Behind
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-success"></i>
|
||||
<span className="text-inverse">34</span> Completed
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } className="mb-4 mb-lg-0">
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>All Projects</span>
|
||||
</div>
|
||||
<Media>
|
||||
<Media left className="mr-3">
|
||||
<TinyDonutChartAllProjects />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-info"></i>
|
||||
<span className="text-inverse">14</span> Pending
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-primary"></i>
|
||||
<span className="text-inverse">24</span> Behind
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-purple"></i>
|
||||
<span className="text-inverse">2</span> Completed
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>My Stats</span>
|
||||
</div>
|
||||
<Table size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-inverse bt-0">Active Projects</td>
|
||||
<td className="text-right bt-0">
|
||||
<Badge color="success" pill>6</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Open Tasks</td>
|
||||
<td className="text-right">
|
||||
<Badge color="primary" pill>4</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Support Tickets</td>
|
||||
<td className="text-right">
|
||||
<Badge color="info" pill>15</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Active Timers</td>
|
||||
<td className="text-right">
|
||||
<Badge color="secondary" pill>0</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Tasks
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Tasks..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/tasks/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="success"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="danger"
|
||||
id="2"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="warning"
|
||||
id="3"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
id="4"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/tasks/list" className="text-center">
|
||||
View All Tasks
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Timeline Mini
|
||||
</CardTitle>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="2 Days ago"
|
||||
icon="times-circle"
|
||||
iconClassName="text-danger"
|
||||
badgeTitle="Alert"
|
||||
badgeColor="danger"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="question-circle"
|
||||
iconClassName="text-warning"
|
||||
badgeTitle="Warning"
|
||||
badgeColor="warning"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="info-circle"
|
||||
iconClassName="text-info"
|
||||
badgeTitle="Info"
|
||||
badgeColor="info"
|
||||
/>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="Yesterday"
|
||||
icon="plus-circle"
|
||||
iconClassName="text-primary"
|
||||
badgeTitle="Message"
|
||||
badgeColor="primary"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="check-circle"
|
||||
iconClassName="text-success"
|
||||
badgeTitle="Success"
|
||||
badgeColor="success"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="circle"
|
||||
badgeTitle="Obsolete"
|
||||
/>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action tag={ Link } to="/pages/timeline" className="text-center">
|
||||
Timeline Details
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Projects
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Projects..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/projects/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<DraggableProjects />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Projects Dashboard'
|
||||
})(ProjectsDashboard);
|
||||
3
app/routes/Dashboards/Projects/index.js
Executable file
3
app/routes/Dashboards/Projects/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ProjectsDashboard from './ProjectsDashboard';
|
||||
|
||||
export default ProjectsDashboard;
|
||||
936
app/routes/Dashboards/Reports/Reports.js
Executable file
936
app/routes/Dashboards/Reports/Reports.js
Executable file
@@ -0,0 +1,936 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
UncontrolledTooltip,
|
||||
Progress,
|
||||
Table,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
CardTitle,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
UncontrolledCollapse,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
TinyLineChart
|
||||
} from "./components/TinyLineChart";
|
||||
import {
|
||||
TinyAreaChart
|
||||
} from "./components/TinyAreaChart";
|
||||
import {
|
||||
TinyArcChart
|
||||
} from "./components/TinyArcChart";
|
||||
|
||||
|
||||
/*eslint-disable */
|
||||
const progressCompletion = [
|
||||
"25",
|
||||
"50",
|
||||
"75",
|
||||
"97"
|
||||
];
|
||||
/*eslint-enable */
|
||||
|
||||
const Reports = () => (
|
||||
<Container>
|
||||
<Row className="mb-2">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Reports"
|
||||
className="mb-3 mb-lg-5"
|
||||
/>
|
||||
</Col>
|
||||
<Col xl={ 3 } lg={ 6 } className="mb-4 mb-lg-0">
|
||||
<Card>
|
||||
<CardBody className="bb-0">
|
||||
<span className="d-flex">
|
||||
<CardTitle tag="h6" className="mb-0 bb-0">
|
||||
Temperatures
|
||||
</CardTitle>
|
||||
<span className="ml-auto justify-content-start">
|
||||
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="TemperaturesTooltipSettings">
|
||||
<i className="fa fa-fw fa-sliders"></i>
|
||||
</a> <a href="javascript:;" id="TemperaturesTooltipAdd" className="text-decoration-none">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</a>
|
||||
</span>
|
||||
<UncontrolledTooltip placement="top" target="TemperaturesTooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="TemperaturesTooltipAdd">
|
||||
Add
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="TemperaturesProcessorToggler" className="by-0 d-flex text-decoration-none">
|
||||
Processor
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesProcessorTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="TemperaturesProcessorTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#TemperaturesProcessorToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<span className="d-flex mb-4">
|
||||
<h1>39º</h1>
|
||||
<span className="ml-auto text-right">
|
||||
102º F <br />
|
||||
<i className="fa fa-arrow-down fa-fw text-primary"></i>
|
||||
</span>
|
||||
</span>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<span className="d-flex align-items-center mr-2">Core 0</span>
|
||||
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">86º</span>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<span className="d-flex align-items-center mr-2">Core 1</span>
|
||||
<Progress value="59" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">40º</span>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<span className="d-flex align-items-center mr-2">Core 2</span>
|
||||
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">86º</span>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<span className="d-flex align-items-center mr-2">Core 3</span>
|
||||
<Progress value="59" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">40º</span>
|
||||
</div>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="TemperaturesGraphicsToggler" className="by-0 d-flex text-decoration-none">
|
||||
Graphics
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesGraphicsTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="TemperaturesGraphicsTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#TemperaturesGraphicsToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<span className="d-flex mb-3">
|
||||
<h1>68º</h1>
|
||||
<span className="ml-auto text-right">
|
||||
102º F <br />
|
||||
<i className="fa fa-arrow-up fa-fw text-danger"></i>
|
||||
</span>
|
||||
</span>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<span className="d-flex align-items-center mr-2">Core</span>
|
||||
<Progress value="85" className="mt-2 w-50" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">86º</span>
|
||||
</div>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="TemperaturesStorageToggler" className="by-0 d-flex text-decoration-none">
|
||||
Storage
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesStorageTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="TemperaturesStorageTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#TemperaturesStorageToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<div className="mb-3 mt-2">
|
||||
<TinyLineChart />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<span className="d-flex">
|
||||
<span className="text-inverse">
|
||||
Samsung 850 PRO
|
||||
</span>
|
||||
<span className="ml-auto">
|
||||
512GB
|
||||
</span>
|
||||
</span>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">SSD 0</span>
|
||||
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">31º</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<span className="d-flex">
|
||||
<span className="text-inverse">
|
||||
WD Black
|
||||
</span>
|
||||
<span className="ml-auto">
|
||||
1TB
|
||||
</span>
|
||||
</span>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">HDD 1</span>
|
||||
<Progress value="67" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">81º</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-0">
|
||||
<span className="d-flex">
|
||||
<span className="text-inverse">
|
||||
Quantum PCI
|
||||
</span>
|
||||
<span className="ml-auto">
|
||||
2TB
|
||||
</span>
|
||||
</span>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">SSD 3</span>
|
||||
<Progress value="35" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
||||
<span className="ml-2 text-inverse">21º</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={ 3 } lg={ 6 } className="mb-4 mb-lg-0">
|
||||
<Card className="mb-sm-4 mb-xl-0">
|
||||
<CardBody className="bb-0">
|
||||
<span className="d-flex">
|
||||
<CardTitle tag="h6" className="mb-0 bb-0">
|
||||
Usage
|
||||
</CardTitle>
|
||||
<span className="ml-auto justify-content-start">
|
||||
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="UsageTooltipSettings">
|
||||
<i className="fa fa-fw fa-sliders"></i>
|
||||
</a> <a href="javascript:;" id="UsageTooltipAdd" className="text-decoration-none">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</a>
|
||||
</span>
|
||||
<UncontrolledTooltip placement="top" target="UsageTooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UsageTooltipAdd">
|
||||
Add
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="ProcessorToggler" className="by-0 d-flex text-decoration-none">
|
||||
Processor
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="ProcessorTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="ProcessorTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#ProcessorToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<dl className="row mb-3">
|
||||
<dt className="col-sm-5">CPU</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">Intel Core i7</dd>
|
||||
<dt className="col-sm-5">Base (Turbo)</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
||||
<dt className="col-sm-8">Cores (Threads)</dt>
|
||||
<dd className="col-sm-4 text-right text-inverse">4 (8)</dd>
|
||||
</dl>
|
||||
<Progress multi className="mt-2" style={{height: "5px"}}>
|
||||
<Progress bar value="45" />
|
||||
<Progress bar color="danger" value="15" />
|
||||
</Progress>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="UsageLoadToggler" className="by-0 d-flex text-decoration-none">
|
||||
Usage (Load)
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="UsageLoadTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="UsageLoadTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledCollapse toggler="#UsageLoadToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<Table size="sm" className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="bt-0 bb-0 align-middle text-left">
|
||||
<h1 className="pt-0">78%</h1>
|
||||
</th>
|
||||
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
||||
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
||||
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
||||
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
||||
<i className="fa fa-fw fa-stop text-primary"></i>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bt-0">Cores</td>
|
||||
<td className="bt-0 text-center text-inverse">1</td>
|
||||
<td className="bt-0 text-center text-inverse">2</td>
|
||||
<td className="bt-0 text-center text-inverse">3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Usage %</td>
|
||||
<td className="text-center text-inverse">27</td>
|
||||
<td className="text-center text-inverse">78</td>
|
||||
<td className="text-center text-inverse">13</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tendency</td>
|
||||
<td className="text-center">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</ListGroup>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="GraphicsToggler" className="by-0 d-flex text-decoration-none">
|
||||
Graphics
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="GraphicsTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="GraphicsTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledCollapse toggler="#GraphicsToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-sm-5">GPU Name</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">NVIDIA GTX 980</dd>
|
||||
<dt className="col-sm-5">Bus Width</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
||||
<dt className="col-sm-7">Memory</dt>
|
||||
<dd className="col-sm-5 text-right text-inverse">4096 GDDR5</dd>
|
||||
</dl>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</ListGroup>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="UsageLoadToggler2" className="by-0 d-flex text-decoration-none">
|
||||
Usage (Load)
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="UsageLoadTooltip2"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="UsageLoadTooltip2">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledCollapse toggler="#UsageLoadToggler2" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<Table size="sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="bt-0 bb-0 align-top text-left">
|
||||
<h1 className="pt-0">85%</h1>
|
||||
</th>
|
||||
<th scope="col" className="text-right bt-0 bb-0 align-middle">
|
||||
<TinyArcChart />
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bt-0">Current Core Clock</td>
|
||||
<td className="bt-0 text-right text-inverse">390Mhz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Current Memory Clock</td>
|
||||
<td className="text-right text-inverse">160MHz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Memory Usage (%)</td>
|
||||
<td className="text-right text-inverse">306MB (7%)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tendency</td>
|
||||
<td className="text-right">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={ 6 } lg={ 12 }>
|
||||
<Row>
|
||||
<Col xl={ 6 } lg={ 6 }>
|
||||
<Card className="mb-4">
|
||||
<CardBody className="bb-0">
|
||||
<span className="d-flex">
|
||||
<CardTitle tag="h6" className="mb-0 bb-0">
|
||||
Allocation
|
||||
</CardTitle>
|
||||
<span className="ml-auto justify-content-start">
|
||||
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="AllocationTooltipSettings">
|
||||
<i className="fa fa-fw fa-sliders"></i>
|
||||
</a> <a href="javascript:;" id="AllocationTooltipAdd" className="text-decoration-none">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</a>
|
||||
</span>
|
||||
<UncontrolledTooltip placement="top" target="AllocationTooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="AllocationTooltipAdd">
|
||||
Add
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="RamToggler" className="by-0 d-flex text-decoration-none">
|
||||
RAM
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="RamTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="RamTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#RamToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<dl className="row mb-3">
|
||||
<dt className="col-sm-5">Installed</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">16GB DDR3</dd>
|
||||
<dt className="col-sm-5">DRAM Freq</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
||||
<dt className="col-sm-8">Cores (Threads)</dt>
|
||||
<dd className="col-sm-4 text-right text-inverse">4 (8)</dd>
|
||||
</dl>
|
||||
<Progress multi className="mt-2 mb-3" style={{height: "5px"}}>
|
||||
<Progress bar value="45" />
|
||||
<Progress bar color="danger" value="15" />
|
||||
</Progress>
|
||||
<Table size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bt-0">
|
||||
<i className="fa fa fa-circle-o text-primary mr-1"></i>
|
||||
In Use
|
||||
</td>
|
||||
<td className="text-right text-inverse bt-0">
|
||||
796MB <i className="fa fa-arrow-up fa-fw text-gray-300"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i className="fa fa fa-circle-o text-danger mr-1"></i>
|
||||
In Cache
|
||||
</td>
|
||||
<td className="text-right text-inverse">
|
||||
180MB <i className="fa fa-arrow-down fa-fw text-gray-300"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i className="fa fa fa-circle-o text-gray-300 mr-1"></i>
|
||||
Available
|
||||
</td>
|
||||
<td className="text-right text-inverse">
|
||||
1672MB <i className="fa fa-arrow-down fa-fw text-gray-300"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<div>
|
||||
<TinyAreaChart />
|
||||
</div>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={ 6 } lg={ 6 }>
|
||||
<Card className="mb-4">
|
||||
<CardBody className="bb-0">
|
||||
<span className="d-flex">
|
||||
<CardTitle tag="h6" className="mb-0 bb-0">
|
||||
Cooling
|
||||
</CardTitle>
|
||||
<span className="ml-auto justify-content-start">
|
||||
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="CoolingTooltipSettings">
|
||||
<i className="fa fa-fw fa-sliders"></i>
|
||||
</a> <a href="javascript:;" id="CoolingTooltipAdd" className="text-decoration-none">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</a>
|
||||
</span>
|
||||
<UncontrolledTooltip placement="top" target="CoolingTooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="CoolingTooltipAdd">
|
||||
Add
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="a" href="#" id="FansToggler" className="by-0 d-flex text-decoration-none">
|
||||
Fans
|
||||
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="FansTooltip"></i>
|
||||
</ListGroupItem>
|
||||
<UncontrolledTooltip placement="top" target="FansTooltip">
|
||||
Show/Hide Section
|
||||
</UncontrolledTooltip>
|
||||
</ListGroup>
|
||||
<UncontrolledCollapse toggler="#FansToggler" isOpen>
|
||||
<CardBody className="pt-0">
|
||||
<div className="mb-2">
|
||||
<span className="d-flex">
|
||||
<span>
|
||||
Left Fontal Fan
|
||||
</span>
|
||||
<span className="ml-auto text-inverse">
|
||||
120mm
|
||||
</span>
|
||||
</span>
|
||||
<input type="range" className="custom-range pb-0" id="leftFontalFan" />
|
||||
<span className="d-flex">
|
||||
<span>
|
||||
<i className="fa fa-fw fa-leaf"></i>
|
||||
</span>
|
||||
<span className="ml-auto">
|
||||
250RPM
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<span className="d-flex">
|
||||
<span>
|
||||
Right Fontal Fan
|
||||
</span>
|
||||
<span className="ml-auto text-inverse">
|
||||
120mm
|
||||
</span>
|
||||
</span>
|
||||
<input type="range" max="3" step="1" className="custom-range pb-0" id="leftFontalFan" />
|
||||
<span className="d-flex">
|
||||
<span>
|
||||
<i className="fa fa-fw fa-leaf"></i>
|
||||
</span>
|
||||
<span className="ml-auto">
|
||||
250RPM
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Nav pills className="nav-fill">
|
||||
<NavItem>
|
||||
<NavLink href="#" active>
|
||||
<i className="fa fa-sliders"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<i className="fa fa-leaf"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<i className="fa fa-dashboard"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</CardBody>
|
||||
</UncontrolledCollapse>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={ 12 }>
|
||||
<Card>
|
||||
<CardBody className="bb-0 pb-0">
|
||||
<span className="d-flex">
|
||||
<CardTitle tag="h6" className="mb-0 bb-0">
|
||||
Activity
|
||||
</CardTitle>
|
||||
<span className="ml-auto justify-content-start">
|
||||
<a href="javascript:;" className="ml-auto justify-content-start pr-2" id="ActivityTooltipSettings">
|
||||
<i className="fa fa-fw fa-sliders"></i>
|
||||
</a> <a href="javascript:;" id="ActivityTooltipAdd">
|
||||
<i className="fa fa-fw fa-plus"></i>
|
||||
</a>
|
||||
</span>
|
||||
<UncontrolledTooltip placement="top" target="ActivityTooltipSettings">
|
||||
Settings
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="ActivityTooltipAdd">
|
||||
Add
|
||||
</UncontrolledTooltip>
|
||||
</span>
|
||||
</CardBody>
|
||||
<CardBody>
|
||||
<Nav tabs className="mb-3">
|
||||
<NavItem>
|
||||
<NavLink href="#" active>
|
||||
Processes
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
Network
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
Storage
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
Energy
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-sm-5">
|
||||
Operating System
|
||||
</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">
|
||||
Windows 10 x64
|
||||
</dd>
|
||||
<dt className="col-sm-5">
|
||||
Build
|
||||
</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">
|
||||
9876
|
||||
</dd>
|
||||
</dl>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-sm-5">
|
||||
Admin
|
||||
</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">
|
||||
John Malkovich
|
||||
</dd>
|
||||
<dt className="col-sm-5">
|
||||
Network
|
||||
</dt>
|
||||
<dd className="col-sm-7 text-right text-inverse">
|
||||
Wireless Network
|
||||
</dd>
|
||||
</dl>
|
||||
</Col>
|
||||
</Row>
|
||||
<Table hover className="mb-0" size="sm" responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="bt-0">
|
||||
Process
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
Read
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
Threads
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
CPU
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
GPU
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
Memory
|
||||
</th>
|
||||
<th scope="col" className="align-middle text-right bt-0">
|
||||
Tend
|
||||
</th>
|
||||
<th className="bt-0"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
Chrome
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
30MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
20
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
24%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
56%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
7.9GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr1">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr1">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr1">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
Photoshop
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
40MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
60
|
||||
</td>
|
||||
<td claclassNamess="align-middle text-right">
|
||||
25%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
10%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
1.1GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr2">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr2">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr2">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
Chrome
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
60MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
60
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
19%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
56%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
2.4GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr3">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr3">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr3">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
Safari
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
10MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
40
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
19%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
56%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
1.1GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr4">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr4">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr4">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
Chrome
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
30MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
10
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
27%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
27%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
9.1GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr5">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr5">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr5">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
<tr>
|
||||
<td className="align-middle text-nowrap">
|
||||
<i className="fa fa fa-window-maximize mr-1"></i>
|
||||
<span className="text-inverse">
|
||||
System
|
||||
</span>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
70MB/s
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
30
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
10%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
19%
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
8.8GB
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
||||
</td>
|
||||
<td className="align-middle text-right">
|
||||
<a href="#" id="tr6">
|
||||
<i className="fa fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
<UncontrolledTooltip placement="top" target="tr6">
|
||||
Show Details
|
||||
</UncontrolledTooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<UncontrolledCollapse toggler="#tr6">
|
||||
<tr>
|
||||
<td colSpan="8" className="bt-0">
|
||||
<samp className="small">{ faker.internet.ip() }</samp>
|
||||
</td>
|
||||
</tr>
|
||||
</UncontrolledCollapse>
|
||||
</tbody>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Reports'
|
||||
})(Reports);
|
||||
38
app/routes/Dashboards/Reports/components/TinyArcChart.js
Executable file
38
app/routes/Dashboards/Reports/components/TinyArcChart.js
Executable file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const data = [
|
||||
{name: 'Free', value: 40 },
|
||||
{name: 'Used', value: 60 },
|
||||
];
|
||||
|
||||
const COLORS = [ colors['light'], colors['primary'] ];
|
||||
const SIZE = 70;
|
||||
|
||||
const TinyArcChart = () => (
|
||||
<PieChart width={ SIZE } height={ SIZE / 2 } margin={{ bottom: 0, top: 0, left: 5, right: 5 }}>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
stroke="no"
|
||||
innerRadius={ SIZE / 2 * 0.7 }
|
||||
outerRadius={ SIZE / 2 }
|
||||
fill="#8884d8"
|
||||
startAngle={ 0 }
|
||||
endAngle={ 180 }
|
||||
cy="100%"
|
||||
>
|
||||
{
|
||||
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
|
||||
}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
);
|
||||
|
||||
export { TinyArcChart };
|
||||
21
app/routes/Dashboards/Reports/components/TinyAreaChart.js
Executable file
21
app/routes/Dashboards/Reports/components/TinyAreaChart.js
Executable file
@@ -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 };
|
||||
30
app/routes/Dashboards/Reports/components/TinyLineChart.js
Executable file
30
app/routes/Dashboards/Reports/components/TinyLineChart.js
Executable file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
Dot
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const data = _.times(20, () => ({ pv: Math.random() * 100 }));
|
||||
|
||||
const generateDot = ({stroke, ...other}) => (
|
||||
<Dot
|
||||
{ ...other }
|
||||
fill={ stroke }
|
||||
stroke={ colors['white'] }
|
||||
/>
|
||||
);
|
||||
|
||||
const TinyLineChart = () => (
|
||||
<ResponsiveContainer width='100%' height={ 40 }>
|
||||
<LineChart data={data}>
|
||||
<Line dataKey='pv' stroke={ colors['primary-07'] } strokeWidth={2} activeDot={{r: 5}} dot={generateDot} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
export { TinyLineChart };
|
||||
3
app/routes/Dashboards/Reports/index.js
Executable file
3
app/routes/Dashboards/Reports/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Reports from './Reports';
|
||||
|
||||
export default Reports;
|
||||
244
app/routes/Dashboards/Stock/Stock.js
Executable file
244
app/routes/Dashboards/Stock/Stock.js
Executable file
@@ -0,0 +1,244 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
Table,
|
||||
Badge,
|
||||
CardTitle,
|
||||
Nav,
|
||||
NavLink,
|
||||
NavItem,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
SimpleLineChart
|
||||
} from "../../components/Stock/SimpleLineChart"
|
||||
|
||||
import {
|
||||
TrTableSummary
|
||||
} from "../../components/Stock/TrTableSummary"
|
||||
|
||||
import {
|
||||
TrTableStock
|
||||
} from "../../components/Stock/TrTableStock"
|
||||
|
||||
import {
|
||||
TrTableFavStock
|
||||
} from "../../components/Stock/TrTableFavStock"
|
||||
|
||||
/*eslint-disable */
|
||||
const progressCompletion = [
|
||||
"25",
|
||||
"50",
|
||||
"75",
|
||||
"97"
|
||||
];
|
||||
/*eslint-enable */
|
||||
|
||||
const Stock = () => (
|
||||
<Container>
|
||||
<Row className="mb-2">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Stock"
|
||||
className="mb-4 mb-lg-4"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<Table responsive size="sm" className="mb-4 text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
Your 5
|
||||
</h4>
|
||||
Favourites Stocks
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
AAPL
|
||||
</h4>
|
||||
<span className="text-success">
|
||||
<i className="fa fa-caret-up mr-1"></i> 22.38
|
||||
</span> / 5.9%
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
MSFT
|
||||
</h4>
|
||||
<span className="text-danger">
|
||||
<i className="fa fa-caret-down mr-1"></i> 34.18
|
||||
</span> / 0.56%
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
CAT
|
||||
</h4>
|
||||
<span className="text-success">
|
||||
<i className="fa fa-caret-up mr-1"></i> 22.38
|
||||
</span> / 12.2%
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
TSLA
|
||||
</h4>
|
||||
<span className="text-success">
|
||||
<i className="fa fa-caret-up mr-1"></i> 31.03
|
||||
</span> / 3.2%
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
KN
|
||||
</h4>
|
||||
<span className="text-danger">
|
||||
<i className="fa fa-caret-down mr-1"></i> 34.18
|
||||
</span> / 0.56%
|
||||
</td>
|
||||
<td className="bt-0">
|
||||
<h4 className="mb-1">
|
||||
QZA
|
||||
</h4>
|
||||
<span className="text-danger">
|
||||
<i className="fa fa-caret-down mr-1"></i> 4.02
|
||||
</span> / 4.21%
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableFavStock />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
<Col lg={ 8 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<span className="d-flex mb-3">
|
||||
<CardTitle>
|
||||
<h6>Nokia Corp.
|
||||
<small>
|
||||
<span className="text-success ml-2">
|
||||
<i className="fa fa-caret-up mr-1"></i> 22.38
|
||||
</span> / 5.9%
|
||||
</small>
|
||||
</h6>
|
||||
</CardTitle>
|
||||
<Badge pill className="ml-auto align-self-start"> Score: 7.24 </Badge>
|
||||
</span>
|
||||
<div className="text-center">
|
||||
<SimpleLineChart />
|
||||
<div className="d-flex mt-4">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4 text-left text-sm-right">Open</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">$834.00</dd>
|
||||
<dt className="col-sm-4 text-left text-sm-right">High</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">$198.00</dd>
|
||||
<dt className="col-sm-4 text-left text-sm-right">Low</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">$575.00</dd>
|
||||
</dl>
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4 text-left text-sm-right">Market Cap</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">876.00B</dd>
|
||||
<dt className="col-sm-4 text-left text-sm-right">P/E ratio (ttm)</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">62.00</dd>
|
||||
<dt className="col-sm-4 text-left text-sm-right">Divided Yield</dt>
|
||||
<dd className="col-sm-8 text-left text-inverse">94.7%</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="pb-1">
|
||||
<Nav pills>
|
||||
<NavItem>
|
||||
<NavLink href="#" active>Summary</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">Key Stats</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</CardBody>
|
||||
<Table responsive striped className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0">Name</th>
|
||||
<th className="bt-0 text-right">2013</th>
|
||||
<th className="bt-0 text-right">2014</th>
|
||||
<th className="bt-0 text-right">TTM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableSummary />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="pb-1">
|
||||
<CardTitle className="mb-0">
|
||||
<h6>
|
||||
Cheap Stock
|
||||
</h6>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<Table responsive striped className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0 text-right">Price</th>
|
||||
<th className="bt-0 text-right">Score</th>
|
||||
<th className="bt-0 text-right">Q</th>
|
||||
<th className="bt-0 text-right">V</th>
|
||||
<th className="bt-0 text-right">G</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableStock />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="pb-1">
|
||||
<CardTitle className="mb-0">
|
||||
<h6>
|
||||
Expensive Stock
|
||||
</h6>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<Table responsive striped className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0 text-right">Price</th>
|
||||
<th className="bt-0 text-right">Score</th>
|
||||
<th className="bt-0 text-right">Q</th>
|
||||
<th className="bt-0 text-right">V</th>
|
||||
<th className="bt-0 text-right">G</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrTableStock />
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Stock'
|
||||
})(Stock);
|
||||
3
app/routes/Dashboards/Stock/index.js
Executable file
3
app/routes/Dashboards/Stock/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Stock from './Stock';
|
||||
|
||||
export default Stock;
|
||||
114
app/routes/Dashboards/System/System.js
Executable file
114
app/routes/Dashboards/System/System.js
Executable file
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Table,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import {
|
||||
CardSystem
|
||||
} from "./components/CardSystem"
|
||||
import {
|
||||
TrSystem
|
||||
} from "./components/trSystem"
|
||||
|
||||
const TrColors = [
|
||||
{
|
||||
fill: "primary-02",
|
||||
stroke: "primary"
|
||||
},
|
||||
{
|
||||
fill: "purple-02",
|
||||
stroke: "purple"
|
||||
},
|
||||
{
|
||||
fill: "success-02",
|
||||
stroke: "success"
|
||||
},
|
||||
{
|
||||
fill: "yellow-02",
|
||||
stroke: "yellow"
|
||||
}
|
||||
]
|
||||
|
||||
const System = () => (
|
||||
<Container>
|
||||
<Row className="mb-5">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="System"
|
||||
className="mb-4 mb-lg-5"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<CardSystem
|
||||
title="Memory"
|
||||
badgeColor="primary"
|
||||
pieColor="primary"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<CardSystem
|
||||
title="CPU"
|
||||
unit="Mb"
|
||||
badgeColor="purple"
|
||||
pieColor="purple"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<CardSystem
|
||||
title="Traffic"
|
||||
unit="Kb"
|
||||
badgeColor="success"
|
||||
pieColor="success"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<CardSystem
|
||||
title="Disk I/O"
|
||||
unit="Kb"
|
||||
pieColor="yellow"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 12 }>
|
||||
<h6 className="mt-5">Processes</h6>
|
||||
<p className="pb-3">
|
||||
{ faker.lorem.paragraphs() }
|
||||
</p>
|
||||
<Table responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Memory</th>
|
||||
<th>CPU</th>
|
||||
<th>Traffic</th>
|
||||
<th>Disk I/O</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrSystem
|
||||
colors={TrColors}
|
||||
/>
|
||||
<TrSystem
|
||||
colors={TrColors}
|
||||
/>
|
||||
<TrSystem
|
||||
colors={TrColors}
|
||||
/>
|
||||
<TrSystem
|
||||
colors={TrColors}
|
||||
/>
|
||||
<TrSystem
|
||||
colors={TrColors}
|
||||
/>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default System;
|
||||
78
app/routes/Dashboards/System/components/CardSystem.js
Executable file
78
app/routes/Dashboards/System/components/CardSystem.js
Executable file
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
Badge
|
||||
} from './../../../../components';
|
||||
|
||||
import {
|
||||
TinyDonutChart
|
||||
} from "./TinyDonutChart"
|
||||
import {
|
||||
TinyBarChart
|
||||
} from "./TinyBarChart"
|
||||
|
||||
import { randomArray } from './../../../../utilities';
|
||||
|
||||
const percents = [
|
||||
"15",
|
||||
"25",
|
||||
"30",
|
||||
"35",
|
||||
"40",
|
||||
"45",
|
||||
"55",
|
||||
"60",
|
||||
"75",
|
||||
"80",
|
||||
"95"
|
||||
];
|
||||
|
||||
const caret = [
|
||||
"down",
|
||||
"up"
|
||||
];
|
||||
|
||||
const CardSystem = (props) => (
|
||||
<Card className="mb-3 mb-lg-0">
|
||||
<CardBody className="pb-0">
|
||||
<div className="d-flex">
|
||||
<span>
|
||||
<Badge pill className="mb-3" color={ props.badgeColor } >
|
||||
<i className={` fa fa-fw fa-caret-${ randomArray(caret) }`} />
|
||||
{ randomArray(percents) }%
|
||||
</Badge>
|
||||
<h6 className="mb-0">
|
||||
{ props.title }
|
||||
</h6>
|
||||
<h2 className="mb-3">
|
||||
{ randomArray(percents) } <small>{ props.unit }</small>
|
||||
</h2>
|
||||
</span>
|
||||
<span className="text-right ml-auto">
|
||||
<TinyDonutChart
|
||||
pieColor={props.pieColor}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<TinyBarChart />
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
||||
CardSystem.propTypes = {
|
||||
title: PropTypes.node,
|
||||
badgeColor: PropTypes.string,
|
||||
unit: PropTypes.node,
|
||||
pieColor: PropTypes.string
|
||||
};
|
||||
CardSystem.defaultProps = {
|
||||
title: "Waiting...",
|
||||
badgeColor: "secondary",
|
||||
unit: "%",
|
||||
pieColor: "500"
|
||||
};
|
||||
|
||||
export { CardSystem };
|
||||
32
app/routes/Dashboards/System/components/TinyAreaChart.js
Executable file
32
app/routes/Dashboards/System/components/TinyAreaChart.js
Executable file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const TinyAreaChart = (props) => {
|
||||
const data = _.times(20, () => ({ pv: Math.random() * 100 }));
|
||||
return (
|
||||
<ResponsiveContainer width='100%' minWidth='150px' height={ 40 }>
|
||||
<AreaChart data={data}>
|
||||
<Area dataKey='pv' stroke={ colors[ props.strokeColor ] } fill={ colors[ props.fillColor ] } />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
};
|
||||
|
||||
TinyAreaChart.propTypes = {
|
||||
strokeColor: PropTypes.string,
|
||||
fillColor: PropTypes.string
|
||||
};
|
||||
TinyAreaChart.defaultProps = {
|
||||
strokeColor: "600",
|
||||
fillColor: "200",
|
||||
};
|
||||
|
||||
export { TinyAreaChart };
|
||||
31
app/routes/Dashboards/System/components/TinyBarChart.js
Executable file
31
app/routes/Dashboards/System/components/TinyBarChart.js
Executable file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
BarChart,
|
||||
Bar
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const TinyBarChart = (props) => {
|
||||
const data = _.times(40, () => ({ pv: 20+Math.random() * 100 }));
|
||||
return (
|
||||
<ResponsiveContainer width='100%' height={ 80 }>
|
||||
<BarChart data={data} margin={{ top: 0, bottom: 0, right: 0, left: 0 }}>
|
||||
<Bar dataKey='pv' fill={ colors[ props.barColor ] } />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
};
|
||||
|
||||
TinyBarChart.propTypes = {
|
||||
barColor: PropTypes.string
|
||||
};
|
||||
TinyBarChart.defaultProps = {
|
||||
barColor: "200"
|
||||
};
|
||||
|
||||
export { TinyBarChart };
|
||||
43
app/routes/Dashboards/System/components/TinyDonutChart.js
Executable file
43
app/routes/Dashboards/System/components/TinyDonutChart.js
Executable file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell
|
||||
} from './../../../../components/recharts';
|
||||
|
||||
import colors from './../../../../colors';
|
||||
|
||||
const TinyDonutChart = (props) => {
|
||||
const data = [
|
||||
{name: 'Group A', value: 40+Math.random()*100},
|
||||
{name: 'Group B', value: Math.random()*100}
|
||||
];
|
||||
return (
|
||||
<PieChart width={ 80 } height={ 80 }>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
stroke={ colors[ props.strokeColor ] }
|
||||
innerRadius={ 28 }
|
||||
outerRadius={ 35 }
|
||||
fill={ colors[ props.pieBg ] }
|
||||
>
|
||||
<Cell fill={ colors[ props.pieColor ] } />
|
||||
</Pie>
|
||||
</PieChart>
|
||||
)
|
||||
};
|
||||
|
||||
TinyDonutChart.propTypes = {
|
||||
pieColor: PropTypes.string,
|
||||
strokeColor: PropTypes.string,
|
||||
pieBg: PropTypes.string
|
||||
};
|
||||
TinyDonutChart.defaultProps = {
|
||||
pieColor: "primary",
|
||||
strokeColor: "white",
|
||||
pieBg: "200"
|
||||
};
|
||||
|
||||
export { TinyDonutChart };
|
||||
132
app/routes/Dashboards/System/components/trSystem.js
Executable file
132
app/routes/Dashboards/System/components/trSystem.js
Executable file
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
Progress,
|
||||
Badge
|
||||
} from './../../../../components';
|
||||
|
||||
import {
|
||||
TinyAreaChart
|
||||
} from "./TinyAreaChart"
|
||||
|
||||
import { randomArray } from './../../../../utilities';
|
||||
|
||||
const percents = [
|
||||
"15",
|
||||
"25",
|
||||
"30",
|
||||
"35",
|
||||
"40",
|
||||
"45",
|
||||
"55",
|
||||
"60",
|
||||
"75",
|
||||
"80",
|
||||
"95"
|
||||
];
|
||||
|
||||
const versions = [
|
||||
"1.10",
|
||||
"1.34",
|
||||
"2.35",
|
||||
"0.23",
|
||||
"2.90",
|
||||
"9.05"
|
||||
];
|
||||
|
||||
const name = [
|
||||
"Apache",
|
||||
"Postfix",
|
||||
"Ruby R1",
|
||||
"MySQL",
|
||||
"Ruby R2"
|
||||
];
|
||||
|
||||
const gbLeft = [
|
||||
"2,234",
|
||||
"6,738",
|
||||
"982",
|
||||
"9,001",
|
||||
"1,329"
|
||||
];
|
||||
|
||||
const tdValue = [
|
||||
"783",
|
||||
"45",
|
||||
"4",
|
||||
"190",
|
||||
"65"
|
||||
];
|
||||
|
||||
const tdUnits = [
|
||||
"",
|
||||
"Mb",
|
||||
"%",
|
||||
"Kb/s"
|
||||
];
|
||||
|
||||
const TrSystem = (props) => (
|
||||
<tr>
|
||||
<td style={{ width: '20%' }}>
|
||||
<span className="d-flex mb-2">
|
||||
<h6 className="mb-0 mr-5">
|
||||
{ randomArray(name) }
|
||||
</h6>
|
||||
<Badge pill className="ml-auto align-self-center">
|
||||
v. { randomArray(versions) }
|
||||
</Badge>
|
||||
</span>
|
||||
<Progress value={ randomArray(percents) } style={{height: "4px"}} className="mb-2" />
|
||||
<span className="d-flex">
|
||||
<span className="text-inverse">
|
||||
{ randomArray(percents) }%
|
||||
</span>
|
||||
<span className="ml-auto text-right">
|
||||
{ randomArray(gbLeft) } GB Left
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
{
|
||||
_.map(props.colors, (color,index)=>(
|
||||
<td style={{ width: '20%' }} key={index}>
|
||||
<h6 className="mb-0">
|
||||
{ randomArray(tdValue) } {tdUnits[index]}
|
||||
</h6>
|
||||
<TinyAreaChart
|
||||
strokeColor={color.stroke}
|
||||
fillColor={color.fill}
|
||||
/>
|
||||
</td>
|
||||
))
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
|
||||
TrSystem.propTypes = {
|
||||
title: PropTypes.node,
|
||||
|
||||
colors: PropTypes.array
|
||||
};
|
||||
TrSystem.defaultProps = {
|
||||
colors: [
|
||||
{
|
||||
fill: "400",
|
||||
stroke: "primary"
|
||||
},
|
||||
{
|
||||
fill: "yellow",
|
||||
stroke: "400"
|
||||
},
|
||||
{
|
||||
fill: "purple",
|
||||
stroke: "info"
|
||||
},
|
||||
{
|
||||
fill: "success",
|
||||
stroke: "500"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export { TrSystem };
|
||||
3
app/routes/Dashboards/System/index.js
Executable file
3
app/routes/Dashboards/System/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import System from './System';
|
||||
|
||||
export default System;
|
||||
31
app/routes/Dashboards/components/TinyLineChart.js
Executable file
31
app/routes/Dashboards/components/TinyLineChart.js
Executable file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
Dot
|
||||
} from './../../../components/recharts';
|
||||
|
||||
import colors from './../../../colors';
|
||||
|
||||
const data = _.times(20, () => ({ pv: Math.random() * 100 }));
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const generateDot = ({stroke, ...other}) => (
|
||||
<Dot
|
||||
{ ...other }
|
||||
fill={ stroke }
|
||||
stroke={ colors['white'] }
|
||||
/>
|
||||
);
|
||||
|
||||
const TinyLineChart = () => (
|
||||
<ResponsiveContainer width='100%' height={ 40 }>
|
||||
<LineChart data={data}>
|
||||
<Line dataKey='pv' stroke={ colors['primary-07'] } strokeWidth={2} activeDot={{r: 5}} dot={generateDot} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
export { TinyLineChart };
|
||||
154
app/routes/Forms/DatePicker/DatePickerExamples.js
Executable file
154
app/routes/Forms/DatePicker/DatePickerExamples.js
Executable file
@@ -0,0 +1,154 @@
|
||||
import React from 'react';
|
||||
import DatePicker, { setDefaultLocale } from 'react-datepicker';
|
||||
import moment from 'moment';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
Col,
|
||||
CardBody
|
||||
} from './../../../components';
|
||||
import { Example, ButtonInput, AddonInput } from './components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
setDefaultLocale('en');
|
||||
|
||||
export class DatePickerExamples extends React.Component {
|
||||
state = {
|
||||
startDate: moment().toDate(),
|
||||
endDate: moment().add(5, 'days').toDate()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Date Picker"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<p className="mb-4">
|
||||
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies
|
||||
aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view.
|
||||
You will also need to require the CSS file from this package (or provide your own).
|
||||
The example below shows how to include the CSS from this package if your build system supports
|
||||
requiring CSS files (Webpack is one that does).
|
||||
</p>
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
{ /* START Card */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<Example
|
||||
title="Default"
|
||||
no="1.01"
|
||||
exampleInput={(
|
||||
<DatePicker
|
||||
customInput={ <ButtonInput /> }
|
||||
selected={this.state.startDate}
|
||||
onChange={this._handleChangeStart}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{
|
||||
'<DatePicker\n' +
|
||||
' selected={this.state.startDate}\n' +
|
||||
' onChange={this._handleChange}\n' +
|
||||
'/>'
|
||||
}
|
||||
</Example>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
{ /* START Card */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<Example
|
||||
title="Inline"
|
||||
no="1.02"
|
||||
exampleInput={(
|
||||
<DatePicker
|
||||
inline
|
||||
selected={this.state.startDate}
|
||||
onChange={this._handleChangeStart}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{
|
||||
'<DatePicker\n' +
|
||||
' inline\n' +
|
||||
' selected={this.state.startDate}\n' +
|
||||
' onChange={this._handleChange}\n' +
|
||||
'/>'
|
||||
}
|
||||
</Example>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
</Col>
|
||||
<Col lg={ 8 }>
|
||||
{ /* START Card */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Example
|
||||
title="Range"
|
||||
no="1.03"
|
||||
exampleInput={(
|
||||
<div className="d-flex">
|
||||
<DatePicker
|
||||
customInput={ <AddonInput /> }
|
||||
selected={this.state.startDate}
|
||||
selectsStart
|
||||
startDate={this.state.startDate}
|
||||
endDate={this.state.endDate}
|
||||
onChange={this._handleChangeStart}
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
className="ml-2"
|
||||
customInput={ <AddonInput /> }
|
||||
selected={this.state.endDate}
|
||||
selectsEnd
|
||||
startDate={this.state.startDate}
|
||||
endDate={this.state.endDate}
|
||||
onChange={this._handleChangeEnd}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{
|
||||
'<DatePicker\n' +
|
||||
' selected={this.state.startDate}\n' +
|
||||
' selectsStart\n' +
|
||||
' startDate={this.state.startDate}\n' +
|
||||
' endDate={this.state.endDate}\n' +
|
||||
' onChange={this.handleChangeStart}\n' +
|
||||
'/>\n' +
|
||||
'\n' +
|
||||
'<DatePicker\n' +
|
||||
' selected={this.state.endDate}\n' +
|
||||
' selectsEnd\n' +
|
||||
' startDate={this.state.startDate}\n' +
|
||||
' endDate={this.state.endDate}\n' +
|
||||
' onChange={this.handleChangeEnd}\n' +
|
||||
'/>\n'
|
||||
}
|
||||
</Example>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
_handleChangeStart = (startDate) => (
|
||||
this.setState({ startDate })
|
||||
)
|
||||
|
||||
_handleChangeEnd = (endDate) => (
|
||||
this.setState({ endDate })
|
||||
)
|
||||
}
|
||||
31
app/routes/Forms/DatePicker/components/AddonInput.js
Executable file
31
app/routes/Forms/DatePicker/components/AddonInput.js
Executable file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input
|
||||
} from './../../../../components';
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const AddonInputFR = React.forwardRef((props, ref) => (
|
||||
<InputGroup className={props.className}>
|
||||
<InputGroupAddon addonType="prepend">
|
||||
<i className="fa fa-calendar-o"></i>
|
||||
</InputGroupAddon>
|
||||
<Input
|
||||
onClick={ props.onClick }
|
||||
onChange={ props.onChange }
|
||||
value={ props.value }
|
||||
ref={ ref }
|
||||
/>
|
||||
</InputGroup>
|
||||
));
|
||||
AddonInputFR.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
}
|
||||
|
||||
export { AddonInputFR as AddonInput };
|
||||
23
app/routes/Forms/DatePicker/components/ButtonInput.js
Executable file
23
app/routes/Forms/DatePicker/components/ButtonInput.js
Executable file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Button
|
||||
} from './../../../../components';
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const ButtonInputFR = React.forwardRef((props, ref) => (
|
||||
<Button outline
|
||||
onClick={props.onClick}
|
||||
ref={ref}
|
||||
>
|
||||
<i className="fa fa-fw fa-calendar-o mr-1" />
|
||||
{ props.value }
|
||||
</Button>
|
||||
));
|
||||
ButtonInputFR.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
value: PropTypes.string
|
||||
}
|
||||
|
||||
export { ButtonInputFR as ButtonInput };
|
||||
50
app/routes/Forms/DatePicker/components/Example.js
Executable file
50
app/routes/Forms/DatePicker/components/Example.js
Executable file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
FormGroup,
|
||||
Label
|
||||
} from './../../../../components';
|
||||
|
||||
export const Example = ({ title, exampleInput, children, no }) => (
|
||||
<Row>
|
||||
<Col sm={ 12 }>
|
||||
<h6>
|
||||
{ title }
|
||||
<span className="small ml-1 text-muted">
|
||||
#{ no }
|
||||
</span>
|
||||
</h6>
|
||||
</Col>
|
||||
<Col md={ 12 }>
|
||||
<FormGroup>
|
||||
<Label>
|
||||
Example
|
||||
</Label>
|
||||
<div>
|
||||
{ exampleInput }
|
||||
</div>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={ 12 }>
|
||||
<FormGroup>
|
||||
<Label>
|
||||
Code
|
||||
</Label>
|
||||
<pre>
|
||||
<code>
|
||||
{ children }
|
||||
</code>
|
||||
</pre>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
Example.propTypes = {
|
||||
exampleInput: PropTypes.node.isRequired,
|
||||
children: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
no: PropTypes.node.isRequired
|
||||
}
|
||||
3
app/routes/Forms/DatePicker/components/index.js
Executable file
3
app/routes/Forms/DatePicker/components/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
export * from './Example';
|
||||
export * from './ButtonInput';
|
||||
export * from './AddonInput';
|
||||
3
app/routes/Forms/DatePicker/index.js
Executable file
3
app/routes/Forms/DatePicker/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { DatePickerExamples } from './DatePickerExamples';
|
||||
|
||||
export default DatePickerExamples;
|
||||
134
app/routes/Forms/Dropzone/Dropzone.js
Executable file
134
app/routes/Forms/Dropzone/Dropzone.js
Executable file
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import FileDrop from 'react-dropzone';
|
||||
import _ from 'lodash';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Divider,
|
||||
Badge,
|
||||
Button,
|
||||
ButtonGroup
|
||||
} from './../../../components';
|
||||
import {
|
||||
FilesGrid,
|
||||
FilesList
|
||||
} from './components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
export class Dropzone extends React.Component {
|
||||
state = {
|
||||
isOver: false,
|
||||
files: [],
|
||||
listStyle: 'grid'
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isOver, files, listStyle } = this.state;
|
||||
const dropzoneClass = classNames({
|
||||
'dropzone--active': isOver
|
||||
}, 'dropzone');
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Dropzone"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* DropZone */ }
|
||||
<div className="mb-4">
|
||||
<p className="mb-3">
|
||||
Simple HTML5-compliant drag'n'drop zone for files built with React.js.
|
||||
</p>
|
||||
<FileDrop
|
||||
multiple
|
||||
onDragEnter={() => { this.setState({isOver: true}) }}
|
||||
onDragLeave={() => { this.setState({isOver: false}) }}
|
||||
onDrop={this._filesDropped}
|
||||
>
|
||||
{
|
||||
({ getRootProps, getInputProps }) => (
|
||||
<div {...getRootProps()} className={dropzoneClass}>
|
||||
<i className="fa fa-cloud-upload fa-fw fa-3x mb-3"></i>
|
||||
<h5 className='mt-0'>
|
||||
Upload Your files
|
||||
</h5>
|
||||
<p>
|
||||
Drag a file here or <span className='text-primary'>browse</span> for a file to upload.
|
||||
</p>
|
||||
<p className="small">
|
||||
JPG, GIF, PNG, MOV, and AVI. Please choose files under 2GB for upload. File sizes are 400x300px.
|
||||
</p>
|
||||
<input { ...getInputProps() } />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</FileDrop>
|
||||
</div>
|
||||
{ /* Files List */}
|
||||
{
|
||||
files.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="d-flex">
|
||||
<Divider
|
||||
position="left"
|
||||
className="flex-shrink-1 flex-grow-1"
|
||||
>
|
||||
<div className="px-2">
|
||||
Attachments
|
||||
|
||||
<Badge
|
||||
className="ml-1 text-white"
|
||||
pill
|
||||
color="secondary"
|
||||
>
|
||||
{ files.length }
|
||||
</Badge>
|
||||
</div>
|
||||
</Divider>
|
||||
<ButtonGroup className="flex-grow-0 flex-shrink-0 pl-2">
|
||||
<Button
|
||||
active={ listStyle === 'list' }
|
||||
onClick={() => {this.setState({listStyle: 'list'})}}
|
||||
size="sm"
|
||||
outline
|
||||
>
|
||||
<i className='fa fa-bars fa-fw'></i>
|
||||
</Button>
|
||||
<Button
|
||||
active={ listStyle === 'grid' }
|
||||
onClick={() => {this.setState({listStyle: 'grid'})}}
|
||||
size="sm"
|
||||
outline
|
||||
>
|
||||
<i className='fa fa-th-large fa-fw'></i>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
{
|
||||
listStyle === 'grid' ?
|
||||
<FilesGrid files={ files } onFileRemove={this._removeFile} /> :
|
||||
<FilesList files={ files } onFileRemove={this._removeFile} />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
_filesDropped = (files) => {
|
||||
this.setState({
|
||||
files: [...this.state.files, ...files],
|
||||
isOver: false
|
||||
})
|
||||
}
|
||||
|
||||
_removeFile = (file) => {
|
||||
this.setState({
|
||||
files: _.reject(this.state.files, file)
|
||||
})
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user