304 lines
12 KiB
JavaScript
Executable File
304 lines
12 KiB
JavaScript
Executable File
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); |