diff --git a/docs/drawing.svg b/docs/drawing.svg new file mode 100644 index 00000000..0750d838 --- /dev/null +++ b/docs/drawing.svg @@ -0,0 +1,123 @@ + + + + + + + + image/svg+xml + + + + + + + + + Dear Jimmy, + +First of all, I am sooo happy to know you. During this time being, We went through a lot during this 3 years.We had become more like two sistersI will miss you so much but pls keep in mind that you have a sister here. Wish you all the best ! :) And no worries , we will definetely keep in touch! + +Irem + + diff --git a/frontend/package.json b/frontend/package.json index 4b468468..b17c8c2d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,8 +14,10 @@ "jspdf-autotable": "^3.5.14", "prop-types": "^15.7.2", "react": "^16.13.1", + "react-alice-carousel": "^2.5.1", "react-apexcharts": "^1.3.9", "react-burger-menu": "^2.6.13", + "react-collapsible": "^2.8.3", "react-collapsible-content": "^1.0.0", "react-dom": "^16.8.6", "react-grid-system": "^7.1.2", diff --git a/frontend/src/components/dashboard/UnresolvedTicketsComponent.js b/frontend/src/components/dashboard/UnresolvedTicketsComponent.js index 603be24e..952cbda6 100644 --- a/frontend/src/components/dashboard/UnresolvedTicketsComponent.js +++ b/frontend/src/components/dashboard/UnresolvedTicketsComponent.js @@ -32,8 +32,13 @@ function UnresolvedTicketsComponent({ containerStyles }) { title='Unresolved tickets' link='View details' subtitle='Group:' + subtitleTwo='Support' items={[ + renderStat('Waiting on Feature Request', 4238), + renderStat('Awaiting Customer Response', 1005), + renderStat('Awaiting Developer Fix', 914), + renderStat('Pending', 281), renderStat('Waiting on Feature Request', 4238), renderStat('Awaiting Customer Response', 1005), renderStat('Awaiting Developer Fix', 914), diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx index 6cb1c186..2b7f8e4a 100644 --- a/frontend/src/components/details/ColumnChartComponent.jsx +++ b/frontend/src/components/details/ColumnChartComponent.jsx @@ -68,7 +68,7 @@ const ColumnChartComponent = () => { }, responsive: [ { - breakpoint: 300, + breakpoint: 6400, options: { chart: { width: 500 diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index 26f93143..17fcc291 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -41,7 +41,7 @@ const PieChartComponent = () => { ], responsive: [ { - breakpoint: 5600, + breakpoint: 6400, options: { chart: { height: '300px' diff --git a/frontend/src/components/mydashboard/MydashboardComponent.js b/frontend/src/components/mydashboard/MydashboardComponent.js new file mode 100644 index 00000000..5ccbee61 --- /dev/null +++ b/frontend/src/components/mydashboard/MydashboardComponent.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { Column } from 'simple-flexbox'; +import { createUseStyles } from 'react-jss'; +import MydashboardItemComponent from './MydashboardItemComponent'; +import { Container } from 'react-grid-system'; + +const useStyles = createUseStyles({ + cardsContainer: { + marginRight: -30, + marginTop: -30 + }, + cardRow: { + marginTop: 30, + '@media (max-width: 768px)': { + marginTop: 0 + } + }, + miniCardContainer: { + flexGrow: 1, + marginRight: 30, + '@media (max-width: 768px)': { + marginTop: 30, + maxWidth: 'none' + } + }, + todayTrends: { + marginTop: 30 + }, + lastRow: { + marginTop: 30 + }, + unresolvedTickets: { + marginRight: 30, + '@media (max-width: 1024px)': { + marginRight: 0 + } + }, + tasks: { + marginTop: 0, + '@media (max-width: 1024px)': { + marginTop: 30 + } + } +}); + +function DashboardComponent() { + const classes = useStyles(); + return ( + + +
+ +
+ + + ); +} + +export default DashboardComponent; diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js new file mode 100644 index 00000000..cf7e46b7 --- /dev/null +++ b/frontend/src/components/mydashboard/MydashboardItemComponent.js @@ -0,0 +1,199 @@ +import React from 'react'; +import { Column } from 'simple-flexbox'; +import { createUseStyles, useTheme } from 'react-jss'; +import PieChartComponent from 'components/details/PieChartComponent'; +import { Col, Container, Row } from 'react-grid-system'; +import Collapsible from 'react-collapsible'; +import Slideshow from './Slideshow'; + +const data = []; + +for (let x = 1; x <= 24; x++) { + data.push({ x: x, y: Math.floor(Math.random() * 100) }); +} + +const useStyles = createUseStyles((theme) => ({ + container: { + backgroundColor: '#FFFFFF', + border: `1px solid ${theme.color.lightGrayishBlue2}`, + borderRadius: 4, + cursor: 'pointer' + }, + graphContainer: { + marginTop: 24, + marginLeft: 0, + marginRight: 0, + width: '100%' + }, + graphSection: { + padding: 24 + }, + graphSubtitle: { + ...theme.typography.smallSubtitle, + color: theme.color.grayishBlue2, + marginTop: 4, + marginRight: 8 + }, + graphTitle: { + ...theme.typography.cardTitle, + color: theme.color.veryDarkGrayishBlue + }, + legendTitle: { + ...theme.typography.smallSubtitle, + fontWeight: '600', + color: theme.color.grayishBlue2, + marginLeft: 8 + }, + separator: { + backgroundColor: theme.color.lightGrayishBlue2, + width: 1, + minWidth: 1 + }, + statContainer: { + borderBottom: `1px solid ${theme.color.lightGrayishBlue2}`, + padding: '24px 32px 24px 32px', + height: 'calc(114px - 48px)', + '&:last-child': { + border: 'none' + } + }, + stats: { + borderTop: `1px solid ${theme.color.lightGrayishBlue2}`, + width: '100%' + }, + statTitle: { + fontWeight: '600', + fontSize: 16, + lineHeight: '22px', + letterSpacing: '0.3px', + textAlign: 'center', + color: theme.color.grayishBlue2, + whiteSpace: 'nowrap', + marginBottom: 6 + }, + statValue: { + ...theme.typography.title, + textAlign: 'center', + color: theme.color.veryDarkGrayishBlue + } +})); + +function MydashboardItemComponent() { + const theme = useTheme(); + const classes = useStyles({ theme }); + + function renderStat(title, value) { + return ( + +
+