From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/components/Widget/AlbumWidget.js           |  55 ++++
 .../app/components/Widget/AreaChartWidget.js       | 147 +++++++++++
 .../app/components/Widget/BigChartWidget.js        | 142 ++++++++++
 .../app/components/Widget/CarouselWidget.js        | 117 ++++++++
 .../app/components/Widget/CounterGroupWidget.js    | 101 +++++++
 .../app/components/Widget/CounterIconsWidget.js    |  74 ++++++
 .../odiparpack/app/components/Widget/MapWidget.js  |  60 +++++
 .../app/components/Widget/ProfileWidget.js         |  54 ++++
 .../app/components/Widget/ProgressWidget.js        |  39 +++
 .../app/components/Widget/SliderWidget.js          |  69 +++++
 .../app/components/Widget/TableWidget.js           | 124 +++++++++
 .../odiparpack/app/components/Widget/TaskWidget.js |  83 ++++++
 .../odiparpack/app/components/Widget/widget-jss.js | 294 +++++++++++++++++++++
 13 files changed, 1359 insertions(+)
 create mode 100644 front/odiparpack/app/components/Widget/AlbumWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/AreaChartWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/BigChartWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/CarouselWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/CounterGroupWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/CounterIconsWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/MapWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/ProfileWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/ProgressWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/SliderWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/TableWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/TaskWidget.js
 create mode 100644 front/odiparpack/app/components/Widget/widget-jss.js

(limited to 'front/odiparpack/app/components/Widget')

