Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/ProjectsDashboards/ProjectsList.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+import { 
+    Badge,
+    Progress
+} from './../../../components';
+
+const ProjectsList = (props) => (
+    <React.Fragment>
+        <div className="d-flex flex-column">
+            <div className="mb-3 d-flex justify-content-between">
+                <span className="mb-0 text-inverse">
+                     { props.title || faker.commerce.productName() }
+                </span>
+                <Badge color={ `${ props.badgeColor }` } pill className="align-self-center">
+                    { props.badgeTitle }
+                </Badge>
+            </div>
+            <Progress value={ `${ props.progressValue }` } className="mb-4" style={{height: "5px"}} />
+            <div className="d-flex justify-content-between">
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.completeValue }%
+                    </h5>
+                    <span>
+                        Complete
+                    </span>
+                </div>
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.myTasksValue }
+                    </h5>
+                    <span>
+                        My Tasks
+                    </span>
+                </div>
+                <div className="text-center">
+                    <h5 className="mb-1">
+                        { props.daysDueValue }
+                    </h5>
+                    <span>
+                        Days Due
+                    </span>
+                </div>  
+            </div>
+        </div>
+    </React.Fragment>
+)
+ProjectsList.propTypes = {
+    title: PropTypes.string,
+    badgeColor: PropTypes.string,
+    badgeTitle: PropTypes.string,
+    progressValue: PropTypes.string,
+    completeValue: PropTypes.string,
+    myTasksValue: PropTypes.string,
+    daysDueValue: PropTypes.string
+};
+ProjectsList.defaultProps = {
+    badgeColor: "secondary",
+    badgeTitle: "Waiting",
+    progressValue: "25",
+    completeValue: "60",
+    myTasksValue: "5",
+    daysDueValue: "53"
+};
+
+export { ProjectsList };

app/routes/components/ProjectsDashboards/TasksMedia.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { 
+    Media,
+    CustomInput
+} from './../../../components';
+
+const TasksMedia = (props) => (
+    <React.Fragment>
+        <Media>
+            <Media left className="mr-3">
+                <CustomInput className="pt-0 mt-0" type="checkbox" id={`taskMedia-${ props.id }` } label="" />
+            </Media>
+            <Media body>
+                <div className="mt-0 mb-2">
+                    <Link to="/apps/tasks/tasks-details" className="text-decoration-none">
+                        { faker.hacker.phrase() }
+                    </Link>
+                </div>
+                <div className="mb-0">
+                    { faker.date.past().toString() }
+                </div>
+            </Media>
+            <Media right className="ml-3">
+                <i className={ `fa fa-fw fa-circle text-${ props.iconColor }` }></i>
+            </Media>
+        </Media>
+    </React.Fragment>
+)
+TasksMedia.propTypes = {
+    iconColor: PropTypes.node,
+    id: PropTypes.node,
+};
+TasksMedia.defaultProps = {
+    iconColor: "muted",
+    id: "1"
+};
+
+export { TasksMedia };

app/routes/components/ProjectsDashboards/TinyDonutChart.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 200},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['yellow'], colors['red'], colors['success'], colors['yellow']];
+
+const TinyDonutChart = () => (
+    <PieChart width={ 80 } height={ 80 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 26 }
+            outerRadius={ 35 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChart };

app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = [
+    {name: 'Group A', value: 200},
+    {name: 'Group B', value: 200},
+    {name: 'Group C', value: 300}
+];
+
+const COLORS = [ colors['primary'], colors['info'], colors['purple'], colors['yellow']];
+
+const TinyDonutChartAllProjects = () => (
+    <PieChart width={ 80 } height={ 80 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 26 }
+            outerRadius={ 35 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChartAllProjects };