mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-06 20:29:46 +00:00
These are all the files from the Tabler react repos, made to work with laravel and webpack.
This commit is contained in:
James Cole
925
resources/js/HomePage.react.js
vendored
Normal file
925
resources/js/HomePage.react.js
vendored
Normal file
@@ -0,0 +1,925 @@
|
||||
// @flow
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
import {
|
||||
Page,
|
||||
Avatar,
|
||||
Icon,
|
||||
Grid,
|
||||
Card,
|
||||
Text,
|
||||
Table,
|
||||
Alert,
|
||||
Progress,
|
||||
colors,
|
||||
Dropdown,
|
||||
Button,
|
||||
StampCard,
|
||||
StatsCard,
|
||||
ProgressCard,
|
||||
Badge,
|
||||
} from "tabler-react";
|
||||
|
||||
import C3Chart from "react-c3js";
|
||||
|
||||
import SiteWrapper from "./SiteWrapper.react";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<SiteWrapper>
|
||||
<Page.Content title="Dashboard">
|
||||
<Grid.Row cards={true}>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard layout={1} movement={6} total="43" label="New Tickets" />
|
||||
</Grid.Col>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard
|
||||
layout={1}
|
||||
movement={-3}
|
||||
total="17"
|
||||
label="Closed Today"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard layout={1} movement={9} total="7" label="New Replies" />
|
||||
</Grid.Col>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard
|
||||
layout={1}
|
||||
movement={3}
|
||||
total="27.3k"
|
||||
label="Followers"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard
|
||||
layout={1}
|
||||
movement={-2}
|
||||
total="$95"
|
||||
label="Daily earnings"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col width={6} sm={4} lg={2}>
|
||||
<StatsCard layout={1} movement={-1} total="621" label="Products" />
|
||||
</Grid.Col>
|
||||
<Grid.Col lg={6}>
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<Card.Title>Development Activity</Card.Title>
|
||||
</Card.Header>
|
||||
<C3Chart
|
||||
style={{ height: "10rem" }}
|
||||
data={{
|
||||
columns: [
|
||||
// each columns data
|
||||
[
|
||||
"data1",
|
||||
0,
|
||||
5,
|
||||
1,
|
||||
2,
|
||||
7,
|
||||
5,
|
||||
6,
|
||||
8,
|
||||
24,
|
||||
7,
|
||||
12,
|
||||
5,
|
||||
6,
|
||||
3,
|
||||
2,
|
||||
2,
|
||||
6,
|
||||
30,
|
||||
10,
|
||||
10,
|
||||
15,
|
||||
14,
|
||||
47,
|
||||
65,
|
||||
55,
|
||||
],
|
||||
],
|
||||
type: "area", // default type of chart
|
||||
groups: [["data1", "data2", "data3"]],
|
||||
colors: {
|
||||
data1: colors["blue"],
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
data1: "Purchases",
|
||||
},
|
||||
}}
|
||||
axis={{
|
||||
y: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
show: false,
|
||||
tick: {
|
||||
outer: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
legend={{
|
||||
position: "inset",
|
||||
padding: 0,
|
||||
inset: {
|
||||
anchor: "top-left",
|
||||
x: 20,
|
||||
y: 8,
|
||||
step: 10,
|
||||
},
|
||||
}}
|
||||
tooltip={{
|
||||
format: {
|
||||
title: function(x) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}}
|
||||
padding={{
|
||||
bottom: 0,
|
||||
left: -1,
|
||||
right: -1,
|
||||
}}
|
||||
point={{
|
||||
show: false,
|
||||
}}
|
||||
/>
|
||||
<Table
|
||||
cards={true}
|
||||
striped={true}
|
||||
responsive={true}
|
||||
className="table-vcenter"
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColHeader colSpan={2}>User</Table.ColHeader>
|
||||
<Table.ColHeader>Commit</Table.ColHeader>
|
||||
<Table.ColHeader>Date</Table.ColHeader>
|
||||
<Table.ColHeader />
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Col className="w-1">
|
||||
<Avatar imageURL="./demo/faces/male/9.jpg" />
|
||||
</Table.Col>
|
||||
<Table.Col>Ronald Bradley</Table.Col>
|
||||
<Table.Col>Initial commit</Table.Col>
|
||||
<Table.Col className="text-nowrap">May 6, 2018</Table.Col>
|
||||
<Table.Col className="w-1">
|
||||
<Icon link={true} name="trash" />
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Col>
|
||||
<Avatar>BM</Avatar>
|
||||
</Table.Col>
|
||||
<Table.Col>Russell Gibson</Table.Col>
|
||||
<Table.Col>Main structure</Table.Col>
|
||||
<Table.Col className="text-nowrap">
|
||||
April 22, 2018
|
||||
</Table.Col>
|
||||
<Table.Col>
|
||||
<Icon link={true} name="trash" />
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Col>
|
||||
<Avatar imageURL="./demo/faces/female/1.jpg" />
|
||||
</Table.Col>
|
||||
<Table.Col>Beverly Armstrong</Table.Col>
|
||||
<Table.Col>Left sidebar adjustments</Table.Col>
|
||||
<Table.Col className="text-nowrap">
|
||||
April 15, 2018
|
||||
</Table.Col>
|
||||
<Table.Col>
|
||||
<Icon link={true} name="trash" />
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Col>
|
||||
<Avatar imageURL="./demo/faces/male/4.jpg" />
|
||||
</Table.Col>
|
||||
<Table.Col>Bobby Knight</Table.Col>
|
||||
<Table.Col>Topbar dropdown style</Table.Col>
|
||||
<Table.Col className="text-nowrap">April 8, 2018</Table.Col>
|
||||
<Table.Col>
|
||||
<Icon link={true} name="trash" />
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Col>
|
||||
<Avatar imageURL="./demo/faces/female/11.jpg" />
|
||||
</Table.Col>
|
||||
<Table.Col>Sharon Wells</Table.Col>
|
||||
<Table.Col>Fixes #625</Table.Col>
|
||||
<Table.Col className="text-nowrap">April 9, 2018</Table.Col>
|
||||
<Table.Col>
|
||||
<Icon link={true} name="trash" />
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col md={6}>
|
||||
<Alert type="primary">
|
||||
<Alert.Link
|
||||
href={
|
||||
process.env.NODE_ENV === "production"
|
||||
? "https://tabler.github.io/tabler-react/documentation"
|
||||
: "/documentation"
|
||||
}
|
||||
>
|
||||
Read our documentation
|
||||
</Alert.Link>{" "}
|
||||
with code samples.
|
||||
</Alert>
|
||||
<Grid.Row>
|
||||
<Grid.Col sm={6}>
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<Card.Title>Chart title</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<C3Chart
|
||||
style={{ height: "12rem" }}
|
||||
data={{
|
||||
columns: [
|
||||
// each columns data
|
||||
["data1", 63],
|
||||
["data2", 37],
|
||||
],
|
||||
type: "donut", // default type of chart
|
||||
colors: {
|
||||
data1: colors["green"],
|
||||
data2: colors["green-light"],
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
data1: "Maximum",
|
||||
data2: "Minimum",
|
||||
},
|
||||
}}
|
||||
legend={{
|
||||
show: false, //hide legend
|
||||
}}
|
||||
padding={{
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6}>
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<Card.Title>Chart title</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<C3Chart
|
||||
style={{ height: "12rem" }}
|
||||
data={{
|
||||
columns: [
|
||||
// each columns data
|
||||
["data1", 63],
|
||||
["data2", 44],
|
||||
["data3", 12],
|
||||
["data4", 14],
|
||||
],
|
||||
type: "pie", // default type of chart
|
||||
colors: {
|
||||
data1: colors["blue-darker"],
|
||||
data2: colors["blue"],
|
||||
data3: colors["blue-light"],
|
||||
data4: colors["blue-lighter"],
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
data1: "A",
|
||||
data2: "B",
|
||||
data3: "C",
|
||||
data4: "D",
|
||||
},
|
||||
}}
|
||||
legend={{
|
||||
show: false, //hide legend
|
||||
}}
|
||||
padding={{
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6}>
|
||||
<ProgressCard
|
||||
header="New feedback"
|
||||
content="62"
|
||||
progressColor="red"
|
||||
progressWidth={28}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6}>
|
||||
<ProgressCard
|
||||
header="Today profit"
|
||||
content="$652"
|
||||
progressColor="green"
|
||||
progressWidth={84}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6}>
|
||||
<ProgressCard
|
||||
header="Users online"
|
||||
content="76"
|
||||
progressColor="yellow"
|
||||
progressWidth={34}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StampCard
|
||||
color="blue"
|
||||
icon="dollar-sign"
|
||||
header={
|
||||
<a href="#">
|
||||
132 <small>Sales</small>
|
||||
</a>
|
||||
}
|
||||
footer={"12 waiting payments"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StampCard
|
||||
color="green"
|
||||
icon="shopping-cart"
|
||||
header={
|
||||
<a href="#">
|
||||
78 <small>Orders</small>
|
||||
</a>
|
||||
}
|
||||
footer={"32 shipped"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StampCard
|
||||
color="red"
|
||||
icon="users"
|
||||
header={
|
||||
<a href="#">
|
||||
1,352 <small>Members</small>
|
||||
</a>
|
||||
}
|
||||
footer={"163 registered today"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StampCard
|
||||
color="yellow"
|
||||
icon="message-square"
|
||||
header={
|
||||
<a href="#">
|
||||
132 <small>Comments</small>
|
||||
</a>
|
||||
}
|
||||
footer={"16 waiting"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
<Grid.Row cards deck>
|
||||
<Grid.Col width={12}>
|
||||
<Card>
|
||||
<Table
|
||||
responsive
|
||||
highlightRowOnHover
|
||||
hasOutline
|
||||
verticalAlign="center"
|
||||
cards
|
||||
className="text-nowrap"
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColHeader alignContent="center" className="w-1">
|
||||
<i className="icon-people" />
|
||||
</Table.ColHeader>
|
||||
<Table.ColHeader>User</Table.ColHeader>
|
||||
<Table.ColHeader>Usage</Table.ColHeader>
|
||||
<Table.ColHeader alignContent="center">
|
||||
Payment
|
||||
</Table.ColHeader>
|
||||
<Table.ColHeader>Activity</Table.ColHeader>
|
||||
<Table.ColHeader alignContent="center">
|
||||
Satisfaction
|
||||
</Table.ColHeader>
|
||||
<Table.ColHeader alignContent="center">
|
||||
<i className="icon-settings" />
|
||||
</Table.ColHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Col alignContent="center">
|
||||
<Avatar
|
||||
imageURL="demo/faces/female/26.jpg"
|
||||
className="d-block"
|
||||
status="green"
|
||||
/>
|
||||
</Table.Col>
|
||||
<Table.Col>
|
||||
<div>Elizabeth Martin</div>
|
||||
<Text size="sm" muted>
|
||||
Registered: Mar 19, 2018
|
||||
</Text>
|
||||
</Table.Col>
|
||||
<Table.Col>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<strong>42%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<Text.Small muted>
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</Text.Small>
|
||||
</div>
|
||||
</div>
|
||||
<Progress size="xs">
|
||||
<Progress.Bar color="yellow" width={42} />
|
||||
</Progress>
|
||||
</Table.Col>
|
||||
<Table.Col alignContent="center">
|
||||
<Icon payment name="visa" />
|
||||
</Table.Col>
|
||||
<Table.Col>
|
||||
<Text size="sm" muted>
|
||||
Last login
|
||||
</Text>
|
||||
<div>4 minutes ago</div>
|
||||
</Table.Col>
|
||||
<Table.Col alignContent="center">42%</Table.Col>
|
||||
<Table.Col alignContent="center">
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Dropdown.Trigger
|
||||
icon="more-vertical"
|
||||
toggle={false}
|
||||
/>
|
||||
}
|
||||
position="right"
|
||||
items={
|
||||
<React.Fragment>
|
||||
<Dropdown.Item icon="tag">Action </Dropdown.Item>
|
||||
<Dropdown.Item icon="edit-2">
|
||||
Another action{" "}
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item icon="message-square">
|
||||
Something else here
|
||||
</Dropdown.Item>
|
||||
<Dropdown.ItemDivider />
|
||||
<Dropdown.Item icon="link">
|
||||
{" "}
|
||||
Separated link
|
||||
</Dropdown.Item>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Col sm={6} lg={4}>
|
||||
<Card title="Browser Stats">
|
||||
<Table className="card-table">
|
||||
<Table.Row>
|
||||
<Table.Col>
|
||||
<Icon prefix="fa" name="chrome" className="text-muted" />
|
||||
</Table.Col>
|
||||
<Table.Col>Google Chrome</Table.Col>
|
||||
<Table.Col className="text-right">
|
||||
<Text RootComponent="span" muted>
|
||||
23%
|
||||
</Text>
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
</Table>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={4}>
|
||||
<Card title="Projects">
|
||||
<Table cards>
|
||||
<Table.Row>
|
||||
<Table.Col>Admin Template</Table.Col>
|
||||
<Table.Col alignContent="right">
|
||||
<Badge color="default">65%</Badge>
|
||||
</Table.Col>
|
||||
</Table.Row>
|
||||
</Table>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col md={6} lg={4}>
|
||||
<Card title="Members">
|
||||
<Card.Body>
|
||||
<ul className="list-unstyled list-separated">
|
||||
<li className="list-separated-item">
|
||||
<Grid.Row className="align-items-center">
|
||||
<Grid.Col auto>
|
||||
<Avatar
|
||||
size="md"
|
||||
className="d-block"
|
||||
imageURL="demo/faces/female/12.jpg"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col>
|
||||
<div>
|
||||
<a className="text-inherit" href="#">
|
||||
Amanda Hunt
|
||||
</a>
|
||||
</div>
|
||||
<Text.Small muted className="d-block item-except h-1x">
|
||||
amanda_hunt@example.com
|
||||
</Text.Small>
|
||||
</Grid.Col>
|
||||
<Grid.Col auto>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Dropdown.Trigger
|
||||
icon="more-vertical"
|
||||
toggle={false}
|
||||
/>
|
||||
}
|
||||
position="right"
|
||||
items={
|
||||
<React.Fragment>
|
||||
<Dropdown.Item icon="tag">Action </Dropdown.Item>
|
||||
<Dropdown.Item icon="edit-2">
|
||||
{" "}
|
||||
Another action{" "}
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item icon="message-square">
|
||||
{" "}
|
||||
Something else here
|
||||
</Dropdown.Item>
|
||||
<Dropdown.ItemDivider />
|
||||
<Dropdown.Item icon="link">
|
||||
{" "}
|
||||
Separated link
|
||||
</Dropdown.Item>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</li>
|
||||
</ul>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col md={6} lg={12}>
|
||||
<Grid.Row>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StatsCard
|
||||
layout={2}
|
||||
movement={5}
|
||||
total="423"
|
||||
label="Users online"
|
||||
chart={
|
||||
<C3Chart
|
||||
style={{ height: "100%" }}
|
||||
padding={{
|
||||
bottom: -10,
|
||||
left: -1,
|
||||
right: -1,
|
||||
}}
|
||||
data={{
|
||||
names: {
|
||||
data1: "Users online",
|
||||
},
|
||||
columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
|
||||
type: "area",
|
||||
}}
|
||||
legend={{
|
||||
show: false,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0,
|
||||
}}
|
||||
point={{
|
||||
show: false,
|
||||
}}
|
||||
tooltip={{
|
||||
format: {
|
||||
title: function(x) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}}
|
||||
axis={{
|
||||
y: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
show: false,
|
||||
tick: {
|
||||
outer: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
pattern: ["#467fcf"],
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StatsCard
|
||||
layout={2}
|
||||
movement={-3}
|
||||
total="423"
|
||||
label="Users online"
|
||||
chart={
|
||||
<C3Chart
|
||||
style={{ height: "100%" }}
|
||||
padding={{
|
||||
bottom: -10,
|
||||
left: -1,
|
||||
right: -1,
|
||||
}}
|
||||
data={{
|
||||
names: {
|
||||
data1: "Users online",
|
||||
},
|
||||
columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
|
||||
type: "area",
|
||||
}}
|
||||
legend={{
|
||||
show: false,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0,
|
||||
}}
|
||||
point={{
|
||||
show: false,
|
||||
}}
|
||||
tooltip={{
|
||||
format: {
|
||||
title: function(x) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}}
|
||||
axis={{
|
||||
y: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
show: false,
|
||||
tick: {
|
||||
outer: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
pattern: ["#e74c3c"],
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StatsCard
|
||||
layout={2}
|
||||
movement={-3}
|
||||
total="423"
|
||||
label="Users online"
|
||||
chart={
|
||||
<C3Chart
|
||||
style={{ height: "100%" }}
|
||||
padding={{
|
||||
bottom: -10,
|
||||
left: -1,
|
||||
right: -1,
|
||||
}}
|
||||
data={{
|
||||
names: {
|
||||
data1: "Users online",
|
||||
},
|
||||
columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
|
||||
type: "area",
|
||||
}}
|
||||
legend={{
|
||||
show: false,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0,
|
||||
}}
|
||||
point={{
|
||||
show: false,
|
||||
}}
|
||||
tooltip={{
|
||||
format: {
|
||||
title: function(x) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}}
|
||||
axis={{
|
||||
y: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
show: false,
|
||||
tick: {
|
||||
outer: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
pattern: ["#5eba00"],
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col sm={6} lg={3}>
|
||||
<StatsCard
|
||||
layout={2}
|
||||
movement={9}
|
||||
total="423"
|
||||
label="Users online"
|
||||
chart={
|
||||
<C3Chart
|
||||
style={{ height: "100%" }}
|
||||
padding={{
|
||||
bottom: -10,
|
||||
left: -1,
|
||||
right: -1,
|
||||
}}
|
||||
data={{
|
||||
names: {
|
||||
data1: "Users online",
|
||||
},
|
||||
columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
|
||||
type: "area",
|
||||
}}
|
||||
legend={{
|
||||
show: false,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0,
|
||||
}}
|
||||
point={{
|
||||
show: false,
|
||||
}}
|
||||
tooltip={{
|
||||
format: {
|
||||
title: function(x) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}}
|
||||
axis={{
|
||||
y: {
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
show: false,
|
||||
tick: {
|
||||
outer: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
pattern: ["#f1c40f"],
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Grid.Col>
|
||||
<Grid.Col width={12}>
|
||||
<Card title="Invoices">
|
||||
<Table
|
||||
responsive
|
||||
className="card-table table-vcenter text-nowrap"
|
||||
headerItems={[
|
||||
{ content: "No.", className: "w-1" },
|
||||
{ content: "Invoice Subject" },
|
||||
{ content: "Client" },
|
||||
{ content: "VAT No." },
|
||||
{ content: "Created" },
|
||||
{ content: "Status" },
|
||||
{ content: "Price" },
|
||||
{ content: null },
|
||||
{ content: null },
|
||||
]}
|
||||
bodyItems={[
|
||||
{
|
||||
key: "1",
|
||||
item: [
|
||||
{
|
||||
content: (
|
||||
<Text RootComponent="span" muted>
|
||||
001401
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
content: (
|
||||
<a href="invoice.html" className="text-inherit">
|
||||
Design Works
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{ content: "Carlson Limited" },
|
||||
{ content: "87956621" },
|
||||
{ content: "15 Dec 2017" },
|
||||
{
|
||||
content: (
|
||||
<React.Fragment>
|
||||
<span className="status-icon bg-success" /> Paid
|
||||
</React.Fragment>
|
||||
),
|
||||
},
|
||||
{ content: "$887" },
|
||||
{
|
||||
alignContent: "right",
|
||||
content: (
|
||||
<React.Fragment>
|
||||
<Button size="sm" color="secondary">
|
||||
Manage
|
||||
</Button>
|
||||
<div className="dropdown">
|
||||
<Button
|
||||
color="secondary"
|
||||
size="sm"
|
||||
isDropdownToggle
|
||||
>
|
||||
Actions
|
||||
</Button>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
),
|
||||
},
|
||||
{ content: <Icon link name="edit" /> },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Page.Content>
|
||||
</SiteWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user