diff --git a/front/odiparpack/app/components/Widget/AlbumWidget.js b/front/odiparpack/app/components/Widget/AlbumWidget.js
new file mode 100644
index 0000000..d691361
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/AlbumWidget.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import InfoIcon from '@material-ui/icons/Info';
+import imgData from 'ba-api/imgData';
+import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import styles from './widget-jss';
+
+
+class AlbumWidget extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <PapperBlock noMargin title="My Albums (4)" whiteBg desc="">
+        <div className={classes.albumRoot}>
+          <GridList cellHeight={180} className={classes.gridList}>
+            {
+              imgData.map((tile, index) => {
+                if (index >= 4) {
+                  return false;
+                }
+                return (
+                  <GridListTile key={index.toString()}>
+                    <img src={tile.img} className={classes.img} alt={tile.title} />
+                    <GridListTileBar
+                      title={tile.title}
+                      subtitle={(
+                        <span>
+by:
+                          {tile.author}
+                        </span>
+                      )}
+                      actionIcon={(
+                        <IconButton className={classes.icon}>
+                          <InfoIcon />
+                        </IconButton>
+                      )}
+                    />
+                  </GridListTile>
+                );
+              })
+            }
+          </GridList>
+        </div>
+      </PapperBlock>
+    );
+  }
+}
+
+AlbumWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AlbumWidget);
diff --git a/front/odiparpack/app/components/Widget/AreaChartWidget.js b/front/odiparpack/app/components/Widget/AreaChartWidget.js
new file mode 100644
index 0000000..8e17311
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/AreaChartWidget.js
@@ -0,0 +1,147 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createMuiTheme } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import CardGiftcard from '@material-ui/icons/CardGiftcard';
+import FilterVintage from '@material-ui/icons/FilterVintage';
+import LocalCafe from '@material-ui/icons/LocalCafe';
+import Style from '@material-ui/icons/Style';
+import themePallete from 'ba-api/themePalette';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer
+} from 'recharts';
+import messageStyles from 'ba-styles/Messages.scss';
+import { data1 } from 'ba-api/chartData';
+import Type from 'ba-styles/Typography.scss';
+import { purple } from '@material-ui/core/colors';
+import { Grid, Chip, Avatar, Divider, CircularProgress, Typography } from '@material-ui/core';
+import styles from './widget-jss';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+const theme = createMuiTheme(themePallete('magentaTheme'));
+const color = ({
+  primary: theme.palette.primary.main,
+  primarydark: theme.palette.primary.dark,
+  secondary: theme.palette.secondary.main,
+  secondarydark: theme.palette.secondary.dark,
+  third: purple[500],
+  thirddark: purple[900],
+});
+
+class AreaChartWidget extends PureComponent {
+  render() {
+    const {
+      classes,
+    } = this.props;
+    return (
+      <PapperBlock whiteBg noMargin title="Top Product Sales" desc="">
+        <Grid container spacing={2}>
+          <Grid item md={8} xs={12}>
+            <ul className={classes.bigResume}>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>
+                  <CardGiftcard />
+                </Avatar>
+                <Typography variant="h6">
+                  4321
+                  <Typography>Gift Card</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>
+                  <FilterVintage />
+                </Avatar>
+                <Typography variant="h6">
+                  9876
+                  <Typography>Flowers</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.blueAvatar)}>
+                  <LocalCafe />
+                </Avatar>
+                <Typography variant="h6">
+                  345
+                  <Typography>Cups</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.tealAvatar)}>
+                  <Style />
+                </Avatar>
+                <Typography variant="h6">
+                  996
+                  <Typography>Name Cards</Typography>
+                </Typography>
+              </li>
+            </ul>
+            <div className={classes.chartWrap}>
+              <div className={classes.chartFluid}>
+                <ResponsiveContainer>
+                  <AreaChart
+                    width={600}
+                    height={300}
+                    data={data1}
+                    margin={{
+                      top: 5,
+                      right: 30,
+                      left: 20,
+                      bottom: 5
+                    }}
+                  >
+                    <XAxis dataKey="name" />
+                    <YAxis />
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <Tooltip />
+                    <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} />
+                    <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondarydark} fillOpacity="0.8" fill={color.secondary} />
+                    <Area type="monotone" dataKey="amt" stackId="1" stroke={color.thirddark} fillOpacity="0.8" fill={color.third} />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <Typography variant="button"><span className={Type.bold}>Performance Listing</span></Typography>
+            <Divider className={classes.divider} />
+            <Grid container className={classes.secondaryWrap}>
+              <Grid item className={classes.centerItem} md={6}>
+                <Typography gutterBottom>Giftcard Quality</Typography>
+                <Chip label="Super" className={classNames(classes.chip, messageStyles.bgError)} />
+                <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.pinkProgress)} size={100} value={70} />
+              </Grid>
+              <Grid className={classes.centerItem} item md={6}>
+                <Typography gutterBottom>Monitoring Quality</Typography>
+                <Chip label="Good" className={classNames(classes.chip, messageStyles.bgSuccess)} />
+                <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.greenProgress)} size={100} value={57} />
+              </Grid>
+              <Grid className={classes.centerItem} item md={6}>
+                <Typography gutterBottom>Project Complete</Typography>
+                <Chip label="Poor" className={classNames(classes.chip, messageStyles.bgWarning)} />
+                <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.orangeProgress)} size={100} value={28} />
+              </Grid>
+              <Grid className={classes.centerItem} item md={6}>
+                <Typography gutterBottom>Deploy Progress</Typography>
+                <Chip label="Medium" className={classNames(classes.chip, messageStyles.bgInfo)} />
+                <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.blueProgress)} size={100} value={70} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </PapperBlock>
+    );
+  }
+}
+
+AreaChartWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AreaChartWidget);
diff --git a/front/odiparpack/app/components/Widget/BigChartWidget.js b/front/odiparpack/app/components/Widget/BigChartWidget.js
new file mode 100644
index 0000000..718af45
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/BigChartWidget.js
@@ -0,0 +1,142 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import Dvr from '@material-ui/icons/Dvr';
+import Explore from '@material-ui/icons/Explore';
+import Healing from '@material-ui/icons/Healing';
+import LocalActivity from '@material-ui/icons/LocalActivity';
+import {
+  ComposedChart,
+  Line,
+  Area,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer
+} from 'recharts';
+import { data1 } from 'ba-api/chartData';
+import Type from 'ba-styles/Typography.scss';
+import colorfull from 'ba-api/colorfull';
+import { Grid, Avatar, Divider, LinearProgress, Typography } from '@material-ui/core';
+import styles from './widget-jss';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+const color = ({
+  main: colorfull[5],
+  maindark: '#2196F3',
+  secondary: colorfull[3],
+  third: colorfull[0],
+});
+
+class BigChartWidget extends PureComponent {
+  render() {
+    const {
+      classes,
+    } = this.props;
+    return (
+      <PapperBlock whiteBg noMargin title="Top Product Sales" desc="">
+        <Grid container spacing={2}>
+          <Grid item md={8} xs={12}>
+            <ul className={classes.bigResume}>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>
+                  <Dvr />
+                </Avatar>
+                <Typography variant="h6">
+                  1234
+                  <Typography>Monitors</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>
+                  <Explore />
+                </Avatar>
+                <Typography variant="h6">
+                  5678
+                  <Typography>Compas</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.blueAvatar)}>
+                  <Healing />
+                </Avatar>
+                <Typography variant="h6">
+                  910
+                  <Typography>Badges</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.tealAvatar)}>
+                  <LocalActivity />
+                </Avatar>
+                <Typography variant="h6">
+                  1112
+                  <Typography>Tickets</Typography>
+                </Typography>
+              </li>
+            </ul>
+            <div className={classes.chartWrap}>
+              <div className={classes.chartFluid}>
+                <ResponsiveContainer>
+                  <ComposedChart
+                    data={data1}
+                    margin={{
+                      top: 0,
+                      right: 30,
+                      left: 20,
+                      bottom: 20
+                    }}
+                  >
+                    <CartesianGrid stroke="#f5f5f5" />
+                    <XAxis dataKey="name" />
+                    <YAxis />
+                    <Tooltip />
+                    <Area type="monotone" dataKey="amt" fill={color.main} stroke={color.maindark} />
+                    <Bar dataKey="pv" barSize={20} fill={color.secondary} />
+                    <Line type="monotone" dataKey="uv" stroke={color.third} />
+                  </ComposedChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <Typography variant="button"><span className={Type.bold}>Performance Listing</span></Typography>
+            <Divider className={classes.divider} />
+            <ul className={classes.secondaryWrap}>
+              <li>
+                <Typography gutterBottom>Monitoring Quality</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.pinkProgress)} value={24} />
+              </li>
+              <li>
+                <Typography gutterBottom>Compas Speed</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.purpleProgress)} value={89} />
+              </li>
+              <li>
+                <Typography gutterBottom>Total Badges</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.orangeProgress)} value={78} />
+              </li>
+              <li>
+                <Typography gutterBottom>Sold Ticket</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.greenProgress)} value={55} />
+              </li>
+              <li>
+                <Typography gutterBottom>App Performance</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.blueProgress)} value={80} />
+              </li>
+            </ul>
+          </Grid>
+        </Grid>
+      </PapperBlock>
+    );
+  }
+}
+
+BigChartWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BigChartWidget);
diff --git a/front/odiparpack/app/components/Widget/CarouselWidget.js b/front/odiparpack/app/components/Widget/CarouselWidget.js
new file mode 100644
index 0000000..51dd522
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/CarouselWidget.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import carouselData from 'ba-api/carouselData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+import { Typography, IconButton, Icon } from '@material-ui/core';
+import styles from './widget-jss';
+
+
+function SampleNextArrow(props) {
+  const { onClick } = props;
+  return (
+    <IconButton
+      className="nav-next"
+      onClick={onClick}
+    >
+      <ArrowForward />
+    </IconButton>
+  );
+}
+
+SampleNextArrow.propTypes = {
+  onClick: PropTypes.func,
+};
+
+SampleNextArrow.defaultProps = {
+  onClick: undefined,
+};
+
+function SamplePrevArrow(props) {
+  const { onClick } = props;
+  return (
+    <IconButton
+      className="nav-prev"
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  );
+}
+
+SamplePrevArrow.propTypes = {
+  onClick: PropTypes.func,
+};
+
+SamplePrevArrow.defaultProps = {
+  onClick: undefined,
+};
+
+class CarouselWidget extends React.Component {
+  render() {
+    const { classes } = this.props;
+    const settings = {
+      dots: true,
+      infinite: true,
+      centerMode: false,
+      speed: 500,
+      autoplaySpeed: 5000,
+      pauseOnHover: true,
+      autoplay: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 960,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            infinite: true,
+            dots: true
+          }
+        },
+      ],
+      cssEase: 'ease-out',
+      nextArrow: <SampleNextArrow />,
+      prevArrow: <SamplePrevArrow />
+    };
+    return (
+      <div className="container custom-arrow">
+        <Slider {...settings}>
+          {carouselData.map((item, index) => (
+            <div key={index.toString()}>
+              <div style={{ backgroundColor: item.background }} className={classes.carouselItem}>
+                <Icon className={classes.iconBg}>{item.icon}</Icon>
+                <Typography className={classes.carouselTitle} variant="subtitle1">
+                  <Icon>{item.icon}</Icon>
+                  {item.title}
+                </Typography>
+                <Typography className={classes.carouselDesc}>{item.desc}</Typography>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    );
+  }
+}
+
+CarouselWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CarouselWidget);
diff --git a/front/odiparpack/app/components/Widget/CounterGroupWidget.js b/front/odiparpack/app/components/Widget/CounterGroupWidget.js
new file mode 100644
index 0000000..92856b8
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/CounterGroupWidget.js
@@ -0,0 +1,101 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import {
+  BarChart, Bar,
+  AreaChart, Area,
+  LineChart, Line,
+  PieChart, Pie, Cell
+} from 'recharts';
+import { data1, data2 } from 'ba-api/chartMiniData';
+import colorfull from 'ba-api/colorfull';
+import { red, blue, cyan, lime } from '@material-ui/core/colors';
+import { Grid } from '@material-ui/core';
+import CounterWidget from '../Counter/CounterWidget';
+import styles from './widget-jss';
+
+
+const colors = [red[300], blue[300], cyan[300], lime[300]];
+
+class CounterGroupWidget extends PureComponent {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.rootCounter}>
+        <Grid container spacing={3}>
+          <Grid item xs={6}>
+            <CounterWidget
+              color={colorfull[0]}
+              start={0}
+              end={105}
+              duration={3}
+              title="New Customers"
+            >
+              <BarChart width={100} height={40} data={data1}>
+                <Bar dataKey="uv" fill="#ffffff" />
+              </BarChart>
+            </CounterWidget>
+          </Grid>
+          <Grid item xs={6}>
+            <CounterWidget
+              color={colorfull[1]}
+              start={0}
+              end={321}
+              duration={3}
+              title="New Articles"
+            >
+              <AreaChart width={100} height={60} data={data1}>
+                <Area type="monotone" dataKey="uv" stroke="#FFFFFF" fill="rgba(255,255,255,.5)" />
+              </AreaChart>
+            </CounterWidget>
+          </Grid>
+          <Grid item xs={6}>
+            <CounterWidget
+              color={colorfull[2]}
+              start={0}
+              end={67}
+              duration={3}
+              title="New Contributor"
+            >
+              <LineChart width={100} height={80} data={data1}>
+                <Line type="monotone" dataKey="pv" stroke="#FFFFFF" strokeWidth={2} />
+              </LineChart>
+            </CounterWidget>
+          </Grid>
+          <Grid item xs={6}>
+            <CounterWidget
+              color={colorfull[3]}
+              start={0}
+              end={80}
+              duration={3}
+              title="Average Income"
+            >
+              <PieChart width={100} height={100}>
+                <Pie
+                  data={data2}
+                  cx={50}
+                  cy={50}
+                  dataKey="value"
+                  innerRadius={20}
+                  outerRadius={40}
+                  fill="#FFFFFF"
+                  paddingAngle={5}
+                >
+                  {
+                    data2.map((entry, index) => <Cell key={index.toString()} fill={colors[index % colors.length]} />)
+                  }
+                </Pie>
+              </PieChart>
+            </CounterWidget>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+CounterGroupWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CounterGroupWidget);
diff --git a/front/odiparpack/app/components/Widget/CounterIconsWidget.js b/front/odiparpack/app/components/Widget/CounterIconsWidget.js
new file mode 100644
index 0000000..9c10850
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/CounterIconsWidget.js
@@ -0,0 +1,74 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AccountBox from '@material-ui/icons/AccountBox';
+import ImportContacts from '@material-ui/icons/ImportContacts';
+import Pets from '@material-ui/icons/Pets';
+import Star from '@material-ui/icons/Star';
+import colorfull from 'ba-api/colorfull';
+import { Grid } from '@material-ui/core';
+import CounterWidget from '../Counter/CounterWidget';
+import styles from './widget-jss';
+
+
+class CounterIconWidget extends PureComponent {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.rootCounterFull}>
+        <Grid container spacing={2}>
+          <Grid item md={3} xs={6}>
+            <CounterWidget
+              color={colorfull[0]}
+              start={0}
+              end={105}
+              duration={3}
+              title="New Customers"
+            >
+              <AccountBox className={classes.counterIcon} />
+            </CounterWidget>
+          </Grid>
+          <Grid item md={3} xs={6}>
+            <CounterWidget
+              color={colorfull[1]}
+              start={0}
+              end={321}
+              duration={3}
+              title="New Articles"
+            >
+              <ImportContacts className={classes.counterIcon} />
+            </CounterWidget>
+          </Grid>
+          <Grid item md={3} xs={6}>
+            <CounterWidget
+              color={colorfull[2]}
+              start={0}
+              end={67}
+              duration={3}
+              title="New Contributor"
+            >
+              <Pets className={classes.counterIcon} />
+            </CounterWidget>
+          </Grid>
+          <Grid item md={3} xs={6}>
+            <CounterWidget
+              color={colorfull[3]}
+              start={0}
+              end={80}
+              duration={3}
+              title="Average Income"
+            >
+              <Star className={classes.counterIcon} />
+            </CounterWidget>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+CounterIconWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CounterIconWidget);
diff --git a/front/odiparpack/app/components/Widget/MapWidget.js b/front/odiparpack/app/components/Widget/MapWidget.js
new file mode 100644
index 0000000..37204e9
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/MapWidget.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { compose } from 'recompose';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import dummy from 'ba-api/dummyContents';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from 'react-google-maps';
+import { Paper } from '@material-ui/core';
+import IdentityCard from '../CardPaper/IdentityCard';
+import styles from './widget-jss';
+
+const MapWithAMarker = compose(
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    {...props}
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.300, lng: 119.344 }}
+  >
+    <Marker
+      position={{ lat: -34.300, lng: 118.044 }}
+    />
+  </GoogleMap>
+));
+
+class MapWidget extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <Paper className={classes.mapWrap}>
+        <MapWithAMarker
+          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+          loadingElement={<div style={{ height: '100%' }} />}
+          containerElement={<div style={{ height: '400px' }} />}
+          mapElement={<div style={{ height: '100%' }} />}
+        />
+        <div className={classes.address}>
+          <IdentityCard
+            title="Contact and Address"
+            name={dummy.user.name}
+            avatar={dummy.user.avatar}
+            phone="(+8543201213)"
+            address="Town Hall Building no.45 Block C - ABC Street"
+          />
+        </div>
+      </Paper>
+    );
+  }
+}
+
+MapWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MapWidget);
diff --git a/front/odiparpack/app/components/Widget/ProfileWidget.js b/front/odiparpack/app/components/Widget/ProfileWidget.js
new file mode 100644
index 0000000..3ae3690
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/ProfileWidget.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import LocalPhone from '@material-ui/icons/LocalPhone';
+import DateRange from '@material-ui/icons/DateRange';
+import LocationOn from '@material-ui/icons/LocationOn';
+import {
+  List, ListItem, ListItemAvatar,
+  ListItemText, Divider, Avatar
+} from '@material-ui/core';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import styles from './widget-jss';
+
+
+function ProfileWidget(props) {
+  const { classes } = props;
+  return (
+    <PapperBlock title="About Me" whiteBg noMargin desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.">
+      <Divider className={classes.divider} />
+      <List dense className={classes.profileList}>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <DateRange />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Born" secondary="Jan 9, 1994" />
+        </ListItem>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <LocalPhone />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Phone" secondary="(+62)8765432190" />
+        </ListItem>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <LocationOn />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Address" secondary="Chicendo Street no.105 Block A/5A - Barcelona, Spain" />
+        </ListItem>
+      </List>
+    </PapperBlock>
+  );
+}
+
+ProfileWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ProfileWidget);
diff --git a/front/odiparpack/app/components/Widget/ProgressWidget.js b/front/odiparpack/app/components/Widget/ProgressWidget.js
new file mode 100644
index 0000000..c0e6db6
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/ProgressWidget.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Type from 'ba-styles/Typography.scss';
+import Check from '@material-ui/icons/Check';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress, Paper, Typography, Grid, Avatar, Chip } from '@material-ui/core';
+import styles from './widget-jss';
+
+
+function ProgressWidget(props) {
+  const { classes } = props;
+  return (
+    <Paper className={classes.styledPaper} elevation={4}>
+      <Typography className={classes.title} variant="h5" component="h3">
+        <span className={Type.light}>Profile Strength: </span>
+        <span className={Type.bold}>Intermediate</span>
+      </Typography>
+      <Grid container justify="center">
+        <Chip
+          avatar={(
+            <Avatar>
+              <Check />
+            </Avatar>
+          )}
+          label="60% Progress"
+          className={classes.chipProgress}
+          color="primary"
+        />
+      </Grid>
+      <LinearProgress variant="determinate" className={classes.progressWidget} value={60} />
+    </Paper>
+  );
+}
+
+ProgressWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ProgressWidget);
diff --git a/front/odiparpack/app/components/Widget/SliderWidget.js b/front/odiparpack/app/components/Widget/SliderWidget.js
new file mode 100644
index 0000000..1f53780
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/SliderWidget.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import Slider from 'react-animated-slider';
+import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css';
+import imgApi from 'ba-api/images';
+import avatarApi from 'ba-api/avatars';
+
+import { Button, Typography } from '@material-ui/core';
+
+const content = [
+  {
+    title: 'Vulputate Mollis Ultricies',
+    description:
+    'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
+    button: 'Read More',
+    image: imgApi[3],
+    user: 'Luanda Gjokaj',
+    userProfile: avatarApi[1]
+  },
+  {
+    title: 'Tortor Dapibus',
+    description:
+    'Cras mattis consectetur purus sit amet fermentum.',
+    button: 'Discover',
+    image: imgApi[15],
+    user: 'Erich Behrens',
+    userProfile: avatarApi[8]
+  },
+  {
+    title: 'Phasellus volutpat',
+    description:
+    'Lorem ipsum dolor sit amet',
+    button: 'Buy now',
+    image: imgApi[29],
+    user: 'Bruno Vizovskyy',
+    userProfile: avatarApi[10]
+  }
+];
+
+const SliderWidget = () => (
+  <div>
+    <Slider className="slider-wrapper short" autoplay={3000}>
+      {content.map((item, index) => (
+        <div
+          key={index.toString()}
+          className="slider-content"
+          style={{ background: `url('${item.image}') no-repeat center center` }}
+        >
+          <div className="inner">
+            <Typography variant="subtitle1" component="h3" className={Type.light} gutterBottom>{item.title}</Typography>
+            <Button variant="contained" color="primary">
+              {item.button}
+            </Button>
+          </div>
+          <section>
+            <img src={item.userProfile} alt={item.user} />
+            <span>
+              Posted by
+              {' '}
+              <strong>{item.user}</strong>
+            </span>
+          </section>
+        </div>
+      ))}
+    </Slider>
+  </div>
+);
+
+export default SliderWidget;
diff --git a/front/odiparpack/app/components/Widget/TableWidget.js b/front/odiparpack/app/components/Widget/TableWidget.js
new file mode 100644
index 0000000..47bb7ba
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/TableWidget.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+import avatarApi from 'ba-api/avatars';
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Chip,
+  LinearProgress,
+  Avatar,
+  Icon,
+} from '@material-ui/core';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import styles from './widget-jss';
+
+
+let id = 0;
+function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) {
+  id += 1;
+  return {
+    id,
+    name,
+    avatar,
+    title,
+    type,
+    taskNumber,
+    taskTitle,
+    progress,
+    status,
+  };
+}
+
+const data = [
+  createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'),
+  createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'),
+  createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'),
+  createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'),
+  createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'),
+];
+
+function TableWidget(props) {
+  const { classes } = props;
+  const getStatus = status => {
+    switch (status) {
+      case 'Error': return messageStyles.bgError;
+      case 'Warning': return messageStyles.bgWarning;
+      case 'Info': return messageStyles.bgInfo;
+      case 'Success': return messageStyles.bgSuccess;
+      default: return messageStyles.bgDefault;
+    }
+  };
+  const getProgress = status => {
+    switch (status) {
+      case 'Error': return progressStyles.bgError;
+      case 'Warning': return progressStyles.bgWarning;
+      case 'Info': return progressStyles.bgInfo;
+      case 'Success': return progressStyles.bgSuccess;
+      default: return progressStyles.bgDefault;
+    }
+  };
+  const getType = type => {
+    switch (type) {
+      case 'bug_report': return classes.red;
+      case 'flag': return classes.indigo;
+      case 'whatshot': return classes.orange;
+      case 'settings': return classes.lime;
+      default: return classes.purple;
+    }
+  };
+  return (
+    <PapperBlock noMargin title="Tracking Table" whiteBg desc="Monitoring Your Team progress. Tracking task, current progress, and task status here.">
+      <div className={classes.root}>
+        <Table className={classNames(classes.table)}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Task</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map(n => ([
+              <TableRow key={n.id}>
+                <TableCell>
+                  <div className={classes.user}>
+                    <Avatar alt={n.name} src={n.avatar} className={classes.avatar} />
+                    <div>
+                      <Typography variant="subtitle1">{n.name}</Typography>
+                      <Typography>{n.title}</Typography>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className={classes.taskStatus}>
+                    <Icon className={classNames(classes.taskIcon, getType(n.type))}>{n.type}</Icon>
+                    <a href="#">
+                      #
+                      {n.taskNumber}
+                    </a>
+                    <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} />
+                  </div>
+                  <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} />
+                </TableCell>
+              </TableRow>
+            ])
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </PapperBlock>
+  );
+}
+
+TableWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TableWidget);
diff --git a/front/odiparpack/app/components/Widget/TaskWidget.js b/front/odiparpack/app/components/Widget/TaskWidget.js
new file mode 100644
index 0000000..4136544
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/TaskWidget.js
@@ -0,0 +1,83 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import CommentIcon from '@material-ui/icons/Comment';
+import {
+  List,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Checkbox,
+  IconButton,
+} from '@material-ui/core';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import styles from './widget-jss';
+
+
+class TaskWidget extends React.Component {
+  state = {
+    checked: [0],
+  };
+
+  handleToggle = value => () => {
+    const { checked } = this.state;
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    this.setState({
+      checked: newChecked,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <PapperBlock title="My Task" whiteBg colorMode desc="All Your to do list. Just check it whenever You done." className={classes.root}>
+        <List className={classes.taskList}>
+          {[0, 1, 2, 3, 4].map(value => (
+            <Fragment key={value}>
+              <ListItem
+                key={value}
+                role={undefined}
+                dense
+                button
+                onClick={this.handleToggle(value)}
+                className={
+                  classNames(
+                    classes.listItem,
+                    this.state.checked.indexOf(value) !== -1 ? classes.done : ''
+                  )
+                }
+              >
+                <Checkbox
+                  checked={this.state.checked.indexOf(value) !== -1}
+                  tabIndex={-1}
+                  disableRipple
+                />
+                <ListItemText primary={`Task item ${value + 1}`} secondary={`Task description ${value + 1}`} />
+                <ListItemSecondaryAction>
+                  <IconButton aria-label="Comments">
+                    <CommentIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </Fragment>
+          ))}
+        </List>
+      </PapperBlock>
+    );
+  }
+}
+
+TaskWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TaskWidget);
diff --git a/front/odiparpack/app/components/Widget/widget-jss.js b/front/odiparpack/app/components/Widget/widget-jss.js
new file mode 100644
index 0000000..d553eaa
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/widget-jss.js
@@ -0,0 +1,294 @@
+import colorfull from 'ba-api/colorfull';
+
+const styles = theme => ({
+  rootCounter: {
+    flexGrow: 1,
+    padding: theme.spacing(1.5),
+    [theme.breakpoints.up('lg')]: {
+      padding: `${theme.spacing(1.5)}px ${theme.spacing(1)}px`,
+    },
+    [theme.breakpoints.down('xs')]: {
+      margin: `0 ${theme.spacing(1) * -1.5}px`,
+    }
+  },
+  rootCounterFull: {
+    flexGrow: 1,
+  },
+  divider: {
+    margin: `${theme.spacing(3)}px 0`
+  },
+  dividerBig: {
+    margin: `${theme.spacing(2)}px 0`
+  },
+  centerItem: {},
+  secondaryWrap: {
+    background: theme.palette.grey[100],
+    padding: 20,
+    borderRadius: 4,
+    justifyContent: 'space-around',
+    '& > $centerItem': {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    '& li': {
+      marginBottom: 30
+    },
+    '& $chip': {
+      top: 70,
+      position: 'absolute',
+      fontSize: 11,
+      fontWeight: 400,
+    }
+  },
+  bigResume: {
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      height: 160,
+      display: 'block',
+    },
+    '& li': {
+      paddingRight: 20,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      [theme.breakpoints.down('sm')]: {
+        width: '50%',
+        float: 'left'
+      },
+    },
+  },
+  avatar: {
+    width: 50,
+    height: 50,
+    marginRight: 10,
+    '& svg': {
+      fontSize: 32
+    }
+  },
+  pinkAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[0],
+  },
+  purpleAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[1],
+  },
+  blueAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[2],
+  },
+  tealAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[3],
+  },
+  pinkProgress: {
+    color: colorfull[0],
+    '& div': {
+      backgroundColor: colorfull[0],
+    }
+  },
+  greenProgress: {
+    color: colorfull[5],
+    '& div': {
+      backgroundColor: colorfull[5],
+    }
+  },
+  orangeProgress: {
+    color: colorfull[4],
+    '& div': {
+      backgroundColor: colorfull[4],
+    }
+  },
+  purpleProgress: {
+    color: colorfull[1],
+    '& div': {
+      backgroundColor: colorfull[1],
+    }
+  },
+  blueProgress: {
+    color: colorfull[2],
+    '& div': {
+      backgroundColor: colorfull[2],
+    }
+  },
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  chip: {
+    margin: '8px 0 8px auto',
+    color: '#FFF'
+  },
+  table: {
+    minWidth: 500,
+    '& td': {
+      padding: 10,
+    }
+  },
+  user: {
+    display: 'flex',
+  },
+  textCenter: {
+    textAlign: 'center'
+  },
+  red: {},
+  orange: {},
+  indigo: {},
+  purple: {},
+  lime: {},
+  taskIcon: {
+    display: 'block',
+    textAlign: 'center',
+    margin: '0 10px',
+    '&$red': {
+      color: colorfull[0],
+    },
+    '&$orange': {
+      color: colorfull[2],
+    },
+    '&$purple': {
+      color: colorfull[1],
+    },
+    '&$lime': {
+      color: colorfull[3],
+    },
+    '&$indigo': {
+      color: colorfull[4],
+    }
+  },
+  done: {},
+  listItem: {
+    padding: 5,
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[3],
+    '&:hover': {
+      backgroundColor: theme.palette.grey[200]
+    },
+    '&$done': {
+      textDecoration: 'line-through'
+    }
+  },
+  title: {},
+  subtitle: {},
+  styledPaper: {
+    backgroundColor: theme.palette.secondary.main,
+    padding: 20,
+    '& $title, & $subtitle': {
+      color: theme.palette.common.white
+    }
+  },
+  progressWidget: {
+    marginTop: 20,
+    background: theme.palette.secondary.dark,
+    '& div': {
+      background: theme.palette.primary.light,
+    }
+  },
+  chipProgress: {
+    marginTop: 20,
+    background: theme.palette.primary.light,
+    color: theme.palette.secondary.main,
+    '& div': {
+      background: colorfull[4],
+      color: theme.palette.common.white
+    }
+  },
+  taskStatus: {
+    display: 'flex',
+    alignItems: 'center',
+    '& a': {
+      textDecoration: 'none',
+      color: theme.palette.primary.main
+    }
+  },
+  counterIcon: {
+    color: theme.palette.common.white,
+    opacity: 0.7,
+    fontSize: 84
+  },
+  progressCircle: {
+    margin: 20
+  },
+  itemCarousel: {
+    textAlign: 'center',
+    '& img': {
+      margin: '10px auto'
+    }
+  },
+  albumRoot: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    backgroundColor: theme.palette.background.paper,
+  },
+  gridList: {
+    height: 'auto',
+    [theme.breakpoints.up('sm')]: {
+      width: 500,
+    },
+  },
+  icon: {
+    color: 'rgba(255, 255, 255, 0.54)',
+  },
+  img: {
+    maxWidth: 'none'
+  },
+  mapWrap: {
+    position: 'relative'
+  },
+  address: {
+    [theme.breakpoints.up('md')]: {
+      top: '50%',
+      right: 60,
+      position: 'absolute',
+      transform: 'translate(0, -50%)'
+    },
+  },
+  carouselItem: {
+    margin: '0 5px',
+    boxShadow: theme.shadows[3],
+    borderRadius: 4,
+    overflow: 'hidden',
+    height: 250,
+    padding: '60px 20px',
+    position: 'relative'
+  },
+  iconBg: {
+    color: theme.palette.common.white,
+    opacity: 0.25,
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+    fontSize: 96
+  },
+  carouselTitle: {
+    color: theme.palette.common.white,
+    display: 'flex',
+    flexDirection: 'column',
+    fontWeight: 500,
+    fontSize: 20
+  },
+  carouselDesc: {
+    color: theme.palette.common.white
+  },
+  chartWrap: {
+    overflow: 'auto',
+  },
+  chartFluid: {
+    width: '100%',
+    minWidth: 400,
+    height: 300,
+  }
+});
+
+export default styles;
-- 
cgit v1.2.3