Tomasz Owczarczyk
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);
|
||||
Reference in New Issue
Block a user