{"version":3,"sources":["assets/img/theme/team-5.jpg","assets/img/icons/cards/mastercard.png","assets/img/icons/cards/paypal.png","assets/img/icons/cards/visa.png","assets/img/brand/choare_logo.png","assets/img/brand/argon-react.png","assets/img/brand/argon-react-white.png","assets/img/brand/blue.png","assets/img/theme/landing-1.png","assets/img/theme/landing-2.png","assets/img/theme/landing-3.png","configuration/Configuration.js","services/DataService.js","components/Navbars/AdminNavbar.js","components/Footers/AdminFooter.js","components/Sidebar/Sidebar.js","views/pages/Calendar.js","components/Headers/AlternativeHeader.js","views/pages/dashboards/Alternative.js","components/Headers/SimpleHeader.js","views/pages/components/Buttons.js","variables/general.js","components/Headers/CardsHeader.js","views/pages/components/Cards.js","views/pages/Charts.js","views/pages/forms/Components.js","views/pages/dashboards/Dashboard.js","views/pages/forms/Elements.js","views/pages/maps/Google.js","views/pages/components/Grid.js","components/Headers/AuthHeader.js","views/pages/components/Icons.js","views/pages/examples/Login.js","views/pages/examples/Lock.js","components/Headers/ProfileHeader.js","views/pages/components/Notifications.js","views/pages/examples/Pricing.js","views/pages/examples/Profile.js","views/pages/tables/ReactBSTables.js","components/Headers/RTLProfileHeader.js","views/pages/examples/Register.js","views/pages/examples/RTLSupport.js","views/pages/maps/Vector.js","views/pages/tables/Sortable.js","views/pages/tables/Tables.js","views/pages/examples/Timeline.js","views/pages/components/Typography.js","views/pages/forms/Validation.js","views/pages/Widgets.js","views/pages/forms/CapturePreferences.js","views/pages/forms/DisplayResults.js","routes.js","layouts/Admin.js","layouts/RTL.js","components/Navbars/AuthNavbar.js","components/Footers/AuthFooter.js","layouts/Auth.js","components/Navbars/IndexNavbar.js","components/Headers/IndexHeader.js","layouts/FullScreen.js","views/Index.js","index.js","assets/img/theme/img-1-1000x600.jpg","assets/img/theme/team-1.jpg","assets/img/theme/team-2.jpg","assets/img/theme/team-3.jpg","assets/img/theme/team-4.jpg","variables/charts.js","assets/img/icons/common/google.svg","assets/img/icons/flags/US.png","assets/img/icons/flags/DE.png","assets/img/icons/flags/GB.png","assets/img/theme/img-1-1000x900.jpg","assets/img/icons/common/github.svg","assets/img/theme/profile-cover.jpg","assets/img/theme/bootstrap.jpg","assets/img/theme/angular.jpg","assets/img/theme/sketch.jpg","assets/img/theme/react.jpg","assets/img/theme/vue.jpg","assets/img/icons/cards/bitcoin.png"],"names":["module","exports","Configuration","DOMAIN","BANDS_COLLECTION_URL","this","PREFERENCES_COLLECTION_URL","UPLOAD_COLLECTION_URL","TRACKS_COLLECTION_URL","USERS_COLLECTION_URL","EVENTS_COLLECTION_URL","META_DATA_URL","USER_URL","OAUTH2_LOGOFF_URL","OAUTH2_LOGIN_URL","OAUTH2_LOGIN_REDIRECT_URL","OAUTH2_REGISTER_REDIRECT_URL","SIGNALLING_SERVER","SIGNALLING_SERVER_HTTP","GUIDE_TRACK_STORAGE_LOCATION","DataService","config","fetch","credentials","mode","then","response","ok","handleResponseError","redirected","url","indexOf","json","window","location","href","item","console","log","JSON","stringify","method","headers","body","catch","error","handleError","email","userid","itemLink","id","user","band","bandId","file","formData","FormData","append","name","Error","status","message","AdminNavbar","state","dataService","openSearch","document","classList","add","setTimeout","remove","closeSearch","getUser","res","setState","icon","Navbar","className","classnames","props","theme","Container","fluid","Collapse","navbar","isOpen","Nav","UncontrolledDropdown","nav","DropdownToggle","color","tag","Media","alt","src","DropdownMenu","right","DropdownItem","header","onClick","e","preventDefault","divider","React","Component","defaultProps","toggleSidenav","sidenavOpen","Calendar","Row","Sidebar","activeRoute","routeName","pathname","onMouseEnterSidenav","contains","onMouseLeaveSidenav","toggleCollapse","collapseOpen","closeCollapse","getCollapseStates","routes","initialState","map","prop","key","collapse","getCollapseInitialState","views","closeSidenav","innerWidth","createLinks","redirect","st","NavItem","NavLink","data-toggle","aria-expanded","active","miniName","layout","path","to","activeClassName","NavLinkRRD","undefined","i","length","navbarBrandProps","logo","innerLink","Link","outterLink","target","scrollBarInner","NavbarBrand","imgAlt","imgSrc","rtlActive","onMouseEnter","onMouseLeave","navigator","platform","calendar","AlternativeHeader","Col","lg","xs","Breadcrumb","listClassName","BreadcrumbItem","aria-current","Button","size","mapData","AU","BR","CA","DE","FR","GB","GE","IN","RO","RU","US","TimelineHeader","parentName","today","Date","y","getFullYear","m","getMonth","d","getDate","events","title","start","allDay","description","widgetEvents","end","dataTable","position","office","age","start_date","salary","CardsHeader","md","xl","Card","CardBody","CardTitle","Dropzone","autoDiscover","MapCustom","withScriptjs","withGoogleMap","defaultZoom","defaultCenter","lat","lng","defaultOptions","scrollwheel","styles","featureType","elementType","stylers","visibility","saturation","lightness","MapDefault","AuthHeader","lead","xmlns","preserveAspectRatio","version","viewBox","x","points","Login","redirectURL","signin","CardHeader","Form","action","style","textAlign","type","value","require","ProfileHeader","minHeight","backgroundImage","backgroundSize","backgroundPosition","pagination","paginationFactory","page","alwaysShowAllBtns","showTotal","withFirstAndLast","sizePerPageRenderer","options","currSizePerPage","onSizePerPageChange","aria-controls","onChange","SearchBar","Search","povertyPreventionOrRelief","shortName","education","healthAndSavingOfLives","citizenshipCommunityDevelopment","artsCultureHeritageScience","amateurSport","humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity","environmentalProtectionOrImprovement","reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship","armedForcesPoliceAmbulanceServicesFireAndRescueServices","animalWelfare","religion","CapturePreferences","philanthropyPie","refs","handleEmailChange","event","hideAlert","alert","handleSubmit","canvasData","getElementById","toDataURL","charitablePreferences","chart","updateCharitablePreferences","statusCode","thankYouAlert","errorAlert","warningAlert","display","marginTop","onConfirm","onCancel","btnSize","text","alreadySubmittedAlert","copyToClipboardAsTable","el","range","sel","createRange","getSelection","removeAllRanges","selectNodeContents","addRange","selectNode","execCommand","createTextRange","moveToElementText","select","success","confirmBtnBsStyle","pieData","Chart","parseOptions","chartOptions","labelItems","dataItems","pieColours","push","data","labels","datasets","backgroundColor","label","responsive","legend","animation","animateScale","animateRotate","reference","chartInstance","update","propertySlider","Slider","create","connect","step","min","max","on","values","handle","someValue","setPieData","bind","educationSlider","healthSlider","citizenSlider","artsSlider","amateurSportSlider","humanRightsSlider","environmentalSlider","reliefSlider","armedForcesSlider","animalWelfareSlider","religionSlider","ListGroup","flush","ListGroupItem","ref","Math","round","getPieData","FormGroup","htmlFor","Input","placeholder","component","results","retrieveCharitablePreferences","forEach","b","dateSubmitted","povertyPreventionOrReliefValue","educationValue","healthAndSavingOfLivesValue","citizenshipCommunityDevelopmentValue","artsCultureHeritageScienceValue","amateurSportValue","humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDivValue","environmentalProtectionOrImprovementValue","reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardshipValue","armedForcesPoliceAmbulanceServicesFireAndRescueServicesValue","animalWelfareValue","religionValue","parseResults","keyField","columns","dataField","sort","search","sm","ButtonGroup","UncontrolledTooltip","placement","searchProps","componentRef","baseProps","bootstrap4","bordered","Admin","getRoutes","getBrandText","getNavbarTheme","history","documentElement","scrollTop","scrollingElement","mainContent","brandText","from","AdminFooter","RTL","Auth","AuthNavbar","AuthFooter","expand","aria-label","data-target","UncontrolledCollapse","toggler","delay","IndexHeader","FullScreen","ReactDOM","render","randomScalingFactor","random","elements","Rectangle","prototype","draw","left","top","bottom","signX","signY","borderSkipped","ctx","_chart","vm","_view","borderWidth","horizontal","base","height","width","barSize","abs","halfStroke","borderLeft","borderRight","borderTop","borderBottom","beginPath","fillStyle","strokeStyle","borderColor","lineWidth","corners","startCorner","cornerAt","index","corner","moveTo","nextCornerId","radius","lineTo","quadraticCurveTo","fill","stroke","fonts","colors","100","200","300","400","500","600","700","800","900","default","primary","secondary","info","danger","warning","chartExample1","scales","yAxes","gridLines","zeroLineColor","ticks","callback","tooltips","callbacks","datasetIndex","yLabel","content","data1","canvas","data2","chartExample2","maxBarThickness","chartExample3","chartExample4","pointRadius","pointHoverRadius","showLine","chartExample5","chartExample6","chartExample7","intersect","xAxes","stacked","defaults","global","maintainAspectRatio","defaultColor","defaultFontColor","defaultFontFamily","defaultFontSize","padding","usePointStyle","point","line","tension","borderCapStyle","rectangle","arc","enabled","doughnut","cutoutPercentage","legendCallback","bgColor","scaleService","updateScaleDefaults","borderDash","borderDashOffset","drawBorder","drawTicks","zeroLineWidth","zeroLineBorderDash","zeroLineBorderDashOffset","beginAtZero","drawOnChartArea","parent"],"mappings":"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","file":"static/js/main.abd9443a.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/team-5.53033970.jpg\";","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAYAAABqpJ3BAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABUpJREFUWIXtlllsVFUYx3/nzkynvdPpOtPa6XSh7bQB2gItRgSUhIgaZIlCSTBoYlxDjE0MvmgkYNQHlYDBxAchBlHRCBGoKCHFDahA2UqBIkOxLdOWKV2m7ezLvT5MHSwMPABJacL/6d6T8y2/7zvfuVd4vd4CRVG+BmZKkiRxj0tRFFWSpE5VVbfKsrxauN3uA5IkzR7rxG5Hqqp+KNxud2Q8VD6eFEW5LI3X5EdkHc/JI0mSGNcAAPcBxlr3AcZa2usXnP1eat7dhT8YAUAAiXotJblpvPBUBbMrc+8o4IoNLTj6grF3nVZgSU9gwfRMamaab2lb3zTA+zs6MBl1bH9rEhCnA0dbuhnyBAmGIljNRoosqbh9IY7/7aR2w35au1yxvYFQBH8wPMreFwgTjiij1gKhCF5/iI5eP5ecfoJhhTSDBltOEqoK9m4f6+sc/Hy8L2YTDCkEQqP9NFwYIhhSsGQkxNZu6MDJC04A0o2JbP9gEZIQ7DxgZ83mBiKKymn7VTb+cIJj5524fdFKJifpeGx6IfMfnsArH+0jJ9PAL+uWAlB3qJXVmw6SYtBTu2JuLM7Gl2zkmfS09/hZvr4FgKY2D782u2hq9+DxR0+AQS8xtzKDVYutNLd7AKgoMNwCwN4DwLTSLCQhAPD6r1U5oqr0DHhZMKuIFIOes5d6OdTcyc4DdsqLTQB093noG/Sh02r4ZFsjqgq1NdW0OPwAZBp15Jn0AHiC16ociqi4PGHmV2WQnKThXIeHI/Zh6hp7mZwn09kXAKAyPzk+gMsd4J+uwejzcIDv95/nYqeLXQcuAjB5gomnH7WxZE4pXb1uOpxDPJBh4FBzJwBWczLmNJmrLi8XO13UH2tn0B2goihq9926c9GgkuDHI704XSF2N/YCkCprWfmkhUyjjq6BAI7eAGajjiP2YQBar/gAEALKb9aB/44PwIkLTk6MvGs0EgtnFbNq+YN8uaeZbfXn6Rv0IQTodVEXGklQUWSmxJrGVZeX3Qdb2Xv4EpIQvP38DAbcYRwjFXQOBvl45+VYrOpiI28uslLX2MeOw1fpd4cRAnTa6IhqNYKIogJQaE7EoL82utcBRI+PXqehdlk1RjkBU2oS5UUmjHICX+09y2c7TpJiSODzVfOYasti80/NbKo7TWl+BoYkHWX5Gfx1pos9Da0A1MwtY2JhJr+duTb8K+Zkk2/Sk5asxZaTRHZqAlt/d/JFfTepspZPXyyhssDApvorfPOnkzKLjL072oHKQsP/U47fgWml2Tw7byLX6/DZLgAsmcmUF5lo6x5k39E2AKpKswEozk2L7U83JvLG0ioAmtrcQHQoX3vCgiRG+z7WGj0quRkJTLTKXHL6Y9AT82R2H43eUBX5NwHwBcK0tPcDMNUW/z6uLM6iobmL8x39PLJyG8WWNDqcQwBUl0UB8rKMsf21y6owygkjANEbpLzAcEPyAJPyDDReHOacw8vja08zISuRrv7ACLSGYDg67JWFyaPsYgBCwOtLpgGwcFZxXIBXF0/BlpeOo2eYIksqMytyOWXvQVVVqkYA/jjlAGBKSRaLZ9tits/MMOHyhJlRmhLX98vzcii1JNHdH2RCdiIP2Yw0tXkQAvLNiVjSdaTIOqyZ+lF2wuv1qnE93oY6nEMseWcXiqLy7ZoFlOVn3C3XN9VdBWi/MsQpew+FOSlMKcm6W25vqbsKMBYa93+j9wHGWpKiKON2BhRFUSRJkjrHOpE7kENSVXXrWGdxuxJCbBGqqmq9Xu9aVVWfA6ySFO9Df+9IURQFcAghtsiy/N6/d3IKJnwFrZcAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAYAAABqpJ3BAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABWJJREFUWIXVmFtMVFcUhr8zDAwDgwyX4TKggkABEcFoDYho1caYNMGCTWti0rSpsY1tfGibNE1Tk9pbYpo0bXnog029N2lj1bZaA0VFoiiKWkERZBAY7nIZ5DLAMOf0YWDPHECp+ID8T2ets/be6997rf/sGSk5L3+hQ6s5rJGlVWjQ8MxDVkBqRuFQZEf7bq1DqzmsQVo9F1J3QSMB0Uh83BoeoWi8IGu2U5opdD7aHRoFSZrtRGaKEcdo6JwpnKmgKMydyn8UpMHBQWW2k3gazPkT0HoaA5UnYHRYHSFJ6BZkoA1aoHL320coutYo7NS4UMKC/Cm8Wi982UujCTXqhd1ps3Ph3yYszTbsww4C/HxIiA4iOy2aQINONX9D20NuWR4gy64CWZMeTVCA7yQCqhJSHHbstWcZuH6EofpLIkijN2LeVYak9RG+X89W89XBy+McOfF1Lm3dA7y9t0DE/LU3j+iwAJxOme9+u87RwipGnfKkJPZszyJndbywrR19vPLJSYYdTuH77K0sNmfHTxqrKiHJW49f8kuYth2lb92POOfFACDbbTg6qlQDjxfXiOfMlCgWRszD0mwTPr1Oi9lkAOCLA5c5eOb2lMkDxEUZVfbRgjuq5AEq6x5MOVY7pRcISsxmy08t5D9fjKmrmJG2CnzMaQDUWHuoaugWsa9tSASgzoNATGQgGkmipbOfEyX3hD93TQLvvJyOQe9NW88AJTebiI0MFO/77SP8cdEyKZ8KS+eTEYgM8Sc8PJjtl9exL0ODobVCvDtxwZ2QOdRAdno0AJYWN4HxXbU021A8dC4t3kR4sJ8rRm8kzqze/ZMltQzYHQCsXBxJ2Z1WAO4127APj6LXqVN+rAplppiRkXj3ajbdPb0AOEZlTpXWiZhX1yeikSQUBWqbPAiYXbs6PyxANeeen0v5fH8prV0Dk9aTFYVf/rkr7B05S4UIOJ0yVQ1dk8Y8nsASMwB2pxf7apNRHEOcu95Ib79LqXTeXuSuSQCgq9dO3+CIm0B0EOAqpdc3paiSPHa+hpyPfmffn7dU65XcbKKpow+AKJOB5YkRLIkNFe+nKqPHEliRFIG31hXyd72R6sYejnuUz6aMWCF/nuUDqErj/a0r2P3mKpUMOkZl8o/dYP/pSuE7WugWipyseCQJUuNMHgQmN/JjCeh1WtLiw4R9pryFK7dbhb11Q5J4nqhAkaH+qrny1iZw+pst7MxNx8vLveyRgiox/sod99zJsSFYmm2q70PFFEr0yCYeR+YSM9futo0tdgd5rCNTF4WSHBMyJYFxBZoIvU7Ljs1pNLT3ceqSS2kGhhxibk/s+rZo0vj27kEe2AYxGf2Eb9qrxKqxPgDXsY9j64tJqrg6jxKKH1Og4htWPvjhHAVl9VhabFg7+ii8Ws+limYRuzTORG//MKdL70+XCgC3JvTBtCeQtDAEo0GHrd99xQie58vGlbHCnqhAi8YUqLqxm6LyRorK3VcOT/h4e/HelmUcO1/D0MgoAP56b3bmpqvizpY3Ul7dDrj6YMNy97VmWgKSBBkpZs5cce9Q3trnRHPDoxXIOqYoUyEuysinb2SSvDCYD/PPC//GlTFs27hYFevroxUEKuvUJ/C/rtP1rb2qHV6RHIHRo7l6+4cpvd0i7KzUKAL8fHA6ZSrvd1JjtdHZO4giQ0igL0vjTKJ/+gZHuOhRUmlxJiJDDar1ux8OUVbVKsi8sGz+kxF4ljH3fw9Yv4yZ7RyeCnP+BDRz+F8VZCRFI8tK02wnMlNIyFaNJHFothOZKSQ44LVl/UCxwemnVRRiFEmaJ8EzXVOyjIykWCX4vkX7YM9/emwLrnveHvoAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/choare_logo.ef5990d5.png\";","module.exports = __webpack_public_path__ + \"static/media/argon-react.f38ddea9.png\";","module.exports = __webpack_public_path__ + \"static/media/argon-react-white.275a2629.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/landing-1.4ffd1f12.png\";","module.exports = __webpack_public_path__ + \"static/media/landing-2.bbe46b24.png\";","module.exports = __webpack_public_path__ + \"static/media/landing-3.ee1b391e.png\";","class Configuration {\r\n  DOMAIN  = \"https://care4mostapi.azurewebsites.net/\";\r\n  BANDS_COLLECTION_URL = this.DOMAIN + \"bands\";\r\n  PREFERENCES_COLLECTION_URL = this.DOMAIN + \"CharitablePreferences\";\r\n  UPLOAD_COLLECTION_URL = this.DOMAIN + \"upload\"\r\n  TRACKS_COLLECTION_URL = this.DOMAIN + \"guidetracks\";\r\n  USERS_COLLECTION_URL = this.DOMAIN + \"users\";\r\n  EVENTS_COLLECTION_URL = this.DOMAIN + \"events\";\r\n  META_DATA_URL = this.DOMAIN + \"metadata\";\r\n  USER_URL =this.DOMAIN + \"user\";\r\n  OAUTH2_LOGOFF_URL = this.DOMAIN + \"signout?returnUrl=https://www.care4most.org\";\r\n  OAUTH2_LOGIN_URL= this.DOMAIN + \"signin\";\r\n  OAUTH2_LOGIN_REDIRECT_URL = \"https://www.care4most.org/admin/displayresults\";\r\n  OAUTH2_REGISTER_REDIRECT_URL = \"https://www.care4most.org\";\r\n  SIGNALLING_SERVER = \"xaura.onlinedemo.space:1935\";\r\n  SIGNALLING_SERVER_HTTP = \"https://xaura.onlinedemo.space:8300/\";\r\n  GUIDE_TRACK_STORAGE_LOCATION = \"https://gigartydata.blob.core.windows.net/guide/\";\r\n}\r\nexport default Configuration;\r\n","import Configuration from \"../configuration/Configuration\";\r\nclass DataService {\r\n  constructor() {\r\n    this.config = new Configuration();\r\n  }\r\n  async retrieveBands(userid = \"\") {\r\n    //TODO: Need to filter based on user ID but that's not supported in the API\r\n    return fetch(this.config.BANDS_COLLECTION_URL, {\r\n      credentials: \"include\",\r\n      mode: 'cors',\r\n    }).then(response => {\r\n      if (!response.ok) {\r\n        this.handleResponseError(response);\r\n      }\r\n      if (\r\n        response.redirected === true &&\r\n          response.url.indexOf(\"/signin\") !== -1\r\n      ) {\r\n        window.location.href = \"/auth/login\";\r\n      } else {\r\n        return response.json();\r\n      }\r\n    });\r\n  }\r\n\r\n    async updateCharitablePreferences(item) {\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(item);\r\n        console.log(JSON.stringify(item));\r\n\r\n\r\n\r\n        \r\n        return fetch(this.config.PREFERENCES_COLLECTION_URL, {\r\n            method: \"PUT\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n    async retrieveCharitablePreferences() {\r\n        //TODO: Need to filter based on user ID but that's not supported in the API\r\n        return fetch(this.config.PREFERENCES_COLLECTION_URL, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n\r\n\r\n    async retrieveCharitablePreference(email) {\r\n        //TODO: Need to filter based on user ID but that's not supported in the API\r\n        return fetch(this.config.PREFERENCES_COLLECTION_URL+\"/\"+email, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n    async retrieveTracks() {\r\n        return fetch(this.config.TRACKS_COLLECTION_URL, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n  async retrieveUsers() {\r\n        return fetch(this.config.USERS_COLLECTION_URL, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n  async retrieveEvents(userid = \"\") {\r\n        //TODO: Need to filter based on user ID but that's not supported in the API\r\n        return fetch(this.config.EVENTS_COLLECTION_URL, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n\r\n    async retrieveMyEvents(userid = \"\") {\r\n        //TODO: Need to filter based on user ID but that's not supported in the API\r\n        return fetch(this.config.USERS_COLLECTION_URL + \"/\" + userid + \"/events\", {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n\r\n    async retrieveMyBands(userid = \"\") {\r\n        //TODO: Need to filter based on user ID but that's not supported in the API\r\n        return fetch(this.config.USERS_COLLECTION_URL + \"/\" + userid + \"/bands\", {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n\r\n  async retrieveMetaData() {\r\n        return fetch(this.config.META_DATA_URL, {\r\n            credentials: \"include\",\r\n            mode: 'cors',\r\n        }).then(response => {\r\n            if (!response.ok) {\r\n                this.handleResponseError(response);\r\n            }\r\n            if (\r\n                response.redirected === true &&\r\n                response.url.indexOf(\"/signin\") !== -1\r\n            ) {\r\n                window.location.href = \"/auth/login\";\r\n            } else {\r\n                return response.json();\r\n            }\r\n        });\r\n    }\r\n  async getBand(itemLink) {\r\n    console.log(\"ItemService.getItem():\");\r\n    console.log(\"Item: \" + this.config.BANDS_COLLECTION_URL + \"/\" + itemLink);\r\n    return fetch(this.config.BANDS_COLLECTION_URL + \"/\" + itemLink, {\r\n      credentials: \"include\"\r\n    })\r\n      .then(response => {\r\n        if (!response.ok) {\r\n          this.handleResponseError(response);\r\n        }\r\n        if (\r\n          response.redirected === true &&\r\n            response.url.indexOf(\"/signin\") !== -1\r\n        ) {\r\n          window.location.href = \"/auth/login\";\r\n        } else {\r\n          return response.json();\r\n        }\r\n      })\r\n      .catch(error => {\r\n        this.handleError(error);\r\n      });\r\n  }\r\n    async getTrack(itemLink) {\r\n        console.log(\"ItemService.getItem():\");\r\n        console.log(\"Item: \" + this.config.TRACKS_COLLECTION_URL + \"/\" + itemLink);\r\n        return fetch(this.config.TRACKS_COLLECTION_URL + \"/\" + itemLink, {\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async getEvent(itemLink) {\r\n        console.log(\"ItemService.getItem():\");\r\n        console.log(\"Item: \" + this.config.EVENTS_COLLECTION_URL + \"/\" + itemLink);\r\n        return fetch(this.config.EVENTS_COLLECTION_URL + \"/\" + itemLink, {\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async getSingleUser(itemLink) {\r\n        console.log(\"ItemService.getItem():\");\r\n        console.log(\"Item: \" + this.config.USERS_COLLECTION_URL + \"/\" + itemLink);\r\n        return fetch(this.config.USERS_COLLECTION_URL + \"/\" + itemLink, {\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async getUser() {\r\n    console.log(\"UserService.getItem():\");\r\n\r\n    return fetch(this.config.USER_URL, {\r\n      credentials: \"include\"\r\n    })\r\n      .then(response => {\r\n        if (!response.ok) {\r\n          this.handleResponseError(response);\r\n        }\r\n        if (\r\n          response.redirected === true &&\r\n            response.url.indexOf(\"/signin\") !== -1\r\n        ) {\r\n          window.location.href = \"/auth/login\";\r\n        } else {\r\n          return response.json();\r\n        }\r\n      })\r\n      .catch(error => {\r\n        this.handleError(error);\r\n      });\r\n  }\r\n\r\n    async getUserById(id) {\r\n        console.log(\"UserService.getItem():\");\r\n\r\n        return fetch(this.config.USERS_COLLECTION_URL+ \"/\"+ id, {\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async createUser(user) {\r\n    console.log(\"ItemService.createItem():\");\r\n\r\n    return fetch(this.config.USER_URL, {\r\n      method: \"POST\",\r\n      mode: \"cors\",\r\n      credentials: \"include\",\r\n      body: JSON.stringify(user),\r\n      headers: {\r\n        \"Content-Type\": \"application/json\"\r\n      }\r\n    })\r\n      .then(response => {\r\n        if (!response.ok) {\r\n          this.handleResponseError(response);\r\n        }\r\n        if (\r\n          response.redirected === true &&\r\n            response.url.indexOf(\"/signin\") !== -1\r\n        ) {\r\n          window.location.href = \"/auth/login\";\r\n        } else {\r\n          return response.json();\r\n        }\r\n      })\r\n      .catch(error => {\r\n        this.handleError(error);\r\n      });\r\n  }\r\n    async deleteUser(item) {\r\n        console.log(\"ItemService.deleteItem():\");\r\n        console.log(\"item: \" + item);\r\n        return fetch(this.config.USERS_COLLECTION_URL + \"/\" + item.id, {\r\n            method: \"DELETE\",\r\n            mode: \"cors\",\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async deleteBand(item) {\r\n    console.log(\"ItemService.deleteItem():\");\r\n    console.log(\"item: \" + item);\r\n    return fetch(this.config.BANDS_COLLECTION_URL + \"/\" + item.id, {\r\n      method: \"DELETE\",\r\n      mode: \"cors\",\r\n      credentials: \"include\"\r\n    })\r\n      .then(response => {\r\n        if (!response.ok) {\r\n          this.handleResponseError(response);\r\n        }\r\n      })\r\n      .catch(error => {\r\n        this.handleError(error);\r\n      });\r\n  }\r\n\r\n    async deleteTrack(item) {\r\n        console.log(\"ItemService.deleteItem():\");\r\n        console.log(\"item: \" + item);\r\n        return fetch(this.config.TRACKS_COLLECTION_URL + \"/\" + item.id, {\r\n            method: \"DELETE\",\r\n            mode: \"cors\",\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n\r\n    async deleteEvent(item) {\r\n        console.log(\"ItemService.deleteItem():\");\r\n        console.log(\"item: \" + item);\r\n        return fetch(this.config.EVENTS_COLLECTION_URL + \"/\" + item.id, {\r\n            method: \"DELETE\",\r\n            mode: \"cors\",\r\n            credentials: \"include\"\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async updateBand(item) {\r\n    console.log(\"ItemService.updateItem():\");\r\n    console.log(item);\r\n    return fetch(this.config.BANDS_COLLECTION_URL, {\r\n      method: \"PUT\",\r\n      mode: \"cors\",\r\n      credentials: \"include\",\r\n      headers: {\r\n        \"Content-Type\": \"application/json\"\r\n      },\r\n      body: JSON.stringify(item)\r\n    })\r\n      .then(response => {\r\n        if (!response.ok) {\r\n          this.handleResponseError(response);\r\n        }\r\n        if (\r\n          response.redirected === true &&\r\n          response.url.indexOf(\"/signin\") !== -1\r\n        ) {\r\n          window.location.href = \"/auth/login\";\r\n        } else {\r\n          return response.json();\r\n        }\r\n      })\r\n      .catch(error => {\r\n        this.handleError(error);\r\n      });\r\n  }\r\n  async createBand(item) {\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(item);\r\n        return fetch(this.config.BANDS_COLLECTION_URL, {\r\n            method: \"POST\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async updateEvent(item, band) {\r\n      item.bandId=band;\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(item);\r\n        return fetch(this.config.EVENTS_COLLECTION_URL, {\r\n            method: \"PUT\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n  async updateUser(item) {\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(item);\r\n        return fetch(this.config.USERS_COLLECTION_URL, {\r\n            method: \"PUT\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n\r\n    async updateTrack(item) {\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(item);\r\n        return fetch(this.config.TRACKS_COLLECTION_URL, {\r\n            method: \"PUT\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n    async uploadFile(file) {\r\n        console.log(\"ItemService.updateItem():\");\r\n        console.log(file);\r\n\r\n        const formData = new FormData();\r\n        formData.append(file.name , file);\r\n\r\n\r\n\r\n        return fetch(this.config.UPLOAD_COLLECTION_URL, {\r\n            method: \"POST\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n\r\n            body: formData\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n\r\n\r\n  async createEvent(item,band) {\r\n       item.bandId=band;\r\n        console.log(item);\r\n        return fetch(this.config.EVENTS_COLLECTION_URL, {\r\n            method: \"POST\",\r\n            mode: \"cors\",\r\n            credentials: \"include\",\r\n            headers: {\r\n                \"Content-Type\": \"application/json\"\r\n            },\r\n            body: JSON.stringify(item)\r\n        })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    this.handleResponseError(response);\r\n                }\r\n                if (\r\n                    response.redirected === true &&\r\n                    response.url.indexOf(\"/signin\") !== -1\r\n                ) {\r\n                    window.location.href = \"/auth/login\";\r\n                } else {\r\n                    return response.json();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                this.handleError(error);\r\n            });\r\n    }\r\n\r\n  handleResponseError(response) {\r\n    throw new Error(\"HTTP error, status = \" + response.status + response);\r\n  }\r\n  handleError(error) {\r\n    console.log(error.message);\r\n  }\r\n}\r\n\r\nexport default DataService;\r\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// reactstrap components\nimport {\n  Collapse,\n  DropdownMenu,\n  DropdownItem,\n  UncontrolledDropdown,\n  DropdownToggle,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  ListGroupItem,\n  ListGroup,\n  Media,\n  Navbar,\n  NavItem,\n  NavLink,\n  Nav,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\nimport DataService from \"../../services/DataService\";\n\nclass AdminNavbar extends React.Component {\n\n  state = {\n    user: null\n  };\n\n  dataService = new DataService();\n\n  // function that on mobile devices makes the search open\n  openSearch = () => {\n    document.body.classList.add(\"g-navbar-search-showing\");\n    setTimeout(function() {\n      document.body.classList.remove(\"g-navbar-search-showing\");\n      document.body.classList.add(\"g-navbar-search-show\");\n    }, 150);\n    setTimeout(function() {\n      document.body.classList.add(\"g-navbar-search-shown\");\n    }, 300);\n  };\n  // function that on mobile devices makes the search close\n  closeSearch = () => {\n    document.body.classList.remove(\"g-navbar-search-shown\");\n    setTimeout(function() {\n      document.body.classList.remove(\"g-navbar-search-show\");\n      document.body.classList.add(\"g-navbar-search-hiding\");\n    }, 150);\n    setTimeout(function() {\n      document.body.classList.remove(\"g-navbar-search-hiding\");\n      document.body.classList.add(\"g-navbar-search-hidden\");\n    }, 300);\n    setTimeout(function() {\n      document.body.classList.remove(\"g-navbar-search-hidden\");\n    }, 500);\n  };\n\ncomponentDidMount()\n{\n  this.dataService.getUser().then(res=>\n  {\n    this.setState({user : res});\n  });\n\n\n\n}\n\n  render() {\n  var user;\n  if(this.state.user)\n  {\n    user = this.state.user;\n  }\n  else\n  {\n    user = { name : \"\" , icon : \"\" };\n  }\n    return (\n      <>\n        <Navbar\n          className={classnames(\n            \"navbar-top navbar-expand border-bottom\",\n            { \"navbar-dark bg-info\": this.props.theme === \"dark\" },\n            { \"navbar-light bg-secondary\": this.props.theme === \"light\" }\n          )}\n        >\n          <Container fluid>\n            <Collapse navbar isOpen={true}>\n\n              <Nav className=\"align-items-center ml-auto ml-md-0\" navbar>\n                <UncontrolledDropdown nav>\n                  <DropdownToggle className=\"nav-link pr-0\" color=\"\" tag=\"a\">\n                    <Media className=\"align-items-center\">\n                      <span className=\"avatar avatar-sm rounded-circle\">\n                        <img\n                          alt=\"...\"\n                          src={user.icon}\n                        />\n                      </span>\n                      <Media className=\"ml-2 d-none d-lg-block\">\n                        <span className=\"mb-0 text-sm font-weight-bold\">\n                          {user.name}\n                        </span>\n                      </Media>\n                    </Media>\n                  </DropdownToggle>\n                  <DropdownMenu right>\n                    <DropdownItem className=\"noti-title\" header tag=\"div\">\n                      <h6 className=\"text-overflow m-0\">Welcome!</h6>\n                    </DropdownItem>\n                    <DropdownItem\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"ni ni-single-02\" />\n                      <span>My profile</span>\n                    </DropdownItem>\n                    <DropdownItem\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"ni ni-settings-gear-65\" />\n                      <span>Settings</span>\n                    </DropdownItem>\n                    <DropdownItem\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"ni ni-calendar-grid-58\" />\n                      <span>Activity</span>\n                    </DropdownItem>\n                    <DropdownItem\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"ni ni-support-16\" />\n                      <span>Support</span>\n                    </DropdownItem>\n                    <DropdownItem divider />\n                    <DropdownItem\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"ni ni-user-run\" />\n                      <span>Logout</span>\n                    </DropdownItem>\n                  </DropdownMenu>\n                </UncontrolledDropdown>\n              </Nav>\n            </Collapse>\n          </Container>\n        </Navbar>\n      </>\n    );\n  }\n}\nAdminNavbar.defaultProps = {\n  toggleSidenav: () => {},\n  sidenavOpen: false,\n  theme: \"dark\"\n};\nAdminNavbar.propTypes = {\n  toggleSidenav: PropTypes.func,\n  sidenavOpen: PropTypes.bool,\n  theme: PropTypes.oneOf([\"dark\", \"light\"])\n};\n\nexport default AdminNavbar;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n/*eslint-disable*/\nimport React from \"react\";\n\n// reactstrap components\nimport { NavItem, NavLink, Nav, Container, Row, Col } from \"reactstrap\";\n\nclass Calendar extends React.Component {\n  render() {\n    return (\n      <>\n        <Container fluid>\n          <footer className=\"footer pt-0\">\n            <Row className=\"align-items-center justify-content-lg-between\">\n\n            </Row>\n          </footer>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Calendar;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { NavLink as NavLinkRRD, Link } from \"react-router-dom\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// nodejs library to set properties for components\nimport { PropTypes } from \"prop-types\";\n// react library that creates nice scrollbar on windows devices\nimport PerfectScrollbar from \"react-perfect-scrollbar\";\n// reactstrap components\nimport {\n  Collapse,\n  NavbarBrand,\n  Navbar,\n  NavItem,\n  NavLink,\n  Nav\n} from \"reactstrap\";\n\nclass Sidebar extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      collapseOpen: false,\n      ...this.getCollapseStates(props.routes)\n    };\n  }\n  // verifies if routeName is the one active (in browser input)\n  activeRoute = routeName => {\n    return this.props.location.pathname.indexOf(routeName) > -1 ? \"active\" : \"\";\n  };\n  // makes the sidenav normal on hover (actually when mouse enters on it)\n  onMouseEnterSidenav = () => {\n    if (!document.body.classList.contains(\"g-sidenav-pinned\")) {\n      document.body.classList.add(\"g-sidenav-show\");\n    }\n  };\n  // makes the sidenav mini on hover (actually when mouse leaves from it)\n  onMouseLeaveSidenav = () => {\n    if (!document.body.classList.contains(\"g-sidenav-pinned\")) {\n      document.body.classList.remove(\"g-sidenav-show\");\n    }\n  };\n  // toggles collapse between opened and closed (true/false)\n  toggleCollapse = () => {\n    this.setState({\n      collapseOpen: !this.state.collapseOpen\n    });\n  };\n  // closes the collapse\n  closeCollapse = () => {\n    this.setState({\n      collapseOpen: false\n    });\n  };\n  // this creates the intial state of this component based on the collapse routes\n  // that it gets through this.props.routes\n  getCollapseStates = routes => {\n    let initialState = {};\n    routes.map((prop, key) => {\n      if (prop.collapse) {\n        initialState = {\n          [prop.state]: this.getCollapseInitialState(prop.views),\n          ...this.getCollapseStates(prop.views),\n          ...initialState\n        };\n      }\n      return null;\n    });\n    return initialState;\n  };\n  // this verifies if any of the collapses should be default opened on a rerender of this component\n  // for example, on the refresh of the page,\n  // while on the src/views/forms/RegularForms.js - route /admin/regular-forms\n  getCollapseInitialState(routes) {\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {\n        return true;\n      } else if (window.location.href.indexOf(routes[i].path) !== -1) {\n        return true;\n      }\n    }\n    return false;\n  }\n  // this is used on mobile devices, when a user navigates\n  // the sidebar will autoclose\n  closeSidenav = () => {\n    if (window.innerWidth < 1200) {\n      this.props.toggleSidenav();\n    }\n  };\n  // this function creates the links and collapses that appear in the sidebar (left menu)\n  createLinks = routes => {\n    return routes.map((prop, key) => {\n      if (prop.redirect) {\n        return null;\n      }\n      if (prop.collapse) {\n        var st = {};\n        st[prop[\"state\"]] = !this.state[prop.state];\n        return (\n          <NavItem key={key}>\n            <NavLink\n              href=\"#pablo\"\n              data-toggle=\"collapse\"\n              aria-expanded={this.state[prop.state]}\n              className={classnames({\n                active: this.getCollapseInitialState(prop.views)\n              })}\n              onClick={e => {\n                e.preventDefault();\n                this.setState(st);\n              }}\n            >\n              {prop.icon ? (\n                <>\n                  <i className={prop.icon} />\n                  <span className=\"nav-link-text\">{prop.name}</span>\n                </>\n              ) : prop.miniName ? (\n                <>\n                  <span className=\"sidenav-mini-icon\"> {prop.miniName} </span>\n                  <span className=\"sidenav-normal\"> {prop.name} </span>\n                </>\n              ) : null}\n            </NavLink>\n            <Collapse isOpen={this.state[prop.state]}>\n              <Nav className=\"nav-sm flex-column\">\n                {this.createLinks(prop.views)}\n              </Nav>\n            </Collapse>\n          </NavItem>\n        );\n      }\n      return (\n        <NavItem\n          className={this.activeRoute(prop.layout + prop.path)}\n          key={key}\n        >\n          <NavLink\n            to={prop.layout + prop.path}\n            activeClassName=\"\"\n            onClick={this.closeSidenav}\n            tag={NavLinkRRD}\n          >\n            {prop.icon !== undefined ? (\n              <>\n                <i className={prop.icon} />\n                <span className=\"nav-link-text\">{prop.name}</span>\n              </>\n            ) : prop.miniName !== undefined ? (\n              <>\n                <span className=\"sidenav-mini-icon\"> {prop.miniName} </span>\n                <span className=\"sidenav-normal\"> {prop.name} </span>\n              </>\n            ) : (\n              prop.name\n            )}\n          </NavLink>\n        </NavItem>\n      );\n    });\n  };\n  render() {\n    const { routes, logo } = this.props;\n    let navbarBrandProps;\n    if (logo && logo.innerLink) {\n      navbarBrandProps = {\n        to: logo.innerLink,\n        tag: Link\n      };\n    } else if (logo && logo.outterLink) {\n      navbarBrandProps = {\n        href: logo.outterLink,\n        target: \"_blank\"\n      };\n    }\n    const scrollBarInner = (\n      <div className=\"scrollbar-inner\">\n        <div className=\"sidenav-header d-flex align-items-center\">\n          {logo ? (\n            <NavbarBrand {...navbarBrandProps}>\n              <img\n                alt={logo.imgAlt}\n                className=\"navbar-brand-img\"\n                src={logo.imgSrc}\n              />\n            </NavbarBrand>\n          ) : null}\n          <div className=\"ml-auto\">\n            <div\n              className={classnames(\"sidenav-toggler d-none d-xl-block\", {\n                active: this.props.sidenavOpen\n              })}\n              onClick={this.props.toggleSidenav}\n            >\n              <div className=\"sidenav-toggler-inner\">\n                <i className=\"sidenav-toggler-line\" />\n                <i className=\"sidenav-toggler-line\" />\n                <i className=\"sidenav-toggler-line\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"navbar-inner\">\n          <Collapse navbar isOpen={true}>\n            <Nav navbar>{this.createLinks(routes)}</Nav>\n          </Collapse>\n        </div>\n      </div>\n    );\n    return (\n      <Navbar\n        className={\n          \"sidenav navbar-vertical navbar-expand-xs navbar-light bg-white \" +\n          (this.props.rtlActive ? \"\" : \"fixed-left\")\n        }\n        onMouseEnter={this.onMouseEnterSidenav}\n        onMouseLeave={this.onMouseLeaveSidenav}\n      >\n        {navigator.platform.indexOf(\"Win\") > -1 ? (\n          <PerfectScrollbar>{scrollBarInner}</PerfectScrollbar>\n        ) : (\n          scrollBarInner\n        )}\n      </Navbar>\n    );\n  }\n}\n\nSidebar.defaultProps = {\n  routes: [{}],\n  toggleSidenav: () => {},\n  sidenavOpen: false,\n  rtlActive: false\n};\n\nSidebar.propTypes = {\n  // function used to make sidenav mini or normal\n  toggleSidenav: PropTypes.func,\n  // prop to know if the sidenav is mini or normal\n  sidenavOpen: PropTypes.bool,\n  // links that will be displayed inside the component\n  routes: PropTypes.arrayOf(PropTypes.object),\n  // logo\n  logo: PropTypes.shape({\n    // innerLink is for links that will direct the user within the app\n    // it will be rendered as <Link to=\"...\">...</Link> tag\n    innerLink: PropTypes.string,\n    // outterLink is for links that will direct the user outside the app\n    // it will be rendered as simple <a href=\"...\">...</a> tag\n    outterLink: PropTypes.string,\n    // the image src of the logo\n    imgSrc: PropTypes.string.isRequired,\n    // the alt for the img\n    imgAlt: PropTypes.string.isRequired\n  }),\n  // rtl active, this will make the sidebar to stay on the right side\n  rtlActive: PropTypes.bool\n};\n\nexport default Sidebar;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// JavaScript library that creates a callendar with events\nimport { Calendar } from \"@fullcalendar/core\";\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\nimport interaction from \"@fullcalendar/interaction\";\n// react component used to create sweet alerts\nimport ReactBSAlert from \"react-bootstrap-sweetalert\";\n// reactstrap components\nimport {\n  Button,\n  ButtonGroup,\n  Card,\n  CardHeader,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  Modal,\n  Container,\n  Row,\n  Col,\n  Breadcrumb,\n  BreadcrumbItem\n} from \"reactstrap\";\n// core components\n\nimport { events } from \"variables/general.js\";\n\nlet calendar;\n\nclass CalendarView extends React.Component {\n  state = {\n    events: events,\n    alert: null\n  };\n  componentDidMount() {\n    this.createCalendar();\n  }\n  createCalendar = () => {\n    calendar = new Calendar(this.refs.calendar, {\n      plugins: [interaction, dayGridPlugin],\n      defaultView: \"dayGridMonth\",\n      selectable: true,\n      selectHelper: true,\n      editable: true,\n      events: this.state.events,\n      // Add new event\n      select: info => {\n        this.setState({\n          modalAdd: true,\n          startDate: info.startStr,\n          endDate: info.endStr,\n          radios: \"bg-info\"\n        });\n      },\n      // Edit calendar event action\n      eventClick: ({ event }) => {\n        this.setState({\n          modalChange: true,\n          eventId: event.id,\n          eventTitle: event.title,\n          eventDescription: event.extendedProps.description,\n          radios: \"bg-info\",\n          event: event\n        });\n      }\n    });\n    calendar.render();\n    this.setState({\n      currentDate: calendar.view.title\n    });\n  };\n  changeView = newView => {\n    calendar.changeView(newView);\n    this.setState({\n      currentDate: calendar.view.title\n    });\n  };\n  addNewEvent = () => {\n    var newEvents = this.state.events;\n    newEvents.push({\n      title: this.state.eventTitle,\n      start: this.state.startDate,\n      end: this.state.endDate,\n      className: this.state.radios,\n      id: this.state.events[this.state.events.length - 1] + 1\n    });\n    calendar.addEvent({\n      title: this.state.eventTitle,\n      start: this.state.startDate,\n      end: this.state.endDate,\n      className: this.state.radios,\n      id: this.state.events[this.state.events.length - 1] + 1\n    });\n    this.setState({\n      modalAdd: false,\n      events: newEvents,\n      startDate: undefined,\n      endDate: undefined,\n      radios: \"bg-info\",\n      eventTitle: undefined\n    });\n  };\n  changeEvent = () => {\n    var newEvents = this.state.events.map((prop, key) => {\n      if (prop.id + \"\" === this.state.eventId + \"\") {\n        this.state.event.remove();\n        calendar.addEvent({\n          ...prop,\n          title: this.state.eventTitle,\n          className: this.state.radios,\n          description: this.state.eventDescription\n        });\n        return {\n          ...prop,\n          title: this.state.eventTitle,\n          className: this.state.radios,\n          description: this.state.eventDescription\n        };\n      } else {\n        return prop;\n      }\n    });\n    this.setState({\n      modalChange: false,\n      events: newEvents,\n      radios: \"bg-info\",\n      eventTitle: undefined,\n      eventDescription: undefined,\n      eventId: undefined,\n      event: undefined\n    });\n  };\n  deleteEventSweetAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          warning\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Are you sure?\"\n          onConfirm={() =>\n            this.setState({\n              alert: false,\n              radios: \"bg-info\",\n              eventTitle: undefined,\n              eventDescription: undefined,\n              eventId: undefined\n            })\n          }\n          onCancel={() => this.deleteEvent()}\n          confirmBtnCssClass=\"btn-secondary\"\n          cancelBtnBsStyle=\"danger\"\n          confirmBtnText=\"Cancel\"\n          cancelBtnText=\"Yes, delete it\"\n          showCancel\n          btnSize=\"\"\n        >\n          You won't be able to revert this!\n        </ReactBSAlert>\n      )\n    });\n  };\n  deleteEvent = () => {\n    var newEvents = this.state.events.filter(\n      prop => prop.id + \"\" !== this.state.eventId\n    );\n    this.state.event.remove();\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          success\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Success\"\n          onConfirm={() => this.setState({ alert: null })}\n          onCancel={() => this.setState({ alert: null })}\n          confirmBtnBsStyle=\"primary\"\n          confirmBtnText=\"Ok\"\n          btnSize=\"\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      ),\n      modalChange: false,\n      events: newEvents,\n      radios: \"bg-info\",\n      eventTitle: undefined,\n      eventDescription: undefined,\n      eventId: undefined,\n      event: undefined\n    });\n  };\n  render() {\n    return (\n      <>\n        {this.state.alert}\n        <div className=\"header header-dark bg-info pb-6 content__title content__title--calendar\">\n          <Container fluid>\n            <div className=\"header-body\">\n              <Row className=\"align-items-center py-4\">\n                <Col lg=\"6\">\n                  <h6 className=\"fullcalendar-title h2 text-white d-inline-block mb-0 mr-1\">\n                    {this.state.currentDate}\n                  </h6>\n                  <Breadcrumb\n                    className=\"d-none d-md-inline-block ml-lg-4\"\n                    listClassName=\"breadcrumb-links breadcrumb-dark\"\n                  >\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <i className=\"fas fa-home\" />\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        Dashboard\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem aria-current=\"page\" className=\"active\">\n                      Calendar\n                    </BreadcrumbItem>\n                  </Breadcrumb>\n                </Col>\n                <Col className=\"mt-3 mt-md-0 text-md-right\" lg=\"6\">\n                  <Button\n                    className=\"fullcalendar-btn-prev btn-neutral\"\n                    color=\"default\"\n                    onClick={() => {\n                      calendar.next();\n                    }}\n                    size=\"sm\"\n                  >\n                    <i className=\"fas fa-angle-left\" />\n                  </Button>\n                  <Button\n                    className=\"fullcalendar-btn-next btn-neutral\"\n                    color=\"default\"\n                    onClick={() => {\n                      calendar.prev();\n                    }}\n                    size=\"sm\"\n                  >\n                    <i className=\"fas fa-angle-right\" />\n                  </Button>\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"default\"\n                    data-calendar-view=\"month\"\n                    onClick={() => this.changeView(\"dayGridMonth\")}\n                    size=\"sm\"\n                  >\n                    Month\n                  </Button>\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"default\"\n                    data-calendar-view=\"basicWeek\"\n                    onClick={() => this.changeView(\"dayGridWeek\")}\n                    size=\"sm\"\n                  >\n                    Week\n                  </Button>\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"default\"\n                    data-calendar-view=\"basicDay\"\n                    onClick={() => this.changeView(\"dayGridDay\")}\n                    size=\"sm\"\n                  >\n                    Day\n                  </Button>\n                </Col>\n              </Row>\n            </div>\n          </Container>\n        </div>\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card className=\"card-calendar\">\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Calendar</h5>\n                </CardHeader>\n                <CardBody className=\"p-0\">\n                  <div\n                    className=\"calendar\"\n                    data-toggle=\"calendar\"\n                    id=\"calendar\"\n                    ref=\"calendar\"\n                  />\n                </CardBody>\n              </Card>\n              <Modal\n                isOpen={this.state.modalAdd}\n                toggle={() => this.setState({ modalAdd: false })}\n                className=\"modal-dialog-centered modal-secondary\"\n              >\n                <div className=\"modal-body\">\n                  <form className=\"new-event--form\">\n                    <FormGroup>\n                      <label className=\"form-control-label\">Event title</label>\n                      <Input\n                        className=\"form-control-alternative new-event--title\"\n                        placeholder=\"Event Title\"\n                        type=\"text\"\n                        onChange={e =>\n                          this.setState({ eventTitle: e.target.value })\n                        }\n                      />\n                    </FormGroup>\n                    <FormGroup className=\"mb-0\">\n                      <label className=\"form-control-label d-block mb-3\">\n                        Status color\n                      </label>\n                      <ButtonGroup\n                        className=\"btn-group-toggle btn-group-colors event-tag\"\n                        data-toggle=\"buttons\"\n                      >\n                        <Button\n                          className={classnames(\"bg-info\", {\n                            active: this.state.radios === \"bg-info\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => this.setState({ radios: \"bg-info\" })}\n                        />\n                        <Button\n                          className={classnames(\"bg-warning\", {\n                            active: this.state.radios === \"bg-warning\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-warning\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-danger\", {\n                            active: this.state.radios === \"bg-danger\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => this.setState({ radios: \"bg-danger\" })}\n                        />\n                        <Button\n                          className={classnames(\"bg-success\", {\n                            active: this.state.radios === \"bg-success\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-success\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-default\", {\n                            active: this.state.radios === \"bg-default\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-default\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-primary\", {\n                            active: this.state.radios === \"bg-primary\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => {\n                            this.setState({ radios: \"bg-primary\" });\n                          }}\n                        />\n                      </ButtonGroup>\n                    </FormGroup>\n                  </form>\n                </div>\n                <div className=\"modal-footer\">\n                  <Button\n                    className=\"new-event--add\"\n                    color=\"primary\"\n                    type=\"button\"\n                    onClick={this.addNewEvent}\n                  >\n                    Add event\n                  </Button>\n                  <Button\n                    className=\"ml-auto\"\n                    color=\"link\"\n                    type=\"button\"\n                    onClick={() => this.setState({ modalAdd: false })}\n                  >\n                    Close\n                  </Button>\n                </div>\n              </Modal>\n              <Modal\n                isOpen={this.state.modalChange}\n                toggle={() => this.setState({ modalChange: false })}\n                className=\"modal-dialog-centered modal-secondary\"\n              >\n                <div className=\"modal-body\">\n                  <Form className=\"edit-event--form\">\n                    <FormGroup>\n                      <label className=\"form-control-label\">Event title</label>\n                      <Input\n                        className=\"form-control-alternative edit-event--title\"\n                        placeholder=\"Event Title\"\n                        type=\"text\"\n                        defaultValue={this.state.eventTitle}\n                        onChange={e =>\n                          this.setState({ eventTitle: e.target.value })\n                        }\n                      />\n                    </FormGroup>\n                    <FormGroup>\n                      <label className=\"form-control-label d-block mb-3\">\n                        Status color\n                      </label>\n                      <ButtonGroup\n                        className=\"btn-group-toggle btn-group-colors event-tag mb-0\"\n                        data-toggle=\"buttons\"\n                      >\n                        <Button\n                          className={classnames(\"bg-info\", {\n                            active: this.state.radios === \"bg-info\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => this.setState({ radios: \"bg-info\" })}\n                        />\n                        <Button\n                          className={classnames(\"bg-warning\", {\n                            active: this.state.radios === \"bg-warning\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-warning\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-danger\", {\n                            active: this.state.radios === \"bg-danger\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => this.setState({ radios: \"bg-danger\" })}\n                        />\n                        <Button\n                          className={classnames(\"bg-success\", {\n                            active: this.state.radios === \"bg-success\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-success\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-default\", {\n                            active: this.state.radios === \"bg-default\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() =>\n                            this.setState({ radios: \"bg-default\" })\n                          }\n                        />\n                        <Button\n                          className={classnames(\"bg-primary\", {\n                            active: this.state.radios === \"bg-primary\"\n                          })}\n                          color=\"\"\n                          type=\"button\"\n                          onClick={() => {\n                            this.setState({ radios: \"bg-primary\" });\n                          }}\n                        />\n                      </ButtonGroup>\n                    </FormGroup>\n                    <FormGroup>\n                      <label className=\"form-control-label\">Description</label>\n                      <Input\n                        className=\"form-control-alternative edit-event--description textarea-autosize\"\n                        placeholder=\"Event Desctiption\"\n                        type=\"textarea\"\n                        defaultValue={this.state.eventDescription}\n                        onChange={e =>\n                          this.setState({ eventDescription: e.target.value })\n                        }\n                      />\n                      <i className=\"form-group--bar\" />\n                    </FormGroup>\n                    <input className=\"edit-event--id\" type=\"hidden\" />\n                  </Form>\n                </div>\n                <div className=\"modal-footer\">\n                  <Button color=\"primary\" onClick={this.changeEvent}>\n                    Update\n                  </Button>\n                  <Button\n                    color=\"danger\"\n                    onClick={() =>\n                      this.setState({ modalChange: false }, () =>\n                        this.deleteEventSweetAlert()\n                      )\n                    }\n                  >\n                    Delete\n                  </Button>\n                  <Button\n                    className=\"ml-auto\"\n                    color=\"link\"\n                    onClick={() => this.setState({ modalChange: false })}\n                  >\n                    Close\n                  </Button>\n                </div>\n              </Modal>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default CalendarView;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n\nclass AlternativeHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div className=\"header pb-6\">\n          <Container fluid>\n            <div className=\"header-body\">\n              <Row className=\"align-items-center py-4\">\n                <Col lg=\"6\" xs=\"7\">\n                  <h6 className=\"h2 d-inline-block mb-0\">Alternative</h6>{\" \"}\n                  <Breadcrumb\n                    className=\"d-none d-md-inline-block ml-md-4\"\n                    listClassName=\"breadcrumb-links\"\n                  >\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <i className=\"fas fa-home\" />\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        Dashboards\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem aria-current=\"page\" className=\"active\">\n                      Alternative\n                    </BreadcrumbItem>\n                  </Breadcrumb>\n                </Col>\n                <Col className=\"text-right\" lg=\"6\" xs=\"5\">\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    New\n                  </Button>\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    Filters\n                  </Button>\n                </Col>\n              </Row>\n            </div>\n          </Container>\n        </div>\n      </>\n    );\n  }\n}\n\nexport default AlternativeHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react plugin for creating vector maps\nimport { VectorMap } from \"react-jvectormap\";\n// javascipt plugin for creating charts\nimport Chart from \"chart.js\";\n// react plugin used to create charts\nimport { Line, Bar } from \"react-chartjs-2\";\n// reactstrap components\nimport {\n  Badge,\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardTitle,\n  DropdownMenu,\n  DropdownItem,\n  DropdownToggle,\n  UncontrolledDropdown,\n  ListGroupItem,\n  ListGroup,\n  Media,\n  Progress,\n  Table,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip\n} from \"reactstrap\";\n// core components\nimport AlternativeHeader from \"components/Headers/AlternativeHeader.js\";\n\nimport {\n  chartOptions,\n  parseOptions,\n  chartExample2,\n  chartExample3\n} from \"variables/charts.js\";\n\nlet mapData = {\n  AU: 760,\n  BR: 550,\n  CA: 120,\n  DE: 1300,\n  FR: 540,\n  GB: 690,\n  GE: 200,\n  IN: 200,\n  RO: 600,\n  RU: 300,\n  US: 2920\n};\n\nclass Alternative extends React.Component {\n  constructor(props) {\n    super(props);\n    if (window.Chart) {\n      parseOptions(Chart, chartOptions());\n    }\n  }\n  render() {\n    return (\n      <>\n        <AlternativeHeader />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col md=\"6\" xl=\"3\">\n              <Card className=\"bg-gradient-primary border-0\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle\n                        tag=\"h5\"\n                        className=\"text-uppercase text-muted mb-0 text-white\"\n                      >\n                        Tasks completed\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        8/24\n                      </span>\n                      <Progress\n                        className=\"progress-xs mt-3 mb-0\"\n                        max=\"100\"\n                        value=\"30\"\n                        color=\"success\"\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          size=\"sm\"\n                          color=\"neutral\"\n                          className=\"mr-0\"\n                        >\n                          <i className=\"fas fa-ellipsis-h\" />\n                        </DropdownToggle>\n                        <DropdownMenu right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <a\n                      className=\"text-nowrap text-white font-weight-600\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      See details\n                    </a>\n                  </p>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col md=\"6\" xl=\"3\">\n              <Card className=\"bg-gradient-info border-0\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle\n                        tag=\"h5\"\n                        className=\"text-uppercase text-muted mb-0 text-white\"\n                      >\n                        Contacts\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        123/267\n                      </span>\n                      <Progress\n                        className=\"progress-xs mt-3 mb-0\"\n                        max=\"100\"\n                        value=\"50\"\n                        color=\"success\"\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          size=\"sm\"\n                          color=\"neutral\"\n                          className=\"mr-0\"\n                        >\n                          <i className=\"fas fa-ellipsis-h\" />\n                        </DropdownToggle>\n                        <DropdownMenu right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <a\n                      className=\"text-nowrap text-white font-weight-600\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      See details\n                    </a>\n                  </p>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col md=\"6\" xl=\"3\">\n              <Card className=\"bg-gradient-danger border-0\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle\n                        tag=\"h5\"\n                        className=\"text-uppercase text-muted mb-0 text-white\"\n                      >\n                        Items sold\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        200/300\n                      </span>\n                      <Progress\n                        className=\"progress-xs mt-3 mb-0\"\n                        max=\"100\"\n                        value=\"80\"\n                        color=\"success\"\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          size=\"sm\"\n                          color=\"neutral\"\n                          className=\"mr-0\"\n                        >\n                          <i className=\"fas fa-ellipsis-h\" />\n                        </DropdownToggle>\n                        <DropdownMenu right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <a\n                      className=\"text-nowrap text-white font-weight-600\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      See details\n                    </a>\n                  </p>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col md=\"6\" xl=\"3\">\n              <Card className=\"bg-gradient-default border-0\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle\n                        tag=\"h5\"\n                        className=\"text-uppercase text-muted mb-0 text-white\"\n                      >\n                        Notifications\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        50/62\n                      </span>\n                      <Progress\n                        className=\"progress-xs mt-3 mb-0\"\n                        max=\"100\"\n                        value=\"90\"\n                        color=\"success\"\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          size=\"sm\"\n                          color=\"neutral\"\n                          className=\"mr-0\"\n                        >\n                          <i className=\"fas fa-ellipsis-h\" />\n                        </DropdownToggle>\n                        <DropdownMenu right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <a\n                      className=\"text-nowrap text-white font-weight-600\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      See details\n                    </a>\n                  </p>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <div className=\"card-deck flex-column flex-xl-row\">\n            <Card>\n              <CardHeader className=\"bg-transparent\">\n                <h6 className=\"text-muted text-uppercase ls-1 mb-1\">\n                  Overview\n                </h6>\n                <h2 className=\"h3 mb-0\">Sales value</h2>\n              </CardHeader>\n              <CardBody>\n                <div className=\"chart\">\n                  <Line\n                    data={chartExample3.data}\n                    options={chartExample3.options}\n                    id=\"chart-sales\"\n                    className=\"chart-canvas\"\n                  />\n                </div>\n              </CardBody>\n            </Card>\n            <Card>\n              <CardHeader className=\"bg-transparent\">\n                <Row className=\"align-items-center\">\n                  <div className=\"col\">\n                    <h6 className=\"text-uppercase text-muted ls-1 mb-1\">\n                      Performance\n                    </h6>\n                    <h2 className=\"h3 mb-0\">Total orders</h2>\n                  </div>\n                </Row>\n              </CardHeader>\n              <CardBody>\n                <div className=\"chart\">\n                  <Bar\n                    data={chartExample2.data}\n                    options={chartExample2.options}\n                    className=\"chart-canvas\"\n                    id=\"chart-bars\"\n                  />\n                </div>\n              </CardBody>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <Row className=\"align-items-center\">\n                  <Col xs=\"8\">\n                    <h6 className=\"surtitle\">5/23 projects</h6>\n\n                    <h5 className=\"h3 mb-0\">Progress track</h5>\n                  </Col>\n                  <Col className=\"text-right\" xs=\"4\">\n                    <Button\n                      className=\"btn-neutral\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      Action\n                    </Button>\n                  </Col>\n                </Row>\n              </CardHeader>\n\n              <CardBody>\n                <ListGroup className=\"list my--3\" flush>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/bootstrap.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Argon Design System</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"60\"\n                          color=\"warning\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/angular.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Angular Now UI Kit PRO</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"100\"\n                          color=\"success\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/sketch.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Black Dashboard</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"72\"\n                          color=\"danger\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/react.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>React Material Dashboard</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"90\"\n                          color=\"info\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/vue.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Vue Paper UI Kit PRO</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"100\"\n                          color=\"success\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                </ListGroup>\n              </CardBody>\n            </Card>\n          </div>\n          <Row>\n            <Col xl=\"8\">\n              <Card>\n                <CardHeader className=\"border-0\">\n                  <Row className=\"align-items-center\">\n                    <div className=\"col\">\n                      <h3 className=\"mb-0\">Page visits</h3>\n                    </div>\n                    <div className=\"col text-right\">\n                      <Button\n                        color=\"primary\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        See all\n                      </Button>\n                    </div>\n                  </Row>\n                </CardHeader>\n                <Table className=\"align-items-center table-flush\" responsive>\n                  <thead className=\"thead-light\">\n                    <tr>\n                      <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                        Project\n                      </th>\n                      <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                        Budget\n                      </th>\n                      <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                        Status\n                      </th>\n                      <th scope=\"col\">Users</th>\n                      <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                        Completion\n                      </th>\n                      <th scope=\"col\" />\n                    </tr>\n                  </thead>\n                  <tbody className=\"list\">\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Argon Design System\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2500 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-warning\" />\n                          <span className=\"status\">pending</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip133563378\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip133563378\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip336932279\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip336932279\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip619079522\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip619079522\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip432104658\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip432104658\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">60%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Angular Now UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$1800 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip634319950\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip634319950\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip493477456\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip493477456\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip556499717\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip556499717\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip106307927\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip106307927\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Black Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$3150 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-danger\" />\n                          <span className=\"status\">delayed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip389668727\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip389668727\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip477178747\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip477178747\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip927225283\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip927225283\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip394856270\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip394856270\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">72%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              React Material Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$4400 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-info\" />\n                          <span className=\"status\">on schedule</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip51649841\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip51649841\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip85562388\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip85562388\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip195204481\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip195204481\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip967941406\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip967941406\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">90%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"90\" color=\"info\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Vue Paper UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2200 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip177298166\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip177298166\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip290379011\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip290379011\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip2287293\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip2287293\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip539852250\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip539852250\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Argon Design System\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2500 USD</td>\n                      <td>\n                        <Badge className=\"badge-dot mr-4\" color=\"\">\n                          <i className=\"bg-warning\" />\n                          <span className=\"status\">pending</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip758997307\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip758997307\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip597292977\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip597292977\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip443183509\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip443183509\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip806450131\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip806450131\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">60%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            color=\"\"\n                            size=\"sm\"\n                            className=\"btn-icon-only text-light\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                  </tbody>\n                </Table>\n              </Card>\n            </Col>\n            <Col xl=\"4\">\n              <Card className=\"widget-calendar\">\n                <CardHeader>\n                  <Row className=\"align-items-center\">\n                    <Col xs=\"8\">\n                      <h5 className=\"h3 mb-0\">Real time</h5>\n                    </Col>\n                    <Col className=\"text-right\" xs=\"4\">\n                      <Button\n                        className=\"btn-neutral\"\n                        color=\"default\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        Action\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <VectorMap\n                    containerClassName=\"vector-map vector-map-sm\"\n                    containerStyle={{\n                      width: \"100%\",\n                      height: \"280px\"\n                    }}\n                    map={\"world_mill\"}\n                    zoomOnScroll={false}\n                    scaleColors={[\"#f00\", \"#0071A4\"]}\n                    normalizeFunction=\"polynomial\"\n                    hoverOpacity={0.7}\n                    hoverColor={false}\n                    backgroundColor=\"transparent\"\n                    regionStyle={{\n                      initial: {\n                        fill: \"#e9ecef\",\n                        \"fill-opacity\": 0.8,\n                        stroke: \"none\",\n                        \"stroke-width\": 0,\n                        \"stroke-opacity\": 1\n                      },\n                      hover: {\n                        fill: \"#dee2e6\",\n                        \"fill-opacity\": 0.8,\n                        cursor: \"pointer\"\n                      },\n                      selected: {\n                        fill: \"yellow\"\n                      },\n                      selectedHover: {}\n                    }}\n                    markerStyle={{\n                      initial: {\n                        fill: \"#fb6340\",\n                        \"stroke-width\": 0\n                      },\n                      hover: {\n                        fill: \"#11cdef\",\n                        \"stroke-width\": 0\n                      }\n                    }}\n                    markers={[\n                      {\n                        latLng: [41.9, 12.45],\n                        name: \"Vatican City\"\n                      },\n                      {\n                        latLng: [43.73, 7.41],\n                        name: \"Monaco\"\n                      },\n                      {\n                        latLng: [35.88, 14.5],\n                        name: \"Malta\"\n                      },\n                      {\n                        latLng: [1.3, 103.8],\n                        name: \"Singapore\"\n                      },\n                      {\n                        latLng: [1.46, 173.03],\n                        name: \"Kiribati\"\n                      },\n                      {\n                        latLng: [-21.13, -175.2],\n                        name: \"Tonga\"\n                      },\n                      {\n                        latLng: [15.3, -61.38],\n                        name: \"Dominica\"\n                      },\n                      {\n                        latLng: [-20.2, 57.5],\n                        name: \"Mauritius\"\n                      },\n                      {\n                        latLng: [26.02, 50.55],\n                        name: \"Bahrain\"\n                      }\n                    ]}\n                    series={{\n                      regions: [\n                        {\n                          values: mapData,\n                          scale: [\"#ced4da\", \"#adb5bd\"],\n                          normalizeFunction: \"polynomial\"\n                        }\n                      ]\n                    }}\n                  />\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/US.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">United States</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/DE.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">Germany</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/GB.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">Great Britain</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <div className=\"card-deck flex-column flex-xl-row\">\n            <Card>\n              <CardHeader>\n                <h5 className=\"h3 mb-0\">Team members</h5>\n              </CardHeader>\n              <CardBody>\n                <ListGroup className=\"list my--3\" flush>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col ml--2\">\n                        <h4 className=\"mb-0\">\n                          <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                            John Michael\n                          </a>\n                        </h4>\n                        <span className=\"text-success mr-1\">●</span>\n                        <small>Online</small>\n                      </div>\n                      <Col className=\"col-auto\">\n                        <Button color=\"primary\" size=\"sm\" type=\"button\">\n                          Add\n                        </Button>\n                      </Col>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col ml--2\">\n                        <h4 className=\"mb-0\">\n                          <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                            Alex Smith\n                          </a>\n                        </h4>\n                        <span className=\"text-warning mr-1\">●</span>\n                        <small>In a meeting</small>\n                      </div>\n                      <Col className=\"col-auto\">\n                        <Button color=\"primary\" size=\"sm\" type=\"button\">\n                          Add\n                        </Button>\n                      </Col>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col ml--2\">\n                        <h4 className=\"mb-0\">\n                          <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                            Samantha Ivy\n                          </a>\n                        </h4>\n                        <span className=\"text-danger mr-1\">●</span>\n                        <small>Offline</small>\n                      </div>\n                      <Col className=\"col-auto\">\n                        <Button color=\"primary\" size=\"sm\" type=\"button\">\n                          Add\n                        </Button>\n                      </Col>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col ml--2\">\n                        <h4 className=\"mb-0\">\n                          <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                            John Michael\n                          </a>\n                        </h4>\n                        <span className=\"text-success mr-1\">●</span>\n                        <small>Online</small>\n                      </div>\n                      <Col className=\"col-auto\">\n                        <Button color=\"primary\" size=\"sm\" type=\"button\">\n                          Add\n                        </Button>\n                      </Col>\n                    </Row>\n                  </ListGroupItem>\n                </ListGroup>\n              </CardBody>\n            </Card>\n            <Card>\n              <CardHeader>\n                <h5 className=\"h3 mb-0\">To do list</h5>\n              </CardHeader>\n              <CardBody className=\"p-0\">\n                <ListGroup data-toggle=\"checklist\" flush>\n                  <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                    <div className=\"checklist-item checklist-item-success checklist-item-checked\">\n                      <div className=\"checklist-info\">\n                        <h5 className=\"checklist-title mb-0\">Call with Dave</h5>\n                        <small>10:30 AM</small>\n                      </div>\n                      <div>\n                        <div className=\"custom-control custom-checkbox custom-checkbox-success\">\n                          <input\n                            className=\"custom-control-input\"\n                            defaultChecked\n                            id=\"chk-todo-task-1\"\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"chk-todo-task-1\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                    <div className=\"checklist-item checklist-item-warning\">\n                      <div className=\"checklist-info\">\n                        <h5 className=\"checklist-title mb-0\">Lunch meeting</h5>\n                        <small>10:30 AM</small>\n                      </div>\n                      <div>\n                        <div className=\"custom-control custom-checkbox custom-checkbox-warning\">\n                          <input\n                            className=\"custom-control-input\"\n                            id=\"chk-todo-task-2\"\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"chk-todo-task-2\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                    <div className=\"checklist-item checklist-item-info\">\n                      <div className=\"checklist-info\">\n                        <h5 className=\"checklist-title mb-0\">\n                          Argon Dashboard Launch\n                        </h5>\n                        <small>10:30 AM</small>\n                      </div>\n                      <div>\n                        <div className=\"custom-control custom-checkbox custom-checkbox-info\">\n                          <input\n                            className=\"custom-control-input\"\n                            id=\"chk-todo-task-3\"\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"chk-todo-task-3\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                    <div className=\"checklist-item checklist-item-danger checklist-item-checked\">\n                      <div className=\"checklist-info\">\n                        <h5 className=\"checklist-title mb-0\">\n                          Winter Hackaton\n                        </h5>\n                        <small>10:30 AM</small>\n                      </div>\n                      <div>\n                        <div className=\"custom-control custom-checkbox custom-checkbox-danger\">\n                          <input\n                            className=\"custom-control-input\"\n                            defaultChecked\n                            id=\"chk-todo-task-4\"\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"chk-todo-task-4\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </ListGroupItem>\n                </ListGroup>\n              </CardBody>\n            </Card>\n            <Card>\n              <CardHeader>\n                <h5 className=\"h3 mb-0\">Progress track</h5>\n              </CardHeader>\n              <CardBody>\n                <ListGroup className=\"list my--3\" flush>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/bootstrap.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Argon Design System</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"60\"\n                          color=\"warning\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/angular.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Angular Now UI Kit PRO</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"100\"\n                          color=\"success\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/sketch.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>Black Dashboard</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"72\"\n                          color=\"danger\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                  <ListGroupItem className=\"px-0\">\n                    <Row className=\"align-items-center\">\n                      <Col className=\"col-auto\">\n                        <a\n                          className=\"avatar rounded-circle\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/react.jpg\")}\n                          />\n                        </a>\n                      </Col>\n                      <div className=\"col\">\n                        <h5>React Material Dashboard</h5>\n                        <Progress\n                          className=\"progress-xs mb-0\"\n                          max=\"100\"\n                          value=\"90\"\n                          color=\"info\"\n                        />\n                      </div>\n                    </Row>\n                  </ListGroupItem>\n                </ListGroup>\n              </CardBody>\n            </Card>\n          </div>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Alternative;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// reactstrap components\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n\nclass TimelineHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div className=\"header header-dark bg-info pb-6 content__title content__title--calendar\">\n          <Container fluid>\n            <div className=\"header-body\">\n              <Row className=\"align-items-center py-4\">\n                <Col lg=\"6\" xs=\"7\">\n                  <h6 className=\"fullcalendar-title h2 text-white d-inline-block mb-0\">\n                    {this.props.name}\n                  </h6>{\" \"}\n                  <Breadcrumb\n                    className=\"d-none d-md-inline-block ml-lg-4\"\n                    listClassName=\"breadcrumb-links breadcrumb-dark\"\n                  >\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <i className=\"fas fa-home\" />\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        {this.props.parentName}\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem aria-current=\"page\" className=\"active\">\n                      {this.props.name}\n                    </BreadcrumbItem>\n                  </Breadcrumb>\n                </Col>\n                <Col className=\"mt-3 mt-md-0 text-md-right\" lg=\"6\" xs=\"5\">\n                  <Button className=\"btn-neutral\" color=\"default\" size=\"sm\">\n                    New\n                  </Button>\n                  <Button className=\"btn-neutral\" color=\"default\" size=\"sm\">\n                    Filters\n                  </Button>\n                </Col>\n              </Row>\n            </div>\n          </Container>\n        </div>\n      </>\n    );\n  }\n}\n\nTimelineHeader.propTypes = {\n  name: PropTypes.string,\n  parentName: PropTypes.string\n};\n\nexport default TimelineHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Button,\n  ButtonGroup,\n  Card,\n  CardHeader,\n  CardBody,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Buttons extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Buttons\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"justify-content-center\">\n            <Col className=\"card-wrapper ct-example\" lg=\"8\">\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Styles</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button color=\"primary\" type=\"button\">\n                    Button\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"primary\" type=\"button\">\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"ni ni-bag-17\" />\n                    </span>\n                    <span className=\"btn-inner--text\">With icon</span>\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"primary\" type=\"button\">\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"ni ni-atom\" />\n                    </span>\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Colors</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button color=\"default\" type=\"button\">\n                    Default\n                  </Button>\n                  <Button color=\"primary\" type=\"button\">\n                    Primary\n                  </Button>\n                  <Button color=\"secondary\" type=\"button\">\n                    Secondary\n                  </Button>\n                  <Button color=\"info\" type=\"button\">\n                    Info\n                  </Button>\n                  <Button color=\"success\" type=\"button\">\n                    Success\n                  </Button>\n                  <Button color=\"danger\" type=\"button\">\n                    Danger\n                  </Button>\n                  <Button color=\"warning\" type=\"button\">\n                    Warning\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Outline</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button color=\"default\" outline type=\"button\">\n                    Default\n                  </Button>\n                  <Button color=\"primary\" outline type=\"button\">\n                    Primary\n                  </Button>\n                  <Button color=\"secondary\" outline type=\"button\">\n                    Secondary\n                  </Button>\n                  <Button color=\"info\" outline type=\"button\">\n                    Info\n                  </Button>\n                  <Button color=\"success\" outline type=\"button\">\n                    Success\n                  </Button>\n                  <Button color=\"danger\" outline type=\"button\">\n                    Danger\n                  </Button>\n                  <Button color=\"warning\" outline type=\"button\">\n                    Warning\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Sizes</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button color=\"primary\" size=\"lg\" type=\"button\">\n                    Large button\n                  </Button>\n                  <Button color=\"secondary\" size=\"lg\" type=\"button\">\n                    Large button\n                  </Button>\n                  <hr />\n                  <Button color=\"primary\" size=\"sm\" type=\"button\">\n                    Small button\n                  </Button>\n                  <Button color=\"secondary\" size=\"sm\" type=\"button\">\n                    Small button\n                  </Button>\n                  <hr />\n                  <Button block color=\"primary\" size=\"lg\" type=\"button\">\n                    Block level button\n                  </Button>\n                  <Button block color=\"secondary\" size=\"lg\" type=\"button\">\n                    Block level button\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Group</h3>\n                </CardHeader>\n                <CardBody>\n                  <ButtonGroup aria-label=\"Basic example\" role=\"group\">\n                    <Button color=\"secondary\" type=\"button\">\n                      Left\n                    </Button>\n                    <Button className=\"active\" color=\"secondary\" type=\"button\">\n                      Middle\n                    </Button>\n                    <Button color=\"secondary\" type=\"button\">\n                      Right\n                    </Button>\n                  </ButtonGroup>\n                  <hr />\n                  <ButtonGroup>\n                    <Button className=\"active\" color=\"info\" type=\"button\">\n                      1\n                    </Button>\n                    <Button color=\"info\" type=\"button\">\n                      2\n                    </Button>\n                    <Button color=\"info\" type=\"button\">\n                      3\n                    </Button>\n                    <Button color=\"info\" type=\"button\">\n                      4\n                    </Button>\n                  </ButtonGroup>\n                  <ButtonGroup>\n                    <Button color=\"default\" type=\"button\">\n                      5\n                    </Button>\n                    <Button color=\"default\" type=\"button\">\n                      6\n                    </Button>\n                    <Button color=\"default\" type=\"button\">\n                      7\n                    </Button>\n                  </ButtonGroup>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Social</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button\n                    className=\"btn-icon my-2\"\n                    color=\"facebook\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-facebook\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Facebook</span>\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"twitter\" type=\"button\">\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-twitter\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Twitter</span>\n                  </Button>\n                  <Button\n                    className=\"btn-google-plus btn-icon\"\n                    color=\"google\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-google-plus-g\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Google +</span>\n                  </Button>\n                  <Button\n                    className=\"btn-instagram btn-icon\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-instagram\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Instagram</span>\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"pinterest\" type=\"button\">\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-pinterest\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Pinterest</span>\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"youtube\" type=\"button\">\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-youtube\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Youtube</span>\n                  </Button>\n                  <Button\n                    className=\"btn-vimeo btn-icon\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-vimeo-v\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Vimeo</span>\n                  </Button>\n                  <Button\n                    className=\"btn-slack btn-icon\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-slack\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Slack</span>\n                  </Button>\n                  <Button className=\"btn-icon\" color=\"dribbble\" type=\"button\">\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fab fa-dribbble\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Dribbble</span>\n                  </Button>\n                  <hr />\n                  <Button\n                    className=\"btn-icon-only\"\n                    color=\"facebook\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-facebook\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only\"\n                    color=\"twitter\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-twitter\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-google-plus btn-icon-only\"\n                    color=\"google\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-google-plus-g\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-instagram btn-icon-only\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-instagram\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only\"\n                    color=\"pinterest\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-pinterest\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only\"\n                    color=\"youtube\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-youtube\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-vimeo btn-icon-only\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-vimeo-v\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-slack btn-icon-only\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-slack\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only\"\n                    color=\"dribbble\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-dribbble\" />\n                    </span>\n                  </Button>\n                  <hr />\n                  <Button\n                    className=\"btn-icon-only rounded-circle\"\n                    color=\"facebook\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-facebook\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only rounded-circle\"\n                    color=\"twitter\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-twitter\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-google-plus btn-icon-only rounded-circle\"\n                    color=\"google\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-google-plus-g\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-instagram btn-icon-only rounded-circle\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-instagram\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only rounded-circle\"\n                    color=\"pinterest\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-pinterest\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only rounded-circle\"\n                    color=\"youtube\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-youtube\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-vimeo btn-icon-only rounded-circle\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-vimeo-v\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-slack btn-icon-only rounded-circle\"\n                    color=\"default\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-slack\" />\n                    </span>\n                  </Button>\n                  <Button\n                    className=\"btn-icon-only rounded-circle\"\n                    color=\"dribbble\"\n                    type=\"button\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fab fa-dribbble\" />\n                    </span>\n                  </Button>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Buttons;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n// ##############################\n// // // data for populating the calendar in Calendar view\n// #############################\n\nvar today = new Date();\nvar y = today.getFullYear();\nvar m = today.getMonth();\nvar d = today.getDate();\n\nconst events = [\n  {\n    id: 1,\n    title: \"Call with Dave\",\n    start: new Date(y, m, 1),\n    allDay: true,\n    className: \"bg-red\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 2,\n    title: \"Lunch meeting\",\n    start: new Date(y, m, d - 1, 10, 30),\n    allDay: true,\n    className: \"bg-orange\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 3,\n    title: \"All day conference\",\n    start: new Date(y, m, d + 7, 12, 0),\n    allDay: true,\n    className: \"bg-green\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 4,\n    title: \"Meeting with Mary\",\n    start: new Date(y, m, d - 2),\n    allDay: true,\n    className: \"bg-blue\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 5,\n    title: \"Winter Hackaton\",\n    start: new Date(y, m, d + 1, 19, 0),\n    allDay: true,\n    className: \"bg-red\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 6,\n    title: \"Digital event\",\n    start: new Date(y, m, 21),\n    allDay: true,\n    className: \"bg-warning\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 7,\n    title: \"Marketing event\",\n    start: new Date(y, m, 21),\n    allDay: true,\n    className: \"bg-purple\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 8,\n    title: \"Dinner with Family\",\n    start: new Date(y, m, 19),\n    allDay: true,\n    className: \"bg-red\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 9,\n    title: \"Black Friday\",\n    start: new Date(y, m, 23),\n    allDay: true,\n    className: \"bg-blue\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  },\n\n  {\n    id: 10,\n    title: \"Cyber Week\",\n    start: new Date(y, m, 2),\n    allDay: true,\n    className: \"bg-yellow\",\n    description:\n      \"Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\"\n  }\n];\n\n// ##############################\n// // // data for populating the calendar in Widgest view\n// #############################\n\nconst widgetEvents = [\n  {\n    title: \"Lunch meeting\",\n    start: \"2018-11-21\",\n    end: \"2018-11-22\",\n    className: \"bg-orange\"\n  },\n  {\n    title: \"All day conference\",\n    start: new Date(y, m - 1, 28),\n    allDay: true,\n    className: \"bg-green\"\n  },\n  {\n    title: \"Meeting with Mary\",\n    start: new Date(y, m, 2),\n    allDay: true,\n    className: \"bg-blue\"\n  },\n  {\n    title: \"Winter Hackaton\",\n    start: new Date(y, m, 4),\n    allDay: true,\n    className: \"bg-red\"\n  },\n  {\n    title: \"Digital event\",\n    start: new Date(y, m, 8),\n    end: new Date(y, m, 10),\n    allDay: true,\n    className: \"bg-warning\"\n  },\n  {\n    title: \"Marketing event\",\n    start: new Date(y, m, 11),\n    allDay: true,\n    className: \"bg-purple\"\n  },\n  {\n    title: \"Dinner with Family\",\n    start: new Date(y, m, 20),\n    allDay: true,\n    className: \"bg-red\"\n  },\n  {\n    title: \"Black Friday\",\n    start: new Date(y, m, 24),\n    allDay: true,\n    className: \"bg-blue\"\n  },\n  {\n    title: \"Cyber Week\",\n    start: new Date(y, m, 3),\n    allDay: true,\n    className: \"bg-yellow\"\n  }\n];\n\n// ##############################\n// // // data for populating the table in ReactTables view\n// #############################\n\nconst charitablePrefs = [\n  {\n    email: \"stuart@stuart.com\",\n    datesubmitted: null\n  },\n  {\n    email: \"evo@evo.com\",\n    datesubmitted: null\n  }\n]\n\nconst dataTable = [\n  {\n    name: \"Tiger Nixon\",\n    position: \"System Architect\",\n    office: \"Edinburgh\",\n    age: \"61\",\n    start_date: \"2011/04/25\",\n    salary: \"$320,800\"\n  },\n  {\n    name: \"Garrett Winters\",\n    position: \"Accountant\",\n    office: \"Tokyo\",\n    age: \"63\",\n    start_date: \"2011/07/25\",\n    salary: \"$170,750\"\n  },\n  {\n    name: \"Ashton Cox\",\n    position: \"Junior Technical Author\",\n    office: \"San Francisco\",\n    age: \"66\",\n    start_date: \"2009/01/12\",\n    salary: \"$86,000\"\n  },\n  {\n    name: \"Cedric Kelly\",\n    position: \"Senior Javascript Developer\",\n    office: \"Edinburgh\",\n    age: \"22\",\n    start_date: \"2012/03/29\",\n    salary: \"$433,060\"\n  },\n  {\n    name: \"Airi Satou\",\n    position: \"Accountant\",\n    office: \"Tokyo\",\n    age: \"33\",\n    start_date: \"2008/11/28\",\n    salary: \"$162,700\"\n  },\n  {\n    name: \"Brielle Williamson\",\n    position: \"Integration Specialist\",\n    office: \"New York\",\n    age: \"61\",\n    start_date: \"2012/12/02\",\n    salary: \"$372,000\"\n  },\n  {\n    name: \"Herrod Chandler\",\n    position: \"Sales Assistant\",\n    office: \"San Francisco\",\n    age: \"59\",\n    start_date: \"2012/08/06\",\n    salary: \"$137,500\"\n  },\n  {\n    name: \"Rhona Davidson\",\n    position: \"Integration Specialist\",\n    office: \"Tokyo\",\n    age: \"55\",\n    start_date: \"2010/10/14\",\n    salary: \"$327,900\"\n  },\n  {\n    name: \"Colleen Hurst\",\n    position: \"Javascript Developer\",\n    office: \"San Francisco\",\n    age: \"39\",\n    start_date: \"2009/09/15\",\n    salary: \"$205,500\"\n  },\n  {\n    name: \"Sonya Frost\",\n    position: \"Software Engineer\",\n    office: \"Edinburgh\",\n    age: \"23\",\n    start_date: \"2008/12/13\",\n    salary: \"$103,600\"\n  },\n  {\n    name: \"Jena Gaines\",\n    position: \"Office Manager\",\n    office: \"London\",\n    age: \"30\",\n    start_date: \"2008/12/19\",\n    salary: \"$90,560\"\n  },\n  {\n    name: \"Quinn Flynn\",\n    position: \"Support Lead\",\n    office: \"Edinburgh\",\n    age: \"22\",\n    start_date: \"2013/03/03\",\n    salary: \"$342,000\"\n  },\n  {\n    name: \"Charde Marshall\",\n    position: \"Regional Director\",\n    office: \"San Francisco\",\n    age: \"36\",\n    start_date: \"2008/10/16\",\n    salary: \"$470,600\"\n  },\n  {\n    name: \"Haley Kennedy\",\n    position: \"Senior Marketing Designer\",\n    office: \"London\",\n    age: \"43\",\n    start_date: \"2012/12/18\",\n    salary: \"$313,500\"\n  },\n  {\n    name: \"Tatyana Fitzpatrick\",\n    position: \"Regional Director\",\n    office: \"London\",\n    age: \"19\",\n    start_date: \"2010/03/17\",\n    salary: \"$385,750\"\n  },\n  {\n    name: \"Michael Silva\",\n    position: \"Marketing Designer\",\n    office: \"London\",\n    age: \"66\",\n    start_date: \"2012/11/27\",\n    salary: \"$198,500\"\n  },\n  {\n    name: \"Paul Byrd\",\n    position: \"Chief Financial Officer (CFO)\",\n    office: \"New York\",\n    age: \"64\",\n    start_date: \"2010/06/09\",\n    salary: \"$725,000\"\n  },\n  {\n    name: \"Gloria Little\",\n    position: \"Systems Administrator\",\n    office: \"New York\",\n    age: \"59\",\n    start_date: \"2009/04/10\",\n    salary: \"$237,500\"\n  },\n  {\n    name: \"Bradley Greer\",\n    position: \"Software Engineer\",\n    office: \"London\",\n    age: \"41\",\n    start_date: \"2012/10/13\",\n    salary: \"$132,000\"\n  },\n  {\n    name: \"Dai Rios\",\n    position: \"Personnel Lead\",\n    office: \"Edinburgh\",\n    age: \"35\",\n    start_date: \"2012/09/26\",\n    salary: \"$217,500\"\n  },\n  {\n    name: \"Jenette Caldwell\",\n    position: \"Development Lead\",\n    office: \"New York\",\n    age: \"30\",\n    start_date: \"2011/09/03\",\n    salary: \"$345,000\"\n  },\n  {\n    name: \"Yuri Berry\",\n    position: \"Chief Marketing Officer (CMO)\",\n    office: \"New York\",\n    age: \"40\",\n    start_date: \"2009/06/25\",\n    salary: \"$675,000\"\n  },\n  {\n    name: \"Caesar Vance\",\n    position: \"Pre-Sales Support\",\n    office: \"New York\",\n    age: \"21\",\n    start_date: \"2011/12/12\",\n    salary: \"$106,450\"\n  },\n  {\n    name: \"Doris Wilder\",\n    position: \"Sales Assistant\",\n    office: \"Sidney\",\n    age: \"23\",\n    start_date: \"2010/09/20\",\n    salary: \"$85,600\"\n  },\n  {\n    name: \"Angelica Ramos\",\n    position: \"Chief Executive Officer (CEO)\",\n    office: \"London\",\n    age: \"47\",\n    start_date: \"2009/10/09\",\n    salary: \"$1,200,000\"\n  },\n  {\n    name: \"Gavin Joyce\",\n    position: \"Developer\",\n    office: \"Edinburgh\",\n    age: \"42\",\n    start_date: \"2010/12/22\",\n    salary: \"$92,575\"\n  },\n  {\n    name: \"Jennifer Chang\",\n    position: \"Regional Director\",\n    office: \"Singapore\",\n    age: \"28\",\n    start_date: \"2010/11/14\",\n    salary: \"$357,650\"\n  },\n  {\n    name: \"Brenden Wagner\",\n    position: \"Software Engineer\",\n    office: \"San Francisco\",\n    age: \"28\",\n    start_date: \"2011/06/07\",\n    salary: \"$206,850\"\n  },\n  {\n    name: \"Fiona Green\",\n    position: \"Chief Operating Officer (COO)\",\n    office: \"San Francisco\",\n    age: \"48\",\n    start_date: \"2010/03/11\",\n    salary: \"$850,000\"\n  },\n  {\n    name: \"Shou Itou\",\n    position: \"Regional Marketing\",\n    office: \"Tokyo\",\n    age: \"20\",\n    start_date: \"2011/08/14\",\n    salary: \"$163,000\"\n  },\n  {\n    name: \"Michelle House\",\n    position: \"Integration Specialist\",\n    office: \"Sidney\",\n    age: \"37\",\n    start_date: \"2011/06/02\",\n    salary: \"$95,400\"\n  },\n  {\n    name: \"Suki Burks\",\n    position: \"Developer\",\n    office: \"London\",\n    age: \"53\",\n    start_date: \"2009/10/22\",\n    salary: \"$114,500\"\n  },\n  {\n    name: \"Prescott Bartlett\",\n    position: \"Technical Author\",\n    office: \"London\",\n    age: \"27\",\n    start_date: \"2011/05/07\",\n    salary: \"$145,000\"\n  },\n  {\n    name: \"Gavin Cortez\",\n    position: \"Team Leader\",\n    office: \"San Francisco\",\n    age: \"22\",\n    start_date: \"2008/10/26\",\n    salary: \"$235,500\"\n  },\n  {\n    name: \"Martena Mccray\",\n    position: \"Post-Sales support\",\n    office: \"Edinburgh\",\n    age: \"46\",\n    start_date: \"2011/03/09\",\n    salary: \"$324,050\"\n  },\n  {\n    name: \"Unity Butler\",\n    position: \"Marketing Designer\",\n    office: \"San Francisco\",\n    age: \"47\",\n    start_date: \"2009/12/09\",\n    salary: \"$85,675\"\n  },\n  {\n    name: \"Howard Hatfield\",\n    position: \"Office Manager\",\n    office: \"San Francisco\",\n    age: \"51\",\n    start_date: \"2008/12/16\",\n    salary: \"$164,500\"\n  },\n  {\n    name: \"Hope Fuentes\",\n    position: \"Secretary\",\n    office: \"San Francisco\",\n    age: \"41\",\n    start_date: \"2010/02/12\",\n    salary: \"$109,850\"\n  },\n  {\n    name: \"Vivian Harrell\",\n    position: \"Financial Controller\",\n    office: \"San Francisco\",\n    age: \"62\",\n    start_date: \"2009/02/14\",\n    salary: \"$452,500\"\n  },\n  {\n    name: \"Timothy Mooney\",\n    position: \"Office Manager\",\n    office: \"London\",\n    age: \"37\",\n    start_date: \"2008/12/11\",\n    salary: \"$136,200\"\n  },\n  {\n    name: \"Jackson Bradshaw\",\n    position: \"Director\",\n    office: \"New York\",\n    age: \"65\",\n    start_date: \"2008/09/26\",\n    salary: \"$645,750\"\n  },\n  {\n    name: \"Olivia Liang\",\n    position: \"Support Engineer\",\n    office: \"Singapore\",\n    age: \"64\",\n    start_date: \"2011/02/03\",\n    salary: \"$234,500\"\n  },\n  {\n    name: \"Bruno Nash\",\n    position: \"Software Engineer\",\n    office: \"London\",\n    age: \"38\",\n    start_date: \"2011/05/03\",\n    salary: \"$163,500\"\n  },\n  {\n    name: \"Sakura Yamamoto\",\n    position: \"Support Engineer\",\n    office: \"Tokyo\",\n    age: \"37\",\n    start_date: \"2009/08/19\",\n    salary: \"$139,575\"\n  },\n  {\n    name: \"Thor Walton\",\n    position: \"Developer\",\n    office: \"New York\",\n    age: \"61\",\n    start_date: \"2013/08/11\",\n    salary: \"$98,540\"\n  },\n  {\n    name: \"Finn Camacho\",\n    position: \"Support Engineer\",\n    office: \"San Francisco\",\n    age: \"47\",\n    start_date: \"2009/07/07\",\n    salary: \"$87,500\"\n  },\n  {\n    name: \"Serge Baldwin\",\n    position: \"Data Coordinator\",\n    office: \"Singapore\",\n    age: \"64\",\n    start_date: \"2012/04/09\",\n    salary: \"$138,575\"\n  },\n  {\n    name: \"Zenaida Frank\",\n    position: \"Software Engineer\",\n    office: \"New York\",\n    age: \"63\",\n    start_date: \"2010/01/04\",\n    salary: \"$125,250\"\n  },\n  {\n    name: \"Zorita Serrano\",\n    position: \"Software Engineer\",\n    office: \"San Francisco\",\n    age: \"56\",\n    start_date: \"2012/06/01\",\n    salary: \"$115,000\"\n  },\n  {\n    name: \"Jennifer Acosta\",\n    position: \"Junior Javascript Developer\",\n    office: \"Edinburgh\",\n    age: \"43\",\n    start_date: \"2013/02/01\",\n    salary: \"$75,650\"\n  },\n  {\n    name: \"Cara Stevens\",\n    position: \"Sales Assistant\",\n    office: \"New York\",\n    age: \"46\",\n    start_date: \"2011/12/06\",\n    salary: \"$145,600\"\n  },\n  {\n    name: \"Hermione Butler\",\n    position: \"Regional Director\",\n    office: \"London\",\n    age: \"47\",\n    start_date: \"2011/03/21\",\n    salary: \"$356,250\"\n  },\n  {\n    name: \"Lael Greer\",\n    position: \"Systems Administrator\",\n    office: \"London\",\n    age: \"21\",\n    start_date: \"2009/02/27\",\n    salary: \"$103,500\"\n  },\n  {\n    name: \"Jonas Alexander\",\n    position: \"Developer\",\n    office: \"San Francisco\",\n    age: \"30\",\n    start_date: \"2010/07/14\",\n    salary: \"$86,500\"\n  },\n  {\n    name: \"Shad Decker\",\n    position: \"Regional Director\",\n    office: \"Edinburgh\",\n    age: \"51\",\n    start_date: \"2008/11/13\",\n    salary: \"$183,000\"\n  },\n  {\n    name: \"Michael Bruce\",\n    position: \"Javascript Developer\",\n    office: \"Singapore\",\n    age: \"29\",\n    start_date: \"2011/06/27\",\n    salary: \"$183,000\"\n  },\n  {\n    name: \"Donna Snider\",\n    position: \"Customer Support\",\n    office: \"New York\",\n    age: \"27\",\n    start_date: \"2011/01/25\",\n    salary: \"$112,000\"\n  }\n];\n\nexport { events, widgetEvents, dataTable , charitablePrefs};\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// reactstrap components\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Card,\n  CardBody,\n  CardTitle,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n\nclass CardsHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div className=\"header bg-info pb-6\">\n          <Container fluid>\n            <div className=\"header-body\">\n              <Row className=\"align-items-center py-4\">\n                <Col lg=\"6\" xs=\"7\">\n                  <h6 className=\"h2 text-white d-inline-block mb-0\">\n                    {this.props.name}\n                  </h6>{\" \"}\n                  <Breadcrumb\n                    className=\"d-none d-md-inline-block ml-md-4\"\n                    listClassName=\"breadcrumb-links breadcrumb-dark\"\n                  >\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <i className=\"fas fa-home\" />\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem>\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        {this.props.parentName}\n                      </a>\n                    </BreadcrumbItem>\n                    <BreadcrumbItem aria-current=\"page\" className=\"active\">\n                      {this.props.name}\n                    </BreadcrumbItem>\n                  </Breadcrumb>\n                </Col>\n                <Col className=\"text-right\" lg=\"6\" xs=\"5\">\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"default\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    New\n                  </Button>\n                  <Button\n                    className=\"btn-neutral\"\n                    color=\"default\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    Filters\n                  </Button>\n                </Col>\n              </Row>\n\n              <Row>\n                <Col md=\"6\" xl=\"3\">\n                  <Card className=\"card-stats\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            tag=\"h5\"\n                            className=\"text-uppercase text-muted mb-0\"\n                          >\n                            Total traffic\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0\">\n                            350,897\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-gradient-red text-white rounded-circle shadow\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-success mr-2\">\n                          <i className=\"fa fa-arrow-up\" /> 3.48%\n                        </span>{\" \"}\n                        <span className=\"text-nowrap\">Since last month</span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n                <Col md=\"6\" xl=\"3\">\n                  <Card className=\"card-stats\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            tag=\"h5\"\n                            className=\"text-uppercase text-muted mb-0\"\n                          >\n                            New users\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0\">\n                            2,356\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-gradient-orange text-white rounded-circle shadow\">\n                            <i className=\"ni ni-chart-pie-35\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-success mr-2\">\n                          <i className=\"fa fa-arrow-up\" /> 3.48%\n                        </span>{\" \"}\n                        <span className=\"text-nowrap\">Since last month</span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n                <Col md=\"6\" xl=\"3\">\n                  <Card className=\"card-stats\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            tag=\"h5\"\n                            className=\"text-uppercase text-muted mb-0\"\n                          >\n                            Sales\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0\">924</span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-gradient-green text-white rounded-circle shadow\">\n                            <i className=\"ni ni-money-coins\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-success mr-2\">\n                          <i className=\"fa fa-arrow-up\" /> 3.48%\n                        </span>{\" \"}\n                        <span className=\"text-nowrap\">Since last month</span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n                <Col md=\"6\" xl=\"3\">\n                  <Card className=\"card-stats\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            tag=\"h5\"\n                            className=\"text-uppercase text-muted mb-0\"\n                          >\n                            Performance\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0\">\n                            49,65%\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-gradient-primary text-white rounded-circle shadow\">\n                            <i className=\"ni ni-chart-bar-32\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-success mr-2\">\n                          <i className=\"fa fa-arrow-up\" /> 3.48%\n                        </span>{\" \"}\n                        <span className=\"text-nowrap\">Since last month</span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n              </Row>\n            </div>\n          </Container>\n        </div>\n      </>\n    );\n  }\n}\n\nCardsHeader.propTypes = {\n  name: PropTypes.string,\n  parentName: PropTypes.string\n};\n\nexport default CardsHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardFooter,\n  CardImg,\n  CardImgOverlay,\n  CardTitle,\n  CardText,\n  ListGroupItem,\n  ListGroup,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport CardsHeader from \"components/Headers/CardsHeader.js\";\n\nclass Cards extends React.Component {\n  render() {\n    return (\n      <>\n        <CardsHeader name=\"Cards\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"card-wrapper\">\n            <Col lg=\"4\">\n              <Card>\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                  top\n                />\n\n                <ListGroup flush>\n                  <ListGroupItem>Cras justo odio</ListGroupItem>\n                  <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>\n                  <ListGroupItem>Vestibulum at eros</ListGroupItem>\n                </ListGroup>\n\n                <CardBody>\n                  <CardTitle className=\"mb-3\" tag=\"h3\">\n                    Card title\n                  </CardTitle>\n                  <CardText className=\"mb-4\">\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    Facilis non dolore est fuga nobis ipsum illum eligendi nemo\n                    iure repellat, soluta, optio minus ut reiciendis voluptates\n                    enim impedit veritatis officiis.\n                  </CardText>\n                  <Button\n                    color=\"primary\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Go somewhere\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardBody>\n                  <CardTitle className=\"mb-3\" tag=\"h3\">\n                    Card title\n                  </CardTitle>\n                  <CardText className=\"mb-4\">\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    Facilis non dolore est fuga nobis ipsum illum eligendi nemo\n                    iure repellat, soluta, optio minus ut reiciendis voluptates\n                    enim impedit veritatis officiis.\n                  </CardText>\n                  <Button\n                    color=\"primary\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Go somewhere\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card className=\"card-profile\">\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                  top\n                />\n                <Row className=\"justify-content-center\">\n                  <Col className=\"order-lg-2\" lg=\"3\">\n                    <div className=\"card-profile-image\">\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <img\n                          alt=\"...\"\n                          className=\"rounded-circle\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                    </div>\n                  </Col>\n                </Row>\n                <CardHeader className=\"text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4\">\n                  <div className=\"d-flex justify-content-between\">\n                    <Button\n                      className=\"mr-4\"\n                      color=\"info\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      Connect\n                    </Button>\n                    <Button\n                      className=\"float-right\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      Message\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardBody className=\"pt-0\">\n                  <Row>\n                    <div className=\"col\">\n                      <div className=\"card-profile-stats d-flex justify-content-center\">\n                        <div>\n                          <span className=\"heading\">22</span>\n                          <span className=\"description\">Friends</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">10</span>\n                          <span className=\"description\">Photos</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">89</span>\n                          <span className=\"description\">Comments</span>\n                        </div>\n                      </div>\n                    </div>\n                  </Row>\n                  <div className=\"text-center\">\n                    <h5 className=\"h3\">\n                      Jessica Jones\n                      <span className=\"font-weight-light\">, 27</span>\n                    </h5>\n                    <div className=\"h5 font-weight-300\">\n                      <i className=\"ni location_pin mr-2\" />\n                      Bucharest, Romania\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col lg=\"4\">\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Card title</h5>\n                </CardHeader>\n\n                <CardBody>\n                  <CardText className=\"mb-4\">\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    Facilis non dolore est fuga nobis ipsum illum eligendi nemo\n                    iure repellat, soluta, optio minus ut reiciendis voluptates\n                    enim impedit veritatis officiis.\n                  </CardText>\n                  <Button\n                    color=\"primary\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Go somewhere\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardBody>\n                  <Row className=\"align-items-center\">\n                    <Col className=\"col-auto\">\n                      <a\n                        className=\"avatar avatar-xl rounded-circle\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                    </Col>\n                    <div className=\"col ml--2\">\n                      <h4 className=\"mb-0\">\n                        <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                          John Snow\n                        </a>\n                      </h4>\n                      <p className=\"text-sm text-muted mb-0\">\n                        Working remoteley\n                      </p>\n                      <span className=\"text-success mr-1\">●</span>\n                      <small>Active</small>\n                    </div>\n                    <Col className=\"col-auto\">\n                      <Button color=\"primary\" size=\"sm\" type=\"button\">\n                        Add\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardBody>\n                  <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                    <img\n                      alt=\"...\"\n                      className=\"rounded-circle img-center img-fluid shadow shadow-lg--hover\"\n                      src={require(\"assets/img/theme/team-1.jpg\")}\n                      style={{ width: \"140px\" }}\n                    />\n                  </a>\n                  <div className=\"pt-4 text-center\">\n                    <h5 className=\"h3 title\">\n                      <span className=\"d-block mb-1\">Ryan Tompson</span>\n                      <small className=\"h4 font-weight-light text-muted\">\n                        Web Developer\n                      </small>\n                    </h5>\n                    <div className=\"mt-3\">\n                      <Button\n                        className=\"btn-icon-only rounded-circle\"\n                        color=\"twitter\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <i className=\"fab fa-twitter\" />\n                      </Button>\n                      <Button\n                        className=\"btn-icon-only rounded-circle\"\n                        color=\"facebook\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <i className=\"fab fa-facebook\" />\n                      </Button>\n                      <Button\n                        className=\"btn-icon-only rounded-circle\"\n                        color=\"dribbble\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <i className=\"fab fa-dribbble\" />\n                      </Button>\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x900.jpg\")}\n                  top\n                />\n\n                <CardBody>\n                  <CardTitle className=\"h2 mb-0\">\n                    Get started with Argon\n                  </CardTitle>\n                  <small className=\"text-muted\">\n                    by John Snow on Oct 29th at 10:23 AM\n                  </small>\n                  <CardText className=\"mt-4\">\n                    Argon is a great free UI package based on Bootstrap 4 that\n                    includes the most important components and features.\n                  </CardText>\n                  <Button\n                    className=\"px-0\"\n                    color=\"link\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    View article\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card className=\"bg-gradient-default\">\n                <CardBody>\n                  <CardTitle className=\"text-white\" tag=\"h3\">\n                    Testimonial\n                  </CardTitle>\n                  <blockquote className=\"blockquote text-white mb-0\">\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n                      Integer posuere erat a ante.\n                    </p>\n                    <footer className=\"blockquote-footer text-danger\">\n                      Someone famous in{\" \"}\n                      <cite title=\"Source Title\">Source Title</cite>\n                    </footer>\n                  </blockquote>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col lg=\"4\">\n              <Card className=\"card-pricing bg-gradient-success border-0 text-center mb-4\">\n                <CardHeader className=\"bg-transparent\">\n                  <h4 className=\"text-uppercase ls-1 text-white py-3 mb-0\">\n                    Bravo pack\n                  </h4>\n                </CardHeader>\n                <CardBody className=\"px-lg-7\">\n                  <div className=\"display-2 text-white\">$49</div>\n                  <span className=\"text-white\">per application</span>\n                  <ul className=\"list-unstyled my-4\">\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle\">\n                            <i className=\"fas fa-terminal\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm text-white\">\n                            Complete documentation\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle\">\n                            <i className=\"fas fa-pen-fancy\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm text-white\">\n                            Working materials in Sketch\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle\">\n                            <i className=\"fas fa-hdd\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm text-white\">\n                            2GB cloud storage\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                  </ul>\n                  <Button className=\"mb-3\" color=\"primary\" type=\"button\">\n                    Start free trial\n                  </Button>\n                </CardBody>\n                <CardFooter className=\"bg-transparent\">\n                  <a\n                    className=\"text-white\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Request a demo\n                  </a>\n                </CardFooter>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <Row className=\"align-items-center\">\n                    <Col xs=\"8\">\n                      <h5 className=\"h3 mb-0\">Card title</h5>\n                    </Col>\n                    <Col className=\"text-right\" xs=\"4\">\n                      <Button\n                        className=\"btn-neutral\"\n                        color=\"default\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        Action\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardHeader>\n\n                <CardBody>\n                  <CardText className=\"mb-4\">\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    Facilis non dolore est fuga nobis ipsum illum eligendi nemo\n                    iure repellat, soluta, optio minus ut reiciendis voluptates\n                    enim impedit veritatis officiis.\n                  </CardText>\n                  <Button\n                    color=\"primary\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Go somewhere\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card className=\"bg-dark text-white border-0\">\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                />\n                <CardImgOverlay className=\"d-flex align-items-center\">\n                  <div>\n                    <CardTitle className=\"h2 text-white mb-2\">\n                      Card title\n                    </CardTitle>\n                    <CardText>\n                      This is a wider card with supporting text below as a\n                      natural lead-in to additional content. This content is a\n                      little bit longer.\n                    </CardText>\n                    <CardText className=\"text-sm font-weight-bold\">\n                      Last updated 3 mins ago\n                    </CardText>\n                  </div>\n                </CardImgOverlay>\n              </Card>\n\n              <Card className=\"card-pricing border-0 text-center mb-4\">\n                <CardHeader className=\"bg-transparent\">\n                  <h4 className=\"text-uppercase ls-1 text-primary py-3 mb-0\">\n                    Bravo pack\n                  </h4>\n                </CardHeader>\n                <CardBody className=\"px-lg-7\">\n                  <div className=\"display-2\">$49</div>\n                  <span className=\"text-muted\">per application</span>\n                  <ul className=\"list-unstyled my-4\">\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-gradient-primary text-white shadow rounded-circle\">\n                            <i className=\"fas fa-terminal\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm\">\n                            Complete documentation\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-gradient-primary text-white shadow rounded-circle\">\n                            <i className=\"fas fa-pen-fancy\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm\">\n                            Working materials in Sketch\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                    <li>\n                      <div className=\"d-flex align-items-center\">\n                        <div>\n                          <div className=\"icon icon-xs icon-shape bg-gradient-primary text-white shadow rounded-circle\">\n                            <i className=\"fas fa-hdd\" />\n                          </div>\n                        </div>\n                        <div>\n                          <span className=\"pl-2 text-sm\">\n                            2GB cloud storage\n                          </span>\n                        </div>\n                      </div>\n                    </li>\n                  </ul>\n                  <Button className=\"mb-3\" color=\"primary\" type=\"button\">\n                    Start free trial\n                  </Button>\n                </CardBody>\n                <CardFooter>\n                  <a\n                    className=\"text-muted\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    Request a demo\n                  </a>\n                </CardFooter>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Cards;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// javascipt plugin for creating charts\nimport Chart from \"chart.js\";\n// react plugin used to create charts\nimport { Line, Bar, Doughnut, Pie } from \"react-chartjs-2\";\n// reactstrap components\nimport { Card, CardHeader, CardBody, Container, Row, Col } from \"reactstrap\";\n// core components\nimport CardsHeader from \"components/Headers/CardsHeader.js\";\n\nimport {\n  chartOptions,\n  parseOptions,\n  chartExample2,\n  chartExample3,\n  chartExample4,\n  chartExample5,\n  chartExample6,\n  chartExample7\n} from \"variables/charts.js\";\n\nclass Charts extends React.Component {\n  constructor(props) {\n    super(props);\n    if (window.Chart) {\n      parseOptions(Chart, chartOptions());\n    }\n  }\n  render() {\n    return (\n      <>\n        <CardsHeader name=\"Charts\" parentName=\"Charts\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Overview</h6>\n                  <h5 className=\"h3 mb-0\">Total sales</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Line\n                      data={chartExample3.data}\n                      options={chartExample3.options}\n                      id=\"chart-sales\"\n                      className=\"chart-canvas\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Performance</h6>\n                  <h5 className=\"h3 mb-0\">Total orders</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Bar\n                      data={chartExample2.data}\n                      options={chartExample2.options}\n                      className=\"chart-canvas\"\n                      id=\"chart-bars\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <Row>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Growth</h6>\n                  <h5 className=\"h3 mb-0\">Sales value</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Line\n                      data={chartExample4.data}\n                      options={chartExample4.options}\n                      id=\"chart-points\"\n                      className=\"chart-canvas\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Users</h6>\n                  <h5 className=\"h3 mb-0\">Audience overview</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Doughnut\n                      data={chartExample5.data}\n                      options={chartExample5.options}\n                      className=\"chart-canvas\"\n                      id=\"chart-doughnut\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <Row>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Partners</h6>\n                  <h5 className=\"h3 mb-0\">Affiliate traffic</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Pie\n                      data={chartExample6.data}\n                      options={chartExample6.options}\n                      className=\"chart-canvas\"\n                      id=\"chart-pie\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"6\">\n              <Card>\n                <CardHeader>\n                  <h6 className=\"surtitle\">Overview</h6>\n                  <h5 className=\"h3 mb-0\">Product comparison</h5>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Bar\n                      data={chartExample7.data}\n                      options={chartExample7.options}\n                      className=\"chart-canvas\"\n                      id=\"chart-bar-stacked\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\nexport default Charts;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// react plugin used to create datetimepicker\nimport ReactDatetime from \"react-datetime\";\n// react plugin that creates an input with badges\nimport TagsInput from \"react-tagsinput\";\n// react plugin used to create DropdownMenu for selecting items\nimport Select2 from \"react-select2-wrapper\";\n// plugin that creates slider\nimport Slider from \"nouislider\";\n// react plugin that creates text editor\nimport ReactQuill from \"react-quill\";\n// javascript plugin that creates nice dropzones for files\nimport Dropzone from \"dropzone\";\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  ListGroupItem,\n  ListGroup,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nDropzone.autoDiscover = false;\n\nclass Components extends React.Component {\n  state = {\n    select: null,\n    tagsinput: [\"Bucharest\", \"Cluj\", \"Iasi\", \"Timisoara\", \"Piatra Neamt\"],\n    slider1Value: \"100.00\",\n    slider2Values: [\"200.00\", \"400.00\"],\n    reactQuillText: \"\"\n  };\n  componentDidMount() {\n    var slider1 = this.refs.slider1;\n    var slider2 = this.refs.slider2;\n    Slider.create(slider1, {\n      start: [100],\n      connect: [true, false],\n      step: 0.01,\n      range: { min: 100.0, max: 500.0 }\n    }).on(\n      \"update\",\n      function(values, handle) {\n        this.setState({\n          slider1Value: values[0]\n        });\n      }.bind(this)\n    );\n    Slider.create(slider2, {\n      start: [200.0, 400.0],\n      connect: [false, true, false],\n      step: 0.01,\n      range: { min: 100.0, max: 500.0 }\n    }).on(\n      \"update\",\n      function(values, handle) {\n        this.setState({\n          slider2Values: [values[0], values[1]]\n        });\n      }.bind(this)\n    );\n    // this variable is to delete the previous image from the dropzone state\n    // it is just to make the HTML DOM a bit better, and keep it light\n    let currentSingleFile = undefined;\n    // single dropzone file - accepts only images\n    new Dropzone(document.getElementById(\"dropzone-single\"), {\n      url: \"/\",\n      thumbnailWidth: null,\n      thumbnailHeight: null,\n      previewsContainer: document.getElementsByClassName(\n        \"dz-preview-single\"\n      )[0],\n      previewTemplate: document.getElementsByClassName(\"dz-preview-single\")[0]\n        .innerHTML,\n      maxFiles: 1,\n      acceptedFiles: \"image/*\",\n      init: function() {\n        this.on(\"addedfile\", function(file) {\n          if (currentSingleFile) {\n            this.removeFile(currentSingleFile);\n          }\n          currentSingleFile = file;\n        });\n      }\n    });\n    document.getElementsByClassName(\"dz-preview-single\")[0].innerHTML = \"\";\n    // this variable is to delete the previous image from the dropzone state\n    // it is just to make the HTML DOM a bit better, and keep it light\n    let currentMultipleFile = undefined;\n    // multiple dropzone file - accepts any type of file\n    new Dropzone(document.getElementById(\"dropzone-multiple\"), {\n      url: \"https://\",\n      thumbnailWidth: null,\n      thumbnailHeight: null,\n      previewsContainer: document.getElementsByClassName(\n        \"dz-preview-multiple\"\n      )[0],\n      previewTemplate: document.getElementsByClassName(\"dz-preview-multiple\")[0]\n        .innerHTML,\n      maxFiles: null,\n      acceptedFiles: null,\n      init: function() {\n        this.on(\"addedfile\", function(file) {\n          if (currentMultipleFile) {\n          }\n          currentMultipleFile = file;\n        });\n      }\n    });\n    document.getElementsByClassName(\"dz-preview-multiple\")[0].innerHTML = \"\";\n  }\n  handleTagsinput = tagsinput => {\n    this.setState({ tagsinput });\n  };\n  handleReactQuillChange = value => {\n    this.setState({\n      reactQuillText: value\n    });\n  };\n  handleReactDatetimeChange = (who, date) => {\n    if (\n      this.state.startDate &&\n      who === \"endDate\" &&\n      new Date(this.state.startDate._d + \"\") > new Date(date._d + \"\")\n    ) {\n      this.setState({\n        startDate: date,\n        endDate: date\n      });\n    } else if (\n      this.state.endDate &&\n      who === \"startDate\" &&\n      new Date(this.state.endDate._d + \"\") < new Date(date._d + \"\")\n    ) {\n      this.setState({\n        startDate: date,\n        endDate: date\n      });\n    } else {\n      this.setState({\n        [who]: date\n      });\n    }\n  };\n  // this function adds on the day tag of the date picker\n  // middle-date className which means that this day will have no border radius\n  // start-date className which means that this day will only have left border radius\n  // end-date className which means that this day will only have right border radius\n  // this way, the selected dates will look nice and will only be rounded at the ends\n  getClassNameReactDatetimeDays = date => {\n    if (this.state.startDate && this.state.endDate) {\n    }\n    if (\n      this.state.startDate &&\n      this.state.endDate &&\n      this.state.startDate._d + \"\" !== this.state.endDate._d + \"\"\n    ) {\n      if (\n        new Date(this.state.endDate._d + \"\") > new Date(date._d + \"\") &&\n        new Date(this.state.startDate._d + \"\") < new Date(date._d + \"\")\n      ) {\n        return \" middle-date\";\n      }\n      if (this.state.endDate._d + \"\" === date._d + \"\") {\n        return \" end-date\";\n      }\n      if (this.state.startDate._d + \"\" === date._d + \"\") {\n        return \" start-date\";\n      }\n    }\n    return \"\";\n  };\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Form components\" parentName=\"Forms\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col lg=\"6\">\n              <div className=\"card-wrapper\">\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Input groups</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <Row>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.yourName\n                              })}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-user\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"Your name\"\n                                type=\"text\"\n                                onFocus={e => this.setState({ yourName: true })}\n                                onBlur={e => this.setState({ yourName: false })}\n                              />\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.emailAddress\n                              })}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-envelope\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"Email address\"\n                                type=\"email\"\n                                onFocus={e =>\n                                  this.setState({ emailAddress: true })\n                                }\n                                onBlur={e =>\n                                  this.setState({ emailAddress: false })\n                                }\n                              />\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.location\n                              })}\n                            >\n                              <Input\n                                placeholder=\"Location\"\n                                type=\"text\"\n                                onFocus={e => this.setState({ location: true })}\n                                onBlur={e => this.setState({ location: false })}\n                              />\n                              <InputGroupAddon addonType=\"append\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-map-marker\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.password\n                              })}\n                            >\n                              <Input\n                                placeholder=\"Password\"\n                                type=\"password\"\n                                onFocus={e => this.setState({ password: true })}\n                                onBlur={e => this.setState({ password: false })}\n                              />\n                              <InputGroupAddon addonType=\"append\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-eye\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.paymentMethos\n                              })}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-credit-card\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"Payment method\"\n                                type=\"text\"\n                                onFocus={e =>\n                                  this.setState({ paymentMethos: true })\n                                }\n                                onBlur={e =>\n                                  this.setState({ paymentMethos: false })\n                                }\n                              />\n                              <InputGroupAddon addonType=\"append\">\n                                <InputGroupText>\n                                  <small className=\"font-weight-bold\">\n                                    USD\n                                  </small>\n                                </InputGroupText>\n                              </InputGroupAddon>\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-merge\", {\n                                focused: this.state.phoneNumber\n                              })}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-globe-americas\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"Phone number\"\n                                type=\"text\"\n                                onFocus={e =>\n                                  this.setState({ phoneNumber: true })\n                                }\n                                onBlur={e =>\n                                  this.setState({ phoneNumber: false })\n                                }\n                              />\n                              <InputGroupAddon addonType=\"append\">\n                                <InputGroupText>\n                                  <i className=\"fas fa-phone\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Dropdowns</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <Select2\n                        className=\"form-control\"\n                        defaultValue=\"1\"\n                        options={{\n                          placeholder: \"Select\"\n                        }}\n                        data={[\n                          { id: \"1\", text: \"Alerts\" },\n                          { id: \"2\", text: \"Badges\" },\n                          { id: \"3\", text: \"Buttons\" },\n                          { id: \"4\", text: \"Cards\" },\n                          { id: \"5\", text: \"Forms\" },\n                          { id: \"6\", text: \"Modals\" }\n                        ]}\n                      />\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Datepicker</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <Row>\n                        <Col md=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"exampleDatepicker\"\n                            >\n                              Datepicker\n                            </label>\n                            <ReactDatetime\n                              inputProps={{\n                                placeholder: \"Date Picker Here\"\n                              }}\n                              timeFormat={false}\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row className=\"input-daterange datepicker align-items-center\">\n                        <Col xs={12} sm={6}>\n                          <label className=\" form-control-label\">\n                            Start date\n                          </label>\n                          <FormGroup>\n                            <ReactDatetime\n                              inputProps={{\n                                placeholder: \"Date Picker Here\"\n                              }}\n                              value={this.state.startDate}\n                              timeFormat={false}\n                              onChange={e =>\n                                this.handleReactDatetimeChange(\"startDate\", e)\n                              }\n                              renderDay={(props, currentDate, selectedDate) => {\n                                let classes = props.className;\n                                classes += this.getClassNameReactDatetimeDays(\n                                  currentDate\n                                );\n                                return (\n                                  <td {...props} className={classes}>\n                                    {currentDate.date()}\n                                  </td>\n                                );\n                              }}\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col xs={12} sm={6}>\n                          <FormGroup>\n                            <label className=\" form-control-label\">\n                              End date\n                            </label>\n                            <ReactDatetime\n                              inputProps={{\n                                placeholder: \"Date Picker Here\"\n                              }}\n                              value={this.state.endDate}\n                              timeFormat={false}\n                              onChange={e =>\n                                this.handleReactDatetimeChange(\"endDate\", e)\n                              }\n                              renderDay={(props, currentDate, selectedDate) => {\n                                let classes = props.className;\n                                classes += this.getClassNameReactDatetimeDays(\n                                  currentDate\n                                );\n                                return (\n                                  <td {...props} className={classes}>\n                                    {currentDate.date()}\n                                  </td>\n                                );\n                              }}\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Text editor</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <div\n                        data-quill-placeholder=\"Quill WYSIWYG\"\n                        data-toggle=\"quill\"\n                      />\n                      <ReactQuill\n                        value={this.state.reactQuillText}\n                        onChange={this.handleReactQuillChange}\n                        theme=\"snow\"\n                        modules={{\n                          toolbar: [\n                            [\"bold\", \"italic\"],\n                            [\"link\", \"blockquote\", \"code\", \"image\"],\n                            [\n                              {\n                                list: \"ordered\"\n                              },\n                              {\n                                list: \"bullet\"\n                              }\n                            ]\n                          ]\n                        }}\n                      />\n                    </Form>\n                  </CardBody>\n                </Card>\n              </div>\n            </Col>\n            <Col lg=\"6\">\n              <div className=\"card-wrapper\">\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Tags</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <TagsInput\n                        onlyUnique\n                        className=\"bootstrap-tagsinput\"\n                        onChange={this.handleTagsinput}\n                        value={this.state.tagsinput}\n                        tagProps={{ className: \"tag badge mr-1\" }}\n                        inputProps={{\n                          className: \"\",\n                          placeholder: \"\"\n                        }}\n                      />\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Toggle buttons</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <label className=\"custom-toggle mr-1\">\n                        <input type=\"checkbox\" />\n                        <span className=\"custom-toggle-slider rounded-circle\" />\n                      </label>\n                      <label className=\"custom-toggle mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                      <label className=\"custom-toggle custom-toggle-default mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                      <label className=\"custom-toggle custom-toggle-danger mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                      <label className=\"custom-toggle custom-toggle-warning mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                      <label className=\"custom-toggle custom-toggle-success mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                      <label className=\"custom-toggle custom-toggle-info mr-1\">\n                        <input defaultChecked type=\"checkbox\" />\n                        <span\n                          className=\"custom-toggle-slider rounded-circle\"\n                          data-label-off=\"No\"\n                          data-label-on=\"Yes\"\n                        />\n                      </label>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Sliders</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <div className=\"input-slider-container\">\n                        <div className=\"input-slider\" ref=\"slider1\" />\n                        <Row className=\"mt-3\">\n                          <Col xs=\"6\">\n                            <span className=\"range-slider-value\">\n                              {this.state.slider1Value}\n                            </span>\n                          </Col>\n                        </Row>\n                      </div>\n                      <div className=\"mt-5\">\n                        <div ref=\"slider2\" />\n                        <Row>\n                          <Col xs=\"6\">\n                            <span className=\"range-slider-value value-low\">\n                              {this.state.slider2Values[0]}\n                            </span>\n                          </Col>\n                          <Col className=\"text-right\" xs=\"6\">\n                            <span className=\"range-slider-value value-high\">\n                              {this.state.slider2Values[1]}\n                            </span>\n                          </Col>\n                        </Row>\n                      </div>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Dropzone</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <div\n                      className=\"dropzone dropzone-single mb-3\"\n                      id=\"dropzone-single\"\n                    >\n                      <div className=\"fallback\">\n                        <div className=\"custom-file\">\n                          <input\n                            className=\"custom-file-input\"\n                            id=\"projectCoverUploads\"\n                            type=\"file\"\n                          />\n                          <label\n                            className=\"custom-file-label\"\n                            htmlFor=\"projectCoverUploads\"\n                          >\n                            Choose file\n                          </label>\n                        </div>\n                      </div>\n                      <div className=\"dz-preview dz-preview-single\">\n                        <div className=\"dz-preview-cover\">\n                          <img\n                            alt=\"...\"\n                            className=\"dz-preview-img\"\n                            data-dz-thumbnail=\"\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                    <div\n                      className=\"dropzone dropzone-multiple\"\n                      id=\"dropzone-multiple\"\n                    >\n                      <div className=\"fallback\">\n                        <div className=\"custom-file\">\n                          <input\n                            className=\"custom-file-input\"\n                            id=\"customFileUploadMultiple\"\n                            multiple=\"multiple\"\n                            type=\"file\"\n                          />\n                          <label\n                            className=\"custom-file-label\"\n                            htmlFor=\"customFileUploadMultiple\"\n                          >\n                            Choose file\n                          </label>\n                        </div>\n                      </div>\n                      <ListGroup\n                        className=\" dz-preview dz-preview-multiple list-group-lg\"\n                        flush\n                      >\n                        <ListGroupItem className=\" px-0\">\n                          <Row className=\" align-items-center\">\n                            <Col className=\" col-auto\">\n                              <div className=\" avatar\">\n                                <img\n                                  alt=\"...\"\n                                  className=\" avatar-img rounded\"\n                                  data-dz-thumbnail\n                                  src=\"...\"\n                                />\n                              </div>\n                            </Col>\n                            <div className=\" col ml--3\">\n                              <h4 className=\" mb-1\" data-dz-name>\n                                ...\n                              </h4>\n                              <p\n                                className=\" small text-muted mb-0\"\n                                data-dz-size\n                              >\n                                ...\n                              </p>\n                            </div>\n                            <Col className=\" col-auto\">\n                              <Button size=\"sm\" color=\"danger\" data-dz-remove>\n                                <i className=\"fas fa-trash\" />\n                              </Button>\n                            </Col>\n                          </Row>\n                        </ListGroupItem>\n                      </ListGroup>\n                    </div>\n                  </CardBody>\n                </Card>\n              </div>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\nexport default Components;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// node.js library that concatenates classes (strings)\nimport classnames from \"classnames\";\n// javascipt plugin for creating charts\nimport Chart from \"chart.js\";\n// react plugin used to create charts\nimport { Line, Bar } from \"react-chartjs-2\";\n// reactstrap components\nimport {\n  Badge,\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  DropdownMenu,\n  DropdownItem,\n  DropdownToggle,\n  UncontrolledDropdown,\n  Form,\n  Input,\n  ListGroupItem,\n  ListGroup,\n  Media,\n  NavItem,\n  NavLink,\n  Nav,\n  Progress,\n  Table,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip\n} from \"reactstrap\";\n\n// core components\nimport CardsHeader from \"components/Headers/CardsHeader.js\";\n\nimport {\n  chartOptions,\n  parseOptions,\n  chartExample1,\n  chartExample2\n} from \"variables/charts.js\";\n\nclass Dashboard extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeNav: 1,\n      chartExample1Data: \"data1\"\n    };\n    if (window.Chart) {\n      parseOptions(Chart, chartOptions());\n    }\n  }\n  toggleNavs = (e, index) => {\n    e.preventDefault();\n    this.setState({\n      activeNav: index,\n      chartExample1Data:\n        this.state.chartExample1Data === \"data1\" ? \"data2\" : \"data1\"\n    });\n  };\n  render() {\n    return (\n      <>\n        <CardsHeader name=\"Default\" parentName=\"Dashboards\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col xl=\"8\">\n              <Card className=\"bg-default\">\n                <CardHeader className=\"bg-transparent\">\n                  <Row className=\"align-items-center\">\n                    <div className=\"col\">\n                      <h6 className=\"text-light text-uppercase ls-1 mb-1\">\n                        Overview\n                      </h6>\n                      <h5 className=\"h3 text-white mb-0\">Sales value</h5>\n                    </div>\n                    <div className=\"col\">\n                      <Nav className=\"justify-content-end\" pills>\n                        <NavItem className=\"mr-2 mr-md-0\">\n                          <NavLink\n                            className={classnames(\"py-2 px-3\", {\n                              active: this.state.activeNav === 1\n                            })}\n                            href=\"#pablo\"\n                            onClick={e => this.toggleNavs(e, 1)}\n                          >\n                            <span className=\"d-none d-md-block\">Month</span>\n                            <span className=\"d-md-none\">M</span>\n                          </NavLink>\n                        </NavItem>\n                        <NavItem>\n                          <NavLink\n                            className={classnames(\"py-2 px-3\", {\n                              active: this.state.activeNav === 2\n                            })}\n                            data-toggle=\"tab\"\n                            href=\"#pablo\"\n                            onClick={e => this.toggleNavs(e, 2)}\n                          >\n                            <span className=\"d-none d-md-block\">Week</span>\n                            <span className=\"d-md-none\">W</span>\n                          </NavLink>\n                        </NavItem>\n                      </Nav>\n                    </div>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Line\n                      data={chartExample1[this.state.chartExample1Data]}\n                      options={chartExample1.options}\n                      id=\"chart-sales-dark\"\n                      className=\"chart-canvas\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"4\">\n              <Card>\n                <CardHeader className=\"bg-transparent\">\n                  <Row className=\"align-items-center\">\n                    <div className=\"col\">\n                      <h6 className=\"text-uppercase text-muted ls-1 mb-1\">\n                        Performance\n                      </h6>\n                      <h5 className=\"h3 mb-0\">Total orders</h5>\n                    </div>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <div className=\"chart\">\n                    <Bar\n                      data={chartExample2.data}\n                      options={chartExample2.options}\n                      className=\"chart-canvas\"\n                      id=\"chart-bars\"\n                    />\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <Row>\n            <Col xl=\"4\">\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Team members</h5>\n                </CardHeader>\n\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              John Michael\n                            </a>\n                          </h4>\n                          <span className=\"text-success\">●</span>{\" \"}\n                          <small>Online</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              Alex Smith\n                            </a>\n                          </h4>\n                          <span className=\"text-warning\">●</span>{\" \"}\n                          <small>In a meeting</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              Samantha Ivy\n                            </a>\n                          </h4>\n                          <span className=\"text-danger\">●</span>{\" \"}\n                          <small>Offline</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              John Michael\n                            </a>\n                          </h4>\n                          <span className=\"text-success\">●</span>{\" \"}\n                          <small>Online</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"4\">\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">To do list</h5>\n                </CardHeader>\n\n                <CardBody className=\"p-0\">\n                  <ListGroup data-toggle=\"checklist\" flush>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-success checklist-item-checked\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Call with Dave\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-success\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"chk-todo-task-1\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-1\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-warning\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Lunch meeting\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-warning\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"chk-todo-task-2\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-2\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-info\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Argon Dashboard Launch\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-info\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"chk-todo-task-3\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-3\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-danger checklist-item-checked\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Winter Hackaton\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-danger\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"chk-todo-task-4\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-4\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"4\">\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Progress track</h5>\n                </CardHeader>\n\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Argon Design System</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            color=\"orange\"\n                            max=\"100\"\n                            value=\"60\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Angular Now UI Kit PRO</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            color=\"success\"\n                            max=\"100\"\n                            value=\"100\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Black Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            color=\"danger\"\n                            max=\"100\"\n                            value=\"72\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>React Material Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            color=\"info\"\n                            max=\"100\"\n                            value=\"90\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n          <Row>\n            <Col xl=\"5\">\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Activity feed</h5>\n                </CardHeader>\n                <CardHeader className=\"d-flex align-items-center\">\n                  <div className=\"d-flex align-items-center\">\n                    <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                      <img\n                        alt=\"...\"\n                        className=\"avatar\"\n                        src={require(\"assets/img/theme/team-1.jpg\")}\n                      />\n                    </a>\n                    <div className=\"mx-3\">\n                      <a\n                        className=\"text-dark font-weight-600 text-sm\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        John Snow\n                      </a>\n                      <small className=\"d-block text-muted\">3 days ago</small>\n                    </div>\n                  </div>\n                  <div className=\"text-right ml-auto\">\n                    <Button\n                      className=\"btn-icon\"\n                      color=\"primary\"\n                      size=\"sm\"\n                      type=\"button\"\n                    >\n                      <span className=\"btn-inner--icon mr-1\">\n                        <i className=\"ni ni-fat-add\" />\n                      </span>\n                      <span className=\"btn-inner--text\">Follow</span>\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardBody>\n                  <p className=\"mb-4\">\n                    Personal profiles are the perfect way for you to grab their\n                    attention and persuade recruiters to continue reading your\n                    CV because you’re telling them from the off exactly why they\n                    should hire you.\n                  </p>\n                  <img\n                    alt=\"...\"\n                    className=\"img-fluid rounded\"\n                    src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                  />\n                  <Row className=\"align-items-center my-3 pb-3 border-bottom\">\n                    <Col sm=\"6\">\n                      <div className=\"icon-actions\">\n                        <a\n                          className=\"like active\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <i className=\"ni ni-like-2\" />\n                          <span className=\"text-muted\">150</span>\n                        </a>\n                        <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                          <i className=\"ni ni-chat-round\" />\n                          <span className=\"text-muted\">36</span>\n                        </a>\n                        <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                          <i className=\"ni ni-curved-next\" />\n                          <span className=\"text-muted\">12</span>\n                        </a>\n                      </div>\n                    </Col>\n                    <Col className=\"d-none d-sm-block\" sm=\"6\">\n                      <div className=\"d-flex align-items-center justify-content-sm-end\">\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-xs rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip36177092\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip36177092\"\n                          >\n                            Jessica Rowland\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-xs rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip857639221\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              className=\"rounded-circle\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip857639221\"\n                          >\n                            Audrey Love\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-xs rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip260223080\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              className=\"rounded-circle\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip260223080\"\n                          >\n                            Michael Lewis\n                          </UncontrolledTooltip>\n                        </div>\n                        <small className=\"pl-2 font-weight-bold\">\n                          and 30+ more\n                        </small>\n                      </div>\n                    </Col>\n                  </Row>\n\n                  <div className=\"mb-1\">\n                    <Media className=\"media-comment\">\n                      <img\n                        alt=\"...\"\n                        className=\"avatar avatar-lg media-comment-avatar rounded-circle\"\n                        src={require(\"assets/img/theme/team-1.jpg\")}\n                      />\n                      <Media>\n                        <div className=\"media-comment-text\">\n                          <h6 className=\"h5 mt-0\">Michael Lewis</h6>\n                          <p className=\"text-sm lh-160\">\n                            Cras sit amet nibh libero nulla vel metus\n                            scelerisque ante sollicitudin. Cras purus odio\n                            vestibulum in vulputate viverra turpis.\n                          </p>\n                          <div className=\"icon-actions\">\n                            <a\n                              className=\"like active\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <i className=\"ni ni-like-2\" />\n                              <span className=\"text-muted\">3 likes</span>\n                            </a>\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              <i className=\"ni ni-curved-next\" />\n                              <span className=\"text-muted\">2 shares</span>\n                            </a>\n                          </div>\n                        </div>\n                      </Media>\n                    </Media>\n                    <Media className=\"media-comment\">\n                      <img\n                        alt=\"...\"\n                        className=\"avatar avatar-lg media-comment-avatar rounded-circle\"\n                        src={require(\"assets/img/theme/team-2.jpg\")}\n                      />\n                      <Media>\n                        <div className=\"media-comment-text\">\n                          <h6 className=\"h5 mt-0\">Jessica Stones</h6>\n                          <p className=\"text-sm lh-160\">\n                            Cras sit amet nibh libero, in gravida nulla. Nulla\n                            vel metus scelerisque ante sollicitudin. Cras purus\n                            odio, vestibulum in vulputate at, tempus viverra\n                            turpis.\n                          </p>\n                          <div className=\"icon-actions\">\n                            <a\n                              className=\"like active\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <i className=\"ni ni-like-2\" />\n                              <span className=\"text-muted\">10 likes</span>\n                            </a>\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              <i className=\"ni ni-curved-next\" />\n                              <span className=\"text-muted\">1 share</span>\n                            </a>\n                          </div>\n                        </div>\n                      </Media>\n                    </Media>\n                    <hr />\n                    <Media className=\"align-items-center\">\n                      <img\n                        alt=\"...\"\n                        className=\"avatar avatar-lg rounded-circle mr-4\"\n                        src={require(\"assets/img/theme/team-3.jpg\")}\n                      />\n                      <Media body>\n                        <Form>\n                          <Input\n                            placeholder=\"Write your comment\"\n                            rows=\"1\"\n                            type=\"textarea\"\n                          />\n                        </Form>\n                      </Media>\n                    </Media>\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col xl=\"7\">\n              <Row>\n                <div className=\"col\">\n                  <Card>\n                    <CardHeader className=\"border-0\">\n                      <h3 className=\"mb-0\">Light table</h3>\n                    </CardHeader>\n                    <Table\n                      className=\"align-items-center table-flush\"\n                      responsive\n                    >\n                      <thead className=\"thead-light\">\n                        <tr>\n                          <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                            Project\n                          </th>\n                          <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                            Budget\n                          </th>\n                          <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                            Status\n                          </th>\n                          <th scope=\"col\">Users</th>\n                          <th\n                            className=\"sort\"\n                            data-sort=\"completion\"\n                            scope=\"col\"\n                          >\n                            Completion\n                          </th>\n                          <th scope=\"col\" />\n                        </tr>\n                      </thead>\n                      <tbody className=\"list\">\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/bootstrap.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Argon Design System\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$2500 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-warning\" />\n                              <span className=\"status\">pending</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip792717700\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip792717700\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip654289872\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip654289872\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip409131762\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip409131762\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip50788433\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip50788433\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">60%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"60\"\n                                  color=\"warning\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/angular.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Angular Now UI Kit PRO\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$1800 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-success\" />\n                              <span className=\"status\">completed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip545726644\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip545726644\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip823332447\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip823332447\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip354076640\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip354076640\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip625572621\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip625572621\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">100%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"100\"\n                                  color=\"success\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/sketch.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Black Dashboard\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$3150 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-danger\" />\n                              <span className=\"status\">delayed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip927457712\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip927457712\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip959509788\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip959509788\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip239649821\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip239649821\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip908443321\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip908443321\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">72%</span>\n                              <div>\n                                <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/react.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  React Material Dashboard\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$4400 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-info\" />\n                              <span className=\"status\">on schedule</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip817843622\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip817843622\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip885824111\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip885824111\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip426851535\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip426851535\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip913358720\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip913358720\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">90%</span>\n                              <div>\n                                <Progress max=\"100\" value=\"90\" color=\"info\" />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/vue.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Vue Paper UI Kit PRO\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$2200 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-success\" />\n                              <span className=\"status\">completed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip460474820\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip460474820\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip979995688\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip979995688\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip732882700\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip732882700\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip242724387\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip242724387\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">100%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"100\"\n                                  color=\"success\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/bootstrap.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Argon Design System\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$2500 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-warning\" />\n                              <span className=\"status\">pending</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip318080952\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip318080952\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip221723068\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip221723068\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip138748612\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip138748612\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip431342349\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip431342349\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">60%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"60\"\n                                  color=\"warning\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/angular.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Angular Now UI Kit PRO\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$1800 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-success\" />\n                              <span className=\"status\">completed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip384464413\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip384464413\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip828512937\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip828512937\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip409745485\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip409745485\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip262162858\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip262162858\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">100%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"100\"\n                                  color=\"success\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/sketch.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Black Dashboard\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$3150 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-danger\" />\n                              <span className=\"status\">delayed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip711925042\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip711925042\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip664693924\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip664693924\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip582913491\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip582913491\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip699784330\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip699784330\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">72%</span>\n                              <div>\n                                <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">\n                            <Media className=\"align-items-center\">\n                              <a\n                                className=\"avatar rounded-circle mr-3\"\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/angular.jpg\")}\n                                />\n                              </a>\n                              <Media>\n                                <span className=\"name mb-0 text-sm\">\n                                  Angular Now UI Kit PRO\n                                </span>\n                              </Media>\n                            </Media>\n                          </th>\n                          <td className=\"budget\">$1800 USD</td>\n                          <td>\n                            <Badge className=\"badge-dot mr-4\" color=\"\">\n                              <i className=\"bg-success\" />\n                              <span className=\"status\">completed</span>\n                            </Badge>\n                          </td>\n                          <td>\n                            <div className=\"avatar-group\">\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip912421317\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-1.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip912421317\"\n                              >\n                                Ryan Tompson\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip912012329\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-2.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip912012329\"\n                              >\n                                Romina Hadid\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip366509724\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-3.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip366509724\"\n                              >\n                                Alexander Smith\n                              </UncontrolledTooltip>\n                              <a\n                                className=\"avatar avatar-sm rounded-circle\"\n                                href=\"#pablo\"\n                                id=\"tooltip569311457\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                <img\n                                  alt=\"...\"\n                                  src={require(\"assets/img/theme/team-4.jpg\")}\n                                />\n                              </a>\n                              <UncontrolledTooltip\n                                delay={0}\n                                target=\"tooltip569311457\"\n                              >\n                                Jessica Doe\n                              </UncontrolledTooltip>\n                            </div>\n                          </td>\n                          <td>\n                            <div className=\"d-flex align-items-center\">\n                              <span className=\"completion mr-2\">100%</span>\n                              <div>\n                                <Progress\n                                  max=\"100\"\n                                  value=\"100\"\n                                  color=\"success\"\n                                />\n                              </div>\n                            </div>\n                          </td>\n                          <td className=\"text-right\">\n                            <UncontrolledDropdown>\n                              <DropdownToggle\n                                color=\"\"\n                                size=\"sm\"\n                                className=\"btn-icon-only text-light\"\n                              >\n                                <i className=\"fas fa-ellipsis-v\" />\n                              </DropdownToggle>\n                              <DropdownMenu\n                                className=\"dropdown-menu-arrow\"\n                                right\n                              >\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Another action\n                                </DropdownItem>\n                                <DropdownItem\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  Something else here\n                                </DropdownItem>\n                              </DropdownMenu>\n                            </UncontrolledDropdown>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </Table>\n                  </Card>\n                </div>\n              </Row>\n              <div className=\"card-deck\">\n                <Card className=\"bg-gradient-default\">\n                  <CardBody>\n                    <div className=\"mb-2\">\n                      <sup className=\"text-white\">$</sup>{\" \"}\n                      <span className=\"h2 text-white\">3,300</span>\n                      <div className=\"text-light mt-2 text-sm\">\n                        Your current balance\n                      </div>\n                      <div>\n                        <span className=\"text-success font-weight-600\">\n                          + 15%\n                        </span>{\" \"}\n                        <span className=\"text-light\">($250)</span>\n                      </div>\n                    </div>\n                    <Button\n                      block\n                      className=\"btn-neutral\"\n                      color=\"default\"\n                      size=\"sm\"\n                    >\n                      Add credit\n                    </Button>\n                  </CardBody>\n                  <CardBody>\n                    <Row>\n                      <div className=\"col\">\n                        <small className=\"text-light\">Orders: 60%</small>\n                        <Progress\n                          className=\"progress-xs my-2\"\n                          max=\"100\"\n                          value=\"60\"\n                          color=\"success\"\n                        />\n                      </div>\n                      <div className=\"col\">\n                        <small className=\"text-light\">Sales: 40%</small>\n                        <Progress\n                          className=\"progress-xs my-2\"\n                          max=\"100\"\n                          value=\"40\"\n                          color=\"warning\"\n                        />\n                      </div>\n                    </Row>\n                  </CardBody>\n                </Card>\n                <Card className=\"bg-gradient-danger\">\n                  <CardBody>\n                    <Row className=\"justify-content-between align-items-center\">\n                      <div className=\"col\">\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/icons/cards/bitcoin.png\")}\n                        />\n                      </div>\n                      <Col className=\"col-auto\">\n                        <Badge className=\"badge-lg\" color=\"success\">\n                          Active\n                        </Badge>\n                      </Col>\n                    </Row>\n                    <div className=\"my-4\">\n                      <span className=\"h6 surtitle text-light\">Username</span>\n                      <div className=\"h1 text-white\">@johnsnow</div>\n                    </div>\n                    <Row>\n                      <div className=\"col\">\n                        <span className=\"h6 surtitle text-light\">Name</span>\n                        <span className=\"d-block h3 text-white\">John Snow</span>\n                      </div>\n                    </Row>\n                  </CardBody>\n                </Card>\n              </div>\n            </Col>\n          </Row>\n          <Row>\n            <Col xl=\"8\">\n              <Card>\n                <CardHeader className=\"border-0\">\n                  <Row className=\"align-items-center\">\n                    <div className=\"col\">\n                      <h3 className=\"mb-0\">Page visits</h3>\n                    </div>\n                    <div className=\"col text-right\">\n                      <Button\n                        color=\"primary\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        See all\n                      </Button>\n                    </div>\n                  </Row>\n                </CardHeader>\n                <Table className=\"align-items-center table-flush\" responsive>\n                  <thead className=\"thead-light\">\n                    <tr>\n                      <th scope=\"col\">Page name</th>\n                      <th scope=\"col\">Visitors</th>\n                      <th scope=\"col\">Unique users</th>\n                      <th scope=\"col\">Bounce rate</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr>\n                      <th scope=\"row\">/argon/</th>\n                      <td>4,569</td>\n                      <td>340</td>\n                      <td>\n                        <i className=\"fas fa-arrow-up text-success mr-3\" />\n                        46,53%\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">/argon/index.html</th>\n                      <td>3,985</td>\n                      <td>319</td>\n                      <td>\n                        <i className=\"fas fa-arrow-down text-warning mr-3\" />\n                        46,53%\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">/argon/charts.html</th>\n                      <td>3,513</td>\n                      <td>294</td>\n                      <td>\n                        <i className=\"fas fa-arrow-down text-warning mr-3\" />\n                        36,49%\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">/argon/tables.html</th>\n                      <td>2,050</td>\n                      <td>147</td>\n                      <td>\n                        <i className=\"fas fa-arrow-up text-success mr-3\" />\n                        50,87%\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">/argon/profile.html</th>\n                      <td>1,795</td>\n                      <td>190</td>\n                      <td>\n                        <i className=\"fas fa-arrow-down text-danger mr-3\" />\n                        46,53%\n                      </td>\n                    </tr>\n                  </tbody>\n                </Table>\n              </Card>\n            </Col>\n            <Col xl=\"4\">\n              <Card>\n                <CardHeader className=\"border-0\">\n                  <Row className=\"align-items-center\">\n                    <div className=\"col\">\n                      <h3 className=\"mb-0\">Social traffic</h3>\n                    </div>\n                    <div className=\"col text-right\">\n                      <Button\n                        color=\"primary\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        See all\n                      </Button>\n                    </div>\n                  </Row>\n                </CardHeader>\n                <Table className=\"align-items-center table-flush\" responsive>\n                  <thead className=\"thead-light\">\n                    <tr>\n                      <th scope=\"col\">Referral</th>\n                      <th scope=\"col\">Visitors</th>\n                      <th scope=\"col\" />\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr>\n                      <th scope=\"row\">Facebook</th>\n                      <td>1,480</td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"mr-2\">60%</span>\n                          <div>\n                            <Progress\n                              max=\"100\"\n                              value=\"60\"\n                              color=\"gradient-danger\"\n                            />\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">Facebook</th>\n                      <td>5,480</td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"mr-2\">70%</span>\n                          <div>\n                            <Progress\n                              max=\"100\"\n                              value=\"70\"\n                              color=\"gradient-success\"\n                            />\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">Google</th>\n                      <td>4,807</td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"mr-2\">80%</span>\n                          <div>\n                            <Progress\n                              max=\"100\"\n                              value=\"80\"\n                              clor=\"gradient-primary\"\n                            />\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">Instagram</th>\n                      <td>3,678</td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"mr-2\">75%</span>\n                          <div>\n                            <Progress\n                              max=\"100\"\n                              value=\"75\"\n                              color=\"gradient-info\"\n                            />\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">twitter</th>\n                      <td>2,645</td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"mr-2\">30%</span>\n                          <div>\n                            <Progress\n                              max=\"100\"\n                              value=\"30\"\n                              color=\"gradient-warning\"\n                            />\n                          </div>\n                        </div>\n                      </td>\n                    </tr>\n                  </tbody>\n                </Table>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Dashboard;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// reactstrap components\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  Label,\n  FormGroup,\n  Form,\n  Input,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Elements extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Form elements\" parentName=\"Forms\" />\n        <Container className=\"mt--6\" fluid>\n          <Card className=\"mb-4\">\n            <CardHeader>\n              <h3 className=\"mb-0\">Form group in grid</h3>\n            </CardHeader>\n            <CardBody>\n              <Row>\n                <Col md=\"4\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example3cols1Input\"\n                    >\n                      One of three cols\n                    </label>\n                    <Input\n                      id=\"example3cols1Input\"\n                      placeholder=\"One of three cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"4\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example3cols2Input\"\n                    >\n                      One of three cols\n                    </label>\n                    <Input\n                      id=\"example3cols2Input\"\n                      placeholder=\"One of three cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"4\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example3cols3Input\"\n                    >\n                      One of three cols\n                    </label>\n                    <Input\n                      id=\"example3cols3Input\"\n                      placeholder=\"One of three cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n              </Row>\n              <Row>\n                <Col md=\"3\" sm=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example4cols1Input\"\n                    >\n                      One of four cols\n                    </label>\n                    <Input\n                      id=\"example4cols1Input\"\n                      placeholder=\"One of four cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"3\" sm=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example4cols2Input\"\n                    >\n                      One of four cols\n                    </label>\n                    <Input\n                      id=\"example4cols2Input\"\n                      placeholder=\"One of four cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"3\" sm=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example4cols3Input\"\n                    >\n                      One of four cols\n                    </label>\n                    <Input\n                      id=\"example4cols3Input\"\n                      placeholder=\"One of four cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"3\" sm=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example5cols3Input\"\n                    >\n                      One of four cols\n                    </label>\n                    <Input\n                      id=\"example5cols3Input\"\n                      placeholder=\"One of four cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n              </Row>\n              <Row>\n                <Col md=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example2cols1Input\"\n                    >\n                      One of two cols\n                    </label>\n                    <Input\n                      id=\"example2cols1Input\"\n                      placeholder=\"One of two cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n                <Col md=\"6\">\n                  <FormGroup>\n                    <label\n                      className=\"form-control-label\"\n                      htmlFor=\"example2cols2Input\"\n                    >\n                      One of two cols\n                    </label>\n                    <Input\n                      id=\"example2cols2Input\"\n                      placeholder=\"One of two cols\"\n                      type=\"text\"\n                    />\n                  </FormGroup>\n                </Col>\n              </Row>\n            </CardBody>\n          </Card>\n          <Row>\n            <Col lg=\"6\">\n              <div className=\"card-wrapper\">\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Form controls</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlInput1\"\n                        >\n                          Email address\n                        </label>\n                        <Input\n                          id=\"exampleFormControlInput1\"\n                          placeholder=\"name@example.com\"\n                          type=\"email\"\n                        />\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect1\"\n                        >\n                          Example select\n                        </label>\n                        <Input id=\"exampleFormControlSelect1\" type=\"select\">\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect2\"\n                        >\n                          Example multiple select\n                        </label>\n                        <Input\n                          id=\"exampleFormControlSelect2\"\n                          multiple=\"multiple\"\n                          type=\"select\"\n                        >\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlTextarea1\"\n                        >\n                          Example textarea\n                        </label>\n                        <Input\n                          id=\"exampleFormControlTextarea1\"\n                          rows=\"3\"\n                          type=\"textarea\"\n                        />\n                      </FormGroup>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">HTML5 inputs</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-text-input\"\n                          md=\"2\"\n                        >\n                          Text\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"John Snow\"\n                            id=\"example-text-input\"\n                            type=\"text\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-search-input\"\n                          md=\"2\"\n                        >\n                          Search\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"Tell me your secret ...\"\n                            id=\"example-search-input\"\n                            type=\"search\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-email-input\"\n                          md=\"2\"\n                        >\n                          Email\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"argon@example.com\"\n                            id=\"example-email-input\"\n                            type=\"email\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-url-input\"\n                          md=\"2\"\n                        >\n                          URL\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"https://www.creative-tim.com\"\n                            id=\"example-url-input\"\n                            type=\"url\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-tel-input\"\n                          md=\"2\"\n                        >\n                          Phone\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"40-(770)-888-444\"\n                            id=\"example-tel-input\"\n                            type=\"tel\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-password-input\"\n                          md=\"2\"\n                        >\n                          Password\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"password\"\n                            id=\"example-password-input\"\n                            type=\"password\"\n                            autoComplete=\"off\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-number-input\"\n                          md=\"2\"\n                        >\n                          Number\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"23\"\n                            id=\"example-number-input\"\n                            type=\"number\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-datetime-local-input\"\n                          md=\"2\"\n                        >\n                          Datetime\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"2018-11-23T10:30:00\"\n                            id=\"example-datetime-local-input\"\n                            type=\"datetime-local\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-date-input\"\n                          md=\"2\"\n                        >\n                          Date\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"2018-11-23\"\n                            id=\"example-date-input\"\n                            type=\"date\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-month-input\"\n                          md=\"2\"\n                        >\n                          Month\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"2018-11\"\n                            id=\"example-month-input\"\n                            type=\"month\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-week-input\"\n                          md=\"2\"\n                        >\n                          Week\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"2018-W23\"\n                            id=\"example-week-input\"\n                            type=\"week\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-time-input\"\n                          md=\"2\"\n                        >\n                          Time\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"10:30:00\"\n                            id=\"example-time-input\"\n                            type=\"time\"\n                          />\n                        </Col>\n                      </FormGroup>\n                      <FormGroup className=\"row\">\n                        <Label\n                          className=\"form-control-label\"\n                          htmlFor=\"example-color-input\"\n                          md=\"2\"\n                        >\n                          Color\n                        </Label>\n                        <Col md=\"10\">\n                          <Input\n                            defaultValue=\"#5e72e4\"\n                            id=\"example-color-input\"\n                            type=\"color\"\n                          />\n                        </Col>\n                      </FormGroup>\n                    </Form>\n                  </CardBody>\n                </Card>\n              </div>\n            </Col>\n            <Col lg=\"6\">\n              <div className=\"card-wrapper\">\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Sizes</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <FormGroup>\n                      <label className=\"form-control-label\">Large input</label>\n                      <Input\n                        className=\"form-control-lg\"\n                        placeholder=\".form-control-lg\"\n                        type=\"text\"\n                      />\n                    </FormGroup>\n                    <FormGroup>\n                      <label className=\"form-control-label\">\n                        Default input\n                      </label>\n                      <Input placeholder=\"Default input\" type=\"text\" />\n                    </FormGroup>\n                    <FormGroup>\n                      <label className=\"form-control-label\">Small input</label>\n                      <Input\n                        className=\"form-control-sm\"\n                        placeholder=\".form-control-sm\"\n                        type=\"text\"\n                      />\n                    </FormGroup>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Text inputs</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlTextarea2\"\n                        >\n                          Basic textarea\n                        </label>\n                        <Input\n                          id=\"exampleFormControlTextarea2\"\n                          rows=\"3\"\n                          type=\"textarea\"\n                        />\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlTextarea3\"\n                        >\n                          Unresizable textarea\n                        </label>\n                        <Input\n                          id=\"exampleFormControlTextarea3\"\n                          resize=\"none\"\n                          rows=\"3\"\n                          type=\"textarea\"\n                        />\n                      </FormGroup>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Select</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect3\"\n                        >\n                          Basic select\n                        </label>\n                        <Input id=\"exampleFormControlSelect3\" type=\"select\">\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect5\"\n                        >\n                          Basic select\n                        </label>\n                        <Input\n                          disabled\n                          id=\"exampleFormControlSelect5\"\n                          type=\"select\"\n                        >\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect6\"\n                        >\n                          Multiple select\n                        </label>\n                        <Input\n                          id=\"exampleFormControlSelect6\"\n                          multiple=\"multiple\"\n                          type=\"select\"\n                        >\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                      <FormGroup>\n                        <label\n                          className=\"form-control-label\"\n                          htmlFor=\"exampleFormControlSelect4\"\n                        >\n                          Disabled multiple select\n                        </label>\n                        <Input\n                          disabled\n                          id=\"exampleFormControlSelect4\"\n                          multiple=\"multiple\"\n                          type=\"select\"\n                        >\n                          <option>1</option>\n                          <option>2</option>\n                          <option>3</option>\n                          <option>4</option>\n                          <option>5</option>\n                        </Input>\n                      </FormGroup>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">File browser</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <div className=\"custom-file\">\n                        <input\n                          className=\"custom-file-input\"\n                          id=\"customFileLang\"\n                          lang=\"en\"\n                          type=\"file\"\n                        />\n                        <label\n                          className=\"custom-file-label\"\n                          htmlFor=\"customFileLang\"\n                        >\n                          Select file\n                        </label>\n                      </div>\n                    </Form>\n                  </CardBody>\n                </Card>\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Checkboxes and radios</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Form>\n                      <Row>\n                        <Col md=\"6\">\n                          <div className=\"custom-control custom-checkbox mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"customCheck1\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customCheck1\"\n                            >\n                              Unchecked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-checkbox mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"customCheck2\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customCheck2\"\n                            >\n                              Checked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-checkbox mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              disabled\n                              id=\"customCheck3\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customCheck3\"\n                            >\n                              Disabled Unchecked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-checkbox mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              disabled\n                              id=\"customCheck4\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customCheck4\"\n                            >\n                              Disabled Checked\n                            </label>\n                          </div>\n                        </Col>\n                        <Col md=\"6\">\n                          <div className=\"custom-control custom-radio mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"customRadio5\"\n                              name=\"custom-radio-1\"\n                              type=\"radio\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customRadio5\"\n                            >\n                              Unchecked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-radio mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"customRadio6\"\n                              name=\"custom-radio-1\"\n                              type=\"radio\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customRadio6\"\n                            >\n                              Checked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-radio mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              disabled\n                              id=\"customRadio7\"\n                              name=\"custom-radio-3\"\n                              type=\"radio\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customRadio7\"\n                            >\n                              Disabled unchecked\n                            </label>\n                          </div>\n                          <div className=\"custom-control custom-radio mb-3\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              disabled\n                              id=\"customRadio8\"\n                              name=\"custom-radio-4\"\n                              type=\"radio\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"customRadio8\"\n                            >\n                              Disabled checkbox\n                            </label>\n                          </div>\n                        </Col>\n                      </Row>\n                    </Form>\n                  </CardBody>\n                </Card>\n              </div>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\nexport default Elements;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react plugin used to create google maps\nimport {\n  withScriptjs,\n  withGoogleMap,\n  GoogleMap,\n  Marker\n} from \"react-google-maps\";\n// reactstrap components\nimport { Card, Container, Row } from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nconst MapCustom = withScriptjs(\n  withGoogleMap(props => (\n    <GoogleMap\n      defaultZoom={12}\n      defaultCenter={{ lat: 40.748817, lng: -73.985428 }}\n      defaultOptions={{\n        scrollwheel: false,\n        styles: [\n          {\n            featureType: \"administrative\",\n            elementType: \"labels.text.fill\",\n            stylers: [{ color: \"#444444\" }]\n          },\n          {\n            featureType: \"landscape\",\n            elementType: \"all\",\n            stylers: [{ color: \"#f2f2f2\" }]\n          },\n          {\n            featureType: \"poi\",\n            elementType: \"all\",\n            stylers: [{ visibility: \"off\" }]\n          },\n          {\n            featureType: \"road\",\n            elementType: \"all\",\n            stylers: [{ saturation: -100 }, { lightness: 45 }]\n          },\n          {\n            featureType: \"road.highway\",\n            elementType: \"all\",\n            stylers: [{ visibility: \"simplified\" }]\n          },\n          {\n            featureType: \"road.arterial\",\n            elementType: \"labels.icon\",\n            stylers: [{ visibility: \"off\" }]\n          },\n          {\n            featureType: \"transit\",\n            elementType: \"all\",\n            stylers: [{ visibility: \"off\" }]\n          },\n          {\n            featureType: \"water\",\n            elementType: \"all\",\n            stylers: [{ color: \"#5e72e4\" }, { visibility: \"on\" }]\n          }\n        ]\n      }}\n    >\n      <Marker position={{ lat: 40.748817, lng: -73.985428 }} />\n    </GoogleMap>\n  ))\n);\n\nconst MapDefault = withScriptjs(\n  withGoogleMap(props => (\n    <GoogleMap\n      defaultZoom={8}\n      defaultCenter={{ lat: 40.748817, lng: -73.985428 }}\n      defaultOptions={{\n        scrollwheel: false\n      }}\n    >\n      <Marker position={{ lat: 40.748817, lng: -73.985428 }} />\n    </GoogleMap>\n  ))\n);\n\nclass Google extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Google maps\" parentName=\"Maps\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card className=\"border-0\">\n                <MapCustom\n                  googleMapURL=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE\"\n                  loadingElement={<div style={{ height: `100%` }} />}\n                  containerElement={\n                    <div\n                      style={{ height: `600px` }}\n                      className=\"map-canvas\"\n                      id=\"map-custom\"\n                    />\n                  }\n                  mapElement={\n                    <div style={{ height: `100%`, borderRadius: \"inherit\" }} />\n                  }\n                />\n              </Card>\n            </div>\n          </Row>\n          <Row>\n            <div className=\"col\">\n              <Card className=\"border-0\">\n                <MapDefault\n                  googleMapURL=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE\"\n                  loadingElement={<div style={{ height: `100%` }} />}\n                  containerElement={\n                    <div\n                      style={{ height: `600px` }}\n                      className=\"map-canvas\"\n                      id=\"map-default\"\n                    />\n                  }\n                  mapElement={\n                    <div style={{ height: `100%`, borderRadius: \"inherit\" }} />\n                  }\n                />\n              </Card>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Google;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport { Card, CardHeader, CardBody, Container, Row, Col } from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Grid extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Grid\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"justify-content-center\">\n            <Col className=\"card-wrapper\" lg=\"8\">\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Grid system</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example\">\n                    <Col sm>\n                      <span>One of three columns</span>\n                    </Col>\n                    <Col sm>\n                      <span>One of three columns</span>\n                    </Col>\n                    <Col sm>\n                      <span>One of three columns</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Equal-width</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>1 of 2</span>\n                    </Col>\n                    <Col>\n                      <span>2 of 2</span>\n                    </Col>\n                  </Row>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>1 of 3</span>\n                    </Col>\n                    <Col>\n                      <span>2 of 3</span>\n                    </Col>\n                    <Col>\n                      <span>3 of 3</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Setting one column width</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>1 of 3</span>\n                    </Col>\n                    <Col xs=\"6\">\n                      <span>2 of 3 (wider)</span>\n                    </Col>\n                    <Col>\n                      <span>3 of 3</span>\n                    </Col>\n                  </Row>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>1 of 3</span>\n                    </Col>\n                    <Col xs=\"5\">\n                      <span>2 of 3 (wider)</span>\n                    </Col>\n                    <Col>\n                      <span>3 of 3</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Variable width content</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example justify-content-md-center\">\n                    <Col lg=\"2\">\n                      <span>1 of 3</span>\n                    </Col>\n                    <Col md={{ size: \"autp\" }}>\n                      <span>Variable width content</span>\n                    </Col>\n                    <Col lg=\"2\">\n                      <span>3 of 3</span>\n                    </Col>\n                  </Row>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>1 of 3</span>\n                    </Col>\n                    <Col md={{ size: \"auto\" }}>\n                      <span>Variable width content</span>\n                    </Col>\n                    <Col lg=\"2\">\n                      <span>3 of 3</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Equal-width multi-row</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example\">\n                    <Col>\n                      <span>col</span>\n                    </Col>\n                    <Col>\n                      <span>col</span>\n                    </Col>\n                    <div className=\"w-100\" />\n                    <Col>\n                      <span>col</span>\n                    </Col>\n                    <Col>\n                      <span>col</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Mix and match</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"row-example\">\n                    <Col md=\"8\" xs=\"12\">\n                      <span>.col-12 .col-md-8</span>\n                    </Col>\n                    <Col md=\"4\" xs=\"6\">\n                      <span>.col-6 .col-md-4</span>\n                    </Col>\n                  </Row>\n\n                  <Row className=\"row-example\">\n                    <Col md=\"4\" xs=\"6\">\n                      <span>.col-6 .col-md-4</span>\n                    </Col>\n                    <Col md=\"4\" xs=\"6\">\n                      <span>.col-6 .col-md-4</span>\n                    </Col>\n                    <Col md=\"4\" xs=\"6\">\n                      <span>.col-6 .col-md-4</span>\n                    </Col>\n                  </Row>\n\n                  <Row className=\"row-example\">\n                    <Col xs=\"6\">\n                      <span>.col-6</span>\n                    </Col>\n                    <Col xs=\"6\">\n                      <span>.col-6</span>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Grid;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// reactstrap components\nimport { Container, Row, Col } from \"reactstrap\";\n\nclass AuthHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div className=\"header bg-gradient-info py-7 py-lg-8 pt-lg-9\">\n          <Container>\n            <div className=\"header-body text-center mb-7\">\n              <Row className=\"justify-content-center\">\n                <Col className=\"px-5\" lg=\"6\" md=\"8\" xl=\"5\">\n                  {this.props.title ? (\n                    <h1 className=\"text-white\">{this.props.title}</h1>\n                  ) : null}\n                  {this.props.lead ? (\n                    <p className=\"text-lead text-white\">{this.props.lead}</p>\n                  ) : null}\n                </Col>\n              </Row>\n            </div>\n          </Container>\n          <div className=\"separator separator-bottom separator-skew zindex-100\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              preserveAspectRatio=\"none\"\n              version=\"1.1\"\n              viewBox=\"0 0 2560 100\"\n              x=\"0\"\n              y=\"0\"\n            >\n              <polygon\n                className=\"fill-default\"\n                points=\"2560 0 2560 100 0 100\"\n              />\n            </svg>\n          </div>\n        </div>\n      </>\n    );\n  }\n}\n\nAuthHeader.propTypes = {\n  title: PropTypes.string,\n  lead: PropTypes.string\n};\n\nexport default AuthHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react component that copies the given text inside your clipboard\nimport { CopyToClipboard } from \"react-copy-to-clipboard\";\n// reactstrap components\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Icons extends React.Component {\n  state = {};\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Icons\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"justify-content-center\">\n            <Col lg=\"8\">\n              <Card>\n                <CardHeader className=\"bg-transparent\">\n                  <h3 className=\"mb-0\">Icons</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"icon-examples\">\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"active-40\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"active-40\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          id=\"tooltip982655500\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-active-40\" />\n                            <span>active-40</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip982655500\"\n                      >\n                        {this.state.copiedText === \"active-40\"\n                          ? \"Copied\"\n                          : \"Copy To Clipboard\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"air-baloon\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"air-baloon\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"air-baloon\"\n                          id=\"tooltip47550434\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-air-baloon\" />\n                            <span>air-baloon</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip47550434\"\n                      >\n                        {this.state.copiedText === \"air-baloon\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"album-2\"}\n                        onCopy={() => this.setState({ copiedText: \"album-2\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"album-2\"\n                          id=\"tooltip945481346\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-album-2\" />\n                            <span>album-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip945481346\"\n                      >\n                        {this.state.copiedText === \"album-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"align-center\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"align-center\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"align-center\"\n                          id=\"tooltip662352101\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-align-center\" />\n                            <span>align-center</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip662352101\"\n                      >\n                        {this.state.copiedText === \"align-center\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"left-2\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"align-left-2\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"align-left-2\"\n                          id=\"tooltip125499785\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-align-left-2\" />\n                            <span>align-left-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip125499785\"\n                      >\n                        {this.state.copiedText === \"align-left-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"ambulance\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"ambulance\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"ambulance\"\n                          id=\"tooltip382136785\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-ambulance\" />\n                            <span>ambulance</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip382136785\"\n                      >\n                        {this.state.copiedText === \"ambulance\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"asdasdsafsdsad\"}\n                        onCopy={() => this.setState({ copiedText: \"app\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"app\"\n                          id=\"tooltip3354607\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-app\" />\n                            <span>app</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip3354607\"\n                      >\n                        {this.state.copiedText === \"app\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"archive-2\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"archive-2\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"archive-2\"\n                          id=\"tooltip949558633\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-archive-2\" />\n                            <span>archive-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip949558633\"\n                      >\n                        {this.state.copiedText === \"archive-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"atom\"}\n                        onCopy={() => this.setState({ copiedText: \"atom\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"atom\"\n                          id=\"tooltip742747005\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-atom\" />\n                            <span>atom</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip742747005\"\n                      >\n                        {this.state.copiedText === \"atom\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"badge\"}\n                        onCopy={() => this.setState({ copiedText: \"badge\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"badge\"\n                          id=\"tooltip488565068\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-badge\" />\n                            <span>badge</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip488565068\"\n                      >\n                        {this.state.copiedText === \"badge\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bag-17\"}\n                        onCopy={() => this.setState({ copiedText: \"bag-17\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bag-17\"\n                          id=\"tooltip163626790\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bag-17\" />\n                            <span>bag-17</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip163626790\"\n                      >\n                        {this.state.copiedText === \"bag-17\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"basket\"}\n                        onCopy={() => this.setState({ copiedText: \"basket\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"basket\"\n                          id=\"tooltip387253692\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-basket\" />\n                            <span>basket</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip387253692\"\n                      >\n                        {this.state.copiedText === \"basket\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bell-55\"}\n                        onCopy={() => this.setState({ copiedText: \"bell-55\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bell-55\"\n                          id=\"tooltip126752761\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bell-55\" />\n                            <span>bell-55</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip126752761\"\n                      >\n                        {this.state.copiedText === \"bell-55\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bold-down\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"bold-down\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bold-down\"\n                          id=\"tooltip819281856\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bold-down\" />\n                            <span>bold-down</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip819281856\"\n                      >\n                        {this.state.copiedText === \"bold-down\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bold-left\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"bold-left\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bold-left\"\n                          id=\"tooltip881699027\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bold-left\" />\n                            <span>bold-left</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip881699027\"\n                      >\n                        {this.state.copiedText === \"bold-left\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bold-right\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"bold-right\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bold-right\"\n                          id=\"tooltip208507461\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bold-right\" />\n                            <span>bold-right</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip208507461\"\n                      >\n                        {this.state.copiedText === \"bold-right\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bold-up\"}\n                        onCopy={() => this.setState({ copiedText: \"bold-up\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bold-up\"\n                          id=\"tooltip105289310\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bold-up\" />\n                            <span>bold-up</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip105289310\"\n                      >\n                        {this.state.copiedText === \"bold-up\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bold\"}\n                        onCopy={() => this.setState({ copiedText: \"bold\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bold\"\n                          id=\"tooltip832362262\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bold\" />\n                            <span>bold</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip832362262\"\n                      >\n                        {this.state.copiedText === \"bold\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"book-bookmark\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"book-bookmark\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"book-bookmark\"\n                          id=\"tooltip606002875\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-book-bookmark\" />\n                            <span>book-bookmark</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip606002875\"\n                      >\n                        {this.state.copiedText === \"book-bookmark\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"books\"}\n                        onCopy={() => this.setState({ copiedText: \"books\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"books\"\n                          id=\"tooltip484529730\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-books\" />\n                            <span>books</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip484529730\"\n                      >\n                        {this.state.copiedText === \"books\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"box-2\"}\n                        onCopy={() => this.setState({ copiedText: \"box-2\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"box-2\"\n                          id=\"tooltip509205883\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-box-2\" />\n                            <span>box-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip509205883\"\n                      >\n                        {this.state.copiedText === \"box-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"briefcase-24\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"briefcase-24\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"briefcase-24\"\n                          id=\"tooltip147778056\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-briefcase-24\" />\n                            <span>briefcase-24</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip147778056\"\n                      >\n                        {this.state.copiedText === \"briefcase-24\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"building\"}\n                        onCopy={() => this.setState({ copiedText: \"building\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"building\"\n                          id=\"tooltip157423388\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-building\" />\n                            <span>building</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip157423388\"\n                      >\n                        {this.state.copiedText === \"building\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bulb-61\"}\n                        onCopy={() => this.setState({ copiedText: \"bulb-61\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bulb-61\"\n                          id=\"tooltip126210465\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bulb-61\" />\n                            <span>bulb-61</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip126210465\"\n                      >\n                        {this.state.copiedText === \"bulb-61\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"list-67\"}\n                        onCopy={() => this.setState({ copiedText: \"list-67\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bullet-list-67\"\n                          id=\"tooltip672244852\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bullet-list-67\" />\n                            <span>bullet-list-67</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip672244852\"\n                      >\n                        {this.state.copiedText === \"list-67\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"bus-front-12\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"bus-front-12\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"bus-front-12\"\n                          id=\"tooltip17383590\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-bus-front-12\" />\n                            <span>bus-front-12</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip17383590\"\n                      >\n                        {this.state.copiedText === \"bus-front-12\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"button-pause\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"button-pause\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"button-pause\"\n                          id=\"tooltip721295259\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-button-pause\" />\n                            <span>button-pause</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip721295259\"\n                      >\n                        {this.state.copiedText === \"button-pause\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"button-play\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"button-play\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"button-play\"\n                          id=\"tooltip397403700\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-button-play\" />\n                            <span>button-play</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip397403700\"\n                      >\n                        {this.state.copiedText === \"button-play\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"button-power\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"button-power\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"button-power\"\n                          id=\"tooltip286478188\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-button-power\" />\n                            <span>button-power</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip286478188\"\n                      >\n                        {this.state.copiedText === \"button-power\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"calendar-grid-58\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"calendar-grid-58\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"calendar-grid-58\"\n                          id=\"tooltip332635506\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-calendar-grid-58\" />\n                            <span>calendar-grid-58</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip332635506\"\n                      >\n                        {this.state.copiedText === \"calendar-grid-58\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"camera-compact\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"camera-compact\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"camera-compact\"\n                          id=\"tooltip872817724\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-camera-compact\" />\n                            <span>camera-compact</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip872817724\"\n                      >\n                        {this.state.copiedText === \"camera-compact\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"caps-small\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"caps-small\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"caps-small\"\n                          id=\"tooltip108271146\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-caps-small\" />\n                            <span>caps-small</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip108271146\"\n                      >\n                        {this.state.copiedText === \"caps-small\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"cart\"}\n                        onCopy={() => this.setState({ copiedText: \"cart\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"cart\"\n                          id=\"tooltip315375170\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-cart\" />\n                            <span>cart</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip315375170\"\n                      >\n                        {this.state.copiedText === \"cart\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"chart-bar-32\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"chart-bar-32\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"chart-bar-32\"\n                          id=\"tooltip906739900\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-chart-bar-32\" />\n                            <span>chart-bar-32</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip906739900\"\n                      >\n                        {this.state.copiedText === \"chart-bar-32\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"chart-pie-35\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"chart-pie-35\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"chart-pie-35\"\n                          id=\"tooltip211198935\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-chart-pie-35\" />\n                            <span>chart-pie-35</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip211198935\"\n                      >\n                        {this.state.copiedText === \"chart-pie-35\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"chat-round\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"chat-round\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"chat-round\"\n                          id=\"tooltip452799920\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-chat-round\" />\n                            <span>chat-round</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip452799920\"\n                      >\n                        {this.state.copiedText === \"chat-round\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"check-bold\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"check-bold\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"check-bold\"\n                          id=\"tooltip204269497\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-check-bold\" />\n                            <span>check-bold</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip204269497\"\n                      >\n                        {this.state.copiedText === \"check-bold\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"circle-08\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"circle-08\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"circle-08\"\n                          id=\"tooltip63796078\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-circle-08\" />\n                            <span>circle-08</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip63796078\"\n                      >\n                        {this.state.copiedText === \"circle-08\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"cloud-download-95\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"cloud-download-95\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"cloud-download-95\"\n                          id=\"tooltip171823822\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-cloud-download-95\" />\n                            <span>cloud-download-95</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip171823822\"\n                      >\n                        {this.state.copiedText === \"cloud-download-95\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"cloud-upload-96\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"cloud-upload-96\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"cloud-upload-96\"\n                          id=\"tooltip603641354\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-cloud-upload-96\" />\n                            <span>cloud-upload-96</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip603641354\"\n                      >\n                        {this.state.copiedText === \"cloud-upload-96\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"compass-04\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"compass-04\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"compass-04\"\n                          id=\"tooltip138747611\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-compass-04\" />\n                            <span>compass-04</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip138747611\"\n                      >\n                        {this.state.copiedText === \"compass-04\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"controller\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"controller\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"controller\"\n                          id=\"tooltip477306514\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-controller\" />\n                            <span>controller</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip477306514\"\n                      >\n                        {this.state.copiedText === \"controller\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"credit-card\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"credit-card\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"credit-card\"\n                          id=\"tooltip672313572\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-credit-card\" />\n                            <span>credit-card</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip672313572\"\n                      >\n                        {this.state.copiedText === \"credit-card\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"curved-next\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"curved-next\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"curved-next\"\n                          id=\"tooltip228405488\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-curved-next\" />\n                            <span>curved-next</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip228405488\"\n                      >\n                        {this.state.copiedText === \"curved-next\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"delivery-fast\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"delivery-fast\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"delivery-fast\"\n                          id=\"tooltip405559\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-delivery-fast\" />\n                            <span>delivery-fast</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip405559\"\n                      >\n                        {this.state.copiedText === \"delivery-fast\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"diamond\"}\n                        onCopy={() => this.setState({ copiedText: \"diamond\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"diamond\"\n                          id=\"tooltip842334307\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-diamond\" />\n                            <span>diamond</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip842334307\"\n                      >\n                        {this.state.copiedText === \"diamond\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"email-83\"}\n                        onCopy={() => this.setState({ copiedText: \"email-83\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"email-83\"\n                          id=\"tooltip695661232\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-email-83\" />\n                            <span>email-83</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip695661232\"\n                      >\n                        {this.state.copiedText === \"email-83\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"fat-add\"}\n                        onCopy={() => this.setState({ copiedText: \"fat-add\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"fat-add\"\n                          id=\"tooltip112280005\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-fat-add\" />\n                            <span>fat-add</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip112280005\"\n                      >\n                        {this.state.copiedText === \"fat-add\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"fat-delete\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"fat-delete\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"fat-delete\"\n                          id=\"tooltip361927124\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-fat-delete\" />\n                            <span>fat-delete</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip361927124\"\n                      >\n                        {this.state.copiedText === \"fat-delete\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"fat-remove\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"fat-remove\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"fat-remove\"\n                          id=\"tooltip451275187\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-fat-remove\" />\n                            <span>fat-remove</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip451275187\"\n                      >\n                        {this.state.copiedText === \"fat-remove\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"favourite-28\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"favourite-28\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"favourite-28\"\n                          id=\"tooltip893689512\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-favourite-28\" />\n                            <span>favourite-28</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip893689512\"\n                      >\n                        {this.state.copiedText === \"favourite-28\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"folder-17\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"folder-17\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"folder-17\"\n                          id=\"tooltip988458715\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-folder-17\" />\n                            <span>folder-17</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip988458715\"\n                      >\n                        {this.state.copiedText === \"folder-17\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"glasses-2\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"glasses-2\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"glasses-2\"\n                          id=\"tooltip576477258\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-glasses-2\" />\n                            <span>glasses-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip576477258\"\n                      >\n                        {this.state.copiedText === \"glasses-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"hat-3\"}\n                        onCopy={() => this.setState({ copiedText: \"hat-3\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"hat-3\"\n                          id=\"tooltip977228923\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-hat-3\" />\n                            <span>hat-3</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip977228923\"\n                      >\n                        {this.state.copiedText === \"hat-3\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"headphones\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"headphones\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"headphones\"\n                          id=\"tooltip711983709\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-headphones\" />\n                            <span>headphones</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip711983709\"\n                      >\n                        {this.state.copiedText === \"headphones\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"html5\"}\n                        onCopy={() => this.setState({ copiedText: \"html5\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"html5\"\n                          id=\"tooltip346497134\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-html5\" />\n                            <span>html5</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip346497134\"\n                      >\n                        {this.state.copiedText === \"html5\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"istanbul\"}\n                        onCopy={() => this.setState({ copiedText: \"istanbul\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"istanbul\"\n                          id=\"tooltip344591402\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-istanbul\" />\n                            <span>istanbul</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip344591402\"\n                      >\n                        {this.state.copiedText === \"istanbul\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"circle-08\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"circle-08\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"circle-08\"\n                          id=\"tooltip815029398\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-circle-08\" />\n                            <span>circle-08</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip815029398\"\n                      >\n                        {this.state.copiedText === \"circle-08\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"key-25\"}\n                        onCopy={() => this.setState({ copiedText: \"key-25\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"key-25\"\n                          id=\"tooltip580511416\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-key-25\" />\n                            <span>key-25</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip580511416\"\n                      >\n                        {this.state.copiedText === \"key-25\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"laptop\"}\n                        onCopy={() => this.setState({ copiedText: \"laptop\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"laptop\"\n                          id=\"tooltip455996160\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-laptop\" />\n                            <span>laptop</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip455996160\"\n                      >\n                        {this.state.copiedText === \"laptop\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"like-2\"}\n                        onCopy={() => this.setState({ copiedText: \"like-2\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"like-2\"\n                          id=\"tooltip928932853\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-like-2\" />\n                            <span>like-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip928932853\"\n                      >\n                        {this.state.copiedText === \"like-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"lock-circle-open\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"lock-circle-open\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"lock-circle-open\"\n                          id=\"tooltip634042199\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-lock-circle-open\" />\n                            <span>lock-circle-open</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip634042199\"\n                      >\n                        {this.state.copiedText === \"lock-circle-open\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"map-big\"}\n                        onCopy={() => this.setState({ copiedText: \"map-big\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"map-big\"\n                          id=\"tooltip615611081\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-map-big\" />\n                            <span>map-big</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip615611081\"\n                      >\n                        {this.state.copiedText === \"map-big\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"mobile-button\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"mobile-button\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"mobile-button\"\n                          id=\"tooltip426682279\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-mobile-button\" />\n                            <span>mobile-button</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip426682279\"\n                      >\n                        {this.state.copiedText === \"mobile-button\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"money-coins\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"money-coins\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"money-coins\"\n                          id=\"tooltip198953665\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-money-coins\" />\n                            <span>money-coins</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip198953665\"\n                      >\n                        {this.state.copiedText === \"money-coins\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"note-03\"}\n                        onCopy={() => this.setState({ copiedText: \"note-03\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"note-03\"\n                          id=\"tooltip909975995\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-note-03\" />\n                            <span>note-03</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip909975995\"\n                      >\n                        {this.state.copiedText === \"note-03\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"notification-70\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"notification-70\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"notification-70\"\n                          id=\"tooltip942089221\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-notification-70\" />\n                            <span>notification-70</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip942089221\"\n                      >\n                        {this.state.copiedText === \"notification-70\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"palette\"}\n                        onCopy={() => this.setState({ copiedText: \"palette\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"palette\"\n                          id=\"tooltip721048582\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-palette\" />\n                            <span>palette</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip721048582\"\n                      >\n                        {this.state.copiedText === \"palette\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"paper-diploma\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"paper-diploma\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"paper-diploma\"\n                          id=\"tooltip875782946\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-paper-diploma\" />\n                            <span>paper-diploma</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip875782946\"\n                      >\n                        {this.state.copiedText === \"paper-diploma\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"pin-3\"}\n                        onCopy={() => this.setState({ copiedText: \"pin-3\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"pin-3\"\n                          id=\"tooltip945087492\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-pin-3\" />\n                            <span>pin-3</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip945087492\"\n                      >\n                        {this.state.copiedText === \"pin-3\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"planet\"}\n                        onCopy={() => this.setState({ copiedText: \"planet\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"planet\"\n                          id=\"tooltip482139663\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-planet\" />\n                            <span>planet</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip482139663\"\n                      >\n                        {this.state.copiedText === \"planet\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"ruler-pencil\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"ruler-pencil\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"ruler-pencil\"\n                          id=\"tooltip693938896\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-ruler-pencil\" />\n                            <span>ruler-pencil</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip693938896\"\n                      >\n                        {this.state.copiedText === \"ruler-pencil\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"satisfied\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"satisfied\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"satisfied\"\n                          id=\"tooltip634575265\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-satisfied\" />\n                            <span>satisfied</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip634575265\"\n                      >\n                        {this.state.copiedText === \"satisfied\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"scissors\"}\n                        onCopy={() => this.setState({ copiedText: \"scissors\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"scissors\"\n                          id=\"tooltip688473648\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-scissors\" />\n                            <span>scissors</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip688473648\"\n                      >\n                        {this.state.copiedText === \"scissors\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"send\"}\n                        onCopy={() => this.setState({ copiedText: \"send\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"send\"\n                          id=\"tooltip161268791\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-send\" />\n                            <span>send</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip161268791\"\n                      >\n                        {this.state.copiedText === \"send\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"settings-gear-65\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"settings-gear-65\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"settings-gear-65\"\n                          id=\"tooltip487959296\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-settings-gear-65\" />\n                            <span>settings-gear-65</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip487959296\"\n                      >\n                        {this.state.copiedText === \"settings-gear-65\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"settings\"}\n                        onCopy={() => this.setState({ copiedText: \"settings\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"settings\"\n                          id=\"tooltip156598208\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-settings\" />\n                            <span>settings</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip156598208\"\n                      >\n                        {this.state.copiedText === \"settings\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"single-02\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"single-02\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"single-02\"\n                          id=\"tooltip487356467\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-single-02\" />\n                            <span>single-02</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip487356467\"\n                      >\n                        {this.state.copiedText === \"single-02\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"single-copy-04\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"single-copy-04\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"single-copy-04\"\n                          id=\"tooltip340498904\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-single-copy-04\" />\n                            <span>single-copy-04</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip340498904\"\n                      >\n                        {this.state.copiedText === \"single-copy-04\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"sound-wave\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"sound-wave\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"sound-wave\"\n                          id=\"tooltip289156059\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-sound-wave\" />\n                            <span>sound-wave</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip289156059\"\n                      >\n                        {this.state.copiedText === \"sound-wave\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"spaceship\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"spaceship\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"spaceship\"\n                          id=\"tooltip603604642\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-spaceship\" />\n                            <span>spaceship</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip603604642\"\n                      >\n                        {this.state.copiedText === \"spaceship\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"square-pin\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"square-pin\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"square-pin\"\n                          id=\"tooltip153036405\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-square-pin\" />\n                            <span>square-pin</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip153036405\"\n                      >\n                        {this.state.copiedText === \"square-pin\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"support-16\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"support-16\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"support-16\"\n                          id=\"tooltip906422211\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-support-16\" />\n                            <span>support-16</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip906422211\"\n                      >\n                        {this.state.copiedText === \"support-16\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"tablet-button\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"tablet-button\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"tablet-button\"\n                          id=\"tooltip517579618\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-tablet-button\" />\n                            <span>tablet-button</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip517579618\"\n                      >\n                        {this.state.copiedText === \"tablet-button\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"tag\"}\n                        onCopy={() => this.setState({ copiedText: \"tag\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"tag\"\n                          id=\"tooltip297195808\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-tag\" />\n                            <span>tag</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip297195808\"\n                      >\n                        {this.state.copiedText === \"tag\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"tie-bow\"}\n                        onCopy={() => this.setState({ copiedText: \"tie-bow\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"tie-bow\"\n                          id=\"tooltip793084796\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-tie-bow\" />\n                            <span>tie-bow</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip793084796\"\n                      >\n                        {this.state.copiedText === \"tie-bow\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"time-alarm\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"time-alarm\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"time-alarm\"\n                          id=\"tooltip258891035\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-time-alarm\" />\n                            <span>time-alarm</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip258891035\"\n                      >\n                        {this.state.copiedText === \"time-alarm\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"trophy\"}\n                        onCopy={() => this.setState({ copiedText: \"trophy\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"trophy\"\n                          id=\"tooltip881235890\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-trophy\" />\n                            <span>trophy</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip881235890\"\n                      >\n                        {this.state.copiedText === \"trophy\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"tv-2\"}\n                        onCopy={() => this.setState({ copiedText: \"tv-2\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"tv-2\"\n                          id=\"tooltip330279137\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-tv-2\" />\n                            <span>tv-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip330279137\"\n                      >\n                        {this.state.copiedText === \"tv-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"umbrella-13\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"umbrella-13\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"umbrella-13\"\n                          id=\"tooltip412313570\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-umbrella-13\" />\n                            <span>umbrella-13</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip412313570\"\n                      >\n                        {this.state.copiedText === \"umbrella-13\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"user-run\"}\n                        onCopy={() => this.setState({ copiedText: \"user-run\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"user-run\"\n                          id=\"tooltip176201858\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-user-run\" />\n                            <span>user-run</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip176201858\"\n                      >\n                        {this.state.copiedText === \"user-run\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"vector\"}\n                        onCopy={() => this.setState({ copiedText: \"vector\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"vector\"\n                          id=\"tooltip71164138\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-vector\" />\n                            <span>vector</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip71164138\"\n                      >\n                        {this.state.copiedText === \"vector\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"watch-time\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"watch-time\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"watch-time\"\n                          id=\"tooltip495578192\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-watch-time\" />\n                            <span>watch-time</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip495578192\"\n                      >\n                        {this.state.copiedText === \"watch-time\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"world\"}\n                        onCopy={() => this.setState({ copiedText: \"world\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"world\"\n                          id=\"tooltip604848245\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-world\" />\n                            <span>world</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip604848245\"\n                      >\n                        {this.state.copiedText === \"world\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"zoom-split-in\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"zoom-split-in\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"zoom-split-in\"\n                          id=\"tooltip916423293\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-zoom-split-in\" />\n                            <span>zoom-split-in</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip916423293\"\n                      >\n                        {this.state.copiedText === \"zoom-split-in\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"collection\"}\n                        onCopy={() =>\n                          this.setState({ copiedText: \"collection\" })\n                        }\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"collection\"\n                          id=\"tooltip142934658\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-collection\" />\n                            <span>collection</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip142934658\"\n                      >\n                        {this.state.copiedText === \"collection\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"image\"}\n                        onCopy={() => this.setState({ copiedText: \"image\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"image\"\n                          id=\"tooltip842947283\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-image\" />\n                            <span>image</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip842947283\"\n                      >\n                        {this.state.copiedText === \"image\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"shop\"}\n                        onCopy={() => this.setState({ copiedText: \"shop\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"shop\"\n                          id=\"tooltip531866818\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-shop\" />\n                            <span>shop</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip531866818\"\n                      >\n                        {this.state.copiedText === \"shop\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"ungroup\"}\n                        onCopy={() => this.setState({ copiedText: \"ungroup\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"ungroup\"\n                          id=\"tooltip470734151\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-ungroup\" />\n                            <span>ungroup</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip470734151\"\n                      >\n                        {this.state.copiedText === \"ungroup\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"world-2\"}\n                        onCopy={() => this.setState({ copiedText: \"world-2\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"world-2\"\n                          id=\"tooltip932383030\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-world-2\" />\n                            <span>world-2</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip932383030\"\n                      >\n                        {this.state.copiedText === \"world-2\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                    <Col lg=\"3\" md=\"6\">\n                      <CopyToClipboard\n                        text={\"ui-04\"}\n                        onCopy={() => this.setState({ copiedText: \"ui-04\" })}\n                      >\n                        <button\n                          className=\"btn-icon-clipboard\"\n                          data-clipboard-text=\"ui-04\"\n                          id=\"tooltip9332484\"\n                          type=\"button\"\n                        >\n                          <div>\n                            <i className=\"ni ni-ui-04\" />\n                            <span>ui-04</span>\n                          </div>\n                        </button>\n                      </CopyToClipboard>\n                      <UncontrolledTooltip\n                        delay={0}\n                        trigger=\"hover focus\"\n                        target=\"tooltip9332484\"\n                      >\n                        {this.state.copiedText === \"ui-04\"\n                          ? \"Copied\"\n                          : \"Copy To Clipbord\"}\n                      </UncontrolledTooltip>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Icons;\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classnames from \"classnames\";\r\n// reactstrap components\r\nimport {\r\n  Button,\r\n  Card,\r\n  CardHeader,\r\n  CardBody,\r\n  FormGroup,\r\n  Form,\r\n  Input,\r\n  InputGroupAddon,\r\n  InputGroupText,\r\n  InputGroup,\r\n  Container,\r\n  Row,\r\n  Col\r\n} from \"reactstrap\";\r\n// core components\r\nimport AuthHeader from \"components/Headers/AuthHeader.js\";\r\nimport Configuration from \"../../../configuration/Configuration\";\r\nimport DataService from \"../../../services/DataService\";\r\n\r\nclass Login extends React.Component{\r\ndataService = new DataService();\r\n  state = {};\r\n  render() {\r\n    const config = new Configuration();\r\n    const redirectURL = config.OAUTH2_LOGIN_REDIRECT_URL;\r\n    const signin = config.OAUTH2_LOGIN_URL;\r\n    return (\r\n      <>\r\n        <AuthHeader\r\n          title=\"Welcome!\"\r\n          lead=\"Please login with your Google account\"\r\n        />\r\n        <Container className=\"mt--8 pb-5\">\r\n          <Row className=\"justify-content-center\">\r\n            <Col lg=\"5\" md=\"7\">\r\n              <Card className=\"bg-secondary border-0 mb-0\">\r\n                <CardHeader className=\"bg-transparent pb-5\">\r\n                  <div className=\"text-muted text-center mt-2 mb-3\">\r\n                    <small>Sign in with</small>\r\n                  </div>\r\n                  <div className=\"btn-wrapper text-center\">\r\n                    <Form className=\"form\" action={signin} method=\"post\" style={{textAlign:\"center\"}}>\r\n                      <input type=\"hidden\" name=\"Provider\" value=\"Google\"/>\r\n                      <input type=\"hidden\" name=\"ReturnUrl\" value={redirectURL}/>\r\n                      <Button color=\"default\"\r\n                              type=\"submit\"\r\n                              className=\"btn-neutral btn-icon\"\r\n                              color=\"default\">\r\n                      <span className=\"btn-inner--icon mr-1\">\r\n                        <img\r\n                            alt=\"...\"\r\n                            src={require(\"assets/img/icons/common/google.svg\")}\r\n                        />\r\n                      </span>\r\n                      <span className=\"btn-inner--text\">Google</span>\r\n                      </Button>\r\n                    </Form>\r\n                  </div>\r\n                </CardHeader>\r\n\r\n              </Card>\r\n\r\n            </Col>\r\n          </Row>\r\n        </Container>\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default Login;\r\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport AuthHeader from \"components/Headers/AuthHeader.js\";\n\nclass Lock extends React.Component {\n  state = {};\n  render() {\n    return (\n      <>\n        <AuthHeader title=\"Lock screen\" lead=\"Better to be safe than sorry.\" />\n        <Container className=\"mt--8 pb-5\">\n          <Row className=\"justify-content-center\">\n            <Col lg=\"5\" md=\"7\">\n              <Card className=\"card-profile bg-secondary mt-5\">\n                <Row className=\"justify-content-center\">\n                  <Col className=\"order-lg-2\" lg=\"3\">\n                    <div className=\"card-profile-image\">\n                      <img\n                        alt=\"...\"\n                        className=\"rounded-circle border-secondary\"\n                        src={require(\"assets/img/theme/team-4.jpg\")}\n                      />\n                    </div>\n                  </Col>\n                </Row>\n                <CardBody className=\"pt-7 px-5\">\n                  <div className=\"text-center mb-4\">\n                    <h3>Jessica Jones</h3>\n                  </div>\n                  <Form role=\"form\">\n                    <FormGroup\n                      className={classnames({\n                        focused: this.state.focused\n                      })}\n                    >\n                      <InputGroup className=\"input-group-merge input-group-alternative\">\n                        <InputGroupAddon addonType=\"prepend\">\n                          <InputGroupText>\n                            <i className=\"ni ni-lock-circle-open\" />\n                          </InputGroupText>\n                        </InputGroupAddon>\n                        <Input\n                          placeholder=\"Password\"\n                          type=\"password\"\n                          onFocus={() => this.setState({ focused: true })}\n                          onBlur={() => this.setState({ focused: false })}\n                        />\n                      </InputGroup>\n                    </FormGroup>\n                    <div className=\"text-center\">\n                      <Button className=\"mt-2\" color=\"info\" type=\"button\">\n                        Unlock\n                      </Button>\n                    </div>\n                  </Form>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Lock;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport { Button, Container, Row, Col } from \"reactstrap\";\n\nclass ProfileHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div\n          className=\"header pb-6 d-flex align-items-center\"\n          style={{\n            minHeight: \"500px\",\n            backgroundImage:\n              'url(\"' + require(\"assets/img/theme/profile-cover.jpg\") + '\")',\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center top\"\n          }}\n        >\n          <span className=\"mask bg-gradient-info opacity-8\" />\n\n          <Container className=\"d-flex align-items-center\" fluid>\n            <Row>\n              <Col lg=\"7\" md=\"10\">\n                <h1 className=\"display-2 text-white\">Hello Jesse</h1>\n                <p className=\"text-white mt-0 mb-5\">\n                  This is your profile page. You can see the progress you've\n                  made with your work and manage your projects or assigned tasks\n                </p>\n                <Button\n                  className=\"btn-neutral\"\n                  color=\"default\"\n                  href=\"#pablo\"\n                  onClick={e => e.preventDefault()}\n                >\n                  Edit profile\n                </Button>\n              </Col>\n            </Row>\n          </Container>\n        </div>\n      </>\n    );\n  }\n}\n\nexport default ProfileHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// react plugin for creating notifications over the dashboard\nimport NotificationAlert from \"react-notification-alert\";\n// react component used to create sweet alerts\nimport ReactBSAlert from \"react-bootstrap-sweetalert\";\n// reactstrap components\nimport {\n  UncontrolledAlert,\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  Modal,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Notifications extends React.Component {\n  state = {\n    defaultModal: false,\n    notificationModal: false,\n    formModal: false,\n    alert: null\n  };\n  toggleModal = state => {\n    this.setState({\n      [state]: !this.state[state]\n    });\n  };\n  notify = type => {\n    let options = {\n      place: \"tc\",\n      message: (\n        <div className=\"alert-text\">\n          <span className=\"alert-title\" data-notify=\"title\">\n            {\" \"}\n            Bootstrap Notify\n          </span>\n          <span data-notify=\"message\">\n            Turning standard Bootstrap alerts into awesome notifications\n          </span>\n        </div>\n      ),\n      type: type,\n      icon: \"ni ni-bell-55\",\n      autoDismiss: 7\n    };\n    this.refs.notificationAlert.notificationAlert(options);\n  };\n  basicAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Here's a message!\"\n          onConfirm={() => this.hideAlert()}\n          onCancel={() => this.hideAlert()}\n          btnSize=\"\"\n          text=\"A few words about this sweet alert ...\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      )\n    });\n  };\n  infoAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          info\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Info\"\n          onConfirm={() => this.hideAlert()}\n          onCancel={() => this.hideAlert()}\n          confirmBtnBsStyle=\"info\"\n          confirmBtnText=\"Ok\"\n          btnSize=\"\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      )\n    });\n  };\n  successAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          success\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Success\"\n          onConfirm={() => this.hideAlert()}\n          onCancel={() => this.hideAlert()}\n          confirmBtnBsStyle=\"success\"\n          confirmBtnText=\"Ok\"\n          btnSize=\"\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      )\n    });\n  };\n  warningAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          warning\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Warning\"\n          onConfirm={() => this.hideAlert()}\n          onCancel={() => this.hideAlert()}\n          confirmBtnBsStyle=\"warning\"\n          confirmBtnText=\"Ok\"\n          btnSize=\"\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      )\n    });\n  };\n  questionAlert = () => {\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          custom\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Question\"\n          customIcon={\n            <div\n              className=\"swal2-icon swal2-question swal2-animate-question-icon\"\n              style={{ display: \"flex\" }}\n            >\n              <span className=\"swal2-icon-text\">?</span>\n            </div>\n          }\n          onConfirm={() => this.hideAlert()}\n          onCancel={() => this.hideAlert()}\n          confirmBtnBsStyle=\"default\"\n          confirmBtnText=\"Ok\"\n          btnSize=\"\"\n        >\n          A few words about this sweet alert ...\n        </ReactBSAlert>\n      )\n    });\n  };\n  hideAlert = () => {\n    this.setState({\n      alert: null\n    });\n  };\n  render() {\n    return (\n      <>\n        {this.state.alert}\n        <div className=\"rna-wrapper\">\n          <NotificationAlert ref=\"notificationAlert\" />\n        </div>\n        <SimpleHeader name=\"Notifications\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"justify-content-center\">\n            <Col className=\"card-wrapper\" lg=\"8\">\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Alerts</h3>\n                </CardHeader>\n                <CardBody>\n                  <UncontrolledAlert className=\"alert-default\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Default!</strong> This is a default alert—check it\n                      out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"primary\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Primary!</strong> This is a primary alert—check it\n                      out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"secondary\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Secondary!</strong> This is a secondary\n                      alert—check it out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"info\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Info!</strong> This is a info alert—check it out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"success\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Success!</strong> This is a success alert—check it\n                      out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"danger\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Danger!</strong> This is a danger alert—check it\n                      out!\n                    </span>\n                  </UncontrolledAlert>\n                  <UncontrolledAlert color=\"warning\">\n                    <span className=\"alert-icon\">\n                      <i className=\"ni ni-like-2\" />\n                    </span>\n                    <span className=\"alert-text ml-1\">\n                      <strong>Warning!</strong> This is a warning alert—check it\n                      out!\n                    </span>\n                  </UncontrolledAlert>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Modals</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row>\n                    <Col md=\"4\">\n                      <Button\n                        block\n                        className=\"mb-3\"\n                        color=\"primary\"\n                        onClick={() => this.toggleModal(\"defaultModal\")}\n                      >\n                        Default\n                      </Button>\n                      <Modal\n                        className=\"modal-dialog-centered\"\n                        isOpen={this.state.defaultModal}\n                        toggle={() => this.toggleModal(\"defaultModal\")}\n                      >\n                        <div className=\"modal-header\">\n                          <h6 className=\"modal-title\" id=\"modal-title-default\">\n                            Type your modal title\n                          </h6>\n                          <button\n                            aria-label=\"Close\"\n                            className=\"close\"\n                            data-dismiss=\"modal\"\n                            type=\"button\"\n                            onClick={() => this.toggleModal(\"defaultModal\")}\n                          >\n                            <span aria-hidden={true}>×</span>\n                          </button>\n                        </div>\n                        <div className=\"modal-body\">\n                          <p>\n                            Far far away, behind the word mountains, far from\n                            the countries Vokalia and Consonantia, there live\n                            the blind texts. Separated they live in\n                            Bookmarksgrove right at the coast of the Semantics,\n                            a large language ocean.\n                          </p>\n                          <p>\n                            A small river named Duden flows by their place and\n                            supplies it with the necessary regelialia. It is a\n                            paradisematic country, in which roasted parts of\n                            sentences fly into your mouth.\n                          </p>\n                        </div>\n                        <div className=\"modal-footer\">\n                          <Button color=\"primary\" type=\"button\">\n                            Save changes\n                          </Button>\n                          <Button\n                            className=\"ml-auto\"\n                            color=\"link\"\n                            data-dismiss=\"modal\"\n                            type=\"button\"\n                            onClick={() => this.toggleModal(\"defaultModal\")}\n                          >\n                            Close\n                          </Button>\n                        </div>\n                      </Modal>\n                    </Col>\n                    <Col md=\"4\">\n                      <Button\n                        block\n                        className=\"mb-3\"\n                        color=\"warning\"\n                        onClick={() => this.toggleModal(\"notificationModal\")}\n                      >\n                        Notification\n                      </Button>\n                      <Modal\n                        className=\"modal-dialog-centered modal-danger\"\n                        contentClassName=\"bg-gradient-danger\"\n                        isOpen={this.state.notificationModal}\n                        toggle={() => this.toggleModal(\"notificationModal\")}\n                      >\n                        <div className=\"modal-header\">\n                          <h6\n                            className=\"modal-title\"\n                            id=\"modal-title-notification\"\n                          >\n                            Your attention is required\n                          </h6>\n                          <button\n                            aria-label=\"Close\"\n                            className=\"close\"\n                            data-dismiss=\"modal\"\n                            type=\"button\"\n                            onClick={() =>\n                              this.toggleModal(\"notificationModal\")\n                            }\n                          >\n                            <span aria-hidden={true}>×</span>\n                          </button>\n                        </div>\n                        <div className=\"modal-body\">\n                          <div className=\"py-3 text-center\">\n                            <i className=\"ni ni-bell-55 ni-3x\" />\n                            <h4 className=\"heading mt-4\">\n                              You should read this!\n                            </h4>\n                            <p>\n                              A small river named Duden flows by their place and\n                              supplies it with the necessary regelialia.\n                            </p>\n                          </div>\n                        </div>\n                        <div className=\"modal-footer\">\n                          <Button\n                            className=\"btn-white\"\n                            color=\"default\"\n                            type=\"button\"\n                          >\n                            Ok, Got it\n                          </Button>\n                          <Button\n                            className=\"text-white ml-auto\"\n                            color=\"link\"\n                            data-dismiss=\"modal\"\n                            type=\"button\"\n                            onClick={() =>\n                              this.toggleModal(\"notificationModal\")\n                            }\n                          >\n                            Close\n                          </Button>\n                        </div>\n                      </Modal>\n                    </Col>\n                    <Col md=\"4\">\n                      <Button\n                        block\n                        color=\"default\"\n                        onClick={() => this.toggleModal(\"formModal\")}\n                      >\n                        Form\n                      </Button>\n                      <Modal\n                        className=\"modal-dialog-centered\"\n                        size=\"sm\"\n                        isOpen={this.state.formModal}\n                        toggle={() => this.toggleModal(\"formModal\")}\n                      >\n                        <div className=\"modal-body p-0\">\n                          <Card className=\"bg-secondary border-0 mb-0\">\n                            <CardHeader className=\"bg-transparent pb-5\">\n                              <div className=\"text-muted text-center mt-2 mb-3\">\n                                <small>Sign in with</small>\n                              </div>\n                              <div className=\"btn-wrapper text-center\">\n                                <Button\n                                  className=\"btn-neutral btn-icon\"\n                                  color=\"default\"\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  <span className=\"btn-inner--icon mr-1\">\n                                    <img\n                                      alt=\"...\"\n                                      src={require(\"assets/img/icons/common/github.svg\")}\n                                    />\n                                  </span>\n                                  <span className=\"btn-inner--text\">\n                                    Github\n                                  </span>\n                                </Button>\n                                <Button\n                                  className=\"btn-neutral btn-icon\"\n                                  color=\"default\"\n                                  href=\"#pablo\"\n                                  onClick={e => e.preventDefault()}\n                                >\n                                  <span className=\"btn-inner--icon mr-1\">\n                                    <img\n                                      alt=\"...\"\n                                      src={require(\"assets/img/icons/common/google.svg\")}\n                                    />\n                                  </span>\n                                  <span className=\"btn-inner--text\">\n                                    Google\n                                  </span>\n                                </Button>\n                              </div>\n                            </CardHeader>\n                            <CardBody className=\"px-lg-5 py-lg-5\">\n                              <div className=\"text-center text-muted mb-4\">\n                                <small>Or sign in with credentials</small>\n                              </div>\n                              <Form role=\"form\">\n                                <FormGroup\n                                  className={classnames(\"mb-3\", {\n                                    focused: this.state.focusedEmail\n                                  })}\n                                >\n                                  <InputGroup className=\"input-group-merge input-group-alternative\">\n                                    <InputGroupAddon addonType=\"prepend\">\n                                      <InputGroupText>\n                                        <i className=\"ni ni-email-83\" />\n                                      </InputGroupText>\n                                    </InputGroupAddon>\n                                    <Input\n                                      placeholder=\"Email\"\n                                      type=\"email\"\n                                      onFocus={() =>\n                                        this.setState({ focusedEmail: true })\n                                      }\n                                      onBlur={() =>\n                                        this.setState({ focusedEmail: false })\n                                      }\n                                    />\n                                  </InputGroup>\n                                </FormGroup>\n                                <FormGroup\n                                  className={classnames({\n                                    focused: this.state.focusedPassword\n                                  })}\n                                >\n                                  <InputGroup className=\"input-group-merge input-group-alternative\">\n                                    <InputGroupAddon addonType=\"prepend\">\n                                      <InputGroupText>\n                                        <i className=\"ni ni-lock-circle-open\" />\n                                      </InputGroupText>\n                                    </InputGroupAddon>\n                                    <Input\n                                      placeholder=\"Password\"\n                                      type=\"password\"\n                                      onFocus={() =>\n                                        this.setState({ focusedPassword: true })\n                                      }\n                                      onBlur={() =>\n                                        this.setState({\n                                          focusedPassword: false\n                                        })\n                                      }\n                                    />\n                                  </InputGroup>\n                                </FormGroup>\n                                <div className=\"custom-control custom-control-alternative custom-checkbox\">\n                                  <input\n                                    className=\"custom-control-input\"\n                                    id=\" customCheckLogin\"\n                                    type=\"checkbox\"\n                                  />\n                                  <label\n                                    className=\"custom-control-label\"\n                                    htmlFor=\" customCheckLogin\"\n                                  >\n                                    <span className=\"text-muted\">\n                                      Remember me\n                                    </span>\n                                  </label>\n                                </div>\n                                <div className=\"text-center\">\n                                  <Button\n                                    className=\"my-4\"\n                                    color=\"primary\"\n                                    type=\"button\"\n                                  >\n                                    Sign in\n                                  </Button>\n                                </div>\n                              </Form>\n                            </CardBody>\n                          </Card>\n                        </div>\n                      </Modal>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Notifications</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button\n                    color=\"default\"\n                    onClick={() => this.notify(\"default\")}\n                  >\n                    Default\n                  </Button>\n                  <Button color=\"info\" onClick={() => this.notify(\"info\")}>\n                    Info\n                  </Button>\n                  <Button\n                    color=\"success\"\n                    onClick={() => this.notify(\"success\")}\n                  >\n                    Success\n                  </Button>\n                  <Button\n                    color=\"warning\"\n                    onClick={() => this.notify(\"warning\")}\n                  >\n                    Warning\n                  </Button>\n                  <Button color=\"danger\" onClick={() => this.notify(\"danger\")}>\n                    Danger\n                  </Button>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Sweet alerts</h3>\n                </CardHeader>\n                <CardBody>\n                  <Button color=\"primary\" onClick={this.basicAlert}>\n                    Basic alert\n                  </Button>\n                  <Button color=\"info\" onClick={this.infoAlert}>\n                    Info alert\n                  </Button>\n                  <Button color=\"success\" onClick={this.successAlert}>\n                    Success alert\n                  </Button>\n                  <Button color=\"warning\" onClick={this.warningAlert}>\n                    Warning alert\n                  </Button>\n                  <Button color=\"default\" onClick={this.questionAlert}>\n                    Question\n                  </Button>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Notifications;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardFooter,\n  Table,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport AuthHeader from \"components/Headers/AuthHeader.js\";\nimport DataService from \"../../../services/DataService\";\n\nclass Pricing extends React.Component {\n  dataService = new DataService();\n\n  componentDidMount() {\n\n    //this.dataService.retrieveResponses();\n  }\n\n  render() {\n    return (\n      <>\n        <AuthHeader title=\"Choose the best plan for your business\" lead=\"\" />\n        <Container className=\"mt--8 pb-5\">\n          <Row className=\"justify-content-center\">\n            <Col lg=\"10\">\n              <div className=\"pricing card-group flex-column flex-md-row mb-3\">\n                <Card className=\"card-pricing border-0 text-center mb-4\">\n                  <CardHeader className=\"bg-transparent\">\n                    <h4 className=\"text-uppercase ls-1 text-info py-3 mb-0\">\n                      Bravo pack\n                    </h4>\n                  </CardHeader>\n                  <CardBody className=\"px-lg-7\">\n                    <div className=\"display-2\">$49</div>\n                    <span className=\"text-muted\">per application</span>\n                    <ul className=\"list-unstyled my-4\">\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-gradient-info shadow rounded-circle text-white\">\n                              <i className=\"fas fa-terminal\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2\">Complete documentation</span>\n                          </div>\n                        </div>\n                      </li>\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-gradient-info shadow rounded-circle text-white\">\n                              <i className=\"fas fa-pen-fancy\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2\">\n                              Working materials in Sketch\n                            </span>\n                          </div>\n                        </div>\n                      </li>\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-gradient-info shadow rounded-circle text-white\">\n                              <i className=\"fas fa-hdd\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2\">2GB cloud storage</span>\n                          </div>\n                        </div>\n                      </li>\n                    </ul>\n                    <Button className=\"mb-3\" color=\"info\" type=\"button\">\n                      Start free trial\n                    </Button>\n                  </CardBody>\n                  <CardFooter>\n                    <a\n                      className=\"text-light\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Request a demo\n                    </a>\n                  </CardFooter>\n                </Card>\n                <Card className=\"card-pricing bg-gradient-success zoom-in shadow-lg rounded border-0 text-center mb-4\">\n                  <CardHeader className=\"bg-transparent\">\n                    <h4 className=\"text-uppercase ls-1 text-white py-3 mb-0\">\n                      Alpha pack\n                    </h4>\n                  </CardHeader>\n                  <CardBody className=\"px-lg-7\">\n                    <div className=\"display-1 text-white\">$199</div>\n                    <span className=\"text-white\">per application</span>\n                    <ul className=\"list-unstyled my-4\">\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle text-muted\">\n                              <i className=\"fas fa-terminal\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2 text-white\">\n                              Complete documentation\n                            </span>\n                          </div>\n                        </div>\n                      </li>\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle text-muted\">\n                              <i className=\"fas fa-pen-fancy\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2 text-white\">\n                              Working materials in Sketch\n                            </span>\n                          </div>\n                        </div>\n                      </li>\n                      <li>\n                        <div className=\"d-flex align-items-center\">\n                          <div>\n                            <div className=\"icon icon-xs icon-shape bg-white shadow rounded-circle text-muted\">\n                              <i className=\"fas fa-hdd\" />\n                            </div>\n                          </div>\n                          <div>\n                            <span className=\"pl-2 text-white\">\n                              2GB cloud storage\n                            </span>\n                          </div>\n                        </div>\n                      </li>\n                    </ul>\n                    <Button className=\"mb-3\" color=\"secondary\" type=\"button\">\n                      Start free trial\n                    </Button>\n                  </CardBody>\n                  <CardFooter className=\"bg-transparent\">\n                    <a\n                      className=\"text-white\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Contact sales\n                    </a>\n                  </CardFooter>\n                </Card>\n              </div>\n            </Col>\n          </Row>\n          <div className=\"d-flex justify-content-lg-center px-3 mt-5\">\n            <div>\n              <div className=\"icon icon-shape bg-gradient-white shadow rounded-circle text-primary\">\n                <i className=\"ni ni-building text-primary\" />\n              </div>\n            </div>\n            <Col lg=\"6\">\n              <p className=\"text-white\">\n                <strong>The Arctic Ocean</strong> freezes every winter and much\n                of the sea-ice then thaws every summer, and that process will\n                continue whatever.\n              </p>\n            </Col>\n          </div>\n          <Row className=\"row-grid justify-content-center\">\n            <Col lg=\"10\">\n              <Table className=\"table-dark mt-5\" responsive>\n                <thead>\n                  <tr>\n                    <th className=\"px-0 bg-transparent\" scope=\"col\">\n                      <span className=\"text-light font-weight-700\">\n                        Features\n                      </span>\n                    </th>\n                    <th className=\"text-center bg-transparent\" scope=\"col\">\n                      Bravo Pack\n                    </th>\n                    <th className=\"text-center bg-transparent\" scope=\"col\">\n                      Alpha Pack\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr>\n                    <td className=\"px-0\">IMAP/POP Support</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Email Forwarding</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Active Sync</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Multiple domain hosting</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">\n                      <span className=\"text-sm text-light\">\n                        Limited to 1 domain only\n                      </span>\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Additional storage upgrade</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">30MB Attachment Limit</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">-</td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Password protected / Expiry links</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">-</td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-0\">Unlimited Custom Apps</td>\n                    <td className=\"text-center\">\n                      <i className=\"fas fa-check text-success\" />\n                    </td>\n                    <td className=\"text-center\">-</td>\n                  </tr>\n                </tbody>\n              </Table>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Pricing;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardImg,\n  CardTitle,\n  FormGroup,\n  Form,\n  Input,\n  ListGroupItem,\n  ListGroup,\n  Progress,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport ProfileHeader from \"components/Headers/ProfileHeader.js\";\n\nclass Profile extends React.Component {\n  render() {\n    return (\n      <>\n        <ProfileHeader />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col className=\"order-xl-2\" xl=\"4\">\n              <Card className=\"card-profile\">\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                  top\n                />\n                <Row className=\"justify-content-center\">\n                  <Col className=\"order-lg-2\" lg=\"3\">\n                    <div className=\"card-profile-image\">\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <img\n                          alt=\"...\"\n                          className=\"rounded-circle\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                    </div>\n                  </Col>\n                </Row>\n                <CardHeader className=\"text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4\">\n                  <div className=\"d-flex justify-content-between\">\n                    <Button\n                      className=\"mr-4\"\n                      color=\"info\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      Connect\n                    </Button>\n                    <Button\n                      className=\"float-right\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      Message\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardBody className=\"pt-0\">\n                  <Row>\n                    <div className=\"col\">\n                      <div className=\"card-profile-stats d-flex justify-content-center\">\n                        <div>\n                          <span className=\"heading\">22</span>\n                          <span className=\"description\">Friends</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">10</span>\n                          <span className=\"description\">Photos</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">89</span>\n                          <span className=\"description\">Comments</span>\n                        </div>\n                      </div>\n                    </div>\n                  </Row>\n                  <div className=\"text-center\">\n                    <h5 className=\"h3\">\n                      Jessica Jones\n                      <span className=\"font-weight-light\">, 27</span>\n                    </h5>\n                    <div className=\"h5 font-weight-300\">\n                      <i className=\"ni location_pin mr-2\" />\n                      Bucharest, Romania\n                    </div>\n                    <div className=\"h5 mt-4\">\n                      <i className=\"ni business_briefcase-24 mr-2\" />\n                      Solution Manager - Creative Tim Officer\n                    </div>\n                    <div>\n                      <i className=\"ni education_hat mr-2\" />\n                      University of Computer Science\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Progress track</h5>\n                </CardHeader>\n\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Argon Design System</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"60\"\n                            color=\"warning\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Angular Now UI Kit PRO</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                            color=\"success\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Black Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"72\"\n                            color=\"danger\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>React Material Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"90\"\n                            color=\"info\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Vue Paper UI Kit PRO</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                            color=\"success\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col className=\"order-xl-1\" xl=\"8\">\n              <Row>\n                <Col lg=\"6\">\n                  <Card className=\"bg-gradient-success border-0\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            className=\"text-uppercase text-muted mb-0 text-white\"\n                            tag=\"h5\"\n                          >\n                            Total traffic\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0 text-white\">\n                            350,897\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-white mr-2\">\n                          <i className=\"fa fa-arrow-up\" />\n                          3.48%\n                        </span>\n                        <span className=\"text-nowrap text-light\">\n                          Since last month\n                        </span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n                <Col lg=\"6\">\n                  <Card className=\"bg-gradient-danger border-0\" tag=\"h5\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle className=\"text-uppercase text-muted mb-0 text-white\">\n                            Performance\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0 text-white\">\n                            49,65%\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                            <i className=\"ni ni-spaceship\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-white mr-2\">\n                          <i className=\"fa fa-arrow-up\" />\n                          3.48%\n                        </span>\n                        <span className=\"text-nowrap text-light\">\n                          Since last month\n                        </span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n              </Row>\n              <Card>\n                <CardHeader>\n                  <Row className=\"align-items-center\">\n                    <Col xs=\"8\">\n                      <h3 className=\"mb-0\">Edit profile</h3>\n                    </Col>\n                    <Col className=\"text-right\" xs=\"4\">\n                      <Button\n                        color=\"primary\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        Settings\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <Form>\n                    <h6 className=\"heading-small text-muted mb-4\">\n                      User information\n                    </h6>\n                    <div className=\"pl-lg-4\">\n                      <Row>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-username\"\n                            >\n                              Username\n                            </label>\n                            <Input\n                              defaultValue=\"lucky.jesse\"\n                              id=\"input-username\"\n                              placeholder=\"Username\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-email\"\n                            >\n                              Email address\n                            </label>\n                            <Input\n                              id=\"input-email\"\n                              placeholder=\"jesse@example.com\"\n                              type=\"email\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-first-name\"\n                            >\n                              First name\n                            </label>\n                            <Input\n                              defaultValue=\"Lucky\"\n                              id=\"input-first-name\"\n                              placeholder=\"First name\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-last-name\"\n                            >\n                              Last name\n                            </label>\n                            <Input\n                              defaultValue=\"Jesse\"\n                              id=\"input-last-name\"\n                              placeholder=\"Last name\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </div>\n                    <hr className=\"my-4\" />\n\n                    <h6 className=\"heading-small text-muted mb-4\">\n                      Contact information\n                    </h6>\n                    <div className=\"pl-lg-4\">\n                      <Row>\n                        <Col md=\"12\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-address\"\n                            >\n                              Address\n                            </label>\n                            <Input\n                              defaultValue=\"Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09\"\n                              id=\"input-address\"\n                              placeholder=\"Home Address\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-city\"\n                            >\n                              City\n                            </label>\n                            <Input\n                              defaultValue=\"New York\"\n                              id=\"input-city\"\n                              placeholder=\"City\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-country\"\n                            >\n                              Country\n                            </label>\n                            <Input\n                              defaultValue=\"United States\"\n                              id=\"input-country\"\n                              placeholder=\"Country\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-country\"\n                            >\n                              Postal code\n                            </label>\n                            <Input\n                              id=\"input-postal-code\"\n                              placeholder=\"Postal code\"\n                              type=\"number\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </div>\n                    <hr className=\"my-4\" />\n\n                    <h6 className=\"heading-small text-muted mb-4\">About me</h6>\n                    <div className=\"pl-lg-4\">\n                      <FormGroup>\n                        <label className=\"form-control-label\">About Me</label>\n                        <Input\n                          placeholder=\"A few words about you ...\"\n                          rows=\"4\"\n                          type=\"textarea\"\n                          defaultValue=\"A beautiful premium dashboard for Bootstrap 4.\"\n                        />\n                      </FormGroup>\n                    </div>\n                  </Form>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Profile;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react plugin that prints a given react component\nimport ReactToPrint from \"react-to-print\";\n// react component for creating dynamic tables\nimport BootstrapTable from \"react-bootstrap-table-next\";\nimport paginationFactory from \"react-bootstrap-table2-paginator\";\nimport ToolkitProvider, { Search } from \"react-bootstrap-table2-toolkit\";\n// react component used to create sweet alerts\nimport ReactBSAlert from \"react-bootstrap-sweetalert\";\n// reactstrap components\nimport {\n  Button,\n  ButtonGroup,\n  Card,\n  CardHeader,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nimport { dataTable } from \"variables/general\";\n\nconst pagination = paginationFactory({\n  page: 1,\n  alwaysShowAllBtns: true,\n  showTotal: true,\n  withFirstAndLast: false,\n  sizePerPageRenderer: ({ options, currSizePerPage, onSizePerPageChange }) => (\n    <div className=\"dataTables_length\" id=\"datatable-basic_length\">\n      <label>\n        Show{\" \"}\n        {\n          <select\n            name=\"datatable-basic_length\"\n            aria-controls=\"datatable-basic\"\n            className=\"form-control form-control-sm\"\n            onChange={e => onSizePerPageChange(e.target.value)}\n          >\n            <option value=\"10\">10</option>\n            <option value=\"25\">25</option>\n            <option value=\"50\">50</option>\n            <option value=\"100\">100</option>\n          </select>\n        }{\" \"}\n        entries.\n      </label>\n    </div>\n  )\n});\n\nconst { SearchBar } = Search;\n\nclass ReactBSTables extends React.Component {\n  state = {\n    alert: null\n  };\n  // this function will copy to clipboard an entire table,\n  // so you can paste it inside an excel or csv file\n  copyToClipboardAsTable = el => {\n    var body = document.body,\n      range,\n      sel;\n    if (document.createRange && window.getSelection) {\n      range = document.createRange();\n      sel = window.getSelection();\n      sel.removeAllRanges();\n      try {\n        range.selectNodeContents(el);\n        sel.addRange(range);\n      } catch (e) {\n        range.selectNode(el);\n        sel.addRange(range);\n      }\n      document.execCommand(\"copy\");\n    } else if (body.createTextRange) {\n      range = body.createTextRange();\n      range.moveToElementText(el);\n      range.select();\n      range.execCommand(\"Copy\");\n    }\n    this.setState({\n      alert: (\n        <ReactBSAlert\n          success\n          style={{ display: \"block\", marginTop: \"-100px\" }}\n          title=\"Good job!\"\n          onConfirm={() => this.setState({ alert: null })}\n          onCancel={() => this.setState({ alert: null })}\n          confirmBtnBsStyle=\"info\"\n          btnSize=\"\"\n        >\n          Copied to clipboard!\n        </ReactBSAlert>\n      )\n    });\n  };\n  render() {\n    return (\n      <>\n        {this.state.alert}\n        <SimpleHeader name=\"React Tables\" parentName=\"Tables\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">React Bootstrap Table 2</h3>\n                  <p className=\"text-sm mb-0\">\n                    This is an exmaple of data table using the well known\n                    react-bootstrap-table2 plugin. This is a minimal setup in\n                    order to get started fast.\n                  </p>\n                </CardHeader>\n                <ToolkitProvider\n                  data={dataTable}\n                  keyField=\"name\"\n                  columns={[\n                    {\n                      dataField: \"name\",\n                      text: \"Name\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"position\",\n                      text: \"Position\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"office\",\n                      text: \"Office\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"age\",\n                      text: \"Age\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"start_date\",\n                      text: \"Start date\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"salary\",\n                      text: \"Salary\",\n                      sort: true\n                    }\n                  ]}\n                  search\n                >\n                  {props => (\n                    <div className=\"py-4 table-responsive\">\n                      <div\n                        id=\"datatable-basic_filter\"\n                        className=\"dataTables_filter px-4 pb-1\"\n                      >\n                        <label>\n                          Search:\n                          <SearchBar\n                            className=\"form-control-sm\"\n                            placeholder=\"\"\n                            {...props.searchProps}\n                          />\n                        </label>\n                      </div>\n                      <BootstrapTable\n                        {...props.baseProps}\n                        bootstrap4={true}\n                        pagination={pagination}\n                        bordered={false}\n                      />\n                    </div>\n                  )}\n                </ToolkitProvider>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Action buttons</h3>\n                  <p className=\"text-sm mb-0\">\n                    This is an exmaple of data table using the well known\n                    react-bootstrap-table2 plugin. This is a minimal setup in\n                    order to get started fast.\n                  </p>\n                </CardHeader>\n                <ToolkitProvider\n                  data={dataTable}\n                  keyField=\"name\"\n                  columns={[\n                    {\n                      dataField: \"name\",\n                      text: \"Name\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"position\",\n                      text: \"Position\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"office\",\n                      text: \"Office\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"age\",\n                      text: \"Age\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"start_date\",\n                      text: \"Start date\",\n                      sort: true\n                    },\n                    {\n                      dataField: \"salary\",\n                      text: \"Salary\",\n                      sort: true\n                    }\n                  ]}\n                  search\n                >\n                  {props => (\n                    <div className=\"py-4 table-responsive\">\n                      <Container fluid>\n                        <Row>\n                          <Col xs={12} sm={6}>\n                            <ButtonGroup>\n                              <Button\n                                className=\"buttons-copy buttons-html5\"\n                                color=\"default\"\n                                size=\"sm\"\n                                id=\"copy-tooltip\"\n                                onClick={() =>\n                                  this.copyToClipboardAsTable(\n                                    document.getElementById(\"react-bs-table\")\n                                  )\n                                }\n                              >\n                                <span>Copy</span>\n                              </Button>\n                              <ReactToPrint\n                                trigger={() => (\n                                  <Button\n                                    color=\"default\"\n                                    size=\"sm\"\n                                    className=\"buttons-copy buttons-html5\"\n                                    id=\"print-tooltip\"\n                                  >\n                                    Print\n                                  </Button>\n                                )}\n                                content={() => this.componentRef}\n                              />\n                            </ButtonGroup>\n                            <UncontrolledTooltip\n                              placement=\"top\"\n                              target=\"print-tooltip\"\n                            >\n                              This will open a print page with the visible rows\n                              of the table.\n                            </UncontrolledTooltip>\n                            <UncontrolledTooltip\n                              placement=\"top\"\n                              target=\"copy-tooltip\"\n                            >\n                              This will copy to your clipboard the visible rows\n                              of the table.\n                            </UncontrolledTooltip>\n                          </Col>\n                          <Col xs={12} sm={6}>\n                            <div\n                              id=\"datatable-basic_filter\"\n                              className=\"dataTables_filter px-4 pb-1 float-right\"\n                            >\n                              <label>\n                                Search:\n                                <SearchBar\n                                  className=\"form-control-sm\"\n                                  placeholder=\"\"\n                                  {...props.searchProps}\n                                />\n                              </label>\n                            </div>\n                          </Col>\n                        </Row>\n                      </Container>\n                      <BootstrapTable\n                        ref={el => (this.componentRef = el)}\n                        {...props.baseProps}\n                        bootstrap4={true}\n                        pagination={pagination}\n                        bordered={false}\n                        id=\"react-bs-table\"\n                      />\n                    </div>\n                  )}\n                </ToolkitProvider>\n              </Card>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default ReactBSTables;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport { Button, Container, Row, Col } from \"reactstrap\";\n\nclass ProfileHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div\n          className=\"header pb-6 d-flex align-items-center\"\n          style={{\n            minHeight: \"500px\",\n            backgroundImage:\n              'url(\"' + require(\"assets/img/theme/profile-cover.jpg\") + '\")',\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center top\"\n          }}\n        >\n          <span className=\"mask bg-gradient-info opacity-8\" />\n\n          <Container className=\"d-flex align-items-center\" fluid>\n            <Row>\n              <Col lg=\"7\" md=\"10\">\n                <h1 className=\"display-2 text-white\">مرحبا جيسي</h1>\n                <p className=\"text-white mt-0 mb-5\">\n                  هذه هي صفحة ملفك الشخصي. يمكنك رؤية التقدم الذي أحرزته في عملك\n                  وإدارة مشاريعك أو المهام المعينة\n                </p>\n                <Button\n                  className=\"btn-neutral\"\n                  color=\"default\"\n                  href=\"#pablo\"\n                  onClick={e => e.preventDefault()}\n                >\n                  تعديل الملف الشخصي\n                </Button>\n              </Col>\n            </Row>\n          </Container>\n        </div>\n      </>\n    );\n  }\n}\n\nexport default ProfileHeader;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport AuthHeader from \"components/Headers/AuthHeader.js\";\n\nclass Register extends React.Component {\n  state = {};\n  render() {\n    return (\n      <>\n        <AuthHeader\n          title=\"Create an account\"\n          lead=\"Use these awesome forms to login or create new account in your project for free.\"\n        />\n        <Container className=\"mt--8 pb-5\">\n          <Row className=\"justify-content-center\">\n            <Col lg=\"6\" md=\"8\">\n              <Card className=\"bg-secondary border-0\">\n                <CardHeader className=\"bg-transparent pb-5\">\n                  <div className=\"text-muted text-center mt-2 mb-4\">\n                    <small>Sign up with</small>\n                  </div>\n                  <div className=\"text-center\">\n                    <Button\n                      className=\"btn-neutral btn-icon mr-4\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <span className=\"btn-inner--icon mr-1\">\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/icons/common/github.svg\")}\n                        />\n                      </span>\n                      <span className=\"btn-inner--text\">Github</span>\n                    </Button>\n                    <Button\n                      className=\"btn-neutral btn-icon\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <span className=\"btn-inner--icon mr-1\">\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/icons/common/google.svg\")}\n                        />\n                      </span>\n                      <span className=\"btn-inner--text\">Google</span>\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardBody className=\"px-lg-5 py-lg-5\">\n                  <div className=\"text-center text-muted mb-4\">\n                    <small>Or sign up with credentials</small>\n                  </div>\n                  <Form role=\"form\">\n                    <FormGroup\n                      className={classnames({\n                        focused: this.state.focusedName\n                      })}\n                    >\n                      <InputGroup className=\"input-group-merge input-group-alternative mb-3\">\n                        <InputGroupAddon addonType=\"prepend\">\n                          <InputGroupText>\n                            <i className=\"ni ni-hat-3\" />\n                          </InputGroupText>\n                        </InputGroupAddon>\n                        <Input\n                          placeholder=\"Name\"\n                          type=\"text\"\n                          onFocus={() => this.setState({ focusedName: true })}\n                          onBlur={() => this.setState({ focusedName: false })}\n                        />\n                      </InputGroup>\n                    </FormGroup>\n                    <FormGroup\n                      className={classnames({\n                        focused: this.state.focusedEmail\n                      })}\n                    >\n                      <InputGroup className=\"input-group-merge input-group-alternative mb-3\">\n                        <InputGroupAddon addonType=\"prepend\">\n                          <InputGroupText>\n                            <i className=\"ni ni-email-83\" />\n                          </InputGroupText>\n                        </InputGroupAddon>\n                        <Input\n                          placeholder=\"Email\"\n                          type=\"email\"\n                          onFocus={() => this.setState({ focusedEmail: true })}\n                          onBlur={() => this.setState({ focusedEmail: false })}\n                        />\n                      </InputGroup>\n                    </FormGroup>\n                    <FormGroup\n                      className={classnames({\n                        focused: this.state.focusedPassword\n                      })}\n                    >\n                      <InputGroup className=\"input-group-merge input-group-alternative\">\n                        <InputGroupAddon addonType=\"prepend\">\n                          <InputGroupText>\n                            <i className=\"ni ni-lock-circle-open\" />\n                          </InputGroupText>\n                        </InputGroupAddon>\n                        <Input\n                          placeholder=\"Password\"\n                          type=\"password\"\n                          onFocus={() =>\n                            this.setState({ focusedPassword: true })\n                          }\n                          onBlur={() =>\n                            this.setState({ focusedPassword: false })\n                          }\n                        />\n                      </InputGroup>\n                    </FormGroup>\n                    <div className=\"text-muted font-italic\">\n                      <small>\n                        password strength:{\" \"}\n                        <span className=\"text-success font-weight-700\">\n                          strong\n                        </span>\n                      </small>\n                    </div>\n                    <Row className=\"my-4\">\n                      <Col xs=\"12\">\n                        <div className=\"custom-control custom-control-alternative custom-checkbox\">\n                          <input\n                            className=\"custom-control-input\"\n                            id=\"customCheckRegister\"\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"customCheckRegister\"\n                          >\n                            <span className=\"text-muted\">\n                              I agree with the{\" \"}\n                              <a\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Privacy Policy\n                              </a>\n                            </span>\n                          </label>\n                        </div>\n                      </Col>\n                    </Row>\n                    <div className=\"text-center\">\n                      <Button className=\"mt-4\" color=\"info\" type=\"button\">\n                        Create account\n                      </Button>\n                    </div>\n                  </Form>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Register;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardImg,\n  CardTitle,\n  FormGroup,\n  Form,\n  Input,\n  ListGroupItem,\n  ListGroup,\n  Progress,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport RTLProfileHeader from \"components/Headers/RTLProfileHeader.js\";\n\nclass RTLSupport extends React.Component {\n  render() {\n    return (\n      <>\n        <RTLProfileHeader />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col className=\"order-xl-2\" xl=\"4\">\n              <Card className=\"card-profile\">\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x600.jpg\")}\n                  top\n                />\n                <Row className=\"justify-content-center\">\n                  <Col className=\"order-lg-2\" lg=\"3\">\n                    <div className=\"card-profile-image\">\n                      <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                        <img\n                          alt=\"...\"\n                          className=\"rounded-circle\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                    </div>\n                  </Col>\n                </Row>\n                <CardHeader className=\"text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4\">\n                  <div className=\"d-flex justify-content-between\">\n                    <Button\n                      className=\"mr-4\"\n                      color=\"info\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      الاتصال\n                    </Button>\n                    <Button\n                      className=\"float-right\"\n                      color=\"default\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      size=\"sm\"\n                    >\n                      رسالة\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardBody className=\"pt-0\">\n                  <Row>\n                    <div className=\"col\">\n                      <div className=\"card-profile-stats d-flex justify-content-center\">\n                        <div>\n                          <span className=\"heading\">22</span>\n                          <span className=\"description\">اصحاب</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">10</span>\n                          <span className=\"description\">الصور</span>\n                        </div>\n                        <div>\n                          <span className=\"heading\">89</span>\n                          <span className=\"description\">تعليقات</span>\n                        </div>\n                      </div>\n                    </div>\n                  </Row>\n                  <div className=\"text-center\">\n                    <h5 className=\"h3\">\n                      Jessica Jones\n                      <span className=\"font-weight-light\">, 27</span>\n                    </h5>\n                    <div className=\"h5 font-weight-300\">\n                      <i className=\"ni location_pin mr-2\" />\n                      Bucharest, Romania\n                    </div>\n                    <div className=\"h5 mt-4\">\n                      <i className=\"ni business_briefcase-24 mr-2\" />\n                      Solution Manager - Creative Tim Officer\n                    </div>\n                    <div>\n                      <i className=\"ni education_hat mr-2\" />\n                      University of Computer Science\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">مسار التقدم</h5>\n                </CardHeader>\n\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Argon Design System</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"60\"\n                            color=\"warning\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Angular Now UI Kit PRO</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                            color=\"success\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Black Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"72\"\n                            color=\"danger\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>React Material Dashboard</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"90\"\n                            color=\"info\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Vue Paper UI Kit PRO</h5>\n                          <Progress\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                            color=\"success\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col className=\"order-xl-1\" xl=\"8\">\n              <Row>\n                <Col lg=\"6\">\n                  <Card className=\"bg-gradient-success border-0\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle\n                            className=\"text-uppercase text-muted mb-0 text-white\"\n                            tag=\"h5\"\n                          >\n                            إجمالي حركة المرور\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0 text-white\">\n                            350,897\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-white ml-2\">\n                          <i className=\"fa fa-arrow-up ml-2\" />\n                          3.48%\n                        </span>\n                        <span className=\"text-nowrap text-light\">\n                          منذ اخر شهر\n                        </span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n                <Col lg=\"6\">\n                  <Card className=\"bg-gradient-danger border-0\" tag=\"h5\">\n                    <CardBody>\n                      <Row>\n                        <div className=\"col\">\n                          <CardTitle className=\"text-uppercase text-muted mb-0 text-white\">\n                            أداء\n                          </CardTitle>\n                          <span className=\"h2 font-weight-bold mb-0 text-white\">\n                            49,65%\n                          </span>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                            <i className=\"ni ni-spaceship\" />\n                          </div>\n                        </Col>\n                      </Row>\n                      <p className=\"mt-3 mb-0 text-sm\">\n                        <span className=\"text-white ml-2\">\n                          <i className=\"fa fa-arrow-up ml-2\" />\n                          3.48%\n                        </span>\n                        <span className=\"text-nowrap text-light\">\n                          منذ اخر شه\n                        </span>\n                      </p>\n                    </CardBody>\n                  </Card>\n                </Col>\n              </Row>\n              <Card>\n                <CardHeader>\n                  <Row className=\"align-items-center\">\n                    <Col xs=\"8\" className=\"text-right\">\n                      <h3 className=\"mb-0\">تعديل الملف الشخصي</h3>\n                    </Col>\n                    <Col className=\"text-left\" xs=\"4\">\n                      <Button\n                        color=\"primary\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        الإعدادات\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <Form>\n                    <h6 className=\"heading-small text-muted mb-4\">\n                      معلومات المستخدم\n                    </h6>\n                    <div className=\"pl-lg-4\">\n                      <Row>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-username\"\n                            >\n                              اسم المستخدم\n                            </label>\n                            <Input\n                              defaultValue=\"اسم المستخدم\"\n                              id=\"input-username\"\n                              placeholder=\"Username\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-email\"\n                            >\n                              عنوان البريد الإلكتروني\n                            </label>\n                            <Input\n                              id=\"input-email\"\n                              placeholder=\"jesse@example.com\"\n                              type=\"email\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-first-name\"\n                            >\n                              الاسم\n                            </label>\n                            <Input\n                              defaultValue=\"الاسم\"\n                              id=\"input-first-name\"\n                              placeholder=\"First name\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-last-name\"\n                            >\n                              الكنية\n                            </label>\n                            <Input\n                              defaultValue=\"الكنية\"\n                              id=\"input-last-name\"\n                              placeholder=\"Last name\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </div>\n                    <hr className=\"my-4\" />\n\n                    <h6 className=\"heading-small text-muted mb-4\">\n                      معلومات الاتصال\n                    </h6>\n                    <div className=\"pl-lg-4\">\n                      <Row>\n                        <Col md=\"12\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-address\"\n                            >\n                              عنوان\n                            </label>\n                            <Input\n                              defaultValue=\"عنوان\"\n                              id=\"input-address\"\n                              placeholder=\"Home Address\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Row>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-city\"\n                            >\n                              مدينة\n                            </label>\n                            <Input\n                              defaultValue=\"مدينة\"\n                              id=\"input-city\"\n                              placeholder=\"City\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-country\"\n                            >\n                              بلد\n                            </label>\n                            <Input\n                              defaultValue=\"بلد\"\n                              id=\"input-country\"\n                              placeholder=\"Country\"\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col lg=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"input-country\"\n                            >\n                              الكود\n                            </label>\n                            <Input\n                              id=\"input-postal-code\"\n                              placeholder=\"الكود\"\n                              type=\"number\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                    </div>\n                    <hr className=\"my-4\" />\n\n                    <h6 className=\"heading-small text-muted mb-4\">عني</h6>\n                    <div className=\"pl-lg-4\">\n                      <FormGroup>\n                        <label className=\"form-control-label\">عني</label>\n                        <Input\n                          placeholder=\"الجميلة.\"\n                          rows=\"4\"\n                          type=\"textarea\"\n                          defaultValue=\"الجميلة.\"\n                        />\n                      </FormGroup>\n                    </div>\n                  </Form>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default RTLSupport;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react plugin for creating vector maps\nimport { VectorMap } from \"react-jvectormap\";\n\n// reactstrap components\nimport { Card, CardBody, Container, Row } from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nlet mapData = {\n  AU: 760,\n  BR: 550,\n  CA: 120,\n  DE: 1300,\n  FR: 540,\n  GB: 690,\n  GE: 200,\n  IN: 200,\n  RO: 600,\n  RU: 300,\n  US: 2920\n};\n\nclass Vector extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Vector maps\" parentName=\"Maps\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card>\n                <CardBody className=\"pt-0\">\n                  <VectorMap\n                    containerClassName=\"vector-map\"\n                    containerStyle={{\n                      width: \"100%\",\n                      height: \"600px\"\n                    }}\n                    map={\"world_mill\"}\n                    zoomOnScroll={false}\n                    scaleColors={[\"#f00\", \"#0071A4\"]}\n                    normalizeFunction=\"polynomial\"\n                    hoverOpacity={0.7}\n                    hoverColor={false}\n                    backgroundColor=\"transparent\"\n                    regionStyle={{\n                      initial: {\n                        fill: \"#e9ecef\",\n                        \"fill-opacity\": 0.8,\n                        stroke: \"none\",\n                        \"stroke-width\": 0,\n                        \"stroke-opacity\": 1\n                      },\n                      hover: {\n                        fill: \"#dee2e6\",\n                        \"fill-opacity\": 0.8,\n                        cursor: \"pointer\"\n                      },\n                      selected: {\n                        fill: \"yellow\"\n                      },\n                      selectedHover: {}\n                    }}\n                    markerStyle={{\n                      initial: {\n                        fill: \"#fb6340\",\n                        \"stroke-width\": 0\n                      },\n                      hover: {\n                        fill: \"#11cdef\",\n                        \"stroke-width\": 0\n                      }\n                    }}\n                    markers={[\n                      {\n                        latLng: [41.9, 12.45],\n                        name: \"Vatican City\"\n                      },\n                      {\n                        latLng: [43.73, 7.41],\n                        name: \"Monaco\"\n                      },\n                      {\n                        latLng: [35.88, 14.5],\n                        name: \"Malta\"\n                      },\n                      {\n                        latLng: [1.3, 103.8],\n                        name: \"Singapore\"\n                      },\n                      {\n                        latLng: [1.46, 173.03],\n                        name: \"Kiribati\"\n                      },\n                      {\n                        latLng: [-21.13, -175.2],\n                        name: \"Tonga\"\n                      },\n                      {\n                        latLng: [15.3, -61.38],\n                        name: \"Dominica\"\n                      },\n                      {\n                        latLng: [-20.2, 57.5],\n                        name: \"Mauritius\"\n                      },\n                      {\n                        latLng: [26.02, 50.55],\n                        name: \"Bahrain\"\n                      }\n                    ]}\n                    series={{\n                      regions: [\n                        {\n                          values: mapData,\n                          scale: [\"#ced4da\", \"#adb5bd\"],\n                          normalizeFunction: \"polynomial\"\n                        }\n                      ]\n                    }}\n                  />\n                </CardBody>\n              </Card>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Vector;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// javascript plugin that creates a sortable object from a dom object\nimport List from \"list.js\";\n// reactstrap components\nimport {\n  Badge,\n  Card,\n  CardHeader,\n  CardFooter,\n  DropdownMenu,\n  DropdownItem,\n  DropdownToggle,\n  UncontrolledDropdown,\n  Media,\n  Pagination,\n  PaginationItem,\n  PaginationLink,\n  Progress,\n  Table,\n  Container,\n  Row,\n  UncontrolledTooltip\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Sortable extends React.Component {\n  componentDidMount() {\n    new List(this.refs[\"first-list\"], {\n      valueNames: [\"name\", \"budget\", \"status\", \"completion\"],\n      listClass: \"list\"\n    });\n    new List(this.refs[\"second-list\"], {\n      valueNames: [\"name\", \"budget\", \"status\", \"completion\"],\n      listClass: \"list\"\n    });\n    new List(this.refs[\"third-list\"], {\n      valueNames: [\"name\", \"budget\", \"status\", \"completion\"],\n      listClass: \"list\"\n    });\n  }\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Sortable Tables\" parentName=\"Tables\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card>\n                <CardHeader className=\"border-0\">\n                  <h3 className=\"mb-0\">Light table</h3>\n                </CardHeader>\n                <div className=\"table-responsive\" ref=\"first-list\">\n                  <Table className=\"align-items-center table-flush\">\n                    <thead className=\"thead-light\">\n                      <tr>\n                        <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                          Project\n                        </th>\n                        <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                          Budget\n                        </th>\n                        <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                          Status\n                        </th>\n                        <th scope=\"col\">Users</th>\n                        <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                          Completion\n                        </th>\n                        <th scope=\"col\" />\n                      </tr>\n                    </thead>\n                    <tbody className=\"list\">\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/bootstrap.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Argon Design System\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$2500 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-warning\" />\n                            <span className=\"status\">pending</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip649644480\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip649644480\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip271118748\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip271118748\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip456883903\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip456883903\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip427983389\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip427983389\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">60%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/angular.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Angular Now UI Kit PRO\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$1800 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-success\" />\n                            <span className=\"status\">completed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip308604570\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip308604570\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip463448556\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip463448556\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip474990624\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip474990624\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip371113692\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip371113692\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">100%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"100\" color=\"success\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/sketch.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Black Dashboard\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$3150 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-danger\" />\n                            <span className=\"status\">delayed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip178353307\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip178353307\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip110940759\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip110940759\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip721474482\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip721474482\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip248059973\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip248059973\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">72%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/react.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                React Material Dashboard\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$4400 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-info\" />\n                            <span className=\"status\">on schedule</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip338716581\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip338716581\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip384272281\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip384272281\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip714277819\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip714277819\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip352802795\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip352802795\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">90%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"90\" color=\"info\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/vue.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Vue Paper UI Kit PRO\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$2200 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-success\" />\n                            <span className=\"status\">completed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip261050883\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip261050883\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip704196347\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip704196347\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip455439475\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip455439475\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip948033723\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip948033723\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">100%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"100\" color=\"success\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                    </tbody>\n                  </Table>\n                </div>\n                <CardFooter className=\"py-4\">\n                  <nav aria-label=\"...\">\n                    <Pagination\n                      className=\"pagination justify-content-end mb-0\"\n                      listClassName=\"justify-content-end mb-0\"\n                    >\n                      <PaginationItem className=\"disabled\">\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                          tabIndex=\"-1\"\n                        >\n                          <i className=\"fas fa-angle-left\" />\n                          <span className=\"sr-only\">Previous</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem className=\"active\">\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          1\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          2 <span className=\"sr-only\">(current)</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          3\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <i className=\"fas fa-angle-right\" />\n                          <span className=\"sr-only\">Next</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                    </Pagination>\n                  </nav>\n                </CardFooter>\n              </Card>\n            </div>\n          </Row>\n          <Card className=\"bg-transparent\">\n            <CardHeader className=\"bg-transparent border-0\">\n              <h3 className=\"mb-0\">Translucent table</h3>\n            </CardHeader>\n            <div className=\"table-responsive\" ref=\"second-list\">\n              <Table className=\"align-items-center table-flush\">\n                <thead className=\"thead-light\">\n                  <tr>\n                    <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                      Project\n                    </th>\n                    <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                      Budget\n                    </th>\n                    <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                      Status\n                    </th>\n                    <th scope=\"col\">Users</th>\n                    <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                      Completion\n                    </th>\n                    <th scope=\"col\" />\n                  </tr>\n                </thead>\n                <tbody className=\"list\">\n                  <tr>\n                    <th scope=\"row\">\n                      <Media className=\"align-items-center\">\n                        <a\n                          className=\"avatar rounded-circle mr-3\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/bootstrap.jpg\")}\n                          />\n                        </a>\n                        <Media>\n                          <span className=\"name mb-0 text-sm\">\n                            Argon Design System\n                          </span>\n                        </Media>\n                      </Media>\n                    </th>\n                    <td className=\"budget\">$2500 USD</td>\n                    <td>\n                      <Badge color=\"\" className=\"badge-dot mr-4\">\n                        <i className=\"bg-warning\" />\n                        <span className=\"status\">pending</span>\n                      </Badge>\n                    </td>\n                    <td>\n                      <div className=\"avatar-group\">\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip875701525\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip875701525\"\n                        >\n                          Ryan Tompson\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip493102457\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip493102457\"\n                        >\n                          Romina Hadid\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip574236797\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip574236797\"\n                        >\n                          Alexander Smith\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip49218996\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip delay={0} target=\"tooltip49218996\">\n                          Jessica Doe\n                        </UncontrolledTooltip>\n                      </div>\n                    </td>\n                    <td>\n                      <div className=\"d-flex align-items-center\">\n                        <span className=\"completion mr-2\">60%</span>\n                        <div>\n                          <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"text-right\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          className=\"btn-icon-only text-light\"\n                          color=\"\"\n                          role=\"button\"\n                          size=\"sm\"\n                        >\n                          <i className=\"fas fa-ellipsis-v\" />\n                        </DropdownToggle>\n                        <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </td>\n                  </tr>\n                  <tr>\n                    <th scope=\"row\">\n                      <Media className=\"align-items-center\">\n                        <a\n                          className=\"avatar rounded-circle mr-3\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/angular.jpg\")}\n                          />\n                        </a>\n                        <Media>\n                          <span className=\"name mb-0 text-sm\">\n                            Angular Now UI Kit PRO\n                          </span>\n                        </Media>\n                      </Media>\n                    </th>\n                    <td className=\"budget\">$1800 USD</td>\n                    <td>\n                      <Badge color=\"\" className=\"badge-dot mr-4\">\n                        <i className=\"bg-success\" />\n                        <span className=\"status\">completed</span>\n                      </Badge>\n                    </td>\n                    <td>\n                      <div className=\"avatar-group\">\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip719286793\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip719286793\"\n                        >\n                          Ryan Tompson\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip833013259\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip833013259\"\n                        >\n                          Romina Hadid\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip259638111\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip259638111\"\n                        >\n                          Alexander Smith\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip353573264\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip353573264\"\n                        >\n                          Jessica Doe\n                        </UncontrolledTooltip>\n                      </div>\n                    </td>\n                    <td>\n                      <div className=\"d-flex align-items-center\">\n                        <span className=\"completion mr-2\">100%</span>\n                        <div>\n                          <Progress max=\"100\" value=\"100\" color=\"success\" />\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"text-right\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          className=\"btn-icon-only text-light\"\n                          color=\"\"\n                          role=\"button\"\n                          size=\"sm\"\n                        >\n                          <i className=\"fas fa-ellipsis-v\" />\n                        </DropdownToggle>\n                        <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </td>\n                  </tr>\n                  <tr>\n                    <th scope=\"row\">\n                      <Media className=\"align-items-center\">\n                        <a\n                          className=\"avatar rounded-circle mr-3\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/sketch.jpg\")}\n                          />\n                        </a>\n                        <Media>\n                          <span className=\"name mb-0 text-sm\">\n                            Black Dashboard\n                          </span>\n                        </Media>\n                      </Media>\n                    </th>\n                    <td className=\"budget\">$3150 USD</td>\n                    <td>\n                      <Badge color=\"\" className=\"badge-dot mr-4\">\n                        <i className=\"bg-danger\" />\n                        <span className=\"status\">delayed</span>\n                      </Badge>\n                    </td>\n                    <td>\n                      <div className=\"avatar-group\">\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip254060307\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip254060307\"\n                        >\n                          Ryan Tompson\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip991744191\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip991744191\"\n                        >\n                          Romina Hadid\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip353476826\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip353476826\"\n                        >\n                          Alexander Smith\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip877941415\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip877941415\"\n                        >\n                          Jessica Doe\n                        </UncontrolledTooltip>\n                      </div>\n                    </td>\n                    <td>\n                      <div className=\"d-flex align-items-center\">\n                        <span className=\"completion mr-2\">72%</span>\n                        <div>\n                          <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"text-right\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          className=\"btn-icon-only text-light\"\n                          color=\"\"\n                          role=\"button\"\n                          size=\"sm\"\n                        >\n                          <i className=\"fas fa-ellipsis-v\" />\n                        </DropdownToggle>\n                        <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </td>\n                  </tr>\n                  <tr>\n                    <th scope=\"row\">\n                      <Media className=\"align-items-center\">\n                        <a\n                          className=\"avatar rounded-circle mr-3\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/react.jpg\")}\n                          />\n                        </a>\n                        <Media>\n                          <span className=\"name mb-0 text-sm\">\n                            React Material Dashboard\n                          </span>\n                        </Media>\n                      </Media>\n                    </th>\n                    <td className=\"budget\">$4400 USD</td>\n                    <td>\n                      <Badge color=\"\" className=\"badge-dot mr-4\">\n                        <i className=\"bg-info\" />\n                        <span className=\"status\">on schedule</span>\n                      </Badge>\n                    </td>\n                    <td>\n                      <div className=\"avatar-group\">\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip19030294\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip delay={0} target=\"tooltip19030294\">\n                          Ryan Tompson\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip604086456\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip604086456\"\n                        >\n                          Romina Hadid\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip510726994\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip510726994\"\n                        >\n                          Alexander Smith\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip876582678\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip876582678\"\n                        >\n                          Jessica Doe\n                        </UncontrolledTooltip>\n                      </div>\n                    </td>\n                    <td>\n                      <div className=\"d-flex align-items-center\">\n                        <span className=\"completion mr-2\">90%</span>\n                        <div>\n                          <Progress max=\"100\" value=\"90\" color=\"info\" />\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"text-right\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          className=\"btn-icon-only text-light\"\n                          color=\"\"\n                          role=\"button\"\n                          size=\"sm\"\n                        >\n                          <i className=\"fas fa-ellipsis-v\" />\n                        </DropdownToggle>\n                        <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </td>\n                  </tr>\n                  <tr>\n                    <th scope=\"row\">\n                      <Media className=\"align-items-center\">\n                        <a\n                          className=\"avatar rounded-circle mr-3\"\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/vue.jpg\")}\n                          />\n                        </a>\n                        <Media>\n                          <span className=\"name mb-0 text-sm\">\n                            Vue Paper UI Kit PRO\n                          </span>\n                        </Media>\n                      </Media>\n                    </th>\n                    <td className=\"budget\">$2200 USD</td>\n                    <td>\n                      <Badge color=\"\" className=\"badge-dot mr-4\">\n                        <i className=\"bg-success\" />\n                        <span className=\"status\">completed</span>\n                      </Badge>\n                    </td>\n                    <td>\n                      <div className=\"avatar-group\">\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip783780957\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-1.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip783780957\"\n                        >\n                          Ryan Tompson\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip977578127\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-2.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip977578127\"\n                        >\n                          Romina Hadid\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip452431268\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-3.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip452431268\"\n                        >\n                          Alexander Smith\n                        </UncontrolledTooltip>\n                        <a\n                          className=\"avatar avatar-sm rounded-circle\"\n                          href=\"#pablo\"\n                          id=\"tooltip885071416\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/theme/team-4.jpg\")}\n                          />\n                        </a>\n                        <UncontrolledTooltip\n                          delay={0}\n                          target=\"tooltip885071416\"\n                        >\n                          Jessica Doe\n                        </UncontrolledTooltip>\n                      </div>\n                    </td>\n                    <td>\n                      <div className=\"d-flex align-items-center\">\n                        <span className=\"completion mr-2\">100%</span>\n                        <div>\n                          <Progress max=\"100\" value=\"100\" color=\"success\" />\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"text-right\">\n                      <UncontrolledDropdown>\n                        <DropdownToggle\n                          className=\"btn-icon-only text-light\"\n                          color=\"\"\n                          role=\"button\"\n                          size=\"sm\"\n                        >\n                          <i className=\"fas fa-ellipsis-v\" />\n                        </DropdownToggle>\n                        <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Another action\n                          </DropdownItem>\n                          <DropdownItem\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            Something else here\n                          </DropdownItem>\n                        </DropdownMenu>\n                      </UncontrolledDropdown>\n                    </td>\n                  </tr>\n                </tbody>\n              </Table>\n            </div>\n          </Card>\n\n          <Row>\n            <div className=\"col\">\n              <Card className=\"bg-default shadow\">\n                <CardHeader className=\"bg-transparent border-0\">\n                  <h3 className=\"text-white mb-0\">Dark table</h3>\n                </CardHeader>\n                <div className=\"table-responsive\" ref=\"third-list\">\n                  <Table className=\"align-items-center table-dark table-flush\">\n                    <thead className=\"thead-dark\">\n                      <tr>\n                        <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                          Project\n                        </th>\n                        <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                          Budget\n                        </th>\n                        <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                          Status\n                        </th>\n                        <th scope=\"col\">Users</th>\n                        <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                          Completion\n                        </th>\n                        <th scope=\"col\" />\n                      </tr>\n                    </thead>\n                    <tbody className=\"list\">\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/bootstrap.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Argon Design System\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$2500 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-warning\" />\n                            <span className=\"status\">pending</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip467950995\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip467950995\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip25513321\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip25513321\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip588943797\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip588943797\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip856456467\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip856456467\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">60%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/angular.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Angular Now UI Kit PRO\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$1800 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-success\" />\n                            <span className=\"status\">completed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip610334941\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip610334941\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip213291473\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip213291473\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip40804711\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip40804711\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip901162322\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip901162322\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">100%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"100\" color=\"success\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/sketch.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Black Dashboard\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$3150 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-danger\" />\n                            <span className=\"status\">delayed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip798929192\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip798929192\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip690674952\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip690674952\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip497303045\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip497303045\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip659692799\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip659692799\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">72%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/react.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                React Material Dashboard\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$4400 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-info\" />\n                            <span className=\"status\">on schedule</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip828557605\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip828557605\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip177731438\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip177731438\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip483706952\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip483706952\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip310356273\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip310356273\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">90%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"90\" color=\"info\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                      <tr>\n                        <th scope=\"row\">\n                          <Media className=\"align-items-center\">\n                            <a\n                              className=\"avatar rounded-circle mr-3\"\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/vue.jpg\")}\n                              />\n                            </a>\n                            <Media>\n                              <span className=\"name mb-0 text-sm\">\n                                Vue Paper UI Kit PRO\n                              </span>\n                            </Media>\n                          </Media>\n                        </th>\n                        <td className=\"budget\">$2200 USD</td>\n                        <td>\n                          <Badge color=\"\" className=\"badge-dot mr-4\">\n                            <i className=\"bg-success\" />\n                            <span className=\"status\">completed</span>\n                          </Badge>\n                        </td>\n                        <td>\n                          <div className=\"avatar-group\">\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip946916389\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-1.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip946916389\"\n                            >\n                              Ryan Tompson\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip571882927\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-2.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip571882927\"\n                            >\n                              Romina Hadid\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip363766624\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-3.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip363766624\"\n                            >\n                              Alexander Smith\n                            </UncontrolledTooltip>\n                            <a\n                              className=\"avatar avatar-sm rounded-circle\"\n                              href=\"#pablo\"\n                              id=\"tooltip282084973\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              <img\n                                alt=\"...\"\n                                src={require(\"assets/img/theme/team-4.jpg\")}\n                              />\n                            </a>\n                            <UncontrolledTooltip\n                              delay={0}\n                              target=\"tooltip282084973\"\n                            >\n                              Jessica Doe\n                            </UncontrolledTooltip>\n                          </div>\n                        </td>\n                        <td>\n                          <div className=\"d-flex align-items-center\">\n                            <span className=\"completion mr-2\">100%</span>\n                            <div>\n                              <Progress max=\"100\" value=\"100\" color=\"success\" />\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"text-right\">\n                          <UncontrolledDropdown>\n                            <DropdownToggle\n                              className=\"btn-icon-only text-light\"\n                              color=\"\"\n                              role=\"button\"\n                              size=\"sm\"\n                            >\n                              <i className=\"fas fa-ellipsis-v\" />\n                            </DropdownToggle>\n                            <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Another action\n                              </DropdownItem>\n                              <DropdownItem\n                                href=\"#pablo\"\n                                onClick={e => e.preventDefault()}\n                              >\n                                Something else here\n                              </DropdownItem>\n                            </DropdownMenu>\n                          </UncontrolledDropdown>\n                        </td>\n                      </tr>\n                    </tbody>\n                  </Table>\n                </div>\n              </Card>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Sortable;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Badge,\n  Button,\n  Card,\n  CardHeader,\n  CardFooter,\n  DropdownMenu,\n  DropdownItem,\n  DropdownToggle,\n  UncontrolledDropdown,\n  Media,\n  Pagination,\n  PaginationItem,\n  PaginationLink,\n  Progress,\n  Table,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Tables extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Tables\" parentName=\"Tables\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <Card>\n                <CardHeader className=\"border-0\">\n                  <h3 className=\"mb-0\">Light table</h3>\n                </CardHeader>\n\n                <Table className=\"align-items-center table-flush\" responsive>\n                  <thead className=\"thead-light\">\n                    <tr>\n                      <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                        Project\n                      </th>\n                      <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                        Budget\n                      </th>\n                      <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                        Status\n                      </th>\n                      <th scope=\"col\">Users</th>\n                      <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                        Completion\n                      </th>\n                      <th scope=\"col\" />\n                    </tr>\n                  </thead>\n                  <tbody className=\"list\">\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Argon Design System\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2500 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-warning\" />\n                          <span className=\"status\">pending</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip160923422\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip160923422\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip514211229\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip514211229\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip726857513\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip726857513\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip469193676\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip469193676\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">60%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Angular Now UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$1800 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip31874212\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip31874212\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip252827779\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip252827779\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip809957233\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip809957233\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip979845150\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip979845150\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Black Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$3150 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-danger\" />\n                          <span className=\"status\">delayed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip728862912\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip728862912\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip578670996\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip578670996\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip890233574\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip890233574\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip681662370\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip681662370\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">72%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              React Material Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$4400 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-info\" />\n                          <span className=\"status\">on schedule</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip972725183\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip972725183\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip74486040\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip74486040\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip650279481\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip650279481\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip228854968\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip228854968\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">90%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"90\" color=\"info\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Vue Paper UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2200 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip450658649\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip450658649\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip66804543\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip66804543\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip897599395\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip897599395\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip207249319\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip207249319\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                  </tbody>\n                </Table>\n\n                <CardFooter className=\"py-4\">\n                  <nav aria-label=\"...\">\n                    <Pagination\n                      className=\"pagination justify-content-end mb-0\"\n                      listClassName=\"justify-content-end mb-0\"\n                    >\n                      <PaginationItem className=\"disabled\">\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                          tabIndex=\"-1\"\n                        >\n                          <i className=\"fas fa-angle-left\" />\n                          <span className=\"sr-only\">Previous</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem className=\"active\">\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          1\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          2 <span className=\"sr-only\">(current)</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          3\n                        </PaginationLink>\n                      </PaginationItem>\n                      <PaginationItem>\n                        <PaginationLink\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          <i className=\"fas fa-angle-right\" />\n                          <span className=\"sr-only\">Next</span>\n                        </PaginationLink>\n                      </PaginationItem>\n                    </Pagination>\n                  </nav>\n                </CardFooter>\n              </Card>\n            </div>\n          </Row>\n          <Card>\n            <CardHeader className=\"border-0\">\n              <Row>\n                <Col xs=\"6\">\n                  <h3 className=\"mb-0\">Inline actions</h3>\n                </Col>\n                <Col className=\"text-right\" xs=\"6\">\n                  <Button\n                    className=\"btn-neutral btn-round btn-icon\"\n                    color=\"default\"\n                    href=\"#pablo\"\n                    id=\"tooltip969372949\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fas fa-user-edit\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Export</span>\n                  </Button>\n                  <UncontrolledTooltip delay={0} target=\"tooltip969372949\">\n                    Edit product\n                  </UncontrolledTooltip>\n                </Col>\n              </Row>\n            </CardHeader>\n\n            <Table className=\"align-items-center table-flush\" responsive>\n              <thead className=\"thead-light\">\n                <tr>\n                  <th>Author</th>\n                  <th>Created at</th>\n                  <th>Product</th>\n                  <th />\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-1.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip564981685\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip564981685\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip601065234\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip601065234\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-2.jpg\")}\n                    />\n                    <b>Alex Smith</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">08/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Design System\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip123539273\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip123539273\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip397466356\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip397466356\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-3.jpg\")}\n                    />\n                    <b>Samantha Ivy</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">30/08/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Black Dashboard\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip968903465\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip968903465\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip161447542\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip161447542\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-1.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip874640709\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip874640709\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip598568751\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip598568751\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-2.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip400574648\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip400574648\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip573554853\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip573554853\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n              </tbody>\n            </Table>\n          </Card>\n          <Card>\n            <CardHeader className=\"border-0\">\n              <Row>\n                <Col xs=\"6\">\n                  <h3 className=\"mb-0\">Striped table</h3>\n                </Col>\n                <Col className=\"text-right\" xs=\"6\">\n                  <Button\n                    className=\"btn-round btn-icon\"\n                    color=\"primary\"\n                    href=\"#pablo\"\n                    id=\"tooltip443412080\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fas fa-user-edit\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Export</span>\n                  </Button>\n                  <UncontrolledTooltip delay={0} target=\"tooltip443412080\">\n                    Edit product\n                  </UncontrolledTooltip>\n                </Col>\n              </Row>\n            </CardHeader>\n\n            <Table\n              className=\"align-items-center table-flush\"\n              responsive\n              striped\n            >\n              <thead className=\"thead-light\">\n                <tr>\n                  <th>Author</th>\n                  <th>Created at</th>\n                  <th>Product</th>\n                  <th />\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-1.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip209424781\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip209424781\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip12475020\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip12475020\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-2.jpg\")}\n                    />\n                    <b>Alex Smith</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">08/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Design System\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip183793484\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip183793484\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip287066670\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip287066670\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-3.jpg\")}\n                    />\n                    <b>Samantha Ivy</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">30/08/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Black Dashboard\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip978979647\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip978979647\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip664113958\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip664113958\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-1.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip695575450\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip695575450\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip801413251\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip801413251\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"table-user\">\n                    <img\n                      alt=\"...\"\n                      className=\"avatar rounded-circle mr-3\"\n                      src={require(\"assets/img/theme/team-2.jpg\")}\n                    />\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td className=\"table-actions\">\n                    <a\n                      className=\"table-action\"\n                      href=\"#pablo\"\n                      id=\"tooltip569239376\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-user-edit\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip569239376\">\n                      Edit product\n                    </UncontrolledTooltip>\n                    <a\n                      className=\"table-action table-action-delete\"\n                      href=\"#pablo\"\n                      id=\"tooltip707667680\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      <i className=\"fas fa-trash\" />\n                    </a>\n                    <UncontrolledTooltip delay={0} target=\"tooltip707667680\">\n                      Delete product\n                    </UncontrolledTooltip>\n                  </td>\n                </tr>\n              </tbody>\n            </Table>\n          </Card>\n          <Card>\n            <CardHeader className=\"border-0\">\n              <Row>\n                <Col xs=\"6\">\n                  <h3 className=\"mb-0\">Checkbox + Toggles</h3>\n                </Col>\n                <Col className=\"text-right\" xs=\"6\">\n                  <Button\n                    className=\"btn-round btn-icon\"\n                    color=\"danger\"\n                    href=\"#pablo\"\n                    id=\"tooltip28070728\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fas fa-trash\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Delete</span>\n                  </Button>\n                  <UncontrolledTooltip delay={0} target=\"tooltip28070728\">\n                    Edit product\n                  </UncontrolledTooltip>\n                </Col>\n              </Row>\n            </CardHeader>\n\n            <Table className=\"align-items-center table-flush\" hover responsive>\n              <thead className=\"thead-light\">\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <th>Author</th>\n                  <th>Created at</th>\n                  <th>Product</th>\n                  <th>Active</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>Alex Smith</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">08/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Design System\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>Samantha Ivy</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">30/08/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Black Dashboard\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n              </tbody>\n            </Table>\n          </Card>\n          <Card>\n            <CardHeader className=\"border-0\">\n              <Row>\n                <Col xs=\"6\">\n                  <h3 className=\"mb-0\">Checkbox + Labels</h3>\n                </Col>\n                <Col className=\"text-right\" xs=\"6\">\n                  <Button\n                    className=\"btn-round btn-icon\"\n                    color=\"danger\"\n                    href=\"#pablo\"\n                    id=\"tooltip163216539\"\n                    onClick={e => e.preventDefault()}\n                    size=\"sm\"\n                  >\n                    <span className=\"btn-inner--icon mr-1\">\n                      <i className=\"fas fa-trash\" />\n                    </span>\n                    <span className=\"btn-inner--text\">Delete</span>\n                  </Button>\n                  <UncontrolledTooltip delay={0} target=\"tooltip163216539\">\n                    Edit product\n                  </UncontrolledTooltip>\n                </Col>\n              </Row>\n            </CardHeader>\n\n            <Table className=\"align-items-center table-flush\" hover responsive>\n              <thead className=\"thead-light\">\n                <tr>\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <th>Author</th>\n                  <th>Created at</th>\n                  <th>Product</th>\n                  <th>Active</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr className=\"table-success\">\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr className=\"table-\">\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>Alex Smith</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">08/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Design System\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr className=\"table-warning\">\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>Samantha Ivy</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">30/08/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Black Dashboard\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr className=\"table-\">\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n                <tr className=\"table-\">\n                  <th>\n                    <div className=\"custom-control custom-checkbox\">\n                      <input\n                        className=\"custom-control-input\"\n                        id=\"table-check-all\"\n                        type=\"checkbox\"\n                      />\n                      <label\n                        className=\"custom-control-label\"\n                        htmlFor=\"table-check-all\"\n                      />\n                    </div>\n                  </th>\n                  <td className=\"table-user\">\n                    <b>John Michael</b>\n                  </td>\n                  <td>\n                    <span className=\"text-muted\">10/09/2018</span>\n                  </td>\n                  <td>\n                    <a\n                      className=\"font-weight-bold\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                    >\n                      Argon Dashboard PRO\n                    </a>\n                  </td>\n                  <td>\n                    <label className=\"custom-toggle\">\n                      <input defaultChecked type=\"checkbox\" />\n                      <span\n                        className=\"custom-toggle-slider rounded-circle\"\n                        data-label-off=\"No\"\n                        data-label-on=\"Yes\"\n                      />\n                    </label>\n                  </td>\n                </tr>\n              </tbody>\n            </Table>\n          </Card>\n          <Card className=\"bg-transparent\">\n            <CardHeader className=\"bg-transparent border-0\">\n              <h3 className=\"mb-0\">Translucent table</h3>\n            </CardHeader>\n\n            <Table className=\"align-items-center table-flush\" responsive>\n              <thead className=\"thead-light\">\n                <tr>\n                  <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                    Project\n                  </th>\n                  <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                    Budget\n                  </th>\n                  <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                    Status\n                  </th>\n                  <th scope=\"col\">Users</th>\n                  <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                    Completion\n                  </th>\n                  <th scope=\"col\" />\n                </tr>\n              </thead>\n              <tbody className=\"list\">\n                <tr>\n                  <th scope=\"row\">\n                    <Media className=\"align-items-center\">\n                      <a\n                        className=\"avatar rounded-circle mr-3\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/bootstrap.jpg\")}\n                        />\n                      </a>\n                      <Media>\n                        <span className=\"name mb-0 text-sm\">\n                          Argon Design System\n                        </span>\n                      </Media>\n                    </Media>\n                  </th>\n                  <td className=\"budget\">$2500 USD</td>\n                  <td>\n                    <Badge color=\"\" className=\"badge-dot mr-4\">\n                      <i className=\"bg-warning\" />\n                      <span className=\"status\">pending</span>\n                    </Badge>\n                  </td>\n                  <td>\n                    <div className=\"avatar-group\">\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip715349713\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-1.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip715349713\">\n                        Ryan Tompson\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip852299360\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip852299360\">\n                        Romina Hadid\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip333095755\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-3.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip333095755\">\n                        Alexander Smith\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip917841216\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip917841216\">\n                        Jessica Doe\n                      </UncontrolledTooltip>\n                    </div>\n                  </td>\n                  <td>\n                    <div className=\"d-flex align-items-center\">\n                      <span className=\"completion mr-2\">60%</span>\n                      <div>\n                        <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"text-right\">\n                    <UncontrolledDropdown>\n                      <DropdownToggle\n                        className=\"btn-icon-only text-light\"\n                        color=\"\"\n                        role=\"button\"\n                        size=\"sm\"\n                      >\n                        <i className=\"fas fa-ellipsis-v\" />\n                      </DropdownToggle>\n                      <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Another action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Something else here\n                        </DropdownItem>\n                      </DropdownMenu>\n                    </UncontrolledDropdown>\n                  </td>\n                </tr>\n                <tr>\n                  <th scope=\"row\">\n                    <Media className=\"align-items-center\">\n                      <a\n                        className=\"avatar rounded-circle mr-3\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/angular.jpg\")}\n                        />\n                      </a>\n                      <Media>\n                        <span className=\"name mb-0 text-sm\">\n                          Angular Now UI Kit PRO\n                        </span>\n                      </Media>\n                    </Media>\n                  </th>\n                  <td className=\"budget\">$1800 USD</td>\n                  <td>\n                    <Badge color=\"\" className=\"badge-dot mr-4\">\n                      <i className=\"bg-success\" />\n                      <span className=\"status\">completed</span>\n                    </Badge>\n                  </td>\n                  <td>\n                    <div className=\"avatar-group\">\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip345778553\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-1.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip345778553\">\n                        Ryan Tompson\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip847386767\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip847386767\">\n                        Romina Hadid\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip759583934\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-3.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip759583934\">\n                        Alexander Smith\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip310037110\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip310037110\">\n                        Jessica Doe\n                      </UncontrolledTooltip>\n                    </div>\n                  </td>\n                  <td>\n                    <div className=\"d-flex align-items-center\">\n                      <span className=\"completion mr-2\">100%</span>\n                      <div>\n                        <Progress max=\"100\" value=\"100\" color=\"success\" />\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"text-right\">\n                    <UncontrolledDropdown>\n                      <DropdownToggle\n                        className=\"btn-icon-only text-light\"\n                        color=\"\"\n                        role=\"button\"\n                        size=\"sm\"\n                      >\n                        <i className=\"fas fa-ellipsis-v\" />\n                      </DropdownToggle>\n                      <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Another action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Something else here\n                        </DropdownItem>\n                      </DropdownMenu>\n                    </UncontrolledDropdown>\n                  </td>\n                </tr>\n                <tr>\n                  <th scope=\"row\">\n                    <Media className=\"align-items-center\">\n                      <a\n                        className=\"avatar rounded-circle mr-3\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/sketch.jpg\")}\n                        />\n                      </a>\n                      <Media>\n                        <span className=\"name mb-0 text-sm\">\n                          Black Dashboard\n                        </span>\n                      </Media>\n                    </Media>\n                  </th>\n                  <td className=\"budget\">$3150 USD</td>\n                  <td>\n                    <Badge color=\"\" className=\"badge-dot mr-4\">\n                      <i className=\"bg-danger\" />\n                      <span className=\"status\">delayed</span>\n                    </Badge>\n                  </td>\n                  <td>\n                    <div className=\"avatar-group\">\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip145549156\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-1.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip145549156\">\n                        Ryan Tompson\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip250561822\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip250561822\">\n                        Romina Hadid\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip684500175\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-3.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip684500175\">\n                        Alexander Smith\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip82846147\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip82846147\">\n                        Jessica Doe\n                      </UncontrolledTooltip>\n                    </div>\n                  </td>\n                  <td>\n                    <div className=\"d-flex align-items-center\">\n                      <span className=\"completion mr-2\">72%</span>\n                      <div>\n                        <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"text-right\">\n                    <UncontrolledDropdown>\n                      <DropdownToggle\n                        className=\"btn-icon-only text-light\"\n                        color=\"\"\n                        role=\"button\"\n                        size=\"sm\"\n                      >\n                        <i className=\"fas fa-ellipsis-v\" />\n                      </DropdownToggle>\n                      <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Another action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Something else here\n                        </DropdownItem>\n                      </DropdownMenu>\n                    </UncontrolledDropdown>\n                  </td>\n                </tr>\n                <tr>\n                  <th scope=\"row\">\n                    <Media className=\"align-items-center\">\n                      <a\n                        className=\"avatar rounded-circle mr-3\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/react.jpg\")}\n                        />\n                      </a>\n                      <Media>\n                        <span className=\"name mb-0 text-sm\">\n                          React Material Dashboard\n                        </span>\n                      </Media>\n                    </Media>\n                  </th>\n                  <td className=\"budget\">$4400 USD</td>\n                  <td>\n                    <Badge color=\"\" className=\"badge-dot mr-4\">\n                      <i className=\"bg-info\" />\n                      <span className=\"status\">on schedule</span>\n                    </Badge>\n                  </td>\n                  <td>\n                    <div className=\"avatar-group\">\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip763716067\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-1.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip763716067\">\n                        Ryan Tompson\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip629596306\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip629596306\">\n                        Romina Hadid\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip973702792\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-3.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip973702792\">\n                        Alexander Smith\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip765231102\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip765231102\">\n                        Jessica Doe\n                      </UncontrolledTooltip>\n                    </div>\n                  </td>\n                  <td>\n                    <div className=\"d-flex align-items-center\">\n                      <span className=\"completion mr-2\">90%</span>\n                      <div>\n                        <Progress max=\"100\" value=\"90\" color=\"info\" />\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"text-right\">\n                    <UncontrolledDropdown>\n                      <DropdownToggle\n                        className=\"btn-icon-only text-light\"\n                        color=\"\"\n                        role=\"button\"\n                        size=\"sm\"\n                      >\n                        <i className=\"fas fa-ellipsis-v\" />\n                      </DropdownToggle>\n                      <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Another action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Something else here\n                        </DropdownItem>\n                      </DropdownMenu>\n                    </UncontrolledDropdown>\n                  </td>\n                </tr>\n                <tr>\n                  <th scope=\"row\">\n                    <Media className=\"align-items-center\">\n                      <a\n                        className=\"avatar rounded-circle mr-3\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/vue.jpg\")}\n                        />\n                      </a>\n                      <Media>\n                        <span className=\"name mb-0 text-sm\">\n                          Vue Paper UI Kit PRO\n                        </span>\n                      </Media>\n                    </Media>\n                  </th>\n                  <td className=\"budget\">$2200 USD</td>\n                  <td>\n                    <Badge color=\"\" className=\"badge-dot mr-4\">\n                      <i className=\"bg-success\" />\n                      <span className=\"status\">completed</span>\n                    </Badge>\n                  </td>\n                  <td>\n                    <div className=\"avatar-group\">\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip244510364\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-1.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip244510364\">\n                        Ryan Tompson\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip651263728\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-2.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip651263728\">\n                        Romina Hadid\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip105516609\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-3.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip105516609\">\n                        Alexander Smith\n                      </UncontrolledTooltip>\n                      <a\n                        className=\"avatar avatar-sm rounded-circle\"\n                        href=\"#pablo\"\n                        id=\"tooltip765317415\"\n                        onClick={e => e.preventDefault()}\n                      >\n                        <img\n                          alt=\"...\"\n                          src={require(\"assets/img/theme/team-4.jpg\")}\n                        />\n                      </a>\n                      <UncontrolledTooltip delay={0} target=\"tooltip765317415\">\n                        Jessica Doe\n                      </UncontrolledTooltip>\n                    </div>\n                  </td>\n                  <td>\n                    <div className=\"d-flex align-items-center\">\n                      <span className=\"completion mr-2\">100%</span>\n                      <div>\n                        <Progress max=\"100\" value=\"100\" color=\"success\" />\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"text-right\">\n                    <UncontrolledDropdown>\n                      <DropdownToggle\n                        className=\"btn-icon-only text-light\"\n                        color=\"\"\n                        role=\"button\"\n                        size=\"sm\"\n                      >\n                        <i className=\"fas fa-ellipsis-v\" />\n                      </DropdownToggle>\n                      <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Another action\n                        </DropdownItem>\n                        <DropdownItem\n                          href=\"#pablo\"\n                          onClick={e => e.preventDefault()}\n                        >\n                          Something else here\n                        </DropdownItem>\n                      </DropdownMenu>\n                    </UncontrolledDropdown>\n                  </td>\n                </tr>\n              </tbody>\n            </Table>\n          </Card>\n\n          <Row>\n            <div className=\"col\">\n              <Card className=\"bg-default shadow\">\n                <CardHeader className=\"bg-transparent border-0\">\n                  <h3 className=\"text-white mb-0\">Dark table</h3>\n                </CardHeader>\n                <Table\n                  className=\"align-items-center table-dark table-flush\"\n                  responsive\n                >\n                  <thead className=\"thead-dark\">\n                    <tr>\n                      <th className=\"sort\" data-sort=\"name\" scope=\"col\">\n                        Project\n                      </th>\n                      <th className=\"sort\" data-sort=\"budget\" scope=\"col\">\n                        Budget\n                      </th>\n                      <th className=\"sort\" data-sort=\"status\" scope=\"col\">\n                        Status\n                      </th>\n                      <th scope=\"col\">Users</th>\n                      <th className=\"sort\" data-sort=\"completion\" scope=\"col\">\n                        Completion\n                      </th>\n                      <th scope=\"col\" />\n                    </tr>\n                  </thead>\n                  <tbody className=\"list\">\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Argon Design System\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2500 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-warning\" />\n                          <span className=\"status\">pending</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip914312677\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip914312677\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip598826101\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip598826101\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip513888794\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip513888794\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip623852194\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip623852194\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">60%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"60\" color=\"warning\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Angular Now UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$1800 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip618294410\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip618294410\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip474050080\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip474050080\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip410290934\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip410290934\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip566837648\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip566837648\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Black Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$3150 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-danger\" />\n                          <span className=\"status\">delayed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip623199212\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip623199212\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip455324571\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip455324571\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip260755125\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip260755125\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip411542911\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip411542911\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">72%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"72\" color=\"danger\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              React Material Dashboard\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$4400 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-info\" />\n                          <span className=\"status\">on schedule</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip588805720\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip588805720\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip909993336\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip909993336\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip159728285\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip159728285\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip155983421\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip155983421\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">90%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"90\" color=\"info\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                    <tr>\n                      <th scope=\"row\">\n                        <Media className=\"align-items-center\">\n                          <a\n                            className=\"avatar rounded-circle mr-3\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                          <Media>\n                            <span className=\"name mb-0 text-sm\">\n                              Vue Paper UI Kit PRO\n                            </span>\n                          </Media>\n                        </Media>\n                      </th>\n                      <td className=\"budget\">$2200 USD</td>\n                      <td>\n                        <Badge color=\"\" className=\"badge-dot mr-4\">\n                          <i className=\"bg-success\" />\n                          <span className=\"status\">completed</span>\n                        </Badge>\n                      </td>\n                      <td>\n                        <div className=\"avatar-group\">\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip790883729\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip790883729\"\n                          >\n                            Ryan Tompson\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip71467481\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip71467481\"\n                          >\n                            Romina Hadid\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip70486707\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip70486707\"\n                          >\n                            Alexander Smith\n                          </UncontrolledTooltip>\n                          <a\n                            className=\"avatar avatar-sm rounded-circle\"\n                            href=\"#pablo\"\n                            id=\"tooltip651611801\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                          <UncontrolledTooltip\n                            delay={0}\n                            target=\"tooltip651611801\"\n                          >\n                            Jessica Doe\n                          </UncontrolledTooltip>\n                        </div>\n                      </td>\n                      <td>\n                        <div className=\"d-flex align-items-center\">\n                          <span className=\"completion mr-2\">100%</span>\n                          <div>\n                            <Progress max=\"100\" value=\"100\" color=\"success\" />\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"text-right\">\n                        <UncontrolledDropdown>\n                          <DropdownToggle\n                            className=\"btn-icon-only text-light\"\n                            color=\"\"\n                            role=\"button\"\n                            size=\"sm\"\n                          >\n                            <i className=\"fas fa-ellipsis-v\" />\n                          </DropdownToggle>\n                          <DropdownMenu className=\"dropdown-menu-arrow\" right>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Another action\n                            </DropdownItem>\n                            <DropdownItem\n                              href=\"#pablo\"\n                              onClick={e => e.preventDefault()}\n                            >\n                              Something else here\n                            </DropdownItem>\n                          </DropdownMenu>\n                        </UncontrolledDropdown>\n                      </td>\n                    </tr>\n                  </tbody>\n                </Table>\n              </Card>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Tables;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport {\n  Badge,\n  Card,\n  CardHeader,\n  CardBody,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Timeline extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Timeline\" parentName=\"Pages\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col lg=\"6\">\n              <Card>\n                <CardHeader className=\"bg-transparent\">\n                  <h3 className=\"mb-0\">Timeline</h3>\n                </CardHeader>\n                <CardBody>\n                  <div\n                    className=\"timeline timeline-one-side\"\n                    data-timeline-axis-style=\"dashed\"\n                    data-timeline-content=\"axis\"\n                  >\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-success\">\n                        <i className=\"ni ni-bell-55\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-muted font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"mt-3 mb-0\">New message</h5>\n                        <p className=\"text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"success\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-danger\">\n                        <i className=\"ni ni-html5\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-muted font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"mt-3 mb-0\">Product issue</h5>\n                        <p className=\"text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"danger\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-info\">\n                        <i className=\"ni ni-like-2\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-muted font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"mt-3 mb-0\">New likes</h5>\n                        <p className=\"text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"info\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"info\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"info\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-success\">\n                        <i className=\"ni ni-bell-55\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-muted font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"mt-3 mb-0\">New message</h5>\n                        <p className=\"text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"success\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-danger\">\n                        <i className=\"ni ni-html5\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-muted font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"mt-3 mb-0\">Product issue</h5>\n                        <p className=\"text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"danger\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col lg=\"6\">\n              <Card className=\"bg-gradient-default shadow\">\n                <CardHeader className=\"bg-transparent\">\n                  <h3 className=\"mb-0 text-white\">Dark timeline</h3>\n                </CardHeader>\n                <CardBody>\n                  <div\n                    className=\"timeline timeline-one-side\"\n                    data-timeline-axis-style=\"dashed\"\n                    data-timeline-content=\"axis\"\n                  >\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-success\">\n                        <i className=\"ni ni-bell-55\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-light font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"text-white mt-3 mb-0\">New message</h5>\n                        <p className=\"text-light text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"success\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-danger\">\n                        <i className=\"ni ni-html5\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-light font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"text-white mt-3 mb-0\">Product issue</h5>\n                        <p className=\"text-light text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"danger\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-info\">\n                        <i className=\"ni ni-like-2\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-light font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"text-white mt-3 mb-0\">New likes</h5>\n                        <p className=\"text-light text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"info\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"info\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"info\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-success\">\n                        <i className=\"ni ni-bell-55\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-light font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"text-white mt-3 mb-0\">New message</h5>\n                        <p className=\"text-light text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"success\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"success\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-danger\">\n                        <i className=\"ni ni-html5\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <small className=\"text-light font-weight-bold\">\n                          10:30 AM\n                        </small>\n                        <h5 className=\"text-white mt-3 mb-0\">Product issue</h5>\n                        <p className=\"text-light text-sm mt-1 mb-0\">\n                          Nullam id dolor id nibh ultricies vehicula ut id elit.\n                          Cum sociis natoque penatibus et magnis dis parturient\n                          montes, nascetur ridiculus mus.\n                        </p>\n                        <div className=\"mt-3\">\n                          <Badge color=\"danger\" pill>\n                            design\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            system\n                          </Badge>\n                          <Badge color=\"danger\" pill>\n                            creative\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Timeline;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// reactstrap components\nimport { Card, CardHeader, CardBody, Container, Row, Col } from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Typography extends React.Component {\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Typography\" parentName=\"Components\" />\n        <Container className=\"mt--6\" fluid>\n          <Row className=\"justify-content-center\">\n            <Col className=\"card-wrapper\" lg=\"8\">\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Headings</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 1\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h1 className=\"mb-0\">Argon Dashboard PRO React</h1>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 2\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h2 className=\"mb-0\">Argon Dashboard PRO React</h2>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 3\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h3 className=\"mb-0\">Argon Dashboard PRO React</h3>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 4\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h4 className=\"mb-0\">Argon Dashboard PRO React</h4>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 5\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h5 className=\"mb-0\">Argon Dashboard PRO React</h5>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading 6\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h6 className=\"mb-0\">Argon Dashboard PRO React</h6>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Display titles</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Display 1\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h1 className=\"display-1 mb-0\">\n                        Argon Dashboard PRO React\n                      </h1>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Display 2\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h2 className=\"display-2 mb-0\">\n                        Argon Dashboard PRO React\n                      </h2>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Display 3\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h3 className=\"display-3 mb-0\">\n                        Argon Dashboard PRO React\n                      </h3>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Display 4\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h4 className=\"display-4 mb-0\">\n                        Argon Dashboard PRO React\n                      </h4>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Specialized titles</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h3 className=\"heading mb-0\">\n                        Argon Dashboard PRO React\n                      </h3>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading title\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <h3 className=\"heading-title text-info mb-0\">\n                        Argon Dashboard PRO React\n                      </h3>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Heading seaction\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <div>\n                        <h2 className=\"display-3\">\n                          Header with small subtitle\n                        </h2>\n                        <p className=\"lead text-muted\">\n                          According to the National Oceanic and Atmospheric\n                          Administration, Ted, Scambos, NSIDClead scentist, puts\n                          the potentially record maximum.\n                        </p>\n                      </div>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <h3 className=\"mb-0\">Paragraphs</h3>\n                </CardHeader>\n                <CardBody>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Paragraph\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p>\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers. I\n                        understand culture. I am the nucleus. I think that’s a\n                        responsibility that I have, to push possibilities, to\n                        show people, this is the level that things could be at.\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Lead text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"lead\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers. I\n                        understand culture. I am the nucleus. I think that’s a\n                        responsibility that I have, to push possibilities, to\n                        show people, this is the level that things could be at.\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Quote\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <blockquote className=\"blockquote\">\n                        <p className=\"mb-0\">\n                          Lorem ipsum dolor sit amet, consectetur adipiscing\n                          elit. Integer posuere erat a ante.\n                        </p>\n                        <footer className=\"blockquote-footer\">\n                          Someone famous in{\" \"}\n                          <cite title=\"Source Title\">Source Title</cite>\n                        </footer>\n                      </blockquote>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Muted text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-muted mb-0\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Primary text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-primary\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Info text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-info mb-0\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Success text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-success mb-0\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Warning text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-warning mb-0\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                  <Row className=\"py-3 align-items-center\">\n                    <Col sm=\"3\">\n                      <small className=\"text-uppercase text-muted font-weight-bold\">\n                        Danger text\n                      </small>\n                    </Col>\n                    <Col sm=\"9\">\n                      <p className=\"text-danger mb-0\">\n                        I will be the leader of a company that ends up being\n                        worth billions of dollars, because I got the answers...\n                      </p>\n                    </Col>\n                  </Row>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Typography;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// reactstrap components\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport SimpleHeader from \"components/Headers/SimpleHeader.js\";\n\nclass Validation extends React.Component {\n  state = {\n    customStyles: {\n      firstName: \"Mark\",\n      firstNameState: null,\n      lastName: \"Otto\",\n      lastNameState: null,\n      username: \"\",\n      usernameState: null,\n      city: \"\",\n      cityState: null,\n      state: \"\",\n      stateState: null,\n      zip: \"\",\n      zipState: null,\n      checkbox: false,\n      checkboxState: null\n    }\n  };\n  validateCustomStylesForm = () => {\n    let newState = this.state.customStyles;\n    if (newState.firstName === \"\") {\n      newState.firstNameState = \"invalid\";\n    } else {\n      newState.firstNameState = \"valid\";\n    }\n    if (newState.lastName === \"\") {\n      newState.lastNameState = \"invalid\";\n    } else {\n      newState.lastNameState = \"valid\";\n    }\n    if (newState.username === \"\") {\n      newState.usernameState = \"invalid\";\n    } else {\n      newState.usernameState = \"valid\";\n    }\n    if (newState.city === \"\") {\n      newState.cityState = \"invalid\";\n    } else {\n      newState.cityState = \"valid\";\n    }\n    if (newState.state === \"\") {\n      newState.stateState = \"invalid\";\n    } else {\n      newState.stateState = \"valid\";\n    }\n    if (newState.zip === \"\") {\n      newState.zipState = \"invalid\";\n    } else {\n      newState.zipState = \"valid\";\n    }\n    if (newState.checkbox === false) {\n      newState.checkboxState = \"invalid\";\n    } else {\n      newState.checkboxState = \"valid\";\n    }\n    this.setState({\n      customStyles: newState\n    });\n  };\n  customStylesForm = (e, stateName) => {\n    let newState = this.state.customStyles;\n    newState[stateName] = e.target.value;\n    if (stateName === \"checkbox\") {\n      if (e.target.value) {\n        newState.checkboxState = \"valid\";\n      } else {\n        newState.checkboxState = \"invalid\";\n      }\n    } else {\n      if (e.target.value === \"\") {\n        newState[stateName + \"State\"] = \"invalid\";\n      } else {\n        newState[stateName + \"State\"] = \"valid\";\n      }\n    }\n    this.setState({\n      customStyles: newState\n    });\n  };\n  render() {\n    return (\n      <>\n        <SimpleHeader name=\"Form validation\" parentName=\"Forms\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <div className=\"col\">\n              <div className=\"card-wrapper\">\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Custom styles</h3>\n                  </CardHeader>\n                  <CardBody>\n                    <Row>\n                      <Col lg=\"8\">\n                        <p className=\"mb-0\">\n                          For custom form validation messages, you’ll need to\n                          add the novalidate boolean attribute to your{\" \"}\n                          <code>{`<form>`}</code>. This disables the browser\n                          default feedback tooltips, but still provides access\n                          to the form validation APIs in JavaScript. <br />\n                          <br />\n                          When attempting to submit, you’ll see the{\" \"}\n                          <code>:invalid</code> and <code>:valid</code> styles\n                          applied to your form controls.\n                        </p>\n                      </Col>\n                    </Row>\n                    <hr />\n                    <Form className=\"needs-validation\" noValidate>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"4\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustom01\"\n                          >\n                            First name\n                          </label>\n                          <Input\n                            defaultValue=\"Mark\"\n                            id=\"validationCustom01\"\n                            placeholder=\"First name\"\n                            type=\"text\"\n                            valid={\n                              this.state.customStyles.firstNameState === \"valid\"\n                            }\n                            invalid={\n                              this.state.customStyles.firstNameState ===\n                              \"invalid\"\n                            }\n                            onChange={e =>\n                              this.customStylesForm(e, \"firstName\")\n                            }\n                          />\n                          <div className=\"valid-feedback\">Looks good!</div>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustom02\"\n                          >\n                            Last name\n                          </label>\n                          <Input\n                            defaultValue=\"Otto\"\n                            id=\"validationCustom02\"\n                            placeholder=\"Last name\"\n                            type=\"text\"\n                            valid={\n                              this.state.customStyles.lastNameState === \"valid\"\n                            }\n                            invalid={\n                              this.state.customStyles.lastNameState ===\n                              \"invalid\"\n                            }\n                            onChange={e => this.customStylesForm(e, \"lastName\")}\n                          />\n                          <div className=\"valid-feedback\">Looks good!</div>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustomUsername\"\n                          >\n                            Username\n                          </label>\n                          <Input\n                            aria-describedby=\"inputGroupPrepend\"\n                            id=\"validationCustomUsername\"\n                            placeholder=\"Username\"\n                            type=\"text\"\n                            valid={\n                              this.state.customStyles.usernameState === \"valid\"\n                            }\n                            invalid={\n                              this.state.customStyles.usernameState ===\n                              \"invalid\"\n                            }\n                            onChange={e => this.customStylesForm(e, \"username\")}\n                          />\n                          <div className=\"invalid-feedback\">\n                            Please choose a username.\n                          </div>\n                        </Col>\n                      </div>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"6\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustom03\"\n                          >\n                            City\n                          </label>\n                          <Input\n                            id=\"validationCustom03\"\n                            placeholder=\"City\"\n                            type=\"text\"\n                            valid={\n                              this.state.customStyles.cityState === \"valid\"\n                            }\n                            invalid={\n                              this.state.customStyles.cityState === \"invalid\"\n                            }\n                            onChange={e => this.customStylesForm(e, \"city\")}\n                          />\n                          <div className=\"invalid-feedback\">\n                            Please provide a valid city.\n                          </div>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustom04\"\n                          >\n                            State\n                          </label>\n                          <Input\n                            id=\"validationCustom04\"\n                            placeholder=\"State\"\n                            type=\"text\"\n                            valid={\n                              this.state.customStyles.stateState === \"valid\"\n                            }\n                            invalid={\n                              this.state.customStyles.stateState === \"invalid\"\n                            }\n                            onChange={e => this.customStylesForm(e, \"state\")}\n                          />\n                          <div className=\"invalid-feedback\">\n                            Please provide a valid state.\n                          </div>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <label\n                            className=\"form-control-label\"\n                            htmlFor=\"validationCustom05\"\n                          >\n                            Zip\n                          </label>\n                          <Input\n                            id=\"validationCustom05\"\n                            placeholder=\"Zip\"\n                            type=\"text\"\n                            valid={this.state.customStyles.zipState === \"valid\"}\n                            invalid={\n                              this.state.customStyles.zipState === \"invalid\"\n                            }\n                            onChange={e => this.customStylesForm(e, \"zip\")}\n                          />\n                          <div className=\"invalid-feedback\">\n                            Please provide a valid zip.\n                          </div>\n                        </Col>\n                      </div>\n                      <FormGroup>\n                        <div className=\"custom-control custom-checkbox mb-3\">\n                          <input\n                            className=\"custom-control-input\"\n                            defaultValue=\"\"\n                            id=\"invalidCheck\"\n                            type=\"checkbox\"\n                            valid={(\n                              this.state.customStyles.checkboxState === \"valid\"\n                            ).toString()}\n                            invalid={(\n                              this.state.customStyles.checkboxState ===\n                              \"invalid\"\n                            ).toString()}\n                            onChange={e => this.customStylesForm(e, \"checkbox\")}\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"invalidCheck\"\n                          >\n                            Agree to terms and conditions\n                          </label>\n                          <div className=\"invalid-feedback\">\n                            You must agree before submitting.\n                          </div>\n                        </div>\n                      </FormGroup>\n                      <Button\n                        color=\"primary\"\n                        type=\"button\"\n                        onClick={this.validateCustomStylesForm}\n                      >\n                        Submit form\n                      </Button>\n                    </Form>\n                  </CardBody>\n                </Card>\n\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Browser defaults</h3>\n                  </CardHeader>\n\n                  <CardBody>\n                    <Row>\n                      <Col lg=\"8\">\n                        <p className=\"mb-0\">\n                          Not interested in custom validation feedback messages\n                          or writing JavaScript to change form behaviors? All\n                          good, you can use the browser defaults. Try submitting\n                          the form below. Depending on your browser and OS,\n                          you’ll see a slightly different style of feedback.{\" \"}\n                          <br />\n                          <br />\n                          While these feedback styles cannot be styled with CSS,\n                          you can still customize the feedback text through\n                          JavaScript.\n                        </p>\n                      </Col>\n                    </Row>\n                    <hr />\n                    <Form>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefault01\"\n                            >\n                              First name\n                            </label>\n                            <Input\n                              defaultValue=\"Mark\"\n                              id=\"validationDefault01\"\n                              placeholder=\"First name\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefault02\"\n                            >\n                              Last name\n                            </label>\n                            <Input\n                              defaultValue=\"Otto\"\n                              id=\"validationDefault02\"\n                              placeholder=\"Last name\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup\n                            className={classnames({\n                              focused: this.state.focused\n                            })}\n                          >\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefaultUsername\"\n                            >\n                              Username\n                            </label>\n                            <InputGroup>\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText id=\"inputGroupPrepend2\">\n                                  @\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                aria-describedby=\"inputGroupPrepend2\"\n                                id=\"validationDefaultUsername\"\n                                placeholder=\"Username\"\n                                required\n                                type=\"text\"\n                                onFocus={() => this.setState({ focused: true })}\n                                onBlur={() => this.setState({ focused: false })}\n                              />\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                      </div>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"6\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefault03\"\n                            >\n                              City\n                            </label>\n                            <Input\n                              id=\"validationDefault03\"\n                              placeholder=\"City\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefault04\"\n                            >\n                              State\n                            </label>\n                            <Input\n                              id=\"validationDefault04\"\n                              placeholder=\"State\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <FormGroup>\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationDefault05\"\n                            >\n                              Zip\n                            </label>\n                            <Input\n                              id=\"validationDefault05\"\n                              placeholder=\"Zip\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </div>\n                      <FormGroup>\n                        <div className=\"custom-control custom-checkbox mb-3\">\n                          <input\n                            className=\"custom-control-input\"\n                            defaultValue=\"\"\n                            id=\"invalidCheck2\"\n                            required\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"invalidCheck2\"\n                          >\n                            Agree to terms and conditions\n                          </label>\n                          <div className=\"invalid-feedback\">\n                            You must agree before submitting.\n                          </div>\n                        </div>\n                      </FormGroup>\n                      <Button color=\"primary\" type=\"submit\">\n                        Submit form\n                      </Button>\n                    </Form>\n                  </CardBody>\n                </Card>\n\n                <Card>\n                  <CardHeader>\n                    <h3 className=\"mb-0\">Server side</h3>\n                  </CardHeader>\n\n                  <CardBody>\n                    <Row>\n                      <Col lg=\"8\">\n                        <p className=\"mb-0\">\n                          We recommend using client side validation, but in case\n                          you require server side, you can indicate invalid and\n                          valid form fields with <code>.is-invalid</code> and{\" \"}\n                          <code>.is-valid</code>. Note that{\" \"}\n                          <code>.invalid-feedback</code> is also supported with\n                          these classes.\n                        </p>\n                      </Col>\n                    </Row>\n                    <hr />\n                    <Form>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup className=\"has-success\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServer01\"\n                            >\n                              First name\n                            </label>\n                            <Input\n                              className=\"is-valid\"\n                              defaultValue=\"Mark\"\n                              id=\"validationServer01\"\n                              placeholder=\"First name\"\n                              required\n                              type=\"text\"\n                            />\n                            <div className=\"valid-feedback\">Looks good!</div>\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup className=\"has-success\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServer02\"\n                            >\n                              Last name\n                            </label>\n                            <Input\n                              className=\"is-valid\"\n                              defaultValue=\"Otto\"\n                              id=\"validationServer02\"\n                              placeholder=\"Last name\"\n                              required\n                              type=\"text\"\n                            />\n                            <div className=\"valid-feedback\">Looks good!</div>\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"4\">\n                          <FormGroup className=\"has-danger\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServerUsername\"\n                            >\n                              Username\n                            </label>\n                            <Input\n                              aria-describedby=\"inputGroupPrepend3\"\n                              className=\"is-invalid\"\n                              id=\"validationServerUsername\"\n                              placeholder=\"Username\"\n                              required\n                              type=\"text\"\n                            />\n                          </FormGroup>\n                        </Col>\n                      </div>\n                      <div className=\"form-row\">\n                        <Col className=\"mb-3\" md=\"6\">\n                          <FormGroup className=\"has-danger\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServer03\"\n                            >\n                              City\n                            </label>\n                            <Input\n                              className=\"is-invalid\"\n                              id=\"validationServer03\"\n                              placeholder=\"City\"\n                              required\n                              type=\"text\"\n                            />\n                            <div className=\"invalid-feedback\">\n                              Please provide a valid city.\n                            </div>\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <FormGroup className=\"has-danger\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServer04\"\n                            >\n                              State\n                            </label>\n                            <Input\n                              className=\"is-invalid\"\n                              id=\"validationServer04\"\n                              placeholder=\"State\"\n                              required\n                              type=\"text\"\n                            />\n                            <div className=\"invalid-feedback\">\n                              Please provide a valid state.\n                            </div>\n                          </FormGroup>\n                        </Col>\n                        <Col className=\"mb-3\" md=\"3\">\n                          <FormGroup className=\"has-danger\">\n                            <label\n                              className=\"form-control-label\"\n                              htmlFor=\"validationServer05\"\n                            >\n                              Zip\n                            </label>\n                            <Input\n                              className=\"is-invalid\"\n                              id=\"validationServer05\"\n                              placeholder=\"Zip\"\n                              required\n                              type=\"text\"\n                            />\n                            <div className=\"invalid-feedback\">\n                              Please provide a valid zip.\n                            </div>\n                          </FormGroup>\n                        </Col>\n                      </div>\n                      <FormGroup className=\"has-danger\">\n                        <div className=\"custom-control custom-checkbox mb-3\">\n                          <input\n                            className=\"custom-control-input is-invalid\"\n                            defaultValue=\"\"\n                            id=\"invalidCheck3\"\n                            required\n                            type=\"checkbox\"\n                          />\n                          <label\n                            className=\"custom-control-label\"\n                            htmlFor=\"invalidCheck3\"\n                          >\n                            Agree to terms and conditions\n                          </label>\n                          <div className=\"invalid-feedback\">\n                            You must agree before submitting.\n                          </div>\n                        </div>\n                      </FormGroup>\n                      <Button color=\"primary\" type=\"submit\">\n                        Submit form\n                      </Button>\n                    </Form>\n                  </CardBody>\n                </Card>\n              </div>\n            </div>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\n\nexport default Validation;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// nodejs library that concatenates classes\nimport classnames from \"classnames\";\n// JavaScript library that creates a callendar with events\nimport { Calendar } from \"@fullcalendar/core\";\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\nimport moment from \"moment\";\n// react plugin for creating vector maps\nimport { VectorMap } from \"react-jvectormap\";\n// reactstrap components\nimport {\n  Badge,\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardImg,\n  CardTitle,\n  CardText,\n  FormGroup,\n  Form,\n  Input,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroup,\n  ListGroupItem,\n  ListGroup,\n  Progress,\n  Container,\n  Row,\n  Col\n} from \"reactstrap\";\n// core components\nimport CardsHeader from \"components/Headers/CardsHeader.js\";\n\nimport { widgetEvents } from \"variables/general.js\";\n\nlet calendar;\n\nlet mapData = {\n  AU: 760,\n  BR: 550,\n  CA: 120,\n  DE: 1300,\n  FR: 540,\n  GB: 690,\n  GE: 200,\n  IN: 200,\n  RO: 600,\n  RU: 300,\n  US: 2920\n};\n\nclass Widgets extends React.Component {\n  state = {};\n  calendar;\n  componentDidMount() {\n    calendar = new Calendar(this.refs.widgetCalendar, {\n      plugins: [dayGridPlugin],\n      defaultView: \"dayGridMonth\",\n      selectable: true,\n      selectHelper: true,\n      editable: true,\n      events: widgetEvents\n    });\n    calendar.render();\n  }\n  render() {\n    return (\n      <>\n        <CardsHeader name=\"Widgets\" parentName=\"Widgets\" />\n        <Container className=\"mt--6\" fluid>\n          <Row>\n            <Col lg=\"4\">\n              <Card>\n                <CardImg\n                  alt=\"...\"\n                  src={require(\"assets/img/theme/img-1-1000x900.jpg\")}\n                  top\n                />\n                <CardBody>\n                  <CardTitle className=\"h2 mb-0\">\n                    Get started with Argon\n                  </CardTitle>\n                  <small className=\"text-muted\">\n                    by John Snow on Oct 29th at 10:23 AM\n                  </small>\n                  <CardText className=\"mt-4\">\n                    Argon is a great free UI package based on Bootstrap 4 that\n                    includes the most important components and features.\n                  </CardText>\n                  <Button\n                    className=\"px-0\"\n                    color=\"link\"\n                    href=\"#pablo\"\n                    onClick={e => e.preventDefault()}\n                  >\n                    View article\n                  </Button>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Team members</h5>\n                </CardHeader>\n                <CardHeader className=\"py-0\">\n                  <Form>\n                    <FormGroup className=\"mb-0\">\n                      <InputGroup className=\"input-group-lg input-group-flush\">\n                        <InputGroupAddon addonType=\"prepend\">\n                          <InputGroupText>\n                            <span className=\"fas fa-search\" />\n                          </InputGroupText>\n                        </InputGroupAddon>\n                        <Input placeholder=\"Search\" type=\"search\" />\n                      </InputGroup>\n                    </FormGroup>\n                  </Form>\n                </CardHeader>\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              John Michael\n                            </a>\n                          </h4>\n                          <span className=\"text-success mr-1\">●</span>\n                          <small>Online</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              Alex Smith\n                            </a>\n                          </h4>\n                          <span className=\"text-warning mr-1\">●</span>\n                          <small>In a meeting</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-3.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              Samantha Ivy\n                            </a>\n                          </h4>\n                          <span className=\"text-danger mr-1\">●</span>\n                          <small>Offline</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-4.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              John Michael\n                            </a>\n                          </h4>\n                          <span className=\"text-success mr-1\">●</span>\n                          <small>Online</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/team-5.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col ml--2\">\n                          <h4 className=\"mb-0\">\n                            <a href=\"#pablo\" onClick={e => e.preventDefault()}>\n                              John Snow\n                            </a>\n                          </h4>\n                          <span className=\"text-success mr-1\">●</span>\n                          <small>Online</small>\n                        </div>\n                        <Col className=\"col-auto\">\n                          <Button color=\"primary\" size=\"sm\" type=\"button\">\n                            Add\n                          </Button>\n                        </Col>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Latest messages</h5>\n                </CardHeader>\n                <CardBody className=\"p-0\">\n                  <ListGroup flush>\n                    <ListGroupItem\n                      className=\"list-group-item-action flex-column align-items-start py-4 px-4\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      tag=\"a\"\n                    >\n                      <div className=\"d-flex w-100 justify-content-between\">\n                        <div>\n                          <div className=\"d-flex w-100 align-items-center\">\n                            <img\n                              alt=\"...\"\n                              className=\"avatar avatar-xs mr-2\"\n                              src={require(\"assets/img/theme/team-1.jpg\")}\n                            />\n                            <h5 className=\"mb-1\">Tim</h5>\n                          </div>\n                        </div>\n                        <small>2 hrs ago</small>\n                      </div>\n                      <h4 className=\"mt-3 mb-1\">\n                        New order for Argon Dashboard\n                      </h4>\n                      <p className=\"text-sm mb-0\">\n                        Doasdnec id elit non mi porta gravida at eget metus.\n                        Maecenas sed diam eget risus varius blandit.\n                      </p>\n                    </ListGroupItem>\n                    <ListGroupItem\n                      className=\"list-group-item-action flex-column align-items-start py-4 px-4\"\n                      href=\"#pablo\"\n                      onClick={e => e.preventDefault()}\n                      tag=\"a\"\n                    >\n                      <div className=\"d-flex w-100 justify-content-between\">\n                        <div>\n                          <div className=\"d-flex w-100 align-items-center\">\n                            <img\n                              alt=\"...\"\n                              className=\"avatar avatar-xs mr-2\"\n                              src={require(\"assets/img/theme/team-2.jpg\")}\n                            />\n                            <h5 className=\"mb-1\">Mike</h5>\n                          </div>\n                        </div>\n                        <small>1 day ago</small>\n                      </div>\n                      <h4 className=\"mt-3 mb-1\">\n                        <span className=\"text-info mr-1\">●</span>\n                        Your theme has been updated\n                      </h4>\n                      <p className=\"text-sm mb-0\">\n                        Doasdnec id elit non mi porta gravida at eget metus.\n                        Maecenas sed diam eget risus varius blandit.\n                      </p>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n              <Card className=\"bg-gradient-primary\">\n                <CardBody>\n                  <Row className=\"justify-content-between align-items-center\">\n                    <div className=\"col\">\n                      <img\n                        alt=\"...\"\n                        src={require(\"assets/img/icons/cards/mastercard.png\")}\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <div className=\"d-flex align-items-center\">\n                        <small className=\"text-white font-weight-bold mr-3\">\n                          Make default\n                        </small>\n                        <div>\n                          <label className=\"custom-toggle custom-toggle-white\">\n                            <input defaultChecked type=\"checkbox\" />\n                            <span\n                              className=\"custom-toggle-slider rounded-circle\"\n                              data-label-off=\"No\"\n                              data-label-on=\"Yes\"\n                            />\n                          </label>\n                        </div>\n                      </div>\n                    </Col>\n                  </Row>\n                  <div className=\"mt-4\">\n                    <Form className=\"form-primary\" role=\"form\">\n                      <FormGroup>\n                        <InputGroup\n                          className={classnames(\n                            \"input-group-alternative mb-3\",\n                            {\n                              focused: this.state.nameOnCard\n                            }\n                          )}\n                        >\n                          <InputGroupAddon addonType=\"prepend\">\n                            <InputGroupText>\n                              <i className=\"ni ni-single-02\" />\n                            </InputGroupText>\n                          </InputGroupAddon>\n                          <Input\n                            placeholder=\"Name on card\"\n                            type=\"text\"\n                            onFocus={e => this.setState({ nameOnCard: true })}\n                            onBlur={e => this.setState({ nameOnCard: false })}\n                          />\n                        </InputGroup>\n                      </FormGroup>\n                      <FormGroup>\n                        <InputGroup\n                          className={classnames(\n                            \"input-group-alternative mb-3\",\n                            {\n                              focused: this.state.cardNumber\n                            }\n                          )}\n                        >\n                          <InputGroupAddon addonType=\"prepend\">\n                            <InputGroupText>\n                              <i className=\"ni ni-credit-card\" />\n                            </InputGroupText>\n                          </InputGroupAddon>\n                          <Input\n                            placeholder=\"Card number\"\n                            type=\"text\"\n                            onFocus={e => this.setState({ cardNumber: true })}\n                            onBlur={e => this.setState({ cardNumber: false })}\n                          />\n                        </InputGroup>\n                      </FormGroup>\n                      <Row>\n                        <Col xs=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\n                                \"input-group-alternative mb-3\",\n                                {\n                                  focused: this.state.date\n                                }\n                              )}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"ni ni-calendar-grid-58\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"MM/YY\"\n                                type=\"text\"\n                                onFocus={e => this.setState({ date: true })}\n                                onBlur={e => this.setState({ date: false })}\n                              />\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                        <Col xs=\"6\">\n                          <FormGroup>\n                            <InputGroup\n                              className={classnames(\"input-group-alternative\", {\n                                focused: this.state.ccv\n                              })}\n                            >\n                              <InputGroupAddon addonType=\"prepend\">\n                                <InputGroupText>\n                                  <i className=\"ni ni-lock-circle-open\" />\n                                </InputGroupText>\n                              </InputGroupAddon>\n                              <Input\n                                placeholder=\"CCV\"\n                                type=\"text\"\n                                onFocus={e => this.setState({ ccv: true })}\n                                onBlur={e => this.setState({ ccv: false })}\n                              />\n                            </InputGroup>\n                          </FormGroup>\n                        </Col>\n                      </Row>\n                      <Button block color=\"info\" type=\"button\">\n                        Save new card\n                      </Button>\n                    </Form>\n                  </div>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col lg=\"4\">\n              <Card className=\"widget-calendar\">\n                <CardHeader>\n                  <div className=\"h5 text-muted mb-1 widget-calendar-year\">\n                    {moment().format(\"YYYY\")}\n                  </div>\n                  <div className=\"h3 mb-0 widget-calendar-day\">\n                    {moment().format(\"dddd, MMM D\")}\n                  </div>\n                </CardHeader>\n                <CardBody>\n                  <div ref=\"widgetCalendar\" />\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Latest notifications</h5>\n                </CardHeader>\n                <CardBody>\n                  <div\n                    className=\"timeline timeline-one-side\"\n                    data-timeline-axis-style=\"dashed\"\n                    data-timeline-content=\"axis\"\n                  >\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-success\">\n                        <i className=\"ni ni-bell-55\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <div className=\"d-flex justify-content-between pt-1\">\n                          <div>\n                            <span className=\"text-muted text-sm font-weight-bold\">\n                              New message\n                            </span>\n                          </div>\n                          <div className=\"text-right\">\n                            <small className=\"text-muted\">\n                              <i className=\"fas fa-clock mr-1\" />2 hrs ago\n                            </small>\n                          </div>\n                        </div>\n                        <h6 className=\"text-sm mt-1 mb-0\">\n                          Let's meet at Starbucks at 11:30. Wdyt?\n                        </h6>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-danger\">\n                        <i className=\"ni ni-html5\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <div className=\"d-flex justify-content-between pt-1\">\n                          <div>\n                            <span className=\"text-muted text-sm font-weight-bold\">\n                              Product issue\n                            </span>\n                          </div>\n                          <div className=\"text-right\">\n                            <small className=\"text-muted\">\n                              <i className=\"fas fa-clock mr-1\" />3 hrs ago\n                            </small>\n                          </div>\n                        </div>\n                        <h6 className=\"text-sm mt-1 mb-0\">\n                          A new issue has been reported for Argon.\n                        </h6>\n                      </div>\n                    </div>\n                    <div className=\"timeline-block\">\n                      <span className=\"timeline-step badge-info\">\n                        <i className=\"ni ni-like-2\" />\n                      </span>\n                      <div className=\"timeline-content\">\n                        <div className=\"d-flex justify-content-between pt-1\">\n                          <div>\n                            <span className=\"text-muted text-sm font-weight-bold\">\n                              New likes\n                            </span>\n                          </div>\n                          <div className=\"text-right\">\n                            <small className=\"text-muted\">\n                              <i className=\"fas fa-clock mr-1\" />5 hrs ago\n                            </small>\n                          </div>\n                        </div>\n                        <h6 className=\"text-sm mt-1 mb-0\">\n                          Your posts have been liked a lot.\n                        </h6>\n                      </div>\n                    </div>\n                  </div>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">Progress track</h5>\n                </CardHeader>\n                <CardBody>\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/bootstrap.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Argon Design System</h5>\n                          <Progress\n                            color=\"warning\"\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"60\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/angular.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Angular Now UI Kit PRO</h5>\n                          <Progress\n                            color=\"success\"\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/sketch.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Black Dashboard</h5>\n                          <Progress\n                            color=\"danger\"\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"72\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/react.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>React Material Dashboard</h5>\n                          <Progress\n                            color=\"info\"\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"90\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <a\n                            className=\"avatar rounded-circle\"\n                            href=\"#pablo\"\n                            onClick={e => e.preventDefault()}\n                          >\n                            <img\n                              alt=\"...\"\n                              src={require(\"assets/img/theme/vue.jpg\")}\n                            />\n                          </a>\n                        </Col>\n                        <div className=\"col\">\n                          <h5>Vue Paper UI Kit PRO</h5>\n                          <Progress\n                            color=\"success\"\n                            className=\"progress-xs mb-0\"\n                            max=\"100\"\n                            value=\"100\"\n                          />\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardBody>\n                  <Row className=\"justify-content-between align-items-center\">\n                    <div className=\"col\">\n                      <img\n                        alt=\"...\"\n                        src={require(\"assets/img/icons/cards/paypal.png\")}\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <Badge className=\"badge-lg\" color=\"success\">\n                        Active\n                      </Badge>\n                    </Col>\n                  </Row>\n                  <div className=\"my-4\">\n                    <span className=\"h6 surtitle text-muted\">\n                      PayPal E-mail\n                    </span>\n                    <div className=\"h1\">john.snow@gmail.com</div>\n                  </div>\n                  <Row>\n                    <div className=\"col\">\n                      <span className=\"h6 surtitle text-muted\">Name</span>\n                      <span className=\"d-block h3\">John Snow</span>\n                    </div>\n                  </Row>\n                </CardBody>\n              </Card>\n            </Col>\n            <Col lg=\"4\">\n              <Card className=\"widget-calendar\">\n                <CardHeader>\n                  <Row className=\"align-items-center\">\n                    <Col xs=\"8\">\n                      <h5 className=\"h3 mb-0\">Real time</h5>\n                    </Col>\n                    <Col className=\"text-right\" xs=\"4\">\n                      <Button\n                        className=\"btn-neutral\"\n                        color=\"default\"\n                        href=\"#pablo\"\n                        onClick={e => e.preventDefault()}\n                        size=\"sm\"\n                      >\n                        Action\n                      </Button>\n                    </Col>\n                  </Row>\n                </CardHeader>\n                <CardBody>\n                  <VectorMap\n                    containerClassName=\"vector-map vector-map-sm\"\n                    containerStyle={{\n                      width: \"100%\",\n                      height: \"280px\"\n                    }}\n                    map={\"world_mill\"}\n                    zoomOnScroll={false}\n                    scaleColors={[\"#f00\", \"#0071A4\"]}\n                    normalizeFunction=\"polynomial\"\n                    hoverOpacity={0.7}\n                    hoverColor={false}\n                    backgroundColor=\"transparent\"\n                    regionStyle={{\n                      initial: {\n                        fill: \"#e9ecef\",\n                        \"fill-opacity\": 0.8,\n                        stroke: \"none\",\n                        \"stroke-width\": 0,\n                        \"stroke-opacity\": 1\n                      },\n                      hover: {\n                        fill: \"#dee2e6\",\n                        \"fill-opacity\": 0.8,\n                        cursor: \"pointer\"\n                      },\n                      selected: {\n                        fill: \"yellow\"\n                      },\n                      selectedHover: {}\n                    }}\n                    markerStyle={{\n                      initial: {\n                        fill: \"#fb6340\",\n                        \"stroke-width\": 0\n                      },\n                      hover: {\n                        fill: \"#11cdef\",\n                        \"stroke-width\": 0\n                      }\n                    }}\n                    markers={[\n                      {\n                        latLng: [41.9, 12.45],\n                        name: \"Vatican City\"\n                      },\n                      {\n                        latLng: [43.73, 7.41],\n                        name: \"Monaco\"\n                      },\n                      {\n                        latLng: [35.88, 14.5],\n                        name: \"Malta\"\n                      },\n                      {\n                        latLng: [1.3, 103.8],\n                        name: \"Singapore\"\n                      },\n                      {\n                        latLng: [1.46, 173.03],\n                        name: \"Kiribati\"\n                      },\n                      {\n                        latLng: [-21.13, -175.2],\n                        name: \"Tonga\"\n                      },\n                      {\n                        latLng: [15.3, -61.38],\n                        name: \"Dominica\"\n                      },\n                      {\n                        latLng: [-20.2, 57.5],\n                        name: \"Mauritius\"\n                      },\n                      {\n                        latLng: [26.02, 50.55],\n                        name: \"Bahrain\"\n                      }\n                    ]}\n                    series={{\n                      regions: [\n                        {\n                          values: mapData,\n                          scale: [\"#ced4da\", \"#adb5bd\"],\n                          normalizeFunction: \"polynomial\"\n                        }\n                      ]\n                    }}\n                  />\n                  <ListGroup className=\"list my--3\" flush>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/US.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">United States</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/DE.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">Germany</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"px-0\">\n                      <Row className=\"align-items-center\">\n                        <Col className=\"col-auto\">\n                          <img\n                            alt=\"...\"\n                            src={require(\"assets/img/icons/flags/GB.png\")}\n                          />\n                        </Col>\n                        <div className=\"col\">\n                          <small>Country:</small>\n                          <h5 className=\"mb-0\">Great Britain</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Visits:</small>\n                          <h5 className=\"mb-0\">2500</h5>\n                        </div>\n                        <div className=\"col\">\n                          <small>Bounce:</small>\n                          <h5 className=\"mb-0\">30%</h5>\n                        </div>\n                      </Row>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n              <Card className=\"bg-gradient-primary\">\n                <CardBody>\n                  <Row className=\"justify-content-between align-items-center\">\n                    <div className=\"col\">\n                      <img\n                        alt=\"...\"\n                        src={require(\"assets/img/icons/cards/visa.png\")}\n                      />\n                    </div>\n                    <Col className=\"col-auto\">\n                      <Badge className=\"badge-lg\" color=\"success\">\n                        Active\n                      </Badge>\n                    </Col>\n                  </Row>\n                  <div className=\"my-4\">\n                    <span className=\"h6 surtitle text-light\">Card number</span>\n                    <div className=\"card-serial-number h1 text-white\">\n                      <div>4358</div>\n                      <div>7421</div>\n                      <div>9256</div>\n                      <div>6682</div>\n                    </div>\n                  </div>\n                  <Row>\n                    <div className=\"col\">\n                      <span className=\"h6 surtitle text-light\">Name</span>\n                      <span className=\"d-block h3 text-white\">John Snow</span>\n                    </div>\n                    <div className=\"col\">\n                      <span className=\"h6 surtitle text-light\">\n                        Expiry date\n                      </span>\n                      <span className=\"d-block h3 text-white\">11/23</span>\n                    </div>\n                  </Row>\n                </CardBody>\n              </Card>\n              <Card className=\"bg-gradient-default\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle className=\"text-uppercase text-muted mb-0 text-white\">\n                        Total traffic\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        350,897\n                      </span>\n                    </div>\n                    <Col className=\"col-auto\">\n                      <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                        <i className=\"ni ni-active-40\" />\n                      </div>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <span className=\"text-white mr-2\">\n                      <i className=\"fa fa-arrow-up\" />\n                      3.48%\n                    </span>\n                    <span className=\"text-nowrap text-light\">\n                      Since last month\n                    </span>\n                  </p>\n                </CardBody>\n              </Card>\n              <Card className=\"bg-gradient-primary\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle className=\"text-uppercase text-muted mb-0 text-white\">\n                        New users\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        2,356\n                      </span>\n                    </div>\n                    <Col className=\"col-auto\">\n                      <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                        <i className=\"ni ni-atom\" />\n                      </div>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <span className=\"text-white mr-2\">\n                      <i className=\"fa fa-arrow-up\" />\n                      3.48%\n                    </span>\n                    <span className=\"text-nowrap text-light\">\n                      Since last month\n                    </span>\n                  </p>\n                </CardBody>\n              </Card>\n              <Card className=\"bg-gradient-danger\">\n                <CardBody>\n                  <Row>\n                    <div className=\"col\">\n                      <CardTitle className=\"text-uppercase text-muted mb-0 text-white\">\n                        Performance\n                      </CardTitle>\n                      <span className=\"h2 font-weight-bold mb-0 text-white\">\n                        49,65%\n                      </span>\n                    </div>\n                    <Col className=\"col-auto\">\n                      <div className=\"icon icon-shape bg-white text-dark rounded-circle shadow\">\n                        <i className=\"ni ni-spaceship\" />\n                      </div>\n                    </Col>\n                  </Row>\n                  <p className=\"mt-3 mb-0 text-sm\">\n                    <span className=\"text-white mr-2\">\n                      <i className=\"fa fa-arrow-up\" />\n                      3.48%\n                    </span>\n                    <span className=\"text-nowrap text-light\">\n                      Since last month\n                    </span>\n                  </p>\n                </CardBody>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <h5 className=\"h3 mb-0\">To do list</h5>\n                </CardHeader>\n                <CardBody className=\"p-0\">\n                  <ListGroup data-toggle=\"checklist\" flush>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-success checklist-item-checked\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Call with Dave\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-success\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"chk-todo-task-1\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-1\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-warning\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Lunch meeting\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-warning\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"chk-todo-task-2\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-2\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-info\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Argon Dashboard Launch\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-info\">\n                            <input\n                              className=\"custom-control-input\"\n                              id=\"chk-todo-task-3\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-3\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-danger\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Winter Hackaton\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-danger\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"chk-todo-task-4\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-4\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                    <ListGroupItem className=\"checklist-entry flex-column align-items-start py-4 px-4\">\n                      <div className=\"checklist-item checklist-item-success checklist-item-checked\">\n                        <div className=\"checklist-info\">\n                          <h5 className=\"checklist-title mb-0\">\n                            Dinner with Family\n                          </h5>\n                          <small>10:30 AM</small>\n                        </div>\n                        <div>\n                          <div className=\"custom-control custom-checkbox custom-checkbox-success\">\n                            <input\n                              className=\"custom-control-input\"\n                              defaultChecked\n                              id=\"chk-todo-task-5\"\n                              type=\"checkbox\"\n                            />\n                            <label\n                              className=\"custom-control-label\"\n                              htmlFor=\"chk-todo-task-5\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </ListGroupItem>\n                  </ListGroup>\n                </CardBody>\n              </Card>\n            </Col>\n          </Row>\n        </Container>\n      </>\n    );\n  }\n}\nexport default Widgets;\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport React from \"react\";\r\n// react component used to create sweet alerts\r\nimport ReactBSAlert from \"react-bootstrap-sweetalert\";\r\nimport Chart from \"chart.js\";\r\n// react plugin used to create charts\r\nimport {Pie} from \"react-chartjs-2\";\r\n// reactstrap components\r\nimport {\r\n    chartOptions,\r\n    parseOptions,\r\n    chartExample6\r\n} from \"variables/charts.js\";\r\n\r\n\r\n\r\n// react component used to create sweet alerts\r\n\r\n// reactstrap components\r\nimport {\r\n    Button,\r\n    ButtonGroup,\r\n    UncontrolledTooltip,\r\n    Badge,\r\n    Card,\r\n    CardHeader,\r\n    CardBody,\r\n    Progress,\r\n    Container,\r\n    Row,\r\n    Col,\r\n    Table,\r\n    Media,\r\n    UncontrolledDropdown,\r\n    DropdownToggle,\r\n    DropdownMenu,\r\n    DropdownItem,\r\n    Form,\r\n    FormGroup,\r\n    Input,\r\n    Label,\r\n    ListGroup, ListGroupItem\r\n} from \"reactstrap\";\r\nimport SimpleHeader from \"../../../components/Headers/SimpleHeader\";\r\nimport ToolkitProvider, {Search} from \"react-bootstrap-table2-toolkit\";\r\nimport {dataTable} from \"../../../variables/general\";\r\nimport BootstrapTable from \"react-bootstrap-table-next\";\r\nimport ReactToPrint from \"react-to-print\";\r\n\r\nimport Slider from \"nouislider\";\r\n\r\nimport paginationFactory from \"react-bootstrap-table2-paginator\";\r\nimport DataService from \"../../../services/DataService\";\r\n// core components\r\n\r\nconst povertyPreventionOrRelief = {\r\n    name: \"Poverty Prevention or Relief\",\r\n    shortName: \"Poverty\",\r\n    value: 0\r\n};\r\n\r\n\r\nconst education = {\r\n    name: \"Education\",\r\n    shortName: \"Education\",\r\n    value: 0\r\n};\r\n\r\nconst healthAndSavingOfLives = {\r\n    name: \"Health and Saving of Lives\",\r\n    shortName: \"Health\",\r\n    value: 0\r\n};\r\n\r\n\r\nconst citizenshipCommunityDevelopment = {\r\n    name: \"Citizenship, Community Development\",\r\n    shortName: \"Citizenship\",\r\n    value: 0\r\n};\r\n\r\nconst artsCultureHeritageScience = {\r\n    name: \"Arts, Culture, Heritage, Science\",\r\n    shortName: \"Arts\",\r\n    value: 0\r\n};\r\n\r\nconst amateurSport = {\r\n    name: \"Amateur Sport\",\r\n    shortName: \"Amateur Sport\",\r\n    value: 0\r\n};\r\n\r\nconst humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity = {\r\n    name: \"Human Rights, Conflict Resolution, Religious or Racial Harmony, Equality, Diversity\",\r\n    shortName: \"Human Rights\",\r\n    value: 0\r\n};\r\n\r\nconst environmentalProtectionOrImprovement = {\r\n    name: \"Environmental Protection or Improvement\",\r\n    shortName: \"Environmental Protection\",\r\n    value: 0\r\n};\r\n\r\nconst reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship = {\r\n    name: \"Relief of Those in Need: youth, age, ill-health, disability, financial hardship\",\r\n    shortName: \"Relief of Those in Need\",\r\n    value: 0\r\n};\r\n\r\nconst armedForcesPoliceAmbulanceServicesFireAndRescueServices = {\r\n    name: \"Armed Forces, Police, Ambulance Services, Fire and Rescue Services\",\r\n    shortName: \"Armed Forces\",\r\n    value: 0\r\n};\r\n\r\nconst animalWelfare = {\r\n    name: \"Animal Welfare\",\r\n    shortName: \"Animal Welfare\",\r\n    value: 0\r\n};\r\n\r\n\r\nconst religion = {\r\n    name: \"Religion\",\r\n    shortName: \"Religion\",\r\n    value: 0\r\n}\r\n\r\nconst pagination = paginationFactory({\r\n    page: 1,\r\n    alwaysShowAllBtns: true,\r\n    showTotal: true,\r\n    withFirstAndLast: false,\r\n    sizePerPageRenderer: ({options, currSizePerPage, onSizePerPageChange}) => (\r\n        <div className=\"dataTables_length\" id=\"datatable-basic_length\">\r\n            <label>\r\n                Show{\" \"}\r\n                {\r\n                    <select\r\n                        name=\"datatable-basic_length\"\r\n                        aria-controls=\"datatable-basic\"\r\n                        className=\"form-control form-control-sm\"\r\n                        onChange={e => onSizePerPageChange(e.target.value)}\r\n                    >\r\n                        <option value=\"10\">10</option>\r\n                        <option value=\"25\">25</option>\r\n                        <option value=\"50\">50</option>\r\n                        <option value=\"100\">100</option>\r\n                    </select>\r\n                }{\" \"}\r\n                entries.\r\n            </label>\r\n        </div>\r\n    )\r\n});\r\n\r\nconst {SearchBar} = Search;\r\n\r\nclass CapturePreferences extends React.Component {\r\n    dataService = new DataService();\r\n\r\n    philanthropyPie = this.refs.philanthropyPie;\r\n\r\n    handleEmailChange = event =>{\r\n\r\n        this.setState({email : event.target.value});\r\n    }\r\n\r\n    hideAlert = () => {\r\n        this.setState({\r\n            alert: null\r\n        });\r\n    };\r\n\r\n    handleSubmit = event =>\r\n    {\r\n        var canvas = document.getElementById(\"philanthropyPie\");\r\n        var canvasData = canvas.toDataURL();\r\n\r\n        if(this.state.email) {\r\n            var charitablePreferences = {\r\n                povertyPreventionOrRelief: this.state.povertyPreventionOrRelief,\r\n                education: this.state.education,\r\n                healthAndSavingOfLives: this.state.healthAndSavingOfLives,\r\n                citizenshipCommunityDevelopment: this.state.citizenshipCommunityDevelopment,\r\n                artsCultureHeritageScience: this.state.artsCultureHeritageScience,\r\n                amateurSport: this.state.amateurSport,\r\n                humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity: this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity,\r\n                environmentalProtectionOrImprovement: this.state.environmentalProtectionOrImprovement,\r\n                reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship: this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship,\r\n                armedForcesPoliceAmbulanceServicesFireAndRescueServices: this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices,\r\n                animalWelfare: this.state.animalWelfare,\r\n                religion: this.state.religion,\r\n                email: this.state.email,\r\n                chart: canvasData\r\n            }\r\n\r\n            this.dataService.updateCharitablePreferences(charitablePreferences).then(response => {\r\n                if (response != null) {\r\n                    if (response.statusCode == 200) {\r\n                        this.thankYouAlert();\r\n                    } else {\r\n                        this.errorAlert(response.message);\r\n                    }\r\n                } else {\r\n                    this.errorAlert(\"Please try again later.\");\r\n                }\r\n            });\r\n            \r\n\r\n            // this.dataService.retrieveCharitablePreference(this.state.email).then(res => {\r\n\r\n            //         if(res.email === this.state.email)\r\n            //         {\r\n            //             this.alreadySubmittedAlert();\r\n            //         }\r\n            //         else\r\n            //     {\r\n            //         this.dataService.updateCharitablePreferences(charitablePreferences);\r\n\r\n            //         this.thankYouAlert();\r\n            //     }\r\n            //     }\r\n\r\n            // )\r\n\r\n\r\n        }\r\n        else\r\n        {\r\n            this.warningAlert();\r\n        }\r\n    }\r\n\r\n    thankYouAlert = () => {\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    style={{ display: \"block\", marginTop: \"100px\" }}\r\n                    title=\"Thank you for your submission\"\r\n                    onConfirm={() => this.hideAlert()}\r\n                    onCancel={() => this.hideAlert()}\r\n                    btnSize=\"\"\r\n                    text=\"A few words about this sweet alert ...\"\r\n                >\r\n                    If you can’t find the email, please check your junk folder. <br /> You can now close this page.\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    };\r\n\r\n    errorAlert = (message) => {\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    style={{ display: \"block\", marginTop: \"100px\" }}\r\n                    title=\"We could not process your submission at this time\"\r\n                    onConfirm={() => this.hideAlert()}\r\n                    onCancel={() => this.hideAlert()}\r\n                    btnSize=\"\"\r\n                    text=\"A few words about this sweet alert ...\"\r\n                >\r\n                    {message}\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    };\r\n\r\n    alreadySubmittedAlert = () => {\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    style={{ display: \"block\", marginTop: \"100px\" }}\r\n                    title=\"Duplicate Submission\"\r\n                    onConfirm={() => this.hideAlert()}\r\n                    onCancel={() => this.hideAlert()}\r\n                    btnSize=\"\"\r\n                    text=\"A few words about this sweet alert ...\"\r\n                >\r\n                    This email has already been used to submit preferences\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    };\r\n\r\n    warningAlert = () => {\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    style={{ display: \"block\", marginTop: \"100px\" }}\r\n                    title=\"Email Required\"\r\n                    onConfirm={() => this.hideAlert()}\r\n                    onCancel={() => this.hideAlert()}\r\n                    btnSize=\"\"\r\n                    text=\"A few words about this sweet alert ...\"\r\n                >\r\n                    Email is a required field\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    };\r\n    setPieData()\r\n    {\r\n\r\n        //only pass in labels and values that are not zero\r\n        var labelItems = [];\r\n        var dataItems = [];\r\n        var pieColours = []\r\n\r\n\r\n\r\n\r\n\r\n        if(this.state.povertyPreventionOrRelief.value > 0)\r\n        {\r\n            labelItems.push(this.state.povertyPreventionOrRelief.shortName);\r\n            dataItems.push(this.state.povertyPreventionOrRelief.value);\r\n            pieColours.push(\"#EDF226\");\r\n        }\r\n\r\n\r\n\r\n\r\n        if(this.state.education.value > 0)\r\n        {\r\n            labelItems.push(this.state.education.shortName);\r\n            dataItems.push(this.state.education.value);\r\n            pieColours.push(\"#FFBFBD\");\r\n        }\r\n\r\n        if(this.state.healthAndSavingOfLives.value > 0)\r\n        {\r\n            labelItems.push(this.state.healthAndSavingOfLives.shortName);\r\n            dataItems.push(this.state.healthAndSavingOfLives.value);\r\n            pieColours.push(\"#E543B4\");\r\n        }\r\n\r\n        if(this.state.citizenshipCommunityDevelopment.value > 0)\r\n        {\r\n            labelItems.push(this.state.citizenshipCommunityDevelopment.shortName);\r\n            dataItems.push(this.state.citizenshipCommunityDevelopment.value);\r\n            pieColours.push(\"#EC1212\");\r\n        }\r\n\r\n        if(this.state.artsCultureHeritageScience.value > 0)\r\n        {\r\n            labelItems.push(this.state.artsCultureHeritageScience.shortName);\r\n            dataItems.push(this.state.artsCultureHeritageScience.value)\r\n            pieColours.push(\"#963DC7\");\r\n        }\r\n\r\n        if(this.state.amateurSport.value > 0)\r\n        {\r\n            labelItems.push(this.state.amateurSport.shortName);\r\n            dataItems.push(this.state.amateurSport.value);\r\n            pieColours.push(\"#D4ABE7\");\r\n        }\r\n\r\n        if(this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.value > 0)\r\n        {\r\n            labelItems.push(this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.shortName);\r\n            dataItems.push(this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.value)\r\n            pieColours.push(\"#1D1EDB\");\r\n        }\r\n\r\n        if(this.state.environmentalProtectionOrImprovement.value > 0)\r\n        {\r\n            labelItems.push(this.state.environmentalProtectionOrImprovement.shortName);\r\n            dataItems.push(this.state.environmentalProtectionOrImprovement.value)\r\n            pieColours.push(\"#13DC0E\");\r\n        }\r\n\r\n        if(this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.value > 0)\r\n        {\r\n            labelItems.push(this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.shortName);\r\n            dataItems.push(this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.value);\r\n            pieColours.push(\"#EDCFA8\");\r\n        }\r\n\r\n        if(this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices.value > 0)\r\n        {\r\n            labelItems.push(this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices.shortName);\r\n            dataItems.push(this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices.value);\r\n            pieColours.push(\"#DEEAAC\");\r\n\r\n        }\r\n\r\n        if(this.state.animalWelfare.value > 0)\r\n        {\r\n            labelItems.push(this.state.animalWelfare.shortName);\r\n            dataItems.push(this.state.animalWelfare.value);\r\n            pieColours.push(\"#FFC3F7\");\r\n        }\r\n\r\n        if(this.state.religion.value > 0)\r\n        {\r\n            labelItems.push(this.state.religion.shortName);\r\n            dataItems.push(this.state.religion.value)\r\n            pieColours.push(\"#F38943\");\r\n        }\r\n\r\n        var pieData =\r\n            {\r\n                data: {\r\n                    labels: labelItems ,\r\n                    datasets\r\n    :\r\n        [\r\n            {\r\n                data: dataItems ,\r\n                backgroundColor: pieColours,\r\n                label: \"Results\"\r\n            }\r\n        ]\r\n    }\r\n    ,\r\n        options: {\r\n            responsive: true,\r\n                legend\r\n        :\r\n            {\r\n                position: \"top\"\r\n            }\r\n        ,\r\n            animation: {\r\n                animateScale: true,\r\n                    animateRotate\r\n            :\r\n                true\r\n            }\r\n        }\r\n    };\r\n\r\n        this.setState({pieData : pieData});\r\n\r\n        let pie = this.reference.chartInstance\r\n        pie.update();\r\n    }\r\n\r\n    getPieData()\r\n    {\r\n        var pieData = null;\r\n        if(!this.state.pieData) {\r\n            pieData =\r\n            {\r\n                data: {\r\n                    labels: [\r\n                        povertyPreventionOrRelief.shortName,\r\n                        education.shortName,\r\n                        healthAndSavingOfLives.shortName,\r\n                        citizenshipCommunityDevelopment.shortName,\r\n                        artsCultureHeritageScience.shortName,\r\n                        amateurSport.shortName,\r\n                        humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.shortName,\r\n                        environmentalProtectionOrImprovement.shortName,\r\n                        reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.shortName,\r\n                        armedForcesPoliceAmbulanceServicesFireAndRescueServices.shortName,\r\n                        animalWelfare.shortName,\r\n                        religion.shortName\r\n                    ],\r\n                        datasets\r\n                :\r\n                    [\r\n                        {\r\n                            data: [\r\n                                povertyPreventionOrRelief.value,\r\n                                education.value,\r\n                                healthAndSavingOfLives.value,\r\n                                citizenshipCommunityDevelopment.value,\r\n                                artsCultureHeritageScience.value,\r\n                                amateurSport.value,\r\n                                humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.value,\r\n                                environmentalProtectionOrImprovement.value,\r\n                                reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.value,\r\n                                armedForcesPoliceAmbulanceServicesFireAndRescueServices.value,\r\n                                animalWelfare.value,\r\n                                religion.value\r\n                            ],\r\n                            backgroundColor: [\"#7D6B2B\", \"#61766F\",\"#B8CAD4\",\"#CBC6A8\",\"#173130\",\"#51565A\",\"#5E707E\",\"#E7EBEC\",\"#F8F8E0\",\"#40403F\",\"#91A5A6\",\"#788385\"],\r\n                            label: \"Results\"\r\n                        }\r\n                    ]\r\n                }\r\n            ,\r\n            options: {\r\n                responsive: true,\r\n                    legend\r\n            :\r\n                {\r\n                    display : true,\r\n                    position: \"left\"\r\n                }\r\n            ,\r\n                animation: {\r\n                    animateScale: true,\r\n                        animateRotate\r\n                :\r\n                    true\r\n                }\r\n            }\r\n            }\r\n            this.setState({pieData : pieData});\r\n        }\r\n        else\r\n        {\r\n            pieData = this.state.pieData;\r\n        }\r\n        return pieData;\r\n    }\r\n\r\n    copyToClipboardAsTable = el => {\r\n        var body = document.body,\r\n            range,\r\n            sel;\r\n        if (document.createRange && window.getSelection) {\r\n            range = document.createRange();\r\n            sel = window.getSelection();\r\n            sel.removeAllRanges();\r\n            try {\r\n                range.selectNodeContents(el);\r\n                sel.addRange(range);\r\n            } catch (e) {\r\n                range.selectNode(el);\r\n                sel.addRange(range);\r\n            }\r\n            document.execCommand(\"copy\");\r\n        } else if (body.createTextRange) {\r\n            range = body.createTextRange();\r\n            range.moveToElementText(el);\r\n            range.select();\r\n            range.execCommand(\"Copy\");\r\n        }\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    success\r\n                    style={{display: \"block\", marginTop: \"-100px\"}}\r\n                    title=\"Good job!\"\r\n                    onConfirm={() => this.setState({alert: null})}\r\n                    onCancel={() => this.setState({alert: null})}\r\n                    confirmBtnBsStyle=\"info\"\r\n                    btnSize=\"\"\r\n                >\r\n                    Copied to clipboard!\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    }\r\n\r\n    state = {\r\n        povertyPreventionOrRelief,\r\n        education ,\r\n        amateurSport ,\r\n        animalWelfare ,\r\n        armedForcesPoliceAmbulanceServicesFireAndRescueServices ,\r\n        artsCultureHeritageScience ,\r\n        citizenshipCommunityDevelopment,\r\n        environmentalProtectionOrImprovement ,\r\n        healthAndSavingOfLives ,\r\n        humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity ,\r\n        reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship ,\r\n        religion ,\r\n        email : null,\r\n        pieData : null\r\n    };\r\n\r\n        componentDidMount() {\r\n\r\n        var propertySlider  = this.refs.propertySlider;\r\n\r\n        Slider.create(propertySlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: { min: 0, max: 100 }\r\n        }).on(\r\n            \"update\",\r\n            function(values, handle) {\r\n\r\n                var someValue = this.state.povertyPreventionOrRelief;\r\n                someValue.value =  values[0];\r\n\r\n                this.setState({\r\n                    povertyPreventionOrRelief: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n\r\n        var educationSlider  = this.refs.educationSlider;\r\n\r\n        Slider.create(educationSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: { min: 0.0, max: 100.0 }\r\n        }).on(\r\n            \"update\",\r\n            function(values, handle) {\r\n\r\n                var someValue = this.state.education;\r\n                someValue.value =  values[0];\r\n\r\n                this.setState({\r\n                    education: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n\r\n        var healthSlider = this.refs.healthSlider;\r\n\r\n        Slider.create(healthSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.healthAndSavingOfLives;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    healthAndSavingOfLives: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var citizenSlider = this.refs.citizenSlider;\r\n\r\n\r\n        Slider.create(citizenSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.citizenshipCommunityDevelopment;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    citizenshipCommunityDevelopment: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n\r\n        var artsSlider = this.refs.artsSlider;\r\n\r\n\r\n        Slider.create(artsSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.artsCultureHeritageScience;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    artsCultureHeritageScience: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var amateurSportSlider = this.refs.amateurSportSlider;\r\n\r\n        Slider.create(amateurSportSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.amateurSport;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    amateurSport: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var humanRightsSlider = this.refs.humanRightsSlider;\r\n\r\n        Slider.create(humanRightsSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var environmentalSlider = this.refs.environmentalSlider;\r\n\r\n        Slider.create(environmentalSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.environmentalProtectionOrImprovement;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    environmentalProtectionOrImprovement: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var reliefSlider = this.refs.reliefSlider;\r\n\r\n        Slider.create(reliefSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var armedForcesSlider = this.refs.armedForcesSlider;\r\n\r\n        Slider.create(armedForcesSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    armedForcesPoliceAmbulanceServicesFireAndRescueServices: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n        var animalWelfareSlider = this.refs.animalWelfareSlider;\r\n\r\n        Slider.create(animalWelfareSlider, {\r\n            start: [0],\r\n            connect: [true, false],\r\n            step: 1,\r\n            range: {min: 0.0, max: 100.0}\r\n        }).on(\r\n            \"update\",\r\n            function (values, handle) {\r\n\r\n                var someValue = this.state.animalWelfare;\r\n                someValue.value = values[0];\r\n\r\n                this.setState({\r\n                    animalWelfare: someValue\r\n                });\r\n\r\n                this.setPieData();\r\n\r\n            }.bind(this)\r\n        );\r\n\r\n\r\n            var religionSlider = this.refs.religionSlider;\r\n\r\n            Slider.create(religionSlider, {\r\n                start: [0],\r\n                connect: [true, false],\r\n                step: 1,\r\n                range: {min: 0.0, max: 100.0}\r\n            }).on(\r\n                \"update\",\r\n                function (values, handle) {\r\n\r\n                    var someValue = this.state.religion;\r\n                    someValue.value = values[0];\r\n\r\n                    this.setState({\r\n                        religion: someValue\r\n                    });\r\n\r\n                    this.setPieData();\r\n\r\n                }.bind(this)\r\n            );\r\n\r\n    }\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        if (window.Chart) {\r\n            parseOptions(Chart, chartOptions());\r\n        }\r\n    }\r\n\r\n// Parse global options\r\n    render() {\r\n        return (\r\n            <>\r\n                {this.state.alert}\r\n                <Container className=\"mt--6\" fluid>\r\n                    <Row>\r\n                        <div className=\"col\">\r\n                            <Card>\r\n                                <CardHeader>\r\n                                    <h3 className=\"mb-0\">Care4Most Philanthropy Profiling Tool</h3>\r\n                                    <p className=\"text-sm mb-0\">\r\n                                        Welcome to our profiling tool. By adjusting the sliders, please select the causes that are most important to you.\r\n                                    </p>\r\n                                </CardHeader>\r\n                            </Card>\r\n                        </div>\r\n                    </Row>\r\n                    <Row>\r\n\r\n\r\n                        <Col lg=\"6\">\r\n                            <div className=\"card-wrapper\">\r\n                                <Card>\r\n                                    <CardHeader>\r\n                                        <h5 className=\"h3 mb-0\">TAP to Select Your Preferences</h5>\r\n                                    </CardHeader>\r\n                                    <CardBody>\r\n                                        <ListGroup className=\"list my--3\" flush>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.povertyPreventionOrRelief.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--poverty\" ref=\"propertySlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                       <h5></h5>\r\n                                                                    <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.povertyPreventionOrRelief.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.education.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--education\" ref=\"educationSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.education.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.healthAndSavingOfLives.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--healthAndSavingOfLives\" ref=\"healthSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.healthAndSavingOfLives.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.citizenshipCommunityDevelopment.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--citizenshipCommunityDevelopment\" ref=\"citizenSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.citizenshipCommunityDevelopment.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.artsCultureHeritageScience.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--artsCultureHeritageScience\" ref=\"artsSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.artsCultureHeritageScience.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.amateurSport.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--amateurSport\" ref=\"amateurSportSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.amateurSport.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity\" ref=\"humanRightsSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.environmentalProtectionOrImprovement.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--environmentalProtectionOrImprovement\" ref=\"environmentalSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.environmentalProtectionOrImprovement.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship\" ref=\"reliefSlider\" />\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--armedForcesPoliceAmbulanceServicesFireAndRescueServices\" ref=\"armedForcesSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.armedForcesPoliceAmbulanceServicesFireAndRescueServices.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.animalWelfare.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--animalWelfare\" ref=\"animalWelfareSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.animalWelfare.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                            <ListGroupItem className=\"px-0\">\r\n                                                <Row className=\"align-items-center\">\r\n                                                    <div className=\"col\">\r\n                                                        <h5>{this.state.religion.name}</h5>\r\n                                                        <div className=\"input-slider-container\">\r\n                                                            <div className=\"input-slider--religion\" ref=\"religionSlider\" />\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <Col xs=\"4\">\r\n                                                        <h5></h5>\r\n                                                        <span className=\"range-slider-value\">\r\n                                                                      {Math.round(this.state.religion.value)}\r\n                                                                    </span>\r\n                                                    </Col>\r\n                                                </Row>\r\n                                            </ListGroupItem>\r\n                                        </ListGroup>\r\n                                    </CardBody>\r\n                                </Card>\r\n\r\n                            </div>\r\n                        </Col>\r\n                        <Col xl=\"6\">\r\n                            <Card>\r\n                                <CardHeader>\r\n\r\n                                    <h5 className=\"h3 mb-0\">Your Prioritised Preferences</h5>\r\n                                </CardHeader>\r\n                                <CardBody>\r\n                                    <div className=\"chart\">\r\n                                        <Pie\r\n                                            data={this.getPieData().data}\r\n                                            options={this.getPieData().options}\r\n                                            className=\"chart-canvas\"\r\n                                            id=\"philanthropyPie\"\r\n                                            ref = {(reference) => this.reference = reference}\r\n                                        />\r\n                                    </div>\r\n                                </CardBody>\r\n                            </Card>\r\n                            <Card>\r\n                                <CardHeader>\r\n                                    <h3 className=\"mb-0\">Save Your Preferences</h3>\r\n                                    <p className=\"text-sm mb-0\">\r\n                                        Please enter your email address in the box below and we will email you a copy of your pie chart.\r\n                                    </p>\r\n                                </CardHeader>\r\n                                <CardBody>\r\n                                    <Form>\r\n                                        <FormGroup>\r\n                                            <label\r\n                                                className=\"form-control-label\"\r\n                                                htmlFor=\"exampleFormControlInput1\"\r\n                                            >\r\n                                                Email address\r\n                                            </label>\r\n                                            <Input\r\n                                                id=\"exampleFormControlInput1\"\r\n                                                placeholder=\"name@example.com\"\r\n                                                type=\"email\" onChange={this.handleEmailChange}\r\n                                            />\r\n\r\n                                        </FormGroup>\r\n                                        <Button className=\"btn-icon\" color=\"primary\" type=\"button\" onClick={this.handleSubmit}>\r\n                                                    <span className=\"btn-inner--icon mr-1\">\r\n                                                      <i className=\"ni ni-bag-17\"/>\r\n                                                    </span>\r\n                                            <span className=\"btn-inner--text\">Submit Your Choices</span>\r\n                                        </Button>\r\n                                    </Form>\r\n                                </CardBody>\r\n                            </Card>\r\n                        </Col>\r\n                    </Row>\r\n                </Container>\r\n            </>\r\n        );\r\n    }\r\n}\r\n\r\nexport default CapturePreferences;\r\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport React from \"react\";\r\n// javascipt plugin for creating charts\r\n\r\n\r\n// react component for creating dynamic tables\r\nimport BootstrapTable from \"react-bootstrap-table-next\";\r\nimport paginationFactory from \"react-bootstrap-table2-paginator\";\r\nimport ToolkitProvider, { Search } from \"react-bootstrap-table2-toolkit\";\r\n// react component used to create sweet alerts\r\nimport ReactBSAlert from \"react-bootstrap-sweetalert\";\r\nimport {charitablePrefs, dataTable} from \"variables/general\";\r\nimport Chart from \"chart.js\";\r\n// reactstrap components\r\n\r\nimport {\r\n    chartOptions,\r\n    parseOptions,\r\n} from \"variables/charts.js\";\r\n\r\n// reactstrap components\r\nimport {\r\n    Button,\r\n    ButtonGroup,\r\n    UncontrolledTooltip,\r\n    Card,\r\n    CardHeader,\r\n    Container,\r\n    Row,\r\n    Col\r\n} from \"reactstrap\";\r\nimport DataService from \"../../../services/DataService\";\r\n\r\nconst pagination = paginationFactory({\r\n    page: 1,\r\n    alwaysShowAllBtns: true,\r\n    showTotal: true,\r\n    withFirstAndLast: false,\r\n    sizePerPageRenderer: ({ options, currSizePerPage, onSizePerPageChange }) => (\r\n        <div className=\"dataTables_length\" id=\"datatable-basic_length\">\r\n            <label>\r\n                Show{\" \"}\r\n                {\r\n                    <select\r\n                        name=\"datatable-basic_length\"\r\n                        aria-controls=\"datatable-basic\"\r\n                        className=\"form-control form-control-sm\"\r\n                        onChange={e => onSizePerPageChange(e.target.value)}\r\n                    >\r\n                        <option value=\"10\">10</option>\r\n                        <option value=\"25\">25</option>\r\n                        <option value=\"50\">50</option>\r\n                        <option value=\"100\">100</option>\r\n                        <option value=\"1000\">1000</option>\r\n\r\n                    </select>\r\n                }{\" \"}\r\n                entries.\r\n            </label>\r\n        </div>\r\n    )\r\n});\r\n\r\nconst { SearchBar } = Search;\r\n\r\nclass DisplayResults extends React.Component {\r\n\r\n    dataService = new DataService();\r\n\r\n    copyToClipboardAsTable = el => {\r\n        var body = document.body,\r\n            range,\r\n            sel;\r\n        if (document.createRange && window.getSelection) {\r\n            range = document.createRange();\r\n            sel = window.getSelection();\r\n            sel.removeAllRanges();\r\n            try {\r\n                range.selectNodeContents(el);\r\n                sel.addRange(range);\r\n            } catch (e) {\r\n                range.selectNode(el);\r\n                sel.addRange(range);\r\n            }\r\n            document.execCommand(\"copy\");\r\n        } else if (body.createTextRange) {\r\n            range = body.createTextRange();\r\n            range.moveToElementText(el);\r\n            range.select();\r\n            range.execCommand(\"Copy\");\r\n        }\r\n        this.setState({\r\n            alert: (\r\n                <ReactBSAlert\r\n                    success\r\n                    style={{display: \"block\", marginTop: \"-100px\"}}\r\n                    title=\"Good job!\"\r\n                    onConfirm={() => this.setState({alert: null})}\r\n                    onCancel={() => this.setState({alert: null})}\r\n                    confirmBtnBsStyle=\"info\"\r\n                    btnSize=\"\"\r\n                >\r\n                    Copied to clipboard!\r\n                </ReactBSAlert>\r\n            )\r\n        });\r\n    }\r\n\r\n    state = { results : null };\r\n    componentDidMount() {\r\n        this.dataService.retrieveCharitablePreferences().then(res =>{\r\n            this.setState({results : res });\r\n        })\r\n\r\n    }\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        if (window.Chart) {\r\n            parseOptions(Chart, chartOptions());\r\n\r\n\r\n\r\n        }\r\n    }\r\n\r\n\r\n    parseResults()\r\n    {\r\n            var results = [];\r\n\r\n            if(this.state.results) {\r\n                this.state.results.forEach(b => {\r\n\r\n\r\n                    results.push(\r\n                        {\r\n                            email: b.email,\r\n                            dateSubmitted: b.dateSubmitted,\r\n                            povertyPreventionOrReliefValue : b.povertyPreventionOrRelief.value,\r\n                            educationValue : b.education.value,\r\n                            healthAndSavingOfLivesValue :b.healthAndSavingOfLives.value,\r\n                            citizenshipCommunityDevelopmentValue : b.citizenshipCommunityDevelopment.value,\r\n                            artsCultureHeritageScienceValue : b.artsCultureHeritageScience.value,\r\n                            amateurSportValue : b.amateurSport.value ,\r\n                            humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDivValue : b.humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDiversity.value ,\r\n                            environmentalProtectionOrImprovementValue : b.environmentalProtectionOrImprovement.value ,\r\n                            reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardshipValue : b.reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardship.value,\r\n                            armedForcesPoliceAmbulanceServicesFireAndRescueServicesValue : b.armedForcesPoliceAmbulanceServicesFireAndRescueServices.value,\r\n                            animalWelfareValue : b.animalWelfare.value ,\r\n                            religionValue : b.religion.value\r\n\r\n                        })\r\n                });\r\n            }\r\n\r\n            return results;\r\n    }\r\n\r\n// Parse global options\r\n\r\n\r\n\r\n\r\n    render() {\r\n        return (\r\n            <>\r\n                <Row>\r\n                    <div className=\"col\">\r\n                        <Card>\r\n                            <CardHeader>\r\n                                <h3 className=\"mb-0\">Philanthropy Preference Responses</h3>\r\n                                <p className=\"text-sm mb-0\">\r\n                                    The table below shows the Philanthropic preferences that you have received to date.You can also press the copy button below which will copy the results to the clipboard allowing you to export the results to excel.<br/><br/>\r\n                                    The data is only available to specific users. If you do not have the correct permissions then you will not see any results.\r\n                                </p>\r\n                            </CardHeader>\r\n                            <ToolkitProvider\r\n                                data={this.parseResults()}\r\n                                keyField=\"email\"\r\n                                columns={[\r\n                                    {\r\n                                        dataField: \"email\",\r\n                                        text: \"Email\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"dateSubmitted\",\r\n                                        text: \"Date Submitted\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"povertyPreventionOrReliefValue\",\r\n                                        text: \"Poverty Prevention\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"educationValue\",\r\n                                        text: \"Education\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"healthAndSavingOfLivesValue\",\r\n                                        text: \"Health And Saving Of Lives\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"citizenshipCommunityDevelopmentValue\",\r\n                                        text: \"Citizenship and Community Development\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"artsCultureHeritageScienceValue\",\r\n                                        text: \"Arts Culture Heritage Science\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"amateurSportValue\",\r\n                                        text: \"Amateur Sport\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"humanRightsConflictResolutionReligiousOrRacialHarmonyEqualityDivValue\",\r\n                                        text: \"Human Rights\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"artsCultureHeritageScienceValue\",\r\n                                        text: \"Arts Culture Heritage Science\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"environmentalProtectionOrImprovementValue\",\r\n                                        text: \"Environment Protection Or Improvement\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"reliefOfThoseInNeedYouthAgeIllHealthDisabilityFinancialHardshipValue\",\r\n                                        text: \"Relief Of Those In Need\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"armedForcesPoliceAmbulanceServicesFireAndRescueServicesValue\",\r\n                                        text: \"Armed Forces Police\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"animalWelfareValue\",\r\n                                        text: \"Animal Welfare\",\r\n                                        sort: true\r\n                                    },\r\n                                    {\r\n                                        dataField: \"religionValue\",\r\n                                        text: \"Religion\",\r\n                                        sort: true\r\n                                    }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                ]}\r\n                                search\r\n                            >\r\n                                {props => (\r\n                                    <div className=\"py-4 table-responsive\">\r\n                                        <Container fluid>\r\n                                            <Row>\r\n                                                <Col xs={12} sm={6}>\r\n                                                    <ButtonGroup>\r\n                                                        <Button\r\n                                                            className=\"buttons-copy buttons-html5\"\r\n                                                            color=\"default\"\r\n                                                            size=\"sm\"\r\n                                                            id=\"copy-tooltip\"\r\n                                                            onClick={() =>\r\n                                                                this.copyToClipboardAsTable(\r\n                                                                    document.getElementById(\"react-bs-table\")\r\n                                                                )\r\n                                                            }\r\n                                                        >\r\n                                                            <span>Copy</span>\r\n                                                        </Button>\r\n\r\n                                                    </ButtonGroup>\r\n\r\n                                                    <UncontrolledTooltip\r\n                                                        placement=\"top\"\r\n                                                        target=\"copy-tooltip\"\r\n                                                    >\r\n                                                        This will copy to your clipboard the visible rows\r\n                                                        of the table.\r\n                                                    </UncontrolledTooltip>\r\n                                                </Col>\r\n                                                <Col xs={12} sm={6}>\r\n                                                    <div\r\n                                                        id=\"datatable-basic_filter\"\r\n                                                        className=\"dataTables_filter px-4 pb-1 float-right\"\r\n                                                    >\r\n                                                        <label>\r\n                                                            Search:\r\n                                                            <SearchBar\r\n                                                                className=\"form-control-sm\"\r\n                                                                placeholder=\"\"\r\n                                                                {...props.searchProps}\r\n                                                            />\r\n                                                        </label>\r\n                                                    </div>\r\n                                                </Col>\r\n                                            </Row>\r\n                                        </Container>\r\n                                        <BootstrapTable\r\n                                            ref={el => (this.componentRef = el)}\r\n                                            {...props.baseProps}\r\n                                            bootstrap4={true}\r\n                                            pagination={pagination}\r\n                                            bordered={false}\r\n                                            id=\"react-bs-table\"\r\n                                        />\r\n                                    </div>\r\n                                )}\r\n                            </ToolkitProvider>\r\n                        </Card>\r\n                    </div>\r\n                </Row>\r\n\r\n            </>\r\n        );\r\n    }\r\n}\r\nexport default DisplayResults;\r\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport Alternative from \"views/pages/dashboards/Alternative.js\";\r\nimport Buttons from \"views/pages/components/Buttons.js\";\r\nimport Calendar from \"views/pages/Calendar.js\";\r\nimport Cards from \"views/pages/components/Cards.js\";\r\nimport Charts from \"views/pages/Charts.js\";\r\nimport Components from \"views/pages/forms/Components.js\";\r\nimport Dashboard from \"views/pages/dashboards/Dashboard.js\";\r\nimport Elements from \"views/pages/forms/Elements.js\";\r\nimport Google from \"views/pages/maps/Google.js\";\r\nimport Grid from \"views/pages/components/Grid.js\";\r\nimport Icons from \"views/pages/components/Icons.js\";\r\nimport Lock from \"views/pages/examples/Lock.js\";\r\nimport Login from \"views/pages/examples/Login.js\";\r\nimport Notifications from \"views/pages/components/Notifications.js\";\r\nimport Pricing from \"views/pages/examples/Pricing.js\";\r\nimport Profile from \"views/pages/examples/Profile.js\";\r\nimport ReactBSTables from \"views/pages/tables/ReactBSTables.js\";\r\nimport Register from \"views/pages/examples/Register.js\";\r\nimport RTLSupport from \"views/pages/examples/RTLSupport.js\";\r\nimport Sortable from \"views/pages/tables/Sortable.js\";\r\nimport Tables from \"views/pages/tables/Tables.js\";\r\nimport Timeline from \"views/pages/examples/Timeline.js\";\r\nimport Typography from \"views/pages/components/Typography.js\";\r\nimport Validation from \"views/pages/forms/Validation.js\";\r\nimport Vector from \"views/pages/maps/Vector.js\";\r\nimport Widgets from \"views/pages/Widgets.js\";\r\nimport CapturePreferences from \"views/pages/forms/CapturePreferences.js\";\r\nimport DisplayResults from \"views/pages/forms/DisplayResults.js\";\r\n\r\nconst routes = [\r\n  {\r\n    path: \"/preferences\",\r\n    name: \"Capture Preferences\",\r\n    component: CapturePreferences,\r\n    layout: \"/capture\"\r\n  },\r\n  {\r\n    path: \"/displayresults\",\r\n    name: \"Display Results\",\r\n    component: DisplayResults,\r\n    layout: \"/admin\"\r\n  },\r\n  {\r\n    path: \"/login\",\r\n    name: \"Login\",\r\n    component: Login,\r\n    layout: \"/auth\"\r\n  }\r\n];\r\n\r\nexport default routes;\r\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Route, Switch, Redirect } from \"react-router-dom\";\n// core components\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\nimport AdminFooter from \"components/Footers/AdminFooter.js\";\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\n\nimport routes from \"routes.js\";\nimport CapturePreferences from \"../views/pages/forms/CapturePreferences\";\n\nclass Admin extends React.Component {\n  state = {\n    sidenavOpen: true\n  };\n  componentDidUpdate(e) {\n    if (e.history.pathname !== e.location.pathname) {\n      document.documentElement.scrollTop = 0;\n      document.scrollingElement.scrollTop = 0;\n      this.refs.mainContent.scrollTop = 0;\n    }\n  }\n  getRoutes = routes => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return this.getRoutes(prop.views);\n      }\n      if (prop.layout === \"/admin\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  getBrandText = path => {\n    for (let i = 0; i < routes.length; i++) {\n      if (\n        this.props.location.pathname.indexOf(\n          routes[i].layout + routes[i].path\n        ) !== -1\n      ) {\n        return routes[i].name;\n      }\n    }\n    return \"Brand\";\n  };\n  // toggles collapse between mini sidenav and normal\n  toggleSidenav = e => {\n    if (document.body.classList.contains(\"g-sidenav-pinned\")) {\n      document.body.classList.remove(\"g-sidenav-pinned\");\n      document.body.classList.add(\"g-sidenav-hidden\");\n    } else {\n      document.body.classList.add(\"g-sidenav-pinned\");\n      document.body.classList.remove(\"g-sidenav-hidden\");\n    }\n    this.setState({\n      sidenavOpen: !this.state.sidenavOpen\n    });\n  };\n  getNavbarTheme = () => {\n    return this.props.location.pathname.indexOf(\n      \"admin/alternative-dashboard\"\n    ) === -1\n      ? \"dark\"\n      : \"light\";\n  };\n  render() {\n    return (\n      <>\n        <Sidebar\n          {...this.props}\n          routes={routes}\n          toggleSidenav={this.toggleSidenav}\n          sidenavOpen={this.state.sidenavOpen}\n          logo={{\n            innerLink: \"/capture/preferences\",\n            imgSrc: require(\"assets/img/brand/choare_logo.png\"),\n            imgAlt: \"...\"\n          }}\n        />\n        <div\n          className=\"main-content\"\n          ref=\"mainContent\"\n          onClick={this.closeSidenav}\n        >\n          <AdminNavbar\n            {...this.props}\n            theme={this.getNavbarTheme()}\n            toggleSidenav={this.toggleSidenav}\n            sidenavOpen={this.state.sidenavOpen}\n            brandText={this.getBrandText(this.props.location.pathname)}\n          />\n          <Switch>\n            {this.getRoutes(routes)}\n            <Redirect from=\"*\" to=\"/capture/preferences\" />\n          </Switch>\n          <AdminFooter />\n        </div>\n        {this.state.sidenavOpen ? (\n          <div className=\"backdrop d-xl-none\" onClick={this.toggleSidenav} />\n        ) : null}\n      </>\n    );\n  }\n}\n\nexport default Admin;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Route, Switch, Redirect } from \"react-router-dom\";\n// core components\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\nimport AdminFooter from \"components/Footers/AdminFooter.js\";\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\n\nimport routes from \"routes.js\";\n\nclass RTL extends React.Component {\n  constructor(props) {\n    super(props);\n    document.body.classList.add(\"rtl\");\n    document.documentElement.classList.add(\"rtl\");\n    this.state = {\n      sidenavOpen: true\n    };\n  }\n  componentWillUnmount() {\n    document.body.classList.remove(\"rtl\");\n    document.documentElement.classList.remove(\"rtl\");\n  }\n  componentDidUpdate(e) {\n    if (e.history.pathname !== e.location.pathname) {\n      document.documentElement.scrollTop = 0;\n      document.scrollingElement.scrollTop = 0;\n      this.refs.mainContent.scrollTop = 0;\n    }\n  }\n  getRoutes = routes => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return this.getRoutes(prop.views);\n      }\n      if (prop.layout === \"/rtl\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  getBrandText = path => {\n    for (let i = 0; i < routes.length; i++) {\n      if (\n        this.props.location.pathname.indexOf(\n          routes[i].layout + routes[i].path\n        ) !== -1\n      ) {\n        return routes[i].name;\n      }\n    }\n    return \"Brand\";\n  };\n  // toggles collapse between mini sidenav and normal\n  toggleSidenav = e => {\n    if (document.body.classList.contains(\"g-sidenav-pinned\")) {\n      document.body.classList.remove(\"g-sidenav-pinned\");\n      document.body.classList.add(\"g-sidenav-hidden\");\n    } else {\n      document.body.classList.add(\"g-sidenav-pinned\");\n      document.body.classList.remove(\"g-sidenav-hidden\");\n    }\n    this.setState({\n      sidenavOpen: !this.state.sidenavOpen\n    });\n  };\n  render() {\n    return (\n      <>\n        <Sidebar\n          {...this.props}\n          routes={routes}\n          toggleSidenav={this.toggleSidenav}\n          sidenavOpen={this.state.sidenavOpen}\n          logo={{\n            innerLink: \"/\",\n            imgSrc: require(\"assets/img/brand/argon-react.png\"),\n            imgAlt: \"...\"\n          }}\n          rtlActive\n        />\n        <div\n          className=\"main-content\"\n          ref=\"mainContent\"\n          onClick={this.closeSidenav}\n        >\n          <AdminNavbar\n            {...this.props}\n            theme=\"dark\"\n            toggleSidenav={this.toggleSidenav}\n            sidenavOpen={this.state.sidenavOpen}\n            brandText={this.getBrandText(this.props.location.pathname)}\n          />\n          <Switch>\n            {this.getRoutes(routes)}\n            <Redirect from=\"*\" to=\"/rtl/rtl-support\" />\n          </Switch>\n          <AdminFooter />\n        </div>\n        {this.state.sidenavOpen ? (\n          <div className=\"backdrop d-xl-none\" onClick={this.toggleSidenav} />\n        ) : null}\n      </>\n    );\n  }\n}\n\nexport default RTL;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Link } from \"react-router-dom\";\n// reactstrap components\nimport {\n  UncontrolledCollapse,\n  NavbarBrand,\n  Navbar,\n  NavItem,\n  NavLink,\n  Nav,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip,\n  Button,\n  Collapse,\n  Form,\n  FormGroup,\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  Input,\n  UncontrolledDropdown,\n  DropdownToggle, DropdownMenu, ListGroup, ListGroupItem, DropdownItem, Media\n} from \"reactstrap\";\nimport classnames from \"classnames\";\n\nclass AdminNavbar extends React.Component {\n  render() {\n    return (\n      <>\n          <Container fluid>\n            <Collapse navbar isOpen={true}>\n\n\n              <Nav className=\"align-items-center ml-auto ml-md-0\" navbar>\n\n              </Nav>\n            </Collapse>\n          </Container>\n\n      </>\n    );\n  }\n}\n\nexport default AdminNavbar;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n/*eslint-disable*/\nimport React from \"react\";\n\n// reactstrap components\nimport { NavItem, NavLink, Nav, Container, Row, Col } from \"reactstrap\";\n\nclass Login extends React.Component {\n  render() {\n    return (\n      <>\n        <footer className=\"py-5\" id=\"footer-main\">\n          <Container>\n            <Row className=\"align-items-center justify-content-xl-between\">\n\n            </Row>\n          </Container>\n        </footer>\n      </>\n    );\n  }\n}\n\nexport default Login;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Route, Switch, Redirect } from \"react-router-dom\";\n\n// core components\nimport AuthNavbar from \"components/Navbars/AuthNavbar.js\";\nimport AuthFooter from \"components/Footers/AuthFooter.js\";\n\nimport routes from \"routes.js\";\n\nclass Auth extends React.Component {\n  componentDidMount() {\n    document.documentElement.scrollTop = 0;\n    document.scrollingElement.scrollTop = 0;\n    this.refs.mainContent.scrollTop = 0;\n    document.body.classList.add(\"bg-default\");\n  }\n  componentWillUnmount() {\n    document.body.classList.remove(\"bg-default\");\n  }\n  componentDidUpdate(e) {\n    if (e.history.pathname !== e.location.pathname) {\n      document.documentElement.scrollTop = 0;\n      document.scrollingElement.scrollTop = 0;\n      this.refs.mainContent.scrollTop = 0;\n    }\n  }\n  getRoutes = routes => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return this.getRoutes(prop.views);\n      }\n      if (prop.layout === \"/auth\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  render() {\n    return (\n      <>\n        <div className=\"main-content\" ref=\"mainContent\">\n          <AuthNavbar />\n          <Switch>\n            {this.getRoutes(routes)}\n            <Redirect from=\"*\" to=\"/auth/login\" />\n          </Switch>\n        </div>\n        <AuthFooter />\n      </>\n    );\n  }\n}\n\nexport default Auth;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Link } from \"react-router-dom\";\n// reactstrap components\nimport {\n  UncontrolledCollapse,\n  NavbarBrand,\n  Navbar,\n  NavItem,\n  NavLink,\n  Nav,\n  Container,\n  Row,\n  Col,\n  UncontrolledTooltip,\n  Button\n} from \"reactstrap\";\n\nclass AdminNavbar extends React.Component {\n  render() {\n    return (\n      <>\n        <Navbar\n          className=\"navbar-horizontal navbar-main navbar-dark bg-info\"\n          expand=\"lg\"\n          id=\"navbar-main\"\n        >\n          <Container>\n            <NavbarBrand to=\"/\" tag={Link}>\n              <img\n                alt=\"...\"\n                src={require(\"assets/img/brand/argon-react-white.png\")}\n              />\n            </NavbarBrand>\n            <button\n              aria-controls=\"navbar-collapse\"\n              aria-expanded={false}\n              aria-label=\"Toggle navigation\"\n              className=\"navbar-toggler\"\n              data-target=\"#navbar-collapse\"\n              data-toggle=\"collapse\"\n              id=\"navbar-collapse\"\n              type=\"button\"\n            >\n              <span className=\"navbar-toggler-icon\" />\n            </button>\n            <UncontrolledCollapse\n              className=\"navbar-custom-collapse\"\n              navbar\n              toggler=\"#navbar-collapse\"\n            >\n              <div className=\"navbar-collapse-header\">\n                <Row>\n                  <Col className=\"collapse-brand\" xs=\"6\">\n                    <Link to=\"/admin/dashboard\">\n                      <img\n                        alt=\"...\"\n                        src={require(\"assets/img/brand/blue.png\")}\n                      />\n                    </Link>\n                  </Col>\n                  <Col className=\"collapse-close\" xs=\"6\">\n                    <button\n                      aria-controls=\"navbar-collapse\"\n                      aria-expanded={false}\n                      aria-label=\"Toggle navigation\"\n                      className=\"navbar-toggler\"\n                      data-target=\"#navbar-collapse\"\n                      data-toggle=\"collapse\"\n                      id=\"navbar-collapse\"\n                      type=\"button\"\n                    >\n                      <span />\n                      <span />\n                    </button>\n                  </Col>\n                </Row>\n              </div>\n              <Nav className=\"mr-auto\" navbar>\n                <NavItem>\n                  <NavLink to=\"/admin/dashboard\" tag={Link}>\n                    <span className=\"nav-link-inner--text\">Dashboard</span>\n                  </NavLink>\n                </NavItem>\n                <NavItem>\n                  <NavLink to=\"/auth/pricing\" tag={Link}>\n                    <span className=\"nav-link-inner--text\">Pricing</span>\n                  </NavLink>\n                </NavItem>\n                <NavItem>\n                  <NavLink to=\"/auth/login\" tag={Link}>\n                    <span className=\"nav-link-inner--text\">Login</span>\n                  </NavLink>\n                </NavItem>\n                <NavItem>\n                  <NavLink to=\"/auth/register\" tag={Link}>\n                    <span className=\"nav-link-inner--text\">Register</span>\n                  </NavLink>\n                </NavItem>\n                <NavItem>\n                  <NavLink to=\"/auth/lock\" tag={Link}>\n                    <span className=\"nav-link-inner--text\">Lock</span>\n                  </NavLink>\n                </NavItem>\n              </Nav>\n              <hr className=\"d-lg-none\" />\n              <Nav className=\"align-items-lg-center ml-lg-auto\" navbar>\n                <NavItem>\n                  <NavLink\n                    className=\"nav-link-icon\"\n                    href=\"https://www.facebook.com/creativetim?ref=creative-tim\"\n                    id=\"tooltip601201423\"\n                    target=\"_blank\"\n                  >\n                    <i className=\"fab fa-facebook-square\" />\n                    <span className=\"nav-link-inner--text d-lg-none\">\n                      Facebook\n                    </span>\n                  </NavLink>\n                  <UncontrolledTooltip delay={0} target=\"tooltip601201423\">\n                    Like us on Facebook\n                  </UncontrolledTooltip>\n                </NavItem>\n                <NavItem>\n                  <NavLink\n                    className=\"nav-link-icon\"\n                    href=\"https://www.instagram.com/creativetimofficial?ref=creative-tim\"\n                    id=\"tooltip871243015\"\n                    target=\"_blank\"\n                  >\n                    <i className=\"fab fa-instagram\" />\n                    <span className=\"nav-link-inner--text d-lg-none\">\n                      Instagram\n                    </span>\n                  </NavLink>\n                  <UncontrolledTooltip delay={0} target=\"tooltip871243015\">\n                    Follow us on Instagram\n                  </UncontrolledTooltip>\n                </NavItem>\n                <NavItem>\n                  <NavLink\n                    className=\"nav-link-icon\"\n                    href=\"https://twitter.com/creativetim?ref=creative-tim\"\n                    id=\"tooltip366258619\"\n                    target=\"_blank\"\n                  >\n                    <i className=\"fab fa-twitter-square\" />\n                    <span className=\"nav-link-inner--text d-lg-none\">\n                      Twitter\n                    </span>\n                  </NavLink>\n                  <UncontrolledTooltip delay={0} target=\"tooltip366258619\">\n                    Follow us on Twitter\n                  </UncontrolledTooltip>\n                </NavItem>\n                <NavItem>\n                  <NavLink\n                    className=\"nav-link-icon\"\n                    href=\"https://github.com/creativetimofficial?ref=creative-tim\"\n                    id=\"tooltip931502898\"\n                    target=\"_blank\"\n                  >\n                    <i className=\"fab fa-github\" />\n                    <span className=\"nav-link-inner--text d-lg-none\">\n                      Github\n                    </span>\n                  </NavLink>\n                  <UncontrolledTooltip delay={0} target=\"tooltip931502898\">\n                    Star us on Github\n                  </UncontrolledTooltip>\n                </NavItem>\n                <NavItem className=\"d-none d-lg-block ml-lg-4\">\n                  <Button\n                    className=\"btn-neutral btn-icon\"\n                    color=\"default\"\n                    href=\"https://www.creative-tim.com/product/argon-dashboard-pro-react?ref=adpr-index-navbar\"\n                    target=\"_blank\"\n                  >\n                    <span className=\"btn-inner--icon\">\n                      <i className=\"fas fa-shopping-cart mr-2\" />\n                    </span>\n                    <span className=\"nav-link-inner--text\">Purchase now</span>\n                  </Button>\n                </NavItem>\n              </Nav>\n            </UncontrolledCollapse>\n          </Container>\n        </Navbar>\n      </>\n    );\n  }\n}\n\nexport default AdminNavbar;\n","/*!\n\n=========================================================\n* Argon Dashboard PRO React - v1.1.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n// react library for routing\nimport { Link } from \"react-router-dom\";\n// reactstrap components\nimport { Button, Card, CardBody, Container, Row, Col } from \"reactstrap\";\n\nclass IndexHeader extends React.Component {\n  render() {\n    return (\n      <>\n        <div className=\"header bg-info pt-5 pb-7\">\n          <Container>\n            <div className=\"header-body\">\n              <Row className=\"align-items-center\">\n                <Col lg=\"6\">\n                  <div className=\"pr-5\">\n                    <h1 className=\"display-2 text-white font-weight-bold mb-0\">\n                      Argon Dashboard PRO React\n                    </h1>\n                    <h2 className=\"display-4 text-white font-weight-light\">\n                      A beautiful premium dashboard for Bootstrap 4, React and\n                      Reactstrap.\n                    </h2>\n                    <p className=\"text-white mt-4\">\n                      Argon perfectly combines reusable HTML and modular CSS\n                      with a modern styling and beautiful markup throughout each\n                      HTML template in the pack.\n                    </p>\n                    <div className=\"mt-5\">\n                      <Button\n                        className=\"btn-neutral my-2\"\n                        color=\"default\"\n                        to=\"/admin/dashboard\"\n                        tag={Link}\n                      >\n                        Explore Dashboard\n                      </Button>\n                      <Button\n                        className=\"my-2\"\n                        color=\"default\"\n                        href=\"https://www.creative-tim.com/product/argon-dashboard-pro-react?ref=adpr-auth-navbar\"\n                      >\n                        Purchase now\n                      </Button>\n                    </div>\n                  </div>\n                </Col>\n                <Col lg=\"6\">\n                  <Row className=\"pt-5\">\n                    <Col md=\"6\">\n                      <Card>\n                        <CardBody>\n                          <div className=\"icon icon-shape bg-gradient-red text-white rounded-circle shadow mb-4\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                          <h5 className=\"h3\">Components</h5>\n                          <p>\n                            Argon comes with over 70 handcrafted components.\n                          </p>\n                        </CardBody>\n                      </Card>\n                      <Card>\n                        <CardBody>\n                          <div className=\"icon icon-shape bg-gradient-info text-white rounded-circle shadow mb-4\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                          <h5 className=\"h3\">Plugins</h5>\n                          <p>\n                            Fully integrated and extendable third-party plugins\n                            that you will love.\n                          </p>\n                        </CardBody>\n                      </Card>\n                    </Col>\n                    <Col className=\"pt-lg-5 pt-4\" md=\"6\">\n                      <Card className=\"mb-4\">\n                        <CardBody>\n                          <div className=\"icon icon-shape bg-gradient-success text-white rounded-circle shadow mb-4\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                          <h5 className=\"h3\">Pages</h5>\n                          <p>\n                            From simple to complex, you get a beautiful set of\n                            15+ page examples.\n                          </p>\n                        </CardBody>\n                      </Card>\n                      <Card className=\"mb-4\">\n                        <CardBody>\n                          <div className=\"icon icon-shape bg-gradient-warning text-white rounded-circle shadow mb-4\">\n                            <i className=\"ni ni-active-40\" />\n                          </div>\n                          <h5 className=\"h3\">Documentation</h5>\n                          <p>\n                            You will love how easy is to to work with Argon.\n                          </p>\n                        </CardBody>\n                      </Card>\n                    </Col>\n                  </Row>\n                </Col>\n              </Row>\n            </div>\n          </Container>\n          <div className=\"separator separator-bottom separator-skew zindex-100\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              preserveAspectRatio=\"none\"\n              version=\"1.1\"\n              viewBox=\"0 0 2560 100\"\n              x=\"0\"\n              y=\"0\"\n            >\n              <polygon\n                className=\"fill-default\"\n                points=\"2560 0 2560 100 0 100\"\n              />\n            </svg>\n          </div>\n        </div>\n      </>\n    );\n  }\n}\n\nexport default IndexHeader;\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport React from \"react\";\r\n// react library for routing\r\nimport { Route, Switch, Redirect } from \"react-router-dom\";\r\n// core components\r\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\r\nimport AdminFooter from \"components/Footers/AdminFooter.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\n\r\nimport routes from \"routes.js\";\r\n\r\nclass FullScreen extends React.Component {\r\n  state = {\r\n    sidenavOpen: true\r\n  };\r\n  componentDidUpdate(e) {\r\n    if (e.history.pathname !== e.location.pathname) {\r\n      document.documentElement.scrollTop = 0;\r\n      document.scrollingElement.scrollTop = 0;\r\n      this.refs.mainContent.scrollTop = 0;\r\n    }\r\n  }\r\n  getRoutes = routes => {\r\n    return routes.map((prop, key) => {\r\n      if (prop.collapse) {\r\n        return this.getRoutes(prop.views);\r\n      }\r\n      if (prop.layout ===\"/capture\") {\r\n        return (\r\n            <Route\r\n                path={prop.layout + prop.path}\r\n                component={prop.component}\r\n                key={key}\r\n            />\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    });\r\n  };\r\n  getBrandText = path => {\r\n    for (let i = 0; i < routes.length; i++) {\r\n      if (\r\n          this.props.location.pathname.indexOf(\r\n              routes[i].layout + routes[i].path\r\n          ) !== -1\r\n      ) {\r\n        return routes[i].name;\r\n      }\r\n    }\r\n    return \"Brand\";\r\n  };\r\n  // toggles collapse between mini sidenav and normal\r\n  toggleSidenav = e => {\r\n    if (document.body.classList.contains(\"g-sidenav-pinned\")) {\r\n      document.body.classList.remove(\"g-sidenav-pinned\");\r\n      document.body.classList.add(\"g-sidenav-hidden\");\r\n    } else {\r\n      document.body.classList.add(\"g-sidenav-pinned\");\r\n      document.body.classList.remove(\"g-sidenav-hidden\");\r\n    }\r\n    this.setState({\r\n      sidenavOpen: !this.state.sidenavOpen\r\n    });\r\n  };\r\n  getNavbarTheme = () => {\r\n    return this.props.location.pathname.indexOf(\r\n        \"admin/alternative-dashboard\"\r\n    ) === -1\r\n        ? \"dark\"\r\n        : \"light\";\r\n  };\r\n  render() {\r\n    return (\r\n        <>\r\n\r\n          <div\r\n              className=\"main-content\"\r\n              ref=\"mainContent\"\r\n              onClick={this.closeSidenav}\r\n          >\r\n            <AdminNavbar\r\n                {...this.props}\r\n                theme={this.getNavbarTheme()}\r\n                toggleSidenav={this.toggleSidenav}\r\n                sidenavOpen={this.state.sidenavOpen}\r\n                brandText={this.getBrandText(this.props.location.pathname)}\r\n            />\r\n            <Switch>\r\n              {this.getRoutes(routes)}\r\n              <Redirect from=\"*\" to=\"/admin/dashboard\" />\r\n            </Switch>\r\n            <AdminFooter />\r\n          </div>\r\n          {this.state.sidenavOpen ? (\r\n              <div className=\"backdrop d-xl-none\" onClick={this.toggleSidenav} />\r\n          ) : null}\r\n        </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default FullScreen;\r\n","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\n/*eslint-disable*/\r\nimport React from \"react\";\r\n// react library for routing\r\nimport { Link } from \"react-router-dom\";\r\n// reactstrap components\r\nimport {\r\n  Badge,\r\n  Button,\r\n  Card,\r\n  CardBody,\r\n  Container,\r\n  Row,\r\n  Col,\r\n  UncontrolledTooltip\r\n} from \"reactstrap\";\r\n// core components\r\nimport IndexNavbar from \"components/Navbars/IndexNavbar.js\";\r\nimport IndexHeader from \"components/Headers/IndexHeader.js\";\r\nimport AuthFooter from \"components/Footers/AuthFooter.js\";\r\n\r\nclass Index extends React.Component {\r\n  render() {\r\n    return (\r\n      <>\r\n        <IndexNavbar />\r\n        <div className=\"main-content\">\r\n          <IndexHeader />\r\n          <section className=\"py-6 pb-9 bg-default\">\r\n            <Container fluid>\r\n              <Row className=\"justify-content-center text-center\">\r\n                <Col md=\"6\">\r\n                  <h2 className=\"display-3 text-white\">\r\n                    A complete React solution\r\n                  </h2>\r\n                  <p className=\"lead text-white\">\r\n                    Argon is a completly new product built on our newest\r\n                    re-built from scratch framework structure that is meant to\r\n                    make our products more intuitive, more adaptive and,\r\n                    needless to say, so much easier to customize. Let Argon\r\n                    amaze you with its cool features and build tools and get\r\n                    your project to a whole new level.\r\n                  </p>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n          <section className=\"section section-lg pt-lg-0 mt--7\">\r\n            <Container>\r\n              <Row className=\"justify-content-center\">\r\n                <Col lg=\"12\">\r\n                  <Row>\r\n                    <Col lg=\"4\">\r\n                      <Card className=\"card-lift--hover shadow border-0\">\r\n                        <CardBody className=\"py-5\">\r\n                          <div className=\"icon icon-shape bg-gradient-info text-white rounded-circle mb-4\">\r\n                            <i className=\"ni ni-check-bold\" />\r\n                          </div>\r\n                          <h4 className=\"h3 text-info text-uppercase\">\r\n                            Based on React and Reactstrap\r\n                          </h4>\r\n                          <p className=\"description mt-3\">\r\n                            Argon is built on top of the most popular open\r\n                            source toolkit for developing with HTML, CSS, and\r\n                            JS.\r\n                          </p>\r\n                          <div>\r\n                            <Badge color=\"info\" pill>\r\n                              react\r\n                            </Badge>\r\n                            <Badge color=\"info\" pill>\r\n                              reactstrap\r\n                            </Badge>\r\n                            <Badge color=\"info\" pill>\r\n                              dashboard\r\n                            </Badge>\r\n                            <Badge color=\"info\" pill>\r\n                              template\r\n                            </Badge>\r\n                          </div>\r\n                        </CardBody>\r\n                      </Card>\r\n                    </Col>\r\n                    <Col lg=\"4\">\r\n                      <Card className=\"card-lift--hover shadow border-0\">\r\n                        <CardBody className=\"py-5\">\r\n                          <div className=\"icon icon-shape bg-gradient-success text-white rounded-circle mb-4\">\r\n                            <i className=\"ni ni-istanbul\" />\r\n                          </div>\r\n                          <h4 className=\"h3 text-success text-uppercase\">\r\n                            Integrated build tools\r\n                          </h4>\r\n                          <p className=\"description mt-3\">\r\n                            Use Argons's included npm scripts to compile source\r\n                            code, scss and more with just a few simple commands.\r\n                          </p>\r\n                          <div>\r\n                            <Badge color=\"success\" pill>\r\n                              npm\r\n                            </Badge>\r\n                            <Badge color=\"success\" pill>\r\n                              build tools\r\n                            </Badge>\r\n                          </div>\r\n                        </CardBody>\r\n                      </Card>\r\n                    </Col>\r\n                    <Col lg=\"4\">\r\n                      <Card className=\"card-lift--hover shadow border-0\">\r\n                        <CardBody className=\"py-5\">\r\n                          <div className=\"icon icon-shape bg-gradient-warning text-white rounded-circle mb-4\">\r\n                            <i className=\"ni ni-planet\" />\r\n                          </div>\r\n                          <h4 className=\"h3 text-warning text-uppercase\">\r\n                            Full Sass support\r\n                          </h4>\r\n                          <p className=\"description mt-3\">\r\n                            Argon makes customization easier than ever before.\r\n                            You get all the tools to make your website building\r\n                            process a breeze.\r\n                          </p>\r\n                          <div>\r\n                            <Badge color=\"warning\" pill>\r\n                              sass\r\n                            </Badge>\r\n                            <Badge color=\"warning\" pill>\r\n                              design\r\n                            </Badge>\r\n                            <Badge color=\"warning\" pill>\r\n                              customize\r\n                            </Badge>\r\n                          </div>\r\n                        </CardBody>\r\n                      </Card>\r\n                    </Col>\r\n                  </Row>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n          <section className=\"py-6\">\r\n            <Container>\r\n              <Row className=\"row-grid align-items-center\">\r\n                <Col className=\"order-md-2\" md=\"6\">\r\n                  <img\r\n                    alt=\"...\"\r\n                    className=\"img-fluid\"\r\n                    src={require(\"assets/img/theme/landing-1.png\")}\r\n                  />\r\n                </Col>\r\n                <Col className=\"order-md-1\" md=\"6\">\r\n                  <div className=\"pr-md-5\">\r\n                    <h1>Awesome features</h1>\r\n                    <p>\r\n                      The kit comes with three pre-built pages to help you get\r\n                      started faster. You can change the text and images and\r\n                      you're good to go.\r\n                    </p>\r\n                    <ul className=\"list-unstyled mt-5\">\r\n                      <li className=\"py-2\">\r\n                        <div className=\"d-flex align-items-center\">\r\n                          <div>\r\n                            <Badge\r\n                              className=\"badge-circle mr-3\"\r\n                              color=\"success\"\r\n                            >\r\n                              <i className=\"ni ni-settings-gear-65\" />\r\n                            </Badge>\r\n                          </div>\r\n                          <div>\r\n                            <h4 className=\"mb-0\">\r\n                              Carefully crafted components\r\n                            </h4>\r\n                          </div>\r\n                        </div>\r\n                      </li>\r\n                      <li className=\"py-2\">\r\n                        <div className=\"d-flex align-items-center\">\r\n                          <div>\r\n                            <Badge\r\n                              className=\"badge-circle mr-3\"\r\n                              color=\"success\"\r\n                            >\r\n                              <i className=\"ni ni-html5\" />\r\n                            </Badge>\r\n                          </div>\r\n                          <div>\r\n                            <h4 className=\"mb-0\">Amazing page examples</h4>\r\n                          </div>\r\n                        </div>\r\n                      </li>\r\n                      <li className=\"py-2\">\r\n                        <div className=\"d-flex align-items-center\">\r\n                          <div>\r\n                            <Badge\r\n                              className=\"badge-circle mr-3\"\r\n                              color=\"success\"\r\n                            >\r\n                              <i className=\"ni ni-satisfied\" />\r\n                            </Badge>\r\n                          </div>\r\n                          <div>\r\n                            <h4 className=\"mb-0\">\r\n                              Super friendly support team\r\n                            </h4>\r\n                          </div>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n          <section className=\"py-6\">\r\n            <Container>\r\n              <Row className=\"row-grid align-items-center\">\r\n                <Col md=\"6\">\r\n                  <img\r\n                    alt=\"...\"\r\n                    className=\"img-fluid\"\r\n                    src={require(\"assets/img/theme/landing-2.png\")}\r\n                  />\r\n                </Col>\r\n                <Col md=\"6\">\r\n                  <div className=\"pr-md-5\">\r\n                    <h1>Example pages</h1>\r\n                    <p>\r\n                      If you want to get inspiration or just show something\r\n                      directly to your clients, you can jump start your\r\n                      development with our pre-built example pages.\r\n                    </p>\r\n                    <Link\r\n                      className=\"font-weight-bold text-warning mt-5\"\r\n                      to=\"/admin/profile\"\r\n                    >\r\n                      Explore pages\r\n                    </Link>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n          <section className=\"py-6\">\r\n            <Container>\r\n              <Row className=\"row-grid align-items-center\">\r\n                <Col className=\"order-md-2\" md=\"6\">\r\n                  <img\r\n                    alt=\"...\"\r\n                    className=\"img-fluid\"\r\n                    src={require(\"assets/img/theme/landing-3.png\")}\r\n                  />\r\n                </Col>\r\n                <Col className=\"order-md-1\" md=\"6\">\r\n                  <div className=\"pr-md-5\">\r\n                    <h1>Lovable widgets and cards</h1>\r\n                    <p>\r\n                      We love cards and everybody on the web seems to. We have\r\n                      gone above and beyond with options for you to organise\r\n                      your information. From cards designed for content, to\r\n                      pricing cards or user profiles, you will have many options\r\n                      to choose from.\r\n                    </p>\r\n                    <Link\r\n                      className=\"font-weight-bold text-info mt-5\"\r\n                      to=\"/admin/widgets\"\r\n                    >\r\n                      Explore widgets\r\n                    </Link>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n          <section className=\"py-7 section-nucleo-icons bg-white overflow-hidden\">\r\n            <Container>\r\n              <Row className=\"justify-content-center\">\r\n                <Col className=\"text-center\" lg=\"8\">\r\n                  <h2 className=\"display-3\">Nucleo Icons</h2>\r\n                  <p className=\"lead\">\r\n                    The official package contains over 21.000 icons which are\r\n                    looking great in combination with Argon Design System. Make\r\n                    sure you check all of them and use those that you like the\r\n                    most.\r\n                  </p>\r\n                  <div className=\"btn-wrapper\">\r\n                    <Button\r\n                      color=\"info\"\r\n                      href=\"https://demos.creative-tim.com/argon-dashboard-pro-react/#/documentation/icons?ref=adpr-index-page\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      View demo icons\r\n                    </Button>\r\n                    <Button\r\n                      className=\"mt-3 mt-md-0\"\r\n                      color=\"default\"\r\n                      href=\"https://nucleoapp.com/?ref=1712\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      View all icons\r\n                    </Button>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n              <div className=\"blur--hover\">\r\n                <a\r\n                  href=\"https://demos.creative-tim.com/argon-dashboard-pro-react/#/documentation/icons?ref=adpr-index-page\"\r\n                  target=\"_blank\"\r\n                >\r\n                  <div className=\"icons-container blur-item mt-5\">\r\n                    <i className=\"icon ni ni-diamond\" />\r\n\r\n                    <i className=\"icon icon-sm ni ni-album-2\" />\r\n                    <i className=\"icon icon-sm ni ni-app\" />\r\n                    <i className=\"icon icon-sm ni ni-atom\" />\r\n\r\n                    <i className=\"icon ni ni-bag-17\" />\r\n                    <i className=\"icon ni ni-bell-55\" />\r\n                    <i className=\"icon ni ni-credit-card\" />\r\n\r\n                    <i className=\"icon icon-sm ni ni-briefcase-24\" />\r\n                    <i className=\"icon icon-sm ni ni-building\" />\r\n                    <i className=\"icon icon-sm ni ni-button-play\" />\r\n\r\n                    <i className=\"icon ni ni-calendar-grid-58\" />\r\n                    <i className=\"icon ni ni-camera-compact\" />\r\n                    <i className=\"icon ni ni-chart-bar-32\" />\r\n                  </div>\r\n                  <span className=\"blur-hidden h5 text-success\">\r\n                    Eplore all the 21.000+ Nucleo Icons\r\n                  </span>\r\n                </a>\r\n              </div>\r\n            </Container>\r\n          </section>\r\n          <section className=\"py-7\">\r\n            <Container>\r\n              <Row className=\"row-grid justify-content-center\">\r\n                <Col className=\"text-center\" lg=\"8\">\r\n                  <h2 className=\"display-3\">\r\n                    Do you love this awesome{\" \"}\r\n                    <span className=\"text-success\">\r\n                      Dashboard for Bootstrap 4, React and Reactstrap?\r\n                    </span>\r\n                  </h2>\r\n                  <p className=\"lead\">\r\n                    Cause if you do, it can be yours now. Hit the button below\r\n                    to navigate to get the free version or purchase a license\r\n                    for your next project. Build a new web app or give an old\r\n                    Bootstrap project a new look!\r\n                  </p>\r\n                  <div className=\"btn-wrapper\">\r\n                    <Button\r\n                      className=\"btn-neutral mb-3 mb-sm-0\"\r\n                      color=\"default\"\r\n                      href=\"https://www.creative-tim.com/product/argon-dashboard-react?ref=adpr-index-page\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      <span className=\"btn-inner--text\">Get FREE version</span>\r\n                    </Button>\r\n                    <Button\r\n                      className=\"btn-icon mb-3 mb-sm-0\"\r\n                      color=\"info\"\r\n                      href=\"https://www.creative-tim.com/product/argon-dashboard-pro-react?ref=adpr-index-page\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      <span className=\"btn-inner--icon\">\r\n                        <i className=\"ni ni-basket\" />\r\n                      </span>\r\n                      <span className=\"btn-inner--text\">Purchase now</span>\r\n                      <Badge\r\n                        className=\"badge-md badge-floating border-white\"\r\n                        color=\"danger\"\r\n                        pill\r\n                      >\r\n                        $89\r\n                      </Badge>\r\n                    </Button>\r\n                  </div>\r\n                  <div className=\"text-center\">\r\n                    <h4 className=\"display-4 mb-5 mt-5\">\r\n                      Available on these technologies\r\n                    </h4>\r\n                    <Row className=\"justify-content-center\">\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro?ref=adpr-index-page\"\r\n                          id=\"tooltip170669606\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle shadow shadow-lg--hover\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/bootstrap.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip170669606\"\r\n                        >\r\n                          Bootstrap 4 - Most popular front-end component library\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro-react?ref=adpr-index-page\"\r\n                          id=\"tooltip374813715\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip374813715\"\r\n                        >\r\n                          React - A JavaScript library for building user\r\n                          interfaces\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro-nodejs?ref=adpr-index-page\"\r\n                          id=\"tooltip374813716\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nodejs-logo.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip374813716\"\r\n                        >\r\n                          Node.js - a JavaScript runtime built on Chrome's V8\r\n                          JavaScript engine\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro-laravel?ref=adpr-index-page\"\r\n                          id=\"tooltip374813717\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/laravel_logo.png\"\r\n                            style={{ backgroundColor: \"white\" }}\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip374813717\"\r\n                        >\r\n                          Laravel - The PHP Framework For Web Artisans\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/vue-argon-dashboard-pro?ref=adpr-index-page\"\r\n                          id=\"tooltip616015001\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip616015001\"\r\n                        >\r\n                          Vue.js - The progressive javascript framework\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro-angular?ref=adpr-index-page\"\r\n                          id=\"tooltip211254026\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip211254026\"\r\n                        >\r\n                          Angular - One framework. Mobile & desktop\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.creative-tim.com/product/argon-dashboard-pro-react?ref=adpr-index-page\"\r\n                          id=\"tooltip82987604\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip delay={0} target=\"tooltip82987604\">\r\n                          Sketch - Digital design toolkit\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                      <Col className=\"my-2\" md=\"2\" xs=\"3\">\r\n                        <a\r\n                          href=\"https://www.adobe.com/products/photoshop.html?ref=creative-tim\"\r\n                          id=\"tooltip731835410\"\r\n                          target=\"_blank\"\r\n                        >\r\n                          <img\r\n                            alt=\"...\"\r\n                            className=\"img-fluid rounded-circle opacity-3\"\r\n                            src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/ps.jpg\"\r\n                          />\r\n                        </a>\r\n                        <UncontrolledTooltip\r\n                          delay={0}\r\n                          target=\"tooltip731835410\"\r\n                        >\r\n                          Adobe Photoshop - Software for digital images\r\n                          manipulation\r\n                        </UncontrolledTooltip>\r\n                      </Col>\r\n                    </Row>\r\n                  </div>\r\n                </Col>\r\n              </Row>\r\n            </Container>\r\n          </section>\r\n        </div>\r\n        <AuthFooter />\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default Index;\r\n","import 'react-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\n\r\n/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nimport React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// react library for routing\r\nimport { BrowserRouter, Route, Switch, Redirect ,useLocation} from \"react-router-dom\";\r\n\r\n// bootstrap rtl for rtl support page\r\nimport \"assets/vendor/bootstrap-rtl/bootstrap-rtl.scss\";\r\n// plugins styles from node_modules\r\nimport \"react-notification-alert/dist/animate.css\";\r\nimport \"react-perfect-scrollbar/dist/css/styles.css\";\r\n// plugins styles downloaded\r\nimport \"assets/vendor/fullcalendar/dist/fullcalendar.min.css\";\r\nimport \"assets/vendor/sweetalert2/dist/sweetalert2.min.css\";\r\nimport \"assets/vendor/select2/dist/css/select2.min.css\";\r\nimport \"assets/vendor/quill/dist/quill.core.css\";\r\nimport \"assets/vendor/nucleo/css/nucleo.css\";\r\nimport \"assets/vendor/@fortawesome/fontawesome-free/css/all.min.css\";\r\n// core styles\r\nimport \"assets/scss/argon-dashboard-pro-react.scss?v1.1.0\";\r\n\r\nimport AdminLayout from \"layouts/Admin.js\";\r\nimport RTLLayout from \"layouts/RTL.js\";\r\nimport AuthLayout from \"layouts/Auth.js\";\r\nimport IndexView from \"views/Index.js\";\r\nimport FullScreenLayout from \"layouts/FullScreen\"\r\n\r\nfunction NoMatch() {\r\n    let location = useLocation();\r\n\r\n    return (\r\n        <div>\r\n            <h3>\r\n                No match for <code>{location.pathname}</code>\r\n            </h3>\r\n        </div>\r\n    );\r\n}\r\n\r\nReactDOM.render(\r\n  <BrowserRouter>\r\n    <Switch>\r\n      <Route path=\"/admin\" render={props => <AdminLayout {...props} />} />\r\n      <Route path=\"/capture\" render={props => <FullScreenLayout {...props} />} />\r\n      <Route path=\"/rtl\" render={props => <RTLLayout {...props} />} />\r\n      <Route path=\"/auth\" render={props => <AuthLayout {...props} />} />\r\n      <Redirect from = \"*\" to=\"/capture/preferences\" />\r\n    </Switch>\r\n  </BrowserRouter>,\r\n  document.getElementById(\"root\")\r\n);\r\n","module.exports = __webpack_public_path__ + \"static/media/img-1-1000x600.35a52547.jpg\";","module.exports = __webpack_public_path__ + \"static/media/team-1.53033970.jpg\";","module.exports = __webpack_public_path__ + \"static/media/team-2.dcfcf3b7.jpg\";","module.exports = __webpack_public_path__ + \"static/media/team-3.497bb359.jpg\";","module.exports = __webpack_public_path__ + \"static/media/team-4.23007132.jpg\";","/*!\r\n\r\n=========================================================\r\n* Argon Dashboard PRO React - v1.1.0\r\n=========================================================\r\n\r\n* Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-react\r\n* Copyright 2020 Creative Tim (https://www.creative-tim.com)\r\n\r\n* Coded by Creative Tim\r\n\r\n=========================================================\r\n\r\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\n*/\r\nconst Chart = require(\"chart.js\");\r\n// Only for demo purposes - return a random number to generate datasets\r\nvar randomScalingFactor = function() {\r\n  return Math.round(Math.random() * 100);\r\n};\r\n\r\n//\r\n// Chart extension for making the bars rounded\r\n// Code from: https://codepen.io/jedtrow/full/ygRYgo\r\n//\r\n\r\nChart.elements.Rectangle.prototype.draw = function() {\r\n  var ctx = this._chart.ctx;\r\n  var vm = this._view;\r\n  var left, right, top, bottom, signX, signY, borderSkipped, radius;\r\n  var borderWidth = vm.borderWidth;\r\n  // Set Radius Here\r\n  // If radius is large enough to cause drawing errors a max radius is imposed\r\n  var cornerRadius = 6;\r\n\r\n  if (!vm.horizontal) {\r\n    // bar\r\n    left = vm.x - vm.width / 2;\r\n    right = vm.x + vm.width / 2;\r\n    top = vm.y;\r\n    bottom = vm.base;\r\n    signX = 1;\r\n    signY = bottom > top ? 1 : -1;\r\n    borderSkipped = vm.borderSkipped || \"bottom\";\r\n  } else {\r\n    // horizontal bar\r\n    left = vm.base;\r\n    right = vm.x;\r\n    top = vm.y - vm.height / 2;\r\n    bottom = vm.y + vm.height / 2;\r\n    signX = right > left ? 1 : -1;\r\n    signY = 1;\r\n    borderSkipped = vm.borderSkipped || \"left\";\r\n  }\r\n\r\n  // Canvas doesn't allow us to stroke inside the width so we can\r\n  // adjust the sizes to fit if we're setting a stroke on the line\r\n  if (borderWidth) {\r\n    // borderWidth shold be less than bar width and bar height.\r\n    var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));\r\n    borderWidth = borderWidth > barSize ? barSize : borderWidth;\r\n    var halfStroke = borderWidth / 2;\r\n    // Adjust borderWidth when bar top position is near vm.base(zero).\r\n    var borderLeft = left + (borderSkipped !== \"left\" ? halfStroke * signX : 0);\r\n    var borderRight =\r\n      right + (borderSkipped !== \"right\" ? -halfStroke * signX : 0);\r\n    var borderTop = top + (borderSkipped !== \"top\" ? halfStroke * signY : 0);\r\n    var borderBottom =\r\n      bottom + (borderSkipped !== \"bottom\" ? -halfStroke * signY : 0);\r\n    // not become a vertical line?\r\n    if (borderLeft !== borderRight) {\r\n      top = borderTop;\r\n      bottom = borderBottom;\r\n    }\r\n    // not become a horizontal line?\r\n    if (borderTop !== borderBottom) {\r\n      left = borderLeft;\r\n      right = borderRight;\r\n    }\r\n  }\r\n\r\n  ctx.beginPath();\r\n  ctx.fillStyle = vm.backgroundColor;\r\n  ctx.strokeStyle = vm.borderColor;\r\n  ctx.lineWidth = borderWidth;\r\n\r\n  // Corner points, from bottom-left to bottom-right clockwise\r\n  // | 1 2 |\r\n  // | 0 3 |\r\n  var corners = [[left, bottom], [left, top], [right, top], [right, bottom]];\r\n\r\n  // Find first (starting) corner with fallback to 'bottom'\r\n  var borders = [\"bottom\", \"left\", \"top\", \"right\"];\r\n  var startCorner = borders.indexOf(borderSkipped, 0);\r\n  if (startCorner === -1) {\r\n    startCorner = 0;\r\n  }\r\n\r\n  function cornerAt(index) {\r\n    return corners[(startCorner + index) % 4];\r\n  }\r\n\r\n  // Draw rectangle from 'startCorner'\r\n  var corner = cornerAt(0);\r\n  ctx.moveTo(corner[0], corner[1]);\r\n\r\n  for (var i = 1; i < 4; i++) {\r\n    corner = cornerAt(i);\r\n    let nextCornerId = i + 1;\r\n    if (nextCornerId === 4) {\r\n      nextCornerId = 0;\r\n    }\r\n\r\n    // let nextCorner = cornerAt(nextCornerId);\r\n\r\n    let width = corners[2][0] - corners[1][0];\r\n    let height = corners[0][1] - corners[1][1];\r\n    let x = corners[1][0];\r\n    let y = corners[1][1];\r\n    // eslint-disable-next-line\r\n    var radius: any = cornerRadius;\r\n\r\n    // Fix radius being too large\r\n    if (radius > height / 2) {\r\n      radius = height / 2;\r\n    }\r\n    if (radius > width / 2) {\r\n      radius = width / 2;\r\n    }\r\n\r\n    ctx.moveTo(x + radius, y);\r\n    ctx.lineTo(x + width - radius, y);\r\n    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\r\n    ctx.lineTo(x + width, y + height - radius);\r\n    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\r\n    ctx.lineTo(x + radius, y + height);\r\n    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\r\n    ctx.lineTo(x, y + radius);\r\n    ctx.quadraticCurveTo(x, y, x + radius, y);\r\n  }\r\n\r\n  ctx.fill();\r\n  if (borderWidth) {\r\n    ctx.stroke();\r\n  }\r\n};\r\n\r\nvar mode = \"light\"; //(themeMode) ? themeMode : 'light';\r\nvar fonts = {\r\n  base: \"Open Sans\"\r\n};\r\n\r\n// Colors\r\nvar colors = {\r\n  gray: {\r\n    100: \"#f6f9fc\",\r\n    200: \"#e9ecef\",\r\n    300: \"#dee2e6\",\r\n    400: \"#ced4da\",\r\n    500: \"#adb5bd\",\r\n    600: \"#8898aa\",\r\n    700: \"#525f7f\",\r\n    800: \"#32325d\",\r\n    900: \"#212529\"\r\n  },\r\n  theme: {\r\n    default: \"#172b4d\",\r\n    primary: \"#5e72e4\",\r\n    secondary: \"#f4f5f7\",\r\n    info: \"#11cdef\",\r\n    success: \"#2dce89\",\r\n    danger: \"#f5365c\",\r\n    warning: \"#fb6340\"\r\n  },\r\n  black: \"#12263F\",\r\n  white: \"#FFFFFF\",\r\n  transparent: \"transparent\"\r\n};\r\n\r\n// Methods\r\n\r\n// Chart.js global options\r\nfunction chartOptions() {\r\n  // Options\r\n  var options = {\r\n    defaults: {\r\n      global: {\r\n        responsive: true,\r\n        maintainAspectRatio: false,\r\n        defaultColor: mode === \"dark\" ? colors.gray[700] : colors.gray[600],\r\n        defaultFontColor: mode === \"dark\" ? colors.gray[700] : colors.gray[600],\r\n        defaultFontFamily: fonts.base,\r\n        defaultFontSize: 13,\r\n        layout: {\r\n          padding: 0\r\n        },\r\n        legend: {\r\n          display: false,\r\n          position: \"bottom\",\r\n          labels: {\r\n            usePointStyle: true,\r\n            padding: 16\r\n          }\r\n        },\r\n        elements: {\r\n          point: {\r\n            radius: 0,\r\n            backgroundColor: colors.theme[\"primary\"]\r\n          },\r\n          line: {\r\n            tension: 0.4,\r\n            borderWidth: 4,\r\n            borderColor: colors.theme[\"primary\"],\r\n            backgroundColor: colors.transparent,\r\n            borderCapStyle: \"rounded\"\r\n          },\r\n          rectangle: {\r\n            backgroundColor: colors.theme[\"warning\"]\r\n          },\r\n          arc: {\r\n            backgroundColor: colors.theme[\"primary\"],\r\n            borderColor: mode === \"dark\" ? colors.gray[800] : colors.white,\r\n            borderWidth: 1\r\n          }\r\n        },\r\n        tooltips: {\r\n          enabled: true,\r\n          mode: \"index\",\r\n          intersect: false\r\n        }\r\n      },\r\n      doughnut: {\r\n        cutoutPercentage: 83,\r\n        legendCallback: function(chart) {\r\n          var data = chart.data;\r\n          var content = \"\";\r\n\r\n          data.labels.forEach(function(label, index) {\r\n            var bgColor = data.datasets[0].backgroundColor[index];\r\n\r\n            content += '<span class=\"chart-legend-item\">';\r\n            content +=\r\n              '<i class=\"chart-legend-indicator\" style=\"background-color: ' +\r\n              bgColor +\r\n              '\"></i>';\r\n            content += label;\r\n            content += \"</span>\";\r\n          });\r\n\r\n          return content;\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  // yAxes\r\n  Chart.scaleService.updateScaleDefaults(\"linear\", {\r\n    gridLines: {\r\n      borderDash: [2],\r\n      borderDashOffset: [2],\r\n      color: mode === \"dark\" ? colors.gray[900] : colors.gray[300],\r\n      drawBorder: false,\r\n      drawTicks: false,\r\n      lineWidth: 1,\r\n      zeroLineWidth: 1,\r\n      zeroLineColor: mode === \"dark\" ? colors.gray[900] : colors.gray[300],\r\n      zeroLineBorderDash: [2],\r\n      zeroLineBorderDashOffset: [2]\r\n    },\r\n    ticks: {\r\n      beginAtZero: true,\r\n      padding: 10,\r\n      callback: function(value) {\r\n        if (!(value % 10)) {\r\n          return value;\r\n        }\r\n      }\r\n    }\r\n  });\r\n\r\n  // xAxes\r\n  Chart.scaleService.updateScaleDefaults(\"category\", {\r\n    gridLines: {\r\n      drawBorder: false,\r\n      drawOnChartArea: false,\r\n      drawTicks: false\r\n    },\r\n    ticks: {\r\n      padding: 20\r\n    }\r\n  });\r\n\r\n  return options;\r\n}\r\n\r\n// Parse global options\r\nfunction parseOptions(parent, options) {\r\n  for (var item in options) {\r\n    if (typeof options[item] !== \"object\") {\r\n      parent[item] = options[item];\r\n    } else {\r\n      parseOptions(parent[item], options[item]);\r\n    }\r\n  }\r\n}\r\n\r\n// Example 1 of Chart inside src/views/dashboards/Dashboard.js\r\nlet chartExample1 = {\r\n  options: {\r\n    scales: {\r\n      yAxes: [\r\n        {\r\n          gridLines: {\r\n            color: colors.gray[700],\r\n            zeroLineColor: colors.gray[700]\r\n          },\r\n          ticks: {\r\n            callback: function(value) {\r\n              if (!(value % 10)) {\r\n                return \"$\" + value + \"k\";\r\n              }\r\n            }\r\n          }\r\n        }\r\n      ]\r\n    },\r\n    tooltips: {\r\n      callbacks: {\r\n        label: function(item, data) {\r\n          var label = data.datasets[item.datasetIndex].label || \"\";\r\n          var yLabel = item.yLabel;\r\n          var content = \"\";\r\n\r\n          if (data.datasets.length > 1) {\r\n            content += label;\r\n          }\r\n\r\n          content += \"$\" + yLabel + \"k\";\r\n          return content;\r\n        }\r\n      }\r\n    }\r\n  },\r\n  data1: canvas => {\r\n    return {\r\n      labels: [\"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n      datasets: [\r\n        {\r\n          label: \"Performance\",\r\n          data: [0, 20, 10, 30, 15, 40, 20, 60, 60]\r\n        }\r\n      ]\r\n    };\r\n  },\r\n  data2: canvas => {\r\n    return {\r\n      labels: [\"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n      datasets: [\r\n        {\r\n          label: \"Performance\",\r\n          data: [0, 20, 5, 25, 10, 30, 15, 40, 40]\r\n        }\r\n      ]\r\n    };\r\n  }\r\n};\r\n\r\n// Example 2 of Chart inside src/views/dashboards/Dashboard.js and src/views/dashboards/Alternative.js and src/views/pages/Charts.js\r\nlet chartExample2 = {\r\n  options: {\r\n    scales: {\r\n      yAxes: [\r\n        {\r\n          gridLines: {\r\n            color: colors.gray[200],\r\n            zeroLineColor: colors.gray[200]\r\n          },\r\n          ticks: {\r\n            callback: function(value) {\r\n              if (!(value % 10)) {\r\n                //return '$' + value + 'k'\r\n                return value;\r\n              }\r\n            }\r\n          }\r\n        }\r\n      ]\r\n    },\r\n    tooltips: {\r\n      callbacks: {\r\n        label: function(item, data) {\r\n          var label = data.datasets[item.datasetIndex].label || \"\";\r\n          var yLabel = item.yLabel;\r\n          var content = \"\";\r\n          if (data.datasets.length > 1) {\r\n            content += label;\r\n          }\r\n          content += yLabel;\r\n          return content;\r\n        }\r\n      }\r\n    }\r\n  },\r\n  data: {\r\n    labels: [\"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n    datasets: [\r\n      {\r\n        label: \"Sales\",\r\n        data: [25, 20, 30, 22, 17, 29],\r\n        maxBarThickness: 10\r\n      }\r\n    ]\r\n  }\r\n};\r\n\r\n// Example 3 of Chart inside src/views/dashboards/Alternative.js and src/views/pages/Charts.js\r\nlet chartExample3 = {\r\n  options: {\r\n    scales: {\r\n      yAxes: [\r\n        {\r\n          gridLines: {\r\n            color: colors.gray[200],\r\n            zeroLineColor: colors.gray[200]\r\n          },\r\n          ticks: {}\r\n        }\r\n      ]\r\n    }\r\n  },\r\n  data: {\r\n    labels: [\"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n    datasets: [\r\n      {\r\n        label: \"Performance\",\r\n        data: [0, 20, 10, 30, 15, 40, 20, 60, 60]\r\n      }\r\n    ]\r\n  }\r\n};\r\n\r\n// Example 4 of Chart inside src/views/pages/Charts.js\r\nconst chartExample4 = {\r\n  options: {\r\n    scales: {\r\n      yAxes: [\r\n        {\r\n          gridLines: {\r\n            color: colors.gray[200],\r\n            zeroLineColor: colors.gray[200]\r\n          },\r\n          ticks: {}\r\n        }\r\n      ]\r\n    }\r\n  },\r\n  data: {\r\n    labels: [\"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\r\n    datasets: [\r\n      {\r\n        label: \"Performance\",\r\n        data: [10, 18, 28, 23, 28, 40, 36, 46, 52],\r\n        pointRadius: 10,\r\n        pointHoverRadius: 15,\r\n        showLine: false\r\n      }\r\n    ]\r\n  }\r\n};\r\n\r\n// Example 5 of Chart inside src/views/pages/Charts.js\r\nconst chartExample5 = {\r\n  data: {\r\n    labels: [\"Danger\", \"Warning\", \"Success\", \"Primary\", \"Info\"],\r\n    datasets: [\r\n      {\r\n        data: [\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor()\r\n        ],\r\n        backgroundColor: [\r\n          colors.theme[\"danger\"],\r\n          colors.theme[\"warning\"],\r\n          colors.theme[\"success\"],\r\n          colors.theme[\"primary\"],\r\n          colors.theme[\"info\"]\r\n        ],\r\n        label: \"Dataset 1\"\r\n      }\r\n    ]\r\n  },\r\n  options: {\r\n    responsive: true,\r\n    legend: {\r\n      position: \"top\"\r\n    },\r\n    animation: {\r\n      animateScale: true,\r\n      animateRotate: true\r\n    }\r\n  }\r\n};\r\n\r\n// Example 6 of Chart inside src/views/pages/Charts.js\r\nconst chartExample6 = {\r\n  data: {\r\n    labels: [\"Danger\", \"Warning\", \"Success\", \"Primary\", \"Info\"],\r\n    datasets: [\r\n      {\r\n        data: [\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor()\r\n        ],\r\n        backgroundColor: [\r\n          colors.theme[\"danger\"],\r\n          colors.theme[\"warning\"],\r\n          colors.theme[\"success\"],\r\n          colors.theme[\"primary\"],\r\n          colors.theme[\"info\"]\r\n        ],\r\n        label: \"Dataset 1\"\r\n      }\r\n    ]\r\n  },\r\n  options: {\r\n    responsive: true,\r\n    legend: {\r\n      position: \"top\"\r\n    },\r\n    animation: {\r\n      animateScale: true,\r\n      animateRotate: true\r\n    }\r\n  }\r\n};\r\n\r\n// Example 7 of Chart inside src/views/pages/Charts.js\r\nconst chartExample7 = {\r\n  data: {\r\n    labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"],\r\n    datasets: [\r\n      {\r\n        label: \"Dataset 1\",\r\n        backgroundColor: colors.theme[\"danger\"],\r\n        data: [\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor()\r\n        ],\r\n        maxBarThickness: 10\r\n      },\r\n      {\r\n        label: \"Dataset 2\",\r\n        backgroundColor: colors.theme[\"primary\"],\r\n        data: [\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor()\r\n        ],\r\n        maxBarThickness: 10\r\n      },\r\n      {\r\n        label: \"Dataset 3\",\r\n        backgroundColor: colors.theme[\"success\"],\r\n        data: [\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor(),\r\n          randomScalingFactor()\r\n        ],\r\n        maxBarThickness: 10\r\n      }\r\n    ]\r\n  },\r\n  options: {\r\n    tooltips: {\r\n      mode: \"index\",\r\n      intersect: false\r\n    },\r\n    responsive: true,\r\n    scales: {\r\n      xAxes: [\r\n        {\r\n          stacked: true\r\n        }\r\n      ],\r\n      yAxes: [\r\n        {\r\n          stacked: true\r\n        }\r\n      ]\r\n    }\r\n  }\r\n};\r\n\r\nmodule.exports = {\r\n  chartOptions, // used alonside with the chartExamples variables\r\n  parseOptions, // used alonside with the chartExamples variables\r\n  chartExample1, // used inside src/views/dashboards/Dashboard.js\r\n  chartExample2, // used inside src/views/dashboards/Dashboard.js and src/views/dashboards/Alternative.js and src/views/pages/Charts.js\r\n  chartExample3, // used inside src/views/dashboards/Alternative.js and src/views/pages/Charts.js\r\n  chartExample4, // used inside src/views/pages/Charts.js\r\n  chartExample5, // used inside src/views/pages/Charts.js\r\n  chartExample6, // used inside src/views/pages/Charts.js\r\n  chartExample7 // used inside src/views/pages/Charts.js\r\n};\r\n","module.exports = __webpack_public_path__ + \"static/media/google.87be59a1.svg\";","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAARCAYAAAA2cze9AAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8+9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a/cdZ39nnt9fZZ+9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU/L09mZmoSMaz9u4ugGS72yy/UCZz1v9/kSI3QyQGAApF1TY8fiYX5QKUU7PFGTL/BMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0/icTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ+SKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM/0tAyOMBeAr2+WRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T/T3IevtV8Sbsz55BjJ5Z32zsrC+9FgD2JFqbHbO+lVUAtG0GQOXhrE/vIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN/ufgm/Kv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k/fcQ/+PAOWnNycMsnJ/AF/GF6FVR6JQJhIlou4U8gViQLmQKhH/V4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi+vGitka9zjzJ6/uf6Hwtcim7hTEEiU+b2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D+qAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG/AALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw/XjLuA68MN4SbxeLwq3hTvgg/Bc/BifCG+Cn8cfx7fjx/GvyeQCVoEa4IPIZYgJGwkVBAaCOcI/YQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I/UJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl/OX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r+pvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek+9OT6cX0H+i99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj/M05rnP48/bNq9pXv+8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq+9Uuq43Pp893ns+dXzT/5PyH6rC6iXq4+mr1w+o96pMamhq+GhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE+pN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t/ysDQINpgi0GbwaihiqG/YZ5ho+FjI6qRq9Eqo1qjO8Y4Y7ZxivE+41smsImdSZJJjclNU9jU3lRgus+0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m/krCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw+sPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr/tfTuaXbDdFrtOu8/2DvYi+yb7MQc9h3iHvQ732HR2KLuEfdUR6+jhuM7xjOMHJ3snsdNJp9+dWc4pzg3OowsMF/AX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24+ysPSw+RR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c+Oj6JPo0+E752vqt9L/hh/QL9dvrd89fw5/rX+08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC/EN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAABn0lEQVQ4EaWUzU6DQBCAZ4OVgxaCPxe5+A6+gT/pU3jyDdTHaB9BLz6AJ28kXrwZbzaSaNJLPfhbgcJCA6w7C1QDS1raSSY77M58M5lhlwAAKSn/XEoYjxa6wg3S6XROWq1WN4oiLUmShcmKooCqqm4YhueWZV0IOIf2DMNom6ZZARNCgDEGuKIUNq4ycRxH832/y88uBdx13bau60AprfjPgpWTIwAT8IUgHDzPA54NzcYiS448FAHHim3bbgyeFSDgd5s7sLV/lPliL7G/NT2tAAvffCYY93lrwe5wmFWeeC7Q/mMlbtEN5KGIytMwBBZUh7koPKXhHzwOAkidLFtjoKSNcZD9HKLyOKTw8dxvzJUG4HXIr4CA6zeHYO4d57548s9jameXSAosbb4+XAEcXGc9Z/QN2Oi+5JJ/Fnnq2OVaeBgL3kVwNtCIDzMpei7xlqet3U0nwRTOHJr621/2mqpt1AbMexC53+BQhnSGlbPBT3QKTy89A8brCovn5VT8Ev6ajEAbD8bqGXKxk6irXNtcFa7LCr7Z+LhMfgGH2rze/6RsZgAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/img-1-1000x900.b20ea51c.jpg\";","module.exports = __webpack_public_path__ + \"static/media/github.4ffd4fe7.svg\";","module.exports = __webpack_public_path__ + \"static/media/profile-cover.e2582654.jpg\";","module.exports = __webpack_public_path__ + \"static/media/bootstrap.ab904daa.jpg\";","module.exports = __webpack_public_path__ + \"static/media/angular.368685db.jpg\";","module.exports = __webpack_public_path__ + \"static/media/sketch.e7c82e5c.jpg\";","module.exports = __webpack_public_path__ + \"static/media/react.c4eb3d0b.jpg\";","module.exports = __webpack_public_path__ + \"static/media/vue.9378e368.jpg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAYAAABqpJ3BAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABUBJREFUWIXtll1MU2cYx3/v4bOFuGJFQM6K6BzF+hm4GItRA4kMLyQxmiUSl3jRC5ELpxIvnEvYhYlLlqBRs6saZBcYd+HMgNu5RZwZ0RQlpYU5tKWlKS2wtceh7Xl3UT2M+bFNlzCM/6uT8z7Pe/6/93mfJ0domlam6/pXwPuKoij8z6XrulQUZUxK2Wk2mz8V8Xj8B0VRNs23sZeRlPKEiMfjqYVw8s+Srut+ZaGafyx1IZtHURSxoAEA3gDMt15jgNQM4lH8hcmpVOq/9vOv9TRAxI3oaUJ0rIULGxAXt8AdF8hZsyMjIzQ3N3Pp0qU5qaFQiJaWFlwu1ysbu3LlCk6nk+Hh4X8OIPzfIb79EEI3QCjIggqYmUTcOIG42gpIAG7fvk00GsVut8/ZzO/3E4lEkFLS09NDa2srwWDwpQAGBgZIJBJkZma+MG529ZEGV1tBTyILKhDVhyDTBN6LcLcbfr4CZdug/AOGhoYQQpCfn084HKaoqAiAdevWcfLkSVRV5ejRo8RiMfLz89E0DbPZDEA4HCYajVJUVITVakVKydjYGIlEgrKyMnJzcwHYv38/Dx8+pKSkhOnpaSKRCDk5OaiqihDiGQCB72FmMl2JSS+yYBX0tSHfO46IDsL0KAx/jV62DZ/Ph5SSY8eOAbBr1y52797NqVOnuHnzJu3t7QQCAQCcTiebNm1i3759nD59GrfbDYDJZKK9vZ1z584Z7ywWC21tbWRlZdHc3ExNTQ0Wi4Xe3l7DpsPh4Pjx4wbELMD03dm65JVAVh6ivB6pKPD7VBrsNz9+vx9N01i7di0NDQ24XC4uX75MY2MjXq8XVVUJhUIAbN68GYfDQXl5OWfOnMHtdtPY2IjD4UBKSUdHB263m6amJlKpFF1dXfT09BhXs7Kyku7ubhYtWsSBAwfo6upicHCQYDBIaWkp8KceELkF6YeMHGTVx+C/CjdOgKkQlMecOW8xNDQEQG1tLVVVVaxatYpkMonX6yWRSGC3242Y+vp6tm7dSm5uLrdu3WLjxo3s2bOH9evXs3z5cvr6+qiqqmLHjh3U1dUBMDU1ZeQXFxcTDodZvXo1GzZsMK7qk2s2B0Cqm0FkpKdNZAAK3kE2XECMfAMPJtIxb9cam9vtdnRdZ3R0FLPZzPj4uPHe6/WSnZ1NeXk5gNHIqqoaHx4bGwNgxYoVAEbViouL8Xg8mEwm4vG4UQlITz+LxcLixYufBiC/FNY5QU8ifulF/PQ59HwE1z5Jr1tWICv34vF4sFgspFIpXC4XoVCI7du34/P5DIBIJEJmZibBYJDR0VEsFguQniyBQACPx0NeXh4APp+P+/fv09nZiRCC6upq/H6/cRBP9pyYmGBiYoLKysrnNDEgqw4hlCwY+BKCP2KELatBbvmC6K8PmJxMN3pLSwsAdXV17Ny5k4MHD2K1WlmyZAl2u51r165x5MgRrFYrZ8+epbq6mv7+fg4fPgzA+fPnWbNmDW63G7fbTUZGBk6nE03TkFIae5jNZmw2G9evX59TjScSmqZJ/qqZSRjvh+QDxGI7suDdNODjkXfv3j10XWflypUsW7YMKSUjIyOYTCZUVSWZTHLnzh00TcNms6GqKlJKBgcHicViLF26lIqKCnRdN+Z9RUUFhYWFTE1NEYlEKCkpYXx8nOzsbGw2G9FolFgsRmlpqTGSnw+wgPQa/8wtEL0BmG8tfABd1xfsFNJ1XVcURRmbbyOvoIAipeycbxcvKyFEh5BSZmqa1ial3AuoiqKIv82cR+m6rgMBIUSH2Wz+7A/zHDgmOfiReQAAAABJRU5ErkJggg==\""],"sourceRoot":""}