{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/Dashboard.js\";\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { Menu } from 'primereact/menu';\nimport { Button } from 'primereact/button';\nimport { Chart } from 'primereact/chart';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { ProductService } from '../service/ProductService';\nvar lineData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [{\n label: 'First Dataset',\n data: [65, 59, 80, 81, 56, 55, 40],\n fill: false,\n backgroundColor: '#2f4860',\n borderColor: '#2f4860',\n tension: .4\n }, {\n label: 'Second Dataset',\n data: [28, 48, 40, 19, 86, 27, 90],\n fill: false,\n backgroundColor: '#00bb7e',\n borderColor: '#00bb7e',\n tension: .4\n }]\n};\n\nvar Dashboard = function Dashboard(props) {\n var _useState = useState(null),\n _useState2 = _slicedToArray(_useState, 2),\n products = _useState2[0],\n setProducts = _useState2[1];\n\n var menu1 = useRef(null);\n var menu2 = useRef(null);\n\n var _useState3 = useState(null),\n _useState4 = _slicedToArray(_useState3, 2),\n lineOptions = _useState4[0],\n setLineOptions = _useState4[1];\n\n var applyLightTheme = function applyLightTheme() {\n var lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n setLineOptions(lineOptions);\n };\n\n var applyDarkTheme = function applyDarkTheme() {\n var lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n setLineOptions(lineOptions);\n };\n\n useEffect(function () {\n var productService = new ProductService();\n productService.getProductsSmall().then(function (data) {\n return setProducts(data);\n });\n }, []);\n useEffect(function () {\n if (props.colorMode === 'light') {\n applyLightTheme();\n } else {\n applyDarkTheme();\n }\n }, [props.colorMode]);\n\n var formatCurrency = function formatCurrency(value) {\n return value.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD'\n });\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6 xl:col-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 121,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 123,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-500 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 124,\n columnNumber: 29\n }\n }, \"Orders\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-900 font-medium text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 29\n }\n }, \"152\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center bg-blue-100 border-round\",\n style: {\n width: '2.5rem',\n height: '2.5rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 127,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-shopping-cart text-blue-500 text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 128,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-green-500 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 131,\n columnNumber: 21\n }\n }, \"24 new \"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 132,\n columnNumber: 21\n }\n }, \"since last visit\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6 xl:col-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 135,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 136,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 137,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-500 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 139,\n columnNumber: 29\n }\n }, \"Revenue\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-900 font-medium text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 29\n }\n }, \"$2.100\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center bg-orange-100 border-round\",\n style: {\n width: '2.5rem',\n height: '2.5rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 142,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-map-marker text-orange-500 text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 143,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-green-500 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 146,\n columnNumber: 21\n }\n }, \"%52+ \"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 21\n }\n }, \"since last week\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6 xl:col-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 151,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-500 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 29\n }\n }, \"Customers\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-900 font-medium text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 155,\n columnNumber: 29\n }\n }, \"28441\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center bg-cyan-100 border-round\",\n style: {\n width: '2.5rem',\n height: '2.5rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-inbox text-cyan-500 text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 158,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-green-500 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 161,\n columnNumber: 21\n }\n }, \"520 \"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 162,\n columnNumber: 21\n }\n }, \"newly registered\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6 xl:col-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 167,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-500 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 169,\n columnNumber: 29\n }\n }, \"Comments\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-900 font-medium text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 29\n }\n }, \"152 Unread\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center bg-purple-100 border-round\",\n style: {\n width: '2.5rem',\n height: '2.5rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 172,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-comment text-purple-500 text-xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 173,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-green-500 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 21\n }\n }, \"85 \"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 21\n }\n }, \"responded\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 xl:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 181,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 182,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 21\n }\n }, \"Recent Sales\"), /*#__PURE__*/React.createElement(DataTable, {\n value: products,\n rows: 5,\n paginator: true,\n responsiveLayout: \"scroll\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n header: \"Image\",\n body: function body(data) {\n return /*#__PURE__*/React.createElement(\"img\", {\n className: \"shadow-2\",\n src: \"assets/demo/images/product/\".concat(data.image),\n alt: data.image,\n width: \"50\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 64\n }\n });\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n sortable: true,\n style: {\n width: '35%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 186,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"price\",\n header: \"Price\",\n sortable: true,\n style: {\n width: '35%'\n },\n body: function body(data) {\n return formatCurrency(data.price);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 187,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"View\",\n style: {\n width: '15%'\n },\n body: function body() {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-search\",\n type: \"button\",\n className: \"p-button-text\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 190,\n columnNumber: 33\n }\n }));\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 188,\n columnNumber: 25\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 195,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between align-items-center mb-5\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 196,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 197,\n columnNumber: 25\n }\n }, \"Best Selling Products\"), /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 198,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n icon: \"pi pi-ellipsis-v\",\n className: \"p-button-rounded p-button-text p-button-plain\",\n onClick: function onClick(event) {\n return menu1.current.toggle(event);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 199,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Menu, {\n ref: menu1,\n popup: true,\n model: [{\n label: 'Add New',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Remove',\n icon: 'pi pi-fw pi-minus'\n }],\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 200,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"ul\", {\n className: \"list-none p-0 m-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 203,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 204,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 205,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 206,\n columnNumber: 33\n }\n }, \"Space T-Shirt\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 207,\n columnNumber: 33\n }\n }, \"Clothing\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 209,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 210,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-orange-500 h-full\",\n style: {\n width: '50%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 211,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-orange-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 213,\n columnNumber: 33\n }\n }, \"%50\"))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 216,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 217,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 218,\n columnNumber: 33\n }\n }, \"Portal Sticker\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 219,\n columnNumber: 33\n }\n }, \"Accessories\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 221,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 222,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-cyan-500 h-full\",\n style: {\n width: '16%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 223,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-cyan-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 225,\n columnNumber: 33\n }\n }, \"%16\"))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 228,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 229,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 230,\n columnNumber: 33\n }\n }, \"Supernova Sticker\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 231,\n columnNumber: 33\n }\n }, \"Accessories\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 233,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 234,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-pink-500 h-full\",\n style: {\n width: '67%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 235,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-pink-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 237,\n columnNumber: 33\n }\n }, \"%67\"))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 241,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 242,\n columnNumber: 33\n }\n }, \"Wonders Notebook\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 243,\n columnNumber: 33\n }\n }, \"Office\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 245,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 246,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-green-500 h-full\",\n style: {\n width: '35%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 247,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-green-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 249,\n columnNumber: 33\n }\n }, \"%35\"))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 252,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 253,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 254,\n columnNumber: 33\n }\n }, \"Mat Black Case\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 255,\n columnNumber: 33\n }\n }, \"Accessories\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 258,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-purple-500 h-full\",\n style: {\n width: '75%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 259,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-purple-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 261,\n columnNumber: 33\n }\n }, \"%75\"))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 264,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 font-medium mr-2 mb-1 md:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 33\n }\n }, \"Robots T-Shirt\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-1 text-600\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 267,\n columnNumber: 33\n }\n }, \"Clothing\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 269,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"surface-300 border-round overflow-hidden w-10rem lg:w-6rem\",\n style: {\n height: '8px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 270,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"bg-teal-500 h-full\",\n style: {\n width: '40%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 271,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-teal-500 ml-3 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 273,\n columnNumber: 33\n }\n }, \"%40\")))))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 xl:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 280,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 281,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 282,\n columnNumber: 21\n }\n }, \"Sales Overview\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"line\",\n data: lineData,\n options: lineOptions,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 283,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 286,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-between mb-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 287,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 288,\n columnNumber: 25\n }\n }, \"Notifications\"), /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 289,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n icon: \"pi pi-ellipsis-v\",\n className: \"p-button-rounded p-button-text p-button-plain\",\n onClick: function onClick(event) {\n return menu2.current.toggle(event);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 290,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Menu, {\n ref: menu2,\n popup: true,\n model: [{\n label: 'Add New',\n icon: 'pi pi-fw pi-plus'\n }, {\n label: 'Remove',\n icon: 'pi pi-fw pi-minus'\n }],\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 291,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-600 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 295,\n columnNumber: 21\n }\n }, \"TODAY\"), /*#__PURE__*/React.createElement(\"ul\", {\n className: \"p-0 mx-0 mt-0 mb-4 list-none\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 296,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex align-items-center py-2 border-bottom-1 surface-border\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-dollar text-xl text-blue-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 299,\n columnNumber: 33\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 line-height-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 301,\n columnNumber: 29\n }\n }, \"Richard Jones\", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-700\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 7\n }\n }, \" has purchased a blue t-shirt for \", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-blue-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 68\n }\n }, \"79$\")))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex align-items-center py-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-download text-xl text-orange-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 33\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-700 line-height-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 29\n }\n }, \"Your request for withdrawal of \", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-blue-500 font-medium\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 101\n }\n }, \"2500$\"), \" has been initiated.\"))), /*#__PURE__*/React.createElement(\"span\", {\n className: \"block text-600 font-medium mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 313,\n columnNumber: 21\n }\n }, \"YESTERDAY\"), /*#__PURE__*/React.createElement(\"ul\", {\n className: \"p-0 m-0 list-none\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 314,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex align-items-center py-2 border-bottom-1 surface-border\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 315,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-dollar text-xl text-blue-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 317,\n columnNumber: 33\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 line-height-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 319,\n columnNumber: 29\n }\n }, \"Keyser Wick\", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-700\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 7\n }\n }, \" has purchased a black jacket for \", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-blue-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 68\n }\n }, \"59$\")))), /*#__PURE__*/React.createElement(\"li\", {\n className: \"flex align-items-center py-2 border-bottom-1 surface-border\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 323,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 324,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-question text-xl text-pink-500\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 325,\n columnNumber: 33\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-900 line-height-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 327,\n columnNumber: 29\n }\n }, \"Jane Davis\", /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-700\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 7\n }\n }, \" has posted a new questions about your product.\"))))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3\",\n style: {\n borderRadius: '1rem',\n background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 333,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 335,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-blue-100 font-medium text-xl mt-2 mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 336,\n columnNumber: 25\n }\n }, \"TAKE THE NEXT STEP\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-white font-medium text-5xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 337,\n columnNumber: 25\n }\n }, \"Try PrimeBlocks\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mt-4 mr-auto md:mt-0 md:mr-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 339,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"a\", {\n href: \"https://www.primefaces.org/primeblocks-react\",\n className: \"p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 340,\n columnNumber: 25\n }\n }, \"Get Started\")))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname && prevProps.colorMode === nextProps.colorMode;\n};\n\nexport default React.memo(Dashboard, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","useRef","Menu","Button","Chart","DataTable","Column","ProductService","lineData","labels","datasets","label","data","fill","backgroundColor","borderColor","tension","Dashboard","props","products","setProducts","menu1","menu2","lineOptions","setLineOptions","applyLightTheme","plugins","legend","color","scales","x","ticks","grid","y","applyDarkTheme","productService","getProductsSmall","then","colorMode","formatCurrency","value","toLocaleString","style","currency","width","height","image","price","event","current","toggle","icon","borderRadius","background","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/Dashboard.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { Menu } from 'primereact/menu';\nimport { Button } from 'primereact/button';\nimport { Chart } from 'primereact/chart';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { ProductService } from '../service/ProductService';\n\nconst lineData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'First Dataset',\n data: [65, 59, 80, 81, 56, 55, 40],\n fill: false,\n backgroundColor: '#2f4860',\n borderColor: '#2f4860',\n tension: .4\n },\n {\n label: 'Second Dataset',\n data: [28, 48, 40, 19, 86, 27, 90],\n fill: false,\n backgroundColor: '#00bb7e',\n borderColor: '#00bb7e',\n tension: .4\n }\n ]\n};\n\nconst Dashboard = (props) => {\n const [products, setProducts] = useState(null);\n const menu1 = useRef(null);\n const menu2 = useRef(null);\n const [lineOptions, setLineOptions] = useState(null)\n\n const applyLightTheme = () => {\n const lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n }\n };\n\n setLineOptions(lineOptions)\n }\n\n const applyDarkTheme = () => {\n const lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n }\n };\n\n setLineOptions(lineOptions)\n }\n\n useEffect(() => {\n const productService = new ProductService();\n productService.getProductsSmall().then(data => setProducts(data));\n }, []);\n\n useEffect(() => {\n if (props.colorMode === 'light') {\n applyLightTheme();\n } else {\n applyDarkTheme();\n }\n }, [props.colorMode]);\n\n const formatCurrency = (value) => {\n return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n };\n\n return (\n